e - commerce for badminton equipment¹‚ครงงาน...ค ก ตต...

ระบบขายสนคาออนไลนอปกรณกฬา ประเภทแบตมนตน E - Commerce For Badminton Equipment

จดทาโดย

นาย กฤตนนท บญมน นางสาว พรญาณ ตลาทอง

โครงการนเปนสวนหนงของการศกษาตามหลกสตรประกาศนยบตรวชาชพชนสง สาขาวชาคอมพวเตอรธรกจ

วทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2561

ข

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

E - Commerce For Badminton Equipment ผจดทาโครงการ นาย กฤตนนท บญมน นางสาว พรญาณ ตลาทอง อาจารยทปรกษา อาจารยธนาวฒ วชย อาจารยทปรกษารวม อาจารยศรพร สงบภย สาขาวชา สาขาวชาคอมพวเตอรธรกจ สถาบน วทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2561

บทคดยอ ระบบขายสนคาออนไลน (E-Commerce) ประเภทเวบไซตขายอปกรณกฬาแบตมนตนวตถประสงคของโครงการจดทาขนเพอเปนตอบสนองความตองการของผใชในการซอสนคาออนไลน ประหยดเวลาในการเดนทาง และ มระบบการซอสนคาทมความทนสมยและใชงานไดงาย เวบไซตขายสนคาออนไลน ประเภทอปกรณกฬาบาสเกตบอลระบบการสมครสมาชกและมการ Login เขาระบบเพอทาการสงซอสนคา มระบบซอสนคาทใชงานไดอยางงายดาย มการบอกวธการสงซอสนคาและวธการชาระเงนเมอสงซอสนคาอยางครบถวนและ ใชโปรแกรมAdobe Dreamweaver CS6 ในการพฒนามทงหมด 9 Page ไดแกหนา home, หนาแรกของเวบไซต, แสดงหนาการสมครสมาชก, แสดงหนาลอกอนเขาสระบบ, แสดงหนาวธการสงซอ, แสดงหนาสนคา,

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

ค

กตตกรรมประกาศ

โครงการ “ระบบขายสนคาออนไลนอปกรณกฬา ประเภทแบตมนตน” นสาเรจลงไดดวยความกรณาของ อาจารยธนาวฒ วชย และ อาจารยศรพร สงบภย ทปรกษาโครงการ ทไดใหคาปรกษาแนะนาและตรวจแกไขขอบกพรองตาง ๆ ดวยความเอาใจใสอยางดยงตลอดมา คณะผจดทารสกซาบซงในความกรณาของทานเปนอยางยง จงขอกราบขอบพระคณเปนอยางสงไว ณ ทน คณะผจดทาขอขอบพระคณผบรหาร คณะอาจารย สาขาวชาคอมพวเตอรธรกจ วทยาลย เทคโนโลยอรรถวทยพณชยการ ทคอยสนบสนนและเสนอแนะใหการดาเนนงานในครงนสาเรจจนบรรลวตถประสงค ทายทสดนขอกราบขอบพระคณ คณพอ คณแม และญาตพนองทกทานทใหกาลงใจ และใหโอกาสทางการศกษาแกคณะผจดทาและขอขอบคณเพอน ๆ ทกคน ทไดใหความชวยเหลอดวยดตลอดมา

ง

คานา

การจดทาโครงการ น เป น ส วนห น งของวช าโครงการ 3204-8501 หลก สตรประกาศนยบตรวชาชพชนสงสาขาวชาคอมพวเตอรธรกจ โดยคณะผจดทาไดจดทาโครงการประเภทเวบไซตซอขายออนไลนอปกรณกฬา ประเภทแบตมนตนโดยมการสรางเวบไซตเพอนาเสนอผลงานแกผทสนใจในการสงซอสนคาผานระบบออนไลน

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

คณะผจดทา

10 มกราคม 2562

จ

สารบญ

หนา หนาอนมต ก บทคดยอ ข กตตกรรมประกาศ ค คานา ง สารบญ จ สารบญรป ซ สารบญตาราง ฏ บทท 1 บทนา 1.1 ภมหลงและความเปนมา 1 1.2 วตถประสงคโครงการ 2 1.3 ขอบเขตการศกษา 2 1.4 ประโยชนทคาดวาจะไดรบ 2 1.5 แผนการดาเนนงาน 3 1.6 เครองมอทใช 4 1.7 งบประมาณในการดาเนนการ 4 บทท 2 ระบบงานและทฤษฎทเกยวของ 2.1 ระบบงานในปจจบน 5 2.2 ปญหาทเกดขนในระบบงานปจจบน 7 2.3 ทฤษฎทเกยวของ 8 2.4 การนาคอมพวเตอรเขามาใชในระบบงาน 32 บทท 3 การออกแบบงานดวยระบบคอมพวเตอร

3.1 การออกแบบระบบงาน 33 3.2 การออกแบบแผนภาพบรบท 36 3.3 การออกแบบแผนภาพความสมพนธของขอมล 42 3.4 พจนานกรมขอมล 43 3.5 การออกแบบ Sitemap 45 3.6 การออกแบบ Story Board 46 3.7 การออกแบบสงนาเขา 50

ฉ

สารบญ (ตอ)

หนา

3.8 การออกแบบสงนาออก 50 บทท 4 การพฒนาระบบขายสนคาอปกรณกฬ าแบตบนตน 4.1 เครองมอและอปกรณทใช 51 4.2 โปรแกรมทงหมดทใชพฒนา 51

4.3 วธการตดตงโปรแกรม Appserv-win32-2.5.10 52 4.4 วธการตดตงระบบฐานขอมลลงในเครองเซฟเวอร 57 4.5 วธการใชงานผานเวบไซต 63

บทท 5 สรปการทาโครงการ 5.1 สรปผลการทาโครงการ 68 5.2 สรปขนาดของโปรแกรม 68 5.3 สรปการดาเนนงานจรง(Gantt Chart) 70 5.4 สรปคาใชจายในการดาเนนงานจรง 71 บรรณานกรม 72 ภาคผนวก

- ใบขอเสนออนมตโครงการระบบคอมพวเตอร (ATC.01) 73 - ใบขอเสนออาจารยทปรกษารวมโครงการ (ATC.02) 74 - ใบขอสอบโครงการระบบคอมพวเตอรธรกจ (ATC.03) 75 - ใบรายงานความคบหนาโครงการระบบคอมพวเตอรธรกจ (ATC.04) 76 - ใบบนทกการเขาพบทปรกษาโครงการ (ATC.05) 77

ประวตผจดทาโครงการ 78

ซ

สารบญรป หนา

รปท 2.1 ระบบงานในปจจบน 05 รปท 2.2 หนาตางโปรแกรม Adobe Photoshop CS5 12 รปท 2.3 แสดง Tool Box 15 รปท 2.4 แสดงระบบฐานขอมล 19 รปท 2.5 ภาพแสดงวงจรของสทเกดจากการนาแมสมาผสมกน 24รปท 2.6 สพนฐานแมส 24รปท 2.7 สเหลองแกมเขยว 25 รปท 2.8 สน าเงนแกมมวง 25รปท 2.9 สแดงแกมมวง 25รปท 2.10 สแดงแกมสม 26รปท 2.11 สเหลองแกมสม 26รปท 2.12 สน าเงนแกมเขยว 26 รปท 3.1 การออกแบบระบบงาน (Flowchart) 33 รปท 3.2 Flowchart ระบบ สมครสมาชก 34 รปท 3.3 Flowchart ระบบ การเขาสระบบ 35 รปท 3.4 การออกแบบ Context Diagram 36 รปท 3.5 Data Flow Diagram Level 0 37 รปท 3.6 Data Flow Diagram Level 1 Process 1 38 รปท 3.7 Data Flow Diagram Level 1 Process 2 39 รปท 3.8 Data Flow Diagram Level 1 Process 3 40 รปท 3.9 Data Flow Diagram Level 1 Process 4 41รปท 3.10 ความสมพนธของขอมล (E-R Diagram) 42รปท 3.11 Sitemap 45 รปท 3.12 หนา Index 46 รปท 3.13 หนา Home 46 รปท 3.14 หนาสมครสมาชก 47 รปท 3.15 แสดงหนาผจดทา 47 รปท 3.16 แสดงชองทางตดตอ 48 รปท 3.17 แสดงหนาวธการสงซอ 48

ฌ

รปท 3.18 หนาแสดงสนคา 49รปท 3.19 แสดงหนาวธการชาระเงน 49 รปท 4.1 ตวโปรแกรม Appserv-win32-2.5.10 52 รปท 4.2 หนาตางแจงเตอนการ RUN โปรแกรม Appserv-win32-2.5.10 52 รปท 4.3 หนาจอ Welcome To Appserv-win32-2.5.10 53 รปท 4.4 หนาจอแสดงเงอนไขโปรแกรม Appserv-win32-2.5.10 53 รปท 4.5 การกาหนดโฟลเดอรสาหรบตดตงโปรแกรม AppServ-win32-2.5.10 54 รปท 4.6 การเลอกองคประกอบ (Components) สาหรบการตดตง 54 รปท 4.7 หนาจอสาหรบใหกรอกขอมลของเซฟเวอร (Server Information) 55 รปท 4.8 การกาหนดคาสาหรบ MySQL Server 55 รปท 4.9 การดาเนนการตดตงองคประกอบตางๆลงในระบบ 56 รปท 4.10 การตดตงเสรจสน 56 รปท 4.11 การเปดโปรแกรมเวบบราวเซอรเพอเชคสถานะโปรแกรม Appserv 57รปท 4.12 การเขาสระบบฐานขอมลภายในเครอง 57รปท 4.13 การสรางโฟลเดอรฐานขอมล 58รปท 4.14 การสรองโฟลเดอรฐานขอมลทสาเรจ 58 รปท 4.15 การนาฐานขอมลของโปรแกรมลงภายในเซฟเวอรของเครอง 59รปท 4.16 การเลอกไฟลฐานขอมลลงเซฟเวอร 59รปท 4.17 นาฐานขอมลของโปรแกรมเขาสเซฟเวอร 60รปท 4.18 เสรจสมบรณในการตดตงระบบฐานขอมล 60รปท 4.19 การนาขอมลลงในโฟรเดอรของโปรแกรม AppServ 61 รปท 4.20 การคดลอกไฟลงานลงในโฟรเดอร www 61 รปท 4.21 ไฟลงานทงหมดทสามารถ RUN ผานโปรแกรม Appserv 62 รปท 4.22 จอภาพการแสดงการเขาสระบบ ( Index ) 63 รปท 4.23 จอภาพการแสดงหนาหลกของระบบ (Home) 63 รปท 4.24 จอภาพการแสดงการสมครสมาชก 64 รปท 4.25 จอภาพการแสดงการ Login 64 รปท 4.26 จอภาพการแสดงหนาวธการสงซอ 65 รปท 4.27 จอภาพการแสดงหนาสนคา 65 รปท 4.28 จอภาพการแสดงหนาตะกรา 66 รปท 4.29 จอภาพการแสดงหนาแสดงหนาวธการชาระสงสนคา 66

ฏ

สารบญตาราง หนา

ตารางท 1.1 แผนการดาเนนงาน (Gantt Chart) 3 ตารางท 1.2 งบประมาณการดาเนนงาน 4 ตารางท 2.2 แสดงสญลกษณระบบกระแสขอมล 10 ตารางท 2.3 แสดงสญลกษณในการออกแบบระบบฐานขอมล 11 ตารางท 2.15 ความรสกของส 30 ตารางท 3.1 ตารางแสดงขอมลสมาชก 43 ตารางท 3.2 ตารางขอมลการสงซอ 43 ตารางท 3.3 ตารางขอมลรายละเอยดสงซอ 44 ตารางท 3.4 ตารางขอมลสนคา 44 ตารางท 3.5 ตารางขอมลประเภทสนคา 42 ตารางท 5.1 แสดงขนาดของโปรแกรม 68 ตารางท 5.2 สรปเวลาการดาเนนงานจรง 70 ตารางท 5.3 สรปคาใชจายในการดาเนนงานจรง 71

1

บทท 1 บทนา

1.1 ภมหลงและความเปนมา E-Commerce เรม ขน เมอประมาณตนทศวรรษ ท 1970 โดยเรมจากการโอนเงนทางอเลกทรอนกสระหวางหนวยงาน และในชวงเรมตนหนวยงานทเกยวของสวนใหญจะเปนบรษทใหญๆ เทานน บรษทเลกๆ มจานวนไมมากนก ตอมาเมอการแลกเปลยนขอมลทางอเลกทรอนกส (Electronic Data Interchange-EDI) ไดแพรหลายขน ประกอบกบคอมพวเตอรพซไดมการขยายเพมอยางรวดเรวพรอมกบการพฒนาดานอนเทอรเนตและเวบ

และในปจจบน ไดมความเจรญกาวหนาอยางยงและมเวบไซตตาง ๆ เขามาเปนเครองมอสาคญในซอขาย ทาใหลกคาสามารถสงซอสนคาไดงาย เพราะในรปแบบเวบไซตนนผซอจะทราบรายละเอยดอปกรณกฬาแบตมนตนและราคาของอปกรณกฬาในแตละรายการแตสนคาบางชนดเปนสนคาทยงไมไดรบความนยมทางทองตลาด จงทาใหการซอขายทางทองตลาดนนหาไดยาก หรอในบางกรณสนคาทตองการอยไกลจากทอยอาศยจากผซอทาใหการคมนาคมเปนไปไดยาก จงทาใหการซอขายสนคาผานเวบไซตหรอระบบ E-Commerce เขามาชวยเปนตวเลอกในการซอขายสนคา โดย E-Commerce เปนระบบขายสนคาผานเวบไซต ทกาลงไดรบความนยมเปนอยางมาก แตกมชองโหวมากมายในการซอขาย ผานเวบไซต ยกตวอยางเชน การโกงลกคา โดยผขายใหผซอไดรบสนคา จากนนผขายกไมทาการสงสนคาใหลกคาตามทกาหนดไว ทาใหลกคาสวนใหญไมคอยไววางใจทจะทาการซอขายผานเวบไซต จงตองมระบบการกระทาททาใหลกคาสวนใหญไมคอยไววางใจในการซอขาย เชน สามารถเชคประวตของผขาย สามารถตดตอผขายไดโดยตรง โดยมเบอรโทรศพทและทอยจรงตามบตรประชาชนกากบ มการออกใบเสรจ ใบซอขาย และใบสงของ เปนหลกฐานแกลกคาเพอความมนใจของลกคาในการซอขาย คณะผ จดทาไดเลงเหนความสาคญของระบบ E-Commerce จงไดจดทาระบบขายสนคาออนไลนประเภทอปกรณกฬาแบตมนตนเพออานวยความสะดวกแกลกคาและเปนการศกษาการพฒนาระบบ E-Commerce ใหสมบรณยงขน

2

1.2 วตถประสงคโครงการ

1. เพอใหผทสนใจคนหาเวบไซตไดงายขน 2. เพอใหลกคาสามารถสงซอผานออนไลนได 3. เพอใหลกคาไดรจกการประเภทอปกรณกฬาแบตมนตน 4. เพอศกษาการเขยนโปรแกรมเชอมตอฐานขอมลดวยภาษาPHP 1.3 ขอบเขตการศกษา

1. สวนของสมาชก 1.1 ระบบสามารถสมครสมาชกได 1.2 ระบบสามารถ Login เขาสระบบ และ Logout ออกจากระบบได 1.3 สมาชกสามารถเลอกสนคาออนไลนได 1.4 ระบบมความสามารถคานวนราคาสนคาได 1.5 ระบบมความสามารถในการออกใบเสรจรบเงนได

2. สวนผดแลระบบ 2.1 ระบบสามารถเพม ลบ สนคาได 2.2 ระบบสามารถแกไขรายการสนคาได 2.3 ระบบสามารถแจงสถานะการชาระเงนได

1.4 ประโยชนทคาดวาจะไดรบ 1. ไดเวบไซตทสามารถเลอกคนหาเลอกซอสนคาไดหลากหลายและงายขน 2. ไดเวบไซตทสามารถสงซอสนคาออนไลนได 3. ไดเวบไซตทลกคาสามารถทราบรายละเอยดเกยวกบสนคาได 4. ไดเวบไซตทสามารถศกษาการเขยนภาษาPHPได

3

1.5 แผนการดาเนนงาน (Gantt Char t)

รายการ มถนายน 61 กรกฎาคม 61 สงหาคม 61 กนยายน 61

ระยะเวลา 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

เสนอหวขอโครงการ รอบท 1 (บทท1)

20-23 มถนายน 61

ประกาศผลหวขอโครงการ รอบท 1

27 มถนายน 61




4 กรกฎาคม 61

สงบทท 2 11-23 กรกฎาคม 61

สงบทท 3 26 ก.ค. – 20 ส.ค. 61

สอบหวขอโครงการ

3 กนยายน 61

สงความคบหนา 70%

12-16 กนยายน 61



รายการ พฤศจกายน 61 ธนวาคม 61 มกราคม 62 กมภาพนธ 62

หมายเหต 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4


1-3 พฤศจกายน 61 เปนตนไป

สอบโปรแกรม ระดบ ปวช3/ปวส2

4 และ 12

พฤศจกายน 2561

สงบทท 4 6-16 ธนวาคม 61

สงบทท 5 16-20 มกราคม 62

สงรปเลม ซด และคาเขาเลม

24 มกราคม – 14 กมภาพนธ 2562

ตารางท 1.1 แผนการดาเนนงาน (Gantt Chart)

4

1.6 เครองมอทใช 1. โปรแกรม Adobe Dreamweaver CS6 ใชในการสรางเวบไซต 2. โปรแกรม Adobe Photoshop CS6 ใชในการตดตอรปภาพ 3. โปรแกรม Appserv 2.5.10 ใชในการจาลอง Server 4. โปรแกรม PHP ใชในการพฒนาระบบสนคาออนไลน

1.7 งบประมาณการดาเนนงาน

ตารางท 1.2 งบประมาณการดาเนนงาน

ลาดบ รายการ จานวน ราคา 1 คากระดาษ 2 รม 230 2 คาหมกพมพ 1 ตลบ 400 3 คาเบลดเตลด 4 400 4 คาซด 1 แผน 30

รวมเปนเงน 1,060

บทท 2

ระบบงานและทฤษฎทเกยวของ

2.1 ระบบงานปจจบน

รปท 2.1 Flow chart ระบบงานปจจบน

6

ในโลกปจจบนมความกาวหนาทางดานเทคโนโลยไปไกลมากท งดาน การคมนาคม และดานการตดตอสอสาร Internet จงเขามามสวนสาคญในการดารงชวตประจาวน ไมวาจะเปนการตดตอสอสารทางธรกจ Social Network รวมไปถงการตดตอซอขายสนคาผานทางเวบไซตตางๆ การซอขายปจจบนผซอบางกลมมความตองการสนคาทหาไดยาก หรอสนคาทมาจากตางประเทศ จงใหยากตอการซอสนคา และสนคาบางชนดกเปนสนคาทยงไมไดรบความนยมทางทองตลาด จงทาใหการซอขายทางทองตลาดนนหาไดยาก หรอในบางกรณสนคาทตองการอยไกลจากทอยอาศยจากผซอทาใหการคมนาคมเปนไปไดยาก จงทาใหการซอขายสนคาผานเวบไซต หรอระบบ E-Commerce เขามาชวยเปนตวเลอกในการซอขายสนคา โดย E-Commerce มชอทแปลเปนภาษาไทยวา “พาณชยอเลกทรอนกส” โดยความหมายของคาวาพาณชยอเลกทรอนกส มผใหคานยามไวเปนจานวนมาก แตไมมคาจากดความใดทใชเปนคาอธบายไวอยางเปนทางการ ในภาครวมนน E-Commerce ในทรจกกนทวไป คอการซอขายสนคาผานเวบไซต ทกาลงไดรบความนยมเปนอยางมาก แตกมชองโหวมากมายในการซอขาย ผานเวบไซต ยกตวอยางเชน การโกงลกคา โดยผขายใหผซอโอนเงนผานทางธนาคารเขาบญชกอนไดรบสนคา จากนนผขายกไมทาการสงสนคาให ลกคาตามทกาหนดไว ทาให ลกคาสวนใหญไมคอยไววางใจทจะทาการซอขาย ผานเวบไซต จงตองมระบบการกระทาททาใหลกคาไววางใจในการซอขาย เชน สามารถเชคประวตของผขาย สามารถตดตอผขายไดโดยตรง โดยมเบอรโทรศพทและทอยจรงตามบตรประชาชนกากบ มการออกใบเสรจ ใบซอขาย และใบสงของ เปนหลกฐานแกลกคาเพอความมนใจของลกคาในการซอขาย การขายสนคาผานเวบไซตคอ การทาใหลกคามนใจ และไววางใจผขายสนคามากทสด คณะผจดทาจงไดจดทาระบบขายสนคาออนไลน ทมระบบการขายทมาตรฐาน ตรวจสอบไดทกขนตอนในการทางานมการออกใบเสรจยนยนในการซอสนคาใหแกลกลกคาผานทาง E-mail มระบบสมาชกทจะทาใหลกคาไดรบสทธประโยชนตาง ๆ มการสง SMS เขาโทรศพทมอถอ ของผ ซอเมอโอนเงนเขาบญชโดยอตโนมต หากผซอตองการทจะสอบถามรายละเอยดสนคาแกผขาย กสามารถทาการสอบถามไดทนทผานหนา Chat ในระบบของเราตลอดระยะเวลาในการทางานทกาหนดไว หากนอกเวลางาน สามารถฝากขอความไวหรอ โทรมาสอบถามไดตลอด 24 ชวโมง จงทาใหลกคามนใจไดวาจะไดรบสนคาอยางแนนอน

7

2.2 ปญหาทเกดขนในระบบงานปจจบน 1. ความไมปลอดภยของขอมลขาดการตรวจสอบการใชบตรเครดตบนอนเทอรเนตขอมลบน

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

2. E-Commerce ยงมประเดนเชงนโยบายททาใหรฐบาลตองเขามากาหนดมาตรการเพอใหความคมครองกบผซอและผขายขณะเดยวกนมาตรการมนเรองระเบยบทจะกาหนดขนตองไมขดขวางการพฒนาเทคโนโลย

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

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

2.3 การวเคราะหความตองการระบบใหม 1. มการใสรหสประจาตวประชาชนของผสมครและของเจาของบตรเครดต เพอใหไมเกด

ความเสยงในการใชบตรเครดต ทถกขโมยมาเพอการซอสนคา 2. มการศกษากฎระเบยบและขอบงคบของรฐบาล เพอไมใหเกดปญหาในภายหลง และยงใช

เทคโนโลยใหม ๆ ทมขนอยเรอย เพอใหเปนการพฒนาระบบและไมขดขวางการพฒนาของเทคโนโลย

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

4. มการปองกนการเขาถงของระบบเพอไมใหใครเขามานาขอมลสวนตวของลกคาออกไปได และทางผดแลไมมการกระทาแบบนนได

8

2.4 ทฤษฎและระบบงานทเกยวของ การพฒนาระบบอนเทอรเนตใหสามารถซอขายสนคาผานทางเวบไซตทเรยกวา“การคาอเลกทรอนกสหรออคอมเมรซ (E-Commerce) ซงชวยลดขนตอนและความยงยากเกยวกบการซอขายสนคาไดอยางยอดเยยม ระบบอคอมเมรซไดเขามาแทนทวธการซอขายสนคาในรปแบบเกา ๆ ภายในระยะเวลาอนรวดเรว ในขณะเดยวกนบรษทผพฒนาซอฟตแวรกเรงพฒนาซอฟตแวรใหมความสามารถในการสรางเวบไซต รวมท งสรางระบบอคอมเมรซใหงายตอการใชงานมากขนลกษณะขนตอนการสงซอสนคาจากเวบไซตทพบเหนทวไปนนจะมรปแบบและวธการเดยวกน โดยสามารถแยกออกไดเปน 2 สวนหลกคอ - เวบเพจหนาราน (Store Front) คอ หนาเวบเพจสาหรบใชในการสงซอสนคาหรอบรการตางๆ จากรานคา - เวบเพจหลงราน (Back Office) คอเวบเพจทใชเฉพาะบคลากรของรานคาซงผใชงานภายนอกไมสามารถเขามาในสวนนได ประโยชนเพอกาหนดรายละเอยดตางทเกยวกบตวสนคาหนาเวบรานคา ระบบพาณชยอเลกทรอนกสไมไดหยดอยแคนนตอมาไดมการพฒนาระบบตาง ๆ ขนมากมายทนามาใชทางธรกรรมตางๆ รวมทงการขายสนคาออนไลนซงในปจจบนไดมการพฒนาระบบหรอโปรแกรมทเขามาชวยในการสนบสนนการขายสนคาใหมประสทธภาพมากขน ปจจบนมการทาธรกจผานระบบเครอขายอนเทอรเนตเกดขนมากมายโดยมรปแบบตาง ๆ ดงน 1. การประกาศซอขายเปนรปแบบเวบไซต E-Commerce ทเปดโอกาสใหผทสนใจประกาศความตองการซอขายสนคาของตนไดภายในเวบไซตโดยเวบไซตจะทาหนาทเหมอนกระดานขาวและตวกลางในการแสดงขอมลสนคาตางๆ และหากมคนสนใจสนคาทประกาศไวกสามารถตดตอตรงไปยงผประกาศไดทนทจากขอมลทประกาศอยภายในเวบไซต 2. เวบไซตแคทตาลอกสนคาออนไลนเปนเวบไซตทมรายละเอยดแสดงขอมลสนคารปภาพและรายละเอยดตางๆรวมทงขอมลการตดตอในกรณทสนใจจะซอสนคาแตจะไมมระบบการชาระเงนหรอสงซอสนคา 3. รานคาออนไลนเปนเวบไซต E-Commerce ทมทงระบบการจดการสนคาระบบตะกราสนคาShopping Cart ระบบการชาระเงนรวมถงการขนสงสนคาครบสมบรณแบบทาใหผซอสามารถสงซอสนคาทาการชาระเงนผานเวบไซตไดทนท 4. การประมลสนคาเปนเวบไซต E-Commerce ทมรปแบบของการนาสนคาไปประมลขายกนโดยจะเปนการแขงขนใน การเสนอราคาสนคาหากผใดเสนอราคาสนคาไดสงสดในชวงเวลาทกาหนดกจะชนะการประมลและสามารถซอสนคาชนนนไปได ดวยราคาทไดกาหนดไวโดยสวนใหญสนคาทนามาประมล หากเปนสนคาใหม

9

ประวตความเปนมาของอนเทอรเนต (Internet) อนเทอรเนตเปนเครอขายคอมพวเตอร ทกอตงขนโดยกระทรวงกลาโหมของประเทศสหรฐอเมรกา ซงเปนการน าคอมพวเตอรมาเชอมตอกน มชอเรยกสมยน นวา“อารปาเนต”การเชอมตอคอมพวเตอรจานวนมากเขาดวยกน กอใหเกดการแลกเปลยนและการสอสารทเปนประโยชนอยางมหาศาล สงผลใหอารปาเนตเตบโตอยางรวดเรว เพราะมองคกรทางทหารและมหาวทยาลย นาเครองคอมพวเตอรเชอมตอกบเครอขายเปนจานวนมาก ในป พ.ศ.2532 มเครองคอมพวเตอรเชอมตอกบเครอขายมากกวา10,000เครองทวโลก และเครอขายนไดถกขนานนามใหมวา“อนเทอรเนต” การสอสารขอมลบนอนเทอรเนตจะมขอกาหนดทเปนมาตรฐาน หรอทเรยกวา“โพรโทคอล (Protocol)”โดยพนฐานของการสอสารขอมลอนเทอรเนตจะใชโครงสรางแบบTCP/IPยอมาจาก“Transmission Control Protocol/Internet Protocol” (TCP/IP Model) ซงเปนมาตรฐานทวาดวยการกาหนดวธการตดตอสอสารระหวางคอมพวเตอร ทาใหคอมพวเตอรภายในระบบเครอขายอนเทอรเนต สามารถเชอมตอเขาหากน และตดตอสอสารแลกเปลยนขอมลกนได ความรเกยวกบการวเคราะหและออกแบบระบบการวเคราะหระบบ (Systems Analysis) คอ การศกษาขนตอนตางๆ ของการทางานและปญหาในระบบงานหนงๆ และคนหาแนวทางแกไข (Solutions) วางโครงสรางรปแบบของระบบงาน (Design) เพอนามาพฒนาใหระบบงานทวเคราะหและออกแบบมประสทธภาพในแงการปฏบตมากทสด สวนการออกแบบระบบกคอ การนาเอาความตองการของระบบมาเปนแบบแผนหรอเรยกวาพมพเขยวโมเดลทใชสาหรบการพฒนาระบบ รปแบบของภาพ เชน ไดอะแกรม (Diagram) หรอ แผนภม (Chart) ดงน

10

สญลกษณระบบกระแสขอมล

ตารางท 2.2 แสดงสญลกษณระบบกระแสขอมล

แผนภาพแสดงการไหลกระแสของขอมล (Data Flow Diagram: DFD) Data Flow Diagramเปนเครองมอของนกวเคราะหระบบทชวยใหสามารถเขาใจกระบวนการท างานของแตละหนวยงานซงทราบถงการรบสงขอมลการประสานงานระหวางกจกรรมตางๆ ในการดาเนนงานซงเปนแบบจาลองของระบบแสดงถงการไหลของขอมลท ง INPUT และ OUTPUTระหวางระบบกบแหลงกาเนดรวมทงปลายทางของการสงขอมลซงอาจเปนแผนก บคคล หรอระบบอนโดยขนอยกบระบบงานและการทางานประสานงานภายในระบบนนนอกจากนยงชวยใหรถงความตองการขอมลและขอบกพรอง(ปญหา)ในระบบงานเดมเพอใชในการออกแบบการปฏบตงานในระบบใหม Data Flow Diagram (DFD) เปนภาพแสดงการเปลยนแปลงขอมลในขณะไหลผานกระบวนการทางานตาง ๆของระบบสารสนเทศDFDจงเปนโครงสรางของระบบงานสารสนเทศทสอเขาใจในการทางานของระบบงานในรปแบบของความสมพนธระหวางกระแสขอมลและโปรเซส DFDภายใน DFD ทาใหเราเขาใจสวนประกอบของงาน เขาใจการใชขอมลในแตละโปรเซส และขอมลทเปนผลจากการทางานโปรเซสโดยโครงสรางจะเรมจากระดบสงสดซงจะแสดงสวนทอยภายนอกระบบ สวนนสาคญเพราะวาเปนสวนทบอกวาระบบนน ๆ ไดรบขอมลมาจากทใด และผลลพธตาง ๆ ทใด และผลลพธตาง ๆ ถกสงไปทใดบาง DFD ในระดบลกลงไปจะไมแสดงสงทอยนอกระบบ คอ ไมมสงนเปนสวนประกอบโดยปกต จะวางแหลงทมาของขอมลไวทางซายมอของ DFD และ

สญลกษณ ( Symbol ) ความหมาย ( Symbol Name )

Source Destination สญลกษณสงทอยภายนอกระบบ

Process สญลกษณการประมวลผล

Data Store สญลกษณการเกบขอมล

Data Flow สญลกษณเสนทางการไหลของขอมล

11

สวนภายนอกทรบผลลพธของระบบจะอยทางขวามอ ทงนเพอใหอยในรปแบบของกระแสขอมลจากซายไปขวา แตหลาย ๆ กรณน เราจะวางขอมลและผลลพธไวในทเหมาะสมซงอาจจะอยเหนอโปรเซสหรอใตโปรเซสกได DFD ระดบรองลงมา (Low-Level Data Flow Diagram) คอสวนทแสดงระบบยอยลงมาจาก DFD ทกลาวมาหรอเรยกวาระดบแมเมอระดบแมไมสามารถแสดงรายละเอยดทงหมดไดเปนตองแตก Level ยอยออกมาเพอแสดงการประมวลผลนนตามขนตอนการทางานใหชดเจนยงขน สญลกษณในการออกแบบระบบฐานขอมล

สญลกษณ ชอเรยก ความหมาย

Entity องคประกอบมลฐาน

Weak entity

เอนท ต ทไมม attribute เปนของตนเอง

Relationship ความสมพนธ

Identifying relationship

ความสมพนธทเกยวพนธเพอผานไปยง owner (ใชกบ weak entity)

Attribute คณสมบตเฉพาะของเอนทต

Key attribute

Attribute ของ เอน ท ต ท ค าขอ ง Attribute ไมเทากน

Multi-valued attribute

Attribute ของเอนทตหนงมคาไดมากกวา 1 คา

Derived attribute

Attribute ทสมารถคานวณหาคาไดจาก Attribute อน

Composite attribute

Attribute ท ส าม า ร ถ แ บ ง แ ย กออกเปน attribute ยอยได

ตารางท 2.3 แสดงสญลกษณในการออกแบบระบบฐานขอมล

12

ทฤษฎการใชโปรแกรม 1. โปรแกรม Adobe Photoshop CS5

เครองมอใน Photoshop CS5 จะแตกตางจาก CS3 และ CS4 ไปบางเลกนอย กลาวคอ โดยพนฐานจะคงเดม แตจะปรบการใชงานใหดงายขน มการเกบรวบรวมเครองมอทเกยวของเอาไว ทเดยวกน เพมชดเครองมอเขามาใหม และลดขนตอนการทางานใหนอยลง ทาใหใชงานสะดวกยงขน ในเวอรชนนไดเพมคาสง และแถบเครองมอทใชบอย ๆ วางแยกออกมาจากกลมเครองมอเดม เชน เครองมอปรบมมมอง เครองมอปรบแตงภาพทรวมอยในพาเนลเดยวกน เชน พาเนล Adjustments สวนการทางานหลก ๆ ยงคงองการใชงานเหมอนเวอรชนทผานๆ มา ซงหนาจอใหมของPhotoshop CS5 มสวนประกอบ ดงภาพ

รปท 2.2 หนาตางโปรแกรม Adobe Photoshop CS5

รายละเอยดสวนประกอบของโปรแกรม Photoshop CS5 1. Application Bar (แอพพลเคชนบาร) จะเปนแถบเครองมอทเกบปมคาสงทใชงานบอย ๆ

เอาไว เชนเปดโปรแกรมBridgeหมนพนททางานยอขยายภาพ, จดเรยงวนโดวภาพและจดองคประกอบของเครองมอตามพนทใชงาน (Workspace)

2. Menu Bar (เมนบาร) ประกอบดวยกลมคาสงตางๆทใชจดการกบไฟล, ทางานกบรปภาพและใชการปรบแตงการทางานของโปรแกรมโดยแบงเมนตามลกษณะงานนอกจากนบางเมนหลกจะมเมนยอยซอนอย โดยสงเกตจากเครองหมาย ซงคณตองเปดเขาไปเพอเลอกคาสงภายในอกท

13

3. Workspace Menu (เวรคสเปซเมน) หรอพนทการทางานเปนการกาหนดรปแบบการแสดงเครองมอและพาเนลทมความเกยวของกบงานททาการเลอกWorkspaceทเหมาะสมจะทาใหสามารถเลอกใชเครองมอไดอยางรวดเรว ใน Photoshop CS5 ม Workspace ใหเลอกใช 7 แบบ คอ

- EssentialsเปนWorkspaceพนฐานทเหมาะกบการทางานทกรปแบบเนองจากมพาเนลทครอบคลมงานทวไปใหใชงาน

- Design เปน Workspace ทเหมาะกบการออกแบบงานกราฟก โดยมพาเนล Swatches และCharacter เพมเขามาเพอใชในการออกแบบ

- Painting เปน Workspace สาหรบการทางานดานวาดภาพ และระบาย ซงสามารถใชรวมกบ Tablet ไดเปนอยางด

- Photography เปน Workspace สาหรบดานภาพถายโดยเฉพาะ แตจะเนนดานโทนความสวาง แสงเงา และสสนของภาพเปนหลก

- 3 D และ Motion เปน Workspace ทมอยเฉพาะในเวอรชน Extended ซงเนนการทางาน 3D และการสรางภาพเคลอนไหว (Animation)

- New in CS5 เปน Workspace ทแสดงเฉพาะเครองมอและคาสงใหม ๆ ในเวอรชน CS5 เหมาะแกการศกษาฟเจอรใหมของโปรแกรม 4. Option Bar (ออปชนบาร) เปนสวนทใชปรบแตงคาการทางานของเครองมอตางๆโดย

รายละเอยดในออปชนบารจะเปลยนไปตามเครองมอทเราเลอกจากทลบอกซในขณะนนเชนเมอเราเลอกเครองมอBrush (พกน) บนออปชนบารจะปรากฏออปชนทใชในการกาหนดขนาด และลกษณะ หวแปรง, โหมดในการระบายความโปรงใสของส และอตราการไหลของส เปนตน

5. Tool Panel (ทลพาเนล) หรอ กลองเครองมอ จะประกอบไปดวยเครองมอตาง ๆ ทใชในการวาด ตกแตง และแกไขภาพ เครองมอเหลานมจานวนมาก ดงนนจงมการรวมเครองมอททาหนาทคลาย ๆ กนไวในปมเดยวกน โดยจะมลกษณะรปสามเหลยมอยบรเวณมมดานลางดงภาพ เพอบอกใหรวาในปมนยงมเครองมออนอยดวย

6. Panel ( พาเนล ) เปนวนโดวยอยๆ ทใชเลอกรายละเอยด หรอคาสงควบคมการทางานตางๆ ของโปรแกรม ใน Photoshop มพาเนลอยเปนจานวนมาก เชน พาเนล Color ใชสาหรบเลอกส , พาเนลInf oใชแสดงคาสตรงตาแหนงทชเมาสรวมถงขนาด/ตาแหนงของพนททเลอกไวPhotoshopเปนโปรแกรมในชด Creative Suite 5หรอเรยกส นๆวาCS5ซงใชสาหรบสรางและตกแตงภาพกราฟกซงมประสทธภาพและมชอเสยงมากโปรแกรมหนงดวยความสามารถทหลากหลายทงการสรางภาพใหมและตกแตงภาพดวยเครองมอและเทคนคพเศษตางๆจงทาใหPhotoshopเปนโปรแกรมสาคญทจาเปนตองมตดตงใชงานในเครองคอมพวเตอรของผใชงานสวนหญในทนขอกลาวถง Photoshop ทไดผานการพฒนามาจนถงเวอรชนท 12 ซงมชอเรยกอยางเปนทางการวา Adobe Photoshop CS5 โดยในเวอรชนนจะแบงออกเปน 2เวอรชนยอยคอ Photoshop CS5 และ

14

Photoshop CS5Extended ซงทง 2 เวอรชนนมความสามารถแตกตางกนออกไปPhotoshop CS5 เปนเวอรชนแบบธรรมดาทเนนการทางานดานการตกแตงตดตอภาพถายเปนเวอรชนทนยมใชกนอยางแพ รหลายเพราะม ฟ งกชนการทางานพ นฐาน ทครบถวนPhotoshopCS5Extendedได เพ มความสามารถนอกเหนอจากการตกแตงและการตดตอคอการทางานดาน 3D (3 มต) ใหรปทรงมแสงเงาสมจรง สรางภาพเคลอนไหวดวย Timeline แต Photoshop CS5ไมวาจะเวอรชนธรรมดาหรอเวอรชนExtendedถกออกแบบใหมความสามารถเพมมากขนและออกแบบเครองมอใหเรยกใชไดสะดวกขนซงสามารถนามาใชในการออกแบบชนงานดานตางๆดงน 1. สอสงพมพไมวาจะเปนนตยสารวารสารหนงสอแผนพบและโบชวร 2. งานกราฟกโฆษณาสนคาทางโทรทศน 3. งานนาเสนอ (Presentation) และตกแตงภาพสาหรบภาพยนตรและมเดยทวไป 4. ออกแบบกราฟกสาหรบเวบไซต

15

Toolbox คอ ชดเครองมอทใชงานกบงานของเราจะถกจดอยในสวนทแยกออกมาตางหากถาหากไม

มเปดการใชงานท Menu>Window>Tool ใชงานรวมกบ Menu Tools Option Bar จะเปนสวนปรบแตงในรายละเอยดตางๆของเครองมอทเลอกใช Toolsบางอนมรปภาพสามเหลยมอนเลกๆอยดานลางขวา เมอเรากดเมาสคางหรอคลกขวาบนปมนน จะมเครองมอ ทถกจดใหอยในกลมเดยวกนออกมา เครองมอในTool Box

รปท 2.3 แสดง Tool Box

1. Marquee Tool เปนการเลอกแบบสเหลยมผนผา, วงกลม, แถวขนาด 1 พกเซลส หรอ

คอลมน 1 พกเซลส 2. Lasso Tool จะใชเพอสราง Selection แบบอสระ, แบบ Polygonal (ตามจดทคลก) และ

Magnetic (ดงเขาหาขอบรปภาพ) 3. Slice Tool ใชในการสราง Slice และ Slice Selection Tool ใชเลอก Slice ทคณสรางขนมา 4. Healing Brush Tool ใชในการระบายส เพอซอมแซมรปภาพใหสมบรณแบบ

1 2 3 4 5 6 7 8 9 10 11

12 13 14 15 16 17 18 19 20 21 22

23

24

16

5. Clone Stamp Tool ใชกอปปรปโดยอาศยรปภาพตนฉบบและ Pattern Stamp Tool ใชเพอวาดรปโดยใชบางสวนของรปภาพทมอยเปนตนฉบบ

6. Eraser Tool ใชลบรปภาพหรอลบบางสวนของพกเซลสและทาการเกบสวนตางๆ เปน State ตางๆ ใน History Palette

7. Blur Tool เปนอปกรณทใชสาหรบปรบคา ความคมชดของสภาพ ซงจะประกอบดวย Blur,

Sharpen เลอกโดยการคลกเมาคางใว 8. Pen ใชในการสรางเสนภาพสา หรบวาดภาพซงจะสรางเสนตรงกอนแลวดดให โคงตามตองการ 9. Path Selection Tool ใชเพอเลอก Shape หรอ Path เพอแสดง Anchor Paint, Direction Line

และ Direction Paint 10. 3D Rotate tool ใชหมนวตถตามแกน X ไดรอบดาน 360 องศา 11. Hand tool เปนเครองมอใชเลอนดสวนตาง ๆ ของภาพ 12. Move tool ใชในการยายวตถ 13. Quick Selection Tool เปนเครองมอทใชเลอกขอบเขตวตถ 14. Eyedropper Tool ใชในการดดสจากรปภาพเพอใชเปนตนแบบของสกบงานชนอนๆ 15. Burn Tool ใชลดความสวางทาใหรปภาพดมดลง 16. History Brush Tool ใชกลบคนรปภาพเดมจาก State หรอ Snapshot ของรปเดยวกน 17. Gradient Tools ใชเพอไลสระหวางสหลายๆ ส ในแบบตางๆ Straight-line, Radial, Angle,

Reflected และ Diamond 18. Burn Tool ใชลดความสวางทาใหรปภาพดมดลง 19. Type Mask Tool ใชสราง Selection เปนรปรางตวหนงสอ 20. Custom Shape Tool ใชเลอกรปภาพเลอกรปภาพทมรปรางเฉพาะจาก Custom Shape List 21. 3D Camera Tools จดการกลองงานดาน 3D ไมวาจะเปนการซม หมน เคลอน 22. Zoom Tool ใชในการขยายและยอสวนการแสดงภาพบนหนาจอ 23. Foreground หรอ Background Color จะปรากฏ Color Picker ขนมาเพอใหเราเลอกคาส

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

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

17

2. โปรแกรม SQL Server หรอ Microsoft SQL Server คอระบบจดการฐานขอมลเชงสมพนธ (relational database management system หรอ

RDBMS) ผลตโดยบรษท Microsoft เปนระบบฐานขอมลแบบ Client/Server และรนอยบน Window NT ซงใชภาษา T-SQL ในการดงเรยกขอมลดวยเหตทขอมลสวนใหญทวโลกเกบไวในเครองทใช Microsoft Windows เปน Operating System จงทา ใหเปนการงายตอ Microsoft SQL ทจะนาขอมลทอยในรป Windows Based มาเกบและประมวลผล และประกอบกบการทราคาถกและหางาย จงเปนปจจยหลกททา ให Microsoft SQL จงเปนระบบฐานขอมลทมกจะถกเลอกใช

3. โปรแกรม Dreamweaver CS5 อะโดบดรมวฟเวอร (Adobe Dreamweaver) หรอชอเดมคอ แมโครมเดย ดรมวฟเวอร

(Macromedia Dreamweaver) เปนโปรแกรมแกไข HTML พฒนาโดยบรษทแมโครมเดย (ปจจบนควบกจการรวมกบบรษท อะโดบซสเตมส) สาหรบการออกแบบเวบไซตในรปแบบ WYSIWYG กบการควบคมของสวนแกไขรหส HTML ในการพฒนาโปรแกรมทมการรวมท งสองแบบเขาดวยกนแบบนทาให ดรมวฟเวอรเปนโปรแกรมทแตกตางจากโปรแกรมอนๆ ในประเภทเดยวกน ในชวงปลายปทศวรรษ 2533 จนถงปพ.ศ. 2544 ดรมวฟเวอรมสดสวนตลาดโปรแกรมแกไข HTML อยมากกวา 70% ดรมวเวอรมท งในระบบปฏบตการแมคอนทอช และไมโครซอฟทวนโดวส ดรมวฟเวอรยงสามารถทางานบนระบบปฏบตการแบบยนกซ ผานโปรแกรมจาลองอยาง WINEได รนลาสดคอ ดรมวฟเวอร CS4การเรมกาหนดโครงสรางของเวบ กอนดาเนนการสรางเวบเพจ ขนแรกควรกาหนดใหขอมลตาง ๆ ทเกยวของอยใน Folder เดยวกน เพองายตอคนหาและจดเกบ ตวอยางเชนทาเวบเพจของหนวยงานกอนอนเราควรสราง Folder ชอของหนวยงานกอนอาจเปนภาษาองกฤษหรอภาษาไทยกได แลวใน Folder หนวยงานคอยสราง Folder ยอยอกท อาจประกอบดวยหลาย Folder ยอย เพอใชสาหรบแยกเกบไฟลตาง ๆ เปนหมวดหม เชน ไฟลรปภาพ ไฟล HTML และ ไฟล Multimedia ตาง ๆ

Dreamweaver เปนเครองมอในการสรางเวบเพจทมประสทธภาพสง ปจจบนDreamweaver ไดพฒนาเปน CS แลว เปนโปรแกรมสรางเวบเพจแบบเสมอนจรง ของคาย Adobe ซงชวยใหผทตองการสรางเวบเพจไมตองเขยนภาษา HTML หรอโคดโปรแกรม หรอทศพทเทคนคเรยกวา "WYSIWYG โปรแกรม Dreamweaver มฟงกชนททา ใหผใชสามารถจดวางขอความ รปภาพ ตาราง ฟอรม วดโอรวมถงองคประกอบอนๆ ภายในเวบเพจไดอยางสวยงามตามทผใชตองการ โดยไมตองใชภาษาสครปตทยงยากซบซอนเหมอนกอน Dreamweaver มทงในระบบปฏบตการ แมคอนทอช และไมโครซอฟทวนโดวส ยงสามารถทา งานบนระบบปฏบตการแบบยนกซ ผานโปรแกรมจา ลองอยาง WINE ไดเวอรชนลาสดของโปรแกรมตวนคอ Adobe Dreamweaver CS5.5

18

ความสามารถของ Dreamweaver CS5 1. สนบสนนการทา งานแบบ WYSIWYG (What You See Is What You Get) หมายความวา

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

ไดมาก 3. สนบสนนภาษาสครปตตาง ๆ เชน Java, ASP, PHP, CGI, VBScript 4. มเครองมอทชวยในการ Upload หนาเวบทสรางไปท Server เพอทาการเผยแพรงานท

สรางบน Internet 5. รองรบการใชมนตมเดยตาง ๆ เชน เสยง กราฟฟก และภาพเคลอนไหว ทสรางโดย

โปรแกรม Flash, Shockwave, Firework เปนตน 6. มความสามารถทา การตดตอกบฐานขอมล เพอเชอมตอกบเวบไซต

สวนประกอบ Adobe Dreamweaver CS5 1. เมนบาร (Menu bar) เปนสวนทใชในการสรางและทางานกบโปรแกรม ซงมการแบงเปน

กลมคาสงตางๆ เปนหมวดหมและเกบไวเปนเมน โดยในแตละเมนกจะมเมนยอยๆ ไวเรยกใชงานตามตองการ 2. แถบเครองมอ (Insert bar) เปนสวนของการรวบรวมเครองมอทใชในการสรางวตถหรอ

องคประกอบตางๆ ของหนาเวบเพจ ซงแบงเปนกลมๆ มทงหมด 8 กลม คอ - Common เปนกลมเครองมอทใชงานบอยๆ ในการสรางเวบเพจ เชน การแทรกตาราง การแทรกรปภาพ เปนตน

- Layout ใชสาหรบวางวตถทใชจดโครงสรางของเวบเพจ เชน ตาราง เฟรม และ AP Element

- Forms ใชสาหรบวางวตถทใชสรางแบบฟอรมเพอรบขอมลจากผใชงานเวบไซต เชน การสมครสมาชก เปนตน - Data ใชสาหรบวางคาสงทใชจดการกบฐานขอมลและนาฐานขอมลออกมาแสดงบนหนาเวบเพจ - Spray ใชสาหรบวางวตถทใชเทคโนโลยของ Spary ในรปแบบตางๆ - InContext Editing ใชสาหรบสรางพนทเทมเพลตเพออานวยความสะดวกตอผใชในการแกไขเนอหา - Text ใชสาหรบจดรปแบบของขอความภายในเวบเพจ เชน ตวหนา ตวเอยง หวขอ บลเลต และแทรกสญลกษณตางๆ ได - Favorites ใชสาหรบเพมเครองมอทเรยกใชงานบอยๆ โดยเพมจากกลมเครองมออนๆ ได

19

โดยคลกเมาสขวาบน Insert bar แลวเลอก Customize Favorites (ตวอยางดานลางเปนการดงเครองทใชงานบอยๆ คอ ตาราง รปภาพ และ Rollover Image)

หนาตางการทางาน (Document Window) เปนบรเวณทใชในการออกแบบและสรางเวบเพจตามตองการ ซงสามารถแทรกขอความ รปภาพ และวตถตางๆ ลงไปไดเลย

3. แถบสถานะ (Status bar) เปนสวนทแสดงขอมลเพมเตมเกยวกบงานทกาลงทาอย เชน การปรบขนาดการแสดงผลและเวลาทใชในการโหลดเวบเพจนนๆ 4. Properties Inspector ใชในการกาหนดคาคณสมบตของหนาเวบเพจและในสวนของวตถ

ตางๆ ซงจะมรายละเอยดแสดงขนมา เมอมการคลกเลอกวตถนนๆ 5. พาเนล (Panel) เปนหนาตางหรอชดคาสงพเศษทใชงานเฉพาะดาน เชน ฐานขอมล ไฟล

งานตางๆ สรางการเชอมโยง รวมถงเรองการอพโหลดไฟลงานขนเซรฟเวอร 4. Database (ฐานขอมล)

คอระบบทรวบรวมขอมลไวในทเดยวกน ซงประกอบไปดวยแฟมขอมล (File) ระเบยน (Record) และ เขตขอมล (Field) และถกจดการดวยระบบเดยวกน โปรแกรมคอมพวเตอรจะเขาไปดงขอมลทตองการได อยางรวดเรว ซงอาจเปรยบฐานขอมลเสมอนเปน electronic filing system

รปท 2.4 แสดงระบบฐานขอมล บต (bit) ยอมาจาก Binary Digit ขอมลในคอมพวเตอร 1 บต จะแสดงได 2 สถานะคอ 0

หรอ 1 การเกบขอมลตางๆไดจะตองนา บต หลายๆ บต มาเรยงตอกน เชนนา 8 บต มาเรยงเปน 1 ชด เรยกวา 1ไบตเชน

10100001 หมายถง ก

Database

File

Record

Field

Byte

Bit

A collection of related files

A collection of related records

A collection of related field

A collection of related byte

A collection of related bit

A binary digit 0 or 1

20

10100010 หมายถง ข เมอเรานา ไบต (byte) หลายๆ ไบต มาเรยงตอกน เรยกวา เขตขอมล (field) เชน Name ใช

เกบชอ Last Name ใชเกบ นามสกล เปนตนเมอนาเขตขอมล หลายๆ เขตขอมล มาเรยงตอกน เรยกวา ระเบยน (record) เชน ระเบยน ท 1 เกบชอนามสกล วนเดอนปเกด ของ นกเรยนคนท 1 เปนตนการเกบระเบยนหลายๆระเบยน รวมกน เรยกวา แฟมขอมล (File) เชน แฟมขอมล นกเรยน จะเกบชอนามสกล วนเดอนปเกด ของนกเรยน จานวน 500 คน เปนตนการจดเกบ แฟมขอมล หลายๆ แฟมขอมล ไวภายใตระบบเดยวกน เรยกวา ฐานขอมล หรอ Database เชน เกบแฟมขอมล นกเรยน อาจารย วชาทเปดสอน เปนตนการเขาถงขอมลในฐานขอมลจงจาเปนตองมระบบการจดการฐานขอมลมาชวยเรยกวา database management system (DBMS) ซงจะชวยใหผใชสามารถจดการกบขอมล ตามความตองการไดในหนวยงานใหญๆอาจมฐานขอมลมากกวา 1 ฐานขอมลเชน ฐานขอมลบคลากร ฐานขอมลลกคา ฐานขอมลสนคา เปนตน สาระสาคญ

ฐานขอมลเปนการจดเกบขอมลอยางเปนระบบ ทาใหผใชสามารถใชขอมลทเกยวของในระบบงานตาง ๆ รวมกนได โดยทจะไมเกดความซ าซอนของขอมล และยงสามารถหลกเลยงความขดแยงของขอมลดวย อกทงขอมลในระบบกจะถกตองเชอถอได และเปนมาตรฐานเดยวกน โดยจะมการกาหนดระบบความปลอดภยของขอมลขนนบไดวาปจจบนเปนยคของสารสนเทศ เปนทยอมรบกนวา สารสนเทศเปนขอมลทผานการกลนกรองอยางเหมาะสม สามารถนามาใชประโยชนอยางมากมาย ไมวาจะเปนการนามาใชงานดานธรกจ การบรหาร และกจการอน ๆ องคกรทมขอมลปรมาณมาก ๆ จะพบความยงยากลาบากในการจดเกบขอมล ตลอดจนการนาขอมลทตองการออกมาใชใหทนตอเหตการณ ดงนนคอมพวเตอรจงถกนามาใชเปนเครองมอชวยในการจดเกบขอมล การประมวลผลขอมล ซงทาใหระบบการจดเกบขอมลเปนไปไดสะดวก ทงนโปรแกรมแตละโปรแกรมจะตองสรางวธควบคมและจดการกบขอมลขนเอง ฐานขอมลจงเขามามบทบาทสาคญอยางมาก โดยเฉพาะระบบงานตาง ๆ ทใชคอมพวเตอร การออกแบบและพฒนาระบบฐานขอมล จงตองคานงถงการควบคมและการจดการความถกตองตลอดจนประสทธภาพในการเรยกใชขอมลดวย

ระบบจดการฐานขอมลซอฟตแวรสาหรบจดการฐานขอมลนน โดยทวไปเรยกวา ระบบจดการฐานขอมล หรอ ด บ เอมเอส (DBMS -Database Management System) สถาปตยกรรมซอฟตแวรของดบเอมเอสอาจมไดหลายแบบ เชน สาหรบฐานขอมลขนาดเลกทมผใชคนเดยว บอยครงทหนาหมดจะจดการดวยโปรแกรมเพยงโปรแกรมเดยว สวนฐานขอมลขนาดใหญทมผใชจานวนมากนน ปกตจะประกอบดวยโปรแกรมหลายโปรแกรมดวยกน และโดยทวไปสวนใหญจะใชสถาปตยกรรมแบบรบ-ใหบรการ (client-server)โปรแกรมสวนหนา (front-end) ของดบเอมเอส (ไดแก โปรแกรมรบบรการ) จะเกยวของเฉพาะการนาเขาขอมล,การตรวจสอบ, และการรายงานผล

21

เปนสาคญ ในขณะทโปรแกรมสวนหลง (back-end) ซงไดแก โปรแกรมใหบรการ จะเปนชดของโปรแกรมทดาเนนการเกยวกบการควบคม, การเกบขอมล, และการตอบสนองการรองขอจากโปรแกรมสวนหนา โดยปกตแลวการคนหา และการเรยงลาดบ จะดาเนนการโดยโปรแกรมใหบรการรปแบบของระบบฐานขอมล มหลากหลายรปแบบดวยกน นบตงแตการใชตารางอยางงาย ทเกบในแฟมขอมลแฟมเดยว ไปจนกระทง ฐานขอมลขนาดใหญมาก ทมระเบยนหลายลานระเบยน ซงเกบในหองทเตมไปดวยดสกไดรฟ หรออปกรณหนวยเกบขอมลอเลกทรอนกสรอบขาง (peripheral) อนๆ

การออกแบบฐานขอมลการออกแบบฐานขอมล (Designing Databases) มความสาคญตอการจดการระบบฐานขอมล (DBMS) ทงนเนองจากขอมลทอยภายในฐานขอมลจะตองศกษาถงความสมพนธของขอมล โครงสรางของขอมลการเขาถงขอมลและกระบวนการทโปรแกรมประยกตจะเรยกใชฐานขอมล ดงนน เราจงสามารถแบงวธการสรางฐานขอมลได 3 ประเภท

1. รปแบบขอมลแบบลาดบขน หรอโครงสรางแบบลาดบขน (Hierarchical data model) วธการสรางฐาน ขอมลแบบลาดบขนถกพฒนาโดยบรษท ไอบเอม จากด ในป 1980 ไดรบความนยมมาก ในการพฒนาฐานขอมลบนเครองคอมพวเตอรขนาดใหญและขนาดกลาง โดยทโครงสรางขอมลจะสรางรปแบบเหมอนตนไม โดยความสมพนธเปนแบบหนงตอหลาย (One- to -Many) 2. รปแบบขอมลแบบเครอขาย (Network data Model) ฐานขอมลแบบเครอขายมความคลายคลงกบฐาน ขอมลแบบลาดบชน ตางกนทโครงสรางแบบเครอขาย อาจจะมการตดตอหลายตอหนง (Many-to-one) หรอ หลายตอ หลาย (Many-to-many) กลาวคอลก (Child) อาจมพอแม (Parent) มากกวาหนง สาหรบตวอยางฐานขอมลแบบเครอขายใหลองพจารณาการจดการขอมลของหองสมด ซงรายการจะประกอบดวย ชอเรอง ผแตง สานกพมพ ทอย ประเภท

3. รปแบบความสมพนธขอมล (Relation data model) เปนลกษณะการออกแบบฐานขอมลโดยจดขอมลใหอยในรปของตารางทมระบบคลายแฟม โดยทขอมลแตละแถว (Row) ของตารางจะแทนเรคอรด (Record) สวน ขอมลนแนวดงจะแทนคอลมน (Column) ซงเปนขอบเขตของขอมล (Field) โดยทตารางแตละตารางทสรางขนจะเปนอสระ ดงนนผออกแบบฐานขอมลจะตองมการวางแผนถงตารางขอมลทจาเปนตองใช เชนระบบฐานขอมลบรษทแหงหนง ประกอบดวย ตารางประวตพนกงาน ตารางแผนกและตารางขอมลโครงการ แสดงประวตพนกงานตารางแผนก และตารางขอมลโครงการการออกแบบฐานขอมลเชงสมพนธการออกแบบฐานขอมลในองคกรขนาดเลกเพอตอบสนองความตองการของผใชงานอาจเปนเรองทไมยงยากนก

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

22

ขนตอนการทางานทซบซอน รวมท งมปรมาณขอมลและผใชงานจานวนมาก การออกแบบฐานขอมลจะเปนเรองทมความละเอยดซบซอน และตองใชเวลาในการดาเนนการนานพอควรทเดยว ทงนฐานขอมลทไดรบการออกแบบอยางเหมาะสมจะสามารถตอบสนองตอความตองการของผใชงานภายในหนวยงานตาง ๆ ขององคกรได ซงจะทาใหการดาเนนงานขององคกรมประสทธภาพดยงขน เปนผลตอบแทนทคมคาตอการลงทนเพอพฒนาระบบฐานขอมลภายในองคกรทงน การออกแบบฐานขอมลทนาซอฟตแวรระบบจดการฐานขอมลมาชวยในการดาเนนการ สามารถจาแนกหลกในการดาเนนการได 6 ขนตอน คอ

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

5. ทฤษฏ HTML คอ ภาษาทใชในการเขยนเวบเพจ ยอมาจากคา วา Hypertext Markup Language โดย

Hypertext หมายถง ขอความทเชอมตอกนผานลงค (Hyperlink) Markup หมายถง วธในการเขยนขอความ language หมายถงภาษา ดงนน HTML จงหมายถง ภาษาทใชในการเขยนขอความ ลงบนเอกสารทตางกเชอมถงกนใน Cyberspace ผาน Hyperlink นนเองHTML เรมขนเมอ ป 1990 เพอตอบสนองความตองการในการสอสารแลกเปลยนขอมลกนของนกวทยาศาสตรระหวางสถาบนและมหาวทยาลยตางๆทวโลก โดย Tim Berners-Lee นกพฒนาของ CERN ไดพฒนาภาษาทมรากฐานมาจาก SGML ซงเปนภาษาทซบซอนและยากตอการเรยนร จนมาเปนภาษาทใชไดงายและสะดวกในการแลกเปลยนเอกสารทางวทยาศาสตรผานการเชอมโยงกนดวยลงคในหนาเอกสาร เมอ World Wide Web เปนทแพรหลาย HTML จงถกนามาใชจนเกดการแพรหลายออกไปยงทวโลก จากความงายตอการใชงานHTML ในปจจบนพฒนามาจนถง HTML 4.01 และ HTML 5 นอกจากนยงมการพฒนาไปเปน XHTML ซงคอ Extended HTML มความสามารถและมาตรฐานทมากกวาเดมโดยอยภายใตการควบคมของ W3C (World Wide Web Consortium)

6. ทฤษฏ PHP เกดในป 1994 โดย RasmusLerdorf โปรแกรมเมอรอเมรกนไดคดคนสรางเครองมอทใชในการพฒนาเวบสวนตว โดยใชขอดของภาษา C และ Perl เรยกวา Personal Home Page และไดสรางสวนตดตอกบฐานขอมลทชอวา Form Interpreter ( FI ) รวมทงสองสวน เรยกวา PHP/FI ซงเปนจดเรมตนของ PHP มผทเขามาเยยมชมเวบไซตและชอบจงตดตอขอเอาโคดไปใช และนา ไปพฒนาตอในลกษณะของ Open Source ภายหลงมความนยมขนเปนอยางมากภายใน 3 ป มเวบไซต

23

ทใช PHP/FIในตดตอฐานขอมลและแสดงผลแบบ ไดนามกและอนๆ มากกวา 50,000ไซต PHP2 (ในตอนนนใชชอวา PHP/FI) ในชวงระหวาง 1995-1997 RasmusLerdorf ไดมผทมาชวยพฒนาอก 2 คนคอ ZeevSuraski และ AndiGutmans ชาวอสราเอล ซงปรบปรงโคดของ Lerdorf ใหมโดยใช C++ ใหมความสามารถจดการเกยวกบแบบฟอรมขอมลทถกสรางมาจากภาษาHTML และสนบสนนการตดตอกบโปรแกรมจดการฐานขอมล MySQL จงทาให PHP เรมถกใชมากขนอยางรวดเรว และเรมมผสนบสนนการใชงาน PHP มากขน โดยในปลายป 1996 PHP ถกนา ไปใชประมาณ15,000 เวบทวโลก และเพมจา นวนขนเรอยๆ ตอมามผมาชวยพฒนาอก 3 คน คอ StigBakken รบผดชอบความสามารถในการตดตอ Oracle, Shane Caraveo รบผดชอบดแล PHP บน Window9x/NT, และ Jim Winsteadรบผดชอบการตรวจความบกพรองตางๆ และไดเปลยนชอเปน ProfessionalHome Page ในเวอรชนท 2PHP3 ออกมาในชวงระหวางเดอน มถนายน 1997 ถง 1999 มคณสมบตเดนคอสนบสนนระบบปฏบตการทง Window 95/98/ME/NT, Linux และเวบเซรฟเวอร อยาง IIS, PWS, Apache,OmniHTTPdสนบสนน ระบบฐานขอมลไดหลายรปแบบเชน SQL Server, MySQL, mSQL, Oracle,Informix, ODBCPHP4 ต งแต 1999 - 2007 ซงไดเพม Functions การทา งานในดานตางๆใหมากและงายขนโดย บรษท Zend ซงม Zeev และ AndiGutmansไดรวมกอตงขน (http://www.zend.com ) ในเวอรชนนจะเปน compile script ซงในเวอรชนหนานจะเปน embed script interpreter ในปจจบนมคนไดใช PHPสงกวา 5,100,000ไซตในทวโลก และผพฒนาไดตงชอของ PHPใหมวา PHP: Hypertext Preprocessorซงหมายถงมประสทธภาพระดบโปรเฟสเซอรสา หรบไฮเปอรเทกซPHP5 ตงแต 2007-ปจจบน ม ไดเพม Functions การทา งานในดานตาง ๆ เชน Object Oriented Model

1. การกาหนดสโคป public/private/protected 2. Exception handling 3. XML และ Web Service 4. MySQLi และ SQLite 5. Zend Engine 2.0

ลกษณะเดนของ PHP 1. สามารถใชไดฟร 2. PHP เปนโปรแกรมวงขาง Sever ดงนนขดความสามารถไมจา กด 3. Conlatfun นนคอ PHP วงบนเครอง UNIX ,Linux ,Windows ไดหมด 4. เรยนรงาย เนองจาก PHP ฝงเขาไปใน HTML และใชโครงสรางและไวยากรณภาษา

งายๆ 5. ใชรวมกบ XML ไดทนท 6. ใชกบระบบแฟมขอมลได

24

7. ใชกบขอมลตวอกษรไดอยางมประสทธภาพ 8. ใชกบโครงสรางขอมลใชไดแบบ Scalar ,Array ,Associative array 9. ใชกบการประมวลผลภาพได

โปรแกรมฐานขอมลทนยมใช

โปรแกรมฐานขอมล เปนโปรแกรมหรอซอฟแวรทชวยจดการขอมลหรอรายการตาง ๆ ทอยในฐานขอมล ไมวาจะเปนการจดเกบ การเรยกใช การปรบปรงขอมล โปรแกรมฐานขอมล จะชวยใหผใชสามารถคนหาขอมลไดอยางรวดเรว ซงโปรแกรมฐานขอมมลทนยมใชมอยดวยกนหลายตว เชน Access, FoxPro, Clipper, dBase, FoxBase, Oracle, SQL เปนตน โดยแตละโปรแกรมจะมความสามารถตางกน บางโปรแกรมใชงายแตจะจากดขอบเขตการใชงาน บงโปรแกรมใชงานยากกวา แตจะมความสามารถในการทางานมากกวาโปรแกรม Access นบเปนโปรแกรมทนยมใชกนมากในขณะน โดยเฉพาะในระบบฐานขอมลขนาดใหญสามารถสรางแบบฟอรมทตองการจะเรยกดขอมลในฐานขอมล หลงจากบนทกขอมลในฐานขอมลเรยบรอยแลว จะสามารถคนหาหรอเรยกดขอมลจากเขตขอมลใดกได นอกจากน Access ยงมระบบรกษาความปลอดภยของขอมล โดยการกาหนดรหสผานเพอปองกนความปลอดภยของขอมลในระบบไดดวย

โปรแกรม FoxPro เปนโปรแกรมฐานขอมลทมผใชงานมากทสด เนองจากใชงายทงวธการเรยกจากเมนของ FoxPro และประยกตโปรแกรมขนใชงาน โปรแกรมทเขยนดวย FoxPro จะสามารถใชกลบ dBase คาสงและฟงกช นตาง ๆ ใน dBase จะสามารถใชงานบน FoxPro ได นอกจากนใน FoxPro ยงมเครองมอชวยในการเขยนโปรแกรม เชน การสรางรายงาน

โปรแกรม dBase เปนโปรแกรมฐานขอมลชนดหนง การใชงานจะคลายกบโปรแกรม FoxPro ขอมลรายงานทอยในไฟลบน dBase จะสามารถสงไปประมวลผลในโปรแกรม Word Processor ได และแมแต Excel กสามารถอานไฟล .DBF ทสรางขนโดยโปรแกรม dBase ไดดวย

โปรแกรม SQL เปนโปรแกรมฐานขอมลทมโครงสรางของภาษาทเขาใจงาย ไมซบซอน มประสทธภาพการทางานสง สามารถทางานทซบซอนไดโดยใชคาสงเพยงไมกคาสง โปรแกรม SQL จงเหมาะทจะใชกบระบบฐานขอมลเชงสมพนธ และเปนภาษาหนงทมผนยมใชกนมาก โดยทว ไปโปรแกรมฐานขอมลของบรษทตาง ๆ ทมใชอยในปจจบน เชน Oracle, DB2 กมกจะมคาสง SQL ทตางจากมาตรฐานไปบางเพอนใหเปนจดเดนของแตละโปรแกรมไป

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

25

1. สามารถลดความซาซอนของขอมลได การเกบขอมลชนดเดยวกนไวหลาย ๆ ททาใหเกดความซ าซอน (Redundancy) ดงนนการนาขอมลมารวมเกบไวในฐานขอมล จะชาวลดปญหาการเกดความซ าซอนของขอมลได โดยระบบจดการฐานขอมล (Database Management System : DBMS) จะชวยควบคมความซ าซอนไดเนองจากระบบจดการฐานขอมลจะทราบไดตลอดเวลาวามขอมลซาซอนกนอยทใดบาง

2. หลกเลยงความขดแยงของขอมลไดหากมการเกบขอมลชนดเดยวกนไวหลาย ๆ ทและมการปรบปรงขอมลเดยวกนน แตปรบปรงไมครบทกททมขอมลเกบอยกจะทาใหเกดปญหาขอมลชนดเดยวกนอาจมคาไมเหมอนกนในแตละททเกบขอมลอย จงกอใหเกดความขดแยงของขอมลขน (Inconsistency)

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

4. สามารถรกษาความถกตองเชอถอไดของขอมลบางครงพบวาการจดเกบขอมลในฐานขอมลอาจมขอผดพลาดเกดขน เชน จากการทผปอนขอมลปอนขอมลผดพลาดคอปอนจากตวเลขหนงไปเปนอกตวเลขหนงโดยเฉพาะกรณมผใชหลายคนตองใชขอมลจากฐานขอมลรวมกน หากผใชคนใดคนหนงแกไขขอมลผดพลาดกทาใหผอนไดรบผลกระทบตามไปดวย ในระบบจดการฐานขอมล (DBMS) จะสามารถใสกฎเกณฑเพอควบคมความผดพลาดทเกดขน

5. สามารถกาหนดความเปนมาตรฐานเดยวกนของขอมลไดการเกบขอมลรวมกนไวในฐานขอมลจะทาใหสามารถกาหนดมาตรฐานของขอมลไดรวมทงมาตรฐานตาง ๆ ในการจดเกบขอมลใหเปนไปในลกษณะเดยวกนได เชนการกาหนดรปแบบการเขยนวนทในลกษณะวน/เดอน/ปหรอ ป/เดอน/วน ทงนจะมผทคอยบรหารฐานขอมลทเราเรยกวา ผบรหารฐานขอมล (Database Administrator: DBA) เปนผกาหนดมาตรฐานตางๆ

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

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

7. ทฤษฎส สเปนสงทมความสาคญตอวถชวต นบแตสมยดกดาบรรพจนถงปจจบน ไดนาสมาใชให

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

26

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

รปท 2.7 ภาพแสดงวงจรของสทเกดจากการนาแมสมาผสมกน

การเกดสดงภาพ เกดจากการนาเอาแมสมาผสมกน ในอตราสวนตางๆกนซงสรปไดดงน สขนท1 (Primary Color) คอสพนฐานมแมส 3 ส

1. สพนฐานแมส

รปท 2.8 สพนฐานแมส

27

1. แดง 2. สเหลอง 3. สน าเงน สข น ท 2 (Binary Color) คอส ท เกดจากการนาเอาสข น ท 1 หรอแมสมาผสมกนใน

อตราสวนเทากนจะทาใหเกดสใหม 3 สไดแก 1. สเขยว เกดจากการนาเอา สเหลอง กบ สน าเงน มาผสมกนในอตราสวนเทา ๆ กน 2. สสม เกดจากการนาเอา สเหลอง กบ สแดง มาผสมกนในอตราสวนทเทา ๆ กน 3. สมวง เกดจากการนาเอา สน าเงน กบ สแดง มาผสมกนในอตราสวนทเทา ๆ กน

สขนท 3 (Intermediate Color) คอ สทเกดจากการผสมกนระหวางสของแมสกบสขนท 2 จะเกดสขนอก 6 สไดแก

รปท 2.9 สเหลองแกมเขยว

- สเหลองแกมเขยว เกดจาก การผสมกนระหวางสเหลองกบสเขยวอยางละเทาๆ

รปท 2.10 สน าเงนแกมมวง

- สน าเงนแกมมวง เกดจากการผสมกนระหวางสน าเงนกบสมวงอยางละเทาๆกน

รปท 2.11 สแดงแกมมวง

- สแดงแกมมวง เกดจากการผสมกนระหวางสแดงกบสมวงอยางละเทาๆกน

28

รปท 2.12 สแดงแกมสม

- สแดงแกมสม เกดจากการผสมกนระหวางสแดงกบสสมอยางละเทาๆกน

รปท 2.13 สเหลองแกมสม

- สเหลองแกมสม เกดจากการผสมกนระหวางสเหลองกบสสมอยางละเทาๆกน

รปท 2.14 สน าเงนแกมเขยว

- สน าเงนแกมเขยวเกดจากการผสมกนระหวางสน าเงนกบสเขยวอยางละเทาๆกน คณลกษณะของสม 3 ประการ คอ

- สแทหรอความเปนส(Hue) หมายถงสทอยในวงจรสธรรมชาตทง 12 ส สทเราเหนอยทกวนนแบงเปน 2 วรรณะ โดยแบงวงจรสออกเปน 2 สวน จากสเหลองวนไปถง สมวง คอ - สรอน (Warm Color) ใหความรสกรนแรงรอนตนเตนประกอบดวย สเหลองสมวง สเหลองสม สสม สแดงสม สแดง สมวงสม - สเยน (Cool Color) ใหความรสกเยนสงบสบายตาประกอบดวย สเหลอง สเขยวเหลอง สเขยว สน าเงนเขยว สน าเงน สมวงน าเงน สมวงเราจะเหนวา สเหลอง และสมวง เปนสทอยไดทง 2 วรรณะ คอเปนสกลาง เปนไดทงสรอน และสเยน

29

ความเขมของส (Intensity) เกดจาก สแท คอสทเกดจากการผสมกนในวงจรส เปนสหลกทผสมขนตามกฎเกณฑและ

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

นาหนกของส (Value)

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

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

30

รป ส ความหมาย

สแดง ใหความรสกรอนรนแรง กระตน ตนเตน เราใจ ความอดมสมบรณความมงคง ความรก

สสม ใหความรสก รอน มชวตชวา วยรน ความคกคะนอง การปลดปลอย ความเปรยว การระวง

สเหลอง ใหความรสกแจมใส ความสดใส ความราเรง ความมชวตใหม ความสข

สเขยว ใหความรสกสงบ เงยบ รมเยน การพกผอน การผอนคลาย ธรรมชาต ความสขม เยอกเยน

สน าเงน ใหความรสกสงบเงยบ สขม สภาพ ละเอยด สงางาม มศกดศร เปนระเบยบถอมตน

สมวง ใหความรสก มเสนห นาตดตาม มอานาจความรก ความเศราความสงบ ความผดหวง ความสงศกด

สฟา ใหความรสก ปลอดโปรงโลง กวาง เบา โปรงใส สะอาด ปลอดภย ความสวาง

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

สชมพ ใหความรสกอบอน ออนโยน นมนวล ออนหวาน ความรก ความนารก ความสดใส

สเทา ใหความรสก เศรา อาลย ทอแท ความลกลบ ความหดห ความชรา สขมความสงบ ความเงยบ สภาพ ถอมตน

สทอง ใหความรสก ความหรหรา โออา มราคา สงคา สงสาคญ ความมงคงความเจรญรงเรอง

ตารางท 2.15 ความรสกของส

31

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

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

การใชสกลมกลนกน การใชสใหกลมกลนกนเปนการใชสหรอน าหนกของสใหใกลเคยงกนหรอคลายคลงกนเชน การใชสแบบเอกรงคเปนการใชสสเดยวทมน าหนกออนแกหลายลาดบการใชสขางเคยงเปนการใชสทเคยงกน 2 – 3 ส ในวงส เชน สแดง สสมแดง และสมวงแดง การใชสใกลเคยงเปนการใชสทอยเรยงกนในวงสไมเกน 5 ส ตลอดจนการใชสวรรณะรอนและวรรณะเยน (warm tone colors and cool tone colors) ดงไดกลาวมาแลว

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

- สเหลอง ตรงขามกบ สมวง - สสม ตรงขามกบ สน าเงน - สแดง ตรงขามกบ สเขยว - สเหลองสม ตรงขามกบ สมวงนาเงน - สสมแดง ตรงขามกบ นาเงนเขยว - สมวงแดง ตรงขามกบ สเหลองเขยว

การใชสตดกน ควรคานงถงความเปนเอกภาพดวย วธการใชมหลายวธ เชน ใชสใหมปรมาณตางกน เชน ใชสแดง 20 % สเขยว 80% หรอ ใชเนอสผสมในกนและกนหรอใชสหนงสใดผสมกบสคทตดกนดวยปรมาณเลกนอยรวมทงการเอาสทตดกนมาทาใหเปนลวดลายเลก ๆ สลบกน ในผลงานชนหนง อาจจะใชสใหกลมกลนกนหรอตดกนเพยงอยางใดอยางหนงหรออาจจะใชพรอมกนทง 2 อยาง ทงนแลวแตความตองการและความคดสรางสรรคของเราไมมหลกการหรอรปแบบทตายตวในงานออกแบบหรอการจดภาพหากเรารจกใชสใหมสภาพโดยรวมเปนวรรณะรอน หรอวรรณะเยนเราจะสามารถควบคมและสรางสรรคภาพใหเกดความประสานกลมกลนงดงามไดงายขนเพราะสมอทธพลตอ มวล ปรมาตร และชองวางสมคณสมบตททาใหเกดความกลมกลน หรอขดแยงได สสามารถขบเนนใหใหเกดจดเดน และการรวมกนใหเกดเปนหนวยเดยวกนไดเราในฐานะผใชสตองนาหลกการตางๆของสไปประยกตใชใหสอดคลองกบเปาหมายในงานของเราเพราะสมผลตอการออกแบบคอ

32

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

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

- สบอกสญลกษณของวตถซงเกดจากประสบการณหรอภมหลง เชนสแดงสญลกษณของไฟหรออนตรายสเขยวสญลกษณแทนพชหรอความปลอดภยเปนตน

- สชวยใหเกดการรบรการออกแบบตองการใหผพบเหนเกดการจดจาใจรปแบบแลผลงาน หรอเกดความประทบใจ การใชสจะตองสะดดตา และมเอกภาพ โครงการทเกยวของ นายศกดรว แสงกลา และ นายจระวฒน นาคชแกว (2559) โครงการขายสนคาออนไลนประเภทชดกฬาประจาฤดกาล, โครงการนมการจดทาระบบลกคา มการบนทกขอมลของการซอสนคาและขอมลตางๆ ของลกคา สามารถคานวณเงนไดโดยอตโนมต มรปภาพสนคาประกอบและยงจะพฒนาใหการใชงานงายยงขนเพอเพมความสะดวกสบายใหแกผใชงาน

นายชยธช บารงด และ นางสาวศรสวรรค สวางดาว (2558) โครงการ ระบบการขายสนคาอปกรณกฬาทางน า ในการพฒนาโครงการนไดนาสาระความรทนาสนใจเกยวกบสงของทใชในการเลนกฬาทางน า เพอตอบสนองความตองการของผทชนชอบการเลนกฬาทางน าและอปกรณกฬาทางน าและในการพฒนาโปรแกรม PHP My admin appserv และ SQL Sever มาทาการพฒนาโครงการนขน

นายชนาธป พนทะแสน และนายมนสว มรกรณ (2569) โครงการขายสนคาออนไลนประเภทระบบแพคเกจ 3G/4G ในประเทศไทย การจดทาโครงการนเพอขยายวงกวางออกไปมากขน และมบทบาทของทกสาขาอาชพไดมการนอนเทอรเนตมาใชประโยชน

2.5 การนาคอมพวเตอรเขามาใชในระบบ

1. โปรแกรม Adobe Dreamweaver CS5 ในการทาเวบไซต 2. โปรแกรม Adobe Photoshop CS5.1 ในการตกแตงภาพ 3. โปรแกรม Appserv ในการจารองเครอง Server 4. โปรแกรม PHP My Admin ในการทาฐานขอมล 5. โปรแกรม Microsoft Visio 2007 ในการทา Flowchart

บทท 3

การออกแบบระบบงานดวยคอมพวเตอร 3.1 การออกแบบระบบงาน (Flowchar t)

รปท 3.1 การออกแบบระบบงาน (Flowchart)

34

1. Flowchar t การสมครสมาชก

รปท 3.2 Flowchart การสมครสมาชก

Y

สมครสมาชก

ขอมลซากบในระบบ

เรมตน

กรอกขอมล

บนทกขอมล

แสดงขอมลการสมคร

N

จบการทางาน

สมครสมาชก

35

2. Flowchar t การเขาสระบบ

รปท 3.3 Flowchart การเขาสระบบ

N

เขาสระบบ

ตรวจสอบ ขอมลสมาชก

เรมตน

กรอกขอมล

แสดงขอมลการเขาสระบบ

Y

จบการทางาน

36

3.2 การออกแบบแผนภาพบรบท (Context Diagram)

รปท 3.4 การออกแบบแผนภาพบรบท (Context Diagram)

-ขอมลการสงซอ

ลกคา

ผดแลระบบ

-ขอมลการชาระเงน

-รายละเอยดสนคา

-ขอมลสมาชก

-รายละเอยดของสมาชก -รายละเอยดของสนคา -รายละเอยดการชาระเงน -รายละเอยดใบเสรจรบเงน -ใบเสรจรบเงน

-วธการชาระเงน -ขอมลรายการสนคา -ขอมลสมาชก

-รายงานสมาชก

-รายงานรายละเอยดสนคา

-รายงานการสงซอ -รายงานการชาระเงน

0 ระบบขายสนคาออนไลนอปกรณกฬา

ประเภทแบตมนตน E - Commerce For Badminton Equipment

37

1. แผนภาพการไหลของขอมล (Data Flow Diagram) 1.1 Data Flow Diagram Level 0

รปท 3.5 Data Flow Diagram Level 0 ระบบขายอปกรณกฬาประเภทแบตมนตน

รายงานการสมคร 1

สมาชก

ลกคา


D1

D2

แฟมลกคา

ขอมลลกคา รายงานการ เปนสมาชก

รายงานการสมคร

ขอมลลกคา

ยนยนการเขาสระบบ ชอผใช/รหสผาน

สงซอสนคา แฟมขอมลสนคา

ชอผดแลระบบ

2

เขาสระบบ

แฟมลกคา

จดเกบขอมล

ตรวจสอบ ชอผใช/รหสผาน ยนยนการตรวจสอบ

รายงานการสงซอ

รายละเอยดสนคา


3

สงซอสนคา

4

รายงาน

D3

D1

คยรหสสนคา

ชาระเงน ใบเสรจรบเงน รายงานการสงซอ

คนหารหสสนคา รายละเอยดสนคา รายงานการชาระเงน

ขอมลการสงซอ แฟมขอมลการสงซอ

คนหารายการสงซอ

รายการสงซอสนคา รายงานการสงซอสนคา คนหารายการสงซอ

38

1.2 Data Flow Diagram Level 1 Process 1

รปท 3.6 Data Flow Diagram Level 1 Process 1 ระบบ สมาชก

1.1

คยขอมลสมครสมาชก

1.2

บนทกขอมลการสมคร

1.3

แสดงขอมลสมาชก

ลกคา


D1 แฟมลกคา




39


รปท 3.7 Data Flow Diagram Level 1 Process 2 เขาสระบบ

2.1

คยขอมลเขาสระบบ

2.2

ตรวจสอบการเขาระบบ

2.3

แสดงผลการเขาสระบบ

ลกคา


D1 แฟมลกคา



แสดงผลการเขาสระบบ แสดงผลการเขาสระบบ

ขอมลผดแลระบบ

40


รปท 3.8 Data Flow Diagram Level 1 Process 3ระบบสงซอสนคา

3.5

บนทกสนคา ขอมลการสงซอ

3.1

คยรหสสนคา

3.3

แสดงรายการสนคา

3.4

สงซอสนคา

ลกคา

ขอมลสนคา

D2 แฟมขอมลสนคา

D3 แฟมขอมลการสงซอ

ขอมลการสงซอ

3.2

คนหารหสสนคา

3.6

ชาระเงน

3.7

ใบเสรจ




ขอมลการชาระเงน

รายการสนคา



ขอมลใบเสรจ

41


รปท 3.9 Data Flow Diagram Level 1Process 4 แสดงผลรายงาน

4.1

เลอกรายการ

4.3

ยนยนการคนหา

4.4

แสดงรายการ


D2 แฟมขอมลการสงซอ

4.2

คนหาขอมล





ขอมล การสงซอ


42

3.3 การออกแบบแผนภาพความสมพนธของขอมล (Entity Relationship Diagram)

รปท 3.10 E-R Diagramระบบขายสนคาออนไลนอปกรณกฬาประเภทแบตมนตน

ม

เบอรโทร ชอสนคา

ม

รหสผสงซอ

M

N

สนคา สมาชก การสงซอ

ลาดบสนคา

เพศ ชอผเขาใช

รหสลกคา ชอ-นามสกล

ทอย

อเมล

รหสสมาชก

M

รหสสนคา

ชอสนคา

M

M

ชนด

1

ราคาสนคา

รหสสนคา

รปสนคา ราคาสนคา

ชอสนคา รหสประเภทสนคา

ใบเสรจ

ชอผสงซอ

อเมลผสงซอ

เบอรผสงซอ

ทอยผสงซอ

ยอดรวมการสงซอ วนทสงซอ

43

3.4 พจนานกรมขอมล (Data Dictionary) ออกแบบฐานขอมล ระบบขายสนคาออนไลนอปกรณกฬาประเภทแบตมนตนดงน 1. ตารางขอมลสมาชก (tb_member)

ตารางท 3.1 ตารางขอมลสมาชก

2. ตารางขอมลใบเสรจ (tb_order) Field Name ชอฟลด

Type ชนดของขอมล

Field Side ขนาดฟลด

Descr iption ใชเกบขอมล

หมายเหต

Id_oreder Int 11 เลขทใบเสรจ PK Name_order varchar 60 ชอผสงซอ Email_order varchar 60 อเมลผสงซอ Tel_order varchar 20 เบอรผสงซอ Address_order text ทอยผสงซอ Total_order int 11 ยอดรวมการ

สงซอ

Date_order date วนทสงซอ ตารางท 3.2 ตารางขอมลการสงซอ

Field Name ชอฟลด





id int 11 รหสลกคา PK username varchar 20 ชอผเขาใช password varchar 30 รหสผเขาใช name varchar 60 ชอลกคา sex varchar 5 เพศ email varchar 30 อเมล telephone varchar 10 โทรศพท address varchar 100 ทอย

44

3. ตารางขอมลรายละเอยดสงซอ (tb_order_detail) Field Name ชอฟลด





key_id_order int 11 รหสใบสงสนคา PK ref_product int 11 ชอสนคา number int 11 ลาดบสนคา price int 11 ราคาสนคา

ตารางท 3.3 ตารางขอมลรายละเอยดสงซอ 4. ตารางขอมลสนคา (tb_product)

Field Name ชอฟลด





id_prd int 11 รหสใบสงสนคาสนคา

PK

name_prd varchar 60 ชอสนคา price_prd int 11 ราคาสนคา proto_prd varchar 50 รปสนคา

ตารางท 3.4 ตารางขอมลสนคา

5. ตารางขอมลประเภทสนคา (tb_type) Field Name ชอฟลด





id_type int 5 รหสประเภทสนคา

PK

nametape varchar 60 ชอสนคา ตารางท 3.5 ตารางขอมลประเภทสนคา

45

หนาห

ลก

หนาแรก

Login

หนาห

ลก

3.5 การออกแบบ Sitemap

สนคา

สมครสม

าชก

วธการส

งซอ

วธการช

าระเง

น การตดต

อ ผจ

ดทา

รองเท

า

เสอผ

า -กางเก

ง

รปท 3.1

1 การออก

แบบ

Site M

ap

สาหร

บผชาย

อปกรณแ

บตมน

ตน

สาหร

บผหญ

ง

อปกรณแ

บตมน

ตน เส

รม

46

3.6 การออกแบบ Story Board

3.6.1 หนาแรก index.php

3.6.2 หนาหลก home.php

47

3.6.3 หนาสมครสมาชก sign up.php

3.6.4หนาผจดทา manager .php

48

3.6.5 ตดตอเรา tidtor .php

3.6.6 หนาวธการสงซอ buy.php

49

3.6.7หนาสนคา shop.php

3.6.8หนาวธการชาระเงน buy01.php

50

3.7 การออกแบบสงนาเขา(Input Design) 1. ขอมลสมาชก 2. ขอมลสนคา 3. การตรวจสอบสนคา 4. การเลอกซอสนคา 5. การยนยนการสงซอ

3.8 การออกแบบสงนาออก (Output Design) 1. หนาจอคอมพวเตอร คอ รปแบบของเวบไซตทสมบรณ 2. เครองฉายโปรเจคเตอร คอ การนาเสนอการสอบวชาโครงการ 3. เครอง Printer คอ ในการจดทาเอกสารโครงการ 4. ผลการตรวจสอบสนคา 5. ใบเสรจรายการสนคา

บทท 4 การพฒนาระบบเวบไซตขายสนคาออนไลนอปกรณกฬ า ประเภทแบตมนตน

4.1 เครองมอและอปกรณทใช 1. หนวยความจา (RAM) DDR3/1600 KINGSTON HYPERX FURY BLUE8GB. 2. การดจอ GeForce® GTX 650 3. หนวยประมวลผล (CPU) Intel® Core™ i5-6600 (3.90 GHz) 4. ความจของพนท (HARDDISK)WD SATA-3 BLUE 500 GB. 4.2 โปรแกรมทงหมดทใชในการพฒนา 1.โปรแกรม Adobe Photoshop CS5 ใชในการทา Logo และ Banner ของเวบไซต 2.โปรแกรม Adobe Dreamweaver CS5 ใชในการสรางเวบไซต 4.โปรแกรม SQL Server ใชสาหรบเชอมตอฐานขอมล 5.โปรแกรม xampp 3.3.2 6. ภาษา PHP ใชในการพฒนาระบบการสงซอสนคา

52

4.3 การตดตงโปรแกรมและระบบ โปรแกรม AppserverVersiocn 2.5.10

รปท 4.1 double click ทตวโปรแกรม Appserv-win32-2.5.10

รปท 4.2 แสดงหนาตางแจงเตอน ในการตดตงโปรแกรม ใหกดปม RUN เพอดาเนนการตดตง

53

รปท 4.3 รอสกครจะปรากฏหนาจอ Welcome ใหกดปม Next เพอไปยงหนาตอไป

รปท 4.4 กดปม I Agree เพอยอมรบขอตกลงในการใชซอฟตแวร

54

รปท 4.5 กาหนดโฟลเดอรสาหรบตดตงโปรแกรม AppServ จากนนกดปม Nex t

รปท 4.6 เลอกองคประกอบ (Components) สาหรบการตดตง แลวกดปม Next

55

รปท 4.7 กรอกชอ Server Information และ E-mail จากนน กดปม Next เพอไปหนาตอไป

รปท 4.8 ขนตอนตอไปคอการกาหนดคาสาหรบ MySQL Server ซงตองระบ รหสผาน (Password) สาหรบ root ,ชดภาษา (Character Sets and Collations) ทใช หลงจากกาหนด

คาดงกลาว แลว ใหกดปม Install

56

รปท 4.9 หลงกาหนดคาสาหรบ mySQL Server แลว ตวตดตงจะดาเนนการตดตง องคประกอบตางๆ ลงในระบบ

รปท 4.10 เมอการตดตงเสรจสน ใหกดปม Finish

57

4.4 วธการตดตงระบบฐานขอมลลงในเครองเซฟเวอร

รปท 4.11 เปดโปรแกรมเวบบราวเซอรและพมพ 127.0.0.1/phpmyadmin หรอ คลกทphpMyAdmin Database Manager Version 2.10.3 เพอทาการเขาสระบบฐานขอมล

ภายในเครอง

รปท 4.12 จะปรากฏหนาตางใหใส “ ชอผใช” และ “รหสผาน” ททาการตงไวตงแตตอนลงโปรแกรมโดยชอผใชจะเปน“root”สวนรหสผานนนเปนรหสทตงขนรปภาท4.9

58

รปท 4.13 เมอเขาสระบบเรยบรอยแลว ใหพมพ “bmt” ลงในชองการสรางฐานขอมล

ใหม จากนน คลก “ สราง” เพอทาการสรางโฟลเดอรฐานขอมลขนมา

รปท 4.14 เมอทาการกด สราง และปรากฏหนาจอดงภาพแลว แสดงวาไดสรางโฟลเดอรของฐานขอมลเรยบรอยแลว

59

รปท 4.15 คลกเลอกท “Import” จากนน คลก “ เลอกไฟล ” เพอทาการนาฐานขอมลของโปรแกรมมาลงภายในเซฟเวอรของเครอง

รปท 4.16 เมอคลกปม เลอกไฟล จะปรากฏหนาตางขน ใหทาการเปดโฟลเดอรไฟล งานทลงไวในเครอง จากนนเลอกไฟล localhost.sql แลวกด Open เพอเลอกไฟล

60

รปท 4.17 หลงจากทาการเลอกไฟลเสรจแลว ใหกดปม “ ลงมอ ” เพอนาฐานขอมลของโปรแกรมเขาสเซฟเวอร

รปท 4.18 เมอนาฐานขอมลของโปรแกรมเขาสเซฟเวอรเรยบรอยแลว จะปรากฏตารางของฐานขอมล ประกอบไปดวย 2 ตารางหลก คอ ตางราง member และตาราง

product ดงภาพ ซงเปนอนเสรจสมบรณในการตดตงระบบฐานขอมล

61

รปท 4.19 ไปทไดร C จากนนเปดโฟลเดอร Appserv แลว ดบเบลคลกทโฟลเดอร www

รปท 4.20 ใหทาการคดลอกไฟลงานของโปรแกรม ไปวางไวในโฟลเดอร www

62

รปท

รปท 4.21 เมอทาการคดลอกไฟลงานไปใสไวในโฟลเดอร www แลว จะสามารถ Run โปรแกรมผาน Appsevr ได

63

4.5 วธการใชงานเวบไซต เขาไปทโปรแกรม Chrome ตรงชอง URL ใหใส localhost/phpMyAdmin/home.php

และกดEnter

รปท 4.22 เขาส localhost/phpMyAdmin/home.php

รปท 4.23 แสดงหนาIndexหนาแรกของเวบไซต

64

รปท 4.24 แสดงหนาการสมครสมาชก

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

65

รปท 4.26 แสดงหนาวธการสงซอ

รปท 4.27 แสดงหนาสนคา

66

รปท 4.28 แสดงหนาตะกรา

รปท 4.29 แสดงหนาวธการชาระสงสนคา

67

รปท 4.30 แสดงหนาผจดทา

บทท 5 สรปผลการทาโครงการ

5.1 สรปผลโครงการ

1. ผเขาใชเวบไซตสามารถสงซอออนไลนไดจรง 2. ผเขาใชเวบไซตสามารถสงปรนใบเสรจไดจรง 3. ผเขาใชเวบไซตสามารถสมครสมาชกออนไลนไดจรง 4. ผเขาใชเวบไซตสามารถลอคอนเขาระบบไดจรง

5.1.1 สรปขนาดของโปรแกรม ลาดบท ชอไฟล ขนาด หมายเหต 1 bmt.php 3 kb แสดงหนา admin 2 Index.php 3 kb แสดงหนาแรกของเวบไซต 3 Home.php 9 kb แสดงหนาหลกของเวบไซต 5 how to.php 4 kb แสดงหนาวธการสงซอสนคา 6 Sell.php 16 kb แสดงหนาสนคา 7 sell1.php 13 kb แสดงหนาสนคา 8 sell2.php 16 kb แสดงหนาสนคา 9 sell3.php 13 kb แสดงหนาสนคา 10 sell4.php 16 kb แสดงหนาสนคา 11 sell5.php 13 kb แสดงหนาสนคา 12 sell6.php 16 kb แสดงหนาสนคา 13 cart.php 13 kb แสดงหนาสนคา 14 cart1.php 13 kb แสดงหนาสนคา 15 cart2.php 16 kb แสดงหนาสนคา 16 cart3.php 13 kb แสดงหนาสนคา 17 cart4.php 16 kb แสดงหนาสนคา 18 register.php 8 kb แสดงหนาสมครสมาชก 19 bay.php 4 kb แสดงหนาวธการชาระสนคา 20 long in.php 2 kb แสดงหนา ลอคอน

ตารางท 5.1 แสดงขนาดของโปรแกรม

69

5.1.2 ขอผดพลาดทมตอการออกแบบระบบงาน 1. ขนาดของตวอกษร และชนดของตวอกษร font 2. สมาชกกลมไมมประสบการณในการทาระบบงาน 3. สมาชกยงไมมแนวความคดใหมๆ ในการออกแบบโปรแกรม 4. การทาเวบไซตโดยไมไดวางองคประกอบของหนามากอน 5. การออกแบบงานเสรจไมทนตามกาหนดเวลาทคาดหวง 5.1.3 ขอผดพลาดทมในโปรแกรม 1. คอมพวเตอรทใชงานเกดการผดปกตในบางครง 2. เมอตรวจสอบระบบไดเกดความผดพลาดบอยครงกบขอมล 3. เมอมการแกไขเอกสารหรอตวระบบงานกตองแกไขไฟลงานทงหมด 5.2 ปญหาและอปสรรคในการดาเนนงาน 1. ปญหาเกยวกบการแกไขไฟลขอมล

2. ปญหาเกยวกบเวลาทไมตรงกนของสมาชกในกลม 3. ปญหาเกยวกบการทาระบบฐานขอมลเปนไปอยางลาชา

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

70

5.3 สรปการดาเนนงานจรง

รายการ มถนายน 61 กรกฎาคม 61 สงหาคม 61 กนยายน 61

ระยะเวลา 1 2 3 4 5 1 2 3 4 1 2 3 4 1 2 3 4

อบรมการทาโครงการนกศกษา ปวช.3 และปวส.2


เสนอหวขอ ATC.01โครงการ รอบท 1 (บทท1)

3-7 กรกฎาคม 61




17-20 กรกฎาคม 61



สงบทท 2 24-28 กรกฎาคม 61

สงบทท 3 31 ก.ค. – 20 ส.ค. 61

สอบหวขอโครงการ

9 กนยายน 61





รายการ พฤศจกายน 61 ธนวาคม 61 มกราคม 62 กมภาพนธ 62

หมายเหต 1 2 3 4 5 1 2 3 4 1 2 3 4 1 2 3 4


1-10 พฤศจกายน 61 เปนตนไป

สอบโปรแกรม ระดบปวส2

4 พฤศจกายน 2561

สอบโปรแกรม ระดบ ปวช3

11 พฤศจกายน 2561

สงบทท 4 6-16 ธนวาคม 61

สงบทท 5 16-20 มกราคม 62

สงรปเลม ซด และคาเขาเลม

23 มกราคม – 14 กมภาพนธ 2562

ตารางท 5.2 สรปเวลาการดาเนนงานจรง

หมายเหต เสนสดา คอ ระยะเวลาทกาหนด เสนสแดง คอ ระยะเวลาในการดาเนนงานจรง

71

5.4 สรปคาใชจายในการดาเนนการจรง ลาดบ รายการ จานวน ราคา (บาท) 1. กระดาษDouble A A4 2 รม 250 2. หมกเครอง Printer สดา,แดง,นาเงน,เหลอง 1 ชด 500 3. คาเยบเลมเอกสาร 1 เลม 500 4. คาแผนโปรแกรม Adobe Photoshop 1 แผน 300 5. คาหนงสอ 1 เลม 280 6. คาเดนทาง - 100 รวมเปนเงน 1,930

ตารางท 5.3 สรปคาใชจายในการดาเนนงานจรง

72

บรรณานกรม

ชยธช บารงด และ นางสาวศรสวรรค สวางดาว (2558). โครงการ ระบบการขายสนคา อปกรณกฬ าทางนา. หลกสตรประกาศนยบตรวชาชพชนสง (ปวส.)

สาขาวชาคอมพวเตอรธรกจ. วทยาลยเทคโนโลยอรรถวทยพณชยการ ชนาธป พนทะแสน และนายมนสว มรกรณ (2569).โครงการขายสนคาออนไลนประเภท ระบบแพคเกจ 3G/4G . หลกสตรประกาศนยบตรวชาชพชนสง (ปวส.)

สาขาวชาคอมพวเตอรธรกจ. วทยาลยเทคโนโลยอรรถวทยพณชยการ พเชษฐ ขนใจ. (2556). สอน PHP ระบบสมาชกการออกแบบฐานขอมล. คนหาขอมลเมอ 20 กนยายน 2561,จาก https://www.youtube.com/watch?v=uFNa2USmHao บรษทดแคทลอน(จากด). (2558). ประเภทแบตบนตน. คนหาขอมลเมอ 21 กนยายน 2561, จากhttps://www.decathlon.co.th/th/1081-badminton Atart. (2560). การใชโปรแกรม Photoshop CS5. คนหาขอมลเมอ 25 กนยายน 2561, จาก https://www.youtube.com/watch?v=-YGFbO2GAWE Benext. (2556). สอน PHP ระบบตะกราสนคา. คนหาขอมลเมอ 26 กนยายน2561,จาก https://www.itoffside.com/php-workshop-shopping-cart/ Devbanban. (2559). PHPLogin&Logout. คนหาขอมลเมอ 24 กนยายน 2561, จาก https://www.youtube.com/watch?v=jRF-YV9Gfx4&t=18s Kruchutiwan Kruratchaburi . (2560). ทฤษฏ HTML. คนหาขอมลเมอ 25 กนยายน 2561, จาก http:// https://chutiwan.wordpress.com Supannee Janma. (2559). Color Theory - ทฤษฎส. คนหาขอมลเมอ 22 กนยายน 2561, จาก https://www.youtube.com/watch?v=THeYmsB-6og Thailand Cyber University Projext. (2560). ระบบจดการฐานขอมล. คนหาขอมลเมอ 25 กนยายน 2558, จาก https://www.youtube.com/watch?v=pSWR0v9T74c Wasan Yothee. (2559). สอนการใช Adobe Dreamweaver CS5 . คนหาขอมลเมอ 19 กนยายน 2561, จาก https://www.youtube.com/watch?v=_tgKVFvNWXI WeSoft Co., Ltd. (2560). การใชโปรแกรม SQL Server . คนหาขอมลเมอ 21 กนยายน 2561, จาก https://www.youtube.com/watch?v=gwRcG-5EBe4

ภาคผนวก - ใบเสนอขออนมตการทาโครงการระบบคอมพวเตอรธรกจ (ATC.01) - ใบอาจารยทปรกษารวม (ATC.02) - ใบขอสอบปองกนโครงการระบบคอมพวเตอรธรกจ (ATC.03) - รายงานความคบหนาโครงการระบบคอมพวเตอรธรกจ (ATC.04) - ใบบนทกการเขาพบอาจารยทปรกษาโครงการ (ATC.05)

78

ประวตผจดทา นายกฤตนนท บญมน เกดเมอวนท 31 มนาคม 2541 สาเรจการศกษาช นมธยมตอนตนจากโรงเรยนเพชรรตนในพระอปถมภ เมอปการศกษา 2556 จบการศกษาชนมธยมตอนปลายทโรงเรยนเพชรรตนในพระอปถมภ เมอปการศกษา 2559 ปจจบนกาลงศกษาในระดบประกาศนยบตรวชาชพช นสง (ปวส.) ทวทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2561 ปจจบนอาศย อยบานเลขท 120 ซ.บางนาตราด 5 ถ.บางนา-ตราด แขวงบางนา เขตบางนา 10250 เบอรโทรศพท 092-483-0009 E-mail : [email protected] LineID:fhot1150 นางสาวพรญาณ ตลาทอง เกดเมอวนท 5 พฤศจกายน 2541 สาเรจการศกษาชนมธยมตอนตนจากโรงเรยนพทธรงสพบล การศกษา 2556 จบการศกษาชนมธยมตอนปลายจาก ทโรงเรยนบางปะกงบวรวทยายน ปการศกษา 2559ปจจบนกาลงศกษาในระดบประกาศนยบตรวชาชพช น สง (ปวส .) ท วทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2561 ปจจบนอาศย 1/185 หมท 1 ต.บางวว อ.บางปะกง จ.ฉะเชงเทรา 24180 เบอรโทรศพท 080-976-6279 E-mail: [email protected] LineID:pynkik41

e - commerce for badminton equipment¹‚ครงงาน...ค ก ตต...

Documents