ใบความรู้ที่ 8 เรื่อง การเขียนโปรแกรมระบบลงทะเบียนสมาชิก

งานนำเสนอเรื่อง: "ใบความรู้ที่ 8 เรื่อง การเขียนโปรแกรมระบบลงทะเบียนสมาชิก"— ใบสำเนางานนำเสนอ:

1 ใบความรู้ที่ 8 เรื่อง การเขียนโปรแกรมระบบลงทะเบียนสมาชิก
ใบความรู้ที่ 8 เรื่อง การเขียนโปรแกรมระบบลงทะเบียนสมาชิก

2 เมื่อกล่าวถึงการพัฒนาระบบงาน ไม่ว่าโปรแกรมนั้นๆจะใช้ภาษาใดพัฒนาก็ตามจะต้องอ้างอิงถึง วงจรการพัฒนาระบบ (System Development Life Cycle : SDLC) คือ กระบวนการทางความคิด (Logical Process) ในการพัฒนาระบบสารสนเทศเพื่อแก้ปัญหาทางธุรกิจและตอบสนองความต้องการของผู้ใช้ได้ โดยระบบที่จะพัฒนานั้น อาจเริ่มด้วยการพัฒนาระบบใหม่เลยหรือนำระบบเดิมที่มีอยู่แล้วมาปรับเปลี่ยนให้ดียิ่งขึ้น ภายในวงจรนี้จะแบ่งกระบวนการพัฒนาออกเป็นระยะ (Phases) ได้แก่ ระยะการวางแผน (Planning Phase) ระยะการวิเคราะห์ (Analysis Phase) ระยะการออกแบบ (Design Phase) และระยะการสร้างและพัฒนา (Implementation Phase) โดยแต่ละระยะจะประกอบไปด้วยขั้นตอน (Steps) ต่างๆ แตกต่างกันไปตาม Methodology ที่นักวิเคราะห์นำมาใช้ เพื่อให้เหมาะสมกับสถานะทางการเงินและความพร้อมขององค์กรในขณะนั้น

3 03 1. การวิเคราะห์และออกแบบระบบงานลงทะเบียนสมาชิก
ขั้นตอนในวงจรพัฒนาระบบ ช่วยให้นักวิเคราะห์ระบบสามารถดำเนินการได้อย่างมีแนวทางและเป็นขั้นตอน ทำให้สามารถควบคุมระยะเวลาและงบประมาณในการปฏิบัติงานของโครงการพัฒนาระบบ ได้ ขั้นตอนต่างๆ นั้นมีลักษณะคล้ายกับการตัดสินใจแก้ปัญหาตามแนวทางวิทยาศาสตร์(Scientific Management)  ได้แก่ การค้นหาปัญหา การค้นหาแนวทางแก้ไขปัญหา การประเมินผลแนวทางแก้ไขปัญหาที่ค้นพบ เลือกแนวทางที่ดีที่สุด และพัฒนาทางเลือกนั้นให้ใช้งานได้ สำหรับวงจรการพัฒนาระบบโดย จะแบ่งเป็น 6 ขั้นตอน ได้แก่ ศึกษาความเป็นไปได้ (Plan) วิเคราะห์ (Analysis) ออกแบบ (Design) สร้างหรือพัฒนาระบบ (Development) การปรับเปลี่ยน (Conversion) บำรุงรักษา (Maintenance) 03

4 โดยในหน่วยการเรียนนี้จะกล่าวถึงขั้นตอนพัฒนาโปรแกรม ในส่วนของการวิเคราะห์ (Analysis), การออกแบบ (Design) และการสร้างหรือพัฒนาระบบ (Development) สำหรับงานธุรกิจ โดยจะเน้นพัฒนาระบบงานการลงทะเบียนสมาชิกและทำการตรวจสอบสิทธิ์การใช้งานระบบ (Login)

5 การพัฒนาระบบลงทะเบียนสมาชิกที่เข้ามาใช้งานเว็บไซต์โดยทำการกำหนดคุณสมบัติของโปรแกรมเบื้องต้นว่าสามารถทำงานอะไรได้บ้างเช่น ลงทะเบียนสมาชิก, แสดงข้อมูล, ค้นหา, แก้ไข, ลบ ข้อมูลสมาชิก มีระบบยืนยันตัวตน Login เพื่อเข้าใช้งานระบบ ในที่นี้จะทำการอ้างอิงข้อมูลสมาชิกที่เป็นนักเรียนนักศึกษา ที่ทำการสังกัดแผนกวิชาต่างๆ ทำการพัฒนาระบบงานด้วยภาษา PHP โดยใช้โปรแกรม Dreamweaver ช่วยในการ Implement ระบบงานในส่วนของการติดต่อฐานข้อมูล MySQL ดังนี้ department.p hp - เพิ่มข้อมูล แผนกวิชา - แสดงข้อมูล แผนกวิชา student.php - เพิ่มข้อมูล นักศึกษา studentedit.p hp - แก้ไขข้อมูล นักศึกษา studentadd. php - เพิ่มข้อมูล นักศึกษา studentdel.p hp - ลบข้อมูล นักศึกษา ภาพที่ 8.2 แผนผังระบบงานลงทะเบียนสมาชิก

6 2. ออกแบบฐานข้อมูลในระบบลงทะเบียนสมาชิก
การออกแบบฐานข้อมูลสมาชิก (นักศึกษา) ต้องกระทำการวิเคราะห์ความต้องการพื้นฐานของระบบที่จะจัดเก็บพร้อมทั้งกำหนดความสัมพันธ์ระหว่างตาราง โดยระบบงานมีความต้องการลงทะเบียนสมาชิก (นักศึกษา) และเขียนโปรแกรมยืนยันตัวตน (Login) ในส่วนระบบฐานข้อมูลให้ทำการสร้างฐานข้อมูลและความสัมพันธ์ผ่านโปรแกรม MySQL Workbench ดังขั้นตอนวิธีสร้างระบบในหน่วยการเรียนที่ 5 เรื่อง การวิเคราะห์และออกแบบระบบฐานข้อมูล MySQL Database ทำการกำหนด Table ทั้งหมด 2 ตางราง ประกอบไปด้วย ตารางนักศึกษา (Student) และ ตารางแผนกวิชา (Department) โดยให้ทำการสร้างฐานข้อมูลและกำหนดความสัมพันธ์ผ่านพจนานุกรมข้อมูล ( Data dictionary ) กำหนดชื่อฐานข้อมูล(Database) : TKC

7 ตารางที่ 8.1 ข้อมูลนักศึกษา (Student)
ชื่อข้อมูล ชนิด ขนาด คำอธิบาย หมายเหตุ stu_id Integer 11 รหัสนักศึกษา PK stu_name Varchar 30 ชื่อ stu_lastname นามสกุล stu_address 200 ที่อยู่ stu_tel 15 หมายเลขโทรศัพท์ stu_ 100 อีเมล์ stu_picture 50 รูปภาพ stu_user ชื่อผู้ใช้งาน stu_password รหัสผ่าน department_dep_id 5 รหัสแผนก FK

8 ตารางที่ 8.2 ข้อมูลแผนกวิชา (Department)
ชื่อข้อมูล ชนิด ขนาด คำอธิบาย หมายเหตุ dep_id Integer 5 รหัสแผนกวิชา PK dep_name Varchar 50 ชื่อแผนก Dep_discription 100

9 ในส่วนของการออกแบบและดำเนินการสร้างฐานข้อมูลและกำหนดความสัมพันธ์สามารถดำเนินการได้โดยใช้โปรแกรม MySQL Workbench ซึ่งได้กล่าวไปแล้วในหน่วยการเรียนที่ 4 โดยในขั้นตอนนี้จะเป็นการสร้าง EER Diagram โดยใช้โปรแกรม MySQL Workbench มีขั้นตอนดังนี้ 2.1 การสร้าง EER Diagram ด้วย MySQL Workbench เปิดโปรแกรม MySQL Workbench ทำการสร้างไฟล์ใหม่ File > New Model ภาพที่ 8.3 โปรแกรม MySQL Workbench

10 ภาพที่ 8.4 New Model MySQL Workbench

11 เมื่อเข้าสู่ไฟล์ New Model ทำการกำหนดชื่อ Physical Schemas ให้เป็นชื่อ ฐานข้อมูลที่กำหนดให้กำหนดชื่อฐานข้อมูลเป็น TKC ดังนี้ ภาพที่ 8.5 กำหนดชื่อฐานข้อมูล Physical Schemas

12 ภาพที่ 8.6 การดำเนินการสร้าง EER Diagram
ทำการสร้าง EER Diagram โดยการ คลิก เลือก Add Diagram เพื่อสร้าง EER Diagram สร้างตารางและกำหนดความสัมพันธ์ระหว่างตาราง คลิก Add Diagram ภาพที่ 8.6 การดำเนินการสร้าง EER Diagram

13 ภาพที่ 8.7 EER Diagram

14 ดำเนินการสร้างตาราง Student และ Department โดยกำหนดค่า Schemas ตาม Data Dictionary และเชื่อมโยงความสัมพันธ์ระหว่างตารางในรูปความสัมพันธ์แบบ 1 : M ภาพที่ 8.8 EER Diagram TKC Database

15 ภาพที่ 8.9 รูปแบบความสัมพันธ์แบบ 1:M Non-Identifying Relationship

16 3. สร้างฐานข้อมูลในระบบลงทะเบียนสมาชิก
เมื่อเสร็จสิ้นขั้นตอนการสร้าง EER Diagram กำหนดความสัมพันธ์ระหว่างตารางก็จะเข้าสู่ขั้นตอนนำ EER Diagram ที่ผ่านการสร้างความสัมพันธ์แล้วไปใช้งานโดยกระบวนการส่งออกข้อมูลของโปรแกรม MySQL Workbench นั้นจะกระทำผ่านขั้นตอนที่เรียกว่า Forward Enginee เพื่อส่งออกข้อมูลไปยังฐานข้อมูล MySQL ที่ถูกติดตั้งอยู่ที่เครื่องคอมพิวเตอร์แม่ข่าย โดยมีขั้นตอนการส่งออกข้อมูลดังนี้ 3.1 การส่งออกข้อมูลด้วย Forward Engineer เลือก Tab Menu Database > Forward Enginee คลิกเลือกเมนู คลิ ก ภาพที่ 8.10 แสดงการเลือก Forward Engineer

17 คลิ ก คลิ ก ภาพที่ 8.11 Set Parameters for Connecting to a DBMS ภาพที่ 8.12 Set Option for Database to be Created

18 คลิ ก คลิ ก ภาพที่ 8.13 Select Option to Forward Engineer ภาพที่ 8.14 Review the SQL Script to be Executed

19 ภาพที่ 8.15 Forward Engineering Progress

20 เมื่อเสร็จสิ้นขั้นตอนการ Forward Engineering สามารถเข้าไปตรวจสอบได้ในส่วนของโปรแกรมบริหารจัดการฐานข้อมูล phpMyAdmin หรือเมื่อต้องการปรับปรุงแก้ไขข้อมูลตารางหรือความสัมพันธ์ระหว่างตารางสามารถเข้าไปแก้ไขปรับปรุง และทำการ Forward Engineering ซ้ำได้ ตรวจสอบการสร้างฐานข้อมูล ผ่านโปรแกรม phpMyAdmin จะใช้ งานผ่านโปรแกรม WAMPServer ดังนั้นต้อง ติดตั้งโปรแกรม WAMPServer ก่อน ดังรายละเอียดการติดตั้งในหน่วยการเรียนที่ 1 แล้ว เปิด Internet Explorer พิมพ์ที่ URL localhost แล้ว enter ภาพที่ 8.16 URL localhost

21 เมื่อจอภาพแสดงโปรแกรม WAMPServer แล้วให้คลิกที่ phpMyAdmin
คลิ ก ภาพที่ 8.17 WampServer

22 ภาพที่ 8.18 phpMyAdmin

23 ภาพที่ 8.19 ตรวจสอบความถูกต้องของฐานข้อมูล
เมื่อเข้าสู่โปรแกรม phpMyAdmin ทำการตรวจสอบความถูกต้องของฐานข้อมูลที่สร้างว่าถูกต้องหรือไม่ ถ้ามีข้อผิดพลาดสามารถเข้าไปแก้ไขในโปรแกรม MySQL Workbench และทำการ Forward Engineer อีกครั้ง ภาพที่ 8.19 ตรวจสอบความถูกต้องของฐานข้อมูล

24 4. เขียนโปรแกรมจัดการระบบลงทะเบียนสมาชิก
การพัฒนาโปรแกรมระบบลงทะเบียนสมาชิก(นักศึกษา) จะแบ่งข้อมูลเป็น 2 ส่วน คือแผนกวิชาและข้อมูลนักศึกษา ที่มีความสัมพันธ์ซึ่งกันโดยนักศึกษาจะทำการสังกัดแผนกวิชา โดยจะมีลำดับขั้นตอนในการพัฒนาโปรแกรมดังนี้ 4.1 การต่อฐานข้อมูล MySQL Database Connection ในการเรียกใช้งาน Dreamweaver Function สำหรับจัดการฐานข้อมูล MySQL นั้นจะมีการจัดการข้อมูลผ่าน Function Data Object จะมีขั้นตอนแรก ในการเริ่มต้นการใช้งาน โดยทำการเชื่อมต่อฐานข้อมูลผ่าน MySQL Database Connection โดยมีรูปแบบและคำอธิบายวิธีการใช้งานดังนี้ คลิก เลือกเมนู windows คลิก เลือก Database เพื่อเริ่มต้นจัดการฐานข้อมูล MySQL Connection

25 ภาพที่ 8.20 การเริ่มต้นใช้งาน MySQL Connection
1. คลิก windows 2. คลิก Database ภาพที่ 8.20 การเริ่มต้นใช้งาน MySQL Connection

26 ภาพที่ 8.21 ชื่อตารางในฐานข้อมูล
โดยกระบวนการสร้าง MySQL Connection ได้กล่าวไว้แล้วในหน่วยการเรียนที่ 6 เมื่อการติดตั้ง MySQL Connection เสร็จสมบูรณ์จะปรากฏแท็บ Database ที่แสดงชื่อ Connection ที่ได้ตั้งชื่อไว้โดยสามารถ คลิก เลือก tables เพื่อทำการตรวจสอบตาราง ในฐานข้อมูลได้ ภาพที่ 8.21 ชื่อตารางในฐานข้อมูล

27 4.2 การเขียนโปรแกรมจัดการข้อมูลแผนกวิชา (Department)
เมื่อผ่านกระบวนจัดการ MySQL Database Connection แล้วจะเข้า สู่การเขียนโปรแกรมจัดการระบบโดยเริ่มต้นจากระบบการจัดการข้อมูล แผนกวิชา (Depertment) ซึ่งจะทำหน้าที่ในการเพิ่มข้อมูลแผนกวิชา และแสดงผลข้อมูลจากฐานข้อมูล มีลำดับขั้นตอนในการทำงานดังนี้ สร้างไฟล์ใหม่ชื่อ File > New คลิก เลือก PHP > Create Ctrl + s บันทึกไฟล์ชื่อ department.php 1. คลิก PHP 2. คลิก Create ภาพที่ 8.22 สร้างไฟล์ department.php

28 ภาพที่ 8.23 ขั้นตอนการสร้าง Record Insertion Form Wizard
คลิก เลือกเมนู Insert > Data Objects > Insert Record > Record Insertion Form Wizard 1. Insert 4. คลิก 3. Insert Record 2. Data Objects ภาพที่ 8.23 ขั้นตอนการสร้าง Record Insertion Form Wizard

29 2. เลือกไฟล์ department.php
3. คลิก 2. เลือกไฟล์ department.php ภาพที่ 8.24 Record Insertion Form

30 ภาพที่ 8.25 ผลลัพธ์การสร้างแบบฟอร์มเพิ่มข้อมูลแผนกวิชา

31 ภาพที่ 8.26 ขั้นตอนการสร้าง Recordset Department
เมื่อทำการสร้างฟอร์มเพิ่มข้อมูลแผนกวิชาเสร็จสมบูรณ์ ก็จะเข้าสู่ขั้นตอนการแสดงผลข้อมูลแผนกวิชาโดยมีลำดับการเรียกข้อมูลแผนกวิชามาแสดงดังนี้ คลิก เลือกเมนู Insert > Data Object > Recordset 1. Insert 3. คลิก Recordset 2. Data Objects ภาพที่ 8.26 ขั้นตอนการสร้าง Recordset Department

32 ภาพที่ 8.27 ตั้งค่า Recordset Department
ทำการตั้งค่า Recordset ตั้งชื่อ ShowDepartment เลือกตาราง (Table) department 1. ตั้ง ชื่อ 3. คลิก 2. เลือก ตาราง ภาพที่ 8.27 ตั้งค่า Recordset Department

33 ภาพที่ 8.28 ผลลัพธ์ตั้งค่า Recordset Department

34 1. Insert 3. Dynamic Data 4. คลิก Dynamic Table 2. Data Objects
เมื่อผ่านขั้นตอนการสร้าง Recordset สำหรับตาราง Department ก็จะถึง ขั้นตอนการเรียกใช้งาน Recordset เพื่อแสดงข้อมูลโดยผ่าน Dynamic Table ดังนี้ คลิก เลือกเมนู Insert > Data Objects > Dynamic Data > Dynamic Table 1. Insert 3. Dynamic Data 4. คลิก Dynamic Table 2. Data Objects ภาพที่ 8.29 ขั้นตอนการสร้าง Dynamic Table Recordset Department

35 1. เลือก Recordset 3. คลิก 2. ตั้งค่าการ แสดงผล ภาพที่ 8.30 ขั้นตอนการสร้าง Dynamic Table

36 เปลี่ยนค่า Column เป็น ภาษาไทย
ภาพที่ 8.31 ผลลัพธ์ตั้งค่า Dynamic Table

37 แสดงผลลัพธ์การ ป้อนข้อมูล
ทำการเปลี่ยนชื่อ Column เป็นภาษาไทย และทำการทดสอบโปรแกรมโดยการกดปุ่ม F12 เพื่อแสดงผลลัพธ์ดังภาพ 1. ป้อนข้อมูล แผนกวิชา 2. คลิก บันทึก ภาพที่ 8.32 ป้อนข้อมูลแผนกวิชา แสดงผลลัพธ์การ ป้อนข้อมูล ภาพที่ 8.33 ผลลัพธ์การป้อนข้อมูลแผนกวิชา

38 4.3 การเขียนโปรแกรมจัดการข้อมูลนักศึกษา (Student)
เมื่อผ่านกระบวนจัดการข้อมูลแผนกวิชา (Depertment) แล้ว จะเข้าสู่การเขียนโปรแกรมจัดการข้อมูลนักศึกษา(Student) ซึ่งข้อมูลมีความสัมพันธ์กับตารางแผนกวิชา โดยในส่วนของข้อมูลนักศึกษาจะเป็นตารางหลักในการใช้ลงทะเบียนผู้ใช้งานและใช้ในการตรวจสอบสิทธิ์ในการเข้าใช้งานระบบ โดยจะกล่าวในขั้นตอนถัดไปโดยการจัดการข้อมูลนักศึกษา (Student) มีลำดับขั้นตอนในการทำงานดังนี้ 1 ) สร้างไฟล์ใหม่ชื่อ File > New 2 ) คลิก เลือก PHP > Create 3 ) Ctrl + s บันทึกไฟล์ชื่อ student.php 1. คลิก PHP 2. คลิก Create ภาพที่ 8.34 สร้างไฟล์ student.php

39 ภาพที่ 8.35 บันทึกไฟล์ student.php

40 ภาพที่ 8.36 ขั้นตอนการสร้าง Record Insertion Form Wizard
เมื่อทำการสร้างไฟล์ student.php เพื่อทำการสร้างแบบฟอร์มบันทึกข้อมูลนักศึกษาโดยใช้ Record Insertion Form Wizard มีขั้นตอนดังนี้ คลิก เลือกเมนู insert > Data Objects > Insert Record > Record Insertion Form Wizard 1. Insert 4. คลิก 3. Insert Record 2. Data Objects ภาพที่ 8.36 ขั้นตอนการสร้าง Record Insertion Form Wizard

41 1. เลือกตาราง student 3. คลิก 2. เลือก student.php ภาพที่ 8.37 Record Insertion Form Wizard

42 ภาพที่ 8.38 ผลลัพธ์การสร้างแบบฟอร์มเพิ่มข้อมูลนักศึกษา

43 เมื่อทำการสร้างฟอร์มเพิ่มข้อมูลนักศึกษาโดยผ่าน Record Insertion Form Wizard จะเหลือขั้นตอนการดึงข้อมูลแผนกวิชาจากฐานข้อมูลมา แสดงผ่าน Select List โดยมีลำดับขั้นตอนดังนี้ 1) ลบ TextField แผนกวิชาชื่อ department_dep_id 2) สร้าง Select โดยทำการเลือก Insert > Form > Select(List/Menu) ภาพที่ 8.39 ขั้นตอนการสร้าง Select(List/Menu)

44 ภาพที่ 8.40 กำหนดชื่อ Select (List/Menu)
ทำการตั้งชื่อ Select(List/Menu) ในส่วนของ ID : deprtment_dep_id ภาพที่ 8.40 กำหนดชื่อ Select (List/Menu)

45 ภาพที่ 8.41 ผลลัพธ์ของการสร้าง Select (List/Menu)

46 1. ตั้งชื่อ ShowDepartment 3. คลิก
เมื่อสร้าง Select (List/Menu) และทำการกำหนดชื่อว่า deprtment_dep_id ก็จะถึงขั้นตอนการเชื่อมฐานข้อมูล ตารางแผนกวิชา (Depertment) กับ Select (List/Menu) โดยมีขั้นตอนดังนี้ สร้าง Recordset โดยกำหนดชื่อว่า ShowDepartment เลือก Insert > Data Object > Recordset 1. ตั้งชื่อ ShowDepartment 3. คลิก 2. เลือกตาราง Department ภาพที่ 8.42 สร้าง Recordset ShowDepartment

47 2. คลิก Dynamic Select List
เมื่อทำการสร้าง Recordset แล้ว ทำการเรียกแสดงข้อมูลจาก ตารางแผนกวิชา (Department) ผ่านSelect (List/Menu) โดยทำการ 1 ) คลิกเลือกSelect (List/Menu) 2 ) เลือก Insert > Data Object > Dynamic Data >Dynamic Select List 1. คลิก Insert 2. คลิก Dynamic Select List ภาพที่ 8.43 สร้าง Dynamic Select List

48 1. เลือก Recordset ที่สร้าง
เมื่อเข้าสู่ Dynamic List/Menu จะเป็นการเชื่อม Select List กับ Recordset ของแผนกวิชาโดยทำการกำหนดค่าดังนี้ 4. คลิก 1. เลือก Recordset ที่สร้าง 2. เลือกฟิลล์ข้อมูล dep_id 3. เลือกฟิลล์ข้อมูล dep_name ภาพที่ 8.44 กำหนดข้อมูล Dynamic List/Menu

49 เมื่อทำการสร้าง Dynamic List/Menu แล้วจะได้ผลลัพธ์ดังภาพ ทำการทดสอบโปรแกรมบันทึกข้อมูลนักศึกษา โดยกดปุ่ม F12 ภาพที่ 8.45 ผลลัพธ์การสร้าง Dynamic List/Menu

50 ภาพที่ 8.46 ผลลัพธ์การสร้าง Select List เชื่อมข้อมูลกับ Department (แผนกวิชา)

51 3. คลิก 1. ตั้งชื่อ ShowStudent 2. เลือกตาราง student
เมื่อทำการสร้างแบบฟอร์มบันทึกข้อมูลนักศึกษาแล้ว จะเข้าสู่ขั้นตอนการ แสดงข้อมูลนักศึกษาจะถูกบันทึกลงตารางฐานข้อมูลนักศึกษา โดยจะให้ แสดงผลในส่วนด้านล่างไฟล์ student.php โดยขั้นตอนดังนี้ 1. เปิดไฟล์ student.php 2. เลือก Insert > Data Object > Recordset 3. คลิก 1. ตั้งชื่อ ShowStudent 2. เลือกตาราง student ภาพที่ 8.47 สร้าง Recordset ShowStudent

52 ภาพที่ 8.48 ขั้นตอนการสร้าง Dynamic Table Recordset Student
เมื่อผ่านขั้นตอนการสร้าง Recordset สำหรับตาราง Student ก็จะถึงขั้นตอน การเรียกใช้งาน Recordset เพื่อแสดงข้อมูลโดยผ่าน Dynamic Table ดังนี้ คลิก เลือกเมนู Insert > Data Objects > Dynamic Data > Dynamic Table 1. Insert 3. Dynamic Data 4. คลิก Dynamic Table 2. Data Objects ภาพที่ 8.48 ขั้นตอนการสร้าง Dynamic Table Recordset Student

53 1. เลือก Recordset ShowStudent
3. คลิก 2. ตั้งค่าการ แสดงผล ภาพที่ 8.49 ขั้นตอนการสร้าง Dynamic Table

54 เปลี่ยนชื่อ Column เป็นภาษาไทย
ภาพที่ 8.50 ผลลัพธ์ตั้งค่า Dynamic Table ShowStudenta

55 ทำการทดสอบโปรแกรมโดยทำการกดปุ่ม F12 เพื่อแสดงผลข้อมูลการลงทะเบียนข้อมูลนักศึกษา
ภาพที่ 8.51 ผลลัพธ์การแสดงข้อมูลการลงทะเบียนนักศึกษา

56 ส่วนที่พิมพ์เพิ่มเติมเพื่อทำการ แสดงชื่อแผนกวิชา
เมื่อทำการสังเกตที่แผนกวิชา ข้อมูลที่แสดงจะแสดงเลขรหัสแผนกวิชาที่ถูกบันทึกลงในฐานข้อมูลตาราง Student นักเรียนสามารถนำรหัสแผนกวิชาไปทำการค้นหาข้อมูลในส่วนของตารางแผนกวิชา(Department) เพื่อทำการเรียกแสดงชื่อแผนกวิชาให้แสดงผลถูกต้อง โดยมีขั้นตอนดังนี้ 2) คำสั่ง SQL เพื่อทำการค้นหาข้อมูลในตาราง (Department) select * from department where dep_id =".$row_ShowStudent['department_dep_id'].""; 2) เขียนคำสั่งเพิ่มเติมในไฟล์ student.php เพื่อทำการเรียกชื่อแผนกวิชามาแสดง ส่วนที่พิมพ์เพิ่มเติมเพื่อทำการ แสดงชื่อแผนกวิชา ภาพที่ 8.52 เขียนโปรแกรมเพื่อเรียกแสดงชื่อแผนกวิชา

57 ทำการทดสอบโปรแกรมโดยทำการกดปุ่ม F12 เพื่อ แสดงผลข้อมูลชื่อแผนกวิชา
ภาพที่ 8.53 ผลลัพธ์การแสดงชื่อแผนกวิชาที่ถูกต้อง

58 5. การตรวจสอบความถูกต้องของข้อมูล
การตรวจสอบความถูกต้องของข้อมูล  มีความสำคัญต่อความถูกต้องของข้อมูล การเลือกวิธีการว่าจะตรวจสอบด้วย JavaScript (Client-Side) หรือ PHP (Server-Side) ขึ้นอยู่กับความถนัดและความเหมาะสมของการใช้งาน   เช่น หากต้องการระบบการกรอกข้อมูลที่มีการ Interactive มากกว่าก็ให้เลือกแบบ JavaScript  แต่หากต้องการการตรวจสอบแบบไม่ต้อง Interactive มากแต่มีความยืดหยุ่นในการเขียนโค้ดมากกว่า ก็ให้เลือกวิธีการใช้ PHP (Server-Side) ในการเขียนโปรแกรมระบบสมัครสมาชิก จะทำการตรวจสอบความถูกต้องของข้อมูลผ่านฟอร์ม (Form Validation) ซึ่ง Dreamweaver เองมีเครื่องมือที่ใช่ในการจัดการความถูกต้องของข้อมูลที่ต้องการตรวจสอบแบบง่าย ผ่านเครื่องมือที่ชื่อว่า Spry (สปราย)

59 Spry (สปราย) คือ JavaScript และ CSS (Cascading Style Sheet) ที่ Dreamweaver สร้างขึ้นมาให้กับเรา แม้เราจะไม่มีความรู้ในเรื่องทั้งสองเลย แต่สิ่งที่ Dreamweaver สร้างขึ้นมาให้สามารถทำงานได้จริง และวิธีการสร้างก็เพียงแต่ระบุสิ่งที่เราต้องการลงไปเท่านั้น Spry ในแท็บ Forms จะมีอยู่ 7 ตัวg]nvd มีหน้าที่ในการสร้างฟิลด์ในฟอร์ม ดังนี้ Spry Validation Text Field สร้างฟิลด์กรอกข้อความ พร้อมส่วนตรวจสอบข้อมูลกรอก Spry Validation Textarea สร้างฟิลด์กรอกข้อความแบบหลายบรรทัด พร้อมส่วนตรวจสอบข้อมูลที่กรอก Spry Validaiton Checkbox สร้างตัวเช็ค พร้อมส่วนตรวจสอบข้อมูลที่กรอก Spry Validation Select สร้างรายการ พร้อมส่วนตรวจสอบข้อมูลที่กรอก Spry Validation Password สร้างฟิลด์รหัสผ่าน พร้อมส่วนตรวจสอบข้อมูลที่กรอก Spry Validation Confirm สร้างฟิลด์ยืนยันข้อมูล พร้อมส่วนตรวจสอบข้อมูลที่กรอก Spry Validation Radio Group สร้างตัวเลือก พร้อมส่วนตรวจสอบข้อมูลที่กรอก

60 ในการสร้างฟอร์ม เราสามารถแทรก Spry ทั้งหมดที่กล่าวมาข้างต้นได้เหมือนกับการแทรกฟิลด์ต่างๆ ที่กล่าวไปแล้วในหัวข้อที่ผ่านมา โดยให้เลือกตำแหน่งที่จะวาง Spry แล้วคลิกปุ่ม Spry ที่ต้องการสร้าง กำหนดค่าในหน้าต่าง Accessibility Attributes เท่านี้เราก็จะได้ฟิลด์ที่ต้องการและส่วนตรวจสอบความถูกต้อง ซึ่งเป็น JavaScript และ Cascading Style Sheet โดยทั้งหมดที่กล่าวมา Dreamweaver จะสร้างให้เราโดยอัตโนมัติ

61 ในการแทรก Spry โปรแกรม Dreamweaver จะสร้างโฟล์เดอร์ชื่อ SpryAssets ขึ้นมาเพื่อใช้ในการเก็บโค้ด JavaScript และ CSS (Cascading Style Sheet) การเข้าใช้งาน Spry โดยทำการคลิกเลือก Insert > Spry ภาพที่ 8.54 การเรียกใช้งาน Spry

62 5.1 การปรับแต่ง Spry ใน Property Inspector
การใช้ Property Inspector ของ Spry ทั้งหมดจะเหมือนกัน คือ ถ้าคลิกที่ช่องฟิลด์จะเป็นการปรับแต่งค่าของช่องฟิลด์นั้น เช่น จำนวนตัวอักษรที่รับได้ จำนวนรายการที่มีในฟิลด์ ซึ่งการปรับแต่งส่วนนี้ได้กล่าวไปแล้ว อีกส่วนหนึ่ง เมื่อเราคลิกที่หัวฟ้าด้านบนของฟิลด์ ส่วนนี้จะเป็นเงื่อนไขการตรวจสอบว่าเราต้องการตรวจสอบอะไรบ้างสำหรับฟิลด์นั้นการปรับแต่งเงื่อนไขการตรวจสอบแบ่งได้เป็น 7 รูปแบบ ตามลักษณะของฟิลด์นั้นๆ

63 คลิกเลือก Spry TextField เพื่อกำหนดค่า
การเลือกใช้ Spry Validatetion Text Fild สำหรับตรวจสอบความถูกต้องของข้อมูลระบบสมัครสมาชิก คลิกเลือก Spry TextField เพื่อกำหนดค่า ภาพที่ 8.55 ตัวอย่างการเรียกใช้ Spry Text Field

64 เงื่อนไขการตรวจสอบฟิลด์กรอกข้อความ (Spry Validation Text Field)
Type : กำหนดชนิดข้อมูลที่อยู่ในฟิลด์ None : ชนิดข้อมูลใดก็ได้ Integer : เลขจำนวนเต็ม Address : อีเมล และ . (จุด) Date : วันที่ (ใช้งานร่วมกับช่อง Format) Time : เวลา (ใช้งานร่วมกับช่อง Format) Credit Card : เลขบัตเครดิต (ใช้งานร่วมกับช่อง Format) Zip Code : รหัสไปรษณีย์ (ใช้งานร่วมกับช่อง Format) Phone Number : หมายเลขโทรศัพท์ (ใช้งานร่วมกับช่อง Format) Social Security Number : เลขประกันสังคม (ใช้งานร่วมกับช่อง Format) Currency : จำนวนเงิน (ใช้งานร่วมกับช่อง Format) Real Number/ Scientific Notation : ตัวเลขใดๆ หรือตัวเลขทางวิทยาศาสตร์ค่าสูงหรือต่ำ IP Address : หมายเลข IP (ใช้งานร่วมกับช่อง Format) URL : ตำแหน่ง URL Custom : กำหนดรูปแบบเอง (ใช้งานร่วมกับช่อง Format)

65 Format : กำหนดรูปแบบของชนิดข้อมูลที่เลือกในช่อง Type
Pattern : กำหนดรูปแบบของชนิดข้อมูลพิเศษ (ในกรณีช่อง Type หรือ Format เลือกเป็นค่า Custom) Hint : กำหนดตัวช่วย คำใบ้ เพื่อบอกให้ผู้ใช้ถึงวิธีการกรอกข้อมูลลงฟิลด์ Preview states : ดูสถานะก่อนแสดงจริง เช่น สถานะใส่ข้อมูลถูก (Valid), สถานะใส่ข้อมูลผิด (Invalid), สถานะต้องใส่ข้อมูล (Required) จะแสดงสถานะใน Dreamweaver ให้ดูก่อนแสดงจริงในบราวเซอร์ Vaidate on : กำหนดเหตุการณ์ที่ใช้ตรวจสอบข้อมูล เช่น ตรวจสอบเมื่อผู้ใช้เปลี่ยนไปเลือกฟิลด์อิ่น (Blur), ตรวจสอบเมื่อข้อมูลในฟิลด์เปลี่ยน (Change), ตรวสอบเมื่อผู้ใช้จะ Submit ฟอร์ม (Submit) Min/Max Chars : กำหนดจำนวนตัวอักษรมากที่สุดและน้อยที่สุดที่รับได้ (ใช้กับ Type ที่เป็น None, Integer, Address และ URL) Min/Max value : กำหนดค่ามากที่สุดและน้อยที่สุดที่รับได้ (ใช้กับ Type ที่เป็น Integer, Time, Currency และ Real Number/Scientific Natation) Required : ถ้าเลือกจะเพิ่มสถานะ Required ในช่อง Preview states และเป็นการบังคับให้ใส่ข้อมูลในฟิลด์นี้ Enforce pattern : ป้องกันการกรอกข้อมูลผิดโดยอัตโนมัติ เช่น ถ้าเราเลือก Type เป็น Integer และเราเลือกตัวเลือกนี้ด้วย จะทำให้ตัวอักษรที่สามารถพิมพ์ลงฟิลด์ได้จะเป็นตัวอักษรที่เป็นตัวเลขเท่านั้น (ตัวอักษรที่ไม่ใช่ตัวเลขจะถูกบล็อกไม่สามารถพิมพ์ลงฟิลด์ได้)

66 ทดลองสร้าง Spry Validation Text Field, กำหนดเงื่อนไขการตรวจสอบค่าเพื่อตรวจสอบอีเมล์และดูผลการทำงาน ดังรูป 1. คลิก เลือก Spry TextField 2. คลิก เลือก Address ภาพที่ 8.56 การตั้งค่าตรวจสอบอีเมล์

67 ภาพที่ 8.57 ผลลัพธ์การตรวจสอบความถูกต้องอีเมล์

68 เงื่อนไขการตรวจสอบฟิลด์กรอกข้อความแบบหลายบรรทัด (Spry Validation Textarea)

69 Required : ถ้าเลือกจะเพิ่มสถานะ Required ในช่อง Preview states และเป็นการบังคับให้ใส่ข้อมูลในฟิลด์นี้ Min/Max chars : กำหนดจำนวนตัวอักษรมากที่สุดและน้อยที่สุดที่รับได้ Preview states : ดูสถานะก่อนแสดงจริง Validation on : กำหนดเหตุการณ์ที่ใช้ตรวจสอบข้อมูล Counter : แสดงตัวนับจำนวนตัวอักษรในฟิลด์ เช่น ไม่แสดง (None), แสดงจำนวนตัวอักษรที่ใส่ลงไป (Chars count), แสดงจำนวนตัวอักษรที่เหลือให้ใส่ได้ (Chars remaining ใช้งานร่วมกับช่อง Max chars) Block extra characters : ถ้าเลือกจะไม่สามารถพิมพ์ตัวอักษรเกินค่า Max Chars ได้ Hint : แสดงตัวช่วยให้ผู้ใช้กรอกข้อมูลได้ถูกต้อง เช่น เราใส่คำว่า "แสดงความคิดเห็นของท่าน" ข้อความนี้ก็จะแสดงในฟิลด์ตอนเริ่มต้น เพื่อช่วยให้ผู้ใช้ทราบว่าเป็นฟิลด์กรอกข้อมูลชนิดใด

70 ภาพที่ 8.59 การตรวจสอบรหัสผ่าน (Spry Validation Password)
Required : ถ้าเลือกจะเพิ่มสถานะ Required ในช่อง Preview states และเป็นการบังคับให้ใส่ข้อมูลในฟิลด์นี้ Min/Max chars : กำหนดจำนวนตัวอักษรมากที่สุดและน้อยที่สุดที่รับได้ Preview states : ดูสถานะก่อนแสดงจริง Validate on : กำหนดเหตุการณ์ที่ใช้ตรวจสอบข้อมูล Min/Max letters : กำหนดให้รหัสผ่านมีตัวหนังสือกี่ตัว Min/Max numbers : กำหนดให้รหัสผ่านมีตัวเลขกี่ตัว Min/Max uppercase : กำหนดให้รหัสผ่านมีตัวพิมพ์ใหญ่กี่ตัว Min/Max special chars : กำหนดให้รหัสผ่านมีตัวอักษรพิเศษกี่ตัว

71 ภาพที่ 8.60 การตรวจสอบรหัสผ่าน (Spry Validation Confirm)
Required : ถ้าเลือกจะเพิ่มสถานะ Required ในช่อง Preview states และเป็นการบังคับให้ใส่ข้อมูลในฟิลด์นี้ Validate against : กำหนดชื่อฟิลด์รหัสผ่าน เพื่อเทียบค่าในฟิลด์ยืนยันกับฟิลด์รหัสผ่านให้ตรงกัน Preview states : ดูสถานะก่อนแสดงจริง Validate on : กำหนดเหตุการณ์ที่ใช้ตรวจสอบข้อมูล

72 ภาพที่ 8.61 ผลลัพธ์การตรวจสอบความถูกต้องของข้อมูลระบบสมัครสมาชิก

73 6. บทสรุปท้ายหน่วยเรียน
การเขียนโปรแกรมระบบลงทะเบียนสมาชิกในหน่วยการเรียนที่ 8 นี้เป็นการประยุกต์ใช้งานและเขียนโปรแกรมบนมาตรฐานเปิดที่สามารถนำไปพัฒนาบนระบบสำหรับงานทางธุรกิจ โดยมีจุดมุ่งหมายคือ สามารถพัฒนาระบบงานได้รวดเร็ว สะดวกและถูกต้อง โดยการจัดการเรียนการสอนนี้ เพื่อให้นักเรียนสามารถวิเคราะห์ แก้ไขปัญหาตามขั้นตอนกระบวนการพัฒนาซอฟแวร์ การออกแบบและพัฒนาระบบงาน ตามความต้องการด้านธุรกิจ อาศัยโปรแกรมที่ทำงานบนระบบมาตรฐานเปิด จะเน้นการใช้เครื่องมือและโปรแกรมประยุกต์ที่นักเรียนสามารถเรียนรู้ได้ง่าย สะดวกและรวดเร็ว เช่น MySQL Workbench, Adobe Dreamweaver ที่ช่วยพัฒนาโปรแกรมบนมาตรฐานเปิด ด้วยภาษา PHP ซึ่งมีความเหมาะสมเป็นอย่างยิ่งสำหรับการพัฒนาระบบงานสำหรับผู้เริ่มต้นการเขียนโปรแกรม เพื่อเป็นพื้นฐานและสร้างแรงจูงใจให้นักเรียน ในระดับประกาศนียบัตรวิชาชีพ สาขาวิชาคอมพิวเตอร์ธุรกิจ ในการพัฒนางานที่มีความเป็นระบบผ่านกระบวนการคิดวิเคราะห์ แก้ไขปัญหา สำหรับนำไปพัฒนากระบวนเขียนโปรแกรมสำหรับงานธุรกิจในโอกาสต่อไป