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


PENGENALAN KEPADA JOOMLA


Apa itu

Joomla

CMSDrupal

WordpressInstall dalam

server

Guna PHP dan

MySQL

open-source

contoh

Untuk menghasilkanlaman web

Beribu code dihasilkanMelalui module, plugin, dan component


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


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


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


JOOMLA 3Kenapa joomla 3?


Sumber: http://www.joomla.org/3/en


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

http://en.wikipedia.org/wiki/Responsive_web_design

http://twitter.github.com/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 2.5 back end Joomla 3.0 back end


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.

http://twitter.github.com/bootstrap/


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.

http://lesscss.org/


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.


5. InterfaceMain Menu


Extra Feature:Footer and common use quick icons


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.


7. Drag and Drop Feature


Download• Joomla:

http://www.joomla.org/download.html#j3

• Xampp: https://www.apachefriends.org/index.html


WEB SERVER


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?


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


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.


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>


INSTALLATIONxampp


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

http://www.apachefriends.org/

http://www.apachefriends.org/


• Click browser • Type di address bar

http://localhost

http://localhost/


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


INSTALLATIONJoomla!


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.


Back-end

http://localhost/websaya/administratorMasukkan username dan password yang sama seperti di joomla installation sebelum ini.


Back-End


JOOMLA OVERVIEW


Joomla Element• Articles– Biasa– Frontpage

• Categories- meletakkan kategori untuk artikel• Users- pengguna joomla admin/site• Navigation- menu/link• Module-gadjet• Templates- design dan layout


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


Global Configuration -site


Global Configuration-System

Ubah session lifetime kepada 1500‐supaya kita tidak di logoutkan selepas 15minit.


Global Configuration-Server


USER MANAGER


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‐


New User

Isikan account details dan save


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


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.


MEMBINA KANDUNGAN LAMAN WEB


Merangka Kandungan Laman Web

• Konsep membina kandungan ialah CAM:– Langkah 1: Cipta Category– Langkah 2: Cipta Article– Langkah 3: Cipta Menu


• Anda hendaklah terlebih dahulu merangka laman web anda seperti contoh di bawah:

• Home|• Mengenai INTAN|– Visi– Misi– Piagam Pelanggan

• FAQ• Hubungi Kami


MEMBINA LAMAN WEBKategori


Langkah1: Membina Kategori

• Content >Category ‐Manager New‐

• Berikan nama Kategori dan Save


Bina Sub-Kategori

• Pilih New Kategori• Namakan title –• Pilih Parent-• Save


Latihan• Cipta 2 Kategori

1. Kategori About Us2. Kategori FAQ

• Bina Sub Kategori di bawah parent About Us– Visi– Misi– Piagam Pelanggan


MEMBINA LAMAN WEBArtikel


Cipta Artikel

• Artikel baru:• Tulis tajuk artikel,• Pilih Kategori• Taip Artikel• Save


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


Feature Artikel

• Artikel untuk dipaparkan di muka utama

laman web


Publishing Option


Article Option


MEMBINA LAMAN WEBMenu


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.


Menu Item Type


Single Article Menu


Menu dengan Sub-Menu

Untuk mencipta Sub Menu, Pilih melalui Parent Item

Menu Item Root – Sama level dengan menu utama


Latihan• Cipta Menu berikut:

HomeMengenai INTAN

Visi (Sub Menu)Misi (Sub Menu)Piagam Pelanggan (Sub Menu)

FAQ


BUILT-IN EXTENSIONSModule ManagerPlug in Manager‐Language ManagerTemplate ManagerComponents


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.‐


Template PreviewEnable preview di options untuk mengetahui modulepositions bagi templatePreview Module Positions: Enabled


Modules Manager


Module Type


Modul Search


Cuba..• Cuba module module lain seperti wrapper, ‐

custom html, who’s online dan lain lain.‐• Contoh seperti di bawah.

Who'sonline

wrapperCustom html


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.


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


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.


Component

Terdapat beberapa component seperti terpapar.


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


Contact Category


New Contact


Contact Details


Details Option


ComponentContactsdiletakkan sebagaimenu HubungiKami di front end


Memaparkan Contact

• Add Contact di Menu• Menu Manager-> Pilih Contact -> Single

Contact


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‐


SECURITY


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


BACK-UP & RESTORE


• Backup Menggunakan component • Contoh : Akeeba Backup• Download Akeeba

pembangunan laman web 2014

Technology