วันนี้ผมจะมาแนะนำอีกหนึ่งคำสั่งใน react เพื่อหากได้มีโอกาศใช้งาน คำสั่งนี้คือ React.createElement เอาไว้เพื่อทำการสร้าง element แบบ dynamic ตามคำสั่งโค้ดที่เราเขียนRead More →

หลังจากที่สร้าง Component เบื้องต้นแล้วที่นี้ก็มาเริ่มใส่ css ให้กับ form ต่างๆหรือ html tag ที่เราต้องการ render ออกมา โดยใน css นั้นจะมีการใช้ attribute class เพื่อกำหนดรูปแบบต่างๆให้กับ html ไม่ว่าจะเป็นเรื่องสี font ขนาด เป็นต้น ซึ่งจะทำให้เจ้า JSX ที่เก็บข้อมูล html นั้นเกิดปัญหาได้เพราะคำว่า class ดันไปต้นกับคำสงวนใน javascript นั้นเอง เพราะฉะนั้นจะต้องหาคำมาแทน จึงใช้คำว่า className แทนคำว่า class และ คำว่า for ให้เปลี่ยนไปใช้คำว่า htmlFor แทน ซึ่งใน React ปัจจุบันนับตั้งแต่ React 16 ขึ้นไปในสามารถใช้คำว่า class ตรงได้เลย แต่ก็จะมีบ้างกรณีที่ไม่สามารถใช้ได้ เพราะฉะนั้น ณ เวลานี้ควรใช้ className ไปก่อนเพื่อความเป็นมาตรฐานและไม่เกิดปัญหาที่ไม่คาดคิดเกิดขึ้นได้ เริ่มแรกผมจะใช้ css จาก bootstrap ซึ่งเป็น css พื้นฐานที่เป็นที่นิยมในปัจจุบันโดยจะใช้เป็น CDN เหมือนเดิมครับ สามารถกดเข้าไปที่ เว็บ bootstrap เพื่อ copy code ในส่วนของ CDN ได้เลยจากลิงค์นี้ครับ bootstrap ให้ทำการสร้างไฟล์ html ขึ้นมาจากนั้น การ copy ส่วน css ใส่ในระหว่างเปิดปิด tag <head></head> ส่วนที่เป็น javascript ให้ใส่ก่อนปิด tag </body> ครับ จากนั้นให้ทำการสร้าง div มี id ชื่อว่า loginForm แล้วในส่วนของ react ก็ใส่ใน tag script type babelRead More →

จากตัวอย่างในบทความก่อน เริ่มต้น Hello World ใน React.js คราวนี้จะลองเขียนแยกออกมาเป็น component เบื้องต้นกัน เริ่มแรกจากโค้ดเก่าให้ทำการแก้โค้ดใน script tag โดยสร้าง Class ที่มีชื่อว่า App ทำการ extends มาจาก React.Component โดยมี method render ที่ return ข้อมูลออกมาเป็นข้อความ tag h1 ซึ่งมีโค้ดดังนี้ เมื่อทำการแก้โค้ดเสร็จ ลองเปิดหน้าเพจดูกับพบว่าเป็นหน้าเปล่าๆ เพราะยังไม่ได้ทำการ render ผ่าน visual DOM นั้นเอง ซึ่งต้องใช้คำสั่ง ReactDOM.render โดยมีโค้ดในส่วนของ script tag ดังนี้ครับ สังเกตว่ามีการประกาศตัวแปร mount ขึ้นมาให้เก็บค่า DOM ที่เราต้องการ render ข้อมูล แล้วใช้คำสั่ง ReactDOM.render ที่ยังคง concept เดิมคือ ReactDOM.render( อะไร, ที่ไหน ) โดย class App ที่เป็น component ที่เราสร้างขึ้นนั้นให้ใช้เป็น close tag ของชื่อ class ที่เราสร้างขึ้นคือ <App /> นั้นเอง เมื่อลอง refresh เพจอีกรอบก็จะแสดงข้อความออกมาตามภาพด้านล่างครับ จุดสังเกตจะเห็นว่าแม้กระทั่งใน class component ก็ยังบังคับให้ใช้ method render แล้ว return ค่าออกมาRead More →

ต่อจากบทความก่อน React คืออะไร ครั้งนี้จากลองในเขียน React.js กันแบบเริ่มต้นง่ายๆด้วยตัวอย่าง Classic อย่างแสดงข้อความ Hello World กัน โดยตัวอย่างนี้จะใช้รูปแบบ include ไฟล์จาก cdn เข้ามาในไฟล์ html ที่สร้างขึ้นแบบง่ายๆก่อนRead More →

React หรือ React.js ก็แล้วแต่ใครจะเรียก คือ javascript library ที่ถูกพัฒนาโดย facebook ซึ่งออกแบบมาเพื่อสร้าง UI ให้กับ web application ซึ่งจะทำงานส่วนใหญ่เกี่ยวกับ view layer หัวใจหลักของ React นั้นคือ component การที่สร้าง component ขึ้นมาสามารถทำให้ reuse การใช้งานได้ และเมื่อประกอบกันหลาย component กลายเป็น UI ของ Web Application นั้นเองRead More →

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 →

ทำความรู้จัก Express.js หายไปนานกับบทความ เพราะไม่ค่อยมีเวลาเขียนบทความสักเท่าไร ช่วงนี้ผมกำลังศึกษา MEAN Stack หรือการจัดชุดใหม่ทางด้านเทคโนโลยีการทำเว็บ จากแบบเดิมคือ LAMP stack โดย L = Linux, A = Apache, M = MySQL, P = Perl, PHP, Python ส่วนของใหม่คือ MEAN อันที่จริงก็ไม่ได้ถือว่าใหม่ซะเท่าไรเพราะมานานแล้วพอสมควร แต่ยังใหม่สำหรับผม เพราะยังไม่ว่างได้ลองหัดสักที โดย M = MongoDB เป็นฐานข้อมูลแบบ Document NoSQL การดึงค่าหรือส่งค่าจะอยู่ในรูปแบบคล้ายหรือเหมือนกับ JSON เลย จึงทำให้เป็นที่นิยมในการเก็บข้อมูลเพื่อนำไปใช้ในการพัฒนา Restful API ต่อไป E = Express.js ซึ่งก็จะเป็นตัวที่จะเขียนวิธีการ install และการใช้งานเบื้องต้น มันจะเป็น minimalist web framework for Node.js หลายคนบอกเป็น web framework แต่ความจริงต้องที่คำว่า Minimal ด้วยเพราะตัวมันเล็กมากจริงๆ มีโครงแบบ basic concept ไว้เท่านั้น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 →

แนะนำ Angularjs เบื้องต้น Angularjs เป็น Javascript MVC Framework อีกชนิดหนึ่ง โดยหลักๆแล้วเป็น Framework เหมาะสำหรับ SPAs (Single Page Applications) ซึ่งถูกพัฒนาขึ้นจาก Google นั้นเอง โดยเจ้า Angularjs นี้จะถูกพัฒนาจาก วิศวกรของ Google เอง และค่อย support ตอบปัญหาที่เหล่า Developer ที่นำไปใช้งานและเกิดปัญหาหรือมีข้อสงสัยนั้นเอง ข้อดี ของ Angularjs นั้นจะทำให้การทำงาน front end ของ web application นั้นพัฒนาง่ายขึ้นเพราะด้วย MVC หรือ MVVM ทำให้เราแยกส่วนในการพัฒนาได้ง่าย อีกทั้งเจ้า Angularjs นี้ยังเป็น MVC แบบ model orientation ซึ่งเมื่อข้อมูลใน model มีการเปลี่ยนแปลง จะทำให้ข้อมูลในส่วนของ View เปลี่ยนแปลงไปด้วยทำให้ง่ายลดขั้นตอนในการพัฒนา และอีกอย่างที่ทำให้หลายคนคุ้นเคยก็คือ template ในส่วน View นั้นจะใช้รูปแบบ {{}} ซึ่ง template engine หลายๆตัวก็ใช้รูปแบบนี้นั้นเอง เรามาดูกันดีกว่าว่าจะเริ่มใช้งานเจ้า Angularjs ยังไงขั้นแรกให้ทำการ Download Library ตัวนี้จะ website angularjs กันก่อน เมื่อโหลดเสร็จจะได้ไฟล์ javascript ซึ่งจะคล้ายๆกับ jquery นั้นเอง เมื่อได้ไฟล์เรียบร้อยแล้วก็เอาไฟล์ไปไว้ในที่ตัวต้องการ ส่วนของผมจะเก็บใน folder js จากนั้นผมทำการสร้างไฟล์ ang01.html แล้วทำการเขียนโค้ดเริ่มต้นนั้นนี้ [sourcecode language=”html”] Thaicoding – Angular [/sourcecode] สังเกตว่าตรง tag html จะมี attibute ng-app อยู่ ซึ่งจะเป็นการบอก Angularjs ว่า tagRead More →

Library Google Map ทีใช้กับ CodeIgniter

Library Google Map ทีใช้กับ CodeIgniter หากผู้ถึง library javascript ที่นิยมเกี่ยวกับการแสดงแผนที่แล้วนั้นคงนึกถึง google map แต่ทว่ามันต้องใช้ javascript เพื่อเรียกใช้งานแสดงผล แต่ตำแหน่งสถานที่ต่างนั้นกับเก็บอยู่ใน Datatabase ซึ่งจะใช้ภาษาพวก server side ในการดึงข้อมูล ทำให้ต้องมีการแปลงข้อมูลไปมาระหว่าง 2 ภาษาที่เราใช้งานอยู่ ซึ่งวันนี้ผมจะมาบอกวิธีใช้งาน CodeIgniter กับ Libarary ตัวนึกที่มีคนพัฒนาไว้ให้แล้วในการเชื่อมกับ Libary Google Map เพื่อแสดงตำแหน่งสถานที่ต่างๆได้ง่ายขึ้นนั้นเองครับ ซึ่งเจ้า API ตัวนี้นั้นถูกพัฒนาโดย BIOSTALL ขั้นตอนแรกเราก็เข้าไปดาวโหลดได้ที่ biostall.com หลังจากที่ดาวโหลดเสร็จแล้วให้ทำการแตกไฟล์ จะได้ดังรูปRead More →