Go to the profile of Jirachot Aphirangsimun
Jirachot Aphirangsimun

การติดตั้ง Codeigniter 3 กับ Bootstrap

Codeigniter เป็น php framwork ที่ได้รับความนิยมกันอย่างแพร่หลายทั้งในประเทศไทยและต่างประเทศ โดยบทความนี้จะสอนการติดตั้ง Codeigniter เบื้องต้นโดยจะใช้ xampp เป็น Server จำลอง สามารถทำตามขั้นตอนตามลำดับได้ดังนี้

  1. สามารถโหลด xampp ได้ที่ https://www.apachefriends.org/index.html เลยครับ
  2. ทำการติดตั้ง xampp
1. กด next
2. กด next
3. เลือกโฟลเดอร์ที่ต้องการเก็บเสร็จแล้วกด next
4. กด next
5. กด next เพื่อเริ่มทำการติดตั้ง

3. เมื่อทำการติดตั้งเสร็จแล้วก็ได้จะ icon ตัวนี้มา

4. ต่อไปจะเป็นการติดตั้ง Codeigniter 3 โดยสามารถดาว์โหลดได้ที่ https://www.codeigniter.com/download

5. เมื่อดาว์โหลดเสร็จแล้วจะได้ไฟล์ CodeIgniter-3.1.0

6. เสร็จแล้วให้สร้างโปรเจคขึ้นมาที่ xampp โดยเข้าไปที่โฟลเดอร์ xampp ตามด้วย htdocs แล้วทำการสร้างโฟลเดอร์โปรเจคขึ้นมา 1 โฟลเดอร์โดยในบทความนี้จะใช้ชื่อว่า test นะครับ

1. สร้างโปรเจคชื่อว่า test

7. ให้นำไฟล์ CodeIgniter-3.1.0 มาแตกไฟล์ในโฟลเดอร์ test

2. แตกไฟล์ CodeIgniter-3.1.0 ในโฟลเดอร์ test

เสร็จแล้วจะมาลองรัน Codeigniter 3 กันครับ

8. ทำการเปิด Server จำลองที่ xampp กันเลยครับ ให้เข้าที่ icon xampp แล้วเลือก start ตรง Apache และ MySQL

3. Start Server จำลอง

9. เมื่อ start 2 ตัวนี้แล้ว ให้เปิดบราวซ์เซอร์ขึ้นมาเลยครับ แล้วลองพิมพ์ http://localhost/test/index.php/welcome

4. พิมพ์ http://localhost/test/index.php/welcome บนบราวซ์เซอร์

เมื่อแสดงข้อมูลแบบนี้ก็เป็นอันติดตั้ง Codeigniter 3 สำเร็จแล้วครับ ง่ายๆใช่มั้ยครับ ต่อไปจะเป็นการติดตั้ง Bootstrap 3 นะครับ

10. ให้เข้าไปที่โฟลเดอร์โปรเจคที่ชื่อว่า test แล้วสร้างโฟลเดอร์ชื่อว่า assets ขึ้นมา

1. สร้างโฟลเดอร์ assets ขึ้นมา

เมื่อสร้างโฟลเดอร์ assets เสร็จแล้วให้โหลดไฟล์ Bootstrap 3 ได้ที่ http://getbootstrap.com/getting-started/ เมื่อโหลดมาแล้วจะได้ไฟล์

11. นำไฟล์ Boostrap 3 มาแตกไฟล์ที่โฟลเดอร์ assets ที่สร้างขึ้นมาครับ

2. แตกไฟล์ที่โฟลเดอร์ assets

12. เมื่อเตรียมไฟล์ Boostrap 3 เสร็จเรียบร้อยแล้วจะมาเซ็ต Path กันนะครับ ก่อนอื่นก็เปิดโปรเจค test เลยครับ แล้วเข้าไปที่ application/config เพื่อมาเซ็ต base_url() กันนะครับ ให้เซ็ตเป็น http://localhost/test นะครับ

3. เซ็ต config base_url()

13. ให้เลือกไฟล์ autoload แล้วเซ็ตตรง $autoload[‘helper’] ด้วยนะครับ ให้ใส่ url ในวงเล็บนะครับ ก็คือให้ framwork โหลดตัว helper url ไว้ครับ

4. เซ็ต url helper

14. เสร็จแล้วจะมาลองสร้างหน้า view เพื่อเทสกันนะครับ

15. โค้ดหน้า view ในบรรทัดที่ 9, 33 และ 35 ก็คือการเรียกใช้งาน Bootstrap 3 มาจากโฟลเดอร์ assets นะครับ

ผลลัพธ์หน้า view

ทีนี้ก็สามารถใช้งาน Codeigniter 3 ควบคู่กับ Bootstrap 3 ได้แล้วนะครับ ง่ายใช่มั้ยครับ ลองทำตามกันดูนะครับ