OngBok_1 2 Report post Posted November 24, 2009 PENGENALANSalam.Ada beberapa ahli yang tertanya2 bagaimana nak buat laman web dengan cara CMS terutama menggunakan Joomla. Disini saya ambil peluang untuk menurunkan sedikit panduan bagaimana nak bina laman web menggunakan Joomla. Anda boleh membina laman web Joomla di dalam PC anda sendiri sebelum anda membuat di liveserver atau webhosting (berbayar atau percuma).APA ITU JOOMLAJoomla adalah satu Sistem Pengurusan Kandungan atau lebih dikenali dengan Content Management System (CMS). Sistem ini telah dibangunkan oleh Open Source Matters atau (OSM). Sistem ini dibangunkan dengan menggunakan bahasa pengaturcara PHP (Hypertext Preprocessor) dan pengkalan data MySQL. Sistem ini telah dilancarkan dengan menggunakan lesen dari GNU/GPL(Free Software). Sekarang dengan jumlah komponen dan modul tambahan hampir mencecah 10,000. Ini memudahkan kepada semua pengguna.Sistem ini telah diedarkan secara percuma, dan ia menjadi salah satu sebab mengapa sistem ini menjadi pilihan kepada pihak individu atau korporat. Pada awalnya sistem ini lebih digunakan oleh pihak individu sahaja untuk membangunkan laman peribadi. Sekarang khususnya di Malaysia terdapat beberapa Syarikat kecil dan besar telah menggunakan sistem Joomla untuk membangunkan laman untuk syarikat mereka.PERSEDIAANSediakan beberapa perkara berikut;1. Sebuah PC OS WinXP/Vista (tutorial ini guna WinXP SP3)2. Pasang pakej local webserver - Xampp 1.7.1 [Download di sini] 3. Pasang Joomla 1.5.15 [ Download di sini]MEMASANG XAMPP1. Selepas download, simpan di desktop dan klik 2 kali fail xampp 1.7.12. Welcome: klik Next3. Destination folder: c:\xampp | next4. Guna default setting: klik Install, tunggu hingga selesai. | finish.5. Start xampp | Yes6. Klik Start Apache dan MySql (klik unblock jika perlu)Tutup tetingkap XamppUJI LOCALHOST1. Buka IE/FireFox dan taip http://localhost <enter>2. Klik English3. Bila dah masuk ke laman Xampp, klik phpMyAdmin untuk uji DB4. Tutup browser.Selesai pemasangan Xampp dan bersambung pemasangan Joomla.Download Video Pemasangan Xampp & Joomla (swf) Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted November 24, 2009 MEMASANG JOOMLA 1.5.15 DI LOCALHOST1. Selepas download dan simpan fail zip joomla di desktop, extract fail.2. Buka folder dan copy semua fail/folder joomla.3. Buat satu folder joomla di dalam c:\xampp\htdocs4. Kemudian paste fail yang dicopy tadi ke dalam folder c:\xampp\htdocs\joomla5. Sekarang dalam folder joomla terdapat fail lengkap seperti berikut;6. Setelah selesai copy, buka IE dan taip alamat http://localhost/joomla <enter>7. Choose Language: Next8. Pre-installation Check: Next9. License: Next10. Database Configuration: Untuk memasukkan maklumat ini buka IE dan taip; http://localhost/phpmyadmin/Buat satu database nama mydb.Klik Home | PrivilegesKlik Add new userMasukkan maklumat userKlik Check all | GoAnda telah berjaya membuat satu database mydb dan user mydbKembali kepada Joomla dan masukkan maklumat database tadi ke dalam form. Klik NextFTP layer: NextMasukkan maklumat site, klik install sample data dan nextBuka folder joomla dan delete folder installation.Klik site untuk melihat laman web joomla anda.Inilah laman web joomla yang menggunakan default template.Rupabentuk dan skema laman web boleh diubah dengan memasang template lain.Paparan ini juga dipanggil FrontEnd.Untuk mengurus laman web Joomla, anda perlu login ke BackEnd atau Admin Panel.Klik Administrator.Taip username dan paaword > LoginIni adalah admin panel atau dipanggil BackEnd.Kawasan ini digunakan untuk mengurus laman web secara total.Preview digunakan untuk melihat laman web (frontend)Selesai pemasangan Joomla. Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted November 24, 2009 MENUKAR TEMPLATE JOOMLA1. Download terlebih dahulu template yang anda suka. [Download Template]2. Dalam tutorial ini, saya gunakan template EastOrange. [Download]3. Download template EastOrange dan simpan di desktop. Fail ni dalam bentuk zip dan tak perlu extract.4. Buka site Joomla ( http://localhost/joomla ) > Klik Administrator untuk login ke Admin Panel5. Dalam Admin Panel, klik menu Extensions > Install/Uninstall6. Package File: klik browse dan cari fail template tadi > klik upload file & install. Install Template Success7. Klik Extensions > Template manager.8. Klik radio button EastOrange > klik ikon Default9. Klik Preview untuk melihat perubahan pada laman web setelah ditukar template baru.Selesai.****************************************Jika ada masalah setakat nie, boleh reply dan bincang.OK. Thanks. Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted November 24, 2009 MEMAHAMI SUSUNATUR TEMPLATE DI FRONTENDSetiap template yang digunakan untuk memaparkan laman web (FrontEnd) berbeza antara satu dengan lain bukan sahaja dari segi TEMA tapi juga kedudukan dan nama POSISI. Jika kita ambil cotoh template EastOrange, laman web akan kelihatan seperti berikut;Mengenal nama dan kedudukan posisi setiap template adalah sangat penting untuk menguruskan sesebuah laman web Joomla. Untuk mengetahui dengan lebih terperinci lagi, sila login ke admin control panel.1. Klik Adminstrator, masukkan username & password.2. Klik Extensions > Template manager.3. Klik template yang digunakan (EastOrange)4. Klik Preview.5. Perhatikan nama2 posisi yang ditunjukkan secara keseluruhannya.6. Klik menu Site > Control Panel.7. Kita ambil satu contoh. Klik Extensions > Module Manager.8. Klik Main Menu. Perhatikan position : Left9. Anda boleh tukar position main menu ke kanan dengan memlih 'right'10. Klik Apply dan lihat perubahan main menu di laman webDengan mengetahui nama dan kedudukan posisi, anda dengan mudah dapat memasukkan apa saja elemen joomla mengikut posisi pilihan anda sendiri.Sekian. Share this post Link to post Share on other sites
dans kam 39 Report post Posted November 25, 2009 Salam..dah boleh reply ek?..Aku nak bg cadangan skit. Ape kata mane2 tutorial yang ada kat Putera.com ni dibuat jugak dalam versi PDF. Ni forum sementara je, nanti kalo forum betul dah up, hilang gitu je nanti. Rugi wo..Sekadar cadangan... Share this post Link to post Share on other sites
Datuk_Seri 13 Report post Posted November 25, 2009 walaupun forum betul nanti up, forum ni takkan hilang selagi Admin sendiri yang akan tutup.. Jadi jangan risau, segala tutorial masih ada disini walaupun putera betul dah up. Lagi pun dah ada function untuk print.. Pegi dekat atas kanan, klik Actions lepas tu pilih print this page. Kalau ada primo PDF, terus print jadi PDF.. Untuk Mr. Ongbok, tutorial yang sangat berguna... ::icon_biggrin:: Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted November 25, 2009 Hmmm... kalau ada sapa2 yang rajin dan ada masa boleh buat versi PDF. Hanya copy dn paste jer tutorial tu. dah siap nanti boleh bagi link untuk download. tapi tunggu tutorial nie selesai dululah.ok. ::icon_biggrin::*****************************************MENAMBAH ARTIKEL DI MUKA DEPAN (FRONT PAGE)Pada asalnya muka depan laman web seperti dalam gambar di bawah;Untuk menukarnya dengan artikel kita sendiri, login ke admin control panel.1. Klik Front Page Manager.2. Pilih semua artikel > klik unpublish3. Klik Content > Article manager. Klik ikon NEW4. Taip artikel anda dan akhir sekali klik Reply. Preview laman web.Klik Yes pada Front Page. Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted November 26, 2009 MEMBUAT MENU UTAMA (MAIN MENU)Anda perlu tukar menu asal ke menu anda sendiri sesuai dengan isi kandungan laman web. Sebagai contoh menu utama;Menu Utama> Laman Utama> Komputer - Perkakasan (sub-menu Komputer) - Sistem Operasi - Perisian - Sekuriti> Laman Web - Asas HTML (sub-menu Laman Web) - Asas PHP> Multimedia - Grafik (sub-menu Multimedia) - Audio - Video> Galeri - Foto (sub-menu Galeri) - VideoCara-Cara Membuat Menu:1. Login ke admin control panel2. Klik Menu Manager3. Klik menu item menu utama4. Klik Home5. Tukar Title menjadi Laman Utama6. Untuk buang semua menu sediada kecuali Laman UtamaPilih semua menu kecuali Laman Utama dan klik Trash7. Membuat Sections. Klik Content > Section Manager8. Klik New.9. Masukkan Title yang sesuai dengan menu (Komputer). Kemudian SaveUlang proses ini untuk Laman Web, Multimedia & Galeri.10. Empat section telah anda buat.11. Membuat menu dan link ke section.Klik Menu > Menu Utama/Main MenuKlik New12. Klik Article > Section Blog Layout13. Masukkan maklumat seperti berikt;Title: KomputerSection: KomputerLain2 set defaultKlik SaveUlang proses no 12 & 13 untuk membat menu Laman Web, Multimedia & Galeri14. Contoh menu yang dihasilkan.Bersambung ke cara membuat sub-menu di bawah. Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted November 26, 2009 MEMBUAT SUB-MENU1. Seperti biasa login ke admin panel2. Selesai. Share this post Link to post Share on other sites
TJ-Ariff 40 Report post Posted November 26, 2009 satu tutorial yang cukup baik !! 10 Star to U.. ::icon_cheers:: Sambung lagi... Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted November 26, 2009 Ya.. sambung lagi. ::icon_biggrin:: MENAMBAH ISI KANDUNGAN (Teks, Gambar dll)Menambah isi kandungan berkenaan dengan komputer yang dilinkkan dengan menu Komputer. Anda perlu membuat satu lagi Section dan Category UMUM dan link ke menu Komputer. Login ke Control Panel.1. Klik Content > Section Manager2. New > Title: taip Umum3. Save 1. Klik Content > Category Manager2. New > Title: taip Umum3. Pilih Section: Umum4. Save.Membuat Artikel1. Klik Content > Article Manager.2. Pilih Section: Umum & Category: Umum3. Klik New4. Simpan artikel: Klik SaveLink menu Komputer ke artikel Pengenalan Komputer1. Dalam Control Panel, klik Menu > Menu Utama2. Klik Komputer > Parameters (Basic) > Section > Umum3. Save dan preview laman web.Menambah Imej/Gambar Ke Dalam ArtikelUntuk menambah imej ke dalam artikel, anda perlu upload gambar2 komputer yang berkaitan ke dalam satu folder imej. 1. Dalam Control Panel klik Global Configuration > System2. Media Setting: Path to Image Folder: images/stories 3. Tukar ke images sahaja4. Jadi, Media Setting: Path to Image Folder: images 5. Save dan Refresh.Membuat Folder dan Upload Gambar1. Dalam Control Panel, klik Media Manager atau Site > Media Manager2. Buat satu folder komputer & klik Create folder.3. Kemudian klik folder komputer dan Start Upload fail2 komputer ke dalam folder komputer.Memasukkan Imej/Gambar Komputer ke Dalam Artikel.1. Dalam Control Panel, Klik Content > Article Manager dan klik Pengenalan Komputer.2. Browse ke bawah sekali dan klik butang Image. 3. Klik folder komputer dan pilih gambar. 4. Klik butang Insert (sebelah atas)5. Susun kedudukan imej/gambar mengikut kesesuaian.6. Klik Save dan Preview. Share this post Link to post Share on other sites
LanoV 22 Report post Posted November 26, 2009 Wow.. menarik dan padat. Bagus nie untuk rujukan orang macam aku yang tak reti nak buat CMS nanti. Thanks a lot. Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted November 26, 2009 JOOMLA EXTENSIONSApa itu Joomla Extension?Untuk lebih jelas lagi apa itu Extensions, buka laman web rasmi Joomla.http://extensions.joomla.org/Simbol 'C' menunjukkan Components.Simbol 'M' menunjukkan Modules.Simbol 'P' menunjukkan Plugin/Mambots.Simbol 'L' menunjukkan Language.Jadi, extensions dalam Joomla terbahagi kepada 4 iaitu;1. Components2. Modules3. Plugins/Mambots4. LanguagesDengan extensions ini anda boleh menambah beberapa tambahan yang diperlukan dan sesuai dengan laman web supaya laman web lebih menarik, informatif dan profesional.Menggunakan Extensions Terpilih: PLUGINPlugin biasanya digunakan untuk menambah sesuatu elemen seperti video, foto dsb terus ke dalam artikel. Contohnya plugin AllVideo. Dengan AllVideo anda boleh menambah klip video YouTube terus ke dalam artikel.1. Buka laman web http://www.joomlaworks.gr/2. Download AllVideo plugin: Download3. Simpan fail download di Desktop.Memasang Plugin1. Login ke Control Panel.2. Klik Extensions > Install/Uninstall3. Klik Browse & cari fail plugin.4. Klik Upload & Install.5. Klik AllVideo Documentation untuk melihat cara menggunakan plugin ini.Mengaktifkan Plugin.1. Klik Extensions > Plugin Manager2. Klik AllVideo > Enable > Save.Menambah AllVideo Plugin ke Dalam Artikel KomputerKatalah anda ingin menambah klik video IBM Blue Gene, World's Fastest Supercomputer;.http://www.youtube.com/watch?v=qm_CN1-c1r41. Copy klip ID qm_CN1-c1r42. Edit artikel Pengenalan Komputer (menu Content > Article Manager)3. Klik Pengenalan Komputer untuk edit.4. Tambah tag {youtube}ID{/youtube} iaitu {youtube}qm_CN1-c1r4{/youtube}5. Simpan dan preview. Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted November 26, 2009 JOOMLA EXTENSIONS - ModulesModules biasanya diletakkan di posisi kanan, kiri, atas atau bawah laman web. Sebagai contoh modul jam diletakkan di sebelah kanan laman web.1. Download module jam- [Download]2. Simpan di Desktop.3. Login ke Control Panel.4. Extension > Install & Uninstall5. Klik Browse dan cari fail jam6. Klik Upload & InstallMengaktifkan Module Jam1. Klik Extension > Module Manager2. Klik World Time Clock3. Buat beberapa setting.1) Tukar tajuk yang sesuai2) Enable: Yes3) Position: Right4) Tukar warna jika perlu5) Pilih Regional6) Save atau Reply4. Simpan dan preview. Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted November 26, 2009 JOOMLA EXTENSIONS - ComponentsComponents biasanya dilinkkan dengan Menu dan ia lebih kompleks dari plugin & modules. Kadang2 di dalam Components terkandung Module dan Plugin. Contoh components seperti Forum, Foto Gallery dsbnya.Menggunakan Component TerpilihComponent yang dipilih ialah PhocaGallery (Galeri Foto)- [ Laman Web ] 1. Download PhocaGallery- [Download]2. Simpan fail di Desktop.3. Klik Extension > Install/Uninstall4. Pilih fail phocagallery dan klik Upload & Install.5. Setelah berjaya install, dalam skrin phocagallery klik butang Install.6. Klik Category > New7. Masukkan maklumat seperti rajah di bawah;1) Title: Komputer2) Klik Folder untuk membuat folder 'komputer'. Semua gambar komputer akan diletakkan di sini.8. Buat satu folder1) Taip komputer dan klik Create folder.9. Dalam skrin phocagallery, klik Image1) Masukkan Title dan pilih category2) Klik ImageKlik folder komputer dan upload gambar2 komputer ke dalam folder komputer.10. Klik gambar dan Save. Ulang proses untuk setiap gambar.Menghubungkan Menu Galeri Foto Dengan PhocaGallery1. Dalam Admin Control Panel, klik Menus > Menu Utama2. Klik sub-menu Foto Galleri.3. Akhir sekali klik Save.4. Preview laman web dan cuba klik menu Foto Galeri.Selesai. Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted November 26, 2009 Meminda Template - Header Header - satu ruang yang paling atas sekali dalam sesebuah laman web. Biasanya header mengandungi imej atau logo. Setiap template Joomla kebanyakkannya diletakkan imej yang tidak sesuai dengan tema laman web dan ia perlu diganti dengan imej yang bersesuaian.Cara-Cara Menukar Header1. Login ke control panel2. Klik Extensions > Template manager.3. Klik template yang sedang digunakan (default)4. Klik Edit CSS5. Klik template.css, klik EditFail css ini bermula dengan /* begin Page */. Scroll ke bawah hingga bertemu line;/* begin Header */div.art-Header-png{ position: absolute; z-index:-2; top: 0; left: 0; width: 980px; height: 150px; background-image: url('../images/Header.png'); background-repeat: no-repeat; background-position: left top;}div.art-Header-jpeg{ position: absolute; z-index:-1; top: 0; left: 0; width: 980px; height: 150px; background-image: url('../images/Header.jpg'); background-repeat: no-repeat; background-position: center center;}/* end Header */Jadi, terdapat dua jenis imej yang digunakan untuk Header iaitu Header.png & Header.jpg yang terletak di dalam folder imej. Kedua2 imej bersaiz 980x150 pixel.Menyemak Fail Imej1. Dengan menggunakan Windows Explorer buka folder imagesLokasi: C:\xampp\htdocs\joomla\templates\eastorange\imagesEastOrange adalah folder template yang digunakan (default)Dari folder images, buka fail Header.jpg & png untuk semakan.Buatkan 1 fail imej baru yang sesuai dan simpan dengan nama Header.jpg (980x150) dan fail Header.png bersaiz sama.Upload dan gantikan kedua2 fail asal dengan fail imej yang anda buat sendiri.Refresh dan Preview laman web. (guna CTRL+F5 untuk refresh laman web)SELESAI Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted November 30, 2009 Beberapa Tips Joomla Share this post Link to post Share on other sites
OngBok_1 2 Report post Posted December 2, 2009 KEPERLUAN1. PC Windows XP Pro2. Install Xampp Server3. Install WordPressNota:1. Cara2 install Xampp boleh boleh rujuk disini.Pastikan Apache & MySql service diaktifkan.2. Download WordPress. [WordPress 2.8.6]3. Simpan fail download di desktop.MEMASANG WORDPRESS1. Extract fail wordpress-2.8.6.zip ke dalam satu folder. (wordpress-2.8.6)2. Buka folder wordpress-2.8.6.3. Copy folder wordpress ke dalam folder c:\xampp\htdocs4. Buka Internet Explorer dan taip alamat htto://localhost/wordpress5. Klik create configuration file6. Klik Let's Go7. WordPress Database:a. buka satu lagi IE Tab dan taip alamat http://localhost/phpmyadminb. Klik Privilegesc. Klik Add new userd. Masukkan maklumat Login Information i. Username: wordpress ii. Host: localhost iii.Password: 123456e. Database for user: klik Create database with same name and grant all privilegesf. Global privileges: klik Check Allh. Klik Go8. Buka semula WordPress Database dan masukkan maklumat database seperti di atas.9. Klik Run to Install10. Information needed: Masukkan Blog Title dan setrerusnya.11. Klik Install WordPress12. Success! Catit username dan password yang diberi. (admin:625bT!C)0Ev9)13. Klik Log In dan masukkan username dan password.14. Dalam skrin Dashboard: Klik Yes, Take me to my profile page untuk tukar password.15. Klik Update Profile kembali ke Dashboard atau control panel.Alamat laman web:http://localhost/wordpressAlamat dashboard/control panel;http://localhost/wordpress/wp-admin/index.phpSelesai pemasangan WordPress.[ Download Video Pemasangan WordPress Di Localhost ]********************************************* Share this post Link to post Share on other sites