Download - Pembangunan laman web 2014
azian.i-imatec.joomla3.2014
Pembangunan Laman Web Joomla 3 Asas
Azian Zubir [email protected]
03-20847728i-imatec . INTAN Bukit Kiara
azian.i-imatec.joomla3.20142
PENGENALAN KEPADA JOOMLA
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
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
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
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
azian.i-imatec.joomla3.20147
JOOMLA 3Kenapa joomla 3?
azian.i-imatec.joomla3.20148
Sumber: http://www.joomla.org/3/en
azian.i-imatec.joomla3.20149
Sumber: http://www.joomla.org/3/en
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
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
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.
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.
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.
azian.i-imatec.joomla3.201415
5. InterfaceMain Menu
azian.i-imatec.joomla3.201416
azian.i-imatec.joomla3.201417
azian.i-imatec.joomla3.201418
Extra Feature:Footer and common use quick icons
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.
azian.i-imatec.joomla3.201420
7. Drag and Drop Feature
azian.i-imatec.joomla3.201421
Download• Joomla:
http://www.joomla.org/download.html#j3
• Xampp: https://www.apachefriends.org/index.html
azian.i-imatec.joomla3.201422
WEB SERVER
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?
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
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.
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>
azian.i-imatec.joomla3.201427
INSTALLATIONxampp
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
azian.i-imatec.joomla3.201429
• Click browser • Type di address bar
http://localhost
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
azian.i-imatec.joomla3.201431
INSTALLATIONJoomla!
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.
azian.i-imatec.joomla3.201433
azian.i-imatec.joomla3.201434
azian.i-imatec.joomla3.201435
azian.i-imatec.joomla3.201436
azian.i-imatec.joomla3.201437
azian.i-imatec.joomla3.201438
azian.i-imatec.joomla3.201439
azian.i-imatec.joomla3.201440
azian.i-imatec.joomla3.201441
Back-end
http://localhost/websaya/administratorMasukkan username dan password yang sama seperti di joomla installation sebelum ini.
azian.i-imatec.joomla3.201442
Back-End
azian.i-imatec.joomla3.201443
JOOMLA OVERVIEW
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
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
azian.i-imatec.joomla3.201446
Global Configuration -site
azian.i-imatec.joomla3.201447
Global Configuration-System
Ubah session lifetime kepada 1500‐supaya kita tidak di logoutkan selepas 15minit.
azian.i-imatec.joomla3.201448
Global Configuration-Server
azian.i-imatec.joomla3.201449
USER MANAGER
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‐
azian.i-imatec.joomla3.201451
New User
Isikan account details dan save
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
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.
azian.i-imatec.joomla3.201454
MEMBINA KANDUNGAN LAMAN WEB
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
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
azian.i-imatec.joomla3.201457
MEMBINA LAMAN WEBKategori
azian.i-imatec.joomla3.201458
Langkah1: Membina Kategori
• Content >Category ‐Manager New‐
• Berikan nama Kategori dan Save
azian.i-imatec.joomla3.201459
Bina Sub-Kategori
• Pilih New Kategori• Namakan title –• Pilih Parent-• Save
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
azian.i-imatec.joomla3.201461
MEMBINA LAMAN WEBArtikel
azian.i-imatec.joomla3.201462
Cipta Artikel
• Artikel baru:• Tulis tajuk artikel,• Pilih Kategori• Taip Artikel• Save
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
azian.i-imatec.joomla3.201464
Feature Artikel
• Artikel untuk dipaparkan di muka utama
laman web
azian.i-imatec.joomla3.201465
Publishing Option
azian.i-imatec.joomla3.201466
Article Option
azian.i-imatec.joomla3.201467
MEMBINA LAMAN WEBMenu
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.
azian.i-imatec.joomla3.201469
Menu Item Type
azian.i-imatec.joomla3.201470
Single Article Menu
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
azian.i-imatec.joomla3.201472
Latihan• Cipta Menu berikut:
HomeMengenai INTAN
Visi (Sub Menu)Misi (Sub Menu)Piagam Pelanggan (Sub Menu)
FAQ
azian.i-imatec.joomla3.201473
BUILT-IN EXTENSIONSModule ManagerPlug in Manager‐Language ManagerTemplate ManagerComponents
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.‐
azian.i-imatec.joomla3.201475
Template PreviewEnable preview di options untuk mengetahui modulepositions bagi templatePreview Module Positions: Enabled
azian.i-imatec.joomla3.201476
Modules Manager
azian.i-imatec.joomla3.201477
Module Type
azian.i-imatec.joomla3.201478
Modul Search
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
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.
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
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.
azian.i-imatec.joomla3.201483
Component
Terdapat beberapa component seperti terpapar.
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
azian.i-imatec.joomla3.201485
Contact Category
azian.i-imatec.joomla3.201486
New Contact
azian.i-imatec.joomla3.201487
Contact Details
azian.i-imatec.joomla3.201488
Details Option
azian.i-imatec.joomla3.201489
ComponentContactsdiletakkan sebagaimenu HubungiKami di front end
azian.i-imatec.joomla3.201490
Memaparkan Contact
• Add Contact di Menu• Menu Manager-> Pilih Contact -> Single
Contact
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‐
azian.i-imatec.joomla3.201492
SECURITY
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
azian.i-imatec.joomla3.201494
BACK-UP & RESTORE
azian.i-imatec.joomla3.201495
• Backup Menggunakan component • Contoh : Akeeba Backup• Download Akeeba