Explore

วันที่ 7 พฤษภาคม 68

1. ศึกษาการพัฒนา website ด้วย Framework และเลือก Framework ที่ชอบ

2.ศึกษาเครื่องมือสำหรับพัฒนา (Tools) สำหรับพัฒนา Website พร้อมติดตั้ง

3.ศึกษาเครื่องมือสำหรับจัดการฐานข้อมูล พร้อมติดตั้ง

⁠

Framework ชุดเครื่องมือช่วยพัฒนาเว็บไซต์

Frontend Framework

React ใช้ JavaScript ในการสร้าง UI แบบ component-based

https://react.dev/learn⁠

⁠

Angular

https://v17.angular.io/docs⁠

⁠

Backend Framework

Laravel ภาษา PHP

Express.js ใช้งานร่วมกับ Node.js

CSS Framework

Bootstrap ใช้งานง่าย

https://getbootstrap.com/docs/5.3/getting-started/introduction/⁠

⁠

Tailwind CSS

https://tailwindcss.com/docs/installation/using-vite⁠

⁠

เลือกใช้ Angular

เป็น Framework ที่มีทุกอย่างครบ โครงสร้างชัดเจน เหมาะสำหรับแอประดับกลางถึงใหญ่และนิยมใช้งานในองค์กร (สสจ.ชัยภูมิ)

ติดตั้งและลองสร้างโปรเจกต์ใหม่ ng new test

⁠

รันโปรเจกต์ ng serve (--open จะเปิดหน้าเว็บให้เลย)

⁠

http://localhost:4200/⁠

⁠

เครื่องมือสำหรับพัฒนา

Visual Studio Code

Cursor เหมือน VS code มี AI ช่วยแนะนำและเขียน code

GitHub เก็บเวอร์ชัน code

Node.js สำหรับรัน JavaScript

Postman ทดสอบ API

XAMPP ใช้รัน MySQL

⁠

www.hostinger.com/tutorials/web-development-tools⁠

⁠

เครื่องมือสำหรับจัดการฐานข้อมูล

MySQL

ฐานข้อมูลเชิงตาราง (Relational)

ลองสร้างตาราง

MongoDB

ฐานข้อมูลแบบ NoSQL เก็บข้อมูลเป็นรูปแบบ JSON (Document)

ลองสร้างฐานข้อมูลชื่อ Test มี Collection ชื่อ movies

⁠

insert document ด้วย Mongo Shell

เพิ่มรายการเดียว insertOne()

⁠

เพิ่มหลายรายการ insertMany()

⁠

ตัวอย่าง document ที่เพิ่มมา

⁠

สรุปสิ่งที่ได้เรียนรู้

ศึกษาการพัฒนาเว็บแอปพลิเคชันด้วย Framework เช่น React และ Angular โดยเลือกใช้ Angular ในการทดลอง เนื่องจากมีโครงสร้างชัดเจนและนิยมใช้งาน จากนั้นติดตั้งและสร้างโปรเจกต์ใหม่ด้วย Angular CLI และทดลองเขียนตัวอย่างเบื้องต้นเพื่อเรียนรู้การทำงานของ Framework

⁠

วิเคราะห์เว็บไซต์สสจ.ชัยภูมิ

⁠

https://www.canva.com/design/DAGmKwcA0Bw/S4rXoBLVeRDxN4ME3a_jSA/edit?utm_content=DAGmKwcA0Bw&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.