|
 |
| |
แจก!! LiveRegister สมัครสมาชิก PHP+SQL+Ajex โมมาจาก โค๊ดของ thaicreate |
| |
 |
|
|
 |
 |
|
หรือที่เรียกกันว่า LiveRegister อ่านะครับ
Function
Check Username
Check กรอกข้อมูลไม่ครบ
Disable ปุ่มซับมิต หากกรอกข้อมูลไม่ครบ
ActiveCode ท่านเอาไปโมเป็น ส่งเข้าอีเมล์ก็ได้
สมัครสมาชิกง่ายเพียง 3 คลิ
ปล.เจอ bug ช่วยแจ้งด้วยนะครับ มือใหม่
เริ่มกันเลย
Code (PHP)
CREATE TABLE `member` (
`UserID` int(3) NOT NULL auto_increment,
`Username` varchar(20) NOT NULL,
`Password` varchar(20) NOT NULL,
`Name` varchar(100) NOT NULL,
`Email` varchar(150) NOT NULL,
`Status` enum('ADMIN','USER') NOT NULL default 'USER',
`SID` varchar(32) NOT NULL,
`Active` enum('Yes','No') NOT NULL default 'No',
PRIMARY KEY (`UserID`),
UNIQUE KEY `Username` (`Username`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=264 ;
index.php
Code (PHP)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjaxRegister() {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'save_register.php';
var pmeters = "tUsername=" + encodeURI( document.getElementById("txtUsername").value) +
"&tPassword=" + encodeURI( document.getElementById("txtPassword").value ) +
"&tName=" + encodeURI( document.getElementById("txtName").value ) +
"&tEmail=" + encodeURI( document.getElementById("txtEmail").value ) +
"&tConEmail=" + encodeURI( document.getElementById("txtConEmail").value );
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
if(HttPRequest.responseText == 'Y')
{
document.getElementById('btnlock').disabled = false;
}
else
{
document.getElementById("mySpan").innerHTML = HttPRequest.responseText;
}
}
}
}
</script>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjaxCheckActiveCode() {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'RegisterStebChack.php';
var pmeters = "tUsername=" + encodeURI( document.getElementById("txtUsername").value) +
"&tPassword=" + encodeURI( document.getElementById("txtPassword").value ) +
"&tName=" + encodeURI( document.getElementById("txtName").value ) +
"&tEmail=" + encodeURI( document.getElementById("txtEmail").value ) +
"&tConEmail=" + encodeURI( document.getElementById("txtConEmail").value );
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpanCheck").innerHTML = "<img src=\"images/loading.gif\">";
}
if(HttPRequest.readyState == 4) // Return Request
{
if(HttPRequest.responseText == 'Ok')
{
document.getElementById('btnlock').disabled = false;
}
else
{
document.getElementById("mySpanCheck").innerHTML = HttPRequest.responseText;
}
}
}
}
</script>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjaxContantRight(url) {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var pmeters = "ddddd";
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "<img src=\"images/loading.gif\">";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById('mySpan').innerHTML = HttPRequest.responseText;
document.getElementById('btnlock').disabled = true;
}
}
}
</script>
<body Onload="JavaScript:doCallAjaxContantRight('RegisterPlubic.php');">
<div id="header">
<br/><div><font size="6" color=ffffff><b>Home</b></font></div>
</div>
<div id="nav">
<table width="170" height="30" border="0" align="right">
<tr>
<td width="250">
<form id="form1" name="form1" method="post" action="search.php">
<input name="txt_search" type="text" value="<?=$_POST['txt_search']?>" /></td>
<td><button name="Search" type="submit"/>ค้นหา</button></td>
</tr>
</table>
</form> </div>
<div class = "main_container" align = "center">
<div id="container">
<div id="main">
<div id="main_left">
<div id="content">
<div id="content_boxone">
<h1>Content box one</h1>
<span id="mySpanContant"><img src="images/loading.gif"><object width="420" height="315"><param name="movie" value="http://www.youtube.com/embed/YccsNO1FV64?version=3&hl=th_TH&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/embed/YccsNO1FV64?version=3&hl=th_TH&rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</div>
<br/>
<div id="content_boxtwo">
</div>
</div>
</div>
<div id="main_right">
<div id="sidebar">
<h1>Register Form</h1>
<div id="sidebar_boxone">
<span id="mySpan"><img src="images/loading.gif">
</div>
<br/>
<div id="sidebar_boxtwo">
<p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer"> </div>
</body>
</html>
2. ActiveCodeReady.php
Code (PHP)
<table>
<tr>
<td id="stylized2">
<button>STEP 1</button></td>
<td id="stylized2">
<button>STEP 2</button></td>
<td id="stylized3">
<button>Success</button></td>
</tr>
</table>
<?
mysql_connect("localhost","root","0000");
mysql_select_db("project");
$strSQL = "SELECT * FROM member WHERE SID = '".trim($_GET['sid'])."' AND UserID = '".trim($_GET['uid'])."' ";
$objQuery = mysql_query($strSQL);
$objResult = mysql_fetch_array($objQuery);
if(!$objResult)
{
echo "Activate Invalid !";
}
else
{
$strSQL = "UPDATE member SET Active = 'Yes' WHERE SID = '".trim($_GET['sid'])."' AND UserID = '".trim($_GET['uid'])."' ";
$objQuery = mysql_query($strSQL);
echo "Activate Successfully !";
}
mysql_close();
?>
3.RegisterPlubic.php
Code (PHP)
<table>
<tr>
<td id="stylized3">
<button>STEP 1 >></button></td>
<td id="stylized2">
<button>STEP 2 >></button></td>
<td id="stylized2">
<button>Success</button></td>
</td>
</tr>
</table>
<div id="stylized" class="myform">
<form id="form" name="form1" method="post" action="JavaScript:doCallAjaxRegister('save_register.php');">
<label>Username
<span class="small">Add your username</span>
</label>
<input type="text" name="txtUsername" id="txtUsername" OnChange="JavaScript:doCallAjaxCheckActiveCode();">
<label>Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="password" name="txtPassword" id="txtPassword" OnChange="JavaScript:doCallAjaxCheckActiveCode();">
<label>YourName
<span class="small">Add Your Name</span>
</label>
<input type="text" name="txtName" id="txtName" OnChange="JavaScript:doCallAjaxCheckActiveCode();">
<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" name="txtEmail" id="txtEmail" />
<label>Re-Email
<span class="small">Re-Enter Your Email</span>
</label>
<input type="text" name="txtConEmail" id="txtConEmail" OnChange="JavaScript:doCallAjaxCheckActiveCode();">
<br>
<button class="button2" id="btnlock" name="btnlock" type="submit"><span>REGISTER</span></button>
<div class="spacer"></div>
<span id="mySpanCheck">
</form>
</div>
4.RegisterStebChack
Code (PHP)
<?
session_start();
$strUsername = trim($_POST["tUsername"]);
$strPassword = trim($_POST["tPassword"]);
$strName = trim($_POST["tName"]);
$strEmail = trim($_POST["tEmail"]);
$strConEmail = trim($_POST["tConEmail"]);
//*** Check Username ***//
if(trim($strUsername) == "")
{
echo "<font color=red>**</font> Plase input [Username]";
exit();
}
//*** Check Password ***//
if(trim($strPassword) == "")
{
echo "<font color=red>**</font> Plase input [Password]";
exit();
}
//*** Check Name ***//
if(trim($strName) == "")
{
echo "<font color=red>**</font> Plase input [Name]";
exit();
}
//*** Check Email ***//
if(trim($strEmail) == "")
{
echo "<font color=red>**</font> Plase input [Email]";
exit();
}
//*** Check tEmail ***//
if(trim($strEmail) != "$strConEmail")
{
echo "<font color=red>**</font> Password not Match! Plase Back ";
exit();
}
$objConnect = mysql_connect("localhost","root","0000") or die("Error Connect to Database");
$objDB = mysql_select_db("project");
//*** Check Username (already exists) ***//
$strSQL = "SELECT * FROM member WHERE Username = '".$strUsername."' ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$objResult = mysql_fetch_array($objQuery);
if($objResult)
{
echo "<font color=red>**</font> Username [$strUsername] already exists";
}
else
if($objQuery)
{
echo "Ok";
}
else
{
echo "<font color=red>**</font> Can not register";
}
?>
5.save_register
Code (PHP)
<?
session_start();
$strUsername = trim($_POST["tUsername"]);
$strPassword = trim($_POST["tPassword"]);
$strName = trim($_POST["tName"]);
$strEmail = trim($_POST["tEmail"]);
$strConEmail = trim($_POST["tConEmail"]);
//*** Check Username ***//
if(trim($strUsername) == "")
{
echo "<font color=red>**</font> Plase input [Username]";
exit();
}
//*** Check Password ***//
if(trim($strPassword) == "")
{
echo "<font color=red>**</font> Plase input [Password]";
exit();
}
//*** Check Name ***//
if(trim($strName) == "")
{
echo "<font color=red>**</font> Plase input [Name]";
exit();
}
//*** Check Email ***//
if(trim($strEmail) == "")
{
echo "<font color=red>**</font> Plase input [Email]";
exit();
}
//*** Check tEmail ***//
if(trim($strEmail) != "$strConEmail")
{
echo "<font color=red>**</font> Password not Match! Plase Back ";
exit();
}
$objConnect = mysql_connect("localhost","root","0000") or die("Error Connect to Database");
$objDB = mysql_select_db("project");
mysql_query("SET NAMES utf8",$objConnect);
?>
<table>
<tr>
<td id="stylized2">
<button>STEP 1 >></button></td>
<td id="stylized3">
<button>STEP 2 >></button></td>
<td id="stylized2">
<button>Success</button></td>
</td>
</tr>
</table>
<?
//*** Check Username (already exists) ***//
$strSQL = "SELECT * FROM member WHERE Username = '".$strUsername."' ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
$objResult = mysql_fetch_array($objQuery);
$strSQL = "INSERT INTO member (Username,Password,Name,Email,Status,SID,Active) VALUES ('".$strUsername."',
'".$strPassword."','".$strName."','".$strEmail."','USER','".session_id()."','No')";
$objQuery = mysql_query($strSQL);
if($objQuery)
{
$Uid = mysql_insert_id();
echo "<h1>Register Step2 <br>";
echo "<table border=\"0\" align=\"center\">";
echo "<tr>";
echo "<td width=\"150\">Username</td><td width=\"150\">$strUsername</td></tr>";
echo "<tr>";
echo "<td width=\"150\">Password</td><td width=\"150\">$strPassword</td></tr>";
echo "<tr>";
echo "<td width=\"150\">Name</td><td width=\"150\">$strName</td></tr>";
echo "<tr>";
echo "<td width=\"150\">Email</td><td width=\"150\">$strEmail</td></tr>";
echo "<tr>";
echo "<td width=\"150\"></td><td width=\"150\"><a class=\"button\" href=\"JavaScript:doCallAjaxContantRight('ActiveCodeReady.php?sid=".session_id()."&uid=".$Uid."');\" ><span>CONTINUE</span></a></td>";
echo "</tr></table>";
}
mysql_close();
?>
6.style.css
Code (PHP)
body{
margin:0 auto;
background:#eeeeee;
}
#container{
width:1110px;
margin:0 auto;
}
#header{
height:50px;
background: #0099ff;
}
#nav{
height:30px;
background: #0099dd;
color:#aaaa;
padding-bottom: 1px;
}
#nav input{
float:right;
font-size:14px;
padding:2px 2px;
border:solid 1px #aacfe4;
width:150px;
height:22px;
margin:2px 0 2px 10px;
}
#nav button{
clear:both;
width:50px;
height:22px;
background:#666666;
text-align:center;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
#nav ul{
list-style: none;
height:30px;
margin:0 auto;
}
#nav ul li{
float:left;
margin:10px;
}
#nav ul li a{
color:#2CD2D3;
text-decoration: none;
}
#nav ul li a:hover, #nav ul .current{
color:#ffffff;
}
#main{
width:1100;
height:auto;
}
#main_left{
float:left;
width:700px;
text-align: left;
}
#content{
clear: both;
width:auto;
height:auto;
min-height: 400px;
border:1px solid #dddddd;
padding:10px;
background: #ffffff;
font-size: 14px;
}
#content_boxone{
clear: both;
width:auto;
height:auto;
border:1px solid #dddddd;
padding:10px;
min-height: 200px;
font-size: 14px;
text-align: left;
}
#content_boxtwo{
clear: both;
width:auto;
height:auto;
border:1px solid #dddddd;
padding:10px;
min-height: 100px;
font-size: 14px;
text-align: left;
}
#main_right{
float:right;
width:400px;
}
#sidebar{
clear: both;
width:auto;
height:auto;
min-height: 10px;
border:1px solid #dddddd;
background: #dddddd;
padding:10px;
font-size: 14px;
text-align: left;
}
#sidebar_boxone{
clear: both;
width:auto;
height:auto;
border:1px solid #dddddd;
background: #ffffff;
padding:10px;
min-height: 320px;
font-size: 14px;
text-align: left;
}
#sidebar_boxtwo{
clear: both;
width:auto;
height:auto;
border:1px solid #dddddd;
background: #ffffff;
padding:10px;
min-height: 100px;
font-size: 14px;
text-align: left;
}
#footer{
clear: both;
background: #ffffff;
color:#444444;
padding-top:25px;
height:25px;
}
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}
/* ----------- stylized ----------- */
#stylized{
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-size:14px;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:8px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 2px 10px;
}
#stylized select{
float:center;
font-size:12px;
padding:8px 2px;
border:solid 1px #aacfe4;
width:100px;
margin:2px 0 2px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:140px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#stylized2 button{
clear:both;
margin-left:5px;
width:90px;
height:31px;
background:#eeeeee url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#stylized2 .td{
clear:both;
margin-left:5px;
width:120px;
height:31px;
background:#eeeeee url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#stylized3 button{
clear:both;
margin-left:5px;
width:150px;
height:31px;
background:#444444 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('images/preeson1.png') no-repeat scroll top right;
color: #ffffff;
display: block;
float: left;
font: normal 12px arial, sans-serif;
font-weight:bold;
text-align:center;
height: 30px;
width: 120px;
margin-right: 8px;
padding-right: 20px;
text-decoration: none;
}
a.button span {
background: transparent url('images/presson2.png') no-repeat;
display: block;
line-height: 20px;
padding: 5px 0 5px 18px;
}
a.button:active {
background-position: bottom right;
color: #ffffff;
outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px;
}
#stylized button.button2 {
background: transparent url('images/preeson1.png') no-repeat scroll top right;
color: #ffffff;
display: block;
float: left;
font: normal 12px arial, sans-serif;
font-weight:bold;
text-align:center;
height: 30px;
width: 140px;
margin-right: 8px;
padding-right: 20px;
text-decoration: none;
}
#stylized button.button2 span {
background: transparent url('images/presson2.png') no-repeat;
display: block;
line-height: 20px;
padding: 5px 0 5px 18px;
}
#stylized button.button2:active {
background-position: bottom right;
color: #ffffff;
outline: none; /* hide dotted outline in Firefox */
}
#stylized button.button2:active span {
background-position: bottom left;
padding: 6px 0 4px 18px;
}
preeson1.png
preeson2.png
loading.gif
เสร็จแล้ว
Tag : PHP, MySQL, Ajax
|
ประวัติการแก้ไข
2011-09-28 10:23:42
2011-09-28 10:31:21
|
 |
 |
 |
 |
| Date :
2011-09-28 10:21:23 |
By :
romanztic |
View :
7416 |
Reply :
13 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
แจ่มมากครับ 
|
| |
|
|
| |
| Date :
2011-09-28 10:46:09 |
By :
webmaster |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ผมชอบตรง css นี่แหละ ทำให้การออกแบบสวยขึ้นผิดตา
|
| |
|
|
| |
| Date :
2011-09-28 12:34:51 |
By :
Dragons_first |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณ code ดี ๆ ครับ
|
| |
|
|
| |
| Date :
2011-09-28 12:39:32 |
By :
อะนัน |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณ
|
| |
|
|
| |
| Date :
2012-10-07 20:28:44 |
By :
kamino |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ว้าว
|
| |
|
|
| |
| Date :
2012-10-08 16:43:02 |
By :
mac1626 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
โดีครับ
|
| |
|
|
| |
| Date :
2013-09-09 14:47:06 |
By :
badkung04 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ยังไงกันคับ บอกหน่อยคับ
|
| |
|
|
| |
| Date :
2013-09-22 12:26:39 |
By :
coutiho |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
"ยังไง" ของคุณคืออะไรครับ?
|
| |
|
|
| |
| Date :
2013-09-22 14:30:07 |
By :
itpcc |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เป็นประโยชน์ มากครับ Thx.
|
| |
|
|
| |
| Date :
2013-09-23 14:13:43 |
By :
StyleIndy |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ของผมพ่อใส่ข้อความไปเยอะ เป็นแบบนี้ครับ
ต้องปรับยังไหงเหรอครับ ขอบคุณครับ
|
| |
|
|
| |
| Date :
2018-05-23 17:23:19 |
By :
685799958284179 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
CSS
|
| |
|
|
| |
| Date :
2018-05-24 08:52:19 |
By :
685799958284179-CCC |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
