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

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


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

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


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)

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