สำหรับผู้ที่เขียน web แล้วต้องมีการเชื่อมต่อกับ database นั้น การเชื่อมต่ออาจไม่ใช่เรื่องง่าย ถ้าจะใช้ JavaScript มาช่วยอาจมีความซับซ้อนหรือมีความยุ่งยากมาก ดังนั้นจึงมี tool เพื่อนำมาใช้ในการจัดการ database โดยเฉพาะผู้ที่ถนัด Node.js และ Browser โดย tool ที่กล่าวถึงนั้น คือ “knex.js” knex.js เป็น SQL query builder ที่สามารถต่อกับฐานข้อมูลได้หลากหลาย สามารถที่จะเรียนรู้เข้าใจง่ายและสามารถปรับเปลี่ยนได้ตลอด โดยปัจจุบันสามารถรองรับการทำงานกับ database  Postgres, MSSQL, MySQL, MariaDB, SQLite3, Oracle, และ Amazon Redshift สามารถรันได้ทั้ง Node.js และ Browser รองรับ transactions, polling, streaming queries, promise และอื่นๆ การติดตั้งสามารถลงผ่าน npm ได้เหมือน ตัวอื่นๆในตระกูล Node เช่น npm install knex –save และโหลด library สำหรับเชื่อมต่อฐานข้อมูลต่างๆ ผ่านคำสั่งดังนี้ npm install pgnpm install sqlite3npm install mysqlnpm install mysql2npm install oraclenpm install mssql ตัวอย่างการ connect กับ database Mysql var knex = require(‘knex’)({ client: ‘mysql’, connection: { host : ‘127.0.0.1’, user : ‘your_database_user’, password : ‘your_database_password’, database : ‘myapp_test’ } }); การใช้คำสั่งของ sql ( select, insert, update, delete) สามารถเขียนได้ง่าย โดยมีฟังก์ชั่นมาให้พร้อมใช้งานแล้ว ตัวอย่างการใช้คำสั่ง select Ex1 : select * from f_student_payment สามารถใช้คำสั่ง knex.select().table(‘f_student_payment’) หรือ  knex.select().from(‘f_student_payment’) Ex2 : select ‘payment_id’, ‘student_id’, ‘address’ from ‘f_student_payment’ knex.select(‘payment_id’, ‘student_id’, ‘address’).from(‘f_student_payment’) Ex3 : select * from ‘f_student_payment’ where ‘student_id’ = ‘5710121045’ knex(‘f_student_payment’).where(‘student_id’, ‘5710121045’) ตัวอย่างการใช้คำสั่ง insert Ex4 : insert into ‘f_student_payment’ (‘student_id’) values (‘621012025’) knex(‘f_student_payment’).insert({ student_id : ‘621012025’}) ตัวอย่างการใช้คำสั่ง update Ex5 : update ‘f_student_payment’ set ‘student_id’ = ‘621012025’ knex(‘f_student_payment’).update(‘student_id’, ‘621012025’) ตัวอย่างการใช้คำสั่ง delete Ex6 : delete from f_student_payment where student_id = ‘621012025’ knex(‘f_student_payment’) .where(‘student_id’, ‘621012025’) .del()

Gatsby คืออะไร? เป็น open source framework มีพื้นฐานมาจาก React เป็น Static Site Generator กล่าวคือเมื่อเขียนเว็บ -> Build -> HTML+ css + javascript -> Deploy กับ web server หลายๆเว็บ เช่น apache, firebase, github pages หรือ netlify อื่นๆ อีกหลายเว็บ Create Gatsby Project ก่อนอื่นเราจะต้องมาติดตั้งตัว gatsby-cli ซึ่งสามารถใช้ได้ทั้งคำสั่ง Yarn หรือ NPM ดังภาพที่ 1 npm install -g gatsby-cli yarn global install gatsby-cli เมื่อเราติดตั้ง gatsby-cli ขั้นตอนต่อไปก็จะเป็นการสร้าง website ใหม่ด้วย คำสั่ง gatsby new blog หลังจากสร้าง blog เรียบร้อยแล้วก็เข้าไปใน project directory ที่สร้างขึ้นมาใหม่ ในที่นี้คือ “blog” แล้วใช้คำสั่ง  gatsby develop เพื่อรัน development server และเราจะได้ default page ที่ Gatsby สร้างให้ ซึ่งสามารถเข้าถึงเว็บได้ด้วย http://localhost:8000 ดังภาพที่ 2 ต่อไปเราจะลองแก้ไข Gatsby Config ในไฟล์ gatsby-config.js แล้วกลับไปยัง Browser ที่เราเปิดไว้ในภาพที่ 2จะได้ผลลัพธ์ดังภาพที่ 3 กล่าวคือเราสามารถแก้ Code แล้วSave หน้าเว็บก็จะอัพเดททันทีโดยที่เราไม่ต้องสั่ง Build ใหม่ เนื่องจาก Gatsby เป็น hot reload ดังนั้นเมื่อเราแก้ไขไฟล์ใดๆ จะทำการ build ให้เราใหม่เสมอ เหมือนรัน develop

ต่อจากการการทำ Directives ในบล็อกก่อนหน้า เราจะมาพูดถึงการสร้าง Routing ที่เป็นส่วนช่วยในการเปลี่ยนหน้าของระบบ ซึ่งจะทำให้ระบบสามารถแบ่งส่วนได้ชัดเจนมากยิ่งขึ้น โดยในหัวข้อนี้เราจะทำการสร้างเมนู เพื่อให้สามารถเปลี่ยนหน้าแบบไม่ต้องโหลดได้ โดยเราจะสร้าง Component “Home” เพื่อเป็นหน้าหลัก โดยใช้คำสั่ง >ng generate component home จากนั้นให้เราสร้างเมนู ในไฟล์ app.component.html ดังภาพที่ 1 การที่เราจะทำให้ Angular เปลี่ยนหน้าโดยที่ไม่ต้องโหลดหน้าใหม่ เราสามารถใช้ความสามารถของ Router ที่จะพาไปยังหน้าที่เราต้องการ โดยเราจะต้องเข้าไปทำการตั้งค่าที่ไฟล์ app.module.ts เพื่อให้ Angular ทราบก่อน โดยเราจะนิยาม Route หรือเส้นทางของเราใน myRoutes เพื่อบอกว่าเมื่อไหร่ที่เข้ามาจาก /pages ให้วิ่งไปที่ component ชื่อ HomeComponent, CalculatorComponent หรือ UserComponent และถึงแม้เราจะมีเส้นทางแล้ว แต่หาก root module ของเราไม่รู้จักก็เท่านั้น เราจึงต้องทำให้ root module ของเรารับรู้ผ่าน RouterModule.forRoot() ดังภาพที่ 3 จากนั้นไปยังไฟล์ app.component.html ที่เราสร้างไว้ในภาพที่ 1 และแก้ไข ดังภาพที่ 4 และแสดงผลลัพธ์ในภาพที่ 5 สรุปการทำ Routing เหมาะกับการทำ Single Page Application เพื่อส่ง request ขอข้อมูลแค่บางส่วนของหน้าเท่านั้น…

Directives คือ สิ่งที่เราเพิ่มเข้าไปใน Tag ของ HTML ซึ่งจะไปสร้าง behavior ให้กับ DOM หรือ เปลี่ยนรูป DOM จะแบ่งออกเป็น 2 ประเภทใหญ่ๆ ได้แก่ 1. Built-in Directive ซึ่งส่วนใหญ่ขึ้นต้นด้วย *ng ที่ Angular มีมาให้ก็จะมีมากมาย อาทิเช่น ng-app : ฺบอกให้ Bootstrap เริ่มทำงาน Angular กับ element ไหน ng-controller : จะใช้ controller จัดการกับ view ไหน ng-model : binding ค่าเข้า view กับ model ng-show/ ng-hide : เพื่อแสดง/ซ่อน element ngFor : ใช้ในการวนลูป ngIf : ใส่เงื่อนไขเช็คค่า 2. Custom Directive ที่เราสามารถกำหนดเอง จะแบ่งเป็น HTML DOMS element – เราสามารถสร้าง element ใหม่ของเราขึ้นมาเองได้ เช่น <ma-directive></ma-directive> attribute เราสามารถสร้าง attribute ให้กับ element เช่น <div ma-directive=”test”></div> class name ตั้งชื่อคลาส เช่น <div class=”ma-directive: test;”></div> comment เช่น <!–directive: ma-directive test –> เราจะมาลองทำทั้งสองแบบ ก่อนอื่นสร้าง component ใหม่ชื่อ user โดยใช้คำสั่งดังภาพที่ 1 และใส่เพิ่ม tag <app-user></app-user> ในหน้า app.component.html ภาพที่ 1 สร้าง user component จากนั้นเปิดไฟล์ user.component.ts เพิ่มโค้ดดังภาพที่ 2 ซึ่งเป็นการกำหนดตัวแปรชื่อ users เก็บข้อมูลแบบ array แต่ละ user ประกอบไปด้วย name, code และ status ซึ่งเราจะนำไปวนลูปแสดงข้อมูล ภาพที่ 2 สร้าง array ของ users การใช้ Built-in Directive ในที่นี้จะยกตัวอย่าง ngFor สำหรับการวนลูป ซึ่งเราสามารถนำไปใส่ใน HTML Tag หรือ HTML Element นั้นๆได้เลยในไฟล์ user.component.html และหากต้องการใส่เงื่อนไข เราสามารถใช้ ngIf เพื่อเช็คค่าต่างๆ ดังภาพที่ 3 ภาพที่ 3 ตัวอย่างการใช้ ngFor และ ngIf จากภาพที่ 3 เราใช้ ngIf เพื่อตรวจสอบสถานะของ user โดยถ้าสถานะเป็น single จะแสดงรูปดาว และสถานะ married จะแสดงรูปหัวใจ เมื่อรันหน้าเว็บจะปรากฎหน้าจอดังภาพที่ 4 ภาพที่ 4 ผลลัพธ์ที่ได้ สำหรับตัวอย่างการทำ Custom Directive เราจะมาสร้าง highlight เมื่อเอาเมาส์ไปชี้ที่ชื่อ user โดยใช้คำสั่งดังภาพที่ 5 เพื่อสร้างDirective ชื่อ highlight ภาพที่ 5 คำสั่งสร้าง Custom Directive จากนั้นเปิดไฟล์ highlight.directive.ts ดังภาพที่ 6 ซึ่ง selector เป็นตัวบอกว่าคอมโพเน้นของเราจะมีชื่อเป็นอะไรเมื่อไปปรากฎที่ HTML Element หรือ Attribute ส่วนการเรียกใช้งานก็ให้อ้าง