Registrasi User dengan php Ajax

Publish Date : 22-10-2016 , dibaca 3877 kali, Hari ini dibaca : 1 kali ,0 comments

Tutorial kali ini kita akan membuat Input Data dengan PHP Ajax, Studi Kasusnya Membuat Restirasi User dengan PHP Ajax , Jadi Data akan diproses dengan Ajax jquery , Tutorial insert data dengan ajax ini merupakan artikel yang sengaja admin posting disini sebagai bahan referensi admin dalam belajar Axax, khusunya Insert Data PHP mysql dengan Ajax, dan tentunya sewaktu-waktu dapat admin buka kembali, harapan besar, semoga artikel ini juga bermanfat bagi pembaca setia suckittrees.com

Membuat Registrasi User dengan PHP MYSQL Ajax

susunan file :

index.php
ajax.php

Database

CREATE TABLE `freeze`.`user` (
`id` INT( 3 ) NOT NULL AUTO_INCREMENT ,
`username` VARCHAR( 30 ) NOT NULL ,
`password` VARCHAR( 50 ) NOT NULL ,
`email` VARCHAR( 50 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = INNODB;

donwload jquery.js file from here click here to Download jquery.js

Index.php

<html>
<head>
<title>User Registration Using PHP Ajax</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(){
var username=$('#username').val();
var password=$('#password').val();
var password1=$('#password1').val();
var email=$('#email').val();
$.ajax({
type: "POST",
url: "ajax.php",
data: "username="+username+"&password="+password+"&email="+email ,
success: function(html){
$("#load").css('display','block');
$("#form2").css('display','none');
$("#box").css('display','none');
$("#load").fadeOut('500', function(){
$("#load").css('display','none');
$("#box").html(html).show('slow');
});
}
});
return false;

});
});
</script>
</head>
<style type="text/css">
#load
{
display:none;
width:500px;
height:500px;
background:url(loading3.gif) no-repeat;
}
#line
{
margin:20px 0;
}
</style>
<body>
<div id="load" style="">
</div>
<div id="box">
</div>
<form method="post" action="" id="form2">
<div id="line">USERNAME: <input type="text" name="username" id="username" /></div>
<div id="line">PASSWORD:<input type="password" name="password" id="password" /></div>
<div id="line">EMAIL:<input type="text" name="email" id="email" /></div>
<input type="submit" id="submit" name="submit" />
</form>

</body>
</html>

ajax.php

<?php
$query=mysql_connect("localhost","root","");
mysql_select_db("freeze",$query);
if(isset($_POST['username']) && isset($_POST['password']) && isset($_POST['email']))
{
$username=mysql_real_escape_string($_POST['username']);
$password=mysql_real_escape_string($_POST['password']);
$email=$_POST['email'];
$query2=mysql_query("insert into user values('','$username','$password','$email')");
if($query2)
{
echo "<h2>Your Registration Process succesfully completed. Thank You</h2>";
}
}
?>