บทที่ 4research-system.siam.edu/.../07_ch4.pdf · 2018-11-07 · บทที่ 4...

บทท 4

การออกแบบทางกายภาพ

4.1 การออกแบบฐานขอมล (Database Design)

การออกแบบฐานขอมล (Database Design) เปนวธการสรางฐานขอมลในลกษณะรปแบบ

ความสมพนธของขอมล ลกษณะการออกแบบฐานขอมลเปนการจดการขอมลตางๆใหอยในรปของ

ตาราง โดยสวนของฐานขอมลจะมการจดการและเกบขอมลไวบนเซรฟเวอร โดยใช SQL

SERVER รายละเอยดของตารางขอมลมดงน

ตารางท 4.1 ตารางขอมล Customer

Relation : Customer

Attribute Description Attribute Domain

Type PK FK Reference

Cus_id รหสลกคา int(5) YES Cus_name ชอลกคา varchar(50)

Cus_lastname นามสกล varchar(50) Cus_username ชอผใช varchar(50) Cus_password รหสผาน varchar(10)

Cus_gender เพศ varchar(5) Cus_birth date วนเกด varchar(50)

Cus_phone เบอรโทร varchar(10)

Cus_Email Email varchar(50)

34

ตารางท 4.2 ตารางขอมล Staff

Relation : staff

Attribute Description Attribute Domain

Type PK FK Reference

Staff_id รหสพนกงาน int(5) YES Staff_name ชอ varchar(50) Staff_lastname สกล varchar(50)

Staff_birthdate วนเกด date Staff_gerder เพศ varchar(5) Staff_Password รหสผาน varchar(10) Staff_Email Email varchar(50) Staff_Phone เบอรโทร

พนกงาน varchar(10)

Po_id รหสต าแหนง int(5) YES Position Staff_ Salary เงนเดอน int(6) Staff สถานะ enum(‘Y’,’N’,’A’)

35

ตารางท 4.3 ตารางขอมล Order_hair

Relation : Order_hair

Attribute Description Attribute Domain

Type PK FK Reference

Order_id รหสออเดอร int(3) YES Cus_id รหสลกคา varchar(5) YES Customer Hair_id รหสผม varchar(5) YES Hair Color_id รหสสผม varchar(5) YES ColorHair Od_date วนทเพมออ

เดอร date

Od_time เวลาเพมออเดอร

varchar(20)

Staff_id รหสพนกงาน int(5) YES Staff Od_status สถานะ รอ

ส าเรจ ยกเลก enum(‘รอ’,’

เสรจ’,’ยกเลก’)

ตารางท 4.4 ตารางขอมล Hair

Relation : Hair Attribute Description Attribute

Domain Type PK FK Reference

Hair_id รหสผม int(5) YES Hair_hairstyle ชอทรงผม varchar(50)

36

ตารางท 4.5 ตารางขอมล Color

Relation : Color

Attribute Description Attribute Domain

Type PK FK Reference

Color_id รหสสผม int(5) YES Color_colorhair ชอสผม varchar(100) Color_code โคดส varchar(10)

ตารางท 4.6 ตารางขอมล Position

Relation : Position

Attribute Description Attribute Domain

Type PK FK Reference

Po_id รหสต าแหนง int(5) YES Po_ Position ชอต าแหนง varchar(15)

ตารางท 4.7 ตารางขอมล Work Schedule

Relation : Work Schedule

Attribute Description Attribute Domain

Type PK FK Reference

Work_id รหสตารางงาน int(5) YES Stsff_id รหสพนกงาน int(5) YES Stsff Order_id รหสออเดอร int(3) YES Order Work_date วนท date Work_time เวลา varchar(20) Po_id รหสต าแหนง int(5) YES position Cus_id รหสลกคา int(5) YES Customer Color_id รหสสผม int(5) YES color

37

ตารางท 4.8 ตารางขอมล image

Relation : image

Attribute Description Attribute Domain

Type PK FK Reference

im_id รหสรปภาพ int(10) YES im_name ชอรปภาพ varchar(100) im_section ประเภทรปภาพ varchar(5)

ตารางท 4.9 ตารางขอมล image_product

Relation : image_product

Attribute Description Attribute Domain

Type PK FK Reference

pro_id รหสรปภาพสนคา int(10) YES pro_name ชอรปภาพสนคา varchar(100) pro_detail ขอมลสนคา varchar(500)

38

4.2 แผนผงโครงสรางเวบไซต

รปท 4.1 แผนผงโครงสรางเวบไซต

39

4.3 อธบายโครงสรางเวบไซต

ตารางท 4.10 อธบายโครงสรางของเวบไซตฝงลกคา ล าดบท หวขอ อธบาย

1 เขาสระบบ แสดงหนาลงชอเขาใชระบบ 2 แสดงรปภาพทรงผม แสดงหนารปภาพทรงผม 3 แสดงโปรโมชนราน แสดงโปรโมชนของราน 4 เมน แสดงเมนตางๆของระบบ 5 จองควท าผม แสดงหนาจองควท าผมเพอท าการจองคว 6 ดเวลาจองคว แสดงหนาเวลาในการจองควท าผม 7 เลอนเวลาจองคว แสดงหนาการเลอนเวลาจองคว 8 ยกเลกการจองคว แสดงหนาทกดยกเลกการจองคว 9 ก าหนดวนท าผม แสดงหนาก าหนดวนท าผม

10 เลอกชางท าผม แสดงหนาใหเลอกชางท าผม

40

ตารางท 4.11 อธบายโครงสรางของเวบไซตฝงผจดการ พนกงาน ล าดบท หวขอ อธบาย

1 เขาสระบบ แสดงหนาลงชอเขาใชระบบ 2 เมน แสดงเมนตางๆของระบบ 3 ดการจองควท าผม แสดงหนาการจองควท าผม 4 อนมตการยกเลกจองควท าผม แสดงหนาเพอยกเลกการจองควท าผม 5 อนมตจองควท าผม แสดงหนาจองควท าผมเพออนมตการจองคว 6 เปลยนแปลงรปทรงผมหนาเวบ แสดงหนาเพอเปลยนแปลงรปภาพหนาเวบไซต 7 ดตารางงาน แสดงหนาตารางงานของพนกงาน 8 รายไดพนกงาน แสดงหนารายไดพนกงาน

41

4.4 การออกแบบสวนตดตอผใช

รปท 4.1 หนาแรกในการเขาเวบไซต

ในรปท 4.1 จะเปนหนาแสดงหนาเวบไซต เมอผใชเขามาในเวบไซต จะเหนขอมลของเวบไซต ซงจะแสดงรายละเอยดดงน หนาแรกของเวบไซต แบบทรงผมผชาย แบบทรงผมผหญง หนาแสดงสนคาของทางราน หนาตดตอกบทางราน หนาจองควท าผม หากลกคาตองการทจะจองควท าผมกลบทางรานตอง Login เขาใชงานกอนถงจะสามารถท าการจองควได สวนลกคาทยงไมไดสมครสมาชกใหท าการสมครสมาชกกอนและท าการ Login เพอเขาใชงานการจองควได

รปท 4.2 หนาจอเขาสระบบของผใช

ในรปท 4.2 จะแสดงหนาจอส าหรบเขาสระบบของผใชงาน โดยผใชงานจะตองม username และ password ทไดรบอนญาตใหมสทธเขาใชงานเทานน

42

รปท 4.3 หนาจอสมครสมาชกของผใช

ในรปท 4.3 จะเปนหนาแสดงหนาเวบไซต หนาจอสมครสมาชกของผใช ซงผใชตองกรอกขอมลสวนตวใหครบเพอเปนสมาชกของทางราน เมอกรอกขอมลสวนตวจนครบถวนแลวใหคลกทปม REGISTER NOW เพอสมครสมาชก

รปท 4.4 หนาแรกเมอท าการ Login เขาเวบไซต

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

43

รปท 4.5 หนาแสดงแบบทรงผมของผชาย

ในรปท 4.5 เมอเลอกไปท HAIRMALE จะแสดงหนาทรงผมของผชาย เพอใหลกคาไดดแบบเพอชวยในการตดสนใจท าผม และเมอกดไปทรปจะสามารถดรปทขยายใหญขนได

รปท 4.6 หนาแสดงแบบทรงผมของผหญง

ในรปท 4.6 เมอเลอกไปท HAIRFEMALE จะแสดงหนาทรงผมของผหญง เพอใหลกคาไดดแบบเพอชวยในการตดสนใจท าผม และเมอกดไปทรปจะสามารถดรปทขยายใหญขนได

44

รปท 4.7 หนาแสดงสนคาของทางราน

ในรปท 4.7 เมอเลอกไปท PRODUCT จะแสดงหนารายการสนคาของทางรานและมขอมลของสนคานนๆอยทใตรปสนคาดวย

รปท 4.8 หนาแสดงแผนทตงของทางราน

ในรปท 4.8 เมอเลอกไปท CONTACT US จะแสดงหนาแผนททแสดงทตง เสนทางในการไปยงรานท าผม Hair 2 Style

45

รปท 4.9 หนาแสดงการจองควท าผมของลกคา

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

46

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

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

47

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

ในรปท 4.11 เมอเลอกไปทปม Booking History จะแสดงหนาขอมลการจองควของลกคา ซงจะประกอบไปดวย ล าดบ ชอลกคา บรการ สผม ชอพนกงาน วนท เวลา และสถานะ

รปท 4.12 หนาจอเขาสระบบของผจดการและพนกงาน

ในรปท 4.12 จะแสดงหนาจอส าหรบเขาสระบบของผใชงาน โดยผใชงานจะตองม Email และ password ทไดรบอนญาตใหมสทธเขาใชงานเทานน

48

รปท 4.13 หนาจอเมอเขาสระบบของผจดการ

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

รปท 4.14 แสดงหนาการแกไขการจองคว

ในรปท 4.14 จะแสดงหนารายละเอยดขอมลลกคาทจองคว โดยผจดการรานจะเปนผแกไขสถานะเสรจ รอ ยกเลก แลวท าการตกลง หรอในกรณทลกคาตองการเปลยนบรการ เปลยนพนกงาน สามารถโทรมาเพอเปลยนแปลงเพอใหผจดการรานแกไขใหโดยไมตองท าการจองควใหม

49

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

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

รปท 4.16 หนาแสดงขอมลพนกงาน

ในรปท 4.16 เมอเลอกไปทจดการขอมลพนกงาน จะแสดงหนาทแสดงขอมลพนกงานซงประกอบไปดวยรหส ชอ นามสกล วนเกด เพศ อเมลล เบอรโทรศพท ต าแหนง เงนเดอน สถานะในการท างาน มปมเพมขอมลพนกงานและปมแกไขขอมลพนกงาน โดยสถานะของพนกงาน จะแทนสญลกษณดวยอกษรภาษาองกฤษ A= ผจดการราน , Y = พนกงานทมสถานะภาพทยงปฏบตงานอย ณ ปจจบน , N = สถานะทพนกงานลาออกหรอไมไดปฏบตงานแลว

50

รปท 4.17 หนาเพมขอมลพนกงาน

ในรปท 4.17 เมอเลอกเขาไปทปมเพมขอมลจากหนาแรก จะแสดงหนาใหผจดการเพมขอมลของพนกงานทเขามาท างาน โดยจะเกบขอมลทวไปดงน ชอ-นามสกล,วนเกด,เพศ,รหสผาน,อเมลล,เบอรโทรศพท,ต าแหนง,เงนเดอนทไดรบ( แบบไมรวมOT ) เมอกรอกขอมลทงหมดส าเรจคลกไปทปมตกลงเพอเพมขอมลพนกงานและขอมลทงหมดจะแสดงทหนาแรงทกดเขามา

รปท 4.18 หนาแสดงการแกไขขอมลพนกงาน

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

51

รปท 4.19 หนาแสดงการขอมลภาพ

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

รปท 4.20 หนาแสดงการเพมรปภาพ

ในรปท 4.20 เมอเลอกไปทปมเพมรปภาพจะพบกบหนาจอแสดงทใหอพโหลดรปภาพ โดยคลกไปทปม Choose File กสามารถเลอกรปภาพทตองการได เมอเลอกรปภาพส าเรจใหผเพมรปเลอกรายละเอยดของรปวาเปนของผชายหรอผหญง เมอใสขอมลครบถวนใหคลกไปทปมตกลงเพอยนยนวาเพมรปส าเรจ

52

รปท 4.21 หนาแสดงการเพมรปภาพ

ในรปท 4.21 เมอเลอกไปทปมเพมรปภาพผลตภณฑจะมหนาจอแสดงขอมลรหสรปภาพ รปภาพ ค าอธบายรปภาพ ปมแกไขรปภาพ ปมลบรปภาพ คนหาและปมเพมรปภาพซงจะแสดงขอมลรปภาพทงหมดทเพมเขาไปเพอไปแสดงทหนาเวบไซต

รปท 4.22 หนาแสดงการเพมรปภาพผลตภณฑ

ในรปท 4.22 เมอเลอกไปทปมเพมรปภาพจะพบกบหนาจอแสดงทใหอพโหลดรปภาพ โดยคลกไปทปม Choose File กสามารถเลอกรปภาพทตองการได เมอเลอกรปภาพส าเรจใหผจดการเพมรปกรอกรายละเอยดของรปภาพสนคา เมอใสขอมลครบถวนใหคลกไปทปมตกลงเพอยนยนวาเพมรปส าเรจ

53

รปท 4.23 หนาแสดงการแกไขรปภาพผลตภณฑ

ในรปท 4.23 เมอเลอกไปทปมแกไขรปภาพจะพบกบหนาจอแสดงทใหแกไขรปภาพและรายละเอยดของผลตภณฑ โดยคลกไปทปม Choose File กสามารถเลอกรปภาพทตองการได เมอเลอกรปภาพส าเรจใหผเพมรปกรอกรายละเอยดของรปภาพสนคา เมอใสขอมลครบถวนใหคลกไปทปมตกลงเพอยนยนวาแกไขรปส าเรจ

รปท 4.24 หนาแสดงการเพมตารางงานของพนกงาน

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

54

รปท 4.25 หนาแสดงตารางงานของพนกงาน

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

รปท 4.26 หนาออกรายงานตารางงานของพนกงาน

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

55

รปท 4.27 หนาแสดงตารางงานของพนกงานเฉพาะบคคลแบบจองคว

ในรปท 4.27 เมอเลอกไปทปมตารางการจองควของลกคาท างานจะพบกบหนาจอตารางซงลกคาเปนคนจองควทจะท าผมกบพนกงานโดยตรง ซงพนกงานทไดรบการจองควเทานนเมอ Login เขามาในระบบจะเหนพนกงานคนอนจะไมมสทธในการเขาดยกเวนผจดการรานทเหนจากหนาการจองควของลกคา

รปท 4.28 หนาออกรายงานการจองควของพนกงาน

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

56

รปท 4.29 หนาแสดงตารางงานของพนกงานเฉพาะบคคลแบบจดตารางงาน

ในรปท 4.29 เมอเลอกไปทปมตารางการท างานของพนกงานจะพบกบหนาจอตารางซงผจดการรานปนคนจดการเวลางานใหกบพนกงานโดยตรง ซงพนกงานทไดรบการจองควเทานนเมอ Login เขามาในระบบจะเหนพนกงานคนอนจะไมมสทธในการเขาดยกเวนผจดการรานทเหนจากหนาตารางงาน

รปท 4.30 หนาออกรายงานตารางงานของพนกงาน

ในรปท 4.30 เมอเลอกไปทปมดาวนโหลด PDF จากหนาตารางงานของพนกงานเฉพาะบคคลแบบจดตารางงานจะออกรายงานดงรป ซงจะแสดงรายละเอยด รหสพนกงาน ชอ นามสกล ต าแหนงพนกงาน วนท และเวลา