מדריך בדיקה האם שם המישתמש פנוי\תפוס בעזרת AJAX
טוב אז היום אני ילמד לעשות מערכת בדיקת שם מישתמש ולהחזיר האם הוא פנוי או תפוס בעזרת AJAX.
יאלה נתחיל.
שלב אחד - יצירת הקבצים
בנו קובץ HTML שיש שם :
1.טופס
2.שדא לשם מישתמש
3.כפתור בדיקה.
שלב שני - קובץ ה JS ו HTML
צרו קובץ בשם AJAX.js וקשרו אותו לדף HTML.
זה ניראה כך:
קוד HTML:
קוד HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="he" dir="rtl"> <head> <title>מדריך - AJAX</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="generator" content="OnlyKid - Rafael Zilberman" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <!-- JavaScript --> <script type="text/javascript" src="AJAX.js"></script> <!-- / JavaScript --> </head> <body> <form action=""> <label for="user">שם מישתמש</label><input type="text" name="username" id="user" value="שם מישתמש" /> <input type="button" value="בדוק" /><br /> <div id="error"> </div> </form> </body></html>
לאחר מיכן בקובץ JS שיצרתם כתבו את הקוד הבא:
קוד PHP:
PHP Code:
function showUser(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";//בודק האם הקידו שם מישתמש או לא
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();//יוצר HttpRequest חדש
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) //בודק האם הקובץ החזיר תשובה
{
document.getElementById("error").innerHTML=xmlhttp.responseText;//ממלא את ה DIV במה שהקובץ החזיר
}
}
xmlhttp.open("GET","user.php?u="+str,true);.//שולח ב GET את המידע לקובץ user.php
xmlhttp.send();
}
יש קצת הסברים.
שלב שלישי - הPHP
אוקיי דבר אחרון ה SQL.
דבר ראשון צרו חיבור ל MYSQL:
קוד PHP:
PHP Code:
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("guides") or die(mysql_error());
לאחר מיכן בידקו אם יש GET["u"]:
קוד PHP:
PHP Code:
if(isset($_GET["u"]))
{
}
בתוך ה IF צרו שאילה שתישלוף מהמסד נתונים אח וורק אם username שווה ל get["u"]:
קוד PHP:
PHP Code:
$query = mysql_query("SELECT * FROM users WHERE `username` = '".$_GET["u"]."'");
אחר כך צרו IF שיבדוק האם NUM_ROWS שונה מ 0 - זה אומר ששם המישתמש תפוס.ותעשו גם ELSE:
קוד PHP:
PHP Code:
if(mysql_num_rows($query) != 0)
{
}
else
{
}
דבר אחרון הוסיפו למקום המתאים מה אתם רוצים שיוצג במיקרה שה נכון\לא נכון:
קוד PHP:
PHP Code:
if(mysql_num_rows($query) != 0)
{
echo "שם המישתמש <b>".$_GET["u"]."</b> תפוס";
}
else
{
echo "שם המישתמש <b>".$_GET["u"]."</b> פנוי";
}
שלב רביעי - דבר אחרון
דבר אחרון חביב.
נעשה שבלחיצה אל הכפתור ה יפנה ל FUNCTION שיצרנו:
קוד HTML:
onclick="showUser(user.value)"
קוד מלא
Index.php:
קוד PHP:
קוד HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="he" dir="rtl">
<head>
<title>מדריך - AJAX</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="OnlyKid - Rafael Zilberman" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- JavaScript -->
<script type="text/javascript" src="AJAX.js"></script>
<!-- / JavaScript -->
</head>
<body>
<form action="">
<label for="user">שם מישתמש</label><input type="text" name="username" id="user" value="שם מישתמש" /> <input type="button" value="בדוק" onclick="showUser(user.value)" /><br />
<div id="error">
</div>
</form>
</body>
</html>
AJAX.js:
קוד HTML:
PHP Code:
function showUser(str){var xmlhttp; if (str=="") { document.getElementById("txtHint").innerHTML="";//בודק האם הקידו שם מישתמש או לא return; }if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();//יוצר HttpRequest חדש }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) //בודק האם הקובץ החזיר תשובה { document.getElementById("error").innerHTML=xmlhttp.responseText;//ממלא את ה DIV במה שהקובץ החזיר } }xmlhttp.open("GET","user.php?u="+str,true);.//שולח ב GET את המידע לקובץ user.phpxmlhttp.send();}
user.php:
קוד PHP:
PHP Code:
<?php
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("guides") or die(mysql_error());
if(isset($_GET["u"]))
{
$query = mysql_query("SELECT * FROM users WHERE `username` = '".$_GET["u"]."'");
if(mysql_num_rows($query) != 0)
{
echo "שם המישתמש <b>".$_GET["u"]."</b> תפוס";
}
else
{
echo "שם המישתמש <b>".$_GET["u"]."</b> פנוי";
}
}
?>