สอนใช้งาน Laravel ฉบับมือใหม่ อัปเดทล่าสุด 2023
![](https://i2.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/laravel-beginner-1-768x610-1.jpg?resize=768%2C470&ssl=1)
สำหรับวันนี้ผมก็จะมาสอนใช้งาน Laravel แบบจับมือทำทีละขั้นตอน สำหรับผู้ที่เพิ่งเริ่มใช้งานแบบไม่เคยใช้มาก่อน~
ขั้นตอนแรก ให้สร้างโฟลเดอร์สำหรับเก็บไฟล์โปรเจคของเราขึ้นมาก่อน (เพื่อความเป็นระเบียบและเรียกใช้งานง่ายๆ)
จากนั้นคลิกขวาที่โฟล์เดอร์ที่เราจะติดตั้ง Laravel แล้วเลือก “แถบเทอร์มินัลใหม่ที่โฟลเดอร์”
![](https://i0.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-14.31.09.jpeg?resize=708%2C469&ssl=1)
จากนั้นให้พิมพ์โค้ดตามนี้ โดย example-app คือชื่อโฟลเดอร์โปรเจคของเรานั่นเองสามารถเปลี่ยนเป็นอะไรก็ได้แล้วแต่เราเลย จากนั้นกด Enter
composer create-project laravel/laravel example-app
![](https://i2.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-14.31.35.jpeg?resize=708%2C472&ssl=1)
ก็จะทำการดาวน์โหลดไฟล์แพ็คเกจต่างๆ
![](https://i0.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-14.31.44.jpeg?resize=708%2C481&ssl=1)
หลังจากติดตั้งเสร็จแล้ว ให้เปิดโปรแกรม VS Code แล้วลากโฟลเดอร์โปรเจคของเราใส่ไปได้เลย
![](https://i1.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-14.32.54-2048x1054-1.jpg?resize=708%2C364&ssl=1)
จากนั้นให้ไปที่ Terminal > New Terminal
![](https://i1.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-14.33.15.jpeg?resize=708%2C450&ssl=1)
พิมพ์คำสั่งตามนี้เลย เพื่อรันโปรเจคของเรา
php artisan serve
![](https://i1.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-14.34.22.jpeg?resize=708%2C335&ssl=1)
คัดลอก URL นี้ไปเปิดที่เบราว์เซอร์ (http://127.0.0.1:8000)
![](https://i1.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-14.34.36.jpeg?resize=708%2C398&ssl=1)
ก็จะเจอกับหน้าแรกของโปรเจค Laravel ของเรา
![](https://i0.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-14.35.37-2048x1125-1.jpeg?resize=708%2C389&ssl=1)
ในหน้าต่าง Terminal ให้พิมพ์คำสั่งตามนี้เพื่อสร้างคีย์ความปลอดภัย
php artisan key:generate --ansi
![](https://i0.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-14.50.13.jpeg?resize=708%2C313&ssl=1)
ขั้นตอนถัดไปเราจะให้เจ้า Laravel สร้างหน้า login กับหน้า register ให้เราแบบอัตโนมัติ โดยพิมพ์คำสั่งตามนี้เลย
composer require laravel/ui
จากนั้นตามด้วยคำสั่งนี้
php artisan ui vue --auth
อีกคำสั่งที่พลาดไม่ได้
npm install
ปิดท้ายด้วยคำสั่งนี้
npm run dev
กลับไปที่เบราว์เซอร์ของเรา ลองรีเฟรชดูก็จะพบเมนูเพิ่มเข้ามา 2 อันคือ Login กับ Register อยู่ตรงมุมขวา
![](https://i1.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-14.52.46-2048x1171-1.jpeg?resize=708%2C405&ssl=1)
ลองกดเข้าไปดูได้ แต่ยังไม่สามารถบันทึกข้อมูลได้นะ เพราะว่าเรายังไม่ได้เชื่อมต่อกับฐานข้อมูลเลย
หน้า Login หน้า Register
ในขั้นตอนนี้ เรามาลองเชื่อมต่อกับฐานข้อมูลกันหน่อยดีกว่า แต่เป็นฐานข้อมูลในเครื่องเรานะ ใช้ XAMPP ในการจำลองฐานข้อมูล ถ้าใครมีแล้วก็กด Start All ได้เลย แต่ถ้าใครยังไม่มี สามารถดาวน์โหลดได้จากลิงค์นี้เลย https://www.apachefriends.org/download.html
![](https://i1.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-15.08.49.jpeg?resize=708%2C524&ssl=1)
สร้างฐานข้อมูลขึ้นมาใหม่ โดยในตัวอย่างนี้ขอใช้ชื่อว่า example_db
![](https://i0.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-15.09.30.jpeg?resize=708%2C570&ssl=1)
ไปที่ไฟล์ .env แล้วใส่ชื่อฐานข้อมูลของเรา
![](https://i0.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-18.48.55-1.jpg?resize=708%2C355&ssl=1)
พิมพ์คำสั่งนี้เพื่อสร้างตารางในฐานข้อมูล
php artisan migrate
![](https://i0.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-15.12.17.jpeg?resize=708%2C207&ssl=1)
เย้!! มีตารางเพิ่มเข้ามาในฐานข้อมูลเราแล้ว
![](https://i1.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-15.12.38.jpeg?resize=708%2C419&ssl=1)
ทีนี้ก็กลับไปที่เบราว์เซอร์ของเรา ไปที่หน้า Register เพื่อทำการกรอกข้อมูล เพื่อดูว่าข้อมูลที่เราสมัคร จะบันทึกเข้าฐานข้อมูลหรือไม่
![](https://i1.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-15.13.45.jpeg?resize=708%2C331&ssl=1)
หลังจากกดปุ่ม Register แล้ว ระบบก็จะพาเรามาที่หน้านี้
![](https://i0.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-15.13.55-2048x844-1.jpeg?resize=708%2C292&ssl=1)
ในฐานข้อมูลของเราก็มีข้อมูลเพิ่มเข้ามาแล้ว
![](https://i0.wp.com/wolfxstudio.com/wp-content/uploads/2024/05/ภาพถ่ายหน้าจอ-2566-10-11-เวลา-15.14.34-2048x799-1.jpeg?resize=708%2C277&ssl=1)
นตอนนี้เราก็ได้ระบบที่มีหน้า Login หน้า Register และหน้า Home แล้ว
ในบทความต่อไปจะสอนสร้างหน้าเว็บเพิ่มเติม เช่น หน้า About,Contact หรือน่ารัก อร้ายยยย~~~~