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
- Gambar di bawah menandakan proses download sedang berjalan. Dalam buku ini XAMPP yang di-download adalah versi 1.8.3.
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.
- Gambar berikut adalah jendela pilihan komponen apa saja yang akan ikut 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 tombol “Next” untuk melanjutkan ke langkah selanjutnya.
- Klik tombol “Next” untuk melanjutkan instalasi.
- Proses instalasi XAMPP sedang berlangsung, silakan tunggu sampai selesai. Jika sudah selesai, klik tombol “Next” untuk melanjutkan.
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.
- Setelah instalasi selesai dan berhasil akan muncul icon di desktop seperti gambar di sebelah kanan, yang berfungsi sebagai shortcut ke XAMPP Control Panel.
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.
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.
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.
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.
- Jika MySQL sudah berjalan, maka XAMPP Control Panel akan tampil seperti gambar di bawah ini.
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.
- Maka akan tampil halaman pemilihan bahasa seperti gambar di bawah ini. Silakan memilih bahasa yang akan digunakan di halaman manajemen.
- Setelah bahasa dipilih, akan tampil halaman manajemen XAMPP seperti gambar di bawah ini dengan tampilan sesuai dengan bahasa yang dipilih.
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.
- 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
- Akan tampil halaman untuk menetapkan password seperti gambar di bawah ini.
- Untuk username MySQL SuperUser tidak dapat diubah dan akan tetap bernama root. Silakan memasukkan password saja pada tahap ini.
- Pilih cookie pada pilihan phpMyAdmin Authentification.
- 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. - 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.
- Setelah melakukan restart, masuk kembali ke halaman manajemen XAMPP. Klik menu “Status”, maka selanjutnya akan tampil halaman seperti gambar di bawah ini.
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.
- Maka akan tampil halaman login ke MySQL seperti gambar berikut.
- Berikut ini penjelasan mengenai bagian – bagian dari halaman login phpMyAdmin di browser.
- Pilih bahasa terlebih dahulu.
- Masukkan username dan password yang telah diatur sebelumnya.
- Klik tombol “Go” untuk Log in.
- Akan tampil halaman manajemen phpMyAdmin seperti gambar di bawah ini. Ikuti langkah berikut untuk membuat database.
- Klik menu Database di sudut kiri atas.
- Masukkan nama database sesuai keinginan (misal : wordpress).
- Klik tombol “Create”
- Pastikan pesan yang ditampilkan seperti gambar berikut. Database yang dibuat sudah ditambahkan ke daftar databases.
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:
1 2 3 4 5 6 7 8 9 |
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.
1 2 3 4 5 6 7 8 9 10 |
//(...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:
1 2 3 4 5 6 7 8 9 10 11 12 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//( ... 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 “Lost your password ?”, maka akan tampil halaman Lost Password.
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.