Πίσω στο ευρετήριο

Register form with php and ajax Posted: 24-Feb-2020 16:39 PM

php, javascript, html tutorial
Δες το Demo Κατέβασε τα αρχεία 6 downloads

Εχουμε μια φόρμα εγγραφής στην οποία τα δεδομένα θα σταλούν με Ajax στο php αρχείο για επικύρωση.
Παρακάτω θα δούμε πως μπορούμε να στείλουμε ένα Ajax αίτημα με javascript στην php και να επικυρώσουμε τα δεδομένα της φόρμας.

Θα χρειαστούμε 3 αρχεία.

  • index.html για την html φόρμα
  • script.js για την javascript
  • script.php για τον php κώδικα

Μέσα στο index.html έχουμε την φόρμα εγγραφής όπου της έχουμε δώσει το όνομα name="register-form" για να μπορέσουμε να την στοχεύσουμε με την javascript.
Επίσης κάτω από κάθε input field έχουμε ένα tag *-error για να τυπώνουμε τα σφάλματα.


<form name="register-form" action="" method="post" enctype="multipart/form-data">
 
<h2>Register form with php and Ajax</h2>
  <fieldset>
     <legend>Όνομα Χρήστη</legend>
     <input type="text" name="username" id="username">
     <p class="error" id="username-error"></p>
  </fieldset>

  <fieldset>
     <legend>Email</legend>
     <input type="text" name="email" id="email">
     <p class="error" id="email-error"></p>
  </fieldset>

   <fieldset>
     <legend>Password</legend>
     <input type="text" name="password" id="password">
     <p class="error" id="password-error"></p>
  </fieldset>

  <fieldset>
     <legend>Confirm Password</legend>
     <input type="text" name="confirm-password" id="confirm-password">
     <p class="error" id="confirm-password-error"></p>
  </fieldset>

  <fieldset>
     <input type="submit" name="submit" value="Εγγραφή">    
     <p class="success" id="success"> success</p>
  </fieldset>
</form>

<script src="script.js"></script>

script.js


/* Σε αυτό το script θα συγκεντρώσουμε τα δεδομένα της φόρμας εγγραφής
   και θα τα στείλουμε μέσο ajax στο php αρχείο για παρ εταίρο επεξεργασία

   Η document.forms['register-form'] θα μας δώσει πρόσβαση στην φόρμα. 
*/ let form = document.forms['register-form'];

/**
   Η EventListener παρακολουθεί όλες τις ενέργειες που γίνονται στην σελίδα
   και μόλις πατήσουμε το submit button της φόρμας θα τρέξει την συνάρτηση validateForm.
*/ form.addEventListener('submit', validateForm);

/* Η συνάρτηση που θα τρέξει η addEventListener. */
function validateForm(event){
   /* 
      Με την preventDefault() αποτρέπουμε τον browser να στείλει την φόρμα σε όποιο script
      έχουμε δηλώσει στην action="" παράμετρο της φόρμας. Στην περίπτωσή μας
      η σελίδα θα ανανεώνεται και δεν θα μπορούμε να επεξεργαστούμε τα δεδομένα. 
   */ event.preventDefault();

   /*
      Πρώτα πρέπει να συγκεντρώσουμε τα δεδομένα από τα πεδία της φόρμας.
      Θα φτιάξουμε ένα αντικείμενο(object) όπου θα κρατάει τα δεδομένα.. 
      .. username, email, password, και confirm password.
   */ let values = {
         username: event.target.username.value,
         email: event.target.email.value,
         password: event.target.password.value,
         confirmPassword: event.target["confirm-password"].value
      }

   /*
       Τώρα που έχουμε το αντικείμενο values με τις τιμές των πεδίων που θέλουμε
       Θα το μετατρέψουμε σε ένα JSON αλφαριθμητικό(string) για να το στείλουμε
       στο php αρχείο για validation(επικύρωση)
   */ let jsonValues = JSON.stringify(values);

   /*
      Θα δημιουργήσουμε ενα αντικείμενο XMLHttpRequest για να επικοινωνήσουμε
      με το αρχείο php.
   */ let http = new XMLHttpRequest();

   /* 
      Με την http.open() θα επικοινωνήσουμε με την php, οι παράμετροι που πέρνει είναι:
      α. "post" είναι η μέθοδο που θα σταλέι το αίτημα(request).
      b. "script.php" είναι το php αρχείο.
      γ. "true" σημαίνει ασύγχρονο που είναι και η προκαθορισμένη ενέργεια της open().
   */ http.open('post', 'script.php', true);

   /*
      Δηλώνουμε στον server τα δεδομένα που στέλνουμε να τα αντιμετοπίσει σαν δεδομένα
      html φορμας.
   */ http.setRequestHeader("content-type", "application/x-www-form-urlencoded");

   /* Τα δεδομένα που θα στείλουμε στην php */
   http.send('register=' + jsonValues);

   /* Εδώ παρακολουθούμε την κατάσταση του αιτήματος */
   http.onreadystatechange = function(){
      /* Εάν το αίτημα έχει σταλεί */
      if(this.readyState == 4 && this.status == 200){
         /* Η responseText θα μας δίνει τις απαντήσεις της php τις οποίες
         δίνουμε σαν παράμετρο στην getRespond, που θα γράψουμε παρακάτω.                           
         */ getRespond(this.responseText);
      }
   }  
}

/* Με την getRespond() θα τυπώνουμε τα μηνύματα της php στην οθώνη */
function getRespond(msg){
  /* 
      Ας ξεκινήσουμε με τα σφάλματα, όπου όπως είδαμε στήν φόρμα κάτω από κάθε πεδίο
      έχουμε βάλει και το αντίστοιχο tag p.error όπου θα προβάλλεται το όποιο σφάλμα 
  */ 
      let usernameError = document.getElementById('username-error');  
      let emailError = document.getElementById('email-error');  
      let passwordError = document.getElementById('password-error');  
      let confirmPasswordError = document.getElementById('confirm-password-error'); 
    
  /* Εχουμε και το success μήνυμα που θα προβάλετε όταν όλα εχουν πάει καλά.*/
      let successMsg = document.getElementById('success');

  /*
      Η setError θα προβάλει τα σφάλματα που θα προκύπτουν
      στα αντίστοιχα τους πεδία.
      Η παράμετρος field, πέρνει το πεδίο σφάλματος πχ. usernameError, η passwordError
      και η παράμετρος msg το μύνημα που θέλουμε να τυπώσουμε στην οθώνη.
  */
      function setError(field, msg){
         field.style.display = 'block';
         return field.innerHTML = msg;
      }

  /*
      H clearError θα καθαρίζει το σφάλμα που θα έχει προβάλει η setError. 
      @param Η παράμετρος field, πέρνει το πεδίο σφάλματος πχ. usernameError, η passwordError
  */
      function clearError(field){
         field.style.display = '';
         return field.innerHTML = '';
      }

   /**
      Θα καθαρίζουμε κάθε φορά τα όποια σφάλματα έχουν γίνει. 
      Πρέπει να το κάνουμε μόνοι μας γιατί η σελίδα σε ένα ajax request
      δεν ανανεώνεται 
   */
      clearError(usernameError);
      clearError(emailError);
      clearError(passwordError);
      clearError(confirmPasswordError);
   /*
      Στα παρακάτω if block τσεκάρουμε το μήνυμα απο την php και
      τυπώνουμε το ανάλογο μήνυμα στο αντίστοιχα πεδίο της φόρμας
   */   
      if(msg == 'username empty'){
        return setError(usernameError, 'Το όνομα χρήστη είναι υποχρεωτικό');
      }
      
      if(msg == 'invalid characters'){
        return setError(usernameError, 'Το πεδίο δέχεται μόνο γράμματα');
      }
      
      if(msg == 'email empty'){
        return setError(emailError, 'Συμπληρώστε το email');
      }
      
      if(msg == 'invalid email'){
        return setError(emailError, 'Tο email δεν είναι έγκυρο');
      }
      
      if(msg == 'password empty'){
        return setError(passwordError, 'Συμπληρώστε ένα password');
      }

      if( msg.indexOf('pass error') != -1 ){
        let newMessage = msg.replace('pass error', "");
        return setError(passwordError, `Ειδικοί χαρακτήρες (${newMessage}) δεν επιτρέπονται`);
      }

      if(msg == 'confirm empty'){
        return setError(confirmPasswordError, 'Πληκτρολογείστε ξανά το password');
      }

      if(msg == 'confirm error'){
        return setError(confirmPasswordError, 'Το password δεν ταιριάζει');
      }

    /* Εάν όλα τα πεδία είναι έγκυρα θα τυπώσουμε το μήνυμα επυτιχούς εγγραφής */
      if(msg == 'success'){
        successMsg.style.display = 'block';
        return successMsg.innerHTML = 'Η εγγραφή ήταν επιτυχείς';   
      }     
}

Για περισότερες πληροφορίες πάνω στίς συναρτήσεις javascript που χρησιμοποιήσαμε θα βρείτε στα παρακάτω links.

script.php


/**
 * Πρώτα απ' όλα θα βεβαιωθούμε ότι τα δεδομένα έχουν σταλεί από
 * το script.js  
 */
if(isset($_POST['register'])){
  /**
   * Εφόσων έχουμε παραλάβει τα δεδομένα, τώρα πρέπει να τα μετατρέψουμε σε ενα 
   * php αντικείμενο(object). 
   */
  $user = json_decode($_POST['register']);

  /**
   * Τώρα η μεταβλητή $user είναι το αντικείμενο μας.
   * Μέσω της $user θα έχουμε πρόσβαση στις ιδιότητες της που είναι..
   * .. το username, to email, το password, και το confirmPassword.
   * Προσοχή!! οι ιδιότητες πρέπει να είναι ορθογραφικά ίδιες με αυτές
   * στην values στο javascript αρχείο και όχι με τα ονόματα των πεδίων της φόρμας. 
   */

  /**
    * Θα ξεκινήσουμε το validation με την σειρά των πεδίων όπως τα βλέπουμε στην φόρμα.
    * Με την μέθοδο trim() θα τιμαρεύουμε ότι κενό υπάρχει αριστερά και δεξιά από
    * κάθε πεδίο.
    * Πρώτο έχουμε το username.
    */
    $username = trim($user->username);

   /**
  * Ελέγχουμε αν το πεδίο είναι άδειο, αν ναι
    * στέλνουμε το μήνυμα στην javascript και η javascript θα τυπώσει το σφάλμα
    * στο πεδίο που ελέγξαμε, και θα σταματήσουμε την εκτέλεση του script.      
    */
    if($username == ""){
      echo "username empty";
      exit();
    }
  
    /* Στό username θέλουμε μόνο γράμματα */
    $pattern = '/[^a-zA-Zp{Greek}s]++/u';
    if(preg_match($pattern, $username)){
      echo "invalid characters";
      exit();
    }
    
  /**
   *  Προχωράμε στο email με την trim(), empty(), filter_var(), στο τέλος του tutorial
   *  υπάρχουν links για περισσότερες πληροφορίες για τις php συναρτήσεις που έχουμε στο script.
   */
    $email = trim($user->email);
    /* Τσεκάρουμε το email πεδίο αν είναι κενό */
    if(empty($email)){
        echo "email empty";
        exit();
    }

    /* Με την filter_var() τσεκάρουμε αν το email είναι έγκυρο */
    if(!filter_var($email, FILTER_VALIDATE_EMAIL)){
        echo "invalid email";
        exit();
    }

  /**
   * Προχωράμε με το password, θα χρησιμοποιήσουμε την preg_match(),
   *  για να αποφύγουμε κάποιους ειδικούς χαρακτήρες που θα μπορούσαν να μας 
   *  κάνουν ζημιά.
   */
    $password = trim($user->password);
    if($password == ""){
      echo "password empty";
        exit();
    }

    /* Μόνο οι χαρακτήρες που έχουμε δηλώσει στην $pattern θα γίνονται δεκτοί */
    $pattern = '/[^a-zA-Z0-9p{Greek}_-.?&%@*!]++/u';
    if(preg_match($pattern, $password, $match)){
        echo "pass error $match[0]";
        exit();
    }

    /**
     * Τελευτάια έχουμε να τσεκάρουμε το confirm password αν είναι το ιδιο
     * μα το password.
     */
    $conf_password = trim($user->confirmPassword);
    if($conf_password == ""){
      echo "confirm empty";
        exit();
    }
    if($password != $conf_password){
      echo "confirm error";
      exit();
    }

    /* Εάν όλα τα πεδία είναι έγκυρα θα τυπώσουμε το μήνυμα επιτυχούς εγγραφής */
    echo "success";
}

Για περισότερες πληροφορίες πάνω στίς συναρτήσεις που χρησιμοποιήσαμε θα βρείτε στα παρακάτω links.

Σχόλια και ερωτήσεις μέσω facebook

Παρόμοια php tutorials

Register form with php and ajax 24-Feb-2020 16:39 PM Εχουμε μια φόρμα εγγραφής στην οποία τα δεδομένα θα σταλούν με Ajax στο php αρχείο για επικύρωση. Image upload with php 17-Feb-2020 18:17 PM Σε αυτό το tutorial θα ανεβάσουμε μια φωτό στον server, και θα επικυρώσουμε (validate) αν η φωτό είναι έγκυρη.
Image resizing with php 09-Mar-2020 19:16 PM Ενα php script για να τροποποιούμε τις διαστάσεις των φωτόγραφίων κατά το upload. Uploading an article with image 01-Mar-2020 22:13 PM Έχουμε μια φόρμα με τρία πεδία, τίτλο,άρθρο, και εικόνα, θα ανεβάσουμε την εικόνα στον server και θα εισάγουμε τα στοιχεία σε μια mysql βάση. Contact form validation with php 16-Mar-2020 00:54 AM Θα επικυρώσουμε μια φόρμα επικοινωνίας με php, και θα εισάγουμε τις τιμές σε μια βάση δεδομένων.

javascript Tutorials

javascript and css slideshow 21-Feb-2020 01:27 AM Slideshow με fade effect, κείμενο, cta button, και responsive design γραμμένο σε css και javascript Image preview with javascript 19-Feb-2020 16:04 PM Άμεση απεικόνιση της εικόνας σε file upload ενέργεια Autofill select combo box 27-Feb-2020 00:10 AM Θα δούμε πως μπορούμε να συνδυάσουμε δυο select drop-down menu έτσι ώστε επιλέγοντας το πρώτο να δίνουμε τις ανάλογες τιμές στο δεύτερο. Show hide password with javascript 10-Mar-2020 23:28 PM Ένα javascript που εμφανίζει τα γράμματα όταν πληκτρολογούμε στο πεδίο password.

css Tutorials

Highlight selected menu page 12-Mar-2020 11:56 AM Έχουμε ένα οριζόντιο μενού όπου θα αλλάζουμε το background-color του link στην επιλεγμένη σελίδα. Sticky navbar με css και javascript 28-Feb-2020 18:32 PM Έχουμε ένα οριζόντιο μενού όπου θα κολλάει στήν αρχή της σελίδας όταν κάνουμε scroll. Responsive grid layout 04-Mar-2020 17:15 PM Έχουμε μια responsive ιστοσελίδα που προσαρμόζεται σε όλες τις οθόνες Resposive navbar with css and javascript 05-Mar-2020 21:24 PM Ένα responsive οριζόντιο μενού πλοήγησης για μικρή και μεγάλη οθόνη, με css και λίγη javascript.

webDev Αναφορές

PHP Net Το σπίτι της php είναι η πιο έγκυρη πηγή εκμάθησης. Javascript Μozilla MDN web docs Τα πάντα για την Javascript. Όρεξη να έχεις να διαβάζεις. CSS Μozilla MDN web docs Απο βασικά styles εως animation, εδω θα τα μάθεις όλα. Programming Notes for Professionals Μια φοβερή συλλογή από PDF αρχεία, από Android εώς C++. Αξίζει να κατεβάσετε και να μελετήσετε τα αρχεία.

PHPDev Tutorials | Site developed by PHPDev.gr Visit PHPDev

scrollTo('top')