Kurniawan Blogs

Just share about knowladge

  • Full Screen
  • Wide Screen
  • Narrow Screen
  • Increase font size
  • Default font size
  • Decrease font size

Modul Instalasi Web Server XAMPP

langkah pertama:

 1.   Double klik xampp-win32-1.7.3.exe

 2.   Tentukan dengan mengetik nama drive atau folder yang akan digunakan untuk menempatkan file-file XAMPP pada Destination folder atau dengan mengklik Browse pada contoh di bawah Destination folder saya biarkan default yaitu di drive C:\ selanjutnya klik Install

mypict/tutorxampp/xampp2.jpg

 3.   Proses extract XAMPP ke drive C dimulai, Tunggu beberapa saat…

mypict/tutorxampp/xampp3.jpg

 4.   Wokey proses extract finish, selanjutnya muncul jendela Command Prompt seperti di bawah, pilih / tekan tombol y jika ingin membuat shortcuts di start menu atau di desktop

mypict/tutorxampp/xampp4.jpg

 5.   Selanjutnya tekan kembali y jika path (letak folder XAMPP) telah benar seperti yang telah di tentukan sebelumnya

mypict/tutorxampp/xampp5.jpg

 6.   Lanjut…
Tekan n jika menginginkan setiap kali login windows XAMPP secara auto dijalankan setelah mengaktifkan service, jika anda menginstall XAMPP pada USB flash disk pilih y

mypict/tutorxampp/xampp6.jpg

 7.   Sepertinya XAMPP siap untuk digunakan. Tekan Enter

mypict/tutorxampp/xampp7.jpg

 8.   Selanjutnya ada permintaan untuk konfigurasi zona waktu. Kali ini kita abaikan saja kecuali anda cukup faham dengan php.ini dan my.ini atau time zone tidak sesuai dengan zona waktu daerah kita. Tekan Enter untuk melanjutkan kembali

mypict/tutorxampp/xampp8.jpg

 9.   Selesai…
Langsung saja tekan 1 untuk menjalankan XAMPP Control Panel

mypict/tutorxampp/xampp9.jpg

 10.   Woke XAMPP Control Panel telah muncul di desktop kanan bawah. Sekarang tutup Command Prompt tekan X dan Enter atau langsung saja close menggunakan mouse

mypict/tutorxampp/xampp10.jpg

 11.   Woke, selanjutnya klik start Apache dan MySql sehingga indikasinya Running seperti gambar di bawah

mypict/tutorxampp/xampp11.jpg

 12.   Nah, sampai disini webserver telah berjalan dengan baik. Selanjutnya adalah melakukan uji coba terhadap webserver yang barusan diinstall. Caranya jalankan aplikasi browser Mozilla Firefox dan ketik pada address bar localhost. Seharusnya akan muncul tampilan berikut:

mypict/tutorxampp/xampp12.jpg

2.       Mengenal Infrastruk XAMPP

Sebelum kita melangkah lebih jauh pada instalasi dokumen – dokumen web alangkah baiknya sedikit banyak kita mengenal Infrastruktur XAMPP supaya kita dapat melakukan trouble shoter.

Berikut ini adalah gambar File dan folder yang terdapat di dalam XAMPP:

Saya akan menjelaskan sedikit tentang fungsi dan kegunaan dari beberapa folder dan file yang terdapat di dalam XAMPP. Yah sedikit saja karena saya tahunya cuman sedikit hehe, mohon maklum.

Folder Apache : merupakan aplikasi webserver yang berfungsi untuk melayani permintaan html melalui protocol http
Folder FileZillaFTP : Folder aplikasi FTP server, berfungsi melayani permintaan upload/download file dari client (wsftp)
htdocs : Nah folder yang satu ini nantinya  akan sering kita buka karena disinilah letak dokumen – dokumen web yang kita buat
MercuryMail : Untuk Email
MySql : Folder Database yang diperlukan untuk membangun CMS
php : Folder aplikasi untuk menjalankan document web PHP melalui protoko http
phpMyAdmin : Tools/utility atau alat bantu untuk memanag database MySql
setup_xampp.bat : Merupakan file untuk melakukan install xampp kembali jika diperlukan seperti disaat terjadinya error waktu pindah drive/media penyimpanan lain.
xampp-control.exe : File ini mewakili file2 lain seperti xampp-control.bat, apache_star.bat dan lain-lain yang berfungsi sebagai control start  atau stop terhadap apache atau MySql

 Oiya ada beberapa file penting lain yang belum di sebut di atas diantaranya adalah:

1.       httpd.conf yang terdapat di folder Apache. File ini merupakan file configurasi webserver seperti untuk menentukan path atau nama folder file-file web, menentukan domain dan sub domain atau menentukan port protocol http.

2.       my.ini merupakan file konfigurasi database yang dapat digunakan untuk menentukan besaran file database yang dapat di upload, merubah port default  MySql

3.       php.ini merupakan file konfigurasi php. Dengan file ini kita dapat menyembunyikan error script php dan juga kita dapat mengendalikan/menentukan resource memori yang di butuhkan php 

3.       Uji Coba Webserver

Setelah instalasi XAMPP selesai kita bisa melakukan uji coba webserver tersebut sepert yang telah dilakukan sebelumnya. Pastikan Apache dan MySql running

Caranya:

a.       Test1

 1.   Klik 2 kali xampp-control.exe yang terletak di c:\xampp\

mypict/tutorxampp/3.1.jpg

Apabila muncul popup seperti di bawah, berarti xampp-control telah jalan
mypict/tutorxampp/3.1a.jpg

Dan xampp-control sudah aktif pada try icon seperti gambar di bawah, klik dua kali saja try icon xampp tersebut
mypict/tutorxampp/3.1b.jpg

 2.   Pastikan Apache dan MySql running seperti gambar di bawah, apabila belum running silahkan klik tombol start

mypict/tutorxampp/xampp11.jpg

 3.   Ketik http://localhost pada start run atau pada address bar di firefox

mypict/tutorxampp/3.3.jpgmypict/tutorxampp/3.3b.jpg

 4.   Setelah di enter seharusnya yang tampil seperti berikut:

mypict/tutorxampp/xampp12.jpg

b.       Test 2 – mengganti file Index.php dengan Index.html

Pada dasarnya homepage XAMPP seperti gambar sebelumnya adalah sebuah halaman dokumen web yang bernama index.php atau index.htm atau index.html, atau index.asp yang diletakkan di folder C:\xampp\htdocs

mypict/tutorxampp/3.b0.jpg

 1.   Woke sekarang kita coba rename file index.php menjadi index1111.php seperti gambar dibawah

mypict/tutorxampp/3.b1.jpg

 2.   Selanjutnya ketik pada address bar http://localhost

 3.   Maka hasilnya seperti gambar di bawah ini:

mypict/tutorxampp/3.b3.jpg

Logo dan tulisan XAMPP tidak muncul, kenapa ?
Karena Logo dan tulisan XAMPP ditampilkan oleh index.php sedangkan tulisan It works! merupakan tampilan yang diahsilkan dari document index.html

 4.   Woke kali ini rename file index.html menjadi indexxx.html

mypict/tutorxampp/3.b4.jpg

 5.   Ketik kembali http://localhost pada address bar firefox

 6.   Dan perhatikan hasilnya pada gambar berikut:

mypict/tutorxampp/3.b6.jpg

Firefox tidak lagi menampilkan It work! Ataupun logo dan tulisan XAMPP akan tetapi yang ditampilkan adalah daftar file dan folder yang terdapat pada htdocs. Kenapa ? ini dikarenakan system apache tidak menemukan satupun file index atau file-file yang ditunjuk oleh file configurasi apache httpd.conf seperti pada gambar berikut

mypict/tutorxampp/3.b6b.jpg

Nah selanjutnya anda dapat mencoba untuk merename file indexxx.html menjadi default.htm, home.htm  atau yang lain seperti daftar nama file yang terlihat pada gambar di atas

4.       Mengganti folder htdocs menjadi www

Tidak harus dan selamanya folder yang digunakan untuk menempatkan file-file dokumen web adalah htdocs. Kita dapat merubahnya sesuai dengan kehendak, boleh home atau nama yg lain. Untuk kali ini htdocs akan saya rubah menjadi www

 1.   Buka folder C:\xampp\apache\conf gunakan editor kesayangan kalian, boleh menggunakan notepad. Tapi untuk kali ini saya menggunakan notepad++, silahkan buka file httpd.conf

 2.   cari text "C:/xampp/htdocs" saya menemukannya pada baris 188 dan 215, ganti ke dua htdocs tersebut menjadi www lalu simpan perubahan yang telah dilakukan (CTRL + S)

mypict/tutorxampp/4.2.jpg

 3.   Selanjutnya, buka folder C:\XAMPP, cari folder htdocs dan rename menjadi www

mypict/tutorxampp/4.3.jpg

 4.   Langkah terakhir, stop apache. Sehingga apache tidak lagi running

mypict/tutorxampp/4.4.jpg

 5.   klik tombol start sehingga apache running kembali . Langkah ini bisa dikatakan melakukan restart apache

mypict/tutorxampp/4.5.jpg

5.       Memindah folder www ke drive lain

Woke, folder www yang sebelumnya adalah htdocs terletak dalam folder C:\XAMPP\ Sekarang kita akan mencoba untuk memindahnya ke drive lain

 1.   Saya telah memindah folder www ke drive D:\

mypict/tutorxampp/5.1.jpg

 2.   Silahkan di coba ketik http://localhost pada address bar firefox. Hasilnya insyaAllah seperti berikut : Access forbidden! Error 403

mypict/tutorxampp/5.2.jpg

 3.   Woke, sekarang kita buka kembali file httpd.conf yang terletak pada C:\xampp\apache\conf cari kembali kata-kata "C:/xampp/www" rubah menjadi "D:/www" dan simpan

mypict/tutorxampp/5.3.jpg

 4.   Restart apache (CTRL+klik untuk menuju cara restart apache)

 5.   Silahkan di coba ketik kembali http://localhost pada address bar firefox. Hasilnya seharusnya tidak lagi menampilkan: Access forbidden! Atau Error 403

Fiuh…, perlahan – lahan saja yang penting tepat. Finish sudah untuk pengenalan XAMPP, lain kali bikin banyak domain atau sub domain dalam satu komputer .

6.       Mengenal MySql dan phpMyAdmin

Mari kita sedikit mengenal tentang MySql dan phpMyAdmin. lagi-lagi sedikit, kenapa tidak sekalian saja porsi yang banyak. Hehe semoga pembaca dapat memaklumi keterbatasan pengetahuan penulis.

Ok lanjut …

MySql adalah aplikasi database yang sangat stabil dan tidak memakan resource memori dengan rakus bayangkan saja saat kita request suatu kata kunci dihalaman google, dengan hitungan kurang dari 1 detik MySql google mampu manampilkan pulahan ribu index.

Untuk kemanan data, MySql menggunakan autentikasi berupa User dan Password namun secara default user root yang memiliki kewenangan tinggi untuk memanage database tersebut tidak menggunakan password alias blank.

Ok buka firefox dan…

 1.   Ketik pada address bar firefox http://localhost/phpMyAdmin

mypict/tutorxampp/6.1.jpg

Frame sebelah kiri adalah daftar nama data base yang secara default sudah ada 5 database: cdcol, information_schema, mysql, phpmyadmin dan test

Sedangkan frame sebelah kanan terdiri beberapa tabulasi database, sql, status,variables, charsets, engines, privileges processes export dan import

·         Tab Database, tabulasi yang didalamnya berkenaan dengan operasi database seperti membuat atau menghapus dabase

·         Tab Privileges, untuk memanaj user dan kewenangannya terhadap suatu database

·         Export dan import untuk backup dan restore database

 2.   Membuat sebuah database baru, ketik pada text box Create new database misalnya cms kemudian klik create

mypict/tutorxampp/6.2.jpg

 3.   Hasilnya seperti berikut

mypict/tutorxampp/6.3.jpg

 4.   Apabila kita klik icon home atau logo phpMyAdmin, akan terlihat ada tambahan sebuah database cms di frame sebelah kiri seperti gambar berikut:

mypict/tutorxampp/6.4.jpg

7.       Membuat domain dan sub domain di localhost

Modul dalam format ms. word
http://kurni.smanda.sch.id/download/doc_download/93-modul-web-server-xampp.html
 Download


 

 ===============================================================
 
MODUL CMS DI BAHAS PADA JUDUL YG BERBEDA

===============================================================

 

 

C.      Instalasi Content Management System (CMS)

1.       Mengenal CMS

Content Management System (CMS) merupakan kumpulan file-file / dokumen web yang sudah di desain sedemikian rupa sehingga kita tidak perlu lagi bersusah payah belajar bahasa pemograman php atau html untuk membuat dokumen web. Sehingga bisa dikatakan membuat web dengan cara instan dengan memanfaatkan dokumen web yang siap pakai seperti CMS

Nah, bagi seseorang yang super sibuk dan tidak ada kesempatan untuk belajar banyak untuk membangun web Blog adalah pilihan yang tepat. Oleh karena itu tidak heran kalau kebanyakan orang memilih blogspot atau wordpress sebagai tempat mengunggah content mereka. Yah, cukup mengunggah konten tidak perlu mempelajari bahasa pemrograman web.

Di sini kita akan menggunakan joomla atau wordpress secara offline

Bagaimanakah caranya ?

Cukup mudah, extract saja joomla atau wordpress di folder htdocs XAMPP…

Tidak faham ?

 

===============

CMS DIBAHAS PADA MODUL YG BERBEDA

Add comment

Security code
Refresh

Latest Comment

RSS
You are here: Desin Web Mulok Modul Instalasi Web Server XAMPP