[Tutorial] Membina Laman Web (Berasaskan CMS Php/MySQL)

PENGENALAN

Salam.
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 JOOMLA
Joomla 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.



PERSEDIAAN
Sediakan 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 XAMPP
1. Selepas download, simpan di desktop dan klik 2 kali fail xampp 1.7.1
2. Welcome: klik Next
3. Destination folder: c:\xampp | next
4. Guna default setting: klik Install, tunggu hingga selesai. | finish.
5. Start xampp | Yes
6. Klik Start Apache dan MySql (klik unblock jika perlu)





Tutup tetingkap Xampp


UJI LOCALHOST
1. Buka IE/FireFox dan taip http://localhost <enter>
2. Klik English
3. Bila dah masuk ke laman Xampp, klik phpMyAdmin untuk uji DB

4. Tutup browser.

Selesai pemasangan Xampp dan bersambung pemasangan Joomla.



Download Video Pemasangan Xampp & Joomla (swf)

MEMASANG JOOMLA 1.5.15 DI LOCALHOST

1. 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\htdocs
4. Kemudian paste fail yang dicopy tadi ke dalam folder c:\xampp\htdocs\joomla
5. 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: Next
8. Pre-installation Check: Next
9. License: Next
10. Database Configuration: Untuk memasukkan maklumat ini buka IE dan taip;
http://localhost/phpmyadmin/


Buat satu database nama mydb.



Klik Home | Privileges


Klik Add new user


Masukkan maklumat user


Klik Check all | Go


Anda telah berjaya membuat satu database mydb dan user mydb



Kembali kepada Joomla dan masukkan maklumat database tadi ke dalam form. Klik Next




FTP layer: Next




Masukkan maklumat site, klik install sample data dan next





Buka 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 > Login


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

MENUKAR TEMPLATE JOOMLA

1. 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 Panel

5. Dalam Admin Panel, klik menu Extensions > Install/Uninstall
6. Package File: klik browse dan cari fail template tadi > klik upload file & install. Install Template Success

7. Klik Extensions > Template manager.
8. Klik radio button EastOrange > klik ikon Default
9. Klik Preview untuk melihat perubahan pada laman web setelah ditukar template baru.

Selesai.

****************************************
Jika ada masalah setakat nie, boleh reply dan bincang.
OK. Thanks.

MEMAHAMI SUSUNATUR TEMPLATE DI FRONTEND

Setiap 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 : Left


9. Anda boleh tukar position main menu ke kanan dengan memlih 'right'
10. Klik Apply dan lihat perubahan main menu di laman web

Dengan mengetahui nama dan kedudukan posisi, anda dengan mudah dapat memasukkan apa saja elemen joomla mengikut posisi pilihan anda sendiri.

Sekian.

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

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

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.

*****************************************

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 unpublish


3. Klik Content > Article manager. Klik ikon NEW



4. Taip artikel anda dan akhir sekali klik Reply. Preview laman web.
Klik Yes pada Front Page.

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)
- Video

Cara-Cara Membuat Menu:
1. Login ke admin control panel

2. Klik Menu Manager


3. Klik menu item menu utama



4. Klik Home



5. Tukar Title menjadi Laman Utama



6. Untuk buang semua menu sediada kecuali Laman Utama
Pilih semua menu kecuali Laman Utama dan klik Trash



7. Membuat Sections. Klik Content > Section Manager



8. Klik New.



9. Masukkan Title yang sesuai dengan menu (Komputer). Kemudian Save
Ulang 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 Menu
Klik New



12. Klik Article > Section Blog Layout



13. Masukkan maklumat seperti berikt;
Title: Komputer
Section: Komputer
Lain2 set default
Klik Save

Ulang proses no 12 & 13 untuk membat menu Laman Web, Multimedia & Galeri


14. Contoh menu yang dihasilkan.


Bersambung ke cara membuat sub-menu di bawah.

MEMBUAT SUB-MENU

1. Seperti biasa login ke admin panel

2.
















Selesai.

satu tutorial yang cukup baik !! 10 Star to U..

Sambung lagi...

Ya.. sambung lagi.

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 Manager
2. New > Title: taip Umum
3. Save

1. Klik Content > Category Manager
2. New > Title: taip Umum
3. Pilih Section: Umum
4. Save.

Membuat Artikel
1. Klik Content > Article Manager.
2. Pilih Section: Umum & Category: Umum
3. Klik New


4. Simpan artikel: Klik Save


Link menu Komputer ke artikel Pengenalan Komputer

1. Dalam Control Panel, klik Menu > Menu Utama
2. Klik Komputer > Parameters (Basic) > Section > Umum
3. Save dan preview laman web.

Menambah Imej/Gambar Ke Dalam Artikel

Untuk menambah imej ke dalam artikel, anda perlu upload gambar2 komputer yang berkaitan ke dalam satu folder imej.

1. Dalam Control Panel klik Global Configuration > System
2. Media Setting: Path to Image Folder: images/stories
3. Tukar ke images sahaja
4. Jadi, Media Setting: Path to Image Folder: images
5. Save dan Refresh.

Membuat Folder dan Upload Gambar
1. Dalam Control Panel, klik Media Manager atau Site > Media Manager
2. 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.

Wow.. menarik dan padat. Bagus nie untuk rujukan orang macam aku yang tak reti nak buat CMS nanti. Thanks a lot.

JOOMLA EXTENSIONS

Apa 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. Components
2. Modules
3. Plugins/Mambots
4. Languages

Dengan 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: PLUGIN
Plugin 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: Download
3. Simpan fail download di Desktop.

Memasang Plugin

1. Login ke Control Panel.
2. Klik Extensions > Install/Uninstall
3. 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 Manager
2. Klik AllVideo > Enable > Save.




Menambah AllVideo Plugin ke Dalam Artikel Komputer

Katalah anda ingin menambah klik video IBM Blue Gene, World's Fastest Supercomputer;
.https://www.youtube.com/watch?v=qm_CN1-c1r4

1. Copy klip ID qm_CN1-c1r4
2. 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.

JOOMLA EXTENSIONS - Modules

Modules 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 & Uninstall
5. Klik Browse dan cari fail jam
6. Klik Upload & Install

Mengaktifkan Module Jam

1. Klik Extension > Module Manager
2. Klik World Time Clock
3. Buat beberapa setting.

1) Tukar tajuk yang sesuai
2) Enable: Yes
3) Position: Right



4) Tukar warna jika perlu
5) Pilih Regional
6) Save atau Reply

4. Simpan dan preview.

JOOMLA EXTENSIONS - Components

Components 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 Terpilih

Component yang dipilih ialah PhocaGallery (Galeri Foto)- [ Laman Web ]
1. Download PhocaGallery- [Download]

2. Simpan fail di Desktop.

3. Klik Extension > Install/Uninstall

4. Pilih fail phocagallery dan klik Upload & Install.

5. Setelah berjaya install, dalam skrin phocagallery klik butang Install.

6. Klik Category > New


7. Masukkan maklumat seperti rajah di bawah;

1) Title: Komputer
2) Klik Folder untuk membuat folder 'komputer'. Semua gambar komputer akan diletakkan di sini.

8. Buat satu folder

1) Taip komputer dan klik Create folder.

9. Dalam skrin phocagallery, klik Image

1) Masukkan Title dan pilih category
2) Klik Image



Klik 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 PhocaGallery

1. Dalam Admin Control Panel, klik Menus > Menu Utama
2. Klik sub-menu Foto Galleri.





3. Akhir sekali klik Save.
4. Preview laman web dan cuba klik menu Foto Galeri.

Selesai.

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 Header



1. Login ke control panel
2. Klik Extensions > Template manager.
3. Klik template yang sedang digunakan (default)
4. Klik Edit CSS
5. Klik template.css, klik Edit

Fail 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 Imej
1. Dengan menggunakan Windows Explorer buka folder images
Lokasi: C:\xampp\htdocs\joomla\templates\eastorange\images
EastOrange 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

KEPERLUAN

1. PC Windows XP Pro
2. Install Xampp Server
3. Install WordPress

Nota:
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 WORDPRESS

1. 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\htdocs
4. Buka Internet Explorer dan taip alamat htto://localhost/wordpress
5. Klik create configuration file
6. Klik Let's Go
7. WordPress Database:
a. buka satu lagi IE Tab dan taip alamat http://localhost/phpmyadmin
b. Klik Privileges
c. Klik Add new user
d. Masukkan maklumat Login Information
i. Username: wordpress
ii. Host: localhost
iii.Password: 123456

e. Database for user: klik Create database with same name and grant all privileges
f. Global privileges: klik Check All
h. Klik Go

8. Buka semula WordPress Database dan masukkan maklumat database seperti di atas.
9. Klik Run to Install
10. Information needed: Masukkan Blog Title dan setrerusnya.
11. Klik Install WordPress
12. 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/wordpress




Alamat dashboard/control panel;
http://localhost/wordpress/wp-admin/index.php



Selesai pemasangan WordPress.


[ Download Video Pemasangan WordPress Di Localhost ]


*********************************************