Skip to main content

Bab 2: Menyiapkan Development Server

Jika kamu ingin membangun aplikasi internet tetapi belum memiliki development server sendiri, maka setiap kali kamu melakukan perubahan, kamu harus mengunggahnya ke sebuah server di internet sebelum bisa melakukan pengujian.

Bahkan dengan koneksi broadband yang cepat, proses unggah berulang seperti ini tetap akan memperlambat alur kerja secara signifikan. Sebaliknya, jika kamu bekerja di komputer lokal, kamu hanya perlu menyimpan perubahan dan menekan tombol Refresh di browser untuk langsung melihat hasilnya.

Memiliki development server sendiri juga memberi keuntungan besar karena kamu bisa bereksperimen tanpa takut menampilkan error memalukan atau membuka celah keamanan. Saat aplikasi berada di website publik, setiap kesalahan bisa terlihat atau dimanfaatkan oleh orang lain. Karena itu, jauh lebih aman dan nyaman untuk menyelesaikan semua masalah di lingkungan lokal yang biasanya sudah dilindungi oleh firewall dan sistem keamanan lain.

Setelah kamu memiliki development server sendiri, kamu akan sulit membayangkan bagaimana bisa bekerja tanpanya. Kabar baik untukmu, menyiapkan server seperti ini tidaklah rumit. Kamu hanya perlu mengikuti langkah-langkah di bagian berikutnya sesuai dengan sistem yang kamu gunakan, baik PC, Mac, maupun Linux.

Dalam bab ini, fokus pembahasan hanya pada sisi server dari pengalaman web, seperti yang telah dijelaskan di Bab 1. Namun untuk benar-benar menguji hasil pekerjaan kamu—terutama saat nanti mulai menggunakan JavaScript, CSS, dan HTML—kamu sebaiknya memiliki beberapa web browser utama yang siap digunakan. Dalam banyak kasus, dua browser sudah cukup, tetapi sebisa mungkin kamu sebaiknya menguji di setidaknya Mozilla Firefox, Safari, dan Google Chrome.

Meskipun ada banyak browser lain yang berbasis Google Chromium, tetap saja bisa ada perbedaan kecil dalam cara masing-masing browser mengimplementasikan standar web. Karena itu, sebelum merilis sebuah produk, ada baiknya kamu menguji kode kamu di sebanyak mungkin browser untuk memastikan semuanya berjalan sesuai harapan di berbagai browser dan platform.

Jika kamu juga ingin memastikan website kamu tampil dengan baik di perangkat mobile, kamu sebaiknya mencoba mendapatkan akses ke berbagai perangkat iOS dan Android. Layanan seperti BrowserStack dapat membantu hal ini. Selain itu, developer tools di browser juga menyediakan fitur emulasi perangkat mobile, yang memungkinkan kamu memeriksa apakah website sudah responsif dan tetap nyaman dilihat di layar yang lebih kecil.

Apa Itu WAMP, MAMP, atau LAMP?​

WAMP, MAMP, dan LAMP adalah singkatan dari “Windows, Apache, MySQL, PHP”, “Mac, Apache, MySQL, PHP”, dan “Linux, Apache, MySQL, PHP”. Masing-masing istilah ini menggambarkan sebuah setup lengkap yang digunakan untuk mengembangkan halaman web dinamis.

WAMP, MAMP, dan LAMP tersedia dalam bentuk package yang menggabungkan semua program tersebut, sehingga kamu tidak perlu menginstal dan mengonfigurasinya satu per satu. Artinya, kamu cukup mengunduh dan menginstal satu aplikasi saja, lalu mengikuti beberapa langkah sederhana untuk membuat web development server kamu langsung berjalan dengan cepat dan tanpa ribet.

Selama proses instalasi, sejumlah pengaturan default akan dibuat untuk kamu. Konfigurasi keamanan dari setup seperti ini tidak seketat server produksi, karena memang dioptimalkan untuk penggunaan lokal. Karena itu, kamu tidak boleh menggunakan setup seperti ini sebagai production server.

Namun, untuk keperluan pengembangan dan pengujian website maupun aplikasi, salah satu dari instalasi ini sudah lebih dari cukup.

note

Jika kamu memilih untuk tidak menggunakan WAMP, MAMP, atau LAMP dalam membangun sistem development kamu sendiri, perlu kamu ketahui bahwa mengunduh dan mengintegrasikan setiap komponen secara manual bisa sangat memakan waktu dan sering kali membutuhkan banyak riset agar semuanya dapat dikonfigurasi dengan benar. Namun, jika kamu sudah memiliki semua komponen tersebut terinstal dan saling terintegrasi, maka semuanya tetap akan bekerja dengan contoh-contoh yang ada di buku ini.

Menginstal AMPPS di Windows​

Ada beberapa pilihan WAMP server yang tersedia, masing-masing dengan konfigurasi yang sedikit berbeda. Berbagai edisi buku ini sebelumnya merekomendasikan produk WAMP yang berbeda-beda, tergantung mana yang saat itu menawarkan fitur terbaik dan terlihat paling andal. Saat ini, AMPPS tampak sebagai pilihan terbaik (meskipun kamu bisa memilih alternatif lain jika mau, dan tetap dapat mengikuti contoh-contoh dalam buku ini). Kamu dapat mengunduh AMPPS dengan mengklik tombol Download di halaman utama website-nya.

Penulis menyarankan agar kamu selalu mengunduh versi stabil terbaru (saat buku ini ditulis, versinya adalah 4.4, dengan ukuran installer sekitar 46 MB). Berbagai installer untuk Windows, macOS, dan Linux tersedia di halaman unduhan tersebut.

Setelah kamu mengunduh installer-nya, jalankan file tersebut untuk menampilkan jendela seperti pada gambar di bawah. Sebelum sampai ke jendela itu, jika kamu menggunakan antivirus atau mengaktifkan User Account Control di Windows, kamu mungkin akan melihat satu atau lebih pemberitahuan peringatan dan perlu mengklik Yes dan/atau OK untuk melanjutkan proses instalasi.

Klik Next, lalu kamu harus menyetujui perjanjian lisensi. Klik Next lagi, kemudian Next sekali lagi untuk melewati layar informasi. Setelah itu, kamu akan diminta untuk mengonfirmasi lokasi instalasi. Biasanya sistem akan menyarankan lokasi seperti berikut (tergantung pada huruf drive utama kamu), tetapi kamu dapat mengubahnya jika mau:

Pada layar berikutnya kamu harus menyetujui perjanjian yang ditampilkan lalu klik Next. Setelah membaca ringkasan informasi, klik Next sekali lagi dan kamu akan diminta memilih folder tempat AMPPS akan diinstal.

Setelah kamu menentukan lokasi instalasi AMPPS, klik Next, lalu tentukan di mana shortcut akan disimpan (pengaturan default biasanya sudah cukup baik), kemudian klik Next lagi untuk memilih ikon apa saja yang ingin diinstal, seperti yang ditunjukkan pada Gambar 2-2. Pada layar berikutnya, klik tombol Install untuk memulai proses instalasi.

Proses instalasi akan memakan waktu beberapa menit, dan saat selesai kamu akan melihat jendela seperti pada gambar di bawah. Klik Finish.

Hal terkahir yang perlu dilakukan adalah memasang Microsoft Visual C++ Redistributable jika belum terpasang. Sebuah iwndow akan muncul untuk memintamu memasangnya (lihat gambar). Klik Install mulai memasang dan bila sudah terpasang ia akan bertanya apakah ingin melakukan reinstall yang kemudian bisa kamu skip.

Jika kamu melanjutkan instalasi, kamu harus menyetujui syarat dan ketentuan yang muncul di jendela pop-up, lalu klik Install. Proses instalasi ini biasanya berlangsung cukup cepat. Setelah selesai, klik Close untuk menutupnya.

Setelah AMPPS terinstal, jendela kontrol seperti yang ditunjukkan pada gambar akan muncul di pojok kanan bawah desktop kamu. Kamu juga bisa membukanya melalui shortcut aplikasi AMPPS di menu Start atau di desktop, jika kamu memilih untuk membuat ikon-ikon tersebut saat instalasi.

Sebelum melanjutkan, jika kamu masih memiliki pertanyaan, penulis menyarankan agar kamu melihat dokumentasi AMPPS. Jika tidak, kamu sudah siap untuk mulai.

Kamu mungkin akan melihat bahwa versi PHP default di AMPPS adalah 8.2. Jika karena suatu alasan kamu ingin mencoba versi lain, klik tombol Options (ikon sembilan kotak putih yang membentuk sebuah kotak) di dalam jendela kontrol AMPPS, lalu pilih Change PHP Version. Setelah itu, sebuah menu baru akan muncul, dari mana kamu bisa memilih dan menginstal versi PHP yang berbeda.

Menguji Pemasangan AMPPS di Windows​

Hal pertama yang perlu kamu lakukan sekarang adalah memastikan semuanya berjalan dengan benar. Untuk melakukannya, masukan URL ini ke address bar di browser:

http://localhost

Alamat ini akan menampilkan halaman depan AMPPS dimana kita bisa mengamankannya dengan mengatur sebuah password. Bila kamu mau kamu bisa memilih untuk mengamankannya atau tidak. Bila ini komputer pribadimu mungkin kamu tidak memerlukannya, tapi bila ada pertimbangan keamanan apapun mungkin aku perlu mengaturnya.

Setelah selesai kamu akan di bawa ke halaman utama di http://localhost/apps/. Di sini kamu bisa mengatur berbagai macam hal, jadi ingat alamat ini atau bookmark di browser.

Selanjutnya, ketika lagi alaman berikut untuk melihat document root dari web server Apache yang sudah aktif:

http://localhost

Kali ini, hasilnya akan terlihat seperti pada gambar. Untuk daftar file yang kamu lihat mungkin sedikit berbeda.

Document Root (Windows)​

Document root merupakan folder tempat menyimpan dokumen web untuk sebuah domain. Folder ini dipakai server untuk menampilkan halaman utama, misalnya saat mengakses http://yahoo.com atau untuk server local adalah http://localhost.

AMPPS akan menggunakan folder berikut sebagai document root:

C:\Program Files\Ampps\www

Untuk memastikan semua konfigurasi benar, sekarang coba buat file HTML baru dengan editor apapun dan tulis kode berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>A quick test</title>
    </head>
    <body>
        Hello World!
    </body>
</html>

Simpan file tersebut ke document root dan beri nama test.html.

Sekarang kamu bisa coba akses di browser dengan mengakses http://localhost/test.html.

Ingat bahwa menyajikan sebuah halaman web dari document root (atau subfolder di dalamnya) berbeda dengan membuka file langsung dari filesystem komputer kamu di browser. Cara pertama akan memastikan PHP, MySQL, dan semua fitur web server bisa digunakan, sedangkan cara kedua hanya memuat file tersebut ke browser, yang akan berusaha menampilkannya tetapi tidak akan mampu memproses PHP atau instruksi server lainnya.

Karena itu, kamu sebaiknya menjalankan contoh-contoh dengan menggunakan awalan localhost di address bar browser, kecuali kamu benar-benar yakin bahwa file tersebut tidak bergantung pada fungsionalitas web server.

Dalam proses