23

บทท 3

การออกแบบและพฒนาโปรแกรม

การศกษาขอมลเบองตน

จากการทคณะนกศกษาปฏบตงานสหกจศกษา ไดทาการศกษาและเกบรวบรวมขอมลของ

เวบไซตProject Tracking ระบบตดตามสถานะโครงการโดยไดรบขอมลจากการสอบถามพนกงาน

ผดแลเวบไซตในหนวยงานสานกงานสารสนเทศ เพอนาขอมลมาใชใหเกดประโยชนและใหตรงตาม

ความตองการของผดแลเวบไซตมากทสด

การรวบรวมขอมล

1. สอบถามขอมลจากพนกงานผดแลระบบ ภายในหนวยงานสานกงานสารสนเทศ เพอ

จดทา ระบบตดตามสถานะโครงการ

2. ศกษาขอมลการทา ระบบตดตามสถานะโครงการจากพนกงานในการไฟฟานครหลวง

ฝายระบบโครงสรางพนฐาน (ฝคฐ.) เพอใชเปนแนวทางในการพฒนาเวบไซต

3. ศกษาขอมลจากหนงสอ “คมอการเขยนโปรแกรมภาษา PHP+MySql” และหนงสอ

“สรางเวบสวยดวย Adobe Dreamweaver และ CSS” เพอนาขอมลตางๆมาใชในการ

ออกแบบ และจดทาเวบไซต

การวเคราะหระบบงาน

การวเคราะหระบบงานนบเปนขนตอนสาคญในการพฒนาเวบไซตโดยจะตองทาการศกษามา

อยางละเอยดและพฒนาเวบไซตใหเปนไปตามความตองการของผดแลระบบ

ตารางท 3.1 แสดงรายละเอยดของระบบงานปจจบน

งาน/กจกรรม รายละเอยดของงาน/กจกรรม เอกสารทเกยวของ ผรบผดชอบ

1. การเกบขอมลรายชอ

โครงการ

เกบบนทกขอมลตางๆ ลงใน

สมดบนทก เชน ชอโครงการ

ชอคนรบผดชอบโครงการ

แฟมขอมล

โครงการ

ผดแลระบบ

2. การปรบสถานะ

โครงการ

เกบขอมลขนตอนการทางาน

ของโครงการ

แฟมขอมล

โครงการ

ผดแลระบบ

24

การออกแบบและพฒนาโปรแกรม

1. การออกแบบสวนขอมลนาเขา

ภาพท 3.1 หนา Login เขาสเวบไซต

หนาการเขาส ระบบตดตามสถานะโครงการโดยตองมการพมพ User และ Password แลวกด

ปม sign in เพอเขาสเวบไซตหรอกดปม cancel หากไมตองการเขาสเวบไซต เพอเปนการปองกนการ

เขาใชงานเวบไซตจากผอนและยงเปนการกาหนดสทธในการใชงานของผดแลระบบ

25

ภาพท 3.2 หนาหลก

เมอได Login เขาสเวบไซตเรยบรอยแลว ผใชจะพบเมนของเวบไซตทงหมด 4 สวน

ดงตอไปน

1) หนาหลก

2) รายชอโครงการ

3) คนหาโครงการ

4) เขาสระบบ

ซงหนานจะสามารถดขอมลเบองตนไดอยางเดยว ถาไม Login จะไมสามารถเขาไปแกไข

ขอมลของโครงการได

26

ภาพท 3.3 หนารายชอโครงการ

หนารายชอโครงการสามารถดรายชอโครงการทงหมด และผรบผดชอบโครงการได เมอ login

แลวสามารถเขาไปแกไขขอมลรายละเอยดตางๆ ได

27

ภาพท 3.4 หนารายละเอยดโครงการ

หนารายละเอยดโครงการ สามารถดสถานะของโครงการ แกไขสถานะโครงการ และสามารถ

ใสรายละเอยดในโครงการนนๆ ได

28

ภาพท 3.5 หนาเพมโครงการ

หนาเพมโครงการ สามารถเพมโครงการ โดยใสรายละเอยดตางๆ ได เชน ชอผรบผดชอบ ชอ

โครงการ จานวนเงน วนทเรมโครงการ วนทสนสดโครงการ เปนตน

29

ภาพท 3.6 หนาคนหาโครงการ

หนาคนหาโครงการ สามารถคนหาโครงการได โดยคนหาจากชอโครงการ รหสโครงการ

หรอชอผรบผดชอบ

30

ภาพท 3.7 หนาขอมลสวนตว

หนาขอมลสวนตว สามารถดขอมลผใชงานได เชน ชอ นามสกล รหสพนกงาน ตาแหนง

สงกด เบอรตดตอ อเมล เปนตน

31

ภาพท 3.8 หนาแกไขขอมลสวนตว

หนาแกไขขอมลสวนตว สามารถแกไขขอมลทอาจจะเปลยนได เชน เบอรตดตอ และอเมล

32

ภาพท 3.9 หนาเปลยน Password

หนาเปลยน Password สามารถเปลยน Password ได

33

ภาพท 3.10 หนารายชอสมาชก

หนารายชอสมาชก สามารถตรวจสอบขอมลสมาชกทมอยในระบบได

34

ภาพท 3.11 หนาสมครสมาชก

หนาสมครสมาชก สามารถสมครสมาชกไดเพอเปน user จะสามารถเขาไปดขอมล และแกไข

รายละเอยดโครงการตางๆ ได

35

2. การออกแบบฐานขอมล

project_step

PK,FK2 ps_id

ps_detailsFK2 id

member

PK id

user pass status mem_id mem_name mem_surn mem_job mem_of mem_phone mem_mail

project_mea

PK,FK2 p_idPK,FK2 ps_idPK,FK5 id

p_name p_respond p_resid p_start p_end p_budget p_bgyear p_status

project_Detail

PK,FK3 p_idPK,FK4 ps_id

pd_des ps_status ps_detailsvalueFK1,FK3 id

step_details

tK,FK1 idtK,FK1 p_idtK,FK1 ps_id

sd_1 sd_2 sd_3 sd_4 sd_5 sd_6 sd_7 sd_8 sd_9 sd_10 sd_11 sd_12 sd_13 sd_14 sd_15 sd_16

Status_project

tK S_id

S_detailsFK1 p_idFK1 ps_idFK1 id

ภาพท 3.12 การแสดงความสมพนธของขอมล

36

ตารางท 3.2 รายการตารางขอมล

ชอตาราง คาอธบาย

Member แฟมพนกงาน

Project_details แฟมรายละเอยดโครงการ

Project_mea แฟมโครงการ

Project_step แฟมขนตอน

Status_project แฟมสถานะโครงการ

Step_details แฟมรายละเอยดขนตอน

3. การพฒนาโปรแกรม

3.1 ออกแบบฐานขอมลโดยใชโปรแกรม Appserv

ภาพท 3.13 การออกแบบฐานขอมล

37

3.2 การออกแบบสวนตดตอกบผใชโดยใชโปรแกรม Adobe Dreamweaver

ภาพท 3.14 การออกแบบสวนตดตอกบผใช

3.3 การเขยนโปรแกรมตดตอฐานขอมลดวยภาษา PHP

ภาพท 3.15 การเขยนโปรแกรมตดตอฐานขอมล