เรื่อง : สร้างโปรแกรมอ่าน RSS ด้วย Dreamweaver ตอนที่ 2

หลังจากที่ในตอนที่ 1 ของบทความได้แนะนำกล่าวถึงการกำหนดค่าต่าง ๆ เพื่อให้โปรแกรม Dreamweaver CS3 ของเรา และระบบเครื่องคอมพิวเตอร์ของเราสามารถพร้อมใช้งานการสร้างโปรแกรมอ่าน RSS แล้ว ในตอนที่ 2 ของบทความนี้ จะแนะนำการใช้งานโปรแกรม Dreamweaver เพื่อสร้างโปรแกรมกันครับ

หา URL เป้าหมายของ RSS

ในขั้นตอนแรกเราต้องทำการหา URL ของ RSS ที่เราต้องการมาใช้งานกับเว็บเรากันเสียก่อน ซึ่งท่านอาจจะหาโดยไปที่เว็บของสำนักข่าวใด ๆ ก็ได้ เช่น manager.co.th เป็นต้น แต่ถ้าเป็น RSS ของ DwThai.Com ก็ใช้ URL ตามนี้

http://www.dwthai.com/dwthai_rss.php

สร้างไฟล์ XSL เพื่อนการอ่านข้อมูลจาก RSS และการตบแต่งข้อมูล

อย่างที่กล่าวไปแล้วในตอนที่ 1 นะครับว่า  XSL ย่อมาจากอะไร และคืออะไร ภาษาในรูปแบบ XML นั้น เราจำเป็นต้องใช้ XSL เข้ามาเพื่อช่วยในการกำหนดการแสดงผลต่าง ๆ เช่น การกำหนดข้อมูลให้มีสีสรรต่าง ๆ เป็นต้น ในขั้นตอนนี้เราจะมาเรียนรู้การใช้งาน Dreamweaver ในการสร้าง XSL กันนะครับ ซึ่งมีขั้นตอนง่าย ๆ ดังนี้

1. เปิดโปรแกรม Dreamweaver CS3 ขึ้นมาจากนั้นทำการ New File ขึ้นมาใหม่ โดยทำการสร้างไฟล์ผ่านหน้าต่าง New Document ดังรูป

ที่หน้าต่างนี้ให้เลือกที่ Bank Page -> XSLT (Fragment) ดังรูปครับ

2. เมื่อเลือกแล้วโปรแกรมจะสร้างไฟล์ใหม่ขึ้นมาให้เรา พร้อมทั้งมีหน้าต่างเกิดขึ้นเพื่อนให้เรากำหนดค่า ดังรูป

เลือกที่ Attach a remote file on the Internet แล้วกรอก URL ของ RSS ที่เราต้องการลงในช่องข้อมูล จากนั้นกดที่ปุ่ม OK ได้เลยครับ

3. ได้ไฟล์ใหม่ขึ้นมาจากนั้นยให้ทำการ Save ไฟล์นี้เสียก่อน จะได้ไฟล์เป็นไฟล์นามสกุล XSL

4. จากนั้นให้เรามาที่หน้าต่าง Application ที่ Bindings จะปรากฏมี Node ต่าง ๆ ตาม Format ของ RSS ที่เราได้ทำการเรียกดูข้อมูลปรากฏ ดังรูป

5. จากนั้นให้เราไปที่ Insert Bar เลือกไปที่ XSLT ดังรูป

แล้วเลือกที่ Repeat Region ดังรูปข้างต้น

6. ที่ XPath Expression... หน้าต่างนี้ให้เรากดที่ปุ่ม OK ผ่านไปก่อน

จะได้ปรากฎกรอบและข้อความ ดังรูป

7. ทำการเลือกข้อความ Content goes here ในกรอบ แล้วให้เราไปที่หน้าต่าง Application ของเรา เพื่อเลือกข้อมูลมาแสดงผล โดยทำการ Drag ข้อมูลจาก Node ของ RSS ที่เราต้องการนำมาแสดง ลากมาวางไว้ในกรอบ xsl:for-each ดังรูป

เมื่อเราลากข้อมูลที่ต้องการจาก RSS มาวางแล้ว จะปรากฏ ดังรูป

ในที่นี้ผมนำเอาข้อมูล หัวข้อของบทความ (title) และรายละเอียดของบทความ (description) มาแสดง

อธิบายโครงสร้าง Node ของ RSS
item	กลุ่มของข้อมูลในแต่ละ Record
title	หัวเรื่องของข่าว-บทความ
link	URL ของข่าว-บทความ
description	รายละเอียดโดยย่อของข่าว-บทความ
pubDate	วันที่ของข่าว-บทความ

8. เมื่อเราทำตามขั้นตอนที่ 7 แล้ว จากนั้นทำการ Save ไฟล์ แล้วทำการกด F12 เพื่อทำการ Preview ดูผลกับ Browser จะได้ดังรูป

9. กลับมาที่ไฟล์ XSL ของเราที่เปิดไว้กับ Dreamweaver CS3 ที่ไฟล์นี้ เราสามารถตบแต่งข้อความต่าง ๆ ได้ เหมือนกับที่เราตบแต่งข้อความโดยปรกติของ Dreamweaver กับเว็บเพจทั่วไป เช่น เราสามารถสร้างตัวหนา (ฺBold) ดังรูป ผมกำหนดให้ หัวข้อบทความเป็นตัวหนา และที่รายละเอียดย่อ ผมทำให้เยื้องเข้ามาทางขวามือ

แสดงผล

10. สำหรับการใส่สีสรรให้แก่ข้อความได้ ต้องกระทำผ่าน CSS นะครับ หากต้องการใส่สีสรรและอื่น ๆ

................................................................................................................................................................

ขอจบตอนที่ 2 ลงไปก่อนครับ
ว่าจะจบภายใน 2 ตอนสำหรับบทความนี้แต่คงไม่ได้แหละ ตอนที่ 3 เร็ว ๆ นี้ จบแน่นอน..สัญญา _/||\_