® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 ·...

19
บทที4 4.1 การออกแบบผังของเว็บไซต์ 4.1.1 แผนผังของเว็บไซต์ รูปที4.1 แสดงแผนผังของเว็บไซต์ 4.1.2 แผนผังเว็บไซต์ของผู้ดูแลระบบ รูปที4.2 แสดงแผนผังเว็บไซต์ของผู้ดูแลระบบ

Upload: others

Post on 16-Jul-2020

6 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

บทท 4

4.1 การออกแบบผงของเวบไซต

4.1.1 แผนผงของเวบไซต

รปท 4.1 แสดงแผนผงของเวบไซต

4.1.2 แผนผงเวบไซตของผดแลระบบ

รปท 4.2 แสดงแผนผงเวบไซตของผดแลระบบ

Page 2: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

27

4.2 รายละเอยดโครงสรางของเวบไซต

ตารางท 4.1 แสดงรายละเอยดโครงสรางของศนยเทคโนโลยสารสนเทศ

ล าดบ รายการ ค าอธบาย 1 index.php หนาเรมตนเมอเขาสเวบไซตและเขาสระบบ 2 search.php หนาเวบแสดงการคนหาในระบบ 3 guestbook.php หนาเวบแสดงรายละเอยดตดตอสอบถาม 4 regis.php หนาเวบท าการสมครสมาชก 5 borrowmem.php หนาเวบแสดงรายการยมอปกรณคอมพวเตอร 6 bormem.php หนาเวบแสดงรายการคนอปกรณคอมพวเตอร

ตารางท 4.2 แสดงรายละเอยดโครงสรางของหลงศนยเทคโนโลยสารสนเทศ

ล าดบ รายการ ค าอธบาย 1 menu_admin.php หนาเรมตนเมอเขาสเวบไซต 2 member.php หนาเวบท าการสมครสมาชก 3 book.php หนาเวบจองอปกรณคอมพวเตอร 4 check_sent.php หนาเวบยมอปกรณคอมพวเตอร 5 notsent.php หนาเวบคนอปกรณคอมพวเตอร 6 sent.php หนาเวบรายการยมทยงไมสงคน 7 late_sent.php หนาเวบรายการยมสงคนไมตรงเวลา 8 month.php หนาเวบสรปการยมเปนเดอน 9 interval.php หนาเวบสรปการยมเปนชวง

10 news.php หนาเวบเพมขาวประชาสมพนธ 11 equipment.php หนาเวบท าการเพมอปกรณคอมพวเตอร 12 equipment_list.php หนาเวบจดการอปกรณคอมพวเตอร 13 equipment_detail.php หนาเวบแสดงรายละเอยดอปกรณคอมพวเตอร 14 guestbook_admin.php หนาเวบแสดงรายละเอยดตดตอสอบถาม

Page 3: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

28

4.3 การออกแบบฐานขอมล การออกแบบฐานขอมลแบงตาราง (Table) โดยอธบายถงขอมลในแตละตารางทงหมดใน

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

1. ชอของขอมล (Field Name)

2. ค าอธบายของขอมล (Data Description)

3. ชนดของขอมล (Data Type)

4. ขนาดของขอมล (Length)

5. อางองขอมล (Reference)

ตารางท 4.3.1 รายละเอยดขอมลเกยวกบผใช

Table : id_member

Field Name Data Description Data Type Length

id รหสทรนอตโนมต int() 6

member_id ตารางการยมคน int() 6

date_borrow วนทยม date() -

status สถานการณจอง ยม คน int() 5

aim รายละเอยดทขอใชของ mediumtext -

competent ผใหยม varchar() 50

sent วนทก าหนดสงคน date() -

d_sent วนทคนจรง date() -

Primary Key : id

Foreign Key : member_id

Page 4: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

29

ตารางท 4.3.2 รายละเอยดสรปการยมคนเปนรายเดอน

Table : month

Field Name Data Description Data Type Length

month_id รหสไอด int() 6

month_name เดอนป ทมการยมคน varchar() 7

p_month ระยะเวลา วน เดอน ป เรมยม

คน

datetime() -

a_month ระยะ เวลา วน เดอน ป สดทาย

ยมคน

datetime() -

Primary Key : month_id

Foreign Key : -

ตารางท 4.3.3 ตารางขาว

Table : new

Field Name Data Description Data Type Length

new_id รหสไอดขาว int() 5

title หวขอ varchar() 255

detail รายละเอยด mediumtext -

date_post วนท โพส date () -

count จ านวนคนด int() 6

Primary Key : new_id

Foreign Key : -

Page 5: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

30

ตารางท 4.3.4 รายละเอยดตารางแอดมน

Table : tb_admin

Field Name Data Description Data Type Length

adid รหสแอดมน int() 5

adname ชอลอกอน varchar() 50

adpwd รหส varchar() 50

name_sur ชอ นามสกล varchar() 50

Primary Key : adid

Foreign Key : -

ตารางท 4.3.5 รายละเอยดตารางเชคสถานะของทจะยม

Table : tb_borrow

Field Name Data Description Data Type Length

id_borrow รหสเชคสถานะอปกรณ int() 6

id รหสของ id_member int() 6

Sent_eq ไอดของtb_equipment num int() 6

num จ านวน int() 6

check_borroe เชคอปกรณ varchar() 3

Primary Key : id_borrow

Foreign Key : id,sent_eq

Page 6: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

31

ตารางท 4.3.6 รายละเอยดอปกรณ

Table : tb_equipment

Field Name Data Description Data Type Length

sent_eq รหส int() 50

eq_name ชอ varchar() 50

eq_kind ประเภท varchar() 50

eq_brand ยหอ varchar() 50

eq_num จ านวน int() 10

eq_total จ านวนรวม int() 6

eq_decay ช ารด int() 6

eq_count สถตการยม int() 6

eq_picture รป varchar() 30

Primary Key : sent_eq

Foreign Key : -

Page 7: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

32

ตารางท 4.3.7 รายละเอยดตดตอสอบถาม

Table : tb_questbook

Field Name Data Description Data Type Length

g_id รหส int() 6

g_detail ขอความ text -

g_from ชอผสอบถาม varchar() 100

g_sender เมล varchar() 50

g_date วนท datetime -

Primary Key : g_id

Foreign Key : -

ตารางท 4.3.8 รายละเอยดตารางสมาชก

Table : tb_member

Field Name Data Description Data Type Length

member_id รหส int() 6

std_id ชอลอกอน double -

password พาสเวด varchar() 10

name ชอนามสกล varchar() 100

agencies สงกด varchar() 50

telephone เบอรโทร varchar() 50

date_post วนทสมคร varchar() 10

Primary Key : member_id

Foreign Key : -

Page 8: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

33

4.4 การออกแบบการน าเขาของระบบงาน

ในการออกแบบการแสดงขอมลของเวบไซต ผพฒนาจะตองออกแบบการน าเขาของขอมล

ซงสวนมากแลวจะมการรบขอมลน าเขาผานฟอรม ดงนนการออกแบบฟอรมในการรบ ขอมลตางๆจง

เปนสงทส าคญ เพราะจะท าใหเหนกจกรรมตางๆของเวบไซต หลงจากนนจงน าขอมลทกรอกผาน

ฟอรมแลวท าการเกบขอมลลงฐานขอมลโดยสามารถกรอกขอมลไดทงผใช เจาหนาท และผดแลระบบ

โดยแบงออกเปนสวนตางๆดงตอไปน

4.4.1 สวนการเขาสระบบ

รปท 4.4.1 ฟอรมการLog in เขาสระบบ

จากรปท 4.2.1 ขนตอนการเขาสระบบคอ ผใชตองท าการใส Username และ Password ถาผใช

กรอก username หรอ password ไมถกตอง ระบบจะยอนกลบมาหนาตางการ login ซ าอกครง เมอ

ผใชใส username หรอ password ถกตองกจะเขามาสหนาตางการท างานหลกของผใชแตละระดบ

Page 9: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

34

4.4.2 เมอเขาสระบบของแอดมน จงจะสามารถเลอกใชเมนตาง ๆ ในหนาแอดมนได เชน การเพม

สมาชก การจองอปกรณคอมพวเตอร เปนตน

รปท 4.4.2 หนาแรกของแอดมนเมอมการเขาสระบบเรยบรอยแลว

4.4.3 เมอเลอกเมนคนหาอปกรณ จะมชองใหท าการพมพรายชอทตองการ เลอกการคนหาอปกรณ จะ

แสดงรายรายชอ ชออปกรณ และ ยอดคงเหลอใหแอดมนทราบ

รปท 4.4.3 แสดงขอมลการคนหาอปกรณ

Page 10: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

35

4.4.4 เมอเลอกท าการคนหาเมนรายการคนหา แอดมนจะสามารถดขอมล โปรแกรมจะแสดงรายชอ

อปกรณ รปภาพ ยอกคงเหลอ สถตการยม และแอดมนยงสามารถคนหาอปกรณทตองการทราบได

รปท 4.4.4 แสดงขอมลในการคนหาอปกรณ

4.4.5 เมอเลอกตดตอสอบถาม ดานหนาโปรแกรมจะแสดงรายการ ใหกรอกรายชอผทแอดมนตองการ

ตดตอ และอเมลลของผใชนน ๆ ขอความจะแสดงวน และเวลา ณ ชวงเวลาทท ารายการ

รปท 4.4.5 แสดงหนาจอสอบถาม

Page 11: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

36

4.4..6 เมนเพมสมาชก เมอแอดมนกรอกรายละเอยด ขอมลของสมาชก ตามทตองการจนแลวเสรจ ให

ท าการคลกปมเพมชอผยม เปนการแลวเสรจ

รปท 4.4..6 แสดงหนาจอเมนเพมสมาชก

4.4.7 จองอปกรณคอมพวเตอร การจองอปกรณคอมพวเตอร จะมรายละเอยดทแสดงขนมาดงน ล าดบ

รหสบคลากร ชอ – นามสกล สงกดหนวยงาน เบอรโทรศพท และรายละเอยดการจองตามทรองขอ

รปท 4.4.7 แสดงการจองอปกรณคอมพวเตอร

Page 12: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

37

4.4..8 ยมอปกรณคอมพวเตอร การยมอปกรณแอดมนสามารถตรวจสอบรายชอ สามารถท าการคนหา

รายชอของผใชทยมอปกรณไดทนท

รปท 4.4.8 ยมอปกรณคอมพวเตอร

4.4.9 คนอปกรณคอมพวเตอร การคนอปกรณแอดมนสามารถตรวจสอบรายชอ สามารถท าการคนหา

รายชอของผใชทคนอปกรณไดทนท

รปท 4.4.9 คนอปกรณคอมพวเตอร

Page 13: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

38

4.4.10 ยอดรวมคนทยงไมสงคนอปกรณคอมพวเตอร สารารถเรยกดรายงานสรปผลของคนทยงไม

สงคนอปกรณคอมพวเตอร และเรยกดรายละเอยดของบคคลทยงไมสงคนอปกรณคอมพวเตอรได

รปท 4.4.10 ยอดทยงไมคนอปกรณคอมพวเตอร

4.4.11 ยอดคนทสงคนอปกรณคอมพวเตอร เจาหนาทสามารถพมพออกรายงานโดยดยอดรวมคนท

สงคนอปกรณคอมพวเตอรได

รปท 4.4.11 ยอดคนทสงคนอปกรณคอมพวเตอร

Page 14: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

39

4.4.12 สรปยอดเปนชวง สามารถเรยกดเปนชวงโดยการเลอกวนทจากวนทเราตองการทราบเมอใดถง

เมอใดได และกดปมสรปและสามารถพมพออกมาเปนรายงานได

รปท 4.4.12 สรปยอดเปนชวง

4.4.13 ขาวประชาสมพนธ เมอมขาวประชาสมพนธทจะประกาศ สามารถพมพขอความลงในสวนน

แรวกดปมเพมขาว ขาวจะไปแสดงทหนาแรก ของเวบ

รปท 4.4.13 ขาวประชาสมพนธ

Page 15: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

40

4.4.14 เพมอปกรณคอมพวเตอร ในสวนนเจาหนาทจะเปนคนเพม โดยการกรอก ชออปกรณ ระบ

ประเภท เปนตน

รปท 4.4.14 เพมอปกรณคอมพวเตอร

Page 16: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

41

4.4.15 จดการอปกรณคอมพวเตอร จะแสดงรายชออปกรณ ประเภท ยหอ ยอกคงเหลอ และยงสามารถ

ท าการ เพม ลบ แกไข อปกรณ ในกรณทมการสงอปกรณเพมเขามาใหม และลบเมออปกรณเสยหาย

โดยไมอาจซอมไดและยงแกไขจ านวนอปกรณได

รปท 4.4.15 จดการอปกรณคอมพวเตอร

4.4.16 รายละเอยดอปกรณ สามารถเพมอปกรณทช ารดได และท าการพมพยอดสรปได

รปท 4.4.16 รายละเอยดอปกรณ

Page 17: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

42

4.4.17 เพมรายการยม ใหผใชท าการเลอกอปกรณ ระบจ านวน ท าการกดเพมขอมลยมคน และกรอก

ขอมลทใชในการใชงาน ระบวนทจะคน กดยนยนการยม

รปท 4.4.17 เพมรายการยม

Page 18: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

43

4.4.18 แบบฟอรมค ารองขอ ยม/คน อปกรณคอมพวเตอร เมอกดปมท ารายการยนยนการยม แบบฟอรม

จะขนมาใหเซนชอ เนองจากขอมลไดดงมาจากฐานขอมลไวแลวจงไมตองกรอกรายละเอยด ใหท าการ

เซนชอเพยงอยางเดยว

รปท 4.4.18 แบบฟอรมค ารองขอยม / คน

Page 19: ® µo ¦ Á µo ¼n¦ ³ o ® µ° » ¦ r · n° ° µ¤ ¤ ´ ¦ ¤ µ · 2018-11-01 · บทที่ 4 4.1 การออกแบบผังของเว็บไซต์

44

4.4.19 คนอปกรณ เมอเจาหนาทตรวจเชคอปกรณทน ามาคนแลวไมเกดปญหาใด ๆ เจาหนาทจะท าการ

คลกปมคนอปกรณคอมพวเตอรกเปนอนเสรจสนขนตอนการคน

รปท 4.4.19 คนอปกรณคอมพวเตอร