• knife set
  • feed

    รู้จักกับ Views ใน Drupal

    posted on 08 Jun 2009 09:02 by itshee in Drupal

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


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

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

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


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

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

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


    Drupal Views

    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) เราก็จะได้หน้านั้นขึ้นมา

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

    สมแล้วกับคำว่าสุดยอดครับ

    #10 By เรียน drupal (125.24.33.71) on 2010-09-01 12:36

    สุดยอดคับ อยากให้มีเว็บแบบนี้ของไทยเยอะ ๆ เป็นกำลังใจให้ครับ big smile

    #9 By bumper (125.24.196.136) on 2010-04-19 23:01

    บทความนี้ทำให้เข้า views มากขึ้น
    ขอบคุณครับ

    #8 By karoon (202.129.59.146) on 2010-02-23 11:42

    เก็บความรู้ ขอบคุณมากค่ะ big smile

    #7 By สินเชื่อ (124.120.118.125) on 2009-12-18 11:53

    เข้าใจ views เบื้องต้นเพราะentry นี้เลยค่ะงมเองนานมาก งงจนตาลาย
    ขอบคุณมากๆสำหรับบทความดีๆค่ะ

    #6 By GLASSESGIRL (58.8.120.235) on 2009-11-13 14:24

    ขอบคุณครับ

    #5 By prachan (124.120.78.93) on 2009-08-15 00:41

    โฮ้ว ใช้ได้เรยฮะ

    #4 By puno(ii) on 2009-08-14 10:15

    Excellent little cookbook, I\'m sure it will bring some movement to the top into the opensource and hospitality industry of thailand!

    why don\'t you localize it for drupal.org case study showing the success of your site with excellent conversion?

    I\'ll be happy to provide you with a free consultation for the optimization.

    #3 By Thai Hotel Internet Marketing (58.8.3.103) on 2009-07-15 03:46

    ขอบคุณครับ มาอ่านแบบ งง

    #2 By เข้าใจแล้ว (125.26.136.21) on 2009-07-12 12:25

    ขอบคุณครับ กำลังงงอยู่พอดี
    love you

    #1 By นายตัวแสบ on 2009-07-12 11:25