Saturday, February 20, 2010

ใส่ Flash ใน Joomla

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

ดาวน์โหลดได้จากที่นี่ครับ

http://joomlacode.org/gf/project/thai/frs/?action=FrsReleaseBrowse&frs_package_id=3900

ส่วนการใส่ flash ก็ใช้โค้ดสำหรับแทรก flash อยู่ในหัวข้อการใช้เทมเพลตของเว็บนี้ครับ

ส่วนการวางคู่กันต้องปรับแต่งตำแหน่งในเทมเพลตครับ

เรื่อง Editor - JCE

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

เป็น Plugin ที่ต้องเสียตังซื้อครับ สามารถซื้อได้ที่เว็บ http://www.joomlacontenteditor.net/

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

การใช้งาน ccBoard

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

ผมเอาวิธีจากในบทเรียนสอนมาให้ลองทำดูนะครับ

ccboard-01.pdf

ccboard-02.pdf

ccboard-03.pdf

ccboard-04.pdf

ปฏิทิน JEvent และไฟล์ภาษาไทย

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

JEvent เป็นคอมโพแนนท์สำหรับปฏิทินบันทึกกิจกรรม เหมือกับที่ใช้ในเว็บนี้ครับ

ดาวน์โหลดได้ที่นี่

com_jevents_1.5.2.zip

mod_jevents_cal_1.5.2.zip

mod_jevents_latest_1.5.2.zip

jevents_search_1.5.2.zip

ไฟล์ภาษาไทยที่ผมแปลไว้ที่นี่ครับ

com_jevents_1.5.2_language_pack_th.zip

Article มาแสดงที่ module ต่างๆ

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

ลองใช้ Module ตัวนี้ครับ

http://extensions.joomla.org/extensions/news-display/content-embed/9290

คอมโพแนนท์ ccBoard 1.2-RC และไฟล์ภาษาไทย

เขียนโดย พรหมมาศ แซ่ลั้ว

http://www.thaisolution.net

ตอน นี้ ccBoard ออกรุ่นใหม่ 1.2-RC แล้วนะครับ แต่จะตัดคำหัวข้อที่เป็นภาษาไทยไม่สวยครับ ตัวนี้ผมปรับแต่งโค้ดเล็กน้อย เหมือนกับที่ใช้ในเว็บบอร์ดนี้ครับ

ดาวน์โหลดได้ที่นี่

ไฟล์คอมโพแนนท์หลัก com_ccboard_1_2-RC-modify.zip

ถ้า upgrage จากรุ่นเดิมใช้ไฟล์นี้ครับ migration_All_Time_To_1_2-RC-modify.zip ดูวิธีการ upgrade ได้ที่ http://codeclassic.org/the-howto/79-migration-steps-for-ccboard-ver-1-2-rc.html

โมดูลของ ccBoard

mod_ccboard_latest_post_1_1-RC-modify.zip

mod_ccboard_latest_topics_1_1-RC-modify.zip

mod_ccboard_popular_posts_1_1-RC-modify.zip

ไฟล์ภาษาไทย

com_ccboard_1.2_RC_language_pack_th.zip

mod_ccboard_latest_posts_1.1_RC_language_pack_th.zip

mod_ccboard_latest_topics_1.1_RC_language_pack_th.zip

mod_ccboard_popular_posts_1.1_RC_language_pack_th.zip

การติดตั้ง Community Builder 1.2.1 ภาษาไทย

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net


เข้าไปที่เมนู Plugin Management ของ Community Builder นะครับ แล้วเลื่อนลงมาด้านล่างที่ Install New Plugin เลือกไฟล์ภาษาไทยแล้วติดตั้งก็จะใช้ภาษาไทยได้เลยครับ

ดาวน์โหลดไฟล์ภาษาไทยได้ที่นี่ครับ

plugin_thai-cb-1.2.1.zip

การสร้างลิ้งค์ให้สามารถดาวน์โหลดไฟล์ได้เลย

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

ติดตั้ง eFront ดาวน์โหลดได้ที่ http://www.efrontlearning.net/

อยากทราบการเขียน Component ขึ้นมาใช้เอง

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

ลองศึกษาจากเว็บของ Joomla ครับ

http://docs.joomla.org/Developers

ตอนนี้ที่เป็นภาษาไทยยังมีน้อยครับ

การดึงข่าวมาแสดงหน้าเว็บ

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

ลองดูโปแกรมสร้าง RSS Feed

http://www.bodyhealthdebate.co.uk/breast-cancer-awareness-rss-syndicator-joomla

โปรแกรมแสดง RSS ลองหาดูจากที่นี่ครับ

http://extensions.joomla.org/extensions/external-contents/rss-readers

โปรแกรม chat หน้าเว็บ

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

ลองดู jPFChat ครับ

ตัวเสริมที่รวมรายการต่างๆ

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

ใช้โมดูลตัวนี้ครับ

JoomlaWorks Tabs & Slides Module

ตัวอย่าง การปรับแต่งและใช้งานเทมเพลต

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

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

หากต้องการรู้ว่าในเทมเพลตมีตำแหน่งอะไรอยู่ตรงไหนบ้างให้พิมพ์ index.php?tp=1 ต่อท้ายชื่อเว็บ เช่นของเว็บนี้จะเป็น http://www.thaisolution.net/index.php?tp=1

ตัวอย่างกำหนดการแสดงในเว็บนี้

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

ภาพแสดงโมดูลในตำแหน่ง top (กำหนดให้แสดงในหน้าหนึ่งเท่านั้น)

top-position-01

ภาพแสดงโมดูลในตำแหน่ง bottom (กำหนดให้แสดงในหน้าหนึ่งเท่านั้น) ในภาพจะอยู่ด้านล่างบริเวณที่เป็นสีเหลือง

top-position-02

รูปด้านล่างแสดงการวางตำแหน่งต่าง ๆ ในเทมเพลตของเว็บนี้

position-01

ตำแหน่ง user3 จะอยู่บนสุด (ในเว็บนี้ใช้แสดงปุ่มเมนูด้านบน)

ตำแหน่ง header จะอยู่บนตำแหน่ง top จะแสดงในทุกหน้า (ยังไม่ได้ใช้)

ตำแหน่ง footer จะอยู่ถัดจากตำแหน่ง bottom จะแสดงในทุกหน้า (ในเว็บนี้จะแสดง Google Adsense)

ด้านซ้ายมือจะเป็นตำแหน่ง left

ด้านขวามือจะเป็นตำแหน่ง right

การเปลี่ยนภาพหัวเว็บด้านบน ให้ใช้ภาพที่มีขนาดเท่ากันบันทึกแทนไฟล์เดิมที่อยู่ในกล่อง images ชื่อไฟล์ Header.jpg และภาพอื่น ๆ ในกล่อง images สามารถใช้โปรแกรมตกแต่งภาพแก้ไขได้ทุกไฟล์เพียงแต่ให้มีความกว้างยาวเท่า เดิม

การเปลี่ยนชื่อและสโลแกนเว็บไซต์ ให้แก้ในไฟล์ index.php ของเทมเพลตแล้วแก้ในส่วนนี้

edit-slogan.txt

รูปด้านล่างแสดงภาพหัวเว็บ ชื่อ และสโลแกนของเว็บไซต์

header

การใส่ไฟล์ Flash บนหัวเว็บ

ถ้าต้องการให้แสดงไฟล์ Flash บนหัวเว็บเหมือนในเว็บนี้ ให้อัพโหลดไฟล์ Flash ชื่อ header.swf หรือชื่ออะไรก็ได้แต่ต้องแก้ในโค้ดให้ตรงกันไปไว้ในกล่อง images แล้วแทรกคำสั่งต่อไปนี้ในไฟล์ index.php ของเทมเพลตในระหว่างแท็ก

แสดงตัวอย่างโค้ด

code-insert-flash.txt

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

การแก้ไขการตรวจสอบเงื่อนไขของหน้าหรือคอมโพแนนท์

ถ้าต้องการกำหนดการแสดงจำนวนคอลัมน์ที่แตกต่างจากที่กำหนดไว้เดิม ให้แก้ไขในไฟล์ index.php ของเทมเพลต ให้ระวังเรื่องของรูปแบบคำสั่งให้มากครับ ถ้าผิดนิดนึงเทมเพลตอาจใช้ไม่ได้ ในการแก้ไขควรมีความรู้ภาษา PHP พอสมควร

โดยเงื่อนไขการเปรียบเทียบเราสามารถดูได้จาก URL ของหน้าที่เราต้องการตรวจสอบ ซึ่งจะอยู่หลัง index.php ต่อจากเครื่องหมาย ? เช่น ?task=editpost หรือ ?option=com_content เป็นต้น เราจะเห็น URL แบบนี้ได้ต้องไม่เปิดระบบ SEF ของ Joomla นะครับ ถ้าเปิดอยู่ให้ปิดดูก่อนเสร็จแล้วค่อยเปิดทีหลังได้ครับ

การกำหนดเงื่อนไขสำหรับให้แสดงคอลัมน์เดียว ให้แก้ไขบริเวณนี้ครับ

01.if(JRequest::getCmd('mode') == 'post' or JRequest::getCmd('mode') == 'edit'
02. or JRequest::getCmd('mode') == 'reply' or JRequest::getCmd('mode') == 'quote'
03. or JRequest::getCmd('layout') == 'form' or JRequest::getCmd('task') == 'edit'
04. or JRequest::getCmd('task') == 'editpost' or JRequest::getCmd('layout') == 'entry'
05. or JRequest::getCmd('option') == 'com_jpfchat' or JRequest::getCmd('task') == 'icalevent.edit'
06. or JRequest::getCmd('option') == 'com_ccboard' or JRequest::getCmd('option') == 'com_projectfork'
07. or JRequest::getCmd('view') == 'addpost') {
08./* Start assign parameters for one column */
09.$cols_num = 1;
10.$main_pos = "left";
11.$div_class = "content-full";
12./* End assign parameters for one column */

การกำหนดเงื่อนไขสำหรับให้แสดงสองคอลัมน์ ให้แก้ไขบริเวณนี้ครับ อยู่ถัดจากโค้ดข้างบนเลย

01.} elseif($this->countModules('left')) { /* if not one column condition */
02. if(JRequest::getCmd('view') == 'article' or JRequest::getCmd('option') == 'com_comprofiler'
03. or JRequest::getCmd('option') == 'com_frontenduserarticlelist'
04. or JRequest::getCmd('option') == 'com_alphacontent'
05. or JRequest::getCmd('option') == 'com_fabrik' or JRequest::getCmd('option') == 'com_cbmailing'
06. or JRequest::getCmd('option') == 'com_uddeim' or JRequest::getCmd('layout') == 'blog'
07. or JRequest::getCmd('option') == 'com_blog' or JRequest::getCmd('option') == 'com_lyftenbloggie') {
08./* Start assign parameters for two column some component */
09.$cols_num = 2;
10.$main_pos = "right";
11.$div_class = "content-middle";
12./* End assign parameters for two column some component */

ตรงนี้ไม่ขออธิบายมากครับ ถ้าไม่จำเป็นก็ไม่ควรแก้ไข เขียนไว้คร่าว ๆ สำหรับผู้ที่มีประสบการณ์ในการแก้ไขเทมเพลตครับ

โค้ดคำสั่งกำหนดเงื่อนไขในการแสดงจำนวนคอลัมน์ของเทมเพลต

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

ให้ทำการแก้ไขไฟล์ index.php ของเทมเพลตที่ใช้ ควรสำรองไฟล์ index.php เดิมเก็บไว้ก่อน แทรกโค้ดคำสั่งนี้ไปแทนที่คำสั่งเดิมของเทมเพลต ตั้งแต่ส่วนที่แสดงตำแหน่งโมดูล left จะถึงตำแหน่งโมดูล right ส่วนนี้สำหรับผู้ที่มีประสบการณ์ในการแก้ไขเทมเพลตเท่านั้นนะครับ ถ้าคุณยังไม่เคยแก้ไขเทมเพลตให้ศึกษาคำสั่ง PHP และรูปแบบของเทมเพลตก่อน

รูปแบบคำสั่งมีดังนี้

script-manage-template.txt

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

ส่วนสำคัญอันหนึ่งคือต้องกำหนดความกว้างของหน้าในไฟล์ CSS ของเทมเพลตที่ใช้ด้วยตัวแปล $div_class สามารถกำหนดตาม CSS ที่ใช้ได้ อาจจะคัดลอกจากของเดิมเป็นสามชุด แล้วเปลี่ยนชื่อให้ตรงกับที่กำหนดในตัวแปล ส่วนค่าอื่น ๆ เอาไว้เหมือนเดิมเปลี่ยนแต่ค่า width อย่างเดียว

ตัวอย่าง

template.css.txt

หลักการก็คือคำสั่งในไฟล์ index.php จะตรวจสอบเงื่อนไขของหน้าเว็บหรือคอมโพแนนท์ แล้วกำหนดในค่าตัวแปล $div_class ตามการแสดงจำนวนคอลัมน์แล้วไปกำหนดให้แท็ก

เรียกใช้คลาสอันใดอันหนึ่งจากไฟล์ CSS ที่มีการกำหนดความกว้างไว้ต่างกันตามการแสดงจำนวนคอลัมน์

ในการใช้งานจริงการแก้ไขแต่ละเทมเพลตจะมีรายละเอียดไม่เหมือนกัน ต้องปรับใช้กันเองตามเทมเพลตที่ใช้ครับ

สำหรับผู้ที่สนใจเทมเพลตในเว็บนี้สามารถติดต่อรายละเอียดกับผมได้ครับ

โมดูลหรือปลั๊กอินที่สามารถดูข่าวหรือบทความทั้งหมด

เขียนโดย พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

ลองใช้ Alphacontent จะมีโมดูลสำหรับแสดงลิงก์ไปยังหมวดหมู่ของเนื้อหาครับ

http://www.alphaplug.com

โมดูล AJAX Shoutbox ภาษาไทย

เขียนโดย : พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

เป็นโมดูลสำหรับส่งข้อความสั้น ๆ กันหน้าเว็บครับ ตัวนี้ผมแปลเป็นภาษาไทยครับ และปรับแต่งโค้ดนิดหน่อยครับ

ตัวอย่างการใช้งานดูตรงกรอบหน้าต่าง Short Message ด้านซ้ายมีอในหน้าเว็บนี้ครับ

mod_shoutbox_free_1.2.1-th-modify.zip

โปรแกรมเสริมสำหรับส่งข้อความส่วนตัวระหว่างสมาชิก(PMS) uddIM

เขียนโดย : พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

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

รูปด้านล่างแสดงหน้าต่างเตือนเมื่อมีข้อความเข้ามา

uddim-message-exam

ตอนนี้รุ่นล่าสุดคือ uddim 1.9 ผมแปลภาษาไทยไว้ให้แล้วครับ ผมใช้แค่สองตัวคือคอมโพแนนท์กับโมดูลเตือนข้อความ

com_uddeim-1.9-th.zip

mod_uddeim-1.9.zip

สำหรับผู้ที่ใช้ Community Builder เป็นปลักอินสำหรับแสดงแท็บส่งข้อความส่วนตัวครับ

cb_plug_pms_uddeim-1.1.zip

คู่มือการปรับแต่งตัดจากส่วนหนึ่งในห้องเรียนออนไลน์ uddim-part1.pdf

โมดูลสำหรับแจ้งเตือนผู้ใช้ IE รุ่นเก่า

เขียนโดย : พรหมมาศ แซ่ลั้ว

http://www.thaisolution.net


โมดูลจะแจ้งเตือนผู้ใช้ที่ใช้ IE รุ่นเก่า 6 กับ 7 ครับ ผมแก้ภาษาไทยและแก้โค้ดเพื่อปรับแต่งการแสดงผลเล็กน้อย

mod_fhw-upgrade-browser-modify.zip

ตัวเดิมอยู่ที่

http://extensions.joomla.org/extensions/style-&-design/browsers-&-web-standards/8619/details

โมดูลอีกตัวนึงครับตัวนี้ผมแก้ไขโค้ตจากของเดิมให้ปรับแต่งตัวเลือกได้มากขึ้น มีไฟล์ภาษาไทยและอังกฤษ

mod_ie6check_1.5-th-modify.zip

ถ้าต้องการเปลี่ยนข้อความเตือนให้แก้ที่ไฟล์ภาษา en-GB.mod_ie6check.ini และ th-TH.mod_ie6check.ini

โปรแกรมเดิมอยู่ที่ http://extensions.joomla.org/extensions/style-a-design/browsers-a-web-standards/6835


ภาษาไทยสำหรับ JoomGallery

เขียนโดย : พรหมมาศ แซ่ลั้ว

http://www.thaisolution.net

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

ดาวน์โหลด JoomGallery ได้ที่ http://www.en.joomgallery.net

ดาวน์โหลดภาษาไทยสำหรับ JoomGallery ที่ผมแปลไว้ได้ที่นี่ครับ

Language_pack_joomgallery_1.5.0.3_th.zip

ติดตั้งเหมือนกับโปรแกรมเสริมทั่วไปครับ

mod_comprofiler

เขียนโดย : พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

ใช้รุ่นไหนอยู่ครับ อาจจะเป็นรุ่นเก่า ลองโหลดรุ่นปัจจุบันไปลองดูครับ

cb_1_2_1-unzip1st.zip

plugin_thai-cb-1.2.1.zip

Jcomments ภาษาไทย โปรแกรมเสริมสำหรับการแสดงข้อคิดเห็นในหน้าเว็บ

เขียนโดย : พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

ตอนนี้ JComment 2.1 มีภาษาไทยแล้วนะครับ ดาวน์โหลดได้ที่

http://www.joomlatune.com/jcomments-downloads.html

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

com_jcomments_v2.1.0.0_language_pack_th.zip

mod_jcomments_j15_v2.5.3_language_pack_th.zip



คอมโพแนนท์ JComment ที่ผมแก้ไขเอาภาษาอื่นที่ไม่ใช้ออก และกำหนดให้เปิดลิงก์ในหน้าต่างใหม่

com_jcomments_v2.1.0.0-modify.zip

การแทรกไฟล์ดาวน์โหลดในเนื้อหาเว็บ

เขียนโดย : พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

(อธิบายการใช้งานจากระบบเว็บของเรา การกำหนดการปรับแต่ง Joomla แต่ละแบบจะแตกต่างกันไป ในการอธิบายนี้ใช้ JCE Editor และ Plugin ชื่อ File Manager)

การใช้งานโดยทั่วไปจะเหมือนกับ การใส่รูปภาพในหน้าเว็บเบื้องต้น ต่างกันเพียงแค่ในหน้าต่างนี้จะเป็นการจัดการไฟล์

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

file-manager-windows

หากต้องการสร้างโฟลเดอร์เพื่อแบ่งการจัดเก็บไฟล์ให้เป็นระเบียบ ให้คลิกที่ปุ่ม new-folder-button จะแสดงหน้าจอดังรูปด้านล่าง

new-folder

ให้เราตั้งชื่อโฟลเดอร์เป็นภาษาอังกฤษ เสร็จแล้วกดปุ่ม OK ในหน้าต่างก็จะมีชื่อโฟลเดอร์ที่เราได้สร้างขึ้นมาเพื่อจัดเก็บไฟล์ให้เป็น ระเบียบ การเข้าไปในโฟลเดอร์ให้คลิ๊กที่ชื่อของโฟลเดอร์ เมื่อเราต้องการส่งไฟล์ขึ้นไปเก็บไว้ในโฟลเดอร์ให้คลิ๊กที่ปุ่ม Upload upload-button จะแสดงหน้าจอดังรูปด้านล่าง

upload-file

ให้เราคลิ๊กที่ปุ่ม Add เพิ่มไฟล์ที่ต้องการส่งไปเก็บในโฟลเดอร์ โดยเราสามารถเพิ่มได้ครั้งละหลาย ๆ ไฟล์ รายการไฟล์จะอยู่ใน Queue เสร็จแล้วให้คลิ๊กที่ปุ่ม Upload รอจนรายการไฟล์ครบ 100% จากนั้นให้ปิดหน้าต่างนี้ไปเราก็จะเห็นไฟล์ที่ได้ส่งมาเก็บอยู่ในโฟลเดอร์ ที่อยู่ปัจจุบัน ในการแทรกไฟล์ดาวน์โหลดลงในหน้าเว็บให้คลิกที่ชื่อไฟล์แล้วกดปุ่ม Insert ดังรูปด้านล่าง

insert-file-download

เมื่อกดปุ่ม Insert จะมีลิงก์ดาวน์โหลดไฟล์แทรกในหน้าเว็บทันที การลบลิงก์ออกทำได้ง่าย ๆ โดยการลบข้อความที่เป็นลิงก์ออกไป

การใส่ภาพจากอัลบั้มภาพไปในเนื้อหาเว็บ

เขียนโดย : พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

(อธิบายการใช้งานจากระบบเว็บของเรา การกำหนดการปรับแต่ง Joomla แต่ละแบบจะแตกต่างกันไป)

เราสามารถนำภาพที่มีอยู่ในอัลบั้มภาพไปใส่ในเนื้อหาเว็บได้ง่าย ๆ ซึ่งสามารถใส่ในเนื้อหาของเว็บได้ทุกหน้า โดยการคลิกที่ปุ่ม JoomImage ที่อยู่ด้านล่างของหน้า Editor ดังรูปด้านล่าง

insert-album-content

โปรแกรมจะแสดงภาพในอัลบั้มขึ้นมาให้เลือกใส่ได้ตามต้องการ ดังรูปด้านล่าง

insert-album-content2

การจัดการอัลบั้มภาพ

เขียนโดย : พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

(อธิบายการใช้งานจากระบบเว็บของเรา โปรแกรมเสริมที่ใช้คือ JoomGallery การปรับแต่งแต่ละแบบจะใช้งานแตกต่างกันบ้าง)

ในการจัดการอัลบั้มภาพคุณต้อง Login เข้าสู่ระบบก่อน แล้วเข้าไปหน้าอัลบั้มภาพโดยคลิกที่เมนู "อัลบั้มภาพ" ในแถบเมนูหลัก จะแสดงหน้าอัลบั้มภาพดังรูปด้านล่าง

image-gallery

ในการจัดการอัลบั้มภาพของผู้ใช้แต่ละคนให้คลิกที่ "แผงควบคุมอัลบั้มภาพของคุณ" จะแสดงหน้าต่างดังรูปด้านล่าง

user-panel

ในหน้านี้คุณสามารถแก้ไขภาพ หรือลบภาพออกได้ โดยกดที่ปุ่ม "แก้ไข" หรือ "ลบ" ในคอลัมน์ "การดำเนินการ"

คุณต้องสร้างหมวดของอัลบั้มขึ้นมาก่อนอย่างน้อยหนึ่งหมวดเพื่อจัดเก็บภาพ โดยคลิกที่ "หมวดอัลบั้ม" จะแสดงหน้าต่างดังรูปด้านล่าง

category-album

การสร้างหมวดอัลบั้มใหม่ให้คลิกที่ปุ่ม "สร้างอัลบั้มใหม่" จะแสดงหน้าต่างดังรูปด้านล่าง

new-category-album

ให้กรอกรายละเอียดใหนช่องข้อมูลดังนี้

ชื่อรายการ ใส่ชื่อของอัลบั้ม

โครงสร้างหลักหมวดอัลบั้ม กำหนดว่าอัลบั้มที่สร้างใหม่นี้จะอยู่ในหมวดไหน

คำอธิบาย กำหนดคำอธิบายของอัลบั้มนี้ (ไม่จำเป็นต้องใส่ก็ได้)

ระดับการเข้าใช้ กำหนดระดับการเข้าใช้งานอัลบั้ม โดยถ้าเป็น Public จะแสดงให้กับทุกคน, Registered กำหนดให้แสดงเฉพาะสมาชิกที่ลงทะเบียน, Special กำหนดให้แสดงเฉพาะสมาชิกระดับสูงเท่านั้น

เผยแพร่ กำหนดว่าต้องการแสดงอัลบั้มนี้หรือไม่

การจัดเรียง กำหนดลำดับการแสดงผล

เมื่อกำหนดค่าเสร็จแล้วให้กดปุ่ม "บันทึก" เป็นการเสร็จสิ้นขั้นตอนการสร้างหมวดอัลบั้ม

การใส่ภาพไปในอัลบั้มภาพ

เมื่อเราได้สร้างหมวดอัลบั้มแล้วต่อไปก็จะ เป็นการส่งภาพไปไว้ในอัลบั้ม โดยการคลิกที่ "แผงควบคุมอัลบั้มภาพของคุณ" แล้วคลิกที่ปุ่ม "ส่งภาพใหม่" จะแสดงหน้าต่างดังรูปด้านล่าง

upload-image

ใส่ข้อมูลของภาพดังนี้ (สามารถแก้ไขทีหลังได้)

ใส่ชื่อภาพในช่อง "ชื่อรายการ"

เลือกหมวดอัลบั้มที่ต้องการนำภาพไปใส่

ใส่คำอธิบายภาพ หรือเว้นว่างไว้ก็ได้

คลิกที่ปุ่ม Browse... เพื่อไปเลือกภาพในเครื่องที่ต้องการส่ง โดยสามารถส่งได้ครั้งละ 5 ไฟล์

คลิกเครื่องหมายถูก หากภาพที่ส่งเป็นภาพโปร่งใส หรือเป็นภาพเคลื่อนไหว

เสร็จแล้วกดปุ่ม "อัพโหลด"

ภาพที่เราได้เลือกไว้ก็จะไปเก็บ และแสดงในอัลบั้มที่กำหนด

การสร้างเนื้อหาเว็บเบื้องต้น

ขียนโดย : พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

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

ก่อนอื่นต้อง Log In เข้าสู่ระบบก่อน แล้วคลิกที่ "สร้างเนื้อหาใหม่" ในกรอบหน้าต่าง "เมนูผู้ใช้" ในแถบด้านซ้ายมือ

user-menu

จะแสดงหน้า Editor สำหรับสร้างเนื้อหาดังรูป (คลิ๊กที่ภาพเพื่อดูภาพขนาดใหญ่)

editor-form

ชื่อเรื่อง ใส่ชื่อเรื่องของบทความ

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

Section เลือกหมวดของบทความ (จำเป็นต้องเลือก)

Category เลือกประเภทของบทความ (จำเป็นต้องเลือก)

เผยแพร่แล้ว ใช้สำหรับกำหนดให้แสดง และ ไม่แสดงบทความบนหน้าเว็บ

แสดงในหน้าแรก กำหนดให้บทความแสดงในหน้าแรกของเว็บหรือไม่

นามปากกาของผู้เขียน ใช้กำหนดชื่อนามปากกาของผู้เขียน ปรกติไม่ต้องใส่

เริ่มเผยแพร่ ใช้กำหนดวันที่เริ่มเผยแพร่บทความ ปรกติใช้ค่าเดิม

สิ้นสุดการเผยแพร่ ใช้กำหนดวันที่สิ้นสุดการเผยแพร่บทความ ปรกติไม่ใส่

ระดับการเข้าถึง เปิดเผย หมายถึงดูได้ทุกคน, Registered หมายถึงเฉพาะผู้ที่ Log In เท่านั้นที่ดูได้, รายการพิเศษ หมายถึงดูได้เฉพาะผู้ใช้ระดับสูง

ในส่วนของเมต้าดาต้า ใช้สำหรับกำหนดคำสำหรับใช้ในการค้นหาของ Search Engine ปรกติไม่ต้องใส่


สรุปการสร้างเนื้อหา

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

หมายเหตุ

จะมี Category พิเศษใน Section Static Content ซึ่งได้กำหนดไว้พิเศษคือจะไม่แสดงในเมนูเนื้อหา โดยจะมี 2 Category คือ

Announcement และ General Content โดยมีลักษณะการใช้งานดังนี้

Announcement ถ้าเลือกเนื้อหามาไว้ใน Category นี้ จะแสดงเนื้อหาในในส่วนบนสุดของหน้าแรกตลอดเวลา โดยจะแสดงเป็นจำนวนสูงสุด 5 รายการ และจะเรียงลำดับการแสดงผลตามการแก้ไขล่าสุด คือเนื้อหาที่แก้ไขหลังสุดจะไปอยู่บนสุด ใช้สำหรับการประกาศที่สำคัญต่าง ๆ

General Content ถ้าเลือกเนื้อหามาไว้ใน Category นี้ จะไม่แสดงรายการในเมนูเนื้อหาเท่านั้น ใช้สำหรับเนื้อหาบางอย่างที่ไม่ต้องการให้แสดงเมนูลิงค์ไปยังเนื้อหา

การลิงค์จากภาพเล็กไปใหญ่

เขียนโดย : พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

(อธิบายการใช้งานจากระบบเว็บของเรา การกำหนดการปรับแต่ง Joomla แต่ละแบบจะแตกต่างกันไป ในการอธิบายนี้ใช้ Plugin ชื่อ Mavik Thumbnails)

คุณต้องอ่าน การใส่รูปภาพในหน้าเว็บเบื้องต้น ก่อน

ในกรณีที่คุณมีภาพขนาดใหญ่ ถ้าจะแสดงในหน้าเว็บจะทำให้ล้นหน้า เราสามารถทำให้แสดงภาพขนาดเล็กก่อน แล้วเมื่อคลิกที่ภาพเล็กจะแสดงภาพขนาดใหญ่ขึ้นมาแบบเต็มจอ

มีขั้นตอนการทำง่าย ๆ คือ ให้คุณแทรกภาพที่มีขนาดใหญ่ในเนื้อหาเว็บก่อน จากนั้นคลิกที่ภาพหนึ่งครั้ง สังเกตุที่ขอบของภาพตรงมุมจะมีปุ่มเล็ก ๆ ดังรูป

resize-image-button

ให้ เราเลื่อนเมาส์ไปที่ปุ่มจนสัญลักษณ์ลูกศรเมาส์เปลี่ยนเป็นลูกศรสองหัว ให้กดปุ่มเมาส์ค้างแล้วปรับขนาดของภาพให้เล็กลงตามที่เราต้องการ เสร็จแล้วบันทึก โปรแกรมจะสร้างลิงค์ที่ภาพเล็กให้โดยอัตโนมัติ เมื่อเราคลิกที่ภาพเล็กก็จะแสดงภาพใหญ่ขึ้นมาแบบเต็มจอ การปิดหน้าจอภาพใหญ่ให้เราคลิ๊กที่ปุ่ม Close ด้านล่างซ้าย หรือคลิ๊กพื้นที่สีดำด้านนอกของภาพ

ตัวอย่าง คลิกที่ภาพเพื่อดูภาพใหญ่

a dream world

การใส่รูปภาพในหน้าเว็บเบื้องต้น

เขียนโดย : พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

เมื่อเราสร้างหน้าเว็บใหม่ หรือแก้ไขหน้าเว็บเดิม แล้วต้องการใส่รูปภาพประกอบเนื้อหา สามารถทำได้ดังนี้ (ในการอธิบายนี้ใช้ JCE Editor และ Plugin ของ JCE Editor ชื่อ Image Manager Extended)

ให้กดที่ปุ่ม Insert/Edit image insert-edit-image-button จากแถบเครื่องมือ จะแสดงหน้าต่างดังรูปด้านล่าง


image-manager-01

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

list-view-button List View เป็นปุ่มสำหรับเปลี่ยนมุมมองในการแสดงไฟล์รูปภาพ

new-folder-button New Folder เป็นปุ่มสำหรับสร้างโฟลเดอร์ เพื่อจัดเก็บรูปภาพ แบ่งเป็นส่วนย่อย ๆ เพื่อไม่ให้ภาพปะปนกัน

upload-button Upload เป็นปุ่มสำหรับเลือกภาพจากเครื่องของเราส่งขึ้นไปเก็บไว้เพื่อนำไปใส่ในเนื้อหาเว็บ

help-button Help เป็นปุ่มสำหรับแสดงวิธีใช้งานเป็นภาษาอังกฤษ

rename-file-button Rename File เป็นปุ่มสำหรับเปลี่ยนชื่อไฟล์ หากไม่จำเป็นไม่ควรเปลี่ยนชื่อไฟล์ อาจทำให้ลิงค์ภาพผิดพลาดได้

delete-files-button Delete Files เป็นปุ่มสำหรับลบไฟล์ ใช้ลบไฟล์ที่เราไม่ต้องการ

copy-flies-button Copy Files เป็นปุ่มสำหรับคัดลอกไฟล์ (ปุ่มนี้ไม่ได้ใช้)

cut-files-button Cut Files เป็นปุ่มสำหรับย้ายไฟล์ (ปุ่มนี้ไม่ได้ใช้)

view-file-button View File เป็นปุ่มสำหรับเปิดดูไฟล์

insert-file-button Insert File เป็นปุ่มสำหรับแทรกไฟล์ไว้ในเนื้อหา (ปุ่มนี้ไม่ได้ใช้)

transform-image-button Transform Image เป็นปุ่มสำหรับปรับขนาดภาพ

create-thumbnail-button Create Thumbnail เป็นปุ่มสำหรับสร้างภาพย่อ

ขั้นตอนการใส่รูปภาพในเนื้อหา

ก่อนอื่นให้คลิกในเนื้อหาตรงตำแหน่งที่ต้องการแทรกภาพ ให้มีเคอร์เซอร์กระพริบอยู่ แล้วกดปุ่ม Insert/Edit image insert-edit-image-button

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

ในการ upload ภาพให้กดที่ปุ่ม Upload upload-button จะแสดงหน้าต่างดังรูปด้านล่าง

upload-image

กด Add ไปเลือกไฟล์รูปภาพที่เราเตรียมไว้ในเครื่อง เราสามารถเลือกไฟล์มาไว้ในคิวได้หลาย ๆ ไฟล์ เมื่อเลือกไฟล์ไว้ในรายการคิวเสร็จแล้วกดปุ่ม Upload ตรงด้านล่าง รอจนครบ 100 % หรือเป็นสัญลักษณ์เครื่องหมายถูกสีเขียว เมื่อเสร็จแล้วแล้วกด Cancle หรือปิดหน้าต่างนี้ได้เลย

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

การจัดตำแหน่งรูปภาพ โดย เราสามารถจะจัดได้ 3 ตำแหน่งคือ ซ้าย กลาง และขวา ให้คลิกเลือกที่ภาพจะมีปุ่มรอบ ๆ รูปภาพ จากนั้นเลือกที่ปุ่ม Align left, Align center หรือ Align right เพื่อจัดตำแหน่งภาพ

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

การลบรูปภาพ ให้คลิกเลือกที่รูปภาพจนมีปุ่มรอบ ๆ รูปภาพ เสร็จแล้วกดปุ่ม Delete บนคีย์บอร์ด

การใส่เส้นขอบของรูปภาพ ให้คลิกเลือกที่ Border และกำหนดขนาด(Width) ลักษณะเส้น(Style) และสีของเส้นขอบ(Color) ดังรูปด้านล่าง

insert-border-image

การจัดการหน้าที่มีความยาวมาก

เขียนโดย : พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

สำหรับหน้าเว็บที่มีความยาวมาก เราสามารถแบ่งเป็นหน้าย่อย ๆ ได้ โดยใช้ฟังก์ชั่น Page Break (ในการอธิบายนี้ใช้ JCE Editor)

ให้เราเลือกตำแหน่งที่ต้องการแบ่งหน้าโดยการคลิกวางตำแหน่งเคอร์เซอร์ไว้ แล้วกดปุ่ม Insert/Edit Pagebreak page-break-menu จะแสดงหน้าจอดังรูป

page-break-window

ให้เราใส่ชื่อของหน้าย่อย เสร็จแล้วกด ใส่ Page Break จะสังเกตเห็นเส้นยาวแนวนอนเพิ่มขึ้นมาดังรูปด้านล่าง

page-break-bar

หากต้องการกำหนดไว้ตำแหน่งใหม่ ให้คลิกที่แถบแบ่งหน้าอันเดิมแล้วกดปุ่ม Delete ลบออก แล้วทำตามขั้นตอนเดิมในตำแหน่งใหม่

ตัวอย่างหน้าที่มีการใส่ Page Break

example-page-break

การติดตั้ง Joomla แบบ Stand Alone - การสร้างฐานข้อมูล MySQL

เขียนโดย : พรหมมาศ แซ่ลั้ว

http://www.thaisolution.net

การสร้างฐานข้อมูล MySQL
การ ติดตั้ง Joomla จำเป็นต้องใช้ฐานข้อมูล MySQL ให้เราทำการสร้างขึ้นมา 1 ฐานข้อมูล โดยเปิดหน้า Web Browser แล้วพิมพ์ http://localhost/xampp จะแสดงหน้าเว็บของโปรแกรม XAMPP จากนั้นเลือกไปที่เมนู phpMyAdmin โปรแกรมจะถามชื่อผู้ใช้ และรหัสผ่าน ชื่อผู้ใช้ให้ใส่เป็น root รหัสผ่านใส่ตามที่ได้ตั้งไว้ ดังรูปด้านล่าง

php-my-admin-01


หน้าจอโปรแกรม phpMyAdmin

php-my-admin-page

การสร้างฐานข้อมูลให้พิมพ์ชื่อฐานข้อมูลในช่อง สร้างฐานข้อมูลใหม่ ดังรูปด้านล่าง

create-new-database

Charset ให้เลือกเป็น utf8_unicode_ci
MySQL connection collation เลือกเป็น utf8_unicode_ci
เสร็จ แล้วกดปุ่ม สร้าง เราก็จะได้ฐานข้อมูลที่ใช้สำหรับติดตั้ง Joomla แล้ว ต่อไปจะเป็นการเตรียมไฟล์สำหรับติดตั้ง Joomla แบบ Stand Alone

การติดตั้ง Joomla แบบ Stand Alone

เขียนโดย : พรหมมาศ แซ่ลั้ว

http://www.thaisolution.net/

เป็นการติดตั้ง Joomla บนเครื่องคอมพิวเตอร์ทั่วไปที่จำลองเป็น Server (Web Server, PHP, MySQL, FTP) โดยโปรแกรมที่ใช้จำลองเครื่องเป็น Server มีหลายโปรแกรมเช่น Appserv, WAMP, XAMPP ในที่นี้จะเลือกใช้โปรแกรม XAMPP
โดย ขั้นตอนหลัก ๆ จะต้องติดตั้ง XAMPP ให้ใช้งานได้ก่อน เสร็จแล้วคัดลอกไฟล์ติดตั้งของ Joomla ไปไว้ในโฟลเดอร์ Root ของ XAMPP ซึ่งค่าปรกติจะอยู่ที่ C:\xampp\htdocs

การติดตั้ง XAMPP

โปรแกรม XAMPP สามารถดาวน์โหลดได้จาก http://sourceforge.net/projects/xampp/files/
เลือกที่เป็นไฟล์ xampp-win32-x.x.x.exe โหลดมาเก็บไว้ในเครื่อง ดังรูปด้านล่าง

download-xampp-01


เมื่อดาวน์โหลดไฟล์มาแล้วทำการดับเบิ้ลคลิกไฟล์เพื่อทำการติดตั้ง โปรแกรมจะแสดงหน้าจอการติดตั้งดังรูปด้านล่าง

install-xampp-01

กด Install เพื่อติดตั้ง

install-xampp-02

โปรแกรมจะถามว่าต้องการสร้าง Shortcuts บน Desktop หรือไม่ กด y แล้วกด Enter

install-xampp-03

กด y แล้ว Enter เพื่อดำเนินการติดตั้งต่อไป

install-xampp-04

โปรแกรมจะถามว่าต้องการทำ Portable หรือไม่ (หมายถึงนำไปใช้เครื่องอื่นได้โดยไม่ต้องติดตั้ง) ให้เลือก n แล้วกด Enter

install-xampp-05

กด Enter เพื่อดำเนินการต่อไป

install-xampp-06

กด Enter เพื่อดำเนินการต่อ

install-xampp-07

ขั้นตอนสุดท้ายของการติดตั้ง กด x แล้ว Enter เพื่อออกจากการติดตั้ง

การเรียกใช้งานโปรแกรม

ให้ดับเบิ้ลคลิก Shortcut บนหน้า Desktop ชื่อ XAMPP Control Panel โปรแกรมจะแสดงหน้าจอดังรูปด้านล่าง

xampp-control-panel-01


โปรแกรมจะมีบริการที่เราต้องการใช้ดังนี้
Apache เป็นบริการเว็บ
MySQL เป็นบริการฐานข้อมูล
FileZilla เป็นบริการรับส่งไฟล์ FTP
ส่วนตัวอื่นไม่ได้ใช้งาน
ให้เราเปิดบริการทั้งสามตัวโดยการกดปุ่ม Start บริการต่าง ๆ ก็จะทำงานดังรูปด้านล่าง

xampp-control-panel-02


เมื่อบริการต่างต่าง ๆ ทำงานแล้วเราก็สามารถปิดหน้าต่าง XAMPP Control Panel ไปได้เลย โดยโปรแกรมจะแสดงไอคอนในแถบ Taskbar ดังรูปด้านล่าง หากต้องการเรียกใช้ XAMPP Control Panel ก็ให้ดับเบิ้ลคลิกที่ไอคอนนี้

xampp-icon


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

การทดสอบการทำงาน
เปิด โปรแกรม Web Browser เช่น Internet Explorer, Mozilla Firefox แล้วพิมพ์ http://localhost หรือ http://127.0.0.1 หรือ http://หมายเลขไอพีของเครื่อง ถ้าบริการเว็บทำงานจะแสดงหน้าจอดังรูปด้านล่าง

xampp-first-page


ในการเรียกใช้งานครั้งแรกโปรแกรมจะให้เราเลือกภาษาก่อน ให้เลือกเป็น English จะแสดงหน้าจอดังรูปด้านล่าง

xampp-page


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

xampp-status-page


บริการที่จำเป็นต้องใช้ในการทำงานของ Joomla คือ MySQL database, PHP, Apache, FTP หากทำงานถูกต้องจะแสดงเป็นสีเขียว ในการเรียกใช้งานหน้านี้ครั้งต่อไปสามารถเข้าใช้ได้ที่ http://localhost/xampp หรือ http://127.0.0.1/xampp หรือ http://หมายเลขไอพีของเครื่อง/xampp

กำหนดรหัสผ่านของ MySQL

โดยคลิกที่เมนู Security ในแถบด้านซ้ายมือ โปรแกรมจะแสดงหน้าจอดังรูปด้านล่าง

change-mysql-password-01


ให้คลิกที่ http://localhost/security/xamppsecurity.php ตามรูปด้านบน โปรแกรมจะแสดงหน้าจอสำหรับเปลี่ยนรหัสผ่าน MySQL ดังรูปด้านล่าง

change-mysql-password-02


ให้เรากำหนดรหัสผ่านขึ้นมาเองใส่ในช่อง New password และยืนยันรหัสผ่านในช่อง Repeat the new password
phpMyAdmin authentication: เลือกเป็น http
Set a random password for the phpMyAdmin user 'pma': เลือกเป็น No
เมื่อเสร็จแล้วกดปุ่ม Password changing โปรแกรมก็จะเปลี่ยนรหัสผ่านให้เรียบร้อย จะแสดงหน้าจอดังรูปด้านล่าง

change-mysql-password-03


เมื่อเสร็จแล้วก็ปิดหน้าต่างโปรแกรมไปได้เลย จากนั้นให้ทำการ Stop และ Start MySQL ใหม่

การแก้ไขค่า PHP
ค่า เริ่มต้นของโปรแกรม XAMPP ในส่วนของ PHP มีที่ต้องแก้ไขอยู่ 1 ค่าคือ display_errors = On ให้เปลี่ยนเป็น display_errors = Off โดยการแก้ไขที่ไฟล์ php.ini ที่อยู่ในโฟลเดอร์ C:\xampp\php ดังรูปด้านล่าง

edit-php-ini-01


ให้ทำการแก้ไขค่า display_errors = On เป็น display_errors = Off

edit-php-ini-02


เสร็จแล้วทำการบันทึกไฟล์ แล้วทำการ Stop และ Start Apache ใหม่

โฟลเดอร์ Root ของโปรแกรม XAMPP จะอยู่ที่ C:\xampp\htdocs เมื่อเปิดหน้าเว็บโปรแกรมจะมาเรียกไฟล์จากในโฟลเดอร์นี้ครับ โปรแกรมจะสร้างไฟล์หน้าเริ่มต้นเอาไว้ให้เราไปลบออกก่อน ดังรูปด้านล่าง

xampp-root-folder


โฟลเดอร์ xampp ที่อยู่ใน C:\xampp\htdocs จะเป็นโฟลเดอร์ที่เก็บไฟล์หน้าเว็บของ XAMPP ไม่ต้องลบออก
ถึงขั้นตอนนี้เราก็ได้จำลองเครื่องเป็น Server ที่พร้อมใช้งานแล้ว

ขั้นตอนต่อไปจะเป็น การสร้างฐานข้อมูล Mysql