วิธีเขียนโค้ด JavaScript ใน Joomla ผ่านไฟล์ภายนอก

แชร์ ความรู้ในการ พัฒนา Joomla Component Extension Module Plugin

Moderator: mindphp, ผู้ดูแลกระดาน

adinan49
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 547
ลงทะเบียนเมื่อ: 01/11/2021 9:57 am

วิธีเขียนโค้ด JavaScript ใน Joomla ผ่านไฟล์ภายนอก

โพสต์ที่ยังไม่ได้อ่าน โดย adinan49 »

Joomla เป็นไซต์ประภท CMS เป็นเว็บไซต์สำเร็จรูปที่ได้รับความนิยม โดยที่เราไม่จำเป้นต้องเขียนโค้ด ซึ่งเราต้องการเขียนโค้ดใน Joomla เพื่อแก้ไข หรือปรับแต่งโค้ดต่างๆใน Joomla โดยใน Joomla มีภาษา HTML CSS JavaScript และ php เป็นโครงสร้างของ joomlavp อยู่แล้วเรื่องที่เราจะนำเสนอในบทความนี้คือ วิธีเขียนโค้ด JavaScript ใน Joomla ผ่านไฟล์ภายนอกนั้นเอง


joomla
ระบบการจัดการเนื้อหาของเว็บไซต์(Content Management System : CMS) คือ ระบบที่พัฒนา คิดค้นขึ้นมาเพื่อช่วยลดทรัพยากรในการพัฒนา(Development) และบริหาร(Management)เว็บไซต์ ไม่ว่าจะเป็นเรื่องของกำลังคน ระยะเวลา

javascript
JavaScript คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ที่กำลังได้รับความนิยมอย่างสูง Java JavaScript เป็น ภาษาสคริปต์เชิงวัตถุ (ที่เรียกกันว่า "สคริปต์" (script) ซึ่งในการสร้างและพัฒนาเว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น

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

การเขียน JavaScript ใน Joomla โดยเราจะเขียน JavaScript ของโมดูล Joomla กันครับ
เปิดไฟล์ หรือโฟเดอร์ joomla >> ไปที่โฟเดอร์ modules >> เลือก โฟเดอร์ mod_mgallery_slideshow
โฟเดอร์ Joomla
โฟเดอร์ Joomla
Joomla user Guide Knowledge-1.png (67.85 KiB) Viewed 1120 times
โดยผมจะใช้โปรแกรม Visual Studio Code ซึ่งเป็นโปรแกรมประเภท text editor เปิดโปรเจค joomla
โดยผมจะใช้โปรแกรม Visual Studio Code
โดยผมจะใช้โปรแกรม Visual Studio Code
โปรแกรม Visual Studio Code.png (75.31 KiB) Viewed 1120 times
ทำการสร้างโฟเดอร์ ่ห ในโฟเดอร์ assets และไฟล์ไฟล์ js ขึ้นมา
สร้างโฟเดอร์และไฟล์
สร้างโฟเดอร์และไฟล์
assets.png (4.57 KiB) Viewed 1120 times
โค้ดในไฟล์ js

โค้ด: เลือกทั้งหมด

alert('hello');
เมื่อเราสรา้งเรียบร้อยแล้ว เปิดไฟล์โมดูลนามสกุล php ซึ่งของผมเป็น mod_mgallery_slideshow.php
เปิดไฟล์โมดูลนาสกุล mod_mgallery_slideshow.php
เปิดไฟล์โมดูลนาสกุล mod_mgallery_slideshow.php
module .png (76.76 KiB) Viewed 1120 times
โดยผมเพิ่มโค้ดต่อไปนี้ในไฟล์ mod_mgallery_slideshow.php
$document เป็นตัวแปร
Joomla\CMS\Factory::getDocument(); เป็นการเรียกใช้งาน class ของ joomla

$document ตัวแปร
->addScriptเป็นส่วนที่จะให้สามรถใช้'งาน JavaScript ได้
Joomla\CMS\Uri\Uri::root(). เป็นการคลาส Root ของเครื่อง
'modules/mod_mgallery_slideshow/assets/js/slideshow.js เป็นตำแหน่งเรียกการใช้งานไฟล์ js

โค้ด: เลือกทั้งหมด

$document = Joomla\CMS\Factory::getDocument();
$document->addScript(Joomla\CMS\Uri\Uri::root() .'modules/mod_mgallery_slideshow/assets/js/slideshow.js')
หน้าหน้าแสดงผล
หน้าแสดงผล
หน้าแสดงผล
หน้าแสดงผล.png (16.2 KiB) Viewed 1120 times

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

อ้างอิง
http://marcuscode.com/lang/javascript/introducing-to-javascript
https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2187-java-javascript-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html
https://www.webdodee.com/what-is-javascript/
https://www.mindphp.com/forums/viewtopic.php?f=143&t=80920
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 73