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

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
codeigniter 3 url helper codeigniter

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

ดูแล้ว 18,975 ครั้ง


จากเนื้อหาตอนที่แล้ว เราได้สร้าง project เว็บไซต์อย่างง่าย
 
เขียน controller class และ view สร้างเว็บไซต์อย่างง่าย 
 
รวมถึงการตั้งค่าต่างๆ เบื้องต้นสำหรับการใช้งาน Codeigniter โดยเฉพาะใน
ส่วนของ URL อย่างเช่นการกำหนดตัวแปร 
 
1
$config['base_url'] = 'http://localhost/learnci/';
 
ติดตั้ง และ ใช้งาน CodeIgniter สำหรับพัฒนา website หรือ web app 
 
 
พบว่าในการเรียกใช้งานเว็บไซต์ project จะมีการเรียกไฟล์ index.php เสมอ
เช่น 


ซึ่งโดยปกติการใช้งานจริง เราต้องการให้ URL ของเว็บไซต์ของเรา รองรับ search-engine
และอ่านออกเข้าใจง่าย เช่น
 

การตัด 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) 
และกำหนดค่าในไฟล์ดังนี้

1
2
3
4
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

จากนั้นให้ไปที่ไฟล์ config.php ในโฟลเดอร์ apps > config  และแก้ไขโค้ด
ในส่วนการกำหนด ndex_page

1
$config['index_page'] = 'index.php';
 
ให้เราเปลี่ยนเป็นค่าว่าง จะได้เป็น
 
1
$config['index_page'] = '';

เท่านี้เป็นอันเสร็จ ในขั้นตอนการตัด index.php เราสามารถเรียกใช้งาน
 
1
2
3
4
5
6
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  

1
$autoload['helper'] = array('url');
 
เท่านี้เราก็สามารถเรียกใช้งานฟังก์ชั่นเกี่ยวกับ URL ที่ใช้บ่อย เช่น site_url() หรือ base_url() ได้แล้ว
 
เรามาดูการใช้งานอ้างอิงจากไฟล์ header.php ที่อยู่ในโฟลเดอร์ templates จากเนื้อหาตอนที่แล้ว

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?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 ส่วน 
ส่วนแรก 

1
2
3
<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 เบื้องต้น ของแต่ละส่วนใหม่ได้ดังนี้

1
2
3
<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 เป็น 
ไฟล์ jquery ในโฟลเดอร์ js จะมี path ที่ผิดเพี้ยนไปจากความเป็นจริง
ซึ่งจริงแล้ว path ที่ถูกต้องคือ

ดังนั้นเป็นเหตุผลและความสำคัญที่เราจะใช้งาน URL Helper โดยเราจะเรียกใช้ฟังก์ชั่น
base_ur() ซึ่งจะได้ค่าที่กำหนดในไฟล์ config.php ในโฟลเดอร์ apps > config
 
1
$config['base_url'] = 'http://localhost/learnci/';
 
เราจึงกำหนดใหม่ดังนี้

1
2
3
<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
แล้วเราสามารถกำหนดใหม่ได้ดังนี้

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <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
 
1
$config['base_url'] = 'http://localhost/learnci/';
 
เมื่อมีการเรียกใช้งานฟังก์ชั่น 
 
1
<?=base_url()?>
 
จะได้ค่า เดียวกับ $config['base_url']  คือ 
 
 
และถ้าเรากำหนดค่า string เข้าไป จะเป็นการต่อ URL เช่น
 
1
<?=base_url('home')?>
 
ก็จะได้ เป้น 
 
 
หากต้องการกำหนด protocal เช่น https ftp เป้นต้น (หากไม่กำหนดก็จะเป็น http) 
 
1
<?=base_url('home','https')?>
 
ค่าจะได้ เป้น 
 
 
นอกจากนั้น เรายังสามารถกำหนดเข้าไปใน path โฟลเดอร์ย่อยเข้าไปได้ เช่น การใช้งาน
กับไฟล์รูปภาพ image css หรือ javascipt เข่น
 
1
<?=base_url('images/logo.png')?>
 
ก็จะหมายถึง path เต็มดังนี้
 
 
ดังนั้นเมื่อเราแก้ไขไฟล์ header.php ตามรูปแบบการใช้งานใหม่ จะได้ดังนี้

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ







Tags:: codeigniter 3 url helper codeigniter







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











สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ