มาทำ Tag Cloud จากฐานข้อมูลกันเถอะ
หลังจากได้ลองปรับแต่งและโปรโมทเวบตามหลักการ SEO ก็ถือว่าประสบผลสำเร็จพอสมควร วันนี้ก็ยอดถึง 400 ip แล้วก็เลยขอเขียนบทความอธิบายวิธีการสร้าง tag cloud จาก database เป็นของขวัญให้สมาชิกทุกท่านนะครับ
ใครไม่รู้จัก tag cloud ลองให้คุณ google ช่วยหาข้อมูลนะครับ ตัวอย่างก็ดูได้จากใต้เมนูด้านขวามือของเวบนี้ครับ
ต่อกันด้วยขั้นตอนวิธีการก็ดังนี้
1. สร้างฐานข้อมูลสำหรับเก็บข้อมูล tag
--
-- ตารางสำหรับ tag cloud โดย www.narongrit.net
--
-- --------------------------------------------------------
--
-- โครงสร้างตาราง `web_tag` โดย www.narongrit.net
--
CREATE TABLE `web_tag` (
`id` int(11) NOT NULL auto_increment,
`tag_name` varchar(255) NOT NULL default '',
`sort` int(11) NOT NULL default '0',
`sumtag` int(11) NOT NULL,
PRIMARY KEY (`id`),
KEY `id` (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=tis620;
--
-- dump ตาราง `web_tag`
--
INSERT INTO `web_tag` (`id`, `tag_name`, `sort`, `sumtag`) VALUES (1, 'Maxsite', 1, 5);
INSERT INTO `web_tag` (`id`, `tag_name`, `sort`, `sumtag`) VALUES (2, 'PHP', 2, 8);
INSERT INTO `web_tag` (`id`, `tag_name`, `sort`, `sumtag`) VALUES (3, 'AJAX', 3, 13);
INSERT INTO `web_tag` (`id`, `tag_name`, `sort`, `sumtag`) VALUES (4, 'Counter', 4, 5);
2. สร้างไฟล์ php สมมติชื่อ tag.php เก็บไว้ที่ modules/tag/
<style type="text/css">
.tag_cloud { padding: 3px; text-decoration: none; }
.tag_cloud:link { color: #81d601; }
.tag_cloud:visited { color: #019c05; }
.tag_cloud:hover { color: #ffffff; background: #69da03; }
.tag_cloud:active { color: #ffffff; background: #ACFC65; }
</style>
<body>
<?
function get_tag_data() {
mysql_connect('localhost', 'root', 'root'); //ติดต่อฐานข้อมูล (localhost,username,pass)
mysql_select_db('maxsite'); //ชื่อฐานข้อมุล
$result = mysql_query("SELECT * FROM web_tag ORDER BY sort DESC");
while($row = mysql_fetch_array($result)) {
$arr[$row['tag_name']] = $row['sumtag'];
}
ksort($arr);
return $arr;
}
/* ถ้าไม่ต้องการแบบดึงข้อมูลจาก db ก็ใช้ส่วนนี้แทน
function get_tag_data() {
$arr = Array('Actionscript' => 35, 'Adobe' => 22, 'Array' => 44, 'Background' => 43,
'Blur' => 18, 'Canvas' => 33, 'Class' => 15, 'Color Palette' => 11, 'Crop' => 42,
'Delimiter' => 13, 'Depth' => 34, 'Design' => 8, 'Encode' => 12, 'Encryption' => 30,
'Extract' => 28, 'Filters' => 42, 'Flash' => 32, 'Functions' => 19,
'Gaussian Blur' => 44, 'Grafix' => 49, 'Graphics' => 35, 'Hue' => 47, 'Illustrator' => 8,
'Image Ready' => 12, 'Javascript' => 47, 'Jpeg' => 15, 'Keyboard' => 18, 'Level' => 28,
'Liquify' => 30, 'Listener' => 10, 'Logo' => 12, 'Loops' => 22, 'Macromedia' => 26,
'Method' => 28, 'MySQL' => 18, 'Obfuscation' => 13, 'Object' => 39, 'Optimize' => 25,
'PDF' => 37, 'PHP' => 44, 'PSD' => 17, 'Photography' => 28, 'Photoshop' => 46,
'Revert' => 50, 'Saturation' => 35, 'Save as' => 28, 'Scope' => 11, 'Scripting' => 9,
'Security' => 41, 'Sharpen' => 49, 'Switch' => 41, 'Templates' => 11, 'Texture' => 22,
'Tool Palette' => 30, 'Variables' => 50);
return $arr;
}*/ //www.narongrit.net//
function get_tag_cloud() {
// Default font sizes
$min_font_size = 12;
$max_font_size = 30;
// Pull in tag data
$tags = get_tag_data();
$minimum_count = min(array_values($tags));
$maximum_count = max(array_values($tags));
$spread = $maximum_count - $minimum_count;
// modify by www.narongrit.net
if($spread == 0) { //ป้องกันไม่ให้หารด้วย 0
$spread = 1;
}
$cloud_html = '';
$cloud_tags = array(); // create an array to hold tag code
foreach ($tags as $tag => $count) {
$size = $min_font_size + ($count - $minimum_count)
* ($max_font_size - $min_font_size) / $spread;
$cloud_tags[] = '<a style="font-size: '. floor($size) . 'px'
. '" class="tag_cloud" href="http://www.google.com/search?q=' . $tag
. '" title="' . $tag . '" returned a count of ' . $count . '">'
. htmlspecialchars(stripslashes($tag)) . '</a>';
} //modify by www.narongrit.net
$cloud_html = join("|", $cloud_tags) . "";
return $cloud_html;}
?>
<h3>Sample Tag Cloud results</h3>
<div id="wrapper" align="center">
<!-- BEGIN Tag Cloud -->
<?php print get_tag_cloud(); ?>
<!-- END Tag Cloud -->
</div>
</body>
ในโค้ดที่ผมให้นี้จะมีทั้งแบบที่ใช้ฐานข้อมูล กับแบบ array นะครับ แล้วแต่ว่าใครจะเลือกใช้ตัวไหน
ส่วนสีแดงคือแต่ละท่านไปปรับแต่งให้เข้ากับ host กับฐานข้อมูลของท่านนะครับ
เท่านี้ท่านก็มีหน้า tag cloud เก๋ๆ ไว้ใช้แล้ว แต่ว่าต่อจากนี้คือการประยุกต์ ต่อยอดของแต่ละท่านแล้ว เพราะถ้าจะให้สมบูรณ์ก็ต้องเพิ่มเติมดังนี้
1. สร้างไฟล์สำหรับแสดงบทความที่เกี่ยวข้องกับ tag นั้นๆ โดยมันจะถูกเรียกโดยโค้ดนี้ในส่วนของโค้ดข้างบน
href="http://www.google.com/search?q=' . $tag
ก็แก้เป็นลิงค์หน้าที่สร้างใหม่แต่ต้องมีรูปแบบว่า http://ชื่อเวบ/ชื่อไฟล์แสดงบทความสัมพันธ์กับtag.$tag แต่ถ้าคงโค้ดเดิมไว้มันก็จะแสดงหน้า google เวบที่เป็นคำที่เราค้นหานั่นเอง
2. ในส่วนที่ผมใช้งานตอนนี้ผมใช้วิธีสร้างไฟล์เพิ่มค่า tag เสริมไปในตอนเขียนบทความ อาจประยุกต์การเพิ่มชื่อ tag จากไฟล์ admin/knowledge_category.php ก็ได้ แล้วในส่วนเขียนบทความก็สร้างเป็นตัวเลือกโดยดึงรายการชื่อ tag มาเป็นแบบ combo list box แทน
ผมไม่ได้ให้ครบทุกอย่างเพราะต้องการให้ลองนำไปต่อยอดดูนะครับ คนไทยจะได้เก่งๆ
หรือใครสนใจอยากไปอ่านเนื้อหาจากลิงค์ต้นฉบับเหล่านี้ก็ได้ครับตามนี้
http://scriptplayground.com/tutorials/php/Tag-Cloud/
http://scriptplayground.com/tutorials/php/Tag-Cloud-with-Database/
โหลดไฟล์ประกอบด้านล่าง
+ ไฟล์ที่ 1 ไฟล์ sql สำหรับสร้างตาราง tag
+ ไฟล์ที่ 2 ไฟล์ หน้า tag.php
pass แตกไฟล์ : narongrit.net
View :
8572 [ Go up to give a rating ]
|
Eng
Recent Member
