การออกแบบ และพัฒนาเว็บไซต์ บริษัท อินเตอร์คอนทิเนนทัล จิวเวลเลอรี่ แมนุแฟคเจอริ่ง จำกัด (มหาชน)

SPU CHONBURIการออกแบบ และพฒั นาเว็บไซต บรษิ ัท อินเตอรค อนทเิ นนทลั จวิ เวลเลอรี่
แมนแู ฟคเจอร่ิง จาํ กดั (มหาชน)

Design and Development of Corporate Website for
Intercontinental Jewellery Manufacturing Co., Ltd

ธนพล ถนัดหตั ถกรรม
Thanapon Tanuthuttakum
เจษฏากร อกั ษรศรี
Jedsadakorn Agsornsri

รายงานฉบบั นเ้ี ปน สวนหน่ึงของการปฏิบตั ิงานสหกจิ ศกึ ษา
สาขาวิชาเทคโนโลยีสารสนเทศและการสอื่ สาร
คณะเทคโนโลยีสารสนเทศ
มหาวทิ ยาลยั ศรปี ทุม วิทยาเขตชลบรุ ี
ปการศกึ ษา 2560

SPU CHONBURIการออกแบบ และพฒั นาเว็บไซต บรษิ ัท อนิ เตอรค อนทเิ นนทลั จวิ เวลเลอร่ี
แมนูแฟคเจอร่ิง จํากดั (มหาชน)

Design and Development of Corporate Website for
Intercontinental Jewellery Manufacturing Co., Ltd

ธนพล ถนดั หตั ถกรรม
Thanapon Tanuthuttakum
เจษฏากร อักษรศรี
Jedsadakorn Agsornsri

ปฏบิ ตั งิ าน ณ บรษิ ทั อนิ เตอรค อนทิเนนทัล จวิ เวลเลอรี่ แมนูแฟคเจอร่ิง
จาํ กดั (มหาชน)

เลขท7ี่ 00/108 ตาํ บลคลองตาํ หรุ อําเภอเมือง จังหวดั ชลบรุ ี
รหสั ไปรษณยี  20000

I

ช่ือหวั ขอ การออกแบบ และพฒั นาเว็บไซต บริษัท อนิ เตอรคอนทิเนนทัล

ชอื่ นกั ศึกษา จิวเวลเลอรี่ แมนแู ฟคเจอรงิ่ จาํ กดั (มหาชน)
สาขาวชิ า
คณะ Design and Development of Corporate Website for

Intercontinental Jewellery Manufacturing Co., Ltd

นายธนพล ถนดั หัตถกรรม เลขประจําตวั 59706865

นายเจษฎากร อักษรศรี เลขประจําตัว 59703497

เทคโนโลยสี ารสนเทศและการสอื่ สาร

SPU CHONBURI เทคโนโลยีสารสนเทศ

คณะเทคโนโลยีสารสนเทศ มหาวิทยาลัยศรีปทุม วิทยาเขตชลบุรี อนุมัติใหรายงานการ
ปฏบิ ตั ิงานสกจิ ศึกษาเปนสว นหนง่ึ ของรายงานวิชาสหกจิ ศึกษา

รองคณบดคี ณะเทคโนโลยสี ารสนเทศ

…………………...............................................
(ผชู วยศาสตราจารย ดร.เศรษฐชยั ชยั สนทิ )

หัวหนา สาขาวิชาเทคโนโลยสี ารสนเทศและการสอื่ สาร

..............................................
(อาจารยจ ริ าภรณ ชมย้ิม)

อาจารยทป่ี รกึ ษาสหกจิ อาจารยท ป่ี รกึ ษาสหกจิ

............................................. ..............................................
(อาจารยจ ริ าภรณ ชมย้ิม) (อาจารยอ ภิชยั ตระหงา นศรี)

II

iufi zzilqunlnil 2561

d rodr:r umu nr:rJfr rifi ar,tfi o fi nuT
t50{

t:uu ala, tAaadassdJ nu1 amlitlrvrnTula6ar:auryrfi uaunl:eaa1:

:dfiLl5nu1ar4nofi

Ja a ! d au nvil{I1ufld:

01a1:80:'tR:6u ttJUri uauo1o1TtjoRfler

n: :gt'trJvitvvfvl a:uvar.rlJ u1 u 6uv{a fl u9t149r 0 fl ::tJ uauul u tQua1
o nu:fi un FI nB't

a1r1aerstd'lJrsvsranauldu,laEar:aurilfl$aufl1:Aoa1: n6uurilnluladar:aurvrfi ilil'riyrulduoirJrlu
SPU CHONBURI
iuurrrntaus tdilfrt6{lualrfirfinur :vra'irliufi 8 rfiouun:rnil fl.n. 2561 6liud ta

rdaunqunrnlr r{.fi. 2561 tusirurarjr{riauhJ:un:iluroi uavlriiuuouraurutvirirrauanl:

oonltuu ttaeivlg]tu'ltC?uqL{gGltt9ivlnuua:uuvl a dq u aJ , j oo
ouLgto:nouvtLuuvta
o?t?aLao: u}JHuy'lat0o:{ 0'tn9l

(uurw)

roirrf3, nr:rJ,afrcta6.:ruaufi-of4inurl6y.?o!uqfla{u6?y 6aql'[niImvil:r''ru{1ur]'r:ilfrri6.rru

a<vto-riuo ndm ohuru z [ail [fl ol, o:u n rGnur dolil

aufr o fr nur6":

ddJs,

Q { r: uurJl Lfl o [U:nfl a'r:fu1

od

$ou6a{n?.llJuu00

... 6.14.H!......q{e fu?l.sr.f,...

(u'tuouv{a afinri'nan::u)

(urattugrn:

IV

หัวขอ สหกิจศกึ ษา การออกแบบ และพฒั นาเว็บไซต บรษิ ทั อนิ เตอรค อนทเิ นนทลั
จิวเวลเลอร่ี แมนแู ฟคเจอริ่ง จํากัด (มหาชน)
ชือ่ นักศกึ ษา Design and Development of Corporate Website for
Intercontinental Jewellery Manufacturing Co., Ltd
อาจารยทปี่ รึกษา นายธนพล ถนัดหัตถกรรม
หลักสูตร นายเจษฎากร อักษรศรี
สาขาวชิ า อาจารยจ ริ าภรณ ชมยิ้ม และอาจารยอ ภิชัย ตระหงา นศรี
พ.ศ. วทิ ยาศาสตรบัณฑิต
เทคโนโลยีสารสนเทศและการส่ือสาร
2561
SPU CHONBURI
บทคัดยอ

จากการปฏิบัตงิ านสหกิจศึกษาในบริษทั อนิ เตอรค อนทิเนนทัล จิวเวลเลอรี่ แมนูแฟคเจอร่ิง
จํากัด (มหาชน) ไดรับมอบหมายงานใหออกแบบ และพัฒนาเว็บไซต เน่ืองจากบริษัทตองการที่จะ
พฒั นา และสรา งเวบ็ ไซตข ้นึ มาใหมเพอื่ รองรบั การทาํ งานตาง ๆ ทางบริษัทจึงมอบหมายใหนักศึกษา
สหกจิ ศกึ ษาสรางเว็บไซตใหมรี ะบบทคี่ รอบคลุมการทาํ งาน เพอื่ เพม่ิ จดุ เดนของการนาํ เสนอบรษิ ทั ใหมี
ความนาสนใจท่ีจะรวมลงทุนโดยสรางเว็บไซตข้ึนเพื่อใหนําเสนอบริษัทใหมีความนาเช่ือถือตอ
นักลงทุนตาง ๆ หรือลูกคาท่ีจะทําการคาระหวางบริษัทคณะผูจัดทําใชภาษา PHP, HTML5, CSS,
JavaScript ในการพัฒนาระบบใช Bootstrap เปนเคร่ืองมือชวยในการออกแบบเว็บไซต และใช
Mysql พัฒนาในการจัดเกบ็ ฐานขอมูลเพอื่ ชวยใหงา ยตอ การจดั การขอ มลู สาํ หรับผูด ูแลระบบ

จากการศึกษาพบวา การออกแบบ และพัฒนาเว็บไซตอนิ เตอรคอนทิเนนทัล จิวเวลเลอร่ี
แมนูแฟคเจอริ่ง จํากัด (มหาชน) ผลลัพธที่ได คือ ผูใชงานเว็บไซตสามารถดูรายละเอียดเกี่ยวกับ
เว็บไซตไ ด และสามารถเขาสรู ะบบเพือ่ ใชง านในสว นทีเ่ กยี่ วขอ งกบั บรษิ ัท โดยประเมินความพึงพอใจ
ของระบบดา นความถูกตอ งของระบบ (Functional) มีภาพรวมอยูในระดบั ดี ( = 4.07, SD= 0.12)

และดานความใชง านงายของระบบ (Usability Test) มภี าพรวมอยใู นระดับดี ( = 3.93, SD= 0.32)

คําสําคัญ: เวบ็ ไซต จวิ เวลร่ี เครอ่ื งประดบั

III

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

การทค่ี ณะผจู ดั ทาํ ไดมาปฏบิ ตั ิงานตามโครงการสหกิจศกึ ษา ณ บรษิ ัท อินเตอรคอนทเิ นนทลั

จิวเวลเลอร่ี แมนูแฟคเจอริ่ง จํากัด (มหาชน) ตั้งแตวันที่ 8 เดือนมกราคม พ.ศ. 2561 ถึงวันท่ี 18

เดือนพฤษภาคม พ.ศ.2561 ทําใหคณะผูจัดทํา ไดรับความรู และประสบการณในการทํางานจริง

รวมท้งั ทักษะในการทาํ งานดานตาง ๆ ทม่ี ีคณุ คา สําหรบั รายงานสหกิจศกึ ษาฉบับน้ี สําเร็จลงไดดวยดี

เน่ืองจากการสนับสนุน และความรว มมอื จากบคุ คล ดงั นี้
SPU CHONBURI
1. คุณจกั รี ศรจี ันทรก ่าํ Programmer

2. อาจารยจ ิราภรณ ชมยม้ิ อาจารยท ป่ี รึกษาสหกจิ ศกึ ษา

3. อาจารยอ ภชิ ยั ตะหงานศรี อาจารยทปี่ รึกษาสหกจิ ศกึ ษา

นอกจากนี้ยงั มีบุคคลทา นอ่นื ๆ ทีม่ ิไดกลาวไว ณ ทน่ี ้ี ซง่ึ ทานเหลา น้ไี ดก รุณาใหคําแนะนํา

ในการจัดทาํ รายงานฉบับนี้

คณะผจู ดั ทาํ ขอขอบพระคณุ ทุกทา นทไ่ี ดมสี วนรวมในการใหขอมูล คําแนะนํา และเปนท่ี

ปรึกษาในการจัดทาํ รายงานฉบับน้จี นเสรจ็ สมบรู ณ

นาย ธนพล ถนดั หัตถกรรม
นาย เจษฎากร อกั ษรศรี

คณะผูจัดทาํ รายงาน
วันท่ี 22 พฤษภาคม 2561

V

คาํ นํา

เอกสารประกอบโครงงานสหกิจศึกษาฉบับนี้จัดทําขึ้นเพื่อประกอบการจัดทําโครงงาน
การออกแบบ และพัฒนาเว็บไซต บรษิ ัท อินเตอรคอนทิเนนทัล จิวเวลเลอร่ี แมนูแฟคเจอร่ิง จํากัด
(มหาชน) ตามหลักสูตรวิชาสหกิจศึกษาเทคโนโลยีสารสนเทศและการส่ือสาร ซ่ึงตองใชหลักการ
ออกแบบ และการพฒั นา ระบบบงานเพ่ือเปนประโยชนต อผูท สี่ นใจจะศึกษา และเปน แนวทางในการ
พัฒนาระบบตอไป

โดยเอกสารโครงงานการออกแบบ และพัฒนาเว็บไซต บริษัท อินเตอรคอนทิเนนทัล
จิวเวลเลอร่ี แมนูแฟคเจอริ่ง จํากัด (มหาชน) ประกอบดวยขอบเขตการพัฒนาระบบ และทฤษฏีที่
เก่ียวของ วิธีการดําเนินงานการวิเคราะหและออกแบบระบบ ประกอบดวย ผังงานกระบวนการ
(Flowchart) ผลการดําเนินงานสรุปผลและขอเสนอแนะ ของการออกแบบ และพัฒนาเว็บไซต
บรษิ ทั อินเตอรคอนทิเนนทลั จิวเวลเลอร่ี แมนูแฟคเจอรง่ิ จาํ กัด (มหาชน)

ทางผูจัดทําหวังเปนอยางย่ิงวา เอกสารประกอบการจัดทําโครงงานการออกแบบ และ
พัฒนาเว็บไซต บริษัท อินเตอรคอนทิเนนทัล จิวเวลเลอร่ี แมนูแฟคเจอริ่ง จํากัด (มหาชน) ตาม
หลักสูตรวิชาสหกิจศึกษาเทคโนโลยีสารสนเทศและการสื่อสาร (ICT498) คงเปนประโยชนตอผูท่ี
สนใจศึกษาไมมากก็นอย หากมีขอผิดพลาด ขอบกพรอง หรือความไมสมบูรณของระบบงานน้ี อัน
เนอ่ื งมาจากผูจ ดั ทํายงั ขาดความรูความชาํ นาญ และขาดประสบการณใ นการพัฒนาระบบ
คณะผูจัดทําจงึ ขออภัยมา ณ ท่นี ้ีและขอนอ มรับความผิดทกุ ประการ

ธนพล ถนดั หตั ถกรรม
เจษฎากร อกั ษรศรี
ผูจ ดั ทาํ
SPU CHONBURI

สารบญัSPU CHONBURI VI

ใบรับรองรายงานการปฏิบัตงิ านสหกจิ ศกึ ษา.................................................................. หนา
หนังสอื รบั รองการสง รายงานการปฏบิ ตั งิ านสหกิจศึกษา................................................ I
กิตติกรรมประกาศ.......................................................................................................... II
บทคัดยอ......................................................................................................................... III
คํานํา............................................................................................................................... IV
สารบญั ........................................................................................................................... V
สารบัญตาราง................................................................................................................. VI
สารบญั ภาพ....................................................................................................................
บทที่ 1 บทนาํ ............................................................................................................ VIII
IX
ประวตั แิ ละความเปนมาของสถานประกอบการ............................................ 1
ทต่ี งั้ สถานประกอบการ.................................................................................. 1
ตําแหนงและลักษณะงานท่นี ักศกึ ษาไดรบั มอบหมาย.................................... 1
บคุ ลากรผูนเิ ทศงาน....................................................................................... 2
ระยะเวลาในการปฏบิ ัตงิ าน........................................................................... 2
บทท่ี 2 แนวคิด ทฤษฏที เ่ี กี่ยวขอ ง............................................................................ 2
งานวิจัยท่เี ก่ียวของ........................................................................................ 3
เครือ่ งมอื ท่ใี ชในการพฒั นาระบบ.................................................................. 3
ภาษาที่ใชใ นการพฒั นาระบบ........................................................................ 4
บทที่ 3 ความเปน มาและความสาํ คญั ของปญ หา........................................................ 5
วัตถุประสงคของโครงงาน............................................................................. 6
ขอบเขตการศกึ ษา......................................................................................... 6
ผลท่คี าดวา จะไดรบั จากการทาํ โครงงาน........................................................ 7
แผนการดาํ เนินงาน (Gantt Chart)............................................................... 7
แผนภาพยูสเคส (Use Case Diagram) ....................................................... 8
แผนภาพซเี ควนซ (Sequence Diagram).................................................... 9
10

สารบญั (ตอ) VII

ความสัมพนั ธข องฐานขอมลู (E-R Diagram) ............................................... หนา
การออกแบบตารางขอมลู (Data Table Design) ....................................... 11
การสรา งเครอ่ื งมอื ประเมนิ ความพงึ พอใจโปรแกรม....................................... 12
การทดสอบและประเมนิ ระบบ...................................................................... 16
สถติ ทิ ใ่ี ชใ นการทดสอบ.................................................................................. 17
บทท่ี 4 ผลการดาํ เนนิ โครงงาน.................................................................................. 17
ผลการพฒั นาระบบ....................................................................................... 19
ผลการวเิ คราะหแ บบประเมนิ ....................................................................... 19
บทท่ี 5 สรปุ ผลการศกึ ษา........................................................................................... 49
สรปุ ผลการดาํ เนนิ โครงงาน........................................................................... 52
ปญ หาและขอเสนอแนะ................................................................................. 52
บรรณานกุ รม.................................................................................................................. 52
ภาคผนวก....................................................................................................................... 55
ภาคผนวก ก ภาพการปฏิบตั งิ านสหกิจศกึ ษา........................................... 57
ภาคผนวก ข ผงั งานกระบวนการ (Flowchart) ...................................... 58
ภาคผนวก ค แบบประเมนิ ความพงึ พอใจ................................................. 59
ภาคผนวก ง รายนามผปู ระเมนิ การใชงานระบบ...................................... 66
ภาคผนวก จ หนงั สอื รบั รองการนาํ ไปใชประโยชน. ................................... 70
หนังสอื ยนิ ยอมใหเผยแพรผ ลงานตอ สาธารณะ............................................................... 72
ประวัตผิ จู ัดทําโครงงาน................................................................................................... 74
SPU CHONBURI 75

สารบัญตาราง VIII
ตารางที่
หนา
3.1 แสดงการออกแบบตารางขอมลู พนกั งาน....................................................... 12
3.2 แสดงการออกแบบตารางเกบ็ ขอมลู สไลด. ..................................................... 13
3.3 แสดงการออกแบบตารางเก็บขอ มลู ขา ว………………………………………………… 14
3.4 แสดงการออกแบบตารางเก็บขอ มลู ขาวประชาสมั พนั ธ. ................................ 15
3.5 แสดงตารางเกณฑก ารใหคะแนนของนักประเมนิ โครงงาน........................... 16
4.1 แสดงตารางสรปุ ผลการประเมนิ ความพงึ พอใจดานการใชงาน
49
(Function Test)………………………………………………………………………………..
4.2 แสดงตารางสรปุ ผลการประเมนิ ความพงึ พอใจดานความงา ยตอ การ 50

ใชงานระบบ(Usability Test)……………………………………………………………….
SPU CHONBURI

IX

สารบญั ภาพSPU CHONBURI หนา
ภาพท่ี
1.1 สัญลกั ษณของบริษทั อนิ เตอรคอนทิเนนทัล จิวเวลเลอรี่ แมนูแฟคเจอร่งิ 1

จํากัด (มหาชน)............................................................................................... 8
9
3.1 แสดงแผนภาพการดําเนินงาน (Gantt Chart)……………………………………….. 10
3.2 แสดงแผนภาพแสดงการทาํ งานของผูใ ช (Use Case Diagram)………………… 11
3.3 แสดงแผนภาพแสดงซเี ควนซ (Sequence Diagram)……………………………… 19
3.4 แสดงแผนภาพความสมั พันธข องฐานขอมลู (E-R Diagram)........................... 20
4.1 แสดงหนาจอหลักของเว็บไซตบริษทั ………………………………………………………. 21
4.2 แสดงหนา จอแรกของเวบ็ ไซตบริษทั สว นภาพรวมของธุรกจิ ตอ จากดา นบน.... 22
4.3 แสดงหนา จอแรกของเว็บไซตบ รษิ ัทสวนตัวอยางสินคา ตอ จากดานบน........... 23
4.4 แสดงหนาจอแรกของเว็บไซตบ รษิ ัทสวนพารท เนอรตอ จากดา นบน……………. 24
4.5 แสดงหนาจอแรกของเวบ็ ไซตบ รษิ ทั สวนของชองทางการติดตอ ตอจากดานบน.. 25
4.6 แสดงหนา จอเมนูหลกั ของเว็บไซต. .................................................................. 26
4.7 แสดงหนา จอขอมลู เกี่ยวกับบริษัท………………………………………………………….. 27
4.8 แสดงหนา จอเมอ่ื เลือกเมนยู อ ย Message from the Chairman………………. 28
4.9 แสดงหนา จอแสดงขอ ความจากเจา ของบรษิ ทั …………………………………….…… 29
4.10 แสดงหนาจอการเลอื กเมนูยอ ย Company Profile....................................... 30
4.11 แสดงหนาProfile ของบรษิ ทั .......................................................................... 31
4.12 แสดงหนาการเลอื กเมนูยอ ย Organization Structure................................. 32
4.13 แสดงหนาจอแสดงโครงสรางองคกร................................................................ 32
4.14 แสดงหนา จอการเลอื กเมนูยอย Board of Directors..................................... 33
4.15 แสดงหนา จอแสดง คณะกรรมการบรษิ ทั ........................................................ 33
4.16 แสดงหนา จอแสดงเอกสารสําคญั ของบรษิ ทั .................................................... 34
4.17 แสดงหนาจอแสดงขาวสาร In The News...................................................... 34
4.18 แสดงหนา จอแสดงขาวสารในสว นของ Press Releases................................ 35
4.19 แสดงหนา จอแสดงขาวสารในสวน Gallery.................................................... 36
4.20 แสดงหนาจอแสดงการทํางานของการเขา สรู ะบบ และสมัครสมาชกิ .............. 37
4.21 แสดงหนา จอตอบโตการเขา สรู ะบบ และสมัครสมาชิก………………………………
4.22 แสดงหนาจอ Manage User………………………………………………………………...

X

สารบัญภาพ หนา
ภาพที่ 38
4.23 แสดงหนาจอ Manage User การแกไ ขและกาํ หนดสทิ ธผิ ใู ชงาน.................... 39
4.24 แสดงหนา จอ Manage Slide ....................................................................... 40
4.25 แสดงหนาจอ Manage Slide ปุม Edit........................................................... 41
4.26 แสดงหนา จอ Manage Slide ปมุ Edit ตอ.................................................... 42
4.27 แสดงหนาจอ Manage News......................................................................... 43
4.28 แสดงหนา จอตอบโตแ สดงการเพมิ่ ขอ มลู ของ Manage News....................... 44
4.29 แสดงหนาจอตอบโตแ สดงการแกไ ขขอมลู ของ Manage News..................... 45
4.30 แสดงหนาในสวนของการใสล ายละเอยี ดขา วสารของ Manage News........... 46
4.31 แสดงหนาจอแสดงสถานะ การลบขอ มลู หนาขา วสาร..................................... 47
4.32 แสดงหนาจอ Manage Press Releases……………………………………………….. 48
4.33 แสดงหนา จอ ตอบโตแสดงการแกไ ขขอมลู ของ Manage Press Releases...
SPU CHONBURI

1

บทท่ี 1
บทนํา
ประวัตคิ วามเปนมาของสถานประกอบการ

บรษิ ัทอนิ เตอรคอนทเิ นนทลั จวิ เวลเลอร่ี แมนแู ฟคเจอรงิ่ จํากดั (มหาชน) กอ ตั้งคร้ังแรกเมอ่ื
พ.ศ. 2537 โดยมีภารกิจในการสราง บริษทั ที่เช่ียวชาญในการทํางานอยา งใกลช ิดกบั กลมุ ลกู คาตา ง ๆ
ท่วั โลก โรงงานตง้ั อยูในอมตะนครในเขตปลอดภาษี (Free Zone) เร่ิมเปดใชงานในเดือนพฤษภาคม
2548 โดยมพี น้ื ที่ 35,000 ตารางเมตร และมีพนกั งาน 600 คน

ภาพที่ 1.1 สญั ลักษณของ
บริษัทอินเตอรค อนทเิ นนทลั จิวเวลเลอร่ี แมนูแฟคเจอริง่ จาํ กดั (มหาชน)

ชอ่ื และท่ตี ้งั สถานประกอบการ

ชอ่ื ภาษาไทย บริษัท อนิ เตอรคอนทเิ นนทลั จิวเวลเลอร่ี แมนูแฟคเจอริง่ จํากัด (มหาชน)
ชอื่ ภาษาองั กฤษ Intercontinental Jewellery Manufacturing public company limited
ท่ีต้ังสถานประกอบการ : 700/108 หมู 5 ซอย นิคมอมตะนคร ตําบลคลองตําหรุ อําเภอเมือง
จงั หวดั ชลบรุ ี รหัสไปรษณีย 20000
SPU CHONBURI

2

แผนผงั หนว ยงาน IT ของ

บรษิ ทั อนิ เตอรคอนทิเนนทลั จิวเวลเลอรี่ แมนแู ฟคเจอรง่ิ จาํ กดั (มหาชน)

Manager
SPU CHONBURI
Programmer IT Support

ตําแหนง และลกั ษณะงานท่ีไดร บั มอบหมาย
นักศึกษาไดเขาฝกงานในตําแหนง ผูชวยโปรแกรมเมอร ทําหนาที่ออกแบบพัฒนาเว็บไซต

และชว ยเหลอื พนักงานท่ีปรกึ ษา เก่ียวกับการแกไขปญหาคอมพิวเตอร อุปกรณคอมพวิ เตอร และการ
ใชอ ินเทอรเ นต็

บคุ ลากรผูนเิ ทศงาน
พนักงานทปี่ รกึ ษา : นายจกั รี ศรีจนั ทรกาํ่ ตาํ แหนง Programmer

ระยะเวลาทีป่ ฏิบตั ิงาน
ระยะเวลาในการปฏิบัติงานรวม 18 สัปดาห เริ่มตั้งแตวันที่ 8 เดือนมกราคม พ.ศ.2561 ถึง

วันท่ี 18 เดือนพฤษภาคม พ.ศ.2561

3

บทที่ 2

แนวคดิ ทฤษฎที เ่ี กี่ยวของ

การออกแบบ และสรางระบบเวบ็ ไซต บรษิ ทั อนิ เตอรคอนทเิ นนทัล จวิ เวลเลอรี่แมนแู ฟคเจอร่ิง
จํากัด (มหาชน) ไดศึกษาแนวคิวทฤษฏีท่ีเก่ียวของเพ่ือนํามาใชในการสรางระบบโดยมีรายละเอียด
ดงั ตอไปน้ี

งานวิจยั ทเี่ กี่ยวของ

ศุภชัย ธรรมวงศ (2551) ทําการศึกษาวิจัยเรื่อง การพัฒนาระบบบริหารจัดการขอมูล
บนเวบ็ ไซตส ํานกั งานสาธารณสุขจังหวดั แมฮ อ งสอน มีวัตถุประสงคเพื่อปรับปรุงเว็บไซตสํานักงานฯ
ใหเ ปนแหลงเผยแพรข อมลู ประชาสมั พันธขอมูลขาวสาร กิจกรรม และเปนเครื่องมือในการทํางาน
โดยใชภาษาพีเอชพี และโปรแกรมจดั การฐานขอ มลู มายเอสควิ แอล

เว็บไซตแบงได 2 สวนที่สําคัญ คือ สวนของเจาหนาท่ีและบุคคลทั่วไป และสวนระบบ
บริหารจดั การขอ มลู เปนสว นของผดู ูแลระบบและผูร บั ผิดชอบจากแตละหนวยงาน ใหบริการขอมูล
ไดแ ก ขอ มลู วสิ ัยทศั นแ ละยุทธศาสตร การจองการใชงานหอ งประชมุ รถยนต เครือ่ งโปรเจคเตอร การ
จดั การขอ มูลประชากร สถานการณโรคเอดส การจัดอันดับสถานการณโรคติดตอตาง ๆ การจัดการ
ขอมูลบุคลากร การจัดการไฟลดาวนโหลด การจัดการอัลบั้มภาพ การจัดการขาวกิจกรรม ขาว
ประกวดราคา ขาวประชาสัมพันธ บทความ ซึ่งผลการประเมนิ ความพงึ พอใจดว ยแบบสอบถามพบวา
1) กลมุ ผดู แู ลระบบ มคี วามพึงพอในระดบั ดี (คา เฉลี่ย 4.35) 2) กลุมเจาหนาที่ที่รับผิดชอบขอมูล มี
ความพงึ พอใจในระดับดี (คาเฉล่ีย 4.25) และ 3) กลุมเจาหนาท่ี และบุคคลทั่วไป มีความพึงพอใจ
ระดับดมี าก (คาเฉล่ยี 4.75) สรปุ ไดวา เวบ็ ไซตทพ่ี ฒั นาขึ้นสามารถนาํ ไปใชประโยชนไดจ ริง
SPU CHONBURI

SPU CHONBURI 4

เครือ่ งมอื ที่ใชในการพฒั นาระบบ

1. NetBeans คือ เครอื่ งมอื สําหรับโปรแกรมเมอรทจ่ี ะใชพ ัฒนา Application ดว ยภาษา
Java NetBeans น้ันเปนโปรแกรมประเภท Open source software สามารถใชงานไดโดย
ผูใชงานไมจําเปนที่จะตองเสียเงินเพื่อซื้อมาใชงาน และยังเปดเผย Source code ใหผูสนใจและ
นักพัฒนานําไปดัดแปลง แกไข ตามกฏของ Open source โดยมี Sun Micro System เปน
ผูสนับสนุนโครงการปจจุบัน NetBeans ไดรับความนิยมมากย่ิงขึ้น และไดรับการพัฒนาใหมี
ความสามารถสงู ย่ิงขน้ึ เร่อื ยๆ จนถงึ เวอรชน่ั ลาสุด คือ นอกจากจะใชในการพัฒนา Application ดวย
ภาษาจาวาแลว ยงั สามารถพัฒนาอ่นื ๆไดอีกหลากหลายโดยติดตั้งโปรแกรมเสริม (Add-on) ไดจาก
เว็บไซต หรือผานตัวอัปเดตเซนเตอร (Update Center) ของ NetBeans เชน ภาษาซี/ซีพลัสพลัส
(C/C++), Ruby, UML, SOA, Web Application, Java EE, Mobility(Java ME), Java FX, Java
Script, PHP เปน ตน ในเวอรช ัน 6.0 เปน ตนไปมีการรวมโปรแกรมเสรมิ ตางๆที่สําคัญเขาในตัวติดตั้ง
ของ NetBeans โดยสามารถเลอื กตดิ ตั้งไดภ ายหลงั

2. MySQL เปนฐานขอ มูลแบบ Open source ทไ่ี ดรบั ความนิยมในการใชง านสูงสุดโดย
โปรแกรมหนึ่งบนเคร่ือง ใหบริการมีความสามารถในการจัดการกับฐานขอมูลดวยภาษา SQL อยาง
ประสทิ ธิภาพมคี วามรวดเรว็ ในการทํางานรองรับกับการทํางานจากผใู ชหลาย ๆ คน และหลายๆงาน
ในขณะเดยี วกนั มีลกั ษณะเปนโครงสรางของการเก็บรวบรวมขอมูลที่ใชเพ่ิมเติมเขาถึงหรือประมวล
ขอ มลู ท่เี กบ็ ในฐานขอมูลจาํ เปน ตอ งอาศยั ระบบจดั การฐานขอมูลจดั ทาํ หนาทเี่ ปนตวั การในการจัดการ
กับขอ มลู ในฐานขอ มูลท้ังสาํ หรับการใชงานเฉพาะ และรองรับการทํางานของแอพพลิเคชั่นอ่ืน ๆ ที่
ตองการใชงานขอมูลเพื่อใหไดรับความสะดวกในการจัดการกับฐานขอมูลจํานวนมาก MySQL ทํา
หนา ท่ี เปน ทัง้ ฐานขอมลู และระบบจัดการฐานขอมูล (ทศพล ธนะทิพานนท และวรเศรษฐ สุวรรณิกม,
2552)

3. Bootstrap คือ Framework ที่ชวยใหการเขียนเว็บไซตดวย PHP ทําไดงาย และ
สะดวกรวดเร็ว โดยภายใน Boootstrap ไดเตรยี มชุดของ CSS ท่ีชวยปรับแตงหนาเว็บไซต เชน ปุม
ตาราง หนา ตางโตตอบ ฯลฯ เพยี งแคกําหนดคลาสใหกับเอลิเมนตบนเว็บไซต ก็จะไดหนาเว็บไซตท่ี
สวยงามทนั ที นอกจอกน้ันภายใน Bootstrap ยังมีไลบรารต่ี า ง ๆ ทีจ่ าํ เปน สาํ หรับการพัฒนาเว็บไซต
เชน สครปิ ตสําหรับแสดงเมนู สามารถจดั เรยี งเอลเิ มนตอ ตั โนมัตเิ มอื่ ขนาดหนา จอเปล่ียน เปน ตน
(จรี าวุธ วารินทร, 2560, หนา 22)

5

ภาษาทใ่ี ชใ นการพฒั นา

1. PHP (Perfessional Home page) เปนการเขยี นคําส่งั หรือโคดโปรแกรมท่ีเก็บ และ
ทาํ งานบนฝง เซิรฟ เวอร ซึ่งรูปแบบในการเขยี นคําสง่ั การทาํ งานน้นั จะมี ลักษณะคลายกับภาษา Perl
หรือภาษา C และสามารถท่ีจะใชรวมกับภาษา HTML ไดอยางมีประสิทธิภาพ ความสามารถของ
PHP นนั้ สามารถที่จะทํางานเกย่ี วกับ Dynamic Web ไดทุกรปู แบบ ไมว า จะเปน ดานการดูแลจดั การ
ระบบฐานขอมลู ระบบรกั ษาความปลอดภัยของ Web Page การรับสง Cokkies เปนตน เริ่มตนของ
โปรแกรม PHP ดวยแท็ก PHP เปน สคริปตแบบ Embedded สามารถแทรกรวมกับภาษา HTML
ไดอยางอสิ ระ และหากเราพฒั นาโคด ไวในรูปแบบของ Class ท่ีเขียนข้ึนเพียงคร้ังเดียวแลวเรียกใช
งานไดต ลอดทําใหสะดวกและรวดเร็วตอ การพฒั นา (กติ ิ ภกั ดีวัฒนะกลุ , 2552)

2. SQL (Structured Query Language) เปนภาษาจัดการขอมูลอยางมีโครงสราง มี
การพฒั นาภาษาคอมพิวเตอร และโปรแกรมฐานขอมลู ทร่ี องรบั อยมู ากมาย เพราะจดั การขอ มูลไดง าย
เชน MySQL,PostgreSQL หรอื MS Access เปน ตน สําหรับโปรแกรมฐานขอมูลที่ไดรับความนิยม
คือ MySQL เปนซอฟแวร PenSource ท่ีใชงานไดท้ังใน Linux และ Windows (ทศพล ธนะทิพา
นนท และวรเศรษฐ สุวรรณกิ , 2552)

3. CSS3 (Cascading Style Sheets3) เปนภาษาท่ีใชในการเขียนเว็บเพจเพื่อบอกเว็บ
เบราวเ ซอรถงึ ลักษณะของการจัดรูปแบบเอกสาร HTML ที่จะแสดงผล สามาถรถใช CSS นี้ชวยใน
การกําหนดรูปแบบใหกับองคประกอบทั่วไปในหนาเว็บ เชน การเปลี่ยนแบบอักษร สี และระยะ
ขอความ เปนตน CSS จะเปนเหมอื นเครอื่ งมือทใ่ี ชใ นการแตงตวั ใหกบั โครงสรา งทถี่ ูกสรา งจาก HTML
ใหม ีรูปแบบ และสีสนั นาดนู าชมยิ่งขนึ้ (สิทธชิ ยั ประสานวงศ, 2557, หนา 241)

4. JavaScript เปนภาษาที่เปน Script ท่ีอยูในเว็บไซต (ใชรวมกับ HTML) เพ่ือให
เว็บไซตดูมกี ารเคล่ือนไหว สามารถตอบสนองผูใชงานไดมากขึ้น และเปนภาษาสคริปตเชิงวัตถุหรือ
เรียกวา Object Oriented Programming ท่ีมีเปาหมายในการออกแบบ และพัฒนาโปรแกรมใน
ระบบอินเทอรเน็ต สาํ หรบั ผูเขยี นเอกสารดวยภาษา HTML สามารถทํางานขามแพลตฟอรม ไดทาํ งาน
รวมกบั ภาษา HTML และภาษาจาวาไดท้งั ทางฝง ไคลเอนต (Client) และทางฝง เซิรฟ เวอร
(พันจนั ทร ธนวฒั นเสถียร, 2556, หนา 8)
SPU CHONBURI

6

บทท่ี 3
รายละเอียดของโครงงาน

ความเปน มาและความสําคัญของปญ หา

จากที่ไดไปปฏิบัติงานสหกิจศึกษาพบวาเว็บไซตของทางบริษัท น้ันมีขอมูลเดิมท่ีไม
ครบถวน และมีการออกแบบเว็บไซตที่ไมสามารถรองรับการใชงานไดยุคปจจุบันได จึงไดรับ
มอบหมายงานใหอ อกแบบ และพัฒนาเวบ็ ไซต เนอื่ งจากบริษทั ตอ งการที่จะพัฒนาและสรางเว็บไซต
ขึ้นมาใหมเ พ่อื รองรบั การทาํ งานตา ง ๆ ทางบรษิ ทั จึงมอบหมายใหน ักศกึ ษาสหกจิ ศกึ ษาพัฒนาเว็บไซต
ใหม ีระบบทคี่ รอบคลุมการทํางาน เพอื่ เพิ่มจุดเดน ของการนาํ เสนอบริษัทใหมีความนาสนใจที่จะรวม
ลงทุน

โดยพัฒนาเว็บไซตข้ึนเพ่ือใหนําเสนอบริษัทใหมีความนาเช่ือถือตอนักลงทุนตางๆหรือ
ลูกคาที่จะทําการคาระหวางบริษัทโดยในภาษาท่ีใชในการพัฒนาระบบ คือ PHP, HTML5, CSS,
JavaScript และเคร่ืองมือในการพัฒนาเว็บไซต bootstrap framework, Netbean ในการจัดเก็บ
ฐานขอ มูลไดใช MySqlserver เพือ่ ชวยใหง ายตอการจดั การขอมูลสําหรบั ผดู แู ลระบบ

วตั ถุประสงคของโครงงาน

1. เพอ่ื ออกแบบ และพัฒนาเว็บไซต บริษทั อินเตอรคอนทเิ นนทลั จวิ เวลเลอรี่ แมนูแฟค
เจอริ่ง จํากัด (มหาชน)

2. เพ่อื ประเมนิ ความพึงพอใจในการใชง านเว็บไซต บริษัท อินเตอรคอนทิเนนทัลจิวเวล
เลอร่ี แมนแู ฟคเจอรง่ิ จาํ กัด (มหาชน) จากผูใชง านในระดบั ดี
SPU CHONBURI

7

ขอบเขตการศกึ ษา

การออกแบบ และพัฒนาเวบ็ ไซตบ รษิ ทั อินเตอรคอนทิเนนทัลจิวเวลเลอรี่ แมนูแฟคเจอริ่ง
จาํ กดั (มหาชน) มีขอบเขตการดําเดินงานของโครงงานดังตอ ไปน้ี

1. การจดั การขอ มลู ของผูดแู ลเว็บไซต
- ขอ มลู พนักงาน
- ขอมลู การจัดการสิทธิของพนักงาน

2. การจดั การขอ มลู สไลดบนหนา เว็บไซตเพอ่ื แสดงขา วสาร
- ขอมลู สไลด
- ขอ มลู สถานะสไลด

3. การจัดการขอ มลู ขา วสาร
- ขอ มูลขาวสาร
- ขอมูลสถานะขาวสาร

4. การจดั การขอมลู กจิ กรรมตาง ๆ
- ขอ มลู กจิ กรรมตาง ๆ
- ขอ มูลสถานะกิจกรรมตาง ๆ

ผลทคี่ าดวาจะไดรบั

1. ไดเ วบ็ ไซตบ รษิ ทั อนิ เตอรคอนทิเนนทัลจิวเวลเลอร่ี แมนแู ฟคเจอรง่ิ จํากัด (มหาชน)
ท่มี ีประสทิ ธิภาพ

2. ไดผ ลการประเมนิ ความพึงพอใจอยใู นระดับดี
SPU CHONBURI

8

9- IJ
ai9- s
l:i)
-= 't,ja.r
a
:it
t*
'i..ii-!
=o
-_o d :e$. .S: +

p;r a_

3N

eFC ;-.:

rE qo
E-6
SPU CHONBURI
oce- --l: gE
3-0--E-:
-(,7r F2oo F
io CE
(il 6
(P aSrE-PPb g
OL
EG -_!!_s
t(t
;f" q-
J 7? E
-rr! 6s EG.6€
LJ
F FEE=(D=(a
ESxxtBt;tecr@ t: lJn c
(G g t.Il
E
(c {FqC;43
cr AEC9EaE*EE:a?Ec.E5iE? }A
or6
c ES>Eo>g=S6EE E€
c l(r_c

..(F6 C

\cr \O \O aFC(=-
T= SSN\S5SS]O \O \O t26Jc
N
(F !{

;! e{ 1f)- r"i

rUGtsED g aF
6
rF
(6a =(DEr?TGFE= r./|l,l
G
(@F o "(:oOI-oO.l,E(o,r(Ooi-oO(gO'l:fC, ,or
g (flf-drrllrfC{lr}r{

)E o3

{F I:.LL
;l
b6 Fg 5 FEEe.E;Fr9=9ae6E*aO-96

F i*y.f = EE

!c7! :-P.@?IPE-,Fo-gt;

C* ".rEi=€€ zE q-Er$

rE= )
ll
I5
G
€
7;] =

G 5€ E E3 ET EFCs=- e
@(a j2))J
E
cua-r

ee=4o

zE6

6
"EedEc-C.""+E=PEF.;o'=H[q- ,HEF.EH.$Ei,EEE B=ol@ 6D
oN &iPoi=oa'6;

9

แผนภาพแสดงการทํางานของผูใช (Use Case Diagram)

แผนภาพแสดงการทาํ งานของผูใ ช (Use Case Diagram) เปนแผนภาพท่ีใชแสดงให
ทราบวาระบบทํางานหรือมหี นา ทใ่ี ดบาง โดยมีสัญลกั ษณร ปู วงรแี ทน Use Case และสัญลกั ษณรปู คน
(Stick Man Icon) แทน Actor สาํ หรับชื่อ Use Case น้ันสวนแบงขอบเขตระหวาง Actor กับ Use
Case จะใชเ สน กรอบส่ีเหลี่ยม เรียกวา “System Boundary” และส่ิงสําคัญสวนสุดทายก็คือ “ชื่อ
ของระบบ (System Name)” ใหแสดงไวดานบนสุดของแผนภาพ โดยระบบการพัฒนา และ
ออกแบบเว็บไซต กรณีศึกษา บริษัท อินเตอรคอนทิเนนทัลจิวเวลเลอรี่ แมนูแฟคเจอร่ิง จํากัด
(มหาชน) มรี ายละเอียดดังตอไปนี้

Actor คือ ผูดแู ลระบบ (Admin) มหี นา ทใ่ี นการดูแลเว็บไซตและแกไขขอมูลของเว็บไซต
จัดการอัพเดทขอมลู หนาขาวสาร และกาํ หนดสทิ ธติ์ า ง ๆ ใหแกผใู ชง าน

User คอื ผใู ชง านท่ีสามารถเขาดูเว็บไซตไดเ พยี งอยางเดยี วไมส ามารถแกไ ขเนื้อหาภายใน
เว็บไซตได

Use Case คอื ระบบงานตาง ๆ ในระบบ เชน การเขา สูระบบ การจัดการขอมูลขาวสาร
เพ่ิม ลบ แกไข และกําหนดสทิ ธใ์ิ หผูใชง าน เปนตน

การออกแบบ และพฒั นาเว็บไซต์ บริษทั อนิ เตอร์
คอนทิเนนทลั จิวเวลเลอรี แมนแู ฟคเจอริง จํากดั
(มหาชน)

เขา สูระบบ
SPU CHONBURI
หนา จอหลัก

ผดู แู ลระบบ จัดการขอ มลู ขา วสาร ผูใชง าน
จัดการสิทธผ ูใชง าน

ภาพที่ 3.2 แสดงแผนภาพแสดงการทํางานของผูใช (Use Case Diagram)

10

แผนภาพซีเควนซ (Sequence Diagram)

แผนภาพซีเควนซ (Sequence Diagram) เปน แผนภาพทแี่ สดงใหเ ห็นถงึ การปฏสิ มั พันธ
(Interaction) ระหวางออ็ บเจก็ ตข องคลาส โดยการสง message ระหวา งอ็อบเจก็ ตตามลําดบั ของ
เวลา (Sequence) ท่ีเกิดเหตุการณข ึ้นจากนอยไปมาก โดยจะมสี ัญลกั ษณแสดงใหเ หน็ ลําดบั ของการ
สง message ตามเวลาสงอยา งชดั เจน ซง่ึ ในการออกแบบ และพัฒนาเว็บไซต บรษิ ทั อินเตอร
คอนทเิ นนทลั จวิ เวลเลอร่ี แมนแู ฟคเจอร่ิง จาํ กัด (มหาชน) ไดม กี ารแสดงลักษณะของ แผนภาพซี
เควนซ (Sequence Diagram) ดงั ภาพท่ี 3.3

SPU CHONBURIผดู แู ลระบบ ผูใ ชงาน เขา สูระบบ หนาหลกั จดั การขอมลู จัดการสิทธผใู ชงาน
ขา วสาร

ปอนขอมลู เพ่อื เขา สูร ะบบ
ตรวจสอบขอมูลผใู ชง าน

เขา ใชง าน

แสดงการจดั การขอ มลู ขาวสาร ดาํ เนินการ จัดการรายละเอียดขอ มูลขาวสาร
รายละเอยี ดการจดั การขอมลู

ดาํ เนินการ จัดการสิทธผใู ชง าน
รายละเอยี ด จดั การสิทธผูใ ชงาน

แสดงการจัดการขอมลู สทิ ธผ ูใชง าน

ภาพที่ 3.3 แสดงแผนภาพแสดงซเี ควนซ (Sequence Diagram)

11

ความสมั พนั ธข องฐานขอ มลู (E-R Diagram)

แผนภาพแสดงความสัมพนั ธ เปน แผนผงั แสดงผลจากการ Normalized ตารางขอมูลตาง ๆ
และแสดงถึงความสัมพนั ธระหวางตารางขอมลู ที่เกิดขนึ้ ในระบบ และขอ มลู ทใ่ี ชใ นระบบทั้งหมดซึ่งใน
การออกแบบ และพัฒนาเว็บไซต บริษัท อินเตอรคอนทิเนนทัลจิวเวลเลอรี่ แมนูแฟคเจอริ่ง จํากัด
(มหาชน) ไดมีการสรางตารางขอมลู ดังภาพท่ี 3.4

SPU CHONBURIUser_dataSlide_data News_data
User_id (PK)
User_name Slide_id (PK) news_id (PK)
User_per Slide_topic news_topic
Username Slide_detail news_detail
Password Slide_pic news_full_detail
User_status Slide_link news_date
Slide_score news_status
Press_data Slide_status

press_id (PK)
press_topic
press_detail
Press_pic
press _date
press _status

ภาพที่ 3.4 แสดงแผนภาพความสัมพนั ธข องฐานขอ มลู (E-R Diagram)

12

รหสั User_data
ชื่อตาราง ขอมูลพนกั งาน
วัตถุประสงค จดั เกบ็ ขอมลู ของพนกั งานทสี่ ามารถเขาใชง านสวนหลังบา น
ตารางทเี่ ก่ยี วของ -

ลาํ ดบั คณุ สมบัติ ประเภท ขนาด คาํ อธิบาย ตรวจสอบความถูกตอ ง ประเภทคยี  คา เบ้อื งตน
(No.) (Attribute) (Type) (Width) (Description) (Validation Check) (Key Type) (Default)
Varchar ไมเ ปนคาวา ง และไมซ้ํา Primary
1 User_id 20 รหสั พนกั งาน -
SPU CHONBURI Key
2 User_name Varchar 20 ช่อื พนักงาน ตัวอักษร - -
- 1
3 User_per Int 1 กําหนดสิทธ์ิ 1 = พนกั งานทว่ั ไป
- -
การใชงาน 2 = Admin
- -
4 Username Varchar 20 ชอื่ ในการเขาใช ไมเ ปนคาวา ง
- -
งาน

5 Password Varchar 20 รหสั ผา นในการ ไมเ ปน คาวา ง

เขา ใชงาน

6 User_status Int 1 สถานะ 1 = รอการยนื ยนั

2 = ยนื ยนั แลว

0 = ปดการใชง าน

ตารางท่ี 3.1 ตารางเกบ็ ขอ มูลพนกั งาน

13

รหัส Slide_data
ชอ่ื ตาราง ขอมลู สไลด
วัตถุประสงค จัดเกบ็ ขอมลู ของของสไลดท โ่ี ชวใ นหนา แรกของหนาบาน
ตารางที่เกย่ี วของ -

ลําดับ คณุ สมบตั ิ ประเภท ขนาด คาํ อธิบาย ตรวจสอบความถกู ตอง ประเภทคีย คาเบ้อื งตน
(No.) (Attribute) (Type) (Width) (Description) (Validation Check) (Key Type) (Default)
Varchar 20 รหัสสไลด ไมเปน คา วา ง และไมซ้ํา Primary
1 Slide_id -
SPU CHONBURI Key
2 Slide_topic Varchar 50 หวั ขอ ตวั อักษร และตัวเลข - -
- -
3 Slide_detail Varchar 250 เนือ้ หาโดยยอ ตวั อกั ษร และตัวเลข - -
- -
4 Slide_pic varchar 50 ชือ่ รปู ภาพ ตวั อักษร และตวั เลข - -
- 1
5 Slide_link varchar 50 ลิงคหนา ตัวอักษร และตัวเลข

6 Slide_score Int 10 เรียงลําดับ ตวั เลขทา นน้ั

7 Slide_status Int 1 สถานะ 1 = เปดการทาํ งาน

0 = ปดการทาํ งาน

ตารางที่ 3.2 ตารางเก็บขอ มลู สไลด

14

รหัส News_data
ช่ือตาราง ขอ มลู ขา ว
วตั ถปุ ระสงค จดั เกบ็ ขอมลู ของของขาวสารในบรษิ ัท
ตารางที่เกี่ยวขอ ง -

ลาํ ดบั คณุ สมบัติ ประเภท ขนาด คําอธบิ าย ตรวจสอบความถูก ประเภทคยี  คาเบอื้ งตน
(Key (Default)
(No.) (Attribute) (Type) (Width) (Description) ตอ ง Type)
-
(Validation Primary -
SPU CHONBURI Key -
Check) - -
-
1 news_id Varchar 20 รหสั ขา ว ไมเ ปนคา วา ง และ - 1

ไมซํา้ -

2 news_topic Varchar 50 หวั ขอ ขา ว ตวั อกั ษร และ -
-
ตวั เลข

3 news_detail Varchar 250 เนอื้ หาโดยยอ ตัวอกั ษร และ

ตวั เลข

4 news_full_detail varchar 250 เน้ือหา ตัวอกั ษร และ

ตัวเลข

5 news_date Date/Time - วนั ที่สรา ง dd/mm/yyyy

6 news_status Int 1 สถานะ 1 = เปดการทาํ งาน

0 = ปด การทํางาน

ตารางท่ี 3.3 ตารางเกบ็ ขอมูลขา ว

15

รหัส Press_data
ช่ือตาราง ขอ มลู ขาวประชาสมั พันธ
วตั ถุประสงค จดั เกบ็ ขอ มลู ขว ประชาสัมพันธของบริษทั
ตารางทเี่ ก่ยี วของ -

ลาํ ดบั คุณสมบัติSPU CHONBURIประเภทขนาด คําอธบิ าย ตรวจสอบความถกู ประเภทคยี  คา เบือ้ งตน
(No.) (Attribute) (Type) (Width) (Description) ตอง (Key (Default)
Type)
1 press_id Varchar 20 รหัสขา ว (Validation -
ประชาสัมพนั ธ Check) Primary
2 press_topic Varchar 50 หัวขอขา ว Key -
ประชาสมั พนั ธ ไมเ ปน คา วา ง และไม -
3 press_detail Varchar 150 เนอ้ื หาโดยยอ ซา้ํ -
4 press_pic Varchar 20 ช่อื รูปภาพ ตวั อักษร และตวั เลข - -
5 press _date Date/Time - วนั ที่สราง - -
6 press _status 1 สถานะ ตัวอักษร และตัวเลข - 1
Int ตวั อักษร และตัวเลข -
dd/mm/yyyy
1 = เปดการทาํ งาน
0 = ปดการทาํ งาน

ตารางที่ 3.4 ตารางเกบ็ ขอมลู ขาวประชาสมั พนั ธ

16

การสรางเครือ่ งมือประเมนิ ความพงึ พอใจโปรแกรม

ในการออกแบบ และพัฒนาเวบ็ ไซต บริษทั อนิ เตอรคอนทิเนนทัลจิวเวลเลอรี่ แมนแู ฟค
เจอริ่ง จาํ กัด (มหาชน)การสรา งแบบประเมินคณะผูจ ดั ทําไดม ีการสรางแบบประเมินการใชงานระบบ
เพ่อื ใชใ นการประเมนิ ประสทิ ธิภาพการทาํ งานของระบบโดยมขี นั้ ตอนการสรา งเครอื่ งมอื ความพงึ พอใจตอ
โปรแกรมดงั น้ี

การสรา งแบบประเมนิ เร่มิ จากการออกแบบแบบประเมนิ โครงงานและกาํ หนดหวั ขอ ท่ี

จะประเมินผลโดยแบง ออกเปน 2 สวนคอื
1. การทดสอบดานการทดสอบระบบ (Functional Test) คือการทดสอบดาน

ฟง กชนั การทาํ งานของระบบวามีความถูกตอ งตรงกับการใชงานระบบในสวนนั้นโดยจะมีการทดสอบ
ความถูกตองในการจัดเกบ็ ขอมูลพนื้ ฐาน และการวเิ คราะหขอ มลู

2. การทดสอบดา นความงา ยตอการใชง านระบบคอื การทดสอบความมปี ระสทิ ธิภาพ
ในการใชงานโปรแกรมความเหมาะสมในการจดั วางของหนา จอสขี องตัวอักษรและรูปแบบความยาก
งายในการเขาใชง านระบบ

1. ตรวจสอบแบบประเมนิ ใหอ าจารยท ปี่ รึกษาตรวจสอบความถกู ตอ ง และ
ขอเสนอแนะ

2. ทาํ การปรบั ปรงุ แบบประเมินใหถ กู ตอ งตามขอ เสนอของอาจารยทปี่ รึกษา
3. เก็บผลประเมิน
4. วิเคราะหขอ มลู
5. สรปุ ผลการประเมิน

โดยมีการแบง เกณฑใหค ะแนนของแบบประเมินโครงงาน 5 ระดับดังน้ี
SPU CHONBURI
ตารางท่ี 3.5 แสดงตารางเกณฑก ารใหค ะแนนของผปู ระเมนิ โครงงาน

ระดบั คาเฉลยี่ ความหมาย

1 1.00-1.50 นอ ย(Much Below Average)

2 1.51-2.50 พอใช (Below Average)

3 2.51-3.50 ปานกลาง (Fair Average)

4 3.51-4.50 ดี (Above Average)

5 4.51-5.00 ดมี าก (Much Above Average)

17

การทดสอบและประเมนิ ผลระบบ

การทดสอบในการทดสอบเว็บไซต บริษทั อนิ เตอรคอนทเิ นนทัลจิวเวลเลอรี่ แมนแู ฟคเจอ
รงิ่ จาํ กัด (มหาชน)ใชวธิ ีการทดสอบระบบดวยวธิ ีการทดลองใหผใู ชงานทาํ การสรา งขาวอัพเดทข้นึ
หนาเวบ็ ไซตเ พอ่ื ตรวจสอบความถูกตองของระบบ

การประเมนิ ผลระบบรายการประเมินผลระบบไดใ ชแบบประเมนิ โครงงานทไี่ ดสรา งข้นึ
โดยผปู ระเมินไดแกเจา หนา ทแี่ ผนก IT (Information Technology) โปรแกรมเมอร ไอทีซพั พอรต
และหัวหนา ฝายไอทบี รษิ ัท อนิ เตอรคอนทิเนนทลั จิวเวลเลอร่ี แมนแู ฟคเจอรงิ่ จาํ กัด (มหาชน)

สถิตทิ ีใ่ ชในการวเิ คราะหขอ มลู

สถิตทิ ีน่ าํ มาใชใ นการวเิ คราะหขอ มูลเปน สถิตอิ ยา งงายโดยนาํ ผลการทดสอบที่ไดมาทําการ
หาคา เฉลย่ี และสว นเบ่ียงเบนมาตรฐานซึ่งมวี ธิ ีการในการคาํ นวณดังนี้

1. คา เฉลยี่ (Mean) หรอื คา กลางเลขคณิตคา เฉล่ยี คา มชั ฌิมาเลขคณติ เปน ตน

∑
=
เม่อื แทนท่ี คาเฉลยี่
∑ แทน ผลรวมของคะแนนทงั้ หมดของกลมุ

แทน จาํ นวนของคะแนนในกลมุ
SPU CHONBURI

18

1. สว นเบี่ยงเบนมาตรฐาน (Standard Deviation) เปนการวดั กระจายทนี่ ยิ มใชก ันมาก
เขียนแทนดวย SD หรือ S

SD = ∑( )

หรอื

SD = ∑ (∑ )
()
SPU CHONBURI
เมือ่ SD แทน คา เฉลีย่ เบย่ี งเบนมาตรฐาน

แทน คาคะแนน

แทน จํานวนของคะแนนมนแตล ะกลมุ

∑ แทน ผลรวม

19

บทท่ี 4
ผลการดาํ เนนิ โครงงาน
ผลการพฒั นาระบบ

การออกแบบและพฒั นาเวบ็ ไซตบ ริษทั อินเตอรค อนทเิ นนทลั จวิ เวลเลอร่ี แมนแู ฟคเจอรง่ิ
จาํ กดั (มหาชน) มกี ารแสดงหนา จอการพัฒนาดงั ตอไปนี้
4.1 หนาจอแสดงหนา หลกั ของเวบ็ ไซต

เปนหนาจอหลกั ที่แสดงขอ มลู ขาวสารผา นสไลดเ พ่ือแสดงขาวสาร

ภาพที่ 4.1 แสดงหนาจอหลกั ของเว็บไซตบรษิ ทั
SPU CHONBURI

20
4.2 หนาจอแสดงหนา หลักของเวบ็ ไซตสวนตอ จากดา นบน

แสดงขอ มลู เกยี่ วกับ ภาพรวมของธรุ กิจ ทเี่ กยี่ วขอ งกบั ประวตั ิของบรษิ ทั และภาพรวมของ
บรษิ ทั ทม่ี เี นอื้ หาเกย่ี วกบั บคุ คลากรและการทํางานของบริษัท

ภาพที่ 4.2 แสดงหนา จอแรกของเว็บไซตบ ริษทั สว นภาพรวมของธุรกจิ ตอ จากดานบน
SPU CHONBURI

21
4.3 หนา จอแสดงหนาหลกั ของเวบ็ ไซตสวนตอ จากดา นบน

เปน หนา จอหลักของเว็บไซตที่แสดงขอมูลเก่ียวกับ ตัวอยางสินคาตัวใหมท่ีมีการเปดตัว
เมื่อไมนานมานีแ้ บง แยกเปนชนดิ ตาง ๆ ทม่ี ีการแยกหมวดหมขู องสินคา ท่ชี ดั เจน

ภาพท่ี 4.3 แสดงหนา จอแรกของเว็บไซตบ รษิ ทั สว นตัวอยา งสนิ คา ตอ จากดานบน
SPU CHONBURI

22
4.4 หนาจอแสดงหนา หลกั ของเวบ็ ไซตส วนตอ จากดา นบน

แสดงขอ มลู เก่ียวกบั พารท เนอร และผูทม่ี สี วนรว มกบั บรษิ ทั ทไ่ี ดมกี ารรวมมอื กบั พฒั นา
บรษิ ัทไดมปี ระสทิ ธภิ าพท่ดี ียิ่งขึน้ อยา งเชน บริษทั จาํ หนา ยทองคําหรอื นาํ เขาเพชร

ภาพที่ 4.4 แสดงหนา จอแรกของเวบ็ ไซตบ รษิ ัทสว นพารท เนอรตอจากดา นบน
SPU CHONBURI

23
4.5 หนา จอแสดงหนาหลกั ของเวบ็ ไซตสว นตอ จากดา นบน

เปน สวนของชอ งทางการตดิ ตอกบั บริษทั เชน การสอบถามราคากบั ทางบริษัทหรอื แจง
ชอมลู ใหท างบริษทั ตดิ ตอ กลับ

ภาพท่ี 4.5 แสดงหนา จอแรกของเวบ็ ไซตบ รษิ ทั สวนของชองทางการติดตอ ตอจากดานบน
SPU CHONBURI

24

4.6 หนา จอแสดงเมนูของเวบ็ ไซตบ ริษทั
หนาจอแสดงเมนขู องเว็บไซตบ รษิ ทั ซงึ่ ประกอบดว ยเมนูการทํางานตาง ๆ ดงั น้ี
Home คอื หนา แรกของเว็บไซต
About คอื อธบิ ายเกย่ี วกบั บริษทั
Corporate info คือ ขอมูลในองคก ร
Corporate Governance Policy คือ นโยบายของบรษิ ทั
Investors Relation คอื หนาเกี่ยวกับนกั ลงทุน
News and Insights คือ หนา ท่ีเกีย่ วขอ งกบั ขอมูลใหม ๆ
Sign in / Sign up คือ หนา ท่ใี ชส ําหรับเขา สรู ะบบหรอื สมคั รสมาชิก
SPU CHONBURI
4.6 แสดงหนาจอเมนหู ลักของเว็บไซต

25
4.7 เมนู About

เมนูทเ่ี ปนหนาจอแสดงขอมลู เก่ียวกับบรษิ ทั โดยละเอยี ด และประวตั ิความเปน มาของบรษิ ทั

ภาพที่ 4.7 แสดงหนา จอขอมูลเกยี่ วกบั บรษิ ทั
SPU CHONBURI

26

4.8 เมนู Corporate info
เมอื่ เขาเมนใู นสวนของ ขอ มูลเก่ยี วกบั บริษทั จะมเี มนยู อ ยตา ง ๆ
Message from the Chairman คือ เมนทู ่แี สดงขอความของเจาของบรษิ ัท
Vision & Mission คือ วิสัยทัศนและพนั ธกจิ
Company Profile คือ ขอมูลบรษิ ทั
Organization Structure คอื โครงสรา งองคกร
Board of Directors คอื คณะกรรมการ บริษทั
SPU CHONBURI
ภาพที่ 4.8 แสดงหนาจอเมื่อเลอื กเมนยู อย Message from the Chairman

27

4.9 หนา จอ Message form Chairman
หนา จอที่แสดงขอความจากเจา ของบริษัท

SPU CHONBURI
ภาพท่ี 4.9 แสดงหนา จอแสดงขอความจากเจา ของบริษัท

28

4.10 การเลือกเมนยู อ ย Corporate info
เลอื กเมนูในสว นของ Company Profile เปนเมนูทบี่ อกขอ มูลเกย่ี วกับบริษัท

SPU CHONBURI
ภาพท่ี 4.10 แสดงหนา จอการเลือกเมนยู อ ย Company Profile

29

4.11 หนา จอ Profile
เปน หนา จอแสดง Profile ของบริษทั ในแตละป

SPU CHONBURI
ภาพท่ี 4.11 แสดงหนาจอ Profile ของบรษิ ัท

30
4.12 หนาจอการเลอื กเมนูยอ ย Corporate info

เลือกเมนใู นสว นของ Organization Structure เปนเมนูทบี่ อกเก่ยี วกบั โครงสรา งองคก ร

ภาพท่ี 4.12 แสดงหนา การเลือกเมนยู อ ย Organization Structure
SPU CHONBURI

31
4.13 หนาจอ Organization Structure

หนา จอทแี่ สดงในสว นของ โครงสรางบรษิ ทั ทบ่ี อกลายละเอยี ดของหนา ที่การทาํ งานของ
แตละหนว ยงาน

ภาพท่ี 4.13 แสดงหนาจอแสดงโครงสรา งองคก ร
SPU CHONBURI

SPU CHONBURI 32
4.14 หนาจอเลอื กเมนูยอ ย Corporate info

เลือกเมนูในสว นของ Board of Directors เปน เมนเู กยี่ วกบั คณะกรรมการในบริษทั

ภาพที่ 4.14 แสดงหนา จอการเลอื กเมนูยอ ย Board of Directors
4.15 หนา จอ Board of Directors

หนาจอที่แสดงในสวนของ คณะกรรมการของบริษทั อนิ เตอรคอนทิเนนทลั จวิ เวลเลอร่ี
แมนแู ฟคเจอรง่ิ จํากัด (มหาชน)

ภาพท่ี 4.15 แสดงหนา จอแสดง คณะกรรมการบริษัท

33

4.16 หนาจอ Important Documents
เปนหนาจอที่แสดงเอกสารรบั รองตา ง ๆ ของทางบริษทั อนิ เตอรค อนทิเนนทลั

จิวเวลเลอรี่ แมนแู ฟคเจอรง่ิ จํากดั (มหาชน)

SPU CHONBURI
ภาพที่ 4.16 แสดงหนาจอแสดงเอกสารสาํ คัญของบรษิ ัท

4.17 หนาของเมนู News and Insights
เปนหนาจอทีแ่ สดงเกีย่ วกบั ขา วสารใหมของบริษัท

ภาพท่ี 4.17 แสดงหนา จอแสดงขา วสาร In The News

SPU CHONBURI 34
4.18 หนา จอของเมนู News and Insights ตอจากดานบน

ในสว นของ Press Releases คอื สวนขา วสารของบรษิ ทั ทม่ี กี ารประชาสมั พันธแ ลว

ภาพที่ 4.18 แสดงหนาจอแสดงขา วสารในสวนของ Press Releases
4.19 หนาจอของเมนู News and Insights ตอจากดานบน

ในสว นของ Gallery เปน สว นของรปู ภาพงานกจิ กรรมตา ง ๆ ของภายในบริษทั ที่ไดมกี าร
จัดกจิ กรรมตา ง ๆ ขึ้น เชน งานปใ หมไทยหรอื ประเพณีสงกรานต

ภาพที่ 4.19 แสดงหนาจอแสดงขา วสารในสว น Gallery

35
4.20 หนา จอแสดงภาพการ เขา สรู ะบบ และสมัครสมาชกิ

หนาจอทแ่ี สดงการเขา สูระบบโดยจะมี Username และ Password ใหกรอกขอมลู ของ
ผใู ชงาน

ภาพท่ี 4.20 แสดงหนา จอตอบโตก ารเขาสูร ะบบ และสมัครสมาชิก
SPU CHONBURI

36

4.21 หนา จอ Manage User
เปนหนาจอจัดการขอ มลู พนกั งานและกาํ หนดสิทธก์ิ ารเขาใชง านตา ง ๆ

SPU CHONBURIภาพที่ 4.21 แสดงหนา จอ Manage User

37
4.22 หนาจอ Manage User หลกั จากกดปมุ

หลกั จากกดปมุ จะแสดงหนา จอทเ่ี กย่ี วกบั User ทยี่ กเลกิ การใชงานออกจากระบบ

ภาพท่ี 4.22 หนาจอ Manage User การยกเลกิ ขอมูล User
SPU CHONBURI