Database Tables ฐานข้อมูลส่วนใหญ่มักมีตารางตั้งแต่หนึ่งตารางขึ้นไป แต่ละตารางจะถูกระบุด้วยชื่อ (เช่น “ลูกค้า” หรือ “คำสั่งซื้อ”) ตารางประกอบด้วยระเบียน (แถว) พร้อมข้อมูล ในบทเรียนนี้ เราจะใช้ฐานข้อมูลตัวอย่าง Northwind ที่รู้จักกันดี (รวมอยู่ใน MS Access และ MS SQL Server) ด้านล่างนี้คือการเลือกจากตาราง “ลูกค้า”: CustomerID CustomerName ContactName Address City PostalCode Country 1 Alfreds Futterkiste Maria Anders Obere Str. 57 Berlin 12209 Germany 2 Ana Trujillo Emparedados y helados Ana Trujillo Avda. de […]
เรียนรู้เบื้องต้นเกี่ยวกับ SQL
SQL คืออะไร? SQL (Structured Query Language) เป็นภาษามาตรฐานสำหรับการเข้าถึงและจัดการฐานข้อมูล ช่วยให้คุณเข้าถึงและจัดการฐานข้อมูลและกลายเป็นมาตรฐานของ American National Standards Institute (ANSI) ในปี 1986 และของ International Organization for Standardization (ISO) ในปี 1987 SQL ทำอะไรได้บ้าง? แม้ว่า SQL จะเป็นมาตรฐาน ANSI/ISO แต่ก็มีภาษา SQL รุ่นอื่นๆที่แตกต่างกัน อย่างไรก็ตาม เพื่อให้เป็นไปตามมาตรฐาน ANSI คำสั่งทั้งหมดจึงสนับสนุนคำสั่งหลัก (เช่น SELECT, UPDATE, DELETE, INSERT, WHERE) ในลักษณะที่คล้ายคลึงกัน หมายเหตุ:โปรแกรมฐานข้อมูล SQL ส่วนใหญ่ยังมีส่วนขยายที่เป็นกรรมสิทธิ์ของตนเองนอกเหนือจากมาตรฐาน SQL! การใช้ SQL ในเว็บไซต์ของคุณ ในการสร้างเว็บไซต์ที่แสดงข้อมูลจากฐานข้อมูล คุณจะต้อง: RDBMS RDBMS ย่อมาจากระบบจัดการฐานข้อมูลเชิงสัมพันธ์ […]
HTML Video
<video> Element ใช้เพื่อแสดงวิดีโอบนหน้าเว็บ ตัวอย่าง <video> Element แสดง video ใน HTML จะใช้ <video> Element ตัวอย่าง การทำงาน Attribute controls เพิ่มส่วนควบคุมวิดีโอ เช่น การเล่น/หยุดชั่วคราว และปรับระดับเสียง เป็นความคิดที่ดีที่จะรวม Attribute width และ height ไว้เพราะว่าหากไม่ได้ตั้งค่าความสูงและความกว้าง หน้าเพจอาจกะพริบขณะโหลดวิดีโอ <source> ช่วยให้คุณสามารถระบุไฟล์วิดีโอทางเลือกที่เบราว์เซอร์อาจเลือกได้ เบราว์เซอร์จะใช้รูปแบบแรกที่รู้จัก ข้อความระหว่าง Tag <video> และ </video> จะแสดงเฉพาะในเบราว์เซอร์ที่ไม่สนับสนุน <video> Element <video> Autoplay หากต้องการเริ่มวิดีโอโดยอัตโนมัติ ให้ใช้ Attribute autoplay ตัวอย่าง หมายเหตุ: เบราว์เซอร์ Chromium ไม่อนุญาตให้เล่นอัตโนมัติในกรณีส่วนใหญ่ อย่างไรก็ตาม อนุญาตให้เล่นอัตโนมัติแบบปิดเสียงได้เสมอ เพิ่ม muted หลัง autoplay เพื่อให้วิดีโอของคุณเริ่มเล่นโดยอัตโนมัติ […]
HTML Input form* Attributes
บทนี้อธิบายความแตกต่างของ form* Attributes สำหรับ <input> Element form Attribute Input form Attribute ใช้ระบุรูปแบบ <input> Element ค่าของ Attribute นี้ต้องเท่ากับ Attribute id ขององค์ประกอบ <form> ที่เป็นเจ้าของ ตัวอย่าง ช่องป้อนข้อมูลที่อยู่นอกฟอร์ม HTML (แต่ยังคงเป็นส่วนหนึ่งของฟอร์ม): formaction Attribute Input formaction Attribute ระบุ URL ของไฟล์ที่จะประมวลผลอินพุตเมื่อกดส่งแบบฟอร์ม หมายเหตุ: Attribute นี้แทนที่ action Attribute ของ <form> Element formaction ทำงานร่วมกับประเภทอินพุตต่อไปนี้: ส่ง (Submit) และรูปภาพ ตัวอย่าง แบบฟอร์ม HTML ที่มีปุ่มส่ง 2 ปุ่ม โดยมีการทำงานที่ต่างกัน: formenctype […]
HTML Web Workers API
Web Worker คืออะไร? เมื่อดำเนินการสคริปต์ในหน้า HTML หน้าเพจจะไม่ตอบสนองจนกว่าสคริปต์จะเสร็จสิ้น Web Worker คือ JavaScript ที่ทำงานอยู่เบื้องหลัง โดยไม่ขึ้นกับสคริปต์อื่นๆ โดยไม่ส่งผลกระทบต่อประสิทธิภาพของเพจ คุณสามารถทำสิ่งที่คุณต้องการต่อไป: การคลิก เลือกสิ่งต่างๆ ฯลฯ ในขณะที่ Web Worker ทำงานอยู่เบื้องหลัง การสนับสนุนเบราว์เซอร์ ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับ Web Workers อย่างเต็มรูปแบบ API Chrome Edge Firefox Safari Opera Web Workers 4.0 10.0 3.5 4.0 11.5 ตัวอย่าง HTML Web Worker ตัวอย่างด้านล่างสร้าง Web Worker อย่างง่ายที่นับตัวเลขในพื้นหลัง: ตัวอย่าง นับเลข: Start Worker […]
HTML Drag and Drop API
ใน HTML เราสามารถลากและวาง Element ได้ ลากแล้ววาง (Drag and Drop) การลากและวางเป็นคุณสมบัติทั่วไป เมื่อคุณ “หยิบ” วัตถุแล้วลากไปยังตำแหน่งอื่น เบราว์เซอร์ที่สนับสนุน ตัวเลขในตารางระบุถึงเบราว์เซอร์เวอร์ชันแรกที่รองรับคุณสมบัติการลากและวางอย่างสมบูรณ์ API Chrome Edge Firefox Safari Opera Drag and Drop 4.0 9.0 3.5 6.0 12.0 ตัวอย่างการลากและวาง HTML ตัวอย่างด้านล่างเป็นตัวอย่างการลากและวางอย่างง่าย: ลากรูปภาพ hostatom ลงในสี่เหลี่ยมผืนผ้า: วิธีการทำอาจดูซับซ้อน แต่มาดูส่วนต่างๆ ของการลากและวางกัน ทำให้ Element สามารถลากได้ ก่อนอื่น หากต้องการทำให้องค์ประกอบสามารถลากได้ ให้ตั้ง Attribute draggable เป็น true: สิ่งที่จะลาก – ondragstart […]
HTML YouTube Videos
วิธีที่ง่ายที่สุดในการเล่นวิดีโอใน HTML คือการใช้ YouTube ติดปัญหากับรูปแบบวิดีโอ? การแปลงวิดีโอเป็นรูปแบบต่างๆ อาจทำได้ยากและใช้เวลานาน วิธีแก้ไขที่ง่ายกว่าคือการให้ YouTube เล่นวิดีโอในหน้าเว็บของคุณ YouTube Video Id YouTube จะแสดง ID (เช่น tgbNymZ7vqY) เมื่อคุณบันทึก (หรือเล่น) วิดีโอ คุณสามารถใช้ ID นี้และอ้างอิงถึงวิดีโอของคุณใน HTML code เล่นวิดีโอ YouTube ใน HTML หากต้องการเล่นวิดีโอของคุณบนหน้าเว็บ ให้ทำดังต่อไปนี้: ตัวอย่าง YouTube เล่นอัตโนมัติ + ปิดเสียง คุณสามารถทำให้วิดีโอของคุณเริ่มเล่นโดยอัตโนมัติเมื่อผู้ใช้เข้าชมเพจ โดยเพิ่มautoplay=1 ใน URL ของ YouTube อย่างไรก็ตาม การเริ่มวิดีโอโดยอัตโนมัติอาจเป็นสิ่งที่น่ารำคาญสำหรับผู้เยี่ยมชมเว็บไซต์ของคุณ หมายเหตุ:เบราว์เซอร์ Chromium ไม่อนุญาตให้เล่นอัตโนมัติในกรณีส่วนใหญ่ อย่างไรก็ตาม อนุญาตให้เล่นอัตโนมัติแบบปิดเสียงได้เสมอ เพิ่มmute=1หลัง autoplay=1เพื่อให้วิดีโอของคุณเริ่มเล่นโดยอัตโนมัติ (แต่ปิดเสียง) […]
HTML Audio
HTML <audio> Element HTML <audio> ใช้เพื่อเล่นไฟล์เสียงบนหน้าเว็บ : ตัวอย่าง HTML Audio ทำงานอย่างไร Attribute controls เพิ่มส่วนควบคุมเสียง เช่น เล่น หยุดชั่วคราว และระดับเสียง Element <source> ช่วยให้คุณสามารถระบุไฟล์เสียงทางเลือกที่เบราว์เซอร์อาจเลือกจาก เบราว์เซอร์จะใช้รูปแบบแรกที่รู้จัก ข้อความระหว่าง Tag <audio> และ </audio> จะแสดงในเบราว์เซอร์ที่ไม่สนับสนุน Element <audio> เท่านั้น <audio> การใช้ Autoplay ในการเริ่มไฟล์เสียงโดยอัตโนมัติ ให้ใช้ autoplay Attribute: ตัวอย่าง หมายเหตุ: เบราว์เซอร์ Chromium ไม่อนุญาตให้เล่นอัตโนมัติในกรณีส่วนใหญ่ อย่างไรก็ตาม อนุญาตให้เล่นอัตโนมัติแบบปิดเสียงได้เสมอ เพิ่ม muted หลัง autoplay เพื่อให้ไฟล์เสียงของคุณเริ่มเล่นโดยอัตโนมัติ (แต่ปิดเสียง): ตัวอย่าง ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับ <audio> Element […]
HTML Multimedia
มัลติมีเดียคืออะไร? มัลติมีเดียมีหลายรูปแบบ สามารถเป็นได้เกือบทุกอย่างที่คุณได้ยินหรือเห็น เช่น ภาพ เพลง เสียง วิดีโอ บันทึก ภาพยนตร์ ภาพเคลื่อนไหว และอื่นๆ เว็บเพจมักประกอบด้วยองค์ประกอบมัลติมีเดียประเภทและรูปแบบต่างๆ การสนับสนุนของเบราว์เซอร์ ในตอนแรกเว็บเบราว์เซอร์รองรับเฉพาะข้อความเท่านั้น โดยจำกัดเพียงแบบอักษรเดียวในสีเดียว ต่อมาเบราว์เซอร์ที่รองรับสี ฟอนต์ รูปภาพ และมัลติมีเดีย รูปแบบมัลติมีเดีย (Multimedia Formats) องค์ประกอบมัลติมีเดีย (เช่น เสียงหรือวิดีโอ) จะถูกจัดเก็บไว้ในไฟล์มีเดีย วิธีทั่วไปในการค้นหาประเภทของไฟล์คือการดูที่นามสกุลไฟล์ ไฟล์มัลติมีเดียมีรูปแบบและนามสกุลต่างกัน เช่น .wav, .mp3, .mp4, .mpg, .wmv และ .avi รูปแบบวิดีโอทั่วไป HTML รองรับรูปแบบ MP4, WebM และ Ogg YouTube แนะนำให้ใช้รูปแบบ MP4 Format File คำอธิบาย MPEG […]
HTML Canvas Graphics
HTML Canvas คืออะไร? <canvas> ใช้ในการวาดกราฟิกได้ทันทีผ่าน JavaScript <canvas> เป็นเพียงภาชนะสำหรับกราฟิก คุณต้องใช้ JavaScript เพื่อวาดกราฟิกจริงๆ ซึ่ง Canvas มีหลายวิธีในการวาดเส้นทาง กล่อง วงกลม ข้อความ และการเพิ่มรูปภาพ เบราว์เซอร์ที่สนับสนุน ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับ <canvas> ทั้งหมด Element Chrome Edge Firefox Safari Opera <canvas> 4.0 9.0 2.0 3.1 9.0 ตัวอย่าง Canvas ผืนผ้าใบ (Canvas) เป็นพื้นที่สี่เหลี่ยมบนหน้า HTML ตามค่าเริ่มต้น ผืนผ้าใบไม่มีเส้นขอบและไม่มีเนื้อหา Markup มีลักษณะดังนี้: หมายเหตุ: ระบุ id Attribute (ที่จะอ้างถึงในสคริปต์) เสมอและ Attribute width และ height […]