A.4 Membangun Server dengan XAMPP

Pada tahap ini akan dijelaskan cara membangun perangkat percobaan untuk menjalankan WordPress di komputer lokal ( Windows ) menggunakan XAMPP. Silakan ikuti tahap di buku ini, namun ada beberapa fasilitas yang dibatasi dan akan dilanjutkan di tahapan berikutnya.

1. Men-download XAMPP untuk Windows

Untuk mendapatkan XAMPP versi Windows dapat men-download-nya dengan mengakses halaman resmi Apache Friends di http://www.apachefriends.org/index.html
Klik pada tombol sesuai dengan yang diberi panah untuk mulai men-download
Gambar di bawah menandakan proses download sedang berjalan. Dalam buku ini XAMPP yang di-download adalah versi 1.8.3.
Jika download tidak juga berjalan, silakan klik link yang ditunjuk anak panah.

Memo
Saat buku ini dibuat versi yang tersedia adalah versi 1.8.3.

2. Meng-install XAMPP untuk Windows

Jalankan file XAMPP yang telah di-download di langkah sebelumnya. Saat file dijalankan akan muncul jendela Setup dengan pesan “Welcome to the XAMPP Setup Wizard” seperti gambar berikut. Klik tombol “Next” untuk melanjutkan Setup.
Tampilan awal instalasi XAMPP
Gambar berikut adalah jendela pilihan komponen apa saja yang akan ikut di-install.
Silakan pilih komponen apa saja yang akan di-install.

Pilih sesuai kebutuhan misalnya dalam buku ini akan di-install “MySQL” maka beri centang bagian “MySQL” demikian juga yang lainnya. Klik tombol “Next” untuk melanjutkan.
Pada tahap ini adalah menentukan lokasi tempat instalasi XAMPP. Jika lokasi instalasi ingin diubah klik tombol seperti yang ditunjukkan berikut ini maka akan muncul jendela browse. Silakan cari tempat instalasi XAMPP. Selanjutnya klik tombol “Next”.
Klik ikon direktori untuk memilih lokasi instalasi.
Klik tombol “Next” untuk melanjutkan ke langkah selanjutnya.
Klik next untuk melanjutkan
Klik tombol “Next” untuk melanjutkan instalasi.
Klik Next untuk melanjutkan
Proses instalasi XAMPP sedang berlangsung, silakan tunggu sampai selesai. Jika sudah selesai, klik tombol “Next” untuk melanjutkan.
Proses instalasi sedang berlangsung.

Memo
Disarankan lokasinya seperti C:\xampp atau D:\xampp atau di drive lain sesuai keinginan. Pada penginstalan dalam pembuatan buku ini, xampp di-install di C:\xampp.
Jika muncul jendela seperti contoh di atas, itu berarti instalasi telah selesai. Beri tanda centang di pilihan “Do you want to start the Control Panel now ?“ untuk membuka XAMPP Control Panel setelah tombol Finish di klik.
Sebelum mengklik tombol “finish”, silakan centang pada opsi “Do you want to start the Control Panel now?”
Setelah instalasi selesai dan berhasil akan muncul icon di desktop seperti gambar di sebelah kanan, yang berfungsi sebagai shortcut ke XAMPP Control Panel.
Pada desktop muncul shortcut untuk membuka Control Panel XAMPP

3. Membuka XAMPP Control Panel

Klik ganda icon XAMPP yang terdapat di desktop atau silakan gunakan cara membuka aplikasi yang biasa digunakan. Akan tampil jendela aplikasi seperti gambar di bawah ini. Ini merupakan halaman Control Panel XAMPP.

Tampilan Control Panel untuk XAMPP ketika pertama kali dijalankan

Untuk membangun Website dari WordPress sebenarnya hanya membutuhkan module Apache dan MySQL.

4. Mengaktifkan Apache

Untuk mengaktifkan Apache XAMPP di Control Panel, silakan

klik tombol “Start” di baris pertama XAMPP Control Panel untuk mengaktifkan Apache.
Klik tombol “Start” pada bagian yang diberi tanda untuk memulai menjalankan Apache.

Memo
jika di komputer tempat instalasi XAMPP ada aplikasi seperti Skype yang biasanya memakai port yang sama dengan Apache yaitu port 80, maka silakan atur Port Skype ke port yang berbeda.
Saat Apache berjalan maka tampilan XAMPP Control Panel akan sama seperti gambar di bawah.
Warna background untuk label Apache sudah menjadi hijau dan tombol start sudah menjadi tombol stop. Ini menandakan Apache sudah berjalan.

5. Mengaktifkan MySQL

Untuk mengaktifkan module MySQL prosedur yang dilakukan sama seperti mengaktifkan module Apache di tahap sebelumnya.

Klik tombol “Start” pada baris kedua untuk mengaktifkan MySQL.
Klik tombol Start pada tombol yang di lingkari pada gambar.
Jika MySQL sudah berjalan, maka XAMPP Control Panel akan tampil seperti gambar di bawah ini.
Warna background untuk label MySQL sudah menjadi hijau dan tombol start sudah menjadi tombol stop. Ini menandakan MySQL sudah berjalan.

6. Membuka layar manajemen XAMPP untuk Windows

Jika sudah menjalankan MySQL dan Apache maka selanjutnya akan dijelaskan cara membuka layar manajemen XAMPP di browser pada sistem operasi Windows.

Klik tombol “Admin” di sebelah kanan Apache.
Klik tombol “Admin” pada bagian yang dilingkari seperti gambar ini
Maka akan tampil halaman pemilihan bahasa seperti gambar di bawah ini. Silakan memilih bahasa yang akan digunakan di halaman manajemen.
Pilih English untuk menyesuaikan dengan buku
Setelah bahasa dipilih, akan tampil halaman manajemen XAMPP seperti gambar di bawah ini dengan tampilan sesuai dengan bahasa yang dipilih.
Ini adalah tampilan XAMPP dengan bahasa inggris.

7. Menetapkan password untuk MySQL

Pada tahapan ini akan dijelaskan mengenai cara menetapkan password untuk MySQL. Untuk memperkuat keamanan MySQL. Silakan catat Password dan Username yang dimasukkan karena informasi tersebut akan digunakan saat instalasi WordPress.

Klik menu “Security” yang ada di halaman manajemen XAMPP.
Klik menu Security
Halaman Security XAMPP akan seperti gambar di atas. Klik link seperti gambar di bawah ini untuk masuk ke halaman pengaturan Security. http://localhost/security/xamppsecurity.php
Klik link yang dilingkari untuk masuk ke pengaturan keamanan MySQL
Akan tampil halaman untuk menetapkan password seperti gambar di bawah ini.
Isi Form sesuai dengan field masing-masing
1. Untuk username MySQL SuperUser tidak dapat diubah dan akan tetap bernama root. Silakan memasukkan password saja pada tahap ini.
2. Pilih cookie pada pilihan phpMyAdmin Authentification.
3. Setelah selesai memasukkan password klik “Password changing” untuk menyimpan perubahan.
  Sampai tahap ini penetapan password telah selesai. Sesuai dengan pesan yang ditampilkan, silakan restart Apache dan MySQL.
4. Klik tombol “Stop” di bagian Apache dan MySQL untuk restart. Setelah meng-klik tombol “Stop”, maka tombol itu akan berubah menjadi tombol “Start”. SIlakan klik kembali tombol tersebut untuk mengaktifkan kembali MySQL.
  Klik tombol Stop pada tombol yang dilingkari. Setelah selesai, silakan klik kembali tombol Stop yang berubah menjadi tombol Start untuk mengaktifkan ulang MySQL
5. Setelah melakukan restart, masuk kembali ke halaman manajemen XAMPP. Klik menu “Status”, maka selanjutnya akan tampil halaman seperti gambar di bawah ini.
  status XAMPP terlihat sudah aktif kembali

8. Membuat database di MySQL

Pada tahap ini akan dijelaskan cara membuat database di MySQL yang akan digunakan oleh WordPress.

Klik tombol “Admin” di XAMPP Control Panel untuk masuk ke halaman phpMyAdmin atau masuk ke browser, lalu masukkan URL http://localhost/phpmyadmin.
Klik tombol Admin untuk MySQL, atau silakan gunakan browser dan akses langsung http://localhost/phpmyadmin
Maka akan tampil halaman login ke MySQL seperti gambar berikut.
Halaman Login ke MySQL di browser
Berikut ini penjelasan mengenai bagian – bagian dari halaman login phpMyAdmin di browser.
1. Pilih bahasa terlebih dahulu.
2. Masukkan username dan password yang telah diatur sebelumnya.
3. Klik tombol “Go” untuk Log in.
Akan tampil halaman manajemen phpMyAdmin seperti gambar di bawah ini. Ikuti langkah berikut untuk membuat database.
1. Klik menu Database di sudut kiri atas.
  Klik menu Databases pada bagian kiri atas tampilan
2. Masukkan nama database sesuai keinginan (misal : wordpress).
  Masukkan nama database lalu klik tombol “Create”
3. Klik tombol “Create”
Pastikan pesan yang ditampilkan seperti gambar berikut. Database yang dibuat sudah ditambahkan ke daftar databases.
Terlihat database dengan nama wordpress sudah berada dalam daftar database seiring munculnya pesan berhasil menambahkan database

Persiapan database sekarang sudah lengkap. Maka informasi dari database yang dihasilkan adalah sebagai berikut:

Nama Database	wordpress
Username Database	root
Password Database	{password yang di-set}
Host Name Database	localhost

9. Memeriksa konfigurasi mail server

Untuk mengirimkan e-mail dari Contact Form WordPress diperlukan sebuah mail server yang dapat mengirimkan informasi kepada administrator website. Salah satu cara yang dapat digunakan untuk dapat mengirimkan informasi tersebut adalah menggunakan bantuan SMTP server.
Pada contoh buku ini SMTP yang dipakai adalah SMTP server Gmail. Jika sudah memiliki akun Gmail sebelumnya, silakan langsung lanjutkan ke tahap berikutnya. Namun jika tidak, silakan buat akun Gmail terlebih dahulu.
Informasi yang diperlukan untuk mengkonfigurasi SMTP dari Gmail adalah sebagai berikut:

Alamat E-mail (misal : user-e-mail-gmail-anda@gmail.com)
Password E-mail (password e-mail)
Nama Host SMTP Server (untuk Gmail default-nya adalah smtp.gmail.com )
SMTP Port (untuk Gmail default-nya : 465 )
SMTP Authetication (untuk Gmail default-nya : ssl)

Dalam proses konfigurasinya, ada 2 file yang harus dimodifikasi yaitu file php.ini dan file sendmail.ini. Perlu diperhatikan sebaiknya backup kedua file tersebut dengan membuat salinannya terlebih dahulu sebelum memulai memodifikasinya.

10. Modifikasi file php.ini

Untuk memodifikasi file php.ini, silakan masuk ke direktori tempat XAMPP di-install, misalnya:
c:\xampp\php\php.ini
Buka file php.ini menggunakan text editor misalnya Notepad++ seperti yang digunakan di buku ini. Selanjutnya cari [mail function], lalu ubah bagian:

SMTP = localhost
//menjadi SMTP = smtp.gmail.com
smtp_port = 25
//menjadi smtp_port = 465
//port 465 berasal dari port default SMTP yang dipakai oleh Gmail.
;sendmail_path=" \"c:\xampp\sendmail\sendmail.exe" -t"
//menjadi :  sendmail_path="   \"c:\xampp\sendmail\sendmail.exe" -t" 
sendmail_path="\"c:\xampp\mailtodisk.exe
//menjadi : ;sendmail_path="\"c:\xampp\mailtodisk.exe

SMTP = localhost

//menjadi SMTP = smtp.gmail.com

smtp_port = 25

//menjadi smtp_port = 465

//port 465 berasal dari port default SMTP yang dipakai oleh Gmail.

;sendmail_path=" \"c:\xampp\sendmail\sendmail.exe" -t"

//menjadi : sendmail_path=" \"c:\xampp\sendmail\sendmail.exe" -t"

sendmail_path="\"c:\xampp\mailtodisk.exe

//menjadi : ;sendmail_path="\"c:\xampp\mailtodisk.exe

Hasil akhirnya terlihat tanda titik koma (;) dihilangkan dari bagian depan statement.

//(...isi bagian atas...)
[mail function]
; XAMPP: Comment out this if you want to work with an SMTP Server like Mercury
SMTP=smtp.gmail.com
smtp_port=465
//(...isi bagian tengah...)
sendmail_path="\ "C:\xampp\sendmail\
sendmail.exe\" -t " 
//(...isi bagian bawah...)
;sendmail_path="\"c:\xampp\mailtodisk.exe

//(...isi bagian atas...)

[mail function]

; XAMPP: Comment out this if you want to work with an SMTP Server like Mercury

SMTP=smtp.gmail.com

smtp_port=465

//(...isi bagian tengah...)

sendmail_path="\ "C:\xampp\sendmail\

sendmail.exe\" -t "

//(...isi bagian bawah...)

;sendmail_path="\"c:\xampp\mailtodisk.exe

Fungsi dari titik koma (;) tersebut adalah agar statement itu dianggap sebagai komentar. Untuk mengaktifkannya, silakan hilangkan titik koma(;) di depan statement. Selanjutnya simpan perubahan jika semua statement yang dicontohkan sudah dimodifikasi.

11. Modifikasi file sendmail.ini

Pada tahapan ini akan dibahas mengenai beberapa perubahan yang harus dilakukan di file sendmail.ini. Buka file sendmail.ini yang berada di direktori sendmail di XAMPP, misalnya:
c:\xampp\sendmail\sendmail.ini
Setelah itu buka file tersebut menggunakan editor. Ubah beberapa statement di sekitar fungsi [sendmail] seperti berikut ini:

smtp_server=mail.mydomain.com
//menjadi smtp_server=smtp.gmail.com
smtp_port=25
//menjadi smtp_port=465
smtp_ssl=auto
//menjadi smtp_ssl=ssl
auth_username=
//menjadi auth_username=[e-mail Anda]@gmail.com
auth_password=
//menjadi auth_password=[password yang telah diset]
hostname=
//menjadi hostname=smtp.gmail.com

smtp_server=mail.mydomain.com

//menjadi smtp_server=smtp.gmail.com

smtp_port=25

//menjadi smtp_port=465

smtp_ssl=auto

//menjadi smtp_ssl=ssl

auth_username=

//menjadi auth_username=[e-mail Anda]@gmail.com

auth_password=

//menjadi auth_password=[password yang telah diset]

hostname=

//menjadi hostname=smtp.gmail.com

Setelah selesai, silakan simpan file yang telah dimodifikasi sehingga hasil akhirnya menjadi seperti berikut ini:

//( ... isi bagian atas ... )
[sendmail]
//( ... isi bagian tengah ...)
smtp_server=smtp.gmail.com
;smtp port (normally 25)
smtp_port=465
//( ... isi bagian tengah ...)
smtp_ssl=ssl
//( ... isi bagian tengah ...)
auth_username=[e-mail Anda]@gmail.com
auth_password=[password yang telah diset]
//( ... isi bagian tengah ...)
hostname=smtp.gmail.com

//( ... isi bagian atas ... )

[sendmail]

//( ... isi bagian tengah ...)

smtp_server=smtp.gmail.com

;smtp port (normally 25)

smtp_port=465

//( ... isi bagian tengah ...)

smtp_ssl=ssl

//( ... isi bagian tengah ...)

auth_username=[e-mail Anda]@gmail.com

auth_password=[password yang telah diset]

//( ... isi bagian tengah ...)

hostname=smtp.gmail.com

12. Persiapan ketika akan meng-install WordPress

Setelah semua proses konfigurasi terhadap database dan mail server berhasil diselesaikan, langkah selanjutnya adalah melakukan instalasi terhadap WordPress dengan cara yang dapat dilihat di Appendix A1.

URL localhostLocalhost Apache dapat diakses dengan mengetikkan URL http://localhostURL untuk mengakses halaman manajemen XAMPP dapat menggunakan http://localhost/xampp/
Lokasi instalasi WordPress
URL untuk mengakses localhost menggunakan http://localhost/. Sedangkan lokasi instalasinya berada di C:\xampp\htdocs. Untuk instalasi WordPress silakan masuk ke dalam direktori “htdocs”. Jika instalasinya langsung di direktori “htdocs”, URL-nya akan menjadi http://localhost/.
Namun apabila instalasi WordPress berada di bawah direktori “htdocs”, misalnya di dalam direktori “DocumentRoot”, maka URL yang digunakan adalah http://localhost/DocumentRoot

13. Restart Apache

Setelah instalasi WordPress, modifikasi file php.ini dan sendmail.ini selesai, silakan restart Apache seperti me-restart MySQL pada langkah sebelumnya.

Setelah membuka XAMPP Control Panel, klik tombol Stop yang dilingkari seperti pada gambar. Setelah tombol berubah menjadi Start, klik kembali untuk mengaktifkannya lagi.

Untuk memeriksa apakah setting sudah benar atau tidak, silakan masuk ke halaman login, misalnya http://localhost/DocumentRoot/wp-login.php untuk WordPress yang di-install di direktori DocumentRoot. Maka akan tampil halaman login seperti gambar berikut:

Klik link “Lost your Password?”

Klik “Lost your password ?”, maka akan tampil halaman Lost Password.

Masukkan E-mail aktif yang telah digunakan untuk mendaftarkan user sebelumnya.

Masukkan alamat e-mail salah satu user WordPress pada field lost password seperti gambar di sebelah kanan.
Setelah alamat e-mail dimasukkan, silakan cek e-mail yang tadi dikirimi pesan lost password dan cek apakah ada e-mail yang masuk dari WordPress atau tidak. Jika ada, berarti konfigurasi sendmail.ini dan php.ini telah berhasil.

14. Keterbatasan lingkungan localhost

Secara keseluruhan tampilan website yang dibuat di lingkungan localhost memang tidak memiliki perbedaan yang signifikan dibandingkan dengan website yang dibuat di server penyedia layanan hosting, namun sebenarnya terdapat beberapa keterbatasan yang dimiliki oleh website yang berada di localhost sebagai berikut:

Pembatasan pengiriman pesan
Jika pengiriman pesan menggunakan mail server yang tidak dikonfigurasi dengan benar, maka website tidak akan bisa melakukan pengiriman pesan.
Salah satu kasus yang terjadi adalah pada fitur Contact Form di menu “CONTACT US”. Namun dari segi tampilan, ini tidak akan berpengaruh.
Keterbatasan konektifitas dengan media sosial
Ada beberapa fitur dalam website ini yang memerlukan koneksi dengan media sosial tidak dapat dijalankan. Ini disebabkan karena media sosial tidak dapat terkoneksi dengan localhost. Akibatnya fitur yang terhubung dengan media sosial tidak dapat berjalan dengan baik, misalnya pada fitur Facebook Like Button atau OGP.
Kendala dengan Google Analyticator
Setup Google Analytics untuk menganalisis log akses tidak akan dapat diimplementasikan dalam lingkungan localhost. Untuk itu, silakan melewati langkah tersebut karena tidak akan mempengaruhi isi dari website.

A.4 Membangun Server dengan XAMPP

1. Men-download XAMPP untuk Windows

2. Meng-install XAMPP untuk Windows

3. Membuka XAMPP Control Panel

4. Mengaktifkan Apache

5. Mengaktifkan MySQL

6. Membuka layar manajemen XAMPP untuk Windows

7. Menetapkan password untuk MySQL

8. Membuat database di MySQL

9. Memeriksa konfigurasi mail server

10. Modifikasi file php.ini

11. Modifikasi file sendmail.ini

12. Persiapan ketika akan meng-install WordPress

13. Restart Apache

14. Keterbatasan lingkungan localhost

CONTACT US