เนื้อหาตอนต่อไปนี้ จะขอถือเป็นตอนสุดท้ายของโปรเจ็คการเรียนรู้ และใช้งาน codeigniter
อย่างไรก็ตาม เนื้อหาเกี่ยวกับ codeigniter ก็จะยังมีเพิ่มเติม รวมถึงบางส่วนของ
library หรือส่วนประกอบอื่นๆ ที่ยังไม่ได้กล่าวถึง โดยจะนำมาอธิบาย หรือแนะนำ
แยกออกจากโปรเจ็คที่เราศึกษามาแต่ต้น
การจบส่วนของโปรเจ็คนี้ หากใครกดติดตามบทความ ตั้งแต่ต้น จนถึงตอนนี้ จะสามารถดาวน์
โหลดโปรเจ็ค ที่ใช้งาน codeigniter 3.0.1 ไปต่อยอดหรือปรับแต่งใช้งานเพิ่มเติมได้
ส่วนของเนื้อหาที่เราเหลืออยู่ก็คือ หน้า home , aboutus และ service
โดยหน้า home เราจะปล่อยเป็นหน้าว่าง นั่นก็คือ เราจะใส่ข้อมูลอะไรก็ได้ ประยุกต์เพิ่มเติมเอา
ส่วนหน้า aboutus อันนี้จะเป็นแค่การดึงข้อมูลมาแสดง อ้างอิงจากบทความ
การใช้งาน CKEditor CDN ร่วมกับ codeigniter อย่างง่าย
https://www.ninenik.com/content.php?arti_id=676 via @ninenik
และหน้า service ก็จะเป็นการดึงข้อมูลมาแสดงเช่นกัน แต่หน้านี้จะพิเศษขึ้นมาหน่อย คือ
เราจะมาดูในเรื่องของการกำหนด url ให้รองรับ seo เช่น url เป็นภาษาไทย
การแสดงข้อมูลหน้า Aboutus
ให้เปิดไฟล์ aboutus.php ในโฟลเดอร์ apps > views > pages
แล้วกำหนดโค้ดประมาณนี้
<div class="container">
<div class="container-fluid">
<?php
$query = $this->db->get_where("tbl_aboutus",array("aboutus_id"=>1));
$row = $query->row_array(); //คิวรี่ข้อมูลมาแสดงแค่รายการเดียว
if(isset($row)) // ถ้ามีข้อมูล
{
?>
<h1><?=$row['aboutus_title']?></h1>
<p>
<?=$row['aboutus_detail']?>
</p>
<?php } ?>
</div>
</div>
การแสดงข้อมูลหน้า Service และการกำหนด URL ให้รองรับ SEO
สำหรับรายละเอียดการดึงข้อมูลในหน้า Service มาแสดงและแบ่งหน้า นั้นจะคล้ายๆ กับในส่วน
ของตอนที่เกี่ยวกับการจัดการ Service ของ admin ดึงนั้นจะไม่ลงรายละเอียดอธิบายซ้ำ
ก่อนอื่นเรามาดูรูปแบบ URL ของหน้า service ของเว็บไซต์โปรเจ็คของเราก่อน
รูปแบบ URL จะเป็น
http://localhost/learnci/service // หน้าปกติ http://localhost/learnci/service/page/2 // มีการแบ่งหน้า http://localhost/learnci/service/view/1 // แสดงข้อมูล อ้างอิง id ข้อมูลเท่ากับ 1 http://localhost/learnci/service/view/หัวข้อของบริการ_ที่_1 // แสดงแบบรองรับ SEO
เริ่มต้นให้เราสร้างไฟล์ชื่อ Service_model.php ไว้ในโฟลเดอร์ apps > models
<?php
class Service_model extends CI_Model {
public function __construct()
{
parent::__construct();
$this->load->library('user_agent');
$this->load->library('pagination');
}
public function getlist($id,$query_str=null){
$config['base_url'] = base_url('service/page/'); // url เพจข้อมูลของเรา
$config['per_page'] = 5; // จำนวนแสดงต่อหน้า
$config['num_links'] = 2; // จำนวนเลขซ้ายขวา เช่น 1 2 3 4 5 คือหน้า 2 หลัง 2
$config['use_page_numbers'] = TRUE; // แสดงเลขหน้าตามจริง เช่นหน้า 1 ก็เป็นเลข 1
// ส่วนของการกำหนดหน้าตาของ การแบ่งหน้า เนื่องจากเราใช้ bootstrap css จึงสามารถนำมาใช้ได้เลย
$config['full_tag_open'] = '<nav><ul class="pagination">'; // เปิดแท็กทั้งหมด
$config['full_tag_close'] = '</ul><nav>'; // ปิดแท็กทั้งหมดด้วย
$config['first_link'] = 'First'; // ข้อความแสดงหน้าแรก
$config['first_tag_open'] = '<li>'; // แท็กเปิดข้อความหน้าแรก
$config['first_tag_close'] = '</li>'; // แท็กปิดข้อความหน้าแรก
$config['first_url'] = ''; //url หน้าแรก
$config['last_link'] = 'Last'; // ข้อความสแดงหน้าสุดท้าย
$config['last_tag_open'] = '<li>'; // แท็กเปิดข้อความหน้าสุดท้าย
$config['last_tag_close'] = '</li>'; // แท็กปิดข้อความหน้าสุดท้าย
$config['next_link'] = '>'; // ข้อความหน้าก่อนหน้า ในที่นี้ใช้สัญลักษณ์ <
$config['next_tag_open'] = '<li>'; // แท็กเปิดข้อความแสดงหน้าก่อนหน้า
$config['next_tag_close'] = '</li>'; // แท็กปิดข้อความแสดงหน้าก่อนหน้า
$config['prev_link'] = '<'; // ข้อความหน้าถัดไป ในที่นี้ใช้สัญลักษณ์ >
$config['prev_tag_open'] = '<li>'; // แท็กเปิดข้อความหน้าถัดไป
$config['prev_tag_close'] = '</li>'; // แท็กปิดข้อความหน้าถัดไป
$config['cur_tag_open'] = '<li class="active"><a href="javascript:void();">'; // แท็กหน้าเลขเพจปัจจุบัน
$config['cur_tag_close'] = '</a></li>'; // แท้กปิดหน้าเพจปัจจุบัน
$config['num_tag_open'] = '<li>'; // แท็กเปิดหน้าเพจเลขต่างๆ
$config['num_tag_close'] = '</li>'; // แท็ปิดหน้าเพจเลขต่างๆ
$config['reuse_query_string'] = TRUE;
$config['total_rows'] = $this->db->count_all_results('tbl_service',FALSE);
$this->pagination->initialize($config); // ตั้งค่าการกำหนด การแบ่งหน้า
$begin=(isset($id) && $id>1)?($id-1)*$config['per_page']:0;
$this->db->limit($config['per_page'], $begin);
$query = $this->db->get();
return $query->result_array();
}
public function view($id){ // มี $id เป็น parameter ไว้กำหนดเงื่อนไข
if(intval($id)>0){
$query = $this->db->get_where('tbl_service',array('service_id'=>$id));
}else{
$arr_where=array(
'service_title'=>preg_replace('/_/',' ',$id)
);
$query = $this->db->get_where('tbl_service',$arr_where);
}
return $query->row_array(); // ส่งข้อมูลผลัพธ์กลับเป็น array แถวข้อมูล
}
}
จากโค้ดด้านบน เราจะขอพูดเฉพาะในส่วนของ ฟังก์ชั่น view($id)
จะเห็นว่า เราจะมีการกำหนดเงื่อนไข โดยการตรวจสอบค่าจากตัวแปร $id
if(intval($id)>0){ // ถ้าแปลค่าตัวแปร $id แล้วมีค่ามาก 0 แสดง่ว่าข้อมูลที่ส่งมา
เป็นลักษณะของตัวเลข เช่นเราเรียก URL
http://localhost/learnci/service/view/1
ถ้าเรากำหนด URL ในลักษณะข้างต้น เลข 1 ก็คือค่าในฟิลด์ service_id ของตาราง tbl_service
การคิวรี่ข้อมูลจึงเป็นการเทียบกับค่าของ service_id
$query = $this->db->get_where('tbl_service',array('service_id'=>$id));
หากเป็นกรณีอื่น เช่น เมื่อแปลงค่าเป็นตัวเลขแล้วมีค่าน้อยกว่าหรือท่ากับ 0
แสดงว่าค่าของตัวเปร $id เป็นในลักษณะของข้อความตัวอักษร โดยรูปแบบนี้
เราจะใช้ประโยชน์สำหรับ SEO สำหรับใช้กับ URL ตัวอย่าง
http://localhost/learnci/service/view/หัวข้อของบริการ_ที่_1
จากตัวอย่าง ค่า $id ก็คือ หัวข้อของบริการ_ที่_1 ซึ่งได้มาจากข้อความ
ของฟิลด์ service_tile มีค่าเป็น "หัวข้อของบริการ ที่ 1"
เราจะเห็นว่า หัวข้อจริงๆ แล้วจะมีช่องว่าง แต่สำหรับกำหนดให้ URL รองรับ SEO
จึงได้ทำการแปลงจากช่องว่างให้เป็นเครื่องหมาย _ (underscore) แทนด้วยฟังก์ชั่น
$service_title_url=preg_replace('/[[:space:]]+/', '_', trim($row['service_title']));
// อยู่ในไฟล์ service.php
ดังนั้นเมื่อค่าที่ส่งมามีเครื่องหมาย _ เวลาเอาไปใช้ จึงต้องแปลงกลับ
ด้วยคำสั่ง
preg_replace('/_/',' ',$id)
การเปรียบเทียบค่า WHERE ก็จะได้เป็น service_title='หัวข้อของบริการ ที่ 1'
$arr_where=array(
'service_title'=>preg_replace('/_/',' ',$id)
);
$query = $this->db->get_where('tbl_service',$arr_where);
การกำหนดในลักษณะนี้ จะทำให้สามารถรองรับการใช้งานทั้งแบบค่า id และค่าที่เป็นข้อความ
เพื่อรองรับ SEO
ต่อไปเรามาดูที่ไฟล์ service.php ในโฟลเดอร์ apps > views > pages
โค้ดสำเร็จจะได้เป็นดังนี้
<div class="container">
<?php if($action==null || $action=='page'){?>
<h1><?=$title_h1?></h1>
<?php
$query_str = $this->input->get();
$keyword = $this->input->get('keyword');
$result = $this->service_model->getlist($id,$query_str);
?>
<?php
$i_num=0;
if(!isset($id)){
$id=1;
}
if(count($result)>0){
foreach($result as $row){
$i_num++;
$service_title_url=preg_replace('/[[:space:]]+/', '_', trim($row['service_title']));
?>
<div class="container-fluid">
<img src="<?=base_url('upload/'.$row['service_img'])?>"
class="img-responsive" style="width:150px;" alt="">
<br>
<!-- <a href="<?=base_url('service/view/'.$row['service_id'])?>"><?=$row['service_title']?></a>-->
<a href="<?=base_url('service/view/'.$service_title_url)?>"><?=$row['service_title']?></a>
<p>
<?=mb_substr(strip_tags($row['service_detail']),0,30)?>
<!-- <a href="<?=base_url('service/view/'.$row['service_id'])?>">อ่านเพิ่ม..</a>-->
<a href="<?=base_url('service/view/'.$service_title_url)?>">อ่านเพิ่ม..</a>
</p>
<br>
</div>
<?php } ?>
<?php } ?>
<?php
echo $this->pagination->create_links();
?>
<?php } ?>
<?php if($action=='view'){?>
<?php
$previous_url = $this->agent->referrer();
// เรียกใช้ฟังก์ชั่น view() ดึงข้อมูลมาแสดงก่อนแก้ไข
$row = $this->service_model->view($id);
?>
<div class="container-fluid">
<h1><?=$row['service_title']?></h1>
<p>
<img src="<?=base_url('upload/'.$row['service_img'])?>" class="img-responsive" alt="">
<br><br>
<?=$row['service_detail']?>
</p>
<br>
<a href="<?=$previous_url?>" class="btn btn-warning btn-sm">< Back</a>
<br><br>
</div>
<?php } ?>
</div>
ดูในส่วนแรกกัน คือส่วนของ $action เท่ากับ null หรือ $action เท่ากับ page
ซึ่งก็คือหน้าที่เราเปิดเข้ามา และก็หน้าที่การแบ่งหน้า หรือเลือกหน้าของข้อมูล
<?php if($action==null || $action=='page'){?>
<h1><?=$title_h1?></h1>
<?php
$query_str = $this->input->get();
$keyword = $this->input->get('keyword');
$result = $this->service_model->getlist($id,$query_str);
?>
<?php
$i_num=0;
if(!isset($id)){
$id=1;
}
if(count($result)>0){
foreach($result as $row){
$i_num++;
// แปลงหัวข้อให้รองรับ URL สำหรับ SEO คือเปลี่ยนช่องว่างเป็น _
$service_title_url=preg_replace('/[[:space:]]+/', '_', trim($row['service_title']));
?>
<div class="container-fluid">
<img src="<?=base_url('upload/'.$row['service_img'])?>"
class="img-responsive" style="width:150px;" alt="">
<br>
<!-- <a href="<?=base_url('service/view/'.$row['service_id'])?>"><?=$row['service_title']?></a>-->
<a href="<?=base_url('service/view/'.$service_title_url)?>"><?=$row['service_title']?></a>
<p>
<?=mb_substr(strip_tags($row['service_detail']),0,30)?>
<!-- <a href="<?=base_url('service/view/'.$row['service_id'])?>">อ่านเพิ่ม..</a>-->
<a href="<?=base_url('service/view/'.$service_title_url)?>">อ่านเพิ่ม..</a>
</p>
<br>
</div>
<?php } ?>
<?php } ?>
<?php
/// ส่วนของการแบ่งหน้า
echo $this->pagination->create_links();
?>
<?php } ?>
โค้ดในส่วนนี้ไม่มีอะไร คล้ายเนื้อหาที่เราเคยศึกษามาแล้ว แต่ให้สังเกตตรงฟังก์ชั่น
// แปลงหัวข้อให้รองรับ URL สำหรับ SEO คือเปลี่ยนช่องว่างเป็น _
$service_title_url=preg_replace('/[[:space:]]+/', '_', trim($row['service_title']));
ส่วนนี้ จะเป็นส่วนที่เราจะแปลงหัวข้อมูลให้รอบรับ URL สำหรับ SEO คือเปลี่ยนช่องว่างเป็น _
เพื่อส่งเข้าไปในหน้าลิ้งค์แสดงข้อมูล คือจากหัวข้อ "หัวข้อของบริการ ที่ 1" ก็แปลงเป็น
"หัวข้อของบริการ_ที่_1" ส่งไปกับ URL ให้รองรับ SEO
ในโค้ดเรายังมีลิ้งค์ที่เรากำหนดการส่งแบบค่า service_id เข้าไป แต่เราไม่ได้ใช้ คอมเม้นท์ปิดไว้
ให้ดูเป็นแนวทาง เลือกว่าจะใช้แบบไหน ซึ่งฟังก์ชั่นที่เราเขียนไว้รองรับทั้งสองแบบอยู่แล้ว
ต่อมาเรามาดูในส่วนของการแสดงข้อมูล เมื่อคลิกลิ้งค์หัวข้อของบริการ
<?php if($action=='view'){?>
<?php
$previous_url = $this->agent->referrer();
// เรียกใช้ฟังก์ชั่น view() ดึงข้อมูลมาแสดงก่อนแก้ไข
$row = $this->service_model->view($id);
?>
<div class="container-fluid">
<h1><?=$row['service_title']?></h1>
<p>
<img src="<?=base_url('upload/'.$row['service_img'])?>" class="img-responsive" alt="">
<br><br>
<?=$row['service_detail']?>
</p>
<br>
<a href="<?=$previous_url?>" class="btn btn-warning btn-sm">< Back</a>
<br><br>
</div>
<?php } ?>
ในหน้านี้จะเห็นว่าเรามีการส่ง $id ในที่นี้ก็คือหัวข้อที่จัดรูปแบบให้รองรับ SEO แล้ว
เข้าไปทำการคิวรี่ข้อมูลผ่านฟังก์ชั่น view() ใน model ถ้าหัวข้อที่ส่งไปกับ URL
ตรงกับหัวข้อในฐานข้อมูลฟิลด์ service_title ก็จะทำการดึงข้อมูลรายละเอียด
และข้อมูลอื่นๆ ของ service มาแสดง
สำหรับโปรเจ็ค การเรียนรู้การใช้งาน codeigniter ของเราก็ขอจบเพียงเท่านี้
ใครที่กดติดตาม เนื้อหาหมวด codeigniter ตั้งแต่ต้นจนถึงตอนนี้ ก็รอโหลด
ไฟล์โปรเจ็คจากเมนูสมาชิกด้านขวา เร็วๆ นี้ ได้เลย
ส่วนใครที่อยากได้โค้ดส่วนนี้ ก็ไล่กดติดตามเนื้อหาให้ครบตามเงื่อนไข ก็จะสามารถ
ดาวน์โหลดได้
ปล. เนื้อหาเกี่ยวกับ codeigniter จะยังมีเพิ่มเติมตามความเหมาะสม
