e - commerce for basketball accessories¹‚ครงงาน... · 2019. 6. 5. · 2.1...

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

จดทาโดย

นาย สกณพมพ ทพยรตน นาย วชระ ขาวพนธ

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

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

ข

หวขอโครงการ ระบบขายสนคาออนไลน ประเภทอปกรณกฬาบาสเกตบอล E - Commerce For Basketball Accessories

ผจดทาโครงการ นาย สกณพมพ ทพยรตน นาย วชระ ขาวพนธ อาจารยทปรกษา อาจารยธนาวฒ วชย อาจารยทปรกษารวม อาจารยศรพร สงบภย สาขาวชา สาขาวชาคอมพวเตอรธรกจ สถาบน วทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2561

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

ค

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

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

ง  

คานา

การจดทาโครงการ น เป น ส วนห น งของวช าโครงการ 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 ทฤษฎทเกยวของ 7 2.4 การนาคอมพวเตอรเขามาใชในระบบงาน 30 บทท 3 การออกแบบงานดวยระบบคอมพวเตอร

3.1 การออกแบบระบบงาน 31 3.2 การออกแบบแผนภาพบรบท 34 3.3 การออกแบบแผนภาพความสมพนธของขอมล 40 3.4 พจนานกรมขอมล 41 3.5 การออกแบบ Sitemap 43 3.6 การออกแบบ Story Board 44 3.7 การออกแบบสงนาเขา 48

ฉ  

สารบญ (ตอ)

หนา

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

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

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

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

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

ซ  

สารบญรป หนา

รปท 2.1 ระบบงานในปจจบน 05 รปท 2.2 หนาตางโปรแกรม Adobe Photoshop CS5 12 รปท 2.3 แสดง Tool Box 13 รปท 2.4 แสดงระบบฐานขอมล 18 รปท 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) 31 รปท 3.2 Flowchart ระบบ สมครสมาชก 32 รปท 3.3 Flowchart ระบบ การเขาสระบบ 33 รปท 3.4 การออกแบบ Context Diagram 34 รปท 3.5 Data Flow Diagram Level 0 35 รปท 3.6 Data Flow Diagram Level 1 Process 1 36 รปท 3.7 Data Flow Diagram Level 1 Process 2 37 รปท 3.8 Data Flow Diagram Level 1 Process 3 38 รปท 3.9 Data Flow Diagram Level 1 Process 4 39รปท 3.10 ความสมพนธของขอมล (E-R Diagram) 40รปท 3.11 Sitemap 43 รปท 3.12 หนา Index 44 รปท 3.13 หนา Home 44 รปท 3.14 หนาสมครสมาชก 45 รปท 3.15 แสดงหนาผจดทา 45 รปท 3.16 แสดงชองทางตดตอ 46 รปท 3.17 แสดงหนาวธการสงซอ 46

ฌ  

รปท 3.18 หนาแสดงสนคา 47รปท 3.19 แสดงหนาวธการชาระเงน 47 รปท 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.1 แสดงสญลกษณระบบกระแสขอมล 9 ตารางท 2.2 แสดงสญลกษณในการออกแบบระบบฐานขอมล 11 ตารางท 2.3 ความรสกของส 28 ตารางท 3.1 ตารางแสดงขอมลสมาชก 41 ตารางท 3.2 ตารางขอมลการสงซอ 41 ตารางท 3.3 ตารางขอมลรายละเอยดสงซอ 42 ตารางท 3.4 ตารางขอมลสนคา 42 ตารางท 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

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

28-29 มถนายน 61

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

4 กรกฎาคม 61

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

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

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

3 กนยายน 61

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

12-16 กนยายน 61

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

19-30 กนยายน 61

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

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

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

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 ระบบงานปจจบน ( Flow chart )

N

Y

เขาสเวบไซต

เรมตน

ลอกอน

กรอก

ตรวจสอบ

สมครสมาชก

บนทกขอมล

เขาสระบบ

เลอกสนคา

ซอสนคา

คานวณราคา

ยนยนการ

ปรนใบเสรจ

จบการทางาน

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

6

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

7

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

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

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

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

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

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

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

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

- เวบเพจหนาราน (Store Front) คอ หนาเวบเพจสาหรบใชในการสงซอสนคาหรอบรการตาง ๆ จากรานคา

8

- เวบเพจหลงราน (Back Office) คอเวบเพจทใชเฉพาะบคลากรของรานคาซงผใชงานภายนอกไมสามารถเขามาในสวนนได ประโยชนเพอกาหนดรายละเอยดตาง ๆ ทเกยวของกบตวสนคาหนาเวบรานคา

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

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

2. รานคาออนไลนเปนเวบไซต E –Commerce ทมทงระบบการจดการสนคาระบบตะกราสนคา Shopping Cart ระบบการชาระเงนรวมถงการขนสงสนคาครบสมบรณแบบทาใหผซอสามารถสงซอสนคาทาการชาระเงนผานเวบไซตไดทนท

3. การประมลสนคาเปนเวบไซต E-Commerce ทมรปแบบของการนาสนคาไปประมลขายกน โดยจะเปนการแขงขนในการเสนอราคาสนคาหากผใดเสนอราคาสนคาไดสงสดในชวงเวลาทกาหนด กจะชนะการประมลและสามารถซอสนคาชนนนไปไดดวยราคาทไดกาหนดไวโดยสวนใหญสนคาทนามาประมล ประวตความเปนมาของอนเทอรเนต (Internet) อนเทอรเนตเปนเครอขายคอมพวเตอร ทกอตงขนโดยกระทรวงกลาโหมของประเทศสหรฐอเมรกา ซงเปนการนาคอมพวเตอรมาเชอมตอกน มชอเรยกสมยนนวา “อารปาเนต” การเชอมตอคอมพวเตอรจานวนมากเขาดวยกน กอใหเกดการแลกเปลยนและการสอสารทเปนประโยชนอยางมหาศาล สงผลใหอารปาเนตเตมโตอยางรวดเรว เพราะมองคกรทางทหารและมหาวทยาลย นาเครองคอมพวเตอรเชอมตอกบเครอขายเปนจานวนมาก ในป พ.ศ. 2532 มเครองคอมพวเตอรเชอมตอกบเครอขายมากกวา 10,000 เครองทวโลก และเครอขายนไดถกขนานนามใหมวา“อนเทอรเนต” การสอสารขอมลบนอนเตอรเนตจะมขอกาหนดทเปนมาตรฐาน หรอทเรยกวา“โพรโตคอล (Protocol)”โดยพนฐานของการสอสารขอมลอนเทอรเนตจะใชโครงสรางแบบTCP/IPยอมาจาก “Transmission Control Protocol/Internet Protocol” (TCP/IP Model) ซงเปนมาตรฐานทวาดวยการกาหนดวธการตดตอสอสารระหวางคอมพวเตอร ทาใหคอมพวเตอรภายในระบบเครอขายอนเทอรเนตสามารถเชอมตอเขาหากน และตดตอสอสารแลกเปลยนขอมลกนได

9

ความรเกยวกบการวเคราะหและออกแบบระบบการวเคราะหระบบ (Systems Analysis) คอ การศกษาขนตอนตาง ๆ ของการทางานและปญหาระบบงานหนง ๆ และคนหาแนวทางการแกไข (Solutions) วางโครงสรางรปแบบของระบบงาน (Design) เพอนามาพฒนาใหระบบงานทวเคราะหและออกแบบมประสทธภาพในแงการปฏบตมากทสด สวนการออกแบบระบบกคอ การนาเอาความตองการของระบบมาเปนแบบแผนหรอเรยกวาพมพเขยวโมเดลทใชสาหรบการพฒนาระบบรปแบบของภาพ เชน ไดอะแกรม (Diagram) หรอ แผนภม (Chart) ดงน สญลกษณระบบกระแสขอมล ( Symbol ) สญลกษณ ( Symbol ) ความหมาย ( Symbol Name )

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

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

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

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

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

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

10

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

11

สญลกษณในการออกแบบระบบฐานขอมล สญลกษณ ชอเรยก ความหมาย

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.2 แสดงสญลกษณในการออกแบบระบบฐานขอมล

12

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

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

รปท 2.2 หนาตางโปรแกรม Photoshop CS5 รายละเอยดสวนประกอบของโปรแกรม Photoshop CS5

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

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

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

Application Menu Menu Bar

Tool Panel Menu Stage

13

กนไวในปมเดยวกน โดยจะมลกษณะรปสามเหลยมอยบรเวณมมดานลางดงภาพเพอบอกใหรวาในปมนยงมเครองมออนอยดวย

4. Panel (พาเนล) เปนวนโดวยอย ๆ ทใชเลอกรายละเอยด หรอคาสงควบคมการทางานตาง ๆ ของโปรแกรมใน Photoshop มพาเนลอยเปนจานวนมาก เชน พาเนล Color ใชสาหรบเลอกส, พาเนล Info ใชแสดงคาสตรงตาแหนงทชเมาสรวมถงขนาด/ตาแหนงของพนททเลอกไว

Tool Box เปนสวนทใชเกบเครองมอพนฐานในการทางาน ในโปรแกรม สามารถเรยกใชชดเครองมอยอยโดยการคลกรปสามเหลยมทมมดานลาง

รปท 2.3 แสดง Tool Box

12

13

3 4

5 6 7

8 9

10

11

14

15

16 17 18

19 20 21

22

23

24

1 2

14

1. Marquee ใชสาหรบยายพนททเลอกไวของภาพ หรอยายภาพในเลเยอรหรอยายเสนไกด 2. Lasso ใชเลอกพนทบนภาพเปนแนวเขตแบบอสระ 3. Slice ใชตดแบงภาพเพอบนทกไฟลภาพยอย ๆ ทเรยกวาสไลซ (Slice) สาหรบนาไปสราง

เวบเพจ 4. Healing Brush ใชตกแตงลบรอยตาหนในภาพ 5. Clone Stamp ใชทาสาเนาภาพ โดย Copy ภาพจากบรเวณอนมาระบาย หรอระบายดวย

ลวดลาย 6. Eraser ใชลบภาพบางสวนทไมตองการ 7. Blur ใชระบายภาพใหเบลอ 8. Pen ใชวาดเสนพาธ (Path) 9. Path Selection ใชเลอกและปรบแตงรปทรงของเสนพาธ 10. 3D Rotate tool ใชหมนวตถตามแกน X ไดรอบดาน 360 องศา 11. Hand ใชเลอนดสวนตาง ๆ ของภาพ 12. Move ใชสาหรบเลอกพนทบนภาพเปนรปสเหลยม วงกลม วงร หรอเลอกเปนแถว

คอลมน ขนาด 1 พกเซล 13. Quick Selection Tool เปนเครองมอทใชเลอกขอบเขตของวตถ 14. Eyedropper ใชเลอกสจากสตาง ๆ บนภาพ 15. Brush ใชระบายลงบนภาพ 16. History Brush ใชระบายภาพดวยภาพของขนตอนเดมทผานมา หรอภาพของสถานะเดมท

บนทกไว 17. Gradient ใชเตมสแบบไลระดบโทนสหรอความทบ 18. Dodge ใชระบายเพอใหภาพสวางขน 19. Horizontal Type ใชพมพตวอกษรหรอขอความลงบนภาพ 20. Rectangle ใชวาดรปทรงเรขาคณตหรอรปทรงสาเรจรป 21. 3D Camera จดการกลองงานดาน 3D ไมวาจะเปนการซม หมน เคลอน 22. Zoom ใชยอหรอขยายมมมองภาค 23. Foreground Color, Set Background Color ใชสาหรบกาหนดส 24. เปนเครองมออกรปแบบหนงของการเลอกโดยใชสเพอแยกความแตกตางระหวาง พนทท

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

15

2. โปรแกรม SQL Server หรอ Microsoft SQL Server คอระบบจดการฐานขอมลเชงสมพนธ (relation 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

16

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

เวบทเราเขยนหนาจอ Dreamweaver กจะแสดงแบบเดยวกบเวบเพจจรงๆ ชวยใหเราเขยนเวบเพจงายขน ไมตองเขยน Code HTML เอง

2. มเครองมอในการชวยสรางเวบเพจ ทมความยดหยนสง 3. สนบสนนภาษาสครปตตางๆ ทงฝง Client และ Server เชน Java, ASP, PHP, CGI,

VBScript 4. มเครองมอในการ Upload หนาเวบเพจไปทเครอง Server เพอทาการเผยแพรงานทเรา

สรางในอนเทอรเนต โดยการสงผาน FTP หรอ โดยการใชโปรแกรม FTP ภายนอกชวย เชน WS FTP

5. รองรบมลตมเดย เชน การใสเสยง, การแทรกไฟลวดโอ, การใชงานรวมกบโปรแกรม Flash , Fireworks Training

6. มความสามารถทาการตดตอกบฐานขอมล เพอเชอมตอกบเวบไซต

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

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

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

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

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

สมครสมาชก เปนตน - Data ใชสาหรบวางคาสงทใชจดการกบฐานขอมลและนาฐานขอมลออกมาแสดงบนหนา

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

แกไขเนอหา - Text ใชสาหรบจดรปแบบของขอความภายในเวบเพจ เชน ตวหนา ตวเอยง หวขอ บลเลต

และแทรกสญลกษณตางๆ ได

17

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

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

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

5. Properties Inspector ใชในการกาหนดคาคณสมบตของหนาเวบเพจและในสวนของวตถตางๆ ซงจะมรายละเอยดแสดงขนมา เมอมการคลกเลอกวตถนนๆ

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

4. Database (ฐานขอมล) ฐานขอมล คอ ระบบทรวบรวมขอมลตาง ๆ ทเกยวของกนเขาไวดวยกนอยางมระบบม

ความสมพนธระหวางขอมลตาง ๆ ทชดเจน ในระบบฐานขอมลจะประกอบดวยแฟมขอมลหลายแฟมทมขอมล เกยวของสมพนธกนเขาไวดวยกนอยางเปนระบบและเปดโอกาสใหผใชสามารถใชงานและดแลรกษาปองกนขอมลเหลาน ไดอยางมประสทธภาพ โดยมซอฟตแวรทเปรยบเสมอนสอกลางระหวางผใชและโปรแกรมตาง ๆ ทเกยวของกบการใชฐานขอมล เรยกวา ระบบจดการฐานขอมล หรอ DBMS(data base management system)มหนาทชวยใหผใชเขาถงขอมลไดงายสะดวกและมประสทธภาพ การเขาถงขอมลของผใชอาจเปนการสรางฐานขอมล การแกไขฐานขอมล หรอการตงคาถามเพอใหไดขอมลมา โดยผใชไมจาเปนตองรบรเกยวกบรายละเอยดภายในโครงสรางของฐานขอมล

18

รปท 2.4 แสดงระบบโครงสรางของฐานขอมล

บต (Bit) คอ ขอมลทมขนาดเลกทสด เปนขอมลทเครองคอมพวเตอรสามารถเขาใจและนาไปใชงานได ซงไดแก เลข 0 หรอ เลข 1 เทานน

ไบต (Byte) หรอ อกขระ (Character) ไดแก ตวเลข หรอ ตวอกษร หรอ สญลกษณพเศษ 1 ตว เชน 0, 1, …, 9, A, B, …, Z และเครองหมายตางๆ ซง 1 ไบตจะเทากบ 8 บต หรอ ตวอกขระ 1 ตว เปนตน

ฟลด (Field) ไดแก ไบต หรอ อกขระตงแต 1 ตวขนไปรวมกนเปนฟลด เชน เลขประจาตว ชอพนกงาน เปนตน

เรคคอรด (Record) ไดแก ฟลดตงแต 1 ฟลด ขนไป ทมความสมพนธเกยวของรวมกนเปนเรคคอรด เชน ชอ นามสกล เลขประจาตว ยอดขาย ขอมลของพนกงาน 1 คน เปน 1 เรคคอรด

ไฟล (Files) หรอ แฟมขอมล ไดแก เรคคอรดหลายๆ เรคคอรดรวมกน ซงเปนเรองเดยวกน เชน ขอมลของประวตพนกงานแตละคนรวมกนทงหมดเปนไฟลหรอแฟมขอมลเกยวกบประวตพนกงานของบรษท เปนตน

ฐานขอมล (Database) คอ การเกบรวบรวมไฟลขอมลหลายๆ ไฟลทเกยวของกนมารวมเขาดวยกน เชน ไฟลขอมลของแผนกตางๆ มารวมกนเปนฐานขอมลของบรษท เปนตน

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

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

Record

Database

File

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

19

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

ระบบ จด ก ารฐ าน ขอ ม ล (Database Management System) ห รอ ท เร ยก ว า ด บ เอ มเอส (DBMS) เปนกลมโปรแกรมททาหนาทเปนตวกลางในระบบตดตอระหวางผใชกบฐานขอมลเพอจดการและควบคมความถกตอง ความซ าซอน และความสมพนธระหวางขอมลตางๆ ภายในฐานขอมล ซงตางจากระบบแฟมขอมลทหนาทเหลานจะเปนหนาทของโปรแกรมเมอร ในการตดตอกบขอมลในฐานขอมลไมวาจะดวยการใชค าส งในกลมดเอมแอล (DML) หรอ ด ดแอล (DDL) หรอจะดวยโปรแกรมตางๆ ทกคาสงทใชกระทากบขอมลจะถกดบเอมเอสนามาแปล (คอมไพล) เปนการปฏบตการ (Operation) ตางๆ ภายใตคาสงนนๆ เพอนาไปกระทากบตวขอมลภายในฐานขอมลตอไป สาหรบสวนการทางานตางๆ ภายในดบเอมเอสททาหนาทแปลคาสงไปเปนการปฏบตการตางๆ กบขอมลนน รปแบบของระบบฐานขอมล

1. ฐานขอมลเชงสมพนธ (Relational Database) เปนการเกบขอมลในรปแบบทเปนตาราง (Table) หรอเรยกวา รเลชน (Relation) มลกษณะเปน 2 มต คอเปนแถว (Row) และเปนคอลมน (Column) การเชอมโยงขอมลระหวางตารางจะเชอมโยงโดยใชแอททรบวต (Attribute) หรอคอลมนทเหมอนกนทงสองตารางเปนตวเชอมโยงขอมล ตวอยางเชน ตารางการลงทะเบยน ถาตองการทราบวานกเรยนรหส 1001 ลงทะเบยนวชาอะไรกหนวยกต กสามารถนารหสวชาในตารางนกเรยนไปตรวจสอบกบรหสวชา ซงเปนคยหลกในตารางหลกสตร เพอนาชอวชาและจานวนหนวยกตมาใชดงตาราง

2. ฐานขอมลแบบเครอขาย (Network Database) ฐานขอมลแบบเครอขาย จะเปนการรวมระเบยนตาง ๆ และความสมพนธระหวางระเบยนแตละตางกบฐานขอมลเชงสมพนธคอ ในฐานขอมลเชงสมพนธจะแฝงความสมพนธเอาไว โดยระเบยนทมความสมพนธกน จะตองมคาของขอมลในแอททรบวตหนงเหมอนกน แตในฐานขอมลแบบเครอขาย จะแสดงความสมพนธอยางชดเจน โดยแสดงไวในโครงสรางตวอยางเชน

20

3. ฐานขอมลแบบลาดบชน (Hierarchical Database) ฐานขอมลแบบลาดบชน เปนโครงสรางทจดเกบขอมลในลกษณะความสมพนธแบบ Parent-Child Relationship Type หรอเปนโครงสรางรปแบบตนไม (Tree) ขอมลทจดเกบในทน คอ ระเบยน (Record) ซงประกอบดวยคาของเขตขอมล (Field) ของเอนทตหนง ๆ นนเอง

การออกแบบฐานขอมลเชงสมพนธ

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

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

5. ทฤษฏ HTML

คอ ภาษาหลกทใชในการเขยนเวบเพจ โดยใช Tag ในการกาหนดการแสดงผลHTML ยอมาจากคาวา Hypertext Markup Language โดย Hypertext หมายถง ขอความทเชอมตอกนผานลง (Hyperlink) Markup language หมายถงภาษาทใช Tag ในการกาหนดการแสดงผลสงตางๆทแสดงอยบนเวบเพจ ดงนน HTML จงหมายถง ภาษาทใช Tag ในการกาหนดการแสดงผลเวบเพจทตางกเชอมถงกนใน Hyperspace ผาน Hyperlink นนเอง

21

6. ทฤษฏ PHP PHP เกดในป 1994 โดย Rasmus Lerdorf โปรแกรมเมอรอเมรกนไดคดคนเครองมอทใช

ในการพฒนาเวบสวนตวของเขา โดยใชขอดของภาษา C และ Perl เรยกวา Personal Home Page และไดส ร าง ส วน ตด ตอกบ ฐานขอ ม ล ท ช อ ว า Form Interpreter ( FI ) รวมท งสองสวน เรยกวา PHP/FI ซงกเปนจดเรมตนของ PHP มคนทเขามาเยยมชมเวบไซตของเขาแลวเกดชอบจงตดตอขอเอาโคดไปใชบางและนาไปพฒนาตอ ในลกษณะของ Open Source ภายหลงมความนยมขนเปนอยางมากภายใน 3 ปมเวบไซตทใช PHP/FIในการตดตอฐานขอมลและแสดงผลแบบ ไดนามกและอนๆ มากกวา 50,000 ไซต PHP2 (ในตอนนนใชชอวา PHP/FI) ในชวงระหวาง 1995-1997 Rasmus Lerdorf ไดมผ ทมาชวยพฒนาอก 2 คนคอ Zee Suraski และ Andi Gutmans ชาวอสราเอล ซงปรบปรงโคดของ Lerdorf ใหมโดยใช C++ ใหมความสามารถจดการเกยวกบแบบฟอรมขอมลทถกสรางมาจากภาษา HTML และ สนบสนนการตดตอกบโปรแกรมจดการฐานขอมล MySQL จงทาให PHP เรมถกใชมากขนอยางรวดเรว และเรมมผสนบสนนการใชงาน PHP มากขน โดยในปลายป 1996 PHP ถกนาไปใชประมาณ 15,000 เวบทวโลก และเพมจานวนขนเรอยๆ ตอมามผชวยพฒนาอก 3 คน คอ Stig Bakken รบผดชอบความสามารถในการตดตอ Oracle, Shane Caraveo รบผดชอบดแล PHP บน Winddow9z/NT, และ Jim Winstead รบผดชอบการตรวจความบกพรองตางๆ และไดเปลยนชอเปน Professional Home Page ในเวอรชนท 2PHP 3 ออกมาในชวงระหวางเดอน มถนายน 1997 ถง 1999 มคณสมบตเดนคอ สนบสนนระบบปฏบตการทง Window 95/98/ME/NT, Linux และเวบเซรฟเวอรอยาง IIS, PWS, Apache, Omni HTTPสนบสนน ระบบฐานขอมลไดหลายรปแบบเชน SQL Sever,MySQL,mSQL,Oracle,Informix,ODBCPHP4 ตงแต 1999–2007 ซงไดเพม Functionsการทางานในดานตางๆ ใหมากและงายขนโดย บรษท Zend ซงม Zeev และ Andi Gutmans ไดรวมกอต งขน (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. MySQL และ SQLite 5. Zend Engine 2.0

22

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

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

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 จงเหมาะทจะใชกบระบบฐานขอมลเชงสมพนธ และเปนภาษาหนงทมผนยมใชกนมาก

23

โดยทวไปโปรแกรมฐานขอมลของบรษทตาง ๆ ทมใชอยในปจจบน เชน Oracle, DB2 กมกจะมคาสง SQL ทตางจากมาตรฐานไปบางเพอใหเปนจดเดนของแตละโปรแกรมไปความสาคญของการประมวลผลแบบระบบฐานขอมลจากการจดเกบขอมลรวมเปนฐานขอมลจะกอใหเกดประโยชนดงน 1. สามารถลดความซาซอนของขอมลได การเกบขอมลนดเดยวกนไวหลาย ๆ ททาใหเกดความซ าซอน (Redundancy) ดงนนการนาขอมลมารวมกนเกบไวในฐานขอมล จะชวยลดปญหาการเกดความซ าซอนของขอมลได โดยระบบจดการฐานขอมล (Database Management System : DBMS) จะชวยควบคมความซ าซอนไดเนองจากระบบจดการฐานขอมลจะทราบไดตลอดเวลาวามขอมลซาซอนกนอยทใดบาง 2. หลกเลยงความขดแยงของขอมลไดหากมการเกบขอมลชนดเดยวกนไวหลาย ๆ ทและมการปรบปรงขอมลเดยวกนน แตปรบปรงไมครบทกททมขอมลอยกจะทาใหเกดปญหาขอมลชนดเดยวกนอาจมคาไมเหมอนกนในแตละททเกบขอมลอย จงกอใหเกดความขดแยงของขอมลขน (Inconsistency) 3. สามารถใชขอมลรวมกนไดฐานขอมลจะเปนการจดเกบขอมลรวมไวดวยกน ดงนนหาก ผใชตองการใชขอมลในฐานขอมลทมาจากแฟมขอมลตาง ๆ กจะทาไดโดยงาย 4. สามารถรกษาความถกตองเชอถอไดของขอมลบางครงพบวาการจดเกบขอมลในฐานขอมลอาจมขอผดพลาดเกดขน เชน จากการทผปอนขอมลปอนขอมลผดพลาดคอปอนจากตวเลขหนงไปเปนอกตวเลขหนงโดยเฉพาะกรณผใชหลายคนตองใชขอมลจากฐานขอมลรวมกนหากผใชคนใดคนหนงแกไขขอมลผดพลาดกทาใหผใชผอนไดรบผลกระทบตามไปดวยในระบบการจดการฐานขอมล (DBMS) จะสามารถใสกฎเกณฑเพอควมคมการผดพลาดทเกดขน 5. สามารถกาหนดความเปนมาตรฐานเดยวกนของขอมลไดการเกบขอมลรวมกนไวในฐานขอมลจะทาใหสามารถกาหนดมาตรฐานของขอมลไดรวมมาตรฐานตาง ๆ ในการจดเกบขอมลใหเปนไปในลกษณะเดยวกนได เชน การกาหนดรปแบบการเขยนวนทในลกษณะ วน/เดอน/ป หรอ ป/เดอน/วน ท งนจะมผคอยบรหารฐานขอมลทเราเรยกวา ผบรหารฐานขอมล (Database Administrator: DBA) เปนผกาหนดมาตรฐานตาง ๆ 6. สามารถกาหนดระบบความปลอดภยของขอมลไดระบบความปลอดภยในทน เปนการปองกนไมใหผใชทไมมสทธมาใช หรอมาเหนขอมลบางอยางในระบบผบรหารฐานขอมลจะสามารถกาหนดระดบการเรยกใชขอมลของผใชแตละคนไดตามความเหมาะสม 7. เกดความเปนอสระของขอมลในระบบฐานขอมลจะมตวจดการฐานขอมลททาหนาทเปนตวเชอมโยงกบฐานขอมล โปรแกรมตาง ๆ อาจไมจาเปนตองมโครงสรางขอมลทกครง ดงนนการแกไขขอมลบางครง จงอาจกระทาเฉพาะกบโปรแกรมทเรยกใชขอมลทเปลยนแปลงเทานนสวนโปรแกรมทไมไดเรยกใชขอมลดงกลาว กจะเปนอสระจากการเปลยนแปลง

24

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

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

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

1. สพนฐานแมส

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

25

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

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

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

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

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

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

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

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

26

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

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

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

27

ความเขมของส (Intensity) เกดจาก สแท คอสทเกดจากการผสมกนในวงจรส เปนสหลกทผสมขนตามกฎเกณฑและไมถกผสมดวยสกลางหรอสอนๆ จะมคาความเขมสงสด หรอแรงจดทสด เปนคาความแทของสทไมถกเจอปน เมอสเหลาน อยทามกลางสอน ๆ ทถกผสมใหเขมขนขน หรอออนลง ใหมดหมนหรอ เปลยนคาไปแลว สแทจะแสดงความแรงของสปรากฏออกมาใหเหน อยางชดเจน ซงจะทาใหเกดจดสนใจขนในผลงานลกษณะเชนน เหมอนกบ ดอกเฟองฟาสชมพสด หรอบานเยน ทอยทามกลางใบเฟองฟาทเขยวจด ๆ หรอ พลทจดสองสวางในยามเทศกาล ตดกบส มด ๆ ทบ ๆ ของทองฟายามคาคน เปนตน นาหนกของส (Value) เปนการใชสโดยมคาน าหนกในระดบตาง ๆ กน และมสหลาย ๆ ส ซงถาเปนสเดยวกจะมลกษณะเปนสเอกรงค การใชคาน าหนกของส จะทาใหเกดความกลมกลน เกดระยะใกลไกล ตนลก ถามคาน าหนกหลาย ๆ ระดบสกจะกลมกลนกนมากขนแตถามเพยง 1 – 2 ระดบทหางกน จะทาใหเกดความแตกตาง ความรสกของส การใชวรรณะรอนเชนสแดง ทาใหเกดความรสกอบอน ทาทาย เคลอนไหวสงตางๆ ทเราสมผสดวยสายตา จะทาใหเกดความรสกขนภายในตอเรา ทนททเรามองเหนส ไมวาจะเปน การแตงกาย บานทอยอาศย เครองใชตางๆ แลวเราจะทาอยางไร จงจะใชสไดอยางเหมาะสม และสอดคลองกบหลกจตวทยา เราจะตองเขาใจวาสใดใหความรสกตอมนษยอยางไร ซงความรสกเกยวกบสสามารถจาแนกออกไดดงน

28

สกบการออกแบบ

รป ส ความหมาย

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

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

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

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

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

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

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

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

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

สเทา

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

สทอง

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

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

29

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

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

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

30

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

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

นายอานนท ขนกสกรรม และ นายณฒวต หอมนยม(2559) โครงการขายสนคาออนไลนประเภท รานขายเสอผาเดก ในการจดทาโครงการเกยวกบระบบขายสนคาออนไลนประเภท เสอผาเดก พฒนาขนสามารถบนทกขอมลของการซอสนคา ลบขอมลทไมตองการสามารถยอนดการสงซอสนคารายการเกาได พฒนาโปรแกรมให งายตอการใชงาน เพอใหทกคนใชงานไดสะดวกสบาย 2.5 การนาคอมพวเตอรเขามาใชในระบบ 1. โปรแกรม Adobe Dreamweaver CS5 ในการทาเวบไซต 2. โปรแกรม Adobe Photoshop CS5 ในการตกแตงภาพ 3. โปรแกรม Appserv ในการจาสารองเครอง Server 4. โปรแกรม PHP My Admin ในการทาฐานขอมล 5. โปรแกรม Microsoft Visio 2010 ในการทา Flowchart

บทท 3

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

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

32

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

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

Y

สมครสมาชก

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

เรมตน

กรอกขอมล

บนทกขอมล

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

N

จบการทางาน

สมครสมาชก

33

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

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

N

เขาสระบบ

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

เรมตน

กรอกขอมล

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

Y

จบการทางาน

34

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

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

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

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

บาสเกตบอล E - Commerce For Basketball Accessories

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

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

-ขอมลสมาชก

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

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

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

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

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

ลกคา ผดแลระบบ

35

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

คยรหสสนคา

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

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

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

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

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

36

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 แฟมลกคา

ขอมลลกคา

ขอมลลกคา

ขอมลลกคา

37

1.3 Data Flow Diagram Level 1 Process 2

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

2.1

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

1.2

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

1.3

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

ลกคา

ผดแลระบบ

D1 แฟมลกคา

ขอมลลกคา

ขอมลลกคา

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

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

38

1.4 Data Flow Diagram Level 1 Process 3

รปท 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

ใบเสรจ

ขอมลสนคา

ขอมลสนคา

ขอมลสนคา

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

รายการสนคา

ขอมลสนคา

ขอมลสนคา

ขอมลใบเสรจ

39

1.5 Data Flow Diagram Level 1 Process 4

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

4.1

เลอกรายการ

4.3

ยนยนการคนหา

4.4

แสดงรายการ

ผดแลระบบ

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

4.2

คนหาขอมล

ขอมลการสงซอ

ขอมลการสงซอ

ขอมลการสงซอ

ขอมลการสงซอ

ขอมล การสงซอ

ขอมลการสงซอ

40

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

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

ม

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

ม

รหสผสงซอ

M

N

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

ลาดบสนคา

เพศ ชอผเขาใช

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

ทอย

อเมล

รหสสมาชก

M

รหสสนคา

ชอสนคา

M

M

ชนด

1

ราคาสนคา

รหสสนคา

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

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

ใบเสรจ

ชอผสงซอ

อเมลผสงซอ

เบอรผสงซอ

ทอยผสงซอ

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

41

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 ชอฟลด

Type ชนดของขอมล

Field Side ขนาดฟลด

Descr iption ใชเกบขอมล

หมายเหต

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 ทอย

42

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

Type ชนดของขอมล

Field Side ขนาดฟลด

Descr iption ใชเกบขอมล

หมายเหต

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

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

Field Name ชอฟลด

Type ชนดของขอมล

Field Side ขนาดฟลด

Descr iption ใชเกบขอมล

หมายเหต

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

PK

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

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

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

Type ชนดของขอมล

Field Side ขนาดฟลด

Descr iption ใชเกบขอมล

หมายเหต

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

PK

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

43

หนาแรก

หนาห

ลก

หนาห

ลก

สนคา

วธการส

งซอ

วธการช

าระเง

น การตดต

อ ผจ

ดทา

บาสเกต

บอลส

าหรบ

เดก

บาสเกต

บอลส

าหรบ

ผหญง

Lo

gin

อปกรณเสร

ม

3.5 การออกแบบ Sitemap

รปท 3.1

1 การออก

แบบ

Site M

ap

สมครสม

าชก

ลอกอ

น บาสเกต

บอลส

าหรบ

ผชาย

44

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

รปท3.12 แสดงหนา Index.php

รปท3.13 แสดงหนา home1.php

45

รปท3.14 แสดงหนาสมครสมาชก foraamin.php

รปท 3.15 แสดงหนาผจดทา manager.php

46

รปท 3.16 แสดงชองทางตดตอ Contact.php

รปท 3.17 แสดงหนาวธการสงซอ viti.php

47

รปท 3.18 แสดงหนาสนคา product.php

รปท 3.19 แสดงหนาวธการชาระเงน sell.php

48

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

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

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

4.1 เครองมอและอปกรณทใช 1. หนวยความจา (RAM) DDR4(2666) 16GB (8GBX2) Kingston Hyper-X (C16FW) 2. การดจอ GeForce® GTX 970 Dual Fan 4GB GDDR5 3. หนวยประมวลผล (CPU) AMD Ryzen™ 3 2200G with Radeon™ Vega 8 Graphics 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 ใชในการพฒนาระบบการสงซอสนคา

50

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

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

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

51

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

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

52

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

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

53

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

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

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

54

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

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

55

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

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

ภายในเครอง

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

56

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

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

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

57

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

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

58

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

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

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

59

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

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

60

รปท

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

61

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

และกดEnter

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

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

62

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

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

63

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

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

64

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

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

65

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

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

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

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

5.1.1 สรปขนาดของโปรแกรม ลาดบท ชอไฟล ขนาด หมายเหต 1 bgADMIN.php 3 kb แสดงหนา admin 2 Index.php 3 kb แสดงหนาแรกของเวบไซต 3 Home.php 9 kb แสดงหนาหลกของเวบไซต 5 howto.php 4 kb แสดงหนาวธการสงซอสนคา 6 bgkid.php 6 kb แสดงหนาสนคา 7 bgman.php 3 kb แสดงหนาสนคา 8 bgproduct.php 6 kb แสดงหนาสนคา 9 bgwoman.php 3 kb แสดงหนาสนคา 10 cart.php 4.03 kb แสดงหนาตะกราสนคา 11 cart2.php 4.03 kb แสดงหนาตะกราสนคา

12 cart3.php 4.03 kb แสดงหนาตะกราสนคา

13 cart4.php 4.03 kb แสดงหนาตะกราสนคา

14 cart5.php 4.03 kb แสดงหนาตะกราสนคา 15 bgaccessory.php 6 kb แสดงหนาสนคา 16 contact.php 3 kb แสดงหนาตดตอ 17 05.php 6 kb แสดงหนาตะกราสนคา 18 Register.php 8 kb แสดงหนาสมครสมาชก 19 Payment.php 4 kb แสดงหนาวธการชาระสนคา 20 login.php 2 kb แสดงหนาเขาสระบบ 21 Provider.php 4 kb แสดงหนาผจดทาและทอยตดตอ 22 Home2.php 3 kb แสดงหนาเขาสระบบของผใช 23 confirm.php 6 kb แสดงหนายนยนการซอ

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

67  

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

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

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

68  

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

29-30 มถนายน 61

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

3-7 กรกฎาคม 61

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

14 กรกฎาคม 61

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

17-20 กรกฎาคม 61

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

21 กรกฎาคม 61

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

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

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

9 กนยายน 61

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

18-22 กนยายน 61

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

25-29 กนยายน 61

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

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

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

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

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

4 พฤศจกายน 2561

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

11 พฤศจกายน 2561

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

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

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

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

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

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

69  

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

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

70  

บรรณานกรม

นครนทร เกตสวรรณ. (2557). การใชโปรแกรม Dreamweaver CS5. คนหาขอมลเมอ 20 กนยายน 2561, จาก http://katsuwan.blogspot.com/ พเชษฐ ขนใจ. (2556). สอน PHP ระบบสมาชกการออกแบบฐานขอมล. คนหาขอมลเมอ 19 กนยายน 2561,จาก https://www.youtube.com/watch?v=uFNa2USmHao บรษทดแคทลอน. (2558). ประเภทบาสเกตบอล. คนหาขอมลเมอ 23 กนยายน 2561, จาก https://www.decathlon.co.th/th/3351-basketball Atart. (2560). การใชโปรแกรม Photoshop CS5. คนหาขอมลเมอ 25 กนยายน 2561, จาก https://www.youtube.com/watch?v=-YGFbO2GAWE Devbanban. (2559). PHPLogin&Logout. คนหาขอมลเมอ 24 กนยายน 2561, จาก https://www.youtube.com/watch?v=jRF-YV9Gfx4&t=18s Kong Ruksiam. (2559). สอน PHP ระบบตะกราสนคา. คนหาขอมลเมอ 26 กนยายน 2561, จาก https://www.youtube.com/watch?v=BgmbdrvSdAo Kruchutiwan kruratchaburi . (2560). ทฤษฏ HTML. คนหาขอมลเมอ 27 กนยายน 2561, จากhttp:// https://chutiwan.wordpress.com Supannee Janma. (2559). Color Theory - ทฤษฎส. คนหาขอมลเมอ 21 กนยายน 2561, จาก https://www.youtube.com/watch?v=THeYmsB-6og Thaicyberu. (2560). ระบบจดการฐานขอมล. คนหาขอมลเมอ 25 กนยายน 2558, จาก https://www.youtube.com/watch?v=pSWR0v9T74c Wesoft. (2560). การใชโปรแกรม SQL Server . คนหาขอมลเมอ 20 กนยายน 2561, จาก https://www.youtube.com/watch?v=gwRcG-5EBe4

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

76  

ประวตผจดทา นายสกณพมพ ทพยรตน เกดเมอวนท 27 มนาคม 2541 สาเรจการศกษาช นมธยมตอนตนจากโรงเรยนสรรตนาธร เมอปการศกษา 2556 จบการศกษาชนมธยมตอนปลายทโรงเรยนสรรตนาธรเมอปการศกษา 2559 ปจจบนกาลงศกษาในระดบประกาศนยบตรวชาชพชนสง (ปวส.) ทวทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2561 ปจจบนอาศย อยบานเลขท 13/103 ดสต อนน แมนชน หอง 513 ซ.สภาพงษ 1/4 ถ.ศรนครนทร แขวงหนองบอน เขตประเวศ 10250 เบอรโทรศพท 061-893-8889 E-mail : moskerraner11@gmail.com , saelun1234@gmail.com LineID:moskerraner นายวชระ ขาวพนธ เกดเมอวนท 6 ตลาคม 2539 สาเรจการศกษาช นมธยมตอนตนจากโรงเรยนนวมนทราช น ทศ เต รยมอดมศกษาพฒนาการ การศกษา 2554 จบการศกษาชนมธยมตอนปลายจาก ท โรงเรยนนวมนทราชน ทศ เตรยมอดมศกษาพฒนาการ ปการศกษา 2557 ปจจบนกาลงศกษาในระดบประกาศนยบตรวชาชพชนสง (ปวส.) ท วทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2561 ปจจบนอาศย 120/117 หมท 6 ต.บางพลใหญ อ.บางพล จ.สมทรปราการ 10540 เบอรโทรศพท 087-998-6188 E-mail:vachirabe@gmail.com LineID:hollywooduptome