บทที่ 3...
Post on 31-Oct-2019
4 Views
Preview:
TRANSCRIPT
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 การเขยนโปรแกรมตดตอฐานขอมล
top related