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

ให้เราไปเว็บไซต์ virtuemart เพื่อทำการโหลดเฉพาะ packet ของมันมาพอครับ นั้นก็คือตัวที่ชื่อว่า Complete Package for Joomla! 1.5 จากนั้นให้เราทำการแตกไฟล์ออกมาจะพบดังนี้

จากนั้นทำการติดตั้งตั้งแต่ component, module, plugin เลยครับทำการติดตั้งให้ครบทุกอัน หรือใครจะอ่านวิธีการติดตั้งจากเอกสาร pdf ที่เขาติดให้มาด้วยก็ได้ครับ

ติดตั้งครบหมดแล้วให้เราไปที่เมนู components > virtuemart จากนั้นจะมีให้เลือกว่าเราจะติดตั้งข้อมูลสินค้าเริ่มต้นหรือไม่ ถ้าไม่ให้กดหมายเลข 1 ครับ ถ้าต้องการให้กดหมายเลข 2

จากนั้นเราก็จะได้ virtuemart มาใช้งาน

อย่าน้อยใจไปครับวันนี้ผมจะมาแนะนำ module ที่จะช่วยเราในส่วนนี้ได้ให้สะดวกสบายในการติดตั้ง module ได้ง่ายขึ้นนั้นก็คือ Module Uploader ให้เราทำการโหลดมาติดตั้งตามปกติไปก่อนครับ จากนั้นไปที่ admin > module เพื่อทำการเปิดการใช้งาน

หลังจากนั้นจะมีเมนู Module Uploader เพิ่มเข้ามาในหน้า admin ของเราครับ ซึ่งวิธีใช้งานก็ไม่อย่าครับให้เราโหลด module ที่ต้องการมาก่อน จากนั้นทำการอัพโหลดผ่านหน้า Module Uploader ครับ ง่ายขึ้นเยอะเลยสำหรับการติดตั้ง module

Download : Module Uploader

ขั้นตอนติดตั้ง module ใน prestashop มีขั้นตอนง่ายๆครับ

1. โหลดมาแล้วแตกซิบออกมา
2. อัพโฟลเดอร์ที่ได้มาไปยังเว็บ prestashop ของเราโดยไปวางไว้ที่ /module

3. เข้าไปหน้า admin ของ prestashop แล้วไปที่เมนู Module เลื่อนลงด้านล่างหา module ที่เราเพิ่มเข้ามาจากนั้นทำการกดติดตั้ง

4. module บางตัวจะมีให้เราตั้งค่าเพิ่มเติม ก็กดที่ตั้งค่าได้ หรือถ้าไม่มีก็ให้ไปดูที่เราโหลด module มาเขาจะสอนวิธีใช้งานเพิ่ม
5. เลื่อนไปด้านบนเลือก position เพื่อทำการจัดตำแหน่งให้กับ module ตัวที่เพิ่มเข้าตามต้องการ

จากนั้นไปหน้า admin ของ prestashop ไปที่เมนู Preferences >> Appearance เลื่อนลงมาด้านล่างดูในส่วนของหัวข้อ theme ทำการติ้กเลือก theme ตัวใหม่ของเราที่เพิ่มเข้าไป จากนั้นกด OK แล้วกลับไปดูที่หน้าเว็บก็จะได้ theme ที่ต้องการแล้ว

** ถ้าใครอัพ theme ขึ้นไปแล้วไม่โชว์ในหน้า admin ให้ทำการกำหนดสิทธิ์ของ theme เราเป็น 755 ด้วยครับ ***

• Linux, Unix, or Windows
• Web Server (Apache 1.3 or later, IIS 6 or later)
• PHP 5.0* or later
• MySQL 5** or later

1. ทำการสร้าง database เปล่าๆไว้ก่อนครับเพื่อลองรับการติดตั้งของ Prestashop สำหรับลูกค้า howhost สามารถทำการสร้างฐานข้อมูลได้ดังนี้ http://killthewhat.com/plesk-panel/create-database/
2. โหลดไฟล์ติดตั้งได้จาก http://www.prestashop.com/en/downloads/ หรือของไทย http://picohosting.com/howto/prestashop-1.2-thai ผมขอเลือกของไทยละกัน
3. แตกไฟล์แล้วนำขึ้น server ของเราเลยครับสำหรับ howhost ของเราก็วางไว้ที่ httpdocs ครับผม
4. แล้วทำการเรียกผ่าน browser ครับ เช่น www.domain.com หรือ www.domain.com/prestashop จะได้หน้าตาดังรูปล่าง ผมเลือกภาษาไทยละกันครับ แล้วกด ถัดไป

5. ให้เราทำการตั้งค่าต่างๆด้านล่างให้เป็นสีเขียว ถ้าใครขึ้นแบบผมก็ให้ทำการเปลี่ยนสิทธิ์ในการเขียนไฟล์ของ directory ต่าง

chmod a+w config/ tools/smarty/compile/ sitemap.xml
chmod -R a+w img/ mails/ modules/ themes/prestashop/lang/ translations/ upload/ download/

6. ทำการกำหนดค่าฐานข้อมูลให้ถูกต้อง ตามที่เราสร้างไว้ตอนแรก

7. ตั้งค่าต่างๆของร้านเรา รวมถึงรหัสผ่าน admin ด้วย

8. ทำการลบ folder install ออกตามคำแนะนำ

9. เมื่อเราเข้าระบบหลังร้าน ก้จะมีคำเตือนอีก 1 อย่างให้ทำคือเปลี่ยนชื่อ folder admin ไปเป็นอย่างอื่นซ่ะ เพื่อความปลอดภัย สมมติเปลี่ยนจาก admin ไปเป็น howpresta เวลาเข้าหลังร้านเราหรือ backend ก็จะเรียก url แบบนี้ www.domain.com/howpresta

ให้เรา Search translations ด้านขาวมือคำว่า thai แล้วกด OK จากนั้นเลือกโหลดรุ่น 5.x-1.x-dev เนื่องจากมีการแปลเยอะสุดละครับสามารถใช้บน drupal 6 ได้

เราจะได้ไฟล์ th-5.x-1.x-dev.tar.gz มาให้ทำการแตกไฟล์ออกมาครับ โดยบน windows สามารถใช้โปรแกรม 7zip ทำการแตกไฟล์

tar -xvf th-5.x-1.x-dev.tar.gz

ให้ไปที่เว็บไซต์ของเราไปทำการ enable module 2 ตัวได้แก่ Locale , Content translation ที่เมนู Administer >> Site building >> Modules

ไปที่เมนู Administer >> Site configuration >> Languages คลิกที่แท็บ Add language เลือก ภาษาไทย จากนั้นกดปุ่ม Add language

กลับมาที่แท็บ List ให้ติ้ก Default ที่ภาษาไทยจากนั้นกดปุ่ม Save configuration

คลิกที่เมนู Administer >> Site building >> Translate interface แท็บ Import จากนั้น browse ไปยังไฟล์ th.po ซึ่งจะอยู่ในไฟล์ที่แตกออกมา /th/th.po

เพียงเท่านี้เราก็จะได้ภาษาไทยมาใช้งานแล้ว ต่อมาผมจะมาพูดถึงการที่เราจะแปลภาษาเองบ้างน่ะครับ โดยให้กลับมาที่แท็บ Overview ในส่วนของ Built-in interface ที่เห็นในภาษาไทยเราหมายความว่า ตอนนี้แปลไปแล้วกี่ % ดังรูป

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

จะปรากฎผลการค้นหาที่ได้ จากนั้นให้ทำการกดที่ แก้ไข เพื่อทำการแปล

ใส่คำที่จะแปลลงไปจากนั้นกด บันทึกการแปล

ผลการแปล

Theme ของ drupal สามารถหาดาวน์โหลดฟรีได้เยอะหลายที่ โดยเริ่มต้นหาได้จาก http://drupal.org/project/Themes ซึ่งส่วนหนึ่งสามารถดูพรีวิวผ่านเว็บได้ที่ themegarden.org โดยหลักการเลือก theme ของ drupal นั้นเมื่อเข้าไปในหน้าของ theme นั้น ควรตรวจสอบให้แน่ใจว่า theme นั้นใช้ได้กับ drupal รุ่นไหน เช่น 6.x-1.7 , 5.x-1.0-alpha1 เป็นต้น โดยเราต้องโหลดมาตามรุ่นที่เราใช้ ซึ่งตอนนี้เราติดตั้ง drupal 6 ก็เลือกโหลดเฉพาะ theme ที่เขียนว่า 6.x เท่านั้นครับ

หลังจากเราเลือก theme มาได้แล้วก็ให้ทำการแตกไฟล์ออกมาครับ จากนั้นอัพโหลดขึ้นไปที่ sites/all/themes โดยให้สร้าง Folder ชื่อ themes เอาเองครับ

จากนั้นให้เข้าไปที่หน้า admin ของ drupal แล้วไปที่เมนู Administer >> Site building >> Theme

หา theme ที่เราติดตั้งลงไปจากนั้นติ้กที่ช่อง enable และ default เพื่อทำการเลือก theme นี้ใช้งาน แล้วกด Save Configuration ด้านล่าง

เพียงเท่านี้เราก็จะได้ theme มาใช้งานแล้ว

โดยให้เราสร้างฐานข้อมูลผ่าน plesk control panel ก่อนครับ ในที่นี้ฐานข้อมูลผมคือ joomla_db , user : joomla , pass : 1234 จากนั้นให้ทำการดาวโหลด joomla เวอร์ชั่นล่าสุดมาครับที่ http://www.joomla.org/download.html โดยตอนนี้ก็ออกมาแล้วสำหรับเวอร์ชั่น 1.5.12 จากนั้นแตกซิบออกมาครับนำ ftp ขึ้นโฮสของเราโดยไปวางไว้ที่ /httpdocs ดังรูป

จากนั้นทำการเข้าไปติดตั้ง joomla ผ่าน domain ครับในกรณีที่วางไว้ที่ /httpdocs น่ะครับ เช่น www.domain.com แล้วเราก็จะพบหน้าตาขั้นตอนการติดตั้ง joomla จากนั้นกด Next ครับ

ทำการตัวสอบรายละเอียดต่างๆ ให้เป็น yes ครับ แต่ส่วนสำคัญที่สุดคือ configuration.php ต้องทำให้เขียนไฟล์ได้ ใครที่เจอแบบผมดังรูปล่าง

ให้ทำการกำหนดสิทธิ folder ที่ลง joomla สามารถเขียนไฟล์ได้ครับ เพื่อให้ระบบทำการสร้างไฟล์ configuration.php ขึ้นมาได้เอง หลังจากกำหนดเสร็จแล้วให้กลับมายังหน้า joomla แล้วทำการกด Check Again ครับ จากนั้น configuration.php ก็จะกลายเป็น yes แล้วให้เรากด Next ต่อไปได้เลย

หน้า License ให้กด next ต่อไปครับ

ในหน้านี้จะเป็นการกำหนดรายละเอียดของฐานข้อมูลน่ะครับ จากนั้นกด Next ครับ

1. Host Name ใส่ localhost ลงไป
2. Username ในส่วนนี้จะเป็น username ของฐานข้อมูลน่ะ
3. Password รหัสของ username
4. Database Name ชื่อฐานข้อมูล

ในส่วนหน้า ftp เราจำเป็นต้องใส่ลงไปครับโดยให้เราใส่ ftp ที่สามารถเข้าไปแก้ไขข้อมูลบนเว็บเราได้ โดยวิธีการสร้าง ftp account ดูได้จาก สร้าง ftp account บน plesk control panel

1. ให้กด yes ครับ
2. FTP User ใส่ username ของ ftp ลงไป
3. FTP Password ใส่รหัสผ่านครับของ ftp ครับ
4. FTP Host ให้ใส่เป็นลิงค์ที่จะไปยัง ftp ของเรา โดยส่วนมากจะเป็น ftp.domain.com
5. Save FTP Password กด yes ครับ
6. จากนั้นกด autofind ftp path เพื่อให้ระบบทำการค้นหา path ของ joomla เองจากนั้นจะปากฎขึ้นที่ FTP Root Path ครับ ถ้าใครกดแล้ว error ให้ทำการตรวจสอบ ข้อ 2 ,3 ,4 ว่าถูกต้องหรือไม่ด้วยครับ
7. จากนั้นกด Next

จากนั้นใส่รายละเอียดของเว็บเราลงไป

1. Site Name ชื่อเว็บ
2. Your E-mail อีเมล์ครับ
3. Admin Password รหัสผ่าน admin
4. Install Sample Data ถ้าต้องการไฟล์เว็บเบื้องต้นเพื่อให้มองเห็นภาพในการสร้างเว็บไซต์มากขึ้นก็กดครับ ไม่กดก็ไม่เป็นไร
5. กด Next

จากนั้นให้ทำการลบ folder installation ออกครับ เท่านี้เราก็สามารถใช้งาน joomla ได้แล้วครับ

• Apache 1.3 หรือ Apache 2.x (Recommended) หรือ Microsoft IIS 5, IIS 6, IIS 7
• Recommended: PHP 5.2 or higher
  Required: PHP version 4.3.5 or higher
• Recommended: MySQL 4.1 or MySQL 5.0

หลังจากที่เรารู้ระบบที่ต้องการแล้วก็มาเริ่มการติดตั้งกันเลยครับ ให้สร้างฐานข้อมูลเปล่าๆมา 1 ฐานข้อมูลน่ะครับเพื่อรองรับ drupal
จากนั้นให้ดาวโหลด drupal เวอร์ชั่นล่าสุดมาก่อนที่ http://drupal.org/ จากนั้นทำการแตกไฟล์ออกมาวางไว้ที่ hosting เราครับ เช่น /httpdocs/ เป็นต้น จากนั้นเข้าผ่านหน้า url เลยครับ www.domain.com หรือ www.domain.com/drupal (สำหรับคนที่วางไว้เป็น sub folder)

แล้วก็จะเจอดังรูปด้านบนให้กดที่ Install Drupal in English เพื่อทำการติดตั้ง

เราจะพบกับข้อความดังภาพด้านล่าง

1. ทำการสร้าง folder ชื่อว่า files ขึ้นมาที่ ./sites/default/

$mkdir sites/default/files
//คำสั่ง สำหรับ linux ครับ

2. ให้ทำการ copy ไฟล์ ./sites/default/default.settings.php ไปเป็น ./sites/default/settings.php ครับ

$cp sites/default/default.settings.php sites/default/settings.php
//คำสั่ง สำหรับ linux ครับ

3. จากนั้นทำการกำหนดสิทธิ์ให้แก่ทั้ง 2 ตัว ให้สามารถเขียนไฟล์ได้

$chmod o+w sites/default/files sites/default/settings.php
//คำสั่ง สำหรับ linux ครับ

แล้วกด Try Again จากนั้นจะได้หน้าต่อไปครับ ให้ทำการใส่ชื่อฐานข้อมูลที่เราสร้างขึ้นมา และ user pass ของฐานข้อมูลนั่น จากนั่นกด Save and Continue

เรามาดูส่วนแรกกันก่อนครับ ระบบให้เราทำการปิดสิทธิ์ในการเขียนไฟล์ของ sites/default/settings.php เราก็จัดการปิดซะครับ จากนั้นให้ทำการใส่ชื่อ sitename และ อีเมล์

$chmod o-w sites/default/settings.php
//คำสั่ง สำหรับ linux ครับ

ส่วนสองให้ทำการกรองรายละเอียดลงไปครับ ชื่อในชื่อ user admin , email ของ user , รหัสผ่าน

ในส่วนนี้เราไม่ต้องแก้ไขอะไรน่ะครับ ให้แก้เฉพาะ time zone ไปก่อนให้เป็น +7 และในส่วนของ Clean URL จะมาพูดในวันหลังครับ จากนั่นกด Save and Continue

เพียงเท่านี้เราก็จะได้ drupal มาใช้งานละครับ

TinyMCE คือ WYSIWYG Editor ซึ่งมันก็คือตัวช่วยในการเขียนเนื้อหาที่ถูกนำไปใช้งานกับหลายๆ cms ด้วยกัน ซึ่งมันมีประโยชน์เหมือนกับการเขียนบน word อะไรยังงั้นเลย ก็ตามชื่ออะครับ WYSIWYG (What You See Is What You Get) เห็นอะไรได้อย่างงั้น ซึ่งถ้าใครใช้งาน magento อยู่ก็คงรู้ดีว่ามันมีแต่ช่อง Text area ให้มาเปล่าๆ ให้เราใส่ code หรือเขียนข้อความลงไปเอง ซึ่งถ้าไม่มีพื้นฐาน HTML ก็คงจะรำบากกันหน่อย แต่ TinyMCE ช่วยท่านได้ครับ

วิธีการติดตั้ง Tiny MCE บน magento คงจะไม่ง่ายเหมือนบน CMS ตัวอื่นหรอกครับแต่ก็ไม่ยากจนเกินไป เรามาเริ่มทำกันเลยดีกว่า ก่อนอื่นให้ดาวโหลดตัว Tiny MCE มาก่อน http://tinymce.moxiecode.com/download.php เลือกตัว Main package น่ะครับ จากนั้นให้ทำการแตกไฟล์ออกมาจะได้ folder ชื่อ tinymce ให้เราทำการอัพไฟล์ขึ้นไปวางไว้ที่ /js/tiny_mce (folder นี้ให้สร้างเอง)/tinymce (folder นี้คือตัวที่เราอัพโหลดขึ้นมา)

จากนั้นให้ทำการเพิ่ม script ด้านล่างลงไป ที่บรรทัด 54 (บรรทัด 49 ในเวอร์ชั่น 1.1.1) ในไฟล์ app/design/adminhtml/defaut/default/template/catalog/product/edit.phtml

<script language="javascript" type="text/javascript" src="<?php echo $this->getJsUrl('tiny_mce/tinymce/jscripts/tiny_mce/tiny_mce.js') ?>"></script>
<script language="javascript" type="text/javascript">
Event.observe(window, 'load', function() {
    tinyMCE.init({
        mode : "exact",
        theme : "advanced",
        strict_loading_mode : true,
        elements : "description,short_description",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_path_location : "bottom",
        extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
        theme_advanced_resize_horizontal : "true",
        theme_advanced_resizing : "true",
        apply_source_formatting : "true",
        convert_urls : "false",
        force_br_newlines : "true",
        doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'
    });
});

</script>

จากนั้นมาต่อด้วยแก้ไข function getElementHtml() ที่บรรทัด 51 จากไฟล์ lib/Varien/Data/Form/Element/Editor.php ให้ทำการ upadate น่ะครับหรือทับ code ตัวเก่าของมันทิ้งไปเลย

public function getElementHtml()
    {
        if( $this->getWysiwyg() === true )
        {
            $element = ($this->getState() == 'html') ? '' : $this->getHtmlId();

            $html = '
                <textarea name="'.$this->getName().'" title="'.$this->getTitle().'" id="'.$this->getHtmlId().'" class="textarea '.$this->getClass().'" '.$this->serialize($this->getHtmlAttributes()).' >'.$this->getEscapedValue().'</textarea>
        <script language="javascript" type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
        <script language="javascript" type="text/javascript">
        Event.observe(window, "load", function() {
            tinyMCE.init({
                mode : "exact",
                theme : "advanced",
                strict_loading_mode : true,
                elements : "'.$this->getHtmlId().'",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_path_location : "bottom",
                extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
                theme_advanced_resize_horizontal : "true",
                theme_advanced_resizing : "true",
                apply_source_formatting : "true",
                convert_urls : "false",
                force_br_newlines : "true",
                doctype : "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">"
            });
        });

        </script>';

            $html.= $this->getAfterElementHtml();
            return $html;
        }
        else
        {
            return parent::getElementHtml();
        }
    }

ต่อมาให้แก้ไขไฟล์จากบรรทัดที่ 101 /magento/app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit/Tab/Main.php จากเดิม

$fieldset->addField('content', 'editor', array(
            'name'      => 'content',
            'label'     => Mage::helper('cms')->__('Content'),
            'title'     => Mage::helper('cms')->__('Content'),
            'style'     => 'height:36em;',
            'wysiwyg'   => false,
            'required'  => true,
        ));

เป็น

 $fieldset->addField('content', 'editor', array(
            'name'      => 'content',
            'label'     => Mage::helper('cms')->__('Content'),
            'title'     => Mage::helper('cms')->__('Content'),
            'style'     => 'width:98%; height:600px;',
            'wysiwyg'   => true,
            'required'  => true,
        ));

จากนั้นลองเข้าหน้า admin ของ magento ดูครับแล้วไปที่ Catalog >> Manage Product แล้วทำการสร้างสินค้าดูครับ

แต่ในส่วนที่แก้ไขยังคงใช้ tinymce ได้เพียงแค่หน้าสร้างสินค้าเท่านั้นถ้าเราต้องการใช้งานในส่วนอื่นๆเพิ่มเติมต้องติดตั้ง Extension ที่ชื่อว่า Fontis WYSIWYG Editor ครับ เมื่อทำการติดตั้งแล้วให้เรามาแก้ไขค่ามันที่เมนู System >> Configuration >>Admin แล้วดูที่แท็บ WYSIWYG Editor ให้เลือก Editor Type เ็ป็น Tiny MCE ตามรูป หลังจากนั้นเราก็จะสามารถใช้งานในส่วนของ

• Product Description
• Product Short Description
• CMS Page Content
• Static Block Content
• Category Description
• Newsletter Template

อ้างอิง : http://www.magentocommerce.com/wiki/wysiwyg/a_how-to#introduction
ปล. code ที่ผมนำมาอาจจะไม่เหมือนในเว็บไซต์อ้างอิง เพราะผมได้ทำการแก้ไขในส่วนของ path ที่ลิงค์ไปยัง tiny_mce.js ซึ่งถ้าทำตามผมได้อย่างถูกต้อง สามารถนำไปใช้งานได้แน่นอนครับ