GORAGOD.com

AJAX News ส่วนแสดงข่าวสารของเว็บด้วย AJAX

ความจริงมันก็คล้ายๆกับโค้ดแสดงข่าวเดิมแหละครับ ต่างกันแค่คราวนี้เป็นการเรียกข้อมูลข่าวจาก server ด้วย AJAX แทนทำให้ไม่ต้องเตรียมข้อมูลไว้ก่อนที่จะแสดงผล ซึ่งทำให้การโหลดครั้งแรกมีความรวดเร็วขึ้น ซึ่งสามารถนำไปปรับใช้กับ RSS ได้ครับ นอกจากนี้การปรับปรุงข้อมูลข่าว รวมถึงการเพิ่ม-ลดข่าวยังสามารถกระทำได้แบบ Real-Time ด้วย

<div id="news">
  <div id="newsdiv"><div id="wait">กำลังโหลด...</div></div>
  <div id="newslink">[ <a href="javascript:nextnews('-1')">ก่อนหน้า</a> | <a href="javascript:nextnews('+1')">ถัดไป</a> ]</div>
</div>

ข้างบนเป็นโค้ดในหน้า news.php ครับ เป็นส่วนแสดงผลข่าวที่จะเอาไปไว้ยังตำแหน่งที่จะแสดงผลครับ

var newsid=0

function displaynews(id) {
  var req_news = Inint_AJAX();
  req_news.onreadystatechange = function () {
    if (req_news.readyState==4) {
      if (req_news.status==200) {
        var ret=req_news.responseText; //รับค่ากลับมา
        var d=ret.split(String.fromCharCode(7)); //แยกข้อมูลออก
        newsid=parseInt(d[3]); //เก็บค่าข่าวถัดไป
        var news='<td style="text-align:left;vertical-align:top;">'+d[1]+'</td>';
        if (d[0]!="") {
          //../datas/imagefiles/ ให้เปลี่ยนเป็น path ที่เก็บรูปจริงๆของเนื้อหาภายในข่าว
          //ถ้าต้องการสลับซ้ายขวา
          //if (newsid%2==0) news=news+'<td><img src="../datas/imagefiles/'+d[0]+'" alt="" /></td>';
          //else news='<td><img src="../datas/imagefiles/'+d[0]+'" alt="" /></td>'+news;
          //แสดงตามปกติ
          news='<td><img src="../datas/imagefiles/'+d[0]+'" alt="" /></td>'+news;
        }
        displaynewsdata('newsdiv', '<table><tr>'+news+'</tr></table>'); //แสดงผลข่าว
        if (d[2]!="") loadingimage('../datas/imagefiles/'+d[2]); //cache รูปถัดไป
      }
    }
  };
  req_news.open("GET", "../news/getnews.php?id="+id); //สร้าง connection
  req_news.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  req_news.send(null); //ส่งค่า
}

//เริ่มต้นการทำงาน
displaynews(newsid);
//จับเวลาแสดงข่าวครั้งต่อไป
newsinterval=window.setInterval("displaynews(newsid)", 10000);

ในการเรียกใช้งานครั้งแรกจะเป็นการอ่านข่าวแรกมาแสดงด้วยฟังก์ชั่น displaynews ครับโดยในตอนเริ่มต้นค่า newsid จะมีค่าเป็น 0 ซึ่งจะเป็นการไปอ่านข่าวแรก หลังจากอ่านข่าวแล้วจะเป็นการจับเวลาเพื่อแสดงข่าวถัดไปทุก 10 วินาทีครับ

หน้า getnews.php

<?
  //หมายเลข ID ของกระทู้ที่กำหนดให้อ่านมาแสดง (เป็น ID ของหมวด news)
  $news=array(14, 15, 16, 17);

  //ภาษาไทย
  header("content-type: application/x-javascript; charset=tis-620");
  
  include("../bin/config.php"); //ฟังก์ชั่น
  include("../bin/tdb.class.php"); //เรียกใช้ คลาส text database
  include("../bin/function.php"); //ฟังก์ชั่น
  
  $db=new tdb("../$config[data]", "db.tdb"); //เปิดฐานข้อมูล
  $db->get("webboard", $config); //โหลด config
  
  $id=(int)$_GET[id];
  $temp=$id;
  if ($id<0) { //ย้อนกลับถึงรายการสุดท้าย
    $id=count($news)-1;
    $next=$id+1;
  } else {
    $next=$id+1;
    if ($next>=count($news)) $next=0;
  }

  //อ่านข้อมูลข่าวปัจจุบัน
  $lastnews=$db->getRec("Qnews", $news[$id]);
  
  //อ่านข้อมูลข่าวถัดไป เพื่อเอารูปมา cache
  $nextnews=$db->getRec("Qnews", $news[$next]);
  
  //คืนค่า รูปปัจจุบัน,ข่าวปัจจุบัน,รูปของข่าวถัดไป,id ของข่าวถัดไป
  echo $lastnews[wb_picture].chr(7).Conv2View($lastnews[wb_detail], $config).chr(7).$nextnews[wb_picture].chr(7).$next;
?>

ข่าวที่จะแสดงถูกกำหนดอยู่ใน getnews.php ครับ โดยถูกกำหนดโดย $news ครับโดยตัวแปร $news จะเก็บ array ค่า id ของข่าวที่จะแสดงตามลำดับ ซึ่งในการนำไปใช้งานอาจกำหนดเป็นอย่างอื่นก็ได้แล้วแต่ฐานข้อมูลที่ใช้งานอยู่ครับ โดยที่ตัวอักษรสีน้ำเงินที่เห็นเป็นการอ่านข่าวจาก ฐานข้อมูล Text ที่ผมใช้บนเว็บครับ

getnews จะถูกเรียกให้แสดงข่าวโดย AJAX ตามที่เรียกโดยฟังก์ชั่น displaynews ครับ

จากโค้ดจะเห็นว่าผมมีการคืนค่าตัวแปร $next ไปด้วย ซึ่งจะเป็นการคืนค่าอันดับที่ array ของข่าวถัดไป กลับไปด้วยเพื่อใช้ในการกำหนดข่าวถัดไปที่จะแสดงครับ โดยที่ในการแสดงจะแสดงข่าวตั้งแต่ข่าวแรก (0) ไปจนถึงข่าวสุดท้าย แล้วกลับมาแสดงข่าวแรกใหม่

สำหรับข้อมูลข่าวผมเอาข้อมูลไว้ในตารางครับ เพื่อให้จัดการแสดงผลได้ง่ายขึ้น และในการนำไปใช้ สามารถจัดการแสดงยังไงก็ได้แล้วแต่สะดวกครับ โดยการเขียนเป็น HTML ลงไปได้เลย เช่น

<table><tr><td><img src=news1.jpg></td><td>เนื้อหาข่าวอยู่ทางด้านขวาของรูป</td></tr></table>

ถ้ายังจำได้ในบทที่แล้ว การแสดงผลของ Shout box ก็ใช้การแสดงผลในลักษณะเดียวกันครับ ซึ่งทำให้สามารถแสดงผล effect ได้ในหลายๆ Browser ครับ

โค้ดที่เหลือดูได้จากที่ดาวน์โหลดครับ ในที่ดาวน์โหลดจะมีทั้งไฟล์ที่ใช้ ฐานข้อมูล Text และ MySQL ครับ โดยในไฟล์ getnews_sql.php จะเป็นไฟล์ getnews ของ MySQL ครับ ถ้าต้องการใช้งานให้ลบ getnews.php เดิมออก แล้วเปลี่ยนชื่อ getnews_sql.php ให้เป็น getnews.php และในโค้ด news.js ให้เปลี่ยนส่วน ../datas/imagefiles/ ให้เป็น path ของรูปที่มีอยู่บนเว็บด้วยครับ

news='<td><img src="../datas/imagefiles/'+d[0]+'" alt="" /></td>'+news;


ตัวอย่างก็ส่วนแสดงข่าวหน้าเว็บเลยครับ
 (917)

โค้ดหน้า getnews.php ที่ใช้ MySQL

<?
  //หมายเลข ID ของกระทู้ที่กำหนดให้อ่านมาแสดง (เป็น ID ของหมวด news)
  $news=array(1, 2);
  
  $host="localhost";
  $username="root";
  $password="";
  $dbname="news";

  //ภาษาไทย
  header("content-type: application/x-javascript; charset=tis-620");
  
  //เชื่อมต่อกับ MySQL
  $connect= mysql_connect( $host, $username, $password) or die("ไม่สามารถเชื่อมต่อฐานข้อมูลได้");
  $db=mysql_select_db($dbname) or die("ฐานข้อมูลไม่ถูกต้อง");
  
  $id=(int)$_GET[id];
  if ($id<0) { //ย้อนกลับถึงรายการสุดท้าย
    $id=count($news)-1;
    $next=$id+1;
  } else {
    $next=$id+1;
    if ($next>=count($news)) $next=0;
  }
  
  //อ่านข่าวปัจจุบัน
  $sql="SELECT * FROM news WHERE id=$news[$id]";
  $query1=mysql_query($sql) or die("ไม่สามารถอ่านฐานข้อมูลได้");
  $result=mysql_fetch_array($query1);
  
  if ($next<count($news)) { //ถ้าไม่ได้อ่านข่าวสุดท้าย
    //อ่านข่าวถัดไป เพื่อเอารูปมา cache
    $sql="SELECT * FROM news WHERE id=$news[$next]";
    $query2=mysql_query($sql) or die("ไม่สามารถอ่านฐานข้อมูลได้");
    $next_news=mysql_fetch_array($query2);
  } else
    $next_news[picture]="";

  //คืนค่า รูปปัจจุบัน,ข่าวปัจจุบัน,รูปของข่าวถัดไป,id ของข่าวถัดไป
  echo $result[picture].chr(7).$result[detail].chr(7).$next_news[picture].chr(7).$next;
?>

ฐานข้อมูล news - ตาราง news ทำงานอยู่บน localhost

# phpMyAdmin SQL Dump
# version 2.5.7-pl1
# http://www.phpmyadmin.net
#
# โฮสต์: localhost
# เวลาในการสร้าง: 14 มี.ค. 2007 น.
# รุ่นของเซิร์ฟเวอร์: 5.0.16
# รุ่นของ PHP: 4.4.1
#
# ฐานข้อมูล : `news`
#

# --------------------------------------------------------

#
# โครงสร้างตาราง `news`
#

CREATE TABLE `news` (
  `id` int(11) NOT NULL auto_increment,
  `topic` text NOT NULL,
  `detail` text NOT NULL,
  `picture` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

#
# dump ตาราง `news`
#

INSERT INTO `news` VALUES (1, 'หัวข้อข่าวที่1', 'เนื้อหาข่าวที่1', '749670HMVO.jpg');
INSERT INTO `news` VALUES (2, 'หัวข้อข่าวที่2', 'เนื้อหาข่าวที่2', 'D6Z81QJKDA.jpg');