Tutorial Pakej Webserver XAMPP oleh rudinshah

XAMPP – Pakej Webserver

Disclaimer:
Maklumat yang ditunjukkan adalah untuk tujuan perkongsian ilmu sahaja. Penulis tidak boleh
dipertanggungjawabkan atas sebarang masalah yang dihadapi oleh pembaca yang mengikut
langkah-langkah yang ditunjukkan dalam ebook ini. Bahasa yang digunakan adalah
santai(percakapan harian) untuk memudahkan pemahaman. Penulis tidak bermaksud langsung
untuk memperlekehkan Bahasa Melayu.

Tutorial ini dihasilkan menggunakan Perisian Sumber Terbuka OpenOffice.org

Affortable Web Hosting | Daftar Domain CO.CC 1

Tutorial Pakej Webserver XAMPP oleh rudinshah

Perhatian!!!
Tutorial ini adalah kesinambungan daripada dua tutorial Setting Domain dan Webhosting
Percuma & Tutorial Setting Perisian FTP. Oleh itu, sila baca tutorial yang berkenaan terlebih
dahulu untuk lebih pemahaman. Kalau boleh faham la. Hohoho..
Dapatkan tutorial terdahulu di sini, http://rudinshah.co.cc/tutorial/

Assalamualaikum & Salam Sejahtera wahai pembaca ebook nih :D

Pendahuluan yang ringkas sahaja

– Web Server adalah Web Hosting. Jangan pening kepala dengan dua terma ni. Yang korang
kene tau ialah, ianya berfungsi untuk menyimpan segala data-data mengenai laman web
korang. Ia akan menyimpan fail, teks, gambar, dan segala kandungan dalam laman
web korang supaya boleh dilawati oleh orang ramai. Syarikat yang sediakan
perkhidmatan web hosting biasanya dipanggil Web Hosting Provider.
– Local Webserver adalah err... Nak senang faham, ianya ialah webserver yang kita pasang
di pc kita sendiri. Bagi sesetengah organisasi, mereka ada local webserver yang di pasang
kat server diorang(pc dengan spec server) yang boleh diakses melalui intranet untuk
kegunaan dalaman. Untuk tujuan pembelajaran ni, kita install XAMPP kat pc kita untuk
belajar programming(html, php, mysql), setup blog, database MySQL, dll. Biasanya aku
sebut localhost jer. Contoh: Kita buat website http://localhost/web/cubaan.html pastu kita
upload ke web hosting kita, 000Webhost kat http://rudinshah.co.cc/web/cubaan.html .
Kita boleh expect yang kedua-duanya akan display benda yang sama.
– XAMPP adalah pakej web server yang mengandungi Apache HTTP Server, MySQL
database , server site scripting language PHP, dan Perl programming language. Tak payah
pening pasal ni..

Jenis-jenis web server

Terdapat dua jenis web server iaitu berasaskan Winbows(Windows Server 2003, Windows Server
2008, etc) dan berasaskan *nix/Linux. Untuk web server yang berasaskan GNU/Linux(biasanya
orang sebut linux), kebiasaanya penyedia web hosting kat luar sana akan guna Red Hat atau
CentOS.

Biasanya kat Web Server GNU/Linux diorang guna Apache HTTP Server. Kalo kat windows pulak..
em.. entah. Aku tak ingat dah. Lantak la kan. Ada aku kesah? Hahahaha..

Affortable Web Hosting | Daftar Domain CO.CC 2

Tutorial Pakej Webserver XAMPP oleh rudinshah

Untuk kita tau webhosting tu Linux-based atau Windos-based, kita tengok pada extension fail yang
digunakan.
- Kalau fail tu guna php(order.php), kita boleh kata web hosting dia adalah Linux-based.
- Kalau guna asp(order.asp), kita boleh kata dia guna windos-based.
- Kalau fail tu guna html(order.html), kita boleh kata dia guna linux-based sebab web hosting yang
linux-based lebih murah berbanding windos-based.
- Kalau guna do(order.do), errr... ntah la, x penting sangat utk korang tau buat masa ni. Jangan
pening-pening pasal ni.

Komponen XAMPP yang kita nak guna

* Definasi yang aku bagi memang x tetap. Hanya untuk senang korang(nubie) paham je. Kalau nak
tau lebih lanjut, korang Google la sendiri. Untuk tutorial ni, apa yang aku bgtau tu pun dah cukup
dah.

Apache (Apache HTTP Server)

- Nama penuhnya adalah Apache HTTP Server tapi biasanya orang akan panggil Apache je. Apache
adalah perisian webserver yang mana kita guna untuk hostkan website kita. Menggunakan
Apache, kita boleh serve website kita untuk orang lain tengok. Fail-fail yang kita simpan kat
webserver juga boleh berhubung dengan perisian database seperti MySQL, SQLite, etc
menggunakan PHP, Perl, etc. History

MySQL Database
- MySQL Database adalah Pangkalan Data yang menyimpan data-data sistem yang kita
bangunkan(sumber). Menggunakan Server Site Scripting language, kita boleh simpan data-data ke
dalam database MySQL untuk tujuan penyimpanan data atau untuk digunakan atas tujuan lain.
Ambik contoh borang langganan online(Contoh). Bila kita nak beli barang secara online, kita kene
isi borang, maklumat yang kita isi akan disimpan dalam database. Menggunakan database(aplikasi
online), kita eliminate penggunaan fail/folder yang biasanye berlambak kat ofis.

PHP(PHP: Hypertext Preprocessor)

- PHP adalah Server Site Scripting Language yang membolehkan website kita berhubung
dengan database. Ambik contoh website form kat atas tu,
www.statistics.gov.my/portal/eservices/order.php, dia guna fail php iaitu order.php untuk
menyimpan maklumat langganan ke database.

phpMyAdmin
- phpMyAdmin adalah suatu aplikasi yang dibuat dengan bahasa pemrograman PHP yang ditujukan
untuk pengelolaan basis data MySQL melalui Internet(sumber). Menggunakan phpMyAdmin akan
memudahkan kita untuk melakukan kerja-kerja yang berkaitan dengan database MySQL.

XAMPP Control Panel

- Memudahkan kita untuk start atau stop webserver bila-bila diperlukan.

Affortable Web Hosting | Daftar Domain CO.CC 3

Tutorial Pakej Webserver XAMPP oleh rudinshah

Download XAMPP

– Pergi ke website rasmi xampp iaitu, http://www.apachefriends.org/en/xampp.html

– Untuk setup pada OS Winbows, klik pada link XAMPP for Windows

Affortable Web Hosting | Daftar Domain CO.CC 4

Tutorial Pakej Webserver XAMPP oleh rudinshah

– Berikut adalah serba sedikit berkenaan XAMPP

– Kepada pengguna Winbows Vista(Masa buat tutorial ni aku guna Vista. Huhuh) mungkin
korang nak baca pasal Vista Note atau FAQ – Vista problems tu. Kalau nak baca la. Kalau
taknak, korang abaikan je. Ikut je ape yang aku buat dalam ebook ni.

– Versi terkini XAMPP(pada masa penulis download) adalah 1.7.3

– Versi Apache, 2.2.14, MySQL 5.1.41, PHP 5.3.1 dan phpMyAdmin 3.2.4
– Perl, FileZilla FTP Server dan mercury Mail transport System tu korang x yah tau pun takpe.
Tapi kalo korang nak isi jugak otak korang dengan knowledge tu, korang baca la sendiri.
– Berkenaan dengan FileZilla FTP Server tu... Sebelum ni kita dah setting FileZilla Client,
itu je yang korang patut ambik tau untuk ikut tutorial ni. Kalau korang ada soalan pasal
FileZilla FTP Server, jangan tanya aku. Sila tanya pada encik Google.

Affortable Web Hosting | Daftar Domain CO.CC 5

Tutorial Pakej Webserver XAMPP oleh rudinshah

– XAMPP jugak korang boleh dapatkan melalui link kat, http://portableapps.com/apps

– Gi kat development, klik link XAMPP tu.

– Klik pada Download XAMPP Lite.

– Kita hanya akan guna XAMPP Lite sahaja. Kita tak perlukan benda-benda lain yang tak
penting. Pada versi Lite, apa yang kita nak semua dah ada.

Affortable Web Hosting | Daftar Domain CO.CC 6

Tutorial Pakej Webserver XAMPP oleh rudinshah

– Download fail EXE sebab failnya lebih kecik daripada ZIP. Juga sebab lepas extract, dia
akan mintak kita setting xampp terus. Kalau korang download fail ZIP, Pandai-pandai
korang la kan..

– Lepas download, korang akan ada fail macam kat bawah ni

Affortable Web Hosting | Daftar Domain CO.CC 7

Tutorial Pakej Webserver XAMPP oleh rudinshah

Install XAMPP

– Doubleclick pada fail xampplite-win32-1.7.3.exe tu.

– Kat Vista, popup macam kat bawah ni akan keluar, klik je pada butang Run tu.

– Lepas tu pilih tempat nak install. Untuk tutorial ni penulis install xampp kat drive D penulis.
Oleh kerana yang kita install adalah XAMPP versi Lite, maka kat drive D kita akan ada
folder bernama xampplite.

Affortable Web Hosting | Daftar Domain CO.CC 8

Tutorial Pakej Webserver XAMPP oleh rudinshah

Setting XAMPP

– Lepas install XAMPP, dia akan tanya kita beberapa soalan yang kita perlu jawab dengan
betul..
– Soalan-soalan ni akan keluar kat command prompt punya windows.

Soalan 1

– Soalan ni sebenarnye kurang penting. Tapi korang pilih la 'y' untuk memudahkan korang
start/stop webserver nanti.
– Ia akan buat link ke XAMPP Control Panel kat desktop dan menu XAMPP kat startmenu.
Tengok la sendiri apa yang ada kat startmenu tu ye..

Soalan 2

– Ini penting!. Taip 'y'. Biar dia check folder xampp yang kita install tu sendiri.

Affortable Web Hosting | Daftar Domain CO.CC 9

Tutorial Pakej Webserver XAMPP oleh rudinshah

Soalan 3

– Ini pun penting!!!...

– Baca NOTE yang dia bagi tu. Dia bagi 2 pilihan.
– Pilihan 1 – Kalau korang memang keje sebagai web programmer, korang bolehlah pilih
untuk letak 'y'. Kalau pilih yang ini, kita boleh setkan untuk webserver kita run di
background. Maknanya, kita setkan dia sebagai service, kemudian webserver kita akan run
secara automatik tiap kali kita On pc kita.
– Tapi kalau korang cuma nak belajar-belajar buat website, aku x rekemen la. Sebab setiap
service yang run akan makan resource pc kita(CPU & RAM). So, lebih baik kita run
webserver hanya pada masa kita perlukan sahaja. Tapi kita still boleh disablekan service tu
kat XAMPP Control Panel. Sat lagi aku bagitau.
– Pilihan 2 – Kalau korang nak buat webserver tu portable, boleh dibawa guna
pendrive/portable harddrive dan boleh run direct dari pendrive. Taipkan 'n' pada pilihan tu.
Tapi kalau pilih ni, korang tak boleh la guna service tu. Ini juga adalah pilihan penulis
sebab service tu x penting pun.. :D
– Lepas tu dia suruh kita tekan kekunci [Enter] pada keyboard. <Return> tu sama jugak
dengan [Enter].

Affortable Web Hosting | Daftar Domain CO.CC 10

Tutorial Pakej Webserver XAMPP oleh rudinshah

– Pastu dia bagitau yang dia dah setkan timezone kat fail setting php.ini dan my.ini kepada
UTC(Coordinated Universal Time ).
– Maknanya dia tak set kepada timezone kita(Asia/Luala Lumpur).
– Tak penting sangat untuk kita setkan benda ni masa baru-baru belajar programming.
– Kalau nak set jugak, untuk PHP → cari dalam folder xampplite\php\php.ini baris ke 1013.
Untuk MySQL pulak → xampplite\mysql\bin\my.ini baris ke 43.
– Tapi macam aku kata, setting ni x penting sangat untuk permulaan ni. Kalo korang salah
setting, pandai-pandai la kan... Setting ni penting kalau korang hostkan website korang kat
web hosting luar negara. Tapi... depend pada online sistem/website korang jugak la kan.

Soalan 4

– Korang ada pilihan nak buat apa. Daripada 1 – 5. Boleh je pilih 1 tapi aku pilih exit.
– Kalau korang tengok pada pilihan no 2 tu, dia detect sendiri kat mana kita install xampp tadi
iaitu kat drive d.

Jangan konfius dengan xampp & xampplite. XAMPP Lite tu

cuma versi Lite je. Aku akan tetap guna perkataan xampp untuk
tutorial ni.

Affortable Web Hosting | Daftar Domain CO.CC 11

Tutorial Pakej Webserver XAMPP oleh rudinshah

Run XAMPP.

– Disebabkan tadi aku pilih exit, aku akan klik pada shortcut kat desktop untuk buka XAMPP
Control Panel.

– Kat atas tu gambar Control Panel XAMPP kita. Aku akan bagitau yang penting je. Yang
lain-lain tu kalau korang nak tau, korang explore la sendiri.
– Svc(kotak hijau) tu adalah untuk kita setkan Apache dan MySQL sebagai service. Inilah
yang kita kena buat pilihan kat Soalan 3 tu tadi. Tapi sebab kita pilih 'n', kita tak boleh la
untuk jadikan service (tak penting pun).
– Untuk run Apache dan MySQL, klik pada butang Start. Biarkan sampai kat sebelahnya nanti
akan keluar perkataan 'running'. Kat kotak bawah tu jugak akan bagitau Apache started dan
MySQL started.
– Kalau kita klik pada butang Exit, bermakna kita tutup XAMPP Control Panel sahaja. Apache
dan MySQL tetap akan running.

Affortable Web Hosting | Daftar Domain CO.CC 12

Tutorial Pakej Webserver XAMPP oleh rudinshah

– Gambar kat atas tu menunjukkan yang Apache dan MySQL tengah running.
– Untuk test betul atau tak webserver kita tengah running, taipkan http://localhost/ kat web
browser kita. Kalau macam gambar kat bawah tu yang keluar, maknanya webserver kita
berfungsi dengan baik. :D

Affortable Web Hosting | Daftar Domain CO.CC 13

Tutorial Pakej Webserver XAMPP oleh rudinshah

– Klik pada link English dan paparan macam kat bawah tu akan keluar.

– Korang boleh la kalo nak test kat menu Demo tu. Test la apa-apa yang patut. Heheh..
– Boleh jugak kalo nak check Status, Security, etc. Klik je tiap satu link tu untuk tau benda-
benda tu pasal apa.

Affortable Web Hosting | Daftar Domain CO.CC 14

Tutorial Pakej Webserver XAMPP oleh rudinshah

PHPMyAdmin

– Aku akan cover pasal ni dalam tutorial akan datang.. InsyaAllah..

Affortable Web Hosting | Daftar Domain CO.CC 15

Tutorial Pakej Webserver XAMPP oleh rudinshah

Folder XAMPP(xampplite)

– Sekarang kita tengok-tengok sikit folder xampplite yang kita dah install tadi. Sekadar
reminder, aku install xampp kat drive D.
– Ini kandungan folder xampplite tu

A. apache – Folder Webserver Apache

B. htdocs – Folder kat mana kita letak semua fail-fail website kita.
C. mysql – Folder database MySQL Fail my.ini ada dalam ni.
D. php – Folder PHP. Fail php.ini ada dalam ni.
E. phpMyAdmin – Folder kat mana letaknya phpMyAdmin.
F. xampp-control.exe – fail XAMPP Control Panel. Bila kita klik pada shortcut kat desktop tu, fail
ni la yang dia buka.

Semua fail website mestilah diletakkan dalam folder htdocs!!!...

Affortable Web Hosting | Daftar Domain CO.CC 16

Tutorial Pakej Webserver XAMPP oleh rudinshah

Percubaan Pertama

– Dalam folder htdocs asal ada dua fail dan satu folder xampp seperti dibawah.

– Kita buat satu folder baru untuk test, namakan folder tu testing.

– Buka folder testing tu dan buat satu fail kosong dengan extension .html → index.html.

Affortable Web Hosting | Daftar Domain CO.CC 17

Tutorial Pakej Webserver XAMPP oleh rudinshah

– Buka fail index.html tu guna text editor, Dalam tutorial ni, aku guna Notepad++.
– Taipkan macam kat bawah tu dan Save.
– Aku tak nak sentuh pasal coding dulu buat masa ni. Sampai masanya nanti baru aku
terangkan sikit (jer).

– Buka web browser dan taipkan http://localhost/testing/ kat address bar.

– Sepatutnya outputnya adalah seperti gambar kat bawah tu.

Affortable Web Hosting | Daftar Domain CO.CC 18

Tutorial Pakej Webserver XAMPP oleh rudinshah

– Korang boleh jugak taipkan http://localhost/testing/index.html dan hasilnya sama macam

kat atas tu jugak

• Dalam setiap folder/direktori website, fail defaultnya adalah samada index.html ataupun
index.php.
• Sebab tu dalam contoh kat atas, kita boleh hanya taipkan direktori sahaja, testing/ tanpa
testing/index.html.
• Kalau ada dua fail index dalam satu folder iaitu index.html dan index.php, bergantung pada
setting apache, webserver akan pilih salah satu untuk jadi fail default. Untuk webserver yang
kita install ni, index.php akan jadi fail default.
• Tak payah pening pasal fail default tu. Yang korang kene faham, kalau cuma ada satu je
fail index korang boleh untuk x payah taipkan nama failnya kat web browser.
• Untuk fail selain index.html atau index.php, korang kene taipkan nama fail sekali pada url.
Contoh yang mudah adalah link untuk download ebook tutorial ni.

• Lepas ni insyaAllah aku akan buat tutorial pasal install wordpress cara manual. Wordpress
gunakan fail index.php :D
• Aku jugak akan sentuh pasal PHPMyAdmin → buat database untuk wordpress.
InsyaAllah...

Affortable Web Hosting | Daftar Domain CO.CC 19

Tutorial Pakej Webserver XAMPP oleh rudinshah

• Sekarang ni penulis lebih banyak meluangkan masa guna Ubuntu.

• Penulis setelkan tutorial ni pun guna Ubuntu. Kat bawah ni screenshotnye. Hehe..

• Tutorial pas ni penulis akan guna Windows. Cuma untuk benda-benda yang boleh dibuat
guna Ubuntu baru penulis guna ubuntu.

Affortable Web Hosting | Daftar Domain CO.CC 20

Tutorial Pakej Webserver XAMPP oleh rudinshah

Sekian Terima Kasih.. Itu je buat masa ni. Silalah sebar-sebarkan ebook ni ye.

Semoga Bermanfaat..

Kalau ada apa-apa pertanyaan, boleh je contact penulis:

Espresi.com -> rudinshah

Putera.com -> dans kam
Halaqah.net -> dans kam
YM -> rudinshah

ps: Kat opis xleh guna YM, jadi... Korang boleh la add penulis kat url ni,
http://www.facebook.com/kingdans Gambar profil aku selalunya gambar cartoon. Wahahaha...

http://rudinshah.co.cc/tutorial

Affortable Web Hosting | Daftar Domain CO.CC 21