itshee

บล็อกนี้เป็นซีรีส์ของ คู่มือปรุงเว็บไซต์ฉบับ non-programmer โดยนำเคสของ stylelurf.com มาให้ดูกันครับ จะเป็นการเล่าของการทำเว็บไซต์ยากๆ โดยไม่จำเป็นต้องรู้โค้ด PHP หรือ MySQL ซักนิดเดียว 

Drupal: 6.x
MODULES ที่ใช้:

• Views

มอจูล (module) หลักของดรูปัล (Drupal) ต่อจาก CCK ก็คงไม่มีตัวไหนเกินหน้าที่ วิวส์ (Views) แล้ว ความสามารถหลักของวิวส์ก็คือ การดึงข้อมูลจากฐานข้อมูลมาแสดง โดยเราไม่ต้องไปปล้ำกับโค้ด เพียงแต่เลือกค่าที่ต้องการ แล้วทางวิวส์จะดึงข้อมูลมาให้อัตโนมัติ โดยวิวส์รุ่นปัจจุบันคือ Views 2สำหรับ Drupal 6.x สำหรับการติดตั้งวิวส์นั้นก็ติดตั้งเหมือนมอจูลอื่นทั่วไป ลองดูได้ที่ พื้นฐาน Drupal Modules โดยเปิดตัว Views และ Views UI (หรืออาจจะเปิดตัวอื่นแล้วแต่ชอบ)

วิวส์นั้นเมื่อดึงข้อมูลมา สามารถแสดงข้อมูลได้หลายแบบ ไม่ว่า แสดงเป็นตาราง ทำเป็นลิสต์ ทำเป็นกริด ซึ่งถ้าลงมอจูลตัวอื่นเพิ่มขึ้นมา ก็สามารถทำเป็น
* สไลด์โชว์ - แสดงภาพเป็นสไลด์โชว์ แว็บไปแว็บมา
* แอคคอร์เดียน - แสดงเนื้อหาในลักษณะเปิดปิด เหมือนอย่างเว็บแอปเปิล
* แคเรอเซล - แสดงเนื้อหาแบบสไลด์ทีละหน้าแบบเว็บ Stylelurf.com ในส่วนล่าง
และอื่นๆ อีกมากมาย ซึ่งวิวส์นี้เกือบจะเป็นเครื่องมือหลักของเหล่าคนธรรมดาที่ไม่ใช่โปรแกรมเมอร์เลยก็ว่าได้ (โปรแกรมเมอร์หลายคนก็ชอบใช้เพราะไม่ต้องไปเสียเวลากับโค้ด)


วิธีการสร้าง Views นั้นทำได้ไม่ยาก แต่งงได้มากมายสำหรับมือใหม่ ลองทำตามวิธีคร่าวๆ ครับ

ก่อนจะเริ่มวิวส์ ให้สร้างเนื้อหาขึ้นมาซัก 4-5 หน้าก่อน เพราะไม่งั้นวิวส์พอดึงข้อมูลมา มันจะไม่มีข้อมูลอะไรให้ดึง แล้วก็จะงงอีกว่าทำไมทำเสร็จ แล้วไม่มีอะไรเกิดขึ้น (สร้างเนื้อหาโดยเลือก create content) โดยตัวอย่างในนี้จะดึงชื่อหัวข้อของแต่ละหน้ามาแสดง โดยเรียงลำดับจากวันที่โพสต์หลังสุด สำหรับตัวอย่างอื่นดูได้ในเอนทรีถัดไป

ลำดับการทำงานวิวส์ของแต่ละคนก็จะต่างไป แต่ของผมจะทำตามแสดงด้านล่าง เพื่อไม่ให้ตัวเองงง ในการเซ็ตค่าวิวส์ โดยขั้นตอนทั้งหมดก็คือ

1. เมื่อติดตั้งเสร็จเข้าไปที่ Admin → Site building → Views
2. กด Add แล้วจะมีให้ใส่ชื่อ (view name) ก็ใส่พร้อมคำอธิบาย (view description) และแท็ก (ไม่ใส่ก็ได้ แต่จะสะดวกในตอนหลังถ้ามีหลายวิวส์
3. View type อันนี้ต้องดูว่าเราจะดึงข้อมูลจากตารางไหนในฐานข้อมูล ถ้าคิดไม่ออกก็เลือก Node เพราะส่วนใหญ่จะอยู่ในนั้น แล้วก็กด Next
4. คราวนี้จะเป็นส่วนเซ็ตค่าซึ่ง ผมเรียงลำดับตามภาพด้านบน โดย
   1. Field - ส่วนนี้จะบอกว่าเราต้องการดึงข้อมูลอะไร - ตัวอย่างนี้ให้กด + แล้วลองเลือก Node: title แล้วกด add พอกดแล้วจะมีอีกหน้าให้เราตั้งค่า ก็ยังไม่ต้องเปลี่ยนอะไรกด Update
   2. Filters - ตัวกรองข้อมูล เช่นถ้าเรามีข้อมูลหลายส่วน เราสามารถเลือกตรงนี้ได้ - แต่ตัวอย่างนี้จะข้ามไป
   3. Sort Criteria - เรียงลำดับ - ตัวอย่างนี้จะเรียงจากวันที่โพสต์ล่าสุดไว้บน ก็เลือก Node: Post Date เมื่อกด Add ไปหน้าถัดไปเราก็เลือก sort order เป็น Descending
   4. Display - ต้องการแสดงอย่างไร
      • ถ้าเราต้องการทำเป็นบล็อค (block) ไว้ประกอบหน้าแรก เราก็เลือกจากดรอปดาวน์ว่า block แล้วกด add display
      • ถ้าต้องการแสดงทั้งหน้าเลย ให้เลือก เพจ (page) แล้วกด add display พอเลือกเสร็จ ตรงใต้ basic settings จะมีช่องแพธ (path) ออกมาให้ใส่ ให้ใส่ชื่อที่ต้องการ อย่างเช่นตัวอย่างนี้ใส่ mystories
   5. Basic settings - อันนี้จะเลือกได้ว่าแสดงหน้าตาอย่างไร - ตัวอย่างนี้ให้เลือกที่ Style แล้วเลือกเสร็จด้านล่างเลือก HTML List เราก็จะได้เป็นลิสต์ออกมา
5. พอกดเสร็จ คราวนี้ด้านล่างตรงพรีวิว เราจะเริ่มเห็นตัวอย่างข้อมูลที่เราเลือกมาแล้ว
6. เมื่อทำการเซฟ วิวส์นั้นก็จะถือว่าสร้างเสร็จ ต้องระวังเพราะมีหลายคนพอทำวิวส์เสร็จ แล้วไม่ได้เซฟ ซึ่งพอจะใช้งาน มันจะไม่ขึ้นอะไรมาก็จะงงได้ คราวนี้ก็ลองเข้าไปดู โดย
   
   • ถ้าเราเลือก display เป็น block เมื่อเราเข้าไปใน Site Building → Block ก็จะเห็น block นั้นโผล่ขึ้นมา ให้เราลากไปใส่ในตำแหน่งที่ต้องการ
   •  หากเราเลือก display เป็น page ให้เข้าไปที่เว็บไซต์เราตามด้วยชื่อแพธที่เราเลือก เช่น http://example.com/mystories (ตะกี้ตั้งไว้ว่า mystories) เราก็จะได้หน้านั้นขึ้นมา

อันนี้ก็เป็นตัวอย่างพื้นฐานเริ่มต้นสำหรับการสร้างวิวส์ ซึ่งหากเข้าใจคอนเซ็ปต์ของวิวส์แล้ว การดึงข้อมูลจากฐานข้อมูลก็จะไม่ยากเท่าไร คราวต่อไปจะมาแสดงตัวอย่างของวิวส์อีกตัว