โครงการ ระบบขายสนคาออนไลนประเภท นาฬกาดจตอล E-commerce for Digital clock

จดท าโดย นางสาวสนนทพย โชระเวก นางสาวศรวรรณ จตรประสงค

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

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

ข

บทคดยอ หวขอโครงการ ระบบขายสนคาออนไลนประเภท นาฬกาดจตอล E-commerce for Digital clock ผจดท าโครงการ นางสาวสนนทพย โชระเวก

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

บทคดยอ ระบบขายสนคาออนไลนประเภทนาฬกาดจตอล วตถประสงคโครงการเพอการสงซอสนคาออนไลนทงายขน มการเขาระบบทงายและปลอดภย ขอบเขตมการออกแบบหนา IndexและHome ของเวบไซตมการออกแบบ Stip Map และ Logo เวบไซตมรปภาพประกอบบนเวบไซต โปรแกรมทจดท า Adobe Dreamwaever ใชในการสรางเวบไซต Adobe Photoshop cs6 ใชในการตกแตงรปภาพและใชในการออกแบบโลโก ในปจจบนการสงซอสนคาออนไลนมมากขนบางประเภทสนคายงมการน าสนคามาขายในออนไลนนอย จงจดท าระบบขายสนคาออนไลนประเภทนาฬกาดจตอลขนมา ทมการสงซอสนคาแบบงายขนมการลอคอน เขาระบบทตองสมครสมาชกมสนคาใหเลอกหลากหลาย ผลการด าเนนงานออกมาตามวตถประสงคทตองการเสรจสมบรณ ทางคณะผจดท าไดจดท าระบบขายสนคาออนไลนประเภทนาฬกาดจตอล ขนมาเพอการเขาเวบไซตสงซอทงายขนและยงมรปภาพประกอบการสงซอ

ค

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

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

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

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

ง

ค ำน ำ

การจดท าโครงการน เปนสวนหนงของวชาโครงการ รหสวชา 3204-8501 หลกสตร

ประกาศนยบตรวชาชพชนสง สาขาวชาคอมพวเตอรธรกจ โดยคณะผจดท าไดจดท าโครงการ

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

ผลงานแกผทสนใจ

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

คณะผจดท า 3 กมภาพนธ 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 ปญหาทเกดขนในระบบงานปจจบน 6 2.3 การวเคราะหความตองการของระบบใหม 6 2.4 ทฤษฎทเกยวของ 6 2.5 การน าคอมพวเตอรมาใชงาน 39 บทท 3 การออกแบบงานดวยระบบคอมพวเตอร

3.1 การออกแบบระบบงาน(Flow Chart) 40 3.2 การออกแบบแผนบรบท Context Diagram 43 3.3 แผนภาพการไหลของขอมล Data Flow Diagram 44 3.4 การออกแบบแผนภาพความสมพนธของขอมล Entity Relationship Diagram 51 3.5 พจนานกรมขอมล Data Dictionary 52 3.6 การออกแบบผงโครงสรางเวบไซต Site Map 54

ฉ

สารบญ (ตอ) หนา

3.7 การออกแบบ Story Board 55 3.8 การออกแบบสงน าเขา Input Data 60 3.9 การออกแบบสงน าออก Output Data 60

บทท 4 การพฒนาระบบสอการขายสนคาออนไลน 4.1 เครองมอและอปกรณทใช 61 4.2 เครองมอทใชในการพฒนาโปรแกรม 61

4.3 วธการตดตงโปรแกรม 62 4.4 วธการใชงาน 66

บทท 5 สรปการท าโครงการ 5.1 สรปผลโครงการ 72 5.1.1 สรปขนาดของโปรแกรม 72 5.1.2 สรปขอผดพลาดทมในโปรแกรม 73 5.1.3 สรปขอผดพลาดทมในโปรแกรม 73 5.2 ปญหาและอปสรรคในการด าเนนงาน 73 5.3 สรปการด าเนนงานจรง(Gantt Chart) 74 5.4 สรปคาใชจายในการด าเนนงานจรง 75 บรรณานกรม 76 ภาคผนวก

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

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

สารบญรป หนา

รปท 2.1 Flow Chart ระบบงานปจจบน 05รปท 2.2 หนาตางโปรแกรม Adobe Photoshop CS6 12รปท 2.3 แสดง Tool Box 15รปท 2.4 แสดงระบบฐานขอมล 24รปท 2.5 ภาพแสดงวงจรของสทเกดจากการน าแมสมาผสมกน 32รปท 2.6 สพนฐานแมส 33 รปท 2.7 สเหลองแกมเขยว 33 รปท 2.8 สน าเงนแกมมวง 33 รปท 2.9 สแดงแกมมวง 34 รปท 2.10 สแดงแกมสม 34 รปท 2.11 สเหลองแกมสม 34 รปท 2.12 สน าเงนแกมเขยว 34รปท 3.1การเขยนFlow Chart ระบบขายสนคาออนไลน ประเภทสนคานาฬกาดจตอล 40รปท 3.3 (Flowchart) การเขาสระบบ 42รปท 3.4การเขยนContext Diagramระบบขายสนคาออนไลนประเภทสนคานาฬกาดจตอล 43รปท 3.5Data Flow Diagram Level 0 ระบบขายสนคาออนไลน ประเภทสนคานาฬกาดจตอล 44 รปท 3.6 Data Flow Diagram Level 1Process 1 ระบบสมครสมาชก 45รปท 3.7 Data Flow Diagram Level 1 Process 2 ระบบ เขาสระบบ 46รปท 3.9 Data Flow Diagram Level 1 Process 4 ระบบ ยนยนการสงซอ 47 รปท 3.8 Data Flow Diagram Level 1 Process 3 ระบบ เลอกสนคา 48 รปท 3.10 Data Flow Diagram Level 1 Process 5 ระบบ ช าระเงน 49 รปท 3.11 Data Flow Diagram Level 1 Process 6 ระบบ ออกใบเสรจ 50 รปท 3.12 E-R Diagram ระบบการขายสนคาออนไลนประเภทนาฬกาดจตอล 51 รปท 3.13 การออกแบบ Site Map 54 รปท 3.14 แสดงหนา Index 55 รปท 3.15 แสดงหนาแรกของเวบไซต 55รปท 3.17 แสดงหนาสมครสมาชก 56 รปท 3.18 แสดงหนาประเภทสนคา 56

ฌ

สารบญรป(ตอ) หนา

รปท 3.19 แสดงหนากระตราสนคา 57 รปท 3.20 แสดงหนารวมราคาสนคา 57 รปท 3.17 แสดงหนาวธการสงซอ 58 รปท 3.21 แสดงหนาวธการช าระเงน 58 รปท 3.22 แสดงหนาผจดท า 59 รปท 4.1 แสดงหนาจอการตดตง 62

รปท 4.2 แสดงขนตอนการตดตงโปรแกรม 62 รปท 4.3 แสดงขนตอนการเลอกไดรเกบโฟลเดอรของ Appserv 63 รปท 4.4 แสดงขนตอนการตดตงโปรแกรม 63 รปท 4.5 แสดงขนตอนการใส Sever name 64 รปท 4.6 แสดงขนตอนการใสรหสผาน 64 รปท 4.7 แสดงขนตอนการตดตงโปรแกรม 65 รปท 4.8 แสดงหนาจอขนตอนสนสดการตดตงโปรแกรม AppServ 65 รปท 4.9 เขาส localhost/clockbt/index1.php 66 รปท 4.10 แสดงหนา Index 66 รปท 4.11 แสดงหนาแรกของเวบไซต 67 รปท 4.12 แสดงหนาการสมครสมาชก 67 รปท 4.13 แสดงหนาใสรหสจากการสมครสมาชก 68 รปท 4.14 แสดงหนาลอกอนเขาสระบบ 68 รปท 4.15 แสดงหนาวธการสงซอ 69 รปท 4.16 แสดงหนาสนคา 69 รปท 4.17 แสดงหนาตะกรา 70 รปท 4.19 แสดงหนาวธการช าระเงน 70 รปท 4.20 แสดงหนาตดตอเรา 71 รปท 4.21 แสดงหนาผจดท า 71

ฏ

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

ตารางท 1.1 แผนการด าเนนงาน (Gantt Chart) 3 ตารางท 1.2 งบประมาณการด าเนนงาน 4 ตารางท 5.1 สรปขนาดของโปรแกรม 57 ตารางท 5.2 สรปเวลาการด าเนนงานจรง 59 ตารางท 5.3 สรปคาใชจายในการด าเนนงานจรง 60

บทท 1 บทน า

1.1 ภมหลงและความเปนมา

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

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

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

2

1.2 วตถประสงคโครงการ 1. เพอความสะดวกสบายในการสงซอสนคา 2. เพอความสะดวกในการชาระเงน 3. เพอเปนแนวทางการสงสนคาออนไลน 4. เพอพฒนาการขายสนคาออนไลนโดยใชระบบ E-Commerce ดวยภาษา PHP

1.3 ขอบเขตการศกษา 1. สวนของสมาชก

1.1 ระบบสามารถสมครสมาชกเพอเขาสระบบได 1.2 ระบบสามารถ Login และ Logout ภายในระบบได 1.3 สมาชกสามารถเลอกซอสนคาออนไลนของเราได 1.4 ระบบสามารถแสดงราคาสนคาและคานวณราคาสนคาได 1.5 ระบบสามารถแสดงใบเสรจหลงชาระเงนได

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

2.3 ระบบสามารถแจงสถานการณชาระเงนได 2.4 ระบบสามารถปรนใบเสรจหลงชาระเงนได 1.4 ประโยชนทคาดวาจะไดรบ

1. ลกคาสามารถสงซอนาฬกาดจตอลไดตามความตองการ 2. ลกคาสามารถเขาถงขอมลสนคาของเราไดทกท

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

3

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

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

รายการ ภาคเรยนท 1 มถนายน 61 กรกฎาคม 61 สงหาคม 61 กนยายน 61

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

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

27-28 มถนายน 61

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

29 มถนายน -3 กรกฎาคม 61

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

5 กรกฎาคม 61

เสนอหวขอโครงการ รอบท 2 6 กรกฎาคม 61

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

9 กรกฎาคม 61

สงบทท 2 18-25 กรกฎาคม 61

สงบทท 3 1-17 สงหาคม 61

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

20-24 สงหาคม 61

ประกาศผลสอบ 29 สงหาคม 61

สงความคบหนาโปรแกรม 50%

10-16 กนยายน 61

สงความคบหนาโปรแกรม 60%

17-23 กนยายน 61

สงความคบหนาโปรแกรม 70%

24-30 กนยายน 61

รายการ ภาคเรยนท 2 พฤศจกายน 61 ธนวาคม 61 มกราคม 62 กมภาพนธ 62 ระยะเวลา

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 สงความคบหนา 90% 2 พฤศจกายน 2561

สงความคบหนา 100% 9 พฤศจกายน 2561

สอบโปรแกรม ระดบปวส.2 10 พฤศจกายน 2561

สอบโปรแกรม ระดบ ปวช.3 24 พฤศจกายน 2561

สงบทท 4 11-21 ธนวาคม 61

สงบทท 5 14-26 มกราคม 62

สงรปเลม ซด และคาเขาเลม 27 มกราคม – 3 กมภาพนธ 2562

4

1.6 เครองมอทใช 1. โปรแกรม PHP ใชในการพฒนาระบบ E-commerce 2. ภาษา SQL ใชในการเชอมตอฐานขอมล 3. โปรแกรม Adobe Photoshop cs5 ใชในการตกแตงภาพ 4. โปรแกรม Inwshop ในการสรางเวบขายสนคาออนไลน 5. โปรแกรม PHP MY Admain ในการทาฐานขอมล

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

ล าดบ รายการ จ านวน ราคา

1 คากระดาษ 3 500 บาท 2 แผนซด 3 30 บาท 3 คาอปกรณตาง ๆ 5 500 บาท 4 คาซองใสเอกสาร 1 50 บาท

รวมเปนเงน 1080 บาท

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

บทท 2

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

2.1 ระบบงานในปจจบน (Flowchart)

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

6

2.2 ปญหาทเกดขนในระบบงานปจจบน

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

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

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

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

2.3 การวเคราะหและความตองการของระบบงานใหม

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

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

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

2.4 ทฤษฎและระบบงานทเกยวของ ในการออกแบบเวบไซตนนประกอบดวยกระบวนการตาง ๆ มากมาย เชน การออกแบบ

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

วางแผนและทางานไมเปนระบบ ตวอยางเชน การลงมอออกแบบโดยการใชโปรแกรมชวยสรางเวบ

เนอหาและรปแบบกเปนไปตามทนกขนไดขณะนน และเมอเหนวาดดแลวกเปดตวเลย ทาใหเวบ

7

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

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

1.ทฤษฎการพาณชยอเลกทรอนกส (E-Commerce) เนองมาจากอตราการเตบโตของการใชอนเตอรเนตและการเพมขนของเวบไซตทางธรกจทมอยางตอเนอง ท าใหการประกอบธรกจโดยเฉพาะธรกจบนอนเทอรเนตเปนชองทางการตลาดขนาดใหญของโลกไรพรมแดนทสามารถเขาถงกลมผบรโภคเปาหมายไดโดยตรงอยางรวดเรว ไรขดจ ากดของเรองเวลาและสถานท การแขงขนทางการคาเสรและระหวางประเทศทตองแขงขนและชงความไดเปรยบกนท “ความเรว”ทงการน าเสนอสนคาผานสออเลกทรอนกส มความส าคญอยางยงในสงคมเศรษฐกจฐานความร พาณชยอเลกทรอนกสจงเปนอกทางเลอกหนงของการประกอบธรกจในปจจบน และไดรบความนยมเพมขนเปนล าดบ กรอบแนวคดของพาณชยอเลกทรอนกสประกอบดวย 4 สวนใหญ ๆ คอ 1.แอพพลเคชนของการพาณชยอเลกทรอนกส

2.ปจจยทางการบรหาร 3.โครงสรางพนฐาน 4.ประเภทสนคาของการพาณชยอเลกทรอนกส

ประเภทของการพาณชยอเลกทรอนกส (E-Commerce) มการแบงประเภทอคอมเมรซมกนหลายแบบ เชน แบงอคอมเมรซเปน 5 ประเภท แบงอ

คอมเมรซเปน 3 ประเภท แบงอคอมเมรซเปน 6 สวน และแบง อคอมเมรซตามประเภทสนคาเปน 2 ประเภท เปนตนอคอมเมรซ 5 ประเภท ถาจะแบงอคอมเมรซเปน 5 ประเภทกไดดงตอไปน (1) ธรกจกบผซอปลกหรอบทซ (B-to-C = Business-to-Consumer) คอประเภททผซอปลกใชอนเตอรเนตในการซอสนคาจากธรกจทโฆษณาอยในอนเตอรเนต (2) ธรกจกบธรกจหรอบทบ (B-to-B = Business-to-Business) คอ ประเภท ทธรกจกบธรกจตดตอซอขายสนคากนผานอนเตอรเนต (3) ธรกจกบรฐบาลหรอบทจ (B-to-G = Business-to-Government) คอประเภททธรกจตดตอกบหนวยราชการ (4) รฐบาลกบรฐบาลหรอจทจ (G-to-G = Government to Government) คอ ประเภททหนวยงานรฐบาลหนวยงานใดหนวยงานหนงตดตอกบหนวยงานรฐบาลอกหนวยงานหนง (5) ผบรโภคกบผบรโภคหรอซทซ (C-to-C = Consumer-to-Consumer) คอ ประเภททผบรโภคประกาศขายสนคาแลวผบรโภคอกรายหนงกซอไป เชน www.Ebay.com เปนตน

8

กฎหมายทเกยวของกบ E-commerce 1.กฎหมายธรกรรมพาณชยอเลกทรอนกส กฎหมายนจะตองสอดคลองกบกฎหมายระหวางประเทศ และเหมาะสมกบสภาพของประเทศไทย ทงน กฎหมายดงกลาวรวมถงกฎหมายธรกรรมอเลกทรอนกส (Electronic Transaction Law) กฎหมาย ลายเซนอเลกทรอนกส (Electronic Signature Law) กฎหมาย ธรกรรมทางการเงนอเลกทรอนกส (Electronic Financial Transaction Law) กฎหมายอาญาอนเนองมาจากอาชญากรรม พาณชยอเลกทรอนกส (Electronic Commerce Criminal Code)

2. กฎหมายคมครองขอมล เพอคมครองสทธในความเปนสวนตวจาก การน าขอมลของบคคลไปใชในทางทมชอบ

3.กฎหมายอาชญากรรมทางคอมพวเตอร (Computer Related Crime) อนมวตถประสงคในการคมครองสงคม จากความผดทเกยวกบขอมลขาวสาร อนถอเปนทรพยทไมมรปราง (Intangible Object) แตทวามคายงในยคแหงเทคโนโลยสารสนเทศ

4. กฎหมายการแลกเปลยนขอมลทางอเลกทรอนกส (Electronic Data Interchange: EDI) ทจะเอออ านวยใหมการ ท านตกรรมสญญากนทางอเลกทรอนกสได

5.กฎหมายลายมอชอทางอเลกทรอนกส (Electronic Signature Law) ทมวตถประสงคในการสรางความมนคงใหกบคกรณในอนทจะตองพงพาเทคโนโลยเพอการลงลายมอชอ

6. กฎหมายการโอนเงนทางอเลกทรอนกส (Electronic Funds Transfer) มวตถประสงคในการคมครองผบรโภคและสรางหลกประกนทมนคง ในการท าธรกรรมทางการเงนดงกลาว 7. กฎหมายโทรคมนาคม (Telecommunication Law) มงวางกลไกในการเปดเสรใหมการแขงขนทเปนธรรม และจดใหองคกรก ากบดแลทเปนกลาง และมประสทธภาพรวมทงสรางหลกประกนใหประชาชนสามารถเขาถง บรการโทรคมนาคมไดอยางทวถง (Universal Service) ซงหนวยงานทเกยวของโดยตรง เชน กระทรวงคมนาคม มการด าเนนการอยแลวกฎหมายระหวางประเทศ องคการระหวางประเทศ และการคาระหวางประเทศทเกยวเนองกบเทคโนโลยสารสนเทศ 8.กฎหมายทเกยวเนองกบอนเทอรเนต 9. กฎหมายพฒนาเทคโนโลยและอตสาหกรรมอเลกทรอนกสและคอมพวเตอร

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

9

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

10

ตารางท 2.1 แผนภาพแสดงการไหลกระแสของขอมล

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

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

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

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

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

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

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

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

11

เราเขาใจสวนประกอบของงานเขาใจการใชขอมลในแตละโปรเซส และขอมลทเปนผลจากการท างานโปรเซสโดยโครงสรางจะเรมจากระดบสงสดซงจะแสดงสวนทอยภายนอกระบบ สวนนส าคญเพราะวาเปนสวนทบอกวาระบบนน ๆ ไดรบขอมลมาจากทใด และผลลพธตาง ๆ ทใด และผลลพธตาง ๆ ถกสงไปทใดบาง DFD ในระดบลกลงไปจะไมแสดงสงทอยนอกระบบ คอ ไมมสงนเปนสวนประกอบโดยปกต จะวางแหลงทมาของขอมลไวทางซายมอของ DFD และสวนภายนอกทรบผลลพธของระบบจะอยทางขวามอ ทงนเพอใหอยในรปแบบของกระแสขอมลจากซายไปขวา แตหลาย ๆ กรณน เราจะวางขอมลและผลลพธไวในทเหมาะสมซงอาจจะอยเหนอโปรเซสหรอใตโปรเซสกได 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 อน

12

Composite attribute

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

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

ทฤษฎการใชโปรแกรม

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

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

รายละเอยดสวนประกอบของโปรแกรม Adobe Photoshop CS6

13

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

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

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

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

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

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

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

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

- New in CS6 เปน Workspace ทแสดงเฉพาะเครองมอและค าสงใหม ๆ ในเวอรชน CS6เหมาะแกการศกษาฟเจอรใหมของโปรแกรม

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

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

14

6. Panel (พาเนล) เปนวนโดวยอยๆ ทใชเลอกรายละเอยด หรอค าสงควบคมการท างานตางๆ ของโปรแกรม ใน Photoshop มพาเนลอยเปนจ านวนมาก เชน พาเนล Color ใชส าหรบเลอกส พาเนล Info ใชแสดงคาสตรงต าแหนงทชเมาสรวมถงขนาด/ต าแหนงของพนททเลอกไว Photoshopเปนโปรแกรมในชด Creative Suite 6 หรอเรยกส นๆวา CS6 ซงใชส าหรบสรางและตกแตงภาพกราฟกซงมประสทธภาพและมชอเสยงมากโปรแกรมหนงดวยความสามารถทหลากหลายทงการสรางภาพใหมและตกแตงภาพดวยเครองมอและเทคนคพเศษตางๆจงท าให Photoshop เปนโปรแกรมส าคญทจ าเปนตองมตดตงใชงานในเครองคอมพวเตอรของผใชงานสวนใหญในทนขอกลาวถงAdobe Photoshop ทไดผานการพฒนามาจนถงเวอรชนท 12 ซงมชอเรยกอยางเปนทางการวา Adobe Photoshop CS6 โดยในเวอรชนนจะแบงออกเปน 2 เวอรชนยอยคอ Adobe Photoshop CS6 และ Photoshop CS6Extended ซงทง 2 เวอรชนนมความสามารถแตกตางกนออกไป Adobe Photoshop CS6 เปนเวอรชนแบบธรรมดาทเนนการท างานดานการตกแตงตดตอภาพถายเปนเวอรชนทนยมใชกนอยางแพรหลายเพราะมฟงกชนการท างานพนฐานทครบถวน PhotoshopCS5 Extended ไดเพมความสามารถนอกเหนอจากการตกแตงและการตดตอคอการท างานดาน 3D (3 มต) ใหรปทรงมแสงเงาสมจรง สรางภาพเคลอนไหวดวย Timeline แต Photoshop CS6 ไมวาจะเวอรชนธรรมดาหรอเวอรชน Extended ถกออกแบบใหมความสามารถเพมมากขนและออกแบบเครองมอใหเรยกใชไดสะดวกขนซงสามารถน ามาใชในการออกแบบชนงานดานตาง ๆ ดงน 1. สอสงพมพไมวาจะเปนนตยสารวารสารหนงสอแผนพบและโบชวร 2. งานกราฟกโฆษณาสนคาทางโทรทศน 3. งานน าเสนอ (Presentation) และตกแตงภาพส าหรบภาพยนตรและมเดยทวไป 4. ออกแบบกราฟกส าหรบเวบไซต Toolbox คอ ชดเครองมอทใชงานกบงานของเราจะถกจดอยในสวนทแยกออกมาตางหากถาหากไมมเปดการใชงานท Menu>Window>Tool ใชงานรวมกบ Menu Tools Option Bar จะเปนสวนปรบแตงในรายละเอยดตางๆของเครองมอทเลอกใช Tools บางอนมรปภาพสามเหลยมอนเลกๆอยดานลางขวา เมอเรากดเมาสคางหรอคลกขวาบนป มนน จะมเครองมอ ทถกจดใหอยในกลมเดยวกนออกมา

เครองมอใน Tool Box

15

รปท 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 ใชในการระบายส เพอซอมแซมรปภาพใหสมบรณแบบ 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

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

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. เปนเครองมออกรปแบบหนงของการเลอกโดยใชสเพอแยกความแตกตางระหวาง พนทท

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

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

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

17

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

1.มโลโก สญลกษณของทางบรษทประกอบอยดวย หากเปนธรกจ sme ธรกจขนาดเลก ควรมชอแบรนดของตนประกอบอยดวย ลกคาเหนจะไดจดจ าและรธรกจของเรา

2.โทนสตองเปนโทนสหลกโทนสทสอถงแบรนดของคณ เชน ais สเขยว สเขยวออน ,dtac สฟา สน าเงน , true move สสม สแดง สงเหลานท าใหเหนวาแบรนดส าคญแลว สของแบรนดกตองส าคญดวยเชนกน

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

4.แบรนดยกษทเราเลนโฆษณากนคงหนไมพน google display และ facebook ad กลาวสน ๆ คอลงโฆษณาผาน google และ google จะน าการโฆษณาเหลานนลงเวบไซตพนธมตรใหกบคณ ซงหากคณเขาสเวบไซตพนธมตร google กจะเจอโฆษณาเชน mthai sanook manager thirath และอน ๆ มากมาย สรปสน ๆคอ ท ากบ google ครงเดยวโผลโฆษณาหลาย ๆ เวบนนเอง สวนอกคแขงหนงคอ facebook ad ตวนจะเหนใน facebook เทานน แตคนสวนใหญ ชอบเลน facebook อตราการเขาถงรวดเรว ชชดไดมากกวา คนเหนถกใจ ผประกอบการวดผลเรวมาก ท าโฆษณาไมกวนผลตอบกลบจะรวดเรว หากเลอกกลมเปาหมายทถกตองจะท าใหประหยดคาใชจายและไดลกคาทชดเจนขนดวย

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

6. หากแบนเนอรโฆษณาเราฝากเวบไซตโดยตรงกบทางเจาของเวบ หากมความรนดหนอยดานโปรแกรมควรเกบขอมลเมอมการคลกเขามาดวยนะวา วนนเราฝากแบนเนอรลงเวบไซตน มคนคลกเขามากคน จะไดนบและจดจ าวาเราท าการตลาดถกเปาหมายไหม จะไดประหยดงบประมาณดวย แตหากลกคาท าโฆษณาผาน google display และ facebook ad ทางผจดท าระบบโฆษณานจะบนทกใหเรา เราควรท าการขอรายละเอยดผใหบรการของเราดวยนะ ทฤษฎการสราง Logo

18

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

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

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

3. โลโก ไมใช แบนเนอร อยาออกแบบโลโกใหมลกษณะเหมอนแบนเนอรโฆษณาในเวบไซต โดยเฉพาะรปแบบทเปนการใสโลโกเขาไปเตมพนทสเหลยม เนองจากสายตาของลกคาออนไลนถกฝกใหหลกเลยงการดรปทรงเหลานอยแลว แนนอนวา โลโกของคณจะถกละเลยไปดวย

4. โลโกผสมรปภาพ นกออกแบบโลโกมอโปรฯ จะไมพยายามผสมผสานกราฟกเขาไปเปนเนอเดยวกบตวหนงสอทปรากฏในโลโก เนองจากการท าเชนน นอกจากจะท าใหมนดดคอนขางยากแลว (ตองใชสมองตความวา รปกราฟกทเหนคอตวอกษรอะไร) ยงเสยงตอเหตการณทไมคาดฝนมากมายอกดวย อยางเชน ตวอกษรทใชกราฟกแทน อาจจะไปเหมอนกบโลโกของบรษทอนเขา ทพบเหนบอยกเชน การแทนตว O ดวย โลก, ลกตา และแวนขยาย เปนตน วนดคนดอาจโดนฟองหาวาเอาโลโกของเขามาเลยนแบบกได ใครจะไปรละ

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

19

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

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

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

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. โปรแกรม Adobe Dreamweaver CS6 อะโดบดรมวฟเวอร (Adobe Dreamweaver) หรอชอเดมคอ แมโครมเดย ดรมวฟเวอร

(Macromedia Dreamweaver) เปนโปรแกรมแกไข HTML พฒนาโดยบรษทแมโครมเดย (ปจจบนควบกจการรวมกบบรษทอะโดบซสเตมส) ส าหรบการออกแบบเวบไซตในรปแบบ WYSIWYG กบการควบคมของสวนแกไขรหส HTML ในการพฒนาโปรแกรมทมการรวมทงสองแบบเขา

20

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

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

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 CS6

21

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

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

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

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

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

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

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

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

22

4. ทฤษฏ PHP ในชวงแรกภาษาทนยมใชในการท างานบนระบบ web คอ HTML (Hypertext Markup Language) แตภาษา HTML เปน Static Language กคอ ภาษาทใชสรางขอมลประเภทตวอกษร ภาพ หรอ Object อนๆ ทไมสามารถเปลยนแปลงได ดวยตวของมนเอง หรอเรยกงายๆ วาขอมลท คงทนนเอง กท าใหไมยดหยน ตอมาความตองการของมนษย ไมมวนเพยงพอ จงไดมการพฒนา ภาษาทเปน Dynamic Language ขนมากคอ ภาษาทมขอมลถกเปลยนแปลง Auto ตามเงอนไข ตางๆ ทผเขยนก าหนดไวมการประกาศตวแปรไดขอมลทเปลยนแปลงกเปลยนแปลงตามตวแปร ซงนเปนทมาของ ภาษา PHP, CGI และ ASP เปนตน โดยเฉพาะ ภาษาประเภท Scripts ท สามารถตดตอกบผใชไดและหนงในภาษาเหลานนกคอ PHP ซงเปนภาษาทไดรบความนยมอยาง มากในปจจบน ถกสรางขน เมอ ป 1994 กอน Windows 95 ป เดยวเอง โดยนาย Rasmus Lerdorf PHP เปนภาษาจาพวก scripting language ค าสงตางๆจะเกบอยในไฟลทเรยกวา สครปต (script) และเวลาใช งานตองอาศยตวแปลชดค าสง ตวอยางของภาษาสครปตกเชน JavaScript, Perl เปนตน ลกษณะของ PHP ทแตกตางจากภาษาสครปตแบบอนๆ คอ PHP ไดรบ การพฒนาและออกแบบมา เพอใชงานในการสรางเอกสารแบบ HTML โดยสามารถ สอดแทรก หรอแกไขเนอหาไดโดยอตโนมต ดงนนจงกลาววา PHP เปนภาษาทเรยกวา server-side หรอ HTML-embedded scripting language เปนเครองมอทส าคญชนดหนง ทชวยใหเราสามารถ สรางเอกสารแบบ Dynamic HTML ไดอยางมประสทธภาพและมลกเลนมากขน

1. Exception handling 2. XML และ Web Service 3. MySQLi และ SQLite 4. Zend Engine 2.0

ลกษณะเดนของ PHP

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

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

23

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

5. ทฤษฏ Xampp

Xampp คออะไร เปนโปรแกรม Apache web server ไวจ าลอง web server เพอไวทดสอบ สครปหรอเวบไซตในเครองของเรา โดยทไมตองเชอมตออนเตอรเนตและไมตองมคาใชจายใดๆ งายตอการตดตงและใชงานโปรแกรม Xampp จะมาพรอมกบ PHP ภาษาส าหรบพฒนาเวบแอพลเคชนทเปนทนยม , MySQL ฐานขอมล, Apache จะท าหนาทเปนเวบ เซรฟเวอร, Perl อกทงยงมาพรอมกบ OpenSSL , phpMyadmin (ระบบบรหารฐานขอมลทพฒนาโดย PHP เพอใชเชอมตอไปยงฐานขอมล สนบสนนฐานขอมล MySQL และ SQLite โปรแกรม Xampp จะอยในรปแบบของไฟล Zip, tar, 7z หรอ exe โปรแกรม Xampp อยภายใตใบอนญาตของ GNU General Public License แตบางครงอาจจะมการเปลยนแปลงเรองของลขสทธในการใชงาน จงควรตดตามและตรวจสอบโปรแกรมดวย โปรแกรม XAMPP สามารถใชงานได 4 OS ไดแก

1.Windows สามารถใชงานไดกบ windows รน 2000, 2003, xp, vista, windows 7 และจะมาพรอมกบ

2. Linux ส าหรบ SuSE, RedHat, Mandrake, Debian และ Ubuntu 3. Mac OS

6. ทฤษฏ 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 นอกจากน

24

ยงมการพฒนาไปเปน XHTML ซงคอ Extended HTML มความสามารถและมาตรฐานทมากกวาเดมโดยอยภายใตการควบคมของ W3C (World Wide Web Consortium)

7. Database (ฐานขอมล) คอระบบทรวบรวมขอมลไวในทเดยวกน ซงประกอบไปดวยแฟมขอมล (File)

ระเบยน (Record) และ เขตขอมล (Field) และถกจดการดวยระบบเดยวกน

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

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

10100001 หมายถง ก 10100010 หมายถง ข

เมอเราน า ไบต (byte) หลายๆ ไบต มาเรยงตอกน เรยกวา เขตขอมล (field) เชน Name ใชเกบชอ Last Name ใชเกบ นามสกล เปนตนเมอน าเขตขอมล หลายๆ เขตขอมล มาเรยงตอกน เรยกวา ระเบยน (record) เชน ระเบยน ท 1 เกบชอนามสกล วนเดอนปเกด ของ นกเรยนคนท 1 เปนตนการเกบระเบยนหลายๆระเบยน รวมกน เรยกวา แฟมขอมล (File) เชน แฟมขอมล นกเรยนจะเกบชอนามสกล วนเดอนปเกด ของนกเรยน จ านวน 500 คน เปนตนการจดเกบ แฟมขอมลหลายๆ

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

25

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

สาระส าคญ

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

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

26

ทเกบในแฟมขอมลแฟมเดยว ไปจนกระทง ฐานขอมลขนาดใหญมาก ทมระเบยนหลายลานระเบยน ซงเกบในหองทเตมไปดวยดสกไดรฟ หรออปกรณหนวยเกบขอมลอเลกทรอนกสรอบขาง (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) โดยทตารางแตละตารางทสรางขนจะเปนอสระ ดงนนผออกแบบฐานขอมลจะตองมการวางแผนถงตารางขอมลทจ าเปนตองใช เชนระบบฐานขอมลบรษทแหงหนง ประกอบดวย ตารางประวตพนกงาน ตารางแผนกและตารางขอมลโครงการ แสดงประวตพนกงานตารางแผนก และตารางขอมลโครงการการออกแบบฐานขอมลเชงสมพนธการออกแบบฐานขอมลในองคกรขนาดเลกเพอตอบสนองความตองการของผใชงานอาจเปนเรองทไมยงยากนก

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

27

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

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

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

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

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

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

28

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

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

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

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

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

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

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

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

29

7. เกดความเปนอสระของขอมลในระบบฐานขอมลจะมตวจดการฐานขอมลทท าหนาทเปนตวเชอมโยงกบฐานขอมล โปรแกรมตาง ๆ อาจไมจ าเปนตองมโครงสรางขอมลทกครง ดงนนการแกไขขอมลบางครง จงอาจกระท าเฉพาะกบโปรแกรมทเรยกใชขอมลทเปลยนแปลงเทานน สวนโปรแกรมทไมไดเรยกใชขอมลดงกลาว กจะเปนอสระจากการเปลยนแปลง 8. ทฤษฎการออกแบบหนาเวบ สรางล าดบชนความส าคญขององคประกอบ (Visual Hierarchy) หลกส าคญในการออกแบบหนาเวบอยางหนงกคอการสรางล าดบชนความส าคญขององคประกอบตางๆ ภายในหนาเวบเพอเนนใหเหนวาอะไรเปนเรองส าคญมาก ส าคญรองลงไปหรอส าคญนอยตามล าดบการจดระเบยบขององคประกอบอยางเหมาะสมจะชวยแสดงถงความสมพนธระหวางองคประกอบตางๆ ในหนาเวบไดในการออกแบบคณจงควรใหความสนใจกบปจจยเหลานดวย ขนาดเปรยบเทยบ (relative size) ขององคประกอบตางๆ ในหนาเวบจะชวยสอความหมายถงความส าคญของสงหนงตอสงอนๆ โดยองคประกอบทมขนาดใหญยอมสามารถดงความสนใจของผใชไดกอน และยงแสดงถงความส าคญทมเหนอองคประกอบขนาดเลก ตวอยางทเราเหนกนอยท วไปกคอ การก าหนดหวขอเรองตางๆ ใหมขนาดใหญกวาสวนของเนอหาเสมอเพอแสดงใหผ ใชมองเหนไดชดเจนและเขาใจจส าคญของเนอหาไดดข น แตเมอใดกตามท คณก าหนดใหสวนของหวขอมขนาดเลกกวาเนอหากจะสงผลใหผใชเกดความสบสนไดทนท

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

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

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

30

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

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

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

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

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

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

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

31

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

ในทางเทคนคคณสามารถใช Cascading Style Sheet (CSS) ชวยในการก าหนดสไตลมาตรฐานใหกบองคประกอบตางๆ เชน ตวอกษร ส หรอตาราง โดยทก าหนดรปแบบเพยงครงเดยว แลวสามารถน าไปใชไดกบขอมลทงหมดในเวบไซต ท าใหเกดความสะดวกในการออกแบบ และยงงายตอการเปลยนแปลงในภายหลง

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

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

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

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

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

32

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

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

สขนท1 (Primary Color) คอสพนฐานมแมส 3 ส 1. สพนฐานแมส

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

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

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

33

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

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

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

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

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

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

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

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

34

คณลกษณะของสม 3 ประการ คอ - สแทหรอความเปนส (Hue) หมายถงสทอยในวงจรสธรรมชาตทง 12 ส

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

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

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

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

35

ตารางแสดงความรสกของส

รป ส ความหมาย

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

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

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

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

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

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

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

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

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

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

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

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

36

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

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

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

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

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

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

37

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

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

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

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

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

นางสาวคนงนตย ใจตรง และ นางสาวภรยา ลมเจรญ (2560) โครงการขายสนคาออนไลนประเภทจวเวลรและเครองประดบ,การจดท าโครงการนมการออกแบบระบบสมครสมาชกและมการ Login เขาสระบบเพอท าการสงซอสนคา มระบบซอสนคาทใชงานไดอยางงายดาย มการบอกวธการสงซอสนคาและวธการช าระเงนเมอสงซอสนคาอยางครบถวน

นางสาวกญญาณ ใจเพชร และ นางสาวเจนจรา ชอสวรรณ (2559) โครงการขายสนคา

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

38

2.5 การน าคอมพวเตอรเขามาใชในระบบงาน 1. Program Adobe Photoshop CS6 ในการออกแบบโลโกและแบนเนอร 2. Program Adobe Dreamweaver CS6 ในการออกแบบหนาเวบเพจ 3. ภาษา SQL ใชส าหรบการเขยนโปรแกรมเชอมตอฐานขอมล 4. PHP My Admin ในการบรหารจดการฐานขอมล Data Base 5. โปรแกรม AppServ ในการจาลองเครอง Server

บทท 3 การออกแบบและพฒนาดวยคอมพวเตอร

3.1 การออกแบบระบบงาน (Flow Chart)

N

Y

รปท 3.1 Flow Chart ภ ฬ ด

40

1. Flowchart การสมครสมาชก

ด

N

Y

รปท 3.2 (Flowchart)

41

2. Flowchart การเขาสระบบ

ด

N

Y

รปท 3.3 (Flowchart)

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

42

รปท 3.4 Context Diagram ภ ฬ ด

3.3 แผนภาพการไหลของขอมล (Data Flow Diagram)

1. Data Flow Diagram Level 0

43

1

2

3

4

D1

D2

D3

5

ด

ด

6

ด

รปท 3.5Data Flow Diagram Level 0 ภ ฬ ด

2. Data Flow Diagram Level 1 Process 1

44

1.1

1.2

D1

Process 2

รปท 3.6 Data Flow Diagram Level 1Process 1

3. Data Flow Diagram Level 1 Process 2

45

2.1

2.2

D1

Process 3

2.3

ด

รปท 3.7 Data Flow Diagram Level 1 Process 2

4. Data Flow Diagram Level 1 Process 3

46

3.1

3.2

ด

ด D2

Process 4

รปท 3.8 Data Flow Diagram Level 1 Process 3

5. Data Flow Diagram Level 1 Process 4

47

4.1

4.2

Process 5

4.3

4.4

ด D2

รปท 3.9 Data Flow Diagram Level 1 Process 4

6. Data Flow Diagram Level 1 Process 5

48

5.1

5.2

5.3

D3

ด

Process 6

D3

ด

รปท 3.10 Data Flow Diagram Level 1 Process 5

6. Data Flow Diagram Level 1 Process 6

49

6.1

6.2

D3

ด

รปท 3.11 Data Flow Diagram Level 1 Process 6

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

50

ด

ด

-

E-mail

ด

ด ด

ด

1 N

N N

1 1

รปท 3.12 E-R Diagram ภ ฬ ด

3.5 พจนานกรมขอมล Data Dictionary ฐ ภ ฬ ด

51

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

Field Name ชอฟลด

Type ชนดของขอมล

Field Side ขนาดฟลด

Description ใชเกบขอมล

หมายเหต

ID Int 11 PK Username Text 20 Password Int 30 Name Text 60 - Sex Text 5 Email Text 30 telephone int 18

ตารางท 3.1

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

Field Name ชอฟลด

Type ชนดของขอมล

Field Side ขนาดฟลด

Description ใชเกบขอมล

หมายเหต

ID_pd Int 11 PK Name_pd Text 60 Detail_pd Text 90 ด

Price_pd int 11 Proto_pd 50

ตารางท 3.2

ตารางขอมลผดแลระบบ

Field Name ชอฟลด

Type ชนดของขอมล

Field Side ขนาดฟลด

Description ใชเกบขอมล

หมายเหต

ID_Admin Int 10 ด PK

52

Name_Admin Text 60 ด Address_admin Text 100 ด Age int 5 telephone int 18

Pro_admin ด

ตารางท 3.3 ภ

53

3.6 การออกแบบผงโครงสรางเวบไซต (Site Map)

รปท 3.13 Site Map

ธ ธ

ด

ฬ

ฬ

54

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

รปท 3.14 ด Index

รปท 3.15 ด

55

รปท 3.16 ด Login

รปท 3.17 ด

รปท 3.18 ด ภ

56

รปท 3.19 ด

รปท 3.20 ด

57

รปท 3.17 ด ธ

รปท 3.21 ด ธ

59

1. ด ถ

2. ภ

3. ธ ษ

4.

3.9 การออกแบบสงน าออก (Output Data)

1. ด ภ ภ

2. ด

3. ด

บทท 4 การพฒนาระบบสอการขายสนคาออนไลน

ประเภท นาฬกาตจตอล

4.1 เครองมอและอปกรณทใช 1. AMD Athlon (tm) II X2 Processor CPU @ 3.00GHZ 2. NVIDIA GTX 750 TI OC 3. (HARDDISK) 500 GB. 4. AMD on Board 5. Computer Pc 6. Mouse OKER 7. Keyboard OKER

4.2 เครองมอทใชในการพฒนาโปรแกรม

1. โปรแกรม Adobe Dreamweaver CS6 ใชในการท าเวบไซต 2. โปรแกรม Adobe Photoshop CS6 ใชในการตกแตงรปภาพ 3. โปรแกรม Appserv v.8.6.0 ใชในการเชอมตอฐานขอมล 4. โปรแกรม Microsoft office Word 2016 ใชในการท าเอกสาร 5. โปรแกรม Microsoft office PowerPoint 2016 ใชในการท างานน าเสนอ

62

4.3 วธการตดตงโปรแกรม 1.โปรแกรม AppserverVersion 8.6.0

หนาจอแสดงการตดตงโปรแกรม AppserverVersion 8.6.0 ใหคลกท ป ม Next เพอเขาสขนตอนการตดตง

รปท 4.1 แสดงหนาจอการตดตง

หนาจอ Appserv 8.6.0 – License Agreement เปนขอความแสดงลขสทธ GNU LESSER เมอ เราอานและเขาใจลขสทธนแลว ใหคลกป ม I Agree ไดเลย

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

63

หนาจอ Appserv 8.6.0 – Choose Install Location เปนการเลอกโฟรเดอรทใชในการตดตง Appserv โดยคาเรมตนจะเลอกตดตงไปทโฟรเดอรC:\Appserv เมอเราเลอกโฟรเดอรไดแลวใหคลกป ม Next เพอ ไปหนาถดไป

รปท 4.3 แสดงขนตอนการเลอกไดรเกบโฟลเดอรของ Appserv

หนาจอ Appserv 8.6.0 –Select Componentเปนการเลอกสวนประกอบของ Appservใหเรา เลอกสวนประกอบทงหมด โดยคลกถกหนาชองทงหมด แลวคลกป ม Next เพอไปหนาถดไป

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

64

หนาจอ Appserv 8.6.0 – Apache HTTP Server Information เปนการกรอกรายละเอยดของ โปรแกรมเวบเซรฟเวอร Apache ใหเราท าการกรอกรายละเอยดใหครบทงหมดแลวกดป ม Next

รปท 4.5 แสดงขนตอนการใส Sever name หนาจอ Appserv 8.6.0 – MySQL Server Configuration เปนการระบรายละเอยดของ โปรแกรมฐานขอมล MySQL ใหใสเรา Password เปน root ทงสองชอง แลวเลอกภาษาเปน UTF-8 แลวคลกป ม Install เพอท าการตดตง

รปท 4.6 แสดงขนตอนการใสรหสผาน

65

หนาจอ Installing แสดงความคบหนาของโปรแกรมทเรมตดตง Appserv

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

หนาจอ Completing แสดงการตดตงโปรแกรมเสรจสนใหเราคลกป ม Finish เพอจบการตดตง โปรแกรม

66

รปท 4.8 แสดงหนาจอขนตอนสนสดการตดตงโปรแกรม AppServ

4.4 วธการใชงาน เขาไปทโปรแกรม Chrome ตรงชอง Urlใหใส http://localhost/clockbt/index1.phpและกด Enter

รปท 4.9 เขาส localhost/clockbt/index1.php จากนนจะน าเขาส หนาเวบระบบการขายนาฬกาตจตอลจะพบกบหนา Index และใหกดป ม เพอเขาไปหนาแรก

67

รปท 4.10 แสดงหนา Index

หนาแรกจะประกอบไปดวย หนาแรก สนคา วธการสงซอ วธการช าระเงน ผจดท า สมครสมาชก ลอกอน และ รายการสนคา

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

68

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

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

จากนนใหท าการใสรหสจากการสมครสมาชก

รปท 4.13 แสดงหนาใสรหสจากการสมครสมาชก

69

จากนนใหท าการใสรหสจากการสมครสมาชก

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

เมอเลอกป มวธการสงสนคา จะแสดงขนตอนการสงสนคาในแตละล าดบขนตอน

70

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

เมอเลอกป ม สนคา จะปรากฏหนาสนคาขนมาใหเลอกซอสนคา

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

71

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

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

เมอกดป ม วธการช าระเงน จะแสดงธนาคารใหโอนเงนผานบญชตาง ๆ

รปท 4.19 แสดงหนาวธการช าระเงน

72

เมอเลอกป ม ตดตอเรา จะปรากฏหนาไลน เฟสบค และเบอรโทรทตดตอเราได

รปท 4.20 แสดงหนาตดตอเรา

เมอเลอกป มผจดท า จะแสดงประวตของผจดท า

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

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

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

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

5.1.1 สรปขนาดของโปรแกรม

ท ชอไฟล ขนาดของไฟล หมายเหต

1 Index1.php 1 KB หนาแรกของเวบไซต 2 Index.php 6 KB หนาหลกของเวบไซต 3 mamber3041.php 6 KB หนาสมครสมาชก 4 Contacr.php 2 KB หนาตดตอเรา 5 userproduct.php 6 KB หนาตะกราสนคา 6 Howtoorder.php 2 KB หนาวธการสงซอสนคา 7 Provider.php 2 KB หนาผจดท า 8 Product.php 5 KB หนารปยหอสนคา 9 show_seach.php 4 KB หนาช าระเงน

10 Products.php 5 KB หนาสนคา 11 Userproduct.php 6 KB หนาคนหาสนคา 12 Thank.php 2 KB หนาขอบคณลกคา

74

ท ชอไฟล ขนาดของไฟล หมายเหต 13 Home.php 10 KB หนาจดการสนคาเฉพาะผดแลระบบ 14 admin.php 7 KB หนาเพมสนคาเฉพาะผดแลระบบ 15 update-product.php 5 KB หนาแกไขสนคาเฉพาะผดแลระบบ 16 delete.php 2 KB หนาลบสนคาเฉพาะผดแลระบบ 17 Adminproduct.php 16 KB หนาดสนคาเฉพาะผดแลระบบ

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

5.1.2 สรปขอผดพลาดทมตอการออกแบบระบบงาน

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

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

5. ระบบยงไมสามารถดงรายงานใบเสรจรบเงนจากการสงซอของลกคาได 6. ระบบยงไมสามารถคนหารายการสนคาไดทงหมด

5.2 ปญหาและอปสรรคในการด าเนนงาน 1. โปรแกรมระบบปฏบตการ Windows 10 มปญหาการท างานไมเสถยร 2. สมาชกในกลมมเวลาในการท างานไมตรงกน 3. ปญหาเกยวกบการท าระบบฐานขอมลเปนไปอยางลาชา 4. ปญหาเกยวกบการแกไขไฟลขอมล 5. การบรหารจดการเวลาสมาชกในกลมยงไมตรงกน ท าใหโปรแกรมเสรจชากวาก าหนด

75

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

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

รายการ ภาคเรยนท 1 มถนายน 61 กรกฎาคม 61 สงหาคม 61 กนยายน 61

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

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

27-28 มถนายน 61

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

29 มถนายน -3 กรกฎาคม 61

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

5 กรกฎาคม 61

เสนอหวขอโครงการ รอบท 2 6 กรกฎาคม 61

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

9 กรกฎาคม 61

สงบทท 2 18-25 กรกฎาคม 61

สงบทท 3 1-17 สงหาคม 61

สอบหวขอโครงการ (เอกสาร) 20-24 สงหาคม 61

ประกาศผลสอบ 29 สงหาคม 61

สงความคบหนาโปรแกรม 50% 10-16 กนยายน 61

สงความคบหนาโปรแกรม 0% 17-23 กนยายน 61

สงความคบหนาโปรแกรม70% 24-30 กนยายน 61

รายการ ภาคเรยนท 2 พฤศจกายน 61 ธนวาคม 61 มกราคม 62 กมภาพนธ 62 ระยะเวลา

1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 สงความคบหนา 90% 2 พฤศจกายน 2561

สงความคบหนา 100% 9 พฤศจกายน 2561

สอบโปรแกรม ระดบปวส.2 10 พฤศจกายน 2561

สอบโปรแกรม ระดบ ปวช.3 24 พฤศจกายน 2561

สงบทท 4 11-21 ธนวาคม 61

สงบทท 5 14-26 มกราคม 62

สงรปเลม ซด และคาเขาเลม 27 มกราคม – 3 กมภาพนธ 2562

76

ล าดบ รายการ จ านวน ราคา (บาท) 1. คากระดาษ A4 2 รม 500 2. คาหมกพมพ 1 ชด 200 3. คาเขาเลม 1 เลม 250 4. คาแผนซด 2 แผน 20 5. คาเบดเตลด 500 500 6. คากลองซด 1 กลอง 25 รวมเปนเงน 1,495

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

บรรณานกรม กลมชนก ศรดอนจนทร. (2559). ทมาของนาฬกาดจตอล. คนหาขอมลวนท 25 ตลาคม 2561, จาก http://www.thaigoodview.com/node/5822 จตพร วณโรจน. (2560). ออกแบบและสรางเวบดวยDremweaverCS6. คนหาขอมลวนท 23 ตลาคม 2561, จากhttp://www.dreamweaver.kruaoh.com เจนจรา ดารา. (2558). คมอและทฤษฏการใชส. คนหาขอมลวนท 11 พฤศจกายน 2561, จาก https://namjenjira.weebly.com ณชชานาฎฐ ภานพฒนนธยา. (2560). สอนสรางเวบไซตขายสนคาออนไลน. คนหาขอมล วนท 8 พฤศจกายน 2561, จาก http://www.dreamweaver.kruaoh.com/ ธนาธป ศรพลอย และวชรพล วงศเยาว. (2559). โครงการขายสนคาออนไลนประเภทกลอง

วงจรปด. หลกสตรระดบประกาศนยบตรวชาชพชนสง สาขาวชาคอมพวเตอรธรกจ, วทยาลยเทคโนโลยอรรถวทยพณชยาการ บญเลศ อรณพบลย. (2559). คมอการใช Xampp เบองตน. คนหาขอมลวนท 10ตลาคม 2561, จาก http://www.thailibrary.in.th/2013/09/06/xampp/ ประเสรฐ คณาวฒนไชย. (2558). คมอการใชงาน My SQL. คนหาขอมลวนท 22 ตลาคม 2561, จากhttps://www.youtube.com/playlist?list กญญาณ ใจเพชร และเจนจรา ชอสวรรณ. (2559). โครงการขายสนคาออนไลนประเภทกระเปา ชาลแอนดคธ. หลกสตรประกาศนยบตรวชาชพชนสง สาขาวชาคอมพวเตอรธรกจ,

วทยาลยเทคโนโลยอรรถวทยพณชยาการ มานพ กองอน. (2559). คมอการใชงานภาษา html. คนหาขอมลวนท 27 ตลาคม 2561, จาก https://www.programmerthailand.com/tutorial/categor มฑนา คมปน. (2560). คมอการใชงาน&แตงภาพ Photoshop CS6. คนหาขอมลวนท 16 กนยายน 2561, จาก https://www.youtube.com/watch?v=McBviiDqrFQ ลขต ยนบญ. (2559). คมอการใชงาน phpMyAdmin. คนหาขอมลวนท 23 ตลาคม 2561, จาก http://flpnuol.weebly.com/uploads/2/4/5/9/24599736/phpmyadmin.pdf สารณ โชตวงศชาคร. (2560). การออกแบบแบนเนอร และโลโก. คนหาขอมลวนท 15 พฤศจกายน, 2561, จาก https://www.programmerthailand.com/ คนงนตย ใจตรง และภรยา ลมเจรญ. (2560). โครงการขายสนคาออนไลนประเภทจวเวลรและ เครองประดบ. หลกสตรประกาศนยบตรวชาชพชนสง สาขาวชาคอมพวเตอรธรกจ, วทยาลยเทคโนโลยอรรถวทยพณชยาการ

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

ประวตผจดท า นางสาวสนนทพย โชระเวก เกดเมอวนท 30 มกราคม 2541 ส าเรจการศกษาชนมธยมตอนตนจากโรงเรยนสมทรปราการ เมอปการศกษา 2557 จบการศกษาหลกสตรประกาศนยบตรวชาชพ(ปวช.) สาขาวชาคอมพวเตอรธรกจ ทวทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2559 ปจจบนอาศย อยบานเลขท 258/155 หม 3 ต าบล บอวน อ.ศรราชา จ.ชลบร 20230 เบอรโทรศพท 082-704-2406 E-mail : Sunantip.bow@hotmail.com Line ID: Bow_sunantip นางสาวศรวรรณ จตรประสงค เกดเมอวนท 1 พฤศจกายน 2541 ส าเรจการศกษาชนมธยมตอนตนจากโรงเรยนเตรยมอดมศกษานอมเกลาสมทรปราการ เมอปการศกษา 2557 จบการศกษาหลกสตรประกาศนยบตรวชาชพ(ปวช.) สาขาวชาคอมพวเตอรธรกจ ทวทยาลยเทคโนโลยอรรถวทยพณชยการ ปการศกษา 2559 ปจจบนอาศย อยบานเลขท 10/7 หม 9 ต าบลส าโรงใต อ.พระประแดง จ.สมทรปราการ 10103 เบอรโทรศพท 080-2599169 E-mail : siriwan_jitpasong@hotmail.co.th Line ID: Tip_60

ATC.03

ขอสอบโครงการระบบคอมพวเตอร

สาขาวชาคอมพวเตอรธรกจ วทยาลยเทคโนโลยอรรถวทยพณชยการ

วนท 14 เดอนสงหาคม พ.ศ. 2561 เรอง ขอสอบโครงการระบบคอมพวเตอรธรกจ (ครงท 1) เรยน คณะกรรมการพจารณาการสอบปองกนโครงการระบบคอมพวเตอรธรกจ ขาพเจา 1. นางสาว สนนทพย โชระเวก รหสนกศกษา 36246 ระดบ ปวส. 2/16

2. นางสาว ศรวรรณ จตประสงค รหสนกศกษา 36715 ระดบ ปวส. 2/16 มความประสงคท าโครงการระบบคอมพวเตอรธรกจเวบไซต E-Commerce ชอภาษาไทยเวบไซตขายสนคาออนไลน ประเภทนาฬกาดจตอล ชอภาษาองกฤษ E-Commerce for Digital clock โดยม อาจารยทปรกษาหลก คออาจารยสมลฑา สขสวสด อาจารยทปรกษารวม คออาจารยธนาวฒ วชย พรอมนไดแนบเอกสารประกอบการขอสอบโครงการระบบคอมพวเตอร โปรแกรมระบบคอมพวเตอร (Software) จ านวน 1 ชด โครงการระบบคอมพวเตอรธรกจ (เอกสารบทท 1-3) จ านวน 1 ชด จงเรยนมาเพอโปรดพจารณาอนมต -------------------------------------------------------------------------------------------------------------------------------------

ลายมอชอ..............................................นกศกษา (นางสาวสนนทพย โชระเวก)

หวหนากลมโครงการ