Kalau sebelumnya kita sudah membuat tampilan header untuk memuat menu login dan register kali ini kita akan membuat user registration flow. Form pendaftaran pengguna akan menjadi bagian dari container modal yang awalnya disembunyikan. Dengan mengklik menu register, dialog form pendaftaran akan ditampilkan ke browser.
Berikut ini adalah kode HTML yang digunakan untuk menunjukkan form pendaftaran.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<div id="register-dialog" class="register-class" title="Registration Dialog Form" style="display: none;"> <form id="register-form" action="" method="post" role="form"> <div class="input-row"> <span id="first-name-info"></span> <input type="text" name="first-name" id="first-name" class="input-field" placeholder="First Name" value=""> </div> <div class="input-row"> <span id="last-name-info"></span> <input type="text" name="last-name" id="last-name" class="input-field" placeholder="Last Name" value=""> </div> <div class="input-row"> <span id="register-email-info"></span> <input type="email" name="register-email-id" id="register-email-id" class="input-field" placeholder="Email ID" value=""> </div> <div class="input-row"> <span id="contact-no-info"></span> <input type="text" name="contact-number" id="contact-number" maxlength="10" class="input-field" placeholder="Contact Number"> </div> <div class="input-row"> <span id="register-passwd-info"></span> <input type="password" name="register-password" id="register-password" class="input-field" placeholder="Password"> </div> <div class="input-row"> <span id="confirm-passwd-info"></span> <input type="password" name="confirm-password" id="confirm-password" class="input-field" placeholder="Confirm Password"> </div> <div class="submit-button"> <input type="button" class="btn-submit" value="Register" onclick="ajaxRegistration()"> </div> </form> <div class="success-message" id="register-success-message" style="display: none"></div> <div class="error-message" id="register-error-message" style="display: none"></div> </div> |
Semua bagian form wajib diisi. Dengan mengirimkan form, setelah itu sistem akan memvalidasi. Skrip validasi form jQuery diimpor dan dipanggil untuk mengirimkan form.
Dalam skrip validasi ini, saya telah menggunakan regex untuk menguji apakah bagian email, nama, dan nomor kontak memiliki format data yang valid.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<script> $(".error").text(""); $('#first-name-info').removeClass("error"); $('#last-name-info').removeClass("error"); $('#register-email-info').removeClass("error"); $('#contact-no-info').removeClass("error"); $('#register-passwd-info').removeClass("error"); $('#confirm-passwd-info').removeClass("error"); var firstName = $('#first-name').val(); var lastName = $('#last-name').val(); var emailId = $('#register-email-id').val(); var contactNumber = $('#contact-number').val(); var password = $('#register-password').val(); var confirmPassword = $('#confirm-password').val(); var actionString = 'registration'; if (firstName == "") { $('#first-name-info').addClass("error"); $(".error").text("required"); } else if (!pregMatch(firstName)) { $('#first-name-info').addClass("error"); $(".error").text('Alphabets and white space allowed'); } else if (lastName == "") { $('#last-name-info').addClass("error"); $(".error").text("required"); } else if (!pregMatch(lastName)) { $('#last-name-info').addClass("error"); $(".error").text('Alphabets and white space allowed'); } else if (emailId == "") { $('#register-email-info').addClass("error"); $(".error").text("required"); } else if (!validateEmailId(emailId)) { $('#register-email-info').addClass("error"); $(".error").text("Invalid"); } else if (contactNumber == "") { $('#contact-no-info').addClass("error"); $(".error").text("required"); } else if (isNaN(contactNumber) || (contactNumber.indexOf(" ") != -1) || contactNumber.length > 10) { $('#contact-no-info').addClass("error"); $(".error").text("Invalid"); } else if (password == "") { $('#register-passwd-info').addClass("error"); $(".error").text("required"); } else if (confirmPassword == "") { $('#confirm-passwd-info').addClass("error"); $(".error").text("required"); } else if (password != confirmPassword) { $('#confirm-passwd-info').addClass("error"); $(".error").text("Your confirm password does not match."); } ... </script> |
Registrasi user melalui AJAX
Setelah validasi selesai, data form pendaftaran user akan diserialisasi dan dikirim ke sisi server melalui AJAX. Script AJAX jQuery berikut menunjukkan cara mengirim permintaan AJAX ke PHP.
Dalam skrip ini, file ajax-login-registration.php dipanggil untuk memproses pendaftaran. Selama proses ini, data yang diposting melalui AJAX akan digunakan untuk membuat kueri INSERT untuk menambahkan pengguna ke dalam basis data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$('#loaderId').show(); $.ajax({ url : 'ajax-login-registration.php', type : 'POST', data : { firstName : firstName, lastName : lastName, emailId : emailId, contactNumber : contactNumber, password : password, confirmPassword : confirmPassword, action : actionString }, success : function(response) { if (response.trim() == 'error') { $('#register-success-message').hide(); $('#ajaxloader').hide(); $('#register-error-message').html( "Invalid Attempt. Try Again."); $('#register-error-message').show(); } else { $(".thank-you-registration").show(); $(".thank-you-registration").text(response); $("#register-dialog").dialog("close"); } } }); |
Registrasi ajax-login-registrasi.php
Bagian ini adalah bagian dari kode yang dibuat di ajax-login-registration.php untuk menangani proses pendaftaran yang diminta melalui AJAX. Dalam sistem pendaftaran masuk ini, parameter tindakan diposting melalui AJAX. Ini adalah titik akhir PHP tunggal tempat proses masuk dan pendaftaran berlangsung berdasarkan permintaan.
Dalam kode PHP ini, saya telah menggunakan pernyataan yang disiapkan MySQLi untuk mengeksekusi query database. Parameter formulir pendaftaran terikat dengan pernyataan permintaan untuk menambahkan pengguna ke database. Sesuai sistem pendaftaran masuk yang dibuat untuk contoh ini, email pengguna harus unik. Jadi, kita perlu memeriksa apakah ada pengguna yang ada dengan email yang sama sebelum memasukkan pengguna ke dalam basis data. Jika Id email ada, pesan error_message akan ditampilkan kepada pengguna dengan mengatakan ‘ID Email sudah ada’
Menyimpan kata sandi mentah ke dalam basis data tidak aman. Saya telah mengenkripsi kata sandi dengan menerapkan md5 dalam contoh ini. Anda dapat menerapkan algoritme enkripsi lainnya dengan mengganti yang digunakan dalam contoh ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
if (isset($_POST['action']) && $_POST['action'] == 'registration') { $first_name = validateData($_POST['firstName']); $last_name = validateData($_POST['lastName']); $email_id = validateData($_POST['emailId']); $contact_number = validateData($_POST['contactNumber']); $password = validateData($_POST['password']); $confirm_password = validateData($_POST['confirmPassword']); $error_message = ''; $checkEmailQuery = $conn->prepare("select * from tbl_registration where email_id = ?"); $checkEmailQuery->bind_param("s", $email_id); $checkEmailQuery->execute(); $result = $checkEmailQuery->get_result(); if ($result->num_rows > 0) { $error_message = "Email ID already exists !"; echo $error_message; } else { $insertQuery = $conn->prepare("insert into tbl_registration(first_name,last_name,email_id,contact_number,password) values(?,?,?,?,?)"); $password = md5($password); $insertQuery->bind_param("sssss", $first_name, $last_name, $email_id, $contact_number, $password); if ($insertQuery->execute()) { echo "Thankyou for registering with us. You can login now."; exit(); } else { $error_message = "error"; } $insertQuery->close(); $conn->close(); echo $error_message; } } |