บทที่ 5 สร้าง Landing Page product.php และ css
บทที่ 5 สร้าง Landing Page product.php และ css
เอาละครับ นี่ก็บทที่ 5 แล้ว บทนี้ที่ออกมาช้าหน่อยเนื่องจากที่ว่าผมงานเยอะครับ งานบริษัทนี่แหละครับ ขอแอบบ่นนิดนึง
สำหรับบทนี้ผมจะพาเขียนการดึงสินค้ามาแสดงนะครับ ซึ่งจะดึงมาโดยให้มีการออกแบบ Landing Page หลายๆไฟล์ครับ ให้มีความต่างกันเลย ไหนๆก็ไหนๆละครับ ให้ทำแบบธรรมดาได้ไงละ
เริ่มจากต้องสร้างไฟล์ product.php ขึ้นมาก่อน 1 ไฟล์นะครับ
ไฟล์ product.php เป็นไฟล์แสดงสินค้า ที่ใช้ค่า id ในการดึงสินค้ามาแสดงข้อมูล และใช้ค่า id ไปดึงข้อมูลจาก data.csv ซึ่งค่า id จะเป็นค่าลำดับบรรทัดนั่นเองครับ
เริ่มจาก Include File app.php มาก่อนนะครับ เพราะว่าเราต้องเรียกใช้ function() มาใช้งานครับ
เริ่มจากต้องสร้างไฟล์ product.php ขึ้นมาก่อน 1 ไฟล์นะครับ
เริ่มจาก Include File app.php มาก่อนนะครับ เพราะว่าเราต้องเรียกใช้ function() มาใช้งานครับ
<?php
//Include Function File
include 'app.php';
?>
หลังจากนั้น ก็วางโครงสร้างเว็บ เหมือน index.php เลยครับ เพราะว่าเราไม่ต้องไปเขียน CSS เพิ่มมาอีกครับ
<?php
//Include Function File
include 'app.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><?php echo setting('sitename'); ?></title>
<meta name="description" content="<?php echo setting('sitedes'); ?>">
<meta name="keywords" content="<?php echo setting('keyword'); ?>">
<meta name="author" content="<?php echo setting('author'); ?>">
<link rel="stylesheet" href="styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1><?php echo setting('sitename'); ?></h1>
<h2><?php echo setting('sitedes'); ?></h2>
<nav>
<ul>
<li><a href=".">HOME</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="primary_content">
<section id="left_column">
<h3>Random Product</h3>
</section>
<section id="right_column">
<article>
<?php echo landingpage($id); ?>
</article>
<?php relatedproduct(6); ?>
</section>
</div>
<div class="clear"></div>
<footer>
<p><?php echo setting('sitename'); ?></p>
</footer>
<div class="clear"></div>
</div>
</body>
</html>
เหมือนไฟล์ index.php เปะครับ และผมจะใช้ relatedproduct(6); เป็น Related Product เลย แต่ที่ไฟล์ product.php นี้จะเพิ่มมาคร่าวๆ คือ ข้อมูลสินค้าที่ลิงค์มาครับ หรือพูดง่ายๆคือ หน้าที่โดนเรียกค่า id มานั่นเองครับ
รับค่า id สินค้า
ไฟล์ product.php จะรับค่า id ด้วย $_GET[] นะครับ $_GET นี่สังเกตง่ายๆ คือค่าที่แสดงใน Link นั่นแหละครับ ประมานว่า tempkaew/product.php?id=10 เวลารับค่าก็จะประมาน $_GET['id'] ซึ่งจะได้ค่า 10 มาใช้งานแล้วครับเริ่มเขียนการรับค่า id กันดีกว่าครับ
//Check ID
if (isset($_GET['id'])) {
$id = $_GET['id'];
$list = explode("-",$id);
$id = $list[0];
if (is_numeric($id) AND $id>=0 AND $id<=maxline()) {
$id = $id;
}else{
$id = randid();
}
}else {
$id = randid();
}
อธิบายพอสังเขป
คอนเซ็ป ผมคือการเช็คว่ามีการส่งค่า id มาไหม ไม่มีก็ให้ random ค่า id มา 1 ค่า หลังจากเช็คเรื่องการส่งค่ามาแล้ว ก็ดูอีกว่าส่งค่ามาแล้ว ตรงตามเงื่อนไขต่อไปของเราไหม โดยจะเช็คต่อว่า ค่า id ที่รับมานั้น เป็นตัวเลขไหม มีค่าติดลบไหม มีค่าเกินค่าข้อมูลหรือว่าเกินกว่าข้อมูลทั้งหมดไหม แล้วจึงกำหนดค่า id ครับ เป็นการตั้งรับหลายๆกรณีไว้ก่อนนะครับ
การเช็คค่าว่ามีการส่งค่ามาไหม ผมจะใช้การ if(isset()) ถ้ามีการกระทำ ผมคิดว่ามันหมายความว่าอย่างนี้แหละครับ หลังจากนั้นก้อเช็คเรื่องตัวเลขต่อ is_numeric() เป็นตัวเลขไหม และใช้ AND ในการเช็คทั้งหมด คือต้องให้ผ่านทุกกรณีครับ ทั้ง 3 กรณีต้องผ่าน หลุดตัวไหนตัวนึง ก็จะไป random id มาครับ
แก้ไขเพิ่มเติม
ตัวนี้ผมปรับขึ้นมาใหม่นะครับ เนื่องจากว่าการ Get['id'] มามันจะขึ้น id-title มาเลย ผมจึงเพิ่มเจ้า explode() ขึนมา เพื่อแยกข้อมูล และจะเอา $list[0] หรือว่าข้อมูลที่ได้จากการแยกตัวแรกนั่นเองครับ ก็คือค่า id ตัวเลขของเราครับ
อ้อ ตัวนี้ผมเพิ่ม function randid มาใน app.php ครับ
//Random ID Product
function randid()
{
$id = rand(0,maxline());
return $id;
}
เพิ่มเข้าไปดูนะครับ ที่ท้ายบทความจะใส่ไฟล์รวม app.php อีกรอบครับ
Landing Page
เอาละครับเช็คค่า id สินค้าเรียบร้อยแล้ว ต่อไปก็จะเป็นเรื่องของ Landing Page แล้วละครับ ผมเขียน function landingpage($id) ขึ้นมาครับ คอนเซ็ปง่ายๆคือ เอาค่า id ไปดึงข้อมูลมานั่นเอง แต่ที่สำคัญคือ function landingpage() ตัวนี้ สามารถดึงข้อมูลที่โดนออกแบบหน้า Landing Page จากหลาย Landing Page นั่นเอง ซึ่งตัวไฟล์ Landing Page ผม บันทึกไว้เป็นไฟล txt ครับ น่าจะง่ายที่สุดละ ชื่อไฟล์ ตั้งอย่างไรก็ได้ครับ อยู่ที่คนอยากตั้งครับfunction landingpage($id) ใน app.php
//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;
}
อธิบายพอสังเขป
glob() เป็น function หาไฟล์หรือ directory ที่เข้ารูปแบบที่กำหนด ในที่นี่ผมให้หาไฟล์ นามสกุล txt ในโฟลเดอร์ lp ครับ อย่างที่กล่าวด้านบน ไฟล์ Landing Page เอาไว้ที่โฟล์เดอร์ lp ทั้งหมดครับ ไฟล์ txt นะครับ แล้ว function landingpage($id) ก็จะเรียกโดนการ Random มาแสดงครับ
บรรทัด 18-20 คืออะไรครับ เป็นการแทนค่าคำที่ต้องการครับ str_replace(คำค้นหา, แทนค่าด้วย, ในบทความของ); ประมานนี้นะครับการทำงานของมัน อย่างบรรทัน 18 ผมจะแทนค่า {get title} ด้วย $title ที่ดึงมาจากสินค้าครับ โดยให้มันไปหาจาก $getlp ซึ่งเป็นตัวที่เรา Random Landing Page มานั่นเอง
พูดง่ายๆคือ ต้องมีไฟล์ Landing Page ที่เป็นไฟล์ txt ไว้ใน โฟลเดอร์ lp เพื่อให้ function landingpage($id) ไปดึงมาแสดงครับ
Landing Page TXT File
ไฟล์ txt ที่อยู่ในโฟลเดอร์ lp อาจจะออกแบบอย่างตัวอย่างนี้ก็ได้ครับ ซึ่งสามารถใส่ เป็น html code ได้ปกติครับLanding Page 1
<h1>{get title}</h1>
<h2>Shopping {get title} Reviews</h2>
<p><img src="{get img}"></p>
<p>
{get title} will become useful. And hope Now i am a section of helping you to get a superior product.On the other hand, I hope until this reviews about it Deal {get title} form Deals will always be useful. And hope Now i'm a section of letting you get a superior product. You will obtain a review and practical knowledge form here. I'm hoping you will ensure and get Cheap {get title} following read this review. You will get a review and expertise form here. I really hope you will ensure Low Price <b>{get title}</b>. right after read this review
You'll be amazed to see how convenient this product could be, and you will certainly feel good realizing that this {get title} is amongst the best selling object in currently.
</p>
<a href="{get link}">Click Go to Shop</a>
ที่ Landing Page 1 เพราะอยากรู้เฉยๆว่า Landing Page อะไรเท่านั้นครับ ฮ่าๆ ใส่อย่างไร แสดงอย่างนั้นครับ
 |
| ตัวอย่าง Landing Page ที่ยกตัวอย่างมาครับ |
ผมสร้าง Landing Page 2 ไฟล์ไว้นะครับ
สรุปไฟล์
ไฟล์ product.php ที่ปรับปรุงแล้ว
<?php
//Include Function File
include 'app.php';
//Check ID
if (isset($_GET['id'])) {
$id = $_GET['id'];
$list = explode("-",$id);
$id = $list[0];
if (is_numeric($id) AND $id>=0 AND $id<=maxline()) {
$id = $id;
}else{
$id = randid();
}
}else {
$id = randid();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><?php echo setting('sitename'); ?></title>
<meta name="description" content="<?php echo setting('sitedes'); ?>">
<meta name="keywords" content="<?php echo setting('keyword'); ?>">
<meta name="author" content="<?php echo setting('author'); ?>">
<link rel="stylesheet" href="styles.css?v=1.0">
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1><?php echo setting('sitename'); ?></h1>
<h2><?php echo setting('sitedes'); ?></h2>
<nav>
<ul>
<li><a href=".">HOME</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="primary_content">
<section id="left_column">
<h3>Random Product</h3>
</section>
<section id="right_column">
<article>
<?php echo landingpage($id); ?>
</article>
<?php relatedproduct(6); ?>
</section>
</div>
<div class="clear"></div>
<footer>
<p><?php echo setting('sitename'); ?></p>
</footer>
<div class="clear"></div>
</div>
</body>
</html>
ไฟล์ 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="product-'.$id.'">'.$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;
}
?>
การเรียกหน้า product.php?id=2 นะครับ ถ้าไม่ระบุมันก็จะ Random id มาแสดงนะครับ
ใน บทหน้า ผมคงมาปรับเรื่องนี้ ให้ SEO มากว่านี้ แล้วกันครับ ตอนนี้ไว้เท่านี้ครับ บทหน้ามาอ่านกันต่อนะครับ
บทเรียนทั้งหมด
2 ความคิดเห็น
สร้างไฟล์ Sitemap.Php