• knife set
  • feed

    Drupal




    Drupal
    : 6.x
    MODULES ที่ใช้: 
    Views 6.x-2.x 
    Views carousel 6.x-2.x-dev
    jCarousel 6.x-1.x

    กลับมากับเรื่องของดรูปัล (Drupal) ครับ โดยคราวนี้จะมาแนะนำการใช้งานและติดตั้ง แคเรอเซล (carousel) หรือบางคนก็เรียก แถบเลื่อนบ้าง หรือฟังก์ชันสไลด์โชว์เลื่อนบ้าง โดยใครนึกไม่ออกลองดูตัวอย่างได้ที่  

    เข้าไปดูแล้วคงอ๋อกันทันที โดยส่วนแคเรอเซลก็คือส่วนที่มันวิ่งไปมาเหมือน ม้าหมุน (แคเรอเซลในภาษาอังกฤษ) โดยปัจจุบันเว็บส่วนใหญ่ก็ใช้เทคนิคนี้กันเยอะโดยใช้งานผ่าน jQuery กัน แต่คราวนี้ผมจะมาอธิบายการติดตั้ง ซึ่งไม่ยาก(อีกแล้ว) โดยไม่ต้องมีพื้นความรู้จาวาสคริปต์ หรือแม้แต่ jQuery แต่อย่างใด แต่จะใช้พื้นความรู้ด้าน CSS บ้างนิดหน่อย

    ก่อนจะเริ่มหากใครยังไม่รู้จัก Views แนะนำให้ย้อนกลับไปอ่านตอนที่ผ่านมาที่ รู้จักกับ Views [8 มิ.ย. 52] เพื่อป้องกันการงงของตัวท่านเอง โดยหลังจากที่ได้ติดตั้งดรูปัลเรียบร้อย และติดตั้งมอจูล Views กับ Views Carousel และ jCarousel เสร็จแล้วก็พร้อมจะเริ่มกันเลย ซึ่งก่อนหน้าที่จะเริ่มบางคนอาจจะแปลกใจว่าทำไมถึงใช้ Carousel รุ่น dev ทำไมถึงไม่รอตัวเต็มก่อน ซึ่งอธิบายไว้เลยว่าตัวนี้ของดรูปัลเอง หลายปีผ่านไปก็ยังเป็นรุ่น dev อยู่ ซึ่งมีออกมาทั้ง 1.x-dev และ 2.x-dev แล้ว ยังไม่เป็นตัวเต็มซักที แต่ทว่าก็ใช้งานได้ดีไม่มีปัญหา

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


    (1)  เซ็ตค่าวิวส์และคอนฟิกตัวแคเรอเซล 

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

    • Display - เลือกเป็น Block เพราะต้องการมาเป็นบล็อกแสดงหน้าแรก
    • Style - Views Carousel เลือกชนิดนี้มา (เดี๋ยวการคอนฟิกจะอธิบายในหัวข้อถัดไป
    • Item to displays - 5 - ให้แสดงแค่ 5 พอ ป้องกันไม่ให้โหลดเยอะเกินไป
    • Fields - อันนี้เซ็ต CCK พิเศษไว้เป็นภาพขนาดเดียวกันหมด เพื่อแสดงผลในหน้าแรก โดยในเว็บนี้เซ็ตขนาดไว้ที่ 960x300 พิกเซล และเมื่อกดแล้วจะให้ลิงก์ไปที่หน้านั้นๆ
    • ส่วนอื่นๆ อย่าง sort criteria หรือว่า filter อันนี้ก็เซ็ตไว้ให้เรียงลำดับกับเลือกผลตามที่ต้องการ 
    • ... โดยทั้งหมดก็แสดงตามภาพด้านล่าง

     ถัดมาเราก็จะคอนฟิกตัวแคเรอเซลกัน โดยกดเข้าไปตรงเครื่องหมายรูปเฟืองถัดจาก Style โดยของผมเซ็ตค่า ดังนี้

    • Grouping field - None - ไม่กรุ๊ปอะไรไว้ด้วยกัน
    • Skin - IE7 (อันนี้เป็นเทคนิคเล็กน้อย คือเราจะไม่เลือก custom เพราะจะวุ่นวาย แต่เราจะเขียน CSS ทับไปกับสกินเดิมเลย
    • First item to start on - 1
    • The number of items to scroll by - 1  (ส่วนนี้จะเลื่อนที่ละหนึ่งภาพ หากใครอยากให้เลื่อนทีละ 2 หรือ 3 ภาพ ก็ต้องมาเซ็ตส่วนนี้)
    • Speed of animation - slow (บางทีเร็วแล้วปวดหัว อันนี้แล้วแต่ความชอบ)
    • Auto scrolling - 5 (อันนี้เซ็ตไว้ว่า 5 วินาที จะให้มันเปลี่ยนภาพเอง)
    • Auto pause - yes - (ส่วนนี้จะให้มีการหยุดอัตโนมัติ)
    • Wrap content - both - (ส่วนนี้ถ้าเลือก both เมื่อหมุนถึงภาพสุดท้าย จะกลับมาที่ภาพแรกใหม่ โดยวิ่งย้อนกลับ โดยตัวเลือกอื่น เช่น disabled จะไม่มีการย้อน, first กับ last จะย้อนเฉพาะปลายด้านใดด้านหนึ่ง, circular จะวนกลับมาภาพแรก แต่จะหมุนวิ่งทิศทางเดิม) 
    • ... โดยทั้งหมดก็จะตามภาพด้านล่าง 

     

     เพียงแค่นี้เราก็จบส่วนแรก แล้วเราก็จะได้ block ที่เป็นแคเรอเซลแล้วพร้อมเอาไปแสดงในหน้าแรก หรือหน้าไหนก็ตาม แต่ทว่า พอเอาไปใส่เข้าจริงๆ หน้าตามันจะประหลาด เพราะต้องปรับแต่ง CSS อีกต่อหนึ่ง ซึ่งจะอธิบายในเอนทรีถัดไปครับ http://itshee.exteen.com/20100728/carousel-drupal-1

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

    คราวก่อนเล่าวิธีติดตั้งดรูปัล (Drupal) ไปแล้วว่าสามารถทำได้ภายในไม่เกิน 10 นาที คราวนี้มาวิธีใหม่ติดตั้งลงในวินโดวส์ใช้เวลาประมาณนาที ด้วย DAMP (Drupal, Apache, MySQL and PHP) โดยวิธีการก็

    1. ดาวน์โหลด Acquia Drupal แล้วเลือก stack installer (DAMP) for Windows (ใครใช้ Mac ก็เลือกตามชอบ) ที่ http://acquia.com/downloads ไฟล์ประมาณ 30 Mb (ใครเน็ตช้าก็รอหน่อย)
    2. ได้มาเป็นไฟล์ EXE ก็เปิดมาแล้วคลิก Next ไปเรื่อยๆ 


    3. แล้วก็ใส่ username / password / email สำหรับแอดมิน แล้วก็ Next ต่อไปเรื่อยจนจบ 
    4. เสร็จแล้ว
    5. ... (สำหรับวินโดวส์) ไฟล์ทั้งหมดจะถูกเก็บไว้ที่
      C:\Documents and Settings\__ชื่อเรา__\Sites\acquia-drupal-site
      หากใครจะเพิ่มฟีเจอร์หรือเพิ่มธีมอะไร ก็มาใส่ตรงนี้

    หากใครอยากลองก็โหลดมาเล่นกันได้ที่ http://acquia.com/downloads 

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


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

    ต่อจากคราวก่อนเรื่อง วิวส์ (Views) คราวนี้ก็เป็นอีกตัวอย่างที่ใช้จริงในเว็บ Stylelurf ในหน้า
    http://stylelurf.com/forum (ลองกดเข้าไปดูได้) จะสังเกตตรงแถบด้านขวาที่มีส่วนแสดงรายการสามส่วน ซึ่งสามตัวนั้นก็เป็นวิวส์หมดเลยทั้งสามตัว โดยตัวอย่างในเอนทรีนี้จะเป็นวิวส์ตัวบน Active Forum Topics

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

    • เรียกเฉพาะหน้าที่เป็นกระทู้ฟอรั่ม
    • แสดงเฉพาะชื่อหัวข้อ พร้อมทำลิงก์ไปหน้านั้น
    • แสดงแค่ 5 หัวข้อ
    • เรียงลำดับตามเวลาที่มีคนคอมเมนต์ ใหม่สุดอยู่บน
    วิธีทำก็ใช้ลำดับเดิมตามภาพด้านล่าง

    Drupal Views

    ทำตามลำดับเดิมที่เลือก

    1. เข้าไปที่ Admin → Site building → Views
    2. กด Add แล้วจะมีให้ใส่ชื่อ (view name) ก็ใส่พร้อมคำอธิบาย (view description)
    3. View type อันนี้เลือก Node
    4. ตั้งค่าตามลำดับ ได้แก่
      1. Field - เลือก Node: Title เพราะเราต้องการดึงเฉพาะหัวข้อ เสร็จแล้วพอกดผ่านไป หน้าถัดไปตรงช่อง Label เราก็ลบออก เพราะไม่ต้องการข้อความตรงนี้ ส่วนช่อง Link this field to its node เราก็ติ๊กไว้ เพื่อให้หัวข้อลิงก์ไปยังหน้านั้นอัตโนมัติ แล้วก็กด update
      2. Filters - เลือก node type แล้วเลือก is one of แล้วเลือก Forum topic เพราะจะเอาหัวข้อของกระทู้ในฟอรั่มอย่างเดียว
      3. Sort criteria - เลือก Node: Last comment time เสร็จแล้วก็เลือก sort oder เป็น Descending ส่วน Granularity ก็เหมือนเดิมเป็น Second เพื่อให้เรียงลำดับจากใหม่สุดไว้บน
      4. เลือก Block แล้วกด Add display - เพราะจะทำเป็นบล็อคไปใส่ในหน้านั้น
      5. ตั้งค่าพื้นฐาน
        1. Title ใส่ Active Forum Topics จะได้แสดงชื่อตรงบล็อค
        2. Style เลือก HTML List ให้แสดงเป็นลิสต์
        3. Item to display:  5 - ให้แสดงผลแค่ห้าชื่อพอ
    5. คราวนี้คงพอเห็นตัวอย่างด้านล่างขึ้นมาแล้ว ก็กดเซฟ
    6. เสร็จก็เข้าไปที่ Admin → Site building → Block คราวนี้เราก็เลือกวิวส์นั้นไปใส่ในตำแหน่งที่ต้องการ เพียงแค่นี้เราก็ได้วิวส์แล้ว โดยไม่ต้องไปยุ่งกับโค้ดหรือคำสั่ง SQL

    อันนี้ก็เป็นตัวอย่างอีกหนึ่งตัวอย่างสำหรับการใช้วิวส์ ซึ่งวิวส์นั้นใช้ได้อีกหลายวิธี โดยเอนทรีต่อไปจะแสดงอีกตัวอย่างหนึ่ง