วิธีการดึงบทความจาก Database มาแสดงหน้าเว็บไซต์ ~ Bookneo

จากบทความที่แล้วที่ติดค้างไว้ในเรื่อง ของการดึงบทความจาก Database มาแสดงหน้าเว็บไซต์ ก็เลยต้องมา ชำระสะสางกันเสียให้เสร็จไปในบทความนี้ซะเลยครับ... - -" แนวคิดในเรื่องนี้ จะแสดงบทความแบบ Web Blog คือ แสดง Title และ Article บางส่วนจากนั้น ก็ทำลิงค์ ให้กับ Title และเพิ่ม Read more ให้กับบทความเพื่ออ่านต่อ.....

ก่อนอื่นผมจะเริ่มต้นด้วยการเชื่อมต่อฐานข้อมูลก่อน ด้วยการ include 'config.php' เหมือนเดิม บางท่าน ถึงกับเขียนเป็น function เลยนะตรงนี้ ส่วนผมก็เอามันแบบนี้แหละไม่ได้ลำบากอะไรมากมาย อิอิ...

include 'config.php';

ในขั้นตอนนี้เราจะสร้างฟังก์ชัน ขึ้นมา 1 ฟังก์ชัน คือ function ตัดบทความ เพื่อเอาไปใช้ในการแสดง บทความบางส่วน ดังนี้

function cutstr($str, $maxstr='', $holder='') {
if (strlen($str) > $maxstr) {
$str = iconv_substr($str, 0, $maxstr, "UTF-8") . $holder;
}
return $str;
}

วิธีใช้งาน cutstr($article,'500','...') จากนั้นผมก็สร้าง ตาราง(Table) ขึ้นมาผสมผสานกันระหว่าง HTML กับ PHP ดังนี้ ผมจะสร้างแถวขึ้นมา 1 แถว คอลั่ม 1 คอลั่ม

$sql = "select * from myarticles order by id_article DESC";
$result = mysql_query($sql);
$num = mysql_num_rows($result);//นับแถวทั้งหมดในตารางออกมา 
$i=0; // กำหนดให้ตัวแปร i = 0
while($i < $num){ //ถ้า ตัวแปร i น้อยกว่า ตัวแปร num
$row = mysql_fetch_array($result);
$id_article = $row['id_article'];
$author = $row['author'];
$title = $row['title'];
$article = $row['article'];
$datetime = $row['datetime'];
 
echo "";
echo "";
echo "";
$i++; //ก็ให้บวกเพิ่มไปจนเท่ากับ ตัวแปร num
}
 
<table><tbody><tr><td>";
echo "<div id="date">$datetime</div>";
echo "<div id="title"><h1>$title</h1></div>";
echo "<div id="article">$article</div>";
echo "<div id="float_r">Read More</div>";
echo "</td></tr></tbody></table>

แล้วก็มาเพิ่มลิงค์ให้กับ Title ลิงค์ไปหาบทความนั้นๆที่ ไฟล์ show_article_full.php ด้วยการพ่วง id_article เข้าไปด้วยแบบนี้

echo "<div id="title"><a href="show_article_full.php?id_article=$id_article">
<h1>$title</h1></a></div>";

เพิ่มเติมฟังก์ตัดคำให้กับ ตัวแปร article ดังนี้

echo "<div id="article">".cutstr($article,'500','...')."</div>";

เพิ่มเติมลิงค์ให้กับ Read More ดังนี้

echo "<div id="float_r"><a href="show_article_full.php?id_article=$id_article">
Read More::></a></div>";

Code ที่เสร็จแล้ว ไฟล์ show_article.php

<!DOCTYPE html">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
<div class="content">
<div><h1>วิธีการดึงบทความจาก Database มาแสดงหน้าเว็บไซต์แบบ</h1></div>

<?php include 'config.php';?>

<?php
function cutstr($str, $maxstr='', $holder='') {
if (strlen($str) > $maxstr) {
$str = iconv_substr($str, 0, $maxstr, "UTF-8") . $holder;
}
return $str;
}
?>

<table>
<?php

$sql = "select * from myarticles order by id_article DESC";
$result = mysql_query($sql);
$num = mysql_num_rows($result);//นับแถวทั้งหมดในตารางออกมา

$i=0; // กำหนดให้ตัวแปร i = 0
while($i < $num){ //ถ้า ตัวแปร i น้อยกว่า ตัวแปร num

$row = mysql_fetch_array($result);
$id_article = $row['id_article'];
$author = $row['author'];
$title = $row['title'];
$article = $row['article'];
$datetime = $row['datetime'];

echo "<tr>";
echo "<td>";

echo "<div id='date'>$datetime</div>";
echo "<div id='title'><h2>
<a href='show_article_full.php?id_article=$id_article'>
$title
</a></h2></div>";
echo "<div id='article'>".cutstr($article,'500','...')."</div>";
echo "<div id='float_r'>
<a href='show_article_full.php?id_article=$id_article'>
Read More::>
</a></div>";

echo "</td>";
echo "</tr>";
$i++; //ก็ให้บวกเพิ่มไปจนเท่ากับ ตัวแปร num
}
?>
</table>

</div>
    </body>
</html>

กำหนด ไฟล์ CSS ของ show_article.php และ show_article_full.php ดังนี้ ไฟล์ style.css

body{
background: #eeeeee;
}
 
.content{
width:700px;
margin:0 auto;
border:1px solid #dddddd;
padding:20px;
background: #ffffff;
}
 
td{
width:650px;
border-bottom: 1px dotted #60676a;
padding: 20px;
}
 
#date{
color: #666666;
font-size: 13px;
}
 
#title{
color:#0252A1;
}
 
#title a{
color:#0252A1;
text-decoration: none;
}
 
#title a:hover{
color:#0095DD;
}
 
#float_r{
float:right;
color:#C74E3E;
font-size: 14px;
font-weight: bold;
}
 
#float_r a{
color:#C74E3E;
font-weight: bold;
text-decoration: none;
font-size: 13px;
}
 
#float_r a:hover{
color:#2E95FC;
}

สร้างไฟล์ show_article_full.php ง่ายๆครับ coppy ไฟล์ show_article.phpมาเลย
ตัดการวนลูป คือ while กับ ตัวแปร i ออก
แล้วตัดลิงค์ออกจาก ตัวแปร Title
เอาฟังก์ชัน ที่ใช้ตัดคำออกจาก ตัวแปร Article
และเอาตัวแปร author มาแทน Read More แล้วตัดลิงค์ออก
เพิ่มโค้ดสำหรับการรับค่า id_article เข้ามาแบบ GET ดังนี้

$id_article = $_GET['id_article'];

ปรับการเชื่อมต่อฐานข้อมูลเป็น

$sql = "select * from myarticles where id_article = '$id_article' 
order by id_article";

เท่านี้ก็เสร็จแล้วครับ

Code ที่เสร็จแล้ว
ไฟล์ show_article_full.php

<!DOCTYPE html">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
<div class="content">
<div><h1>วิธีการดึงบทความจาก Database มาแสดงหน้าเว็บไซต์แบบ</h1></div>
<?php
include 'config.php';
 
$id_article = $_GET['id_article'];//รับค่า id_article
 
$sql = "select * from myarticles where id_article = '$id_article'
order by id_article";
$result = mysql_query($sql);
 
$row = mysql_fetch_array($result);
$id_article = $row['id_article'];
$author = $row['author'];
$title = $row['title'];
$article = $row['article'];
$datetime = $row['datetime'];
?>
 
<table>
<?php
echo "<tr>";
echo "<td>";
 
echo "<div id='date'>$datetime</div>";
echo "<div id='title'><h2>$title</h2></div>";
echo "<div id='article'>$article</div>";
echo "<div id='float_r'><font color='#64711F'>Post By:</font>
$author</div>";
 
echo "</td>";
echo "</tr>";
?>
</table>
</div>
    </body>
</html>

สำหรับบทความนี้ก็จบเพียงเท่านี้ครับ.....