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

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

ในตอนที่ 2 ของบทความเรื่องนี้ เราได้ทำการสร้างไฟล์ XSL/XSLT เก็บไว้แล้ว มาในตอนที่ 3 นี้ ซึ่งเป็นบทความตอนสุดจบของเรื่องการสร้างโปรแกรมอ่าน RSS/XML จะเป็นการนำเอาไฟล์ XSL/XSLT ที่เราสร้างกันไว้นำมาใช้งานกันครับ เพราะ โดยปรกติ เราจะไม่นำไฟล์ XSL/XSLT ไปใช้งานแสดงผลโดยตรงกัน แต่จะใช้งานผ่านโปรแกรมอื่น ๆ กัน เช่น โปรแกรมภาษา PHP ที่จะนำเสนอในบทความนี้เป็นต้น ซึ่งมีวิธีการพัฒนาด้วยโปรแกรม Dreamweaver ดังนี้

วิธีการนำ XSLT ไปใช้กับ PHP

2. เมื่อได้ไฟล์ PHP ขึ้นมาแล้วจากนั้นให้เราไปที่ Insert จากนั้นเลือกที่ Data เลือกไปที่ XSL Transformation ดังรูป เพื่อเรียกใช้งาน XSLT ที่เราสร้างเก็บไว้จากบทความในตอนที่ 2 (คลิกเพื่ออ่านตอนที่ 2)

3. เมื่อเลือกไปที่ icon ดังในข้อ 2 แล้ว โปรแกรมจะทำการเปิดหน้าต่าง XSLT Transformation ขึ้นมา จากนั้นให้เรากำหนดค่า ดังรูป XSLT File : คือ ไฟล์ที่สร้างไว้แล้วในบทความตอนที่ 2
XML URI : คือ URL ของไฟล์ RSS ที่เราใช้ในบทความตอนที่ 2
เมื่อกำหนดค่าได้แล้ว ทำการกดที่ปุ่ม OK

ในขั้นตอนนี้ เราต้องเปิด Service ของ Web Server ที่เครื่องเราไว้ด้วยนะครับ และต้องมีการตั้งไซต์ทำงานร่วมกับ Web Server ด้วยครับ (ดูวิธีการตั้งไซต์)

4. ให้เรากลับมาที่โปรแกรม Dreamweaver จะพบว่าโปรแกรมมีการ Insert ให้ดังรูป

5. ทำการกด F12 เพื่อ Preview ดูการแสดงผลกับ Web Browser ซึ่งจะมีการแสดงผลเป็นข้อมูลที่ได้มาจากข้อมูล RSS ที่เราเรียกใช้ ดังรูป

เป็นอันเสร็จสิ้นขั้นตอนของการเรียกดูข้อมูลจาก RSS ที่เราต้องการเรียกอ่านจากเว็บไซต์ต่าง ๆ ครับ

การสร้าง Link ให้กับหัวข้อเพื่อกดไปอ่านรายละเอียดของข่าว

1. ให้เรากลับไปเปิดไฟล์ XSL/XSLT ของเราขึ้นมา (ไฟล์ที่สร้างกันในตอนที่ 2)
2. จากนั้นให้เราทำการเลือกไปที่ข้อมูลที่เป็นหัวข้อของข่าว ดังรูป

3. ที่ Properties ให้เราไปที่ Link จากนั้นกดที่ปุ่ม Brows..ดังรูป

4. เมื่อปรากฏหน้าต่างให้เราเลือกไฟล์ที่จะสร้าง Link ให้เราทำการเลือกไปที่ Data Sources ดังรูป

5. โปรแกรมจะแสดง Node ของ RSS ให้เราเลือกข้อมูลที่จะทำไปสร้างเป็น Link ให้เราเลือกไปที่ Node ที่ชื่อว่า link ดังรูป

6. จากนั้นกดปุ่ม OK แล้วทำการ Save ไฟล์ XSLT ของเรา

7. กลับไปที่ไฟล์ PHP ของเราที่สร้างไว้จากขั้นตอนแรก ทำการกด F12 เพื่อ Preview ดูผลลัพธ์กับ Web Browser จะได้ ดังรูป จะพบว่าที่หัวข้อข่าวได้กลายเป็นจุด Link เชื่อมโยงไปยังรายละเอียดของข่าวยังเว็บไซต์เจ้าของข่าวแล้ว

ปล. สาเหตุที่เราต้องกลับไปสร้าง Link กับไฟล์ XSL/XSLT เนื่องจากว่า ไฟล์ XSL จะมีหน้าที่ในการอ่านข่าว และตบแต่งข้อมูลที่ได้รับจาก RSS/XML ครับ เราจะตบแต่งการแสดงผลอะไรให้มากระทำที่ไฟล์นี้ ไฟล์ PHP เป็นแค่เพียงไฟล์ที่จะเรียกใช้ XSL/XSLT นี้เพื่อนำไปแสดงผลยังหน้าเว็บเท่านั้น ซึ่งเราจะไม่ตบแต่งข้อมูลใด ๆ จากไฟล์ PHP ครับ

เรียนรู้กันไปอีกขั้นนะครับสำหรับการใช้งาน Dreamweaver ของเรา จากที่แต่ก่อนใครเคยสงสัยว่าจะใช้งาน XSL Transformation กันอย่างไร ? โปรแกรมมี Option นี้ไว้เพื่ออะไร ? ก็คงได้คำตอบกันแล้ว
...ในวิธีการเดียวกันนี้ คุณยังสามารถนำไปประยุกติ์ใช้งานกับไฟล์ XML อื่น ๆ ได้ด้วยครับ ไม่ใช่ใช้ได้แค่กับ RSS ในการอ่านข้อมูลข่าวตามบทความนี้เท่านั้น...อย่างไรก็ลองนำไปประยุกติ์ใช้งานกันดูครับ
ขอบคุณครับ

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

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

การ Optimize รูปภาพ ด้วย Dreamweaver

เรื่อง : การ Optimize รูปภาพโดยใช้โปรแกรม Dreamweaver การใช้งานรูปภาพประกอบหน้าเว็บเรานั้น สิ่งหนึ่งที่เราต้องคำนึงถึง...  

การสร้างข้อความในแบบ Tooltip กับ Dreamweaver (Spry Tooltip, CS Only)

เรื่อง : การสร้างข้อความแบบ Tooltip ด้วยโปรแกรม Dreamweaver *บทความนี้เฉพาะโปรแกรม Dreamweaver เวอร์ชั่น CS5, CS6 สำหรับ CC ไม่มีให้เรียกใ...  

สร้าง Link เปิดหน้าต่างใหม่ไม่มี Tool Bar

เรื่อง : สร้าง Link เปิดหน้าต่างใหม่ไม่มี Tool Bar มีหลายท่านสอบถามกันมาบ่อยเหลือเกินว่า อยากให้ทำการสร้าง Link ที่พอเมื่อ ...  

CSS Layout ด้วย Dreamweaver ตอนที่ 2

เรื่อง : CSS Layout ด้วย Dreamweaver ตอนที่ 2เมื่อเราได้ทำการกำหนดโครงสร้างของเว็บเพจเราไปจากในตอนที่ 1 ของบทความนี้แล้ว ต...