บทที่ 6 สร้างหน้าอื่นๆและไฟล์ .htaccess
สร้างหน้าอื่นๆและไฟล์ .htaccess
หน้าแรกก็สร้างเสร็จแล้ว หน้าสินค้าก็สร้างเสร็จแล้ว อ้าว แต่ยังไม่ได้ลิงค์อะไรกันเลยครับ สำหรับบทนี้คงเริ่มกันด้วย แก้ไขหน้า index.php และ product.php ให้ดูเชื่อมกันก่อนครับ เวลาที่อยู่หน้าแรกจะได้คลิกมาหากันได้ และพร้อมกับสร้างไฟล์ .htaccess ไปพร้อมกันเลย
.htaccess คืออะไรมีไว้ทำอะไรครับ จริงแล้วตัว .htaccess เป็นโปรแกรมเสริมครับ ที่อยู่ใน Apache Web Sever ซึ่งเป็นตัวช่วยให้เรากำหนดเส้นทางของ URL เว็บไซต์ได้ครับ และยังเป็นตัวกำหนดการเข้าถึงข้อมูลอื่นๆอีกด้วยครับ อย่างเช่น Folder ที่ chmod เป็น 777 ไว้ ที่ทุกคนสามารถเข้าได้ เราก็ไปเขียนกำหนดค่าต่างๆ เพื่อไม่ให้เข้าไปแก้ไขได้ แล้วอัพขึ้นไป Folder ครับ
แต่ในสคริบเรา .htaccess จะเป็นตัวกำหนด URL ให้ชี้ไปตามที่เราต้องการ และเพื่อให้ Friendly Search Engine ด้วยครับ
สคริบเราก็จะกำหนดลิงค์หน้าสินค้า หรือว่า product.php?id=2 ให้อยู่ในรูปแบบอื่นครับ แล้วแต่คนกำหนด ผมจะกำหนดให้อยู่ในรูปแบบของ id-title.html ซึ่งหลายๆคนจะเจอค่อนข้างบ่อยครับ ถ้าใครชอบเอา Title สินค้าไปตรวจเช็คใน google ก็จะเจอเเนวนี้เยอะอยู่ครับ
เริ่มเขียน .htaccess กันครับ
สร้างไฟล์เปล่าๆจาก sublime หรือว่า notepad แล้วบันทุกไฟล์ชื่อ .htaccess ระวังเรื่องไฟล์ด้วยนะครับ เผื่อในนามสกุลไฟล์โผล่เพิ่มมาแบบงงๆ แล้วมันจะรันไม่ได้ครับ บางคนอาจจะโผล่มาเป็น .htaccess.txt บางคนอาจจะ .htaccess.php รันไม่ได้นะครับ ระวังกันด้วยเช็คไฟล์นิดนึงครับ
แต่ในสคริบเรา .htaccess จะเป็นตัวกำหนด URL ให้ชี้ไปตามที่เราต้องการ และเพื่อให้ Friendly Search Engine ด้วยครับ
สคริบเราก็จะกำหนดลิงค์หน้าสินค้า หรือว่า product.php?id=2 ให้อยู่ในรูปแบบอื่นครับ แล้วแต่คนกำหนด ผมจะกำหนดให้อยู่ในรูปแบบของ id-title.html ซึ่งหลายๆคนจะเจอค่อนข้างบ่อยครับ ถ้าใครชอบเอา Title สินค้าไปตรวจเช็คใน google ก็จะเจอเเนวนี้เยอะอยู่ครับ
เริ่มเขียน .htaccess กันครับ
สร้างไฟล์เปล่าๆจาก sublime หรือว่า notepad แล้วบันทุกไฟล์ชื่อ .htaccess ระวังเรื่องไฟล์ด้วยนะครับ เผื่อในนามสกุลไฟล์โผล่เพิ่มมาแบบงงๆ แล้วมันจะรันไม่ได้ครับ บางคนอาจจะโผล่มาเป็น .htaccess.txt บางคนอาจจะ .htaccess.php รันไม่ได้นะครับ ระวังกันด้วยเช็คไฟล์นิดนึงครับ
RewriteEngine On
RewriteRule ^([^/]*)-([^/]*)\.html$ product.php?id=$1 [L]
ในไฟล์ผมจะใส่เท่านี้ครับ เวลาเรียกดูสินค้าผมจะเรียก id-title.html เลยครับ และตัวไฟล์ product.php จะเอาค่า id ไปดึงข้อมูลมาแสดงเองครับ
อธิบายพอสังเขป
ในบรรทัดที่ 2 จะเป็นการทำงานโดยการ Rewrite URL ครับเรียกกันง่ายๆนะครับ จากไฟล์ที่เราเข้าดูสินค้าแบบปกติที่ต้องเข้า product.php?id=id (product.php?id=3) เราก็จะเข้าโดยการ 3-my-title-product.html แทนครับ ซึ่งค่าที่สำคัญคือค่าตัวเลขตัวแรก ($id) ครับ
ในไฟล์ .htaccess เจ้า ([^/]*) ตัวแรก จะเรียกเก็บค่า $1 ครับ ส่วน ([^/]*) ตัวที่ 2 จะเรียกเก็บค่า $2 ครับ แต่สคริบเราอยากได้แค่ค่า id มันเท่านั้นครับ เก็บมาแค่ตัวเดียวก็พอครับ ถ้าอธิบายไม่ชัดลองดูภาพ
ในวงกลมสีเขียวเป็นค่าเดียวกันทั้งหมดนะครับ
เอาละครับตอนนี้ถ้านึกตามผม คือ ตอนนี้สคริบเราค่อนข้าง Friendly Search Engine มาระดับนึงละครับ (โม้มาก)
ปรับ app.php
ปรับ app.php เพราะว่าอะไร เนื่องจากเดิมลิงค์ที่ผมเขียนใส่ใน app.php ก่อนหน้านี้ เป็นลิงค์ออกที่ไม่ใช่อย่างนี้เลยครับ ก็เลยต้องปรับให้ตรงกันนิดนึงครับ เดิมลิงค์ไปหน้าสินค้า product-'.$id.' เป็นอย่างนี้ครับ เราจะปรับให้มาเป็น $id-title.html ครับ
แต่ลองสังเกต Title สินค้าแต่ละชิ้นของเราจะครับ มันจะมีอักษรพิเศษ ช่องว่างมาอีก ถ้าไม่ปรับก่อนจะทำให้ลิงค์เรา จาก Bellroy 'Hide And Seek' Wallet ถ้าแสดงในรูปแบบ URL จะเป็น Bellroy%20'Hide%20And%20Seek'%20Wallet เลยแหละครับ ดูเป็น SPAM เกินไป ต้องเขียนแปลงพวกนี้ให้เป็น "-" หรือว่าตัวอักษรอื่นก่อนก็ได้ครับ เขียน function เพิ่มเอาครับจะได้เรียกใช้งานง่ายๆ ซึ่งผมจะเขียนดังต่อไปนี้ครับ
function cleantitle($title) เขียนมาไว้ที่ app.php ครับ
function cleantitle($title) เขียนมาไว้ที่ app.php ครับ
function cleantitle($title)
{
$string = str_replace(' ', '-', $title);
$string = preg_replace('/[^A-Za-z0-9\-]/', '', $string);
$string = trim($string, '-');
return $string;
}
หลังจากนั้น แก้ function boxproduct($id) ครับ
ของเดิมที่ลิงค์ไม่ได้จูนกันนะครับ (product-'.$id.' ) ปรับใหม่เลย เปลี่ยนมาให้เป็นรูปแบบ '.$id.'-'.cleantitle($title).'.html โดยเรียก function cleantitle($title) มาใช้งานครับ และครอบ Title ไว้ หรือว่าครอบชื่อสินค้าไว้ครับ
function boxproduct($id) ที่ปรับแก้แล้ว
function boxproduct($id){
$file = file(setting('file'));
$data = explode(',', $file[$id]);
//First Data
$title = trim($data['0'], '"');
$link = trim($data['1'], '"');
$img = trim($data['2'], '"');
//Design your Box Product
$box = '
<div class="box">
<div class="inbox">
<p class="img">
<img src="'.$img.'">
</p>
<p class="title"><a href="'.$id.'-'.cleantitle($title).'.html">'.$title.'</a></p>
</div>
</div>';
return $box;
}
ผมปรับแค่บรรทัดเดียวครับ ในบรรทัดที่ลิงค์ข้อมูลไปสินค้านั้นๆครับ จะทำให้ได้ดังภาพครับ เมื่อเอาเมาส์ชี้จะเห็นว่าลิงค์มีการปรับปรุงและเปลี่ยนจากเดิมหมดแล้วครับ จะแสดงในรูปแบบใหม่ครับ
![]() |
ตัวอย่างเมื่อเอาเมาส์ชี้ จะแสดงลิงค์ดังภาพ |
เพิ่มหน้าอื่นและเพิ่ม .htaccess
ตัวนี้ค่อนข้างง่ายครับถ้าหากเข้าใจด้านบนมาทั้งหมดนะครับ อย่างเช่มผมจะเพิ่มหน้า Contact มาที่หน้าเว็บเรา ผมก็สร้างไฟล์ขึ้นมา 1 ไฟล์นะครับ โดยตั้งชื่อว่า page-contact.php แล้วใส่ความสวยงามใส่ข้อความเข้าไปข้างในทั้งหมดครับ พูดง่ายๆสร้างหน้าตามา 1 อันครับ
หลังจากนั้นจะลิงค์เข้าหน้า contact ได้อย่างไร โดยไม่ต้องเรียกไฟล์ page-contact.php ละ ผมก็ต้องเข้าไปแก้และเพิ่มที่ .htaccess ให้ชี้ไฟล์ page-contact.php เท่านั้นครับ
จะต้องเพิ่มดังนี้ครับ
จะต้องเพิ่มดังนี้ครับ
RewriteRule ^contact$ page-contact.php [L]
เพิ่มต่อท้ายบรรทัดที่ชี้ไปหน้าสินค้าครับ เท่านั้นแหละครับเป็นอันเสร็จ
อ้อ ใช้ $ คั่นนะ ลองสังเกตที่ code ครับ ทั้งตัวชี้ไปหน้าสินค้าและเจ้าตัวนี้จะมี $ คั่นระหว่างข้อมูลอยู่
หากต้องการเพิ่มหน้าอื่นๆ เราใส่เพิ่มได้ครับ เพิ่มเหมือน contact เลยครับ
ข้อควรระวัง อย่าพยายามตั้งชื่อไฟล์และชื่อหน้าที่เราส่งไปให้ตรงกันครับ เดี๋ยวเรียกไม่ขึ้น
ตอนนี้เราได้ทั้งหน้าสินค้าและหน้าอื่นๆแล้วละครับ เป็นรูปเป็นร่างมากกว่าเดิมมากครับ ปิดท้ายด้วยการเอาไฟล์ที่เขียนๆและปรับปรุงมาใส่ไว้นะครับ หากใครที่มีข้อสงสัยและข้อเสนอแนะสามารถโพสไว้ได้ครับ ผมน้อมรับทุกอย่างครับ
ไฟล์ที่แก้ 2 ไฟล์ app.php และ .htaccess
app.php<?php
//Setting
function setting($value)
{
$setting = array(
'sitename' => 'TempKaew',
'sitedes' => 'Shopping At TempKaew',
'keyword' => 'shop, myshop, top shop',
'author' => 'Kaew',
'file' => 'data.csv'
);
return $setting[$value];
}
//Get IMg + Title From CSV File
function boxproduct($id){
$file = file(setting('file'));
$data = explode(',', $file[$id]);
//First Data
$title = trim($data['0'], '"');
$link = trim($data['1'], '"');
$img = trim($data['2'], '"');
//Design your Box Product
$box = '
<div class="box">
<div class="inbox">
<p class="img">
<img src="'.$img.'">
</p>
<p class="title"><a href="'.$id.'-'.cleantitle($title).'.html">'.$title.'</a></p>
</div>
</div>';
return $box;
}
//Check Max Line File data.csv
function maxline()
{
$maxline = count(file(setting('file')))-1;
return $maxline;
}
//Related Product
function relatedproduct($loop)
{
for ($i=0; $i < $loop; $i++) {
$id = randid();
echo boxproduct($id);
}
}
//Loop Product
function loopproduct($min,$max)
{
for ($i=$min; $i < $max; $i++) {
echo boxproduct($i);
}
}
//Random ID Product
function randid()
{
$id = rand(0,maxline());
return $id;
}
//Landing Page in product.php
function landingpage($id)
{
//Random Landing Page
$mylp = glob("lp/*.txt");
$randlp = rand(0,count($mylp)-1);
$filelp = $mylp[$randlp];
$getlp = file_get_contents($filelp);
//Product Data from data.csv
$file = file(setting('file'));
$data = explode(',', $file[$id]);
$title = trim($data['0'], '"');
$link = trim($data['1'], '"');
$img = trim($data['2'], '"');
$lp = str_replace("{get title}",$title,$getlp);
$lp = str_replace("{get link}",$link,$lp);
$lp = str_replace("{get img}",$img,$lp);
return $lp;
}
function cleantitle($title)
{
$string = str_replace(' ', '-', $title);
$string = preg_replace('/[^A-Za-z0-9\-]/', '', $string);
$string = trim($string, '-');
return $string;
}
?>
.htaccess
RewriteEngine On
RewriteRule ^([^/]*)-([^/]*)\.html$ product.php?id=$1 [L]
RewriteRule ^contact$ page-contact.php [L]