codeigniter php framework ติดตั้ง และ ใช้งาน css ,js, รูปต่างๆ
เริ่มแรกให้ไปโหลด ที่ https://codeigniter.com/ ตัวล่าสุด
จากนั้นจะได้ เป็น ไฟล์ ตามชื่อนี้มา CodeIgniter-3.1.6.zip (เลขตรงกลางจะเปลี่ยนไปตามรุ่นที่คุณโหลด)
จากนั้นทำการ แตกไฟล์ แล้ว copy ไปทีี่ host ของคุณ ในที่นี้ผมใช้ appserv ในการทดสอบ ผมก็จะ copy ไปที่ C:\AppServ\www\codeIgniter
จากนั้นให้ลอง เข้าดู ตัวอย่างเช่น http://127.0.0.1/codeIgniter
จากนั้นหากเรามีตัวที่ออกแบบมา อยู่แล้ว อาจจะซื้อ มาหรือ ให้ ทีม art ออก แบบ ใน code ทำ css เรียบร้อย แล้วติด js แล้ว
ให้ คุณ copy ตัว css ,js, รูปต่างๆ ไปไว้ที่ C:\AppServ\www\codeIgniter
จากนั้นให้ จะเริ่ม สร้างไฟล์ หน้าตา โดยเริ่มจากตัวเรียก ก่อน โดยจะอยู่ที่ C:\AppServ\www\codeIgniter\application\controllers
พอเข้าไปที่โฟเดอร์จะเห็นได้ว่า มี ไฟล์หลักอยู่ชื่อว่า Welcome.php ให้เรา copy แล้วมาสร้างใหม่ ในที่นี้ผมจะสร้างว่า news.php
(จากตรงนี้ผมได้ใช้ Welcome.php เป็นหน้า index ไปเลย)
จากนั้นให้เข้าไปแก้ 3 จุด ดังนี้
defined(‘BASEPATH’) OR exit(‘No direct script access allowed’);
class News extends CI_Controller { /// จาก Welcome แก้เป็น News (ชื่อตรงนี้อักษรตัวแรกต้องเป็นตัวใหญ่เท่านั้น)
public function index()
{
$this->load->helper(‘url’); ///ยังไม่แน่ใจว่าอะไร เท่าที่ทราบ เป็นการโหลด url หน้า แรกมา เราจะเอาไปใส่ที่ css
$this->load->view(‘news’); /// ตัวนี้จะส่งไปที่ โฟเดอร์ view โดยเราจะใส่ชื่อหน้าลงไป
}
}
จากนั้นผมจะไปที่ C:\AppServ\www\codeIgniter\application\views และ copy ไฟล์ news.php ที่ผมออกแบบแล้วจริงๆลงไป โดยสิ่งที่ต้องเพิ่มเติมมีดังนี้
<?php
defined(‘BASEPATH’) OR exit(‘No direct script access allowed’); ////// ไม่รู้ใส่ไปทำไม แต่เห็น Welcome.php มีเลย ใส่
?><!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”description” content=””>
<meta name=”author” content=””>
<title>KOG | News</title>
<link href=”<?php echo base_url(); ?>css/bootstrap.min.css” rel=”stylesheet”> //// ให้ เพิ่ม <?php echo base_url(); ?> ไปใน href , src หรืออืนๆ ที่มีการดึงไฟล จาก C:\AppServ\www\codeIgniter
<link href=”<?php echo base_url(); ?>css/font-awesome.min.css” rel=”stylesheet”>
จากนั้นให้ ลองใช้โดย 127.0.0.1/codeIgniter/index.php/news
(หากมีเวลาจะมาเพิ่มเติมอีกทีครับ ในส่วนของรูปและ คำอธิบาย)