About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

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


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

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

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

1. ทำการสร้างไฟล์ใหม่ขึ้นมาเป็นไฟล์ PHP พร้อมทั้งทำการ Save ไฟล์เก็บไว้ ดังรูป
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

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



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

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

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

ตรวจสอบโค้ด HTML ว่าได้มาตรฐานหรือไม่

เรื่อง : ตรวจสอบมาตรฐานของ HTML Code ด้วย Dreamweaver โค้ด HTML ที่ใช้ในการพัฒนาเว็บ...  

เก็บ Code ที่ชื่นชอบไว้ใช้นาน ๆ (Snippets Panel)

เรื่อง : การเก็บโค้ดโปรแกรมไว้ใช้กับโปรแกรม Dreamweaver เคยมีแฟนเว็บบางท่านเข้ามาถามว่า "พี่มีวิธีเก็บโค้ดที่เร...  

การ Export สไตล์ชีต CSS ที่อยู่ในเว็บเพจไปเป็นไฟล์ CSS (External Style Sheet)

เรื่อง : Export โค้ด CSS ไปเป็น External Style Sheet ด้วย Dreamweaver โค้ด CSS ที่ได้สร้างไว้กับไฟล์เว...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*