CoP PSU IT Blog – Page 50 – แหล่งรวมบทความเกี่ยวกับ IT โดยชาว PSU IT

Bootstrap Modal Full Screen

May 17, 2021 16:34

หลายๆ ท่านที่เคยใช้งาน Bootstrap เป็น Frontend Framework น่าจะเคยใช้ modal กันมาบ้าง ซึ่ง modal เป็นจาวาสคลิปต์ปลั๊กอิน มีไว้สำหรับการแสดงผลข้อมูล ทั้งรูปภาพ ข้อความ หรือแบบฟอร์มรับข้อมูล ( html input form ) ในลักษณะป๊อปอัพ ซึ่ง modal ของ bootstrap สามารถแสดงผลได้หลายขนาด ทั้งแบบปกติ แบบเล็ก และแบบใหญ่ ขึ้นอยู่กับ class ที่เราสามารถระบุเพิ่มเข้าไปว่าต้องการให้แสดงผลเป็นแบบไหน ตัวอย่างโค้ด modal dialog และปุ่มสำหรับเปิด modal จะได้ผลลัพธ์ดังรูป ถ้าต้องการให้ modal แสดงผลใหญ่ขึ้นหรือเล็กลง ให้ระบุ modal-lg modal-sm หลัง modal-dialog ดังตัวอย่าง ถ้าเราต้องการให้ modal สามารถแสดงผลแบบเต็มจอ (full screen) จะไม่สามารถทำได้ (อ้างอิงจากเวอร์ชัน 3.3 ที่ผู้เขียนใช้งาน แต่จากการตรวจสอบล่าสุดพบว่าเวอร์ชัน 5.0 สามารถทำได้แล้ว) แต่เราจะใช้ความรู้ในเรื่อง css มาปรับแต่งเพิ่มเติมเพื่อให้สามารถแสดงผลได้ตามความต้องการ โดยเราจะต้องเพิ่ม css class ที่ระบุคุณสมบัติที่จำเป็น ดังตัวอย่าง ระบุ class fullscreen ไว้ด้านหลัง modal-dialog modal จะได้แสดงผลเต็มจอดังรูป และเพื่อให้การแสดงผล modal มีความยืดหยุ่นและมีการทำงานใกล้เคียงกับ dialog ของ Windows ทั่วไป คือสามารถขยายให้เป็น full screen และย่อให้กลับมาขนาดเท่าเดิม โดยสิ่งที่เราต้องทำเพิ่มคือ เพิ่มปุ่ม fullscreen เมื่อ modal แสดงผลอยู่ในสภาพปกติ เมื่อคลิกปุ่ม fullscreen จะเปลี่ยนการแสดงผล modal ให้เป็นแบบ fullscreen ซ่อนปุ่ม fullscreen และแสดงผลปุ่ม restore แทน เพิ่มปุ่ม restore เมื่อ modal แสดงผลในรูปแบบ fullscreen เมื่อคลิกปุ่ม restore จะเปลี่ยนการแสดงผล modal กลับไปเป็นสภาพปกติ ซ่อนปุ่ม restore และแสดงผลปุ่ม fullscreen แทน โดยมีขั้นตอนดังต่อไปนี้ 1. เพิ่มปุ่ม fullscreen และปุ่ม restore ใน div class=”modal header” จะเห็นว่าปุ่มที่เพิ่มขึ้นมาจะมีการระบุชื่อ class “restore-dialog” และ “fullscreen-dialog” ซึ่งจะใช้ในการอ้างถึงในโค้ด jQuery ที่ใช้ควบคุมการทำงานเมื่อมีการคลิกปุ่มนั้นๆ 2. เนื่องจากผู้เขียนใช้ icon ที่อยู่ใน font awesome ดังนั้นจะต้องเพิ่ม link style sheet เพื่ออ้างไปถึงไฟล์ css ของ font awesome ภายนอกไซต์ที่กำลังพัฒนา (CDN) โดยไปเพิ่มไว้ใน tag <head></head> 3. เพิ่มชุดคำสั่ง jQuery 4. ทดสอบ ก็จะได้ผลลัพธ์ดังภาพ จะเห็นว่ามีปุ่ม fullscreen แสดงอยู่ เมื่อกด modal จะแสดงผลเป็น fullscreen ดังภาพ และเมื่อกดปุ่ม restore หน้าจอ modal ก็จะแสดงผลกลับไปเป็นเหมือนเดิม หวังว่าบทความนี้จะเป็นประโยชน์ไม่มากก็น้อย น่าจะพอเป็นแนวทางให้ผู้อ่านนำไปประยุกต์ใช้กับงานของตัวเองนะครับ สวัสดีครับ แหล่งข้อมูลอ้างอิง https://www.jquery-az.com/minimize-maximize-modal-of-bootstrap-by-using-jquery-3-demos/ https://getbootstrap.com/docs/3.3/javascript/#modals

จะทำอย่างไรให้สามารถดึงข้อมูลมาแสดงผลด้วย Progress bar โดยใช้ .Net (C#)

May 17, 2021 12:55

จากบทความก่อนหน้านี้ ผู้เขียนได้แนะนำเกี่ยวกับ Progress bar และวิธีการใช้งานเบื้องต้นกันไปแล้ว ซึ่งใครที่ยังไม่ได้อ่าน สามารถอ่านเพิ่มเติมได้ ที่นี่ มาถึงในบทความนี้ ผู้เขียนจึงขอนำความรู้ดังกล่าวมาต่อยอดประยุกต์ใช้กับการทำงานจริงที่มีการดึงข้อมูลตอน Runtime มาแสดงผลด้วย Progress bar โดยผู้เขียนจะไม่ขอลงรายละเอียดในส่วนของการสร้างสไตล์ชีทและการกำหนดค่าต่างๆแล้ว แต่จะเน้นในส่วนของการดึงข้อมูลมาแสดงแทน โดยผู้เขียนจะพยายามยกตัวอย่างให้เห็นหลายแนว เพื่อให้ผู้อ่านเห็นภาพในการนำไปใช้มากขึ้น ซึ่งแต่ละแบบจะต้องทำอย่างไรบ้าง มาดูกันเลยค่ะ แบบแถบละสี ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล 2. เมธอดในการแปลงค่าสไตล์ชีทเพื่อปรับสีตามจำนวนที่ส่งมาเป็นพารามิเตอร์ จากโค้ดข้างต้นจะเป็นการกำหนดสไตล์ชีทที่จะใช้ ซึ่งจะขึ้นอยู่กับจำนวนค่า % ที่ส่งมาเป็นพารามิเตอร์ โดยจะแบ่งออกเป็น 4 ช่วง สีแดง ช่วงตั้งแต่ 0 – 25 % สีส้ม ช่วงตั้งแต่ 26 – 50 % สีฟ้า ช่วงตั้งแต่ 51 – 75 % สีเขียว ช่วงตั้งแต่ 76 – 100 % ตัวอย่างการเรียกใช้งาน ผลลัพธ์ แบบหลายสีในแถบเดียวกัน(แบบที่ 1) โดยในตัวอย่างนี้ จะเป็นการแสดงข้อมูลจำนวนผลไม้เป็น % รวมในแถบ Progress bar เดียวกัน ซึ่งจะแยกตามสี และมีบอกจำนวนรวมถึงชื่อผลไม้ให้ทราบ อีกทั้งยังแสดงจำนวนรวมของผลไม้ทุกชนิดด้วย โดยมีวิธีการทำ ดังนี้ค่ะ ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล จากโค้ดตัวอย่างข้างต้น จะเห็นว่าการสร้างแท็ก Html จะแตกต่างจากแบบแรก คือจะมีการสร้างใน <div class=\”progress\”> เดียวกัน ซึ่งมีหลักการคล้ายกับการสร้าง Progress bar อย่างง่ายหลายสีในแถบเดียวกันที่เคยกล่าวไว้แล้วในบทความก่อนหน้านั่นเอง ผลลัพธ์ แบบหลายสีในแถบเดียวกันและแสดงหลายแถบ Progress Bar(แบบที่ 2) ในตัวอย่างนี้ เป็นการแสดงผลแถบสีแยกตามช่วงของข้อมูลบน Progress bar แต่ละแถบ โดยการแสดงผลจะแบ่งสีตามปริมาณข้อมูลในแต่ละช่วง ดังนี้ สีแดง ช่วงตั้งแต่ 0 – 25 % สีส้ม ช่วงตั้งแต่ 26 – 50 % สีฟ้า ช่วงตั้งแต่ 51 – 75 % สีเขียว ช่วงตั้งแต่ 76 – 100 % หากข้อมูลที่ต้องการแสดงผลตกอยู่ในช่วงใดก็จะมีการแสดงแถบสีนั้นขึ้นมาให้เห็นตามลำดับ โดยมีวิธีการทำต่อไปนี้ค่ะ ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล 2. สร้างเมธอดที่ใช้ในการสร้างแท็ก Html ในการแสดงผลแถบสี ซึ่งในส่วนของกระบวนการคำนวณแถบสีจะไม่ขอลงในรายละเอียด แต่แสดงไว้ให้เห็นภาพการทำงานหลักๆเท่านั้น ดังนี้ค่ะ ผลลัพธ์ หมายเหตุ : จากตัวอย่างข้างต้น เป็นเพียงการยกตัวอย่างเพื่อให้ผู้อ่านเข้าใจการประยุกต์ใช้งาน และการทำงานร่วมกับ Progress bar เพิ่มมากขึ้นเท่านั้น ซึ่งผู้อ่านสามารถดัดแปลง และมีวิธีการรวมถึงเทคนิคที่แตกต่างออกไปที่จะนำมาใช้ในการพัฒนาเพื่อแสดงผลข้อมูล ขึ้นกับอัลกอริธึมของแต่ละท่าน จากบทความนี้จะเห็นได้ว่า วิธีการดึงข้อมูลมาแสดงผลด้วย Progress bar แบบนี้ จะมีความยืดหยุ่นกว่าแบบที่มีการกำหนดค่าตายตัวในบทความก่อนหน้า อีกทั้งยังสามารถแสดงจำนวนแถบ Progress bar และสีได้ไม่จำกัด ขึ้นอยู่กับข้อมูล การกำหนดเงื่อนไขในการแสดงผล และความต้องการของผู้พัฒนาที่จะดึงข้อมูลมาแสดงผลนั่นเอง และผู้เขียนหวังเป็นอย่างยิ่งว่า บทความนี้ จะพอเป็นแนวทางในการนำไปใช้งานจริงให้กับทุกท่านได้นะคะ ขอบคุณค่ะ ^^ แหล่งข้อมูลอ้างอิง : https://bestjquery.com/tutorial/progress-bar/demo78/ https://www.jquery-az.com/boots/demo.php?ex=51.0_5

มาทำความรู้จักและเรียนรู้การใช้งาน Progress bar ในเบื้องต้นกันเถอะ

May 17, 2021 12:53

โดยปกติแล้วในการพัฒนาเว็บไซต์ของเรา คงมีบางเวลาที่เราอาจจะอยากแสดงผลข้อมูลของเราในรูปแบบของ Progress bar ซึ่งเป็นแถบของข้อมูล เพื่อเพิ่มมุมมองให้กับการแสดงผลให้ไม่น่าเบื่อจำเจแทนที่จะเป็นเพียงการแสดงผลตัวเลขเฉยๆ โดยเจ้า Progress bar นี้จะทำให้เราเห็นภาพได้ว่า ข้อมูลของเราได้ดำเนินการใกล้ถึงเป้าหมายแล้วหรือยัง ซึ่งขึ้นอยู่กับวัตถุประสงค์ในการนำไปใช้ ดังนั้นในบทความนี้ ผู้เขียนจึงขอแนะนำวิธีการใช้งาน Progress bar แบบเบื้องต้น โดยจะมีขั้นตอนง่ายๆ 3 ขั้นตอน ดังนี้ การกำหนสไตล์ชีท โดยเราจะใช้สไตล์ชีทเหล่านี้ เพื่อช่วยให้การแสดงผลของ Progress bar ของเราสวยงามมากยิ่งขึ้น ซึ่งการกำหนดสไตล์ชีทสามารถทำได้ 2 วิธี คือแบบที่กำหนดในไฟล์เลย หรือแยกเป็นไฟล์สไตล์ชีทต่างหากได้ ซึ่งโดยส่วนตัวผู้เขียนขอแนะนำให้ทำเป็นแบบแยกไฟล์สไตล์ชีทออกมาต่างหากแล้วอ้างถึงจากไฟล์ที่เรียกใช้แทน เพื่อง่ายต่อการปรับปรุง และใช้งานในครั้งต่อไปค่ะ ไฟล์ Progress.css เพิ่มเติม : การอ้างอิงไฟล์สไตล์ชีทจากภายนอก โดยที่อยู่ของไฟล์ก็ขึ้นกับการระบุของแต่ละท่าน 2. การกำหนดพื้นที่ในการแสดงผล Progress bar ในส่วนของแท็ก body ในไฟล์ html คำอธิบาย : จากตัวอย่าง จะเห็นว่าเราสามารถปรับแต่งและใส่ข้อมูลให้กับ Progress bar 3 ส่วนคือ ข้อความบนแถบ Progress bar ได้ในส่วนของ Progress-title คือ <h3 class=”progress-title”>Basic Progress</h3> กำหนดความกว้างของ Progress bar ได้ผ่านทาง style-inline คือ style=”width:85%;” แสดงข้อความจำนวนของข้อมูลบนแถบ Progress bar คือ <div class=”progress-value“><span>85</span>%</div> นั่นเอง 3. การเรียกใช้งาน jQuery เพื่อการแสดงผล Progress bar ของเราให้มีการเพิ่มขึ้นของจำนวนเลขที่แสดงตั้งแต่ 0 จนถึงจำนวนเลขนั้น เช่น หากเลขที่ต้องการแสดงคือ 60% ตัวเลขแสดงจำนวนดังกล่าวจะค่อยๆเปลี่ยนแปลงเพิ่มขึ้นโดยเริ่มจาก 0 จนถึง 60 นั่นเอง ผลลัพธ์ เพิ่มเติม จากตัวอย่างข้างต้น จะเป็นการแสดงผล Progress bar แบบพื้นฐานอย่างง่าย เพียงเท่านี้ท่านก็จะสร้าง Progress bar ได้ด้วยตนเองแล้ว แต่หากท่านใดที่อยากเพิ่มสีสันและความสวยงามให้กับ Progress bar ของท่าน ก็สามารถทำได้ดังตัวอย่างนี้ค่ะ1. ปรับแก้เพิ่มเติมในส่วนของการกำหนดพื้นที่ในการแสดงผล 2. เพิ่มสไตล์ชีทที่ใช้สำหรับเพิ่มสีสันให้กับ Progress bar ของเรา ผลลัพธ์ จากตัวอย่างข้างต้น จะเป็นวิธีการสร้าง Progress bar ที่มีการใส่สีสันให้กับแต่ละแถบเส้น แต่ลูกเล่นของการแสดงผล Progress bar ยังสามารถทำได้หลายแบบ ซึ่งผู้เขียนจะขอแนะนำอีกวิธี ซึ่งเป็นการสร้าง Progress bar แบบหลายสีในแถบเดียวกันโดยมีวิธีการเพิ่มเติม ดังนี้ค่ะ การกำหนดพื้นที่ในการแสดงผล Progress bar ในส่วนของแท็ก body ในไฟล์ html จากโค้ดตัวอย่างข้างต้น จะสังเกตเห็นว่าการกำหนดค่าต่างๆจะมีลักษณะกับหลักการที่กล่าวไว้แล้วข้างต้น แต่จะแตกต่างกันตรงที่การแสดงผลหลายแถบสีในแถบเดียวกันจะมีการกำหนด progress bar ภายใต้แท็ก <div class=”progress”> เดียวกัน และหากต้องการกำหนดให้มีกี่แถบสีก็สามารถเพิ่มสี และกำหนดขนาดของแต่ละแถบสีได้ตามต้องการ ผลลัพธ์ โดยบทความนี้ก็ถือเป็นเพียงส่วนหนึ่งของการแนะนำการใช้งาน รวมถึงลูกเล่นของ Progress bar ในเบื้องต้นเท่านั้น เนื่องจากรูปแบบและการใช้งานของ Progress bar ยังมีให้เลือกใช้ เลือกลองกันอีกมากมายหลายแบบเลยนะคะ ผู้เขียนหวังว่าความรู้จากบทความนี้จะเป็นพื้นฐานและตัวช่วยให้กับนักพัฒนาสามารถนำไปประยุกต์ใช้ในงานของตนได้ไม่มากก็น้อยค่ะ ^^ แหล่งข้อมูลอ้างอิง : https://bestjquery.com/tutorial/progress-bar/demo78/ https://www.jquery-az.com/boots/demo.php?ex=51.0_5

ว่าด้วยการนับแถวข้อมูลใน ORACLE

May 16, 2021 20:46

การนับแถวข้อมูล (Row Count) ในตารางข้อมูล (Table) บน ORACLE จะใช้คำสั่ง SQL พื้นฐานคือ SELECT COUNT(*) FROM table_name; แต่ในบางครั้งข้อมูลที่ไม่ปกติหรือการเพิ่มพารามิเตอร์ในคำสั่ง COUNT อาจทำให้ได้ผลลัพธ์ที่แตกต่างกันได้ดังตัวอย่าง จากภาพเป็นการเพิ่มตารางข้อมูล และเพิ่มข้อมูลในลักษณะที่แตกต่างกันคือ เพิ่มข้อมูลที่ไม่ซ้ำกัน เพิ่มข้อมูลซ้ำกัน เพิ่มข้อมูลที่เป็น NULL ทั้งสิ้น 7 rows เมื่อใช้คำสั่งเรียกดูข้อมูลและนับจำนวนข้อมูลพบว่าข้อมูลถูกแสดงถูกต้อง และสามารถนับได้ 7 rows ถูกต้อง เมื่อใช้พารามิเตอร์ ALL ในคำสั่ง COUNT จะพบว่าสามารถนับได้ 5 แถว ซึ่งจะหมายถึงการนับเฉพาะแถวที่มีค่าข้อมูล (ยกเว้นแถวที่มี F1 เป็น NULL) การทำงานโดยใช้คำสั่ง SELECT COUNT( ALL f1) FROM table1; จะให้ผลการทำงานเหมือนกับการนับโดยระบุเงื่อนไข SELECT COUNT(*) WHERE f1 IS NOT NULL; ดังรูป เมื่อใช้พารามิเตอร์ DISTINCT ภายในคำสั่ง COUNT จะพบว่าผลการนับจะแสดงค่าที่ไม่ซ้ำเท่ากับ 4 (ค่าที่นับได้คือ 1,2,3,4) ค่า NULL ใน Row=5,7 ไม่ถูกนับเนื่องจาก NULL ไม่มีค่า สรุปในเบื้องต้นการนับจำนวนแถวใน ORACLE โดยใช้คำสั่ง COUNT นอกจากจะนับจำนวนแบบง่ายด้วยคำสั่ง COUNT(*) แล้ว เราสามารถระบุพารามิเตอร์ให้มีค่าเป็น ALL หรือ DISTINCT ก็จะให้ผลลัพธ์ของการทำงานที่แตกต่างกันได้

การใช้งานหน่วยเวลาใน ORACLE ระดับมิลลิวินาที

May 16, 2021 12:56

การใช้งานประเภทเวลาใน ORACLE ที่เราใช้งานปกติคือข้อมูลประเภท Date (Data Type=Date) ซึ่งจะเก็บข้อมูลที่มีหน่วยเล็กที่สุดคือ วินาที (second) การใช้งานระบบที่มีผู้ใช้จำนวนมากพร้อมๆกัน ในบางครั้งหน่วยวินาทีอาจไม่ละเอียดพอ จำเป็นต้องใช้หน่วยเวลาที่เล็กกว่าวินาทีคือมิลลิวินาที (1000 มิลลิวินาที = 1 วินาที) ซึ่งใน ORACLE ได้จัดเตรียมข้อมูลประเภทนี้ไว้ให้คือ Timestamp ซึ่งสามารถใช้งานได้ทั้งการสร้างเป็นคอลัมน์ในตารางข้อมูลหรือเป็นตัวแปรใน PL/SQL ดังตัวอย่าง การใช้งาน Timestamp ใน SQL จากรูปจะสร้างฟิลด์ประเภท NUMBER, DATE และ TIMESTAMP (ที่ระดับความละเอียด 6 digits) โดยฟิลด์ DATE กำหนด Default Value = SYSDATE และ TIMESTAMP กำหนด Default = SYSTIMESTAMP เมื่อเพิ่มข้อมูลโดยระบุค่าในฟิลด์ ID ค่าในฟิลด์ Date1, Date2 จะถูกป้อนค่าอัตโนมัติดังรูป โดยจะเห็นค่าความละเอียดของหน่วยเวลาที่แตกต่างกันของทั้งสองฟิลด์ดังรูป จากรูปจะพบว่าค่าในฟิลด์ Date1 มีค่าเวลาหน่วยวินาทีเท่ากับ 38 ส่วน Date2 มีค่าเวลาหน่วยวินาทีเป็น 38.779 ทดสอบการเพิ่มข้อมูลเพื่อดูค่าเวลาในฟิลด์ Timestamp โดยเพิ่มข้อมูลและหยุด 100 มิลลิวินาที ก่อนเพิ่มรายการถัดไป จากรูปจะพบว่าค่า Date1 ของรายการ 2,3 มีค่าเท่ากันในขณะที่ Date2 (Timestamp) มีค่าต่างกัน การใช้งานตัวแปรประเภท Timestamp ใน PL/SQL นอกจาก Timestamp สามารถใช้งานในคำสั่ง SQL แล้ว ยังสามารถใช้งานได้ใน PL/SQL ได้อีกด้วยดังรูป จากรูปเป็นการสร้างตัวแปรประเภท Timestamp และนำค่าข้อมูลในฟิลด์ข้อมูลมาจัดเก็บและแสดง จากบทความนี้สามารถสรุปได้ว่า สามารถใช้งาน Data Type ประเภท Timestamp บน ORACLE เพื่อจัดการกับข้อมูลที่มีผู้ใช้งานระบบหลายคนพร้อมๆกัน ซึ่งจำเป็นต้องใช้หน่วยเวลาที่มีความละเอียดกว่าวินาที