บทที่ 17 การสร้างระบบล็อกอิน

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

รูปแสดง Flow chart ของระบบล็อกอิน

ระบบล็อกอินในส่วนที่จะอธิบายนี้  จะประกอบด้วยไฟล์ 3 ไฟล์

·        login.php                         ทำหน้าที่ในการรับค่าการล็อกอินแล้วนำไปตรวจสอบสิทธิ์ผู้ใช้

·        loginfailed.php                แสดงผลลัพธ์การล็อกอินในกรณีที่การล็อกอินไม่ถูกต้อง

·        logout.php                       ทำหน้าที่ในการลบตัวแปร $_SESSION  และออกจากเว็บแอพพลิเคชั่น

 

การสร้างระบบล็อกอินที่ยกมาอธิบายในที่นี้  แบ่งเป็นขั้นตอนดังต่อไปนี้

1.        การสร้างฟอร์มเพื่อรับค่าการล็อกอิน

2.        การแทรกสคริปต์  Log In User เพื่อตรวจสอบ username และ password

3.        การแสดงผลลัพธ์การล็อกอิน

4.        การใช้งานระบบล็อกอินกับไฟล์ PHP

5.        การใช้งานระบบล็อกอิน

6.        การสร้างระบบล็อกเอ้าท์

7.        การใช้งานระบบล็อกเอาท์

 

(1)  การสร้างฟอร์มเพื่อรับค่าการล็อกอิน

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

 

ขั้นตอนการสร้างฟอร์มเพื่อรับค่าการล็อกอิน:

1.        เปิดโปรแกรม Dreamweaver MX คลิกเมนู  File > New  จะปรากฏไดอะล็อก  New Document  ขึ้นมา  ให้คลิกแท็บ  General   เลือก Dynamic Page > PHP  หลังจากนั้นคลิกปุ่ม  Create  บันทึกเป็นไฟล์  login.php

2.        แทรกฟอร์มลงในเว็บเพจ  โดยคลิกที่เมนู  Insert > Form > Form  กำหนดชื่อของฟอร์มเป็น  fmLogin  โดยให้คลิกเลือกแท็ก <form> ที่ Tag Selector  บริเวณขอบล่างซ้ายของหน้าจอ   หลังจากนั้นให้ไปที่เมนู  Window > Properties   เมื่อปรากฏไดอะล็อก Properties   ให้พิมพ์ชื่อฟอร์มในช่อง Form name 

รูปแสดงเว็บเพจที่แทรกฟอร์ม

รูปแสดงการกำหนด Property ของฟอร์ม

 

3.        แทรกตารางลงภายใต้ในเว็บเพจ  โดยคลิกที่เมนู  Insert > Table  และให้กำหนดค่าดังต่อไปนี้

 

รูปแสดงการกำหนดค่าของไดอะล็อก Table

 

ตารางแสดงการกำหนดค่าในไดอะล็อก Table

4.        เมื่อดำเนินการตามขั้นตอนต่างๆ เสร็จขั้นตอนแล้ว จะได้เว็บเพจดังรูป  ให้บันทึกไฟล์ login.php

รูปแสดงเว็บเพจไฟล์  login.php

 

 

(2)  การแทรกสคริปต์  Log In User เพื่อตรวจสอบ username และ password

 

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

 

ขั้นตอนการแทรกสคริปต์  Log In User เพื่อตรวจสอบ username และ password:

1.        คลิกที่หน้าต่าง  Server Behaviors  เลือกเมนู  User Authentication -> Log In User

รูปแสดง User Authentication > Login User Server Behaviors

2.        ที่ไดอะล็อก Log In User ให้กำหนดค่าดังต่อไปนี้

 

ตารางแสดงการกำหนดค่าไดอะล็อก Log In User

 

รูปแสดงการกำหนดค่าไดอะล็อก Log In User

3.        บันทึกไฟล์  login.php

 

 

(3)  การแสดงผลลัพธ์การล็อกอิน

 

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

ขั้นตอนการแสดงผลลัพธ์การล็อกอิน:

1.        สร้างไฟล์  loginfailed.php  โดยคลิกที่เมนู  File -> New เลือก  Dynamic Page > PHP  บันทึกเป็นไฟล์  loginfailed.php   หลังจากนั้นให้สำหรับแสดงผลการล็อกอินลงในเว็บเพจ 

2.        แทรกข้อความแจ้งผลการล็อกอินและสร้างไฮเปอร์ลิงค์สำหรับคลิกกลับไปไฟล์  login.php  เพื่อพยายามล็อกอินใหม่อีกครั้ง   ดังรูปด้านล่าง  เสร็จแล้วบันทึกเป็นไฟล์ชื่อ  loginfailed.php 

 

รูปแสดงการกำหนดค่าไดอะล็อก Log In User

 

 

 

(4)  การใช้งานระบบล็อกอินกับไฟล์ PHP

 

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

 

รูปแสดง Flow chart ของการป้องกันเว็บเพจ

 

ขั้นตอนการใช้งานระบบล็อกอินกับไฟล์ PHP:

 

1.        เปิดโปรแกรม Dreamweaver MX คลิกเมนู  File > New  จะปรากฏไดอะล็อก  New Document  ขึ้นมา  ให้คลิกแท็บ  General   เลือก Dynamic Page > PHP   คลิกปุ่ม  Create   บันทึกเป็นไฟล์  testprotect.php  หลังจากนั้นให้แทรกข้อความสำหรับแสดงผลบนเว็บเพจ  ดังรูป

 

2.        คลิกที่เมนู  Window > Server Behaviors > User Authentication > Restrict Access To Page  จะปรากฏไดอะล็อก  Restrict Access To Page  ขึ้นมา  ให้กำหนดค่าต่างๆ  ดังต่อไปนี้

รูปแสดง User Authentication > Restrict Access To Page Server Behaviors

 

รูปแสดงไดอะล็อก Restrict Access To Page และ Define Access Levels

·        Restrict Based On          คลิกเลือก  Username, Password and Access Level

·        Select Level(s)               คลิกปุ่ม  Define …  เมื่อปรากฏไดอะล็อก  Define Access Levels ขึ้นมา 

ให้คลิกที่ปุ่มเครื่องหมายบวก      เพื่อเพิ่มค่าตัวเลือก  ADMIN  และ  USER  ดังรูป หลังจากนั้นคลิกปุ่ม  OK  ที่ไดอะล็อก  Restrict Access To Page ช่อง Select Level(s) จะปรากฏรายการตัวเลือก  ADMIN และ USER     ให้คลิกเลือกทั้ง  ADMIN และ USER  ซึ่งหมายถึง  ผู้ใช้ 2 ระดับนี้เท่านั้นที่มีสิทธิ์เข้าใช้งานเว็บเพจนี้ได้

 

รูปแสดงการกำหนดกลุ่มที่มีสิทธิ์ใช้งานเว็บเพจ ในไดอะล็อก Define Access Levels

                                               

·        If Access Denied, Go To               กำหนดค่าเป็น  login.php   หมายถึง  หากยังไม่ได้ล็อกอิน  ให้ไปที่เว็บเพจ  login.php  เพื่อล็อกอินก่อน

 

รูปแสดงไดอะล็อก Restrict Access To Page เมื่อเลือกกลุ่มผู้มีสิทธิ์ใช้งานเว็บเพจแล้ว

 

NOTE:  ADMIN และ USER คือ ค่าที่เก็บในฟิลด์ accesslevel ของตาราง members ที่ใช้ในการสร้างระบบล็อกอิน

 

3.        เมื่อกำหนดค่าเสร็จเรียบร้อยแล้ว  ให้คลิกปุ่ม  OK  หลังจากนั้นให้บันทึกไฟล์  testprotect.php   ขั้นตอนการใช้งานระบบล็อกอินสำหรับป้องกันไฟล์  testprotect.php  ก็เป็นอันเสร็จเรียบร้อย   

 

หากต้องการป้องกันเว็บเพจที่เป็นไฟล์เอกสาร  PHP  ใดๆ ในเว็บแอพพลิเคชั่นนี้   ก็ให้ดำเนินการตามขั้นตอน
"(4)  การใช้งานระบบล็อกอินกับไฟล์ PHP"      ซึ่งก็ขึ้นอยู่กับความต้องการหรือการออกแบบของผู้พัฒนาเว็บไซต์ ว่าต้องการให้ผู้ใช้ระดับใด (Access Level)  สามารถใช้งานเว็บแอพพลิเคชั่นเพจใดได้บ้าง

(5)  การใช้งานระบบล็อกอิน

 

ทดสอบการทำงานโดยให้เปิดโปรแกรมเว็บเบราเซอร์ไปที่ URL   http://localhost/phpweb/testprotect.php  หน้าจอจะถูกส่งไปที่เว็บเพจ   login.php  เพื่อให้ทำการล็อกอินก่อนเข้าใช้งาน

 

 

 

(6)  การสร้างระบบล็อกเอ้าท์

 

                ระบบล็อกเอ้าท์  คือเว็บเพจที่ทำหน้าที่ในการยกเลิกค่า  Session ของ PHP  ออกจากเว็บแอพพลิเคชั่น  ซึ่งจะประกอบด้วยไฟล์เพียงไฟล์เดียว คือ  logout.php 

รูปแสดง Flow chart ของการล็อกเอ้าท์

 

ขั้นตอนการสร้างระบบล็อกเอ้าท์:

1.        เปิดโปรแกรม Dreamweaver MX คลิกเมนู  File > New  จะปรากฏไดอะล็อก  New Document  ขึ้นมา  ให้คลิกแท็บ  General   เลือก Dynamic Page > PHP  หลังจากนั้นคลิกปุ่ม  Create  บันทึกเป็นไฟล์  logout.php

2.        คลิกที่เมนู  Window > Server Behaviors > User Authentication > Log Out User  จะปรากฏไดอะล็อก  Log Out User  ขึ้นมา  ให้กำหนดค่าดังต่อไปนี้ 

รูปแสดงเมนู User Authentication > Log Out User ของ Server Behaviors

 

รูปแสดงการกำหนดค่าในไดอะล็อก Log Out User

 

·        Log Out  When   เท่ากับ   Page Loads  หมายถึง  ให้ทำงานทันทีเมื่อมีการเรียกใช้งานไฟล์  logout.php

·        When Done, Go To   เท่ากับ  login.php  หมายถึง  หลังจากล็อกเอ้าท์แล้ว  ให้ไปที่ไฟล์  login.php

3.        บันทึกไฟล์  logout.php

4.        สร้างไฮเปอร์ลิงค์  Log Out  ไปหาไฟล์  logout.php  ในเว็บเพจที่มีการใช้ระบบล็อกอิน

 

 

(7)  การใช้งานระบบล็อกเอ้าท์

 

ทดสอบระบบโดยการเปิดเว็บเบราเซอร์ไปที่ URL ของเว็บเพจที่มีปุ่ม  Log Out   ให้ทดลองคลิกดู  เว็บ
เบราเซอร์จะถูกส่งไปทำงานที่ไฟล์  login.php  ดังที่กำหนดไว้ในไดอะล็อก  Log Out User