อย่างที่ได้เกริ่นมาแล้วว่า เราจะไม่ได้ลงรายละเอียด ที่มาที่ไปของแต่ละส่วน
ซึ่งให้ทุกคน ค้นหาอ่านเพิ่มเติมใน google ได้เลย
ต่อเนื่องจากตอนแรก ในหัวข้อนี้ เราจะสร้างเว็บไซต์ของเราอย่างง่าย แบบ Static pages
หรือเว็บไซต์ที่มีข้อมูลตายตัว เน้นการนำเสนอ โดยจะประยุกต์ตามดังนี้
เว็บไซต์เรามีหน้า Home, Aboutus, Service และ Contactus
มีเมนู กดลิ้งค์ไปมาได้ โดยในที่นี้จะใช้ css ของ bootstrap มาประกอบ
เพื่อความสะดวก และสวยงาม
สำหรับโฟลเดอร์ใน apps ที่เราจะมีการใช้งานในตอนนี้ได้แก่
config
สำหรับกำหนดค่าในไฟล์ routes.php ในลักษณะการกำหนดเส้นทางการเรียกผ่าน URI
controllers
สำหรับสร้างไฟล์ และโค้ดของ controllers class
views
สำหรับเรียกไฟล์ แสดงผลข้อมูล หรือ templates
เริ่มต้น เรามาดูที่ไฟล์ routes.php กำหนดเส้นทางการเรียกดูเว็บผ่าน URI
ไฟล์ routes.php ในโฟลเดอร์ apps > config โค้ดด้านล่างสุด เป็นดังนี้
$route['default_controller'] = 'welcome'; $route['404_override'] = ''; $route['translate_uri_dashes'] = FALSE;
รายการทั้ง 3 ดามด้านบนนี้ เป็นเส้นทางที่สงวนหรือจองเอาไว้
$route['default_controller'] = 'welcome';
ส่วนแรกไว้กำหนด controller class เริ่มต้น ที่ต้องการเรียกใช้งาน ในกรณีที่ไม่มี
การกำหนด หรือระบุข้อมูลมาใน URI เช่น เราเรียกเข้ามาจาก root URL ของเว็บ ตัวอย่าง
http://localhost/learnci/
ก็จะมีค่าเท่ากับ
http://localhost/learnci/index.php/welcome
คือมีการดึง controllers class ที่ชื่อ welcome
$route['404_override'] = '';
ส่วนที่ 2 สำหรับกำหนดให้ไปเรียกใช้งาน error controllers class กรณี controllers class ที่เรียก
ใช้งานไม่พบ หรือไม่มีอยู่ โดยไฟล์ error 404 นี้จะอยู่ที่ path apps/views/errors/error_404.php.
$route['translate_uri_dashes'] = FALSE;
ส่วนที่ 3 เป็นส่วนที่ใช้กำหนด ให้สามารถใช้งาน - แทน _ ให้อัตโนมัติ สำหรับ class และ method
สมมติเรากำหนด class ชื่อ welcome_to และค่า translate_uri_dashes เป็น FALSE
เราจะไม่สามารถเรียก
http://localhost/learnci/index.php/welcome-to
ได้โดยตรง แต่ถ้าต้องการให้สามารถเรียกใช้งานได้ เราต้องเพิ่ม route เข้าไปก่อน คือ
$route['welcome-to'] = 'welcome_to';
เพื่อประโยชน์ส่วนนี้ การกำหนดค่า translate_uri_dashes เป็น TRUE จะเป็นการลดขั้นตอน
ให้เราเรียกใช้งาน welcome-to แทน welcome_to โดยไม่ต้องเพิ่ม route ข้างต้น เพราะ
มีการกำหนดให้สามารถใช้งานได้อัตโนมัติ
ที่นี้กลับมาที่การกำหนด route ของ project ของเรา เราจะกำหนดหน้าเพจ
ทั้งหมด 4 หน้า และใช้ชื่อ controllers class โดยกำหนด route ได้ดังนี้
$route['home'] = 'home'; $route['aboutus'] = 'aboutus'; $route['service'] = 'service'; $route['contactus'] = 'contactus';
ให้เราเพิ่มไว้ด้านบนของ route ทั้งสาม และเปลี่ยนค่า controllers class
ของ default_controller เป็น home
จะไพ้ไฟล์ routes.php ใน apps > config ดังนี้
.
.............. ........ .... | Examples: my-controller/index -> my_controller/index | my-controller/my-method -> my_controller/my_method */ $route['home'] = 'home'; $route['aboutus'] = 'aboutus'; $route['service'] = 'service'; $route['contactus'] = 'contactus'; $route['default_controller'] = 'home'; $route['404_override'] = ''; $route['translate_uri_dashes'] = FALSE;
สร้างไฟล์ในส่วนของ controllers
ในขั้นตอนต่อมา เราจะมาทำการสร้างไฟล์ controllers class สำหรับใช้งาน
ให้ไปที่ โฟลเดอร์ apps > controllers สร้างไฟล์ชื่อ Home.php
* จำไว้ว่าชื่อไฟล์ตัวแรกต้องเป็นตัวพิมพ์ใหญ่ และจะเป็นชื่อเดียวกับชื่อ class
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller {
public function index()
{
echo "Home";
}
}
เสร็จแล้วลองทดสอบผ่าน บราวเซอร์ ที่ url http://localhost/learnci/
หน้าเพจก็จะแสดงคำว่า Home ขึ้นมา
ข้างต้นจะเป็นแค่ตัวอย่างอย่างง่ายเท่านั้น การใช้งานจริง เราจะต้องมาทำเพิ่ม
ในส่วนของ view กำหนดรุปแบบการแสดงผล และ โหลดเข้ามาใน controller
ให้เราเปลี่ยนโค้ดไฟล์ Home.php ใหม่ดังนี้
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller {
public function index()
{
$data['title']="Home Title";
$data['title_h1']="Page Home";
$this->load->view('templates/header', $data);
$this->load->view('pages/home',$data);
$this->load->view('templates/footer');
}
}
ทำเช่นกันสำหรับ อีก 3 ไฟล์ที่เหลือ เปลี่ยนชื่อ class และ ไฟล์ view ที่เรียกใช้
Aboutus.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Aboutus extends CI_Controller {
public function index()
{
$data['title']="About Us Title";
$data['title_h1']="Page About Us";
$this->load->view('templates/header', $data);
$this->load->view('pages/aboutus',$data);
$this->load->view('templates/footer');
}
}
Service.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Service extends CI_Controller {
public function index()
{
$data['title']="Service Title";
$data['title_h1']="Page Service";
$this->load->view('templates/header', $data);
$this->load->view('pages/service',$data);
$this->load->view('templates/footer');
}
}
Contactus.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Contactus extends CI_Controller {
public function index()
{
$data['title']="Contact Us Title";
$data['title_h1']="Page Contact Us";
$this->load->view('templates/header', $data);
$this->load->view('pages/contactus',$data);
$this->load->view('templates/footer');
}
}
ในลำดับต่อไป เราจะสร้างไฟล์ในโฟลเดอร์ views
สร้างไฟล์ในส่วนของ view
การสร้างไฟล์ในส่วนของ view เราจะทำในโฟลเดอร์ apps > views
อ้างอิงการเรียกใช้งานไฟล์ในส่วนของ view จากไฟล์ Home.php
$this->load->view('templates/header', $data);
$this->load->view('pages/home',$data);
$this->load->view('templates/footer');
ตามโตรงสร้าง เราจะสร้างโฟลเดอร์ templates เข้าไปในโฟลเดอร์ views
และก็สร้างไฟล์ header.php และ footer.php ในโฟลเดอร์ templates อีกที
ส่วนของ templates เราจะครั้งเดียว แล้วเรียกใช้จากหลายไฟล์ได้
จากนั้นสร้างโฟลเดอร์ pages .ในโฟลเดอร์ views
และสร้างไฟล์ home.php ในโฟลเดอร์ pages
โครงสร้างไฟล์ต่างๆ ดังต่อไปนี้
โฟลเดอร์ views > pages ประกอบด้วยไฟล์
home.php
aboutus.php
service.php
contactus.php
โค้ดไฟล์เหมือนกัน ทั้ง 4 ไฟล์ ตามนี้
<div class="container"> <h1><?=$title_h1?></h1> </div>
โฟลเดอร์ views > templates ประกอบด้วยไฟล์
โค้ด header.php
<?php
$baseURL="http://localhost/learnci/";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?=$title?></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<?=$baseURL?>">LearnCI</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="<?=$baseURL?>index.php/home/">Home</a></li>
<li><a href="<?=$baseURL?>index.php/aboutus/">About Us</a></li>
<li><a href="<?=$baseURL?>index.php/service/">Service</a></li>
<li><a href="<?=$baseURL?>index.php/contactus/">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
โฟลเดอร์ views > templates ประกอบด้วยไฟล์
โค้ด footer.php
</body> </html>
เป็นอันเสร็จ ให้ทำการทดสอบการใช้งาน โดยเปิดไปที่ project ของเรา
จากลิ้งค์ http://localhost/learnci/
หรือกรณีใครใช้ port อื่นก็ให้ระบุ port ต่อท้ายไปด้วย เช่น
http://localhost:8080/learnci/ แบบนี้เป็นต้น
อ่านต่อที่บทความ