JQuery, PHP

Ajax Bootstrap form pendaftaran dengan jQuery PHP dan MySQL

Ajax Bootstrap form pendaftaran dengan jQuery PHP dan MySQL

Nah sebelumnya hanya menciptakan bootstrap signup form dengan validasi dan sekarang dalam tutorial ini kita akan melihat menciptakan Bootstrap fomr dengan Ajax jQuery PHP dan

MySQL. Kita akan Lihat ketersediaan live email, validasi jQuery dan proses pendaftaran akan tersubmit tanpa reload halaman.

Sebelum melanjutkan Anda dapat memeriksa live demo tutorial ini untuk melihat bagaimana kelanjutannya, jadi mari kita mulai.

 

Kita akan melihat

  • Cara menggunakan Remote rule dalam validasi jQuery
  • Live check ketersediaan email
  • jQuery Ajax respons JSON
  • Ajax Signup

 

Mencari Bootstrap Login, Sign Up Modal form, cek tutorialnya disini

Dalam tutorial sebelumnya kita sudah membahas menciptakan form bootstrap responsif dengan validasi jadi aku akan melewatkannya pada tutorial kali ini.

 

Tabel database

CREATE TABLE IF NOT EXISTS `users` (
`id_user` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`username` varchar(255) DEFAULT NULL,
`password` varchar(100) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id_user`),
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

 

Config.Php

Simpel koneksi database dibuat dengan PDO extension.

getMessage());
	}
?>

 

Signup.php

Signup php file mengandung hanya kode php yang menyisipkan dan menciptakan record baru pengguna dan menyimpannya ke dalam tabel mysql, dan akan memberikan respon JSON sebagai output. $response = array (); berisi string json sebagai status dan pesan. apa pun itu Akan kembali memberikan dalam format JSON.

 

prepare( $query );
		$stmt->bindParam(':name', $full_name);
		$stmt->bindParam(':username', $user_name);
		$stmt->bindParam(':email', $user_email);
		$stmt->bindParam(':pass', $hashed_password);

		// cek bila pendaftaran berhasil
        if ( $stmt->execute() ) {
			$response['status'] = 'success';
			$response['message'] = '   Pendaftaran akun berhasil. Silahkan untuk login.';
        } else {
            $response['status'] = 'error';  // tidak bisa mendaftar
			$response['message'] = '   Register gagal, coba kembali nanti';
        }	
	}
	echo json_encode($response);
?>

 

Remote rule

Berikut adalah bagaimana Anda dapat menggunakan Remote rule dalam aturan validasi jQuery, ia akan memanggil "check-email.php" dan memberikan response true/false.

 

prepare( $query );
		$stmt->execute(array(':email'=>$email));

		if ($stmt->rowCount() == 1) {
			echo 'false'; // jika email sudah terdaftar
		} else {
			echo 'true'; 
		}
	}
?>

 

Ajax signup code

Jika tidak ada kesalahan panggilan validasi fungsi submithandler submitForm(), fungsi berisi metode ajax yang memanggil halaman "signup.php" sebagai posting permintaan dan respons JSON  dalam div tag dan menunjukkan sebagai slideDown efek.

function submitForm(){
			   
			   $.ajax({
			   		url: 'signup.php',
			   		type: 'POST',
			   		data: $('#register-form').serialize(),
			   		dataType: 'json'
			   })
			   .done(function(data){
			   		
			   		$('#btn-signup').html('   signing up...').prop('disabled', true);
			   		$('input[type=text],input[type=text],input[type=email],input[type=password]').prop('disabled', true);
			   		
			   		setTimeout(function(){
								   
						if ( data.status==='success' ) {
							
							$('#errorDiv').slideDown('fast', function(){
								$('#errorDiv').html('
'+data.message+'
'); $("#register-form").trigger('reset'); $('input[type=text],input[type=text],input[type=email],input[type=password]').prop('disabled', false); $('#btn-signup').html('   Sign Me Up').prop('disabled', false); }).delay(3000).slideUp('fast'); } else { $('#errorDiv').slideDown('fast', function(){ $('#errorDiv').html('
'+data.message+'
'); $("#register-form").trigger('reset'); $('input[type=text],input[type=text],input[type=email],input[type=password]').prop('disabled', false); $('#btn-signup').html('   Sign Me Up').prop('disabled', false); }).delay(3000).slideUp('fast'); } },3000); }) .fail(function(){ $("#register-form").trigger('reset'); alert('An unknown error occoured, Please try again Later...'); }); }

 

Silahkan download script ini dengan mengklik tombol di bawah, semoga bermanfaat.

Share This Post

Leave Comment

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.