ลง software ต่างๆ ตามลิ้งนี้
https://www.sitepoint.com/build-simple-beginner-app-node-bootstrap-mongodb/
และลง robomongo ด้วย mognodb management GUI tool ใช้ดีใช้ได้
เริ่มต้นเขียนด้วยไฟล์ start.js เพื่อกำหนด port ที่ server จะรันและรอรับ connection จาก client
และอาจจะสร้างไฟล์ app.js ขึ้นมาอีกไฟล์เพื่อกำหนดโครงสร้างของเว็บ เช่น การโหลด express, pug และโมดูลที่จำเป็นอื่นๆ
ต่อไปก็ การใช้งาน mongodb เริ่มแรกเลย เพื่อความปลอดภัย ก็ควรใส่ authorization เข้าไปด้วย โดยการสร้าง user และกำหนด password และ role ของการเข้าถึง database
เมื่อได้ user, password สำหรับ database ที่เราต้องการสร้างหรือใช้งานแล้ว ต่อไปก็ต้องทำให้ mongoose connect database แบบมี authen
วิธีกำหนด user, password เวลา connect คือใช้ auth: { user: xxx, password: xxx } เนื่องจาก version ของ mongoose ที่ใช้ จึงต้องใส่ useNewUrlParser: true และ useUnifiedTopology: true ด้วย
เมื่อ connect ได้แล้ว ก็ต้องทำ model schema สำหรับ collection ที่เราต้องการจัดการ ก็ทำแยก 1 .js ไฟล์ ต่อ 1 schema เก็บไว้ใน folder ชื่อ models ก็ได้
เวลา exports module ถ้าชื่อ collection ไม่เหมือนกับชื่อของ schema เราต้องบอกมันด้วยตอน export
เมื่อได้ model ก็ถึงตา view ทำการแสดงผล โดยเราจะแสดงผล documents ทั้งหมด ใน collection ด้วย table สิ่งแรดกที่ต้องทำคือ กำหนดเส้นทางให้ router เช่น เมื่อต้องการกำหนด path เป็น /paid เพื่อแสดงผล table ข้อมูลใน collection ชื่อ paid
เมื่อมี GET request ‘/paid’ เข้ามา เราทำการ query documents ใน collection ได้โดยใช้คำสั่ง find() เมื่อได้ก้อนข้อมูลมาเก็บไว้ในตัวแปรตัวหนึ่งแล้ว ก็ส่งต่อให้ view ทำการแสดงผล โดยใช้ pug และ bootstrap
ก่อนจะไปถึงเรื่อง bootstrap มาดูเรื่อง HTTP authentication ก่อน คือ user ต้องทำการ login สำเร็จก่อนจึงจะสามารถเข้าถึงหน้า paid ได้
เราได้ทำโดยใช้ โมดูล http-auth เมื่อทำเสร็จแล้ว จะมี pop-up ขึ้นมาให้ใส่ user name, password เมื่อจะเข้าหน้าที่กำหนด
ก่อนจะใช้งาน bootstrap ซึ่งก็คือเรื่องของ style sheet เราต้องทำการบอก path ที่อยู่ เพื่อให้สามารถเรียกโหลดไฟล์ที่วางอยู่ในนั้นได้ ในที่นี้ก็คือพวก css, js, images โดย ทำการกำหนด static path ให้แก่ express ก่อน หลังจากนั้น เราก็จะสร้าง css ไฟล์กำหนดค่าการแสดงผลให้กับส่วนต่างๆของ view ได้
ส่วน view นี้ เราใช้ pug เป็น template engine เมื่อก่อนชื่อ jade ยังมี engine ตัวอื่นๆอีกที่สามารถนำมาใช้ได้ การใช้งาน pug ก็เหมือนเราเขียนไฟล์ html นั่นเอง แต่จะมีรูปแบบการเขียนที่ง่ายขึ้น ไฟล์จะเป็นนามสกุล .pug แทน ซึ่งชื่อไฟล์ก็จะต้องเหมือนกับในฟังก์ชั่น render
ถึงตรงนี้เราก็ทำเว็บด้วย node.js ได้กะเค้าบ้างแล้ว แต่ที่ทำต่อเพื่อจะส่งงานให้ลูกค้า นั่นคือ การแสดงผล table ให้สวยงามและมีฟังก์ชั่นการทำงานมากขึ้น เช่น การเรียงคอลัมน์ การค้นหา การทำเพจ และการ export ข้อมูล ซึ่งได้หยิบ DataTables มาใช้งาน
กว่าจะใช้งานได้ก็เล่นเอาเหนื่อยเหมือนกัน เพราะ DataTables ใช้ jqeury เลยต้องนั่งหาวิธีที่จะเรียกใช้ $(document) หรืออ้างถึง Element ต่างๆ ในไฟล์ .pug ให้ได้ สุดท้ายจึงพบว่ามันทำได้ง่ายๆเลย โดยการลง package jquery ด้วย npm และใช้วิธีกำหนด static path ไปที่ folder ที่ไฟล์ใน package เหล่านั้นถูกวางอยู่ โดยใช้ app.use() นั่นเอง ก็เลยแก้ปัญหาเรื่อง jQuery และ $ is not undefined ลงได้