การตัด index.php และการเรียกใช้งาน URL Helper

27 August 2015 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

codeigniter url helper codeigniter 3

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ codeigniter url helper codeigniter 3

ดูแล้ว 19,675 ครั้ง

จากเนื้อหาตอนที่แล้ว เราได้สร้าง 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 เสมอ

เช่น

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 ให้ถูกต้อง

http://getbootstrap.com/getting-started/#download

http://code.jquery.com/jquery-1.11.3.min.js

จะเห็นว่าการกำหนดใหม่ข้างต้น เป็นการกำหนด 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 ซึ่งมีความสำคัญต้นๆ ไว้เพียงเท่านี้

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ