ดึง rss ข่าวให้ใชว์ออกเป็นรูปแบบนี้

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ดึง rss ข่าวให้ใชว์ออกเป็นรูปแบบนี้

ดึง rss ข่าวให้ใชว์ออกเป็นรูปแบบนี้

คือต้องการดึง rss ข่าวให้ออกมาเป็นแบบนี้ค่ะ ต้องทำไงเหรอคะ

คือไม่เข้าใจตรงที่ดึงออกมาเป็นรูปใหญ่อ่ะค่ะ ว่าดึงยังไงถึงมีรูปใหญ่ออกมา เพราะจากที่เคยเห็น xml รูปที่มีมักเป็นรูปเล็กอ่ะค่ะ



Atomy_mink 31-07-2010 11:33:04

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1

จากรูปไม่น่าจะเป็นการดึง จาก rss ถ้าที่มา มาจาก
http://football.kapook.com/

รูปเล็กเป็นการดึงมาแสดงปกติ รูปใหญ่เขาใช้เป็น background

ส่วนถ้าต้องการดึง rss มาแสดงดังรูป เงื่อนไขก็ขึ้นอยู่กับไฟล์ rss ว่า มีการส่งค่าอะไรมาให้บ้าง ที่จริงเราสามารถส่งค่ามาเป็นรูปใหญ่รูปเดียว หรือจะส่งมาทั้งรูปเล็ก และรูปใหญ่ ก็จะสะดวกกว่า และใช้ css ในการจัดรูปแบบการแสดง และเพิ่ม effect ด้วย javascript หรือใช้ jQuery



ninenik 31-07-2010
 ความคิดเห็นที่ 2

พอดีไม่ค่อยรู้เรื่องนี้เลยค่ะ เกี่ยวกับการดึง xml รบกวนช่วยบอกวิธีดึงรูปใหญ่มาโชว์หน่อยได้มั้ยคะ

ดึงจาก rss thai ก็ได้ค่ะ พอดีรีบมาก



atomy_mink 31-07-2010 20:21
 ความคิดเห็นที่ 3

เงียบจังเลย



atomy_mink 04-08-2010 16:29
 ความคิดเห็นที่ 4

แนะนำการดึง xml ไฟล์ตามตัวอย่าง ข้างล่าง

https://www.ninenik.com/ดึงข่าว_rss_มาใช้ในเว็บเราได้อย่างง่ายดายด้วย_php-167.html

https://www.ninenik.com/ดึงไฟล์_xml_(rss)_ไฟล์แบบ_cross_domain_มาแสดงด้วย_ajax_ใน_jQuery_อย่างง่าย-250.html

https://www.ninenik.com/วิธี_load_xml_ไฟล์_และ_แบ่งหน้า_ด้วย_php_อย่างง่าย-296.html

ส่วนจะเป็นรูปภาพเล็หรือใหญ่ขึ้นอยู่กับแหล่งที่มาของไฟล์ rss แต่ถ้าเป็น xml ที่เรากำหนดเอง เราสามารถกำหนดเป็น url ของรูปใหญ่และรูปเล็ก มาพร้อมกัน และการนำเสนอ หรือแสดงดังรูปตัวอย่าง จำเป้นต้องมีควาามรู้เกี่ยวกับ css ให้การจัดรูปแบบ  อาจจะได้เขียนบทความ css การจัดรูปแบบ ดังรุป ในคราวต่อไป



ninenik 04-08-2010
 ความคิดเห็นที่ 5

ลองดึงรูปจากอันนี้อ่ะค่ะ rssfeeds.sanook.com/rss/feeds/sanook/sport.football.xml

แล้วต้องการดึงรูปที่เป็น Media files xml เป็นแบบนี้ค่ะ

<enclosure url="http://btgsf1.fsanook.com/weblog/entry/191/958813/Beck777.jpg" type="image/jpeg"/>

ค่ะลองใส่โค้ดดูแต่ไม่ได้อ่ะค่ะ

อันนี้โค้ดที่ลองใส่อ่ะค่ะ ไม่ทราบว่าต้องใส่ยังไงเหรอคะ

$(function(){
	var gXML=$.ajax({
		url: "gXML.php?url=http://rssfeeds.sanook.com/rss/feeds/sanook/sport.football.xml",
		async: false, 
		success:function(gXML){ 	
			var NumItem=$(gXML).find("item").length; 
			var titleRSS=null;
			var linkRSS=null;
			var imgRSS=null;
			for(var i=0;i<NumItem;i++){
				titleRSS=$(gXML).find("item title").eq(i).text();
				linkRSS=$(gXML).find("item link").eq(i).text();
				imgRSS=$(gXML).find("item enclosure").eq(i).text();
				$("div#showRSS ul").append("<li><a href='"+linkRSS+"' target='_blank'><img src="'.$item['enclosure'].'"></a></li>");
			}
		}
	}).responseText;
});

 



atomy_mink 14-08-2010 15:23
 ความคิดเห็นที่ 6

จากไฟล์ xml เขามีให้ทั้ง ไตเติล url รูปเล็ก รูปใหญ่ คำอธิบาย ลิ้งค์ ลองฟังก์ชันด้านล่าง
ไปทดสอบดู ถ้า server รองรับ curl ก็น่าจะใช้ได้ ถ้าไม่ได้อาจต้องใช้วิธีอื่น
รูปเล็ก เขาจะแทรกเเป็นแท็ก img เข้ามาให้พร้อมกับคำอธิบายอย่างย่อ ถ้าจะแยกออกมา ต้องเขียนฟังก์ชันเพิ่มเดิม ให้ดึงแยกข้อมูลออกมา
รูปใหญ่ เข้าใช้แท็ก enclosure และใช้ attribute url เป็นตัวกำหนด การดึงข้อมูล ต้องใช้ฟังก์ชัน attributes() เลยอาจดูยุ่งยาก

โค้ดตัวอย่างการดึงตัวแปร และค่า ของ xml ไฟล์ มาแสดงผล
 

<?php
$url_feed = 'http://rssfeeds.sanook.com/rss/feeds/sanook/sport.football.xml'; // กำหนด xml feed ที่ต้องการ

// ส่วนเริ่มต้นการใช้งานฟังก์ชัน curl ในการเรียกใช้ไฟล์ xml feed
$ch = curl_init($url_feed);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$get_content = curl_exec($ch); // เก็บรูปแบบข้อความ xml ไว้ในตัวแปร $get_content
curl_close($ch);
// สิ้นสุดการใช้งานฟังก์ชัน curl  ในการเรียกใช้ไฟล์ xml feed

// แปลงข้อความที่อยู่ในรูปแบบ xml เป็นตัวแปร object
$parsed_xml = simplexml_load_string($get_content);


// จำนวนรายการ feed ทั้งหมด
echo count($parsed_xml->channel->item);
/*echo "<pre>";
var_dump($parsed_xml->channel);
echo "</pre>";*/
// ทดสอบดึงมาแค่ 10 รายการ
for($i=0;$i<10;$i++){ // 
		$description_data=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[$i]->description);
		echo "<strong>Title : </strong> ".$parsed_xml->channel->item[$i]->title."<br>";   
		echo "<strong>Description : </strong> ".$parsed_xml->channel->item[$i]->description."<br/>";   
		echo "<strong>Link :</strong> : ".$parsed_xml->channel->item[$i]->link."<br>";
		echo "<strong>Image Small  :</strong> : ".$description_data[0]."<br>";		
		echo "<strong>Image Big Url : </strong> ".$parsed_xml->channel->item[$i]->enclosure->attributes()."<br/><hr>";   		
}
?>

ตัวอย่าง การดึงข้อมูล
https://www.ninenik.com/demo/load_xml_sport_news.php



Ninenik 14-08-2010
 ความคิดเห็นที่ 7

นิดปัญหานิดนึงค่ะ จากรูปค่ะ

พอดึงออกมาแล้ว

1. description ใต้รูปใหญ่มันซ้ำกันอ่ะค่ะ

2. รูปตรงขนาดเล็กก็ซ้ำกันด้วยค่ะ

3. ถ้าจะกำหนดรูปเล็กให้มีขนาด 80 * 50 ต้องกำหนดยังไงเหรอคะ

<?php
$url_feed = 'http://rssfeeds.sanook.com/rss/feeds/sanook/sport.football.xml'; // กำหนด xml feed ที่ต้องการ

// ส่วนเริ่มต้นการใช้งานฟังก์ชัน curl ในการเรียกใช้ไฟล์ xml feed
$ch = curl_init($url_feed);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$get_content = curl_exec($ch); // เก็บรูปแบบข้อความ xml ไว้ในตัวแปร $get_content
curl_close($ch);
// สิ้นสุดการใช้งานฟังก์ชัน curl  ในการเรียกใช้ไฟล์ xml feed

// แปลงข้อความที่อยู่ในรูปแบบ xml เป็นตัวแปร object
$parsed_xml = simplexml_load_string($get_content);


// จำนวนรายการ feed ทั้งหมด
count($parsed_xml->channel->item);
//for($i=0;$i<4;$i++){
	$description_data=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[0]->description);
	$description_data=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[1]->description);
	$description_data=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[2]->description);
	$description_data=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[3]->description);
?>	
		<div id="featured" >
		  <ul class="ui-tabs-nav">
	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><?=$description_data[0]?><span><?=$parsed_xml->channel->item[0]->title?></span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><?=$description_data[0]?><span><?=$parsed_xml->channel->item[1]->title?></span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><?=$description_data[0]?><span><?=$parsed_xml->channel->item[2]->title?></span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><?=$description_data[0]?><span><?=$parsed_xml->channel->item[3]->title?></span></a></li>
	      </ul>

	    <!-- First Content -->
	    <div id="fragment-1" class="ui-tabs-panel" style="">
			<img src="<?=$parsed_xml->channel->item[0]->enclosure->attributes()?>" alt="<?=$parsed_xml->channel->item[0]->title?>" width="400" height="250"/>
			 <div class="info" >
				<h2><a href="<?=$parsed_xml->channel->item[0]->link?>" ><?=$parsed_xml->channel->item[0]->title?></a></h2>
				<p><?=$description_data[1]?></p>
			 </div>
	    </div>

	    <!-- Second Content -->
	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="<?=$parsed_xml->channel->item[1]->enclosure->attributes()?>" alt="<?=$parsed_xml->channel->item[0]->title?>" width="400" height="250"/>
			 <div class="info" >
				<h2><a href="<?=$parsed_xml->channel->item[1]->link?>" ><?=$parsed_xml->channel->item[1]->title?></a></h2>
				<p><?=$description_data[1]?></p>
			 </div>
	    </div>

	    <!-- Third Content -->
	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="<?=$parsed_xml->channel->item[2]->enclosure->attributes()?>" alt="<?=$parsed_xml->channel->item[0]->title?>" width="400" height="250"/>
			 <div class="info" >
				<h2><a href="<?=$parsed_xml->channel->item[2]->link?>" ><?=$parsed_xml->channel->item[2]->title?></a></h2>
				<p><?=$description_data[1]?></p>
	         </div>
	    </div>

	    <!-- Fourth Content -->
	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="<?=$parsed_xml->channel->item[3]->enclosure->attributes()?>" alt="<?=$parsed_xml->channel->item[0]->title?>" width="400" height="250"/>
			 <div class="info" >
				<h2><a href="<?=$parsed_xml->channel->item[4]->link?>" ><?=$parsed_xml->channel->item[3]->title?></a></h2>
				<p><?=$description_data[1]?></p>
	         </div>
	    </div>

		</div>
	</div>

 



atomy_mink 15-08-2010 16:15
 ความคิดเห็นที่ 8

ปัญหาข้อ 1 ข้อ 2 เกิดจากใช้ตัวแปรซ้ำกัน
 

$description_data=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[0]->description);   
$description_data=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[1]->description);   
$description_data=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[2]->description);   
$description_data=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[3]->description);

เป็นตัวเดียวกันหมด เพราะใช้ชือตัวแปรเดียวกัน ให้เปลี่ยนเป็น

$description_data1=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[0]->description);   
$description_data2=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[1]->description);   
$description_data3=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[2]->description);   
$description_data4=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[3]->description);

เวลาเรียกใช้ ก็เรียกเป็น
$description_data1[0] เป็นรูป $description_data1[1] เก็บ description

ส่วนรูปกำหนด โดยใช้ style ไว้ก่อน  <div id="featured" > 

<style type="text/css">
.ui-tabs-nav-item a img{
	width:80px;height:50px;	
}
</style>
<div id="featured" > 
..... .. .. . .

 



ninenik 15-08-2010
 ความคิดเห็นที่ 9

ขอบคุณมากค่ะ



atomy_mink 16-08-2010 15:03
 ความคิดเห็นที่ 10

เอาโค้ดแบบที่เสร็จเรียบร้อยแล้วมาโพสต์ลงให้ค่ะ เห็นมีคนสนใจต้องการดึง rss แล้วจัดรูปแบบประมาณนี้

ก่อนอื่นต้องขอบอกว่าอันที่เอามาโพสต์ลงนี้เป็นการหน้าที่ดึง rss ออกมาโชว์ ส่วนรูปแบบการสไลด์นี้ไม่ได้เอามาโพสต์ลงด้วย

นั่นเพราะคนทำได้สับสนกับตัวไฟล์ค่ะ คือหาไฟล์ไม่เจอค่ะ ต้องขออภัยด้วย แต่ใครที่ต้องการสไล์แบบนี้ สามารถเข้าไปที่ลิ้งค์นี้ค่ะ

www.dek-ac.com/d-sign2u/knowledge31-มาทำข่าวแบบ-slide-:-Create-Featured-Content-Slider-Using-jQuery-UI.html

ซึ่งสไล์ที่ทำก็ใช้ตัวนี้เลยค่ะ แล้วนำมาดัดแปลง css ตามความต้องการ

และโค้ดที่ดึง rss ตามนี้เลยค่ะ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Featured Content Slider Using jQuery - Web Developer Plus  Demos</title>
<link rel="stylesheet" type="text/css" href="content-slider/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
    jQuery.noConflict();
    jQuery(document).ready(function(){
        jQuery("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
</script>
</head>
<body>
<?php
$url_feed = 'http://rssfeeds.sanook.com/rss/feeds/sanook/sport.football.xml'; // กำหนด xml feed ที่ต้องการ

// ส่วนเริ่มต้นการใช้งานฟังก์ชัน curl ในการเรียกใช้ไฟล์ xml feed
$ch = curl_init($url_feed);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$get_content = curl_exec($ch); // เก็บรูปแบบข้อความ xml ไว้ในตัวแปร $get_content
curl_close($ch);
// สิ้นสุดการใช้งานฟังก์ชัน curl  ในการเรียกใช้ไฟล์ xml feed

// แปลงข้อความที่อยู่ในรูปแบบ xml เป็นตัวแปร object
$parsed_xml = simplexml_load_string($get_content);


// จำนวนรายการ feed ทั้งหมด
count($parsed_xml->channel->item);
    $description_data1=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[0]->description);
    $description_data2=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[1]->description);
    $description_data3=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[2]->description);
    $description_data4=explode("&nbsp;&nbsp;",$parsed_xml->channel->item[3]->description);
?>   

        <div id="featured" >
        <!--โชว์ thumbnail รูปเล็ก และรายละเอียด -->
          <ul class="ui-tabs-nav">
            <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><?=$description_data1[0]?><span><?=$parsed_xml->channel->item[0]->title?></span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><?=$description_data2[0]?><span><?=$parsed_xml->channel->item[1]->title?></span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><?=$description_data3[0]?><span><?=$parsed_xml->channel->item[2]->title?></span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><?=$description_data4[0]?><span><?=$parsed_xml->channel->item[3]->title?></span></a></li>
          </ul>

        <!-- โชว์รูป slide รูปใหญ่รูปที่ 1 -->
        <div id="fragment-1" class="ui-tabs-panel" style="">
            <img src="<?=$parsed_xml->channel->item[0]->enclosure->attributes()?>" alt="<?=$parsed_xml->channel->item[0]->title?>" width="400" height="250"/>
             <div class="info" >
                <h2><a href="<?=$parsed_xml->channel->item[0]->link?>" ><?=$parsed_xml->channel->item[0]->title?></a></h2>
                <p><?=$description_data1[1]?></p>
             </div>
        </div>

       <!-- โชว์รูป slide รูปใหญ่รูปที่ 2 -->
        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="<?=$parsed_xml->channel->item[1]->enclosure->attributes()?>" alt="<?=$parsed_xml->channel->item[0]->title?>" width="400" height="250"/>
             <div class="info" >
                <h2><a href="<?=$parsed_xml->channel->item[1]->link?>" ><?=$parsed_xml->channel->item[1]->title?></a></h2>
                <p><?=$description_data2[1]?></p>
             </div>
        </div>

        <!-- โชว์รูป slide รูปใหญ่รูปที่ 3 -->
        <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="<?=$parsed_xml->channel->item[2]->enclosure->attributes()?>" alt="<?=$parsed_xml->channel->item[0]->title?>" width="400" height="250"/>
             <div class="info" >
                <h2><a href="<?=$parsed_xml->channel->item[2]->link?>" ><?=$parsed_xml->channel->item[2]->title?></a></h2>
                <p><?=$description_data3[1]?></p>
             </div>
        </div>

        <!-- โชว์รูป slide รูปใหญ่รูปที่ 4 -->
        <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="<?=$parsed_xml->channel->item[3]->enclosure->attributes()?>" alt="<?=$parsed_xml->channel->item[0]->title?>" width="400" height="250"/>
             <div class="info" >
                <h2><a href="<?=$parsed_xml->channel->item[4]->link?>" ><?=$parsed_xml->channel->item[3]->title?></a></h2>
                <p><?=$description_data4[1]?></p>
             </div>
        </div>

        </div>
    </div>

</body>
</html>

เวลานำไปใช้ก็ตั้งชื่อว่า index.php แล้ว save ไปในโฟลเดอร์ slide จากลิ้งค์ที่ให้ดาวน์โหลดข้างบน การเรียกใช้งานก็ include "featured-content-slider/index.php" หรือจะเอาโค้ดนี้ไปแปะตรงๆเลยก็ได้

***** สำคัญมาก คือ ดู path ไฟล์ให้ดีว่าเรียกถูกรึเปล่า เช่น การเรียกใช้ css

***** code อันนี้จะมีปัญหาอยู่ตอนดึงรูปใหญ่ออกมาโชว์ นั่นคือไม่มีรูป เพราะอันนี้่ดึงมาจาก sanook.com ซึ่งตอนแรกนั้นตัว xml ของ sanook มีรูปใหญ่อยู่ด้วย แต่ว่าตอนนี้รูปใหญ่ของ xml sanook ไม่มีแ้ล้วค่ะ ซึ่งอาจต้องลองดูของเว็บอื่นแทน และวิธีการนำมาใช้งานอาจแตกต่างจากอันนี้

และ code อันนี้เป็นแค่้แนวทางเบื้องต้นเท่านั้น ไม่ใช่โค้ดระดับเทพ  ยังมีอีกหลายจุดที่น่าจะแก้ไขได้ดีกว่านี้ หากมีอะไรผิดพลาดต้องขออภัยด้วยค่ะ

และขอบคุณพี่นิคที่ให้คำปรึกษาด้วยค่ะ
 



Atomy 17-01-2011 20:54
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ