โครงงาน

การพัฒนาระบบการจัดการสต๊อกสินค้าร้านฮายาช็อป Haya shop stock management system นางสาวสุภาวดี หลงสาม๊ะ รหัสนักศึกษา 6413013805027 นางสาวอารียา นางา รหัสนักศึกษา 6413013805042 นางสาวฮารีตา นวลน้อย รหัสนักศึกษา 6413013805045 รายงานเล่มนี้เป็นส่วนหนึ่งของรายวิชา คธ 0415 โครงงานคอมพิวเตอร์เพื่อธุรกิจ หลักสูตรอนุปริญญา สาขาคอมพิวเตอร์ธุรกิจ วิทยาลัยชุมชนสตูล ปีการศึกษา พ.ศ.2565

การพัฒนาระบบการจัดการสต๊อกสินค้าร้านฮายาช็อป Haya shop stock management system นางสาวสุภาวดี หลงสาม๊ะ รหัสนักศึกษา 6413013805027 นางสาวอารียา นางา รหัสนักศึกษา 6413013805042 นางสาวฮารีตา นวลน้อย รหัสนักศึกษา 6413013805045 รายงานเล่มนี้เป็นส่วนหนึ่งของรายวิชา คธ 0415 โครงงานคอมพิวเตอร์เพื่อธุรกิจ หลักสูตรอนุปริญญา สาขาคอมพิวเตอร์ธุรกิจ วิทยาลัยชุมชนสตูล ปีการศึกษา พ.ศ.2565

ข การพัฒนาระบบการจัดการสต๊อกสินค้าร้านฮายาช็อป Haya shop stock management system นางสาวสุภาวดี หลงสาม๊ะ รหัสนักศึกษา 6413013805027 นางสาวอารียา นางา รหัสนักศึกษา 6413013805042 นางสาวฮารีตา นวลน้อย รหัสนักศึกษา 6413013805045 โครงงานคอมพิวเตอร์ธุรกิจนี้ได้รับการพิจารณาอนุมัติให้นับเป็นส่วนหนึ่งของการ ศึกษตามหลักสูตรอนุปริญญา สาขาคอมพิวเตอร์ธุรกิจ .......................................................................อาจารย์ประจำหลักสูตร ( นายมนตรี กุมวาปี ) คณะกรรมการสอบโครงงานคอมพิวเตอร์เพื่อธุรกิจ .......................................................................ประธานกรรมการ ( นายมนตรี กุมวาปี ) .......................................................................กรรมการ ( นาวสาวนัจญมา มะแอเคียน ) .......................................................................กรรมการ ( นางสาววาฐินี พรรณราย ) วันที่............เดือน...................................พ.ศ................ ลิขสิทธิ์ของวิทยาลัยชุมชนสตูล ชื่อโครงงานทางคอมพิวเตอร์ธุรกิจ การพัฒนาระบบการจัดการสต๊อกสินค้าร้านฮายาช็อป ผู้เขียน นางสาวสุภาวดี หลงสาม๊ะ นางสาวอารียา นางา นางสาวฮารีตา นวลน้อย อนุปริญญา สาขาคอมพิวเตอร์ธุรกิจ

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

ง หัวข้อโครงงาน : พัฒนาระบบการจัดการสต๊อกสินค้าร้านฮายาช็อป : haya shop stock management system ผู้จัดทำโครงงาน : นางสาวสุภาวดี หลงสาม๊ะ รหัสนักศึกษา 6413013805027 : นางสาวอารียา นางา รหัสนักศึกษา 6413013805042 : นางสาวฮารีตา นวลน้อย รหัสนักศึกษา 6413013805045 หลักสูตร : อนุปริญญา สาขาคอมพิวเตอร์ธุรกิจ วิทยาลัยชุมชนสตูล อาจารย์ที่ปรึกษา : อาจารย์มนตรี กุมวาปี บทคัดย่อ โครงงานเรื่องพัฒนาระบบการจัดการสต๊อกสินค้าร้านฮายาช็อปครั้งนี้ มีวัตถุประสงค์คือ เพื่อพัฒนา ระบบสต๊อกสินค้าของร้านฮายาช็อป เพื่อประเมินประสิทธิภาพระบบการจัดการสต๊อกสินค้าร้านฮายาช็อป และเพื่อประเมินความพึงพอใจของผู้ใช้งานระบบการจัดการสต๊อกสินค้าร้านฮายาช็อป คณะผู้จัดทำโครงงานได้ ใช้เครื่องมือในการหาสาเหตุและปัญหาโดยใช้แผนผังก้างปลา (Ishikawa Diagram) เพื่อวิเคราะห์ปัญหาและ ค้นหาแนวทางแก้ไข ผลการวิเคราะห์พบว่า ร้านฮายาช็อปมีปัญหาเรียงตามความสำคัญดังนี้ ปัญหาด้านการ นำเข้าข้อมูล เกิดจากไม่มีการจัดทำระบบสินค้าคงคลัง มีการจัดการเอกสารรูปแบบกระดาษทำให้เกิดความ ผิดพลาดบ่อยครั้ง ครอบคลุมไปถึง การจัดเก็บ การค้นหาและการกำจัด ที่มีกระดาษเป็นทรัพยากรหลักโดยใช้ พื้นที่ในการจัดการค่อนข้างมาก ทำให้ใช้เวลาในการค้นหาเอกสารนาน นอกจากจะทำให้ล่าช้าในการทำงาน แล้วอาจทำให้มีการสูญหายหรือชำรุดของข้อมูลได้ จากปัญหาดังกล่าวคณะผู้จัดทำโครงงานได้ทำการใช้ เครื่องมือการจัดการในการแก้ไขปัญหาดังนี้ ด้วยการนำเอาเทคโนโลยีทางด้านคอมพิวเตอร์มาช่วยในการทำ ระบบฐานข้อมูล อีกทั้งสามารถตรวจสอบสินค้าคงคลังและการเข้า-ออกสินค้าได้ทุกที่ที่มีอุปกรณ์เชื่อมต่ออยู่กับ Internet เพื่อช่วยในการค้นหาข้อมูล ลดความผิดพลาดและอำนวยความสะดวกในการจัดเก็บข้อมูลอีกทั้งไม่ให้ เกิดการชำรุดหรือสูญหายของข้อมูล สินค้าค้างสต๊อกมีการเปลี่ยนแปลงด้านการบริหารสินค้าคงคลังมีการตรวจ นับสินค้าคงคลังและจัดทำใบบันทึกรายการสินค้าสินค้าคงคลัง มีการจัดเรียงหมวดหมู่ตามประเภทมีการวาง แผนการจัดการสต๊อกสินค้าร้านฮายาช็อปให้ทำงานอย่างเป็นระบบมากขึ้น

จ สารบัญ บทที่1 บทนำ............................................................................................................................................1 1.1 ความเป็นมาและความสำคัญของโครงงาน.............................................................................................1 1.2 วัตถุประสงค์ของโครงงาน .....................................................................................................................2 1.3 สมมติฐาน .............................................................................................................................................2 1.4 ขอบเขตของโครงงาน ............................................................................................................................2 1.5 ประโยชน์ที่คาดว่าจะได้รับ ....................................................................................................................2 1.6 นิยามศัพท์ฉพาะ....................................................................................................................................3 1.7 กรอบแนวคิดของโครงงาน ....................................................................................................................3 บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง....................................................................................................4 2.1 ร้านฮายาช็อป .......................................................................................................................................4 2.2 องค์ประกอบพื้นฐานของการใช้งาน PHP..............................................................................................4 2.3 วงจรพัฒนาระบบ (System Development Life Cycle (SDLC)).....................................................17 2.4 ภาษา HTML.......................................................................................................................................19 2.5 Responsive Website.......................................................................................................................21 2.6 Bootstrap..........................................................................................................................................22 2.7 ภาษา (Cascading Style Sheets : CSS) Css ...................................................................................26 2.8 แผนภาพกระแสข้อมูล (Data Flow Diagram : DFD)........................................................................27 2.9 แบบจำลองความสัมพันธ์(E-R diagram)............................................................................................31 2.10 ระบบจัดการฐานข้อมูล My SQL......................................................................................................41 2.11 Xampp คืออะไร.............................................................................................................................44 2.12 Sublime Text คืออะไร...................................................................................................................45 2.13 การประเมินระบบ.............................................................................................................................46 2.14 เอกสารและงานวิจัยที่เกี่ยวข้อง.........................................................................................................47 บทที่ 3 วิธีการดำเนินงาน.......................................................................................................................49 3.1 ศึกษาและรวบรวมข้อมูล.....................................................................................................................49 3.2 การวิเคราะห์ระบบ..............................................................................................................................50 3.3 การออกแบบฐานข้อมูล.......................................................................................................................60 3.4 การพัฒนาระบบ..................................................................................................................................67 3.5 การเก็บรวบรวมและวิเคราะห์ข้อมูลผลการประเมินระบบ...................................................................79 บทที่ 4 ผลการดำเนินงานโครงงาน.........................................................................................................81 4.1. ผลการพัฒนาระบบ............................................................................................................................81 4.2 ผลการวิเคราะห์ข้อมูล.........................................................................................................................90 บทที่5 สรุปผลและข้อเสนอแนะ..............................................................................................................93 5.1 สรุปผลการดำเนินงาน.........................................................................................................................93 5.2 ปัญหาการจัดสร้างโครงงาน.................................................................................................................93

ฉ 5.3 ข้อเสนอแนะ.......................................................................................................................................94 บรรณานุกรม..........................................................................................................................................95 ภาคผนวก...............................................................................................................................................96 ภาคผนวก ก..............................................................................................................................................97 ภาคผนวก ข............................................................................................................................................101 ภาคผนวก ค............................................................................................................................................103 ภาคผนวก ง.............................................................................................................................................106 เอกสารเสนอหัวข้อโครงงานทางคอมพิวเตอร์ธุรกิจ...............................................................................108

ช สารบัญตาราง ตารางที่ 2.1 ตัวอย่างแสดงให้เห็นถึงไวยากรณ์ต่างๆที่ใช้ใน <input> แท็ก...................................................20 ตารางที่ 3.1 ตารางพนักงาน..........................................................................................................................60 ตารางที่ 3.2 ตารางตำแหน่ง..........................................................................................................................61 ตารางที่ 3.3 ตารางสินค้า...............................................................................................................................61 ตารางที่ 3.4 ตารางประเภทสินค้า..................................................................................................................62 ตารางที่ 3.5 ตารางรายละเอียดการขาย........................................................................................................62 ตารางที่ 3.6 ตารางการขาย (ใบเสร็จ)............................................................................................................63 ตารางที่ 3.7 ตารางเคลื่อนไหวสินค้า..............................................................................................................64 ตารางที่ 3.8 ตารางนำเข้าสินค้า.....................................................................................................................64 ตารางที่ 3.9 ตารางรายละเอียดนำเข้าสินค้า..................................................................................................64 ตารางที่ 4.1 ผลการประเมินความพึงพอใจต่อการใช้งานระบบสต๊อกสินค้าของร้านฮายาช็อป……………………91 ตารางที่ 4.2 ผลการประเมินประสิทธิภาพระบบสต๊อกสินค้าของร้าน ฮายาช็อป............................................92

ซ สารบัญรูปภาพ ภาพที่ 2.1 หลักการทำงานของ PHP...............................................................................................................5 ภาพที่ 2.2 พิมพ์ยูอาร์แอลเข้าสู่หน้าจอโปรแกรม AppServ.............................................................................6 ภาพที่ 2.3 ป้อนชื่อผู้ใช้และรหัสผ่าน................................................................................................................7 ภาพที่ 2.4 สร้างฐานข้อมูลใหม่........................................................................................................................8 ภาพที่ 2.5 ผลการสร้างฐานข้อมูล....................................................................................................................8 ภาพที่ 2.6 ลบฐานข้อมูล..................................................................................................................................9 ภาพที่ 2.7 ยืนยันการลบฐานข้อมูล..................................................................................................................9 ภาพที่ 2.8 ผลการลบฐานข้อมูล.....................................................................................................................10 ภาพที่ 2.9 รายการเขตข้อมูลของแฟ้มภาพตารางสินค้า.................................................................................10 ภาพที่ 2.10 สร้างแฟ้มตาราง.........................................................................................................................11 ภาพที่ 2.11 รายละเอียดข้อมูล......................................................................................................................11 ภาพที่ 2.12 รายละเอียดของเขตข้อมูล..........................................................................................................12 ภาพที่ 2.13 สร้างแฟ้มตารางสินค้า................................................................................................................12 ภาพที่ 2.14 หน้าจอสำหรับเพิ่มข้อมูล............................................................................................................13 ภาพที่ 2.15 กรอกข้อมูลที่ต้องการเพิ่มลงไปในคอลัมน์..................................................................................13 ภาพที่ 2.16 เลือกแฟ้มตารางสินค้าในฐานข้อมูล............................................................................................14 ภาพที่ 2.17 รายละเอียดข้อมูล......................................................................................................................14 ภาพที่ 2.18 ลบข้อมูลทั้งหมดออกจากแฟ้มตาราง .........................................................................................15 ภาพที่ 2.19 กล่องข้อความสำหรับยืนยันการลบข้อมูล...................................................................................15 ภาพที่ 2.20 ลบแฟ้มตารางออกจากฐานข้อมูล...............................................................................................16 ภาพที่ 2.21 ยืนยันการลบแฟ้มตาราง............................................................................................................16 ภาพที่ 2.22 วงจรการพัฒนาระบบ : System Development Life Cycle (SDLC) .....................................17 ภาพที่ 2.23 ตัวอย่าง HTML5........................................................................................................................19 ภาพที่ 2.24 โครงสร้างองค์ประกอบ HTML5................................................................................................20 ภาพที่ 2.25 โครงสร้างที่ถูกพัฒนาแบบ Responsive Website....................................................................21 ภาพที่ 2.26 หน้าฟอร์ม Bootstrap แนวตั้งแบบฟอร์ม (เริ่มต้น)....................................................................23 ภาพที่ 2.27 การสร้างหน้าฟอร์ม Bootstrap แบบแนวตั้ง.............................................................................24 ภาพที่ 2.28 หน้าฟอร์ม Bootstrap แบบอินไลน์...........................................................................................24 ภาพที่ 2.29 การสร้างหน้าฟอร์ม Bootstrap แบบอินไลน์.............................................................................25 ภาพที่ 2.30 หน้าฟอร์ม Bootstrap แบบแนวนอน........................................................................................25 ภาพที่ 2.31 การสร้างหน้าฟอร์ม Bootstrap แบบแนวนอน..........................................................................26 ภาพที่ 2.32 ตัวอย่าง DFD.............................................................................................................................27 ภาพที่ 2.33 สัญลักษณ์ที่ใช้ใน DFD ...............................................................................................................28 ภาพที่ 2.34 ตัวอย่าง Context Diagram ของระบบงานขาย........................................................................29 ภาพที่ 2.35 ตัวอย่าง DFD Level 0 ของระบบงานขาย................................................................................30

ฌ ภาพที่ 2.36 DFD Level 1 ของ Process 4.0 ระบบงานขาย (จากภาพที่ 2.35)...........................................30 ภาพที่ 2.37 ตัวอย่าง DFD ที่ไม่สมดุลกัน.......................................................................................................31 ภาพที่ 2.38 ตัวอย่าง E-R Diagram...............................................................................................................31 ภาพที่ 2.39 สัญลักษณ์ที่ใช้ใน E-R Diagram.................................................................................................32 ภาพที่ 2.40 ตัวอย่าง E-R Diagram ตามมาตรฐาน Chen และ Crow’s Foot Model ................................32 ภาพที่ 2.41 ความแตกต่างระหว่าง Entity Type และ Entity Instnstance................................................33 ภาพที่ 2.42 สัญลักษณ์ของ Entity Type......................................................................................................33 ภาพที่ 2.43 Weak Entity............................................................................................................................34 ภาพที่ 2.44 Attribute ของ Entity “STUDENT”........................................................................................35 ภาพที่ 2.45 ตัวอย่าง Simple และ Composite Attribute.........................................................................35 ภาพที่ 2.46 ตัวอย่าง Single-valued และ Multi-valued Attribute..........................................................36 ภาพที่ 2.47 ตัวอย่าง Identifier/Primary Key Attribute............................................................................37 ภาพที่ 2.48 ตัวอย่าง Derived Attribute.....................................................................................................37 ภาพที่ 2.49 สัญลักษณ์ Rrlationship ระหว่าง Entity “EMPLOYEE”กับ “DEPARTMANT”......................38 ภาพที่ 2.50 การจับคู่ระหว่างสมาชิกของ Antity “EMPLOYEE” กับ “DEPARTMANT”(กิตติ ภักดีวัฒนะกุล.2551).......38 ภาพที่ 2.51 รูปสัญลักษณ์ของ Entity............................................................................................................39 ภาพที่ 2.52 สัญลักษณ์ของ Attribute...........................................................................................................39 ภาพที่ 2.53 สัญลักษณ์ของ Relationship ....................................................................................................40 ภาพที่ 2.54 ความสัมพันธ์เเบบหนึ่งต่อหนึ่ง ...................................................................................................40 ภาพที่ 2.55 ความสัมพันธ์เเบบหนึ่งต่อกลุ่ม ...................................................................................................40 ภาพที่ 2.56 ความสัมพันธ์แบบกลุ่มต่อกลุ่ม ...................................................................................................41 ภาพที่ 2.57 E-R Diagram ของรูปแบบ Chen Model .................................................................................41 ภาพที่ 2.58 ตารางเเสดงชนิดของเลขจำนวนเต็ม...........................................................................................42 ภาพที่ 2.59 ตารางเเสดงชนิดของเลขจำนวนจริง...........................................................................................42 ภาพที่ 2.60 ตารางชนิดของวันที่และเวลา.....................................................................................................43 ภาพที่ 2.61 ตารางแสดงชนิดของ TIMESTAMP (M).....................................................................................43 ภาพที่ 2.62 ตารางแสดงชนิดของสตริง..........................................................................................................43 ภาพที่ 2.63 ตารางแสดงชนิดของข้อความและ BLOB...................................................................................44 ภาพที่ 2.64 ตารางแสดงชนิดของ ENUM และ SET......................................................................................44 ภาพที่ 2.65 XAMPP for Windows 8.0.28, 8.1.17 & 8.2.4.......................................................................45 ภาพที่ 3.1 แผนผังปัญหาของระบบงานสต๊อกสินค้าฮายาช๊อป………………………………………………………………. 49 ภาพที่ 3.2 การทำงานของระบบ………………………………………………………………………………………………………...50 ภาพที่ 3.3 context diagram Lavel 0……………………………………………………………………………………………… 51 ภาพที่ 3.4 Data Flow Diagram Level 1………………………………………………………………………………………….52 ภาพที่ 3.5 Data flow diagram Lavel 2 Process 1 เข้าสู่ระบบ………………………………………………………… 53 ภาพที่ 3.6 Data flow diagram Lavel 2 Process 2 จัดการข้อมูลพื้นฐาน…………………………………………. 54 ภาพที่ 3.7 Data flow diagram Lavel 2 Process 3 จัดการข้อมูลการขาย…………………………………………..55

ญ ภาพที่ 3.8 Data flow diagram level 3 Process 2.1 จัดการข้อมูลสมาชิก………………………………………... 56 ภาพที่ 3.9 Data flow diagram level 3 Process 2.2 จัดการข้อมูลตำแหน่ง…………………………………….... 57 ภาพที่ 3.10 Data flow diagram level 3 Process 2.3 จัดการข้อมูลสินค้า………………………………………… 58 ภาพที่ 3.11 Data flow diagram level 3 Process 2.4 จัดการข้อมูลประเภทสินค้า……………………………..59 ภาพที่ 3.12 E-R Diagram………………………………………………………………………………………………………………… 65 ภาพที่ 3.13 สร้างฐานข้อมูของร้านฮายาช็อป (stock )………………………………………………………………………….67 ภาพที่ 3.14 สร้างฐานข้อมูลตารางตำแหน่ง (position)…………………………………………………………………………67 ภาพที่ 3.15 สร้างฐานข้อมูลตารางสินค้า (product)……………………………………………………………………………. 69 ภาพที่ 3.16 สร้างฐานข้อมูลตารางนำเข้าสินค้า (product_receive)…………………………………………………….. 70 ภาพที่ 3.17 สร้างฐานข้อมูลตารางรายละเอียดนำเข้าสินค้า (receive_detail)………………………………………..71 ภาพที่ 3.18 สร้างฐานข้อมูลตารางเคลื่อนไหวสินค้า (product_transaction)…………………………………………72 ภาพที่ 3.19 สร้างข้อมูลตารางประเภทสินค้า (product_type)……………………………………………………………..73 ภาพที่ 3.20 สร้างฐานข้อมูลตารางการขาย (sale)………………………………………………………………………………..74 ภาพที่ 3.21 สร้างฐานข้อมูลตารางรายละเอียดการขาย (sale_detail)……………………………………………………75 ภาพที่ 3.22 สร้างฐานข้อมูลตารางพนักงาน (staff)……………………………………………………………………………… 76 ภาพที่ 3.23 หน้าโปรแกรมของผู้ดูเเลระบบ ส่วนที่ 1…………………………………………………………………………….77 ภาพที่ 3.24 หน้าโปรแกรมของผู้ดูเเลระบบ ส่วนที่ 2…………………………………………………………………………….77 ภาพที่ 3.25 หน้าโปรแกรมของผู้ดูเเลระบบ ส่วนที่ 3…………………………………………………………………………….78 ภาพที่ 3.26 หน้าโปรแกรมของผู้ดูเเลระบบ ส่วนที่ 4…………………………………………………………………………….78 ภาพที่ 3.27 หน้าโปรแกรมของพนักงาน………………………………………………………………………………………………79 ภาพที่ 4.1 หน้าล็อกอิน……………………………………………………………………………………………………………………. 81 ภาพที่ 4.2 หน้าหลัก………………………………………………………………………………………………………………………… 82 ภาพที่ 4.3 ฟอร์มเพิ่มสินค้า............................................................................................................................82 ภาพที่ 4.4 รายการข้อมูลสินค้า......................................................................................................................83 ภาพที่ 4.5 รายการข้อมูลสินค้า......................................................................................................................83 ภาพที่ 4.6 ฟอร์มเพิ่มข้อมูลพนักงาน .............................................................................................................84 ภาพที่ 4.7 ข้อมูลพนักงาน .............................................................................................................................84 ภาพที่ 4.8 รายละเอียดข้อมูลพนักงาน ..........................................................................................................85 ภาพที่ 4.9 ฟอร์มเพิ่มประเภทสินค้า ..............................................................................................................85 ภาพที่ 4.10 รายการประเภทสินค้า................................................................................................................86 ภาพที่ 4.11 ฟอร์มเพิ่มตำแหน่ง.....................................................................................................................86 ภาพที่ 4.12 ข้อมูลตำแหน่ง ...........................................................................................................................87 ภาพที่ 4.13 ฟอร์มนำเข้าสินค้า......................................................................................................................87 ภาพที่ 4.14 รายการนำเข้าสินค้า...................................................................................................................88 ภาพที่ 4.15 ข้อมูลการเคลื่อนไหวสินค้า.........................................................................................................88 ภาพที่ 4.16 รายการข้อมูลการขาย................................................................................................................89 ภาพที่ 4.17 รายการข้อมูลการขาย................................................................................................................89

1 บทที่1 บทนํา 1.1 ความเป็นมาและความสำคัญของโครงงาน ความก้าวหน้าทางด้านวิทยาศาสตร์และเทคโนโลยีทำให้มีการพัฒนาคิดค้นเชื่อมโยงการติดต่อสื่อสาร ให้สะดวกและรวดเร็วยิ่งขึ้น จึงทำให้บทบาทของเทคโนโลยีสารสนเทศมีความสำคัญต่อการทำงานและ ชีวิตประจำวันเป็นอย่างมาก ในการดำเนินกิจกรรมต่าง ๆ เทคโนโลยีสารสนเทศ ที่นำมาใช้งานธุรกิจ สามารถ ใช้ได้ทั้งธุรกิจขนาดเล็กไปจนถึงธุรกิจขนาดใหญ่ และในการทำธุรกิจที่มีการผลิตสินค้าเกือบทุกรูปแบบ มักจะมี การจัดการสินค้าคงคลัง ซึ่งหากสามารถนําเทคโนโลยีสารสนเทศมาใช้ในการจัดการคลังสินค้าด้วยเทคโนโลยีใน สมัยนี้ที่พัฒนาและก้าวไกลอย่างมาก จะทำให้โปรแกรมฐานข้อมูลนี้เกิดขึ้นเพื่อให้ผู้ที่ต้องการใช้งานในการเก็บ ข้อมูลต่างๆ มีตัวเลือกเพิ่มเติมในการเลือกใช้งานโปรแกรม (ศุภโชค คิดเหมาะ,2016) ซึ่งผู้ใช้งานนั้นสามารถ เลือกใช้งานโปรแกรมได้อย่างสะดวกสบายตามความต้องการและความเหมาะสมของผู้ใช้ อีกทั้งยังสามารถช่วย ในการจัดเก็บข้อมูลที่มีความสำคัญต่างๆ ได้อย่างปลอดภัยไม่ต้องกลัวหรือกังวลว่าข้อมูลจะหายหรือเกิดการ รั่วไหลของข้อมูล เพื่อให้เกิดการบริการภายใต้ต้นทุนที่เกิดประสิทธิภาพคุ้มค่าในการลงทุนตามขนาดธุรกิจที่ กำหนด ในการจัดเก็บสินค้าแบบเดิมอาจจะไม่มีเทคโนโลยีเข้ามาช่วยในการจัดเก็บสินค้ามากนัก ส่วนใหญ่จะที่ ทำการนับด้วยมือ เช็คของด้วยสายตา การจัดการระบบฐานข้อมูลถูกเก็บรวบรวมข้อมูลอย่างเป็นระบบทางอิเล็กทรอนิกส์ ซึ่งสามารถเก็บ ข้อมูลได้ทุกประเภท ไม่ว่าจะเป็นคํา ตัวเลข รูปภาพ วิดีโอ และไฟล์ สามารถใช้ซอฟต์แวร์ที่เรียกว่าระบบการ จัดการฐานข้อมูล (DBMS) เพื่อจัดเก็บ กู้คืน และแก้ไขข้อมูล ในระบบคอมพิวเตอร์เพื่อให้ผู้ใช้หลาย หน่วยงาน ในองค์กรสามารถเรียกใช้ข้อมูลที่จัดเก็บไว้ได้ตามความต้องการของแต่ละหน่วยงานถ้าเก็บข้อมูลซ้ำซ้อนกัน หลายแห่ง เมื่อมีการปรับปรุงข้อมูลแล้วปรับปรุงข้อมูลไม่ครบทำให้ข้อมูลเกิดความขัดแย้งกันของข้อมูลตามมา และยังเปลืองเนื้อที่การจัดเก็บข้อมูลด้วย การรวมแฟ้มข้อมูลทั้ง หมดเข้าด้วยกันแล้วเก็บไว้จึงทำให้เกิดระบบ การจัดการฐานข้อมูล (Database Management system (DBMS) (จรณิต แก้วกังวาล ,2540) การจัดเก็บสินค้าหรือสต๊อกสินค้ามีการจัดเก็บในรูปแบบเอกสารซึ่งในแต่ละปีจะมีจำนวนของสต็อก สินค้าที่จะต้องนํามาจัดเก็บเพิ่มขึ้นทุกปี การจัดเก็บในรูปแบบของเอกสารนั้น ยิ่งข้อมูลมีจำนวนมาก การค้นหา ก็ต้องใช้เวลาเพิ่มขึ้นมากเท่านั้น และจากการจัดเก็บในรูปแบบของเอกสารจึงทำได้ยากขึ้น ตามจำนวนของ เอกสารที่เพิ่มขึ้น ร้านฮายาช็อปจัดจําหน่ายรองเท้าแฟชั่นหลากหลายประเภททำให้ปัญหาที่พบคือ การจัดการเอกสาร ในรูปแบบกระดาษ ทำให้เกิดความผิดพลาดบ่อยครั้ง ครอบคลุมไปถึง การจัดเก็บ การค้นหาและการกําจัด ที่มี กระดาษเป็นทรัพยากรหลักโดยใช้พื้นที่ในการจัดการค่อนข้างมาก เนื่องจากต้องมีการแยกประเภทของกลุ่ม เอกสารเพื่อความเป็นระเบียบ แล้วดำเนินการจัดเก็บเข้าแฟ้มในตู้หรือชั้นเอกสาร ซึ่งอาจจะมีปัญหาในการ ตรวจเช็คหรือต้องการนำมาใช้งานเนื่องจากต้องค้นเอกสารมากมาย ทำให้ใช้เวลาในการค้นหาเอกสารนาน นอกจากจะทำให้ล่าช้าในการทำงานแล้วอาจทำให้มีการสูญหายหรือชํารุดของข้อมูลได้ จากปัญหาดังกล่าวคณะผู้จัดทําโครงงานได้มีแนวคิดในการพัฒนาระบบการจัดการสต๊อกสินค้าของ ร้านฮายาช็อปด้วยการนําเอาเทคโนโลยีทางด้านคอมพิวเตอร์มาช่วยในการทำระบบฐานข้อมูล อีกทั้งสามารถ

2 ตรวจสอบสินค้าคงคลังและการเข้า-ออกสินค้าได้ทุกที่ที่มีอุปกรณ์เชื่อมต่ออยู่กับInternet เพื่อช่วยในการค้นหา ข้อมูล ลดความผิดพลาดและอํานวยความสะดวกในการจัดเก็บข้อมูลอีกทั้งไม่ให้เกิดการชํารุดหรือสูญหายของ ข้อมูลโดยระบบจะช่วยเพิ่มประสิทธิภาพมากยิ่งขึ้น 1.2 วัตถุประสงค์ของโครงงาน 1.2.1 เพื่อพัฒนาระบบสต๊อกสินค้าของร้านฮายาช็อป 1.2.2 เพื่อประเมินประสิทธิภาพระบบการจัดการสต๊อกสินค้าร้านฮายาช็อป 1.2.3 เพื่อประเมินความพึงพอใจของผู้ใช้งานระบบการจัดการสต๊อกสินค้าร้านฮายาช็อป 1.3 สมมติฐาน 1.3.1 ระบบการจัดการสต๊อกสินค้าร้านฮายาช็อปมีประสิทธิภาพอยู่ในเกณฑ์ดี 1.3.2 ผู้ใช้งานระบบการจัดการสต๊อกสินค้าร้านฮายาช็อปมีความพึงพอใจอยู่ในระดับมาก 1.4 ขอบเขตของโครงงาน 1.4.1 ขอบเขตด้านประชากรและกลุ่มตัวอย่าง 1) ประชากร ได้แก่ พนักงานผู้ปฏิบัติงานและผู้มีส่วนเกี่ยวข้องในการดําเนินงานระบบการ จัดการสต๊อกสินค้าร้านฮายาช็อป จำนวน 5 คน 2) กลุ่มตัวอย่าง ได้แก่ พนักงานผู้ปฏิบัติงานและผู้ที่เกี่ยวข้องในการดําเนินงานระบบการ จัดการสต๊อกสินค้าร้านฮายาช็อป ประกอบด้วย ผู้ดูแลระบบ จำนวน 1 คน พนักงานขาย จำนวน 1คน ผู้เชี่ยวชาญ จำนวน 1 คน โดยใช้วิธีสุ่มตัวอย่างเจาะจง 1.4.2 ขอบเขตด้านเนื้อหา ขอบเขตด้านผู้ใช้งาน แบ่งตามกลุ่มผู้ใช้งาน ออกเป็น 2 กลุ่มดังนี้ 1) ผู้ดูแลระบบ (Admin) - สามารถจัดการข้อมูลของพนักงานได้ - สามรถจัดการข้อมูลและรายละเอียดสินค้าได้ - สามารถจัดการข้อมูลประเภทของสินค้าได้ - สามารถจัดการข้อมูลการเคลื่อนไหวสินค้าได้ 2) พนักงานขาย - สามารถจัดการข้อมูลการขายและรายละเอียดการขายได้ - สามารถดูรายงานการขายตามช่วงเวลาได้ - เรียกดูข้อมูลและรายละเอียดสินค้าได้ - สามารถดูข้อมูลการเคลื่อนไหวสินค้าได้ 1.4.3 ขอบเขตด้านระยะเวลา โครงงานเรื่องนี้ทำการประเมินประสิทธิภาพระบบการจัดการสต๊อกสินค้าร้านฮายาช็อป ในช่วงวันที่ 24 พฤษภาคม 2566 ถึง 25 พฤษภาคม 2566 1.5 ประโยชน์ที่คาดว่าจะได้รับ 1.5.1 ร้านฮายาช็อปมีระบบบริหารจัดการสต๊อกสินค้า 1.5.2 ลดภาระการทำงานของพนักงานในการจัดการสต๊อกสินค้า 1.5.3 จะได้ระบบที่สามารถตรวจสอบประวัติการเข้าออกสินค้าภายในสต๊อกได้

3 1.6 นิยามศัพท์ฉพาะ 1.6.1 ระบบการจัดการสต๊อกสินค้า หมายถึง ระบบการจัดการสต๊อกสินค้าของร้านฮายาช็อป 1.6.2 ประสิทธิภาพระบบการจัดการสต๊อกสินค้า หมายถึง ประสิทธิภาพระบบการจัดการสต๊อกสินค้า ของร้านฮายาช็อป 1.6.3 ความพึงพอใจของผู้ใช้งาน หมายถึง ความพึงพอใจของผู้ใช้งานระบบการจัดการสต๊อกสินค้าร้าน ฮายาช็อป 1.7 กรอบแนวคิดของโครงงาน ตัวแปรต้น ตัวแปรตาม ระบบการจัดการสต๊อกสินค้า ของร้านฮายาช็อป ประสิทธิภาพระบบการจัดการ สต๊อกสินค้าของร้านฮายาช็อป ความพึงพอใจของผู้ใช้งานระบบ การจัดการสต๊อกสินค้าของร้าน ฮายาช็อป

4 บทที่ 2 เอกสารและงานวิจัยที่เกี่ยวข้อง ในการจัดทำโครงงานเรื่อง การพัฒนาระบบสต๊อกสินค้าร้านฮายาช็อปผู้จัดทําได้ศึกษาค้นคว้าเอกสาร และงานวิจัยที่เกี่ยวข้อง ดังต่อไปนี้ 2.1 ร้านฮายาช็อป 2.2 แนวคิดและหลักการเกี่ยวกับองค์ประกอบพื้นฐานของการใช้งาน PHP 2.3 แนวคิดและหลักการเกี่ยวกับวงจรพัฒนาระบบ (System Development 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 แนวคิดและหลักการเกี่ยวกับการวิเคราะห์และประเมินระบบ (Black box/ White box) 2.14 เอกสารและงานวิจัยที่เกี่ยวข้อง 2.1 ร้านฮายาช็อป ร้านฮายาช็อป ตั้งอยู่หมู่ที่ 4 ตำบลฉลุง อำเภอเมือง จังหวัดสตูล มีประชากร 2,358 คน ปัจจุบันเป็น เทศบาลขนาดกลางซึ่งมีความเจริญเติบโตของเมืองรองจากเทศบาลเมืองสตูลจําหน่ายเกี่ยวกับรองเท้าแฟชั่น หลากหลายแบบซึ่งทางร้านจะจําหน่ายให้แก่ลูกค้าทั่วไปบ้างก็มีตัวแทนจัดจําหน่ายต่างๆมาซื้อของที่ร้านทำให้ อํานวยความสะดวกสบายให้แก่ลูกค้าไม่ต้องเดินทางไปซื้อของตามห้างสรรพสินค้าหรือร้านขายรองเท้าที่ ห่างไกลจากบ้านดังนั้นทางร้านต้องมีระบบการจัดการที่ดีเพื่ออํานวยความสะดวกให้แก่ลูกค้าซึ่งทางร้านจะพบ ปัญหาระบบคลังสินค้าเดิมไม่มีประสิทธิภาพ และไม่มีการระบุไซส์ สีที่คงเหลือไม่มีการแยกหมวดหมู่สินค้าที่ ชัดเจน หรือจำนวนสินค้าที่จดไว้ไม่ตรงกับสินค้าที่มีอยู่ทำให้เกิดความผิดพลาดต่อลูกค้าเมื่อลูกค้าต้องการสินค้า แต่ไม่มีสินค้าจริงให้ลูกค้ายังทำให้เกิดความล่าช้าในการทำงาน การพัฒนาระบบการจัดการสต๊อกสินค้าร้านฮายาช็อปสำหรับการทำระบบสต๊อกสินค้าให้ตรงกับสินค้า คงคลังเพื่อช่วยให้การจําหน่ายสินค้าง่ายและรวดเร็วอีกทั้งไม่ก่อให้เกิดความล่าช้าในการทำงาน โดยระบบจะ ช่วยเพิ่มประสิทธิภาพในการทำงานของระบบคลังสินค้าสามารถนําไปใช้ในส่วนการทำงานต่างๆต่อไป 2.2 องค์ประกอบพื้นฐานของการใช้งาน PHP PHP ย่อมากจาก Personal Home Page ซึ่งเป็นภาษาสคริปต์ที่ถูกฝังไว้ในเว็บเพจที่สร้างด้วยภาษา HTML โดยเว็บเพจที่มีสคริปต์ PHP แทรกอยู่นั่นจะทำงานที่เว็บเซิร์ฟเวอร์ PHP ถือเป็นภาษาสคริปต์ที่ทำงานที่เว็บเซิร์ฟเวอร์ (Server Side Script) นั่นคือมันจะถูกแปลผลการ

5 ทำงานที่เว็บเซิร์ฟเวอร์ก่อน แล้วจึงส่งผลการทำงานที่เป็น HTML ธรรมดามาที่บราวเซอร์ของผู้ใช้งาน (วรรณิกา เนตรงาม.2544) ภาพที่ 2.1 หลักการทำงานของ PHP 2.2.1 รูปแบบการฝังสคริปต์ PHP ลงในเอกสาร แบบที่ 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”; ?>

6 แบบที่ 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 มีขั้นตอนดังนี้ -เปิดเว็บไซต์เบราว์เซอร์จากนั้นพิมพ์ยูอาร์แอล ลงในช่องเลขที่อยู่บนเว็บไซต์เบราว์เซอร์จะเข้าสู่หน้าจอ โปรแกรม AppServ (ในที่นี้ใช้ Google Chrome) โดยปฏิบัติตามลำดับหมายเลขที่กำหนด ดังภาพ 2.2 ภาพที่ 2.2 พิมพ์ยูอาร์แอลเข้าสู่หน้าจอโปรแกรม AppServ <% echo “you may optionally use ASP-Style tags”;%>

7 - คลิกที่ phpMyAdmin Database Manager และจะปรากฎหน้าจอสำหรับป้อนชื่อผู้ใช้ (Username) และ รหัสผ่าน (Password) (ใช้ชื่อผู้ใช้และรหัสผ่านเดียวกันกับขั้นตอนการติดตั้งโปรแกรม AppServ) และคลิกที่ปุ่ม “เข้าสู่ระบบ” เพื่อเข้าใช้งาน โดยปฏิบัติตามลำดับหมายเลขที่กำหนดดังภาพ 2.3 ภาพที่ 2.3 ป้อนชื่อผู้ใช้และรหัสผ่าน 2) การบริหารจัดการฐานข้อมูล MySQL ด้วย phpMyAdmin การบริหารจัดการฐานข้อมูล MySQL ในโปรแกรม phpMyAdmin ที่ควรมีดังนี้ การสร้างฐานข้อมูลใหม่ กําหนดให้สร้างฐานข้อมูลใหม่ชื่อdbshopด้วยโปรแกรม phpMyAdmin แสดงได้ดังตัวอย่างต่อไปนี้ ตัวอย่างที่ 1 แสดงการสร้างฐานข้อมูล dbshop -เปิดใช้งานโปรแกรม phpMyAdmin จากนั้นกรอกชื่อฐานข้อมูลที่ต้องการสร้างในช่อง “สร้างฐานข้อมูลใหม่” (ในที่นี้สร้างฐานข้อมูลชื่อ dbshop) จากนั้นคลิกที่ปุ่ม “สร้าง” โดยปฏิบัติตามหมายเลขที่กำหนด ดังภาพ 2.4 (ธัชกร วงษ์คําชัย.2558)

8 ภาพที่ 2.4 สร้างฐานข้อมูลใหม่ -โปรแกรม phpMyAdmin จะทำการสร้างฐานข้อมูลตามที่กำหนดและแจ้งผลการสร้างฐานข้อมูล ดังภาพ 2.5 ภาพที่ 2.5 ผลการสร้างฐานข้อมูล หมายเหตุ : การสร้างฐานข้อมูลใหม่จะไม่สามารถใช้ชื่อฐานข้อมูลซ้ำกับชื่อฐานข้อมูลที่มีอยู่แล้วและควรตั้งชื่อ ให้สอดคล้องกับระบบงานที่ต้องการพัฒนา เพื่อการจดจําที่ง่ายเมื่อย้อนเวลากลับมาแก้ไข

9 การลบฐานข้อมูล กรณีที่ต้องการลบฐานข้อมูลด้วยโปรแกรม phpMyAdmin แสดงได้ดังตัวอย่างต่อไปนี้(ธัชกรวงษ์คําชัย.2558) ตัวอย่างที่ 2 แสดงการลบฐานข้อมูล dbshop -เปิดใช้งานโปรแกรม phpMyAdmin จากนั้นเลือกฐานข้อมูลที่ต้องการลบ (ในที่นี้เลือกฐานข้อมูลชื่อ dbshop) จากนั้นคลิกที่รายการ “โยนทิ้ง” โดยปฏิบัติตามหมายเลขที่กำหนด ดังภาพ 2.6 ภาพที่ 2.6 ลบฐานข้อมูล -จะปรากฏกล่องข้อความแจ้งเตือนเพื่อยืนยันการลบฐานข้อมูล กรณีที่ต้องการลบให้คลิกที่ปุ่ม “ตกลง” ดังภาพ 2.7 ภาพที่ 2.7 ยืนยันการลบฐานข้อมูล

10 -โปรแกรม phpMyAdmin จะทำการลบฐานข้อมูลออกจากระบบและแจ้งผลการลบฐานข้อมูลให้ทราบ ดังภาพ 2.8 ภาพที่ 2.8 ผลการลบฐานข้อมูล หมายเหตุ : การลบฐานข้อมูลออกจากระบบนั้นต้องมั่นใจว่าไม่ได้ใช้ฐานข้อมูลดังกล่าวแล้ว หรือเพื่อป้องกัน การสูญหายของข้อมูลควรทำการสำรองข้อมูลไว้ก่อนทำการลบ การสร้างแฟ้มตาราง หลังจากทำการสร้างฐานข้อมูล dbshop ดังกล่าวข้างต้นแล้วนั้นจะเป็นเพียงฐานข้อมูลเปล่าซึ่งยังไม่มี แฟ้มตาราง (Table File) ในที่นี้กำหนดให้สร้างแฟ้มตารางสินค้า (tbl_product) แสดงรายละเอียด ดังภาพที่ 2.9 (ธัชกร วงษ์คำชัย.2558) ภาพที่ 2.9 รายการเขตข้อมูลของแฟ้มภาพตารางสินค้า

11 การสร้างแฟ้มตารางสินค้าในฐานข้อมูล dbshop ด้วยโปรแกรม phpMyAdmin แสดงได้ดังตัวอย่างต่อไปนี้ ตัวอย่างที่ 3 แสดงการสร้างแฟ้มตารางสินค้าในฐานข้อมูล dbshop -เปิดใช้งานโปรแกรม phpMyAdmin จากนั้นเลือกฐานข้อมูล db_shop ที่ต้องการสร้างแฟ้มตาราง จากนั้น กำหนดชื่อแฟ้มตารางและจำนวนของเขตข้อมูล (Field) จากนั้นคลิกปุ่ม “ลงมือ” โดยปฏิบัติตามหมายเลขที่ กำหนด ดังภาพ 2.10 (ชื่อแฟ้มตารางและจำนวนเขตของข้อมูลดังรายละเอียดในตารางที่ 1) ภาพที่ 2.10 สร้างแฟ้มตาราง -ปรากฏหน้าจอสำหรับให้กรอกชื่อเขตข้อมูลชนิดข้อมูลที่เก็บ ขนาดข้อมูล และรายละเอียดอื่นๆ ที่เกี่ยวข้อง ดังภาพ 2.11 ภาพที่ 2.11 รายละเอียดข้อมูล จากภาพอธิบายในส่วนต่างๆ ได้ดังนี้ 1) เขตข้อมูล สำหรับใส่ชื่อเขตข้อมูล 2) ชนิด สำหรับเลือกชนิดของข้อมูลที่ต้องการเก็บในเขตข้อมูลนั้น 3) ความยาว/เซต สำหรับกำหนดขนาดของข้อมูล

12 4) การเรียงลำดับ สำหรับกำหนดชนิดตัวอักษรที่ต้องการจัดเก็บในตารางข้อมูล 5) แอตทิบิวต์ สำหรับเลือกลักษณะเฉพาะของข้อมูลที่จะเก็บ เช่น ตัวเลขแบบคิดเครื่องหมาย บวกหรือลบ 6) ค่าว่างเปล่า (null) สำหรับเลือกว่า เขตข้อมูลนั้นสามารถใส่ค่าว่างได้หรือไม่ 7) คำปริยาย สำหรับกำหนดค่าเริ่มต้นของเขตข้อมูล (ค่า Default) 8) เพิ่มเติม สำหรับกำหนดค่าเพิ่มเติม เช่น กรณีที่เขตข้อมูลเก็บข้อมูลตัวเลขจำนวนเต็ม (Integer) จะสามารถเลือกให้มีการเพิ่มค่าอัตโนมัติ (auto_increment) ได้ 9) ไพรมารี เลือกเมื่อต้องการกำหนดให้เขตข้อมูลนั้นๆ เป็นกุญแจหลัก (Primary Key) 10) ดัชนีเลือกเมื่อต้องการให้เขตข้อมูลนั้นๆ เป็นดัชนี (Index) 11) เอกลักษณ์ เลือกเมื่อต้องการให้เขตข้อมูลนั้นเป็นเอกลักษณ์ (Unique) 12) หมายเหตุ สำหรับกรอกคำอธิบายเขตข้อมูลหรือข้อความอื่นๆ ที่ต้องการ -จากนั้นกรอกรายละเอียดของเขตข้อมูลตามที่กำหนดไว้ในตาราง แล้วคลิกที่ปุ่ม “บันทึก” ดังภาพ 2.12 ภาพที่ 2.12 รายละเอียดของเขตข้อมูล - โปรแกรม phpMyAdmin จะสร้างแฟ้มตารางสินค้าไว้ในฐานข้อมูล dbshop ดังภาพ 2.13 ภาพที่ 2.13 สร้างแฟ้มตารางสินค้า

13 การเพิ่มข้อมูลลงในแฟ้มตาราง การเพิ่มฐานข้อมูลลงไปในแฟ้มตาราง แสดงดังตัวอย่างต่อไปนี้ ตัวอย่างที่ 4 แสดงการเพิ่มข้อมูลลงในแฟ้มตารางสินค้า -เปิดใช้งานโปรแกรม phpMyAdmin จากนั้นคลิกเลือกแฟ้มตารางสินค้าในฐานข้อมูล dbshop แล้วคลิกที่ รายการ “แทรก” เพื่อเข้าสู่หน้าจอสำหรับเพิ่มข้อมูล โดยปฏิบัติตามลำดับหมายเลขที่กำหนด ดังภาพ 2.14 ภาพที่ 2.14 หน้าจอสำหรับเพิ่มข้อมูล -จากนั้นทำการกรอกข้อมูลที่ต้องการเพิ่มลงไปในคอลัมน์“ค่า” เมื่อกรอกข้อมูลเรียบร้อยแล้ว ให้คลิกที่ปุ่ม “ลงมือ” เพื่อบันทึกข้อมูลลงในตาราง ดังภาพ 2.15 ภาพที่ 2.15 กรอกข้อมูลที่ต้องการเพิ่มลงไปในคอลัมน์

14 กรณีที่ต้องการเพิ่มข้อมูลไปในแฟ้มตารางเพิ่มเติมสามารถปฏิบัติตามขั้นตอนดังกล่าวข้างต้นอีกครั้ง การเรียกดูข้อมูลในแฟ้มตาราง การเรียกดูข้อมูลในแฟ้มตาราง แสดงตัวอย่างดังต่อไปนี้ ตัวอย่างที่ 5 แสดงการเรียกดูข้อมูลในแฟ้มตารางสินค้า -เปิดใช้งานโปรแกรม phpMyAdmin จากนั้นคลิกเลือกแฟ้มตารางสินค้าในฐานข้อมูล dbshop แล้วคลิกที่ รายการ “เปิดดู” เพื่อเรียกดูข้อมูลภายในแฟ้มตาราง โดยปฏิบัติตามลำดับหมายเลขที่กำหนด ดังภาพ 2.16 ภาพที่ 2.16 เลือกแฟ้มตารางสินค้าในฐานข้อมูล -จากนั้นโปรแกรมจะแสดงรายละเอียดข้อมูลที่มีอยู่ในตารางให้ทราบ ดังภาพ 2.17 ภาพที่ 2.17 รายละเอียดข้อมูล กรณีที่ต้องการแก้ไขหรือลบข้อมูลในแต่ระเบียน (Record) กระทำได้โดยการเลือกที่รูปไอคอน (ดินสอ) สำหรับแก้ไขข้อมูล และไอคอน (กากบาท)สำหรับลบข้อมูล

15 การลบข้อมูลออกจากแฟ้มตาราง การลบข้อมูลออกจากแฟ้มตาราง แสดงดังตัวอย่างต่อไปนี้ ตัวอย่างที่ 6 แสดงการลบข้อมูลออกจากแฟ้มตารางสินค้า -เปิดใช้งานโปรแกรม phpMyAdmin จากนั้นคลิกเลือกแฟ้มตารางสินค้าในฐานข้อมูล dbshop แล้วคลิกที่ รายการ “ลบข้อมูล” เพื่อลบข้อมูลทั้งหมดออกจากแฟ้มตาราง โดยปฏิบัติตามลำดับหมายเลขที่กำหนด ดังภาพ 2.18 ภาพที่ 2.18 ลบข้อมูลทั้งหมดออกจากแฟ้มตาราง -โปรแกรมจะแสดงกล่องข้อความสำหรับยืนยันการลบข้อมูล จากนั้นคลิกที่ปุ่ม “ตกลง” เพื่อลบข้อมูล กรณีไม่ ต้องการลบให้คลิกที่ปุ่ม “ยกเลิก” ดังภาพ 2.19 ภาพที่ 2.19 กล่องข้อความสำหรับยืนยันการลบข้อมูล หมายเหตุ : การลบข้อมูลทั้งหมดออกจากแฟ้มตารางนั้น ต้องแน่ใจว่าข้อมูลดังกล่าวไม่มีความจำเป็นหรือไม่ ต้องการใช้งานแล้ว

16 การลบแฟ้มตารางออกจากฐานข้อมูล การลบแฟ้มตารางออกจากฐานข้อมูล แสดงดังตัวอย่างต่อไปนี้ ตัวอย่างที่ 7 แสดงการลบแฟ้มตารางออกจากฐานข้อมูล dbshop -เปิดใช้งานโปรแกรม phpMyAdmin จากนั้นคลิกเลือกแฟ้มตารางสินค้าในฐานข้อมูล dbshop แล้วคลิกที่ รายการ “โยนทิ้ง” เพื่อลบแฟ้มตารางออกจากฐานข้อมูล โดยปฏิบัติตามลำดับหมายเลขที่กำหนด ดังภาพ 2.20 ภาพที่ 2.20 ลบแฟ้มตารางออกจากฐานข้อมูล -โปรแกรมจะแสดงกล่องข้อความสำหรับยืนยันการลบแฟ้มตาราง จากนั้นให้คลิกปุ่ม “ตกลง” เพื่อลบข้อมูล กรณีไม่ต้องการลบให้คลิกปุ่ม “ยกเลิก” ดังภาพ 2.21 ภาพที่ 2.21 ยืนยันการลบแฟ้มตาราง

17 หมายเหตุ : การลบแฟ้มตารางออกจากฐานข้อมูลนั้น ต้องแน่ใจว่าแฟ้มตารางดังกล่าวนั้นไม่มีความจำเป็น หรือไม่ต้องการใช้งานแล้ว (ธัชกร วงษ์คำชัย.2558) 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: หน้า 4) ภาพที่ 2.22 วงจรการพัฒนาระบบ : System Development Life Cycle (SDLC) 2.3.1 การค้นหาและเลือกสรรโครงการ (Project Identification and Selection) เป็นขั้นตอนในการค้นหาโครงการพัฒนาระบบที่เหมาะสมกับสถานการณ์ปัจจุบันของบริษัทสามารถ แก้ปัญหาที่เกิดขึ้นและให้ผลประโยชน์กับบริษัทมากที่สุด โดยใช้ตารางเมตมิกซ์ (Matrix-Table) เป็นเครื่องมือ ประกอบพิจารณา ซึ่งเป็นขั้นตอนที่ได้ดำเนินการผ่านไปแล้วในเบื้องต้น สามารถสรุปกิจกรรมได้ดังนี้ 1) ค้นหาโครงการพัฒนาระบบที่เห็นสมควรต่อการได้รับการพัฒนา 2) จำแนกและจัดกลุ่มโครงการ 3) เลือกโครงการที่เหมาะสมที่สุดในการพัฒนา

18 2.3.2 การเริ่มต้นและวางแผนโครงการ (Project Initiating and Planning System Development) เป็นขั้นตอนในการเริ่มต้นจัดทำโครงการจัดตั้งทีมงานกำหนดตำแหน่งหน้าที่ให้กับทีมงานแต่ละคน อย่างชัดเจนเพื่อร่วมกันสร้างแนวทางเลือกในการนำระบบใหม่มาใช้งานและเลือกทางเลือกที่ดีที่สุด จากนั้นจะ ร่วมกันวางแผนจัดทำโครงการกำหนดระยะเวลาในการดำเนินโครงการ ศึกษาความเเป็นไปได้ของโครงการ และประมาณการต้นทุนและกำไรที่จะได้รับจากการลงทุนในโครงการพัฒนาระบบเพื่อนำเสนอต่อผู้จัดการ เพื่อ พิจารณาอนุมัติดำเนินการในขั้นตอนต่อไป โดยในขณะที่นำเสนอโครงการอยู่นี้ ถือเป็นการดำเนินงานใน ขั้นตอนที่ 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 ได้ดังนี้ 1) ออกแบบฐานข้อมูลในระดับ Physical 2) ออกแบบ Application

19 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.23 ภาพที่ 2.23 ตัวอย่าง HTML5

20 องค์ประกอบ HTML5 - องค์ประกอบความหมายใหม่เช่น <header> ,<footer> ,<article> และ <section> - การควบคุมรูปแบบใหม่คุณลักษณะเช่นจำนวน, วันที่, เวลา, ปฏิทินและช่วง - องค์ประกอบภาพใหม่ :<svg> และ <canvas> - องค์ประกอบมัลติมีเดียใหม่ :<audio> และ <video> โครงสร้างองค์ประกอบ HTML5 : ภาพที่ 2.24 โครงสร้างองค์ประกอบ HTML5 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.1 ตัวอย่างแสดงให้เห็นถึงไวยากรณ์ต่างๆที่ใช้ใน <input> แท็ก

21 2.5 Responsive Website Responsive Website คือแนวทางการพัฒนาเว็บไซต์โดยเริ่มตั้งแต่การออกแบบ ไปจนถึงการเขียน โปรแกรม โดยให้ความสำคัญกับแสดงผลที่เหมาะสมกับหน้าจอตามแต่ละอุปกรณ์ ทั้งคอมพิวเตอร์ตั้งโต๊ะและ มือถือมุ่งเน้นให้ผู้ใช้งาน ง่ายต่อการปฏิสัมพันธ์ ง่ายต่อการอ่าน ง่ายต่อการมองเห็นโดยปกติเว็บไซต์ที่ไม่ได้เป็น responsive เวลาเปิดดูบนมือถือหรือแทบเลต ตัวเว็บและเนื้อหาทั้งหมดภายในเว็บตัวหนังสือ รูปภาพ เป็นต้น จะถูกย่อให้เล็กตามขนาดหน้าจอ และถ้าหน้าจอที่ใช้งานมีขนาดที่เล็กมาก ตัวหนังสือก็จะถูกย่อให้เล็กตามไป เวลาอ่านก็จะต้องขยายทั้งเว็บไซต์เพื่อให้สามารถอ่านได้แต่ถ้าหากว่าเว็บไซต์นั้น ถูกออกแบบและพัฒนาให้เป็น Responsive Website การแสดงผลทั้งตัวหนังสือและรูปภาพจะถูกปรับการแสดงผลให้เหมาะสมกับหน้าจอ และอุปกรณ์ของผู้ใช้งานมากที่สุดจากรูปตัวอย่างข้างต้นจะเห็นว่าการแสดงผลบนคอมพิวเตอร์ตั้งโต๊ะ มือถือ และแทบเลต เปิดหน้าเว็บเดียวกันเนื้อหาและรูปภาพทั้งหมดมาจากเว็บไซต์เดียวกันและมีโครงสร้างการ แสดงผลที่แตกต่างกันตามขนาดหน้าจอโครงสร้างการแสดงผลนี้ถูกปรับให้เหมาะสมตามอุปกรณ์นั้น ๆ ตัวอย่าง เว็บไซต์ที่ถูกพัฒนาแบบ Responsive Website ภาพที่ 2.25 โครงสร้างที่ถูกพัฒนาแบบ Responsive Website 2.5.1 ประโยชน์ของ Responsive Website 1) ประหยัดค่าใช้จ่าย ในขั้นตอนการพัฒนาเว็บไซต์แบบ responsive เราสามารถพัฒนาโดยใช้ชุดคำสั่งทางโปรแกรมมิ่งเพื่อ ปรับขนาดให้เหมาะสมกับทุกอุปกรณ์การแสดงผลเพียงครั้งเดียวได้ ซึ่งแตกต่างจากการพัฒนาแบบ m. หรือ แบบ mobile site ที่ต้องแยกขั้นตอนการพัฒนาตั้งแต่การออกแบบ การเขียนโปรแกรม รวมไปถึงการ query ข้อมูลต่าง ๆ จากฐานข้อมูลมาแสดงบนหน้าเว็บไซต์ 2) ปรับขนาดและปริมาณเนื้อหาได้ตามขนาดอุปกรณ์ เมื่อเว็บไซต์ถูกออกแบบให้ทำงานแบบ responsive website นอกจากคุณสมบัติหลักของการพัฒนา เว็บไซต์แบบ responsive จะสามารถปรับเปลี่ยนเลเอาท์ให้แสดงผลพอเหมาะกับอุปกรณ์นั้น ๆ แล้วยัง สามารถปรับเพิ่มหรือลดปริมาณเนื้อหาในการแสดงผลที่แตกต่างกันไปอีกด้วย ตัวอย่างเช่น เมื่อแสดงผลบน

22 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.savedee.co.th http://www.cateringever.com http://www.msdream.co.th 2.6 Bootstrap Bootstrap คือ 2.6.1) Bootstrap เป็นกรอบ front-end ฟรีสำหรับการพัฒนาเว็บได้เร็วขึ้นและง่ายขึ้น 2.6.2) Bootstrap รวมถึง HTML และ CSS ตามแม่แบบการออกแบบสำหรับการพิมพ์รูปแบบ, ปุ่ม, โต๊ะ, นำทาง, Modals, คิวภาพและอื่น ๆ เช่นเดียวกับปลั๊กอิน JavaScript ทางเลือกจำนวนมาก 2.6.3) Bootstrap ยังช่วยให้คุณสามารถได้อย่างง่ายดายสร้างการออกแบบที่ตอบสนองต่อสร้างหน้า เว็บแรกด้วย 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 ถูกออกแบบมาเพื่อตอบสนองกับ อุปกรณ์มือถือ รูปแบบมือถือครั้งแรกเป็นส่วนหนึ่งของกรอบหลักเพื่อให้แน่ใจว่าการแสดงผลที่เหมาะสมและซูม สัมผัสเพิ่มต่อไปนี้<meta> แท็กภายใน<head>องค์ประกอบ:<metaname="viewport"content="width=devicewidth, initial-scale=1">width=device-width ส่วนกำหนดความกว้างของหน้าไปตามหน้าจอที่มีความกว้าง

23 ของอุปกรณ์ (ซึ่งจะแตกต่างกันไปขึ้นอยู่กับอุปกรณ์) initial-scale=1 ส่วนกำหนดระดับการซูมเริ่มต้นเมื่อโหลด หน้าเว็บแล้วเป็นครั้งแรกโดยเบราว์เซอร์ 3) ตู้คอนเทนเนอร์Bootstrap ยังต้องมีองค์ประกอบที่มีการตัดเนื้อหาเว็บไซต์ มีสองชั้นภาชนะ ให้เลือกเป็น : container ระดับให้ตอบสนองภาชนะกว้างคงcontainer-fluid ระดับให้ภาชนะที่เต็มความกว้าง ทอดกว้างทั้งหมดของวิวพอร์ต Bootstrap Forms Bootstrap's การตั้งค่าเริ่มต้น รูปแบบการควบคุมโดยอัตโนมัติได้รับจัดแต่งทรงผมระดับโลกบางคนที่มี Bootstrap :ต้นฉบับเดิม ทั้งหมด<input> , <textarea> และ <select> องค์ประกอบที่มีระดับ .form-control มีความกว้าง 100% Bootstrap เลย์เอาต์แบบฟอร์ม Bootstrap ให้สามประเภทของการจัดรูปแบบ : 1) รูปแบบแนวตั้ง (นี้เป็นค่าเริ่มต้น) 2) รูปแบบแนวนอน 3) รูปแบบอินไลน์ กฎระเบียบมาตรฐานสำหรับทั้งสามรูปแบบรูปแบบ : 1) มักจะใช้<form role="form"> (ช่วยปรับปรุงการเข้าถึงสำหรับผู้ที่ใช้โปรแกรมอ่านหน้าจอ) 2) ห่อป้ายชื่อและรูปแบบการควบคุมใน <div class="form-group"> (จำเป็นสำหรับระยะห่างที่เหมาะสม) 3) เพิ่มระดับ .form-control เพื่อต้นฉบับเดิมทั้งหมด <input> , <textarea> และ <select> องค์ประกอบ Bootstrap แนวตั้งแบบฟอร์ม (เริ่มต้น) ภาพที่ 2.26 หน้าฟอร์ม Bootstrap แนวตั้งแบบฟอร์ม (เริ่มต้น)

24 ตัวอย่างต่อไปนี้จะสร้างรูปแบบแนวตั้งที่มีสองช่องใส่หนึ่งช่องทำเครื่องหมายและปุ่มส่ง :ตัวอย่างดังภาพที่ 2.27 ภาพที่ 2.27 การสร้างหน้าฟอร์ม Bootstrap แบบแนวตั้ง Bootstrap แบบอินไลน์ ภาพที่ 2.28 หน้าฟอร์ม Bootstrap แบบอินไลน์

25 ในรูปแบบอินไลน์ทั้งหมดขององค์ประกอบที่เป็นแบบอินไลน์ซ้ายชิดและป้ายชื่อที่มีข้าง หมายเหตุ: นี้จะใช้กับรูปแบบภายใน viewports ที่มีอย่างน้อย 768px กว้าง! กฎเพิ่มเติมสำหรับรูปแบบอินไลน์: - เพิ่มระดับ .form-inline ไป <form> องค์ประกอบ ตัวอย่างต่อไปนี้จะสร้างรูปแบบที่ใกล้เคียงกับสองช่องใส่หนึ่งช่องทำเครื่องหมายและหนึ่งปุ่มส่ง :ตัวอย่างดังภาพที่ 2.29 ภาพที่ 2.29 การสร้างหน้าฟอร์ม Bootstrap แบบอินไลน์ Bootstrap แบบแนวนอน ภาพที่ 2.30 หน้าฟอร์ม Bootstrap แบบแนวนอน

26 รูปแบบแนวนอนยืนห่างจากรูปแบบอื่น ๆ ทั้งในจำนวนของมาร์กอับและในการนำเสนอรูปแบบ กฎระเบียบเพิ่มเติมสำหรับรูปแบบแนวนอน: - เพิ่มระดับ .form-horizontal ไป <form> องค์ประกอบ - เพิ่มระดับ .control-label ทุก <label> องค์ประกอบ เคล็ดลับ: ใช้ Bootstrap's การเรียนตารางที่กำหนดไว้ล่วงหน้าเพื่อให้สอดคล้องฉลากและกลุ่มควบคุมฟอร์มใน รูปแบบแนวนอน ตัวอย่างต่อไปนี้จะสร้างรูปแบบแนวนอนที่มีสองช่องใส่หนึ่งช่องทำเครื่องหมายและหนึ่งปุ่มส่ง : ตัวอย่างดังภาพที่ 2.31 ภาพที่ 2.31 การสร้างหน้าฟอร์ม Bootstrap แบบแนวนอน 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

27 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 2.8 แผนภาพกระแสข้อมูล (Data Flow Diagram : DFD) Data Flow Diagram : DFD หมายถึง แผนภาพที่แสดงให้เห็นการเคลื่อนที่ของข้อมูลระหว่างผู้เกี่ยวข้องกับ ระบบ (External Agent) และขั้นตอนการทำงาน (Process) ตลอดจนแหล่งจัดเก็บข้อมูล (Data Store) ภายในระบบ แสดงตัวอย่างดังภาพที่ 2.32 ภาพที่ 2.32 ตัวอย่าง DFD

28 2.8.1 สัญลักษณ์ที่ใช้ใน DFD มีหลายชนิด แต่ในที่นี้จะแสดงให้เห็นเพียง 2 ชนิด ได้แก่ ชุดลักษณ์ มาตรฐานที่พัฒนาโดย Gane and Sarson และชุดสัญลัษณ์มาตรฐานที่พัฒนาโดย DeMarco and Yourdon แสดงตัวอย่างดังภาพที่ 2.33 ภาพที่ 2.33 สัญลักษณ์ที่ใช้ใน DFD 2.8.2 แนวคิดของ DFD การสร้างแบบจำลองขั้นตอนการทำงานของระบบโดยใช้ DFD มีแนวคิดต่างๆดังนี้ 1) ขั้นตอนการทำงานของระบบ (Process) 2) การไหลของข้อมูล (Data Flow) 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) คือ แผนภาพกระแสข้อมูลระดับบนสุดที่แสดงภาพรวมการ ทำงานของระบบที่มีความสัมพันธ์กับสภาพแวดล้อมภายนอกระบบ อีกทั้งแสดงให้เห็นถึงขอบเขต และเส้นแบ่ง เขตของระบบที่ศึกษาและพัฒนา แนวทางในการกำหนดขอบเขตดังนี้

29 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.34 ภาพที่ 2.34 ตัวอย่าง Context Diagram ของระบบงานขาย จากรูปที่ 2.34 เป็นตัวอย่าง Context Diagram ของระบบงานขาย (Sales System) โดยมีรายละเอียด ความต้องการของระบบ ดังนี้ “ระบบงานขายสินค้าที่บริษัทแห่งหนึ่ง ซึ่งนอกจากจะมีระบบประมวลผลใบสั่งซื้ออยู่เเล้ว ยังต้องการ ให้ระบบสามารถประเมินใบสั่งซื้อของลูกค้าได้ เนื่องจากลูกค้าทั้งหมดของบริษัทเป็นลูกค้ารายใหญ่ สั่งสินค้า จำนวนมาก จึงชำระเป็นเงินเชื่อ การสั่งซื้อทุกครั้งจึงต้องมีการตรวจสอบก่อนเสมอว่าลูกค้ามีประวัติการชำระ เงินตามเงื่อนไขที่กำหนดหรือไม่ โดยเงื่อนไขดังกล่าวได้จากฝ่ายบริหารงานขาย กรณีที่ใบสั่งซื้อผ่านการประเมิน จะถูกนำมาจัดเป็นใบสั่งขาย ส่งไปยังฝ่ายบริหารงานขายและและฝ่ายผลิต จากนั้นฝ่ายผลิตจะนำสินค้าจาก คลังสินค้าพร้อมจัดทำใบขนส่งสินค้า ส่งต่อมาที่ฝ่ายขายเพื่อตรวจสอบใบขนส่งและสินค้าให้ถูกต้องตามคำ สั่งซื้อ จึงจัดทำใบกำกับสินค้าส่งไปให้กับลูกค้าพร้อมกับสินค้า”(กิตติ ภักดีวัฒนะกุล)

30 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.35 ภาพที่ 2.35 ตัวอย่าง DFD Level 0 ของระบบงานขาย 2.8.6 การแบ่งย่อยแผนภาพ (Decomposition of DFD) Decomposition คือ การแบ่ง/แยก/ย่อยระบบและขั้นตอนการทำงานออกเป็นส่วนย่อย โดยในแต่ละ ขั้นตอนที่ถูกแตกออกมา (Subsystems) จะแสดงให้เห็นถึงรายละเอียดของการทำงานเพิ่มมากขึ้น จาก DFD Level 0 ของระบบงานขาย (รูปที่ 2.34) ที่ Process 4.0 ได้แบ่งการทำงานออกเป็นขั้นตอนย่อย ดังภาพที่ 2.36 ภาพที่ 2.36 DFD Level 1 ของ Process 4.0 ระบบงานขาย (จากภาพที่ 2.35)

31 2.8.7 ตรวจสอบความสมดุลของ DFD (Balancing DFD) Balancing DFD หมายถึง ความสมดุลของแผนภาพกระแสข้อมูลที่จะต้องมี Input Data Flow ที่เข้า สู้ระบบและ Output Data Flow ที่ออกจากระบบใน DFD ระดับล่าง ครบทุกเส้นที่ปรากฎอยู่ใน DFD ระดับบน แต่ในระดับล่างอาจจะมีมากกว่าได้ โดยมีเงือนไขว่า Input Data Flow และ Output Data Flow นั้นจะต้องเกิดจาก Process ภายในระดับล่างเท่านั้น และจะนำไปใช้ตรวจสอบความสมดุลของแผนภาพอีก ระดับ หากมีการแบ่งย่อยแผนภาพในระดับล่างลงไปอีกแสดงตัวอย่างดังภาพที่ 2.37 (a) และ (b) ภาพที่ 2.37 ตัวอย่าง DFD ที่ไม่สมดุลกัน จากภาพที่ 2.37(a) เป็น Context Diagram ที่มี Input data Flow เข้าสู่ระบบ 1 เส้น คือ A จาก Extermal Agent 1 และ มี Out Data Flow 1 เส้น คือ D วิ่งไปยัง Extermal Agent 2 เมื่อมีการเเบ่งย่อยแผนภาพลงที่ Level 0 ในรูป (b) สังเกตว่ามี Input data Flow ที่เป็น B จาก External Agent 3 เพิ่มเข้ามา ซึ่งใน Context Diagram ไม่มี Extermal Agent 3 นี้ จึงถือว่า DFD นี้ไม่สมดุล สำหรับ Input Data Flow C สามมารถปรากฏอยู่ใน DFD ระดับล่างได้ เนื่องจากเป็น Input Data Flow ที่ เกิดจาก Process ภายในระดับล่างนี้เท่านั้น (กิตติ ภักดีวัฒนะกุลX) 2.9 แบบจำลองความสัมพันธ์(E-R diagram) เเผนภาพเเสดงความสัมพันธ์ระหว่างข้อมูล (E-R Diagram) หมายถึง แผนภาพที่ใช้เป็นเครื่องมือสำหรับ จำลองข้อมูล ซึ่งประกอบไปด้วย Entity (เเทนกลุ่มของข้อมูลที่เป็นเรื่องเดียวกัน/เกี่ยวข้องกัน) เเละ ความสัมพันธ์ระหว่างข้อมูล (Relationship) ที่เกิดขึ้นทั้งหมดในระบบ ดังภาพที่ 2.38 ภาพที่ 2.38 ตัวอย่าง E-R Diagram

32 จากภาพที่ 2.38 ประกอบด้วย Entity ทั้งหมด 2 Entity ได้แก่ “Order” และ “Customer” โดยที่ Custimer มีความสัมพันธ์กับ Order คือ ลูกค้า 1 คนสามารถสั่งสินค้าได้หลายครั้ง และใบสั่งสินค้าเเต่ละใบ ของลูกค้าคนเดียว (กิตติ ภักดีวัฒนะกุล.2551) 2.9.1 สัญลักษณ์ที่ใช้ใน E-R Diagram สัญลักษณ์ที่ใช้ใน E-R Diagram ปัจจุบันมีมีหลายรูปเเบบ ในที่นี้ขอยกตัวอย่าง 2 รูปแแบบ ได้แก่ Chen’s Model และ Crow’s Foot Model (สำหรับหนังสือเล่มนี้จะเลือกใช้เเบบ Chen’s Model) (กิตติ ภักดีวัฒนะกุล.2551) ภาพที่ 2.39 สัญลักษณ์ที่ใช้ใน E-R Diagram ภาพที่ 2.40 ตัวอย่าง E-R Diagram ตามมาตรฐาน Chen และ Crow’s Foot Model

33 2.9.2 องค์ประกอบของ E-R Diagram E-R Diagram ประกอบไปด้วยส่วนสำคัญ ได้แก่ Entitirs,Properties และ Rrlationships 1) Entities Entities คือ คน สถานที่วัตถุ เหตุการณ์ หรือแนวคิดที่แวดล้อมผู้ใช้ในระบบที่ต้องการพัฒนา Entity Type คือ กลุ่มของอ็อบเจ็กต์หรือแนวคิดรวบยอด(Concept)ที่ถูกกำหนดขึ้นเพื่อเป็นตัวแทน ข้อมูลในโลกความจริง (Real Wold) โดยที่อ็อบเจ๊กต์ที่อยู่กลุ่มเดียวกัน จะมีคุณสมบัติ (Property) เหมือนกัน แต่มีเอกลักษณ์แตกต่างกัน หากสมมติให้ ในโลกความ Entity Instance คือ สมาชิกของ Entity Type มีความเป็นเอกลักษณ์ที่สามารถระบุความแตกต่าง ได้สรุปได้ว่า ภายใน Entity Type จะประกอบด้วย Entity Instance จำนวนหนึ่ง ที่มีคุณสมบัติพื้นฐาน เหมือนกัน แต่มีเอกลักษณ์แตกต่างกัน หากสมมติให้ ในโลกความเป็นจริงที่เราสนใจจะพัฒนาเป็นฐานข้อมูล คือ ระบบลงเบียนที่ประกอบไปด้วยอ็อบเจ๊กต์ต่างๆ เช่น นักศึกษา (Student) รายวิชา (Subject) อาจารย์ (Teacher) เป็นต้น กลุ่มของนักศึกษารายวิชา และอาจารย์ จะถูกกำหนดให้เป็น “Entity Type” เช่น Entity Type “STUDENT” เป็นต้น สำหรับนักศึกษาเเต่ละคนจะถือว่าเป็น “Entity Instance” ดังภาพที่ 2.41(กิตติภักดีวัฒนะกุล.2551) ภาพที่ 2.41 ความแตกต่างระหว่าง Entity Type และ Entity Instnstance จากภาพ 2.41 หากนำมาเขียนเป็น E-R Diagram จะเเสดงให้เห็นเพียง Entity Type ซึ่งใช้รูปเหลี่ยม เป็นสัญลักษณ์ เเละเนื่องจาก Entity Type เป็นกลุ่มของ Entity Instance ดังนั้น ชื่อของ Entity Type จึง เป็นคำนามเอกพจน์ (SingGular Noun) ดังภาพที่ 2.42 ภาพที่ 2.42 สัญลักษณ์ของ Entity Type

34 เพื่อให้การอธิบายเนื้อหาง่ายต่อการทำความเข้าใจ ในที่นี้จะขอใช้คำว่า “Entity” แทน “Entity Type” และ ใช้คำว่า “สมาชิกของ Entity” แทน “Entity Instsance” Entityes แบ่งเป็น 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.43 (กิตติ ภักดีวัฒนะกุล.2551) ภาพที่ 2.43 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)

35 ภาพที่ 2.44 Attribute ของ Entity “STUDENT” 2.9.4 Attribute Specification เมื่อมีการกำหนดค่าให้กับ Attribute จะะทำให้สามารถระบุสมาชิกใน Entity ได้จำเพาะเจาะจง รวมทั้งหากกำหนดค่าให้กับทุก Attribute แล้วก็จะสามารถจำเเนกความเเตกต่างของเเต่ละสมาชิกของ Entity ได้ เช่น ในที่นี้กำหนดค่า Attribute(บางส่วน) ให้กับ Entity “STUDENT” ดังต่อไปนี้ ก็จะสามารถระบุได้ว่า เป็นนักศึกษาคนใด - 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.45 ตัวอย่าง Simple และ Composite Attribute

36 2) Single และ Multi-valued Attribute Single-valued Attribute คือ Attribute ที่มีค่าข้อมูลเพียงค่าเดียว Multi-valued Attribute คือ Attribute ที่มีค่าข้อมูลหลายค่า เช่น Attribute “Phone_No” ที่พนักงาน 1 คน อาจมีหมายเลขโทรศัพท์มากกว่า 1 หมายเลข เนื่องจากมีทั้งโทรศัพท์บ้านและโทรศัพท์มือถือ เป็นต้น สำหรับสัญลักษณ์ของ Single-valued Attribute นั้นจะเป็นสัญลักษณ์ของ Simple Attribute ธรรมดาที่มีเส้นเชื่อม Entity 1 เส้น เเต่สำหรับ Multivalued Attribute จะมีเส้นเชื่อมระหว่างรูปวงรีกับ Entity สองเส้น ดังภาพที่ 2.46 ภาพที่ 2.46 ตัวอย่าง 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 Kry มากกว่า 1 Candidate Key เช่นกัน โดยนอกจาก Attribute “Emplod” แล้ว เมื่อนำ Attribute “First Name”กับ “LastName” มารวมกัน ก็สามารถใช้เป็น Candidate Key ได้ เป็นต้น กรณีที่มี Candidate Key มากว่า 1 ตัว นักวิเคราะห์ระบบต้องเลือกมาเพียง 1 ตัว เพื่อใช้เป็น “Identifiter” หรือ “Primary Key” Identifier/Primary Key คือ Candidate Key ที่ถูกเลือกให้เป็นคุณลักษณะที่สามารถจำแนกความแตกต่าง ระหว่างสมาชิกใน Entity ได้ โดยทั่วไปจะเป็น Candidate key ที่มาจาก Attribute เดียว สัญลักษณ์ที่ใช้ คือ ขีดเส้นใต้ Attribute ที่เป็น Primary Key ดังภาพที่ 2.47

37 ภาพที่ 2.47 ตัวอย่าง Identifier/Primary Key Attribute 4) Derived Attribute Derived Attribute คือ Attribute ที่ค่าของ Attribute ได้มาจากการคำนวณค่าของ Attribute อื่น ดังนั้น ค่าของ Derived Attribute จึงมีการเปลี่ยนแปลงอยู่ตลอดเวลาตามการเปลี่ยนแปลงของ Attribute อื่น เช่น Attribute “Totalsalary” ของ “EMPLOYEE” ที่ใช้เก็บผลรวมของเงินเดือนทั้งปีของ พนักงานได้มาจากการนำ Attribute “Salary” ในเเต่ละเดือนมารวมกัน เป็นต้น สัญลักษณ์ที่ใช้เเทน Derived Attribute จะใช้เส้นประเชื่อมระหว่าง รูปวงรี Entity ดังตัวอย่างในภาพที่ 2.48(กิตติภักดีวัฒนะกุล.2551) ภาพที่ 2.48 ตัวอย่าง Derived Attribute

38 2.9.6 Relationships relationships คือ ความสัมพันธ์ระหว่าง Entity ตั้งเเต่ 1 Entity ขึ้นไป โดยความสัมพันธ์ที่แท้จริงนั้น เกิดขึ้นจากสมาชิกของ Antity ที่สัมพันธ์กัน เช่น ความสัมพันธ์ระหว่าง Entity “EMPLOYEE” กับ “DEPATMANT” ที่โดยทั่วไปพนักงานสามารถสังกักอยู่ในแผนกใดแผนกหนึ่งได้เพียงแผนกเดียวเเต่ละแผนกมีพนักงานอยู่ใน สังกัดหลายคน เป็นต้น สัญลักษณ์ที่ใช้แทน Relationship คือ สี่เหลี่ยมข้าวหลามตัดพร้อมระบุชื่อความสัมพันธ์ ซึ่งควรจะเป็นคำกริยา (Verb) ไว้ภายในสัญลักษณ์ดังกล่าวด้วย ดังภาพที่ 2.49 ภาพที่ 2.49 สัญลักษณ์ Rrlationship ระหว่าง Entity “EMPLOYEE”กับ “DEPARTMANT” จากภาพที่ 2.49 ความสัมพันธ์ที่แท้จริงเกิดจากการจับคู่กันระหว่างสมาชิกของ Entity “EMPLOYEE” กับ “DEPARTMANT” จำลองภาพดังภาพที่ 2.50 ภาพที่ 2.50การจับคู่ระหว่างสมาชิกของ Antity “EMPLOYEE” กับ “DEPARTMANT”(กิตติ ภักดีวัฒนะกุล.2551) 2.9.7 แผนภาพแสดงความสัมพันธ์ของข้อมูล (Enitty Relation Diagram: ER-Diagram) การออกแบบฐานข้อมูลด้วย E-R Model เป็นเพียงวิธีหนึ่งที่ช่วยในการออกแบบฐานข้อมูลและได้รับ ความนิยมอย่างมาก นำเสนอโดย Peter ซึ่งวิธีการนี้อยู่ในระดับ Conceptual Level และมีหลักการคล้ายกับ Relational Model เพียงเเต่ E-R เพียงเเต่ E-R Model เเสดงในรูปแบบกราฟิก บางระบบจะใช้ E-R Model ได้เหมาะสมกว่า เเต่บางระบบจะใช้ Rrlational Model ได้เหมาะสมกว่าเป็นต้นซึ่งเเล้วเเต่พิจารณาของผู้ออก เเบบว่าจะเลือกใช้แบบใด Relational Model คือตารางข้อมูลที่มีความสัมพันธ์(สุทัศนา:2556)

39 เเผนภาพเเสดงความสัมพันธ์ระหว่างข้อมูล (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.51 ภาพที่ 2.51 รูปสัญลักษณ์ของ Entity หมายเหตุ : จากแผนภาพเเสดงความสัมพันธ์ระหว่างข้อมูล,นางสาวยุพา จันทะมาศ,2561. 2) แอททริบิวท์ (Attibute) Attibute คือ คุณสมบัติของวัตถุหรือสิ่งของที่สนใจ โดยอธิบายรายละเอียดต่างๆ ที่เกี่ยวข้องกับลักษณะ ของเอนทิตี้ โดยคุณสมบัตินี้มีอยู่ในทุกเอนทิตี้ เช่น ชื่อ นามสกุล ที่อยู่ แผนก เป็น Attribute - ของเอนทิตี้พ นักงาน โมเดลข้อมูล เรามักจะพบว่า Attribute มีลักษณะข้อมูลพื้นฐานอยู่โดยที่ไม่ต้องมีคำอธิบายมากมาย และ Attribute ก็ไม่สามารถอยู่เเบบโดดๆ ได้โดยที่ไม่มีเอนทิตี้หรือความสัมพันธ์ดังภาพ 2.52 ภาพที่ 2.52 สัญลักษณ์ของ Attribute หมายเหตุ : จากแผนภาพเเสดงความสัมพันธ์ระหว่างข้อมูล,นางสาวยุพา จันทะมาศ,2561.