Và để bắt đầu xây dựng ứng dụng này các bạn sẽ tạo bảng tbl_user trong cơ sở dữ liệu:
[codesyntax lang=”php”]
[/codesyntax]
CREATE TABLE `tbl_user` (
`user_id` int(11) NOT NULL auto_increment,
`user_name` varchar(30) NOT NULL,
`user_password` varchar(50) NOT NULL,
`user_email` varchar(50) NOT NULL,
PRIMARY KEY (`user_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=84 ;
[/codesyntax]
Bạn nhớ thêm mấy bản ghi vào để làm dữ liệu test nhé.
Tạo file index.html nằm trong project
[codesyntax lang=”php”]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert user</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.user_text {
margin: 10px;
overflow: hidden;
}
.user_bottom{
width: 387px;
text-align: center;
}
.thongbao{
width: 250px;
float: left;
}
.lable_text {
width: 150px;
float: left;
}
.classtext {
float: left;
width: 300px;
}
.error {
color: red;
}
.success {
color: blue;
}
.wapper{
width: 800px;
margin: auto;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// Sự kiện khi focus vào user_name
$("#user_name").keyup(function() {
if ($(this).val() != '') {
// Gán text cho class thongbao trước khi AJAX response
$(".thongbao").html('checking username...');
}
// Dữ liệu sẽ gởi đi
var form_data = {
action : 'check_user',
user_name : $(this).val()
};
$.ajax({
type : "POST", // Phương thức gởi đi
url : "data.php", // File xử lý dữ liệu được gởi
data : form_data, // Dữ liệu gởi đến cho url
success : function(result) { // Hàm chạy khi dữ liệu gởi thành công
$(".thongbao").html(result);
}
});
});
});
</script>
</head>
<body>
<div class="wapper">
<form method="post" name="fcheck" id="fcheck" action="index.php">
<div class="user_text">
<h2>Đăng ký thành viên</h2>
<div class="user_text">
<label class="lable_text">Tên đăng nhập:</label> <input type="text"
class="classtext" name="user_name" id="user_name"
autocomplete="off" value="">
<div class="thongbao"></div>
</div>
<div class="user_text">
<label class="lable_text">Mật khẩu:</label> <input type="password"
class="classtext" name="user_pass" id="user_pass"
autocomplete="off" value="">
<div class="thongbao1"></div>
</div>
<div class="user_text">
<label class="lable_text">Xác nhận mật khẩu:</label> <input
type="password" class="classtext" name="user_pass2" id="user_pass2"
autocomplete="off" value="">
<div class="thongbao2"></div>
</div>
<div class="user_text">
<label class="lable_text">Email:</label> <input
type="text" class="classtext" name="user_email" id="user_email"
autocomplete="off" value="">
<div class="thongbao3"></div>
</div>
<div class="user_bottom" >
<input type="submit" id="btn" name="dangky" value="Đăng ký">
</div>
</div>
</form>
</div>
</body>
</html>
Tiếp theo tạo file config.php kết nối đến cơ sở dữ liệu:
[codesyntax lang=”php”]
[/codesyntax]
<?php
/**
* Author camap
*
*/
$host = 'localhost';
$user_host = 'root';
$pass = 'root';
$conn=mysql_connect("localhost","root","root") or die("can't connect");
mysql_select_db("vietpro_ci",$conn);
?>
Tạo file data.php để xử lý dữ liệu:
[codesyntax lang=”php”]
[/codesyntax]
<?php
include 'config.php';
$action = $_POST['action']; // Lấy giá trị action
if(!empty($_POST['user_name']) && $action == 'check_user')
{
// Lấy giá trị user_name
$user = $_POST['user_name'];
// Chuyển giá trị user_name thành chữ thường & gọi hàm kiểm tra
username_exist(strtolower($user));
}
function username_exist($user)
{
$sql="SELECT user_name FROM tbl_user WHERE user_name='".$user."'";
$result=mysql_query($sql);
if(mysql_num_rows($result)>0){
echo "<span class='error'>Username: <strong>{$user}</strong> đã tồn tại!</span>";
}else{
echo "<span class='success'>Username: <strong>{$user}</strong> khả dụng! </span>";
}
}
?>
Bây giờ bạn ra trình duyệt gọi đến file index.html để kiểm tra kết quả.
Chúc các bạn học php thành công!
0 nhận xét:
Lưu ý: Chỉ thành viên của blog này mới được đăng nhận xét.