3. azian.i-imatec.joomla3.2014
3
Apa itu
Joomla
CMS
Drupal
Wordpress
Install dalam
server
Guna PHP
dan
MySQL
open-source
Untuk menghasilkan
laman web
Beribu code dihasilkan
Melalui module, plugin,
dan component
4. • 1990‐an
• Miro International Pvt Ltd mengeluarkan MAMBO (cms
pertama 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.2014
4
5. • 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)
azian.i-imatec.joomla3.2014
5
Family 1
Family 2
Family 3
10. 1. Responsive
Joomla 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!
•
azian.i-imatec.joomla3.2014
10
Joomla 3.0
Joomla 2.5
11. Joomla 2.5 back end Joomla 3.0 back end
azian.i-imatec.joomla3.2014
11
12. 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.2014
12
13. 3. LESS CSS
LESS 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.2014
13
14. 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.2014
14
19. 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.2014
19
20. 7. Drag and Drop Feature
azian.i-imatec.joomla3.2014
20
23. • 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.2014
23
24. • The term web server, also written asWeb
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.
azian.i-imatec.joomla3.2014
24
Sumber: wikipedia
25. • 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.2014
25
30. • 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.2014
30
32. • Buka folder: c:xampphtdocs
• 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.2014
32
44. • 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.2014
44
45. • Modules (gadget)
• Plugin (ciri tambahan)
• Language (tetapan bahasa)
• Components (sistem)
• Templates (design dan layout web)
azian.i-imatec.joomla3.2014
45
Joomla extensions terdiri daripada built in dan
3rd party extensions
50. azian.i-imatec.joomla3.2014
50
Super user‐ kita sebagai developer laman web
ini
Enable‐user ini tidak di block
Activated‐emel user telah disahkan
User groups‐jawatan user ini
52. azian.i-imatec.joomla3.2014
52
Save : Save sahaja dan tidak berganjak ke muka surat lain
Save & Close: Save dan tutup paparan, terus ke muka surat
Manager
Save & New: Save dan membuat user baru
Cancel: cancel
53. azian.i-imatec.joomla3.2014
53
Public‐ Umum
Guest-pelawat
Manager‐Back end user yang boleh uruskan laman
web tetapi terhad kepada fungsi tertentu sahaja
Administrator‐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 dibenarkan
Author‐front end user yang boleh membuat artikel
Editor‐ front end user yang boleh buat dan edit semua
artikel
Publisher‐front end user yang boleh publish, edit dan
tulis artikel.
55. • Konsep membina kandungan ialah CAM:
– Langkah 1: Cipta Category
– Langkah 2: Cipta Article
– Langkah 3: Cipta Menu
azian.i-imatec.joomla3.2014
55
56. • 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.2014
56
60. • Cipta 2 Kategori
1. Kategori About Us
2. Kategori FAQ
• Bina Sub Kategori di bawah parent About Us
– Visi
– Misi
– Piagam Pelanggan
azian.i-imatec.joomla3.2014
60
63. • 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.2014
63
68. azian.i-imatec.joomla3.2014
68
1. Pilih jenis artikel (single artikel) di
Menu Item Type
2. Select Article berkenaan
3. Tulis tajuk menu
4. Save & new untuk bina menu lain.
74. • 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.2014
74
79. • Cuba module‐module lain seperti wrapper,
custom html, who’s online dan lain‐lain.
• Contoh seperti di bawah.
azian.i-imatec.joomla3.2014
79
Who's
online
wrapper
Custom html
80. azian.i-imatec.joomla3.2014
• 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.
80
81. • Plug in ialah
ciri‐ciri tambahan
yang boleh
dimasukkan dalam
laman web seperti
youtube, editor
etc.
• Kita akan
mengubah
editor‐TinyMCE di
sini.
azian.i-imatec.joomla3.2014
81
Tukar pada Basic Options:
Functionality: Extended
82. azian.i-imatec.joomla3.2014
82
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.
84. • 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.2014
84
90. • Add Contact di Menu
• Menu Manager-> Pilih Contact -> Single
Contact
azian.i-imatec.joomla3.2014
90
91. • 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.2014
91
93. • 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.2014
93
