• knife set
  • feed

    Drupal

    Drupal Social Network

    posted on 28 Aug 2008 04:10 by itshee  in Drupal

    ไร้สาระประจำวันอีกแล้ว เจอเว็บไซต์ทำเครือข่ายชุมชน ประกาศที่หน้าแรกเว็บดรูพอล ประเภทเดียวกับ hi5, facebook, และอื่นๆ อีกมากมาย แต่คราวนี้เว็บไซต์สร้างด้วยดรูพอล เพื่อชาวดรูพอล (เขาเขียนมางั้นในเว็บ) ใครสนใจก็ลองดูได้ที่


    DrupalSN Badge
    DrupalSN Badge

    แต่พอลองไปดูก็ งั้นๆ ละมั้ง สงสัยคงเป็นพวก SN ใหม่ๆ (อีกแล้ว)

    มาอีกแล้วครับ ความเดิมจากคราวก่อน สร้างเว็บไซต์ด้วย Drupal ภายใน 12 ชั่วโมง คราวนี้ ที่บ้านก็เกิดปิ๊งไอเดียขึ้นมาว่า งั้นทำใส่หลายๆ ภาษาเลย ลูกค้าจะได้เยอะ (หวังว่า หวังว่า) ก็เลยอยากให้มี ภาษาอังกฤษ กับภาษาญี่ปุ่นด้วย จนสุดท้ายก็เลยมาเป็นหน้าที่เราควานหา ว่าทำยังไงให้มันง่ายและขี้เกียจที่สุด ก็เจอ มอจยูลที่ชื่อ i18n (ชื่อมันแปลกเพราะมาจากคำว่า internationalization โดยใครไม่รู้บอกว่าชื่อยาว เลยย่อเหลือ i กับ n และเลข 18 ตรงกลางก็มาจากว่ามี 18 ตัวอักษร ช่างคิดจริงๆ ) กลับมาต่อเรื่องมอจยูลของมัน คือ ตัวนี้เหมือน add-ons ดีๆ นี่เอง พอลงเสร็จ เราก็สามารถทำเว็บไซต์หลายภาษาได้(เกือบ)อัตโนมัติ โดยมีลูกเล่นเด่นๆ คือ 

    • สร้างภาษาอื่น และทำลิงก์ของแต่ละหน้าอัตโนมัติ
    • ทำเมนูหลายภาษา สำหรับหน้าภาษาต่างๆ ไม่ต้องทำเป็นเมนูภาษาอังกฤษหมด
    • detection สำหรับคนใช้งาน ว่าใช้ภาษาอะไรเป็นหลัก ก็เปิดหน้านั้นเลย ถ้ามาจากญี่ปุ่น ก็เปิดภาษาญี่ปุ่นเลย (ไม่รู้จริงหรือเปล่า ทดลองไม่เป็น) 
    สุดท้ายก็เลยได้มาลงอย่างที่เห็นด้านล่าง

    คำเตือน! ช่วงนี้วนเวียนกับแต่ศัพท์เทคนิค ขออภัย

    มาอีกแล้วครับ ช่วงนี้กำลังลองเล่นดรูพอล คราวนี้ลองทำเว็บไซต์หลายภาษาอัตโนมัติดู โดยเป็นเอนทรีต่อเนื่องจาก   ซึ่งของผมใช้ Drupal 6.4 กับ มอจยูล (module) ชื่อ i18n ตัวอย่างเว็บก็ที่เดิมครับ www.qcparawood.com ลองกดเล่นเปลี่ยนภาษาได้ (ตรงมุมขวาล่าง) โดยวิธีการติดตั้งมีดังนี้ (สำหรับวิธีการรุ่นภาษาอังกฤษก็ดูได้ที่เว็บเขาเลย http://drupal.org/node/133983

    1. ลงมอจยูล - แรกสุดโหลดไฟล์ซิป http://drupal.org/project/i18n แล้วมาแตกไปลง ลงในโฟลเดอร์i18n เข้าไปใน sites/all/modules เหมือนเคย
    2. เซ็ตอัป - เข้าไปหน้า admin-> modules เลือก enable ตัวที่ต้องการ ก็เลือกซะเกือบหมด
    3. เปิดโอกาสให้แก้ - เข้าไปหน้า admin -> permissions -> translate content ก็เลือกไว้ ว่าอยากให้ใครเข้ามาแก้มาแปลได้
    4. เปิดภาษาที่ต้องการ - (ข้ามได้ถ้าทำแล้ว) ถ้ายังไม่ได้แก้เพิ่มภาษาจากมอจยูล locale ก็เลือก admin -> languages (site configuration) ก็เพิ่มภาษาที่ต้องการโดยกด add languages หลังจากนั้นก็เลือก configure (จากแท็บด้านบน) แล้วเลือก Path prefix only เพื่อให้แสดงผลเป็น ชื่อเว็บ/en หรือ ชื่อเว็บ/ja ตามภาษาที่ต้องการ ไม่ปนกันมั่ว
    5. เปิดชนิดคอนเทนต์ที่ต้องการ - เข้าไปตรง admin -> content types แล้วเลือก type ที่ต้องการมีการแปลภาษาเช่น "page" ก็เข้าไป edit เซ็ตให้ Workflow settings -> Multilingual support: -> Enabled, with translation :: คราวนี้ก็ถือว่าเซ็ตเสร็จแล้ว
    6. แก้ไขของเดิม (ถ้าไม่มีก็ข้ามไปได้) - คราวนี้พอทำเสร็จ พวกเนื้อหาเก่าเข้าไปดู เมนู Translate ก็ยังไม่ขึ้น ให้เข้าไปที่หน้าเดิมที่สร้างไว้แล้ว กด edit แล้วเปลี่ยนตรง Language เปลี่ยนจาก Language Neutral เป็น English (หรือภาษาที่เป็น default) แค่นี้ก็เสร็จแล้ว ก็จะมีเมนูให้แปลเป็นภาษาอื่นขึ้นมา คราวนี้ถ้าอยากแปลเป็นภาษาอะไร ก็กด translate แล้วโปรแกรมก็จะทำให้อัตโนมัติ และก็อย่าลืมเซ็ต URL path ด้านล่างด้วย ว่าจะให้ชื่ออะไรโดยอาจใส่เป็นชื่อเดิมก็ได้
    7. เซ็ตเมนู - พอทำเสร็จก็ถึงคราวเซ็ตเมนูหลัก อันนี้เอาทุกอย่างรวมฮิตไว้ใน Primary links หมด แต่ตอนแยก ก็แยกกันคนละภาษา ว่าเมนูไหนจะโผล่มาตอนภาษาไหนใช้งาน ก็เสร็จเรียบร้อย

    คราวนี้หน้าที่แปลเป็นภาษาอื่นแล้ว ก็จะมีเมนูขึ้นมาด้านล่างซ้ายของหน้า (หรือจะย้ายไปไหนก็ตามใจชอบ)สนใจก็ลองดูเว็บได้ที่ www.qcparawood.com

    สำหรับดรูพอลภาคต่ออ่านได้ที่ http://itshee.exteen.com/archive/category/Drupal 

    เริ่มเรื่องมีอยู่ว่าต้องทำเว็บไซต์ให้โรงงานของแม่ www.qcparawood.com โดยมีเงื่อนไขที่ว่า (1) ใช้งานง่ายๆ (2) อัปโหลดง่ายๆ (3) แก้ไขง่ายๆ (4) สามารถแก้ไขได้เองโดยไม่ต้องให้คนอื่นแก้ให้ ก็เลยได้มาเริ่มทำเว็บอย่างเร่งด่วน โดยนอกจากนี้ปัญหาอีกอันที่ถึงกับสะอึกเลยคือทำเว็บไซต์แบบ(ยัง)ไม่มีข้อมูล และ (ยัง)ไม่มีรูป ถามน้องไปว่ามีข้อมูลกับรูปอะไรส่งมาให้ด้วย แต่ได้มาเพียง โลโก้บริษัทกับที่อยู่และเบอร์โทร เครียดเลย ได้มาเพียงแต่คำตอบที่ว่า ทำเว็บมาก่อนละกันนะ เดี๋ยวเนื้อหาค่อยเพิ่มเติมทีหลัง

    คำเตือน! ข้อความด้านล่างนี้มีศัพท์เทคนิคเยอะแยะ มากมายก่ายกอง อ่านยากชะมัด

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

    • 2 ชั่วโมงแรก ก็นั่งอ่านนอนอ่านรายละเอียดและพื้นฐานดรูพอลจากเว็บไซต์ drupal.org และก็ได้เรียนรู้ว่ามีมอจยูล (module อ่านว่า โมดูล ก็ได้แบบไทยๆ) อะไรบ้างที่ควรโหลดมาใช้
    • 1 ชั่วโมงถัดมา โหลดไฟล์ - ดาวน์โหลดไฟล์จากเว็บ ซึ่งได้ ดรูพอล รุ่น 6.4 (เห็นเค้าว่าเพิ่งออกมาไม่นาน) โหลดมาเป็นไฟล์ zip นามสกุล tar.gz (นามสกุลอะไรก็ไม่รู้เนี่ย) แต่ก็ไม่ห่วงใช้โปรแกรม 7-zip เปิด zip ได้ทุกชนิดสบายโลด โหลดมาเสร็จปุ๊บ อันซิปเสร็จก็โหลดขึ้นเซิร์ฟเวอร์ทันที กินเวลาไม่กี่นาที 
      • เสร็จแล้วก็ตามด้วยมอจยูล ตัวที่ควรใช้ได้แก่
        • TinyMCE (เอาไว้แก้ไขเว็บเป็น WYSIWYG เหมือนของที่ Exteen ใช้)
        • IMCE (เอาไว้อัปโหลดและจัดไฟล์+ภาพ) 
        • Google Analytics (ลิงก์กับตัวเก็บสถิติ) และ 
        • XML Sitemap (เอาไว้ทำไซต์แมป ช่วยให้พวกเสิร์ชเอนจินมาแวะเว็บเราง่ายหน่อย)
      • โดยพวกมอจยูลเหล่านี้ก็โหลดเข้าไปที่ .../sites/all/modules/ แยกจากมอจยูลหลัก มาเก็บต่างหาก เพื่อความสะดวกในการอัปเดตภายหลัง (ในเว็บเขาเขียนมายังงี้)
    • เริ่มเข้าชั่วโมงที่ 4 - เว็บไซต์เริ่มเป็นรูปเป็นร่าง คราวนี้ก็ลองสร้างหน้าแรกขึ้นมาเสร็จ ก็ไปเซ็ตหน้าแรกใน Site configuration -> Site information -> Default front page เป็นหน้าที่เราสร้างขึ้น เพื่อไม่ให้มันทำเป็น node อัตโนมัติ เสร็จแล้วก็สร้าง account ให้แม่กับน้อง บอกว่าอยากให้มีเนื้อหาอะไรก็เขียนไปเลย ใส่ง่ายๆ เหมือนเขียนบล็อก พอบอกแม่และสั่งน้องเสร็จ เราก็หยิบกล้องเดินเข้าไปในโรงงาน ถ่ายรูปเครื่องจักร ถ่ายรูปเก้าอี้ ถ่ายรูปโต๊ะ เดินไปหน้าโรงงานถ่ายรูปโรงงานด้านนอกอีกหน่อย
    • เก้าอี้ไม้ชั่วโมงที่ 5 - นำรูปที่ได้มาโฟโต้ชอป โดยรูปเก้าอี้ที่ถ่ายมาก็เอาไปไดคัตพื้นหลังออก ให้เห็นแต่เก้าอี้ลอยๆ ไม่มีฉากหลังในโฟโต้ชอป ด้วยคำสั่ง Filter -> Extract เสียเวลาไดคัตไปรูปละ 3 นาที รวดเร็วจริงแท้ ทำไปทั้งหมด 5 รูป ที่เหลือค่อยให้น้องมาถ่ายวันหลัง เสร็จแล้วก็นั่งพักกินข้าวเที่ยง
    • ชั่วโมงที่ 6-10 - เริ่มมาสู่การดีไซน์ คราวนี้ก็มาทำธีมของดรูพอล ด้วยการแก้ CSS ของไฟล์ (ใครไม่สนใจออกแบบธีมเอง อาจใช้ธีมมาตรฐานของเขาก็ข้ามขั้นตอนนี้ได้ แต่หน้าตาก็จะซ้ำๆ กับชาวบ้านหน่อย) ดีไซน์ธีมก็เริ่มต้นจากการก๊อปธีมเก่าต้นฉบับมาทำเป็นของเราเอง เปลี่ยนชื่อ แล้วก็โหลดเข้าโฟลเดอร์ .../sites/all/themes/ โดยไฟล์ธีมเหล่านี้จะไม่รวมกับพวกธีมต้นฉบับ หลังจากนั้นก็แก้ที่ไฟล์ style.css และ page.tpl.php นั่งทำนั่งแก้จนถึงเย็น ทำไป+งมไป ประมาณ 5 ชั่วโมง ก็เสร็จเรียบร้อย โดยก่อนจะเสร็จก็เดินออกไปในโรงงานอีกรอบ ถ่ายโต๊ะที่ประกอบเสร็จ แล้วนำมาเข้าโฟโต้ชอป ทำเป็นลายพื้นหลังเป็นลายไม้พอดี
    • ชั่วโมงที่ 11 - แม่และน้องได้เขียนข้อความไว้บางส่วน น้องก็นั่งทำแผนที่เสร็จ ก็นำมาเรียบเรียงดูว่า หน้าไหนควรอยู่ ควรลิงก์ยังไง เสร็จแล้ว พอให้น้องดู น้องอยากได้ ภาพเคลื่อนไหว วิ่งไปวิ่งมาในหน้าแรก ก็เลยต้องทำเพิ่มอีกหน่อย
    • ชั่วโมงที่ 12 - นั่งเอาภาพที่ถ่ายมา มาลงในแฟลช เซ็ตให้มันแว๊บไปแว๊บมาเสร็จภายใน 30 นาที แล้วก็โหลดขึ้นเว็บหน้าแรก เสร็จแล้ว เว็บเร่งด่วนภายใน 12 ชั่วโมง

    ใครสนใจก็สามารถเข้าไปดูได้ที่ www.qcparawood.com (หน้าตาอาจไม่เหมือนดรูพอลทั่วไปเท่าไร) พอทำเสร็จก็พอดีในหนึ่งวัน จากที่ตอนแรกคิดจะทำเป็น HTML ล้วน ทำง่ายหน่อย แต่มาคิดข้อดีหลายข้อที่ทำในดรูพอล ไม่ว่า

    • สะดวกเวลาัเพิ่มหรือลบข้อมูล และอัปเดตในภายหลัง
    • Clean URL  ถ้าใครได้ลองกดเข้าไปในเว็บ แล้วเลือกหน้าอื่นๆ จะเห็นว่า แต่ละหน้าจะไม่มีพวก .html หรือ .php หรือแม้แต่พวกตัวเลขแปลกๆ ต่อท้าย ซึ่งค่อนข้างสวยงามและสะดวกในการส่งข้อมูล รวมไปถึงสะดวกในการค้นหา
    • เมนู (ตรงแถบด้านบนและด้านล่าง) สร้างและลดได้กึ่งอัตโนมัติ ถ้าอยากเพิ่มหรืออยากลดในภายหลัง ก็สะดวกสามารถทำได้ในโปรแกรมได้โดยตรง ไม่ต้องมานั่งทำเป็นไฟล์ภาพ
    • นอกจากนี้ข้อมูลเทคนิคอื่นของเว็บนี้ (อะไรเป็นอะไรก็ไม่ค่อยรู้) คือ
      • Drupal 6.4
      • PHP 5.2.6
      • MySQL 5.0.51a
      • Apache/1.3.34

    สุดท้าย ใครสนใจจะสั่งทำเก้าอี้ หรือโต๊ะ ก็ติดต่อได้ (แอบโฆษณา)

    สำหรับดรูพอลภาคต่ออ่านได้ที่ http://itshee.exteen.com/archive/category/Drupal