คณัสนันท์ วิเชียรศรี Kanassanan Wichiansri¹‚ปรแกรมขายสินค้า... · 3.4 Use Case Diagram Shopping Cart 31 3.5

โปรแกรมขายสนคาบนโทรศพทมอถอ ไอโฟน Mobile Commerce On Iphone

คณสนนท วเชยรศร Kanassanan Wichiansri

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

คณะวทยาการและเทคโนโลยสารสนเทศ มหาวทยาลยเทคโนโลยมหานคร

ปการศกษา 2558

I

หวขอโครงงาน โปรแกรมขายสนคาบนโทรศพทมอถอ ไอโฟน นกศกษา นายคณสนนท วเชยรศร รหสนกศกษา 5717700001 ปรญญา วทยาศาสตรมหาบณฑต สาขาวชา เทคโนโลยสารสนเทศ พ.ศ. 2558 อาจารยผควบคมโครงงาน ผศ.ดร.หมดอามน หมนหลน

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

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

II

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

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

คณสนนท วเชยรศร

III

สารบญ

หนา บทคดยอ I

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

สารบญ III

สารบญตาราง V

สารบญรป VI

บทท 1 บทน า 1

1.1 กลาวน า 1

1.2 ภมหลงความเปนมา 1

1.3 ปญหาและแรงจงใจ 1

1.4 แนวทางการแกปญหา 2

1.5 วตถประสงคของโครงงาน 2

1.6 ขอบเขตของโครงงาน 2

1.7 ประโยชนทคาดวาจะไดรบ 5

1.8 ขนตอนในการด าเนนงาน 5

1.9 ระยะเวลาในการด าเนนงาน 5

บทท 2 ทฤษฎทเกยวของ 6

2.1 กลาวน า 6

2.2 ความรเกยวกบระบบขายสนคาผานโทรศพทมอถอ 6

2.3 ความรเกยวกบ Unified Modeling Language (UML) 7

2.3.1 ยสเคสไดอะแกรม (Use Case Diagram) 7

2.3.2 ซเควนไดอะแกรม (Sequence Diagram) 9

2.3.3 คลาสไดอะแกรม (Class Diagram) 11

2.4 ความรเกยวกบ โปรแกรม Magento 2.0 13

2.4.1 Feature ทส าคญใน Magento 14

2.4.2 ดาวนโหลด Magento 14

2.4.3 การตดตง Magento 14

2.4.4 การปรบแตง Magento 15 2.5 ความรเกยวกบภาษา Swift 16

2.5.1 พนฐาน ของภาษา Swift 17

IV

สารบญ (ตอ) บทท 3 ออกแบบระบบ 28

3.1 โปรแกรมทน าเสนอ 28 3.2 การออกแบบแผนภาพการท างาน (Use Case Diagram) 28

3.2.1 Product 29 3.2.2 Search 30 3.2.3 Shopping Cart 31 3.2.4 Register 32 3.2.5 Login 33 3.2.6 Order 34 3.2.7 Payment 35 3.2.8 Management 36 3.2.9 Member 37

3.3 แผนภาพ (Activity Diagram) 28 3.3.1 Product 38 3.3.2 Search 38 3.3.3 Shopping Cart 39 3.3.4 Register 40 3.3.5 Login 40 3.3.6 Order 41 3.3.7 Payment 42 3.3.8 Member 43

3.4 แผนภาพการท างาน Sequence Diagram 3.4.1 Product 43 3.4.2 Search 44 3.4.3 Shopping Cart 44 3.4.4 Register 45 3.4.5 Login 46 3.4.6 Order 47 3.4.7 Payment 48 3.4.8 Member 48

V

สารบญ (ตอ) 3.5 แผนภาพความสมพนธ Class Diagram 49

3.5.1 Product 49 3.5.2 Search 50 3.5.3 Shopping Cart 50 3.5.4 Register 50 3.5.5 Login 50 3.5.6 Order 51 3.5.7 Payment 51 3.5.8 Member 52

บทท 4 การพฒนาระบบและการด าเนนการ 4.1 เครองมอและอปกรณในการพฒนาระบบ

4.1.1 Hardware 53 4.1.2 Software 53 4.1.3 ออกแบบหนาจอในการท างาน 53 4.1.4 Sitemap 53

4.2 หนาจอผลการด าเนนงาน 53 4.2.1 หนาแรก 54 4.2.2 Category and subcategory 55 4.2.3 Search 57 4.2.4 Product Detail 56 4.2.5 Add to cart 58 4.2.6 Shopping Cart 59 4.2.7 Order 60 4.2.8 Register 61 4.2.9 Login 62 4.2.10 Login to back office 62 4.2.11 Manage Order 63 4.2.12 Order Detail 63 4.2.13 Confirm Order 64 4.2.15 Confirm Shipment 65

VI

สารบญ (ตอ)

บทท 5 ผลการด าเนนงาน 66 5.1 ปญญาของการด าเนนงาน 66 5.2 ขอเสนอแนะของในการด าเนนงาน 66

เอกสารอางอง 67 ภาคผนวก 68

VII

สารบญตาราง

ตารางท หนา 1.1 ระยะเวลาการด าเนนงาน 5 2.1.อธบายสญลกษณทใชใน Use Case Diagram 8 2.2 อธบายสญญาลกษณ Sequence Diagram 9 2.3 องคประกอบของ Class Diagram 12 3.1 Use Case Diagram Product 29 3.2 Use Case Diagram Login 30 3.3 Use Case Diagram Register 31 3.4 Use Case Diagram Shopping Cart 31 3.5 Use Case Diagram Order 34 3.6 Use Case Diagram Payment 35 3.7 Use Case Diagram Configuration 36 3.8 Use Case Diagram Shipment 37

VIII

สารบญรป

รปท หนา 1.1 แผนผงการท างาน 4

1.2 ระยะเวลาด าเนนงาน 5

2.1 ตวอยาง Use Case Diagram 9

2.2 ตวอยาง Use Case e-commerce 10

2.3 Relationship Association 12

2.4 Extension 15

2.5 Them 16

2.6 Welcome to Xcode 17

2.7 Tools Xcode 17

3.1. Use Case Diagram 28

3.2 Use Case Diagram Product 29

3.3 Use Case Diagram Search 30

3.4 Use Case Diagram Shopping Cart 31

3.5 Use Case Diagram register 32

3.6 Use Case Diagram login 33

3.7 Use Case Diagram Order 34

3.8 Use Case Diagram Payment 35

3.9 Use Case Diagram Management 36

3.10 Use Case Diagram Member 37

3.11 Activity Diagram Product 38

3.12 Activity Diagram Search 39

3.13 Activity Diagram Shopping Cart 39

3.14 Activity Diagram register 40

3.15 Activity Diagram login 40

3.16 Activity Diagram Order 41

3.17 Activity Diagram Payment 42

3.18 Activity Diagram Management 42

3.19 Activity Diagram Member 43

IX

สารบญรป(ตอ)

3.20 Sequence Diagram Product 43 3.21 Sequence Diagram Search 44 3.22 Sequence Diagram Shopping Cart 45 3.23 Sequence Diagram register 46 3.24 Sequence Diagram login 46 3.25 Sequence Diagram Order 47 3.26 Sequence Diagram Payment 47 3.27 Sequence Diagram Management 47 3.29 Sequence Diagram Member 47 3.30 Conceptual Class Diagram 41 4.1 แผนผงการท างานของระบบ 53 4.2 หนาแรก 54 4.3 Category and sub category 55 4.4 Search เจอสนคา 56 4.5 Search ไมเจอสนคา 56 4.6 รายละเอยดสนคา 57 4.7 Add to cart 58 4.8 Shopping Cart 59 4.9 Place order 60 4.10 Register 61 4.11 Login เขาหนา Application 62 4.12 Login เขาระบบหลงบาน 62 4.13 Order List 63 4.13 Order Detail 64 4.14 Confirm Order 64 4.15 Confirm Shipment 65

1

บทท 1 บทน า

1.1 กลาวน า ปจจบนเทคโนโลยดานโทรศพทมอถอ สมารทโฟน (Smart phone) มบทบาทตอการใช

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

1.2 ภมหลงความเปนมา หางหนสวนจ ากด เคยวทอง แอนด ซพโปร ด าเนนกจการจ าหนายสนคาใหกบ บคคล

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

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

ใหมมากมาย ในปจจบน เดมมชอเสยงในกลมตางชาตตะวนตก เชน เวบไซต Amazone.com

ebey.com เปนตน ปจจบน ‚http://thai.alibaba.com/‛ มชอเสยโดงดงจาก ระบบพาณชอเลกทรอนกส โดยการน าของ แจกมาร ซงเดมเปนเพยงครสอนโรงเรยนประถมศกษา เทานน เมอเขามงมนท าธรกจดาน พาณชยอเลกทรอนกส กสามารถประสบความส าเรจได จนมชอเสยงโดงดงจงเปนทมาของแรงจงใจในครงน หางหนสวนจ ากดเคยวทองแอนดซพโปร มเวบไซตเพอ แนะน าสนคาใหกบลกคา แตยงขาดระบบขายสนคา และ แอปพลเคชน จงท าใหลกคาไมไดรบความสะดวกในการเลอกซอสนคา และ เสยโอกาสทจะไดลกคากลมใหมๆและความไดเปรยบเชงกลยทธ ของธรกจ

2

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

commerce) ระบบพาณชอเลกทรอนกสใชซอฟตแวร Magento2.0 ซงเปนระบบขายสนคาออนไลนโอเพนซอรส (Open source) ท างานบนระบบปฏบตการวนโดว ใชฐานขอมลมายเอชควแอล (MySQL5.6 ) ใชเอกแอม (XAMPP) จ าลองเครองคอมพวเตอรสวนบคคล เปนเวบเซฟเวอร ตดตอระหวางโทรศพท กบ เวบเซฟเวอรผานทางโปรโตคลอ HTTP แสดงผนบน UIWebView

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

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

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

1.6 ขอบเขตของโครงงาน ขอบเขตของการด าเนนการมดงน 1.6.1 พฒนาเวบไซตส าหรบขายสนคา

1.6.1.1 หนารานคา หนารานเปนหนาเวบไซตมความสามารถดงน

x แสดงรายละเอยดสนคา x คนหาสนคาไดตามหมวดหมสนคา x สมครสมาชก

x จดการขอมลสมาชก

x สงซอสนคา ผานหนาเวบไซตได

3

1.6.1.2 หลงรานคา หลงรานเปนหนาเวบไซตมความสามารถดงน

x จดการกบรานคา o ก าหนดคาเรมตนส าหรบรานคา o เพม ลบ แกไข คนหา

x จดการกบสนคา o หมวดหมสนคา และ หมวดหมยอย o เพม ลบ แกไข คนหา

x จดการกบใบสงซอ

o แกไขคนหา ก าหนดสถานะ x จดการกบสมาชก

o แกไข คนหา ก าหนดสถานะ

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

1.6.2.1 Application ความสามารถของ Application มดงน x แสดงรายละเอยดสนคา x คนหาสนคาไดตามหมวดหมสนคา x สมครสมาชก

x จดการขอมลสมาชก

x สงซอสนคา ผานหนาเวบไซตได

x เขยนบทวจารณสนคา จากขอบเขตงานดงกลาวสามารอธบายเปนแผนภาพดงรปท 1.1 แผนผงการ

ท างานของระบบโดยรวม (Business Process)

4

รปท

1.1 แผ

นผงการท า

งาน

(Busin

ess P

rocess)

5

1.7 ประโยชนทคาดวาจะไดรบ จากการศกษาปญหา และแนวทางแกไขดงกลาว วตถประสงคทจะไดรบ ดงน

1.7.1 ท าใหสามารถด าเนนธรการการคาผานระบบพาณชยอเลกทรอนกสได 1.7.2 สามารถสงซอสนคาผานไดทงหนาเวบ และ Application

1.7.3 เพมกลมลกคาใหม

1.7.4 เพมความนาเชอถอและโอกาสทางธรกจ

1.8 ขนตอนในการด าเนนงาน เพอใหบรรลวตถประสงคทไดวางไวมข นตอนการด าเนนงาน ดงน 1.81 ศกษาระบบการโปรแกรมขายสนคาในรปแบบของ M-commerce

1.8.2 ออกแบบระบบงานและโปรแกรม

1.8.3 พฒนาโปรแกรม

1.8.4 ทดสอบโปรแกรมและการใชงาน

1.8.5 ตรวจสอบและแกไขขอผดพลาด

1.8.6 จดท าคมอการใชโปรแกรม

1.8.7 เรมใชงานจรง

1.9 ระยะเวลาในการด าเนนงาน ระยะเวลาในการด าเนนงานเรมตนเดอน สงหาคม 2558 สนสดเดอน มกราคม 2558 รวมระยะเวลาการพฒนาระบบ 6 เดอน ดงตาราท 1.1

ตารางท 1.1 ระยะเวลาการด าเนนงาน

6

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

2.1 กลาวน า เทคโนโลยพาณชอเลกทรอนกส ไดมการพฒนาอยางตอเนองจากท า งานบนเวบ

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

2.2 ความรเกยวกบระบบขายสนคาผานโทรศพทมอถอ เทคโนโลยเขามามบทบาทตอการด าเนนธรกจมากยงขน หลายๆธรกจตองปรบตวใหทนสถานการณเชนเดยวกบเชนเดยวกนกบระบบพาณชอเลกทรอนกส E-Commerce ทมการใชโทรศพทเคลอนทสมารทโฟน (Smart phone) หรอ แทปเลต (Tablet)มาประยกตใชเพอใชเปนชองทางใหม ในการซอขายจนกลายเปนกลยทธทางธรกจใหมทเรยกวา M-Commerce

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

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

Commerce มากยงขน

M-commerce สามารถแบงตามความสมพนธทางการตลาดระหวางผซอและผขายสนคาหรอบรการ ได 3 รปแบบดงน

2.2.1 รปแบบธรกจกบธรกจ (Business to Business :B2B) เปนรปแบบการท าธรกจระหวางผประกอบการ ดวยกน มการซอขายมกเรยกยอๆวาแบบ B2B เปนรปแบบการท าธรกรรม ระหวางผด าเนนธรกจดวย กนเขามาแลกเปลยนซอขายสนคาและ บรการรวมกน เชน การซอขายสนคาหรอบรการผานทางแอบพลเคชน (Application) ทถกตดตงลงบนโทรศพทมอถอสมารทโฟน (Smart Phone) ดงกลาวตามวตถประสงค ทท างาน เพอท าการ ตกลงซอขายสนคาและบรการ

7

2.2.2 แบบธรกจกบผบรโภค (Business to Consumer : B2C)

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

2.2.3 แบบผบรโภคกบผบรโภค (Consumer to consumer : C2C )

เปนรปแบบ ของ M-Commerce ทเนนการตดตอซอขายสนคาหรอบรการ โดยใชโทรศพทเคลอนท ผานชองทางอนเตอรเนตเฉพาะผบรโภคคนสดทาย โดยกรณนผซอและผขาย สนคาจ านวนมากจะเขามาเพอนท าการตดตอแลกเปลยนซอขาย สนคาและบรการตางๆดวยตวเอง สวนใหญพบในการซอขายสนคามอสอง[1]

2.3 ความรเกยวกบ Unified Modeling Language (UML)

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

2.3.1 ยสเคสไดอะแกรม (Use Case Diagram) ในการวเคราะหและออกแบบระบบนนสงแรกทจ าเปนทสดคอ การเขาใจระบบโดยรวม จดประสงคหลก คอ อธบาย Requirement

ของระบบซงเปนขนตอนแรกของการออกแบบระบบ โดยใชสญลกษณในการเขยนดงตารางท 2.1 อธบายสญลกษณทใชใน Use Case Diagram

8

สญลกษณ ความหมาย

ผทกระท ากบระบบควบคมดแลกจกรรมของระบบ

หนาทหรองานตางๆในระบบ

Relationship

แสดงความสมพนธเชอมระหวาง Use Case กบ Actor

เสนแบงของเขตระหวางระบบกบ Actor ม Use Case อยภายใน

ตารางท 2.1 แสดงสญลกษณทใน Use Case Diagram

1) Actor คอ ผใชงานในระบบ หรอ การตอบโตระหวางกน เชน การถายโอนขอมล, การเปลยนแปลงขอมล

2) Use case คอ การกระท าในระบบโดยมการตอบสนองจากผใชงาน

3) Relationship คอ เสนทใชแสดง ความสมพนธระหวางผใชงานระบบ (Actor) กบ

การท า (Use case) หรอ การกระท ากบการกระท าซง Use Case มทงหมด 3 แบบ ดงน

a. ความสมพนธ แบบ Extend คอ การกระท าแบบ สบทอดจาก การกระท าหนงเปนพนฐานมค าวา <<extend>>ก ากบระหวางเสนความสมพนธ

b. ความสมพนธ แบบ Include คอ การเรยกใชงานอกครงในการกระท าหนง มค าวา <<include>> ก ากบระหวางเสนความสมพนธ

c. ความสมพนธ แบบ Generalization คอ การระท าหนง สบทอดคณสมบตจากอกการ กระท าหนง เชนเดยวกบการ Extent ในดานโปรแกรมมง

4) System คอ เสนแบงขอบเขตระหวาง Actor กบ Use Case ทอยภายใน

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

9

รปท 2.3 ตวอยาง Use Case Diagram

ส าหรบ Use Case Diagram ทกๆ Use Case จะน าไปสรางเปน Sequence Diagram

ตอไป

2.3.2 ซเควนไดอะแกรม (Sequence Diagram) เปนแผนภาพทแสดงใหเหนถงการปฏสมพนธ (Interaction)ระหวางออบเจกตของคลาส โดยเฉพาะการสง Message ระหวาง ออบเจกต (Object) ตามล าดบของเวลา (Sequence) ทเกดเหตการณขนจากนอยไปมาก โดยจะมสญลกษณแสดงใหเหนล าดบของการสง Message ตามเวลาสงอยางชดเจน แสดงลกษณะของ Sequence Diagram สวนของสญลกษณตางๆตามตารางท 2.2 มดงน


Actor ผทกระท ากบระบบควบคมดแลกจกรรมของระบบ

Object, Class

LifeLine เสนบอกเวลาในการท างานแนวตงของแตละสวนงาน

Messaet() Call Message Message ทออบเจคผสงเรยกใชเมทธอดของออบเจคผรบ

ReturnValue Return Message สงคาคนกลบมาจากทสงคาไปรองขอ

Focus of Control

ตารางท 2.2.1 แสดงสญลกษณทใชใน Sequence Diagram

Object : Class

10


Self Message

Message ทมการประมวลผลหรอการคนคาทไดภายในObject

ตารางท 2.2.2 แสดงสญลกษณทใชใน Sequence Diagram

รปท 2.2 ตวอยาง Sequence Diagram e-commerce

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

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

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

เมอ Sequence Diagram ครบแลวขนตอนตอไปน า Sequence Diagram แตละตวไป

11

สรางเปน Class Diagram เปนล าดบถดไป

2.3.3 Class Diagram เปนแผนภาพทใชแสดง Class และความสมพนธระหวาง Class

ททางานรวมกนในแงตาง ๆ (Relation) โดยสญลกษณทใชในการแสดง Class นน จะแทนดวยสเหลยมทแบงออกเปน 3สวนในการแสดงชอของ Class, Attribute, และฟงกชนตามลาดบสญลกษณ Class ประกอบดวย 3 สวนคอ

x Name คอ ของ Class

x Attribute คอ คณสมบตของ Class

x Methods คอ พฤตกรรมของ Class

ในการเขยนสญลกษณแทน Class นนตองค านงถง ระดบการเขาถงคลาสนนๆ ซงทางสถาปตยกรรมซอฟตแวรไดออกแบบการเขาถงคลาส (Visibility) แบงออกไดเปน 3 ประเภท ไดแก

x 1. Private (สญลกษณ - ) หมายถง Attribute หรอ ฟงกชนทสามารถมองเหนไดจากภายในตวของ Class เองเทานน

x 2. Protect (สญลกษณ # ) หมายถง Attribute หรอ ฟงกชนทไวสาหรบการทาการสบทอดโดยเฉพาะ

x 3. Public (สญลกษณ + ) หมายถง Attribute หรอ ฟงกชนทสามารถมองเหนไดจากภายนอก และสามารถเปลยนคา อานคาหรอเรยกใชงานได ในองคประกอบทง 3 แบบนสามารถอธบายการท า Class

Diagram ดงตารางตอไปน

12

Class

Attribute Attribute Name

Operation GetproductByProductID()

Aggregation Relationship เปนสวนประกอบของกนและกน

Composition Relationship เปนสวนหนงของกนและกน

ตารางท 2.3 องคประกอบของ Class Diagram

2.3.3.1 Association เปนการอธบายความสมพนธเชงการเชอมโยงโครงสรางระหวางวตถทก าหนดความสมพนธ ดงภาพตวอยางท 2.3 ตอไปน

รปท 2.3 Relationship Association

x Aggregation Relationship เปนความสมพนธ Association แบบหนง คอ Object หนง ม Objects อนๆ เปนสวนประกอบอาจเรยกวา whole-part relationship (ทงหมด-สวนประกอบ) ซงมกจะใชค าวา consists of , contains , is part of

13

x Composition Relationship เปนความสมพนธแบบ Aggregation ทเขมงวด(Strong)ขนซงจะมชวงชวตรวมกน

2.4 ความรเกยวกบ โปรแกรม Magento 2.0

Magento เปนระบบจดการเนอหาบนเวบไซต (Content Management System –

CMS) ตวหนง ซง ออกแบบมาเพอการท า e-commerce โดยเฉพาะ ซง CMS ทออกแบบส าหรบ e-commerce ในปจจบนกมการพฒนาออกมาใหใชหลายตว เชน Os-Commerce,

Presta Shop และ Open Cart เปนตน ซงแตละตวมเอกลกษณหรอการใชงานแตกตางกนออกไป Magento เปน CMS แบบ Open Source ซง ผพฒนาอนญาตใหผใชงานหรอผทสนใจน าไปพฒนาตอได และ สามารถน ามาใชในเชงธรกจไดโดยไมมคาใชจาย ในประเภท Community เทานน

Magento ถกพฒนาขนโดย บรษท ชอวา Varien (ปจจบนเปลยนชอเปน Magento Inc.

ซงภายหลงถกซอโดย eBay.com) ออก Version Beta ครงแรก ในวนท 31 มนาคม ป 2008

โดยใช Zend Framework เปนพนฐาน ทมงานผพฒนา สวนหนงเคยเปนทมทพฒนา Oscommerce มากอนMagento ม Function เกยวกบการใชงาน e-commerce ทครบครนท CMS เพอ e-commerce ตวอนๆ ไมม เชน

x ระบบการออกโปรโมชน x การเปรยบเทยบสนคา x สนคาทช นชอบ x การรววสนคา

ขอไดเปรยบอยางหนงของ Magento คอ Magento สามารถทจะ Design หนาตาของรานคาของเราโดยอสระ ท าใหรานคาทท าดวย Magento นนสามารถ Design หนาตา ไดไมจ ากดรปแบบ แตละเวบไซตทท าออกมา สามารถมหนาตาแบบไหนกได ขนอยกบฝมอของผใชงาน ปจจบน Magento ถกน าไปใชกบเวบไซตดงๆ ทวโลก มากกวา 240,00 เวบไซต

Magento ในไทย คนไทยยงนยมใชนอยเหต เพราะ Magento ไมใชเวบส าเรจรป ทตดตงแลวจะมหนารานใหเลยตองมการปรบแตง Coding เพมเตม และออกแบบหนารานเอง โดยใช Zend Framework ซงตองใชความรความสามารถทางดาน Programming ในระดบทสงพอสมควรดวยสาเหตนจงท าใหการใชในประเทศไทยอยในวงจ ากด แตถาเขาใจแลว จะพบวา การสรางรานดวย Magento นนมความยดหยนสงมากแทบจะไมมขอจ ากดในเรองการพฒนาเลยซงปจจบนพฒนาตอเนองจนมาถง เวอรช น 2.0 ซงเปน เวอรช นลาสด [2]

14

Magento แบงออกเปน 3 รน (Edition) ไดแก Enterprise Edition, Community

Edition และ Magento for small business ถอวาเปนกลยทธทดอยางหนงของ Open Source

ทจะสามารถท าใหมรายไดและพฒนาตอไปได

x Magento Enterprise รนนเหมาะส าหรบบรษทขนาดใหญ เปนระบบทม

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

x Magento Community รนนเหมาะส าหรบ Developer ทสามารถดาวโหลด

Source Code มาท าการพฒนาปรบแตงเพมเตม ใหเปนไปตามความตองการ รนนทาง Magento เปดใหดาวโหลดฟรไมมคาใชจาย เวอรช นปจจบน พฒนามาถง เวอรช น 2.0 วนท 19 ธนวาคม 2558

x Magento for small business รนนเหมาะส าหรบรานคา

หรอ ธรกจขนาดเลกโดยทเจาของรานไมตองตดตงเอง โดยสามารถสมครใชงานกบทาง Magento ไดเลย โดยเวบไซตของราน จะถกเกบไวทโฮสของ Magento รนนคดคาใชจายเปนรายเดอน[3]

2.4.1 Feature ทส าคญใน Magento

2.4.1.1 เมอรานคามขนาดใหญขน สามารถบรหารจดการไดโดยงาย

2.4.1.2 มระบบ template งายตอการแกไข และมความสวยงาม ขนอยกบความสามรรถและความเขาใจโครงสรางของระบบ

2.4.1.3 มการวางโครงสรางของโคด (Code)ไวดงายตอการตดตง อพเกรด และแกไขและการปรบแตงในสวนตางๆของระบบ

2.4.1.4 รองรบการ SEO ทดมากตด Google ไดไว ท างานรวมกบระบบการช าระเงนดงๆไวหลายตวใหใชงานไดงาย เชน PayPal, โอนเงนผานธนาคาร เปนตน

2.4.1.5 บรหารจดการหลายรายคาไดโดยใช Admin รวมกน เชน บรษทมเวบไซต 20 เวบไซต สามารถใช ระบบจดการ เพยงหนงเดยวได

15

2.4.2 การดาวนโหลด Magento

โปรแกรม Magento สามารถดาวนโหลด ทเวบไซต http://www.magento.com

2.4.3 การตดตง Magento

ขนตอนการตดตง ภาพผนวก ก 2.4.4 การปรบแตง Magento

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

2.4.4.1 Extension เมอผใชงานตองการความสามารถอนทนอกเหนอจาก รนดาวนโหลดฟรไมม แตรนจายเงนม นน กยงสามาใหซอความสามารถนนๆ มาใชงานไดดวย โดยไมจ าเปนตองซอ รนเสยเงนซงราคาแพง ดงรปท 2.3

แสดงตวอยาง Extension

รปท 2.4 แสดง Extension

2.4.4.2 Theme หนากากแสดงผลนอกจากความสามารถทซอเพมไดยงม

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

16

รปท 2.5 หนากาก (Them) Magento

2.4.5 ตวอยางเวบไซตทใช Magento

2.4.5.1 https://online.orientalprincess.com

2.4.5.2 https://online.cutepress.com

2.5 ความรเกยวกบภาษา Swift

ภาษา Swift เปนนกศกษารนแรกของมหาวทยาลยเทคโนโลยมหานครทไดศกษาในหลกสตร เนองจาก เพงเปดตวอยางสดใหม ในงาน WWDC ท Appleไดจดขน ภาษา Swift

เปนภาษา ทใชในการเขยนโปรแกรมทพฒนาใหมจาก Apple ซงเปดตวเมอวนท 3 มถนายน 2557 โดยพฒนามาแทน Objective-c โดย Apple จะน ามาเปนภาษาหลกส าหรบพฒนาทกอยาง ของ Apple ทก Platform ทง OSX , IOS, Watch, OSTV ภาษาสวฟต ม Syntax ทางภาษาคลายกบ Objective-c และประยกตมาจากอกหลายๆภาษา เชน C#,Ruby ,Python และยงคงตองรกษาสภาพการท างานใหยงคงอยในอปกรณตางๆนนไมใชเรองงายเลย การท Apple

เปลยนภาษาจาก Objective-C มาเปน สวฟท เองเปนเรองนาล าบากเพราะตองปรบปรง ไลบราร (Library) ทเขยนขนจาก Objective-C จ านวนมากแลว และยงตองรกษาความสมพนธของโมเดลใหเหมาะสมกบ Cocoa Framework ดวย ซงนนกยอมบงบอกวา นกพฒนาทก าลงหนมาใชภาษาสวฟท จะสามารถ Coding เชอมตอกบ Obejctive-C ของตนเองทเคยพฒนามาได

17

เรมตนการใชงานภาษาสวฟตดวย โปรแกรม Xcode ดงภาพท 2.5

รปท 2.6 Welcome to Xcode

หลงจากทสรางโปรเจคแลวนนจะปรากฏหนาจอส าหรบการท างาน ดงภาพท 2.6

รปท 2.7 หนาจอของ Tools Xcode

18

พนทในการท างานของโปรแกรม Xcode แบงออกเปน 3 สวนหลกๆ ดงน 1. คอ Navigator View เปนสวนแสดง File ทไดท าการสรางเอาไว 2. คอ UI User Interface View เปนสวนหนาจอทใชส าหรบการออกแบบ Application

ทตองการ 3. คอ Utilities View เปนสวนรวบรวมเครองมอทใชในการสรางหนาจอ Interface และ

ยงมเมนในการปรบเปลยนคณสมบตตางๆอกดวย

2.5.1 พนฐานของภาษา Swift

2.5.1.1 Constant และ Variable อยางแรกท Swift ตางจาก C คอ ก าหนดใหมตวแปรอย 2 แบบ คอ Constant และ Variable

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

การก าหนด Constant และ Variable จะเรมดวยการตงชอ และ ก าหนดคาตามประเภทของขอมล (เชน ตวเลข หรอขอความ)

� Comment คอ ขอความในสวนทใชอธบายโคด ซง Compiler จะไมน าเอาโคดทอยใน Comment ไปประมวลผล ซงวธใส Comment ใน Swift จะมเหมอนกบภาษา C และ Objective C

หากตองการใส Comment ในบรรทดเดยวจะขนตนดวย // การใส comment หลายๆ บรรทดใน swift สะดวกกวาการใส Comment ในภาษา C คอ หากใส Comment ไปแลว สามารถใส /* */ ครอบของเดมไดเลย ชวยเพมความสะดวกในการใส Comment

2.5.2.2 Tuples และ Optionals

� Tuples คอ การรวมขอมลหลายๆ ขอมลใหเปนกลมเดยวกน โดยขอมลทน ามาใสใน Tuples นนไมจ าเปนตองเปน Type เดยวกน ตวอยางของ Tuples เชน (‚edge‛, 14) คอการน าเอาขอมล String กบขอมล Integer มาจบรวมกนเปน Tuples

� Optional เปนสถานะทบอกใหทราบวา Variable หรอ Constant นนๆ มคาอยหรอไม ซงถามคา กสามารถน าเอาคาไปใชงานได แตถาไมมคาอย กไมตองท าอะไร หรออาจกลาวไดวา Optional คอ การอนญาตให Variable หรอ Constant เกบขอมลแบบ ไมมคา (No Value) หรอจะมคากได

19

� Optional Binding คอ การตรวจสอบวา optional มคาหรอไม โดยหากมคากใหก าหนดคาใหกบ Constant หรอ Variable โดย Optional

blinding สามารถน าไปใชตรวจสอบเงอนไขใน if หรอ while ได โดยหากสามารถก าหนดคาใหกบ Constant หรอ Variable ไดจะใหคา Bool เปน true แตถาไมได กใชคา false

2.5.2.3 Operator

� Operator ใน Swift

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

� AND operator (&&) ใชตรวจสอบคาความจรง โดยจะใหผลตรวจสอบเปนจรง เมอ คาทน ามาตรวจสอบเปนจรงทงหมด

� Add operator (+) จะใชส าหรบบวกตวเลข 2 ชดเขาดวยกน

� Increment operator (++) ใชเพอแกไขคา โดยบวกคาเขาไป 1

รปแบบของ Operator ใน Swift จะคลายกบ C แตจะมการพฒนาปรบปรงใหดกวาเดม เชน ในการใช assignment operator (=) เพอก าหนดคาใหกบ Variable หรอ Constant จะไมมการ Return คาใดๆ เปนการบอกวา = ใชเพอก าหนดคาเทานน ซงหากตองการตรวจสอบคา กจะใชเครองหมาย == แทน

� ค านวณคาทางคณตศาสตรดวย Arithmetic Operators ภาษา Swift

ไดเตรยม Arithmetic Operators ส าหรบการค านวณคาตวเลขเชนเดยวกบภาษา C คอการใช บวก (+), ลบ (-), คณ(*) และหาร (/)

� การใช Increment และ Decrement Operator ในภาษา Swift ม increment operator(++) และ decrement operator(–) เชนเดยวกบภาษา C โดย increment operator เปนการบวกเพมคาเขาไปอก 1 สวน decrement operator จะเปนลบคาออกไป 1 และตอไปนเปนตวอยางการใช increment operator(++) และ decrement operator(–)

� สลบเครองหมายดวย Unary Minus Operator(-) ใชส าหรบสลบคาจากบวกเปนลบ หรอลบเปนบวก โดยเครองหมาย – จะอยดานหนา (prefix) และตองเขยนตดกบคาทตองการสลบระหวางคาบวกและลบ

20

โดยหามเวนวรรค เชน ใหเขยนเปน -23, -myVar ไมสามารถเขยนเปน – 23 หรอ – myVar

� Unary Plus Operator (+) เปน prefix ทใสหนาคาตางๆ แลวคานนๆ จะยงคงเดม ไมเปลยน เชน หากเปนเลขตวเลขตดลบอย กยงคงเปนลบเชนเดม หรอถาเปนบวกอยแลวกจะมคาเทาเดม

� Compound Assignment Operators คอการรวมเอา assignment

operator (=) ไปรวมกบ operator อนๆ เชน += (โดยมชอเรยกใหมวา addition assignment operator) เปนการรวม Operator เพอสงใหท างาน 2 อยางในเวลาเดยวกน

2.5.2.4 String และ Character

� String คอ ชดของตวอกษรทเรยงตอกน เชน ‚swift tutor‛ หรอ ‚brazil‛

โดยภาษา Swift ไดเตรยม Type ประเภท String เพอเกบและใชงานชดของตวอกษร

� String Literals ดงทกลาวไปแลว Literal คอขอความหรอตวเลขทปรากฏอยในโคด ซงวธก าหนด Literal ใหกบ String Type นน จะอยภายในเครองหมาย ‚ ‛ (double quotes) โดยเราสามารถก าหนดคา String Literal ใหกบ Variable หรอ Constant กได

การก าหนด String Literal ใหกบ Variable หรอ Constant นน สามารถใสตวอกษรแบบพเศษ เพอก าหนดรปแบบใหกบ String ดงน

� \0 หมายถง null character

� \n หมายถง ขนบรรทดใหม ในแบบ line feed

� \r หมายถง ขนบรรทดใหม ในแบบ carriage return

� \\ หมายถงการแสดงคา \ (เรยกวา backslash)

� \‛ หมายถงการแสดงอกษร ‛ (เรยกวา double quote)

� \’ หมายถงการแสดงอกษร ‘ (เรยกวา single quote)

� \t หมายถงการเคาะ <tab> (ในแนวนอน) � ก าหนด String ส าหรบ Variable

หากตองการก าหนด Variable ส าหรบเกบ String ยาวๆ เรมแรก จะตองก าหนด String วางๆ (empty string) เสยกอน เปนการเตรยมพรอมส าหรบการก าหนดขอความลงใน Variable ตอไป โดยสามารถท าได 2 แบบ ดงน

21

� ก าหนด empty string เชน var myString = ‚‛

� ก าหนดดวย initializer เชน var myString = String()

� การนบตวอกษรใน String วธนบตวอกษรใน String จะใช Global

Function ทช อวา countElements() โดยหากตองการหาวาขอความทสนใจมกตวอกษร กเพยงสงคาไปยงฟงกชน countElements

� การเชอม String และ Character

String และ Character สามารถเรยงตอกนไดโดยใช additional

operator (+) แตหากเปนการตอทายขอความเดม ดวยขอความอกชดหนง เราสามารถใช addition assignment operator (+=) แทนการใช additional operator (+)

� การเปรยบเทยบ String ในภาษา Swift มวธเปรยบเทยบ String อย 3 แบบ ไดแก string equality, prefix equality และ suffix equality โดยผลลพธของการเปรยบเทยบจะไดเปน Bool (ไดคาเปน true หรอ false)

� อกษรตวพมพใหญและตวพมพเลกหาก String เปนขอความภาษาองกฤษ เราสามารถสลบจากอกษรตวพมพใหญ (Upper case)

เปนอกษรตวพมพเลก (Lower case)

� Unicodคอ มาตรฐานสากลในการก าหนดรหส เพอใชแทนตวเลข ตวอกษร หรออกขระตางๆ Unicode สามารถแสดงอกษรในภาษาตางๆ ทวโลก ไมวาจะเปนองกฤษ ไทย จน ญป น ฯลฯ และทส าคญ Unicode เปนมาตรฐานกลางทสามารถน าไปใชในระบบใดๆ กได เชน บนเวบเพจ บนเครองแมค บนวนโดว หรอโทรศพทมอถอ

� UTF-8 จากทผานมาไดทราบกนไปแลววา เราสามารถตรวจสอบรหส code unit ของ UTF-8 ไดจาก utf8 property โดยผลลพธของ utf8

property จะไดเปน UTF8View Type ซงเปนคอลเลคชนของ UInt8

Type นนหมายความวา code unit ของ UTF-8 แตละชดจะเปนตวเลข ตงแต 0 จนถง 255

� UTF-16 วธตรวจสอบ code unit ของ UTF-16 จะดไดจาก utf16

property ซงผลลพธจะได Type เปน UTF16View ซงเปน คอลเลคชนของ UInt16 ซงหมายความวา ตวเลขของ code unit ใน UTF-16 จะมคาอยระหวาง 0 จนถง 65535

22

2.5.2.5 Array และ Dictionary

� Collection Type ในภาษา Swift ไดเตรยม Collection Type ไวใหใชงานอย 2 แบบ ไดแก arrays และ dictionaries ใชส าหรบเกบคาหลายๆ คา รวมกนเปนชดขอมล Collection Type เปรยบไดกบตลนชกทสามารถใสของหลายๆ อยางรวมไวดวยกนแต Collection

Type ของ Swift มขอก าหนดวา คาทอยใน array หรอ dictionary

นนจะตองเปน Type เดยวกนเทานน

� ก าหนดคาลงใน Array เปน Collection Type ทเราสามารถน าคาหลายๆ คา ใสลงใน Variable หรอ Constant เดยวๆ ได โดยการอางองคาคาตางๆ ภายใน Array จะใช Index โดยเรมนบจาก 0,1,2,3,.. (เรยกวา zero base index)

การก าหนดคาใหกบ Array นน จะอยภายในเครองหมาย [ ] สงส าคญคอคาทกๆ คาทก าหนดใน Array ตองเปน Type เดยวกน

2.5.2.6 Control Flow

swift มการใชงาน Control Flow เหมอนกบในภาษา C เชน for-while,

if, switch รวมถงมการใช break และ continue เพอก าหนดเงอนไขในการออกจากลปดวย แตลป For ในภาษา Swift ไดเพม for-in ส าหรบการวนลปเขาไปใน Array, Dictionary, Range, String หรอล าดบทเปน Sequences และไดมการปรบปรงการใช Switch กลาวคอ เมอตรงเงอนไขกบ Case ใดๆ แลว กจะไมท า Case อนๆ ทเหลอเลย ไมวาจะมการใชค าสง break หรอไม และการตรวจสอบแตละ Case นน สามารถตรวจสอบคาไดหลายรปแบบ ไมวาจะเปน Range, Tuples หรอ Cast to a pecific Type และคาทน ามาตรวจสอบนน สามารถก าหนดเปน ตวแปร ใหกบ body ของ Case นนๆ ไดดวย และในแตละ Case ยงสามารถก าหนด where เพอตรวจสอบเงอนไขเพมเตมไดอก

� รปแบบของการใช for-loop ในภาษา Swift ส าหรบ for ในภาษา switch มอย 2 แบบ คอ for-in และ for-condition-inclement

1. for-in คอการเขาไปยงทกๆ item ภายใน Range, Collection

หรอ Progression

2. for-condition-inclement จะวนลปไปเรอยๆ จนกวาจะตรงกบเงอนไขทก าหนด โดยการเพมคา Counter ในทกๆ ครงทวนลป

� การวนซ าดวย While-Loop

23

คอการตรวจสอบเงอนไขกอน หากเปนจรง กใหท าค าสงทก าหนด ซงการวนลปโดยใช While-Loop นน จะไมทราบจ านวนครงในการวนลป จนกวาจะไดเรมเขาไปท างานใน Loop แรกแลวเทานน ซงในภาษา Swift มการใช While-Loop อย 2 แบบ ดงน 1. While คอการตรวจสอบเงอนไขกอนท าค าสง 2. Loop-While คอ การท างานไปครงหนงกอน แลวคอย

ตรวจสอบเงอนไข

� การตดสนใจ Condition Statement คอ การตดสนใจวาจะท างานทก าหนดหรอไม โดยมการตรวจสอบเงอนไขกอน ซงหากตรงเงอนไขกท า แตถาไมตรงเงอนไขกจะไมท า ซงในภาษา Swift มรปแบบของ Condition Statement อย 2 แบบ คอการใช if และการใช switch ใช if เมอมการตรวจสอบเงอนไขทมทางเลอกไมมาก และใช switch ในเงอนไขทซบซอนกวา

� การใช IF ใช if เพอตรวจสอบเงอนไข หากเงอนไขเปนจรง กใหท า statement ทอยภายใน กรณทมเงอนไขทตองการตรวจสอบมเพยงเงอนไขเดยว

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

2.5.2.7 ฟงกชน (Function)

Function คอ กลมของชดค าสง เพอท างานตามทไดก าหนดไว แตละฟงกชนจะมการก าหนดชอ เมอตองการสงใหฟงกชนใดท างาน กจะใชวธเรยก (call) ฟงกชนโดยอางองกบชอทไดก าหนดไว รปแบบฟงกชนใน Swift

คอนขางยดหยน สามารถใชรปแบบฟงกชนในแบบภาษา C ทไมตองก าหนดชอหรอพารามเตอรใดๆ เลย หรอใชรปแบบของภาษา Objective-C ทสามารถก าหนดชอพารามเตอรกได สวน Parameter ทสงคาไปยงฟงกชนสามารถก าหนดคาเรมตนหรอไมกได ทกๆ ฟงกชนในภาษา Swift จะตองระบ Type

เสมอ ซงสามารถแบงออกเปน 2 สวน คอ parameter type และ return type

� การประกาศฟงกชน การประกาศฟงกชน จะตองระบชอ เพอบอกใหผใชทราบวาฟงกชนนมหนาทอะไร โดยฟงกชนอาจมการสงคาเขาไปใชฟงกชน (เรยกวา parameter) หรอบางครง เมอฟงกชน

24

ท างานเสรจเรยบรอยแลว กอาจสงคากลบมาได (เรยกวา return

type)

2.5.2.8 Closures บลอกของชดค าสงทท างานอยางใดอยางหนง ทสามารถผานคา ไปยงโคดสวนอนๆ ทเราไดเขยนขนได โดย Closures มความสามารถในการ Capture ได ทง Function และ Nested Function ถอวาเปน Closures แบบพเศษ ดงนน รปแบบของ Closure จงมอยดวยกนทงหมด 3 แบบ ดงน

� Global functions เปน closures ทมช อ แตไมสามารถ capture คาใดๆ

� Nested functions เปน closures ทมช อ และสามารถ capture คาจากฟงกชนทอยภายใน closures นนๆ

� Closure expression เปน closures ทไมมชอ และสามารถ captures คาทอยใน closures นนๆ ได

2.5.2.9 Enumeration ในภาษา swift ถอวามความยดหยนกวาในภาษา C

เนองจากไมจ าเปนตองก าหนดใหเปน Integer เสมอไป ดงนนเราจงสามารถเลอก Type

อะไรมาใชงานกได

� การใชงาน enumeration

enumeration เปนเหมอนการสราง type ขนมาใชงานเอง โดยน าเอา type ททาง swift เตรยมไวใหมาผสมกน จนได type ขนมาใหม โดยเราตองเตรยมโครงสรางของ enumerator เอาไวลวงหนาวามรปแบบเปนอยางไร

เวลาเราใชงาน enumeration กเหมอนกบ type อนๆ คอ สามารถใช var และ let

เพอก าหนดคาใหกบ variable หรอ Constant ไดเชนเดยวกบการก าหนด enumeration จะเรมจากการใส keyword ทช อวา enum ตามดวยชอ และเครองหมายปกกา เพอก าหนดขอบเขตของ enumerator จากนนจงคอยก าหนดโครงสรางของ enumeration วามคา (Value) เปนอะไรไดบาง

� Associated Value ใน enum

จากทผานมา คา (Value) ทก าหนดใน enumeration จะเปนคาทแนนอนวามคาเปนอะไรไดบาง แตนอกเหนอจากการก าหนดคาในแบบดงกลาวแลวนน enumeration ในภาษา Swift สามารถเกบคา associated value ซงเปนการก าหนดคาในแบบยดหยนกวา โดยแตละคาของ enumeration สามารถก าหนด type ทแตกตางกนไดอกดวย

25

2.5.2.10 Classes และ Structures เปนการสรางบลอกใหกบกลมค าสง ภายใน Class และ Structure สามารถก าหนด Property และ Method เพอก าหนดรปแบบการท างานไดอยางหลากหลายไรขดจ ากด

� Property (พรอบเพอต) กคอ variable หรอ constant ทอยใน Class หรอ Structure

� Method (เมธอด) กคอ function ทอยใน Class หรอ Structure ซงทง Property และ Method ทอยใน Class หรอ Structure มรปแบบและวธก าหนดคา เหมอนกบทไดเคยกลาวไวในบททผานๆ มา แตอาจมขอก าหนดบางอยางทอาจแตกตางกนไปบาง Object และ Instance การใชงาน Class นน จะอางองกบ Object

และ Instance เสมอ ซงความสมพนธระหวาง Class, Object และ Instance สามารถเปรยบเทยบได

2.5.2.11 Method คอ ฟงกชนทเปนของ Object จดประสงคเพอท างานหรอค าสงตามทก าหนด ซง Method มลกษณะเปน encapsulate คอ จะปกปดวธการท างานตอภายนอก ไมเปดเผยวาข นตอนการท างานนนเปนอยางไร ใหแตผลลพธทตองการกลบมาเทานน เชน เมอเราสงใหนองชายไปซอน าสมมาให นองชายไมบอกวาไปซอน าสมมาอยางไร ไปซอจากรานไหน เดนไปยงทางไหนบาง เราทราบเพยงวานองชายไดวงไปซอน าสม แลวยนผลลพธเปนน าสมกลบมาใหเราเทานนในภาษา Swift จะแบง Method ออกเปน 2 รปแบบ ดงน

� Instance method คอ method ทเปนของ instance � Type method คอ method ทเปนของ Type นนๆ

2.5.2.12 Initialization คอ กระบวนการในการเตรยม instance ส าหรบน าไปใชงาน โดยจะม Method แบบพเศษทเรยกวา Initializer เพอจดการเกยวกบการก าหนดคาตางๆ ใหกบ Instance สงทตองทราบเกยวกบการสราง Instance ดวยกระบวนการ Initialization มดงน

� ก าหนดคาเรมตน (initial value) ใหกบทกๆ Stored Properties

� ก าหนดคาเรมตนอนๆ ใหกบ Instance กอนน าไปใชงาน

� สามารถก าหนด initializer เพอท าข นตอน initialization ของเราเองได (เรยกวา Customize Initializer)

� initializers ของภาษา swift ไมมการรเทรนคาใดๆ กลบมา

26

2.5.2.13 Protocol และ Delegation

Protocol คอ การเตรยมแมแบบส าหรบ Method, Property หรอความตองการอนๆ เพอใหสามารถท างานตามจดประสงคทวางไว โดย Protocol เปนเพยงการก าหนดกรอบการท างาน แตไมไดลงรายละเอยดวาตองท าอยางไร การใชงาน Protocol สามารถแบงเปน 3 ข นตอน ดงน

� ขนตอนท 1 ก าหนดขอตกลง โดยก าหนด Protocol

� ขนตอนท 2 ยอมรบขอตกลงของ Protocol นนๆ ซงเรยกวา Adopted Protocol

� ขนตอนท 3 ท าตามขอตกลงของ Protocol เรยกวา Conform

Protocol

Protocol มลกษณะเปน Type เชนเดยวกบ String, Double, Int,

Class, Structure หรออนๆ จงสามารถก าหนดใหกบ Variable หรอ Constant

ได นอกจากนน ยงสามารถผานคาไปยงฟงกชน หรอใชเปน Return Type ของฟงกชนกได การประกาศ Property ใน Protocol ไมตองก าหนดคา เพยงแคก าหนดรปแบบพนฐานเอาไวเทานน โดยมขอก าหนดดงตอไปน

� ตองประกาศเปน Variable เทานน เพราะ Property ใน Protocol

จะตองสามารถเปลยนแปลงคาได ดงนน จงตองน าหนาดวย var

เสมอ

� ชอ Property ซงวธต งชอกจะเหมอนการตงชอ Property ทวๆ ไป คอใชแบบ lowerCamelCase คอ ทกๆ ตวอกษรแรกของค าจะตองขนตวใหญ ยกเวนอกษรตวแรกของค าแรกจะใชเปนตวเลก เชน myName, yourScore หรอ withSomeGirls เปนตน

� Type ของ Property เชน Double, Int, String หรอ Bool เปนตน หรออาจเปน Type แบบอนๆ ทก าหนดขนเองกได

� ก าหนดวาเปน Read-Only Property หรอ Read-Write Property

โดยหากเปน Read-Only ใหใส { get } ทดานหลง Type แตถาเปน Read-Write ใหใสเปน { get set }

2.5.2.14 Designated และ Convenience Initializer

ภาษา swift ไดก าหนดประเภทของ Initializer ไว 2 แบบ คอ designated initializer และ convenience initializer จดประสงคกเพอ ใหแนใจวา stored property ทกๆ ตวไดถกก าหนดคาเรมตนเสมอ

27

� Designated initializer เปน initializer หลกของ class type ทกๆ class จะตองม designated initializer อยางนอย 1 ตวอยแลว ซงหมายความวา ถาเราไมไดก าหนด ภาษา Swift กจะก าหนด Designated initializer มาใหอตโนมต หนาทของ Designated

initilizers ก าหนดคาเรมตนใหกบ ทกๆ property ของ class และเรยกใชงาน initializer ของ superclass เพอสข นตอนการ initialization

� Convenience initializer เปน Initializer เสรมส าหรบ class ซงไมจ าเปนตองสรางขนมากได จดประสงคคอท าให class มโคดทเขาใจงาย และชวยลดเวลาในการเรยกใชงาน ในการก าหนด convenience initailizer เราจะใส Keyword วา convenience ไวทดานหนา init()

28

บทท 3 ออกแบบระบบ

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

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

3.2 Use case diagram

แผนภาพอธบายการท างานของระบบทชวยใหมองเปนภาพรวมการท างาน ของระบบในมมบน และชวยสอสารกบ Stakeholder ใหเขาใจตรงกนไดงายและครบถวน ดง ภาพท 3.1 Use case diagram

รปท 3.2 Use case diagram

จากรป ท 3.2 เปน Use Case Diagram ทแสดงใหทราบไดวาระบบ M-Commerce มหนาทหลก 9 หนาทซงอธบายของแตละหนาทดงตอไปน

29

3.2.1 Use case diagram Products

กอนสงอนใดทผใชงานเปด Application เขามาวตถประสงคหลกคอตองการเลอก

ซอสนคาทตองการในการบวนการเลอกสรรสนคาทตองการ แดง Use case diagram ในสวนของ Products ดงรปท 3.2

รปท 3.2 Use case diagram products

Use Case Title : Products Use Case Id : 1

Primary Actor : Customer

Stakeholder Actor : Customer

Main Flow

1. Visitor ตองการเลอกดสนคาทตองการ 2. Visitor เลอกดสนคาตามหมวดหม หรอ ประเภทสนคา 3. Visitor ดรายละเอยดสนคา

Pre-condition

1. Visitor ตองการดรายละเอยดสนคาทสนใจ Post-condition

1. Visitor ซอสนคาทตองการ

ตารางท 3.1 แสดง Use Case Diagram Products

30

3.2.2 Use case diagram Search ในระบบ M-commerce มสนคาหลายหมวด ยากทจะหาสนคาทสนใจไดงาย จงตอง

มเครองมอชวยอ านวยความสะดวกในการคนหาสนคาเหลานนไดอยางายดาย ดงรปท 3.3 Use

case diagram search

รปท 3.3 Use case diagram Search

Use Case Title : Search Use Case Id : 2



Main Flow

1. Customer ตองการเลอกดสนคาทตองการ 2. Customer เลอกดสนคาดวยการคนหา 3. Customer ดรายละเอยดสนคาทปรกกฎ หรอ แจงใหทราบวา ไมพบสนคาทคนหา

Pre-condition

1. Customer ตองการคนหาดรายละเอยดสนคาทสนใจ Post-condition

1. Customer ซอสนคาทตองการ

ตารางท 3.2 แสดง Use Case Diagram Search

31

3.2.3 Use case diagram Shopping Cart เปนเครองมออ านวยความสะดวกในการซอสนคาทจ าลงมาจาการเลอกซอสนคาใน

หางสรรพสนคาทเหมอนจรง ท าใหลกคาทเขามาเลอกซอ สามารถ เปลยนสนคา เพมลดจ านวนสนคาไดตามความตองการ กอนทจะน าไปช าระเงนตอไป ดงรปท 3.4 Use case diagram

Shopping Cart

รปท 3.4 Use case diagram shopping cart

Use Case Title : Shopping Cart Use Case Id : 3



Main Flow

1. Customer ตองการเลอกสนคาทตองการ เลอกสนคาอยางเพลดเพลนเหมอนในหางสรรสนคาจรงๆ

2. Customer เพม ลด สนคาและจ านวนในตะกราสนคาได Pre-condition

1. Customer ตองการดสนคา จ านวน และ ราคาทจะซอ Post-condition

1. Customer ไดจ านวนสนคาทตองการและจ านวนไมขาดไมเกน

ตารางท 3.3 แสดง Use Case Diagram Shopping cart

32

3.2.4 Use case diagram register ผใชงานตดตง Application เมอด าเนนการสงซอสนคา ขอมลทจ าเปนทตองใหกบผ

ใหบรการคอ ทอยจดสง และ เบอรโทรทสามารถตดตอได แสดง Use case diagram register

ดงรปท 3.5 ตอไปน

รปท 3.5 Use Case Diagram register

Use Case Title : Register Use Case Id : 4



Main Flow

1. Customer ตองการลงทะเบยนเพอยนยนขอมลในการสงสนคา

2. Customer กรอบรายละเอยด ขอมลสวนตวทก าหนดให ถาไมถกตองตามขอก าหนดใหใหกรอกใหม

3. Customer ไดรบการยนยนในการกรอกขอมล Pre-condition

1. Customer ตองการเปนสมาชกในระบบของผใหบรการ Post-condition

1. Customer ท าการ Login ไดในการใชงานครงถดไปและน าขอมลสวนตวมาใชในการสงซอครงถดไป

ตารางท 3.4 แสดง Use Case Diagram register

33

3.2.5 Use case diagram login Customer เมอตดสนใจเลอกซอสนคาทตองการ จะตองท าการใหขอมลการตดตอเพอผ

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

Admin เมอตองการจดการกบระบบ ตองท าการ Login เขาสระบบเพอท าการจดการระบบหลงราน ดงแสดงภาพท 3.6 ดงน

รปท 3.6 Use case diagram login

Use Case Title : Login Use Case Id : 5



Main Flow

1. Customer ตองการเขาสระบบเพอยนยนขอมลการจดสงสนคา 2. Admin ตองการเขาสระบบ เพอบรหารและจดการรานคา

Pre-condition

1. Customer ตองเขาสระบบกอนถงจะลดขนตอนการยนยนขอมลได

2. Admin ตองเขาสระบบจงสามารถเขาถงระบบหลงรานได Post-condition

1. Customer สามารถใชขอมล Profile ในการยนยนขอมลการสงซอได

- แกไขขอมลสวนตว - จดการกบตะกราสนคา

2. Admin สามารถจดการ ในระบบหลงรานได ตารางท 3.5 แสดง Use Case Diagram Register

34

3.2.6 Use case diagram Order เมอลกคาเขาสระบบแลวขนตอนตอไปคอ การซอสนคา ซงเปนเปาหมายหลก

ของผทเขามาใชระบบแสดง Use case diagram Order ดงรปท 3.7

รปท 3.7 Use case diagram Order

Use Case Title : Order Use Case Id : 6 Primary Actor : Customer


Main Flow

1. Customer ตองการเลอกซอสนคาทตองการ Pre-condition

1. Customer ตองเลอกสนคาทตองการกอนท า Order พรอมระบขอมลการจดสง Post-condition

1. Customer ไดสงซอสนคาทตองการ

ตารางท 3.6 แสดง Use case diagram Order

35

3.2.7 Use case diagram Payment หลงจากทด าเนนการสงซอเปนทเรยบรอยแลว การช าระเงนถอวาเปนเรองทส าคญ

เนองจากเปนปจจยหลกของการซอขาย หากไมมการช าระเงนครบตามราคาจ าหนายผไหบรการกไมสามารถสงสนคาได จงแสดง Use case diagram payment ดงรปท 3.8 ดงน

รปท 3.8 Use case diagram payment

Use Case Title : Payment Use Case Id : 7 Primary Actor : Customer


Main Flow

1. Customer ตองการช าระเงนคาสนคาทส ง 2. Customer ตองการเอกสาร การช าระเงน เพอระบรายละเอยดการช าระเงน

Pre-condition

1. Customer จายเงนโดยการโอนเงนผานธนาคาร Post-condition

1. Customer ไดช าระเงนคาสนคา ตารางท 3.7 แสดง Use case diagram Payment

36

3.2.8 Use case diagram Management ระบบบรหารและจดการขอมล ใชในการอ านวยความสะดวกในการจดการทกๆสวน

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

รปท 3.9 Use case diagram Management

Use Case Title : Management Use Case Id : 8

Primary Actor : Admin

Stakeholder Actor : Admin

Main Flow

1. Admin ตองการจดการ เพม ลบ แกไข ขอมลตางๆของระบบ อนไดแก - ขอมลพนฐานของระบบ - ขอมลสนคา - ขอมลลกคา - ขอมลค าสงซอ

Pre-condition

1. Admin ตองท าการ Login เขาสระบบกอนจงจะสามารถท างานได Post-condition

1. Admin ไดจดการขอมลตามทตองการ ตารางท 3.8 แสดง Use case diagram Management

37

3.2.9 Use case diagram Member สมาชกคอ บคคลทเขามาใชระบบและไดท าการลงทะเบยน ใหขอมลรายละเอยด

สวนตวในระบบทก าหนดไวให โดย สมาชกจะได User name และ Password ส าหรบการ Login เขาสระบบ ลกคาสามารถ จดการขอมลของตนเองได ดงรปท 3.10

รปท 3.10 Use case diagram member

Use Case Title : Member Use Case Id : 9 Primary Actor : Customer


Main Flow

1. Customer ตองการ ยนยนขอมลของ สมาชกในการสงซอสนคา - Login เขาสระบบ

- Logout ออกจากระบบ

- แกไขขอมลสวนตว Pre-condition

1. Customer ตองท าการ Login เขาสระบบกอนจงจะสามารถท างานได Post-condition

1. Customer ไดจดการขอมลตามทตองการ ตารางท 3.9 แสดง Use case diagram member

38

3.3 Activity diagram จากหวขอ 3.2 Use case diagram ของระบบ M-commerce ทไดออกแบบเปนแผนภาพ

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

3.3.1 Activity diagram Products จากรายละเอยดการท างานในขอขอ 3.2.1 Use case diagram products สามารถ

เขยนเปน Activity diagram product ดงรปท 3.11

รปท 3.11 Activity diagram products

3.3.2 Activity diagram Search จากรายละเอยดการท างานในขอขอ 3.2.2 Use case diagram search สามารถ

เขยนเปน Activity diagram ดงรปท 3.12

39

รปท 3.11 Activity diagram search

3.3.3 Activity diagram shopping cart จากรายละเอยดการท างานในขอขอ 3.2.3 Use case diagram shopping cart

สามารถเขยนเปน Activity diagram ดงรปท 3.13

รปท 3.13 Activity diagram shopping cart

40

3.3.4 Activity diagram Register จากรายละเอยดการท างานในขอขอ 3.2.4 Use case diagram register สามารถ


รปท 3.14 Activity diagram register

3.3.5 Activity diagram Login จากรายละเอยดการท างานในขอขอ 3.2.5 Use case diagram login สามารถ


41

รปท 3.15 Activity diagram login

3.3.6 Activity diagram Order

จากรายละเอยดการท างานในขอขอ 3.2.6 Use case diagram order สามารถ


รปท 3.16 Activity diagram order

42

3.3.7 Activity diagram Payment จากรายละเอยดการท างานในขอขอ 3.2.7 Use case diagram payment สามารถ


รปท 3.17 Activity diagram payment

3.3.8 Activity diagram Management จากรายละเอยดการท างานในขอขอ 3.2.8 Use case diagram management

สามารถเขยนเปน Activity Diagram ดงรปท 3.18

รปท 3.18 Activity diagram management

43

3.3.9 Activity diagram Member จากรายละเอยดการท างานในขอขอ 3.2.7 Use case diagram member สามารถ


รปท 3.19 Activity diagram member

3.4 Sequent diagram Sequent diagram ของระบบ M-commerce เปนระบบทมล าดบข นตอนการทางาน

เพอเปนการเขาใจตรงกนจงใชทฤษฏ Sequence diagram เพออธบายขนตอนการท างานของระบบดงน

3.4.1 Sequent diagram Products จากรายละเอยดการท างานในขอขอ 3.2.1 Use case diagram products สามารถ

เขยนเปน Sequent diagram Products ดงรปท 3.20

รปท 3.20 Sequent diagram products

44

3.4.1.1 Request Product Information Customer สงความตองการไปยง Class Product โดยม Product ID เพอขอรายละเอยดสนคาทตองการ 3.4.1.2 Class Product สงควรไปยง Category เพอเรยกขอมลทผใชงานตองการ 3.4.1.3 Class Category สง category ID ไปยง Sub Category เพอดงสนคาในหมวดยอยดงกลาวกลบคอมาใหผใชงาน 3.41.4 Sub category แสดงผลตามทรองขอ ถาไมพบแจงเปนขอความวาไมพบสนคาทคนหา

3.4.2 Sequent diagram Search จากรายละเอยดการท างานในขอขอ 3.2.2 Use case diagram search สามารถ

เขยนเปน Sequent diagram search ดงรปท 3.21

รปท 3.21 Sequent diagram search

3.4.2.1 Search เมอผใชงานคนหาสนคาทตองการไมเจอ จงท าการคนหาสนคาผาน Application โดยคนหาตามชอ ใน Class search

3.4.2.2 Class search สงขอ message ดวย product name ไปท class product

เพอคนหา สนคาตามชอ 3.4.2.3 Class product ท าการคนหาและสงขอมลสนคากลบมา เพอท าการ

แสดงผล

3.4.3 Sequent diagram Shopping Cart จากรายละเอยดการท างานในขอขอ 3.2.3 Use case diagram shopping cart

สามารถเขยนเปน Sequent Diagram ดงรปท 3.22

45


3.4.3.1 Customer เลอกสนคาตาม Product ID Add สนคาใน shopping Cart

3.4.3.2 Cart Item มจ านวนสนคาทเลอกมา จามจ านวนทตองการ 3.4.3.3 เมอมการ Add สนคาใหมเพมเขามาในตะกรา 3.4.3.4 เมอตองการยกเลก สนคาชนนนๆ

3.4.3.5 หรอ เลอกสนคาใหมเขามา 3.4.3.6 เมอลกคาพอใจแลวตองการ Check out เพอน าสนคาไปช าระเงนตามท

ตองการ และยงสามารจดการสนคา ใน ตะกราสนคาได - ยกเลกสนคา ชนนนๆ - ยนยนค าสงซอ

3.4.4 Sequent diagram Register จากรายละเอยดการท างานในขอขอ 3.2.4 Use case diagram register สามารถ

เขยนเปน Sequent diagram ดงรปท 3.23

46

รปท 3.23 Sequent diagram register

3.4.4.1 Customer ตองการสมครสมาชก ไดสงขอมลสวนตวใน Class Customer

และบนทกเขาสระบบ

3.4.4.2 Class Customer ไดรบขอมลครบถวน พรอมยนยนการบนทกขอมล

3.4.5 Sequent diagram Login จากรายละเอยดการท างานในขอขอ 3.2.5 Use case diagram login สามารถ



3.4.5.1 Register Customer กรอกขอมล Username Password สงไปท Class

Login

3.4.5.2 Class login ท าการเปรยบเทยบ ขอมลตรงกน สามารถเขาสระบบได หรอ มขอความตอบกลบ ในกรณ User name หรอ Password ไมถกตอง

47

3.4.6 Sequent diagram Order จากรายละเอยดการท างานในขอขอ 3.2.6 Use case diagram order สามารถ


รปท 3.25 Sequent diagram order

3.4.6.1 Customer ตองการสงใบสงซอ ไดจาก Shopping Card โดยมขอมลสนคาทไดเลอกไวจนพอใจ

3.4.6.2 ท าการ ยนยนค าสงซอ พรอม ระบขอมลการจดสง 3.4.6.3 Customer ไดรบการยนยน ใบสงซอ

3.4.7 Sequent diagram Payment

จากรายละเอยดการท างานในขอขอ 3.2.7 Use case diagram payment สามารถ


รปท 3.26 Sequent diagram payment

3.4.7.1 ท าการช าระเงน

3.4.7.2 ยนยนการช าระเงน

3.4.8 Sequent diagram Management จากรายละเอยดการท างานในขอขอ 3.2.8 Use case diagram management

สามารถเขยนเปน Sequent diagram ดงรปท 3.28

48

รปท 3.28 Sequent diagram management

3.4.8.1 Admin ท าการก าหนดคาใหกบระบบทตองการ 3.4.8.2 มขอความยนยนการก าหนดคาตางๆ

3.4.9 Sequent diagram Member จากรายละเอยดการท างานในขอขอ 3.2.9 Use case diagram member สามารถ

เขยนเปน Sequent diagram member ดงรปท 3.29


3.4.9.1 Customer กระท าการตางในระบบ Member ไดดงน - Login เพอใชขอมลเดมในการสงซอครงถดไปโดยไมตองกรอกใหม

ทกครง - Customer ท าการแกไขขอมลได

3.4.9.2 Customer ไดรบการยนยนขอมลของสมาชก เพอตรวจสอบความถกตอง

49

3.5 Class Diagram Class Diagram คอ แผนภาพคลาสและความสมพนธ ทใชในการแสดงความสมพนธในแงตางๆ (Relationship) ระหวาง คลาสเหลานน ดงภาพท 3.28 Class Diagram

รปท 3.30 Conceptual Class Diagram

3.5.1 Class product

ท าหนาทจากรปท 3.28 อธบาย หนาทของ Attribute ของ Class ไดดงน Attribute ประกอบดวย

1. Product ID ส าหรบแสดงรหสสนคา 2. Product name ส าหรบแสดง ชอสนคา 3. Price ส าหรบแสดงราคาสนคา 4. Qty ส าหรบแสดง จ านวนสนคา 5. Sku ส าหรบแสดง จ านวนตอการเกบในคลงสนคา

50

3.5.2 Class Search จากรปท 3.28 อธบาย หนาทของ Attribute ของ Class ไดดงน Attribute

ประกอบดวย

1. Product Name ส าหรบคนหาสนคา

3.5.3 Class Shopping Cart จากรปท 3.28 อธบาย หนาทของ Attribute ของ Class ไดดงน Attribute


1. Card ID ส าหรบแสดง รหสตะกราสนคา

2. Product ID ส าหรบแสดง รหสสนคา 3. QTY ส าหรบแสดง จ านวนสนคา 4. Customer Id ส าหรบแสดง รหสลกคา

3.5.4 Class Register

จากรปท 3.28 อธบาย หนาทของ Attribute ของ Class ไดดงน Attribute


1. Member ID ส าหรบแสดง รหสตะกราสนคา 2. Name ส าหรบแสดง ชอลกคา 3. Last name ส าหรบแสดง นามสกล 4. Email ส าหรบแสดงอเมลลกคา ใชเปน User name

ดวย 5. Password ส าหรบแสดง รหสผานเขาสระบบ

3.5.5 Class login



1. Email ส าหรบเปน User name

2. Password ส าหรบ รหสผานเขาสระบบ

51

3.5.6 Class order



1. Order ID ส าหรบรหสใบสงซอ 2. ProductID ส าหรบแสดงรหสสนคา 3. CustomerID ส าหรบแสดงรหสลกคา 4. Price ส าหรบแสดงราคาสนคา 5. QTY ส าหรบแสดงจ านวนสนคา 6. Subtotal ส าหรบแสดงราคาของสนคา 7. Grand total ส าหรบแสดงราคารวมทงหมด

3.5.7 Order Detail



1. Order ID ส าหรบรหสใบสงซอ 2. ShipmentAddID ส าหรบแสดงรหสสนคา 3. BillingAddID ส าหรบแสดงรหสลกคา 4. OrderStatus ส าหรบแสดงสถานะใบสงซอ

3.5.8 Class management



1. Order ID ส าหรบรหสใบสงซอ 2. ShipmentAddID ส าหรบแสดงรหสสนคา 3. BillingAddID ส าหรบแสดงรหสลกคา 4. OrderStatus ส าหรบแสดงสถานะใบสงซอ

52

3.5.9 Image



1. Image ID ส าหรบแสดงรหสรปภาพ 2. ProductID ส าหรบแสดงรหสสนคา 3. Imagepath ส าหรบแสดงเสนทางของทเกบรปภาพ (Path)

3.5.10 Product Attribute



1. AttributeID ส าหรบแสดงรหสรปภาพ 2. ProductID ส าหรบแสดงรหสสนคา 3. Imagepath ส าหรบแสดงเสนทางของทเกบรปภาพ (Path)

3.5.11 Category



1. Category ID ส าหรบรหสของรานคา 2. CategoryName ส าหรบแสดงชอหมวดหม 3. ProductID ส าหรบแสดงรหสสนคาในหมวดหมน

3.5.12 Sub category



1. SubCatID ส าหรบรหสของหมวดหมยอย 2. CategoryID ส าหรบแสดงรหสของหมวดหมหลก 3. SubCatName ส าหรบแสดงแสดงชอของของหมวดสนคายอย

53

บทท 4

การพฒนาระบบและผลการด าเนนการ 4.1 เครองมอและอปกรณทใชในการพฒนาระบบ

โปรแกรมถกพฒนามาจากเครองมอ (Tool) ตางๆในแตละหนาทซงแยกออกเปน 2 สวนหลกๆ ดงน

4.1.1 Hardware

x เครองคอมพวเตอรServer 1 เครอง x เครองคอมพวเตอร Macbookpro 1 เครอง x โทรศพทเคลอนทไอโฟน 5s 1 เครอง

4.1.2 Software

x Mac OS X EI Capitan ระบบปฏบตการเครองคอมพวเตอรของแอปเปล

(Apple)

x Xcode ใชสาหรบการออกแบบและสรางแอฟพลเคชน (Application)

x Xampp ใชสาหรบการจาลองเครองเปน Server

x Magento 1.9 ใชส าหรบจดการระบบ M-commerce

โปรแกรม M-commerce นมหลกการท างานแบงออกเปน 2 สวน ซงประกอบดวย

โปรแกรมบนโทรศพทมอถอ (Application) หนาราน, หลงราน (BackOffice) ดงรปท 4.1

แผนผงการท างานของระบบ

รปท 4.1 แสดงแผนผงการท างานของระบบ

54

4.2 ผลการด าเนนการพฒนาโปรแกรม จากการการศกษาระบบ M-commerce ตงแตตนจนครบกระบวนการศกษาและ

มผลการด าเนนการดงน 4.2.1 หนาแรกของ Application

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

รปท 4.2 หนาแรกของ Application

55

4.2.2 Category and sub category

4.2.2.1 หมวด ขาวหอมมะล 4.2.2.2 หมวด ขาวเกษตรอนทรย 4.2.2.3 บรรจภณฑพลาสตก

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

รปท 4.3 แสดงสนคาตามหมวดหม

56

4.2.3 Search

เนองจากสนคามจ านวนมาก จงคนหาไดล าบาก ฉะนนจงมระบบคนหาไวอ านวยความสะดวกในการใชงาน ซง ลกคาสามารถคนหาตามชอของสนคา

- คนหาสนคาแลวเจอสนคา แสดงดงรปท 4.4 คนหาแลวพบสนคา - คนหาสนคาแลวไมพบ แสดงดงรปท 4.5 คนหาแตไมพบสนคา

รปท 4.4 คนหาแลวพบ รปท 4.5 คนหาแตไมพบ

57

4.2.4 Product Detail

เมอผใชงานตองการดรายละเอยดสนคา สามารถกดทรปสนคา จงปรากฏหนา

แสดงรายละเอยดสนคา ดงรปท 4.6 และ เลอนลงมาดรายละเอยดตางๆไดอยางสะดวก

รปท 4.6 แสดงรายละเอยดของสนคา

58

4.2.5 Add to cart

เมอผใชงาน ตองการซอสนคา สามารถท าไดงายโดยกดทป ม ADD TO CART

หรอ เพมจ านวนสนคา ไดทชองจ านวนดานซายมอ ดงรปท 4.7

รปท 4.7 แสดงป ม ADD TO CART

59

4.2.6 Shopping cart

คอ ตะกราสนคาออนไลน ทอ านวยความสะดวกในการสงซอสนคาไดอยาง สะดวก สามารถ เพมสนคาเพมจ านวนได หากเปนทพอใจแลว ผใชงานกดทป ม PPRCESS TO CHECKOUT เพอสงใบสงซอ ดงรปท 4.8 Shopping cart

รปท 4.8 แสดง Shopping cart

60

4.2.7 Order

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

รปท 4.9 รายละเอยดการสงซอสนคา

61

4.2.8 Register

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

โดยกดทป ม CONTINUE หลงจากทท าการลงทะเบยนเสรจแลว ระบบจะถอวา Login แลวโดยปรยาย ดงรปท 4.9 Register

รปท 4.10 Register

62

4.2.9 Login

ผใชงานทเปนสมาชกอยแลวสมารถ Login เขาสระบบได ดงรปท 4.11 โดยระบ Email และ รหสผาน

รปท 4.11 Login

4.2.10 Login to back office

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

รปท 4.12 Login เขาสระบบ

63

4.2.11 Manage Order

เมอ ผดแลระบบเขาสระบบหลงบาน ใหไปทเมน Sales -> Orders ดงรปท 4.13

รปท 4.13 Order List

4.2.12 Order Detail

รายละเอยด ใบสงซอประกอบดวย - ขอมลใบสงซอ

- ขอมลการจดสง - ทอยออกบล

ซงสถานะจะเปน Processing ดงแสดงในรปท 4.14

64

รปท 4.14 รายละเอยดใบสงซอ 4.2.13 Confirm Oder

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

4.2.14 รปท Confirm Oder

65

4.2.15 Confirm Shipment

สดทายคอ การสงใบสงซอนไปใหฝายจดสง และ เปนการสนสดกระบวนการสงซอสนคาทลกคาไดรบสนคา สถานะของใบสงซอเปน Complete ดงรปท 4.16

4.2.16 รปท 4.16 Confirm Shipment

66

บทท 5

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

5.1 สรปผลโครงการ จากการด าเนนการวเคราะหออกแบบระบบและพฒนาโปรแกรม M-commerce ใน

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

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

5.2 ปญหาและอปสรรคจากกการพฒนาโครงงาน

1. Apple ท าการปรบปรงเวอชน (Version) ระหวางศกษาคนควา 2. เวลาทมจ ากดในการศกษาคนควา 3. การเดนทางในการเกบขอมลตางๆขององคการณ

5.3 ขอเสนอแนะ 5.3.1 พฒนาบนระบบปฏบตการอนๆนอกเหนอจาก IOS เชน Android ซงไดรบความนยมในปจจบน

5.3.2 เพมระบบจายเงนจาก Bank transfer ใหมากยงข น

5.3.3 พฒนาเปน Native Application ตามความพรอมของทมพฒนา จะท าใหการใชใชงานของ Application ประสทธภาพดยงข น

67

เอกสารอางอง

1. กาวทนโลกวทยาศาสตร ปท 8(2): 2551 2. http://www.magentothailand.com/what-is-magento/ 3. http://loeidev.blogspot.com/2015/09/magento_19.html

4. http://www.siamhtml.com/

5. http://loeidev.blogspot.com/2015/09/magento_19.html

6. กตต ภกดวฒนะกล , “UML วเคราะหและออกแบบระบบเชงวตถ”, พมพครงท 2, เคทพ(ISBN) 974-7469-66-9

ภาคผนวก

ภาคผนวก ก.

คมอการตดตง Magento2.0 การตดตง Magento 2.0 มขอก าหนด และ ขนตอนการตดตง แตกตางไปจากเวอรชนเกา ซงเปนการพฒนาครงแรกทปรบ Interface และขนตอนการตดตง เรมตนการตดตง Magento 2.0 ดงน

1. สภาพแวดลอมส าหรบการท างาน (System Envelopments) แบงออกเปน 2 สวน คอ,

Hardware Software a. Hardware

i. Computer PC ทใชงานในปจจบนคณสมบตพนฐานมดงน 1. CPU 2.5 GHz 2. Ram 2 GB 3. Hard disk 500 GB

b. Software i. Operating System

1. Windows 7 ii. Web Server

1. XAMPP 3.2.2 a. PHP 5.6

iii. Database 1. MySQL 5.6

รปท 1 Web Server Xampp 3.2.2

61

2. Magento 2.0 สามารถดาวนโหลดไดทเวบไซต ของ magento http://magento.com/ โดยไมมคาใชจายใดๆ เมอดาวนโหดเสรจแลวน าไฟลทไดไปวางไวท Home Directory ของ Web Server

ดงภาพ

รปท 2 ไฟลโปรแกรมทเตรยม Install

กอนท าการ Install ตองท าการปรบตงคาของ PHP ซงมอย 2 ต าแหนงทตองปรบ เปด Php.ini แลวก าหนดคาไหมดงน

x always_populate_raw_post_data = ON o เปลยนเปน always_populate_raw_post_data = -1

x ;extension=php_intl.dll o เปลยนเปน extension=php_inl.dll

หนาทของแตละตวสามารถศกษาเพมเตมไดท php.net

3. การตดตงสามารถเรยกผาน URL เหมอนการเรยกใชงานเวบไซต ตามปรกต

ยนดตอนรบสการตดตง Magento 2.0 โดยการตดตงจะมขนตอนเปน Time line ใหทราบถงสถานะ ซงดงายและสะดวกกวาเวอรชนกอน

http://localhost/magento_20

62

รปท 3 ขนตอนการเชคสภาพแวดลอมการท างาน

ก าหนด Database ใหกบโปรแกรม แตกอนทจะก าหนดได ตองไปสราง Database เปลาๆ ขนมารองรบท Mysql กอนจะจะสามารถระบในขนตอนนได

รปท 4 ก าหนด Database

สราง Database ไวรองรบการท างาน ซงเปน Database

63

รปท 5 สราง Database

ก าหนดเขตแบงของเวลาของแตละประเทศ สกลเงน และ ภาษา

รปท 6 ก าหนดเขตแบงเวลา ภาษา และ สกลเงน

ก าหนด Store address , Admin address และกด Next

64

รปท 7 ก าหนด Admin path

ก าหนด คาเรมตนเกยวกบ Admin Username

รปท 8 ก าหนดคาตางๆของ admin

o New Username ชอ login เขาสระบบ

o New Email ทอยอเมลส าหรบระบบ

65

o New password รหสผาน ตองมตวเลขและตวอกษร อยางต า 7 ต าแหนง

o Confirm Password

หลายขนตอนทผานมาเปนการก าหนดคาเรมตนทละขนตอน จนมาถง สดทาย เรมการตดตง โดยกดทป ม Install Now Magentoจะท าการตดตง ใชเวลาประมาณ 20 นาท

รปท 9 เรมการตดตง

หนาแสดงผลการตดตง โดยระบบท าการเกบ log การตดตงไวดวย และแสดงผลเปน Progress bar

ดงายและสวยงาม

รปท 10 ความคบหนาในการตดตง

เสรจสนการตดตง พรมกบรายละเอยดทก าหนดมาตงแตขนตอนแรกจนถงขนตอนสดทาย

66

เรมตนการใชงาน หลงจากทไดท าการตดตงมา จนส าเรจ

1. หนา Login Admin เปลยนไปจากเวอรชน 1.9.2.2

รปท 10 ความคบหนาในการตดตง

67

หนา admin เปลยนเมนจากดานบน มาอยดานซายมอ user interface เปลยนไปทงหมดจากเวอรชนเดม

รปท 11 หนา Admin Magento 2.0

หนารานเปน Responsive view ให Them LUMA มาเปน Theme Default ไมม Logo

magento

รปท 12 หนารานของ Magento 2.0

เสรจสนส าหรบการตดตง Magento 2.0

Documents

คณัสนันท์ วิเชียรศรี Kanassanan Wichiansri¹‚ปรแกรมขายสินค้า... · 3.4 Use Case Diagram Shopping Cart 31 3.5