บทความที่เรียบเรียงใหม่



14 มิ.ย. 2556

สร้างแบบฟอร์มล็อกอิน HTML + PHP

       ผมจะสร้างระบบตัวอย่างเพื่อแสดงให้เห็นการทำงานของสคริปต์ PHP ที่ใช้ในการล็อกอินอย่างง่ายๆ นะครับ โดยที่ผมจะสร้างโฟลเดอร์ใหม่ขึ้นในไดร์ฟที่เราได้กำหนดให้เป็น Directory Root สำหรับรันสคริปต์ PHP ซึ่งผมกำหนดเอาไว้ที่ D:\www ดังนั้นผมจะสร้างโฟลเดอร์ teacher_assistant ขึ้นมาใหม่จะได้พาธเป็น D:\www\teacher_assistant สำหรับการเข้าถึง จะใช้ URL ดังนี้
http://localhost/teacher_assistant
หลังจากสร้างโฟลเดอร์เสร็จเรียบร้อยก็จะเริ่มกระบวนการเตรียมโครงสร้างโปรเจ็กต์ด้วยเครื่องมือช่วยเขียนโปรแกรมชื่อว่า eclipse ซึ่งดูวิธีการสร้างโปรเจ็กต์ได้จากบทความ เริ่มต้นสร้างโปรเจ็กต์ ด้วยโปรแกรม eclipse เครื่องมือเขียนโปรแกรม php ในบทความเป็นการสร้างโปรเจ็กต์ที่มีพาธเป็นโฟลเดอร์ login แต่ในที่นี้ต้องเป็นพาธให้ตรงกับโฟลเดอร์ใหม่ที่เราได้สร้างขึ้นด้วยนะครับ



 สร้างไฟล์ login_form.php
<html>
<head>
<title>Login Form by www.sunzan-design.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="padding:10px; border: 1px solid #eeeeee; background-color: #FAFFF5;">
<form name="frmLogin" method="post" action="login.php">
  ล็อกอินเข้าสู่ระบบ...<br>
  <table border="0" cellspacing="0" cellpadding="5" style="width: 300px">
    <tbody>
      <tr>
        <td> ชื่อผู้ใช้</td>
        <td>
                <input name="username" type="text" id="username">
        </td>
      </tr>
      <tr>
        <td> รหัสผ่าน</td>
        <td>
                <input name="password" type="password" id="password">
        </td>
      </tr>
      <tr>
        <td> </td>
        <td>  
                <input type="submit" name="btnSubmit" value="เข้าสู่ระบบ">
        </td>
      </tr>
    </tbody>
  </table>
</form>
</div>
</body>
</html>

ผลลัพธ์
ล็อกอินเข้าสู่ระบบ...
ชื่อผู้ใช้
รหัสผ่าน

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


 สร้างไฟล์ login.php
<?php
 session_start();
 header ('Content-type: text/html; charset=utf-8');
 
 mysql_connect("localhost","root","abcd1234");  //ข้อมูลนี้ได้มาจากตอนติดตั้งเว็บเซิร์ฟเวอร์
 mysql_select_db("sunzandesign");
 
 $username = isset($_POST['username']) ? $_POST['username'] : '';
 $password = isset($_POST['password']) ? $_POST['password'] : '';
 
 $strSQL = "SELECT * FROM tb_user WHERE user_name = '".mysql_real_escape_string($username)."' 
 AND user_password = '".mysql_real_escape_string($password)."'";
 $qry = mysql_query($strSQL) or die('ไม่สามารถเชื่อมต่อฐานข้อมูลได้ Error : '. mysql_error());
 $row = mysql_fetch_assoc($qry);
 if(!$row)
 {
   echo "
ชื่อผู้ใช้ หรือ รหัสผ่าน ไม่ถูกต้อง!
"; } else { //สร้าง SESSION เพื่อใช้ในหน้าอื่น ที่ต้องการตรวจสอบข้อมูลผู้ใช้ในขณะนั้น $_SESSION["user_id"] = $row["user_id"]; $_SESSION["user_level"] = $row["user_level"]; $_SESSION["user_fullname"] = $row["user_fullname"]; session_write_close();//สิ้นสุดการทำงานของ SESSION ในหน้านี้ header("location:index.php");//ย้ายไปยังหน้าหลัก } mysql_close();//ปิดการเชื่อมต่อฐานข้อมูล ?>


ไฟล์ที่ 3 เป็นส่วนของหน้าหลัก index.php เมื่อการล็อกอินสำเร็จ จะเข้ามาที่หน้าหลักทันที
<html>
<head>
<title>Login Form by www.sunzan-design.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>

<h2 style="color:#00A5C2;padding:20px">ยินดีต้อนรับเข้าสู่ระบบช่วยงานคุณครูของหนู ^^</h2>

</body>
</html>



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


 ถ้าล็อกอินสำเร็จจะพบกับข้อความต้อนรับ


สำหรับระบบล็อกอินด้วย PHP นี้หากท่านยังไม่มีพื้นฐานการติดตั้งเว็บเซิร์ฟเวอร์ และสร้างโปรเจ็กต์งานด้วยโปรแกรม eclipse มาก่อนให้ย้อนกลับไปอ่านบทความเหล่านี้อีกครั้งหนึ่งครับ
หรืออ่านบทความในหมวด รวมเครื่องมือ (PHP Tools) ตั้งแต่ต้น เพื่อที่จะได้เข้าใจตรงกันครับ

ดาวน์โหลดซอร์สโค๊ดทั้งหมด (3)

ดูวิธีดาวน์โหลด ที่นี่





ค้นหาบทความสอนเขียนโปรแกรมทั้งหมด

บทความสอนเขียน PHP เบื้องต้น

PHP คืออะไร โครงสร้างภาษา PHP
PHP กับการกำหนดตัวแปร (Variable) PHP กับเงื่อนไขการตัดสินใจ (if..else)
ข้อมูลชนิดอาร์เรย์ (Array) PHP กับการทำซ้ำ (Loop)


การรับตัวแปรจากแบบฟอร์ม

การเชื่อมต่อฐานข้อมูล MySQL