Web application: BTS Helper
------------------------------ 6 มีนา 2019 ----------------------------------
Propose a project
What’s the problem you’re trying to solve?
- ไม่ทราบว่ารอบๆสถานีมีสถานที่อะไรบ้าง
- กะเวลาคำนวนเดินทางยาก
- ไม่ทราบว่ารถเริ่ม และหมดกี่โมง
- ไม่ทราบราคาเที่ยวรถ
What are the benefits for the user ?
- ช่วยในการวางแผนการเดินทางแก่ผู้ใช้
- เพื่อให้ผู้ใช้สามารถค้นหาสถานที่ต่างๆโดยรอบสถานีได้
Feature
- แสดงสถานที่รอบๆสถานี
- บอกราคาของเที่ยวรถในการเดินทาง
- บอกเวลารถไฟขบวนแรกและ สุดท้ายในแต่ละสถานี
- บอกความถี่ของขบวนรถไฟที่วิ่ง
ER - Diagram
Relational Schemas
Example queries
Case: ต้องการทราบราคาจากสถานี ทองหล่อ ไป พญาไท
SELECT id_station, name_station FROM STATION
WHERE name_station IN ( 'Thonglor', 'Phaya Thai') ;
Case: ต้องการทราบเวลารถไฟขบวนแรกจากสถานี หมอชิต
SELECT id_station, name_station, FROM STATION
WHERE name_station = 'Thonglor' ORDER BY id_station;
Example Index
สามารถสร้างได้โดยคำสั่ง
CREATE INDEX [new index name] ON [table name]([column name])
ตัวอย่าง
CREATE INDEX station_index ON STATION(name_station);
What are the resources
- Nodejs
- MySQL
------------------------------ 20 มีนา 2019 ----------------------------------
ER - Diagram
Relational Schemas
Update your progress
- ได้ทดลองใช้งาน MySQL ทั้งสองรูปแบบคือ Work bench ที่เป็น GUI ให้ User ใช้งาน และ แบบ cmd ที่ไม่มีรูปแบบ GUI ให้ดู ซึ่งการใช้งานแต่ละแบบมีข้อดีและเสีย แล้วแต่ความชอบของ User
รูปที่ 1 MySQL Work bench
รูปที่ 2 MySQL cmd
2. ได้ทำการสร้าง Database ขึ้นมา และสร้าง Table ต่างๆใส่ไว้ใน Database ที่เราสร้างขึ้นมา ซึ่งเราสามารถพิมพ์คำสั่งเอง หรือ จะรัน script ใน cmd, Work bench ก็ได้
รูปที่ 3 สร้าง Database
รูปที่ 4 สร้าง Table ขึ้นใน Database
รูปที่ 5 script การสร้าง Table ใน Database ของเรา
3. ทำการเพิ่มข้อมูลลงไปใน Table ต่างๆ ซึ่งจะเหมือนตอนที่เราสร้าง table นั่นคือเราสามารถพิมพ์คำสั่งเอง หรือ รันจาก script ก็ได้
รูปที่ 6 INSERT ข้อมูลลงใน Table ด้วยการพิมพ์คำสั่งใน cmd
รูปที่ 7 INSERT ข้อมูลลงใน Table ด้วยการรัน script
4. เนื่องจากการ INSERT ข้อมูลที่มีจำนวนมาก ถ้าเรามานั่งพิมพ์ที่ละคำสั่งจะทำให้เสียเวลา เราจึงได้ใส่ข้อมูลลงในไฟล์ csv แล้วใช้ node.js ดึงข้อมูลจากไฟล์ csv แล้ว INSERT ลง database อัตโนมัติ
รูปที่ 8 Code node.js ดึงข้อมูลจากไฟล์ csv
รูปที่ 9 Code node.js INSERT ข้อมูลที่ได้จาก csv ลง database
รูปที่ 10 ทดลอง SELECT ข้อมูลใน table STATION ออกมาดู
Problem
- Multivalued attributes ไม่แน่ใจต้องทำแบบไหน
- ข้อมูลมีจำนวนหลากหลาย ต้องคุยกันในกลุ่มว่าจะเอาอันไหนบ้าง เช่น สถานที่โดยรอบ อนุสาวรีย์
------------------------------ 28 มีนา 2019 ----------------------------------
Update your progress
1. Create and Connect database ในครั้งที่แล้วเราได้ทำการสร้าง Database ไปแล้วครั้งนี้เราจะมาเชื่อมต่อ Database ของเราด้วย Node.js ให้เราสร้างไฟล์ connect.js ขึ้นมาเพื่อเป็นส่วนเชื่อมต่อ Database
รูปที่ 1 Code js ที่ใช้เชื่อมต่อ database
เราจะเห็นได้ว่า node.js จะให้เราใส่ host, user, password ลงไปซึ่งไม่มีความปลอดภัยเลย เราจึงได้นำเอา
Environment variables หรือ .env
มาใช้งาน ซึ่ง .env ก็คือ Config ของเราจะเก็บในไฟล์ .env และใช้ dotenv เข้ามาช่วยในการดึงข้อมูล เพื่อให้ง่ายต่อการปรับเปลี่ยนการตั้งค่าระบบ และความปลอดภัย
เมื่อเรานำ .env มาใช้ให้เราสร้างไฟล์ .env ขึ้นมาเพื่อเก็บค่า config ต่างๆใน code js
รูปที่ 2 Code js ที่ใช้เชื่อมต่อ database
รูปที่ 3 ไฟล์ .env ที่ใช้เก็บ config ต่างๆ
problem
Client does not support authentication protocol requested
สาเหตุมาจากการที่ MySQL ได้ทำการปรับเปลี่ยนการเข้ารหัส password ใหม่ ซึ่ง client บางตัวยังไม่สนับสนุน password hashing algorithm แบบนี้
Solution
ให้เราพิมพ์คำสั่งดังกล่าว แล้วแก้บางส่วนของคำสั่งให้ตรงกับ database ของเรา จะแก้ไขปัญหาได้
รูปที่ 4 คำสั่ง SQL
------------------------------ 28 มีนา 2019 ----------------------------------
Update your progress
Web app: BTS Helper Beta version 1
ตอนนี้ mini project เดินทางจะถึงปลายทางแล้ว ในตอนนี้ web app สามารถใช้งานได้แล้วโดยจะมีหน้า page ดังนี้
รูปที่ 1 HomePage จะมีให้เลือกว่าจะ ดูรายละเอียดสถานี หรือ คำนวนราคาตั๋วรถไฟฟ้า
รูปที่ 2 Select Station จะมีให้เลือกว่าจะ ดูรายละเอียดสถานี อะไร
รูปที่ 3 Detail Station จะบอกรายละเอียดของสถานี ที่เราเลือก
รูปที่ 4 Calculate Ticket ให้เราเลือกสถานีต้นทางและปลายทาง เพื่อคำนวนราคาตั๋วรถ
รูปที่ 5 Ticket Detail จะบอกราคาของตั๋วรถ ซึ่งในตัวอย่างจะเลือกต้นทางคือ หมอชิต ปลายทางคือ สะพานตากสิน
Code and query
1. หน้า index ใช้เพื่อเลือกสถานีที่ต้องการดูรายละเอียด จะทำการ Query ดังนี้
SELECT id_station, name_station FROM station ORDER BY name_station
Query เอาข้อมูลจาก table มาแสดงผลที่หน้า index เพื่อใช้สำหรับกด click ไปหน้า detail ของ station นั้นๆ
2. หน้า Detail หน้าที่เเสดงรายละเอียดเเต่ละสถานี จะทำการ Query ดังนี้
ลำดับแรกจะทำการ Query ชื่อสถานีจาก id_station ที่ได้รับมาก่อน
SELECT name_station FROM station WHERE id_station = ?
จากนั้นจะทำการ Query สถานที่โดยรอบสถานีออกมา
SELECT surroundingFROM station_surroundingWHERE Station_id_station= ?
3. หน้า price_ticket หน้าที่ใช้เพื่อเลือกสถานีไว้คำนวณราคาค่าโดยสาร จะทำการ Query ดังนี้
จะทำการ Query ชื่อสถานีออกมาใส่ใน Drop down เพื่อให้ User เลือกสถานีได้
SELECT id_station, order_station, name_station
FROM station
4. หน้า calculate_price เเสดงราคาค่าโดยสาร จะทำการ Query ดังนี้
โดยจะทำการ Query สถานี ออกมาโดยจะเลือกจาก id_station ที่ได้รับมา ซึ่งข้อมูลนั้นจะมี order_station ซึ่งก็คือ ลำดับของสถานี ด้วย โดยมีวิธีคำนวนค่าตั๋วรถไฟฟ้าดังนี้
- กรณี ที่สถานีต้นทาง และปลายทางอยู่ เส้นทางการเดินรถเดียวกัน
เราจะนำ order_station ของสถานีต้นทาง และ ปลายทาง มาลบกัน
- กรณี ที่สถานีต้นทาง และปลายทางไม่ได้อยู่ เส้นทางการเดินรถเดียวกัน
เราจะนำ order_station ของสถานีต้นทาง และ ปลายทาง มาบวกกัน
จากนั้นจะนำผลลัพธ์มา Query ราคาของตั๋วรถออกมา ซึ่งราคาตั๋วรไฟฟ้านั้น จะมีการระบุตายตัวว่า ราคา xx คือเดินทางกี่สถานี
SELECT id_station, order_station, name_station
FROM station
WHERE id_station = ?
รูปที่ 6 ตารางราคาตั๋วรถไฟฟ้า BTS
