node.js การใช้งาน express edge

Node.js : การใช้งาน Express Edge ในการทำ Web โดยใช้ node.js นั้นเราต้องทำการกำหนดรูปแบบและโครงสร้างของ framework เองและหนึ่งในการพัฒนา web นั้น อีกสิ่งหนึ่งที่เป็นตัวช่วยก็คือ Template Engine ซึ่งในบทความนี้ผมจะใช้ Template Engine อย่างง่ายๆที่มีชื่อว่า Express Edge ซึ่งเรามาดูกันเลยดีกว่าว่ามันใช้งานยังไง ขั้นแรกหลังจากที่เราสร้าง project แล้วก็ทำการ install express edge โดยใช้คำสั่งปกติคือ npm install express-edge –save   เมื่อติดตั้ง express edge ใน project เสร็จแล้วต่อไปผมจะทำการสร้าง directory ต่างๆให้มีรูปแบบ web framework ทั่วไปที่มีรูปแบบ MVC นั้นเอง   โดยที่ในบทความนี้จะยังไม่สร้าง directory models เพราะยังไม่ได้ลงรายละเอียดเกี่ยวกับ class ที่เป็น model ซึ่งในตอนนี้ผมได้สร้าง directory หลักๆอยู่ 4 อันคือ controllers เพื่อทำการเก็บไฟล์ controller ควบคุมการทำงาน request ต่างๆที่เกิดขึ้นในเว็บ views เพื่อเก็บไฟล์ view ต่างๆที่เกี่ยวข้องกับการแสดงผล layouts ใน directory views เพื่อเป็นไฟล์ layout โครงสร้างหน้าตาหลักของ web นั้นเอง public เพื่อเป็นไฟล์ static ต่างๆเช่น รูปภาพ หรือ css เมื่อกำหนดโครงสร้างเรียบร้อยแล้วต่อไปผมจะใช้ bootstrap เป็นตัวอย่างของ web ครั้งนี้ ซึ่งผมได้เลือก free template ที่มีชื่อว่า clean blog สามารถ download ได้จาก url นี้เลยครับ clean-blog หลังจากที่Read More →

สอน ANGULARJS – การใช้งาน DIRECTIVE และ EXPRESSIONS เบื้องต้น

สอน AngularJS – การใช้งาน Directive และ Expressions เบื้องต้น ใน AngularJS นั้นจุดเด่นๆของมันก็คือ Directive นั้นเองเป็นวิธีการให้ในการใช้งาน HTML ที่ใช้รูปแบบการทำงานตามหลักการของ Data-Oriented ซึ่งจะแตกต่าง javascript ทั่วไปที่จะทำงานในรูปแบบ control flow ซึ่งต้องเขียนโค้ดหลาย step กว่าจะจบการทำงาน Directive ใน AngularJS นั้นจะอาศัย HTML compiler ($compile) ในการประมวลผลซึ่งรูปแบบการใช้งาน Directive สามารถแบ่งวิธีการเขียนโค้ดได้ 3 แบบหลักๆคือ <input ng-model=”foo”> จะเป็นการแทรก tag ng ของ AngularJS ใน tag html ทั่วไปซึ่งเป็นวิธีที่ได้รับความนิยมและง่ายต่อการใช้งาน <input data-ng-model=”foo”> รูปแบบนี้จะคล้ายกับรูปแบบที่ 1 เพียงแต่มีคำว่า data- อยู่ด้านหน้าเท่านั้นเอง <ng-view></ng-view> จะเป็นรูปแบบของ tag AngularJS เลยซึ่งวิธีนี้ดูเหมือนจะสั้นและง่ายแต่ข้อเสียของมันคือถ้า web app ของเรานั้นไม่สามารถโหลด AngularJS ได้มันก็จะกลาย tag ที่ html ไม่รู้จักแล้วจะกลายเป็นข้อมูล text ธรรมดาแล้ว user ที่ใช้งานก็จะเห็นนั้นเอง Directive ใน AngularJS นั้นแบ่งออกเป็นหลาย tag ตามรูปแบบการทำงานและใช้งานซึ่งก็จะมีตัวอย่างเบื่องต้นดังนี้ DOM Manipulation ng-show ng-hide ng-repeat ng-view Data Binding ng-model ng-init ng-bind Modules/Controller ng-controller ng-app Event ng-click ng-keypress ซึ่งด้านบนนี้เป็นแค่ตัวอย่างบางส่วนเท่านั้นยังมีคำสั่งอีกมากมายให้ใช้กันใน AngularJS ตอนไปก็จะเป็น Expressions  โดยเจ้า Expressions ใน AngularJS นั้นจะใช้ {{ เพื่อเปิด Expressions และ }}Read More →

node.js

เริ่มเบื้องต้นกับ Node.js Node.js ชื่อนี้ในช่วงหลังๆมักจะได้ยินกันบ่อยๆ node.js นั้นเป็นสิ่งใหม่ที่ถ้า google นั้นคิดค้นซึ่งมันจะทำงานได้นี้ใน chrome นั้นเองซึ่งประโยชน์ของ node.js นั้นส่วนมากเว็บหรือระบบใหญ่จะนำมาประยุกต์ใช้กับ application พวก real time ที่จะมีการตอบสนองทันที ที่มีเหตุการณ์เกิดขึ้น หรือที่เรียกว่า event-driven ซึ่งเจ้า node.js นั้นจะรันโดยอาศัย V8 JavaScript Engine เป็นตัวหลักและการพัฒนา node.js นั้นจะใช้ javascript แบบ server-side มันคงแปลกดีที่ภาษาที่เคยเป็น client – side มานาน อยู่ๆสามารถมาเป็น server – side เอาละที่นี้เรามาลองกันเลย สำหรับผมแล้ว node.js ที่ผมลองนั้นจะเป็น version window เพราะผมไม่ได้ใช้ os ตระกูลอื่นซะเท่าไรซึ่งมันก็ support หลาย os นั้นแหละ เริ่มแรกก็ไป download ตัว install สำหรับ window ได้ที่ node.js เมื่อโหลดเสร็จก็ทำการติดตั้งได้เลยRead More →

สมัยนี้การเดินทางหรือข้อมูลบน internet เกี่ยวกับสถานทีหรือแผนการเดินทางส่วนใหญ่แล้วจะใช้โปรแกรมยอดนิยมอย่าง Google Map นั้นเองวันนี้จะมาแสดงตัวอย่างการสร้าง marker บน google map ซึ่งเป็นระดับพื้นฐานที่ไม่ได้มีการใช้ google map api อะไรเลย โดยเราจะดึงค่าพิกัดลัดติจูดกับลองติจูดจาก php โดยผ่าน javascript ในลักษณะการดึงและรับส่งข้อมูลแบบ ajax นั้นเอง โดยตัวอย่างนี้จะประกอบด้วยไฟล์ 2 ไฟล์คือไฟล์ html ที่ภายในประกอบด้วย html และ javascript ส่วนอีกไฟล์จะเป็นไฟล์ php ที่จะคืนค่าพิกัดมาให้อยู่ในรูปแบบของ xml จากนั้นเมื่อดึงค่าผ่าน ajax แล้วจะทำการส่งค่าพิกัดไปให้ google map เพื่อแสดงบนแผนที่นั้นเอง ขั้นแรกเรามาสร้างไฟล์ html ที่ใช้ ajax ในการดึงข้อมูลพิกัดและแสดงแผนที่อีกด้วย โดยให้สร้างไฟล์ที่ชื่อว่า map.html โดยมีโค้ดดังนี้Read More →