Joy Kanyawee
5 min readMay 31, 2019

[#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 เอาไว้เป็นระยะๆด้วยจ้า

Commit Files
Create Branches
Start New Features in Develop branches

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 ตรงที่วงสีเหลือง

Default config
Changed config

9.สร้างไฟล์ .htaccess ที่โฟลเดอร์ Source files แล้วใส่ code ลงไปดังภาพ

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

เอามาใส่ตามภาพแล้ว กด Save

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

ปล.อย่าลืมว่า ชื่อ Classsss ตัวแรกต้องเป็นตัวใหญ่จ้า
เมื่อสร้างเสร็จจะได้ดังภาพนี้เลย

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 ให้มีหน้าตาดังภาพนี้

ในที่นี้ให้ชื่อตาราง คือ users

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 ที่เราสร้างมาแสดง

ปล. $this->load->view(‘test’,$data); เป็นการเรียกใช้งาน view โดยส่งตัวแปร $data ไปแสดงผลใน view

25.ให้ไปที่หน้า test.php ที่โฟลเดอร์ views และแก้ไขไฟล์ดังภาพล่าง

$name เป็นตัวแปรที่รับมาจาก controller

26.ให้ลอง search เพื่อ search ดูผลลัพธ์หน้าเว็บของเราเลยจ้า

ถ้าขึ้นมาแบบภาพบนแล้วแสดงว่าา เราทำสำเร็จแล้ว เย้ๆ จบแล้วจ้า เดี๋ยวมีภาค 2 เร็วๆนี้ coming soon… ปล.อย่าลืม commit ใน SourceTree ด้วยจ้า