About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖

Go to Post-iT Sign Guestbook

ค้นหาข้อมูลใน DwThai.Com

สร้างโปรแกรมอ่าน RSS ด้วย Dreamweaver ตอนที่ 2 [Article ID : 92]

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

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

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

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

ตัวอย่าง
http://www.manager.co.th/RSS/Crime/Crime.xml

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

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

1. เปิดโปรแกรม Dreamweaver ขึ้นมา จากนั้นทำการ New File ขึ้นมาใหม่ โดยทำการสร้างไฟล์ผ่านหน้าต่าง New Document โดยที่หน้าต่างนี้ให้เลือกไปที่ Bank Page -> XSLT (Fragment) ดังรูป

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

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

3. จากข้อ 2 เราจะได้ไฟล์ใหม่ขึ้นมาจากนั้นให้ทำการ Save ไฟล์นี้เสียก่อน ซึ่งเมื่อ Save แล้ว จะได้ไฟล์เป็นไฟล์นามสกุล XSL เช่น rss-news.xsl เป็นต้น

4. จากนั้นให้เรามาที่หน้าต่าง Bindings (Ctrl+F10) จะปรากฏมี Node ของข้อมูลต่าง ๆ ตาม Format ของข้อมูลในแบบ RSS ปรากฏ ดังรูป

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

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

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

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

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

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

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

แนะนำการตบแต่งข้อมูล

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

แสดงผล

เมื่อเราทำการกดปุ่ม F12 เพื่อดูผลลัพธ์กับ Web Browser จะได้ ดังรูป *สำหรับการใส่สีสรรให้แก่ข้อความ นั้นต้องกระทำผ่าน CSS นะครับ ซึ่งผมไม่ได้กล่าวถึงไว้ในที่นี้

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

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

สร้างโปรแกรม Guestbook ด้วย Dreamweaver + PHP + MySQL ตอนที่ 3

เมื่อเราได้ทำการกำหนดรูปแบบการแสดงผลของหน้าตา Guestbook ของเราแล้ว ต่อมาเราจะทำการเรียกข้อมูลจากฐานข้อมูลขึ้นมาแสดงกับหน้าตาแสดงผลท...

เปิดหน้าต่าง Code เพื่อแก้ไขโค้ดได้อย่างรวดเร็ว

เรื่อง : เปิดหน้าต่างเพื่อแก้ไข Source Code เว็บเพจ (Code Inspector) ทุกครั้งที่ผู้ใช้งานโปรแกรม Dreamweaver ...

Link นี้ไม่ขีดเส้นใต้ (Underline Style)

เรื่อง : สร้าง Text Link ไม่ให้มีเส้นใต้ เห็นมีผู้สอบถามมาหลาย ๆ ท่านว่าทำอย่างไรให้ Link ซึ่งเป็น Text หรือลักษณะข้อความ...

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 3 (จบ)

เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 3 (จบ) กลับมาต่อกันอีกสักตอนสำหรับเรื่องของการใช้งานโป...