ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

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

 

ทำความเข้าใจ Joomla กับ MooZiiCart

Joomla (จูมล่า) เป็นระบบบริหารจัดการเนื้อหาบนเว็บไซต์ ที่เปิดให้นักพัฒนาสามารถพัฒนาส่วนเสริมเพิ่มเติมเข้าไปในระบบได้ ส่วนเสริมของ Joomla จะแบ่งเป็น 4 กลุ่ม ได้แก่ Component, Module, Plugin และ Template ซึ่งตัว MooZiiCart เป็น Component ที่ทำงานบน Joomla เป็น 1 ในส่วนเสริมที่ติดตั้งเพื่อให้ระบบ Joomla กลายเป็นระบบร้านค้าออนไลน์ได้ สำหรับการพัฒนาส่วนเสริมของ MooZiiCart จะพัฒนาเป็น Module, Plugin และ Template เพราะฉะนั้นในการพัฒนาส่วนเสริมต่างๆ จะอิงตามเว็บไซต์ของ Joomla สามารถเข้าไปศึกษารายละเอียดเพิ่มเติมได้เช่นเดียวกัน

 

ความรู้พื้นฐานในการพัฒนา

การพัฒนาส่วนเสริมของ MooZiiCart หรือในระบบ Joomla ภาษาที่ใช้จะเป็น PHP ทำงานฝั่ง Server ซึ่งต้องมีความเข้าใจเรื่องของ OOP ส่วนฝั่ง Client จะต้องมีความรู้เกี่ยวกับ HTML CSS Javascript รวมถึง jQuery กับ Bootstrap ด้วย

 

สิ่งที่ต้องเตรียมก่อนเริ่มพัฒนา

  • ตัวจำลอง Server ในเครื่องที่ใช้พัฒนา อาจจะใช้ Xampp ก็ได้ ถ้ายังไม่เคยติดตั้งมาก่อน
  • ติดตั้ง Joomla เวอร์ชั่นล่าสุด ดาวน์โหลดได้จาก ที่นี่
  • หลังจากติดตั้ง Joomla เรียบร้อยแล้ว ให้ติดตั้ง MooZiiCart ดาวน์โหลดได้จาก ที่นี่
  • โปรแกรมที่ใช้เขียนโค้ด เช่น Netbeans, Visual Studio Code, Atom, Sublime หรือ อื่นๆ ตามความถนัด

 

ตัวอย่างการพัฒนาส่วนเสริม

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

 

โครงสร้างไฟล์ Plugin

เริ่มวางโครงสร้างไฟล์กันเลย จะขอใช้ชื่อส่วนเสริมนี้ว่า mzcsample ให้เข้าไปที่โฟลเดอร์ Joomla ที่ติดตั้งไว้ในเครื่องตัวเอง แล้วคลิกเข้าไปที่ plugins/system แล้วสร้างโฟลเดอร์ชื่อ mzcsample จากนั้นให้วางโฟลเดอร์และไฟล์ตามภาพด้านล่าง

โครงสร้างไฟล์ Plugin
โครงสร้างไฟล์ Plugin

อธิบายเพิ่มเติมโฟลเดอร์ language จะใช้เก็บไฟล์ภาษา เนื่องจากระบบ Joomla รองรับหลายภาษา เพื่อให้ข้อความในส่วนเสริมของเราเปลี่ยนไปตามภาษาที่ผู้ใช้งานเลือกก็ต้องใช้ไฟล์ภาษาด้วย ในตัวอย่างก็จะทำมา 2 ภาษา คือ ไทย กับ อังกฤษ สังเกตรูปแบบการตั้งชื่อไฟล์ จะขึ้นต้นด้วยแท็กของภาษา en-GB กับ th-TH ตามด้วย plg_system_ ปิดท้ายด้วย mzcsample ซึ่งเป็นชื่อของส่วนเสริม ต่อมาจะเป็นไฟล์ mzcsample.php ต้องตั้งชื่อตามส่วนเสริม ไฟล์นี้จะเป็นโค้ดที่ใช้สั่งให้ทำงานตามที่เราต้องการ และสุดท้าย mzcsample.xml

 

ตัวอย่างโค้ดในไฟล์ภาษา

ในตัวอย่างจะใส่เหมือนกันทั้ง 4 ไฟล์ en-GB.plg_system_mzcsample.ini, en-GB.plg_system_mzcsample.sys.ini, th-TH.plg_system_mzcsample.ini, th-TH.plg_system_mzcsample.sys.ini

PLG_SYSTEM_MZCSAMPLE = "System - MZC Sample"
PLG_SYSTEM_MZCSAMPLE_DESC = "This plugin for sample."

 

ตัวอย่างไฟล์ mzcsample.xml

ไฟล์นี้ระบบ Joomla จะใช้เพื่ออ่านข้อมูลผู้พัฒนา เวอร์ชั่น รายละเอียดของส่วนเสริม ซึ่งจำเป็นต้องใช้สำหรับการติดตั้ง

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.9" type="plugin" group="system" method="upgrade">
        <name>plg_system_mzcsample</name>
        <author>Mindphp Developer Teams</author>
        <creationDate>October 2020</creationDate>
        <copyright>(C) 2020 mindphp.com All rights reserved.</copyright>
        <license>GNU General Public License version 2 or later</license>
        <authorEmail>shop.mindphp@gmail.com</authorEmail>
        <authorUrl>https://www.mindphp.com</authorUrl>
        <version>1.0.0</version>
        <description>PLG_SYSTEM_MZCSAMPLE_DESC</description>
        
        <files>
                <folder>language</folder>
                <filename plugin="mzcsample">mzcsample.php</filename>
        </files>
</extension>

 

ตัวอย่างไฟล์ mzcsample.php

ไฟล์นี้จะเป็นส่วนการทำงานที่เราจะเขียนโค้ดลงไป ซึ่งต้องสร้างเป็น Class และ extends จาก JPlugin ส่วนการตั้งชื่อ Class ต้องขึ้นต้นด้วย PlgSystem แล้วตามด้วยชื่อส่วนเสริม จากนั้นให้ประกาศตัวแปร $autoloadLanguage เท่ากับ true เพื่อให้มันโหลดไฟล์ภาษามาทำงานด้วย ในส่วนของ function จะต้องตั้งชื่อตาม Events ที่เราต้องการไปแทรกการทำงาน ในตัวอย่างจะไปแทรกการทำงานในในส่วนของหมวดหมู่สินค้า ก่อนที่จะแสดงข้อมูลหมวดหมู่สินค้า จะแทรกข้อความคำว่า Hello Sample ไปด้านบน

<?php
/**
 * @package	MZC Sample
 * @subpackage	plg_system_mzcmultishop
 * @author	Mindphp Developer Teams
 * @copyright	Copyright (C) 2020 Mindphp Developer Teams. All rights reserved..
 * @license	GNU General Public License version 2 or later;
 */
defined('_JEXEC') or die();

class PlgSystemMZCSample extends JPlugin
{

	protected $autoloadLanguage = true;

	public function onBeforeDisplayListCategoryView(&$view)
	{
		$view->tmp_html_start = 'Hello Sample';
	}

}

 

ก่อนที่จะดูผลลัพท์จะต้องทำให้ระบบ Joomla รู้จักส่วนเสริมที่เราสร้างมาก่อน โดยเข้าสู่ระบบในฐานะ Admin แล้วไปที่เมนู Extensions -> Manage -> Discover ตามภาพ

การเข้าเมนู Discover
การเข้าเมนู Discover

 

หลังจากเข้ามาจะเจอส่วนเสริมที่เราสร้างไฟล์ในตาราง แต่หากไม่เจอให้คลิกปุ่ม Discover ด้านบนก่อน จากนั้นให้คลิกเลือกแล้วกด Install

การติดตั้งส่วนเสริมโดยใช้ Discover
การติดตั้งส่วนเสริมโดยใช้ Discover

 

หลังจากติดตั้งเรียบร้อยให้เปิดใช้งาน Plugin โดยเข้าไปที่เมนู Extensions -> Plugin

การเข้าหน้าจัดการ plugin
การเข้าหน้าจัดการ plugin

 

ค้นหา plugin และกดเปิดใช้งาน

การเปิดใช้งาน plugin
การเปิดใช้งาน plugin

 

ตรวจสอบผลลัพท์ที่หน้าหมวดหมู่สินค้า จะเห็นว่ามีคำว่า Hello Sample ขึ้นมาด้านบนตารางข้อมูล

ผลลัพท์ที่หน้าหมวดหมู่สินค้า
ผลลัพท์ที่หน้าหมวดหมู่สินค้า

 

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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ทริป กางเต็นท์ ใกล้กรุงเทพ
โดย milk2533 จ 23 พ.ย. 2020 1:04 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
จ 23 พ.ย. 2020 1:04 pm โดย milk2533
- ให้เขียนประวัติ และ Job description ที่เคยทำมาแต่ละบริษัท โดยระบุประเภทธุรกิจที่เคยทำมา
โดย milk2533 จ 23 พ.ย. 2020 11:26 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
1
13
จ 23 พ.ย. 2020 4:34 pm โดย milk2533
list ความรู้ที่มี ว่าเคยเรียน หรือ เคยทำอะไรมาบ้าง
โดย milk2533 จ 23 พ.ย. 2020 11:26 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
3
22
จ 23 พ.ย. 2020 7:03 pm โดย milk2533
Work's on Hand กฤตวรรณ อาทิตย์ตั้ง M115
โดย milk2533 จ 23 พ.ย. 2020 11:24 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
3
จ 23 พ.ย. 2020 11:24 am โดย milk2533
note ส่วนตัว
โดย milk2533 จ 23 พ.ย. 2020 11:23 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
1
จ 23 พ.ย. 2020 11:23 am โดย milk2533
งานประจำวันที่ 23 พฤศจิกายน 2563
โดย milk2533 จ 23 พ.ย. 2020 11:21 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
2
28
จ 23 พ.ย. 2020 7:08 pm โดย milk2533
คำสั่งค้นหาไฟล์ จากขนาดของไฟล์
โดย mindphp จ 23 พ.ย. 2020 12:07 am บอร์ด Linux - Web Server
0
7
จ 23 พ.ย. 2020 12:07 am โดย mindphp
แก้ป้ญหา ภาษาไทย Error ใน Flask template ninja2 Error UnicodeDecodeError UnicodeDecodeError: 'ascii' codec can't decode
โดย mindphp ส 21 พ.ย. 2020 10:38 pm บอร์ด Python Knowledge
1
17
จ 23 พ.ย. 2020 12:22 pm โดย samay123