การพัฒนาระบบคลังสินค้าร้าน 111 (ตองหนึ่ง) การไฟฟ้า Warehouse system development นางสาวภานี เหลาจูม รหัสนักศึกษา 6413013805018 นางสาวหวันนิสรีนย์ ปะดุกา รหัสนักศึกษา 6413013805029 นางสาวฮุสนา มรรคาเขต รหัสนักศึกษา 6413013805046 รายงานเล่มนี้เป็นส่วนหนึ่งของรายวิชา คธ 0415 โครงงานคอมพิวเตอร์เพื่อธุรกิจ หลักสูตรอนุปริญญา สาขาคอมพิวเตอร์ธุรกิจ วิทยาลัยชุมชนสตูล ปีการศึกษา พ.ศ.2565
การพัฒนาระบบคลังสินค้าร้าน 111 (ตองหนึ่ง) การไฟฟ้า Warehouse system development นางสาวภานี เหลาจูม รหัสนักศึกษา 6413013805018 นางสาวหวันนิสรีนย์ ปะดุกา รหัสนักศึกษา 6413013805029 นางสาวฮุสนา มรรคาเขต รหัสนักศึกษา 6413013805046 รายงานเล่มนี้เป็นส่วนหนึ่งของรายวิชา คธ 0415 โครงงานคอมพิวเตอร์เพื่อธุรกิจ หลักสูตรอนุปริญญา สาขาคอมพิวเตอร์ธุรกิจ วิทยาลัยชุมชนสตูล ปีการศึกษา พ.ศ.2565
ข การพัฒนาระบบคลังสินค้าร้าน 111 (ตองหนึ่ง) การไฟฟ้า Warehous system development นางสาวภานี เหลาจูม รหัสนักศึกษา 6413013805018 นางสาวหวันนิสรีนย์ ปะดุกา รหัสนักศึกษา 6413013805029 นางสาวฮุสนา มรรคาเขต รหัสนักศึกษา 6413013805046 โครงงานคอมพิวเตอร์ธุรกิจนี้ได้รับการพิจารณาอนุมัติให้นับเป็นส่วนหนึ่งของ การศึกษาตามหลักสูตรอนุปริญญา สาขาคอมพิวเตอร์ธุรกิจ .......................................................................อาจารย์ประจำหลักสูตร ( นายมนตรี กุมวาปี ) คณะกรรมการสอบโครงงานคอมพิวเตอร์เพื่อธุรกิจ .......................................................................ประธานกรรมการ ( นายมนตรี กุมวาปี ) .......................................................................กรรมการ ( นาวสาวนัจญมา มะแอเคียน ) .......................................................................กรรมการ ( นางสาววาฐินี พรรณราย ) วันที่............เดือน...................................พ.ศ................ ลิขสิทธิ์ของวิทยาลัยชุมชนสตูล ชื่อโครงงานทางคอมพิวเตอร์ธุรกิจ พัฒนาระบบคลังสินค้าร้าน 111 (ตองหนึ่ง) การไฟฟ้า ผู้เขียน นางสาวภานี เหลาจูม นางสาวหวันนิสรีนย์ ปะดุกา นางสาวฮุสนา มรรคาเขต อนุปริญญา สาขาคอมพิวเตอร์ธุรกิจ
ค กิตติกรรมประกาศ โครงานฉบับนี้ เป็นส่วนหนึ่งของหลักสูตรอนุปริญญาบริหารธุรกิจ สาขาคอมพิวเตอร์ธุรกิจ นักศึกษา ชั้นปีที่ 2 รหัสวิชา คธ 0415 โครงานคอมพิวเตอร์ธุรกิจ วิทยาลัยชุมชนสตูล ประจำปีการศึกษา 2565 ขอขอบคุณอาจารย์ที่ปรึกษาโครงงาน อาจารย์วาฐินี พรรณราย, อาจารย์มนตรี กุมวาปี ที่ได้ให้คำแนะนำจน โครงงานสำเร็จสมบูรณ์ ขอขอบคุณอาจารย์วาฐินี พรรณราย ที่เป็นผู้เชี่ยวชาญการประเมิณประสิทธิภาพของ ระบบ และอาจารย์ธีระพงษ์ แสงรักษาวงศ์ ที่ให้คำปรึกษาเกี่ยวกับการเขียนโค้ดเพื่อนำไปทำระบบของ โครงงานในครั้งนี้สำเร็จลุล่วงด้วยดี ขอขอบคุณเจ้าหน้าที่ร้าน 111 (ตองหนึ่ง) การไฟฟ้า ที่มีความเกี่ยวข้อง ทางด้านการให้ข้อมูลของทางร้านและการใช้ตัวโปรแกรมเดิม สำหรับการจัดทำโครงงานเพื่อพัฒนาระบบใน ครั้งนี้ ขอขอบคุณผู้เกี่ยวข้องทุกฝ่ายที่ได้ให้ความช่วยเหลือในด้านต่างๆ ขอขอบคุณครอบครัวผู้ที่ให้กำลังใจ ซึ่ง เป็นส่วนหนึ่งที่ทำโครงงานครั้งนี้สำเร็จ ประโยชน์อันใดที่เกิดจากงานโครงงานนี้ย่อมเป็นผลมาจากความกรุณา ของท่านและร้าน 111 (ตองหนึ่ง) การไฟฟ้าคณะผู้จัดทำโครงงานจึงใคร่ขอขอบคุณมา ณ โอกาสนี้ คณะผู้จัดทำ
ง หัวข้อโครงงาน : การพัฒนาระบบคลังสินค้าร้าน 111 การไฟฟ้า : Warehous system development ผู้จัดทำโครงงาน : นางสาวภานี เหลาจูม รหัสนักศึกษา 6413013805018 : นางสาวหวันนิสรีนย์ ปะดุกา รหัสนักศึกษา 6413013805029 : นางสาวฮุสนา มรรคาเขต รหัสนักศึกษา 6413013805046 หลักสูตร : อนุปริญญา สาขาคอมพิวเตอร์ธุรกิจ วิทยาลัยชุมชนสตูล อาจารย์ที่ปรึกษา : อาจารย์มนตรี กุมวาปี บทคัดย่อ โครงงานเรื่องพัฒนาระบบคลังสินค้าร้าน 111 (ตองหนึ่ง) การไฟฟ้า มีวัตถุประสงค์คือ 1) เพื่อพัฒนา ระบบคลังสินค้าแบบออนไลน์ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า 2) เพื่อประเมินประสิทธิภาพระบบคลังสินค้า แบบออนไลน์ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า 3) เพื่อประเมินความพึงพอใจของผู้ใช้งานระบบคลังสินค้า แบบออนไลน์ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า สถิติที่ใช้ ได้แก่ ค่าเฉลี่ยและส่วนเบี่ยงเบนมาตรฐาน โดยผ่าน การประเมินความพึงพอใจการใช้งานระบบโดยพนักงานและผู้ที่เกี่ยวข้องทางด้านการจัดการคลังสินค้าของร้าน 111 (ตองหนึ่ง) การไฟฟ้า จำนวน 2 ท่าน พบว่าการประเมินความพึงพอใจทั้ง 4 ด้านอยู่ในระดับมาก ด้าน ข้อมูล เท่ากับ (x=4.20,SD=0.55) อยู่ในระดับมาก ด้านความสะดวก สบาย ต่อการใช้งาน เท่ากับ (x=3.67,SD=0.58) อยู่ในระดับมาก ด้านความถูกต้องและแม่นยำของระบบ เท่ากับ (x=4.20,SD=0.55) อยู่ใน ระดับมาก ด้านการออกแบบ เท่ากับ (x=4.11,SD=0.77) อยู่ในระดับมาก ความปลอดภัยของข้อมูลในระบบ เท่ากับ (x=4.33,SD=0.58) อยู่ในระดับมาก และผลประเมินประสิทธิภาพของระบบผู้เชี่ยวชาญ จำนวน 2 ท่าน พบว่าการประเมินประสิทธิภาพระบบทั้ง 3 ด้านอยู่ในระดับมาก ด้านการทำงาน เท่ากับ (x=3.73,SD=0.69) อยู่ในระดับมาก ด้านความง่ายต่อการใช้งาน เท่ากับ (x=4.0,SD=0.72) อยู่ในระดับมาก ด้านประสิทธิภาพ เท่ากับ (x=4.0,SD=0.54) อยู่ในระดับมาก
จ สารบัญ หน้า กิตติกรรมประกาศ...........................................................................................................................................ค บทคัดย่อ..........................................................................................................................................................ง สารบัญตาราง.................................................................................................................................................ช สารบัญรูปภาพ................................................................................................................................................ซ บทที่ 1 บทนำ.................................................................................................................................................1 1.1 ที่มาและความสำคัญ.............................................................................................................................1 1.2 วัตถุประสงค์ของโครงงาน .....................................................................................................................2 1.3 สมมุติฐาน .............................................................................................................................................3 1.4 ขอบเขตของโครงงาน ............................................................................................................................3 1.5 ประโยชน์ที่คาดว่าจะได้รับ ....................................................................................................................3 1.6 นิยามศัพท์เฉพาะ..................................................................................................................................4 1.7 กรอบแนวคิดของโครงงาน ....................................................................................................................4 บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง.........................................................................................................5 2.1 ร้าน 111 (ตองหนึ่ง) การไฟฟ้า..............................................................................................................5 2.2 องค์ประกอบพื้นฐานของการใช้งาน PHP..............................................................................................6 2.3 วงจรพัฒนาระบบ (System Development Life Cycle (SDLC)).....................................................11 2.4 ภาษา HTML.......................................................................................................................................13 2.5 Responsive Website.......................................................................................................................15 2.6 Bootstrap..........................................................................................................................................16 2.7 ภาษา (Cascading Style Sheets : CSS) Css ...................................................................................22 2.8 แผนภาพกระแสข้อมูล (Data Flow Diagram : DFD)........................................................................23 2.9 แบบจำลองความสัมพันธ์(E-R diagram)............................................................................................26 2.10 ระบบจัดการฐานข้อมูล My SQL......................................................................................................35 2.11 Xampp คืออะไร..............................................................................................................................38 2.12 Sublime Text คืออะไร...................................................................................................................39 2.13 Template Admin-LTE 3................................................................................................................40 2.14 การประเมิณระบบ............................................................................................................................43 2.15 เอกสารและงานวิจัยที่เกี่ยวข้อง.........................................................................................................45 บทที่ 3 ขั้นตอนและวิธีการดำเนินงาน .........................................................................................................47 3.1 ศึกษาและรวบรวมข้อมูล.....................................................................................................................47 3.2 การวิเคราะห์ระบบ..............................................................................................................................48
ฉ สารบัญ (ต่อ) หน้า 3.3 การออกแบบฐานข้อมูล.......................................................................................................................50 3.4 การพัฒนาระบบ..................................................................................................................................68 3.5 การเก็บรวบรวมและวิเคราะห์ข้อมูลผลการประเมินระบบ...................................................................88 บทที่ 4 ผลการดำเนินงานโครงงาน..............................................................................................................90 4.1 การทดสอบระบบ................................................................................................................................90 4.2 ผลการประเมิน..................................................................................................................................101 บทที่ 5 สรุปผลและข้อเสนอแนะ................................................................................................................105 5.1 สรุปผลการจัดสร้างโครงงาน .............................................................................................................105 5.2 ปัญหาการจัดสร้างโครงงาน...............................................................................................................105 5.3 ข้อเสนอแนะ.....................................................................................................................................106 5.4 ข้อดีของระบบ...................................................................................................................................106 บรรณานุกรม...............................................................................................................................................107 ภาคผนวก...................................................................................................................................................108 ภาคผนวก ก............................................................................................................................................109 ภาคผนวก ข............................................................................................................................................112 ภาคผนวก ค............................................................................................................................................114 ภาคผนวก ง.............................................................................................................................................118
ช สารบัญตาราง หน้า ตารางที่2.1รายการเขตข้อมูลของเเฟ้มภาพตารางสินค้า................................................................................9 ตารางที่2.2โครงสร้างองค์ประกอบ HTML5.................................................................................................14 ตารางที่2.3สี่ไวยากรณ์.................................................................................................................................15 ตารางที่3.1ตารางประเภทสินค้า..................................................................................................................50 ตารางที่3.2ตารางหน่วยนับสินค้า.................................................................................................................51 ตารางที่3.3ตารางตำแหน่ง...........................................................................................................................51 ตารางที่3.4ตารางสินค้า...............................................................................................................................52 ตารางที่3.5ตารางพนักงาน ..........................................................................................................................53 ตารางที่3.6ตารางการขาย............................................................................................................................54 ตารางที่3.7ตารางรายละเอียดการขาย.........................................................................................................54 ตารางที่3.8ตารางลูกค้า...............................................................................................................................55 ตารางที่3.9ตารางการเคลื่อนไหวสินค้า........................................................................................................55 ตารางที่3.10ตารางนำเข้าสินค้า...................................................................................................................56 ตารางที่3.11ตารางรายละเอียดนำเข้าสินค้า................................................................................................56 ตารางที่4.1ผลการประเมินความพึงพอใจต่อการใช้งานระบบคลังสินค้าของร้าน 111(ตองหนึ่ง)การไฟฟ้า102 ตารางที่4.2ผลการประเมินประสิทธิภาพระบบคลังสินค้าของร้าน 111(ตองหนึ่ง)การไฟฟ้า.....................103
ซ สารบัญรูปภาพ หน้า ภาพที่2.1 หลักการทำงานของPHP................................................................................................................6 ภาพที่2.2 พิมพ์ยูอาร์แอลเข้าสู่หน้าจอโปรแกรม APP SERV...........................................................................7 ภาพที่2.3 ป้อนชื่อผู้ใช้และรหัสผ่าน ................................................................................................................8 ภาพที่2.4ผลการสร้างฐานข้อมูล....................................................................................................................9 ภาพที่2.5สร้างแฟ้มตาราง............................................................................................................................10 ภาพที่2.6 รายละเอียดข้อมูล.........................................................................................................................10 ภาพที่2.7ตัวอย่าง HTML5...........................................................................................................................14 ภาพที่2.8 โครงสร้างที่ถูกพัฒนาแบบ RESPONSIVE WEBSITE........................................................................15 ภาพที่2.9 หน้าฟอร์ม BOOTSTRAPแนวตั้งแบบฟอร์ม (เริ่มต้น).....................................................................18 ภาพที่2.10การสร้างหน้าฟอร์ม BOOTSTRAP แบบแนวตั้ง............................................................................18 ภาพที่2.11 หน้าฟอร์ม BOOTSTRAPแบบอินไลน์..........................................................................................19 ภาพที่2.12การสร้างหน้าฟอร์ม BOOTSTRAP แบบอินไลน์...........................................................................19 ภาพที่2.13 หน้าฟอร์ม BOOTSTRAPแบบแนวนอน.......................................................................................20 ภาพที่2.14การสร้างหน้าฟอร์ม BOOTSTRAP แบบแนวนอน ........................................................................21 ภาพที่2.15แสดงตัวอย่าง DFD......................................................................................................................23 ภาพที่2.16แสดงสัญลักษณ์ที่ใช้ใน DFD ........................................................................................................23 ภาพที่2.17ตัวอย่าง CONTEXT DIAGRAM ของระบบงานขาย........................................................................25 ภาพที่2.18ตัวอย่าง DFD LEVEL0ของระบบงานขาย...................................................................................25 ภาพที่2.19ตัวอย่าง DFD LEVEL1ของ PROCESS4.0ระบบงานขาย............................................................26 ภาพที่2.20เเสดงตัวอย่าง E-R DIAGRAM.....................................................................................................26 ภาพที่2.21เเสดงสัญลักษณ์ที่ใช้ใน E-R DIAGRAM..........................................................................................27 ภาพที่2.22ตัวอย่าง E-R DIAGRAM ตามมาตรฐาน CHEN และ CROW’SFOOT MODEL.................................27 ภาพที่2.23แสดงสัญลักษณ์ของ ENTITY TYPE............................................................................................28 ภาพที่2.24ตัวอย่าง WEAK ENTITY.............................................................................................................29 ภาพที่2.25ตัวอย่าง ATTRIBUTEของ ENTITY “STUDENT”..........................................................................29 ภาพที่2.26ตัวอย่างSIMPLEและ COMPOSITE ATTRIBUTE..........................................................................30 ภาพที่2.27ตัวอย่างSINGLE-VALUED และ MULTI-VALUED ATTRIBUTE......................................................31 ภาพที่2.28รูปแสดงสัญลักษณ์ของ ENTITY..................................................................................................32
ฌ สารบัญรูปภาพ (ต่อ) หน้า ภาพที่2.29สัญลักษณ์ของ ATTRIBUTE.........................................................................................................33 ภาพที่2.30สัญลักษณ์ของRELATIONSHIP.................................................................................................33 ภาพที่2.31ความสัมพันธ์เเบบหนึ่งต่อหนึ่ง....................................................................................................34 ภาพที่2.32ความสัมพันธ์เเบบหนึ่งต่อกลุ่ม....................................................................................................34 ภาพที่2.33ความสัมพันธ์แบบกลุ่มต่อกลุ่ม....................................................................................................34 ภาพที่2.34E-R DIAGRAM ของรูปแบบ CHEN MODEL.....................................................................................35 ภาพที่2.35ตารางเเสดงชนิดของเลขจำนวนเต็ม ...........................................................................................36 ภาพที่2.36ตารางเเสดงชนิดของเลขจำนวนจริง...........................................................................................36 ภาพที่2.37ตารางชนิดของวันที่และเวลา.......................................................................................................36 ภาพที่2.38ตารางแสดงชนิดของTIMESTAMP(M)......................................................................................37 ภาพที่2.39ตารางแสดงชนิดของสตริง..........................................................................................................37 ภาพที่2.40ตารางแสดงชนิดของข้อความและBLOB....................................................................................37 ภาพที่2.41ตารางแสดงชนิดของ ENUM และSET.......................................................................................38 ภาพที่2.42 XAMPPFOR WINDOWS 8.0.28,8.1.17 & 8.2.4.....................................................................39 ภาพที่2.43 หน้าหลักของ ADMINLTEBOOTSTRAPTHEMES....................................................................40 ภาพที่2.44การใช้งาน TABLE......................................................................................................................41 ภาพที่2.45การใช้งาน BUTTONS................................................................................................................41 ภาพที่2.46การใช้งาน FORMS.....................................................................................................................42 ภาพที่2.47การใช้งาน TABLE เพื่อสร้างเป็น INBOX ....................................................................................42 ภาพที่2.48การสร้าง INVOICE.....................................................................................................................43 ภาพที่2.49การสร้างหน้าPROFILE..............................................................................................................43 ภาพที่3.1 ระบบคลังสินค้าเดิมที่ขาดประสิทธิภาพ........................................................................................47 ภาพที่3.2 ระบบงานเดิม ...............................................................................................................................48 ภาพที่3.3 ระบบงานใหม่...............................................................................................................................49 ภาพที่3.4แผนภาพ E-R(ENTITYRELATIONSHIP DIAGRAM: E-R DIAGRAM).........................................57 ภาพที่3.5แผนภาพกระแสข้อมูลระดับ 0(DATA FLOW DIAGRAM LEVEL0)..........................................59 ภาพที่3.6แผนภาพการไหลเวียนของข้อมูลระดับ 1(DATA FLOW DIAGRAM LEVEL 1)..........................61 ภาพที่3.7แผนภาพการไหลเวียนของข้อมูลระดับ 1(DATA FLOW DIAGRAM LEVEL1 OF PROCESS2ระบบ จัดการข้อมูลพื้นฐาน )............................................................................................................................63
ญ สารบัญรูปภาพ (ต่อ) หน้า ภาพที่3.8แผนภาพการไหลเวียนของข้อมูลระดับ 1(DATA FLOW DIAGRAM LEVEL 1 OF PROCESS 3ระบบ จัดการนำเข้าสินค้า)...............................................................................................................................64 ภาพที่3.9แผนภาพการไหลเวียนของข้อมูลระดับ 1(DATA FLOW DIAGRAM LEVEL 1 OF PROCESS 4ระบบ จัดการข้อมูลการขาย)...........................................................................................................................66 ภาพที่3.10สร้างฐานข้อมูลตารางประเภทสินค้า (PRODUCT_TYPE).................................................................68 ภาพที่3.11สร้างฐานข้อมูลตารางหน่วยนับสินค้า (PRODUCT_ UNIT) .............................................................69 ภาพที่3.12สร้างฐานข้อมูลตารางตำแหน่ง (POSITION) ..................................................................................70 ภาพที่3.13สร้างฐานข้อมูลตารางสินค้า (PRODUCT) ......................................................................................71 ภาพที่3.14สร้างฐานข้อมูลตารางพนักงาน (STAFF).......................................................................................72 ภาพที่3.15สร้างฐานข้อมูลตารางการขาย(SALE)..........................................................................................73 ภาพที่3.16สร้างฐานข้อมูลตารางการขาย(SALE) (ต่อ)..................................................................................74 ภาพที่3.17สร้างฐานข้อมูลตารางลูกค้า (CUSTOMER) ....................................................................................75 ภาพที่3.18สร้างฐานข้อมูลตารางนำเข้าสินค้า (PRODUCT_RECEIVE) ..............................................................76 ภาพที่3.19 หน้าLOGIN เข้าสู่ระบบ ...............................................................................................................77 ภาพที่3.20 หน้าหลักของผู้ดูแลระบบ............................................................................................................78 ภาพที่3.21 หน้าฟอร์มนำเข้าสินค้า...............................................................................................................78 ภาพที่3.22 หน้ารายการนำเข้าสินค้า............................................................................................................79 ภาพที่3.23 หน้าฟอร์มสินค้า.........................................................................................................................79 ภาพที่3.24 หน้ารายการสินค้า......................................................................................................................80 ภาพที่3.25 หน้าฟอร์มประเภทสินค้า............................................................................................................80 ภาพที่3.26หน้ารายการประเภทสินค้า..........................................................................................................81 ภาพที่3.27 หน้าฟอร์มหน่วยนับสินค้า...........................................................................................................81 ภาพที่3.28 หน้ารายการหน่วยนับสินค้า........................................................................................................82 ภาพที่3.29 หน้าฟอร์มลูกค้า.........................................................................................................................82 ภาพที่3.30 หน้ารายการลูกค้า ......................................................................................................................83 ภาพที่3.31 หน้าฟอร์มพนักงาน ....................................................................................................................83 ภาพที่3.32 หน้ารายการพนักงาน..................................................................................................................84 ภาพที่3.33 หน้าฟอร์มตำแหน่ง.....................................................................................................................84 ภาพที่3.34 หน้ารายการตำแหน่ง..................................................................................................................85 ภาพที่3.35 หน้าหลัก.....................................................................................................................................86 ภาพที่3.36 หน้าการขายสินค้า......................................................................................................................86
ฎ สารบัญรูปภาพ (ต่อ) หน้า ภาพที่3.37 หน้าการขายสินค้าทั้งหมด..........................................................................................................87 ภาพที่3.38 หน้างานการขายสินค้า................................................................................................................87 ภาพที่3.39ผลการประเมินความพึงพอใจในการใช้งานระบบ........................................................................88 ภาพที่3.40ผลการประเมินประสิทธิภาพของระบบ ......................................................................................89 ภาพที่4.1 หน้าLOGIN เข้าสู่ระบบ .................................................................................................................90 ภาพที่4.2 หน้าหลักผู้ดูแลระบบ....................................................................................................................91 ภาพที่4.3 หน้าฟอร์มข้อมูลนำเข้าสินค้า........................................................................................................91 ภาพที่4.4 หน้ารายการนำเข้าสินค้า...............................................................................................................92 ภาพที่4.5 หน้าฟอร์มข้อมูลสินค้า..................................................................................................................92 ภาพที่4.6 หน้ารายการสินค้า ........................................................................................................................93 ภาพที่4.7 หน้าฟอร์มประเภทสินค้า..............................................................................................................93 ภาพที่4.8 หน้ารายการประเภทสินค้า...........................................................................................................94 ภาพที่4.9 หน้าฟอร์มหน่วยนับสินค้า.............................................................................................................94 ภาพที่4.10 หน้ารายการหน่วยนับสินค้าทั้งหมด............................................................................................95 ภาพที่4.11 หน้าฟอร์มข้อมูลลูกค้า................................................................................................................95 ภาพที่4.12 หน้ารายการลูกค้า ......................................................................................................................96 ภาพที่4.13 หน้าฟอร์มข้อมูลพนักงาน ...........................................................................................................96 ภาพที่4.14 หน้ารายการพนักงาน..................................................................................................................97 ภาพที่4.15 หน้าฟอร์มข้อมูลตำแหน่ง ...........................................................................................................97 ภาพที่4.16 หน้ารายการตำแหน่ง..................................................................................................................98 ภาพที่4.17 หน้าหลักการขาย........................................................................................................................98 ภาพที่4.18 หน้าฟอร์มการขาย......................................................................................................................99 ภาพที่4.19 หน้ารายการการขาย.................................................................................................................100
1 บทที่ 1 บทนำ 1.1 ที่มาและความสำคัญ ระบบสารสนเทศเพื่อการบริหารการจัดการนั้นเป็นระบบที่เกี่ยวกับการนำข้อมูลที่ได้จากการเก็บ รวบรวมข้อมูลขั้นพื้นฐานมาประมวลผลให้เป็นสารสนเทศที่มีคุณค่าต่อผู้รับมาใช้ในการวางแผน และการ ตัดสินใจของผู้บริหารระดับสูงขององค์กรขึ้นไป เพื่อนำมาใช้ในการสนับสนุนการวางแผน และการตัดสินใจของ ผู้บริหาร นอกจากนี้ ยังช่วยพนักงานในการวิเคราะห์ปัญหาอีกด้วย ความจริงระบบสารสนเทศเพื่อการจัดการนี้ สามารถที่จะดำเนินการโดยไม่ต้องอาศัยคอมพิวเตอร์เข้ามาช่วย แต่เนื่องจากความสามารถของคอมพิวเตอร์ใน การประมวลผลข้อมูลได้จำนวนมากในเวลาอันรวดเร็ว ดังนั้นในปัจจุบันจึงมักจะประมวลผลด้วยคอมพิวเตอร์ (สุภัตรา ทรัพย์อุปกรณ.2562) เนื่องด้วยสารสนเทศถือเป็นจุดอ่อนที่สำคัญของฝ่ายบริหารในศตวรรษที่ผ่านมา ทั้งนี้ด้วยเหตุผลหลาย ประการ เช่น ผู้บริหารระดับสูงที่ยังไม่ค่อยเห็นความสำคัญของสารสนเทศ แต่จะให้ความสำคัญและสนใจใน การปฏิบัติงานประจำ ในอนาคตแนวโน้มของกระแสการบริหารระบบสารสนเทศทั่วทั้งองค์กร (Total Information Management System) จะทวีความสำคัญมากยิ่งขึ้น ดังนั้นการบริหารก็ต้องปรับตัวเพื่อให้ทัน กับสารสนเทศด้านอื่นๆ ขององค์กร การแข่งขันทางธุรกิจต้องใช้เทคโนโลยีสารสนเทศและเทคโนโลยีเป็น เครื่องมือสร้างความได้เปรียบกันมากยิ่งขึ้น ดังนั้น ในยุคที่เปิดเสรีทางการค้าภายใต้การแข่งขันระดับโลกขีด ความสามารถในการลดต้นทุนด้านโลจิสติกส์ จึงมีส่วนสำคัญต่อการอยู่รอดของธุรกิจ กล่าวได้ว่า การที่จะนำ ระบบโลจิสติกส์มาประยุกต์ใช้ในองค์กรให้ได้เห็นผลได้ชัดเจนที่สุดก็ต้องมุ่งไปที่การลดสินค้าคงเหลือ โดยควร จัดเป็นแผนแม่แบบ ที่เรียกว่า Logistics Matrix เพื่อให้สามารถควบคุมปริมาณสินค้าคงคลังให้มีปริมาณที่ เหมาะสมและประหยัดต้นทุนในการเก็บรักษา ซึ่งทั้งหมดนี้จะต้องอาศัยการจัดการที่เรียกว่า Just In Time Value คือทุกหน่วยงานภายในองค์กรต่างมีการบริการแบบทันเวลา มาใช้ในกระบวนการที่เกี่ยวข้อง กับปัจจัยดังนี้ ประการแรก Material Plan คือ วางแผนด้านวัตถุดิบและสินค้าคงเหลือ ซึ่งเป็นเรื่องที่เกี่ยวกับ การไหลลื่นของสินค้าให้สัมพันธ์กับเวลาที่จะใช้ คือ เกี่ยวข้องกับอรรถประโยชน์ของเวลา (Time Utility) ซึ่งจะ เกี่ยวข้องกับการจัดการปฏิสัมพันธ์กับคู่ค้า ที่เรียกว่า SRM (Suppliers RelationshipManagement) คือ การจัดการ การตรงต่อเวลาในการส่งมอบของคู่ค้าในโซ่อุปทาน ประการที่สอง Production Plan ซึ่งจะ เกี่ยวข้องกับการวางแผนระบบการผลิต โดยการผลิตสมัยใหม่ ได้เปลี่ยนแนวความคิดจากการผลิตที่ประหยัด ต่อขนาด (Economies of Scale) มาเป็นลักษณะการผลิตแบบประหยัดต่อความเร็ว (Economies of Speed) จะทำการผลิตเมื่อสินค้ามี Demand หรือความต้องการ และเป็นการผลิตเพื่อการส่งมอบเท่านั้นประการที่สาม คลังสินค้าควรออกแบบให้สัมพันธ์กับประบวนการผลิต โดยให้มีลักษณะเป็น Cross Dock คือ มีช่องทาง สำหรับวัตถุดิบที่เข้าและมีช่องทางที่ต่อเนื่องกับกระบวนการผลิตแบบ Flow Production ไปจนถึงประตูที่จะ ส่งมอบสินค้าสำเร็จรูปสิ่งนี้ถือเป็นกลยุทธ์ที่สำคัญต่อการเข้าไปมีบทบาทในการบริหารธุรกิจ โดยไม่น้อยหน้า หน่วยงานอื่นๆความสามารถทางเทคโนโลยีในการจัดทำระบบสารสนเทศด้านการบริหารเป็นเรื่องที่ไม่ยากนัก
2 และสามารถเรียนทันกันได้ แต่ความสามารถในการนำเสนอสารสนเทศที่ได้จากระบบไปใช้เป็นเรื่องสำคัญที่สุด เพราะหมายถึงคุณค่าของสารสนเทศที่มีอยู่ว่ามีค่ามากน้อยเพียงใด สารสนเทศบางตัวอาจจะลดค่าใช้จ่ายของ องค์กร ธุรกิจได้เป็นล้าน ๆ บาทก็ได้ สามารถลดความเสี่ยงในการดำเนินธุรกิจได้ บางครั้งสิ่งเหล่านี้มีค่า มากกว่าการคำนวณด้วยตัวเงิน รัตนพันธ์ เผ่าจินดา (2014) ได้ศึกษาพบว่า ระบบสารสนเทศเพื่อการบริหาร การจัดการนั้นเป็นระบบที่เกี่ยวกับการนำข้อมูลที่ได้จากการเก็บรวบรวมข้อมูลขั้นพื้นฐานมาประมวลผลให้เป็น สารสนเทศที่มีคุณค่าต่อผู้รับมาใช้ในการวางแผน และการตัดสินใจของผู้บริหารระดับสูงขององค์กรขึ้นไป ร้าน 111 (ตองหนึ่ง)การไฟฟ้า ขายสินค้าประเภทเครื่องใช้ไฟฟ้าและก่อสร้างหลากหลายประเภทเป็นธุรกิจขนาดเล็ก กิจการคนเดียวตั้งอยู่ สามแยกนิคม ม.10 ต.ทุ่งนุ้ย อ.ควนกาหลง จ.สตูล การดำเนินกิจการภายในร้านจะมี พนักงานประจำตำแหน่งในแต่ละจุดคือจุดรับลูกค้าหน้าร้าน จุดชำระเงิน จุดพนักงานขาย ซึ่งจุดพนักงานขาย จะเป็นคนที่ทำการขายสินค้าให้แก่ลูกค้าและออกใบเสร็จรับเงินให้กับลูกค้า ทางร้านประสบปัญหาเกี่ยวกับการ จัดสินค้าคงคลังคือการไม่บันทึกบิลขายและไม่ตัดสินค้าออกจากสต๊อกทำให้สต๊อกสินค้าไม่ถูกต้องตามความ เป็นจริง ทำให้เกิดความผิดพลาดในการขายสินค้าในครั้งต่อไปตลอดจนทำให้ทางร้านขาดความน่าเชื่อถือและ เกิดความล่าช้าในการตรวจสอบอีกทั้งโปรแกรมที่ใช้งานใน เป็นรูปแบบออฟไลน์ ซึ่งมีการเขียนโปรแกรมขึ้นโดย โปรแกรมเมอร์ ภายในโปรแกรมสามารถออกบิลขาย นำสินค้าเข้าสต๊อก ตัดสต๊อกสินค้าออก เพิ่ม แก้ไขข้อมูล ลูกค้า เพิ่ม แก้ไขรายละเอียดสินค้า ซึ่งสามารถทำได้ทุกอย่างในโปรแกรมเดียว เมื่อจะมีการตรวจสอบสต๊อก ต้องตรวจสอบภายในเครื่องที่มีการติดตั้งโปรแกรมไว้เท่านั้น ผู้บริหารหรือเจ้าของธุรกิจสามารถตรวจสอบ ข้อมูลการขายและสต๊อกสินค้าได้จากเครื่องนี้เท่านั้น ทำให้เกิดความล่าช้าไม่สะดวกในการบริหารจัดการต่างๆ จากปัญหาดังกล่าว คณะผู้จัดทำจึงมีแนวคิดในการพัฒนาระบบจัดการคลังสินค้าในร้าน111(ตองหนึ่ง) การไฟฟ้า เพื่อนำระบบสารสนเทศเข้ามาช่วยในเรื่องการบริหารจัดการคลังสินค้าแบบออนไลน์ เพื่อเข้ามาช่วย ในการอำนวยความสะดวกในการบริหารจัดการสินค้าคงคลังและได้ระบบการจัดเก็บข้อมูลสต๊อกสินค้าที่มี ประสิทธิภาพมากยิ่งขึ้น ทำให้ผู้บริหารเจ้าของธุรกิจสามารถตรวจสอบข้อมูลการเข้าออกสินค้าและทำให้ง่ายต่อ การพิจารณาสั่งซื้อสินค้าเข้ามาสต๊อกต่อไปได้อีกทั้งสามารถตรวจสอบสินค้าคงคลังและการเข้า-ออกสินค้าได้ ทุกที่ที่มีอุปกรณ์ที่เชื่อมต่ออยู่กับInternet ตลอดจนมีการแบ่งกลุ่มผู้ใช้งานที่ชัดเจนเพื่อให้ง่ายต่อการบริหาร จัดการต่อไป ดังนั้นการนำเทคโนโลยีสารสนเทศมามีส่วนช่วยในการปฏิบัติงานเพื่อเป็นการพัฒนาระบบงาน และมีประโยชน์สำหรับผู้มีสิทธิ์เข้าถึงในการใช้งานโปรแกรม โดยจะสร้างทางเลือกใหม่ๆในการปฏิบัติงานเพื่อ เป็นการพัฒนาระบบงานเดิมให้ทันสมัยและสะดวกสบายมากยิ่งขึ้น 1.2 วัตถุประสงค์ของโครงงาน 1.2.1 เพื่อพัฒนาระบบคลังสินค้าแบบออนไลน์ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า 1.2.2 เพื่อประเมินประสิทธิภาพระบบคลังสินค้าแบบออนไลน์ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า 1.2.3 เพื่อประเมินความพึงพอใจของผู้ใช้งานระบบคลังสินค้าแบบออนไลน์ของร้าน 111 (ตองหนึ่ง) การ ไฟฟ้า
3 1.3 สมมุติฐาน 1.3.1 ระบบคลังสินค้าแบบออนไลน์ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า มีประสิทธิภาพอยู่ในเกณฑ์ดี 1.3.2 ผู้ใช้งานระบบคลังสินค้าแบบออนไลน์ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า มีความพึงพอใจอยู่ใน ระดับมาก 1.4 ขอบเขตของโครงงาน 1.4.1 ขอบเขตด้านประชากรและกลุ่มตัวอย่าง 1) ประชากร ได้แก่ พนักงานผู้ปฏิบัติงานและผู้ที่เกี่ยวข้องในการดำเนินงานระบบคลังสินค้า ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า จำนวน 3 คน 2) กลุ่มตัวอย่าง ได้แก่ พนักงานผู้ปฏิบัติงานและผู้ที่เกี่ยวข้องในการดำเนินงานระบบ คลังสินค้าของร้าน 111 (ตองหนึ่ง) การไฟฟ้า ประกอบด้วย ผู้ดูแลระบบ จำนวน 1 คน พนักงานขาย จำนวน 2 คน โดยใช้วิธีสุ่มตัวอย่างเจาะจง 1.4.2 ขอบเขตด้านเนื้อหา แบ่งกลุ่มผู้ใช้งานออกเป็น 2 กลุ่ม 1) ผู้ดูแลระบบ สามารถใช้งานได้ดังนี้ - จัดการข้อมูลประเภทสินค้าได้ - สามารถจัดการหน่วยนับสินค้าได้ - สามารถจัดการรายละเอียดสินค้าได้ - สามารถจัดการข้อมูลนำเข้าสินค้าได้ - สามารถจัดการสิทธิ์ในการเข้าใช้งานได้ - สามารถดูรายการนำเข้าสินค้าได้ 2) พนักงานขาย สามารถใช้งานได้ดังนี้ - สามารถเพิ่ม ลบ แก้ไข ข้อมูลการขายสินค้าได้ 1.4.3 ขอบเขตด้านระยะเวลา โครงงานเรื่องนี้ทำการประเมินประสิทธิภาพระบบคลังสินค้าแบบออนไลน์ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า ในช่วงวันที่ 1 พฤษภาคม 2566 ถึงวันที่ 27 พฤษภาคม 2566 1.5 ประโยชน์ที่คาดว่าจะได้รับ 1.4.1 ได้ระบบคลังสินค้าแบบออนไลน์ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า 1.4.2 ได้ระบบการจัดเก็บข้อมูลสต๊อกสินค้าที่มีประสิทธิภาพมากยิ่งขึ้นและความถูกต้องของข้อมูล 1.4.3 อำนวยความสะดวกในการบริหารจัดการสต๊อกสินค้ามากยิ่งขึ้น 1.4.4 สร้างความพึงพอใจให้กับลูกค้าในการให้บริการที่รวดเร็วขึ้น
4 1.6 นิยามศัพท์เฉพาะ 1.7.1 ระบบคลังสินค้า หมายถึง ระบบคลังสินค้าแบบออนไลน์ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า 1.7.2 ประสิทธิภาพระบบคลังสินค้า หมายถึง ประสิทธิภาพระบบคลังสินค้าแบบออนไลน์ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า 1.7.3 ความพึงพอใจของผู้ใช้งาน หมายถึง ความพึงพอใจของผู้ใช้งานระบบคลังสินค้าแบบออนไลน์ของ ร้าน 111 (ตองหนึ่ง) การไฟฟ้า 1.7 กรอบแนวคิดของโครงงาน ตัวแปรต้น ตัวแปรตาม ระบบคลังสินค้าแบบออนไลน์ของ ร้าน 111 (ตองหนึ่ง) การไฟฟ้า ประสิทธิภาพระบบคลังสินค้าแบบออนไลน์ของ ร้าน 111 (ตองหนึ่ง) การไฟฟ้า ความพึงพอใจของผู้ใช้งานระบบคลังสินค้าแบบ ออนไลน์ของร้าน 111 (ตองหนึ่ง) การไฟฟ้า
5 บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง ในการจัดทำโครงงานเรื่อง การพัฒนาระบบคลังสินค้าร้าน 111 (ตองหนึ่ง) การไฟฟ้าผู้จัดทำได้ศึกษา ค้นคว้าเอกสารเเละงานวิจัยที่เกี่ยวข้อง ดังต่อไปนี้ 2.1 ร้าน 111 (ตองหนึ่ง) การไฟฟ้า 2.2 เเนวคิดเเละหลักการเกี่ยวกับองค์ประกอบพื้นฐานของการใช้งาน PHP 2.3 เเนวคิดเเละหลักการเกี่ยวกับวงจรพัฒนาระบบ (SystemDevelopment Life Cycle (SDLC) 2.4 เเนวคิดเเละหลักการเกี่ยวกับ HTML5 2.5 เเนวคิดเเละหลักการเกี่ยวกับ Responsive Website 2.6 เเนวคิดเเละหลักการเกี่ยวกับ Bootstrap 2.7 เเนวคิดเเละหลักการเกี่ยวกับภาษา (Cascading Style Sheets : CSS) Css 2.8 เเนวคิดเเละหลักการเกี่ยวกับแผนภาพกระแสข้อมูล (Data Flow Diagram : DFD) DFD 2.9 เเนวคิดเเละหลักการเกี่ยวกับแบบจําลองความสัมพันธ์ (E-R diagram) 2.10 เเนวคิดเเละหลักการเกี่ยวกับระบบจัดการฐานข้อมูล (MySQL) 2.11 เเนวคิดเเละหลักการเกี่ยวกับ Xampp 2.12 แนวคิดและหลักการเกี่ยวกับ Sublime Text 2.13 แนวคิดและหลักการเกี่ยวกับ Template Admin – LTE 2.14 เเนวคิดเเละหลักการเกี่ยวกับการวิเคราะห์และประเมินระบบ (Black box/ White box) 2.15 เอกสารและงานวิจัยที่เกี่ยวข้อง 2.1 ร้าน 111 (ตองหนึ่ง) การไฟฟ้า ร้าน 111 (ตองหนึ่ง) การไฟฟ้า ตั้งอยู่ ม.10 ต.ทุ่งนุ้ย อ.ควนกาหลง จ.สตูล จำหน่ายเกี่ยวกับอุปกรณ์ไฟฟ้า ก่อสร้าง เป็นต้น ซึ่งทางร้านจะจำหน่ายให้แก่ลูกค้าทั่วไปบ้างก็มีช่างรับเหมางานก่อสร้าง ทางองค์กร หน่วยงาน ต่างๆ ก็มาซื้อของที่ร้าน ทำให้อำนวยความสะดวกสบายให้แก่ลูกค้า ไม่ต้องเดินทางไปซื้อของตาม ห้างสรรพสินค้าที่ห่างไกลจากบ้าน ดังนั้นทางร้านต้องมีระบบการจัดการที่ดีเพื่ออำนวยความสะดวกให้แก่ลูกค้า ซึ่งทางร้านจะพบปัญหาระบบคลังสินค้าเดิมไม่มีประสิทธิภาพ ไม่มีการแยกหมวดหมู่สินค้าที่ชัดเจน สินค้าใน คลังไม่ตรงกับสินค้าในระบบ ทำให้เกิดความผิดพลาดต่อลูกค้าเมื่อลูกค้าต้องการสินค้าแต่ไม่มีสินค้าจริงให้ ลูกค้ายังทำให้เกิดความล่าช้าในการทำงานเนื่องจากต้องไปค้นหาสินค้าในคลังว่าตั้งอยู่ตำแหน่งไหนทำให้ เสียเวลาทั้งในการปฏิบัติงานและเสียเวลาลูกค้าในการมาซื้อของต้องมานั่งรอสินค้า การพัฒนาระบบคลังสินค้าในร้าน 111 (ตองหนึ่ง) การไฟฟ้า สำหรับการทำระบบสต๊อกสินค้าให้ตรง กับสินค้าคงคลัง เพื่อช่วยให้การจำหน่ายสินค้าง่ายและรวดเร็วอีกทั้งไม่ก่อให้เกิดความล่าช้าในการทำงาน โดย ระบบจะช่วยเพิ่มประสิทธิภาพในการทำงานของระบบคลังสินค้าสามารถนำไปใช้ในส่วนการทำงานต่างๆต่อไป
6 2.2 องค์ประกอบพื้นฐานของการใช้งาน PHP PHP ย่อมากจาก Personal Home Page ซึ่งเป็นภาษาสคริปต์ที่ถูกฝังไว้ในเว็บเพจที่สร้างด้วยภาษา HTML โดยเว็บเพจที่มีสคริปต์ PHP แทรกอยู่นั่นจะทำงานที่เว็บเซิร์ฟเวอร์ PHP ถือเป็นภาษาสคริปต์ที่ทำงานที่เว็บเซิร์ฟเวอร์ (Server Side Script) นั่นคือมันจะถูกแปลผลการ ทำงานที่เว็บเซิร์ฟเวอร์ก่อน แล้วจึงส่งผลการทำงานที่เป็น HTML ธรรมดามาที่บราวเซอร์ของผู้ใช้งาน(วรรณิกา เนตรงาม.2544) ภาพที่ 2.1 หลักการทำงานของ PHP 2.2.1 รูปแบบการฝังสคริปต์ PHP ลงในเอกสาร เป็นรูปแบบที่ได้แสดงในตัวอย่างที่ผ่านมา ซึ่งตลอดหนังสือเล่มนี้จะใช้รูปแบบนี้ในการอธิบาย ตัวอย่างเช่น แบบที่ 2 : กำหนดให้รู้จักสคริปต์ PHP ด้วย Tag <script><\script> เป็นการบอกให้เว็บเซิร์ฟเวอร์ทราบว่าเว็บเพจที่ผู้ใช้เรียกใช้งานนั้นมีสคริปต์แทรกอยู่ โดยสคริปต์ที่ แทรกนั้นเป็น PHP ตัวอย่างเช่น แบบที่ 3 : ครอบส่วนที่เป็นสคริปต์ด้วยเครื่องหมาย <? และ ?> รูปแบบนี้จะทําได้ก็ต่อเมื่อมีการกําหนดให้ short tag เปิดใช้งานอยู่ (ทําได้โดยการกําหนดshort_open_tag ในเอกสาร config มีค่าความเป็นจริงเป็น True )ตัวอย่างเช่น <?php echo “This is also simple, do like \n”; ?> <script language = “php”> echo “some editors (like forntpage) don’t like processing instructions\n; <\script> <? echo “this is the simple way\n”; ?>
7 แบบที่ 4 : ใช้ Tag ของ ASP วิธีการนี้จะคล้ายกับวิธีที่ 3 นั่นคือ จะต้องมีการกําหนด asp_tag ในเอกสาร config เสียก่อน จึงจะ สามารถใช้ได้ (ซึ่งจะใช้ได้ใน php เวอร์ชัน 3.0.4 เท่านั้น) ตัวอย่างเช่น (วรรณิกา เนตรงาม,2544:หน้า 33-34) 2.2.2 ชนิดข้อมูล และชนิดตัวแปร ใน PHP ในการสร้างเว็บเพจเราอาจต้องทํางานร่วมกับข้อมูลหลายๆ รูปแบบทั้งตัวเลข,ตัวอักษร,ข้อความ หรือ ข้อมูลชนิดต่างๆ ซึ่งแต่ละชนิดจะมีความเหมาะสมไปคนละอย่าง สําหรับชนิดข้อมูลที่ใช้งานกับ PHP ประกอบ ไปด้วย 1) จํานวนเต็ม (Integer) 2) เลขจุดทศนิยม (Floating Point) 3) ข้อความ (String) 4) อาร์เรย์ (Array) 5) ออบเจ็กต์ (Object) 2.2.3 การใช้งาน phpMyAdmin phpMyAdminเป็นโปรแกรมสําหรับใช้บริหารจัดการฐานข้อมูล MySQL ที่ถูกพัฒนาขึ้นด้วยภาษา PHP เพื่อเพิ่มประสิทธิภาพในการบริหารจัดการฐานข้อมูลได้สะดวกและรวดเร็ว โดยที่ผู้พัฒนาไม่จําเป็นต้องรู้ คําสั่งภาษา MySQL มากนัก เช่น สร้างฐานข้อมูล สร้างตาราง เพิ่ม ลบ หรือ แก้ไขข้อมูล การใช้งานโปรแกรม phpMyAdmin ที่ควรทราบในเบื้องต้นมีดังนี้ (ธัชกร วงษ์คําชัย.2558) 1) การเข้าใช้งาน phpMyAdmin การเข้าใช้งานโปรแกรม phpMyAdmin มีขั้นตอนดังนี้ เปิดเว็บไซต์เบราว์เซอร์จากนั้นพิมพ์ URL ลงในช่องเลขที่อยู่บนเว็บไซต์เบราว์เซอร์จะเข้าสู่ หน้าจอโปรแกรม AppServ (ในที่นี้ใช้ Google Chrome) โดยปฏิบัติตามลําดับหมายเลขที่กําหนด ดังภาพ 2.2 ภาพที่ 2.2 พิมพ์URL เข้าสู่หน้าจอโปรแกรม AppServ <% echo “you may optionally use ASP-Style tags”;%>
8 คลิกที่ phpMyAdmin Database Manager และจะปรากฎหน้าจอสำหรับป้อนชื่อผู้ใช้(Username) และรหัสผ่าน (Password) (ใช้ชื่อผู้ใช้และรหัสผ่านเดียวกันกับขั้นตอนการติดตั้งโปรแกรม AppServ) และคลิกที่ ปุ่ม “เข้าสู่ระบบ” เพื่อเข้าใช้งาน โดยปฏิบัติตามลำดับหมายเลขที่กำหนดดังภาพ 2.3 ภาพที่ 2.3 ป้อนชื่อผู้ใช้และรหัสผ่าน 2) การบริหารจัดการฐานข้อมูล MySQL ด้วย phpMyAdmin การบริหารจัดการฐานข้อมูล MySQL ในโปรแกรม phpMyAdmin ที่ควรมีดังนี้ การสร้างฐานข้อมูลใหม่ กําหนดให้สร้างฐานข้อมูลใหม่ชื่อdbshopด้วยโปรแกรม phpMyAdmin แสดงได้ดังตัวอย่างต่อไปนี้ ตัวอย่างที่ 1 แสดงการสร้างฐานข้อมูล dbshop - เปิดใช้งานโปรแกรม phpMyAdmin จากนั้นกรอกชื่อฐานข้อมูลที่ต้องการสร้างในช่อง “สร้าง ฐานข้อมูลใหม่” - โปรแกรม phpMyAdmin จะทำการสร้างฐานข้อมูลตามที่กำหนดและแจ้งผลการสร้าง ฐานข้อมูล ดังภาพ 2.4
9 ภาพที่ 2.4 ผลการสร้างฐานข้อมูล หมายเหตุ : การสร้างฐานข้อมูลใหม่จะไม่สามารถใช้ชื่อฐานข้อมูลซ้ำกับชื่อฐานข้อมูลที่มีอยู่แล้วและควรตั้งชื่อให้ สอดคล้องกับระบบงานที่ต้องการพัฒนา เพื่อการจดจําที่ง่ายเมื่อย้อนเวลากลับมาแก้ไข การสร้างแฟ้มตาราง หลังจากทำการสร้างฐานข้อมูล dbshop ดังกล่าวข้างต้นแล้วนั้นจะเป็นเพียงฐานข้อมูลเปล่าซึ่งยังไม่มีแฟ้ม ตาราง (Table File) ในที่นี้กำหนดให้สร้างแฟ้มตารางสินค้า (tbl_product) แสดงรายละเอียด ดังที่ 2.1 (ธัชกร วงษ์คำชัย.2558) เขตข้อมูล ชนิด/ขนาดข้อมูล ความหมาย PK FK หมายเหตุ Pro_id Pro_name Pro_detail Pro_price_cost Pro_price_sale Pro_qty Pro_unit Pro_img dateinsert Int (11) Varchar (100) Text Float (10,2) Float (10,2) Int (11) Varchar (100) Varchar (100) timestamp รหัสสินค้า ชื่อสินค้า รายละเอียดสินค้า ราคาต้นทุนสินค้า ราคาขายสินค้า จำนวนสินค้า หน่วยสินค้า รูปภาพสินค้า วันที่เพิ่มสินค้า yes Auto_increment Current_timestamp ตารางที่ 2.1 รายการเขตข้อมูลของเเฟ้มภาพตารางสินค้า การสร้างเเฟ้มตารางสินค้าในฐานข้อมูล dbshop ด้วยโปรแกรม phpMyAdmin แสดงได้ดังตัวอย่าง ต่อไปนี้ ตัวอย่างที่ 2 แสดงการสร้างแฟ้มตารางสินค้าในฐานข้อมูล dbshop
10 - เปิดใช้งานโปรแกรม phpMyAdmin จากนั้นเลือกฐานข้อมูล db_shop ที่ต้องการสร้างแฟ้ม ตาราง จากนั้นกำหนดชื่อแฟ้มตารางและจำนวนของเขตข้อมูล(Field) จากนั้นคลิกปุ่ม “ลงมือ” โดยปฏิบัติตาม หมายเลขที่กำหนด ดังภาพ 2.5 (ชื่อแฟ้มตารางและจำนวนเขตของข้อมูลดังรายละเอียดในตารางที่ 1) ภาพที่ 2.5 สร้างแฟ้มตาราง - ปรากฏหน้าจอสำหรับให้กรอกชื่อเขตข้อมูลชนิดข้อมูลที่เก็บ ขนาดข้อมูล และรายละเอียดอื่นๆ ที่เกี่ยวข้อง ดังภาพ 2.6 ภาพที่ 2.6 รายละเอียดข้อมูล จากภาพอธิบายในส่วนต่างๆ ได้ดังนี้ 1) เขตข้อมูล สำหรับใส่ชื่อเขตข้อมูล 2) ชนิด สำหรับเลือกชนิดของข้อมูลที่ต้องการเก็บในเขตข้อมูลนั้น 3) ความยาว/เซต สำหรับกำหนดขนาดของข้อมูล 4) การเรียงลำดับ สำหรับกำหนดชนิดตัวอักษรที่ต้องการจัดเก็บในตารางข้อมูล 5) แอตทิบิวต์ สำหรับเลือกลักษณะเฉพาะของข้อมูลที่จะเก็บ เช่น ตัวเลขแบบคิดเครื่องหมาย บวกหรือลบ
11 6) ค่าว่างเปล่า (null) สำหรับเลือกว่า เขตข้อมูลนั้นสามารถใส่ค่าว่างได้หรือไม่ 7) คำปริยาย สำหรับกำหนดค่าเริ่มต้นของเขตข้อมูล (ค่า Default) 8) เพิ่มเติม สำหรับกำหนดค่าเพิ่มเติม เช่น กรณีที่เขตข้อมูลเก็บข้อมูลตัวเลขจำนวนเต็ม (Integer) จะ สามารถเลือกให้มีการเพิ่มค่าอัตโนมัติ (auto_increment) ได้ 9) ไพรมารี เลือกเมื่อต้องการกำหนดให้เขตข้อมูลนั้นๆ เป็นกุญแจคีย์หลัก (Primary Key) 10) ดัชนีเลือกเมื่อต้องการให้เขตข้อมูลนั้นๆ เป็นดัชนี (Index) 11) เอกลักษณ์ เลือกเมื่อต้องการให้เขตข้อมูลนั้นเป็นเอกลักษณ์ (Unique) 12) หมายเหตุ สำหรับกรอกคำอธิบายเขตข้อมูลหรือข้อความอื่นๆ ที่ต้องการ 2.3 วงจรพัฒนาระบบ (System Development Life Cycle (SDLC)) วงจรการพัฒนาระบบ (System Development Life Cycle (SDLC)) คือกระบวนการทางความคิด (Logical Process) ในการพัฒนาระบบสารสนเทศเพื่อแก้ปัญหาทางธุรกิจและตอบสนองความต้องการของผู้ใช้ได้ โดยระบบที่จะพัฒนานั้นอาจเริ่มด้วยการพัฒนาระบบใหม่เลยหรือนำระบบเดิมที่มีอยู่แล้วมาปรับเปลี่ยนให้ดียิ่งขึ้น ภายในวงจรนี้อาจเริ่มด้วยการพัฒนาออกเป็นระยะ (Phases) ได้แก่ ระยะการวางแผน (Planning Phase) ระยะ การวิเคราะห์ (Analysis Phase) ระยะการออกแบบ (Desing-Phase) และระยะการสร้างพัฒนา (Implementation Phase) โดยแต่ละระยะจะประกอบไปด้วยขั้นตอน (Steps) ต่างๆแตกต่างกันไปตาม Methodology ที่นักวิเคราะห์ นำมาใช้เพื่อให้เหมาะสมกับสถานะทางการเงินและความพร้อมขององค์กร ในขณะนั้นขั้นตอนในวงจรพัฒนาระบบ ช่วยให้นักวิเคราะห์ระบบ สามารถดำเนินการได้อย่างมีแนวทางและเป็นขั้นตอนต่างๆนั้น มีลักษณะคล้ายกับการ ตัดสินใจแก้ปัญหาตามแนวทางวิทยาศาสตร์ (Scientific Management) ได้แก่ การค้นหาปัญหา การค้นแนว ทางแก้ไขปัญหา การประเมินผล แนวทางแก้ไขปัญหาที่ค้นพบ เลือกแนวทางที่ดีที่สุดและพัฒนาทางเลือกนั้นให้ใช้ งานได้ (กนกพร,ศิรินันฑาและอรัญชนา,2565) 2.3.1 การค้นหาและเลือกสรรโครงการ (Project Identification and Selection) เป็นขั้นตอนในการค้นหาโครงการพัฒนาระบบที่เหมาะสมกับสถานการณ์ปัจจุบันของบริษัทสามารถ แก้ปัญหาที่เกิดขึ้นและให้ผลประโยชน์กับบริษัทมากที่สุด โดยใช้ตารางเมตมิกซ์ (Matrix-Table) เป็นเครื่องมือ ประกอบพิจารณา ซึ่งเป็นขั้นตอนที่ได้ดำเนินการผ่านไปแล้วในเบื้องต้น สามารถสรุปกิจกรรมได้ดังนี้ 1) ค้นหาโครงการพัฒนาระบบที่เห็นสมควรต่อการได้รับการพัฒนา 2) จำแนกและจัดกลุ่มโครงการ 3) เลือกโครงการที่เหมาะสมที่สุดในการพัฒนา 2.3.2 การเริ่มต้นและวางแผนโครงการ (Project Initiating and Planning System Development) เป็นขั้นตอนในการเริ่มต้นจัดทำโครงการจัดตั้งทีมงานกำหนดตำแหน่งหน้าที่ให้กับทีมงานแต่ละคนอย่าง ชัดเจนเพื่อร่วมกันสร้างแนวทางเลือกในการนำระบบใหม่มาใช้งานและเลือกทางเลือกที่ดีที่สุด จากนั้นจะร่วมกัน วางแผนจัดทำโครงการกำหนดระยะเวลาในการดำเนินโครงการ ศึกษาความเป็นไปได้ของโครงการ และประมาณ
12 การต้นทุนและกำไรที่จะได้รับจากการลงทุนในโครงการพัฒนาระบบเพื่อนำเสนอต่อผู้จัดการ เพื่อพิจารณาอนุมัติ ดำเนินการในขั้นตอนต่อไป โดยในขณะที่นำเสนอโครงการอยู่นี้ ถือเป็นการดำเนินงานในขั้นตอนที่ 2 ซึ่งใช้เทคนิค ในการเก็บรวบรวมข้อเท็จจริงด้วยการสัมภาษณ์ (Interviewing) การออกแบบสอบถามรวมทั้งพิจารณาจาก เอกสารการทำงานและแบบฟอร์มต่างๆของบริษัทประกอบด้วย สรุปกิจกรรมขั้นตอนที่ 3 ได้ดังนี้ 1) เริ่มต้นโครงการ 2) เสนอแนวทางเลือกในการนำระบบใหม่มาใช้งาน 3) วางแผนโครงการ 2.3.3 การวิเคราะห์ (System Analysis) เป็นขั้นตอนในการศึกษาและวิเคราะห์ถึงขั้นตอนการดำเนินงานของระบบเดิม ซึ่งการที่จะสามารถ ดำเนินการในขั้นตอนนี้ได้จะต้องผ่านการอนุมัติในขั้นตอนที่ 2 ในการนำเสนอโครงการหลังจากนั้นจะรวบรวมความ ต้องการในระบบใหม่จากผู้ใช้งานระบบแล้วนำมาศึกษาและวิเคราะห์ความต้องการเหล่านั้นด้วย การใช้เครื่องมือ ชนิดต่างๆ ได้แก่ แบบจำลองขั้นตอนการทำงานของระบบ (Process Modeling) โดยใช้แผนภาพกระแสข้อมูล (Data Flow Diagram : DFD) และแบบจำลองข้อมูล (Data Modeling) โดยใช้แผนภาพแสดงความสัมพันธ์ ระหว่างข้อมูล (Entity Relationship Diagram : E-R Diagram) สรุปกิจกรรมในขั้นตอนที่ 3 ได้ดังนี้ 1) ศึกษาขั้นตอนการทำงานของระบบเดิม 2) รวบรวมความต้องการในระบบใหม่จากผู้ใช้ระบบ 3) จำลองแบบความต้องการที่รวบรวมได้ 2.3.4 การออกแบบเชิงตรรกะ (Logical Design) เป็นขั้นตอนในการออกแบบลักษณะการทำงานของระบบตามทางเลือกที่ได้จากเลือกไว้จากขั้นตอนการ วิเคราะห์ระบบโดยการออกแบบเชิงตรรกะนี้ยังไม่ได้มีการระบุถึงคุณลักษณะของอุปกรณ์ที่จะนำมาใช้เพียงแต่ กำหนดถึงลักษณะของรูปแบบรายงานที่เกิดจกาการทำงานของระบบลักษณะของการนำข้อมูลเข้าสู่ระบบและ ผลลัพธ์ที่ได้จากระบบ ซึ่งจะเลือกใช้ในการนำเสนอรูปแบบของรายงานและลักษณะของจอภาพของระบบจะทำให้ สามารถเข้าใจขั้นตอนการทำงานของระบบได้ชัดเจนขึ้น สรุปกิจกรรมในขั้นตอนที่ 3 ได้ดังนี้ 1) ออกแบบฟอร์มและรายงาน (Form/Report Design) 2) ออกแบบส่วนติดต่อกับผู้ใช้ (User Interfaces Design) 3) ออกแบบฐานข้อมูลในระดับ Logical 2.3.5 การออกแบบเชิงกายภาพ (Physical Design) เป็นขั้นตอนที่ระบุถึงลักษณะการทำงานของระบบทางกายภาพหรือทางเทคนิค โดยระบุถึงคุณลักษณะ ของอุปกรณ์ที่จะนำมาใช้เทคโนโลยีโปรแกรมภาษาที่จะนำมาทำการเขียนโปรแกรมฐานข้อมูลการออกแบบ เครือข่ายที่เหมาะสมกับระบบ สิ่งที่ได้จากขั้นตอนการออกแบบทางกายภาพนี้จะเป็นข้อมูลของการออกแบบเพื่อส่ง มอบให้กับโปรแกรมเมอร์เพื่อใช้เขียนโปรแกรมตามลักษณะการทำงานของระบบที่ได้ออกแบบและกำหนดไว้ สรุป กิจกรรมในขั้นตอนที่ 2 ได้ดังนี้
13 1) ออกแบบฐานข้อมูลในระดับ Physical 2) ออกแบบ Application 2.3.6 การพัฒนาและติดตั้งระบบ (System Implementation) เป็นขั้นตอนในการนำข้อมูลเฉพาะของการออกแบบมาทำการเขียนโปรแกรมเพื่อเป็นไปตามคุณลักษณะ และรูปแบบต่างๆที่ได้กำหนดไว้หลังจากเขียนโปรแกรมเรียบร้อยแล้วจะต้องทำการทดสอบโปรแกรม ตรวจสอบหา ข้อผิดพลาดของโปรแกรมที่พัฒนาขึ้นมาและสุดท้ายคือการติดตั้งระบบโดยทำการติดตั้งตัวโปรแกรมติดตั้งอุปกรณ์ พร้อมทั้งจัดทำคู่มือและจัดเตรียมหลักสูตรฝึกอบรมผู้ใช้งานที่เกี่ยวข้อง เพื่อให้ระบบใหม่สามารถใช้งานได้ สรุป กิจกรรมในขั้นตอนที่ 5 ได้ดังนี้ 1) เขียนโปรแกรม (Coding) 2) ทดสอบโปรแกรม (Testing) 3) ติดตั้งระบบ (Installation) 4) จัดทำเอกสาร (Documentation) 5) การบริการให้ความช่วยเหลือหลังการติดตั้งระบบ (Support) 2.3.7 การซ่อมบำรุงระบบ (System Maintenance) เป็นขั้นตอนสุดท้ายของวงจรพัฒนาระบบ (SDLC) หลังจากระบบใหม่ได้เริ่มดำเนินการผู้ใช้ระบบจะพบกับ ปัญหาที่เกิดขึ้น เนื่องจากความไม่คุ้นเคยกับระบบใหม่ และค้นหาวิธีการแก้ไขปัญหานั้นเพื่อให้ตรงกับความต้องการ ของผู้ใช้เองได้ สรุปกิจกรรมในขั้นตอนที่ 4 ได้ดังนี้ (กนกพร, ศิรินันฑา, อรัญชนา.2565) หน้า 4-6 1) เก็บรวบรวมข้อมูลการปรับปรุงระบบ 2) วิเคราะห์ข้อมูลร้องขอให้ปรับปรุงระบบ 3) ออกแบบการทำงานที่ต้องการปรับปรุง 4) ปรับปรุงแก้ไข 2.4 ภาษา HTML HTML5 เป็นภาษามาร์กอัปที่ใช้สำหรับการจัดโครงสร้างและเนื้อหาที่นำเสนอเกี่ยวกับเวิลด์วายเว็บ มัน เป็นรุ่นที่ห้าและปัจจุบันของมาตรฐานของ HTML มันได้รับการตีพิมพ์ในตุลาคม 2014 โดย World Wide Web สมาคม (W3C) เพื่อปรับปรุงภาษาด้วยการสนับสนุนสำหรับมัลติมีเดียล่าสุดขณะที่การรักษามันทั้งที่อ่านได้ง่ายโดย มนุษย์และเข้าใจอย่างต่อเนื่องโดยคอมพิวเตอร์และอุปกรณ์เช่นเว็บเบราว์เซอร์ parsers ฯลฯ ใหม่คืออะไรใน HTML5 ? DOCTYPE ประกาศสำหรับ HTML5 เป็นง่ายมาก : <!DOCTYPE html>การเข้ารหัสตัวอักษร(charset) ประกาศยังง่ายมาก : <meta charset="UTF-8"> ตัวอย่าง HTML5 ดังภาพที่ 2.7
14 ภาพที่ 2.7 ตัวอย่าง HTML5 องค์ประกอบ HTML5 - องค์ประกอบความหมายใหม่เช่น <header> ,<footer> ,<article> และ <section> - การควบคุมรูปแบบใหม่คุณลักษณะเช่นจำนวน, วันที่, เวลา, ปฏิทินและช่วง - องค์ประกอบภาพใหม่ :<svg> และ <canvas> - องค์ประกอบมัลติมีเดียใหม่ :<audio> และ <video> โครงสร้างองค์ประกอบ HTML5 : แท็ก ลักษณะ <article> กำหนดบทความในเอกสาร <aside> กำหนดเนื้อหานอกเหนือจากเนื้อหาของหน้าเว็บ <bdi> ระบุส่วนของข้อความที่อาจจะมีการจัดรูปแบบในทิศทางที่แตกต่างจากข้อความอื่นๆ <details> กำหนดรายละเอียดเพิ่มเติมที่ผู้ใช้สามารถดูหรือซ่อน <dialog> กำหนดกล่องโต้ตอบหรือหน้าต่าง <figcaption> กำหนดคำอธิบายสำหรับ<figure>องค์ประกอบ <figure> กำหนดเนื้อหาที่ตนเองมีเช่นภาพประกอบ,แผนภาพ,ภาพถ่าย,รายชื่อรหัส <footer> กำหนดส่วนท้ายของเอกสารหรือส่วนใดส่วนใดส่วนหนึ่ง <header> กำหนดส่วนหัวสำหรับเอกสารหรือส่วนใดส่วนหนึ่ง <main> กำหนดเนื้อหาหลักของเอกสาร <mark> กำหนดเครื่องหมายหรือไฮไลด์ข้อความ <menuitem> กำหนดคำสั่ง/รายการเมนูที่ผู้ใช้สามารถเรียกใช้จากเมนูป๊อบอัพ <meter> กำหนดวัดเกลาในช่วงที่รู้จักกัน (a gauge) <nav> กำหนดลิงค์การนำทางในเอกสาร <progress> กำหนดความคืบหน้าของงาน <rp> กำหนดสิ่งที่จะแสดงในบราว์เซอร์ที่ไม่สนับสนุน ruby คำอธิบายประกอบ <rt> กำหนดคำอธิบาย/การออกเสียงของตัวอักษร (สำหรับพิมพ์เอเชียตะวันออก <ruby> กำหนด ruby คำอธิบายประกอบ (for East Asian typography) <section> กำหนดส่วนในเอกสาร <summary> กำหนดหัวข้อที่มองเห็นสำหรับ<details>องค์ประกอบ <time> กำหนดวัน/เวลา <wbr> กำหนดเส้นแบ่งที่เป็นไปได้ ตารางที่ 2.2 โครงสร้างองค์ประกอบ HTML5
15 HTML5 - คุณสมบัติไวยากรณ์ HTML5 ช่วยให้สี่ไวยากรณ์ที่แตกต่างกันสำหรับแอตทริบิวต์ ตัวอย่างนี้แสดงให้เห็นถึงไวยากรณ์ต่างๆที่ใช้ใน <input> แท็ก : ชนิด ตัวอย่าง ว่างเปล่า <input type=”texe” value=”John” disabled > unquoted <input type=”texe” value=”John > ยกมาสองครั้ง <input type=”texe” value=”value=”John Doe” > เดี่ยวยกมา <input type=”texe” value=”value=”John Doe” > ตารางที่ 2.3 สี่ไวยากรณ์ 2.5 Responsive Website Responsive Website คือแนวทางการพัฒนาเว็บไซต์โดยเริ่มตั้งแต่การออกแบบ ไปจนถึงการเขียน โปรแกรม โดยให้ความสำคัญกับแสดงผลที่เหมาะสมกับหน้าจอตามแต่ละอุปกรณ์ ทั้งคอมพิวเตอร์ตั้งโต๊ะและมือถือ มุ่งเน้นให้ผู้ใช้งาน ง่ายต่อการปฏิสัมพันธ์ ง่ายต่อการอ่าน ง่ายต่อการมองเห็นโดยปกติเว็บไซต์ที่ไม่ได้เป็น responsive เวลาเปิดดูบนมือถือหรือแท็บเลต ตัวเว็บและเนื้อหาทั้งหมดภายในเว็บตัวหนังสือ รูปภาพ เป็นต้น จะ ถูกย่อให้เล็กตามขนาดหน้าจอ และถ้าหน้าจอที่ใช้งานมีขนาดที่เล็กมาก ตัวหนังสือก็จะถูกย่อให้เล็กตามไป เวลา อ่านก็จะต้องขยายทั้งเว็บไซต์เพื่อให้สามารถอ่านได้แต่ถ้าหากว่าเว็บไซต์นั้น ถูกออกแบบและพัฒนาให้เป็น Responsive Website การแสดงผลทั้งตัวหนังสือและรูปภาพจะถูกปรับการแสดงผลให้เหมาะสมกับหน้าจอและ อุปกรณ์ของผู้ใช้งานมากที่สุดจากรูปตัวอย่างข้างต้นจะเห็นว่าการแสดงผลบนคอมพิวเตอร์ตั้งโต๊ะ มือถือและแท็บ เลต เปิดหน้าเว็บเดียวกันเนื้อหาและรูปภาพทั้งหมดมาจากเว็บไซต์เดียวกันและมีโครงสร้างการแสดงผลที่แตกต่าง กันตามขนาดหน้าจอโครงสร้างการแสดงผลนี้ถูกปรับให้เหมาะสมตามอุปกรณ์นั้น ๆ ตัวอย่างเว็บไซต์12tees.com ที่ถูกพัฒนาแบบ Responsive Website ภาพที่ 2.8 โครงสร้างที่ถูกพัฒนาแบบ Responsive Website
16 2.5.1ประโยชน์ของ Responsive Website 1) ประหยัดค่าใช้จ่าย ในขั้นตอนการพัฒนาเว็บไซต์แบบ responsive เราสามารถพัฒนาโดยใช้ชุดคำสั่งทางโปรแกรม มิ่งเพื่อปรับขนาดให้เหมาะสมกับทุกอุปกรณ์การแสดงผลเพียงครั้งเดียวได้ ซึ่งแตกต่างจากการพัฒนาแบบ m. หรือ แบบ mobile site ที่ต้องแยกขั้นตอนการพัฒนาตั้งแต่การออกแบบ การเขียนโปรแกรม รวมไปถึงการ query ข้อมูลต่าง ๆ จากฐานข้อมูลมาแสดงบนหน้าเว็บไซต์ 2) ปรับขนาดและปริมาณเนื้อหาได้ตามขนาดอุปกรณ์ เมื่อเว็บไซต์ถูกออกแบบให้ทำงานแบบ responsive website นอกจากคุณสมบัติหลักของการ พัฒนาเว็บไซต์แบบ responsive จะสามารถปรับเปลี่ยนเลเอาท์ให้แสดงผลพอเหมาะกับอุปกรณ์นั้น ๆ แล้ว ยัง สามารถปรับเพิ่มหรือลดปริมาณเนื้อหาในการแสดงผลที่แตกต่างกันไปอีกด้วย ตัวอย่างเช่น เมื่อแสดงผลบน desktop เราอาจจะต้องการแสดงเนื้อหาหน้า news หรือข่าวสารในหน้าแรก อย่างน้อย 10 กระทู้ แต่เมื่อไปอยู่ บน mobile device เราอาจจะอยากให้แสดงแค่กระทู้ล่าสุดเพียงกระทู้เดียวเท่านั้น 3) ลดต้นทุนในการบำรุงรักษา ( Mainternance ) ในขั้นตอนของการปรับปรุงและดูแลรักษา สามารถปรับปรุงเปลี่ยนแปลง เพิ่ม ลบ ข้อมูลได้ใน ชุดคำสั่งการเขียนโปรแกรมภายใต้ source code โปรเจคเดียวกันได้ ซึ่งแตกต่างจากการพัฒนาแบบ m. หรือ mobile site ถ้ามีการแก้ไขจุดใดจุดหนึ่งของ source code จะต้องทำการแก้ไขทั้ง 2 ส่วน 4) มีผลในทาง SEO สำคัญมากเราจะยอมเสียคะแนนส่วนนี้ไปได้อย่างไร ถ้าเราลองใช้โทรศัพท์มือถือทดสอบค้นหาคำ ว่าอะไรก็ได้บน Google Search Engine จะสังเกตุว่าในลิสต์รายการการค้นหา จะมีบางเว็บไซต์ที่เขียนข้อความ กำกับด้านหน้าผลการค้นหาว่า “เหมาะกับมือถือ” และบางเว็บไซต์ไม่มี ความหมายคือเว็บไซต์นั้นได้ถูกออกแบบ มาให้รองรับการแสดงผลอย่างสมบูรณ์แบบบนอุปกรณ์สมาร์ทโฟน ซึ่งผลดีคือ google ให้คะแนนคุณภาพ (Quality Score ) กับเว็บไซต์ที่รองรับการแสดงผลบนอุปกรณ์สมาร์ทโฟน ทำให้เว็บไซต์เรามีโอกาสที่จะติดอันดับ ได้มากกว่าเว็บไซต์ที่ไม่รองรับมือถือ ตัวอย่าง Responsive Website ตัวอย่างเว็บไซต์ที่ออกแบบและพัฒนาเป็น Responsive Website http://www.12tees.com http://www.cateringever.com http://www.msdream.co.th 2.6 Bootstrap Bootstrap คือ 1) Bootstrap เป็นกรอบ front-end ฟรีสำหรับการพัฒนาเว็บได้เร็วขึ้นและง่ายขึ้น
17 2) Bootstrap รวมถึง HTML และ CSS ตามแม่แบบการออกแบบสำหรับการพิมพ์รูปแบบ, ปุ่ม, โต๊ะ, นำ ทาง, Modals, คิวภาพและอื่น ๆ เช่นเดียวกับปลั๊กอิน JavaScript ทางเลือกจำนวนมาก 3) Bootstrap ยังช่วยให้คุณสามารถได้อย่างง่ายดายสร้างการออกแบบที่ตอบสนองต่อสร้างหน้าเว็บแรก ด้วย Bootstrap 2.6.1 สร้างหน้าเว็บแรกด้วย Bootstrap 1) เพิ่ม DOCTYPE HTML5 Bootstrap ที่ใช้องค์ประกอบ HTML CSS และคุณสมบัติที่ต้องการ DOCTYPE HTML5 เสมอรวมถึงประเภทเอกสาร HTML5 ที่จุดเริ่มต้นของหน้าพร้อมกับแอตทริบิวต์ Lang และชุด ตัวอักษรที่ถูกต้อง :<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> </html> 2) Bootstrap 3 เป็นโทรศัพท์มือถือครั้งแรก Bootstrap 3 ถูกออกแบบมาเพื่อตอบสนองกับ อุปกรณ์มือถือ รูปแบบมือถือครั้งแรกเป็นส่วนหนึ่งของกรอบหลักเพื่อให้แน่ใจว่าการแสดงผลที่เหมาะสม และซูม <metaname="viewport"content="width=device-width,initial-scale=1">width=device-width กำหนด ความกว้างของหน้าไปตามหน้าจอที่มีความกว้างของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์) initialscale=1 ส่วนกำหนดระดับการซูมเริ่มต้นเมื่อโหลดหน้าเว็บแล้วเป็นครั้งแรกโดยเบราว์เซอร์ 3) ตู้คอนเทนเนอร์Bootstrap ยังต้องมีองค์ประกอบที่มีการตัดเนื้อหาเว็บไซต์มีสองชั้นภาชนะ ให้เลือกเป็น: container ระดับให้ตอบสนองภาชนะกว้างคงcontainer-fluid ระดับให้ภาชนะที่เต็มความกว้างทอด กว้างทั้งหมดของวิวพอร์ต Bootstrap Forms Bootstrap's การตั้งค่าเริ่มต้น รูปแบบการควบคุมโดยอัตโนมัติได้รับจัดแต่งทรงผมระดับโลกบางคนที่มี Bootstrap : ต้นฉบับเดิมทั้งหมด <input> , <textarea> และ <select> องค์ประกอบที่มีระดับ .form-control มีความกว้าง 100% Bootstrap เลย์เอาต์แบบฟอร์ม Bootstrap ให้3 ประเภทของการจัดรูปแบบ : 1) รูปแบบแนวตั้ง (นี้เป็นค่าเริ่มต้น) 2) รูปแบบแนวนอน 3) รูปแบบอินไลน์ กฎระเบียบมาตรฐานสำหรับทั้งสามรูปแบบรูปแบบซ้ำ : 1) มักจะใช้<form role="form"> (ช่วยปรับปรุงการเข้าถึงสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ)
18 2) ห่อป้ายชื่อและรูปแบบการควบคุมใน <div class="form-group"> (จำเป็นสำหรับระยะห่างที่ เหมาะสม) 3) เพิ่มระดับ. form-control เพื่อต้นฉบับเดิมทั้งหมด <input> , <textarea> และ <select> องค์ประกอบ Bootstrap แนวตั้งแบบฟอร์ม (เริ่มต้น) ภาพที่ 2.9 หน้าฟอร์ม Bootstrap แนวตั้งแบบฟอร์ม (เริ่มต้น) ตัวอย่างต่อไปนี้จะสร้างรูปแบบแนวตั้งที่มีสองช่องใส่หนึ่งช่องทำเครื่องหมายและปุ่มส่ง : ตัวอย่างดังภาพที่ 2.27 ภาพที่ 2.10 การสร้างหน้าฟอร์ม Bootstrap แบบแนวตั้ง
19 Bootstrap แบบอินไลน์ ภาพที่ 2.11 หน้าฟอร์ม Bootstrap แบบอินไลน์ ในรูปแบบอินไลน์ทั้งหมดขององค์ประกอบที่เป็นแบบอินไลน์ซ้ายชิดและป้ายชื่อที่มีข้าง หมายเหตุ : นี้จะใช้กับรูปแบบภายใน viewports ที่มีอย่างน้อย 768px กว้าง! กฎเพิ่มเติมสำหรับรูปแบบอินไลน์: - เพิ่มระดับ form-inline ไป <form> องค์ประกอบ ตัวอย่างต่อไปนี้จะสร้างรูปแบบที่ใกล้เคียงกับสองช่องใส่หนึ่งช่องทำเครื่องหมายและหนึ่งปุ่มส่ง :ตัวอย่าง ดังภาพที่ 2.12 ภาพที่ 2.12 การสร้างหน้าฟอร์ม Bootstrap แบบอินไลน์
20 Bootstrap แบบแนวนอน ภาพที่ 2.13 หน้าฟอร์ม Bootstrap แบบแนวนอน รูปแบบแนวนอนยืนห่างจากรูปแบบอื่น ๆ ทั้งในจำนวนของมาร์กอัปและในการนำเสนอรูปแบบ กฎระเบียบเพิ่มเติมสำหรับรูปแบบแนวนอน: - เพิ่มระดับ .form-horizontal ไป <form> องค์ประกอบ - เพิ่มระดับ .control-label ทุก <label> องค์ประกอบ เคล็ดลับ: ใช้ Bootstrap's การเรียนตารางที่กำหนดไว้ล่วงหน้าเพื่อให้สอดคล้องฉลากและกลุ่มควบคุมฟอร์มใน รูปแบบแนวนอน ตัวอย่างต่อไปนี้จะสร้างรูปแบบแนวนอนที่มีสองช่องใส่หนึ่งช่องทำเครื่องหมายและหนึ่งปุ่มส่ง : ตัวอย่างดังภาพที่ 2.14
21 ภาพที่ 2.14 การสร้างหน้าฟอร์ม Bootstrap แบบแนวนอน
22 2.7 ภาษา (Cascading Style Sheets : CSS) Css CSS ย่อมาจาก Cascading Style Sheet มักเรียกโดยย่อว่า "สไตล์ชีต" คือภาษาที่ใช้เป็นส่วนของการ จัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ (หรือ "Style") ของเนื้อหา ในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ ซึ่งการกำหนดรูปแบบ หรือ Style นี้ใช้หลักการของการแยกเนื้อหาเอกสาร HTML ออกจากคำสั่งที่ใช้ในการจัดรูปแบบการแสดงผล กำหนดให้รูปแบบของการแสดงผลเอกสาร ไม่ขึ้นอยู่กับเนื้อหาของเอกสาร เพื่อให้ง่ายต่อการจัดรูปแบบการ แสดงผลลัพธ์ของเอกสาร HTML โดยเฉพาะในกรณีที่มีการเปลี่ยนแปลงเนื้อหาเอกสารบ่อยครั้ง หรือต้องการ ควบคุมให้รูปแบบการแสดงผลเอกสาร HTML มีลักษณะของความสม่ำเสมอทั่วกันทุกหน้าเอกสารภายในเว็บไซต์ เดียวกัน โดยกฏเกณฑ์ในการกำหนดรูปแบบ (Style) เอกสาร HTML ถูกเพิ่มเข้ามาครั้งแรกใน HTML 4.0 เมื่อปี พ.ศ. 2539 ในรูปแบบของ CSS level 1 Recommendations ที่กำหนดโดย องค์กร World Wide Web Consortium หรือ W3C 2.7.1 CSS มีประโยชน์อย่างไร ภาษา CSS (Cascading Style Sheets) มีประโยชน์หลายอย่างเลยทีเดียวซึ่งทำให้การพัฒนาเว็บเพจด้วย ภาษา HTML เป็นเรื่องที่ง่ายมากขึ้น 1) ภาษา CSS จะช่วยในการจัดรูปแบบแสดงผลให้กับภาษา HTML ซึ่งจะช่วยลดการใช้ภาษา HTML ให้น้อยลง โดยเหลือเพียงแต่ส่วนที่เป็นเอกสารที่เป็นภาษา HTML เท่านั้นทำให้มีการแก้ไขและทำความ เข้าใจได้ง่ายขึ้น 2) ทำให้ขนาดไฟล์ HTML น้อยลงเนื่องจาก ภาษา CSS จะช่วยลงการใช้ภาษา HTML ลงทำให้ ขนาดไฟล์นั้นก็เล็กลงไปด้วยเช่นกัน 3) ภาษา CSS เป็นภาษา Style Sheets โดย Style Sheets ชุดเดียวสามารถใช้กำหนดรูปแบบ การแสดงผลให้เอกสาร HTML ทั้งหน้า หรือทุกหน้ามีผลเหมือนกันได้ จึงทำให้เวลาที่มีการแก้ไขก็จะแก้ไขได้ง่ายขึ้น เพียงแก้ไข Style Sheets ที่ใช้งานเพียงชุดเดียวเท่านั้น 4) ทำให้เว็บไซต์มีมาตราฐานเพราะการใช้งาน CSS นั้นจะทำให้การแสดงผลในสื่อต่าง ๆ ถูก ปรับเปลี่ยนไปได้อย่างเหมาะสม เช่น การแสดงผลบนหน้าจอ และการแสดงผลในมือถือ 5) CSS สามารถที่จะใช้งานได้หลากหลาย เว็บบราวเซอร์ ทำให้การใช้งานนั้นสะดวกมากยิ่งขึ้น 6) CSS สามารถกำหนดแยกไว้ต่างหากจากไฟล์เอกสาร HTML และสามารถนำมาใช้ร่วม กับ เอกสารหลายไฟล์ได้ การแก้ไขก็แก้เพียง จุดเดียวก็มีผลกับเอกสารทั้งหมด CSS กับ HTML นั้นทำหน้าที่คนละอย่างกัน โดย HTMLจะทำหน้าที่ในการวางโครงร่างเอกสาร อย่างเป็นรูปแบบ ถูกต้อง เข้าใจง่าย ไม่เกี่ยวข้องกับการแสดงผล ส่วน CSS จะทำหน้าที่ในการตกแต่งเอกสารให้ สวยงาม เรียกได้ว่า HTML คือส่วน coding ส่วน CSS คือส่วน design
23 2.8 แผนภาพกระแสข้อมูล (Data Flow Diagram : DFD) Data Flow Diagram : DFD หมายถึง แผนภาพที่แสดงให้เห็นการเคลื่อนที่ของข้อมูลระหว่างผู้เกี่ยวข้อง กับระบบ (External Agent) และขั้นตอนการทำงาน (Process) ตลอดจนแหล่งจัดเก็บข้อมูล (Data Store) ภายใน ระบบ แสดงตัวอย่างดังภาพที่ 2.15 ภาพที่ 2.15 แสดงตัวอย่าง DFD 2.8.1 สัญลักษณ์ที่ใช้ใน DFD มีหลายชนิด แต่ในที่นี้จะแสดงให้เห็นเพียง 2 ชนิด ได้แก่ ชุดสัญลักษณ์ มาตรฐานที่พัฒนาโดย Gane and Sarson และชุดสัญลัษณ์มาตรฐานที่พัฒนาโดย DeMarco and Yourdon แสดงตัวอย่างดังภาพที่ 2.16 ภาพที่ 2.16 แสดงสัญลักษณ์ที่ใช้ใน DFD 2.8.2 แนวคิดของ DFD การสร้างแบบจำลองขั้นตอนการทำงานของระบบโดยใช้ DFD มีแนวคิดต่างๆดังนี้ 1) ขั้นตอนการทำงานของระบบ (Process) 2) การไหลของข้อมูล (Data Flow)
24 3) ตัวแทนข้อมูล (External Agent) 4) แหล่งจัดเก็บข้อมูล (Data Store) 2.8.3 วิธีสร้าง DFD การจำลองขั้นตอนการทำงานของระบบ ด้วยแผนการ DFD มีลักษณ์เป็นระดับชั้น (Level) กล่าวคือ DFD ระดับบนสุด จะแสดงให้เห็นถึงระบบโดยภาพรวม ส่วน DFD ระดับถัดไป จะแสดงให้เห็น ขั้นตอนการทำงานย่อยภายในระบบและขั้นตอนย่อย จะถูกแตกเป็นการทำงานย่อยในระดับล่างลงไปเรื่อยๆ เสมือนการแตกปัญหาใหญ่ออกเป็นปัญหาย่อย สรุปขั้นตอนการสร้าง DFD มีดังนี้ 1) สร้างแผนภาพบริบท (Context Diagram) 2) สร้างแผนภาพระดับ 0 (Level-0 Diagram) 3) แบ่งย่อยแผนภาพ (Decomposition of DFD) 4) ตรวจสอบความสมดุลของ DFD (Balancing DFD) 2.8.4 สร้างแผนภาพบริบท (Context Diagram) แผนภาพบริบท (Context Diagram) คือ แผนภาพกระแสข้อมูลระดับบนสุดที่แสดงภาพรวมการทำงาน ของระบบที่มีความสัมพันธ์กับสภาพแวดล้อมภายนอกระบบ อีกทั้งแสดงให้เห็นถึงขอบเขต และเส้นแบ่งเขตของ ระบบที่ศึกษาและพัฒนา แนวทางในการกำหนดขอบเขตด้งนี้ 1) เปรียบระบบเสมือนภาชนะบรรจุ เพื่อแบ่งแยกสิ่งที่อยู่ภายในภาชนะออกจากสิ่งที่อยู่ภายนอก ภาชนะ โดยไม่ต้องสนใจว่าสิ่งที่อยู่ภายในภาชนะมีอะไรบ้าง 2) ศึกษาระบบโดยอาจสอบถามผู้ใช้งานเพื่อให้ทราบถึงเหตุการณ์ (Event) หรือการดำเนินงาน ประจำวันที่เกิดขึ้นของระบบว่ามีการติดต่อ จัดการ หรือดำเนินงานอย่างไร และระบบมีการตอบสนองต่อเหตุการณ์ นั้นๆอย่างไร 3) สอบถามผู้ใช้ระบบว่าระบบจะต้องส่งข้อมูลอะไร (Output) ออกไปสู่ External Agent บ้าง ต้องการรูปแบบรายงาน การสอบถามข้อมูล (Query) แบบใด 4) จำแนกแหล่งข้อมูลภายนอกระบบ (External Data Store) ที่ระบบต้องการจากไฟล์หรือ ฐานข้อมูลจากระบบอื่น ซึ่งอาจเป็นการอ่าน แก้ไข หรือเปลี่ยนแปลง ข้อมูลเหล่านั้น 5) วาด Context Diagram จากสิ่งที่รวบรวมได้จากข้อ 1 ถึง 4 จากการรวบรวมข้อมูล นักวิเคราะห์ระบบอาจพบว่ามี Data Flow จำนวนมากที่ไม่อาจแสดงได้ทั้งหมดใน Context Diagram ดังนั้น Data Flow ที่แสดงควรเป็นข้อมูลหลักและมีความสำคัญต่อระบบ ส่วนรายละเอียดของ การเคลื่อนไหวของข้อมูลนั้นสามารถนำไปอธิบายใน DFD ระดับต่อไปได้ แสดงตัวอย่าง Context Diagram ดัง ภาพที่ 2.17
25 ภาพที่ 2.17 ตัวอย่าง Context Diagram ของระบบงานขาย จากรูปที่ 2.17 เป็นตัวอย่าง Context Diagram ของระบบงานขาย (Sales System) โดยมีรายละเอียดความ ต้องการของระบบ 2.8.5 สร้างแผนภาพระดับ 0 (DFD Level 0) DFD Level 0 คือ แผนภาพกระแสข้อมูลในระดับที่แสดงขั้นตอนการทำงานหลักทั้งหมด (Process หลัก) ของระบบแสดงทิศทางการไหลของ Data Flow และแสดงให้เห็นถึงแหล่งจัดเก็บข้อมูล (Data Store) DFD Level 0 แสดงให้เห็น Process การทำงานหลักๆ ที่มีอยู่ภายใน Context Diagram ว่ามีขั้นตอน ใดบ้างโดยแต่ละ Process จะมีหมฆายเลขกำกับอยู่ด้านบนของสัญลักษณ์ ตั้งแต่ 1.0 เป็นต้นไป แสดงตัวอย่างดัง ภาพที่ 2.18 ภาพที่ 2.18 ตัวอย่าง DFD Level 0 ของระบบงานขาย
26 2.8.6 การแบ่งย่อยแผนภาพ (Decomposition of DFD) Decomposition คือ การแบ่ง/แยก/ย่อยระบบและขั้นตอนการทำงานออกเป็นส่วนย่อย โดยในแต่ละ ขั้นตอนที่ถูกแตกออกมา (Subsystems) จะแสดงให้เห็นถึงรายละเอียดของการทำงานเพิ่มมากขึ้น จาก DFD Level 0 ของระบบงานขาย ที่ Process 4.0 ได้แบ่งการทำงานออกเป็นขั้นตอนย่อย ดังภาพที่ 2.19 ภาพที่ 2.19 ตัวอย่าง DFD Level 1 ของ Process 4.0 ระบบงานขาย 2.9 แบบจำลองความสัมพันธ์(E-R diagram) เเผนภาพเเสดงความสัมพันธ์ระหว่างข้อมูล (E-R Diagram) หมายถึง แผนภาพที่ใช้เป็นเครื่องมือสำหรับ จำลองข้อมูล ซึ่งประกอบไปด้วย Entity (เเทนกลุ่มของข้อมูลที่เป็นเรื่องเดียวกัน/เกี่ยวข้องกัน) เเละความสัมพันธ์ ระหว่างข้อมูล (Relationship) ที่เกิดขึ้นทั้งหมดในระบบ ดังภาพที่ 2.20 ภาพที่ 2.20 เเสดงตัวอย่าง E-R Diagram จากภาพที่ 2.20 ประกอบด้วย Entity ทั้งหมด 2 Entity ได้เเก่ “Order” เเละ “Customer” โดยที่ Customer มีความสัมพันธ์กับ Order คือ ลูกค้า 1 คนสามารถสั่งสินค้าได้หลายครั้ง เเละใบสั่งสินค้าเเต่ละใบของ ลูกค้าคนเดียว (กิตติ ภักดีวัฒนะกุล.2551) 2.9.1 สัญลักษณ์ที่ใช้ใน E-R Diagram สัญลักษณ์ที่ใช้ใน E-R Diagram ปัจจุบันมีมีหลายรูปเเบบ ในที่นี้ขอยกตัวอย่าง 2 รูปแแบบ ได้เเก่ Chen’s Model และ Crow’s Foot Model (สำหรับหนังสือเล่มนี้จะเลือกใช้เเบบ Chen’s Model) (กิตติ ภักดีวัฒนะกุล. 2551)
27 ภาพที่ 2.21 เเสดงสัญลักษณ์ที่ใช้ใน E-R Diagram ภาพที่ 2.22ตัวอย่าง E-R Diagram ตามมาตรฐาน Chen และ Crow’s Foot Model 2.9.2 องค์ประกอบของ E-R Diagram E-R Diagram ประกอบไปด้วยส่วนสำคัญ ได้เเก่ Entities,Properties และ Relationship 1) Entities Entities คือ คน สถานที่วัตถุ เหตุการณ์ หรือเเนวคิดที่เเวดล้อมผู้ใช้ในระบบที่ต้องการพัฒนา Entity Type คือ กลุ่มของอ็อบเจ็กต์หรือเเนวคิดรวบยอด (Concept) ที่ถูกกำหนดขึ้นเพื่อเป็น ตัวเเทนข้อมูลในโลกความจริง (Real Wold) โดยที่อ็อบเจ๊กต์ที่อยู่กลุ่มเดียวกัน จะมีคุณสมบัติ (Property) เหมือนกัน แต่มีเอกลักษณ์เเตกต่างกัน หากสมมุติให้ ในโลกความ Entity Instance คือ สมาชิกของ Entity Type มีความเป็นเอกลักษณ์ที่สามารถระบุความแตกต่างได้
28 สรุปได้ว่า ภายใน Entity Type จะประกอบด้วย Entity Instance จำนวนหนึ่ง ที่มีคุณสมบัติพื้นฐาน เหมือนกัน แต่มีเอกลักษณ์เเตกต่างกัน หากสมมุติให้ ในโลกความเป็นจริงที่เราสนใจจะพัฒนาเป็นฐานข้อมูล คือ ระบบลงทะเบียนที่ประกอบไปด้วยอ็อบเจ๊กต์ต่างๆ เช่น นักศึกษา (Student) รายวิชา (Subject) อาจารย์ (Teacher) เป็นต้น กลุ่มของนักศึกษารายวิชา และอาจารย์ จะถูกกำหนดให้เป็น “Entity Type” เช่น Entity Type “STUDENT” เป็นต้น สำหรับนักศึกษาเเต่ละคนจะถือว่าเป็น “Entity Instance” ภาพที่ 2.23 แสดงสัญลักษณ์ของ Entity Type เพื่อให้การอธิบายเนื้อหาง่ายต่อการทำความเข้าใจ ในที่นี้จะขอใช้คำว่า “Entity” แทน “Entity Type” เเละใช้คำว่า “สมาชิกของ Entity” แทน “Entity Instsance” Entity แบ่งเป็น 2 ชนิด ดังนี้ 1) Regular Entity เรียกได้อีกอย่างหนึ่งว่า “Strong Entity” เป็น Entity ที่ประกอบด้วยสมาชิก ที่มีคุณสมบัติ ซึ่งบ่งบอกเอกลักษณ์ของเเต่ละสมาชิกนั้นได้ เช่น Entity ประชากร“(POPULATION)”ซึ่งสมาชิกภายใน Entity นี้ได้แก่ ประชากรเเต่ละคนในประเทศไทยที่มี หมายเลขบัตรประชาชนไม่ซ้ำกันเลย เป็นต้น สำหรับสัญลักษณ์ที่ใช้มีลักษณะเช่นเดียวกับภาพที่ 8.5 2) Weak Entity เป็น Entity ที่ต้องขึ้นอยู่กับ Entity อื่น ไม่มี Property อื่นเป็นส่วนประกอบใน จำเเนกความเเตกต่างดังกล่าว เช่น Entity “ORDER_DETAIL”ซึ่งมีความสัมพันธ์กับ Entity “ORDER” และ “PRODUCT”เพื่อใช้เก็บ รายละเอียดการสั่งซื้อสินค้าจากลูกค้า ได้เเก่ ชื่อรุ่นของสินค้า จำนวนสินค้าที่สั่งซื้อเเต่ละรายการ ของลูกค้าเเต่ละ รายหาก Entity “ORDER_DETAIL” ไม่อาศัย Propety “OderNo” จาก Entity “ORDER” เเล้ว จะไม่สามารถ ระบุได้ว่าเป็นรายการสั่งซื้อสินค้าจากใบสั่งซื้อหมายเลขอะไร จากลูกค้ารายใด เเละสั่งซื้อวันที่เท่าใด เเละหาก ORDER_DETAIL ไม่อาศัย Propety “ProID” 0kd Entity “PRODUCT” ก็จะไม่สามารถระบุได้ว่าสินค้ารหัสที่ ลูกค้าซื้อมีราคาเท่าใด เป็นต้น แสดงสัญลักษณ์ของ Weak Entity ได้ดังตัวอย่างในภาพที่ 2.24 (กิตติ ภักดีวัฒนะ กุล.2551)
29 ภาพที่ 2.24 ตัวอย่าง Weak Entity 2.9.3 Properties Properties คือ คุณสมบัติหรือลักษณะที่ใช้อธิบายรายละเอียดของ Entity หรือ Relationship ที่สนใจ ใน ที่นี้ขอใช้คำว่า “Attribute” ในความหมายเดียวกันกับ “Property” สัญลักษณ์ที่ใช้แทน Attribute คือ รูปวงรี เช่น Entity “STUDENT” ประกอบไปด้วย Atteibute ต่อไปนี้ 1) รหัสนักศึกษา (Stdld) 2) ชื่อ-สกุล (StdName) 3) วันเกิด (Birtdate 4) ที่อยู่ (StdAddress) 5) คณะ (Major) ภาพที่ 2.25 ตัวอย่าง Attribute ของ Entity “STUDENT” 2.9.4 Attribute Specification เมื่อมีการกำหนดค่าให้กับ Attribute จะะทำให้สามารถระบุสมาชิกใน Entity ได้จำเพาะเจาะจง รวมทั้ง หากกำหนดค่าให้กับทุก Attribute แล้วก็จะสามารถจำเเนกความเเตกต่างของเเต่ละสมาชิกของ Entity ได้ เช่น ใน ที่นี้กำหนดค่า Attribute(บางส่วน) ให้กับ Entity “STUDENT” ดังต่อไปนี้ ก็จะสามารถระบุได้ว่าเป็นนักศึกษาคนใด
30 - Stdid :44202008 - StdName :Junjira Kongsak - Birthdate:08/05/1975 - StdAddress :125/20 Jatujak,Bangkok. 2.9.5 ประเภทของ Attributes สามารถจำเเนกได้เป็น 4 ประเภท ดังนี้ 1) Simple และ Composite Attribute Simple Attribute คือ Attribute ที่ไม่สามารถเเบ่งย่อยได้อีก เช่น อายุ (Age) เงินเดือน (Salary) เป็นต้น Composite Attribute คือ Attribute ที่ค่าภายใน Attribute นั้นสามารถแบ่งเป็นAttribute ย่อยได้อีก ซึ่งมีลักษณะ ตรงข้ามกับ Simple Attribute เช่น ชื่อ (Name) ที่อยู่ (Address) เป็นต้น ภาพที่ 2.26ตัวอย่าง Simple และ Composite Attribute 2) Single และ Multi-valued Attribute Single-valued Attribute คือ Attribute ที่มีค่าข้อมูลเพียงค่าเดียว Multi-valued Attribute คือ Attribute ที่มีค่าข้อมูลหลายค่า เช่น Attribute “Phone_No” ที่พนักงาน 1 คน อาจมีหมายเลขโทรศัพท์ มากกว่า 1 หมายเลข เนื่องจากมีทั้งโทรศัพท์บ้านและโทรศัพท์มือถือ เป็นต้น สำหรับสัญลักษณ์ของ Singlevalued Attribute นั้นจะเป็นสัญลักษณ์ของ Simple Attribute ธรรมดาที่มีเส้นเชื่อม Entity 1 เส้น เเต่สำหรับ Multi-valued Attribute จะมีเส้นเชื่อมระหว่างรูปวงรีกับ Entity สองเส้น ดังภาพที่ 2.27
31 ภาพที่ 2.27ตัวอย่าง Single-valued และ Multi-valued Attribute 3) Candidate Key และ Identifier/Primary Key Candidate Key คือ Attribute หรือกลุ่มของ Attribute ที่สามารถใช้ระบุความแตกต่างของแต่ ละสมาชิกใน Entity ได้ ดังนั้น ค่าของ Candidate Key จึงต้องเป็นค่าที่ไม่ซ้ำกัน เช่น Entity “EMPLOYEE” อาจใช้ Attribute “Empld” หรือรหัสพนักงานเป็น Candidate Key เนื่องจากโดยทั่วไป รหัสพนักงานในแต่ละบริษัทจะไม่ มีค่าใดซ้ำกันเลย เป็นต้น บาง Entity อาจมี Candidate Key ได้มากว่า 1 Candidate Key เช่น Entity “REGISTRATION_FORM” หรือ “ใบลงทะเบียน” ประกอบไปด้วย Attribute ที่เป็น Candidat Key มากกว่า 1 Candidate Key นั่นคือ “หมายเลขทะเบียน (RegNO)” และ “รหัสนักศึกษา(Studentld)”หรือแม้แต่ Entity “EMPLOYEE” ก็ประกอบด้วย candidate Key มากกว่า 1 Candidate Key เช่นกัน โดยนอกจาก Attribute “Emplod” แล้ว เมื่อนำ Attribute “First Name”กับ “LastName” มารวมกัน ก็สามารถใช้เป็น Candidate Key ได้ เป็นต้น กรณีที่มี Candidate Key มากว่า 1 ตัว นักวิเคราะห์ระบบต้องเลือกมาเพียง 1 ตัว เพื่อใช้เป็น “Identifiter” หรือ “Primary Key” 4) Derived Attribute Derived Attribute คือ Attribute ที่ค่าของ Attribute ได้มาจากการคำนวณค่าของ Attribute อื่น ดังนั้น ค่าของ Derived Attribute จึงมีการเปลี่ยนแปลงอยู่ตลอดเวลาตามการเปลี่ยนแปลงของ Attribute อื่น เช่น Attribute “Totalsalary” ของ “EMPLOYEE” ที่ใช้เก็บผลรวมของเงินเดือนทั้งปีของพนักงานได้มาจาก การนำ Attribute “Salary” ในเเต่ละเดือนมารวมกัน เป็นต้น สัญลักษณ์ที่ใช้เเทน Derived Attribute จะใช้ เส้นประเชื่อมระหว่าง รูปวงรี Entity (กิตติภักดีวัฒนะกุล.2551) 2.9.6 Relationships relationships คือ ความสัมพันธ์ระหว่าง Entity ตั้งเเต่ 1 Entity ขึ้นไป โดยความสัมพันธ์ที่แท้จริงนั้น เกิดขึ้นจากสมาชิกของ Antity ที่สัมพันธ์กัน เช่น ความสัมพันธ์ระหว่าง Entity “EMPLOYEE” กับ “DEPATMANT” ที่โดยทั่วไปพนักงานสามารถ สังกัดอยู่ในแผนกใดแผนกหนึ่งได้เพียงแผนกเดียวเเต่ละแผนกมีพนักงานอยู่ในสังกัดหลายคน เป็นต้น สัญลักษณ์ที่ ใช้แทน Relationship คือ สี่เหลี่ยมข้าวหลามตัดพร้อมระบุชื่อความสัมพันธ์ ซึ่งควรจะเป็นคำกริยา (Verb) ไว้ ภายในสัญลักษณ์ดังกล่าวด้วย
32 2.9.7 แผนภาพแสดงความสัมพันธ์ของข้อมูล (Enitty Relation Diagram: ER-Diagram) การออกแบบฐานข้อมูลด้วย E-R Model เป็นเพียงวิธีหนึ่งที่ช่วยในการออกแบบฐานข้อมูลเเละได้รับความ นิยมอย่างมาก นำเสนอโดย Peter ซึ่งวิธีการนี้อยู่ในระดับ Conceptual Level เเละมีหลักการคล้ายกับ Relational Model เพียงเเต่ E-R เพียงเเต่ E-R Model เเดงในรูปแบบกราฟิก บางระบบจะใช้ E-R Model ได้ เหมาะสมกว่า เเต่บางระบบจะใช้ Relational Model ได้เหมาะสมกว่าเป็นต้นซึ่งเเล้วเเต่พิจารณาของผู้ออกเเบบ ว่าจะเลือกใช้แบบใด Relational Model คือตารางข้อมูลที่มีความสัมพันธ์(สุทัศนา:2556) เเผนภาพเเสดงความสัมพันธ์ระหว่างข้อมูล (E-R Diagram) หมายถึง แผนภาพที่ใช้เป็นเครื่องมือสำหรับ จำลองข้อมูล ซึ่งจะประกอบด้วย Entity แทนกลุ่มของข้อมูลที่เป็นเรื่องเดียวกันเกี่ยวข้องกันและความสัมพันธ์ ระหว่างข้อมูล (Relationship) ที่เกิดขึ้นทั้งหมดในระบบ E-R Diagram หรือ Entity Relationship Diagram จะเเสดงชนิดของความสัมพันธ์ว่าเป็นชนิดหนึ่งต่อ หนึ่ง (One to One) หนึ่งต่อหลายสิ่ง (One to Many) หรือหลายสิ่งต่อหลายสิ่ง (Mony to Many) ER-Diagram ประกอบด้วยองค์ประกอบพื้นฐานดังนี้ 1) เอนทิตี้ (Entity) เอนทิตี้ หมายถึง สิ่งฃองหรือวัตถุที่เราสนใจ ซึ่งอาจจับต้องได้เเละเป็นได้ทั้งนามธรรมโดยทั่วไป เอนทิตี้จะมีลักษณะที่เเยกออกจากกันไป เช่น เอนทิตี้พนักงาน จะเเยกออกเป็นของพนักงานเอนทิตี้เงินเดือนของ พนักงานคนหนึ่งก็อาจเป็นเอนทิตี้หนึ่งในระบบของโรงงาน เอนทิตี้จะมีกลุ่มที่บอกคุณสมบัติที่บอกลักษณะของเอนทิตี้ เช่น พนักงานมีรหัส ชื่อ นามสกุล และเเผนก โดยจะมีค่าของคุณสมบัติบางกลุ่มที่ทำให้สามารถเเยกเอนทิตี้ออกจากเอนทิตี้อื่นได้ เช่น รหัสพนักงานที่ จะไม่มีพนักงานคนไหนใช้ซ้ำกันเลย เราเรียกคีย์ของคุณสมบัติกลุ่มนี้ว่า เป็นคีย์ของเอนทิตี้อื่นได้ เช่นรหัสพนักงาน ที่จะไม่มีพนักงานคนไหนซ้ำกันเลยเราเรียกคีย์ของ คุณสมบัติกลุ่มนี้ว่า เป็นคีย์ของเอนทิตี้ ดังภาพที่ 2.28 ภาพที่ 2.28 รูปแสดงสัญลักษณ์ของ Entity หมายเหตุ : จากแผนภาพเเสดงความสัมพันธ์ระหว่างข้อมูล,นางสาวยุพา จันทะมาศ,2561. 2) แอททริบิวท์ (Attibute) Attibute คือ คุณสมบัติของวัตถุหรือสิ่งของที่สนใจ โดยอธิบายรายละเอียดต่างๆ ที่เกี่ยวข้องกับ ลักษณะของเอนทิตี้ โดยคุณสมบัตินี้มีอยู่ในทุกเอนทิตี้ เช่น ชื่อ นามสกุล ที่อยู่ แผนก เป็น Attribute ของเอนทิตี้พ นักงาน โมเดลข้อมูล เรามักจะพบว่า Attribute มีลักษณะข้อมูลพื้นฐานอยู่โดยที่ไม่ต้องมีคำอธิบายมากมาย เเละ Attribute ก็ไม่สามารถอยู่เเบบโดดๆ ได้โดยที่ไม่มีเอนทิตี้หรือความสัมพันธ์ดังภาพ 2.29
33 ภาพที่ 2.29 สัญลักษณ์ของ Attribute หมายเหตุ : จากแผนภาพเเสดงความสัมพันธ์ระหว่างข้อมูล,นางสาวยุพา จันทะมาศ,2561. 3) ความสัมพันธ์ (Relationship) เอนทิตี้แต่จะต้องมีความสัมพันธ์ร่วมกัน โดยจะมีชื่อแสดงความสัมพันธ์ร่วมกันซึ่งจะใช้รูปภาพ สัญลักษณ์สี่เหลี่ยมรูปว่าวแสดงความสัมพันธ์ระหว่างเอนทิตี้และระบุชื่อความสัมพันธ์ลงในสี่เหลี่ยม ตัวอย่างเช่น รูปนี้แสดงให้เห็นถึงความสัมพันธ์ระหว่างเอนทิตี้อาจารย์กับกลุ่มเรียน ดังภาพที่ 2.30 ภาพที่ 2.30สัญลักษณ์ของ Relationship หมายเหตุ : จากแผนภาพแสดงความสัมพันธ์ระหว่างข้อมูล,นางสาวยุพา จันทะมาศ,2561. เอนทิตี้จะต้องมีความสัมพันธ์ร่วมกัน โดยจะมีชื่อแสดงความสัมพันธ์ร่วมกันซึ่งจะใช้ รูปภาพสัญลักษณ์ สี่เหลี่ยมรูปว่าวแสดงความสัมพันธ์ระหว่างเอนทิตี้ ระดับชั้นของความสัมพันธ์(Relationship Degree) จะบอกถึง ความสัมพันธ์ระหว่างเอนทิตี้ - ความสัมพันธ์เเบบหนึ่งต่อหนึ่ง (One - to - One Relationship) เป็นการแสดงความสัมพันธ์ของข้อมูลของเอนทิตี้หนึ่งว่ามีความสัมพันธ์กับข้อมูลอย่าง มากหนึ่งข้อมูลกับอีกเอนทิตี้หนึ่งในลักษณะที่เป็นหนึ่งต่อหนึ่ง เช่น เอนทิตี้นักศึกษา กับเอนทิตี้โครงงานวิจัยมี ความสัมพันธ์กันเเบบหนึ่งต่อหนึ่งคือ นักศึกษาแต่ละคนทำโครงงานวิจัยได้ 1 โครงงานเท่านั้น เเละแต่ละ โครงงานวิจัยมีนักศึกษารับผิดชอบได้ไม่เกิน 1 คน เป็นต้น ดังภาพที่ 2.31
34 ภาพที่ 2.31 ความสัมพันธ์เเบบหนึ่งต่อหนึ่ง หมายเหตุ : จากแผนภาพแสดงความสัมพันธ์ระหว่างข้อมูล,นางสาวยุพา จันทะมาศ,2561. - ความสัมพันธ์เเบบหนึ่งต่อกลุ่ม (One - to - Many Relationship) เป็นการเเสดงความสัมพันธ์ของข้อมูลของเอนทิตี้หนึ่งว่ามีความสัมพันธ์กับข้อมูลหลาย ข้อมูลกับอีกเอนทิตี้หนึ่ง เช่น ความสัมพันธ์ของลูกค้าและคำสั่งซื้อเป็นเเบบหนึ่งต่อกลุ่ม คือ ลูกค้าแต่ละคนสามารถ สั่งซื้อหลายคำสั่งซื้อเเต่ละคำสั่งซื้อมาจากลูกค้าเพียงคนเดียว ดังภาพที่ 2.32 ภาพที่ 2.32 ความสัมพันธ์เเบบหนึ่งต่อกลุ่ม หมายเหตุ : จากแผนภาพอแสดงความสัมพันธ์ระหว่างข้อมูล,นางสาวยุพา จันทะมาศม2561. - ความสัมพันธ์เเบบกลุ่มต่อกลุ่ม (Mony to Many Relationship) เป็นการแสดงความสัมพันธ์ของข้อมูลของสองเอนทิตี้ในลักษณะเเบบกลุ่มต่อกลุ่ม เช่น ความสัมพันธ์ระหว่างคำสั่งซื้อกับสินค้าเป็นแบบกลุ่มต่อกลุ่มคือ แต่ละคำสั่งซื้ออาจสั่งซื้อสินค้าได้มากกว่า 1 ชนิด เเละในสินค้าแต่ละชนิด อาจปรากฎอยู่ในคำสั่งซื้อได้มากกว่า 1 คำสั่งซื้อ ดังภาพที่ 2.33 ภาพที่ 2.33 ความสัมพันธ์แบบกลุ่มต่อกลุ่ม หมายเหตุ : จากแผนภาพแสดงความสัมพันธ์ระหว่างข้อมูล,นางสาวยุพา จันทะมาศ,2561. ภาพที่ 2.33 E-R Diagram ของรูปภาพ Crow’s Foot Model หมายเหตุ : จากแผนภาพแสดงความสัมพันธ์ระหว่างข้อมูล,นางสาวยุพา จันทะมาศ,2561
35 ภาพที่ 2.34 E-R Diagram ของรูปแบบ Chen Model หมายเหตุ : จากแผนภาพแสดงความสัมพันธ์ระหว่างข้อมูล,นางสาวยุพา จันทะมาศ,2561. 2.10 ระบบจัดการฐานข้อมูล My SQL เป็น database Server ที่เหมาะกับองค์กรขนาดเล็กขนาดกลางที่มีข้อมูลไม่มากนักและเป็นระบบจัดการ ฐานข้อมูลเชิงสัมพันธ์ (Relational Database Management System) ซึ่งเป็นฟรีแวร์ จึงได้รับความนิยมอย่าง มากในปัจจุบัน สามารถดาวน์โหลดโปรแกรมและซอร์สโค้ด(Source Code) ได้จากอินเทอร์เน็ตโดยไม่ต้องเสีย ค่าใช้จ่าย และสามารถแก้ไขได้ตามความต้องการ พร้อมทั้งยังสนับสนุนการใช้งานบนระบบปฏิบัติการต่างๆ เช่น Unix, Mac และ Windows เป็นต้น(กิตติ ภักดีวัฒนะกุล.2552) 2.10.1 ชนิดข้อมูลใน MYSQL ชนิดของคอลัมน์พื้นฐานมี 3 ชนิดคือตัวเลข (Numeric) วันที่และเวลา (Data and Time) และตัวอักษร (String) แต่ละชนิดจะมีขนาดความกว้างของคอลัมน์ไม่เท่ากัน ดังนั้นเมื่อกำหนดคอลัมน์ในตารางบนฐานข้อมูล แล้วจะต้องคำนึงถึงชนิดของคอลัมน์ที่เหมาะสมกับข้อมูลด้วย คอลัมน์แต่ละชนิดมีรายละเอียดดังนี้(กิตติ ภักดี วัฒนะกุล.2552) 1) ตัวเลข (Number) ชนิดของตัวเลขแบ่งได้เป็นเลขจำนวนเต็ม (Integer) โดยสามารถกำหนดความยาวของข้อมูล (M) ไว้ภายในวงเล็บ [ ] ตัวอย่าง เช่น หากต้องการกำหนดความยาวเป็น 255 ให้แทน M ภายในวงเล็บด้วยเลข 255 ส่วนตัวเลขอีกชนิด คือ เลขจำนวนจริง (Floating Point) ที่แสดงเป็นตัวเลขทศนิยม เลขจำนวนจริงจะ ประกอบด้วยค่า M และ D ซึ่ง M คือ จำนวนเลขทั้งหมด (รวมจุดทศนิยม) และ D คือตัวเลขหลังจุดทศนิยม มี รายละเอียดดังภาพตารางต่อไปนี้
36 ภาพที่ 2.35ตารางเเสดงชนิดของเลขจำนวนเต็ม ภาพที่ 2.36 ตารางเเสดงชนิดของเลขจำนวนจริง หมายเหตุ : M คือ หากเป็นจำนวนเต็มจะหมายถึงความยาวของเลขจำนวนเต็มแต่หากเป็นจำนวนจริงจะหมายถึง จำนวนเลขทั้งหมด (รวมจุดทศนิยม) D คือ ตัวเลขหลังจุดทศนิยม 2) วันที่และเวลา (Date and Time) สามารถกำหนดให้คอลัมน์ใดๆ มีชนิดเป็นวันที่และเวลาได้โดยแสดงผลและรับข้อมูลได้ดังภาพตารางต่อไปนี้ ภาพที่ 2.37 ตารางชนิดของวันที่และเวลา
37 ภาพที่ 2.38ตารางแสดงชนิดของ TIMESTAMP (M) 3) สตริง (String) ชนิดของตัวอักษรแบ่งเป็น 3 ชนิดดังนี้ สตริงแบบธรรมดา ประกอบด้วยสติงชนิด Char (fixed Length Character) เเละ Varchar (Variable Langth Character) ระบุความยาวของข้อมูลชนิดนี้ได้ คอลัมน์ที่มีชนิดเป็น Char จะเก็บทั้งหมดของ ข้อมูลรวมทั้งค่าว่างด้วย (เก็บข้อมูลทั้งหมดเท่าขนาดที่กำหนด) เช่น ส่วน Varchar จะเก็บข้อมูลเท่ากับขนาดของ ข้อมูล ข้อความและ BLOB ซึ่งมีขนาดใหญ่มากใช้สำหรับเก็บข้อความที่ยาวมากๆ หรือข้อมูลที่เป็นไบนารี (Binary) นิยมใช้เก็บรูปภาพ ดูรายละเอียดจากตารางแสดงชนิดของข้อความ BLOB ENUM และ SET สตริงขนิด SET นั้นสามารถระบุค่าได้โดยการส่งผ่านค่า โดยระบุได้มากกว่า 1 ค่า เเต่ไม่เกิน 64 ค่า ส่วน EMUM (Enumeration) มีหลักการเหมือน SET ซึ่งยอมรับค่าที่ระบุได้มากกว่า 1 ค่า เเต่ไม่เกิน 65535 หรืออาจเป็นค่าว่าง (NULL) ก็ได้ รายละเอียดตารางต่อไปนี้ ภาพที่ 2.39 ตารางแสดงชนิดของสตริง ภาพที่ 2.40 ตารางแสดงชนิดของข้อความและ BLOB
38 ภาพที่ 2.41 ตารางแสดงชนิดของ ENUM และ SET สรุป เนื้อหาในบทนี้ได้กล่าวถึงการจัดการกับโครงสร้างของฐานข้อมูล ได้แก่ การสร้างฐานข้อมูลและตาราง การ แสดงรายละเอียดในฐานข้อมูล การแก้ไขโครงสร้างของตารางรวมไปถึงการลบตารางและฐานข้อมูล นอกจากนี้ยัง กล่าวถึงชนิดของตารางและข้อมูลใน My SQL เพื่อนำไปประยุกต์ใช้ร่วมกับเนื้อหาของบทอื่นๆต่อไป(กิตติ ภักดี วัฒนะกุล.2552) 2.11 Xampp คืออะไร เป็นโปรแกรม Apache web server ไว้จำลอง web server เพื่อไว้ทดสอบ สคริปหรือเว็บไซต์ในเครื่อง ของเรา โดยที่ไม่ต้องเชื่อมต่ออินเตอร์เน็ตและไม่ต้องมีค่าใช้จ่ายใดๆ ง่ายต่อการติดตั้งและใช้งานโปรแกรม Xampp จะมาพร้อมกับ PHP ภาษาสำหรับพัฒนาเว็บแอพลิเคชั่นที่เป็นที่นิยม,MySQL ฐานข้อมูล, Apache จะทำหน้าที่ เป็นเว็บ เซิร์ฟเวอร์, Perl อีกทั้งยังมาพร้อมกับ OpenSSL, phpMyadmin (ระบบบริหารฐานข้อมูลที่พัฒนาโดย PHP เพื่อใช้เชื่อมต่อไปยังฐานข้อมูล สนับสนุนฐานข้อมูล MySQL และ SQLite โปรแกรม Xampp จะอยู่ใน รูปแบบของไฟล์ Zip, tar, 7z หรือ exe โปรแกรม Xampp อยู่ภายใต้ใบอนุญาตของ GNU General Public License แต่บางครั้งอาจจะมีการเปลี่ยนแปลงเรื่องของลิขสิทธิ์ในการใช้งาน จึงควรติดตามและตรวจสอบโปรแกรม ด้วย 2.11.1 เวอร์ชั่นในปี 2022 โปรแกรม XAMPP เวอร์ชั่นล่าสุดคือ - XAMPP for Windows เวอร์ชั่น 7.4.29, 8.0.19 & 8.1.6 สามารถใช้งานได้ Windows 2008, 2012, Vista, 7, 8 หรือเวอร์ชั่นที่ใหม่กว่า ไม่รองรับ Windows XP or 2003 -XAMPP for Linux เวอร์ชั่น 7.4.29, 8.0.19 & 8.1.6 รองรับ Linux ทุกรุ่นส่วนใหญ่, including Debian, RedHat, CentOS, Ubuntu, Fedora, Gentoo, Arch, SUSE. -XAMPP for OS X เวอร์ชั่น 7.4.29, 8.0.19, 8.1.6, 7.4.29, 8.0.19 & 8.1.6 รองรับ Mac OS X 10.6 หรือ เวอร์ชั่นที่ใหม่กว่า ดังภาพ 2.42