Hôm nay mình xin hướng dẫn tạo form đăng ki thành viên, trong form này các bạn cũng gập nhiều ở những trang web khác,các làm cũng đơn giãn ,nhưng cũng hơi khó nhé.
Code css
* {
margin: 0px;
padding: 0px;
}
body {
background: url(../img/fancy_shadow_ne.png);
background-size: 7px;
}
#nen {
widht: 900px;
margin: 0px auto;
}
#img {
width: 900px;
margin: 0px auto;
}
#dk {
margin: 0px auto;
width: 900px;
border: 1px solid #ccc;
background: white;
}
td {
padding: 5px 0px;
}
#nd {
margin: 0px 150px;
width: 900px;
}
label {
margin: 0px 30px;
color: #000020;
font-size: 20px;
font-family: serif;
}
.input1 {
padding: 5px 30px;
font-family: serif;
font-size: 20px;
margin-left: 40px;
}
span {
color: #F60;
}
.nut {
width: 100px;
padding: 6px 3px;
font-size: 18px;
}
p.xacnhanten {
margin-left: 40px;
width: 200px;
color: #F60;
font-size: 17px;
}
#hide {
display: none
}
#load {
display: inline-block;
}
Bạn tạo file dangky.php và copy doạn code bên dười vào và bạn tạo file thongtindeukhoan.php(trong file này các bạn chứa các đều khoản khi đăng ký nhe) để jquery load file này vào khung thông tin điều khoản
Code html
<body id="body">
<form action="xulydangky.php" method="post" enctype="multipart/form-data">
<div id="nen">
<div id="img">
<img src="img-login1.png" widht="900" height="200"/></em>
<em>
</div>
<div id="dk">
<div id="nd">
<table width="900px">
<tr>
<div class="tt">
<td widht="200"><label for="nn">Họ Tên (<span style="kihieu">*</span>)</label></td>
<td width="400" ><input type="text" name="hoten" class="input1"/>
</div>
</td>
</div>
</tr>
<tr>
<div class="tt">
<td widht="200"><label for="nn">Tên Đăng Nhập (<span style="kihieu">*</span>) </label></td>
<td width="400" ><input type="text" name="tdn" class="input1"/></div>
<!--<p class="xacnhanten">Ten dang nhap da ton ta.</p>-->
</td>
</div>
</tr>
<tr>
<div class="tt">
<td widht="200"><label for="nn">Mật Khẩu (<span style="kihieu">*</span>) </label></td>
<td width="400" ><input type="password" name="mk" class="input1"/></div></td>
</div>
</tr>
<tr>
<div class="tt">
<td width="200" ><label for="nn">Xác nhận mật khẩu (<span style="kihieu">*</span>)</label></td>
<td width="400" ><input type="password" name="xnmk" class="input1"/></div>
<!-- <p class="xacnhanten">Ten dang nhap da ton ta.</p>-->
</td>
</div>
</tr>
<tr>
<div class="tt">
<td width="200" ><label for="nn">Giới Tính: </label></td>
<td width="400" ><span style="font-size:20px;color:#000;margin-left:36px;padding:5px 5px;"><input type="radio" name="gioitinh" value="1" checked="checked"/>Nam
<input type="radio" name="gioitinh" value="0" />Nu</span>
</td>
</div>
</tr>
<tr>
<div class="tt">
<td width="200" ><label for="nn">Email: </label></td>
<td width="400" ><input type="text" name="email" class="input1"/></td>
</div>
</tr>
<tr>
<div class="tt">
<td width="200" ><label for="nn">Địa Chỉ </label></td>
<td width="400" ><textarea name="diachi" style="font-size: 20px; color: rgb(0, 0, 0); margin-left: 38px; padding: 5px; width: 250px; height: 54px;font-family: serif"></textarea></td>
</div>
</tr>
<tr>
<div class="tt">
<td width="200" ><label for="nn">Thông Tin Điều Khoản</label></td>
<td width="400" ><div id="hide">
<input type="button" value="Hide" class="hide" style="font-size:15px;color:#000;margin-left:36px;padding:2px 0px;"/>
<input type="button" value="Show" class="show" style="font-size:15px;color:#000;padding:2px 0px;"/>
</div>
<div id="tt-dkhoan">
<input type="button" id="dieukhoan" value="Đọc điêu khoản" style="font-size:15px;color:#000;margin-left:36px;padding:2px 2px;"/></br>
</div>
<span style="font-size:20px;color:#000;margin-left:36px;padding:5px 5px;"><input type="checkbox" value="xacnhan_dk" name="xacnhan_dieukhoan" />Tôi chấp nhận điều khoản.</span>
</td>
</div>
</tr>
<tr>
<div class="tt">
<td colspan="2" align="center"><input type="submit" name="xn" class="nut" value="Đăng Ký">
<input type="reset" name="huy" class="nut" value="Hủy"/></td>
</div>
</tr>
</table>
</div>
</div><!--ket thuc dk-->
</div><!---ket thuc nen-->
</form>
</body>
Bạn include thu viện jquery vào nhe() và copy đoạn code bên dưới vào để sữ dụng jquery
$(document).ready(function() {
$('#dieukhoan').click(function() {
var url = "thongtindeukhoan.php";
$("#tt-dkhoan").load(url).slideDown('slow');
//$("#tt-dkhoan").load(url);
$('#hide').css('display', 'block');
$('#hide input').click(function() {
$("#tt-dkhoan").slideUp('slow');
});
$("#hide input.show").click(function() {
$("#tt-dkhoan").slideDown('slow');
});
});
});
code SQL
CREATE TABLE IF NOT EXISTS `thanhvien` (`ID_THANHVIEN` int(11) NOT NULL AUTO_INCREMENT, `HOTEN` varchar(30) COLLATE utf8_unicode_ci NOT NULL, `TENDANGNHAP` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `MATKHAU` varchar(100) COLLATE utf8_unicode_ci NOT NULL, GIOITINH` tinyint(1) NOT NULL, `DIACHI` text COLLATE utf8_unicode_ci NOT NULL, EMAIL` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `QUYEN_HAN` int(1) NOT NULL, PRIMARY KEY (`ID_THANHVIEN`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=
Các bạn tạo file db.php và include vào file xulydangky.php để kết nối tới localhost chứa database của các bạn
Code php
include('db.php');
//xu ly dang ky</em>
if (isset($_POST['xn'])) {
if ($_POST['hoten'] == "") {
print "Bạn chưa nhập họ tên. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
} else
{
$hoten = addslashes($_POST['hoten']); //gan hoten va mot bien
}
if ($_POST['tdn'] == "") {
print "Bạn chưa nhập tên đăng nhập. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
} else
{
if (mysql_num_rows(mysql_query("SELECT TENDANGNHAP FROM thanhvien WHERE TENDANGNHAP='".$_POST['tdn']."'")) > 0) {
echo 'khong su dung ten dang nhap nay';
exit;
} else {
$tendangnhap = $_POST['tdn']; //gan hoten va mot bien
}
}
if ($_POST['mk'] == "") {
print "Bạn chưa nhập mã khẩu. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
} else
{
$matkhau = md5(addslashes($_POST['mk'])); //gan hoten va mot bien
}
if ($_POST['xnmk'] == "") {
print "Bạn chưa xác nhận mã khẩu. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
} else
{
$xacnhanmatkhau = md5(addslashes($_POST['xnmk'])); //gan hoten va mot bien
}
if ($matkhau != $xacnhanmatkhau) {
print "Mã khẩu không khớp. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
} else
{
$matkhau = $xacnhanmatkhau;
}
if ($_POST['gioitinh'] != "") {
$gioitinh = $_POST['gioitinh']; //gan hoten va mot bien
} else
{
print "Bạn chưa check giới tính. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
}
if ($_POST['email'] == "") {
print "Email này ko hợp lệ. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
} else {
$email = $_POST['email']; //gan hoten va mot bien
}
if ($_POST['diachi'] == "") {
print "Bạn chưa nhập địa chỉ. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
} else
{
$diachi = $_POST['diachi']; //gan hoten va mot bien
}
if (!isset($_POST['xacnhan_dieukhoan'])) {
print "Bạn chưa check điều khoản. <a href='javascript:history.go(-1)'>Nhấp vào đây để quay trở lại</a>";
exit;
} else
{
$xacnhan_dk = $_POST['xacnhan_dieukhoan']; //gan hoten va mot bien
}
//quyen han de quan ly thanh vien ta se mat dinh gan cho quyen han nay la 2,co nghia la thanhvien
$quyen_han = 2;
if ($hoten && $tendangnhap && $matkhau && $email && $diachi && $xacnhan_dk && $quyen_han) {
$sql = "insert into thanhvien(HOTEN,TENDANGNHAP,MATKHAU,GIOITINH,DIACHI,EMAIL,QUYEN_HAN) values('".$hoten."','".$tendangnhap."','".$matkhau."','".$gioitinh."','".$diachi."','".$email."','".$quyen_han."')";
$query = mysql_query($sql, $con);
if ($query) {
echo 'dang ky '.$tendangnhap.
'thanh cong:<a href="../index.php">quay ve trang chu</a>';
} else
{
echo 'dang ky khong thanh cong:<a href="login.php">dang ky lay</a>';
}
} else {
echo "that bai";
}
}
Chúc các bạn thành công!
