ระบบขายสินค้าออนไลน์ของ ... · 2016-07-06 ·...

395 การประชมวชาการระดบชาตมหาวทยาลยเทคโนโลยราชมงคลสวรรณภม ครงท 1 (The 1st RUSNC)

ระบบขายสนคาออนไลนของบรษท Techwood Far-East จากด

โดยใช CodeIgniter และ Bootstrap เฟรมเวรค

Online Shopping System of Techwood Far-East Co.,Ltd.

Using CodeIgniter and Bootstrap Frameworks

ทพวรรณ เยนใจรอด0

1, นาเพญ เปลยนมา1 และพงศกรณ ปบผาโสมตระกล1*

Tippawan Yenjairod1, Nampen Plianma1 and Phongkorn Pubphasomtrakool1*

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

เปนการสงซอสนคาในลกษณะออนไลนมากขน ทาใหบรษท Techwood Far-East จากด ซงดาเนนธรกจจาหนายเครองประดบและ

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

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

รวมถงตองสามารถแสดงผลบนอปกรณหลายประเภทได โดยครงนไดนาเทคโนโลย Codeigniter Framework มาทาการพฒนา Web

Application ในลกษณะ Model-View-Controller (MVC) ดวย PHP รวมกบ Bootstrap Framework เพอใหไดคณสมบต Responsive

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

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

กจการ สามารถจดการรายการสงซอสนคา, ตรวจสอบการแจงชาระเงน และตรวจสอบการจดสงสนคา กลมผดแลระบบสามารถจดการ

ขอมลพนฐานเกยวกบเวบไซต โดยผลการประเมนจากพนกงานและเจาของกจการ ระบบไดระดบคะแนนเฉลยท 4.34 คะแนนซงอยใน

เกณฑด

คาสาคญ: Codeigniter, Framework, Bootstrap,MVC,ขายสนคาออนไลน

Abstract

The current consumer buying behavior changed from its purchases from stores to online. Techwood Far-East

Co. is comapany of business jewelry. The company requested the development of online sales. The objective is to

improve the way of doing business, reduce paperwork, and reduce the cost of operations. The system is flexible, modify

easy and look good on all devices. This system uses Codeigniter framework and PHP build web application on Model-

View-Controller (MVC), uses Bootstrap framework build responsive web and uses MySQL for manage database. This

system has five groups of users which have customers group and members group can use system for look products,

1 คณะวทยาศาสตรและเทคโนโลย มหาวทยาลยเทคโนโลยราชมงคลสวรรณภม ศนย นนทบร 11000 1 Faculty of Science and Technology,Rajamangala University of Technology, Suvarnabhumi, Nonthaburi, 11000, Thailand

* Corresponding author. E-mail: [email protected]


search products, can register, use web board and order products. Employees group and owner group can use system for

manage order list, check payment and check delivery of goods. Last group is administrator that manage data for

configuration web site. The system evaluate by employees and have average score was 4.34, which means good system.

Keywords: Codeigniter, Framework, Bootstrap,MVC,online sales

บทนา

ในปจจบนพฤตกรรมของผบรโภคไดเปลยนแปลงไปจากเดมเปนอยางมาก จากการทผบรโภคจะเดนเลอก

ซอสนคาจากหางสรรพสนคา หรอ รานคาตาง ๆ มาเปนการหาขอมลและเลอกซอสนคาผานทางระบบอนเทอรเนต

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

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

ขอมลและเลอกซอสนคากยงนยมและเพมมากขนเรอย ๆ [1][2] ซงบรษทTechwoodFar-Eastจากด เปนบรษททผลต

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

ตอ ทางบรษทจงอยากขยายฐานลกคาเพมประกอบกบเหนโอกาสทจะใชประโยชนจากพฤตกรรมการใชอนเทอรเนต

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

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

และเพอเปนการขยายฐานลกคาใหเพมขนจากเดมทเปนอย รวมถงเปนการสรางความเชอมนและภาพลกษณทดของ

องคกรใหกบลกคาดวยเหตนทางบรษท TechwoodFar-Eastจากด จงไดมอบหมายงานให คณะผจดทา จดทาระบบ

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

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

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

สามารถแสดงผลบนอปกรณหลายประเภทไดซงเทคโนโลยทนามาใชไดแก Codeigniter Framework มาทาการ

พฒนา Web Application ในลกษณะ Model-View-Controller (MVC) ดวยภาษาPHP รวมกบ Bootstrap

Framework ใชในการทาสวนของ Interface เพอใหไดคณสมบต Responsive สวนการจดการขอมลนนใช MySQL

ในการจดการขอมล โดยผาน phpMyAdmin

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

เทคโนโลย Framework

คาวา Framework ในทน หมายถงชดของ Libraries หรอ Classes สาหรบใชในการพฒนาโปรแกรม โดย

มโครงสรางทแนนอนตามท ผสราง Framework กาหนดใหเปนมาตรฐาน ของ Framework นนๆ ภายในโครงสราง

ของ Framework จะประกอบดวยรหสโปรแกรม (Source Code) ทสามารถนา กลบมาใชใหม ไดอก (Reusable)

ซงจะช วยใหประหยดเวลาในการสรางงานประยกตหนงๆ ไดมาก Framework ทนยมใช กนอย มหลาย Platform

แยกตามภาษาคอมพวเตอรท ใช เช น .NET Framework หรอ Java Framework เปนตน ในบทความ น หมายถง


PHP Framework ซงในภาษา PHP มใหเลอกใช หลายตวดวยกน อาทเชน Zend Framework, CakePHP, Prado,

PHP on TRAX, ZooP Framework, eZ Components, และ CodeIgniter เปนตน [3]

สถาปตยกรรมเอมวซ (MVC: Model-View-Controller)

เปนสถาปตยกรรมทใชในวศวกรรมซอฟตแวร ในการสรางงานประยกต โดยโครงสรางของสถาปตยกรรม จะ

แบงเปน 3 สวน ไดแก สวนของ Model สวนของ View และสวนของ Controller ในสวนของ Model เปนสวนท

แสดงใหเหนขอมลและ Business logic จะแยกออกจากสวนของ View ซงเปนสวนทตดตอกบผ ใช (Interface) โดยม

สวนของ Controller เปนตวจดการประสานเขาดวยกน [3]

CodeIgniter : PHP Framework

CodeIgniter พฒนาขนโดย Rick Ellis เปนเฟรมเวรคทนามาใชในการพฒนาการเขยนเวบแอปพลเคชน

ดวยภาษา PHP อาศยหลกการของ Model-View-Controller (MVC) ซงสถาปตยกรรมนแบงสวนการพฒนาออกเปน

สามสวนอยางชดเจน คอ สวนการตดตอผ ใช (View) สวนการควบคมการดาเนนไปของโปรแกรม (Controller) และ

สวนการจดการฐานขอมล (Model) ซ งการออกแบบสถาปตยกรรมของระบบเชนนทาใหงายตอการปรบปรงแกไขหรอ

พฒนาตอยอด และมความสอดคลองกบการพฒนาโปรแกรมเชงวตถ (Object Oriented Programming) อยางลงตว

โดยการนาเอากรอบงานของ CodeIgniter มาใชเปนแบบแผนในการพฒนาระบบนอกจากประโยชนในการนามาใช

เปนกรอบงานแลว CodeIgniter ยงเสรมความสามารถดวยฟงกชนการทางานพนฐานทผานการทดสอบจากกลมผ ใช

ทวโลก ทาใหผพฒนามความมนใจในการนาไปใชระดบหนง [4]

Bootstrap Framework

Bootstrap เปน Front-end Framework ทชวยใหสามารถสรางเวบแอพลเคชนไดอยางรวดเรว และ

สวยงาม UI (User Interface) ตว Bootstrap เองนนประกอบไปดวย CSS Component ทสามารถสรางเวบท

สวยงามได และ JavaScript Plugin ทสามารถเรยกใชงานไดอยางหลากหลาย ไมวาจะเปนป ม (Buttons) สตางๆ

ฟอรมคอนโทรลตางๆ, ตาราง, ไอคอน, เมนบาร, Dropdown, เมน, หนาตาง Popup (Modal) ซงสงตาง ๆ เหลาได

ถกเขยนไวแลวเวลาใชงานกเพยงแคเรยกใชใหถกชอเทานนเอง อกทงตว Bootstrap ถกออกแบบมาใหรองรบการ

ทางานแบบ Responsive Web ซงทาใหเขยนเวบแคครงเดยวสามารถนาไปรนผานเบราเซอรไดทงบน มอถอ แทบเลต

และพซทวไป โดยทไมตองเขยนใหม [5][6]

วธการศกษา (Methodology)

ในการพฒนา ระบบขายสนคาออนไลนของบรษท Techwood Far-East จากดนนทางคณะผจดทาไดใช

Software ตางๆ ในการพฒนา ไดแก AppServe ซงประกอบไปดวย Apache ใชในการทาหนาท Webserver, PHP

ใชในการ Run Web Application โดยจะใช CodeIgniterFramework รวมกบ Bootstrap ในการพฒนา Web


Application, MySQL และphpMyAdmin ใชในการจดการฐานขอมล สวนในการพฒนาจะเปนไปตามขนตอนการ

พฒนาแบบ SDLC โดยมขนตอนดาเนนงานตาง ๆ ดงน

Requirement Analysis ในขน ตอนน จะทา Requirement Gathering โดยใชวธการการสอบถามความตองการจากผใชและเกบ

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

Functional Requirement หรอ Non Functional Requirement จากนนนาเอาขอมลทไดมาเขยนขอบเขตของ

ระบบงานแลวนาขอบเขตทไดใหผ ใชพจารณาวาครบถวนถกตองหรอไม ขนตอมาทาการเขยน Use Case Diagram

ระบบขายสนคาออนไลนของบรษท Techowood Far - East จากด ในสวนหนาราน และ หลงราน ดงภาพท 1 และ

2 ตามลาดบขนตอไปทาการเขยน Use Case Description จากความตองการของผ ใชทรวบรวมมาได เพออธบาย

การทางานระหวางระบบกบผใชงานในแตละUse Case แลวจงนาสงทไดจากการทา Requirement Analysis ไปทา

การออกแบบในขนตอนตอไป

ภาพท1 Use Case Diagram ระบบขายสนคาออนไลนของบรษท Techowood Far - East จากดสวนหนาราน

( Front Office )


ภาพท 2 Use Case Diagramระบบขายสนคาออนไลนของบรษท Techowood Far - East จากดสวนหลงราน

( Back Office)

Design ในขนตอนน เมอได Use Case Diagram และ Use Case Description แลว คณะผพฒนาทาการวาด

Class Diagram ดงภาพท 3 โดยพจารณาจาก Use Case Description วาตองม Class ทจาเปนตอการทางาน

อะไรบางและทาการสราง CRC Card เพอตรวจสอบ Class Diagram ทไดวาม Class ครบถวนสามารถทางานได

ตาม Use Case Description เมอได Class Diagram ทสมบรณแลว คณะผพฒนาจงนามาวาด Sequence

Diagram และ Collaboration Diagram ทสาคญๆ เพอพจารณาการทางานระหวาง Objects ตางๆของระบบ แลว

จงทาการออกแบบฐานขอมล โดยจะนาเอา Class Diagram มาปรบแตง ใหเปนE-R Diagram ดงภาพท 4 ในดาน

การออกแบบสถาปตยกรรมทใชจะเปนลกษณะการทางานแบบ Web Base Applicationสวนดานการออกแบบ

User Interface และ การออกแบบ Program รวมถงการ Navigation ตางๆ ภายในระบบ จะใช Use Case

Diagram, Use Case Description, Sequence Diagram และ Collaboration Diagram มาชวยในการออกแบบ

ซงในขนตอนน มการจดทา Prototype ใหผใชงานไดพจารณาในเบองตนวาตรงกบทตองการหรอไม


ภาพท 3 Class Diagram ระบบขายสนคาออนไลนของบรษท Techowood Far - East จากด


ภาพท 4 E-R Diagramระบบขายสนคาออนไลนของบรษท Techowood Far - East จากด

Implementation ในขนตอนน จะนาเอา E-R Diagram ทได มาทาการสรางฐานขอมล สวนการออกแบบ User Interface

และ การออกแบบ Program โดยอาศย Diagram ตางๆ ทไดจากขนตอนการ Requirement Analysis และขนตอน

DesignนามาใชในการCoding ระบบซงพฒนาในลกษณะ MVC โดยใช CodeIgniter Framework และใช

Bootstrap Framework ชวยในการตบแตงหนา Page เพอใหสวยงามและใหมคณสมบต Responsive จากนนจง

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


ผลการศกษาและอภปรายผล

ระบบขายสนคาออนไลนของบรษท Techwood Far-East จากด แบงผ ใชงานออกเปน 5 กลม คอ กลมท1

ผใชงานทวไป และกลมท2สมาชก สามารถดรายการสนคา, คนหาสนคา, สมครสมาชก, ตงและตอบกระท เวบบอรด

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

สนคา, ตรวจสอบการแจงชาระเงน และตรวจสอบการจดสงสนคา กลมท5ผดแลระบบสามารถจดการขอมลพนฐาน

เกยวกบเวบไซตได โดยระบบจะมหนา main page ดงภาพท 5 ซงเปนภาพทแสดงผลระบบบน Desktopและ สวน

ภาพท 6 เปนภาพหนา page หลกของระบบบน Smartphone ซงจะมคณสมบต Responsive จากการใช

Bootstrap Frameworkในสวนการคนหาสนคานนจะแสดงดงภาพท 7ซงสามารถระบ รปแบบอญมณ และความใส

ของอญมณได สวนภาพท 8 เปนภาพหนา Pageแสดงรายการสนคาทจาหนาย โดยแบงตามประเภทใหญ คอ Real

Jewelry และ Fashion Jewelry โดยในแตละประเภทยงแบงเปนกลมของ แหวน, สรอยขอมอ, ตางห และ สรอยคอ

เมอนาไปใหผ ใชทดลองใชงานและทาการประเมนในดานตาง ๆ ดงน ในดานการใชงานการปอนขอมล ไดคะแนน

4.30 ดานการนาเสนอเนอหา ไดคะแนน 4.40 ดานการแสดงผลไดคะแนน 4.20 ดานการประมวลผล ไดคะแนน

4.50 และดานสงอานวยความสะดวก 4.30 ซงเมอคดเปนคะแนนเฉลย ระบบไดระดบคะแนนเฉลยท 4.34 คะแนน

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

พฒนาในลกษณะ Model-View-Controller (MVC) ดวย Codeigniter Framework และ สามารถรองรบการแสดง

ผลไดหลายอปกรณดวยการใช Bootstrap Framework ในการพฒนา สวนดานทตองปรบปรง คอดานการแสดงผล

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

ปญหาทพบคอเมอนามาใชงานกบ PHP Version ทสงกวาในปจจบนการแสดงผลอาจมปญหาผดเพยนหรอไม

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

Version ทใชในการพฒนาคอ 5.2.6

ภาพท 5 หนา Page หลกของเวบไซตบรษท Techwood Far-East จากดบน Desktop


ภาพท 6 หนา Page หนา Page หลกของเวบไซตบรษท Techwood Far-East จากดบน Smartphone

ภาพท 7 หนา Page คนหาสนคาของเวบไซตบรษท Techwood Far-East จากด


ภาพท 8 หนา Page แสดงรายการสนคาของเวบไซตบรษท Techwood Far-East จากด

สรป

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

การใชงานจากผ ใชอยในระดบดเมอพจารณาจากคะแนนเฉลยทไดรบทงในเรองของการดาเนนงาน ลดงานดาน

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

เปนระบบทมลกษณะ Model-View-Controller (MVC) ดวยการใช Codeigniter Framework และมคณสมบต

Responsive ทรองรบการทางานกบอปกรณหลากหลายประเภทดวยการใช Bootstrap Frameworkแตมปญหาท

สาคญคอเมอนามาใชงานกบ PHP Version ทสงกวาในปจจบนการแสดงผลอาจมปญหาผดเพยนหรอไมสามารถ

ทางานได เนองจากบางชดคาสงไมเหมาะสมตอการใชงานหรอไมสนบสนนทาให PHP แจงเตอน โดย Version ทใช

ในการพฒนาคอ 5.2.6


เอกสารอางอง [1] “ผลสารวจพฤตกรรมผใช internet ในไทย 2556 คนสวนใหญ ใชทาอะไรกนบาง?” เขาถงไดจาก :

http://www.it24hrs.com/2013/thailand-internet-user-2556-2013-search-and-game-online/

[2] “สถตผ ใชงาน Internet ของประเทศไทยป 2016” เขาถงไดจาก : http://www.veedvil.com/news/internet-users-and-usage-in-

thailand-2016/

[3] วทวส พนธมจนดา ธวชชย เอยมไพโรจน นวลศร เดนวฒนา และ วรช ศรเลศลาวาณช. ซอฟตแวร KuiSci เพอการทางานร วมกน

ดวย PHP Framework ใน: การประชมทางวชาการ NCIT2008 ครงท 2 (2nd National Conference on Information

Technology 2008) เรอง “การวจยเทคโนโลยสารสนเทศเพอการพฒนาประเทศทยงยน” 6–7 พฤศจกายน 2551 โรงแรม

แกรนด เมอรเคยว ฟอรจน กรงเทพฯ

[4] อธตา ออนเออน. 2557. เทคนคการใชวดเจตกบการควบคมการจดการการเปลยนแปลงของซอฟตแวร กรณศกษา:ระบบเพอการจด

ขอมลงานประกนคณภาพการศกษาของสถาบนพระบรมราชชนก PIEiS. น. 865-870. ใน : The 10th National Conference

on Computing and Information Technology ( NCCIT 2014) 8-9 พฤษภาคม 2557 โรงแรมองสนา ลากนา จ. ภเกต

[5] “การใชงาน Bootstrap Framework : ประโยชน และขนตอนการตดตง Bootstrap ”เขาถงไดจาก

:http://www.softmelt.com/article.php?id=511

[6] มงคล ชมทอง และ สมชาย ปราการเจรญ. 2557. เวบแอพพลเคช นการประเมนตนเองของบคลากรดวย Model View Controller

น. 860-866. ใน: The 10th National Conference on Computing and Information Technology ( NCCIT 2014 ) 8-9

พฤษภาคม 2557 โรงแรมองสนา ลากนา จ. ภเกต

[7] สถตย เรยนพศ. พนฐาน+ประยกตใช Codelgniter+MySQL+Dreamweaver. กรงเทพ : วตตกรป, 2555

[8] “คมอทา Codeigniter สามารถศกษาเพมเตมและดรายละเอยดของการสรางคาสงตาง ๆ ”เขาถงไดจาก

:http://www.codeigniter.in.th/

[9] “คมอทาและตดตง Bootstrap เวอรชน 2.3.2สามารถศกษาเพมเตมและดรายละเอยดของโคดทใชสรางForm ”เขาถงไดจาก

:http://getbootstrap.com/2.3.2/

ระบบขายสินค้าออนไลน์ของ ... · 2016-07-06 ·...

Documents