[#6 Codeigniter ภาค1] มาทำ Workshop Codeigniter บน Netbeans (แบบนึกสนุก) กันดีกว่า..😋
คำเตือน การทำ Workshop นี้จำเป็นต้องใช้พื้นฐานจากเรื่องที่ทำไปก่อนหน้า ซึ่งควรไปทำความเข้าใจมาเสียก่อน ดังนี้เลยจ้า
ก่อนที่จะไปทำ มารู้จักพระเอกของเรื่องก่อนเลย คือ Codeigniter ขอเรียกสั้นๆว่า ci นะ เจ้า ci เป็น framwork ช่วยให้การเขียน php ของเราให้เป็นระบบระเบียบมากขึ้น เพราะโปรแกรมเมอร์ถึงจะเก่งแค่ไหนก็ผิดพลาดกันได้เสมอ และปัญหาที่จะพบกันได้บ่อยๆอีกอย่างหนึ่งคือ เวลาที่เราต้องเขียนโค้ดต่อจากคนอื่นนี้ เราจะเกิดอาการ ??? โดย ci จะช่วยนายเอง พระเอกจบไปแล้วเนอะ มานางเอกกันบ้าง คือ MVC (Model-View-Controller) โดยเจ้า MVC คืออะไรไปดูกัน
- Model → เป็นส่วนที่ติดต่อกับ database การจัดการข้อมูลเข้า-ออก เอาข้อมูลไปประมวลผล
- View → เป็นหน้าเป็นตาของเว็บเราเอง สิ่งที่ user จะเห็น (User Interface) เป็นส่วนที่ได้รับคำสั่งจากเจ๊ Controller อีกที
- Controller → เป็นเหมือนสมอง ทำการประมวลผลต่างๆ ไปคุยกับ Model แล้วส่งต่อไปให้ View
มาเริ่มขั้นตอนการทำ เริ่มจากไปดาวน์โหลด Codeigniter มาก่อน ตามลิ้งด้านล่าง แปะๆๆ https://www.codeigniter.com/
ขั้นตอนการเตรียมโปรเจค
1.เมื่อดาวน์โหลดเสร็จแล้ว ให้เปิด SourceTree ขึ้นมา เลือก Folder งานเราขึ้นมา กด Create เลย
2.Extract Codeigniter ที่ดาวน์โหลดมา เเล้ว copy Folder ตามภาพ มาลงใน Folder โปรเจคของเรา
3.เมื่อ Copy มาใส่แล้ว ให้ New โฟลเดอร์ assets มาด้วย
4.เท่านี้ เราก็จะได้โปรเจคที่สามารถใช้ความสามารถของเจ้า ci กันได้แล้วล่ะ แต่ ปล.อย่าลืม commit ใน SourceTree เอาไว้เป็นระยะๆด้วยจ้า
5.เปิด NetBeans ขึ้นมา แล้ว New Project ของเราขึ้นมา เลือก Folder โปรเจคที่เราสร้างไว้ตะกี้
ขั้นตอนการ Set Environment
6.จะทำการตั้งค่า Environment ในโปรเจคของเรากัน ให้ไปที่ โปรเจคของเรา → Source files → index.php ตรง development แก้เป็น localhost แล้วกด Save
7.สร้างโฟลเดอร์ localhost ในโฟลเดอร์ config แล้วให้ Copy files ตามภาพล่าง ไปใส่ในโฟลเดอร์ localhost ที่สร้างขึ้นมา
8.แก้ในไฟล์ config.php ในโฟลเดอร์ localhost ตรงที่วงสีเหลือง
9.สร้างไฟล์ .htaccess ที่โฟลเดอร์ Source files แล้วใส่ code ลงไปดังภาพ
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
10.กลับไป commit เสียหน่อยดีกว่า อย่าลืมมา commit บ่อยๆนะ
11.ในไฟล์ routes แก้ให้เป็นดังภาพ
12.มาทำความเข้าใจกับการอ่านค่าบน url กันสักนิดจ้า
- ServerName คือ ที่เราทำในบทที่1 vhosts ให้ไปสร้างมาเป็นของโปรเจคของเราอันนี้
- controller_name คือ ชื่อไฟล์ Controller ที่เราจะเรียกขึ้นมา
- function_name คือ ชื่อฟังก์ชั่นที่เรียกใช้ใน controller นั้น
- parameter_1,parameter_2 คือ ค่าพารามิเตอร์ที่เราต้องการส่ง เช่น อาจจะเป็น id หรือ name ประมาณนั้นจ้า อาจจะมีพารามิเตอร์ 3 ..4 … อีกก็ได้แล้วแต่เรา
ส่วนที่ 1 Controller
13.สร้างไฟล์ php class ใน controller
14.ให้ทำการแก้ไขไฟล์ Test.php ที่ได้มา เป็นดังภาพนี้
15.ลองไป search จะได้ผลลัพธ์ดังภาพล่าง
16.ลองเพิ่ม function เข้าไป เพื่อทดสอบ
17.ลองเรียกใช้ function ดูหน้าเว็บเรากันน
ส่วนที่ 2 View
18.ต่อมาจะเป็นการสร้าง View ให้สร้างไฟล์ที่เป็น php web page ไว้ที่โฟลเดอร์ views
เมื่อทำเสร็จ จะได้ดังภาพด้านล่างมาจ้า
ให้พิมพ์ตามนี้เข้าไปเลย
19.กลับมาที่ Test.php ในโฟลเดอร์ controllers ให้แก้เป็นดังภาพด้านล่าง
20.ลองไป search เพื่อดูผลลัพธ์เลยจ้า อย่าลืมเปิด Xampp ด้วยจ้า!
ส่วนที่ 3 Model
21.ไปสร้างโปรเจค database ที่ MySQL Workbench ให้มีหน้าตาดังภาพนี้
22.ไปเปลี่ยนข้อมูลในไฟล์ database.php ดังภาพล่าง ให้เป็นของเรา ในที่นี้ได้เปลี่ยนชื่อ username และ database เป็นดังภาพล่างจ้า
23.ที่โฟลเดอร์ models ให้สร้าง php class ขึ้นมา โดยอย่าลืมว่าชื่อ class เป็นตัวใหญ่
แก้ไขให้เป็นดังภาพด้านล่าง
24.อธิบายการเรียกใช้งาน model สักเล็กน้อย
ที่เคยบอกไปว่า model มันจะต้องส่งค่าไปให้ controller เราก็เลยจะทำการ load model เข้ามาใช้งานที่ controller ด้วยคำสั่งนี้
- $this->load->model(‘ชื่อ model’);
และเมื่อ load มาแล้ว ก็ต้องมีคำสั่งใช้งาน คือ
- $this->ชื่อ model ->ชื่อฟังก์ชั่น
ให้เปิดไฟล์ Test.php ที่อยู่ใน controller ขึ้นมา จากนั้นให้พิมพ์ตามนี้เลยจ้า
จะมีการสร้าง function show ขึ้นมาเพิ่ม โดยฟังก์ชั่นนี้เป็นฟังก์ชั่นที่เราจะไปเอาชื่อจากใน database ที่เราสร้างมาแสดง
25.ให้ไปที่หน้า test.php ที่โฟลเดอร์ views และแก้ไขไฟล์ดังภาพล่าง
26.ให้ลอง search เพื่อ search ดูผลลัพธ์หน้าเว็บของเราเลยจ้า
ถ้าขึ้นมาแบบภาพบนแล้วแสดงว่าา เราทำสำเร็จแล้ว เย้ๆ จบแล้วจ้า เดี๋ยวมีภาค 2 เร็วๆนี้ coming soon… ปล.อย่าลืม commit ใน SourceTree ด้วยจ้า