Membina Laman Web Menggunakan Joomla! Mohd Hazmi Kasmin. Pusat Teknologi Maklumat. Universiti Tun Hussein Onn Malaysia

Transcription

1 Membina Laman Web Menggunakan Joomla! Mohd Hazmi Kasmin Pusat Teknologi Maklumat Universiti Tun Hussein Onn Malaysia Jan 2014

2 Isi Kandungan 1.0 Pengenalan Sejarah Joomla! Aplikasi Joomla! Joomla! hari ini dan masa hadapan Spesifikasi bagi memasang Joomla! Rujukan Memasang Joomla! di Komputer Sendiri Pakej Perisian XAMPP bagi Windows Instalasi Pakej Xampp Pakej Perisian WAMP Muat Turun WAMP Windows Web Platform Installer Pemasangan Joomla! Di Komputer Peribadi Muat Turun Aplikasi Joomla! Menyediakan Pangkalan Data MySQL Pemasangan Joomla! Konfigurasi Utama Konfigurasi Pangkalan Data Ringkasan Pemasangan Mentadbir laman web Joomla! Menu Sisi Panel Kawalan Menu Utama Joomla! Menu System Menu Users Menu Menus Menu Content Menu Components Menu Extensions Pusat Teknologi Maklumat, UTHM 2

3 Membina Laman Web Menggunakan Joomla! 4.0 Menggunakan Joomla! Templat Kenapa Templat Menguruskan Templat Memasang Templat Pengurusan Artikel Membina Kategori Membina Artikel Pengurusan Menu Membina Menu Menambah Item Menu Jenis Item Artikel bagi Menu Pengurusan Modul Penutup Indeks Pusat Teknologi Maklumat, UTHM

4 1.0 Pengenalan Pada asasnya menguruskan laman web memerlukan pengetahuan HTML atau Hypertext Markup Language, suatu protokol yang membolehkan text dipaparkan menerusi pelayan sesebuah laman web. Namun dengan menggunakan aplikasi pengurus kandungan laman web Joomla!, jika ia sudah siap terpasang disesebuah laman web maka pengetahuan cara menggunakan Joomla! sahaja yang diperlukan. Ini adalah disebabkan aplikasi Joomla! telah dibangunkan sebagai sebuah pengurus kandungan laman web yang mempunyai ciri-ciri media penulisan sebagaimana perisian Microsoft Word dan juga pelbagai ciri yang membolehkan sesiapa juga menguruskan laman web dengan mudah tanpa pengetahuan teknikal yang mendalam terhadap teknologi pembangunan laman web. Diantara ciri yang ketara adalah fungsi didalam memberi akses kepada suatu pasukan atau jawatankuasa untuk terus membina kandungan sesebuah laman web dengan bantuan minima daripada bahagian teknologi maklumat. Ini amat berbeza dengan laman web tradisi yang mengkehendakkan setiap artikel perlu dikodkan kepada bahasa HTML barulah ia berupaya dipaparkan di sesebuah laman web. Joomla! akan menukarkan artikel penulisan biasa kepada kod HTML secara automatik. Salah satu kelebihan penting menggunakan Joomla! adalah kerana bahagian pentadbir Joomla! adalah berasaskan web sepenuhnya, oleh yang demikian walau dimana individu yang mentadbir laman web tersebut berada, hanya dengan akses kepada internet beliau berupaya mentadbir laman web tersebut tanpa perlu untuk pergi secara fizikal kepada pelayan di mana laman web tersebut berada. Ini amat berguna kerana ia membolehkan laman web ditadbir pada bila-bila masa sahaja dan dimana sahaja lokasi pentadbir itu berada. Rajah 1 menunjukkan laman web rasmi Joomla! iaitu dan Rajah 2 pula menunjukkan contoh sebuah laman web yang dibangunkan menggunakan Joomla!. Pusat Teknologi Maklumat, UTHM 4

5 Membina Laman Web Menggunakan Joomla! Rajah 1 Laman Web Rasmi Joomla!, Rajah 2 Contoh Laman Web Menggunakan Joomla!. 5 Pusat Teknologi Maklumat, UTHM

6 Rajah 3 dan Rajah 4 memberikan perbandingan diantara laman web tradisi dan laman web dinamik menggunakan aplikasi pengurus kandugan seperti Joomla!. Permintaan Pengguna Pengguna Imej, video, HTML Pelayan web Rajah 3 Laman Web Statik HTML Permintaan Pengguna Joomla! Pengguna Imej, video, HTML Pelayan web PHP [templat] Pengkalan Data Rajah 4 Laman Web Dinamik Joomla! Pusat Teknologi Maklumat, UTHM 6

7 Membina Laman Web Menggunakan Joomla! 1.1 Sejarah Joomla! Joomla! adalah berasal daripada perisian Mambo yang dibina oleh para jurutera laman web di sebuah syarikat di Australia bernama Miro Corporation. Namun disebabkan terdapat percanggahan pendapat diantara pihak pengurusan Miro Corporation dan para pembangun Mambo didalam memberikan lesen sumber terbuka sepenuhnya terhadap aplikasi tersebut, maka lahirlah Joomla!, berasaskan daripada kod program Mambo oleh beberapa orang pembangun utama yang keluar daripada syarikat tersebut. Nama Joomla! telah diambil daripada perkataan Swahili iaitu jumla yang membawa maksud all together atau as a whole ataupun semua bersatu. Joomla! versi telah dilancarkan pada 16 September 2005 dibina berasaskan Mambo versi Joomla! adalah antara perisian pengurus kandungan laman web yang popular selain Wordpress dan Drupal. Rajah 5 Perbandingan Google Trend Menggunakan Katakunci Carian 7 Pusat Teknologi Maklumat, UTHM

8 1.2 Aplikasi Joomla! Aplikasi web Joomla! boleh dimuat-turun daripada laman web rasmi Joomla! iaitu dan di laman web tersebut terdapat pelbagai ruang seperti forum perbincangan di Joomla! Forum, pautan bagi memuat-turun aplikasi tambahan yang dikenali sebagai extensions kepada Joomla! seperti Component, Module dan Plugins dan juga berita berkaitan dengan Joomla! iaitu Joomla! Magazine Joomla! hari ini dan masa hadapan. Para pembangun Joomla! telah memulakan operasi merombak rangka yang mendokong Joomla! kepada sesuatu yang unik dan tidak lagi bergantung kepada kod-kod asal yang diwarisi daripada Mambo. Rangka kerja baru ini telah menyebabkan lahirnya versi Joomla! 1.5.0, 1.6, 1.7 dan yang terkini versi 2.5 yang lebih dinamik dan versatil dan dilihat dapat meningkatkan lagi tahap keupayaan Joomla! dalam mendokong teknologiteknologi pembinaan laman web masa hadapan. Joomla! versi 1.0 mula dibangunkan pada tahun 2005 dan sehingga tahun 2009 versi stabil adalah Joomla! dan pembangunan diberhentikan pada September Versi Keterangan 1.0 Diberhentikan pada September Versi stabil diperkenalkan pada Januari 2008 dan akan diberhentikan pembangunan (End of Life, EOL) pada April Versi stabil diperkenalkan pada Januari Versi stabil pada Julai Versi terkini Joomla! diperkenalkan pada Januari 2012 sebagai versi Long Term Release (LTR) selepas versi 1.5 dan semua versi sebelumnya dinasihatkan agar dinaiktaraf kepada versi Versi terbaru yang disarankan digunakan bagi laman web baru. 3.5 Versi terbaru dilancarkan pada Mac Rajah 6 Garis Masa Versi Joomla Pusat Teknologi Maklumat, UTHM 8

9 Membina Laman Web Menggunakan Joomla! Spesifikasi bagi memasang Joomla! Spesifikasi yang diperlukan untuk memasang aplikasi Joomla! adalah pelayan web seperti Apache Web Server, perisian PHP dan pangkalan data MySQL. Kebanyakkan syarikat yang memberi perkhidmatan pelayan laman web komersil pada kebiasaannya sudah mempunyai spesifikasi ini dan juga mempunyai skrip khas yang boleh digunakan bagi memasang Joomla! untuk kegunaan pembangunan laman web. Bagi membina laman web menggunakan komputer peribadi, perisian XAMPP, WAMP atau Microsoft Web Platform Installer boleh digunakan untuk menyediakan persekitaran untuk pembangunan laman web dan aplikasi berasaskan web kerana ia memudahkan pemasangan komponen asas Apache, PHP dan MySQL. 1.3 Rujukan 1. Joomla!, 2. XAMPP, 3. PHP, 4. MySQL, 5. Microsoft Web Platform Installer, WPI, 9 Pusat Teknologi Maklumat, UTHM

10 2.0 Memasang Joomla! di Komputer Sendiri. Bagi tujuan pembangunan dan pembelajaran, adalah dinasihatkan agar memasang Joomla! di komputer peribadi dahulu sehingga anda berpuashati dengan laman web tersebut dan kemudiannya memindahkan ke pelayan sebenar. Terdapat beberapa cara untuk menyediakan persekitaran pembangunan laman web di komputer peribadi. Pakej perisian seperti XAMPP, WAMP dan Microsoft Web Platform Installer (WPI) boleh digunakan untuk tujuan tersebut. Namun adalah diingatkan pakej ini adalah tidak sesuai untuk dijadikan laman web utama kerana isu-isu sekuriti dan ia hanya sesuai untuk proses pembangunan sahaja. 2.1 Pakej Perisian XAMPP bagi Windows Rajah 7 Perisian XAMPP Pusat Teknologi Maklumat, UTHM 10

11 Membina Laman Web Menggunakan Joomla! Perisian XAMPP adalah suatu pakej yang mempunyai semua perisian-perisian bagi membolehkan untuk membangunkan sebuah laman web. Ia mempunyai pelayan web Apache, pengkalan data MySQL dan juga komponen PHP yang diperlukan bagi membolehkan Joomla! digunakan untuk menguruskan kandungan laman web. Ia juga mempunyai perisian phpmyadmin bagi menguruskan pangkalan data MySQL. Kesemua aplikasi yang digunakan adalah mempunyai lesen sumber terbuka oleh yang demikian tiada lesen berbayar yang diperlukan. Ia boleh dimuat-turun melalui laman web rasmi XAMPP iaitu dan terdapat beberapa versi bagi kegunaan pelbagai pengguna seperti versi Microsoft Windows, versi Linux, versi Mac OS X dan versi Solaris. XAMPP juga boleh dipasang di peranti USB mudahalih bagi memudahkan kerja-kerja pembangunan laman web dan membolehkan pengguna mempunyai persekitaran pembangunan bagi tujuan persembahan dan sebagainya. Pengguna hanya perlu memuat-turun versi XAMPP Portable iaitu XAMPP USB Lite dan meletakkan kesemua komponen yang diperlukan di dalam peranti USB dan komponen seperti Apache dan MySQL diaktifkan apabile perlu sahaja. Rajah 8 Muat Turun XAMPP 11 Pusat Teknologi Maklumat, UTHM

12 2.1.1 Instalasi Pakej Xampp. Jadual 2.1 Instalasi Perisian XAMPP Muat turun pakej tersebut daripada laman web dan kemudian pasangkan fail tersebut. Sila ambil versi untuk Windows. Sila pilih di mana anda ingin memasang pakej Xampp tersebut. Pusat Teknologi Maklumat, UTHM 12

13 Membina Laman Web Menggunakan Joomla! Pilih instalasi yang bersesuaian dengan kehendak anda. Klik pada Install untuk memulakan instalasi. Proses instalasi bermula. Proses selesai. Klik Finish dan Yes bagi memulakan aplikasi kawalan Xampp. 13 Pusat Teknologi Maklumat, UTHM

14 Aplikasi kawalan Xampp yang membantu dalam menghidupkan pelayan Apache dan MySql. Hidupkan MySQL dahulu diikuti dengan Apache. i) Klik Start bagi MySQL. ii) Klik Start bagi Apache. Untuk memastikan laman web telah tersedia, sila taip pada ruangan alamat laman web. Jika paparan skrin seperti disebelah maka anda adalah bersedia untuk membuat instalasi Joomla!. Pusat Teknologi Maklumat, UTHM 14

15 Membina Laman Web Menggunakan Joomla! 2.2 Pakej Perisian WAMP Rajah 9 Perisian WampServer Pakej WAMP boleh dimuat-turun daripada laman web rasmi di dan pengguna boleh memilih samada ingin menggunakan pakej WAMP 32 bits atau WAMP 64 bits. Bagi kegunaan di versi Windows 7 932bits), Windows XP dan ke bawah boleh menggunakan versi WAMP 32bits tetapi jika menggunakan versi Windows 7 64bits maka perlu memilih WAMP 64bits. 15 Pusat Teknologi Maklumat, UTHM

16 2.2.1 Muat Turun WAMP Rajah 10 Paparan Muat Turun WAMP Apabila menu Download dipilih, sila tekan penyataan download it directly kerana borang yang peru diisi hanya opysen jika ingin mendapatkan maklumat terkini perkembangan pakej WAMP. Sila ikut arahan yang diberikan bagi memasang pakej WAMP tersebut. Rajah 11 Paparan Skrin Utama WAMP Setup Pusat Teknologi Maklumat, UTHM 16

17 Membina Laman Web Menggunakan Joomla! Apabila pakej WAMP berjaya dipasang segala aturan bagi aplikasi tersebut boleh dibuat menggunakan program yang boleh diakses di kanan bawah Task Bar bagi Windows. Rajah 12 Tray icon Wampserver Pakej WAMP berjaya dipasangkan dengan memastikan paparan skrin WAMP Server ditayangkan pada alamat URL di pelayar web. 17 Pusat Teknologi Maklumat, UTHM

18 Rajah 13 Paparan Pusat Teknologi Maklumat, UTHM 18

19 Membina Laman Web Menggunakan Joomla! 2.3 Windows Web Platform Installer Rajah 14 Skrin Windows Web Platform Microsoft Web Platform Installer (WPI) adalah satu aplikasi yang membantu untuk memasang aplikasi-aplikasi sumber terbuka di persekitaran Windows. Menggunakan WPI membolehkan pemasangan aplikasi seperti Joomla!, Wordpress, phpbb dan pelbagai lagi aplikasi untuk tujuan pembangunan di komputer peribadi sendiri. Rajah 15 Skrin Web Platform Installer 19 Pusat Teknologi Maklumat, UTHM

20 Rajah 16 Skrin Instal WPI WPI ini akan secara automatik memastikan segala aplikasi yang berkaitan untuk membolehkan Joomla! digunakan akan dipasang bersama sebagaimana yang boleh dilihat pada rajah diatas. Pusat Teknologi Maklumat, UTHM 20

21 Membina Laman Web Menggunakan Joomla! 2.4 Pemasangan Joomla! Di Komputer Peribadi Muat Turun Aplikasi Joomla! A Rajah 17 Laman Web Joomla, Layari laman web Joomla! di dan kemudian tekan butang Download sebagaimana yang ditunjukkan pada [A] di gambarajah di atas. 21 Pusat Teknologi Maklumat, UTHM

22 Bagi pemasangan Joomla! baru sila pilih untuk memuat-turun versi Joomla! Full Package [A] yang tekini manakala jika untuk menaiktaraf dari versi sebelumnya hanya perlu memuat-turun versi naiktaraf sebagai contoh 3.2.x to Upgrade Package [B] sebagaimana yang ditunjukkan di gambarajah di bawah. A B Rajah 17 Skrin Muat-turun Joomla! Pusat Teknologi Maklumat, UTHM 22

23 Membina Laman Web Menggunakan Joomla! Menyediakan Pangkalan Data MySQL Tatacara berikut ini adalah dengan menganggap bahawa XAMPP telah terpasang di computer peribadi sendiri dan telah diletakkan pada lokasi c:\xampp serta Apache dan MySQL telah diaktifkan. Sila buka pelayar web dan taipkan alamat atau bagi membuka laman web peribadi anda. phpmyadmin Rajah 18 Skrin Pengurusan XAMPP Sila pilih phpmyadmin pada menu sebelah kiri untuk membina pangkalan data bagi digunakan oleh Joomla! kemudian klik pada tab Database. 23 Pusat Teknologi Maklumat, UTHM

24 Rajah 19 Tab Database phpmyadmin Kemudian taip myjoomla [A] dan tekan butang Create [B]. A B Rajah 20 Membina Pangkalan Data Pangkalan data myjoomla boleh dilihat pada senarai di sebelah kiri. Pusat Teknologi Maklumat, UTHM 24

25 Membina Laman Web Menggunakan Joomla! Pemasangan Joomla! Rajah 21 Pangkalan Data myjoomla Sila extract fail Joomla! Full Package yang telah dimuat-turn ke dalam direktori c:\xampp\htdocs\myjoomla atau c:\wamp\www\myjoomla bagi yang menggunakan wampserver. Rajah 22 Skrin Windows Explorer 25 Pusat Teknologi Maklumat, UTHM

26 Dan buka alamat URL bagi mengakses laman web Joomla! tersebut Konfigurasi Utama Rajah 23 Skrin Konfigurasi Utama Di skrin ini konfigurasi seperti Site Language, Site Name, Description, Admin , Admin username, Admin Password dan samada Site Offline boleh ditetapkan. Pusat Teknologi Maklumat, UTHM 26

27 Membina Laman Web Menggunakan Joomla! Konfigurasi Pangkalan Data A Rajah 24 Skrin Konfigurasi Pangkalan Data Pada skrin ini konfigurasi seperti Database Type [MySQLi], Host Name [localhost], Username [root], Password [ ], Database Name [myjoomla], Table prefix akan ditetapkan. 27 Pusat Teknologi Maklumat, UTHM

28 2.4.6 Ringkasan Pemasangan B A Rajah 25 Skrin Gambaran Keseluruhan Pemasangan Skrin memaparkan ringkasan pemasangan Joomla! dan juga memberikan pilihan untuk menyediakan laman web dengan Sampel Data [A], Brochure English(GB) Sample Data dan untuk meneruskan pemasangan Joomla!, sila tekan butang Install [B]. Pusat Teknologi Maklumat, UTHM 28

29 Membina Laman Web Menggunakan Joomla! Rajah 26 Skrin Proses Pemasangan Joomla! A Rajah 27 Skrin Pemasangan Joomla! 29 Pusat Teknologi Maklumat, UTHM

30 Rajah 27 menunjukkan pemasangan Joomla! selesai dan anda pelu menekan butang Remove Installation Folder [A] bagi menyempurnakan tugas. Rajah 28 Skrin Laman Web MyJoomla! Pusat Teknologi Maklumat, UTHM 30

31 Membina Laman Web Menggunakan Joomla! 3.0 Mentadbir laman web Joomla! Skrin pentadbir bagi Joomla! boleh diakses melalui alamat web seperti berikut atau dengan menambahkan administrator dibelakang alamat web laman web tersebut. Rajah 29 menunjukkan contoh skrin Log Masuk ke laman web pentadbir Joomla!. A B C Rajah 29 Skrin Log Masuk Laman Pentadbir Joomla! Bagi proses log masuk pengguna perlu menaip Kata nama [A] dan Kata laluan [B] dan menekan butang Log in [C]. 31 Pusat Teknologi Maklumat, UTHM

32 A B C Rajah 30 Skrin Utama Laman Pentadbir Joomla! Skrin Utama laman web pentadbir Joomla! juga dikenali sebagai Skrin Panel Kawalan mengurustadbir segala operasi berkaitan dengan laman web. Pada asasnya ia mempunyai Menu Utama [A], Menu Sisi [B] dan Ruang Makluman [C]. Lihat Rajah 30. Pusat Teknologi Maklumat, UTHM 32

33 Membina Laman Web Menggunakan Joomla! 3.1 Menu Sisi Panel Kawalan Menu Sisi Panel Kawalan Joomla! merupakan akses capaian pantas terhadap menumenu utama yang paling biasa digunakan dalam menguruskan sebuah laman web. Ia memudahkan pengguna membuat operasi asas dalam menggunakan Joomla!. Jadual 3.1 Penerangan Menu Sisi Menu Sisi Penerangan Add New Article membina artikel baru Article Manager menguruskan artikel dengan menyenaraikan segala artikel yang telah dibina. Category Manager mecipta kategori bagi artikel. Media Manager membuat proses berkaitan dengan gambar seperti muat naik media dan sebagainya. Menu Manager menbina, mengemaskini dan menguruskan menu Joomla! Module Manager menyusun atur modul Joomla! mengikut templat. User Manager Pengurus Pengguna bertujuan membina pengguna baru, memadamkan dan memberikan tahap akses. Global Configuration skrin konfigurasi bagi keseluruhan laman web tersebut. Template Manager skrin bagi menguruskan templat bagi laman web. Language Manager skrin pengurusan bahasa. 33 Pusat Teknologi Maklumat, UTHM

34 Install Extension skrin bagi memuatnaik komponen Joomla! File Browser skrin pengurusan fail, memerlukan pemasangan komponen JCE Editor bagi membolehkan menu ini diwujudkan. Checking Joomla! membuat semakan berkaitan dengan versi Joomla! yang terkini. Checking Extensions membuat semakan berkaitan dengan komponen-komponen didalam Joomla!. Jadual 2.2 di atas menerangkan serba ringkas bagi skrin utama laman web pentadbir Joomla! dan Menu Sisi tersebut adalah capaian pantas bagi menguruskan laman web dan setiap menu tersebut boleh juga diakses melalui Menu Utama di sebelah atas skrin utama pentadbir sebagaimana [A] dalam Rajah Menu Utama Joomla! Menu utama pentadbir Joomla! merupakan komponen utama yang membolehkan Joomla! diuruskan dengan berkesan. Di sini terdapat beberapa komponen utama iaitu Menu Pengurusan Sistem, Menu Pengurusan Pengguna, Menu Pengurusan Menu Joomla!, Menu Pengurusan Isi Kandungan, Menu Pengurusan Komponen, Menu Pengurusan Komponen Tambahan dan Menu Bantuan. Pusat Teknologi Maklumat, UTHM 34

35 Membina Laman Web Menggunakan Joomla! Menu System Rajah 31 Menu Pengurusan Sistem Joomla! Menu System atau Menu Pengurusan Sistem Joomla! adalah diantara menu paling utama didalam membuat konfigurasi keseluruhan kepada laman web dari segi perkara asas berkaitan dengan pelayan dan Joomla! dan juga dalam mengetahui setiap tetapan yang perlu bagi memastikan bahawa Joomla! akan berjalan dengan lancar. Jadual 3.2 memberi penerangan ringkas berkaitan dengan Menu Pengurusan Sistem Joomla!. Jadual 3.2 Menu Pengurusan Sistem Joomla! 35 Pusat Teknologi Maklumat, UTHM

36 Menu Pengurusan Sistem Joomla! Penerangan Control Panel Laman utama skrin pentadbir Global Configuration Skrin konfigurasi laman web seperti Site Name, Penetapan Default Editor, dan sebagainya. Memberi akses terus kepada skrin semua penetapan Options bagi setiap komponen didalam Joomla!. Lihat Rajah 32. Global Check-in Menu bagi membolehkan segala kunci atau lock dilepaskan. Clear Cache Membersihkan segala Cache yang elah disimpan oleh komponen atau Joomla!. Purge Expired Cache Membersihkan Cache yang telah luput tarikh. System Information Makluman berkaitan dengan Pelayan dan Joomla! seperti versi, Pusat Teknologi Maklumat, UTHM 36

37 Membina Laman Web Menggunakan Joomla! A B Rajah 32 Skrin Global Configuration Rajah 32 menunjukkan : [A] Konfigurasi keseluruhan Joomla! [B] Capaian pentas kepada menu Options setiap komponen Joomla! 37 Pusat Teknologi Maklumat, UTHM

38 Rajah 33 Contoh Skrin System Information Skrin System Information memberikan maklumat penting berkaitan dengan versi pelayan, versi Joomla!, versi Pangkalan Data, Tetapan PHP, Tetapan yang dibuat di Global Configuration, Directory Permission iaitu tahap akses direktori di dalam pelayan dan maklumat PHP yang dicapai menggunakan fungsi phpinfo(). Pusat Teknologi Maklumat, UTHM 38

39 Membina Laman Web Menggunakan Joomla! Menu Users Rajah 34 Menu Pengguna Joomla! Jadual 3.3 Menu Pengguna Joomla! Menu Pengguna Joomla! Penerangan User Manager Mencipta, memadam, mengubahsuai tahap akses pengguna. Groups Mencipta, memadam, mengubahsuai tahap akses kumpulan bagi pengguna. Access Levels Akses kepada tahap pengguna. User Notes Nota kepada pengguna skrin pentadbir User Note Categories Kategori nota Mass Mail Users Menghantar mekluman kepada semua pengguna skrin pentabir 39 Pusat Teknologi Maklumat, UTHM

40 3.2.3 Menu Menus Rajah 35 Menu Pengurusan Menu Menu Pengurusan Menus ini adalah dimana Menu dicipta, dikemaskini dan dipadam mengikut kesesuaian laman web. Lihat Rajah 36 contoh bagaimana menu dipaparkan di laman web dan Rajah 37 bagaimana ia dibina di Menu Pengurusan Menus. Pusat Teknologi Maklumat, UTHM 40

41 Membina Laman Web Menggunakan Joomla! A Rajah 36 Contoh Paparan Menu Rajah 36 menunjukkan contoh paparan menu Main Menu [A] yang telah dibina didalam Menu Pengurusan Menus sebagaimana yang dipaparkan oleh Rajah Pusat Teknologi Maklumat, UTHM

42 A B Rajah 37 Contoh Paparan Menu Pengurusan Menus Rajah 37 menunjukkan nama menu Main Menu [A] dan item yang ada didalam menu tersebut [B]. Pusat Teknologi Maklumat, UTHM 42

43 Membina Laman Web Menggunakan Joomla! Menu Content Rajah 38 Paparan Menu Isi Kandungan / Content Jadual 3.4 Menu Isi Kandungan Joomla! Menu Content Joomla! Penerangan Article Manager Mencipta, memadam, mengubahsuai artikel. Category Manager Mencipta, memadam, mengubahsuai kumpulan bagi artikel. Featured Articles Penetapan artikel Fitur yang dipaparkan dimuka hadapan laman. Media Manager Skrin pentadbir media 43 Pusat Teknologi Maklumat, UTHM

44 3.2.5 Menu Components Rajah 39 Paparan Menu Komponen / Components Paparan Menu Komponen Joomla! adalah menu capaian kepada komponen Joomla! seperti Banner, Contacts, Messaging, Search, Weblinks dan pelbagai lagi menu yang berkaitan dengan operasi Joomla!. Menu ini akan bertambah mengikut pertambahan atau instalasi yang dibuat oleh pengguna. Sebagai contoh JCE Editor pada Rajah 39 di atas adalah menu yang wujud selepas Komponen JCE Editor dipasang dan ia tidak datang secara automatik dengan pemasangan Joomla!. Pusat Teknologi Maklumat, UTHM 44

45 Membina Laman Web Menggunakan Joomla! Menu Extensions Rajah 40 Paparan Extensions Jadual 3.5 Menu Extensions Joomla! Menu Extensions Joomla! Penerangan Extension Manager Skrin Pengurus Extensions. Lihat Rajah 41. Module Manager Mencipta, memadam, mengurus Modul Joomla!. Lihat Rajah 42. Plugin Manager Mencipta, memadam, mengurus Plugins Joomla!. Lihat Rajah 43. Template Manager Mencipta, memadam, mengurus Templates Joomla!. Lihat Rajah 44. Language Manager Mencipta, memadam, mengurus languages atau bahasa yang dipaparkan di laman web. Lihat Rajah Pusat Teknologi Maklumat, UTHM

46 A B C Rajah 41 Paparan Pengurus Extensions Pengurus Extensions akan membantu dalam menguruskan komponen Joomla! [A] bagi seperti memasang, mengemaskini, memadam dan juga mencari komponen yang tidak dipasang melalui Pengurus Extensions ini menggunakan fungsi Discover. Bagi proses pemasangan komponen Joomla! pengguna perlu memuat-turun komponen dan mencari komponen tersebut di komputer pengguna [B] dan menekan butang Upload & Install [C] bagi membuat proses pemasangan. Pusat Teknologi Maklumat, UTHM 46

47 Membina Laman Web Menggunakan Joomla! A B Rajah 42 Paparan Pengurus Modules Rajah 42 menunjukkan skrin Pengurus Modules yang berfungsi dalam menguruskan modul Joomla! seperti membina, mengubahsuai, memaparkan dan memadam modul tersebut [A] dan juga menyelaraskan susun atur modul-modul [B] seperti Modul Log Masuk dan Modul Main Menu berpandukan kepada templat yang digunakan dan dengan mengubahkan kedudukan atau Position bagi modul tersebut, pengguna boleh mengubah kedudukan modul mengikut kesesuaian sebuah laman web. 47 Pusat Teknologi Maklumat, UTHM

48 A B Rajah 43 Paparan Pengurus Plugins Skrin Pengurus Plugins akan membantu dalam menguruskan Plugins seperti mengemaskini, mengaktif atau tidak mengaktifkan Plugins [A] yang telah dipasang di Joomla!. Plugins berfungsi sebagai enjin automatik yang membantu operasi Joomla! [B] seperti enjin carian, membantu proses pengesahan Log Masuk pengguna, membantu paparan emel daripada carian Spam melalui fungsi Cloaking dan pelbagai lagi fungsi asas Joomla! seperti navigasi dan sebagainya. Pusat Teknologi Maklumat, UTHM 48

49 Membina Laman Web Menggunakan Joomla! A B Rajah 44 Paparan Pengurus Templates Skrin Pengurus Templat adalah skrin yang menguruskan templat yang terpasang di Joomla! seperti penetapan templat lalai, mengemaskini dan ubahsuai templat, membuat duplikasi, dan memadamkan templat [A]. Di skrin ini juga senarai segala templat yang dipasang di Joomla! boleh dilihat [B]. 49 Pusat Teknologi Maklumat, UTHM

50 A B Rajah 45 Paparan Pengurus Language Skrin Pengurus Bahasa atau Language ini akan membantu dalam menguruskan bahasa yang akan digunakan di laman web. Bahasa baru boleh dipasangan [A] dan diuruskan mengikut kesesuaian pengguna [B]. Pusat Teknologi Maklumat, UTHM 50

51 Membina Laman Web Menggunakan Joomla! 4.0 Menggunakan Joomla! Beberapa perkara perlu diketahui dalam membolehkan pengguna mempelajari bagaimana menggunakan Joomla! dengan baik. Diantara perkara tersebut adalah Templat, Kategori, Artikel, Menu dan Modul. Lihat Jadual 4.1. Jadual 4.1 Topik Berkaitan Joomla! Tajuk Penerangan Templat Templat mengawal susunatur sesebuah laman web. Ia mengintegrasi isi kandungan laman web iaitu artikel-artikel yang dibina, modul-modul yang menjadi rangka laman web dan bagaimana ia dipaparkan kepada pelawat laman web tersebut. Kategori Setiap laman web yang dibangunkan dengan menggunakan Joomla! mempunyai cara bagi memaparkan dan menyimpan isi kandungan dengan teratur. Cara yang paling mudah adalah dengan penggunaan kategori dan sub-kategori dan Joomla! memberikan pelbagai cara penggunaan kategori mengikut setiap komponen didalamnya. Artikel Artikel atau isi kandungan merupakan asas sesebuah laman web. Menu Menu pula adalah sistem navigasi sesebuah laman web dan susunatur yang baik membudahkan pelawat mencari isi kandungan laman web dengan cepat dan efisien. Modul Setiap paparan laman web Joomla! adalah pada asasnya suatu fitur yang dipanggil Modul Joomla!. Susunaturnya dikawal oleh Templat dan ia boleh diolah mengikut kehendak pembina laman web dalam mempersembahkan sebuah laman web yang teratur dan menarik. Diantara modul yang biasa disebuah laman web adalah seperti Modul Log masuk, Modul Carian, Modul Banner, Modul Menu, Modul Berita Terkini dan pelbagai modul lagi. 51 Pusat Teknologi Maklumat, UTHM

52 4.1 Templat Templat merupakan pengawal susunatur sebuah laman web yang menggunakan Joomla!. Ia diuruskan oleh komponen Joomla! yang dipanggil pengurus templat atau Template Manager. A B C D E F G Rajah 46 Contoh Templat Web Joomla! Rajah 46 menunjukkan contoh modul didalam susunatur sebuah templat seperti Modul Tajuk atau Title [A], Modul Carian [B], Modul Menu [C], Modul Banner [D], Modul Tepi Kanan atau Side [E], Modul Artikel Utama [F] dan Modul Log Masuk [G]. Pusat Teknologi Maklumat, UTHM 52

53 Membina Laman Web Menggunakan Joomla! Kenapa Templat Joomla! adalah suatu aplikasi yang memudahkan pengguna didalam pelbagai cara dan salah satunya adalah dengan penggunaan templat dalam menguruskan susunatur laman web. Menggunakan templat memudahkan pentadbir laman web disamping memberikan nilai estetik dan membuatkan laman web lebih menarik. Ia juga bertujuan agar setiap komponen, modul dan plugins boleh diletak dan dialih pada bila-bila masa mengikut susunatur sesebuah templat. Membina laman web memerlukan perancangan terperinci seperti dimana Menu perlu diletak, apa Font yang sesuai untuk digunakan, apakah stail susunan artikel dan sebagainya. Jika membina laman web secara tradisi setiap laman yang dibina perlu dibuat satu persatu, namun dengan menggunakan Joomla!, komponen templat memudahkan membina laman web yang sekata dan tetap mengikut satu templat bagi semua halaman di laman web tersebut. Secara amnya dengan penggunaan templat, pentadbir dan pengurus laman web akan boleh menumpukan kepada pengisian isi kandungan laman web dan tidak asyik terbelenggu oleh rekabentuk laman web sahaja. Joomla! mempunyai templat yang datang semasa instalasi, iaitu bagi laman pentadbir templat dengan nama ISIS dan Harthor, manakala templat bagi laman web adalah Protostar dan Beez 3. Rajah 46 menunjukkan penggunakan templat laman web Protostar. Jadual 4.2 Ciri-ciri Utama Templat Ciri-ciri Penerangan Susunatur Memberikan susunatur konsisten sebuah laman web. Skema Warna Memberikan skema warna yang piawai. Imej dan Efek Imej Banner, efek Menu mudah dikawal. Font Font yang sama keseluruhan web. Kesesuaian Pelayar Web Web yang berlainan boleh diselaraskan dengan mudah. 53 Pusat Teknologi Maklumat, UTHM

54 4.1.2 Menguruskan Templat Pengurus Templat atau Template Manager adalah tempat bagi menguruskan templat bagi tujuan konfigurasi atau menukar dari satu templat kepada yang lain. Ia boleh dicapai dengan membuat log masuk kepada laman pentadbir dan mengakses menu Template Manager. A Rajah 47 Akses Template Manager Joomla! Jika menu bagi Template Manager Rajah 47 [A] tidak dapat dilihat ada kemungkinan pengguna bukan seorang Super Administrator. Rajah 48 pula menunjukkan skrin Pengurus Templat atau Template Manager dan ia menyenaraikan semua templat yang telah dipasang. Pusat Teknologi Maklumat, UTHM 54

55 Membina Laman Web Menggunakan Joomla! A B Rajah 48 Skrin Pengurus Templat Joomla! Butang-butang operasi [A] adalah bagi menetapkan templat semasa, mengemaskini templat, membuat duplikasi dan memadam templat berkenaan.templat semasa yang digunakan adalah dengan melihat tanda bintang [B] ditanda pada templat berkenaan. Walaupun templat semasa atau default perlu ditetapkan, pengguna boleh menetapkan pada bila-bila masa agar Menu tertentu menggunakan templat tertentu dengan memilih templat tersebut dan menekan butang Edit dan menetapkan menu yang mana perlu menggunakan templat tersebut. Sebagai contoh, templat semasa adalah Protostar tetapi pengguna menetapkan artikel About Us menggunakan templat Beez3, maka di tab Menu Assignment ia boleh ditetapkan. Lihat Rajah Pusat Teknologi Maklumat, UTHM

56 Rajah 49 Skrin Kemaskini Style Templat Memasang Templat Pemasangan templat boleh dilakukan dengan menggunakan Extension Manager yang juga adalah tempat dimana komponen-komponen lain Joomla! dipasang. Lihat Rajah 50. Pusat Teknologi Maklumat, UTHM 56

57 Membina Laman Web Menggunakan Joomla! A Rajah 50 Skrin Pengurusan Extension Melalui Skrin Pengurus Extension pengguna boleh memasang pelbagai komponen Joomla! seperti Templat, Plugins, Komponen-komponen khas Joomla!, Pakej Bahasa dan juga Pakej Upgrade bagi Joomla! dalam proses naik versi Joomla!. Ada 3 cara yang boleh digunakan dalam penggunaan Pengurus Extensions : i. Muatnaik Pakej Fail ii. Memasang dari Direktori di dalam pelayan iii. Memasang dari laman web lain Opsyen i) adalah yang paling mudah kerana pengguna tidak perlu untuk membuat tetapan atau konfigurasi tertentu. Pengguna hanya perlu memilih pakej yang ingin dipasang daripada komputer peribadi pengguna dan kemudian menekan butang Upload File and Install. Lihat Rajah Pusat Teknologi Maklumat, UTHM

58 A B Rajah 51 Skrin Pemasagan Komponen dan Extensions Pusat Teknologi Maklumat, UTHM 58

59 Membina Laman Web Menggunakan Joomla! 4.2 Pengurusan Artikel Artikel atau isi kandungan merupakan perkara asas didalam membina sebuah laman web dan Joomla! memudahkan operasi berkaitan dengan pengurusan isi kandungan kerana ia mempunyai fungsi dalaman pengurusan dokumen yang tidak memerlukan ia dipasang dimana-mana cukup hanya dengan menggunakan pelayar internet sahaja seperti Microsoft Internet Explorer, Google Chrome atau Mozilla Firefox. A B Rajah 52 Skrin Pengurusan Isi Kandungan Bagi membina artikel, pengguna perlu membina kategori bagi artikel tersebut terlebih dahulu bagi memudahkan pencarian kembali dikemudian hari dan juga agar penyimpanan artikel lebih teratur dan sistematik. Rajah 53 menunjukkan bahawa artikel dengan tajuk Intro, Visi & Misi dan Carta Organisasi perlu diletak dibawah kategori yang dinamakan Mengenai Kami. Oleh yang demikian, kategori perlu dibina terlebih dahulu sebelum sesebuah artikel ditulis. Lihat Rajah Pusat Teknologi Maklumat, UTHM

60 4.2.1 Membina Kategori Bagi membina kategori yang betul dan teratur gambaran keseluruhan bagi kesemua artikel perlu dibuat sebagaimana yang ditunjukkan pada Rajah 53 dibawah. Rajah 53 Contoh Isi Kandungan Pusat Teknologi Maklumat, UTHM 60

61 Membina Laman Web Menggunakan Joomla! A B Rajah 54 Contoh Pengurus Kategori Artikel Membina Artikel Artikel boleh dibina dengan mengakses skrin pengurus artikel dan disini operasi berkaitan dengan artikel boleh dibuat. 61 Pusat Teknologi Maklumat, UTHM

62 A D B C Rajah 55 Contoh Pengurus Artikel Rajah 55 di atas menunjukkan Skrin Pengurus Artikel yang membolehkan operasi seperti membina artikel, mengemaskini, menerbitkan artikel bagi paparan pelawat, membuat nyahterbit, menjadikan sesuatu artikel sebagai artikel muka depan dan sebagainya [A]. Bahagian [B] pula menunjukkan senarai artikel yang telah ditulis dan boleh diuruskan kembali dengan menekan tetikus kepada tajuk artikel [C] tersebut. Bagi membina artikel baru pengguna perlu menekan butang New [D] dan skrin sebagaimana Rajah 56 akan dipaparkan. Pusat Teknologi Maklumat, UTHM 62

63 Membina Laman Web Menggunakan Joomla! Dalam membina artikel baru, beberapa perkara penting diperlukan seperti Tajuk Artikel [A], Isi Kandungan Artikel [B], Kategori [C], Terbit atau tidak [D], Papar Muka Depan [E], Tahap Paparan [F], Operasi Artikel [G] dan Opsyen lain [H]. G A C H B D E F Rajah 56 Membina Artikel Baru Apabila telah selesai menulis artikel tersebut, tekan butang Save untuk menyimpan, Save & Close untuk menyimpan dan keluar dari skrin ini, Save & New bagi menyimpan dan membuka skrin baru bagi menulis artikel lain atau Cancel jika tidak ingin untuk menyimpan artikel. 63 Pusat Teknologi Maklumat, UTHM

64 4.3 Pengurusan Menu Setelah berjaya membina artikel, penggunaan menu yang betul akan membantu memaparkan artikel tersebut untuk mudah dicari dan dibaca oleh pelawat laman web. Menu adalah diuruskan oleh Pengurus Menu atau Menu Manager. Lihat Rajah 57. A Rajah 57 Akses Pengurus Menu Rajah 58 menunjukkan carta alir didalam pembinaan sesuatu menu. Pengguna perlu membina Modul Menu di skrin Pengurus Menu atau Menu Manager : Menus terlebih dahulu kemudian perlu memasukkan item-item di Menu Manager : Menu Items. Dan kemudian perlu menetapkan kedudukan atau letak atur menu tersebut di laman web menggunakan Pengurus Modul atau Modul Manager. Pusat Teknologi Maklumat, UTHM 64

65 Membina Laman Web Menggunakan Joomla! Rajah 58 Carta Alir Pembinaan Menu Membina Menu Rajah 59 menunjukkan Skrin Pengurus Menu yang memaparkan senarai menu [A] yang telah dibina dan segala operasi seperti membina menu baru, memadam menu, mengemaskini menu dan membina semula struktur menu di laman web [B]. Bagi membina menu baru, pengguna perlu menekan Butang New iaitu membina modul menu tersebut terlebih dahulu. Skrin paparan pembinaan modul menu sebagaimana Rajah 60 boleh dilihat. 65 Pusat Teknologi Maklumat, UTHM

66 B A Rajah 59 Skrin Pengurus Menu Rajah 60 Skrin Tambah Menu Pusat Teknologi Maklumat, UTHM 66

67 Membina Laman Web Menggunakan Joomla! Setelah proses menambah menu dibuat sebagaimana Rajah 60, jika kembali ke skrin Pengurus Menu maka boleh dilihat menu tersebut tersenarai sebagaimana Rajah 61 [B] di bawah. A B Rajah 61 Skrin Pengurus Menu Apabila tajuk Main Menu Rajah 61 [A] di atas ditekan menggunakan tetikus, skrin akan memaparkan item-item yang terdapat didalam Main Menu. Menu Items merupakan kesemua menu yang akan dipaparkan di laman web mengikut lokasi modul yang telah ditetapkan. Sebagaimana Rajah 62, bahagian [A] merupakan operasi bagi menambah, memadam, mengubahsuai dan menerbit item bagi menu tersebut. Manakala bahagian [B] pula menyenaraikan item-item bagi menu dan memberi penerangan berkenaan status penerbitan, tajuk item, bahasa bagi item, tahap akses, nombor id dan juga susunan item samada menaik atau menurun. Susunan ini boleh diperbetulkan mengikut kehendak dengan menggunakan operasi di bahagian [C]. 67 Pusat Teknologi Maklumat, UTHM

68 A C B Rajah 62 Skrin Menu Items Bagi Main Menu Menambah Item Menu Item bagi setiap modul menu boleh dibuat pada skrin Pengurus Item Menu, sebagai contoh boleh dilihat dengan membuat kemaskini kepada modul Menu Bawah dalam Rajah 61 [B]. Sila tekan butang New pada Skrin Menu Items bagi Menu Bawah sebagaimana Rajah 63. Paparan Rajah 64 pula memaparkan skrin penambahan menu baru bagi Menu Bawah. Pusat Teknologi Maklumat, UTHM 68

69 Membina Laman Web Menggunakan Joomla! A Rajah 63 Skrin Menu Items Bagi Menu Bawah Rajah 64 Skrin New Menu Item Bagi Menu Bawah 69 Pusat Teknologi Maklumat, UTHM

70 Jenis Item Artikel bagi Menu Menu bagi paparan jenis artikel memberikan pelbagai opsyen bagaimana artikel itu akan dipaparkan. Rajah 65 menunjukkan jenis item manakala Rajah 66 merupakan contoh menu bagi article dengan jenis Category Blog. Rajah 65 Skrin New Menu Item Bagi Menu Bawah Pusat Teknologi Maklumat, UTHM 70

71 Membina Laman Web Menggunakan Joomla! Rajah 66 Contoh Skrin Menu Item Jenis Category Blog 71 Pusat Teknologi Maklumat, UTHM

72 4.4 Pengurusan Modul Modul merupakan antara komponen Joomla! yang paling penting dalam membina laman web yang menarik. Ia berkait rapat dengan penggunaan templat kerana ia memaparkan perkara seperti Menu, Log Masuk, Artikel-artikel dan pelbagai perkara lagi. Bagi membolehkan modul Joomla! ini digunakan dengan baik, pengguna atau pentadbir laman web perlu mengetahui dengan betul lokasi di mana modul tersebut perlu diletak dan salah satu cara paling mudah adalah dengan mengaktifkan prebiu bagi lokasi modul dengan mengakses opsyen di Pengurus Template. Lihat Rajah 67. A Rajah 67 Template Manager Options Setelah mengaktifkan status tersebut kepada Enabled seperti Rajah 67 [A], lokasi modul boleh dilihat dengan menggunakan alamat web seperti iaitu menambah kod?tp=1 pada akhir laman web tersebut. Pusat Teknologi Maklumat, UTHM 72

73 Membina Laman Web Menggunakan Joomla! A C B Rajah 68 Lokasi Modul Setelah mengetahui kedudukan modul di templat, maka dengan mudah untuk mengubah susun atur modul pada bila-bila masa yang dikehendaki. Sebagai contoh jika ingin memindahkan lokasi sedia ada Modul Log Masuk pada lokasi terkini Position-7 di Rajah 68 [B] kepada Position-8 [C], maka pengguna yang menjadi pentadbir perlu membuka Pengurus Modul atau Module Manager sebagaimana Rajah 69 [A] dan mencari Modul Log Masuk sebagaimana Rajah 70 [A] dan kemudian menukarkan Position modul tersebut kepada yang baru sebagaimana Rajah 71 [A]. 73 Pusat Teknologi Maklumat, UTHM

74 A Rajah 69 Skrin Menu Module Manager A B Rajah 70 Skrin Pengurus Modul Pusat Teknologi Maklumat, UTHM 74

75 Membina Laman Web Menggunakan Joomla! A Rajah 71 Skrin Pengurus Modul Setelah posisi bagi modul tersebut ditukar kepada yang baru, jika laman web dilihat semula, Modul Log Masuk sekarang akan bertukar ke posisi baru iaitu Position-8 disebelah kiri. Lihat Rajah Pusat Teknologi Maklumat, UTHM

76 A Rajah 72 Skrin Template Preview Perkara yang sama boleh dilakukan ke atas setiap modul didalam Joomla!. Ini memberikan kuasa bagi pengguna dalam mentadbir sesebuah laman web dengan lebih mudah dan menjadikan laman web tersebut lebih menarik dan tidak terkongkong kepada satu paparan yang statik sahaja. Pusat Teknologi Maklumat, UTHM 76

77 Membina Laman Web Menggunakan Joomla! 5.0 Penutup Joomla! memudahkan pengguna yang telah diberikan tugas sebagai penadbir dalam menguruskan sebuah laman web tanpa perlu mengetahui dengan mendalam segala askpek teknikal dalam membangunkan laman web. Skrin pentadbiran Joomla! mempunyai fungsi yang sama sebagaimana membina dan menerbitkan sebuah majalah. Setiap pengguna yang menjadi ahli jawatankuasa pengurusan sesebuah lama wen boleh diberikan tugas bagi mentadbir mengikut tahap seperti Pengarang, Pengolah, Penerbit dan sebagainya mengikut apa yang ditentukan oleh jawatankuasa tersebut. Oleh yang demikian, jika ahli jawatankuasa tersebut menjalankan tugas dengan baik, laman web tersebut akan sentiasa penuh dengan berita terkini dan menjadi tarikan bagi pelawat untuk kembali bertandang melihat laman web tersebut dengan lebih kerap. 77 Pusat Teknologi Maklumat, UTHM

78 6.0 Indeks Add New Article, 33 Article Manager, 33 Artikel, 51 A Language Manager, 33 log masuk, 31, 54 L Category Blog, 69, 70 Category Manager, 33 Checking Joomla!, 34 Database Type, 27 C D E Extension Manager, 45, 56 File Browser, 34 F G Global Configuration, 33 Host Name, 27 Install Extension, 34 H I J Media Manager, 33 Menu, 51 Menu Bawah, 67 Menu Items, 63 Menu Manager, 33 Menus, 2, 40, 41, 42, 63 Modul, 51 Module Manager, 33 Muatnaik Pakej Fail, 57 M P Pangkalan data, 24 Pengurus Artikel, 61 Pengurus Modules, 47 Pengurus Templat, 49, 54, 55 phpmyadmin, 11, 23, 24 Sampel Data, 28 Skrin Panel Kawalan, 32 S T Templat, 2, 51, 52, 53, 54, 55, 56, 57 Template Manager, 33, 45, 52, 54, 71 U JCE Editor, 34, 44 jumla, 7 Kategori, 51 K User Manager, 33 W WAMP, 2, 9, 10, 15, 16, 17 Pusat Teknologi Maklumat, UTHM 78