Downloaded 25 times
Uploaded byIntan Nadhirah
Joomla
This document provides an introduction to Joomla, an open-source content management system (CMS). It discusses the history and evolution of Joomla, from its origins as Mambo to the current version, Joomla 3. Key features of Joomla 3 include being responsive for mobile devices, use of Bootstrap framework, integration of LESS CSS, a common user interface library for extensions, and a simplified three-step installation process. The document also covers installing Joomla using XAMPP local server software, and an overview of common Joomla components like articles, categories, modules and templates.
Joomla
- 1. Pembangunan Laman Web Joomla 3 Asas azian.i-imatec.joomla3.2014 Azian Zubir azian@intanbk.intan.my 03-20847728 i-imatec . INTAN Bukit Kiara
- 2. PENGENALAN KEPADA JOOMLA azian.i-imatec.joomla3.2014 2
- 3. azian.i-imatec.joomla3.2014 3 Apaitu 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
- 6. Joomla versions VersionRelease 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 azian.i-imatec.joomla3.2014 Release no longer supported Release still supported Future release 6
- 7. JOOMLA 3 azian.i-imatec.joomla3.2014 Kenapa joomla 3? 7
- 8. azian.i-imatec.joomla3.2014 8 Sumber:http://www.joomla.org/3/en
- 9. azian.i-imatec.joomla3.2014 9 Sumber:http://www.joomla.org/3/en
- 10. 1. Responsive Joomlais 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 backend Joomla 3.0 back end azian.i-imatec.joomla3.2014 11
- 12. 2. Bootstrap Thebig 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 (forExtension 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
- 15. 5. Interface MainMenu azian.i-imatec.joomla3.2014 15
- 16.
- 17.
- 18. azian.i-imatec.joomla3.2014 18 ExtraFeature: Footer and common use quick icons
- 19. 6. 3 stepsinstallation • 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 andDrop Feature azian.i-imatec.joomla3.2014 20
- 21. • Joomla: http://www.joomla.org/download.html#j3 • Xampp: https://www.apachefriends.org/index.html azian.i-imatec.joomla3.2014 21
- 22.
- 23. • The primaryfunction 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 termweb 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 isa 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
- 26. PHP • <?php……………… ?> Contoh: <!DOCTYPE html> <html> <head> <title>PHP Test</title> </head> <body> <?php echo '<p>Hello World</p>'; ?> </body> </html> azian.i-imatec.joomla3.2014 HTML • <>…. </> Contoh <!DOCTYPE html> <html> <head> <title>This is a title</title> </head> <body> <p>Hello world!</p> </body> </html> 26
- 27.
- 28.
- 29. azian.i-imatec.joomla3.2014 • Clickbrowser • Type di address bar http://localhost 29
- 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
- 31.
- 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
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. azian.i-imatec.joomla3.2014 41 http://localhost/websaya/administrator Masukkan username dan password yang sama seperti di joomla installation sebelum ini.
- 42.
- 43.
- 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
- 46.
- 47. azian.i-imatec.joomla3.2014 47 Ubahsession lifetime kepada 1500 ‐supaya kita tidak di logoutkan selepas 15 minit.
- 48.
- 49.
- 50. azian.i-imatec.joomla3.2014 50 Superuser‐ kita sebagai developer laman web ini Enable‐user ini tidak di block Activated‐emel user telah disahkan User groups‐jawatan user ini
- 51. azian.i-imatec.joomla3.2014 51 Isikanaccount details dan save
- 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.
- 54. MEMBINA KANDUNGAN LAMANWEB azian.i-imatec.joomla3.2014 54
- 55. • Konsep membinakandungan ialah CAM: – Langkah 1: Cipta Category – Langkah 2: Cipta Article – Langkah 3: Cipta Menu azian.i-imatec.joomla3.2014 55
- 56. • Anda hendaklahterlebih 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
- 57. MEMBINA LAMAN WEB azian.i-imatec.joomla3.2014 Kategori 57
- 58. azian.i-imatec.joomla3.2014 • Content‐>Category Manager‐New • Berikan nama Kategori dan Save 58
- 59. azian.i-imatec.joomla3.2014 • PilihNew Kategori • Namakan title – • Pilih Parent- • Save 59
- 60. • Cipta 2Kategori 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
- 61. MEMBINA LAMAN WEB azian.i-imatec.joomla3.2014 Artikel 61
- 62. azian.i-imatec.joomla3.2014 • Artikelbaru: • Tulis tajuk artikel, • Pilih Kategori • Taip Artikel • Save 62
- 63. • Cipta artikeluntuk 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
- 64.
- 65.
- 66.
- 67. MEMBINA LAMAN WEB azian.i-imatec.joomla3.2014 Menu 67
- 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.
- 69.
- 70.
- 71. azian.i-imatec.joomla3.2014 71 Untukmencipta Sub Menu, Pilih melalui Parent Item Menu Item Root – Sama level dengan menu utama
- 72. • Cipta Menuberikut: Home Mengenai INTAN Visi (Sub Menu) Misi (Sub Menu) Piagam Pelanggan (Sub Menu) FAQ azian.i-imatec.joomla3.2014 72
- 73. BUILT-IN EXTENSIONS azian.i-imatec.joomla3.2014 Module Manager Plug‐in Manager Language Manager Template Manager Components 73
- 74. • Joomla terbinadengan 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
- 75. azian.i-imatec.joomla3.2014 Enable previewdi options untuk mengetahui module positions bagi template Preview Module Positions: Enabled 75
- 76.
- 77.
- 78.
- 79. • Cuba module‐modulelain 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 • Kitaboleh 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 inialah 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 Bahasayang 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.
- 83. azian.i-imatec.joomla3.2014 83 Terdapatbeberapa component seperti terpapar.
- 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
- 85.
- 86.
- 87.
- 88.
- 89. azian.i-imatec.joomla3.2014 89 Component Contacts diletakkan sebagai menu Hubungi Kami di front end
- 90. • Add Contactdi Menu • Menu Manager-> Pilih Contact -> Single Contact azian.i-imatec.joomla3.2014 90
- 91. • 3rd partyextensions 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
- 92.
- 93. • Sentiasa mengikutiperkembangan 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
- 94. BACK-UP & RESTORE azian.i-imatec.joomla3.2014 94
- 95. • Backup Menggunakancomponent • Contoh : Akeeba Backup • Download Akeeba azian.i-imatec.joomla3.2014 95