ข้ามไปที่เนื้อหาหลัก

สร้างแบบฟอร์มล็อกอิน 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 CI MANIA PHP Code Generator 
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม

สนใจสั่งซื้อเพียง 3,990 บาท



PHP CI MANIA PHP Code Generator 

โปรแกรมช่วยสร้างโค้ด "ลดเวลาการเขียนโปรแกรม"
ราคาสุดคุ้มเพียง 3,990 บาท 
http://www.phpcodemania.com


ความคิดเห็น


  1. เขียนล้อกอินเข้าเฟสบุ้คได้มั้ย ผมโดนแฮกมามันลบทั้งเบอร์และอีเมลออกทำให้รับรหัสกลับเข้าสุ่ระบบไม่ได้

    ตอบลบ
    คำตอบ
    1. มันคนละอย่างกัน เเต่ถ้ามาทำเป็นฟิชชิ่งก็ได้ เเต่ต้องต้องเเต่ cssเอง

      ลบ

แสดงความคิดเห็น

โพสต์ยอดนิยมจากบล็อกนี้

แจกฟรี!! ระบบต่างๆที่พัฒนาด้วย PHP สำหรับนำไปใช้ในงานต่างๆ

       สำหรับหลายท่านที่ขอโค้ดเข้ามาทาง Inbox ของเฟซบุ๊กแฟนเพจ หรือถามถึงระบบต่างๆหลังไมค์มานั้น ส่วนใหญ่ก็มีแจกอยู่แล้วในเว็บบอร์ด ThaiCreate.Com นะครับ และด้านล่างนี้ก็เป็นระบบต่างๆที่แจกให้นำไปลองใช้ลองศึกษากันครับ

สอนเขียน PHP แสดงการจองห้องประชุมแบบไฮไลท์ตามช่วงเวลา (แบบเชื่อมต่อฐานข้อมูล MySQL)

ตัวอย่าง ผลลัพธ์ที่ได้จากการจองในฐานข้อมูล ตาราง tb_room สร้างตารางรายชื่อห้องประชุม สำหรับ id นั้นเป็น Primarykey จะกำหนดให้สร้างอัตโนมัติ ทุกครั้งที่เราเพิ่มชื่อห้องประชุมใหม่ -- -- Database: `tobedev_example` -- -- -------------------------------------------------------- -- -- Table structure for table `tb_room` -- CREATE TABLE IF NOT EXISTS `tb_room` (   `id` int(11) NOT NULL,   `name` varchar(30) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8; -- -- Dumping data for table `tb_room` -- INSERT INTO `tb_room` (`id`, `name`) VALUES (1, 'ห้องประชุม 1'), (2, 'ห้องประชุม 2'), (3, 'ห้องประชุม 3'), (4, 'ห้องประชุม 4'), (5, 'ห้องประชุม 5'); -- -- Indexes for dumped tables -- -- -- Indexes for table `tb_room` -- ALTER TABLE `tb_room`   ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `tb_room` -- ALTER TABLE `tb_room`   MODIFY `i...

การนำไอคอน มาแสดงบน Fullcalendar

เนื่องจากมีน้องคนหนึ่งให้ช่วยดูโค้ดเกี่ยวกับ Fullcalendar ให้หน่อย แล้วพอดีช่วงนี้ผมก็กำลังสนใจปฏิทิน Fullcalendar อยู่พอดี จึงลองหาสาเหตุที่ไม่สามารถแสดงข้อมูลจาก MySQL และไม่สามารถแทรก icon เข้าไปใน Fullcalendar ได้ จากที่สังเกตุได้ครั้งแรกคือ Error ที่ Console ของ Firefox เกี่ยวกับฟังก์ชั่นที่เขียนผิด และก็มีการ echo ค้างไว้ในส่วนของไฟล์ getCalendar.php ก็เลยจัดการทดสอบแล้วลบ echo ออกให้เหลือแค่ echo json_encode($event_array); ที่ได้ใช้งานจริงเท่านั้น ขั้นตอนการตรวจสอบความถูกต้องของโค้ด PHP 1) ต้องแน่ใจว่าคำสั่งที่เขียนไว้ สามารถดึงข้อมูลมาแสดงผลได้ด้วยการ echo $sql; 2) นำคำสั่งที่ได้ไปรันในโปรแกรมจัดการฐานข้อมูล ในที่นี้คือ phpMyAdmin 3) เมื่อตรวจสอบดูผลลัพธ์ที่ได้ หากถูกต้องมีข้อมูลก็แสดงว่าการ Query ทำงานได้ 4) มาดูการทำงานของ JavaScript ในส่วนของ jQuery มีการแจ้งเตือนที่ฟังก์ชั่น .on() ซึ่งจะใช้กับ jQuery เวอร์ชั่นใหม่เท่านั้น นั่นหมายถึงเวอร์ชั่น jQuery ที่มากับ Fullcalendar เป็นเวอร์ชั่นเก่า ก็ให้เปลี่ยนไปใช้ .live() แทน ก็จะทำงานได้ปกติ 5) ม...