PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

27 August 2015 By


จากเนื้อหาตอนที่แล้ว เราได้สร้าง project เว็บไซต์อย่างง่าย
 
เขียน controller class และ view สร้างเว็บไซต์อย่างง่าย 
http://www.ninenik.com/content.php?arti_id=662 via @ninenik
 
รวมถึงการตั้งค่าต่างๆ เบื้องต้นสำหรับการใช้งาน Codeigniter โดยเฉพาะใน
ส่วนของ URL อย่างเช่นการกำหนดตัวแปร 
 
$config['base_url'] = 'http://localhost/learnci/';  
 
ติดตั้ง และ ใช้งาน CodeIgniter สำหรับพัฒนา website หรือ web app 
http://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 ซึ่งมีความสำคัญต้นๆ ไว้เพียงเท่านี้

 

Tags:: url helper codeigniter

เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน และลงชื่อติดตาม


สมัครสมาชิกได้ที่        ล็อกอินได้ที่   





URL สำหรับอ้างอิง