Category: Javascript

  • การกำหนดค่าพื้นฐานความปลอดภัยสำหรับ IIS และ WordPress บน Windows Server

    เพื่อให้ Web Server ของเราปลอดภัยจากการถูกโจมตี บทความนี้จะเป็นการแนะนำการกำหนดค่าต่างๆของ web server ที่ให้บริการ ซึ่งทำงานด้วยบน Windows Server และ มีการติดตั้ง IIS, PHP, MySql, ASP.Net และ WordPress

    • การกำหนดส่วนของ Windows Server อ้างอิงคำแนะนำจาก Quays SSL Labs ให้ได้ระดับ A ขึ้นไป
      1. ใช้ใบรับรองจาก CA ที่น่าเชื่อถือ และ ใช้การ RSA 2048 bits (SHA256withRSA) ขึ้นไป
      2. การกำหนด Cipher Suites ที่ปลอดภัย ซึ่งจะมีเครื่องมือที่ช่วยในการกำหนดดังนี้
        • IIS Crypto เป็นโปรแกรมฟรีไม่ต้องติดตั้งสำหรับช่วยจัดการกำหนด protocols, ciphers, hashes and key exchange algorithms บน Windows Server โดยกำหนดพื้นฐานดังนี้
          1. เมนู Schannel
          1.1 Protocols เลือกกำหนดใช้งาน TLS 1.2 และ/หรือ TLS 1.3 เท่านั้น
          1.2 Cipher เลือกกำหนดเป็น AES
          1.3 Hashes เลือก SHA 256 ขึ้นไป
          1.4 Key Exchanges สามารถเลือกได้ทั้ง Diffie-Hellman, PKCS และ ECDH
          2. เมนู Cipher Suites สามารถกำหนด Cipher Suites ที่ปลอดภัยในปัจจุบัน ซึ่งค้นหาได้จากเว็บ https://www.tenable.com/plugins/nessus/156899
      3. เป็นส่วนของการกำหนดใน IIS
        • การกำหนดสำหรับ Security Headers ให้ได้ระดับ A+ อ้างอิงคำแนะนำจากเว็บ https://securityheaders.com/
        • การจัดการ Http Response Header โดยกำหนดค่าดังนี้
          1. X-Frame-Options เป็นการกำหนดเพื่อหลีกเลี่ยงจากการถูกโจมตีด้วย Clickjacking
            ตัวอย่างการกำหนดค่าเป็น SAMEORIGIN
          2. X-XSS-Protection เป็นการป้องกันการโหลดสคริปต์ข้ามไซต์
            ตัวอย่างการกำหนดเป็น 1; mode=block
          3. X-Content-Type-Options เป็นการป้องการโจมตีเนื้อหาประเภท MINE (Multipurpose Internet Mail Extensions) ซึ่งเป็นรูปแบบที่ใช้ระบุประเภทของข้อมูลที่ถูกส่งผ่านเครือข่าย หรือเก็บที่เครื่องอุปกรณ์ มันช่วยบอกให้ระบบรับรู้ว่าไฟล์เป็นประเภทไหนและวิธีการจัดการข้อมูลนั้น ที่อาจถูกใช้ในการโจมตีเพื่อหลอกลวงระบบหรือละเว้นมาตรฐานการตรวจสอบปลอดภัย เช่น application/pdf, image/jpeg, text/html
            ตัวอย่างการกำหนดค่าเป็น nosniff
          4. Referrer-Policy เป็นการควบคุมการส่งผ่านส่วนอ้างอิง เช่น ป้องกันส่วน HTTPS ไม่ให้กลับไป HTTP ที่ไม่ปลอดภัย
            ตัวอย่างการกำหนดค่าเป็น no-referrer-when-downgrade
          5. Strict-Transport-Security เป็นการช่วยให้การเข้าเว็บไซต์ด้วย HTTPS เท่านั้น
            ตัวอย่างการกำหนดค่าเป็น max-age=31536000; includeSubDomains; preload
          6. Content-Security-Policy เป็นการระบุที่มาของเนื้อหาที่ได้รับอนุญาตให้โหลดบนเว็บไซต์ เช่น JavaScript เพื่อป้องกันการโจมตีแบบ Cross-Site Scripting (XSS)
            ตัวอย่างการกำหนดค่าเป็น upgrade-insecure-requests
          7. Permissions-Policy เป็นการควบคุมการเปิดใช้งานเช่น กล้อง หรือ ไมโครโฟน หรือ ฟีเจอร์อื่น ๆ
            ตัวอย่างการกำหนดค่า เช่น geolocation=(), camera=(), microphone=()
        • การปกปิดเวอร์ชันไม่แสดงในส่วนของ Header สามารถกำหนดเพิ่มเติมดังนี้
          1. เมนู IIS Manager –> Configuration Editor
            • Section: system.webServer/security/requestFiltering กำหนด removeServerHeader เป็น True เพื่อไม่ให้แสดง เวอร์ชันของ server
            • Section: system.web/httpRuntime กำหนด enableVersionHeader เป็น False เพื่อไม่ให้แสดงเวอร์ชันของ IIS หรือ ASP.Net
          2. กำหนด expose_php = Off ใน php.ini เพื่อไม่ให้แสดงเวอร์ชันของ php
          3. ลบ X-Powered-By ออกจาก HTTP Response Headers
      4. กำหนด IP Address ส่วนของ Remote Address ใน Windows Defender Firewall with Advance Security – Inbound Rules เพื่อควบคุมการเข้าถึงจากคอมพิวเตอร์ที่ได้รับอนุญาตเท่านั้น
      5. ปิด port ที่ไม่ได้ใช้งาน
    • การกำหนดส่วนของเว็บ
      1. การเรียกใช้งานไรบรารีจากภายนอกเว็บไซต์ เช่น เดิม จะมีการเรียกใช้โดยอ้างอิงแบบ
        src=”https://code.jquery.com/jquery-3.7.1.min.js” ซึ่งจะไม่มีการตรวจสอบความน่าเชื่อถือ
        เพื่อสร้างความเชื่อมั่นว่าไรบรารีที่ใช้งานจะไม่มีการเปลี่ยนแปลง จึงมีการเพิ่มส่วนการตรวจสอบ integrity และ crossorigin ซึ่งสามารถเลือกใช้งาน Code Integration ได้จากเว็บ https://releases.jquery.com/jquery/ หรือ https://cdnjs.com/libraries ดังตัวอย่างนี้
        • src=”https://code.jquery.com/jquery-3.7.1.min.js” integrity=”sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=” crossorigin=”anonymous” หรือ
        • src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js” integrity=”sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==” crossorigin=”anonymous” referrerpolicy=”no-referrer”
      2. การป้องกันการเรียกดู user data ผ่าน REST API ใน WordPress กรณีนี้ควรติดตั้งส่วนเสริมไม่ให้สามารถเรียกใช้งานผ่าน REST API โดยไม่มีการยืนยันตัวตนก่อน เช่น Disable WP REST API
    • หลังจาก กำหนดค่าเรียบร้อยแล้ว สามารถทดสอบได้ที่ https://www.ssllabs.com/ssltest/analyze.html คลิกเลือก Do not show the results on the boards ก่อนสแกน ด้วยครับ
    • Windows Server 2019 รองรับ TLS 1.2
    • Windows Server 2022 รองรับ TLS 1.2 และ TLS 1.3
      หมายเหตุ ทั้งนี้ Windows Server 2022 เพิ่มการรองรับ TLS 1.3 อย่างไรก็ตาม หากเปิดใช้งานทั้ง TLS 1.2 และ 1.3 Site Scanner จะส่งผลให้ได้เกรด A เท่านั้น เนื่องจากปัจจุบัน Windows Server ไม่รองรับการป้องกันการโจมตีแบบดาวน์เกรด หากไคลเอนต์ร้องขอ TLS 1.3 Windows จะยังคงอนุญาตให้ปรับไปใช้ TLS 1.2 ได้ และนั่นคือสาเหตุที่ Site Scanner รายงานเกรด A แทนที่จะเป็น A+
  • เทคนิคการเลื่อนสลับแถว (Drag & Drop) ใน Table ด้วย JavaScript

    บล็อกนี้น่าจะเป็น EP สุดท้ายของซีรี่ส์ Drag & Drop row ใน HTML Table แล้ว จากบล็อกที่ผ่านๆ มา ผู้เขียนได้ใช้เทคนิคต่างๆ โดยพึ่งพา framework ที่ใช้ในการพัฒนาโปรแกรม เช่น ASP.NET, Blazor หรือ jQuery แต่สำหรับบล็อกนี้เราจะเขียนโดยใช้ JavaScript ล้วนๆ บวกกับ CSS จาก Bootstrap อีกนิดหน่อยเพื่อความสวยงามของ Table และเพื่อไม่ให้เป็นการเสียเวลา เรามาลุยกันเลยครับ

    1. เริ่มต้นด้วยการเตรียมไฟล์ HTML ดังโค้ดด้านล่าง

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    		<title>Drag & Drop Table Row</title>
    		
    		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    	</head>
    	<body style="padding:10px">
    		
    		<table style="width:90%;" class="table table-striped">
    			<thead>
    				<tr >
    					<th>ลำดับ</th>
    					<th>จังหวัด</th>
    				</tr>
    			</thead>
    			<tbody id="provinceList">
    			</tbody>
    		</table>
    		
    	</body>
    </html>

    2. เพิ่ม code JavaScript สำหรับเพิ่มข้อมูลลงใน Table ใน event window.onload โดยเราจะเพิ่มแท็ก <tr> ใน element tbody ที่มี id=”provinceList” และระบุ class=”prv-item” สำหรับใช้ในการอ้างถึงจากโค้ด JavaScript

    <script>
    
    window.onload = async () => {
    
    	const provinces = ['สงขลา','ปัตตานี','ยะลา','นราธิวาส','สตูล'];
    	for (let i = 0; i < provinces.length; i++) {
    		provinceList.innerHTML += "<tr class='prv-item' data-value=" + i + "><td> " + (i + 1) + "</td><td>" + provinces[i] + "</td></tr>";
    	};
    
    };
    
    </script>

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

    3. และเพิ่มโค้ด JavaScript สำหรับผูก event ต่างๆ เข้ากับแต่ละ <tr> ที่เพิ่มเข้าไป ใน event window.onload เพื่อให้สามารถลากและวางได้

    let listPrvItems = document.querySelectorAll(".prv-item");
    listPrvItems.forEach((element) => {
    	element.draggable = true;
    	element.addEventListener("dragstart", dragStart, false);
    	element.addEventListener("dragover", dragOver, false);
    	element.addEventListener("drop", drop, false);
    });

    4. เพิ่มโค้ด JavaScript ส่วนควบคุม event ต่างๆ คือ เมื่อเริ่มกดลาก เมื่อกดวาง และฟังก์ชันสำหรับหาตำแหน่งของแถว (<tr>) ที่เริ่มกดลาก ดังนี้

    //หาลำดับของ tr จาก value ที่ส่งมา ทำการวนลูปเทียบกับ data-value ใน tr ของตารางทั้งหมด
    const getPosition = (value) => {
    	let elementIndex;
    	let listPrvItems = document.querySelectorAll(".prv-item");
    	listPrvItems.forEach((element, index) => {
    		let elementValue = element.getAttribute("data-value");
    		if (value == elementValue) {
    			elementIndex = index;
    		}
    		});
    	return elementIndex;
    };
    
    //เก็บตำแหน่ง x,y และ element ที่เริ่มคลิกลาก
    function dragStart(e) {
    	initialX = e.clientX;
    	initialY = e.clientY;
    	//Set current Element
    	currentElement = e.target;
    }
    
    function dragOver(e) {
    	e.preventDefault();
    }
    
    //เหตุการณ์วาง
    const drop = (e) => {
    	e.preventDefault();
    
        // เก็บตำแหน่ง x, y ที่วาง
    	let newX = e.clientX;
    	let newY = e.clientY;
    
    	//Set targetElement(where we drop the picked element).It is based on mouse position
        // เก็บ element ที่จะถูกวางแทนที่
    	let targetElement = document.elementFromPoint(newX, newY);
    
        // ตรวจสอบว่า element ที่ถูกวาง เป็น TD หรือไม่ ถ้าใช่ จะเปลี่ยนให้เป็น TR ที่เป็น parent ของ TD นั้น
        // เนื่องจากการลากวาง จะเป็นการลากวางและแทนที่ทั้งแถว ซึ่งก็คือ TR
    	if(targetElement.nodeName == "TD")
    	{
    		targetElement = targetElement.parentNode;
    	}
    
        // เก็บ value จาก element ต้นทางและปลายทาง
    	let currentValue = currentElement.getAttribute("data-value");
    	let targetValue = targetElement.getAttribute("data-value");
    
    	//หาตำแหน่ง TR จาก value
    	let [currentPosition, targetPosition] = [
    		getPosition(currentValue),
    		getPosition(targetValue),
    	];
    	initialX = newX;
    	initialY = newY;
    
    	try {
    
    	if (currentPosition < targetPosition) {
          
          // ถ้าแถวที่เริ่มลาก น้อยกว่าแถวที่จะวาง จะทำการแทรกในตำแหน่งด้านล่างของแถวที่จะวาง
    	  targetElement.insertAdjacentElement("afterend", currentElement);
    	} else {
    
          // ถ้าแถวที่เริ่มลาก มากกว่าแถวที่จะวาง จะทำการแทรกในตำแหน่งด้านบนของแถวที่จะวาง
    	  targetElement.insertAdjacentElement("beforebegin", currentElement);
    	}
    	} catch (err) {}
    }; 

    4. เมื่อทดสอบการทำงาน รายชื่อจังหวัดในตารางจะสามารถคลิก ลาก และวางไปยังตำแหน่งที่ต้องการได้

    5. และเมื่อ drop ลงไปยังตำแหน่งที่ต้องการ จังหวัดที่ลากมาก็จะแทรกเข้าไปยังตำแหน่งที่ drop

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


    แหล่งข้อมูลอ้างอิง

  • เขียน JavaScript RegExp กับข้อมูล sensitive ให้แสดง 4 ตัวอักษรสุดท้าย

    เขียน JavaScript กับข้อมูลที่ sensitive โดยใช้ RegExp เพื่อแสดงบางส่วน เนื่องจากทางผู้เขียนได้รับ requirement ให้ปรับปรุงข้อมูลที่อ่อนไหว ให้แสดงบางส่วน อย่างเช่น เลขบัตรประชาชน

    โดยก่อนอื่นจะอธิบายความหมายสัญลักษณ์ RegExp ตัวอย่างเช่น

    สัญลักษณ์ความหมาย
    .หาตัวอักษรเดียวและยกเว้น newline หรือ line terminator
    เช่น คำว่า “Thailand Finland” หากใช้ pattern /./ จะได้ผลลัพธ์ “T”
    n{X}นับจำนวนอักษรทั้งหมดตามจำนวน X ตัวอักษร
    เช่น คำว่า “Thailand Finland” หากใช้ pattern /.{4}/ จะได้ผลลัพธ์ “Thai”
    ?=nหาตัวอักษรทั้งหมดทีมี n
    เช่น คำว่า “Thailand Finland” หากใช้ pattern /.(?=land)/ จะได้ผลลัพธ์ “i”
    gหาตัวอักษรที่ตรงทั้งหมดและจะหยุดเมื่อเจอผลลัพธ์แรก
    เช่น คำว่า “Thailand Finland” หากใช้ pattern /.(?=land)/g จะได้ผลลัพธ์ “i,n”

    จากตัวอย่างคำว่า “Thailand Finland” หากใช้ pattern /.(?=.{4})/g จะได้ผลลัพธ์ “T,h,a,i,l,a,n,d, ,F,i,n”

    จากตัวอย่างคำว่า “1234567890123” หากใช้ pattern /.(?=.{4})/g จะได้ผลลัพธ์ “1,2,3,4,5,6,7,8,9”

    จากนั้นใช้ function replace()

    Note: To replace all matches, use a regular expression with a /g flag (global match)

    จากรูป แสดงการเขียน JavaScript แสดงบางส่วนโดยที่แสดง 4 ตัวอักษรสุดท้าย ส่วนอักษรอื่นเปลี่ยนเป็น x
    ผลลัพธ์จากการใช้งานจริง

    หวังว่า km จะมีประโยชน์ไม่มากก็น้อยนะคะ

    ที่มา https://www.w3schools.com/jsref/jsref_obj_regexp.asp

  • สร้าง Modal dialog อย่างง่ายด้วย jquerymodal

    เนื่องจากตอนนี้มีพรบ.คอมพิวเตอร์เข้ามาเกี่ยวข้อง จึงต้องมี pop up Modal dialog ถามผู้ใช้ วันนี้จะมาแนะนำการใช้งาน jQuery ที่เรียกใช้ไม่กี่บรรทัดเราก็ได้ Modal dialog โดยจะยกตัวอย่าง Modal dialog แบบไม่ให้ปิดได้ โดยต้องอ่านข้อความก่อน ถึงจะปิดได้

    ขั้นตอนที่ 1 เพิ่ม jquery.min.js, jquery.modal.min.js, jquery.modal.min.css เพื่อเรียกใช้งาน

    <!-- Remember to include jQuery :) -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javascript"></script>
        <!-- jQuery Modal -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" />    

    ขั้นตอนที่ 2 เพิ่มการตั้งค่า Modal dialog ตามตัวอย่างไม่ให้แสดงปุ่ม “ปิด”

     <script type="text/javascript">
            $(document).ready(function () {
                $("#ex1").modal({
                    escapeClose: false,
                    clickClose: false,
                    showClose: false,
                    fadeDuration: 100
                });
            });
    
        </script>

    ขั้นตอนที่ 3 เพิ่ม User interface Modal dialog โดยใช้ tag div

    ขั้นตอนที่ 4 ได้ผลลัพธ์ Modal dialog ออกมาอย่างสวยงาม

    ที่มา : https://jquerymodal.com

  • Firebase และ Arduino ตอนที่ 1

    บทความนี้ ตอนที่ 1 จะพูดถึง (แจกโค๊ด) Firebase Realtime Database และ ตอนที่ 2 จะพูดถึง Arduino โดยที่ในตอนที่ 1 จะเป็นโปรแกรมให้เห็นว่า นำข้อมูลใส่เข้าใน Firebase Realtime Database ได้อย่างไร แล้วในตอนที่ 2 เราจะโปรแกรม Arduino ให้เชื่อมต่อเน็ตผ่าน Wi-Fi 802.1x แล้วหลอด LED จะถูกเปิด/ปิด หรือ เปลี่ยนสี เมื่อมีการสั่งจากโปรแกรม JavaScript ในตอนที่ 1

    ในขั้นตอนการติดตั้ง Firebase สมัครใช้งาน สร้าง Database ลองหาอ่านกันเอาเองนะครับ มันง่าย ๆ ครับ เรามาเริ่มต้นที่มี Database ชื่อว่า Firstapp-IoT ที่ผมสร้างไว้แล้ว ขั้นตอนมาเราจะโปรแกรม JavaScript โดยการเขียนโปรแกรมไว้ใน local folder เครื่องของผมใช้ Windows 10 ผมก็สร้างไว้ที่ C:\myFirebase และก็ไปดาวน์โหลด firebase-tools-instant-win.exe เพื่อใช้ในการทดสอบแบบ localhost ด้วยคำสั่ง firebase serve แล้วทำการทดสอบโปรแกรมผ่านเว็บเบราว์เซอร์ที่ localhost:5000 และเมื่อโปรแกรมพร้อมใช้ก็นำขึ้นไปไว้ใน Firebase hosting ด้วยคำสั่ง firebase deploy –only hosting แล้วก็สามารถใช้โปรแกรมผ่านทางเว็บเบราว์เซอร์ที่ firstapp-iot.web.app

    ภาพที่ 1 สร้างไดเรกทอรีขึ้นมาเองชื่อ myFirebase

    รัน firebase-tools-instant-win.exe

    ในขั้นตอน setup ครั้งแรก เราสร้างไดเรกทอรีชื่อ nodemcu

    จะมีคำถามว่าจะสร้าง project ใหม่ หรือ ใช้ที่มีอยู่ ผมมีอยู่แล้ว ดังรูป

    ภาพที่ 2 Firebase setup

    และถัดไป

    ภาพที่ 3 Firebase setup เสร็จจะได้ C:\myFirebase\nodemcu\public ไว้เขียนโปรแกรม

    เราจะเขียนโปรแกรมภาษา JavaScript ไว้ที่เรา setup ไว้ ไฟล์แรกที่เราจะเขียนคือ index.html และเมื่อเสร็จเราก็รัน firebase-tools-instant-win.exe กลับเข้ามา และทดสอบโดยคำสั่ง firebase serve

    ภาพที่ 4 ย้ายเข้าไปในที่ที่เรากำหนดเป็น project ของเรา และรันคำสั่งเพื่อทดสอบ

    และเมื่อโปรแกรมเริ่มใช้งานได้แล้ว ก็นำไปไว้บน Firebase hosting ด้วยคำสั่ง firebase deploy ดังรูป

    ภาพที่ 5 คำสั่ง firebase deploy –only hosting คือเอาเฉพาะที่อยู่ในไดเรกทอรี public

    ผลลัพธ์ของโปรแกรม

    ภาพที่ 6 เว็บเพจ firstapp-iot.web.app หน้านี้ใช้ index.html

    เมื่อเราใส่ email ที่อนุญาต ก็จะเข้าสู่หน้าต่อไปที่จะทดสอบการอัปเดตค่าข้อมูลใน Firebase Realtime Database ของ project ชื่อ Firstapp-IoT ดังรูป

    ภาพที่ 7 เว็บเพจหน้านี้ใช้ setled.html

    เมื่อคลิกที่ SET LED ON ได้ผลลัพธ์แบบนี้

    ภาพที่ 8 ที่ Firebase มีการอัปเดตข้อมูล

    สำหรับเว็บเพจ setled.html เป็นการทดสอบให้เห็นว่า เราสามารถตั้งค่า Firebase authentication ด้วย email แล้วอนุญาตให้แก้ไขข้อมูลใน Firebase Realtime Database ได้ โดยต้องไปตั้งค่า Rules ให้ดี

    ถัดไป คลิกที่ Goto NodeMCU ESP8266 Project ผมจะสาธิตการควบคุม Arduino NodeMCU ESP8266 ให้เปิด/ปิด LED ตรงนี้เชื่อมต่อผ่านเน็ต Wi-Fi 802.1x

    ภาพที่ 9 เว็บเพจ setledcolor.html

    ทดสอบคลิก Set LED On และเลือก GREEN

    ภาพที่ 10 ที่ Firebase จะมีการอัปเดตข้อมูลตามที่เราเลือก

    และดูผลลัพธ์ที่อุปกรณ์ ดังรูป

    ภาพที่ 11 Arduino เปิด LED และเปลี่ยนสีเขียว

    ถัดไปลองอีกตัวอย่าง คลิก Set LED Off และเลือก BLUE

    ภาพที่ 12 ที่ Firebase จะมีการอัปเดตข้อมูลตามที่เราเลือก

    และดูผลลัพธ์ที่อุปกรณ์ ดังรูป

    ภาพที่ 13 Arduino ปิด LED และเปลี่ยนสีฟ้า

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

    ภาพที่ 14 ใช้สายชาร์ตแบตมือถือนำไปเสียบปลั๊กไฟเพื่อจ่ายไฟแทนก้อนแบตก็ได้

    ต่อไปมาดูส่วนโปรแกรมกันบ้าง

    ภาพที่ 15 แสดงไดเรกทอรีที่เราทำขั้นตอน firebase setup

    คลิกเข้าไปในไดเรกทอรี public จะเห็นดังรูป

    ภาพที่ 16 แสดงไดเรกทอรีที่เราเขียนโปรแกรมเอาไว้

    แจกโค๊ดให้ครับ เข้าไปที่ github ตาม link นี้ https://github.com/woonpsu/firstapp-iot

    ถัดไปเรามาดูส่วนที่เราต้องมีใน Firebase

    ภาพที่ 17 ส่วนของ Web App ที่เราจะต้อง set up แล้วเราจะได้ firebaseConfig นำไปใส่ในโค๊ดที่แจก

    ในการทดสอบโปรแกรม เราจะต้องเปิด Developer tools ดังรูป

    ภาพที่ 18 เว็บเบราว์เซอร์ Google Chrome เปิด Developer tools

    เราใช้คำสั่ง console.log() เพื่อ debug ดูว่าโปรแกรม error มั้ย

    ภาพที่ 19 แสดงผลการ debug ของคำสั่ง console.log(‘Success!’);

    ถัดไปมาดูส่วนที่เราจะต้องมีใน Firebase

    ภาพที่ 20 แสดงการ set up Firebase Authentication ให้ใช้ Sign-in method เฉพาะ Email/Password

    สร้าง User ได้ในแท็บ Users และ Firebase Authentication Built-In Sign-In อนุญาตให้สร้างเพิ่มจากหน้า Sign-In หากยังไม่มีชื่อ User ที่ป้อน ตรงนี้เราต้องจัดการลบทิ้ง หรือ setup Firebase API ควบคุม หรือ เขียนส่วน Sign-In ใหม่เองครับ

    ภาพที่ 21 แสดงตัวอย่าง User ที่จะได้ Unique User UID ใช้ในการอนุญาต

    ถัดไปมาดู Rules ที่เราใช้ใน Project นี้

    ภาพที่ 22 แสดง Rules ที่กำหนดว่า อนุญาตให้ Read และ อนุญาตให้ Write ได้อย่างไรบ้าง

    ในตัวอย่าง setled.html แสดงตัวอย่างการใช้ rules แบบ “.read”: true และ “.write”: “$uid === auth.uid” โดยมี path เริ่มต้นที่ “$uid”

    ในตัวอย่าง setledcolor.html แสดงตัวอย่างการใช้ rules แบบ “.read”: true และ “.write”: true เนื่องจาก FirebaseArduino Library ไม่รองรับคำสั่ง Firebase Authentication ด้วย User

    และเมื่อเราใช้ Firebase cli ในการ deploy เราก็จะได้ Firebase Hosting ดังรูป

    ภาพที่ 23 แสดง Hosting ของ Project firstapp-iot และเห็น Current release และ Deployed ซึ่งเป็นอันก่อนหน้า

    ในบทความต่อไปจะเป็น Arduino เชื่อมต่อเน็ต Wi-Fi 802.1x ตอนที่ 2

  • การย่อ-ยุบแถวข้อมูลบน GridView โดยประยุกต์ใช้ร่วมกับ jQuery และ Collapse ใน Bootstrap (C#)

               จากความเดิมตอนที่แล้ว เราได้พูดถึงวิธีการจัดการข้อมูลจำนวนมากด้วยการจัดกลุ่มหมวดหมู่ของข้อมูลใน GridView กันไปแล้ว ซึ่งหากผู้อ่านท่านใดต้องการทราบวิธีการจัดหมวดหมู่สามารถตามดูเนื้อหาในบทความได้จาก การจัดหมวดหมู่แถวของข้อมูลบน GridView ด้วย C# และในส่วนของบทความนี้จะเป็นเนื้อหาต่อยอดการทำงานจากการจัดหมวดหมู่ดังกล่าว โดยเพิ่มความสามารถให้หมวดหมู่หรือกลุ่มเหล่านั้นสามารถย่อ-ยุบได้ เพื่ออำนวยความสะดวกให้กับผู้ใช้ในการดูข้อมูลแยกส่วนกันชัดเจนมากยิ่งขึ้น หรือเพื่อตอบโจทย์ให้กับผู้ใช้บางท่านที่อาจมีความต้องการดูข้อมูลทีละส่วนได้ โดยจะนำ Component ที่ชื่อว่า Collapse ใน Bootstrap มาประยุกต์ใช้ในการแสดงผลร่วมกับ GridView และยังมี jQuery มาเป็นอีกหนึ่งตัวช่วยเพื่อให้สามารถแสดงผลตามที่ต้องการได้ โดยการอธิบายในบทความนี้ ทางผู้เขียนจะขอตัดตอนในส่วนของรายละเอียดขั้นตอนวิธีการจัดหมวดหมู่ไป และข้ามมาพูดถึงขั้นตอนที่ต้องจัดทำเพิ่มเติมในการทำย่อ-ยุบเลยละกันนะคะ

               ก่อนจะไปเริ่มในส่วนของการเขียนโค้ด เรามาทำความรู้จักกับ ค่าที่จำเป็นต้องใช้ในการระบุให้กับแถวหลัก(parent)เพื่อให้สามารถย่อยุบได้ กันก่อนนะคะ

    • data-toggle=”collapse
    • data-target=”.multi-collapse” เพื่อกำหนด target ที่เราต้องการให้ย่อยุบได้ โดยใช้สไตล์ชีทเป็นตัวช่วยเพื่อแยกแต่ละกลุ่มออกจากกัน ซึ่งในที่นี้จะตั้งชื่อสไตล์ชีท multi-collapse ตามด้วยรหัสของประเภทกลุ่มนั้น โดยต้องระบุสไตล์ชีทนี้ให้กับแถวย่อย(child)ด้วย
    • aria-controls=”demo1 demo2 demo3 demo4 demo5” เพื่อกำหนดพื้นที่ที่จะย่อยุบ โดยสามารถกำหนดได้มากกว่า 1 พื้นที่ ซึ่งจะแยกด้วยการเว้นวรรคชื่อ id ของแถวย่อย(child) ในตัวอย่างนี้ คือ แถวย่อยของแถวหลักนี้ ประกอบด้วย 5 แถว คือ แถวที่มี id ชื่อ demo1,demo2,demo3,demo4, demo5 นั่นเอง
    • class = “collapseToggle” เป็นการระบุสไตล์ชีทเพื่อใช้ในการระบุตำแหน่งในการเปลี่ยนไอคอนเวลากดย่อ-ยุบ โดยเรียกใช้งานผ่าน jQuery(ซึ่งจะกล่าวถึงในส่วนถัดไป)

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

    1. ปรับแก้ในส่วนของ GroupGv_DataBound เพิ่มเติม เพื่อกำหนดค่าที่ระบุไว้ข้างต้นในแถวของหมวดหมู่ที่แทรกเข้ามา

    string lastCatName = "";
    string AllName = "";
    
     
    protected void GroupGv_DataBound(object sender, EventArgs e)
            {
                lastCatName = "";
                Table table = (Table)GroupGv.Controls[0];
    
                foreach (GridViewRow row in GroupGv.Rows)
                {
                  
                    HiddenField HidCatName = (HiddenField)row.FindControl("HidCatName");
                    HiddenField HidCatID = (HiddenField)row.FindControl("hdCatID");
                    HiddenField HidID = (HiddenField)row.FindControl("hdID");
    
                    ////ตั้งชื่อ id ให้กับแถวย่อย(child) แต่ละแถว
                    row.Attributes.Add("id", "Name" + HidID.Value);
    
                   ////กำนดสไตล์ชีทของตัวแถวย่อยและระบุเพื่อให้ย่อยุบได้ ด้วย accordian-body collapse และระบุพื้นที่เพื่อให้อ้างถึงจากแถวหลัก(parent)ได้ 
                  /////ซึ่งเป็นในส่วนของ multi-collapse จะเป็น multi-collapse ตามด้วยชื่อรหัสประเภทนั่นเอง 
                  /////โดยแถวย่อย(child) ที่มีแถวหลัก(parent)เดียวกัน ค่าของ multi-collapse จะตรงกันและตรงกับค่า target ที่ระบุไว้ในแถวหลัก(parent)ด้วย
    
                    if (row.RowState == DataControlRowState.Alternate)  ////กรณีที่ต้องการให้แต่ละแถวสลับสีกันเพื่อให้ง่ายต่อการดูข้อมูล 
                       row.CssClass = "Blue accordian-body collapse multi-collapse" + HidCatID.Value;
                    else               
                      row.CssClass = "accordian-body collapse multi-collapse" + HidCatID.Value;
    
                    if (HidCatName.Value != lastCatName)
                    {
    
                       ////////วนเพื่อหาจำนวน child ในแต่ละประเภทเพื่อใช้ในการกำหนด aria-controls
    
                        var strList = GroupData.Select("CategoryID='" + HidCatID.Value + "'");
                        foreach (DataRow dr in strList)
                        {
                            AllName += " Name" + dr["ID"];
                        }
    
                       //// เป็นการหาผลรวมค่าของฟิลด์ Amt ซึ่งหมายถึงจำนวน โดยเป็นการรวมค่าฟิลด์แยกตามแต่ละ CategoryID นั่นเอง
    
                        var sumOfValuesInCategory = GroupData.AsEnumerable().Where(x => x.Field<string>("CategoryID") == HidCatID.Value).Sum(x => x.Field<int>("Amt")).ToString();
                       
                        int realIndex = table.Rows.GetRowIndex(row);
                        string text = HidCatName.Value;
                        GridViewRow newHeaderRow = new GridViewRow(realIndex, 0, DataControlRowType.Header, DataControlRowState.Normal);
    
                        /////กำหนดค่าต่างๆ (data-toggle  data-target  aria-controls )ให้กับแถว เพื่อให้สามารถย่อ-ยุบได้ 
    
                        newHeaderRow.Attributes.Add("data-toggle", "collapse");
                        newHeaderRow.Attributes.Add("data-target", ".multi-collapse" + HidCatID.Value);
                        newHeaderRow.Attributes.Add("aria-expanded", "true");
                        newHeaderRow.Attributes.Add("aria-controls", AllName);
    
                        TableCell newCell = new TableCell();
                        newHeaderRow.Cells.AddAt(0, newCell);
    
                       /////ปรับแก้การระบุค่า ColumnSpan จากเดิมที่รวมกันทุกคอลัมน์(GroupGv.Columns.Count) 
                       //// แต่กรณีนี้ต้องเว้นคอลัมน์ไว้แสดงผลจำนวนรวมแต่ละประเภทด้วย
    
                        newCell.ColumnSpan =1;
                        newCell.BackColor = System.Drawing.Color.FromName("#399ea9"); ;
                        newCell.ForeColor = System.Drawing.Color.White;
                        newCell.Font.Bold = true;
                        newCell.Attributes.Add("class", "collapseToggle");
    
                        /////ใส่ไอคอน + หน้าข้อความชื่อประเภท เพื่อบอกให้ทราบว่าสามารถกดย่อ-ยุบได้
                        newCell.Text = "<i class='fas fa-plus mr-2'></i>" + string.Format(HidCatName.Value, "&nbsp;{0}", text);
    
                        ///สร้าง TableCell หรือคอลัมน์ใหม่ เพื่อแสดงผลข้อมูลจำนวนรวมของแต่ละประเภท 
    
                        TableCell newCellTotal = new TableCell();
    
                        /////เพิ่ม TableCell ในแถวที่กำลังสร้างและระบุค่าต่างๆ
                        newHeaderRow.Cells.AddAt(1, newCellTotal);
                        newCellTotal.ColumnSpan = 1;
                        newCellTotal.BackColor = System.Drawing.Color.FromName("#399ea9"); ;
                        newCellTotal.ForeColor = System.Drawing.Color.White;
                        newCellTotal.Font.Bold = true;
                        newCellTotal.HorizontalAlign = HorizontalAlign.Right;
    
                        ////นำค่าผลรวมในตัวแปร sumOfValuesInCategory ที่คำนวณได้ข้างต้นมาจัดรูปแบบก่อนแสดงผลใน TableCell สร้าง
    
                        newCellTotal.Text = string.Format("{0:#,##0}",int.Parse(sumOfValuesInCategory));
                        newCellTotal.Attributes.Add("class", "collapseToggle");
                        table.Controls.AddAt(realIndex, newHeaderRow);
                    
                          AllName = "";
    
                    }
                    lastCatName = HidCatName.Value;
                }
            }

    2.จัดทำให้ไอคอนสามารถเปลี่ยนเป็น + หรือ – ได้ เมื่อกดย่อ-ยุบ ด้วย jQuery

     <script>
         $(document).ready(function () {
    
    ///เมื่อมีการคลิก element ที่มีสไตล์ชีท collapseToggle จะทำการเปลี่ยนค่าไอคอน หากเป็นภาพบวกจะเปลี่ยนเป็นลบ หากเป็นเครื่องหมายลบจะเปลี่ยนเป็นเครื่องหมายบวก
                $('.collapseToggle').click(function () {
                    $(this).find('i').toggleClass('fa-plus fa-minus');
                });
            });
    </script>

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

        <style>
            .collapseToggle {
                cursor: pointer;
            }
        </style>

    ผลลัพธ์

    เกร็ดความรู้เพิ่มเติม : จากตัวอย่างข้างต้น ตอนเปิดหน้าจอครั้งแรก ทุกหมวดหมู่จะถูกยุบอยู่ หากต้องการให้การแสดงผลครั้งแรก ทุกหมวดหมู่ถูกขยายอยู่ สามารถปรับแก้โค้ดอีกเพียงเล็กน้อย ดังนี้ค่ะ

    1. เพิ่มคำว่า “show” เข้าไปในสไตล์ชีทตอนกำหนดให้แถวย่อย ดังนี้ค่ะ

    แบบเดิม

                    if (row.RowState == DataControlRowState.Alternate)  ////กรณีที่ต้องการให้แต่ละแถวสลับสีกันเพื่อให้ง่ายต่อการดูข้อมูล 
                       row.CssClass = "Blue accordian-body collapse multi-collapse" + HidCatID.Value;
                    else               
                      row.CssClass = "accordian-body collapse multi-collapse" + HidCatID.Value;

    แบบใหม่

                      if (row.RowState == DataControlRowState.Alternate)  ////กรณีที่ต้องการให้แต่ละแถวสลับสีกันเพื่อให้ง่ายต่อการดูข้อมูล 
    
                        row.CssClass = "Blue accordian-body collapse show multi-collapse" + HidCatID.Value;
                    else
                        row.CssClass = "accordian-body collapse show multi-collapse" + HidCatID.Value;

    2.ปรับแก้ให้ไอคอนแรกที่ต้องการแสดงเป็นเครื่องหมายลบ ดังนี้ค่ะ

    แบบเดิม

                       /////ใส่ไอคอน + หน้าข้อความชื่อประเภท เพื่อบอกให้ทราบว่าสามารถกดย่อ-ยุบได้
                        newCell.Text = "<i class='fas fa-plus mr-2'></i>" + string.Format(HidCatName.Value, "&nbsp;{0}", text);

    แบบใหม่

                        /////ใส่ไอคอน + หน้าข้อความชื่อประเภท เพื่อบอกให้ทราบว่าสามารถกดย่อ-ยุบได้
                        newCell.Text = "<i class='fas fa-minus mr-2'></i>" + string.Format(HidCatName.Value, "&nbsp;{0}", text);

    ผลลัพธ์

              จากตัวอย่าง การแสดงผลครั้งแรกก็จะเปลี่ยนเป็นขยายทั้งหมด และแสดงไอคอนเป็นเครื่องหมายลบ(-)ตั้งต้นไว้ให้ และสามารถย่อ-ยุบตามปกติได้แล้วค่ะ

    เพิ่มเติม

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

    1. สร้างปุ่ม 2 ปุ่ม เพื่อกดขยายทั้งหมด และย่อทั้งหมด

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div class="col pull-right">
                    <asp:LinkButton ID="lnkShowAll" runat="server" CssClass="btn btn-sm btn-info mb-1" OnClientClick="javascript:ShowHideAll('1');return false;"><i class="fas fa-eye"></i>แสดงทั้งหมด</asp:LinkButton>
                    <asp:LinkButton ID="lnkHideAll" CssClass="btn btn-sm btn-info mb-1" OnClientClick="ShowHideAll('0');return false;" runat="server"><i class="fas fa-eye-slash"></i>ซ่อนทั้งหมด</asp:LinkButton>
                </div>
    
    
            </ContentTemplate>
        </asp:UpdatePanel>

    2. เขียนฟังก์ชั่นในการซ่อน/แสดงทั้งหมด

    <script>
        
     function ShowHideAll(flag) {
    
              /////ล้างค่าการระบุการแสดงผลและการแสดงไอคอนทั้งหมด ทำให้ทุกแถวยุบอยู่ จนกว่าจะมีการสั่งให้ show
                $(".accordian-body").removeClass("show");
                $(".collapseToggle").find('i').removeClass("fa-plus").removeClass("fa-minus");
    
             /////กรณีต้องการให้แสดงจะเพิ่มสไตล์ชีท show ให้กับทุกแถว และแสดงไอคอนเป็น - ทั้งหมด เพื่อให้กดย่อได้
    
                if (flag == '1') {
                    $(".accordian-body").addClass("show");
                    $(".collapseToggle").find('i').addClass("fa-minus");
                }
            /////กรณีต้องการให้แสดงจะแสดงไอคอนเป็น + ทั้งหมด เพื่อให้กดขยายได้
                else
                    $(".collapseToggle").find('i').addClass("fa-plus");
                }
    
    </script>

    ผลลัพธ์

    หมายเหตุ : ในการทำงานนี้จะใช้ jQuery และ Bootstrap ร่วมด้วย ผู้ที่จะนำไปใช้งานอย่าลืมอ้างอิงไฟล์สไตล์ชีทและสคริปท์ของ Bootstrap รวมทั้งไฟล์ของ jQuery เพื่อให้โค้ดข้างต้นสามารถทำงานได้นะคะ

              ทั้งหมดนี้ก็เป็นเพียงหนึ่งในตัวอย่างวิธีการที่จะแก้ปัญหาในการแสดงผลข้อมูลแบบตารางด้วย GridView แบบจัดกลุ่มและสามารถย่อ-ยุบข้อมูลภายในกลุ่มได้ โดยนำความสามารถของ Component อย่าง collapse ใน Bootstrap เข้ามาช่วยเท่านั้น แต่ในส่วนของรูปแบบ วิธีการ แต่ละท่านสามารถปรับเปลี่ยนและพลิกแพลงเพิ่มเติมได้ตามความเหมาะสม อีกทั้งยังสามารถนำเกร็ดความรู้นี้ไปประยุกต์ใช้กับงานของท่านได้อีกด้วย และขอบคุณที่ติดตามนะคะ ^^

    แหล่งอ้างอิง

    https://getbootstrap.com/docs/4.0/components/collapse/
    https://www.geeksforgeeks.org/how-to-change-symbol-with-a-button-in-bootstrap-accordion/

  • เขียนโค้ดแก้ปัญหา browser block popup แบบง่ายๆ ใช้งานได้จริง

    เดี๋ยวนี้การเปิดหน้าเวบของผู้ใช้งานทั่วไปมักใช้มือถือแทนคอมพิวเตอร์แล้ว แล้วตอนนี้ browser ทั่วไปจะทำการ block popup JavaScript ใน function window.open ดังนั้นทำให้ง่ายที่สุดคือใช้ link ให้เป็นประโยชน์ โดยใช้ properties href ในการเรียกใช้ตามโค้ดตัวอย่างข้างล่างนี้

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

  • รู้จักเอแจ๊กซ์ (AJAX) และการใช้งาน

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

    ปกติแล้วในภาษาสคริปต์ที่ใช้งานกับเว็บไซต์จะมีการทำงานประมวลผลแบบเป็นลำดับ (synchronous) โดยที่คำสั่งแรกจะต้องประมวลผลให้เสร็จสิ้นก่อนแล้วถึงจะทำงานในคำสั่งถัดไป แต่กระบวนการทำงานแบบเอแจ๊กซ์เมื่อบราวเซอร์ (Browser) ร้องขอข้อมูลไปยังเซิร์ฟเวอร์ (Server) บราวเซอร์จะไปทำงานคำสั่งถัดไปทันที (asynchronous) โดยที่ไม่ต้องรอการตอบกลับจากเซิร์ฟเวอร์ก่อน

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

    ตัวอย่างโค้คการทำงาน AJAX ของโดยใช้ jQuery

    $.ajax({
        	type: 'GET',
        	url: 'send-ajax-data.php',
        	dataType: "JSON", // data type expected from server
        	success: function (data) {
               	console.log(data);
        	},
        	error: function(error) {
               	console.log('Error: ' + error);
        	}
    });
    

    และปัจจุบันในการเขียน JavaScript เพื่อเรียกใช้งาน AJAX นั้นเราไม่จำเป็นต้องพึ่งพา jQuery อีกต่อไปแล้วซึ่งสามารถเขียนโค้ดการทำงานได้ดังนี้

    วิธีที่ 1  ใช้ XMLHttpRequest [1]

    var request = new XMLHttpRequest();
    request.open('GET','https://tutorialzine.com/misc/files/my_url.html', true);
    
    request.onload = function (e) {
        if (request.readyState === 4) {
    
            // Check if the get was successful
            if (request.status === 200) {
                console.log(request.responseText);
            } else {
                console.error(request.statusText);
            }
        }
    };
    
    // Catch errors:
    request.onerror = function (e) {
        console.error(request.statusText);
    };
    
    request.send(null);
    

    วิธีที่ 2 ใช้ Fetch API [2]

    fetch('./api/some.json')
      .then(
        function(response) {
          if (response.status !== 200) {
            console.log('Looks like there was a problem. Status Code:' +
     response.status);
            return;
          }
    
          // Examine the text in the response
          response.json().then(function(data) {
            console.log(data);
          });
        }
      )
      .catch(function(err) {
        console.log('Fetch Error :-S', err);
      });
    

    อ้างอิง:

    https://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery [1]

    https://developers.google.com/web/updates/2015/03/introduction-to-fetch [2]

    https://www.javascripttutorial.net/javascript-fetch-api/  

    วิดีโอ: https://www.youtube.com/watch?v=F1TECaRf-uA&feature=youtu.be&t=2375

  • รู้จักการจัดการข้อมูล JSON และการใช้งาน

    รูปแบบข้อมูล JSON เป็นมาตรฐานในการแลกเปลี่ยนข้อมูลระหว่างเซิฟเวอร์และไคลเอนต์ที่ได้รับความนิยมในปัจจุบันซึ่งได้ถูกนำไปใช้งานอย่างแพร่หลายเช่นการเขียนโปรแกรมโดยใช้เทคนิค AJAX, RESTFul, เขียนคอนฟิกไฟล์ หรือการพัฒนา API เป็นต้น

    ด้วยคุณสมบัติของ JSON ที่เป็นไฟล์ประเภทข้อความ (Text based) ขนาดเล็กน้ำหนักเบา เป็นมาตรฐานกลางทุกภาษาสามารถใช้งานได้ง่ายทั้งการอ่านและเขียนที่มนุษย์สามารถอ่านเข้าใจได้ง่าย

    อักขระมาตารฐานของ JSON

    1. เครื่องหมาย “:” ใช้สำหรับแยกค่า name และ value
    2. เครื่องหมาย “,” ใช้สำหรับแยกข้อมุล name-value ในแต่ละคู่
    3. เครื่องหมาย “{” และ “}” ระบุว่าข้อมูลเป็นออบเจ็ค
    4. เครื่องหมาย “[” และ “]” ระบุว่าข้อมูลเป็นอาเรย์
    5. เครื่องหมาย “” (double quotes) ใช้เขียนค่า name-value ใน JSON

    ตัวอย่างการเขียนค่า Json

    – จำนวน 1 คู่

    "name" : "value"

    – หากมีมากกว่า 1 คู่ ให้ใช้เครื่องหมายคอมมา , (comma) ในการแยกเป็นคู่

    "name" : "value", "name" : "value", "name": "value"

    – ต้วอย่าง JSON object

    {
      "name" : "mama papa",
      "email" : "mama@email.com",
    };
    

    ชนิดข้อมูลของ JSON มี 6 ชนิด คือ

    1. strings
    2. numbers
    3. objects
    4. arrays
    5. booleans
    6. null or empty

    – ตัวอย่างการใช้งานชนิดข้อมูล

    {
       "text" : "This is Sting",
       "number" : 210,
       "object" :  {
                        "name" : "abc",
                        "popularity" : "immense"
                    },
       "arary" : ["1","2","3"], 
       "empty" : ,  	
       "booleans" : true
    }
    

    การใช้งาน JSON ร่วมกับภาษา JavaScript

    – ตัวอย่างการแสดงค่า JSON objects

    var user = {
       "name" : "mama papa",
       "email" : "mama@email.com",
    };
    
    console.log("The name is:  " +user.name);
    console.log("email is:  " +user.email);
    
    //output
     The name is: mama papa
     email is: mama@email.com

    – ตัวอย่างการแสดงค่า JSON objects ใน array

    var students = [{
       "name" : "สมชาย",
       "age" :  "29",
       "gender" : "ผู้ชาย"
    },
    {
       "name" : "สมหญิง",
       "age" : "27",
       "gender" : "ผู้หญิง"
    }];
    
    console.log(students[0].age);  //output: 29
    console.log(students[1].name); //output: สมหญิง

    – ตัวอย่างการแสดงค่า JSON objects ใน objects

    var cars = {
      "toyota" : {
         "type" : "vios",
         "year" :  "2018"
      },
      "honda" : {
         "type" : "city",
         "year" : "2015"
      }
    }
    
    console.log(cars.toyota.type); //output: vios
    console.log(cars.honda.year); //output: 2015

    ทริปเล็กๆน้อยๆ

    ในการใช้งาน JSON ในภาษา JavaScript มีฟังก์ชั่นที่เราใช้งานบ่อยๆ อยู่ 2 ฟังก์ชัน คือ

    1. JSON parser สำหรับแปลง JSON object เป็น javascript object ตัวอย่างเช่น
    var myJSObject = JSON.parse(students);

     2. JSON stringify สำหรับแปลง JavaScript object เป็น JSON text

    var jsonText= JSON.stringify(myJSObject);

    (*ข้อควรระวังอย่าสับสนระหว่าง JSON object กับ  javascript object เพราะมันเป็นคนละอย่างกันนะครับ [3])

    ทริปเพิ่มเติมสำหรับการใช้งานร่วมกับภาษา PHP จะมีฟังก์ชั่น json_encode เพื่อส่งข้อมูล json ไปให้ฝั่ง javascript ไปใช้งานต่ออีกที หากเราต้องการที่จะแปลงข้อมูลให้เป็น javascript object เพื่อจะให้เรานำข้อมูล json ไปทำงานต่อไปได้ง่ายขึ้นสามารถทำดังนี้

    var jsonText= JSON.stringify(myJsonFormPHP);
    var myJSObject = JSON.parse(jsonText);

    Reference:

    https://beginnersbook.com/2015/04/json-tutorial/

    https://restfulapi.net/json-data-types/

    Javascript Object VS JSON(JavaScript Object Notation) มันคนละเรื่องกัน ? [3]