Javascript – Page 5 – CoP PSU IT Blog

วิธีการตรวจสอบข้อมูลในรูปแบบ JSON

July 15, 2016 11:04

ข้อมูลรูปแบบของ JSON เป็นที่นิยมใช้เป็นวิธีการส่งข้อมูลอย่างมากในปัจจุบัน ซึ่งในบ้างครั้งข้อมูลส่งจะมีความซับซ้อนหรือมีการซ้อนกันของข้อมูลหลายชั้น ทำให้การอาจเกิดข้อผิดพลาดในการสร้างข้อมูลหรือยากในการตรวจสอบข้อมูล ซึ่งในบทความนี้จึงขอเสนอเว็บไซต์ที่ช่วยในการตรวจสอบข้อมูลและแบ่งชั้นของข้อมูลที่ซ้อนกันหลาย ๆ ชั้น ในรูปแบบ JSON ได้ คือ https://jsonformatter.curiousconcept.com จากรูป มีสิ่งที่ต้องระบุหลัก ๆ คือ JSON Data/URL สามารถวางข้อมูลหรือ URL ของข้อมูลได้ทั้งสองอย่าง JSON Standard เลือกว่า JSON ของเราสร้างโดยมาตรฐานใด หรือเราอยากตรวจสอบว่า JSON ที่เราสร้างอยู่ในมาตรฐานที่เราต้องการไหม เมื่อกำหนดเรียบร้อยก็กดปุ่ม Process จากรูป ระบบจะแสดงผลการตรวจสอบว่าถูกต้องหรือไม่ และนอกจากนี้ระบบยังแบ่งชั้นข้อมูลในแต่ละระดับที่ซ้อนกันให้ ทำให้เราดูชุดข้อมูลได้ง่ายยิ่งขึ้น หากข้อมูลผิดล่ะ จะเป็นไง ลองทำกันดู ในกรณีที่ไม่ถูกต้อง ระบบจะแสดงบรรทัด ที่ไม่ถูกต้อง แล่ะเมื่อคลิก มันจะแสดงสีแดงที่บรรทัดหรืออักษรที่ไม่ถูกต้องให้เราเห็นอีกด้วย

การอัปโหลดไฟล์หลาย ๆ ไฟล์พร้อมกันด้วย Dojo

January 14, 2016 21:33

ที่มา การ upload แฟ้มข้อมูล (File) เป็นกิจกรรมที่อยู่คู่กับ Web application มาเนิ่นนาน ยิ่งเมื่อการพัฒนา Web application เข้าสู่ยุคสมัยของ Web 2.0 และเป็น Web 3.0 ในยุคปัจจุบันก็ยิ่งเกิดเครื่องมือต่าง ๆ เพื่ออำนวยความสะดวกในการ upload ไฟล์มากขึ้นรวมไปถึงความสามารถในการอัปโหลดหลาย ๆ ไฟล์พร้อมกัน (Multi-File Uploading) ณ เวลานี้มีเครื่องมือมากมายสำหรับนักพัฒนา Web application ผู้อ่านอาจมีโอกาสได้ใช้งานเครื่องมือจากบางค่ายบ้างแล้ว แต่ในบทความนี้ผู้เขียนจะแนะนำวิธีการใช้งานเครื่องมือในการทำให้ Web application ของเราสามารถรองรับความต้องการในการอัปโหลดไฟล์หลาย ๆ ไฟล์ได้พร้อมกันตัวหนึ่งชื่อ HTML5 Multi-File Uploader ของ Dojo Toolkit ซึ่งทำงานได้ตามความต้องการของผู้เขียนดังนี้ ความต้องการ สามารถ upload file ได้หลาย ๆ ไฟล์พร้อมกัน upload file ด้วย AJAX ต้องไม่มีการ Post Back หรือทำให้เกิดการ Load หน้า Web ใหม่ สามารถปรับแต่งได้ตามความต้องการ ที่จริงแล้วเครื่องมือของ Dojo Toolkit เป็นเครื่องมือที่ใช้ยากพอสมควรสำหรับคนที่ไม่ค่อยถนัดในการใช้งาน JavaScript แต่เนื่องจาก API ที่เปิดโอกาสให้ผู้ใช้ได้เข้าถึงทุกส่วนของ Widget ทำให้เราสามารถปรับแต่งการใช้งานเพื่อให้เหมาะกับความต้องการได้โดยอิสระ ศึกษาคุณสมบัติของเครื่องมือ HTML5 Multi-File Uploader เป็นส่วนหนึ่งใน package ชื่อ dojox (dojox/form/Uploader) ซึ่งในความเป็นจริงแล้ว เครื่องมือตัวนี้ไม่ได้เจาะจงเฉพาะการใช้งาน HTML5 เท่านั้นแต่ยังคงใช้งานกับ Flash หรือ iframe ได้ด้วยตามแต่ผู้ใช้จะปรับแต่งเนื่องจาก Web browser แต่ละยี่ห้อก็มีข้อจำกัดแตกต่างกันไปตาม Browser engine และ Rendering engine ตามชื่อของเครื่องมือ Uploader ใช้ input ของ HTML5 เป็นองค์ประกอบหลัก จึงต้องกำหนดใน Form ให้รองรับการอัปโหลดไฟล์ด้วยการกำหนด attribute ชื่อ method และ enctype ดังนี้ <form method=”post” enctype=”multipart/form-data”> การสร้าง Widget ของ Uploader ทำได้ 2 รูปแบบดังนี้ Programmatically require([ “dojox/form/Uploader” ], function (Uploader) { myUploader = new dojox.form.Uploader(); } Markup <input name=”uploadedFile” multiple=”true” type=”file” data-dojo-type=”dojox/form/Uploader” data-dojo-props=”label: ‘Select Some Files’,……..” /> <div id=”files” data-dojo-type=”dojox/form/uploader/FileList” data-dojo-props=”uploaderId: ‘uploader’”></div> ลองใช้งาน เนื่องจากผู้เขียนพัฒนา Web application ด้วย Visual C# จึงจะยกตัวอย่างการประยุกต์การใช้งาน Uploader ร่วมกับ ASP.NET ซึ่งมีขั้นตอนดังนี้ 1. นำ Widget มาวางในส่วนที่เราต้องการ <input name=”uploadedfile” type=”file” id=”uploader” data-dojo-id=”fileUploader” data-dojo-type=”dojox/form/Uploader” data-dojo-props=”label: ‘Select files’, url: ‘../Test/TestUpload.ashx’, multiple: true” /> <input type=”hidden” name=”hdnMasterId” id=”hdnMasterId” value=”test” /> <input type=”hidden” name=”hdnFileDesc” id=”hdnFileDesc” value=”test” /> <div id=”files”

สร้างกราฟด้วย Chart.js ร่วมกับ ASP.NET

January 7, 2016 14:24

การแสดงผลในรูปแบบกราฟสำหรับเว็บแอพลิเคชัน ในปัจจุบันนั้น มีเครื่องมือ หรือเฟรมเวิร์ค มากมายให้เลือกใช้งาน ซึ่งสำหรับการเลือกใช้งานก็แล้วแต่ความเหมาะสมกับเครื่องมือ เทคโนโลยี ของเว็บนั้นๆ หรืออาจจะแล้วแต่ความถนัดของผู้พัฒนาเอง สำหรับ Chart.js นั้นเป็นเฟรมเวิร์คที่สร้างด้วยภาษา JavaScript ดังนั้นคุณสมบัติที่พ่วงมาด้วยคือการทำงานแบบ AJAX อย่างเต็มรูปแบบ ซึ่งในบทความนี้จะเป็นการนำเอามาใช้ร่วมกับเว็บแอพลิเคชัน ที่พัฒนาด้วย ASP.NET โดยวิธีการส่งข้อมูลในรูปแบบ JSON ผ่าน Web Services และทำการแปลงข้อมูล JSON ให้อยู่ในรูปแบบของ Object ที่มีโครงสร้างตรงตามที่ Chart.js ต้องการ เพื่อนำไปใช้แสดงผลในรูปแบบกราฟแท่ง กราฟเส้น กราฟวงกลม ผ่าน HTML Tag ที่มีชื่อว่า Canvas ซึ่งมีการเพิ่มส่วนแสดงความหมายของสีต่างๆในกราฟ ที่ได้พัฒนาเพิ่มเติมขึ้นมาอีกด้วย ในบทความนี้จะยกตัวอย่างการสร้างกราฟใน 3 รูปแบบ และมีการกำหนดค่า Option ในการแสดงผลเท่าที่จำเป็นเท่านั้น สามารถอ่านวิธีการใช้งานเต็มรูปแบบได้ที่ http://www.chartjs.org/docs ทำการ Include ไฟล์ Javascript ของ chart.js ไว้ใน header (ในตัวอย่างเป็นการเรียกใช้งานจาก CDN หากต้องการใช้งานจากไฟล์ที่เก็บไว้ที่เว็บเซิฟเวอร์ให้ปรับแก้ src path) <script src=”https://code.jquery.com/jquery-1.11.3.min.js” type=”text/javascript”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js” type=”text/javascript”></script> เพิ่ม canvas ในส่วนของ body <canvas id=”report” width=”600″ height=”300″></canvas> เขียน JavaScript เพื่อสร้างข้อมูล ตามโครงสร้างของกราฟแต่ละประเภท ในตัวอย่างจะเป็นโครงสร้างข้อมูลของกราฟแท่ง var dataDemo = { labels: [“Apple”, “Sumsung”, “ASUS”, “OPPO”], datasets: [{ label: “2557”, fillColor: “#5B90BF”, data: [20, 10, 9, 8] }] }; ทำการสร้าง Context จาก canvas เพื่อนำไปสร้าง Chart Object โดยใช้คำสั่ง ดังนี้ var ctx = $(“#report”).get(0).getContext(“2d”); var chart = new Chart(ctx).Bar(dataDemo, { bezierCurve: false }); จาก 4 ขั้นตอนดังกล่าวเราจะได้โค้ดที่เมื่อทำการเพิ่มโครงสร้างของหน้าเว็บ และบันทึกเป็นไฟล์ html แบบนี้ chart.html ลองเปิดดูจะพบว่าสามารถแสดงกราฟแท่งได้แล้ว แต่ในงานจริงนั้น รู้กันดีนะครับ ว่ามันไม่ง่ายอย่างนั้น โจทย์ของเราคือ สามารถนำข้อมูลจาก Database ซึ่งได้เขียน Query จนได้ข้อมูลแบบที่เราเรียกกันติดปากว่า Crosstab นั้นคือมีชื่อฟิลด์ข้อมูลที่มีความสัมพันธ์กันในแกน x และแกน y ซึ่งเป็นรูปแบบข้อมูลที่นำมาสร้างเป็นกราฟนั้นเอง ส่วนวิธีการนั้น ผมไม่ขอลงรายละเอียดในบทความนี้ แต่สำหรับท่านใดที่ใช้งานฐานข้อมูล Oracle ตั้งแต่ 11g ขึ้นไปลองศึกษาคำสั่งชื่อ Pivot ดูครับ น่าจะช่วยลดความยุ่งยากในขั้นตอนนี้ได้มาก ตัวอย่างข้อมูล แบบ Crosstab ที่เราจะส่งจากฝั่ง Server มาสร้างเป็น Object สำหรับสร้างกราฟอีกทีครับ อีกจุดที่มีความยุ่งยาก คือการแปลงจากรูปแบบข้อมูล Crosstab Datatable เป็น JSON ตัวช่วยของผมในเรื่องนี้คือ Library ที่ชื่อ Newtonsoft.Json สามารถดาวส์โหลดมาใช้งานผ่าน NuGet ได้เลยครับ จากนั้นก็เรียกใช้งาน ดังตัวอย่าง โดยตัวแปล data คือ Datatable ของเรา เมื่อได้ข้อมูล JSON แล้วให้ทำการสร้าง Web Service เพื่อให้สามารถดึงข้อมูลดังกล่าวจาก Javascript ได้ JsonConvert.SerializeObject(data) ถัดจากนั้น

ใช้ google script ทำ mail merge เนื้อหาเมลที่มี pre-filled form URL

July 20, 2015 21:02

จากตอนที่แล้ว “ใช้ google script ทำ mail merge เนื้อหาเมลที่มี link” เรารู้วิธีใส่ link ไปในเนื้อหาเมล ในตอนนี้เราจะมาเปลี่ยน static link เป็น dynamic link (คือ link ที่มีการอ้างชื่อ cell จึงเป็น link ที่เปลี่ยนแปลงไปตามค่าที่อยู่ใน cell) จุดประสงค์ก็เพื่อส่ง link ให้ผู้ที่รับอีเมลกรอกข้อมูลลง google form ที่มีข้อมูลให้บางส่วนแล้ว (pre-filled form) ซึ่งเป็นข้อมูลของผู้รับอีเมลแต่ละคนที่แตกต่างกัน เช่น ให้มีฟิลด์ ชื่อ และ หน่วยงาน ไว้แล้ว เป็นต้น เมื่อเปิดฟอร์มจึงไม่ต้องกรอกชื่อ และ หน่วยงาน แต่ยังสามารถแก้ไขได้หากต้องการ แล้วให้กรอกข้อมูลเพิ่มในส่วนอื่น ๆ สมมติ 1. เรามี google sheet ชื่อ members มี 4 คอลัมน์ อยู่แล้ว ดังนี้ รายการที่, ชื่อ, หน่วยงาน, อีเมล 2. เราต้องการสร้าง google form เพื่อสอบถาม ตอบรับร่วมงาน และ ประเภทอาหาร วิธีทำ ดังนี้ 1. สร้าง google form ขึ้นมา 1 อัน ตั้งชื่อว่า member-meeting1 2. สร้าง form field ดังนี้ ชื่อ, หน่วยงาน, ตอบรับร่วมงาน, ประเภทอาหาร 3. เลือกเมนู Responses > เลือก Get pre-filled URL 4. กรอกข้อมูลชื่อตัวแปรลงในช่องข้อมูล เช่น ชื่อ ให้ใส่ f1, หน่วยงาน ให้ใส่ f2 5. กรอกเสร็จให้คลิก submit จะได้หน้าต่างแสดงเป็น URL และมีข้อความบอกให้เราคัดลอก (ctrl+c) 6. URL ที่คัดลอกนี้จะไปใส่ใน google sheet ชื่อ member ในคอลัมน์ใหม่ รวมเป็น 5 คอลัมน์ ดังนี้ รายการที่, ชื่อ, หน่วยงาน, อีเมล, URL 7. ที่ cell URL นี้ ให้ใส่ฟังก์ชั่น =HYPERLINK(“URL”,”URL”) และนำ URL ที่คัดลอกมาวางตรงคำว่า URL 8. ให้แทนที่ข้อความ ตรงที่มีคำว่า f1 ด้วย “&B2&”, แทนที่ f2 ด้วย “&C2&” 9. จากนั้นก็นำความรู้ในเรื่อง “ใช้ google script ทำ mail merge เนื้อหาเมลที่มี link” มาใช้ในการส่งอีเมลได้แล้ว 9.1 เตรียมเนื้อหาจดหมายไว้ใน sheet ชื่อ Template 9.2 เตรียม range ของข้อมูล คีย์เองนะ 9.3 คัดลอก google script จากตอนที่แล้วมาใช้ 9.4 สั่งให้ google script ชื่อ MailMergeWithLinkv2 ทำการส่งอีเมล 9.5 ตรวจสอบดูอีเมลที่ได้รับ 9.6 เมื่อคลิก link จากในเมล จะไปเปิด google form ขึ้นมา พร้อมข้อมูล 2 ฟิลด์แรก

ใช้ google script ทำ mail merge เนื้อหาเมลที่มี link

July 20, 2015 20:26

ผมใช้ Yet another mail merge ซึ่งเป็น add-on เพื่อส่งอีเมลเรื่องเดียวกันไปยังเพื่อนๆจำนวนหนึ่ง ก็ใช้งานได้ดีมา 5 ครั้งแล้ว แต่พอครั้งหลังนี้ ผมต้องการส่งอีเมลที่ในเนื้อหามี link ให้ผู้ที่รับอีเมลสามารถคลิกเพื่อเปิดอ่านได้ แต่ลองหลายวิธีที่จะส่งด้วยวิธีที่เคยใช้ add-on ตัวนี้ก็จะแสดงเป็นข้อความ ไม่แสดงเป็น link ในอีเมล (อันนี้ต้องบอกก่อนว่า คาดว่าผู้ใช้ส่วนใหญ่ใช้โปรแกรมอีเมลที่มีการแสดงผลมากกว่าข้อความธรรมดา) ค้นหาดูก็พบว่า ต้องเปลี่ยนวิธีทำมาเป็นวิธีเขียน google script เพื่อส่ง mail merge แทน วิธีทำ ดังนี้ 1. สร้าง google sheet ตั้งชื่อ myusers 1.1 sheet แรก ตั้งชื่อ Data ที่มีคอลัมน์ ดังนี้ รายการที่, ชื่อ, คณะ, อีเมล, link1, link2 1.2 sheet สอง ตั้งชื่อ Template ที่มี 1 คอลัมน์ เพื่อเขียน subject และ ข้อความจดหมายที่มี link 1.3 sheet สาม ตั้งชื่อ Range ที่มี 3 คอลัมน์ ดังนี้ header, data, template 2. ใส่ข้อมูลตามตัวอย่างรูปภาพ 3. ที่ google sheet ให้คลิกที่ Tool > Script editor > เลือก Blank Project > ตั้งชื่อว่า myusers project 4. แปะ google script ตามซอร์สโค้ดด้านล่างบทความนี้ และคลิก Save หมายเหตุ ซอร์สโค้ดนี้จะวางตำแหน่งอีเมลไว้ที่คอลัมน์ที่ 4 5. ปิดแท็บ google script (myusers project) 6. ปิดแท็บ google sheet (myusers) แล้วเปิดใหม่ 7. เมื่อเปิดใหม่จะเห็นว่ามีเมนู Email และมี submenu ชื่อ MailMergeWithLinkv2 8. คลิกเมนู Email > MailMergeWithLinkv2 จะมีการขอสิทธิในการรัน script ดังรูป 9. ไปตรวจสอบว่าอีเมลถูกส่งไปและมีเนื้อหาที่มี link ตามต้องการ 10. หากต้องการส่งอีกครั้งให้กับอีเมลที่ได้ส่งแล้ว ให้ดูที่คอลัมน์ อีเมล จะเห็นว่ามี Note เนื่องจากว่า google script นี้ได้เขียน Note ไว้ใน cell ใช้เป็นการป้องกันการส่งอีเมลซ้ำ ให้คลิกขวาและเลือก Clear Note ซอร์สโค้ดที่ใช้: function onOpen() { var submenu = [{name:”MailMergeWithLinkv2″, functionName:”MailMergeWithLinkv2″}]; SpreadsheetApp.getActiveSpreadsheet().addMenu(‘Email’, submenu); } function MailMergeWithLinkv2() { var ss = SpreadsheetApp.getActiveSpreadsheet(), DataSheet = SpreadsheetApp.setActiveSheet(ss.getSheetByName(“Data”)), TemplateSheet = SpreadsheetApp.setActiveSheet(ss.getSheetByName(“Template”)), RangeSheet = SpreadsheetApp.setActiveSheet(ss.getSheetByName(“Range”)), header = RangeSheet.getRange(2, 1).getValue(), data = RangeSheet.getRange(2, 2).getValue(),