• knife set
  • feed

    Drupal

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


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

    ต่อจากคราวก่อนเรื่อง วิวส์ (Views) คราวนี้ก็มาวิวส์อีกรอบ เพราะวิวส์นั้นทำได้หลายอย่างเลยทีเดียว ถ้าเขียนหนังสือวิธีปรุงวิวส์ก็คงเขียนได้เป็นเล่ม คราวนี้ก็เป็นตัวอย่างพื้นฐานอีกตัว โดยคราวนี้ก็ตัวอย่าง Stylelurf ขึ้นมาโดยอันนี้เป็นวิวส์จากหน้า http://stylelurf.com/polls (ลองแวะดูได้) ซึ่งหน้านี้เป็นวิวส์ทั้งหน้าเลย ต่างจากคราวก่อนที่เป็นวิวส์เฉพาะบล็อค

    วิวส์นี้เป็นวิวส์ที่ดึงข้อมูลโพลจากหลายหน้ามาแสดง โดยมีเงื่อนไขคือ

    • เรียกเฉพาะหน้าที่เป็นโพล
    • แสดงแค่ 5 โพล
    • เรียงลำดับแบบสุ่ม
    • เรียกเฉพาะหน้าที่สร้างไว้ไม่เกิน 30 วัน
    ขั้นตอนก็ลำดับเดิม โดย

    Drupal Views

    วิธีทำ ก็ดังนี้ครับ ทำตามลำดับเดิมที่เลือก

    1. เข้าไปที่ Admin → Site building → Views
    2. กด Add แล้วจะมีให้ใส่ชื่อ (view name) ก็ใส่พร้อมคำอธิบาย (view description)
    3. View type อันนี้เลือก Node
    4. ตั้งค่า
      1. Field - อันนี้ข้ามไป เพราะเราจะเรียกทุกฟีลด์เลย
      2. Filters - ตัวกรองข้อมูล อันนี้เลือกสองตัวคือ
        1. เลือก node type แล้วเลือก is one of แล้วเลือก Poll เพราะจะเอาโพลอย่างเดียว
        2. เลือก Node: Post date → Operator เลือก is greater than → Value เลือก an offset ... แล้วใส่ value คือ -30 days (อย่าลืมเครื่องหมายลบ) - เพราะต้องการแค่โพลที่สร้างไว้ไม่เกิน 30 วัน
      3. Sort criteria - เลือก Global Random - เพื่อให้สุ่มลำดับ
      4. เลือก Page แล้วกด Add display
      5. ตั้งค่าพื้นฐานเลือกดังนี้
        1. Title ใส่ Polls จะได้แสดงชื่อหน้าคำว่า "Polls"
        2. Row style เลือก Node (เพราะจะแสดงทั้งโหนดเลยไม่ใช่เฉพาะฟีลด์)
        3. Item to display: 5
      6. ใต้เบอร์ (5) จะมี Page settings โผล่ขึ้นมา แล้วตรงช่อง แพธ (Path) พิมพ์คำว่า polls เข้าไป เพื่อจะให้วิวส์นี้แสดงผลที่หน้า http://stylelurf.com/polls
    5. เซฟแล้วก็เข้าไปที่  http://stylelurf.com/polls เพียงแค่นี้ก็สร้างได้แล้ว

    อันนี้ก็เป็นตัวอย่างอีกหนึ่งตัวอย่างสำหรับการใช้วิวส์ขั้นพื้นฐาน ซึ่งหากใครต้องการวิวส์ที่มีการเชื่อมโยงกับตารางในฐานข้อมูลอื่น สามารถเลือกตรง Relationships ได้ หรือถ้าใครอยากส่งผ่านค่าจาก URL เพื่อให้วิวส์คำนวณก็ให้จัดการตรง Arguments ได้ ซึ่งก็จะเป็นขั้นสูงกว่าพื้นฐานอีกหน่อย สามารถหาอ่านวิธีได้ที่ http://drupal.org/handbook/modules/views

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

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

    เพิ่มฟีลด์ Drupal ด้วย CCK

    posted on 04 Jun 2009 06:05 by itshee in Drupal

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


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

    คราวนี้ก็เป็นตัวหลักที่น่าสนใจคือ CCK (ไม่ใช่โรงนวดนะ) CCK เป็นมอจูล (module) หลักอีกตัวที่เว็บไซต์ดรูปัล (Drupal)นั้นใช้กันเกือบหมด ซึ่ง CCK จะเพิ่มความสามารถให้ดรูปัล ให้ผู้ใช้งานสามารถใส่ฟีลด์หรือช่องให้กรอกเพิ่มมากขึ้น แทนที่เนื้อหาเดิมที่จะมีแต่ช่อง หัวข้อ (title) กับกล่องเนื้อหา (body) เมื่อติดตั้ง CCK แล้วเราสามารถเพิ่มฟีลด์ได้อย่างอิสระ ตัวอย่างเช่นใน Stylelurf ที่เขียนไปก่อนเมื่อเอนทรีที่แล้ว ในส่วนอัปโหลดภาพสินค้าที่เป็น item จะมีช่องให้เลือกโหลดภาพ ช่องให้กรอกราคา ช่องให้กรอกแหล่งที่มา และอีกหลายอย่าง ซึ่งก็ใช้ CCK มาเป็นตัวช่วยนี่เอง

    สำหรับวิธีการติดตั้งถ้าใครยังไม่คุ้นกับดรูปัลลองแวะอ่านได้ที่ พื้นฐาน Drupal Modules นอกจากนี้ในอนาคตตัว CCK นี่จะกลายมาเป็นฟังก์ชันหลักในคอร์เลยทีเดียว ดรูปัลรุ่นต่อไป ดรูปัล 7 นั้นจะนำความสามารถนี้ใส่ลงไปในคอร์ ภายใต้ชื่อ FieldAPI โดยผู้ใช้จะไม่จำเป็นต้องติดตั้ง CCK เพิ่ม (แต่ CCK ก็ยังมีการพัฒนาอยู่ แต่จะแตกสายออกไปแทน)

    การใช้งาน CCK นั้นนอกจากจะสามารถใช้เดี่ยวๆ ที่มีฟีลด์เฉพาะแล้ว ยังสามารถใช้ร่วมกับมอจูลเสริมตัวอื่น เช่น

    • ต้องการให้อัปโหลดไฟล์ ผ่านฟีลด์ ต้องติดตั้งทั้ง CCK + FileField
    • ต้องการอัปโหลดรูป ผ่านฟีลด์ ต้องติดตั้ง CCK + FileField + ImageFiel


    วิธีการเซ็ตพร้อมตัวอย่าง Stylelurf

    1. เข้าไปที่ Admin → Content Management →  Content Types
    2. เลือก content type ที่สร้างจากตอนที่แล้ว อย่างอันนี้จะเลือก Item แล้วกดที่ Manage Fields
    3. ลงไปด้านล่างสุด ตรง New Field แล้วใส่ชื่อฟีลด์ที่เราต้องการ เช่นใส่
      • ฟีลด์ สำหรับช่องให้กรอก แบรนด์สินค้า
        • Label = Brand
        • name = Field_brand (ใส่แค่ brand) โดยช่องนี่ใส่ได้เฉพาะอักษรพิมพ์เล็กกับตัวเลข
        • Type = text
        • widget type = text field
        • พอกดผ่านไปอีกหน้า ก็จะมีให้กรอกเพิ่ม
        • Number of values จะให้มีกี่ช่อง เราก็เลือก 1 ช่องพอ
        • พอกดเซฟด้านล่าง คราวนี้ Item เราก็จะมีช่องให้กรอก แบรนด์ เพิ่มขึ้นมา เวลาเราเลือกสร้าง
      • ฟีลด์ สำหรับช่องให้โหลดภาพ
        • Label = Image
        • name = Field_nodeimage (ใส่แค่ nodeimage)
        • Type = File
        • widget type = image
        • Number of values (หน้าถัดมา) อันนี้เลือก 1 แต่หากใครอยากให้โหลดได้มากกว่าหนึ่งรูป ก็ใส่ค่าลงไป
    4. สำหรับฟีลด์อื่น เราก็ใส่ไปตามที่ต้องการ ซึ่งเมื่อใส่หมดหน้า Item ก็จะมีช่องให้กรอกตามที่เราเลือก โดยใน Stylelurf จะมีหน้าตาดังนี้
    Stylelurf Drupal CCK

    ซึ่งตอนนี้ถ้าสร้างเนื้อหา Item ก็จะมีช่องให้กรอกตามที่เราตั้ง นอกจากนี้เราสามารถควบคุมการแสดงผล ได้โดยเลือก

    1. เข้าไปที่ Admin → Content Management →  Content Types
    2. เลือก content type อย่างอันนี้จะเลือก Item แล้วกดที่ Display Fields
    3. ในหน้านี้จะมีให้เลือก โดย 
      • teaser / full node คือ ส่วนทีสเซอร์ เช่น (หน้ารวมเนื้อหา หน้าแท็ก) กับส่วนหน้าเต็ม ว่าอยากให้แสดงเนื้อหาแบบไหน ตัวอย่างเช่น ภาพที่เราโหลดหน้าเต็ม ให้แสดงภาพเต็ม แต่หน้าทีสเซอร์ให้ขึ้นเป็นภาพธัมบ์ (ที่ต้องใช้ ImageCache มาช่วย จะอธิบายคราวหลัง) หรืออย่างเนื้อหาบางส่วนพวกดีเทลที่เราไม่อยากให้แสดงในส่วนทีสเซอร์ แต่ให้แสดงเฉพาะหน้าหลัก เราก็สามารถเลือกปิดได้ตรงนี้
      • label คือ ข้อความกำกับ ว่าอยากให้แสดงอย่างไร ระหว่าง วางเหนือเนื้อหา (above) วางบรรทัดเดียวกับเนื้อหา (inline) หรือซ่อนไว้ (hidden)
      • exclude คือ การไม่แสดงผล
    4. โดยใน Stylelurf สำหรับ Item ก็เลือกไว้ดังนี้
    Stylelurf CCK Display Fields

    อันนี้ก็เป็นตัวอย่างการสร้าง CCK ประเภทหนึ่ง ซึ่งหากต้องการเพิ่มฟีลด์ชนิดอื่น ก็สามารถเลือกมอจูลย่อยมาใช้ได้ตามสะดวก ใครสนใจอ่านเรื่อง CCK เพิ่มเติมลองดู คู่มือฉบับภาษาอังกฤษ: http://drupal.org/node/101723

    สุดท้ายก่อนไปคำว่า field ในภาษาอังกฤษอ่านว่า ฟีลด์ (สระอี) ซึ่งเขียนเป็นคำอ่านจะได้ว่า feeld อ่านเหมือน feel ที่แปลว่าความรู้สึก โดยออกเสียงจบด้วยการตวัดลิ้นไปแตะโคนฟันด้้านบนเป็นเสียง [d] นั่นเอง