The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
Published by informatic, 2021-03-28 04:20:17

ระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา วิทยาลัยเทคโนโลยีชลบุรี

EQUIPMENT BORROWING AND RETURNING MANAGEMENT INFORMATION SYSTEM OVER INTERNET: A CASE STUDY OF CHONBURI TECHNOLOGICAL COLLEGE
อภิชาติ แซ่จึง

SPU CHONBURIระบบการจัดการยืม-คืน อปุ กรณ์ บนเครือขา่ ยอนิ เทอร์เน็ต กรณีศกึ ษา วทิ ยาลัยเทคโนโลยีชลบุรี
EQUIPMENT BORROWING AND RETURNING MANAGEMENT INFORMATION SYSTEM

OVER INTERNET: A CASE STUDY OF CHONBURI TECHNOLOGICAL COLLEGE

อภชิ าติ แซ่จงึ
APICHART SAEJEUNG

ปฏบิ ตั งิ าน ณ วิทยาลัยเทคโนโลยีชลบุรี
เลขที่ 80/90 หมู่ 3 ถ.สุขมุ วิท อาเภอเมืองชลบุรี

จงั หวัดชลบุรี รหสั ไปรษณยี ์ 2000

I

ชื่อหัวข้อ ระบบการจัดการยืม-คืน อปุ กรณ์ บนเครือข่ายอนิ เทอรเ์ นต็ กรณีศึกษา วทิ ยาลัย
เทคโนโลยีชลบุรี
Equipment Borrowing and Returning Management Information
System over Internet: A Case Study of Chonburi Technological
College

ช่อื นกั ศกึ ษา นายอภิชาติ แซ่จึง รหสั ประจาตวั 59711415
สาชาวิชา เทคโนโลยีสารสนเทศและการสือ่ สาร
คณะ เทคโนโลยสี ารสนเทศ
......................................................................................................................................................

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

ผชู้ ว่ ยอธกิ ารบดี และรกั ษาการรองคณบดคี ณะเทคโนโลยสี ารสนเทศ

................................................................
(ผ้ชู ่วยศาสตราจารย์ นรินทร์ พนาวาส)
SPU CHONBURI
หัวหน้าสาขาวชิ าเทคโนโลยสี ารสนเทศและการส่ือสาร

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

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

................................................ ..................................................
(อาจารยน์ งเยาว์ สอนจะโปะ) (อาจารย์ลดั ดาวรรณ มอี นันต์)

II

วนั ท่ี 22 พฤษภาคม 2563

เรอื่ ง ขอสง่ รายงานการปฏิบัตงิ านสหกิจศกึ ษา
เรียน อาจารยท์ ่ปี รกึ ษาสหกิจศกึ ษา สาขาเทคโนโลยีสารสนเทศและการสื่อสาร

อาจารย์นงเยาว์ สอนจะโปะ และอาจารย์ลดั ดาวรรณ มีอนันต์

ตามที่กระผม นายอภิชาติ แซ่จึง นักศึกษาสาขาวิชา เทคโนโลยีสารสนเทศและการ
สือ่ สารคณะเทคโนโลยีสารสนเทศ มหาวิทยาลยั ศรปี ทุม วิทยาเขตชลบรุ ี ไดป้ ฏบิ ตั ิงานสหกจิ ศกึ ษา
ระหว่าง วันที่ 4 กุมภาพันธ์ 2563 ถึง 22 พฤษภาคม 2563 ในตาแหน่ง ผู้ช่วยโปรแกรมเมอร์ ณ
วทิ ยาลยั เทคโนโลยีชลบุรี และไดร้ บั มอบหมายให้ออกแบบและพัฒนาระบบยืม-คืน อปุ กรณ์

บดั น้ี การปฏิบัตงิ านสหกิจศึกษาไดส้ ้ินสดุ ลงแลว้ จึงขอส่งรายงานการปฏิบตั ิงานสหกิจ
ศึกษาดงั กลา่ วจานวน 1 เล่ม เพื่อขอรบั คาปรกึ ษาต่อไป

จึงเรียนมาเพ่อื โปรดพจิ ารณา

ขอแสดงความนบั ถือ

.................................................
(นายอภิชาติ แซ่จงึ )
SPU CHONBURI

IV

หวั ข้อสหกิจศึกษา ระบบการจดั การยมื -คนื อปุ กรณ์ บนเครอื ขา่ ยอนิ เทอรเ์ นต็ กรณศี กึ ษา
วทิ ยาลยั เทคโนโลยชี ลบุรี
ชื่อนกั ศกึ ษา Equipment Borrowing and Returning Management Information
อาจารยท์ ี่ปรกึ ษา System over Internet: A Case Study of Chonburi Technological
หลกั สตู ร College
สาขาวชิ า นายอภิชาติ แซ่จึง
พ.ศ.
อาจารยน์ งเยาว์ สอนจะโปะ และอาจารย์ลดั ดาวรรณ มีอนนั ต์

วิทยาศาสตรบัณฑติ

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

2563
SPU CHONBURI
บทคัดยอ่

การพฒั นาระบบการจดั การยมื -คนื อุปกรณ์ บนเครอื ข่ายอนิ เทอรเ์ น็ต กรณีศกึ ษา
วทิ ยาลยั เทคโนโลยชี ลบุรี มีวัตถุประสงค์เพื่อช่วยอำนวยความสะดวกให้กับผู้ดูแลระบบสามารถ
จัดการกับข้อมูลการยืม-คืน อุปกรณ์ได้สะดวกและรวดเร็วยิ่งขึ้นลดข้อผิดพลาดจากการบันทึกข้อมูล
สร้างฐานข้อมูลใหม่เพื่อรองรับข้อมูลในอนาคต ในการพัฒนาระบบไดน้ ำหลักการเชิงระบบ (System
Approach) มาปรับใช้รวมทั้งการศึกษาทฤษฎีที่เกี่ยวข้องโดยใช้ภาษา PHP, SQL, HTML5, CSS3,
Ajax, jQuery, JavaScript, Bootstrap, CodeIgniter โดยใช้โปรแกรม Atom Editor มาช่วยในการ
เขียนโคด้ ในการพฒั นาระบบ และใช้ Microsoft SQL Server เปน็ ระบบจัดการฐานขอ้ มลู

ผลที่ได้จากการพฒั นาระบบการจดั การยมื -คนื อุปกรณ์ บนเครอื ข่ายอนิ เทอร์เน็ต
กรณีศึกษา วทิ ยาลยั เทคโนโลยชี ลบุรี มีผลการประเมินความพึงพอใจของผู้ใช้งานด้านฟังก์ชันการ
ทำงานของระบบในภาพรวมอยู่ในระดบั ดี ( ̅ =3.68, =0.97) และผลประเมินด้านความสามารถใน
การใช้งานของระบบในภาพรวมอยใู่ นระดับดี ( ̅ =3.68, =0.95)

คำสำคญั : ระบบยืม-คนื อปุ กรณ์ อนิ เทอร์เน็ต ออนไลน์

III

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

การที่กระผมได้มาปฏิบัติงานตามโครงการสหกิจศึกษา ณ วิทยาลัยเทคโนโลยี ชลบุรี

ตั้งแต่ วันที่ 4 กุมภาพันธ์ 2563 ถึงวันที่ 22 พฤษภาคม 2563 ทาให้กระผมได้รับความรู้และ

ประสบการณ์ในการทางานจริง รวมทั้งทักษะในการทางานด้านต่าง ๆ ที่มีคุณค่าสาหรับรายงาน

สหกิจฉบบั น้สี าเร็จลงได้ดว้ ยดี เนื่องจากการสนบั สนุนและความรว่ มมอื จากหลายฝา่ ย ดงั นี้

1. คุณเศวต ชลวิริยะกลุ รองผู้อานวยการฝา่ ยเทคโนโลยีสารสนเทศ
SPU CHONBURI
2. คณุ อภชิ า เจิมนาค อาจารย์ประจาสานักงานฝ่ายเทคโนโลยีสารสนเทศ

(โปรแกรมเมอร์)

3. อาจารย์นงเยาว์ สอนจะโปะ อาจารยท์ ี่ปรึกษาสหกจิ ศกึ ษา

4. อาจารย์ลดั ดาวรรณ มีอนันต์ อาจารยท์ ป่ี รกึ ษาสหกจิ ศกึ ษา

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

คาแนะนาในการจดั ทารายงานฉบบั นี้

กระผมขอขอบพระคณุ ทุกท่านทไี่ ด้มีสว่ นร่วมในการให้ข้อมูล คาแนะนา และเปน็ ท่ี

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

นายอภชิ าติ แซจ่ ึง
ผจู้ ดั ทา

22 พฤษภาคม 2563

V

คำนำ

เอกสารประกอบโครงงานฉบับนี้จดั ทำข้ึนเพื่อประกอบการจัดทำโครงงานสหกิจศึกษา
การพัฒนาระบบการจดั การยืม-คืน อุปกรณ์ บนเครอื ขา่ ยอินเทอรเ์ น็ต กรณีศกึ ษา วิทยาลัยเทคโนโลยี
ชลบุรี ตามหลักสูตรวิชาสหกิจศึกษาเทคโนโลยีสารสนเทศและการสื่อสาร (ICT499) ซึ่งต้องใช้หลัก
การออกแบบและการพัฒนาเว็บไซต์เพื่อเป็นประโยชน์ต่อผู้ที่สนใจจะศึกษา และเป็นแนวทางในการ
พฒั นาเวบ็ ต่อไป

โดยเอกสารโครงงานสหกจิ ศึกษาการพัฒนาระบบการจัดการยืม-คนื อปุ กรณ์ บนเครอื ขา่ ย
อินเทอร์เน็ต กรณีศึกษา วิทยาลัยเทคโนโลยีชลบุรีประกอบด้วยขอบเขตการพัฒนาเว็บไซต์
วรรณกรรมและทฤษฎีที่เกี่ยวข้อง วิธีการดำเนินงาน การวิเคราะห์และออกแบบระบบ ประกอบด้วย
แผนภาพยูสเคส (Use Case Diagram) แผนภาพซีเควนซ์ (Sequence Diagram)ความสัมพันธ์ของ
ฐานข้อมูล (E-R Diagram) การออกแบบตารางข้อมูล (Data Tables Design) พร้อมผังงาน
กระบวนการ (Flowchart) ผลการดำเนินงาน สรปุ ผล และข้อเสนอแนะของโครงงานสหกิจศึกษาการ
พัฒนาระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา วิทยาลัยเทคโนโลยี
ชลบรุ ี ผูจ้ ัดทำหวงั เป็นอยา่ งยิ่งว่า เอกสารประกอบการจัดทำโครงงานสหกจิ ศึกษา

การพัฒนาระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา
วิทยาลัยเทคโนโลยีชลบุรี ตามหลักสูตรวิชา สหกิจศึกษาเทคโนโลยีสารสนเทศและการสื่อสาร
(ICT499) คงเป็นประโยชน์ตอ่ ผู้ท่ีสนใจศึกษาไม่มากก็น้อย หากมขี ้อผิดพลาดข้อบกพร่องหรือความไม่
สมบูรณ์ของระบบงานนี้ อันเนื่องมาจากผูจ้ ดั ทำยังขาดความรู้ ความชำนาญและขาดประสบการณ์ใน
การพัฒนาระบบ ผ้จู ดั ทำจึงขออภัยมา ณ ทนี่ แี้ ละขอนอ้ มรับความผิดพลาดทุกประการ

อภิชาติ แซจ่ ึง
ผจู้ ัดทำ

22 พฤษภาคม 2563
SPU CHONBURI

SPU CHONBURI VI

สารบัญ

หน้า
ใบรบั รองรายงานการปฏิบตั งิ านสหกจิ ศกึ ษา .......................................................................... I
หนงั สอื รับรองการส่งรายงานการปฏิบัติงานสหกจิ ศึกษา ........................................................ II
กติ ตกิ รรมประกาศ ................................................................................................................. III
บทคัดยอ่ ............................................................................................................................... IV
คำนำ ..................................................................................................................................... V
สารบัญ .................................................................................................................................. VI
สารบัญตาราง ........................................................................................................................ IX
สารบัญภาพ ........................................................................................................................... X
บทท่ี 1 บทนำ......................................................................................................................... 1

ประวตั คิ วามเปน็ มาของสถานประกอบการ ............................................................... 1
ทต่ี ั้งสถานประกอบการ............................................................................................... 2
การจดั การองค์กร ...................................................................................................... 2
ลกั ษณะทางธรุ กจิ ...................................................................................................... 3
ตำแหน่งและลักษณะงานท่ีนักศึกษาได้รบั มอบหมาย ................................................. 4
บคุ คลผู้นิเทศงาน ...................................................................................................... 5
บทท่ี 2 แนวคิดและทฤษฎีท่เี กยี่ วข้อง .................................................................................... 6
งานวจิ ัยทเี่ ก่ียวขอ้ ง ................................................................................................... 6
ทฤษฎีท่ีเกยี่ วข้อง ...................................................................................................... 7
การวเิ คราะห์และการออกแบบระบบ ........................................................................ 9
เครอื่ งมอื และภาษาทีใ่ ช้ในการพัฒนาระบบ .............................................................. 11
ระบบจัดการฐานข้อมูล ............................................................................................ 14
บทที่ 3 รายละเอียดโครงงาน ................................................................................................ 15
ความเปน็ มาและความสำคัญของปัญหา .................................................................. 15
วตั ถุประสงคข์ องโครงงาน ........................................................................................ 16
ขอบเขตการดำเนินงานของโครงงาน ....................................................................... 16
ข้นั ตอนการดำเนินงาน ............................................................................................. 17
ผลท่คี าดว่าจะไดร้ บั จาการดำเนินโครงงาน ................................................................ 18
แผนการดำเนนิ งาน (Gantt Chart) ......................................................................... 18

VII

สารบัญตอ่ (ต่อ)

หนา้
แผนภาพแสดงการทำงานของผู้ใช้ (Use Case Diagram) ....................................... 20
ความสมั พนั ธข์ องฐานข้อมลู (E-R Diagram) .......................................................... 22
การออกแบบตารางขอ้ มลู (Data Tables Design) ................................................. 23
การสรา้ งเครือ่ งมือประเมนิ ความพึงพอใจโปรแกรม .................................................. 28
การทดสอบและการประเมินผลระบบ ....................................................................... 29
สถติ ิทใ่ี ช้ในการวิเคราะหข์ ้อมูล ................................................................................. 29
บทที่ 4 ผลการดำเนินการ ..................................................................................................... 30
ผลการพฒั นาระบบ .................................................................................................. 30
ผลการวเิ คราะหแ์ บบประเมิน ................................................................................... 41
การนำโครงงานไปประยกุ ต์ใช้................................................................................... 42
บทที่ 5 สรุปผลการศึกษา ..................................................................................................... 43
สรุปผลการศึกษาโครงงาน ....................................................................................... 43
ปญั หาและข้อเสนอแนะ ........................................................................................... 43
สรุปผลการปฏบิ ัติงาน .............................................................................................. 44
บรรณานกุ รม ........................................................................................................................ 45
ภาคผนวก ก หนังสือยนิ ยอมเผยแพรผ่ ลงานต่อสาธารณะ ...................................................... 49
ภาคผนวก ข ผงั งานกระบวนการ (Flowchart) ..................................................................... 51
ภาคผนวก ค ภาพการปฏบิ ตั ิติงาน ......................................................................................... 59
ภาคผนวก ง แบบประเมินความพึงพอใจ .............................................................................. 61
ประวตั ผิ ูจ้ ดั ทำโครงงาน.......................................................................................................... 64
SPU CHONBURI

VIII

สารบัญตาราง

ตารางที่ หน้า

1.1 ตารางประเภทวิชาชา่ งอตุ สาหกรรม …………………………………………………………………………. 3

1.2 ตารางประเภทวชิ าบริหารธรุ กจิ ……………………………………………………………………………….. 4

1.3 ตารางประเภทวชิ าอุตสาหกรรมท่องเท่ียว .......................................................................... 4

1.4 ตารางประเภทวิชาเทคโนโลยีสารสนเทศและการส่ือสาร ………………………………….............. 4
SPU CHONBURI
3.1 แสดงการออกแบบตารางรายละเอียดอุปกรณ์เพ่มิ เติมทีย่ ืม................................................ 23

3.2 แสดงการออกแบบตารางพนักงาน ................................................................................... 24

3.3 แสดงการออกแบบตารางรายละเอียดใบเสร็จของอปุ กรณท์ ่ยี ืม.......................................... 24

3.4 แสดงการออกแบบตารางรายละเอียดอุปกรณท์ ยี่ ืม............................................................. 25

3.5 แสดงการออกแบบตารางประเภทของอุปกรณ์ .................................................................. 25

3.6 แสดงการออกแบบตารางอุปกรณ์ ..................................................................................... 26

3.7 แสดงการออกแบบตารางบุคลากร .................................................................................... 26

3.8 แสดงการออกแบบตารางแจ้งงาน ..................................................................................... 27

3.9 แสดงการออกแบบตารางจองหอ้ งประชุม ......................................................................... 27

3.10 เกณฑ์การให้คะแนนแบบประเมินโครงงาน ..................................................................... 28

4.1 แสดงตารางสรปุ ผลการประเมินความพงึ พอใจดา้ นการทำงาน ......................................... 41

4.2 แสดงตารางสรุปผลการประเมนิ ความพงึ พอใจดา้ นความงา่ ยตอ่ การใช้งานของระบบ ....... 41

SPU CHONBURI IX

สารบัญภาพ

ภาพที่ หน้า
1.1 แสดงตราสัญลักษณข์ องวทิ ยาลัยเทคโนโลยีชลบุรี .............................................................. 1
1.2 แสดงแผนที่ของวทิ ยาลัยเทคโนโลยีชลบรุ ี ........................................................................... 3
1.3 บุคลากรผู้นิเทศงาน ………………………………………………………………………………………………... 5
2.1 จอภาพ ............................................................................................................................... 7
2.2 เคส ..................................................................................................................................... 8
2.3 แปน้ พิมพ์............................................................................................................................. 8
2.4 เมาส์.................................................................................................................................... 9
2.5 แสดงตัวอย่าง Use Case Diagram ................................................................................. 10
2.6 แสดงตัวอย่าง Entity Relationship Diagram ............................................................... 10
3.1 แสดงแผนภาพการดำเนินการ (Gantt Chart) ................................................................. 18
3.2 แสดงแผนภาพ Use Case Diagram ของระบบ .............................................................. 20
3.3 แสดงแผนภาพความสัมพันธ์ของฐานข้อมูล (E-R Diagram) ............................................ 22
4.1 ตวั อยา่ งการแสดงผลข้อมูลผ่านหน้าจอคอมพิวเตอร์ โทรศพั ท์มอื ถือ และแท็บเล็ต ........... 31
4.2 แสดงหน้าจอเขา้ ส่รู ะบบ ................................................................................................... 31
4.3 แสดงเมนูออกจากระบบ ……………………………………………………………………………………….. 32
4.4 แสดงหน้ายมื อุปกรณ์ ....................................................................................................... 32
4.5แสดงตัวเลือกประเภทของอปุ กรณ์ .................................................................................... 33
4.6 แสดงรายชอื่ และรูปภาพของอปุ กรณ์ ............................................................................... 33
4.7 แสดงรายการทีย่ ืม ............................................................................................................ 34
4.8 แสดงหนา้ เพิ่มอุปกรณ์ ...................................................................................................... 34
4.9 แสดงหนา้ แกไ้ ข - ลบ อุปกรณ์ .......................................................................................... 35
4.10 แสดงหน้าแกไ้ ข อปุ กรณ์ ................................................................................................ 35
4.11 แสดงเม่อื มกี ารลบ อุปกรณ์ ............................................................................................ 36
4.12 แสดงหน้าบลิ หรือใบเสร็จ ............................................................................................... 36
4.13 แสดงเมนคู ้นหาบิลหรือใบเสร็จ ....................................................................................... 37
4.14 แสดงหน้ารายการข้อมูลบิลหรือใบเสร็จ ......................................................................... 37
4.15 แสดงสถานะเมื่อมกี ารปดิ บลิ .......................................................................................... 37

X

สารบญั ภาพ (ตอ่ )

ภาพท่ี หนา้
4.16 แสดงรายการอปุ กรณ์ทย่ี ืม ............................................................................................. 38
4.17 แสดงรายการอุปกรณ์เพิม่ เตมิ ทีย่ ืม ................................................................................. 38
4.18 แสดงหน้าเขียนใบแจ้งงาน ............................................................................................. 39
4.19 แสดงหน้างานที่ตอ้ งทำ .................................................................................................. 39
4.20 แสดงหน้าเขียนใบจองหอ้ งประชุม ................................................................................. 40
4.21 แสดงหน้าการจองหอ้ งประชมุ ........................................................................................ 40
ค-1 เรียนรใู้ นเรือ่ งการใช้งาน framework CodeIgniter ....................................................... 60
ค-2 เรยี นร้ใู นเร่ืองการใชง้ าน Microsoft SQL server ........................................................... 60
ค-3 เรียนรู้ในเรือ่ งการใชง้ าน framework CodeIgniter ....................................................... 60
SPU CHONBURI

SPU CHONBURI บทที่ 1
บทนำ

ประวตั ิและความเป็นมาขององคก์ ร
ประวัติและความเป็นมาของสถานประกอบการ วิทยาลัยเทคโนโลยีชลบุรี ตั้งอยู่เลขที่

80/90 หมู่ 3 ตำบลเสมด็ อำเภอเมอื ง จงั หวดั ชลบรุ ี ได้ถูกก่อต้ังขึ้นเมอ่ื ปี พ.ศ. 2526 บนพ้ืนท่ี 22 ไร่
2 งาน 73 ตารางวา โดยมีแนวคิดท่จี ะผลิตกำลังคน เพือ่ ตอบสนองความต้องการของ ภาคธุรกิจ และ
อุตสาหกรรม ตามโครงการพัฒนาพนื้ ทีช่ ายฝัง่ ทะเลภาคตะวันออกและได้เปดิ รับนกั เรียนนักศึกษาเม่ือ
พ.ศ. 2557 วิทยาลัยฯ ได้มีการพัฒนาทั้งด้าน อาคารสถานที่ โดยคำนึงถึงการจัดสภาพแวดล้อมที่มี
บรรยากาศเอื้อต่อการจัดการเรียนการสอนโดยในปัจจุบันมีอาคารเรียนทั้งสิ้น 3 อาคาร พื้นที่
ปฏิบัติการช่างอุตสาหกรรม (โรงฝึกงาน) 2 แห่ง อาคารสนับสนุน ทั้งหอประชุม โรงอาหาร อาคาร
ประกอบต่าง ๆ อีก 6 อาคาร วิทยาลัยฯ ได้พัฒนางาน วิชาการโดยเปิดหลักสูตรทั้งในระดับ
ประกาศนยี บัตรวชิ าชีพ (ปวช.) และประกาศนียบัตรวิชาชีพชั้นสูง (ปวส.) 4 ประเภท คือ 1. ประเภท
ช่างอุตสาหกรรม 2. ประเภทบริหารธุรกิจ 3. ประเภทอุตสาหกรรมท่องเที่ยว 4. ประเภทวิชา
เทคโนโลยสี ารสนเทศและการสื่อสาร จากการทวี่ ทิ ยาลัยเทคโนโลยีชลบุรีได้มีการพฒั นาอย่างต่อเน่ือง
ในทุก ๆ ด้านจึงทำให้บคุ ลากร และนักเรียนนักศึกษา ได้รับรางวัลต่าง ๆ เป็นจำนวนมาก พร้อมทั้งมี
การทำโครงการความร่วมมือกับหน่วยงานทั้งภายในและนอกประเทศในการจัดการอาชีวศึกษาอย่าง
มีคณุ ภาพ และไดม้ าตรฐานเปน็ ที่ยอมรบั ของสถานประกอบการ ปัจจุบันมี ดร.อุไรวรรณ ตันประภัสร์
เปน็ ผู้รับ ใบอนญุ าต นายไชยยศ ตันประภัสร์ เป็นกรรมการผู้จดั การ นางสาววรรณา ตันประภสั ร์ เป็น
ผู้อำนวยการ

ภาพที่ 1.1 แสดงตราสัญลักษณข์ องวทิ ยาลัยเทคโนโลยีชลบุรี

SPU CHONBURI 2

ท่ีตั้งสถานประกอบการ
วิทยาลัยเทคโนโลยีชลบุรี ตั้งอยู่เลขที่ที่ 80/90 หมู่3 ถ.สุขุมวิท อ.เมือง จ.ชลบุรี

รหสั ไปรษณีย์ 20000 โทร. 038-784-681-4 การเดนิ ทางมายังวิทยาลัยเทคโนโลยีชลบรุ ี ห่างจากนิคม
อุตสาหกรรมอมตะนครระยะทาง 20 กิโลเมตร เดินทางโดยใช้เส้นทางถนนสุขุมวิทวิ่งเข้ามาจากทาง
อมมตะนคร ผา่ นบ๊กิ ซีเอ็กซ์ตรา้ ชลบรุ ี ตรงส่ไู ฟแดงอา่ งศลิ า และกลบั รถ ขบั ต่อไปประมาณ 800 เมตร
จะเห็นโรงเรยี นประภัสสรวิทยา อยู่ข้างปั๊มน้ำมัน ปตท. ซึ่งเข้ามาจากทางโรงเรียนประภัสสร วิทยาท่ี
อย่ดู า้ นหน้า ขบั ตอ่ ลงไปจะถึง วิทยาลัยเทคโนโลยชี ลบุรี

ภาพท่ี 1.2 แสดงแผนที่ของวทิ ยาลยั เทคโนโลยชี ลบรุ ี

การจดั การองค์กร
คณะกรรมการบริหารวทิ ยาลัยเทคโนโลยชี ลบุรี มีท้งั หมด 9 ท่าน ได้แก่
1. ดร.อไุ รวรรณ ตันประภสั ร์ ประธานกรรมการบริหาร
2. นายไชยยศ ตันประภสั ร์ กรรมการผจู้ ดั การ
3. ดร.วรรณา ตนั ประภัสร์ ผอู้ ำนวยการวทิ ยาลัยเทคโนโลยชี ลบรุ ี
4. ดร.สชุ ลี า ตันประภสั ร์ ที่ปรกึ ษาโรงเรียนประภสั สรวิทยา
5. ดร.กติ ติศักด์ิศรชี วนะ ผอู้ ำนวยการสำนกั อำนวยการ
6. รศ.ดร.อารมณเ์ พชรชื่น ทีป่ รกึ ษางานวชิ าการ
7. ดร.ชลกร ตนั ประภัสร์ ผ้อู ำนวยการโรงเรียนประภสั สรวทิ ยา
8. นางสาวสุจิตรา ตนั ประภัสร์ ผู้ชว่ ยกรรมการและเลขานุการ
9. นายชยนนั ท์ตนั ประภัสร์ คณะกรรมการ

3

ลกั ษณะทางธุรกจิ
วิทยาลัยเทคโนโลยีชลบุรี จัดเป็นวิทยาลัยสถาบันการศึกษาขนาดใหญ่ เปิดสอนใน

ระดับชั้น ปวช. และ ปวส. พร้อมสิ่งอำนวยความสะดวกสำหรับบุคลากรและนักศึกษา ห้องประชุม
อาคารต่าง ๆ สถานที่จอดรถได้ถงึ 300 คัน มีอาคารทงั้ หมด 3 สว่ น

1. อาคารเรียน
2. อาคารประกอบ
3. อาคารพัฒนาฝีมือ
การจัดการเรยี นการสอน 4 ประเภท
1. ประเภทช่างอุตสาหกรรม
2. ประเภทบริหารธุรกิจ
3. ประเภทอุตสาหกรรมทอ่ งเท่ยี ว
4. ประเภทวิชาเทคโนโลยสี ารสนเทศและการส่อื สาร
SPU CHONBURI
ประเภทวชิ าช่างอุตสาหกรรม

ระดับ ปวช. ระดับ ปวส.

สาขาวิชาชา่ งยนต์ สาขาวชิ าเทคนคิ เครอ่ื งกล

สาขาวิชาชา่ งไฟฟา้ กำลงั สาขาวิชาไฟฟ้า

สาขาช่างอิเล็กทรอนิกส์ สาขาวิชาอเิ ลก็ ทรอนิกส์

สาขาวิชาเทคนคิ อตุ สาหกรรม

สาขาวิชาเทคโนโลยีคอมพวิ เตอร์

สาขาวิชาธรุ กิจบรกิ ารยานยนต์

สาขาวิชาธุรกจิ สนามกอล์ฟ

สาขาวิชาแมค็ คาทรอนิกส์และหนุ่ ยนต์

ตารางที่ 1.1 ตารางประเภทวิชาช่างอุตสาหกรรม

4

ประเภทวชิ าบริหารธุรกจิ

ระดบั ปวช. ระดับ ปวส.

สาขาวชิ าการบญั ชี สาขาวชิ าการบัญชี

สาขาวิชาคอมพิวเตอร์ธุรกจิ สาขาวชิ าคอมพิวเตอรธ์ ุรกจิ

สาขาวชิ าการตลาด สาขาวชิ าการตลาด

สาขาการธุรกจิ ค้าปลกี สาขาการจัดการทรพั ยากรมนุษย์

สาขาวชิ าภาษาตา่ งประเทศ สาขาการจัดการธุรกิจคา้ ปลีก
SPU CHONBURI
สาขาธุรกจิ สถานพยาบาล สาขาวชิ าการจัดการท่วั ไป

สาขาวิชาการจัดการโลจิสติกส์

สาขาวิชาภาษาต่างประเทศธรุ กิจ

สาขาวชิ าธรุ กจิ การค้าระหวา่ งประเทศ

สาขาธุรกจิ สถานพยาบาล

ตารางท่ี 1.2 ตารางประเภทวิชาบริหารธุรกจิ

ประเภทวชิ าอตุ สาหกรรมทอ่ งเทยี่ ว

ระดับ ปวช. ระดบั ปวส.

สาขาวชิ าการท่องเทีย่ ว สาขาวชิ าการโรงแรม

ตารางท่ี 1.3 ตารางประเภทวิชาอุตสาหกรรมท่องเทย่ี ว

ประเภทวชิ าเทคโนโลยีสารสนเทศและการส่ือสาร

ระดับ ปวช. ระดบั ปวส.

- สาขาวชิ าเทคโนโลยีสารสนเทศ

ตารางที่ 1.4 ตารางประเภทวิชาเทคโนโลยีสารสนเทศและการสอ่ื สาร

ตำแหนง่ และลกั ษณะงานท่ีได้รบั มอบหมาย
ตำแหนง่ งานพนักงานผู้ชว่ ยโปรแกรมเมอร์ รบั ผดิ ชอบออกแบบ และพฒั นาเวบ็ ไซต์ภายใน

องค์กร ออกแบบและพัฒนาเว็บไซต์ PBS & CTC | STORE ทั้งระบบยืม-คืน อุปกรณ์ แจ้งงาน และ
จองหอ้ งประชมุ

5

บุคลากรผู้นเิ ทศงาน (พี่เลี้ยง) นายอภชิ า เจิมนาค
พนกั งานทป่ี รกึ ษา โปรแกรมเมอร์
ตำแหนง่

SPU CHONBURI ภาพที่ 1.3 บคุ ลากรผนู้ เิ ทศงาน (พี่เลยี้ ง)

SPU CHONBURI บทท่ี 2
แนวคดิ และทฤษฎที ีเ่ ก่ยี วข้อง

ในการพัฒนาระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา
วทิ ยาลยั เทคโนโลยชี ลบรุ ีมีแนวคดิ และทฤษฎีท่เี กย่ี วข้องซงึ่ ผู้จัดทำไดน้ ำมาใช้เป็นแนวคิดในการศึกษา
ดังน้ี

งานวจิ ยั ทเี่ กี่ยวขอ้ ง
สุพงศ์ ชินวงศ์วิโรจน์ และรัตนา พุธพา (2559) ได้ศึกษาและพัฒนาระบบการจัดการ

เบิกจ่ายอุปกรณ์สิ้นเปลืองและแจ้งซ่อมอุปกรณ์คอมพิวเตอร์บนเครือข่ายอินทราเน็ต กรณีศึกษาฝ่าย
ซ่อมใหญ่อากาศยาน อู่ตะเภา บริษัท การบินไทย จำกัด(มหาชน) มีวัตถุประสงค์เพื่อ ช่วยอำนวย
ความสะดวกให้ผู้ใช้งานสามารถจัดการกับข้อมูลการเบิกจ่ายอุปกรณ์สิ้นเปลืองและแจ้งซ่อมอุปกรณ์
คอมพิวเตอร์ได้สะดวกและรวดเร็วยิ่งขึ้น ลดข้อผิดพลาดจากการบันทึกข้อมูล ลดปัญหาการทำงานที่
ชา้ ของไฟล์ Excel เมอ่ื มีข้อมลู จำนวนมากและสร้างฐานข้อมูลใหม่เพื่อรองรับข้อมูลในอนาคต ในการ
พัฒนาระบบได้นำหลักการเชิงระบบ (System Approach) มาปรับใช้รวมทั้งการศึกษาทฤษฎีท่ี
เก่ียวข้อง โดยใชภ้ าษา PHP, SQL,HTML5, CSS3, jQuery, JavaScript, Bootstrap และใชโ้ ปรแกรม
Adobe Dreamweaver CC 2015 ในการพัฒนาระบบ และใช้ MySQL เป็นระบบจัดการฐานข้อมูล
ซึ่งผู้ใช้สามารถใช้งานบนระบบเครือข่ายอินทราเน็ต ผลที่ได้จากการพัฒนาระบบการจัดการเบิกจ่าย
อุปกรณ์สิ้นเปลืองและแจ้งซ่อมอุปกรณ์คอมพิวเตอร์บนเครือข่ายอินทราเน็ต มีประสิทธิภาพ และ
เหมาะสมกบั กระบวนการ

ละอองดาว เหลืองช่างทอง (2558) ได้ศึกษาและพัฒนาระบบการแจ้งซ่อมคอมพิวเตอร์
และอุปกรณ์ไอที บริษัท โฮเซอิ เบรค (ไทยแลนด์) จำกัด โดยนำวงจรการพัฒนาระบบ (SDLC) มาใช้
รวมทงั้ การศึกษาทฤษฎีทเี่ ก่ยี วข้อง โดยผู้ใชส้ ามารถใชง้ านบนเครอื่ งคอมพวิ เตอร์ส่วนบุคคลระบบการ
การแจ้งซ่อมคอมพิวเตอร์ โดยใช้ภาษา PHP, HTML, SQL และ JavaScript สำหรับพัฒนาโปรแกรม
และใช้ MySQL เป็นระบบการจัดการฐานข้อมูล ในแต่ล่ะส่วนของงานนั้นจะช่วยให้ผู้ใช้งานสามารถ
ทำงานได้อย่างมีระเบียบ งานที่ได้มีความถูกต้องและมีประสิทธิภาพมากขึ้น ผลของการพัฒนาระบบ
พบวา่ ระบบการแจง้ ซอ่ มคอมพิวเตอร์และอุปกรณ์ไอที บริษทั โฮเซอิ เบรก (ไทยแลนด)์ จำกด ช่วยให้
พนักงานสามารถจัดการข้อมูลพื้นฐานต่าง ๆ การแจ้งซ่อม การจัดการงานซ่อม การบันทึกการซ่อม
การส่งเคลม และการออกรายงานตา่ ง ๆ ระบบการแจง้ ซอ่ มคอมพิวเตอรแ์ ละอุปกรณไ์ อที บริษัท โฮ

SPU CHONBURI 7

เซอิ เบรค (ไทยแลนด์) จำกด มีการดำเนินการอย่างมีประสิทธิภาพ และเหมาะสมกับกระบวนการ
ทำงาน โดยระบบดังกล่าวได้นำไปใช้และแก้ปัญหาทางธุระกิจได้อยางมีประสิทธิภาพ และผลที่ได้รับ
จากการประเมินความพึงพอใจของผู้ใช้ระบบในด้านการทดสอบระบบ ด้านฟังก์ช่ันการทำงานต่าง ๆ
ในภาพรวมอยูใ่ นระดับส่วนการทดสอบระบบด้านความสามารถในการใช้งาน ในภาพรวมอยูในระดบั
ดี

ทฤษฎที เ่ี ก่ยี วขอ้ ง
คอมพิวเตอร์
พจนานุกรมฉบับราชบัณฑิตยสถาน พ.ศ.2554 ได้ให้คำจำกัดความหรือนิยามของ

คอมพิวเตอร์ คือ “เครื่องอิเล็กทรอนิกส์แบบอัตโนมัติ ทำหน้าที่เสมือนสมองกล ใช้สำหรับแก้ปัญหา
ต่าง ๆ ท้งั ทีง่ า่ ยและซับซ้อน โดยวธิ ีทางคณติ ศาสตร์”

อุปกรณ์คอมพวิ เตอร์
1. จอภาพ หรือ Monitor เป็นอุปกรณ์การแสดงผลที่สำคัญที่สุด จะเป็นส่วนที่ติดต่อกับ
ผูใ้ ชโ้ ดยตรง เพราะผใู้ ช้สามารถมองเห็นข้อมูลที่แสดงผลได้โดยผ่านจอภาพ จอภาพของคอมพิวเตอร์มี
อยู่ดว้ ยกนั 2 แบบ คอื จอแบบซีอารท์ ี และจอแบบแอลซดี ี ซงึ่ จอภาพ 2 แบบนม้ี ี 7 ลักษณะทีแ่ ตกต่าง
กันในเรื่องของรูปแบบ นั้นก็คือจอแบบซีอาร์ที (CRT) ส่วนใหญ่เป็นจอภาพที่นิยมใช้สำหรับ
คอมพิวเตอร์ตั้งโต๊ะ มีขนาดใหญ่คล้ายโทรทัศน์ ส่วนจอภาพแบบแอลซีดี(LCD)นั้น มีทั้งแบบที่ใช้กับ
คอมพิวเตอร์ตั้งโต๊ะและในแบบของโน้ตบุ๊กเนื่องจากเป็นจอภาพที่มีขนาดรูปร่างที่บางท ำให้สะดวก
สำหรับการพกพาไปไหนมาไหน แตจ่ อภาพแบบแอลซีดีน้กี ็มรี าคาท่แี พงกว่าจอภาพแบบซีอาร์ที(ตำรา
วิชาการคอมพิวเตอร์, 2552, หนา้ 14)

ภาพที่ 2.1 จอภาพ
ที่มา : http://computer.kapook.com/equpiment.php

SPU CHONBURI 8

2. เคส (Case) คือ กล่องหรือโครงสร้างสำหรับเก็บประกอบอุปกรณ์ต่าง ๆ คอมพิวเตอร์
ไว้ภายในนั้น ซึ่งขนาดของเคสจะแตกต่างกันออกไป แล้วแต่การใช้งานหรือความเหมาะสมในการใช้
งานของแต่ละคนรวมทั้งสถานที่เก็บอุปกรณ์เหล่านั้นด้วยวามีขนาดพื้นที่มากน้อยเพียงใด และใน
ตัวเคสจะมใี นส่วนของพาวเวอร์ซพั พลายติดมาด้วย (ตำราวชิ าการคอมพิวเตอร์, 2552, หน้า 15)

ภาพท่ี 2.2 เคส
ทีม่ า : http://computer.kapook.com/equpiment.php
3. คีย์บอร์ดหรือแป้นพิมพ์ (Keyboard) เป็นอุปกรณ์พื้นฐานที่คอมพิวเตอร์ทุกเครื่อง
จะต้องมี เนื่องจากตัวคีย์บอร์ดใช้สำหรับการพิมพ์หรือป้อนข้อมูลต่างลงไปในเครื่องคอมพิวเตอร์ ใน
ตัวคีย์บอร์ดจะมีทั้งที่เป็นตัวอักษรที่เป็นภาษาหลักของแต่ละประเทศรวมทั้งภาษาหลักอย่าง
ภาษาอังกฤษอยูด้วย และมีข้อมูลทั้งตัวเลขและฟังก์ชันต่าง ๆ ที่จำเป็นสำหรับการใช้งานและอื่น ๆ
อีก เพื่อใช้สำหรับลงข้อมูลในตัวเครื่องของเรา โดยส่วนใหญ่แล้วคีย์บอร์ดมีลักษณะที่เป็น
สี่เหลี่ยมผนื ผ้า (ตำราวชิ าการคอมพวิ เตอร์, 2552, หน้า 19)

ภาพที่ 2.3แปน้ พมิ พ์
ท่ีมา : http://computer.kapook.com/equpiment.php

9

4. เมาส์ (Mouse) จะเป็นอุปกรณ์จะเป็นอุปกรณ์ตัวชี้ตำแหน่ง ในขณะที่สายตาจับอยู่ท่ี
จอภาพสามารถใช้มือลากเมาส์ไปมาได้ ช่วยให้การใช้งานง่ายขึ้นด้วยการใช้เมาส์เลื่อนตัวชี้ไปยัง
ตำแหน่งต่าง ๆ บนจอภาพ (ตำราวชิ าการคอมพวิ เตอร์, 2552, หนา้ 20)

ภาพท่ี 2.4 เมาส์
ทม่ี า : http://computer.kapook.com/equpiment.php

การวเิ คราะห์และการออกแบบระบบ
ในการออกแบบและพัฒนาระบบยืม-คืน อปุ กรณ์มกี ารวเิ คราะห์และการออกแบบระบบท่ี

เก่ยี วข้องซึง่ ครอบคลมุ ในเรื่องต่าง ๆ ดงั นี้
1.แผนภาพแสดงการทำงานของผูใ้ ช้(Use case Diagram)
Use case Diagram เป็นแผนภาพที่ใช้แสดงให้ทราบว่าระบบทำงานหรือมีหน้าที่ใดบ้าง

โดยมสี ญั ลกั ษณร์ ูปวงรีแทน Use Case และสญั ลักษณ์รปู คน (Stick Man Icon) แทน Actor สำหรับ
ชื่อ Use Case นั้น ให้ใช้คำกริยาหรือกริยาวลี เช่น ลงทะเบียนเรียน ตรวจสอบรายวิชา บันทึกการ
ชำระเงนิ เปน็ ตน้ สว่ นการมปี ฏสิ มั พนั ธ์ระหวาง Use Case และ Actor จะใช้เส้นตรงลากเชื่อมต่อกัน
หรือจะใช้เส้นตรงมีหัวลูกศรก็ได้ ในที่น้ีเลือกใช้เส้นตรงไม่มีหัวลูกศร ส่วนเส้นแบ่งขอบเขตระหว่าง
Actor กับ Use Case จะใช้เส้นกรอบสี่เหลี่ยม เรียกว่า “System Boundary” และสิ่งสำคัญ ส่วน
สุดทา้ ยคอื “ช่ือของระบบ (System Name)” ใหแ้ สดงไว้ดา้ นบนสุดของแผนภาพ
SPU CHONBURI

SPU CHONBURI 10

ภาพท่ี 2.5 แสดงตัวอย่าง Use Case Diagram
ท่ีมา :http://med.mahidol.ac.th/ramapharmacy/sites/default/files/public/pdf/UseCase-

Diagram.pdf
2. แผนภาพแสดงความสมั พนั ธร์ ะหว่างขอ้ มลู (Entity Relationship Diagram)
Entity Relationship Diagram เปน็ แผนภาพที่ใช้เปน็ เคร่ืองมือสำหรบั จำลองขอ้ มูลซ่ึงจะ
ประกอบไปด้วยแทนกลุ่มของข้อมูลที่เป็นเรื่องเดียวกัน เก่ียวข้องกัน (Entity) และความสัมพันธ์
ระหว่างข้อมูล (Relationship) ท่ีเกดิ ขึน้ ทั้งหมดในระบบ

ภาพท่ี 2.6 แสดงตัวอยา่ ง Entity Relationship Diagram
ท่มี า : https://www.edrawsoft.com/entity-relationship-diagrams.php

SPU CHONBURI 11

เครอ่ื งมอื และภาษาท่ใี ช้ในการพัฒนาระบบ
ในการออกแบบและพัฒนาระบบยืม-คืน อุปกรณ์ ผู้จัดทำได้นำภาษาต่าง ๆ มาใช้ในการ

พัฒนาระบบเพื่อให้มีประสทิ ธภิ าพเหมาะสมต่อการทำงาน ได้แก่
1. เคร่ืองมอื ท่ใี ช้ในการพัฒนาระบบ มดี ังนี้
- เครอ่ื งคอมพิวเตอร์ LENOVO
- CPU Intel(R) Celeron(R) CPU N3060 @ 1.60GHz 1.60 GHz
- Memory 4 GB

ภาษาทีใ่ ช้ในการพัฒนาระบบ
1. PHP (Professional Home Page: PHP)
PHP เป็นการเขียนคำสั่งหรือโค้ดโปรแกรมที่เก็บและทำงานบนฝั่งเซิร์ฟเวอร์ (Server-

Side Script) ซงึ่ รปู แบบในการเขียนคำส่งั การทำงานนน้ั จะมี ลกั ษณะคลา้ ยกับภาษา Perl หรือภาษา
C และสามารถที่จะใช้ร่วมกับภาษา HTML ได้อยางมีประสิทธิภาพ ความสามารถของ PHP น้ัน
สามารถที่จะทำงานเกี่ยวกับ Dynamic Web ได้ทุกรูปแบบไม่วาจะเป็นด้านการดูแลจัดการระบบ
ฐานข้อมูลระบบรักษาความปลอดภัยของ Web Page การรับส่ง Cookies เป็นต้น เริ่มต้นของ
โปรแกรม PHP ดว้ ยแท็กPHP เป็น สครปิ ตแ์ บบ Embedded สามารถแทรกร่วมกับภาษา HTML ได้
อย่างอิสระ และหากเราพัฒนาโค้ด ไว้ในรูปแบบของ Class ที่เขียนขึ้นเพียงครั้งเดียวแล้วเรียกใชง้ าน
ได้ตลอดทำใหส้ ะดวกและรวดเร็วต่อการพัฒนา (กติ ิ ภักดีวฒั นะกลุ , 2552)

2. HTML5 (Hyper Text Makeup Language 5: HTML5)
HTML5 คือภาษา HTML อีกภาษาหนึ่ง ที่ถูกใช้ในบริบทของ Web Applications เป็น
ภาษาที่ได้รับการปรับโฉมของ HTML ขึ้นใหม่อยางสมบูรณ์ ด้วยการเพ่ิมความสามารถใหม่ ๆ แต่
ยงั คงเกบ็ ขอ้ มูลสำคัญท้งั หมดท่ีมีอยูใน HTML4 ไว้ เพ่อื ให้ใช้ได้กับเว็บเบราเซอร์ (Web Browser) รุ่น
กอ่ นได้ ยง่ิ ไปกว่านน้ั HTML5 ยังใช้รปู แบบคำสั่งท่ีเขา้ กันได้ท้ัง HTML และ XHTML แต่ในชว่ งเวลาที่
ผ่านมา เวบ็ เบราเซอรร์ ่นุ เก่า ๆ ยงั คงใชก้ ันอยู่ ทำให้การรองรับของ HTML5 อาจเกดิ ปัญหา จึงต้องมี
การเปิดบริการทดสอบ เช่น “HTML5 test” เพื่อตรวจสอบการรองรับของเว็บเบราเซอร์ (สิทธิชัย
ประสานวงศ,์ 2557, หนา้ 28-29)
HTML5 ได้ให้ความสำคัญไม่ใช่แต่กับโครงสร้างและองค์ประกอบที่เป็นสื่อผสมหรือ
มัลตมิ ีเดยี เท่านนั้ แตย่ งั รวมถงึ Application Programming Interfaces (APIs) ซ่ึงจะช่วยให้ผู้พัฒนา
เว็บที่พอจะมีความรู้ทางการเขียนโปรแกรมสามารถพัฒนาโปรแกรมให้กั บเว็บไซต์ของตนเองได้อีก
ด้วย

SPU CHONBURI 12

ความสามารถเด่น ๆ ของ HTML5
HTML 5 ได้เพ่มิ ความสามารถใหม่ ๆ เช่น
- Audio/Video Support รองรับมัลติมีเดียได้อย่างเต็มรูปแบบหรือสมบูรณ์มากขึ้นโดย
ได้เพ่ิมคำสั่งสำหรับการแสดงภาพและเสยี งโดยตรง
- New Form Input ในการสร้างฟอร์มได้เพิ่มการรับข้อมูลชนิดใหม่ ๆ เข้ามามากมาย
เพ่ือรับขอ้ มูลรูปแบบนั้น ๆ โดยตรง เชน่ email, number, datetime เปน็ ตน้ นอกจากจะช่วยให้เรา
ได้รับขอ้ มลู ท่ีถกู ต้องแล้วยังลดขั้นตอนการเขียนสครปิ ต์ เพอ่ื การตรวจสอบถวามถกู ตอ้ งของขอ้ มูล
- Semantic Markup Page Layout เป็น องค์ประกอบเชิงความหมาย (Semantic
element) ช่วยในการจัดหน้าแบบแบ่งส่วนได้โดยง่าย เช่น <header>, <nav>, <article>,
<section>, <aside> และ <footer>
- Canvas Graphics ช่วยให้เราวาดรูปกราฟฟิกรูปแบบต่าง ๆ ตามที่เราต้องการบนหน้า
เวบ็ เพจไดง้ า่ ยและสะดวกยง่ิ ขึน้
- Drag & Drop ใน HTML5 นั้นรองรับการใช้เมาส์ในการลากแล้ววางวัตถุบนหน้าเว็บ
(Drag & Drop) โดยใชค้ าสง่ั จาวาสคริปต(์ JavaScript) ควบคมุ กระบวนการ
- Web Storage เป็นกลไกการจัดเก็บข้อมูลในเบราว์เซอร์แบบใหม่ ซึ่งสามารถจัดเก็บ
ข้อมลู แบซับซอ้ นไดด้ ีกวาเดิมทจ่ี ดั เก็บแบบคกุ กี้ (สิทธชิ ัย ประสานวงศ์, 2557, หน้า 28-29)
3. CSS3 (Cascading Style Sheets 3: CSS3)
CSS เป็นภาษาที่ใช้ในการเขียนเว็บเพจเพื่อบอกเว็บเบราว์เซอร์ถึงลักษณะของการ
จัดรูปแบบเอกสาร HTML ที่จะแสดงผล สามารถใช้ CSS นี้ช่วยในการกำหนดรูปแบบให้กับ
องค์ประกอบท่ัวไปในหน้าเว็บ เช่น การเปลี่ยนแบบอักษร สี และระยะข้อความ เป็นต้น CSS จะเป็น
เหมอื นเครื่องมือที่ใช้ในการแตง่ ตวั ให้กับโครงสร้างท่ีถูกสร้างจาก HTML ใหม้ ีรูปแบบ และสีสันท่ีน่าดู
นา่ ชมยิงข้ึน
CSS3 เป็นรุ่นหลักรุ่นที่3 (CSS Level3) ของการกาหนดข้อมูลจำเพาะของ CSS (CSS
specification) ที่ถูกกำหนดโดย W3C โดยเริ่มพัฒนามาตั้งแต่ปี ค.ศ.2005 CSS3 จะต่างจาก 2รุ่น
ก่อนตรงที่ CSS3จะถูกแบ่งออกเป็นส่วน ๆ เรียกวา โมดูล (Module) แทนที่จะรวมเป็นเอกสารเดยี ว
เหมือน CSS1 และ CSS2/2.1 โดยขณะนี้มีมากกว่า 30 โมดูลแล้ว เช่น โมดูล Selections, Media,
Queries, Text, Backgrounds, Transitions, Animations และ Multi-Columnsแต่ละโมดูลจะอยู่
ในระดับการพัฒนา และการติดตั้งลงในเบราว์เซอร์ที่แตกต่างกัน มีบางโมดูลที่ถูกกำหนดเป็น
มาตรฐานแล้ว เช่น Color แต่จะมีบางโมดูลจะถูกนำไปพัฒนาต่อในรุ่นที่4 ก่อนที่รุ่นที่3 จะเสร็จ
สมบูรณ์

SPU CHONBURI 13

มีฟังกชัน์และคุณลักษณะเด่นใหม่ ๆ หลากหลายที่ถูกเพิ่มเข้ามาใน CSS3 เช่น border-
radius, boxshabow, background-origin;การกาหน ดสี แบบ HSL, HSLA และ RGBE; text-
shadow; text-overflow; word-wrap; box-sizing; attribute selectors; multicolumn layout;
Web Fonts;และ speech เป็นตน้ (สทิ ธชิ ัย ประสานวงศ์, 2557, หนา้ 241)

4. JavaScript
JavaScript เปน็ ภาษาทีเ่ ป็น Script ท่อี ย่ใู นเวบ็ ไซต์ (ใชร้ ว่ มกบั HTML) เพอ่ื ใหเ้ วบ็ ไซต์ดูมี
การเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น และเป็นภาษาสคริปต์เชิงวัตถุหรือเรียกว่า
Object Oriented Programming ที่มีเป้าหมายในการออกแบบ และพัฒนาโปรแกรมในระบบ
อินเทอร์เน็ต สำหรับผู้เขียนเอกสารด้วยภาษา HTML สามารถทำงานข้ามแพลตฟอร์มได้ทำงาน
รว่ มกับภาษา HTML และภาษาจาวาได้ท้งั ทางฝั่งไคลเอนต์ (Client) และทางฝัง่ เซิร์ฟเวอร์ (พันจันทร์
ธนวัฒนเสถยี ร, 2556, หนา้ 8)
5. jQuery
jQuery นั้นเป็น JavaScript Library ที่นำ Function และคำสั่งต่าง ๆ ที่จะทำให้ไม่ต้อง
มาเขียนใหม่ทั้งหมดตั้งแต่ต้น สามารถที่จะเขียน AJAX ได้แบบง่าย ๆ เพียง Code ไม่กี่บรรทัด หรือ
จะเขยี น JavaScript เพ่อื ดกั Event (เหตุการณ์) ตา่ ง ๆ ทต่ี อ้ งการ (Web up, 2560)
ความสามารถของ jQuery
- ความสามารถในการทำงานแบบ AJAX
- การสร้าง Animation ได้แบบง่าย ๆ ไม่ว่าจะทำรูปให้เคลื่อนที่ หรือ DIV เช่นเอา
mouse จบั DIV ลากไปมา
- ความสามารถในการ Binds หรอื การผูก หรอื จับ Function ทเ่ี ขียนขึน้ ใหท้ ำงานร่วมกับ
Function อืน่ ๆ
- สามารถจดั การกบั CSS ลอง Element นนั้ ๆ ได้
- คน้ หา Element ท่ีต้องการและจัดการ เพมิ่ หรอื ลบ Attributes ทต่ี อ้ งการได้
- ทำ Effect ตา่ ง ๆ กับ Element ทตี่ อ้ งการ เช่นการ Hide DIV ท่ตี ้องการ
- การดักเหตกุ ารณต์ ่าง ๆ
jQuery นั้นมี Plugin มากหลายเลยที่สามารถนำมาใช้ในงานได้ ไม่ว่าจะเป็น Plugin
สำหรบั การเช็ค Form เช่น เชค็ อเี มล์วา่ รปู แบบถูกต้องหรือไม่ หรอื Plugin ปฏิทนิ ใช้สำหรับให้User
คลิกเลือกวันที่เอาโดยไม่ต้องมากรอกเอง หรือไม่ว่าจะเป็นการดึงเอาข้อมูล XML, JSON, TEXT ก็
สามารถทำงานไดเ้ ลย

SPU CHONBURI 14

6. CodeIgniter
CodeIgniter คือ Framework ที่ถูกพัฒนาขึ้นด้วยภาษา PHP เพื่อให้มีความสะดวกใน
การพัฒนา Web Application อย่างเป็นระบบ นอกจากนี้เจ้า CodeIgniter ยังเป็น Open Source
ซ่ึงสามารถดาวนโ์ หลดและใช้งานได้ฟรี
โดยจะมีระบบโครงสร้างเปน็ Model-View-Controller หรือ MVC ดังน้ี
Controller: ใช้เป็น ส่ือกลาง ระหวา่ ง Model กับ View
Model: ใช้เป็นโครงสร้างข้อมูล เป็นคลาสแบบจำลองจะมีฟังก์ชั่นที่ช่วยให้สามารถ
ปรบั ปรงุ ฐานขอ้ มลู ได้
View: ใชเ้ ปน็ ส่วนของหน้าเว็บ ซงึ่ สามารถเป็นเพียงบางสว่ นของหน้าได้ เชน่ ส่วนหัวส่วน
เนื้อหา และ ส่วนท้าย โดยให้ Controller เปน็ ตวั เรยี กใช้
7. Bootstrap
Bootstrap คือ Framework ที่ช่วยให้การเขียนเว็บไซต์ด้วย PHP ทำได้ง่ายและสะดวกรวดเร็ว โดย
ภายใน Bootstrap ไดเ้ ตรยี มชดุ ของ CSS ที่ช่วยปรับแต่งหน้าเว็บเพจ เช่น ปมุ่ ตาราง หน้าตา่ งโตต้ อบ
ฯลฯ เพยี งแคก่ ำหนดคลาสให้กบั เอลเิ มนตบ์ นเว็บเพจ ก็จะไดห้ นา้ เวบ็ เพจทสี่ วยงามทนั ที นอกจากนั้น
ภายใน Bootstrap ยังมีไลบรารีต่าง ๆ ที่จำเป็นสำหรับการพัฒนาเว็บไซต์เช่น สคริปต์สำหรับแสดง
เมนู สามารถจัดเรียงเอลิเมนต์อัตโนมัติเมื่อขนาดหน้าจอเปลี่ยน เป็นต้น (จีราวุธ วารินทร์, 2560,
หนา้ 22)

ระบบจัดการฐานขอ้ มลู
Microsoft SQL Server
Microsoft SQL Server คือ ระบบการจัดการฐานข้อมูลเชิงสัมพันธ์ ที่พัฒนาโดย

Microsoft (ไมโครซอฟท์) เป็นซอฟต์แวร์ที่มีหน้าที่หลักในการจัดการฐานข้อมูล Server เป็น
ผลิตภณั ฑท์ มี่ หี นา้ ท่ีหลักในการจัดเก็บและเรียกข้อมูลตามคำขอของแอพพลเิ คชัน-ซอฟตแ์ วร์อนื่ ๆ ซึ่ง
อาจทำงานได้บนคอมพิวเตอร์เครื่องเดียวกันหรือบนคอมพิวเตอร์เคร่ืองอ่ืนในเครือขา่ ย

ประวัติของ Microsoft SQL Server เริ่มต้นด้วยผลิตภัณฑ์ Microsoft SQL Server ตัว
แรก - SQL Server 1.0 ซึ่งเป็นเซิร์ฟเวอร์ 16 บิตสำหรับระบบปฏิบัติการ OS / 2ในปี 1989 – และ
ขยายไปถึงวนั ปัจจบุ ัน (สุจิตรา อดุลยเ์ กษม, 2553)

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

ความเปน็ มาและความสำคัญของปัญหา
ฝ่ายเทคโนโลยีสารสนเทศ วิทยาลัยเทคโนโลยีชลบุรี เป็นฝ่ายเก็บรักษาอุปกรณ์

อิเล็กทรอนกิ ส์ต่าง ๆ เพอื่ ใหบ้ คุ ลากรในวทิ ยาลัยมายมื เพื่อไปใช้ประโยชน์ในวิทยาลยั รวมถึงทำหน้าท่ี
ดูแลรับผิดชอบงานให้บริการเทคโนโลยีสารสนเทศแก่ฝ่ายต่าง ๆ ดูแลระบบเครือข่าย จัดการ
ฐานข้อมูล กล้องวงจรปิด ตลอดจนแก้ไขปัญหา ที่เกิดจากเครื่องคอมพิวเตอร์ อุปกรณ์โปรแกรมและ
เครือข่าย เพื่อให้ฝ่ายต่าง ๆ สามารถใช้เทคโนโลยีในการดำเนินงานและให้บริการได้อย่างมี
ประสทิ ธภิ าพ รวมท้ังการฝกึ อบรมเพื่อสง่ เสริมการใช้เทคโนโลยสี ารสนเทศแก่ผปู้ ฏบิ ัตงิ าน ให้สามารถ
ใช้เทคโนโลยีสารสนเทศได้อย่างมีประสิทธิภาพฝ่ายเทคโนโลยีสารสนเทศรับผิดชอบงาน 4 ลักษณะ
ดังนี้

1. วางแผนและพัฒนาระบบเทคโนโลยี
ทำหน้าที่วางแผนและพัฒนาระบบคอมพิวเตอร์ โดยการศึกษาเทคโนโลยีใหม่ ๆ จัดหา
เครอ่ื งคอมพวิ เตอร์ และโปรแกรมต่าง ๆ สำหรบั การพฒั นางาน
2. งานระบบเครอื ขา่ ยคอมพวิ เตอร์
ดูแลระบบคอมพิวเตอร์ ระบบเครือข่ายคอมพิวเตอร์ และโปรแกรมคอมพิวเตอร์อื่น ๆ ท่ี
เก่ยี วขอ้ งกับการบรกิ าร
3. งานฐานขอ้ มลู
ดูแลรับผิดชอบฐานข้อมูลระบบ ฐานข้อมูลบุคลากร ฐานข้อมูลนักศึกษา ฐานข้อมูล
อุปกรณ์ และฐานข้อมูลอื่น ๆ ที่พัฒนาขึ้นเพื่อใช้ประโยชน์ในการให้บริการสารสนเทศ รวมทั้งการ
พัฒนาเว็บไซต์
4. งานเว็บไซต์
ดูแลและพฒั นาเว็บไซตข์ องวิทยาลยั
5. งานฝกึ อบรม
พัฒนาบุคลากรให้มีความรู้และทักษะในด้านเทคโนโลยีสารสนเทศในการฝึกอบรมด้าน
เทคโนโลยีสารสนเทศแก่บคุ ลากรในระดบั ต่าง ๆ
การยืม-คืนอุปกรณ์สารสนเทศต่าง ๆ และการจัดการคลังอุปกรณ์ โดยฝ่ายเทคโนโลยี
สารสนเทศ มีการจัดเก็บข้อมูลการเบิกจ่ายอุปกรณ์ เพื่อใช้ในการติดตามงาน และค้นหาข้อมูล ซึ่ง
อุปกรณส์ ารสนเทศตา่ ง ๆ มเี ป็นจำนวนมาก และเว็บไซต์เดมิ ทใี่ ชอ้ ยมู่ ีปัญหาหลายอย่างเกดิ ขน้ึ เช่น

SPU CHONBURI 16

ยืมอุปกรณ์แล้วไม่ตัดสต๊อก แอดมินไม่สามารถออกจากระบบได้ และอุปกรณ์บางชิ้นไม่พบในสต๊อก
ทำให้ฝ่ายเทคโนโลยีสารสนเทศ จำเป็นตอ้ งพฒั นาเว็บไซต์ขึน้ มาใหม่เพ่ือลดข้อผิดพลาดของระบบยืม-
คืนอปุ กรณ์ โดยใชภ้ าษา PHP, SQL, HTML5, CSS3, Ajax, jQuery, JavaScript, CodeIgniter และ
Bootstrap ในการพัฒนาระบบ และใช้ Microsoft SQL Server ในการจัดการระบบฐานข้อมูล
เพื่อให้ง่ายต่อการค้นหาข้อมูลและช่วยในการจัดการเรื่องการเบกิ จ่ายอุปกรณ์ให้มีระบบการจัดการที่
สะดวกและรวดเร็วขึ้น

วัตถุประสงค์ของโครงงาน
1. เพื่อพัฒนาระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา

วิทยาลัยเทคโนโลยชี ลบรุ ี
2. เพือ่ ประเมนิ ความพึงพอใจในการใช้งานระบบการจัดการยมื -คืน อุปกรณ์ บนเครือข่าย

อนิ เทอร์เน็ต กรณีศึกษา วทิ ยาลัยเทคโนโลยีชลบรุ ี

ขอบเขตการดำเนนิ งานของโครงงาน
การพัฒนาระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา

วทิ ยาลยั เทคโนโลยีชลบรุ ี มีขอบเขตการดำเนินงานของโครงงานดังต่อไปนี้
1. การจัดการข้อมูลพื้นฐาน สามารถเพม่ิ แก้ไข และค้นหาขอ้ มลู ได้
- ช่อื อปุ กรณ์
- ประเภทอุปกรณ์
- รุ่นอปุ กรณ์
- รายละเอยี ดอปุ กรณ์
- ราคาอปุ กรณ์
- รูปภาพอุปกรณ์
2. การยมื -คืน อุปกรณ์
-ขอ้ มูลอุปกรณ์
-อปุ กรณ์คงเหลือ
3. แจง้ งาน
4. จองห้องประชมุ
5. การวิเคราะห์และออกรายงาน
-ขอ้ มูลการยืม-คนื อุปกรณ์

SPU CHONBURI 17

-ขอ้ มลู การแจง้ งาน
-ข้อมลู การจองห้องประชมุ

ขั้นตอนการดำเนินงาน
การพัฒนาระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา

วิทยาลัยเทคโนโลยีชลบุรี ได้มีการนำหลักการเชิงระบบ (System Approach) เข้ามาช่วยในการ
พฒั นาระบบโดยมี 5 ข้ันตอนดงั ต่อไปนี้

1. ขั้นการวิเคราะห์ เป็นขั้นการศึกษาข้อมูลและรวบรวมข้อมูลจากการสอบถามพนักงาน
ที่ปรึกษา จากเอกสารรายงานต่าง ๆ และ SQL File รวมทั้งศึกษาถึงความต้องการของโครงการ
รวมถึงเทคโนโลยที ีน่ ำมาใช้ในการออกแบบและพฒั นาระบบยมื -คนื อุปกรณ์

2. ขั้นการออกแบบ เป็นการออกแบบกรอบแนวคิดในการจัดทำระบบที่ได้จากการ
วิเคราะห์มากำหนดรายละเอียดต่าง ๆ ที่เกี่ยวข้องกับรูปแบบ ได้แก่แนวคิด วัตถุประสงค์ เป้าหมาย
และสิ่งแวดล้อมของระบบ โดยกรอบแนวคิดของการพัฒนาระบบ ได้ทำการออกแบบให้สามารถ
แสดงผลข้อมูลได้ทุกอุปกรณ์ ได้แก่ เครื่องคอมพิวเตอร์ อุปกรณ์สมาร์ทโฟน และแท็บเล็ต โดยไม่ยึด
ติดกับขนาดของหน้าจอที่ใช้แสดงผลข้อมูล และสามารถแสดงผลได้ทุกระบบปฏิบัติการ เช่น
Windows, IOS และ Android

3. ข้ันการพฒั นา คอื การสังเคราะหร์ ูปแบบตามท่ไี ด้ออกแบบไว้ และทำการสรา้ งเครื่องมือ
ตา่ ง ๆ ของระบบการจดั การยืม-คนื อปุ กรณ์ บนเครอื ข่ายอนิ เทอร์เนต็ กรณศี กึ ษา วทิ ยาลยั เทคโนโลยี
ชลบุรี เทคโนโลยีที่ใช้ในการพัฒนาระบบประกอบ ด้วย PHP, CSS, HTML5, Ajax, jQuery,
JavaScript, Bootstrap, CodeIgniter และใช้ Microsoft SQL Server เป็นระบบจัดการฐานข้อมูล
ในขั้นการพัฒนาจะทำการเขียนโปรแกรมให้สามารถทำงานได้ตามที่ออกแบบไว้ โดยใช้โปรแกรม
Atom

4. ขั้นการทดลองใช้ คือ การนำระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่าย
อินเทอร์เน็ต กรณีศึกษา วิทยาลัยเทคโนโลยีชลบรุ ี ที่พัฒนาเสร็จแล้ว มาทดสอบการใช้งานโดยคณะ
ผู้จัดทำและผู้ใช้งานระบบ โดยเลือกวิธีการทดสอบแบบแบล็คบอกซ์ (Black Box Testing) เป็นการ
ทดสอบการทำงานของระบบ โดยรวมระบบแต่ล่ะฟังก์ชันว่ามีกระบวนการทำงานถูกต้องตาม
วัตถุประสงค์ที่ต้องการหรือไม่ เพื่อหาข้อบกพร่องของโปรแกรม หลังจากนั้นนำมาปรับปรุง แก้ไข
โปรแกรมใหท้ ำงานตรงตามวตั ถปุ ระสงค์ทกี่ ำหนดไว้

5. ขั้นการประเมินผลระบบ เป็นการนำเครื่องมือทีไ่ ด้พัฒนาขึ้น คือ ระบบการจัดการยืม-
คนื อุปกรณ์ บนเครือขา่ ยอินเทอร์เนต็ กรณีศกึ ษา วิทยาลยั เทคโนโลยีชลบุรีโดยทำการประเมินความ

18

พึงพอใจของผู้ใช้งานระบบ โดยกลุ่มตัวอย่าง คือ พนักงานที่ปรึกษาจำนวน 5 คน ทำการรวบรวม
ขอ้ มลู ทั้งหมดทไ่ี ด้จากการประเมนิ เพอ่ื นำมาสรุปผล

ผลท่ีคาดว่าจะไดร้ ับจากการดำเนินงานโครงการ
1. ได้ระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา วิทยาลัย

เทคโนโลยชี ลบุรี
2. สามารถใช้ระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา

วทิ ยาลยั เทคโนโลยชี ลบรุ ี ชว่ ยในการจัดการขอ้ มูลอปุ กรณ์ภายในองคก์ ร
3. สามารถใช้ระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา

วิทยาลยั เทคโนโลยชี ลบุรี ใหเ้ ป็นระบบมากย่ิงข้ึน
4. สามารถใช้ระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา

วทิ ยาลยั เทคโนโลยชี ลบรุ ี ได้สะดวกและรวดเร็ว
5. สามารถตรวจสอบอปุ กรณค์ งเหลือได้ถกู ตอ้ ง
6. ทำให้ง่ายตอ่ การคน้ หาอุปกรณ์

แผนการดำเนนิ งาน (Gantt Chart)
การพัฒนาคือ ระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา

วิทยาลัยเทคโนโลยีชลบุรี เริ่มดำเนินงานตั้งแต่ 4 กุมภาพันธ์ 2563 ถึง 22 พฤษภาคม 2563 โดยมี
ขนั้ ตอนในการดำเนนิ งาน ดังภาพที่ 3.1
SPU CHONBURI

SPU CHONBURI 19

20

แผนภาพแสดงการทำงานของผู้ใช้ (Use Case Diagram)
แผนภาพแสดงการทำงานของผู้ใช้ (Use Case Diagram) เป็นแผนภาพที่ใช้

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

Actor คอื ผู้ดูแลระบบ (Admin) มีหน้าที่ในการจัดการข้อมลู พื้นฐาน การเบกิ จ่ายอุปกรณ์
แจ้งงาน จองห้องประชุม และการออกรายงาน พนักงาน มีหน้าที่ในการจัดการข้อมูลพื้นฐาน การ
เบิกจ่ายอุปกรณ์ และการออกรายงาน สว่ นผูบ้ รหิ าร มีหนา้ ท่ีในการดูรายงานต่าง ๆ

Use Case คือ ระบบงานต่าง ๆ ในระบบ เช่น การจัดการข้อมูลพื้นฐาน การเบิกจ่าย
อปุ กรณ์ การบันทึกการยืมคืนอุปกรณ์ การแจง้ งาน การจองหอ้ งประชมุ และการออกรายงาน เป็นตน้

จดั การข้อมลู พืน้ ฐาน
SPU CHONBURI
พนกั งาน การยมื -คืน อปุ กรณ์ ผ้ดู แู ลระบบ
แจ้งงาน

จองห้องประชมุ

ผ้บู ริหาร ออกรายงาน

ภาพท่ี 3.2 แสดงแผนภาพ Use Case Diagram ของระบบ

21

ระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา วิทยาลัย
เทคโนโลยีชลบุรี ได้ออกแบบระบบโดยแสดงแผนภาพ Use Case Diagram ของระบบเพื่อแสดง
กระบวนการทำงานของระบบที่มีความสัมพันธ์กับผู้ใช้ ซึ่งมีทั้งหมด 5 กระบวนการ (Process)
ดงั ตอ่ ไปน้ี

- การจัดการข้อมลู พืน้ ฐาน เปน็ ข้นั ตอนการเพ่ิม ลบ แก้ไขข้อมูลพ้ืนฐานท้ังหมดของระบบ
โดยผดู้ ูแลระบบ

- การยืม-คนื อปุ กรณ์ เปน็ ข้นั ตอนที่บุคลากรในวิทยาลัยจะเข้ามายืมและคืนอุปกรณ์ จาก
ผ้ดู แู ลระบบพนกั งาน

- การแจ้งงาน เป็นขั้นตอนที่บุคลากรในวิทยาลัยเข้ามาแจ้งงานที่ต้องการให้ทำผ่านทาง
พนกั งาน จากน้นั พนักงานจงึ จะแจง้ งานเข้าไปในระบบ

- การจองห้องประชุม เป็นขั้นตอนที่บุคลากรในวิทยาลัยเข้ามาจองห้องประชุมผ่านทาง
พนักงาน จากนัน้ พนกั งานจึงจะจองหอ้ งประชุมให้กับบคุ ลากร

- การวิเคราะห์และออกรายงาน ผู้ดูแลระบบและพนักงาน สามารถดูรายงานต่าง ๆ ได้
เชน่ รายงานการยมื -คืน ของอปุ กรณ์ต่าง ๆ ในสตอ๊ ก หรอื ข้อมูลการแจง้ งานและการจองหอ้ งประชมุ
SPU CHONBURI

22

ความสมั พันธข์ องฐานขอ้ มูล (E-R Diagram)
แผนภาพแสดงความสัมพันธ์ เป็นแผนผังแสดงผลจากการ Normalized ตารางข้อมลู ต่าง

ๆ และแสดงถึงความสัมพนั ธ์ระหว่างตารางข้อมลู ท่ีเกิดขึน้ ในระบบ และข้อมลู ที่ใช้ในระบบท้ังหมดซ่ึง
ในระบบยมื -คนื อปุ กรณ์ กรณศี ึกษาฝา่ ยเทคโนโลยีสารสนเทศ วทิ ยาลัยเทคโนโลยีชลบุรี ได้มีการสร้าง
ตารางข้อมูลและแสดงความสมั พันธ์ระหวา่ งตารางข้อมูลตา่ ง ๆ ดังภาพที่ 3.3

STORE1_User 1 1 STORE1_Bill_Product
User_id (PK) Bp_id (PK)
User_name M
SPU CHONBURI Product_id (FK)

STORE1_Bill Bp_Return

Bill_id (PK) Status_id
M User_id (FK)

Bill_status STORE1_Product
Product_id (PK)
STORE1_Addmin 1 Bill_date Product_name 1
Addmin_id (PK) M Addmin_id (FK) Cg_id (FK) M
Addmin_name M Ac_id (FK) Product_Details
Product_generation
STORE1_Accessory Product_Price
1 Ac_id (PK) Product_pic
M Status_use STORE1_Category
Cg_id (PK)
Bp_id (FK) Cg_name 1

Ac_name

Ac_status

STORE1_Work STORE1_Room
Work_id Room_id
Work_dp Room_name
Work_date Room_work
Work_time Room_detail
Work_detail Room_date
Work_location Room_time

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

23

การออกแบบตารางขอ้ มลู (Data Tables Design)
ระบบการจดั การยมื -คืน อุปกรณ์ บนเครอื ข่ายอินเทอร์เน็ต กรณีศึกษา วทิ ยาลยั

เทคโนโลยชี ลบุรี มีการออกแบบตารางข้อมูลเพื่อใช้ในการประมวลผลของคอมพิวเตอร์เพื่อให้
ทำงานอย่างเป็นระบบสะดวก และรวดเร็วในการทำงาน ซ่งึ ในระบบมีการออกแบบโครงสรา้ งข้อมูลได้
ท้งั หมด 9 ตารางดงั น้ี

1. รายละเอยี ดอุปกรณเ์ พิม่ เตมิ ทย่ี มื (STORE1_Accessory)
2. พนกั งาน (STORE1_Addmin)
3. รายละเอยี ดใบเสร็จของอปุ กรณ์ทีย่ มื (STORE1_Bill)
4. รายละเอยี ดอปุ กรณ์ทีย่ ืม (STORE1_Bill_Product)
5. ประเภทของอปุ กรณ์ (STORE1_Category)
6. อุปกรณ์ (STORE1_Product)
7. บุคลากร (STORE1_User)
8. แจง้ งาน (STORE1_Work)
9. จองหอ้ งประชมุ (STORE1_Room)
SPU CHONBURI
รหสั STORE1_Accessory

ชื่อตาราง รายละเอียดอปุ กรณ์เพิ่มเตมิ ทย่ี มื

วัตถุประสงค์ จดั เกบ็ รายละเอยี ดเกี่ยวกับอปุ กรณ์เพ่ิมเติมทีย่ มื

ตารางที่เกีย่ วขอ้ ง รายละเอียดอุปกรณท์ งั้ หมดทีย่ ืม,รายละเอียดอปุ กรณท์ ี่ยมื

ตารางแสดงรายละเอียด

ลำดบั คุณสมบัติ ประเภท ขนาด คำอธบิ าย ตรวจสอบความถกู ต้อง ประเภทคีย์ ค่าเบอ้ื งตน้
(No.) (Attribute)
(Type) (Width) (Description) (Validation Check) (Key Type) (Default)

1 Ac_id int 11 รหัสอปุ กรณ์ ไมเ่ ปน็ ค่าว่างและค่าซำ้ Primary Key -
เพ่มิ เตมิ

2 Bp_id int 11 รหัสบลิ ไมเ่ ปน็ ค่าว่าง Foreign Key -

3 Ac_name nvarchar 500 ชือ่ อปุ กรณ์ ตวั อกั ษร --
เพ่ิมเตมิ

4 Ac_status nvarchar 50 สถานะของ ตวั อักษร - NEW
อุปกรณ์เพ่ิมเตมิ

ตารางท่ี 3.1 แสดงการออกแบบตารางรายละเอยี ดอุปกรณ์เพ่มิ เติมท่ียืม

24

รหสั STORE1_Addmin

ช่อื ตาราง พนักงาน

วัตถปุ ระสงค์ จัดเก็บรายละเอยี ดของพนักงาน

ตารางที่เกย่ี วขอ้ ง รายละเอียดใบเสรจ็ ของอปุ กรณท์ ่ียืม

ตารางแสดงรายละเอียด

ลำดับ คุณสมบัติ ประเภท ขนาด คำอธบิ าย ตรวจสอบความถกู ตอ้ ง ประเภทคีย์ ค่าเบือ้ งตน้
(Key Type) (Default)
(No.) (Attribute) (Type) (Width) (Description) (Validation Check) Primary Key -
--
1 Addmin_id int 11 รหสั พนกั งาน ไม่เป็นค่าวา่ งและคา่ ซ้ำ
SPU CHONBURI
2 Addmin_name nvarchar 500 ชื่อพนกั งาน ตัวอกั ษร

ตารางท่ี 3.2 แสดงการออกแบบตารางพนักงาน

รหัส STORE1_Bill

ชอ่ื ตาราง รายละเอียดใบเสร็จของอปุ กรณท์ ย่ี มื

วัตถุประสงค์ จดั เก็บรายละเอยี ดเก่ียวกบั ขอ้ มูลต่าง ๆ ของใบเสรจ็

ตารางที่เกย่ี วขอ้ ง พนกั งาน,บุคลากร,รายละเอยี ดอุปกรณเ์ พ่มิ เติมท่ียืม

ตารางแสดงรายละเอยี ด

ลำดับ คุณสมบตั ิ ประเภท ขนาด คำอธบิ าย ตรวจสอบความถูกตอ้ ง ประเภทคีย์ ค่าเบื้องตน้
(No.) (Attribute)
(Type) (Width) (Description) (Validation Check) (Key Type) (Default)

1 Bill_id int 11 รหสั ใบเสรจ็ ไมเ่ ป็นคา่ วา่ งและคา่ ซำ้ Primary Key -

2 User_id int 11 รหัสบุคลากร ไม่เป็นค่าวา่ ง Foreign Key -

3 Bill_status nvarchar 50 สถานะของบิล ตวั อักษร - NEW

4 Bill_date datetime 20 วันเวลาทอ่ี อก dd:mm:yy H:M:S - datenew
ใบเสรจ็

5 Addmin_id int 11 รหสั พนกั งาน ไมเ่ ปน็ ค่าวา่ ง Foreign Key -

6 Ac_id int 11 รหสั อปุ กรณ์ ไม่เป็นคา่ ว่างและค่าซำ้ Forgign Key -
เพิ่มเตมิ

ตารางที่ 3.3 แสดงการออกแบบตารางรายละเอียดใบเสรจ็ ของอปุ กรณ์ท่ียืม

25

รหสั STORE1_Bill_Product

ช่อื ตาราง รายละเอียดอปุ กรณ์ทย่ี มื

วตั ถปุ ระสงค์ จดั เก็บรายละเอียดเกี่ยวกับอุปกรณท์ ่ียมื

ตารางท่เี ก่ยี วขอ้ ง อุปกรณ,์ รายละเอียดอปุ กรณ์เพ่ิมเตมิ ทย่ี มื

ตารางแสดงรายละเอียด

ลำดับ คุณสมบัติ ประเภท ขนาด คำอธิบาย ตรวจสอบความถูกต้อง ประเภทคีย์ คา่ เบอ้ื งตน้

(No.) (Attribute) (Type) (Width) (Description) (Validation Check) (Key Type) (Default)

รหสั ของอุปกรณ์ที่
กำลงั ยืม
1 Bp_idSPU CHONBURI int 11 ไมเ่ ป็นค่าว่างและค่าซ้ำ Primary Key -

2 Product_id int 11 รหสั อุปกรณ์ ไมเ่ ป็นคา่ ว่าง Foreign Key -

3 Bp_Return datetime 20 วนั เวลาท่ียืม dd:mm:yy H:M:S - datenew
อปุ กรณ์

4 Status_id nvarchar 50 สถานะของ ไมเ่ ป็นคา่ ว่าง - NEW
อปุ กรณ์

ตารางที่ 3.4 แสดงการออกแบบตารางรายละเอียดอุปกรณ์ทยี่ มื

รหัส STORE1_Category
ชือ่ ตาราง
วตั ถุประสงค์ ประเภทของอุปกรณ์
ตารางทเ่ี ก่ียวขอ้ ง
จดั เก็บประเภทของอปุ กรณ์
ลำดับ คณุ สมบตั ิ
(No.) (Attribute) อุปกรณ์

1 Cg_id ตารางแสดงรายละเอียด

2 Cg_name ประเภท ขนาด คำอธิบาย ตรวจสอบความถูกตอ้ ง ประเภทคยี ์ ค่าเบอื้ งต้น

(Type) (Width) (Description) (Validation Check) (Key Type) (Default)

int 11 รหัสประเภท ไมเ่ ป็นคา่ วา่ งและคา่ ซำ้ Primary Key -
อุปกรณ์

nvarchar 100 ชือ่ ประเภท ตัวอักษร --

ตารางที่ 3.5 แสดงการออกแบบตารางประเภทของอุปกรณ์

26

รหัส STORE1_Product

ช่อื ตาราง อปุ กรณ์

วตั ถุประสงค์ จดั เกบ็ รายละเอยี ดของอุปกรณ์

ตารางทเี่ กยี่ วข้อง ประเภทของอุปกรณ,์ รายละเอยี ดอปุ กรณ์ทยี่ ืม

ตารางแสดงรายละเอยี ด

ลำดับ คุณสมบัติ ประเภท ขนาด คำอธบิ าย ตรวจสอบความถกู ต้อง ประเภทคยี ์ ค่าเบ้อื งตน้
(Key Type) (Default)
(No.) (Attribute) (Type) (Width) (Description) (Validation Check) Primary Key -
--
1 Product_id int 11 รหัสอปุ กรณ์ ไม่เป็นคา่ ว่างและค่าซ้ำ Foreign Key -
SPU CHONBURI
2 Product_name nvarchar 500 ช่ืออปุ กรณ์ ตัวอักษร --

3 Cg_id int 11 ประเภทอปุ กรณ์ ไม่เปน็ คา่ วา่ ง --

4 Product_Details nvarchar 500 รายละเอียดของ ตวั อักษร --
อุปกรณ์ --
-Y
5 Product_genera nvarchar 100 รนุ่ ของอปุ กรณ์ ตวั อักษร
tion

6 Product_Price int 11 ราคา ตัวเลข

7 Product_pic nvarchar 100 รูปภาพอปุ กรณ์ ตัวเลขและตวั อกั ษร

8 Status_use nvarchar 50 สถานะอปุ กรณ์ ตัวอักษร

ตารางที่ 3.6 แสดงการออกแบบตารางอุปกรณ์

รหัส STORE1_User
ชื่อตาราง
วตั ถปุ ระสงค์ บคุ ลากร
ตารางทเ่ี กี่ยวข้อง
จดั เก็บรายละเอยี ดของบคุ ลากร
ลำดับ คณุ สมบัติ
(No.) (Attribute) รายละเอยี ดใบเสร็จของอุปกรณ์ที่ยมื
1 User_id
2 User_name ตารางแสดงรายละเอยี ด

ประเภท ขนาด คำอธบิ าย ตรวจสอบความถกู ตอ้ ง ประเภทคยี ์ คา่ เบือ้ งต้น
(Key Type) (Default)
(Type) (Width) (Description) (Validation Check) Primary Key -
--
int 11 รหัสบุคลากร ไมเ่ ป็นคา่ ว่างและคา่ ซำ้

nvarchar 500 ช่อื บุคลากร ตัวอักษร

ตารางที่ 3.7 แสดงการออกแบบตารางบุคลากร

27

รหัส STORE1_Work

ชือ่ ตาราง แจง้ งาน

วตั ถปุ ระสงค์ จัดเกบ็ รายละเอยี ดของงานที่แจง้ มา

ตารางทเี่ กยี่ วขอ้ ง -

ตารางแสดงรายละเอียด

ลำดบั คุณสมบตั ิ ประเภท ขนาด คำอธบิ าย ตรวจสอบความถูกต้อง ประเภทคยี ์ ค่าเบอื้ งตน้
(Key Type) (Default)
(No.) (Attribute) (Type) (Width) (Description) (Validation Check) Primary Key -
--
1 Work_id int 11 รหัสงาน ไมเ่ ป็นคา่ วา่ งและค่าซ้ำ --
SPU CHONBURI --
2 Work_dp nvarchar 50 ฝา่ ยงาน ตวั อกั ษร --
--
3 Work_date date 20 วนั ทต่ี ้องใช้ dd:mm:yy

4 Work_time time 20 เวลาทตี่ ้องใช้ H:M:S

5 Work_detail nvarchar 500 รายละเอยี ดงาน ตัวอักษรและตวั เลข

6 Work_location nvarchar 500 สถานท่ี ตวั อักษร

ตารางที่ 3.8 แสดงการออกแบบตารางแจ้งงาน

รหัส STORE1_Room
ช่อื ตาราง
วตั ถปุ ระสงค์ จองห้องประชมุ
ตารางทเ่ี กยี่ วข้อง
จดั เกบ็ รายละเอียดของการจองหอ้ งประชมุ
ลำดบั คณุ สมบัติ
(No.) (Attribute) -
1 Room_id
2 Room_name ตารางแสดงรายละเอียด
3 Room_work
4 Room_detail ประเภท ขนาด คำอธบิ าย ตรวจสอบความถกู ตอ้ ง ประเภทคยี ์ คา่ เบื้องต้น
5 Room_date
6 Room_time (Type) (Width) (Description) (Validation Check) (Key Type) (Default)

int 11 รหสั จอง ไม่เป็นคา่ วา่ งและคา่ ซำ้ Primary Key -

nvarchar 50 ชอื่ หอ้ ง ตวั อักษร --

nvarchar 50 ช่ืองาน ตวั อักษร --

nvarchar 500 รายละเอยี ดงาน ตัวอกั ษร --

date 20 วนั ท่ใี ชห้ ้อง dd:mm:yy - -

time 20 เวลาทใี่ ชห้ ้อง H:M:S --

ตารางท่ี 3.9 แสดงการออกแบบตารางจองห้องประชมุ

28

การสร้างเครือ่ งมือประเมินความพึงพอใจโปรแกรม
ระบบการจัดการยืม-คืน อุปกรณ์ บนเครือข่ายอินเทอร์เน็ต กรณีศึกษา วิทยาลัย

เทคโนโลยีชลบุรี ผู้จัดทำได้มีการสร้างแบบประเมินการใช้งานระบบเพื่อใช้ในการประเมิน
ประสทิ ธภิ าพการทำงานของระบบโดยมีขนั้ ตอนการสร้างเคร่ืองมือความพงึ พอใจโปรแกรมดังน้ี

1. การสร้างแบบประเมิน เริ่มจากการออกแบบใบประเมินความพึงพอใจ และกำหนด
หัวขอ้ ทจ่ี ะประเมินผลโดยแบ่งออกเป็น 2 สว่ น คอื

การทดลองระบบด้าน Functional Test คือ การทดสอบด้านฟังก์ชันการทำงานของ
ระบบว่ามีความถูกต้อง ตรงกับการใช้งานระบบในส่วนนั้น โดยจะมีการทดสอบความถูกต้องในการ
จัดเก็บขอ้ มูลพื้นฐาน การจัดเก็บข้อมูลผู้สมัคร การจดั ทำตารางการสัมภาษณ์ การวเิ คราะห์ และออก
รายงาน

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

2. ตรวจสอบแบบประเมินให้อาจารย์ทีป่ รกึ ษาตรวจสอบความถูกต้องและเสนอแนะ
3. ทำการปรบั ปรงุ แบบประเมนิ ใหถ้ ูกต้องตามข้อเสนอแนะของอาจารยท์ ่ีปรกึ ษา
4. ออกหนังสือขอความอนุเคราะหป์ ระเมนิ โครงงาน
5. เก็บผลการประเมนิ จากผู้ใชร้ ะบบ
6. วเิ คราะห์ข้อมลู
7. สรุปผลการประเมิน
โดยมกี ารแบง่ เกณฑก์ ารใหค้ ะแนนของแบบประเมนิ โครงงาน 5 ระดับดังน้ี
SPU CHONBURI
ระดับ ค่าเฉลี่ย ความหมาย

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)

ตารางที่ 3.10 เกณฑ์การให้คะแนนแบบประเมนิ โครงงาน

SPU CHONBURI 29

การทดสอบและประเมินผลระบบ
การทดสอบ
ในการทดสอบระบบยืม-คืนอุปกรณ์ ใช้วิธีการทดสอบระบบด้วยวิธีการทดลองให้ผู้ใช้ทำ

การตรวจสอบความถกู ตอ้ ง
การประเมนิ ผลระบบ
ในการประเมินผลระบบได้ใช้แบบประเมินที่สร้างขึ้น โดยผู้ประเมินได้แก่ อาจารย์ประจำ

สำนักงานฝ่ายเทคโนโลยีสารสนเทศ (กราฟฟิก-มัลติมีเดีย) อาจารย์ประจำสำนักงานฝ่ายเทคโนโลยี
สารสนเทศ (โปรแกรมเมอร์) และพนักงานในวิทยาลัยเทคโนโลยีชลบรุ ี

สถิตทิ ่ใี ชใ้ นการวเิ คราะห์ข้อมลู
สถติ ทิ ่ีนำมาใช้ในการวิเคราะหข์ ้อมลู เป็นสถติ ิอย่างง่ายโดยนำผลการทดสอบที่ได้มาทำการ

หาคา่ เฉลย่ี และส่วนเบ่ยี งเบนมาตรฐานซึ่งมีวิธีการในการคำนวณดงั นี้
1. ค่าเฉล่ยี (Mean) หรือคา่ กลางเลขคณิตคา่ เฉล่ีย ค่ามชั ฌมิ าเลขคณติ เป็นตน้
̅ = ∑ ̅



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

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

= √∑( − ̅ )2

−1

หรือ

= √ ∑ 2−(∑ )2

( −1)

เม่อื แทน ค่าเฉลยี่ เบยี่ งเบนมาตรฐาน
แทน คา่ คะแนน
แทน จำนวนของคะแนนในแต่ละกลมุ่
∑ แทน ผลรวม

บทท่ี 4
ผลการดำเนนิ โครงงาน

จากการฝึกสหกิจศึกษา ณ ฝ่ายเทคโนโลยีสารสนเทศ วิทยาลัยเทคโนโลยีชลบุรี ทางสถาน
ประกอบการให้จัดทำโครงงาน การออกแบบและพัฒนาระบบการจัดการยมื -คืนอุปกรณ์ โดยผู้จัดทำ
ได้รับมอบหมายใหพ้ ัฒนาระบบการจัดการยืม-คืนอุปกรณ์ ซึ่งมีขอบเขตพัฒนาในส่วนของการยืม-คนื
อปุ กรณ์ และการจัดการข้อมูลทเี่ ก่ยี วข้อง ดงั ตอ่ ไปน้ี

ผลการพฒั นาระบบ
ผลจากการพัฒนาระบบการจัดการยืม-คืนอุปกรณ์ กรณีศึกษาฝ่ายเทคโนโลยีสารสนเทศ

วิทยาลัยเทคโนโลยีชลบุรี มีการออกแบบ เข้าสู่ระบบ ออกจากระบบ และแบ่งส่วนการทำงานของ
ระบบออกเปน็ 3 สว่ นไดแ้ ก่

1.การยืม-คืนอปุ กรณ์
2.การจัดการอปุ กรณ์
3.การจัดการบิล
4.แจง้ งาน
5.จองหอ้ งประชุม
ซึง่ มีผลการพฒั นาระบบ ดังนี้
จากการพัฒนาระบบ คณะผจู้ ัดทำได้พัฒนาระบบใหส้ ามารถรองรับการทำงานได้ทุกอุปกรณ์
ไดแ้ กอ่ ปุ กรณ์คอมพวิ เตอร์ โทรศัพท์มือถือ และแทบ็ เล็ต โดยไม่ยดึ ติดกบั ขนาดของหน้าจอท่ีแสดงผล
ข้อมูล และสามารถแสดงผลไดท้ กุ ระบบปฏิบัตกิ าร เชน่ Windows, IOS และAndroid ดงั ภาพท่ี 4.1
SPU CHONBURI

31

ภาพท่ี 4.1 ตัวอย่างการแสดงผลข้อมลู ผา่ นหนา้ จอคอมพิวเตอร์ โทรศพั ทม์ ือถือ และแท็บเลต็
หน้าเข้าสรู่ ะบบ
แสดงหน้าจอสำหรับให้พนักงานเข้าสู่ระบบโดยกรอกชื่อผู้ใช้ของตัวเองให้ถูกต้อง จึงจะ

สามารถเข้าสรู่ ะบบได้ดงั ภาพท่ี 4.2

ภาพท่ี 4.2 แสดงหนา้ เข้าส่รู ะบบ
SPU CHONBURI

32
หน้าออกจากระบบ
แสดงหน้าจอสำหรับให้พนักงานออกจากระบบโดยคลิกที่ Logout จึงจะสามารถออกจาก
ระบบได้ดังภาพท่ี 4.3

ภาพท่ี 4.3 แสดงเมนูออกจากระบบ
1.การยืมอุปกรณ์
หนา้ แสดงอุปกรณ์ทั้งหมดท่ีสามารถยืมได้ โดยพนกั งานจะสามารถใส่รหสั บุคลากรแล้วคลิกท่ี
รปู ภาพของอุปกรณ์ทต่ี ้องการยืมจากน้นั กดยืนยันเพื่อยมื อุปกรณ์

ภาพท่ี 4.4 แสดงหน้ายมื อุปกรณ์
SPU CHONBURI

33
1.1คน้ หาตามหมวดหมู่
หากต้องการค้นหาตามประเภทของอุปกรณ์จากภาพที่ 4.4 สามารถคลิกที่ “เลือกอุปกรณ์”
จากนนั้ อปุ กรณต์ ามประเภทจะแสดงออกมาทางรายช่ืออปุ กรณ์

ภาพที่ 4.5 แสดงตัวเลอื กประเภทของอุปกรณ์
1.2 รายช่ืออปุ กรณ์
รายชอ่ื อุปกรณ์จากภาพที่ 4.4 จะแสดงอุปกรณ์ตา่ ง ๆ ท่มี อี ยูใ่ นสต๊อก และสามารถยมื ได้

ภาพท่ี 4.6 แสดงรายชื่อและรูปภาพของอปุ กรณ์
SPU CHONBURI

SPU CHONBURI 34
1.3 รายการทยี่ ืม
รายการที่ยืมจากภาพที่ 4.4 จะแสดงรายช่ือของอุปกรณ์ที่เพิ่มเขา้ มาหลังจากคลิกทีร่ ปู ภาพ
ในรายชื่ออุปกรณ์รวมทั้งรหัสบุคลากร และอุปกรณ์เพิ่มเติมที่พนักงานสามารถพิมพ์เข้าไปเพื่อยืม
เพิ่มเตมิ ได้

ภาพท่ี 4.7 แสดงรายการทยี่ ืม
2.การจดั การอปุ กรณ์
การจัดการอปุ กรณ์ พนกั งานสามารถ เพ่ิม แกไ้ ข หรอื ลบอุปกรณ์ทีม่ อี ยูไ่ ด้
1.1 เพ่ิมอุปกรณ์
เพิม่ อปุ กรณ์ พนักงานสามารถเพ่ิมอปุ กรณเ์ ข้าในฐานข้อมูลได้ โดยการเข้าไปท่เี มนู จดั การ
อุปกรณ→์ เพมิ่ อปุ กรณ์

ภาพที่ 4.8 แสดงหนา้ เพม่ิ อปุ กรณ์

35
1.2 แก้ไข – ลบ อุปกรณ์
แก้ไข - ลบ อุปกรณ์ พนักงานสามารถเขา้ ไปแก้ไขหรอื ลบอุปกรณ์ในฐานข้อมูลได้ โดยเข้าไป
ทีเมนู จดั การอปุ กรณ์ → แก้ไข - ลบ อปุ กรณ์

ภาพที่ 4.9 แสดงหนา้ แกไ้ ข - ลบ อปุ กรณ์
2.3.1 แก้ไข
เมื่อคลิก แก้ไข จากภาพที่ 4.9 จะเข้าสู่หน้าแก้ไขอุปกรณ์ ข้อมูลในฐานข้อมูลของอุปกรณ์
นนั้ ๆ จะแสดงข้ึนมาให้แก้ไข

ภาพที่ 4.10 แสดงหน้าแก้ไข อุปกรณ์
SPU CHONBURI

SPU CHONBURI 36
2.3.2 ลบ
เมื่อคลิก ลบ จากภาพที่ 4.9 จะมีป๊อปอัพขึ้นมาแสดงขึ้นมาแจ้งเตือนเพื่อให้ยืนยันอีกครัง้ วา่
ต้องการจะลบอุปกรณน์ ั้น หรือไม่

ภาพที่ 4.11 แสดงเมื่อมกี ารลบ อปุ กรณ์
3. การจัดการบิล
การจัดการบลิ หรือใบเสร็จ จะรวบรวมบลิ หรือใบเสรจ็ ต่าง ๆ จากการยืมอุปกรณข์ องบุคลากร
จะแสดงทั้งข้อมูลสถานะ หมายเลขบิล ชื่อผู้ยืม อุปกรณ์ที่ยืม อุปกรณ์เพิ่มเติมที่ยืม วันที่ยืม และผู้ให้
ยืม

ภาพท่ี 4.12 แสดงหน้าบิลหรือใบเสร็จ

37

3.1 ค้นหาบิลหรือใบเสร็จ
ค้นหาบิลหรอื ใบเสรจ็ จาก User id ของบุลคากร จากภาพที่ 4.12

ภาพที่ 4.13 แสดงเมนูคน้ หาบลิ หรอื ใบเสร็จ

3.2 รายการข้อมลู บิล
แสดงรายการบิลหรือใบเสร็จทั้งหมดที่ถูกยืมจากภาพที่ 4.12 จะแสดงทั้งข้อมูลสถานะ
หมายเลขบลิ ชือ่ ผยู้ มื อุปกรณท์ ่ยี ืม อปุ กรณเ์ พิ่มเตมิ ทีย่ ืม วันทีย่ มื และผู้ให้ยืม
SPU CHONBURI
ภาพท่ี 4.14 แสดงหน้ารายการขอ้ มูลบลิ หรอื ใบเสรจ็
3.2.1 สถานะ
สถานะ จากภาพที่ 4.12 เมื่อมีการคืนอุปกรณ์ทั้งหมดในบิลหรือใบเสร็จ จึงจะสามารถคลิก
เปลีย่ นสถานะจาก “กำลงั ยมื ” เป็น “คนื แลว้ ” ได้ เพ่อื เป็นการปิดบิล

ภาพที่ 4.15 แสดงสถานะเมื่อมีการปิดบลิ

SPU CHONBURI 38
3.2.2 อุปกรณท์ ยี่ ืม
อุปกรณ์ที่ยืมจากภาพที่ 4.12 เมื่อต้องการคืนอุปกรณ์ที่ยืมให้คลิกที่ รายการอุปกรณ์ที่ยืม
เมื่อคลิกเข้าไปจะแสดงรายละเอียดของอุปกรณ์ที่ยืมทั้งหมดของบิลหรือใบเสร็จ และสามารถคลิกที่
สถานะเพอื่ คืนอปุ กรณ์ เมื่อคลิกแลว้ จะเปล่ยี นสถานะ จาก “กำลังยมื ”เป็น“คืนแล้ว”

ภาพท่ี 4.16 แสดงรายการอปุ กรณ์ทย่ี มื
3.2.3 อุปกรณ์เพ่ิมเติมท่ียมื
อปุ กรณเ์ พ่ิมเติมที่ยืมจากภาพท่ี 4.12 เมอ่ื ต้องการคืนอปุ กรณ์เพิ่มเติมท่ียืมให้คลิกท่ี รายการ
อุปกรณ์เพิม่ เติมท่ียืม เมื่อคลิกเข้าไปจะแสดงรายละเอียดของอุปกรณ์เพ่มิ เติมท่ยี ืมท้ังหมดของบิลหรือ
ใบเสร็จ และสามารถคลิกที่สถานะเพื่อคืนอุปกรณ์ เมื่อคลิกแล้วจะเปลี่ยนสถานะ จาก “กำลังยืม”
เป็น “คนื แล้ว”

ภาพท่ี 4.17 แสดงรายการอุปกรณเ์ พิ่มเติมทยี่ มื


Click to View FlipBook Version