บทที่ 4 การออกแบบทางกายภาพ 4.1...

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

4.1 การออกแบบฐานขอมล ( Database Design ) การออกฐานขอมลเชงสมพนธ (Relational Database System ) เปนการจดการขอมลตาง ๆ ใหอยในรปของตารางฐานขอมล โดยรปแบบของฐานขอมลคอ โปรแกรม AppServ ในการจดการฐานขอมลทออกแบบขนมา

ตารางท 4.1 รายละเอยดของตารางขอมล addshop Relation : addshop

Attribute Description Attribute Domain

Type PK FK Referen

ce ID_Shop รหสรานคา Int(4) YES Name_Shop ชอรานคา Varchar(30) Name_Owner ชอเจาของราน Varchar(30) MarketAmuletShop รหสตลาดพระ Varchar(100) Phone เบอรโทรศพท Varchar(15) Facebook ชอ ID: Facebook Varchar(30) Line ชอ ID: Line Varchar(20) Detail_Shop รายละเอยดรานคา Varchar(10000) Picture_Shop รปภาพรานคา Varchar(100) PicShop_Path ทอยของรปภาพ text Img_Logo รปภาพ LOGO Varchar(100) Logo_Path ทอยของ LOGO text pd_date วนทของรปรานคา datetime

45

ตารางท 4.2 รายละเอยดของตาราง admin Relation : admin


Type PK FK Referen

ce ID ID เจาของระบบ Varchar(5) YES Username ชอเจาของระบบ Varchar(20) Password รหสเจาของระบบ Varchar(20) Question ค าถามกนลม Varchar(70)

ตารางท 4.3 รายละเอยดของตาราง amulet Relation : amulet


Type PK FK Referen

ce ID_Amulet รหสพระเครอง Int(4) YES Name_Owner ชอเจาของราน Varchar(30) NameLP ชอพระ Varchar(100) TypeAmulet ประเภท Varchar(50) Generation รน Varchar(100) YearAmulet ป Varchar(4) Temple วด Varchar(100) Province จงหวด Varchar(80) FrontPicture รปภาพดานหนา Varchar(200) BackPicture รปภาพดานหลง Varchar(200) pd_date วนทของรปพระ datetime ImagePathAmulet1 ทอยของรปภาพ text ImagePathAmulet2 ทอยของรปภาพ text

46

ตารางท 4.4 รายละเอยดของตาราง amulettoshop

Relation : amulettoshop


Type PK FK Referen

ce ID_Amulet รหสพระเครอง Int(4) YES NameShop ชอรานคา Varchar(100) ImgAmulet1 รปพระเครอง1 Varchar(20) NameAmulet1 ชอพระเครอง1 Varchar(70) GenAmulet1 รนพระเครอง1 Varchar(70) ImagePath1 ทอยพระเครอง1 text ImgAmulet2 รปพระเครอง2 Varchar(20) NameAmulet2 ชอพระเครอง2 Varchar(70) GenAmulet2 รนพระเครอง2 Varchar(70) ImagePath2 ทอยพระเครอง2 text ImgAmulet3 รปพระเครอง3 Varchar(20) NameAmulet3 ชอพระเครอง3 Varchar(70) GenAmulet3 รนพระเครอง3 Varchar(70) ImagePath3 ทอยพระเครอง3 text ImgAmulet4 รปพระเครอง4 Varchar(20) NameAmulet4 ชอพระเครอง4 Varchar(70) GenAmulet4 รนพระเครอง4 Varchar(70) ImagePath4 ทอยพระเครอง4 text ImgAmulet5 รปพระเครอง5 Varchar(20) NameAmulet5 ชอพระเครอง5 Varchar(70) GenAmulet5 รนพระเครอง5 Varchar(70) ImagePath5 ทอยพระเครอง5 text ImgAmulet6 รปพระเครอง6 Varchar(20) NameAmulet6 ชอพระเครอง6 Varchar(70) GenAmulet6 รนพระเครอง6 Varchar(70) ImagePath6 ทอยพระเครอง6 text

47

ImgAmulet7 รปพระเครอง7 Varchar(20) NameAmulet7 ชอพระเครอง7 Varchar(70) GenAmulet7 รนพระเครอง7 Varchar(70) ImagePath7 ทอยพระเครอง7 text ImgAmulet8 รปพระเครอง8 Varchar(20) NameAmulet8 ชอพระเครอง8 Varchar(70) GenAmulet8 รนพระเครอง8 Varchar(70) ImagePath8 ทอยพระเครอง8 text ImgAmulet9 รปพระเครอง9 Varchar(20) NameAmulet9 ชอพระเครอง9 Varchar(70) GenAmulet9 รนพระเครอง9 Varchar(70) ImagePath9 ทอยพระเครอง9 text ImgAmulet10 รปพระเครอง10 Varchar(20) NameAmulet10 ชอพระเครอง10 Varchar(70) GenAmulet10 รนพระเครอง10 Varchar(70) ImagePath10 ทอยพระเครอง10 text pd_date วนทของรปพระ datetime

ตารางท 4.5 รายละเอยดของตาราง favorite Relation : favorite


Type PK FK Referen

ce ID_Facebook ID Facebook ผใช Bigint(20) ID_Shop รหสรานคา Int(4) YES

48

ตารางท 4.6 รายละเอยดของตาราง market Relation : market


Type PK FK Reference

id_amuletmarket รหสตลาดพระ Int(4) YES Name_Market ชอตลาดพระ Varchar(100) Address ทอย Varchar(200) Zone เขต/ต าบล Varchar(30) Canton แขวง/อ าเภอ Varchar(70) Zipcode ไปรษณย Varchar(5) Province จงหวด Varchar(30) TelOffice เบอรตลาดพระ Varchar(10) TelOwner เบอรเจาของ Varchar(10) Time เวลา Varchar(20) Latitude พกด Float(10,6) Longitude พกด Float(10,6)

ตารางท 4.7 รายละเอยดของตาราง typeamulet Relation : typeamulet



ID_Type รหสประเภท Int(3) YES Type_Name_Amulet ชอประเภท Varchar(50)

49

ตารางท 4.8 รายละเอยดของตาราง top 10shop Relation : top 10shop



ID_Shop รหสตลาดพระ Int(4) YES Name_Market ชอตลาดพระ Varchar(100) Address ทอย Varchar(200) Zone เขต/ต าบล Varchar(30) Canton แขวง/อ าเภอ Varchar(70) Zipcode ไปรษณย Varchar(5) Province จงหวด Varchar(30) TelOffice เบอรตลาดพระ Varchar(10) TelOwner เบอรเจาของ Varchar(10) Time เวลา Varchar(20) Latitude พกด Float(10,6) Longitude พกด Float(10,6)

รปท 4.1 โครงสราง Site Map

50

51

4.2 การออกแบบสวนตดตอผใช (User Interface Design)

แอปพลเคชนออกแบบโดยยดหลก UX (User Experience) เปนหลกโดยค านงถงความ

สะดวก งายตอการใชงาน มการแสดงขอความแจงเตอนเมอผใชไมไดเปดใชงาน Location

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

สApplication แลวจะเรมท าการคนหาตลาดพระในบรเวณรอบๆ 5 กโลเมตร โดยจะแสดงเปนแถบ

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

อยบรเวณนน แอปพลเคชนยงออกแบบโดยใชทฤษฎ Flat Design ซงลดการไลสแบบ Gradient แต

ใชสแบบ Solid แทน เพอความสบายตาของผใช

52

รปท 4.2 หนาจอส าหรบคนหาตลาดพระเครอง

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

53

รปท 4.3 หนาจอแสดงรายการรานคาในตลาดพระเครอง

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

54

รปท 4.4 หนาจอแสดงรายการแผนท และ ระบบน าทางตลาดพระเครอง

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

55

รปท 4.5 หนาจอแสดงหนาราน และ ระบบน าทางไปยงราน

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

56

รปท 4.6 หนาจอแสดงการคนหาพระเครอง

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

57

รปท 4.7 หนาจอแสดงรายการพระเครองยอดนยมประจ าเดอน

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

58

รปท 4.8 หนาจอแสดงโปรไฟลพระเครองยอดนยม

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

59

รปท 4.9 หนาจอแสดงรายการรานพระเครองยอดนยมประจ าเดอน

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

60

รปท 4.10 หนาจอแสดงโปรไฟลรานคายอดนยม และ ระบบน าทางไปยงรานคา

เมอผใชเลอกเขามายงโปรไฟลรานคาแลวจะแสดง ชอราน , ตลาดพระทรานอย , ชอเจาของราน , เบอรโทร , ไอดไลน , เฟสบก , รปหนาราน และรายละเอยดรานคา ยงสามารถแสดง แผนทไปยงรานคาได มระบบน าทางจาก Service Google Map ท าใหมความแมนย าไปยงจดหมาย โดยไมผดพลาด

61

รปท 4.11 หนาจอแสดงการเขาสระบบ และ ระบบ Favorite

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

62

รปท 4.12 หนาจอแสดงขอมลเจาของแอปพลเคชน

เมอผใชเขาหนาจอนจะแสดงขอมลผพ ฒนา หรอ เจาของแอปพลเคชนประกอบดวย สถานท , ชอผบรหาร , เบอรโทรศพท , อเมล , ไอดไลน , เวอรชนของระบบ เมอเลอกแทบไปยง Map จะแสดงแผนทบรษท และมระบบน าทางไปยงบรษทไดดวย Service Google Map

บทที่ 4 การออกแบบทางกายภาพ 4.1...

Documents

Transcript of บทที่ 4 การออกแบบทางกายภาพ 4.1...