แบบฟอร์มการลงทะเบียนและการอนุญาต Jquery สร้างระบบการลงทะเบียนที่ยอดเยี่ยมโดยใช้ PHP, MySQL และ jQuery คุณได้ลงทะเบียนแล้ว

ใน เครือข่ายทวิตเตอร์คุณสามารถดูหน้าเว็บที่มีการออกแบบที่สะอาดตาและเรียบง่าย ดูที่ส่วนด้านขวาบนของหน้า คุณจะเห็นปุ่มเพื่อเข้าสู่ระบบ โดยการคลิกคุณจะเห็นแบบฟอร์มสำหรับการกรอกข้อมูล วันนี้เราจะมาบอกวิธีสร้างเอฟเฟกต์ที่คล้ายกันบนเว็บไซต์ของคุณเอง จริงๆ แล้วมันเป็นเรื่องง่ายมาก นอกจากนี้ ยังช่วยประหยัดพื้นที่บนหน้าเว็บและเพิ่มความรู้สึกสบายใจให้กับผู้เยี่ยมชมอีกด้วย ในบทความนี้ เราจะบอกคุณทีละขั้นตอนว่าระบบทั้งหมดทำงานอย่างไร และคู่มือนี้จะเป็นประโยชน์สำหรับผู้ที่ต้องการเรียนรู้ jQuery ด้วย ซึ่งไปข้างหน้า!

รหัส HTML

ก่อนอื่นคุณต้องเริ่มต้นด้วยโค้ด HTML โค้ด HTML นั้นง่ายมาก - ประกอบด้วยแท็ก "a" ซึ่งไปพร้อมกับแท็ก "fieldset" เนื่องจากมีการแสดงแบบฟอร์ม

เพียงคัดลอกสิ่งนี้ลงในรหัสของคุณ หน้าใหม่:

มีบัญชีอยู่แล้ว? เข้าสู่ระบบ


ชื่อผู้ใช้หรืออีเมล

รหัสผ่าน

จำฉันไว้

ลืมรหัสผ่าน?

ลืมชื่อผู้ใช้ของคุณ?

คุณจะต้อง ใช้ CSSเพื่อกำหนดปุ่มอนุญาตและแบบฟอร์มเข้าสู่ระบบ รหัสด้านล่างทำหน้าที่นี้ทุกประการ

เพียงคัดลอกโค้ดนี้ลงในไฟล์ css ของคุณ หรือเพิ่มลงในโค้ด HTML ที่คุณกำหนดสไตล์ รหัสเหล่านี้กำหนดปุ่มเข้าสู่ระบบ

#คอนเทนเนอร์ (
ความกว้าง:780px;
ระยะขอบ:0 อัตโนมัติ;
ตำแหน่ง: ญาติ;
}

#เนื้อหา (
ความกว้าง:520px;
ความสูงขั้นต่ำ: 500px;
}
a:link, a:เยี่ยมชมแล้ว (
สี:#27b;
การตกแต่งข้อความ: ไม่มี;
}
a:โฮเวอร์ (
การตกแต่งข้อความ:ขีดเส้นใต้;
}
ไอจี (
เส้นขอบกว้าง:0;
}
#ท็อปนาฟ (
การขยาย:10px 0px 12px;
ขนาดตัวอักษร:11px;
ความสูงของบรรทัด:23px;
การจัดแนวข้อความ: ขวา;
}
#topnav a.signin (
พื้นหลัง:#88bbd4;
การขยาย:4px 6px 6px;
การตกแต่งข้อความ: ไม่มี;
แบบอักษรน้ำหนัก: ตัวหนา;
สี:#fff;
-webkit-ขอบรัศมี:4px;
-moz-ขอบรัศมี:4px;
รัศมีเส้นขอบ: 4px;
*พื้นหลัง: URL โปร่งใส ("images/signin-nav-bg-ie.png") ไม่ทำซ้ำ 0 0;
*ช่องว่างภายใน:4px 12px 6px;
}
#topnav a.signin:hover (
พื้นหลัง:#59B;
*พื้นหลัง: URL โปร่งใส ("images/signin-nav-bg-hover-ie.png") ไม่ทำซ้ำ 0 0;
*ช่องว่างภายใน:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover (
*ตำแหน่งพื้นหลัง:0 3px!สำคัญ;
}

ก.ลงชื่อเข้าใช้(
ตำแหน่ง:ญาติ;
ขอบซ้าย:3px;
}
a.ช่วงการลงชื่อเข้าใช้(
ภาพพื้นหลัง: url ("images/toggle_down_light.png");
พื้นหลังซ้ำ: ไม่ซ้ำ;
ตำแหน่งพื้นหลัง:100% 50%;
การขยาย:4px 16px 6px 0;
}
#topnav a.menu-open (
พื้นหลัง:#ddeef6!สำคัญ;
สี:#666!สำคัญ;
โครงร่าง:ไม่มี;
}
#small_สมัครสมาชิก (
จอแสดงผล: อินไลน์;
ลอย:ไม่มี;
ความสูงของบรรทัด:23px;
ระยะขอบ:25px 0 0;
ความกว้าง:170px;
}
a.signin.menu-ช่วงเปิด (
ภาพพื้นหลัง: url ("images/toggle_up_dark.png");
สี:#789;
}

แล้วคำจำกัดความของแบบฟอร์มการเข้าสู่ระบบก็มาถึง:

#signin_menu (
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
จอแสดงผล:ไม่มี;
สีพื้นหลัง:#ddeef6;
ตำแหน่ง:แน่นอน;
ความกว้าง:210px;
ดัชนี z:100;
เส้นขอบ: 1px โปร่งใส;
การจัดแนวข้อความ: ซ้าย;
ช่องว่างภายใน:12px;
ด้านบน: 24.5px;
ขวา: 0px;
ขอบบน:5px;
ขอบขวา: 0px;
*ระยะขอบขวา: -1px;
สี:#789;
ขนาดตัวอักษร:11px;
}

อินพุต #signin_menu, อินพุต #signin_menu (
จอแสดงผล:บล็อก;
-moz-ขอบรัศมี:4px;
-webkit-ขอบรัศมี:4px;
เส้นขอบ: 1px ทึบ #ACE;
ขนาดตัวอักษร:13px;
ระยะขอบ:0 0 5px;
ช่องว่างภายใน:5px;
ความกว้าง:203px;
}
#signin_menu ป (
ระยะขอบ:0;
}
#signin_menu ก (
สี:#6AC;
}
#signin_ป้ายเมนู (
แบบอักษรน้ำหนัก:ปกติ;
}
#signin_menu อย่าลืม (
การขยาย:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete (
ชัดเจน:ทั้งสอง;
ระยะขอบ:5px 0;
}
#signin_menu ป๊า (
สี:#27B!สำคัญ;
}
#signin_submit (
-moz-ขอบรัศมี:4px;
-webkit-ขอบรัศมี:4px;
พื้นหลัง: #39d url ("images/bg-btn-blue.png") ทำซ้ำ-x เลื่อน 0 0;
เส้นขอบ: 1px ทึบ #39D;
สี:#fff;
ข้อความเงา:0 -1px 0 #39d;
การขยาย:4px 10px 5px;
ขนาดตัวอักษร:11px;
ระยะขอบ:0 5px 0 0;
แบบอักษรน้ำหนัก: ตัวหนา;
}
#signin_submit::-moz-focus-inner (
ช่องว่างภายใน:0;
เส้นขอบ:0;
}
#signin_submit:โฮเวอร์, #signin_submit:โฟกัส (
ตำแหน่งพื้นหลัง:0 -5px;
เคอร์เซอร์:ตัวชี้;
}

ถึงเวลาทำงานกับจาวาสคริปต์แล้ว

ดูเหมือนว่า รหัส HTMLและ CSS ค่อนข้างซับซ้อนและน่าสับสน แต่ในจาวาสคริปต์ทุกอย่างนั้นง่ายมาก เพียงคัดลอกโค้ดจาวาสคริปต์นี้ ซึ่งจะช่วยให้คุณสามารถแสดงและซ่อนแบบฟอร์มเมื่อคุณคลิกที่ปุ่มเข้าสู่ระบบ แม้ว่าการคลิกจะเกิดขึ้นนอกแบบฟอร์มเข้าสู่ระบบก็ตาม

$(เอกสาร).ready(ฟังก์ชั่น() (

$(".signin").คลิก(ฟังก์ชั่น(e) (
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("เมนูเปิด");
});

$("fieldset#signin_menu").mouseup(function() (
กลับเท็จ
});
$(เอกสาร).mouseup(ฟังก์ชั่น(e) (
if($(e.target).parent("a.signin").length==0) (
$(".signin").removeClass("เมนูเปิด");
$("fieldset#signin_menu").hide();
}
});

});

ตามรหัสที่นำเสนอข้างต้น เมื่อผู้เยี่ยมชมคลิกที่ปุ่มเข้าสู่ระบบ คุณลักษณะใหม่- ขั้นแรก แบบฟอร์มเข้าสู่ระบบจะแสดงขึ้น (อยู่ในแท็ก “filedset”) จากนั้นลิงก์ที่อยู่ในคลาส “.signin” จะเพิ่มคลาส “menu-open” อีกคลาสหนึ่ง เนื่องจากภาพพื้นหลังมีการเปลี่ยนแปลง

อีกเหตุการณ์หนึ่งในโค้ดนี้คือเมื่อผู้เยี่ยมชมไม่ได้คลิกบนแบบฟอร์มเข้าสู่ระบบ แต่อยู่ที่ใดที่หนึ่งบนหน้า แบบฟอร์มจะปิดเอง กล่าวอีกนัยหนึ่ง คลาส "menu-open" จะถูกแยกออกจากลิงก์ที่มีคลาส ".signin" และเปลี่ยนกลับไปเป็นภาพพื้นหลังดั้งเดิม

สำหรับเคล็ดลับ?

$(ฟังก์ชั่น() (
$("#forgot_username_link").tipsy((แรงโน้มถ่วง: "w"));
});

เรามักจะแนะนำให้ใช้ปลั๊กอิน jQuery – ยุ่งยาก เนื้อหาของคำแนะนำเครื่องมือคือสิ่งที่เขียนไว้ในแอตทริบิวต์ "title" ที่เกี่ยวข้องกับลิงก์ คุณสามารถเปลี่ยนตำแหน่งของคำแนะนำเครื่องมือโดยสัมพันธ์กับตะวันออก ตะวันตก ใต้ หรือเหนือ สิ่งนี้ถูกนำไปใช้โดยใช้พารามิเตอร์ "แรงโน้มถ่วง" ที่ระบุในโค้ดด้านบน เรามีลิงก์ไปยังเว็บไซต์สำหรับปลั๊กอินนี้โดยเฉพาะ ซึ่งคุณสามารถศึกษาความสามารถของมันในรายละเอียดเพิ่มเติมและดาวน์โหลดปลั๊กอินได้ -

สรุปแล้ว

หากคุณคัดลอกโค้ดทั้งหมดจากบทความนี้ โปรดอย่าเปลี่ยนโครงสร้างโฟลเดอร์ หากคุณเปลี่ยนรหัสจะไม่ทำงาน รหัสนี้เป็นเพียงตัวอย่างการสร้างแบบฟอร์มการเข้าสู่ระบบแบบเลื่อนลงโดยใช้ jQuery ขอให้โชคดีกับการฝึกฝนของคุณ!

เราตัดสินใจเสริมด้วยตัวอย่างบางส่วนที่เผยแพร่บน Habré เพื่อให้คุณสามารถเรียนรู้เกี่ยวกับ "เทคนิคที่เป็นนวัตกรรม" บางประการในการปรับปรุงแบบฟอร์มการลงทะเบียนและการอนุญาต

เคล็ดลับบางประการ:

• ไม่จำเป็นต้องป้อนรหัสผ่านซ้ำ

เพื่อให้ชีวิตง่ายขึ้นสำหรับผู้ใช้ (เหตุใด Google จึงแสดงสิ่งนี้ได้ดี) ควรสร้างฟิลด์เดียวและช่องทำเครื่องหมายที่จะลบ "มาสก์" - ทั้งหมดนี้ทำได้โดยใช้โค้ดจาวาสคริปต์ขนาดเล็ก

// // //

1. ไลบรารี jQuery

2-7. การเริ่มต้นในองค์ประกอบ

B. รหัส HTML ของแบบฟอร์มมีดังนี้:

เข้าสู่ระบบ: รหัสผ่าน:

5-6. การเปิดเผยฟิลด์เหล่านี้จะถูกสลับโดยสคริปต์โดยใช้ช่องทำเครื่องหมาย

B.init.js

$(document).ready(function())( $("#testpassword1").showPassword(); $("#testpassword").showPassword(".checker", ( ข้อความ: "ช่องทำเครื่องหมายแบบกำหนดเอง", ชื่อ: " showmypass " )); ));

G.styles.css

เนื้อความ ( ตระกูลฟอนต์: Arial, Helvetica, serif, sans-serif; ) แบบฟอร์ม ( ระยะขอบ: 15px 0; การขยาย: 15px; พื้นหลัง: #ccc; สี: #000; เส้นขอบ: 1px solid #aaa; ความกว้าง: 500px; ) form label.form ( float: left; width: 120px; display: block; ) form input#testpassword1, form input#testpassword ( float: left; display: block; ) .clear ( clear: ทั้งสอง; ) div.checker ( clear : ทั้งสอง; เส้นขอบ: 1px จุด #2d2d2d; พื้นหลัง: โปร่งใส;

• เป็นการดีกว่าที่จะกรอกฟิลด์อัตโนมัติตามข้อมูลที่ป้อน

ยิ่งผู้ใช้ต้องป้อนน้อยเท่าไรก็ยิ่งดีเท่านั้น บางฟิลด์สามารถกรอกตามข้อมูลก่อนหน้าที่ป้อนไว้แล้ว ตัวอย่างเช่น คุณสามารถเติมข้อมูลในช่อง "เมือง" ได้โดยการอ่านและประมวลผลค่าจากช่อง "ดัชนี" คำขอ Ajax ง่ายๆ และมันก็เสร็จสิ้น การใช้ AJAXเพื่อรับข้อมูลเกี่ยวกับเมืองและภูมิภาคจากรหัสไปรษณีย์

A. เรารวมไลบรารีไว้ใน ‹header›:

1. ไลบรารี jQuery
2. สคริปต์หลัก

B. รหัส HTML ของแบบฟอร์มมีดังนี้:

รหัสไปรษณีย์ เมือง ประเทศ

1.ช่องที่ควรกรอกรหัสไปรษณีย์

ข. zip_city.js:

ฟังก์ชัน fillcitystate(controlname)( var zipcode = trim(controlname.value); //trim spaces if(zipcode.length!=5)( //check length return false; ) var zipstring = ""; xmlhttp = new XMLHttpRequest() ; xmlhttp.open("GET", "php/zip_city.php?zip=" + zipcode, true); //ส่งคำขอไปที่ php xmlhttp.onreadystatechange=function())( //เมื่อได้รับผลลัพธ์ถ้า (xmlhttp .readyState= =4)( var zipstring = xmlhttp.responseText; if (zipstring!="Error")( var ziparray = zipstring.split("|"); document.getElementById("txtCity").value = ziparray; / /ตั้งค่าสำหรับฟิลด์เมือง document.getElementById("txtCountry").value = ziparray; //ตั้งค่าสำหรับฟิลด์ประเทศ ) ) ) xmlhttp.send(null); // ฟังก์ชันการตัดแต่งช่องว่าง ( s) ( var l=0; var r=s.length -1; ในขณะที่(l< s.length && s[l] == " ") { l++; } while(r >l && s[r] == " ") ( r-=1; ) กลับ s.substring(l, r+1); -

D. zip_city.php: ตัวจัดการคำขอ ajax

Require_once("db.php"); $db_table = "zip_city"; //ค่าส่งคืนเริ่มต้น $returnval = "ข้อผิดพลาด"; //รับพารามิเตอร์ GET $zipcode = $_GET["zip"]; // การประมวลผลล่วงหน้า if (strlen($zipcode)>5)( $zipcode = substr($zipcode, 0, 5); ) if (strlen($zipcode)!=5)( die ($returnval); ) // การรับ ค่าจากฐานข้อมูล $query = "SELECT * FROM ($db_table) WHERE zip="($zipcode)""; $resultval = mysql_query($query) or die("ไม่สามารถเรียกใช้แบบสอบถาม:Query: ".$query."".mysql_error($conn)); $rowcount = mysql_num_rows($ผลลัพธ์); if ($rowcount==1)( $row = mysql_fetch_array($resultval); $returnval = $row["zip"]."|".ucwords(strtolower($row["city"]))"|" .$row["country"]; // จริงๆ แล้วสร้างการตอบกลับที่ประสบความสำเร็จ ) echo $returnval;

D. db.php: การกำหนดค่าการเชื่อมต่อฐานข้อมูล

//การตั้งค่าการเชื่อมต่อฐานข้อมูล $dbhost = "localhost"; $dbusername = "รูท"; $dbpass = ""; $db_name = "blog_login"; $conn = mysql_connect($dbhost, $dbusername, $dbpass) or die("ไม่สามารถเชื่อมต่อกับเซิร์ฟเวอร์ฐานข้อมูล MySQL:".mysql_error()); $db = mysql_select_db($db_name, $conn) or die("ไม่สามารถเปิดฐานข้อมูล:".mysql_error($conn));

จ. การสร้างตารางฐานข้อมูล:

สร้างตารางหากไม่มี `zip_city` (`id` int(11) ไม่เป็นโมฆะ AUTO_INCREMENT, `zip` varchar(5) ไม่เป็นโมฆะ, `เมือง` varchar(255) ไม่เป็นโมฆะ, `ประเทศ` varchar(255) ไม่เป็นโมฆะ คีย์หลัก (`id`)) เครื่องยนต์ = InnoDB ค่าเริ่มต้น CHARSET = utf8 AUTO_INCREMENT = 41921 ;

• คุณสามารถทดแทนอัตโนมัติในช่องป้อนข้อมูล

บางฟิลด์จำเป็นต้องมีชุดค่าอินพุตที่จำกัด ตัวอย่างเช่น ผู้ใช้สามารถป้อนอักขระสองตัว ดูรายชื่อประเทศที่ขึ้นต้นด้วยตัวอักษรเหล่านี้ และเลือกประเทศที่ต้องการได้อย่างง่ายดาย นอกจากนี้เขาจะไม่ทำผิดพลาดในนามของบ้านเกิดของเขาอย่างแน่นอน AJAX เติมข้อความอัตโนมัติภายใต้ jQuery

ก. เชื่อมต่อใน ‹header›:

1. ไลบรารี jQuery
2. สคริปต์เติมข้อความอัตโนมัติสำหรับ jQuery
3. สคริปต์หลัก

B. รหัส HTML ของแบบฟอร์มมีดังนี้:

ประเทศ

1. ช่องที่คุณต้องเริ่มป้อนชื่อประเทศ

V.init.js:

ตัวเลือก Var, a; jQuery(function())( options = ( serviceUrl:"./php/autocomplete.php" ); /*ระบุที่อยู่ของไฟล์ตัวจัดการ*/ a = $("#query").autocomplete(options); / *กำหนดวัตถุเติมข้อความอัตโนมัติด้วย id="query"*/ ));

D. autocomplete.php: ตัวจัดการคำขอ ajax

If(isset($_GET["query"]) && (!empty($_GET["query"])))( need_once("db.php"); $db_table = "system_countries"; // ชื่อตารางฐานข้อมูล $ query = $_GET["query"]; //query จากช่องแบบฟอร์ม $variants = ""; $q = "SELECT `name_en` FROM `($db_table)` WHERE `name_en` REGEXP "^($query)( . *)" GROUP BY `name_en`"; /*ค้นหาด้วยอักขระตัวแรกที่ป้อน*/ $res = mysql_query($q) or die("Cannot run query:Query: ".$q."".mysql_error($) conn) ); /*รับผลลัพธ์ของการสืบค้น*/ if(mysql_num_rows($res)>0)( while($row = mysql_fetch_row($res))( $variants = """.$row.""" ; /*กรอกตัวเลือกอาร์เรย์*/ ) $variants = implode(",",$variants); /*พิมพ์ตัวเลือกทั้งหมดที่คั่นด้วยเครื่องหมายจุลภาคลงในบรรทัด*/ /*สร้างคำตอบ*/ $request = "( query: "".$query."", คำแนะนำ:[".$variants"] )"; echo $request; ) )

D. การสร้างตารางฐานข้อมูล:

วางตารางหากมี `system_countries`; สร้างตาราง `system_countries` (`id` int(11) NOT NULL auto_increation, `name_en` char(128) NOT NULL, `name_ru` char(128) default NULL, `code` char(2) NOT NULL, `_order` int (3) ค่าเริ่มต้น "0", `อิสระ` Tinyint (1) ค่าเริ่มต้น "1", คีย์หลัก (`id`)) ENGINE = MyISAM DEFAULT CHARSET = utf8;

กรัม styles.css:

เติมข้อความอัตโนมัติ-w1 ( พื้นหลัง:url(/autocomplete/img/shadow.png) ไม่ทำซ้ำด้านล่างขวา; ตำแหน่ง:สัมบูรณ์; ด้านบน:0px; ซ้าย:0px; ระยะขอบ:8px 0 0 6px; /* แก้ไข IE6: */ _พื้นหลัง :none; _margin:0; ) .เติมข้อความอัตโนมัติ ( border:1px solid #999; พื้นหลัง:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px - 6px; /* IE6 เฉพาะ: */ _height:350px; _overflow-x:hidden; .autocomplete .selected ( พื้นหลัง:#F0F0F0; ) .autocomplete div ( padding:2px 5px; white-space:nowrap; ) .autocomplete strong ( แบบอักษรน้ำหนัก:ปกติ; สี:#3399FF;

• ทำไมต้องป้อนข้อมูลสองครั้ง?

ร้านค้าออนไลน์หลายแห่งใช้แบบฟอร์มคำสั่งซื้อแบบหลายขั้นตอนพร้อมช่องสำหรับการชำระเงินและที่อยู่ในการจัดส่ง บ่อยครั้งความหมายก็เหมือนกัน ทำไมไม่เสนอให้ผู้ใช้ทำซ้ำค่าของฟิลด์ที่ป้อนแล้วในคลิกเดียว? โดยทางโปรแกรมเทคนิคนั้นง่ายและคุณสามารถใช้ในกรณีต่าง ๆ ที่มีความน่าจะเป็นของการซ้ำซ้อนของค่า

ก. เชื่อมต่อใน ‹header›:

1.ห้องสมุด JQuery

2. jQuery เลือกปลั๊กอิน

3. สคริปต์หลัก

B. รหัส HTML ของแบบฟอร์มมีดังนี้:

รายละเอียดการชำระเงิน.

14. คัดลอกช่องทำเครื่องหมาย

V.init.js:

// เมื่อเพจถูกโหลด $(document).ready(function() ( // เมื่อช่องทำเครื่องหมายถูกเปิดใช้งานหรือปิดใช้งาน $("#copyaddress").click(function() ( // ถ้าเปิดใช้งานถ้า ($(" #copyaddress") .is(":checked")) ( //for แต่ละช่องอินพุต $("#shipping_fields input", ":visible", document.body).each(function(i) ( //copying ค่า ​จากช่องการชำระเงิน // ไปยังช่องการจัดส่งที่เกี่ยวข้อง $(this).val($("#billing_fields input").eq(i).val()); // ใช้ไม่ได้กับเมนูแบบเลื่อนลง ดังนั้นเราจึง จะใช้ฟังก์ชันปลั๊กอิน var bcountry = $( "#bcountry").val(); $("#scountry").selectOptions(bcountry); else ( //หากช่องทำเครื่องหมายถูกปิดใช้งาน // สำหรับแต่ละฟิลด์อินพุต $( "#shipping_fields input", ":visible", document.body).each(function(i) ( //ล้างช่องข้อมูลการจัดส่ง $(this).val(""); )); $("#scountry") .selectOptions("" ) )) ;

• ดูเหมือนว่าผู้คนจะเบื่อกับการอ่านแคปช่า :)

คุณเองคงเบื่อที่จะอ่านอักขระที่อ่านไม่ออกจากแคปต์ชาแล้วป้อนอักขระเหล่านั้น สงสารผู้ใช้บ้าง แต่อย่าให้บอทผ่านไปได้ ในการทำเช่นนี้ คุณสามารถใช้เทคนิคหลายอย่างได้ ลองพิจารณาหนึ่งในนั้น วิธี Honeypot Captcha - เราสร้างฟิลด์บนแบบฟอร์มที่ผู้ใช้มองไม่เห็น แต่บอทมองเห็นได้ ด้วยการตรวจสอบค่านี้ เราสามารถจับสแปมเมอร์ที่ไม่ระมัดระวังได้โดยไม่สร้างปัญหาให้กับคนจริงๆ ผลกระทบของ captcha ต่ออัตรา Conversion

A. รหัส HTML สำหรับแบบฟอร์มมีดังนี้:

ชื่อ นามสกุล อีเมล ช่องที่ซ่อนอยู่ หากคุณกรอกข้อมูลแสดงว่าคุณเป็นบอท

B. เพิ่ม js ต่อไปนี้:

ตรวจสอบฟังก์ชัน() ( if(document.form_find.body.value)( console.log("CAUTION!!! BOT ON PAGE!!!"); ) )

ขั้นตอนการอนุญาตนั้น กล่าวโดยนัยก็คือ เมื่อบุคคลหนึ่ง "กล่าวทักทาย" กับไซต์ ในยุคกลาง ผู้คนในบ้านที่ดีจะทักทายผู้คนด้วยการโค้งคำนับและการใช้คำโค้งคำนับ แต่เราจะตามให้ทันและให้แน่ใจว่าการจับมืออันอบอุ่นเพียงครั้งเดียวก็เพียงพอสำหรับการทักทาย เราทำให้การเข้าสู่ระบบเว็บไซต์ง่ายขึ้น

• เราปล่อยให้ผู้ใช้อยู่ในหน้าที่เขาเข้าสู่ระบบ

มีสองตัวเลือกให้เลือก: แบบฟอร์มแบบเลื่อนลงและหน้าต่างโมดอล แบบฟอร์มแบบเลื่อนลงใช้พื้นที่เพียงเล็กน้อยของหน้า ซึ่งเป็นตัวเลือกที่ง่ายและรวดเร็วในการใช้งาน

A. เรารวมไลบรารีไว้ใน ‹header›:

3. สคริปต์หลัก

B. รหัส HTML ของแบบฟอร์มมีดังนี้:

รหัสผ่านเข้าสู่ระบบ จำฉันไว้ เพื่ออนุญาต ให้ป้อนข้อมูลเข้าสู่ระบบของคุณ: เข้าสู่ระบบและรหัสผ่าน: รหัสผ่าน

4. ปุ่มเพื่อเปิดแบบฟอร์ม

7-22. แบบฟอร์มนั้นเอง

19. ช่องทำเครื่องหมายที่บังคับให้ติดตั้งคุกกี้เป็นเวลานานมาก

23. สถานที่สำหรับส่งข้อความ

โวลต์ jqeasy.dropdown.js:

$(document).ready(function() ( /*main function*/ $(".btnsignin").click(function(e) ( /*เมื่อคลิกปุ่ม "Login"*/ e.preventDefault(); $ ("#frmsignin").toggle("fast",function() ( /*สลับการมองเห็นแบบฟอร์ม*/ $("#username").focus(); /*ย้ายเคอร์เซอร์อินพุตไปที่ช่องเข้าสู่ระบบ */ )); (this).toggleClass("btnsigninon"); /*สลับคลาสบนปุ่มเพื่อเปลี่ยนมุมมอง*/ $("#msg").empty(); ); $(document).mouseup(function(e) ( /*เมื่อปล่อยเมาส์*/ if($(e.target).parents("#frmsignin").length==0) ( / *not on หนึ่งในวัตถุรูปแบบ*/ $(".btnsignin").removeClass("btnsigninon"); /*ลบแบบฟอร์มและส่งคืนเหมือนเดิม*/ $("#frmsignin").hide("fast" ) ; )); ( /*ถ้ามาถึงแล้ว ตกลง*/ $("#frmsignin").text("ลงชื่อเข้าใช้แล้ว!"); /*ส่งข้อความแจ้งเตือน*/ $("#frmsignin").delay(800) จางหายไป(400);

$("#signbtn").html("ออก"); /*เปลี่ยนปุ่มออก*/ ) else ( $("#msg").html(data); $("#username").focus(); ) ) )); - ตรวจสอบฟังก์ชัน (formData, jqForm, options) ( /*ขั้นตอนการตรวจสอบความถูกต้องสำหรับข้อมูลที่ป้อน มีการประมวลผลเอาต์พุตที่ผิดพลาด*/ var form = jqForm; var un = $.trim(form.username.value); var pw = $.trim( แบบฟอร์ม .password.value); var unReg = /^(3,20)$/; var pwReg = /^(6,20)$/; var hasError = false;

"; hasError = true; ) else if(!unReg.test(un)) ( errmsg = " การเข้าสู่ระบบต้องมีความยาว 3 - 20 ตัวอักษร (a-z, 0-9, _) "; hasError = true; ) if (! pw) ( errmsg += "Enter yourpassword"; hasError = true; ) else if(!pwReg.test(pw)) ( errmsg += " รหัสผ่านต้องมีความยาว 6 - 20 ตัวอักษร (a-z, 0-9, !, @ , #, $, %, &, *, (,), _). "; hasError = true; ) if (!hasError) ( $("#msg").html(" คำขอ... "); ) else ( $("#msg").html(errmsg); return false; ) )

G. dropdown.php:

If(($_POST["username"]=="login") && ($_POST["password"]=="password"))( echo "OK"; )else( echo "การเข้าสู่ระบบหรือรหัสผ่านไม่ถูกต้อง"; )

Body( padding:20px; font:12px Verdana, Geneva, sans-serif; color:#333; ) #container ( width:700px; /*margin:0 auto;*/ padding:13px 10px; border:1px solid #999 ; ) a.btnsignin, a.btnsignout ( พื้นหลัง:#999; การขยาย:5px 8px; สี:#fff; การตกแต่งข้อความ:none; font-weight:bold; -webkit-border-radius:4px; -moz-border -radius:4px; border-radius:4px; ) a.btnsignin:hover, a.btnsignout:hover ( พื้นหลัง:#666; ) a.btnsigninon ( พื้นหลัง:#ccc!important; color:#666!important; ไม่มี; ) #frmsignin ( จอแสดงผล:ไม่มี; สีพื้นหลัง:#ccc; ตำแหน่ง:สัมบูรณ์; ด้านบน: 89px; ความกว้าง:215px; การขยาย:12px; *ระยะขอบด้านบน: 5px; ขนาดตัวอักษร:11px; -moz-border -radius:5px; -moz-border-radius-topleft:0; -webkit-border-radius:5px; รัศมี:0; z-index:100; -border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #666;

ช่องว่างภายใน:5px;

A. เรารวมไลบรารีไว้ใน ‹header›:

ความกว้าง:203px; ) #frmsignin p ( ระยะขอบ:0; ) ป้ายกำกับ #frmsignin ( font-weight:normal; ) #submitbtn ( -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; background- color:#333; border:1px solid #fff; padding:5px 8px; ) #msg ( สี:#F00; ) #msg img ( Margin-bottom:-3px; ) #msg p ( Margin:5px 0; ) # msg p:last-child ( Margin-bottom:0px; ) h1( Margin:0 auto; )

หน้าต่างโมดอลมุ่งความสนใจไปที่ตัวมันเองและในขณะเดียวกันก็ช่วยให้คุณสามารถใส่ข้อมูลเพิ่มเติมหรือคำอธิบายลงในแบบฟอร์มได้

4. สคริปต์หลัก

B. รหัส HTML ของแบบฟอร์มมีดังนี้:

6. สไตล์พื้นฐาน 7. สไตล์พื้นฐานสำหรับหน้าต่างโมดอล เข้าสู่ระบบ | บัญชีส่วนตัว

เข้าสู่ระบบ อีเมล์ รหัสผ่าน

กำลังประมวลผล...

2. ปุ่มเพื่อเปิดแบบฟอร์ม

V.init.js:

// โหลดล่วงหน้า img1 = รูปภาพใหม่ (16, 16); img1.src="./img/spinner.gif"; img2 = รูปภาพใหม่ (220, 19); img2.src="./img/ajax-loader.gif"; // เมื่อ DOM พร้อม $(document).ready(function())( // เปิด MODAL BOX ถ้าคลิกลิงค์ล็อกอิน $("#login_link").click(function())( $("#login_form ").modal() ; )); // เมื่อส่งแบบฟอร์ม $("#status > form").submit(function())( // ซ่อนปุ่ม "Submit" $("#submit"). ซ่อน(); // แสดงการหมุน gif $ ("#ajax_loading").show(); // "this" หมายถึงรูปแบบที่ตรวจสอบแล้ว var = $(this).serialize(); การโทร AJAX -- $.ajax(( type: "POST" ", url: "php/do-login.php", // ข้อมูลการอนุญาตถูกส่งมาที่นี่ ข้อมูล: str, ความสำเร็จ: function(msg)( $("# status").ajaxComplete(function(event, request, settings)( // แสดงปุ่ม "ส่ง" $("#submit").show(); // ซ่อน gif ที่หมุนอยู่ $("#ajax_loading").hide (); if(msg == "ตกลง") // เข้าสู่ระบบ ตกลงไหม ( var login_response = " " + " " + " " + " " + " " + " "+ "คุณเข้าสู่ระบบสำเร็จแล้ว! กรุณารอการเปลี่ยนเส้นทาง... "; $("a.modalCloseImg").hide(); $("#simplemodal-container").css("width","500px"); $("#simplemodal-container ").css("height","120px"); $(this).html(login_response); // หมายถึง "สถานะ" // หลังจากผ่านไป 3 วินาที ให้เปลี่ยนเส้นทาง setTimeout("go_to_private_page()", 3000); ) อื่น // ข้อผิดพลาด? ( var login_response = msg; $("#login_response").html(login_response); ) )); // สิ้นสุดการโทร AJAX - return false )); go_to_private_page() ( window.location = " php/private.php"; // หน้าส่วนตัวของผู้ใช้ )

G. do-login.php: ตัวจัดการคำขอ ajax

D. private.php: เพจที่สามารถเข้าถึงได้หลังจากได้รับอนุญาตเท่านั้น

รวม "config.php";//หากมีคุกกี้ที่เหมาะสม เซสชันจะถูกสร้างขึ้นว่าผู้ใช้ได้รับอนุญาต // ตรวจสอบว่าผู้ใช้ได้รับอนุญาตหรือไม่ if(!isSet($_SESSION["username"])) ( header( "ตำแหน่ง: /modal .html"); ทางออก; ) echo "หน้าส่วนตัว สวัสดี";

echo $_SESSION["username"]." | Exit นี่คือหน้าส่วนตัวของคุณ ";

D.config.php:

Error_reporting(E_ALL ^ ​​​​E_NOTICE); session_start(); // เริ่มส่วนหัวของเซสชัน ("Cache-control: private"); // IE 6 FIX // แก้ไขส่วนหัวเสมอ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // ส่วนหัว HTTP/1.1("Cache-Control: no-store, no-cache, must-revalidate"); header("การควบคุมแคช: post-check=0, pre-check=0", false); // HTTP/1.0 header("Pragma: no-cache"); // ---------- ข้อมูลการเข้าสู่ระบบ ---------- // $config_username = "demo"; $config_password = "demo123"; $cookie_name = "siteAuth"; $cookie_time = (3600 * 24 * 30); // 30 วัน if(!$_SESSION["username"]) ( include_once "autologin.php"; )

จ. autologin.php:

If(isSet($cookie_name)) ( // ตรวจสอบว่ามีคุกกี้อยู่หรือไม่ if(isSet($_COOKIE[$cookie_name])) ( parse_str($_COOKIE[$cookie_name]); // ทำการตรวจสอบ if(($usr = = $config_username) && ($hash == md5($config_password))) ( // ลงทะเบียนเซสชัน $_SESSION["username"] = $config_username; ) ) )

รวม "config.php"; if(isSet($_SESSION["username"])) ( unset($_SESSION["username"]); if(isSet($_COOKIE[$cookie_name])) ( // ลบ "site_auth" คุกกี้ setcookie ($cookie_name, "", time() - $cookie_time("ตำแหน่ง: modal.html");

เค stylesheet.css:

Html, body ( padding: 0; border: 0px none; font-family: Verdana; font-size: 11px; ) /* Label */ label ( width: 80px; padding-left: 20px; margin: 5px; float: left) ; จัดเรียงข้อความ: ซ้าย; ) /* ป้อนข้อความ */ อินพุต ( ระยะขอบ: 5px; การขยาย: 0px; ลอย: ซ้าย; เส้นขอบ: 1px ทึบ #cdcdcd; สีพื้นหลัง: สีขาว; -moz-border-radius: 2px; ) br ( clear: left; ) .textbox ( border: 1px solid #999999; border-top-color: #CCCCCC; border-left-color: #CCCCCC; color: #333333; font: 90% Verdana, Helvetica, Arial , sans-serif; ขนาดตัวอักษร: 11px; ) h1 ( ขนาดตัวอักษร: 17px; ) div ( ตระกูลแบบอักษร: Verdana; ขนาดตัวอักษร: 11px; ) /* ปุ่ม "เข้าสู่ระบบ" */ #submit (ระยะขอบ: 5px ; การขยาย: 0px; float: ซ้าย; สีพื้นหลัง: สีขาว; ) #notification_error ( สี: สีแดง; ความสูง: อัตโนมัติ; การขยาย: 4px; การจัดแนวข้อความ: กึ่งกลาง; ) #login_response ( ล้น: อัตโนมัติ; ) #ajax_loading : ไม่มี; ขนาดตัวอักษร: 12px; ตระกูลแบบอักษร: Tahoma; ) #logged_in ( การขยาย: 5px; ระยะขอบ: 23px 0 100px 43px; การขยาย: 5px;

การจัดแนวข้อความ: กึ่งกลาง;

ความกว้าง: 400px; ) #status ( ขอบด้านบน: 20px; ความกว้าง: 310px; )

• ลิตร basic.css:

/* ภาพซ้อนทับ */ #simplemodal-overlay (สีพื้นหลัง:#aaaaaa; เคอร์เซอร์: wait;) /* คอนเทนเนอร์ */ #simplemodal-container (ความสูง: 180px; ความกว้าง: 300px; สีพื้นหลัง: #fff; เส้นขอบ: 1px solid #000000; -moz-border-radius: 5px; ) #simplemodal-container a.modalCloseImg (พื้นหลัง:url("img/x.png") ไม่ทำซ้ำ ความกว้าง:25px; ความสูง:29px; จอแสดงผล:อินไลน์; ดัชนี z:3200; ตำแหน่ง:สัมบูรณ์; ด้านบน:-15px; เคอร์เซอร์:ตัวชี้;) #simplemodal-container #basicModalContent (ช่องว่างภายใน:8px;)

A. รหัส HTML สำหรับแบบฟอร์มมีดังนี้:

วางเคอร์เซอร์ในช่องแรกของแบบฟอร์ม

เพื่อไม่ให้ผู้ใช้ใช้สายตาและเมาส์ไปรอบๆ หน้าเพื่อค้นหาฟิลด์ที่ต้องการป้อนข้อความ เราสามารถวางเคอร์เซอร์ไว้ตรงนั้นได้โดยอัตโนมัติ และสิ่งสำคัญคือมันทำง่ายมาก และพวกเขาก็สนุกกับมัน

สนามที่สอง สนามแรก สนามที่สาม

เป้าหมายของเราคือการทำให้แบบฟอร์มลงทะเบียนและเข้าสู่ระบบดีและน่าพึงพอใจเหมือนกับพนักงานต้อนรับบนเครื่องบิน ฉันหวังว่าตัวอย่างของฉันจะมีประโยชน์และจะกลายเป็นพื้นฐานสำหรับการสร้างสรรค์ผลงานชิ้นเอกในการสร้างแบบฟอร์มของคุณเอง

ทุกอย่างเกิดขึ้นภายใต้การควบคุมของ PHP และข้อมูลจะถูกจัดเก็บไว้ในฐานข้อมูล ข้อมูลมายเอสคิวแอล.

ระบบใช้แผงเลื่อนที่ยอดเยี่ยมที่พัฒนาโดย Web-kreation

ก่อนอื่นเราต้องสร้างตารางที่จะมีข้อมูลทั้งหมดเกี่ยวกับผู้ใช้ที่ลงทะเบียน รหัสแบบสอบถามมีอยู่ในไฟล์ table.sql ในไฟล์เก็บถาวรซอร์ส

เรากำหนดรหัสเป็นจำนวนเต็มด้วยตัวเลือก auto_increation - มันจะถูกกำหนดให้กับผู้ใช้ที่ลงทะเบียนใหม่แต่ละรายโดยอัตโนมัติ นอกจากนี้ usr ยังถูกกำหนดให้เป็นคีย์เฉพาะ - ไม่อนุญาตให้มีสองระเบียนที่มีชื่อผู้ใช้เดียวกันในตาราง

หลังจากนั้นเราจะใช้คุณสมบัติที่ระบุในระหว่างขั้นตอนการลงทะเบียนเมื่อป้อนชื่อผู้ใช้

หลังจากสร้างตารางแล้ว คุณจะต้องกรอกตัวแปรสำหรับการเชื่อมต่อกับฐานข้อมูลของคุณในไฟล์ Connect.php เพื่อให้คุณสามารถรันโค้ดบนเซิร์ฟเวอร์ของคุณได้

ขั้นแรก เราต้องฝังแบบฟอร์มการสร้างเว็บลงในเพจของเรา

ข้อมูลสาธิต

• สวัสดี !



• 
  
  ปิดแผง
  

ในหลายๆ ตำแหน่งในโค้ดจะมีคำสั่ง PHP ที่ตรวจสอบว่า $_SESSION["usr"] หรือ $_SESSION["id"] ถูกกำหนดไว้หรือไม่ ข้อมูลเหล่านี้จะเป็นจริงก็ต่อเมื่อผู้เยี่ยมชมเพจเป็นผู้ใช้ที่ลงทะเบียน ซึ่งช่วยให้เราสามารถแสดงเนื้อหาที่ซ่อนอยู่สำหรับผู้เยี่ยมชมที่ลงทะเบียน

หลังจากแบบฟอร์มเราจะวางเนื้อหาส่วนที่เหลือของหน้า

แผงเลื่อน jQuery
จัดการการลงทะเบียนอย่างง่ายดายด้วย โดยใช้ PHPและ jQuery

ข้อความบางส่วน...

ไม่มีอะไรพิเศษในรหัส

ตอนนี้เราจะแปลงแบบฟอร์มเป็นระบบลงทะเบียนและเข้าสู่ระบบที่สมบูรณ์ ในการแก้ปัญหา คุณจะต้องมีสิ่งอื่นที่ไม่ใช่โค้ด PHP ปกติ รหัสทั้งหมดแบ่งออกเป็นสองส่วน

หากคุณวางแผนที่จะเพิ่มบางสิ่ง วิธีที่ดีที่สุดคือแบ่งทุกอย่างออกเป็นหลายๆ ส่วน แยกไฟล์และเปิดใช้งานตามความจำเป็น แนวทางนี้ช่วยในการพัฒนาโปรเจ็กต์ขนาดใหญ่และในขณะเดียวกันก็นำโค้ดกลับมาใช้ใหม่ในส่วนต่างๆ ของไซต์

ต่อไปนี้เป็นวิธีดำเนินการที่นี่

ที่นี่ คุกกี้ tzRemember ทำหน้าที่เป็นองค์ประกอบควบคุมเพื่อพิจารณาว่าจะออกจากระบบผู้ใช้ที่ไม่ได้ทำเครื่องหมายในช่อง "จดจำฉัน" หรือไม่ หากคุกกี้หายไป (เนื่องจากการรีสตาร์ทเบราว์เซอร์) และผู้เข้าชมไม่ได้เลือกตัวเลือก "จดจำฉัน" เราจะลบเซสชันนั้น

เซสชันจะยังคงใช้งานได้เป็นเวลาสองสัปดาห์ (ตามที่กำหนดไว้ในพารามิเตอร์ session_set_cookie_params)

และนี่คือส่วนที่สองของ demo.php

อย่างอื่น if($_POST["submit"]=="Register")
{
// หากคำขอถูกส่งจากแบบฟอร์มลงทะเบียน
$err = อาร์เรย์();
ถ้า(strlen($_POST["ชื่อผู้ใช้"])32)
{
$err="ชื่อผู้ใช้ต้องมีความยาวระหว่าง 3 ถึง 32 ตัวอักษร!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["ชื่อผู้ใช้"]))
{
$err="ชื่อผู้ใช้มีอักขระที่ไม่ถูกต้อง!";
}
if(!checkEmail($_POST["อีเมล"]))
{
$err="ของคุณ ที่อยู่อีเมลผิด!";
}
ถ้า(!นับ($ผิดพลาด))
{
// หากไม่มีข้อผิดพลาด
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1.100000)),0.6);
// สร้างรหัสผ่านแบบสุ่ม
$_POST["อีเมล"] = mysql_real_escape_string($_POST["อีเมล"]);
$_POST["ชื่อผู้ใช้"] = mysql_real_escape_string($_POST["ชื่อผู้ใช้"]);
//เตรียมข้อมูล
mysql_query(" INSERT INTO tz_members(usr,pass,email,regIP,dt)
ค่านิยม(
"".$_POST["ชื่อผู้ใช้"]."",
"".md5($ผ่าน)",
"".$_POST["อีเมล"]"",
"".$_SERVER["REMOTE_ADDR"]"",
ตอนนี้()
)");
ถ้า(mysql_affected_rows($ลิงก์)==1)
{
send_mail("demo-test@site",
$_POST["อีเมล"],
"สาธิตระบบการลงทะเบียน - การสร้างรหัสผ่าน",
"รหัสผ่านของคุณ: ".$pass);
$_SESSION["msg"]["reg-success"]="เราได้ส่งอีเมลพร้อมรหัสผ่านใหม่ของคุณแล้ว!";
}
else $err="ชื่อผู้ใช้นี้มีการใช้งานแล้ว!";
}
ถ้า(นับ($ผิดพลาด))
{
$_SESSION["msg"]["reg-err"] = ระเบิด("
",$ผิดพลาด);
}
header("ตำแหน่ง: demo.php");
ออก;
}
$สคริปต์ = "";
ถ้า($_SESSION["ข้อความ"])
{
// สคริปต์แสดงแผงเลื่อนบนหน้าโหลด
$สคริปต์ = "

$(ฟังก์ชั่น())(
$("div#panel").show();
$("#toggle a").toggle();
});
";
}

เราจัดเก็บข้อผิดพลาดที่กำหนดไว้ทั้งหมดไว้ในอาร์เรย์ $err ซึ่งกำหนดให้กับตัวแปร $_SESSION ในภายหลัง ด้วยวิธีนี้ การเข้าถึงจะยังคงอยู่หลังจากที่เบราว์เซอร์ถูกเปลี่ยนเส้นทาง

บางไซต์อาจได้รับคำเตือนเมื่อมีการส่งแบบฟอร์มหรือครั้งต่อไปที่เพจรีเฟรชว่าส่งข้อมูลไปแล้ว นี่อาจเป็นปัญหาได้ เนื่องจากจะนำไปสู่การลงทะเบียนซ้ำและโหลดที่ไม่จำเป็นบนเซิร์ฟเวอร์

เราใช้ฟังก์ชันส่วนหัวเพื่อป้องกันข้อผิดพลาดโดยการเปลี่ยนเส้นทางเบราว์เซอร์ไปยังหน้าเดียวกัน สิ่งนี้จะอัปเดตมุมมองของเพจโดยที่เบราว์เซอร์ไม่รับรู้ว่าเป็นคำขอแบบฟอร์ม ด้วยเหตุนี้ เพจจึงถูกรีเฟรชและไม่มีการถ่ายโอนข้อมูล

แต่เนื่องจากเราใช้ $_SESSION เพื่อจัดเก็บข้อผิดพลาดที่ตรวจพบทั้งหมด จึงเป็นสิ่งสำคัญมากที่เราต้องรีเซ็ตตัวแปรทั้งหมดทันทีที่ข้อผิดพลาดปรากฏต่อผู้ใช้ มิฉะนั้นจะปรากฏในทุกการดูเพจ

ยังใช้ สคริปต์เพิ่มเติมซึ่งแสดงแถบบนหน้าดาวน์โหลดเพื่อให้ผู้ใช้มองเห็นข้อความได้

แผงเลื่อนใช้ไฟล์สไตล์ของตัวเอง สิ่งที่เราต้องทำคือสร้างสไตล์ให้กับเพจของเรา

แผงเลื่อนมีไฟล์ jQuery ของตัวเอง

บรรทัดแรกประกอบด้วยไลบรารี jQuery จาก Google CDN ถัดมาคือแพตช์ IE6 PNG สำหรับองค์ประกอบความโปร่งใส จากนั้นแผงสคริปต์จะเปิดขึ้น

ตัวแปร $script จะแสดงพาเนลบนหน้าการโหลดหากจำเป็น

ขอให้เป็นวันที่ดีนะเพื่อน! มาดูการลงทะเบียนผู้ใช้ใน PHP กัน ขั้นแรก เรามากำหนดเงื่อนไขสำหรับการลงทะเบียนผู้ใช้ของเรา:

• รหัสผ่านถูกเข้ารหัสโดยใช้อัลกอริทึม MD5
• เราจะเกลือรหัสผ่าน
• ตรวจสอบว่าการเข้าสู่ระบบของคุณไม่ว่างหรือไม่
• การเปิดใช้งานผู้ใช้ด้วยจดหมาย
• การบันทึกและจัดเก็บข้อมูลใน MySQL DBMS

ในการเขียนสคริปต์นี้ เราต้องเข้าใจว่าการลงทะเบียนผู้ใช้คืออะไร การลงทะเบียนผู้ใช้หมายถึงการได้รับข้อมูลผู้ใช้จริง การประมวลผลและการจัดเก็บข้อมูล

ถ้าจะอธิบาย. ด้วยคำพูดง่ายๆการลงทะเบียนเป็นเพียงการบันทึกและจัดเก็บข้อมูลบางอย่างซึ่งเราสามารถให้สิทธิ์ผู้ใช้ในกรณีของเรา - นี่คือการเข้าสู่ระบบและรหัสผ่าน

การอนุญาตคือการให้สิทธิ์แก่บุคคลหรือกลุ่มบุคคลในการดำเนินการบางอย่าง เช่นเดียวกับกระบวนการตรวจสอบสิทธิ์เหล่านี้เมื่อพยายามดำเนินการเหล่านี้ กล่าวง่ายๆ ก็คือ ด้วยความช่วยเหลือของการอนุญาต เราสามารถจำกัดการเข้าถึงเนื้อหาบางอย่างบนเว็บไซต์ของเราได้

มาดูโครงสร้างของไดเร็กทอรีสคริปต์สำหรับการดำเนินการลงทะเบียนโดยได้รับอนุญาต เราจำเป็นต้องแบ่งสคริปต์ออกเป็นองค์ประกอบเชิงตรรกะ เราวางโมดูลการลงทะเบียนและการอนุญาตไว้ในไดเร็กทอรีแยกต่างหาก นอกจากนี้เรายังจะทำการเชื่อมต่อกับฐานข้อมูล MySQL ไฟล์ที่มีฟังก์ชันผู้ใช้ ไฟล์ในไดเร็กทอรีแยกต่างหาก สไตล์ CSSและของเรา เทมเพลต HTML- โครงสร้างนี้ช่วยให้คุณนำทางผ่านสคริปต์ได้อย่างรวดเร็ว ลองจินตนาการว่าคุณมีเว็บไซต์ขนาดใหญ่ที่มีโมดูลมากมาย ฯลฯ และหากไม่มีคำสั่งก็จะยากมากที่จะพบบางสิ่งในระเบียบเช่นนี้

เนื่องจากเราจะเก็บข้อมูลทั้งหมดไว้ใน MySQL DBMS มาสร้างกันดีกว่า โต๊ะใหญ่โดยเราจะจัดเก็บข้อมูลการลงทะเบียน

ขั้นแรกคุณต้องสร้างตารางในฐานข้อมูล ลองเรียกตาราง bez_reg โดยที่ bez คือคำนำหน้าตาราง และ reg คือชื่อของตาราง

ไฟล์ CONFIG.PHP