แจกของฟรี

พูดถึง iframe คนที่เป็นเวปมาสเตอร์หลายท่านคงรู้จัก เพราะมันสามารถแทนคำสั่ง Include ได้และสามารถใช้ดึงข้อมูลต่างๆ ออกหน้าเวปได้ สำหรับท่านที่เรียนรู้การเป็นเวปมาสเตอร์ ไม่ควรพลาดบทความนี้ ที่จะเจาะลึกไปถึงประโยชน์ข้อดีและข้อเสียของการใช้ iframe กัน

รู้จัก iframe ทำไมต้อง iframe
อย่างที่พูดมาขั้นต้นแล้วว่า iframe เป็นการดึงข้อมูลไฟล์เอกสาร html หรือ สคริ๊บต่างๆ ออกมาหน้าเวป โดยความจริงแล้วการดึงข้อมูลเหล่านั้นขึ้นหน้าเวปนั้น จำเป็นต้องใช้ พวกสคริ๊บต่างๆ เช่น cgi ,asp, php ต่างๆ ซึ่งเหล่านี้ต้องใช้คำสั่ง incude คือ การดึงข้อมูลเขามา ออกหน้าเวป นั้นเอง ซึ่งจำเป็นต้องมี Server ที่รองรับระบบ SSI (Server Side Include)ถึงจะเอาออกหน้าเวปได้ ที่นี้เวปที่กำลังพัฒนาหรือริเริ่มทำที่ใช้ host free อยู่อาจจะมีปัญญาเรื่องนี้เยอะเหมือนกัน เพราะปัจจัยหลัก คือ ความอยากของเวปมาสเตอร์นั้น อยากจะมีเวปบอร์ดขึ้นหน้าเวปได้เหมือนเวปต่างๆ เขา คิดว่าหลายคนคงผ่านความรู้สึกนี้มา เหมือนกันเมื่อก่อนพัฒนาไทยกราฟ ก็มีปัญหาแบบนี้เช่นกัน เลยต้องศึกษาการใช้ สคริ๊บพวก cgi เพื่อทำเวปบอร์ดขึ้นมาหน้าเวป เมื่อทำได้แล้วก็ไม่รู้จะทำยังไงให้มันออกหน้าเวป จนได้เรียนรู้หลักการ Include จนสามารถนำเอาเวปบอร์ดออกหน้าเวปได้ และพอมาทำเป็นระบบ php ก็ง่ายอะไรเช่นนี้ที่จะเอาออกหน้าเวปได้ แต่มีปัญหาอย่างหนึ่งคือ ตัวเวปบอร์ดเก่าซึ่งเป็นเวปบอร์ด โชว์รูปภาพ ซึ่งมีฐานข้อมูลมากถึงการ 1000 ผลงานของสมาชิก แหละนั้นก็คือ เสน่ของเวป ก็เกิดความอยากขึ้น คือ อยากจะเอา cgi include ออกหน้า เวป php และคิดว่าถ้าเอาออกหน้าเวปได้คงจะทำให้คนเข้าถึงจุดเด่นในเวปได้ ก็ไปค้นหาข้อมูลใน google โดยค้นหาคำว่า cgi include php ก็ไม่เจอ เจอบ้างแต่ งงเหมือนกันในการนำเอาไปใช้ ทำยังไงหนา... มันน่าจะมีวิธีที่ง่ายกว่านี้นะ และแล้วจนมารู้จักเจ้าตัว iframe เป็นคำสั่ง ดึงข้อมูลออกหน้าเวปง่ายดาย ก็สามารถนำเอาเวปบอร์ดโชว์กราฟิก ขึ้นหน้าเวปได้ เย้... ความอยากก็สำเร็จอีกแล้วแล้วครับท่าน...

เรียนรู้หลักการวิธีการใช้ iframe
การจะใช้ iframe ได้นั้นแน่นอน ท่านต้องเข้าใจ html พอสมควรหรือพอรู้ว่าอะไรเป็นอะไรบ้างใน code html เพราะเจ้า iframe นั้นมันจะทำการ แทรก ใน code html เท่านั้น เอาหละเริ่มการใช้ iframe ณ บัดนี้ 

ขั้นตอนนี้1. เมื่อท่านได้ออกแบบหน้าเวปโดยผ่านโปรแกรมต่างๆ แล้ว ณ ที่นี้จะใช้ Dream weaver MX สาธิตวิธีการทำ ดังตัวอย่าง. ท่านได้ออกแบบหน้า Layout เวปจาก Dream โดยการทำโครงร่าง Table คำนวนออกมาเป็นหน้าเวป แล้วให้ท่านทำการ ทำเครื่องหมายหรือ สัญลักษณ์ ตัวอย่างจะใช้คำว่า iframe ใว้ในช่อง Table ที่เราต้องการให้เวปบอร์ดออกในตำแหน่งหน้าแรกของเวป
 
 
 

 
 ขั้นตอนที่2. ให้ทำการคลิกที่ปุ่ม Show code view หรือมาที่คำสั่ง View --> Code ก็ได้เพื่อให้แสดง Code html ออกมาหลังจากนั้นเราก็ทำการหา จุดที่เราทำเครื่องหมายหรือใส่ข้อความบอกตำแหน่งใว้ ถ้าหาไม่เจอยังไงก็ค้นหาได้โดยมาที่คำสั่ง Edit --> Find and Replace จากนั้นให้พิมพ์คำที่ต้องการลงไปแล้วกดปุ่ม Find next ก็จะเจอเครื่องหมายหรือตัวอักษรที่บอกตำแหน่ง code ได้โดยสังเกตจากเส้นทึบที่ทับ ตัวอักษร iframe ที่เราทำใว้ ดังตัวอย่าง.
 
 
 
ขั้นตอนที่3. เมื่อรู้ตำแหน่ง code ที่เราทำสัญลักณ์ใว้แล้วหลังจากนั้นให้ทำการพิมพ์คำสั่ง iframe ลงไปดังตัวอย่าง.
 
 
 
ขั้นตอนที่4. จาก code สิงที่เราต้องแก้เพื่อสามารถใช้ดึงข้อมูลได้นั้น คือ ส่วนของ src จะดึงในรูปแบบของ http://www แล้วตามด้วย URL ที่อยู่ของไฟล์ในตัวอย่าง สคริ๊บหน้าแรกของเวปบอร์ดที่โชว์กระทู้รวมอยู่ตำแหน่งที่ http://www.thaigraph.com/cgi-bin/webboard/view2.cgi?board=board_1 เพื่อจะดึงออกมาหน้าเวป โดยมีข้อแม้ว่า ข้อมูลนั้นต้องเป็นแบบข้อมูลเดี่ยวๆ โดยไม่มีองค์ประกอบอื่นๆ เกี่ยวข้องเช่น เมนูด้านบนด้านข้างต่างๆ คือเป็นหน้าข้อมูลล้วนๆ เลย ดังภาพตัวอย่าง.
 

 
ขั้นตอนที่5. จาก Code iframe ในขั้นตอนที่3. เราต้องปรับความกว้างความสูงให้เข้ากับขนาดของข้อมูลถ้าไม่ปรับได้ในขนาดพอดีจะเกิด SCROLLBAR ด้านข้างและด้านล่างเกิดขึ้นทำให้ไม่สวยแล้วดูออกมาเป็น iframe ควรจะวัดให้ขนาดพอดีหรือเลยมานิดหนึ่ง เพื่อให้ดูกลมกลืนกับเวปหน้าแรกของเรา เทคนิควิธีการวัดขนาด โดยใช้การ Print Screen หน้าเวปลงในPhotoshopจากนั้นให้ทำการใช้เส้น Selection วัด โดยใช้อุปกรณ์ Marquee tool สร้างเส้น Selection จากนั้นให้มาคำสั่ง Edit --> Copy แล้วมาที่คำสั่ง File --> New แล้วให้ สังเกตดูค่า Width และ Heigth จากนั้นก็เอาค่านั้นไปใส่ค่าที่ได้ เอาไปใส่ใน Code iframe แล้วลองเอาไฟลืหน้าแรก Upload ขึ้น Server แล้วลองทดสอบดูจนได้ iframe ที่ดูกลมกลืนกับเวป ก็ เป็นอันเสร็จกระบวนการ
 


 

 
 สรุปข้อดีข้อเสียงของการใช้ iframe
ข้อดี : ง่ายในการดึงข้อมูลมาออกหน้าเวปได้ดั่งใจโดยผ่าน code html
ข้อเสีย : ทำให้การโหลดของเวปช้าลงบ้าง เพราะดึงข้อมูลอีก Windows หนึ่งมาออกอีกหน้า Windows หนึ่งทำให้เหมือนเอาสองหน้า จอมาเบียดเสียดในหน้าเดียว เป็นไงบ้างขอรับพอทำได้ไหมคงสามารถนำมาประยุกต์ได้เยอะเลยหละสำหรับเวปมาสเตอร์มือใหม่ทุกท่าน เพื่อสามารถนำมาประยุกต์ และพัฒนาเวปได้ดียิ่งขึ้น และเพิ่ม Vision (มุมมอง) ในการทำระบบเวปไปอีกขั้นหนึ่ง จงจำใว้ว่าเมื่อเราได้เรียนรู้สิ่งใดสิ่งหนึ่งระยะเวลาจะทำ ให้ Vision (มุมมอง) ของเราในเรื่องนั้นกว้างใกล้ยิ่งขึ้นถ้าเราไม่คิดที่จะหยุดค้นหาและพัฒนามัน ...
 
"ผู้เรียนรู้ย่อมจักรู้จริงและเข้าใจในสิ่งที่เรียนรู้"
ขอปัญญาเกิดแด่ท่าน ธนา mastertana



ที่มา: http://www.thaigraph.com/thread-178-1-1.html