จากเนื้อหาตอนที่แล้ว เราได้สร้าง project เว็บไซต์อย่างง่าย
เขียน controller class และ view สร้างเว็บไซต์อย่างง่าย
https://www.ninenik.com/content.php?arti_id=662 via @ninenik
รวมถึงการตั้งค่าต่างๆ เบื้องต้นสำหรับการใช้งาน Codeigniter โดยเฉพาะใน
ส่วนของ URL อย่างเช่นการกำหนดตัวแปร
$config['base_url'] = 'http://localhost/learnci/';
ติดตั้ง และ ใช้งาน CodeIgniter สำหรับพัฒนา website หรือ web app
https://www.ninenik.com/content.php?arti_id=661 via @ninenik
พบว่าในการเรียกใช้งานเว็บไซต์ project จะมีการเรียกไฟล์ index.php เสมอ
เช่น
สำหรับใครที่ทดสอบตามและใช้ bootstrap กับ jquery ให้เข้าไปทำการโหลดไฟล์
http://localhost/learnci/index.php/home/ http://localhost/learnci/index.php/aboutus/ http://localhost/learnci/index.php/service/ http://localhost/learnci/index.php/contactus/
ซึ่งโดยปกติการใช้งานจริง เราต้องการให้ URL ของเว็บไซต์ของเรา รองรับ search-engine
และอ่านออกเข้าใจง่าย เช่น
http://localhost/learnci/home/ http://localhost/learnci/aboutus/ http://localhost/learnci/service/ http://localhost/learnci/contactus/
การตัด index.php ด้วยการใช้ mod_rewrite จึงถูกนำมาใช้
สำหรับการแก้ปัญหานี้ และแน่นอนว่า เมื่อมีการใช้งาน mod_rewrite ย่อมจะมีผลต่อการ
กำหนด path ในส่วนของไฟล์ต่างๆ เช่น ไฟล์ในโฟลเดอร์ css js images หรืออื่นๆ
ดังนั้น URL Helper จึงจำเป็นสำหรับนำมาใช้ใน project เราเสมอ เพื่อใช้ในการดึง path
ของตำแหน่งข้อมูล URL ต่างๆ มาใช้ เช่น base_url เป็นต้น
อ้างอิงจากเนื้อหาตอนที่แล้ว
การตัด index.php ด้วย mod_rewrite
เบื้องต้นให้เราสร้างไฟล์ชื่อ .htaccess ไว้ในโฟลเดอร์ root (ตำแหน่งเดียวกับโฟลเดอร์ apps และ sys)
และกำหนดค่าในไฟล์ดังนี้
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
จากนั้นให้ไปที่ไฟล์ config.php ในโฟลเดอร์ apps > config และแก้ไขโค้ด
ในส่วนการกำหนด ndex_page
$config['index_page'] = 'index.php';
ให้เราเปลี่ยนเป็นค่าว่าง จะได้เป็น
$config['index_page'] = '';
เท่านี้เป็นอันเสร็จ ในขั้นตอนการตัด index.php เราสามารถเรียกใช้งาน
http://localhost/learnci/home/ แทน http://localhost/learnci/index.php/home/ * กรณีทดสอบและมี port อื่นให้ระบุ port ไปด้วย เช่น http://localhost:8080/learnci/home/
การเรียกใช้งาน URL Helper
ไฟล์ URL Helper จะประกอบไปด้วยฟังก์ชั่นสำหรับใช้งานเกี่ยวกับ URL ต่างๆ
เช่น site_url() base_url() เป็นต้น ดังนั้นให้เราทำการ โหลด URL Helper อัตโนมัติ
โดยเข้ากำหนดค่าดังนี้
แก้ไขไฟล์ autoload.php ที่อยู่ในโฟลเดอร์ apps > config
โดยให้ทำการเพิ่ม URL Helper
$autoload['helper'] = array('url');
เท่านี้เราก็สามารถเรียกใช้งานฟังก์ชั่นเกี่ยวกับ URL ที่ใช้บ่อย เช่น site_url() หรือ base_url() ได้แล้ว
เรามาดูการใช้งานอ้างอิงจากไฟล์ header.php ที่อยู่ในโฟลเดอร์ templates จากเนื้อหาตอนที่แล้ว
<?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>
จากโค้ดข้างต้น ขออธิบาย 2 ส่วน
ส่วนแรก
<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>
จะเห็นว่าเรามีการเรียกใช้ไฟล์ css และ javascript จากภายนอก
แต่กรณีใช้งานจริง เราควรเรียกจาก path server ของเราจะดีกว่า ดังนั้น เราจะสร้างโฟลเดอร์
css js และ images ในตำแหน่งเดียวกับโฟลเดอร์ apps และ sys
จากนั้นเรากำหนด path เบื้องต้น ของแต่ละส่วนใหม่ได้ดังนี้
<link rel="stylesheet" href="css/bootstrap-3.3.5/css/bootstrap.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="css/bootstrap-3.3.5/js/bootstrap.min.js"></script>
สำหรับใครที่ทดสอบตามและใช้ bootstrap กับ jquery ให้เข้าไปทำการโหลดไฟล์
และบันทึกลงโฟลเดอร์ และเรียก path ให้ถูกต้อง
จะเห็นว่าการกำหนดใหม่ข้างต้น เป็นการกำหนด path แบบ relative หรืออาศัยความสัมพันธ์กับ
url ปัจจุบันที่แสดงบนบราวเซอร์ เช่น ถ้าที่บราวเซอร์ URL เป็น
http://localhost/learnci/home/
ไฟล์ jquery ในโฟลเดอร์ js จะมี path ที่ผิดเพี้ยนไปจากความเป็นจริง
http://localhost/learnci/home/js/jquery-1.11.3.min.js
ซึ่งจริงแล้ว path ที่ถูกต้องคือ
http://localhost/learnci/js/jquery-1.11.3.min.js
ดังนั้นเป็นเหตุผลและความสำคัญที่เราจะใช้งาน URL Helper โดยเราจะเรียกใช้ฟังก์ชั่น
base_ur() ซึ่งจะได้ค่าที่กำหนดในไฟล์ config.php ในโฟลเดอร์ apps > config
$config['base_url'] = 'http://localhost/learnci/';
เราจึงกำหนดใหม่ดังนี้
<link rel="stylesheet" href="<?=base_url()?>css/bootstrap-3.3.5/css/bootstrap.min.css">
<script src="<?=base_url()?>js/jquery-1.11.3.min.js"></script>
<script src="<?=base_url()?>css/bootstrap-3.3.5/js/bootstrap.min.js"></script>
ส่วนที่สอง
ส่วนของลิ้งค์ต่างๆ ก็กำหนด เช่น จากเดิม เราใช้วิธีใส่ตัวแปรแบบกำหนด
เพราะยังไม่ได้มีการเรียกใช้งาน URL Helper แต่เมื่อเราเรียกใช้งาน URL Helper
แล้วเราสามารถกำหนดใหม่ได้ดังนี้
<a class="navbar-brand" href="<?=base_url()?>">LearnCI</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="<?=base_url('home')?>">Home</a></li>
<li><a href="<?=base_url('aboutus')?>">About Us</a></li>
<li><a href="<?=base_url('service')?>">Service</a></li>
<li><a href="<?=base_url('contactus')?>">Contact Us</a></li>
</ul>
</div>
รูปแบบการใช้งาน ฟังก์ชั่น base_url() เบื้องต้น
ถ้าเรากำหนด base_ur ที่กำหนดในไฟล์ config.php ในโฟลเดอร์ apps > config
$config['base_url'] = 'http://localhost/learnci/';
เมื่อมีการเรียกใช้งานฟังก์ชั่น
<?=base_url()?>
จะได้ค่า เดียวกับ $config['base_url'] คือ
http://localhost/learnci/
และถ้าเรากำหนดค่า string เข้าไป จะเป็นการต่อ URL เช่น
<?=base_url('home')?>
ก็จะได้ เป้น
http://localhost/learnci/home
หากต้องการกำหนด protocal เช่น https ftp เป้นต้น (หากไม่กำหนดก็จะเป็น http)
<?=base_url('home','https')?>
ค่าจะได้ เป้น
https://localhost/learnci/home
นอกจากนั้น เรายังสามารถกำหนดเข้าไปใน path โฟลเดอร์ย่อยเข้าไปได้ เช่น การใช้งาน
กับไฟล์รูปภาพ image css หรือ javascipt เข่น
<?=base_url('images/logo.png')?>
ก็จะหมายถึง path เต็มดังนี้
https://localhost/learnci/images/logo.png
ดังนั้นเมื่อเราแก้ไขไฟล์ header.php ตามรูปแบบการใช้งานใหม่ จะได้ดังนี้
<!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="<?=base_url('css/bootstrap-3.3.5/css/bootstrap.min.css')?>">
<script src="<?=base_url('js/jquery-1.11.3.min.js')?>"></script>
<script src="<?=base_url('css/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="<?=base_url()?>">LearnCI</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="<?=base_url('home')?>">Home</a></li>
<li><a href="<?=base_url('aboutus')?>">About Us</a></li>
<li><a href="<?=base_url('service')?>">Service</a></li>
<li><a href="<?=base_url('contactus')?>">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
ขอจบในส่วนของการใช้ mod_rewrite เพื่อตัด index.php และการใช้งาน
URL Helper ซึ่งมีความสำคัญต้นๆ ไว้เพียงเท่านี้
อ่านต่อที่บทความ