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

  1. Untuk mendapatkan XAMPP versi Windows dapat men-download-nya dengan mengakses halaman resmi Apache Friends di http://www.apachefriends.org/index.html

    Halaman apache

    Klik pada tombol sesuai dengan yang diberi panah untuk mulai men-download

  2. Gambar di bawah menandakan proses download sedang berjalan. Dalam buku ini XAMPP yang di-download adalah versi 1.8.3.
    Apache sedang didownload (2)

    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

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

    setup xampp 1

    Tampilan awal instalasi XAMPP

  2. Gambar berikut adalah jendela pilihan komponen apa saja yang akan ikut di-install.
    setup xampp 2

    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.

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

    setup xampp tahap ke 3

    Klik ikon direktori untuk memilih lokasi instalasi.

  4. Klik tombol “Next” untuk melanjutkan ke langkah selanjutnya.

    setup xampp tahap ke 4

    Klik next untuk melanjutkan

  5. Klik tombol “Next” untuk melanjutkan instalasi.

    setup xampp tahap ke 5

    Klik Next untuk melanjutkan

  6. Proses instalasi XAMPP sedang berlangsung, silakan tunggu sampai selesai. Jika sudah selesai, klik tombol “Next” untuk melanjutkan.
    setup xampp tahap ke 6

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

    setup xampp tahap ke 7

    Sebelum mengklik tombol “finish”, silakan centang pada opsi “Do you want to start the Control Panel now?”

  8. Setelah instalasi selesai dan berhasil akan muncul icon di desktop seperti gambar di sebelah kanan, yang berfungsi sebagai shortcut ke XAMPP Control Panel.

    setup xampp tahap ke 8 - Shorcut Shown in desktop

    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.

xampp control panel

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

  1. klik tombol “Start” di baris pertama XAMPP Control Panel untuk mengaktifkan Apache.
    xampp control panel - Start 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.
  2. Saat Apache berjalan maka tampilan XAMPP Control Panel akan sama seperti gambar di bawah.

    xampp control panel - Status Apache is running

    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.

  1. Klik tombol “Start” pada baris kedua untuk mengaktifkan MySQL.

    xampp control panel - Starting MySQL

    Klik tombol Start pada tombol yang di lingkari pada gambar.

  2. Jika MySQL sudah berjalan, maka XAMPP Control Panel akan tampil seperti gambar di bawah ini.

    xampp control panel - Status MySQL is running

    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.

  1. Klik tombol “Admin” di sebelah kanan Apache.

    xampp control panel - Apache Administration

    Klik tombol “Admin” pada bagian yang dilingkari seperti gambar ini

  2. Maka akan tampil halaman pemilihan bahasa seperti gambar di bawah ini. Silakan memilih bahasa yang akan digunakan di halaman manajemen.

    xampp control panel - Xampp on Localhost

    Pilih English untuk menyesuaikan dengan buku

  3. Setelah bahasa dipilih, akan tampil halaman manajemen XAMPP seperti gambar di bawah ini dengan tampilan sesuai dengan bahasa yang dipilih.

    xampp control panel - in English Xampp on Localhost

    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.

  1. Klik menu “Security” yang ada di halaman manajemen XAMPP.

    xampp control panel - Mysql Password 1

    Klik menu Security

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

    xampp control panel - Mysql Password 2

    Klik link yang dilingkari untuk masuk ke pengaturan keamanan MySQL

  3. Akan tampil halaman untuk menetapkan password seperti gambar di bawah ini.
    xampp control panel - Mysql Password 3

    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.

      xampp control panel - Stoping 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.

      xampp status activated

      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.

  1. Klik tombol “Admin” di XAMPP Control Panel untuk masuk ke halaman phpMyAdmin atau masuk ke browser, lalu masukkan URL  http://localhost/phpmyadmin.

    xampp control panel - MySQL Administrator

    Klik tombol Admin untuk MySQL, atau silakan gunakan browser dan akses langsung http://localhost/phpmyadmin

  2. Maka akan tampil halaman login ke MySQL seperti gambar berikut.

    membuat database - login ke mysql

    Halaman Login ke MySQL di browser

  3. 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.
  4. Akan tampil halaman manajemen phpMyAdmin seperti gambar di bawah ini. Ikuti langkah berikut untuk membuat database.
    1. Klik menu Database di sudut kiri atas.

      membuat database - pilih menu database di kiri atas

      Klik menu Databases pada bagian kiri atas tampilan

    2. Masukkan nama database sesuai keinginan (misal : wordpress).

      membuat database - masukkan nama database lalu create

      Masukkan nama database lalu klik tombol “Create”

    3. Klik tombol “Create”
  5. Pastikan pesan yang ditampilkan seperti gambar berikut. Database yang dibuat sudah ditambahkan ke daftar databases.

    membuat database - pesan database berhasil dimasukkan

    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:

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

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:

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

 

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.

xampp control panel - Stoping Apache

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:

Login Page to check Lost Password

Klik link “Lost your Password?”

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

Lost Password Insert email

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:

  1. 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.
  2. 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.
  3. 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.