pembangunan laman web 2014
DESCRIPTION
asas joomlaTRANSCRIPT
![Page 1: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/1.jpg)
azian.i-imatec.joomla3.2014
Pembangunan Laman Web Joomla 3 Asas
Azian Zubir [email protected]
03-20847728i-imatec . INTAN Bukit Kiara
![Page 2: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/2.jpg)
azian.i-imatec.joomla3.20142
PENGENALAN KEPADA JOOMLA
![Page 3: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/3.jpg)
azian.i-imatec.joomla3.20143
Apa itu
Joomla
CMSDrupal
WordpressInstall dalam
server
Guna PHP dan
MySQL
open-source
contoh
Untuk menghasilkanlaman web
Beribu code dihasilkanMelalui module, plugin, dan component
![Page 4: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/4.jpg)
azian.i-imatec.joomla3.20144
SEJARAH JOOMLA• 1990 an‐• Miro International Pvt Ltd mengeluarkan MAMBO
(cmspertama menjadi popular)
• 5000 user (1st quarter)• Hakmilik (copyright) dipegang oleh Miro corporation
Australia• Cadangan seorang senior developer menjadikan
MAMBO sebagai open source (GNU license) >x setuju‐• 2005 Keluar dari company dan wujudkan Joomla 1.0
![Page 5: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/5.jpg)
azian.i-imatec.joomla3.20145
JOOMLA FAMILY• Joomla 1.0 50000 user worldwide‐
– Joomla 1.0.1 (versi maintenance)– Joomla 1.0.14 (stop)
• Joomla 1.5– Joomla 1.5.1 hingga 1.5.8 (security prob)– Joomla 1.5.25
• Joomla 1.6 (generasi baru) Jan 2010‐– Byk fungsi tambahan– Short term release (6 bulan)– Tidak boleh digunakan untuk production– Hanya sebagai trial
• Joomla 1.7– Menambah fungsi– STR– Cth: gems portal gunakan 1.7– Expired,boleh dihack– Joomla 2.5 April 2012‐
• Long term release (LTS) 18 bulan ‐• Joomla 2.5 - Users on version 2.5 do not need to migrate to Joomla 3.0.• Joomla 3.3(latest)
Family 1
Family 2
Family 3
![Page 6: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/6.jpg)
azian.i-imatec.joomla3.20146
Joomla VersionsJoomla versions
Version Release date Supported until
1.0 2005-09-22 2009-07-22
1.5 (LTS) 2008-01-22 2012-12-01
1.6 2011-01-10 2011-08-19
1.7 2011-07-19 2012-02-24
2.5 (LTS) 2012-01-24 2014-12-31
3.0 2012-09-27 2013-04
3.1 2013-04-24 2013-10
3.2 2013-11-06 2014-04
3.3 2014-04-30 2014-10
3.5 (LTS) 2014-09
4.0 2015-03
4.1 2015-09
4.2 2016-03
4.5 (LTS) 2016-09
Release no longer supported Release still supported Future release
![Page 7: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/7.jpg)
azian.i-imatec.joomla3.20147
JOOMLA 3Kenapa joomla 3?
![Page 8: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/8.jpg)
azian.i-imatec.joomla3.20148
Sumber: http://www.joomla.org/3/en
![Page 9: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/9.jpg)
azian.i-imatec.joomla3.20149
Sumber: http://www.joomla.org/3/en
![Page 10: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/10.jpg)
azian.i-imatec.joomla3.201410
Joomla 3.0 Feature1. ResponsiveJoomla is now officially responsive – mobile device ready, due to the help of Bootstrap. The front-end will have the responsive built-in feature, the back-end also inherits this tweak. You will NOW officially be able to get your site under control even when you are ”on-the-go” with just a mobile device!
Joomla 3.0Joomla 2.5
![Page 11: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/11.jpg)
azian.i-imatec.joomla3.201411
The front-end will have the responsive built-in feature, the back-end also inherits
this tweak. You will NOW officially be able to get your site under control even when
you are ”on-the-go” with just a mobile device!
Joomla 2.5 back end Joomla 3.0 back end
![Page 12: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/12.jpg)
azian.i-imatec.joomla3.201412
2. Bootstrap
The big word for Joomla 3.0 is Bootstrap. With basic CSS already integrated into Joomla 3.0, it is aiming for a much better UX for the end-user.
![Page 13: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/13.jpg)
azian.i-imatec.joomla3.201413
3. LESS CSSLESS is a dynamic stylesheet language designed by Alexis Sellier and has recently been integrated into Joomla 3.0. The development of a template has significantly changed by the use of LESS. All the website templates and backend will include /less directory and template.less files. Those two are meant for importing both Bootstrap and JUI (less files and media/jui/less files). That enables the template designers to define which file should be applied to their template, and which one will be imported to the LESS JUI.
![Page 14: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/14.jpg)
azian.i-imatec.joomla3.201414
4.With JUI (for Extension Developers)• The Joomla User Interface (JUI) library provides a
common set of tools that enables component developers to share a common ground of elements, drastically reducing time in coding, without having to innovate and create their own library but still having a clean, nice looking interface. In addition, the loading time is dropped dramatically for users who are surfing around from one Joomla 3.0 site to another, as the javascript and css files are already loaded, adding an extra fast loading speed for the Joomla 3.0 CMS.
![Page 15: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/15.jpg)
azian.i-imatec.joomla3.201415
5. InterfaceMain Menu
![Page 16: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/16.jpg)
azian.i-imatec.joomla3.201416
![Page 17: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/17.jpg)
azian.i-imatec.joomla3.201417
![Page 18: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/18.jpg)
azian.i-imatec.joomla3.201418
Extra Feature:Footer and common use quick icons
![Page 19: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/19.jpg)
azian.i-imatec.joomla3.201419
6. 3 steps installation• Right off the bat, you will immediately feel the ”difference" in UI of the
complete redesigned installation screen in Joomla 3.0. The installation process is now simplified in only 3 steps compared to the 7 steps procedure we had with joomla 2.5.
![Page 20: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/20.jpg)
azian.i-imatec.joomla3.201420
7. Drag and Drop Feature
![Page 21: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/21.jpg)
azian.i-imatec.joomla3.201421
Download• Joomla:
http://www.joomla.org/download.html#j3
• Xampp: https://www.apachefriends.org/index.html
![Page 22: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/22.jpg)
azian.i-imatec.joomla3.201422
WEB SERVER
![Page 23: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/23.jpg)
azian.i-imatec.joomla3.201423
WEB SERVER• The primary function of a web server is to store, process and deliver web pages to clients. The communication
between client and server takes place using the Hypertext Transfer Protocol (HTTP). Pages delivered are most frequently HTML documents, which may include images, style sheets and scripts in addition to text content.
• A user agent, commonly a web browser or web crawler, initiates communication by making a request for a specific resource using HTTP and the server responds with the content of that resource or an error message if unable to do so. The resource is typically a real file on the server's secondary storage, but this is not necessarily the case and depends on how the web server is implemented.
• While the primary function is to serve content, a full implementation of HTTP also includes ways of receiving content from clients. This feature is used for submitting web forms, including uploading of files.
• Many generic web servers also support server-side scripting using Active Server Pages (ASP), PHP, or other scripting languages. This means that the behaviour of the web server can be scripted in separate files, while the actual server software remains unchanged. Usually, this function is used to create HTML documents dynamically ("on-the-fly") as opposed to returning static documents. The former is primarily used for retrieving and/or modifying information from databases. The latter is typically much faster and more easily cached but cannot deliver dynamic content.
• Web servers are not always used for serving the World Wide Web. They can also be found embedded in devices such as printers, routers, webcams and serving only a local network. The web server may then be used as a part of a system for monitoring and/or administering the device in question. This usually means that no additional software has to be installed on the client computer, since only a web browser is required (which now is included with most operating systems).
• Web servers bla bla bla please refer to the wikipedia bla bla bla if you want to know details. I’m not going bla bla bla bla bla to read it one by one. Otherwise bla bla bla bla bla bla I’m going to see many people bla bla bla bla…zzzzzz. Anyone wants coffee?
![Page 24: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/24.jpg)
azian.i-imatec.joomla3.201424
WHAT IS… WEB SERVER?
• The term web server, also written as Web server, can refer to either the hardware (the computer) or the software (the computer application) that helps to deliver web content that can be accessed through the Internet.
Sumber: wikipedia
![Page 25: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/25.jpg)
azian.i-imatec.joomla3.201425
XAMPP• XAMPP is a free and open source cross-
platform web server solution stack package, consisting mainly of the Apache HTTP Server, MySQL database, and interpreters for scripts written in the PHP and Perl programming languages.
![Page 26: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/26.jpg)
azian.i-imatec.joomla3.201426
PHP and HTML
PHP• <?php ……………… ?>Contoh:<!DOCTYPE html> <html> <head> <title>PHP Test</title> </head> <body> <?php echo '<p>Hello World</p>'; ?> </body> </html>
HTML• <>…. </>Contoh<!DOCTYPE html> <html> <head> <title>This is a title</title> </head> <body> <p>Hello world!</p> </body> </html>
![Page 27: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/27.jpg)
azian.i-imatec.joomla3.201427
INSTALLATIONxampp
![Page 28: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/28.jpg)
azian.i-imatec.joomla3.201428
LANGKAH-LANGKAH
• Download XAMPP dari
www.apachefriends.or
g• Install Xampp (accept
all default setting)
• Selesai install double ‐
click• xampp control panel
• Click start apache dan
mysql sahaja
![Page 29: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/29.jpg)
azian.i-imatec.joomla3.201429
• Click browser • Type di address bar
http://localhost
![Page 30: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/30.jpg)
azian.i-imatec.joomla3.201430
CARA INSTALL JOOMLA
• Lokasi install: Server/PC• Server/PC mempunyai web server
(xampp/wampp/dll)• Copy folder joomla yang telah dimuat turun ke
host• Extract folder dan lakukan proses installasi
![Page 31: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/31.jpg)
azian.i-imatec.joomla3.201431
INSTALLATIONJoomla!
![Page 32: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/32.jpg)
azian.i-imatec.joomla3.201432
Langkah-langkah• Buka folder: c:\xampp\htdocs\• Copy zip file joomla 3.3 ke folder htdocs• Extract zip file joomla 3.3 • Rename folder yang telah diekstrak kepada
websaya• Type http:// localhost/websaya di address bar
untuk teruskan ke joomla configuration.
![Page 33: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/33.jpg)
azian.i-imatec.joomla3.201433
![Page 34: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/34.jpg)
azian.i-imatec.joomla3.201434
![Page 35: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/35.jpg)
azian.i-imatec.joomla3.201435
![Page 36: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/36.jpg)
azian.i-imatec.joomla3.201436
![Page 37: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/37.jpg)
azian.i-imatec.joomla3.201437
![Page 38: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/38.jpg)
azian.i-imatec.joomla3.201438
![Page 39: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/39.jpg)
azian.i-imatec.joomla3.201439
![Page 40: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/40.jpg)
azian.i-imatec.joomla3.201440
![Page 41: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/41.jpg)
azian.i-imatec.joomla3.201441
Back-end
http://localhost/websaya/administratorMasukkan username dan password yang sama seperti di joomla installation sebelum ini.
![Page 42: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/42.jpg)
azian.i-imatec.joomla3.201442
Back-End
![Page 43: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/43.jpg)
azian.i-imatec.joomla3.201443
JOOMLA OVERVIEW
![Page 44: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/44.jpg)
azian.i-imatec.joomla3.201444
Joomla Element• Articles– Biasa– Frontpage
• Categories- meletakkan kategori untuk artikel• Users- pengguna joomla admin/site• Navigation- menu/link• Module-gadjet• Templates- design dan layout
![Page 45: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/45.jpg)
azian.i-imatec.joomla3.201445
Joomla Extensions
• Modules (gadget)• Plugin (ciri tambahan)• Language (tetapan bahasa)• Components (sistem)• Templates (design dan layout web)
Joomla extensions terdiri daripada built in dan 3rd party extensions
![Page 46: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/46.jpg)
azian.i-imatec.joomla3.201446
Global Configuration -site
![Page 47: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/47.jpg)
azian.i-imatec.joomla3.201447
Global Configuration-System
Ubah session lifetime kepada 1500‐supaya kita tidak di logoutkan selepas 15minit.
![Page 48: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/48.jpg)
azian.i-imatec.joomla3.201448
Global Configuration-Server
![Page 49: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/49.jpg)
azian.i-imatec.joomla3.201449
USER MANAGER
![Page 50: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/50.jpg)
azian.i-imatec.joomla3.201450
User manager
Super user kita sebagai developer laman web ‐iniEnable user ini tidak di block‐Activated emel user telah disahkan‐User groups jawatan user ini‐
![Page 51: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/51.jpg)
azian.i-imatec.joomla3.201451
New User
Isikan account details dan save
![Page 52: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/52.jpg)
azian.i-imatec.joomla3.201452
Save : Save sahaja dan tidak berganjak ke muka surat lainSave & Close: Save dan tutup paparan, terus ke muka surat ManagerSave & New: Save dan membuat user baruCancel: cancel
![Page 53: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/53.jpg)
azian.i-imatec.joomla3.201453
User Manager: User Groups
Public Umum‐Guest-pelawatManager Back end user yang boleh uruskan laman ‐web tetapi terhad kepada fungsi tertentu sahajaAdministrator Back end user yang boleh uruskan ‐laman web tetapi terhad (tidak boleh access global configuration)Registered user yang boleh login di front end dan ‐boleh access laman yang dibenarkanAuthor front end user yang boleh membuat artikel‐Editor front end user yang boleh buat dan edit semua ‐artikelPublisher front end user yang boleh publish, edit dan ‐tulis artikel.
![Page 54: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/54.jpg)
azian.i-imatec.joomla3.201454
MEMBINA KANDUNGAN LAMAN WEB
![Page 55: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/55.jpg)
azian.i-imatec.joomla3.201455
Merangka Kandungan Laman Web
• Konsep membina kandungan ialah CAM:– Langkah 1: Cipta Category– Langkah 2: Cipta Article– Langkah 3: Cipta Menu
![Page 56: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/56.jpg)
azian.i-imatec.joomla3.201456
• Anda hendaklah terlebih dahulu merangka laman web anda seperti contoh di bawah:
• Home|• Mengenai INTAN|– Visi– Misi– Piagam Pelanggan
• FAQ• Hubungi Kami
![Page 57: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/57.jpg)
azian.i-imatec.joomla3.201457
MEMBINA LAMAN WEBKategori
![Page 58: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/58.jpg)
azian.i-imatec.joomla3.201458
Langkah1: Membina Kategori
• Content >Category ‐Manager New‐
• Berikan nama Kategori dan Save
![Page 59: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/59.jpg)
azian.i-imatec.joomla3.201459
Bina Sub-Kategori
• Pilih New Kategori• Namakan title –• Pilih Parent-• Save
![Page 60: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/60.jpg)
azian.i-imatec.joomla3.201460
Latihan• Cipta 2 Kategori
1. Kategori About Us2. Kategori FAQ
• Bina Sub Kategori di bawah parent About Us– Visi– Misi– Piagam Pelanggan
![Page 61: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/61.jpg)
azian.i-imatec.joomla3.201461
MEMBINA LAMAN WEBArtikel
![Page 62: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/62.jpg)
azian.i-imatec.joomla3.201462
Cipta Artikel
• Artikel baru:• Tulis tajuk artikel,• Pilih Kategori• Taip Artikel• Save
![Page 63: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/63.jpg)
azian.i-imatec.joomla3.201463
Latihan• Cipta artikel untuk kategori berikut:– Category About Us• 3 Artikel:
– Visi– Misi– Piagam Pelanggan
– Category FAQ (1 Artikel)• Cipta satu Feature artikel yang mempunyai
gambar
![Page 64: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/64.jpg)
azian.i-imatec.joomla3.201464
Feature Artikel
• Artikel untuk dipaparkan di muka utama
laman web
![Page 65: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/65.jpg)
azian.i-imatec.joomla3.201465
Publishing Option
![Page 66: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/66.jpg)
azian.i-imatec.joomla3.201466
Article Option
![Page 67: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/67.jpg)
azian.i-imatec.joomla3.201467
MEMBINA LAMAN WEBMenu
![Page 68: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/68.jpg)
azian.i-imatec.joomla3.201468
MENU >Main Menu New‐ ‐
1. Pilih jenis artikel (single artikel) di Menu Item Type2. Select Article berkenaan3. Tulis tajuk menu4. Save & new untuk bina menu lain.
![Page 69: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/69.jpg)
azian.i-imatec.joomla3.201469
Menu Item Type
![Page 70: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/70.jpg)
azian.i-imatec.joomla3.201470
Single Article Menu
![Page 71: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/71.jpg)
azian.i-imatec.joomla3.201471
Menu dengan Sub-Menu
Untuk mencipta Sub Menu, Pilih melalui Parent Item
Menu Item Root – Sama level dengan menu utama
![Page 72: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/72.jpg)
azian.i-imatec.joomla3.201472
Latihan• Cipta Menu berikut:
HomeMengenai INTAN
Visi (Sub Menu)Misi (Sub Menu)Piagam Pelanggan (Sub Menu)
FAQ
![Page 73: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/73.jpg)
azian.i-imatec.joomla3.201473
BUILT-IN EXTENSIONSModule ManagerPlug in Manager‐Language ManagerTemplate ManagerComponents
![Page 74: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/74.jpg)
azian.i-imatec.joomla3.201474
Module Manager• Joomla terbina dengan banyak module ( gadget)• Contoh: jam, kalendar, waktu solat,pautan dan lain lain‐• Built module yang terdapat di joomla boleh digunakan.‐• Module diletakkan didalam module position pada
template• Untuk melihat module position:
– Extensions >template manager > template tabs >options‐ ‐ ‐ ‐– >enabled preview >Klik Preview pada template berkenaan.‐
![Page 75: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/75.jpg)
azian.i-imatec.joomla3.201475
Template PreviewEnable preview di options untuk mengetahui modulepositions bagi templatePreview Module Positions: Enabled
![Page 76: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/76.jpg)
azian.i-imatec.joomla3.201476
Modules Manager
![Page 77: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/77.jpg)
azian.i-imatec.joomla3.201477
Module Type
![Page 78: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/78.jpg)
azian.i-imatec.joomla3.201478
Modul Search
![Page 79: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/79.jpg)
azian.i-imatec.joomla3.201479
Cuba..• Cuba module module lain seperti wrapper, ‐
custom html, who’s online dan lain lain.‐• Contoh seperti di bawah.
Who'sonline
wrapperCustom html
![Page 80: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/80.jpg)
azian.i-imatec.joomla3.201480
Template manager
• Kita boleh menukar template dengan klik kepada nama template yang dikehendaki dan tekan simbol bintang. (set default)
• Tetapan template boleh diubah dengan klik pada nama template dan ubah tetatapan di bahagian kanan.
![Page 81: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/81.jpg)
azian.i-imatec.joomla3.201481
Plugin Manager
• Plug in ialah ciri‐ciri tambahan yang boleh dimasukkan dalam laman web seperti youtube, editor etc.
• Kita akan mengubah editor‐TinyMCE di sini.
Tukar pada Basic Options:Functionality: Extended
![Page 82: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/82.jpg)
azian.i-imatec.joomla3.201482
Language Manager
Bahasa yang terdapat secara default didalam joomla ialah bahasa English. Kita boleh install bahasa lain ke dalam joomla. Extensions bagi bahasa boleh dicari di extensions.joomla.org.
![Page 83: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/83.jpg)
azian.i-imatec.joomla3.201483
Component
Terdapat beberapa component seperti terpapar.
![Page 84: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/84.jpg)
azian.i-imatec.joomla3.201484
Components-contacts
• Membina Contacts. Cipta kategori dahulu• Klik Component >Category Contacts‐• Isikan nama category: contoh korporat dan save• Isikan data seperti dibawah dan save.
• Contact:• Klik Component->Contacts• Isi data
![Page 85: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/85.jpg)
azian.i-imatec.joomla3.201485
Contact Category
![Page 86: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/86.jpg)
azian.i-imatec.joomla3.201486
New Contact
![Page 87: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/87.jpg)
azian.i-imatec.joomla3.201487
Contact Details
![Page 88: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/88.jpg)
azian.i-imatec.joomla3.201488
Details Option
![Page 89: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/89.jpg)
azian.i-imatec.joomla3.201489
ComponentContactsdiletakkan sebagaimenu HubungiKami di front end
![Page 90: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/90.jpg)
azian.i-imatec.joomla3.201490
Memaparkan Contact
• Add Contact di Menu• Menu Manager-> Pilih Contact -> Single
Contact
![Page 91: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/91.jpg)
azian.i-imatec.joomla3.201491
3rd Party Extensions
• 3rd party extensions boleh diperolehi dari JEDextensions.joomla.org
• Contoh: Memasukkan module Jam (vinora world time clock)
• Terlebih dahulu download module jam di JED• Klik Extensions >extensions manager‐
![Page 92: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/92.jpg)
azian.i-imatec.joomla3.201492
SECURITY
![Page 93: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/93.jpg)
azian.i-imatec.joomla3.201493
Asas keselamatan • Sentiasa mengikuti perkembangan terbaru versi Joomla! terkini dan segera
mengemaskininya.• Rujuk Panduan Semakan Keselamatan Pentadbir Joomla! (Joomla
Administrator's Security Checklist) yang dikeluarkan oleh pihak Joomla! dan turuti garis panduan tersebut seadanya.
• Memasang jSecure Authentication plugin • Mengubah pengguna pentadbir (admin user- id user 62)• Gunakan kata laluan yang unik dan kukuh! • Sentiasa mengosongkan sebarang fail atau folder yang terdapat di dalam
Temporary Folder (tmp).. PERHATIAN: JANGAN DELETE FAIL ASAL DALAM FOLDER TMP IAITU INDEX.HTML!!
• Sentiasa backup laman web anda• Padamkan template/component yang tidak mahu guna
Source: joomla.my
![Page 94: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/94.jpg)
azian.i-imatec.joomla3.201494
BACK-UP & RESTORE
![Page 95: Pembangunan laman web 2014](https://reader038.vdocuments.net/reader038/viewer/2022102716/5485f579b4af9f5c2b8b4581/html5/thumbnails/95.jpg)
azian.i-imatec.joomla3.201495
• Backup Menggunakan component • Contoh : Akeeba Backup• Download Akeeba