Membuat Installer Aplikasi Web dengan NSIS

Pada artikel ini akan dijelaskan cara mengemas sebuah aplikasi web menjadi sebuah paket instalasi (installer) agar aplikasi web tersebut bisa didistribusikan dan diinstal dengan mudah oleh pengguna. Proses pengemasan aplikasi web tersebut adalah dengan menggunakan program Nullsoft Scriptable Install System (NSIS), yaitu sebuah program pembuat installer yang bersifat open source dan bebas digunakan tanpa biaya lisensi. Versi NSIS yang digunakan oleh penulis pada artikel ini adalah 2.46, walaupun Anda bebas menggunakan versi yang lebih baru.

Karena sebuah sebuah aplikasi web membutuhkan web server atau application server atau bahkan database server untuk menjalankan aplikasi tersebut, maka aplikasi server yang bersangkutan harus disertakan juga ke dalam installer. Pada pembahasan ini akan digunakan XAMPP yaitu sebuah kumpulan aplikasi-aplikasi server yang di dalamnya terdapat:

  • Apache
  • MySQL
  • PHP
  • Mercury Mail Transport System
  • FileZilla FTP Server
  • Tomcat

Dengan digunakannya XAMPP, maka tipe aplikasi web yang bisa diterapkan adalah aplikasi web yang berbasis PHP atau Java. Aplikasi web dengan platform yang lain seperti .NET yang dijalankan pada IIS adalah di luar ruang lingkup pembahasan ini.

Sebelum melanjutkan uraian, pastikan pembaca telah menginstal program NSIS dan memiliki pengetahuan dasar NSIS. Untuk mengetahui prinsip kerja NSIS dan dasar-dasarnya dengan cepat, pembaca dipersilakan membaca terlebih dahulu dokumen sebelumnya yang berjudul “Mengenal Nullsoft Scriptable Install System“ yang dibuat oleh penulis. Jika pembaca telah cukup akrab dengan NSIS, silakan mengikuti langkah-langkah berikut ini.

 

1. Membuat Aplikasi Web

Langkah pertama pada pembuatan installer adalah mempersiapkan aplikasi web yang akan dikemas. Seperti yang dijelaskan sebelumnya, aplikasi web yang dimaksud pada artikel ini adalah aplikasi yang dapat dijalankan pada XAMPP, yaitu khususnya menggunakan Apache atau Tomcat.

Jadi pastikan Anda telah memiliki XAMPP yang terinstal pada komputer kerja.

Catatan:

Distribusi XAMPP yang dianjurkan adalah yang berbentuk ZIP. Alasannya adalah karena distribusi dalam bentuk ini hanya membutuhkan file tersebut diekstrak ke dalam komputer kerja dan bisa langsung dijalankan tanpa membutuhkan proses instalasi. Hal ini sangat cocok dengan pembuatan installer yang sedang dijelaskan di sini.

Untuk mendapatkan XAMPP dalam bentuk ZIP, silakan mengunduhnya dari:

http://sourceforge.net/projects/xampp/files/

Sekarang kita akan membuat dua buah contoh aplikasi web untuk dikemas. Aplikasi yang pertama berbasis PHP dan yang satu lagi berbasis Java.

1.1. Aplikasi PHP dan MySQL

Aplikasi yang pertama adalah sebuah aplikasi PHP yang akan mengakses sebuah table di dalam database MySQL. Hal ini untuk menunjukkan bahwa aplikasi yang dikemas dalam installer bukan hanya sebuah aplikasi yang statik tetapi bisa merupakan aplikasi database yang dinamis dengan operasi baca/tulis. Namun karena yang dijelaskan di sini adalah sebuah konsep, maka yang akan diperlihatkan di sini adalah sebuah aplikasi PHP sederhana. Pada prakteknya pembaca dapat mengembangkan ke tahap tingkat lanjut dengan menggunakan framework seperti CodeIgniter, JQuery, Bootstrap dan sebagainya.

Silakan mengikuti langkah-langkah berikut ini:

  1. Nyalakan service XAMPP dengan menjalankan ..\xampp\xampp_start.exe.
  2. Buka XAMPP console dengan menggunakan sebuah browser dan ketikkan alamat:

http://localhost/xampp

  1. Masuk ke dalam MySQL melalui link phpMyAdmin, kemudian buat sebuah database bernama myDB.
  2. Buat sebuah table bernama MyGuests dengan skrip berikut ini dan masukkan beberapa data contoh.

 

  1. Buatlah sebuah folder bernama php-exercise01 di dalam folder..\xampp\htdocs, kemudian buat sebuah file bernama php.

 Silakan menyesuaikan parameter koneksi database pada program di atas ($servername, $username, $password, $dbname) dengan konfigurasi database MySQL Anda.

Pembuatan aplikasi PHP yang pertama sudah selesai, silakan membuka sebuah browser ketikkan alamat berikut ini:

http://localhost/php-exercise01/

Tampilan aplikasi PHP tersebut akan muncul seperti berikut ini.

nsis-webapp-01

Tampak aplikasi ini telah berjalan baik dengan menampilkan data dari dalam database MySQL.

1.2. Aplikasi Java

Aplikasi yang kedua adalah sebuah aplikasi Java yang berisi sebuah file JSP mengakses sebuah servlet sederhana. Aplikasi ini dibuat mengggunakan Eclipse dan hasil compile-nya berbentuk file WAR. Selanjutnya file WAR itu akan diinstal dan dijalankan pada Tomcat.

Silakan mengikuti langkah-langkah berikut ini:

  1. Jalankan Eclipse dan buat sebuah projek baru dengan tipe “Dynamic Web Project” dan beri nama web-exercise01.

nsis-webapp-02

  1. Buat sebuah file JSP di dalam folder WebContent dan beri nama jsp.

 

  1. Buat sebuah servlet dengan package exercise01.web dan beri nama GreetingServlet.

nsis-webapp-03

  1. Ketikkan baris-baris kode berikut ini.

 

  1. Simpan semua file dan export projek tersebut menjadi sebuah file WAR.
  2. Untuk menginstal file WAR tersebut di dalam Tomcat, terlebih dahulu perlu dibuat sebuah user admin. Silakan masuk ke dalam folder ..\xampp\tomcat\conf dan edit file tomcat-users.xml.

Tambahkan beberapa baris berikut ini di bagian bawah file tersebut.

Selanjutnya kita akan menggunakan user “admin” dengan password “admin” untuk melakukan administrasi Tomcat. Simpan perubahan dan tutup file tersebut.

  1. Nyalakan service Tomcat dengan menjalankan ..\xampp\catalina_start.bat.
  2. Buka Tomcat console dengan menggunakan sebuah browser dan ketikkan alamat:

http://localhost:8080

nsis-webapp-04

Klik tombol “Manager App” dan masukkan user dan password admin yang dibuat tadi.

  1. Lakukan deployment dari file WAR yang dibuat tadi.

nsis-webapp-05

Pembuatan aplikasi yang ke-dua sudah selesai, silakan membuka sebuah browser ketikkan alamat berikut ini:

http://localhost:8080/web-exercise01/

Tampilan aplikasi Java tersebut akan muncul seperti berikut ini.

nsis-webapp-06

Pembuatan kedua aplikasi web sudah selesai dan kita sudah memastikan semua aplikasi web telah berjalan dengan baik pada instalasi asalnya. Sekarang kedua aplikasi tersebut akan dikemas ke dalam sebuah installer berikut semua aplikasi server yang dibutuhkan.

2. Membuat Skrip NSIS

Urutan langkah-langkah instalasi aplikasi web di dalam skrip NSIS dijelaskan sebagai berikut:

  1. Masukkan folder XAMPP dan semua isinya (termasuk aplikasi PHP dan Java serta database MySQL di dalamnya) ke dalam installer.

Pada contoh ini folder XAMPP diasumsikan berada di drive D, namun pada saat instalasi nanti pembuatan folder XAMPP akan dilakukan di drive C. Dari eksperimen yang dilakukan penulis, folder XAMPP tidak dapat diletakkan di dalam Program Files karena tidak bisa berjalan dengan baik. Itu sebabnya folder XAMPP harus diletakkan di folder terluar dari sebuah drive (pada contoh ini folder instalasinya ditetapkan c:\XAMPP, dan tidak bisa diubah).

  1. Buat shortcut di Start à All Programs untuk menjalankan aplikasi PHP dan aplikasi Java
  2. Buat shortcut di folder Startup untuk menjalankan service XAMPP dan Tomcat secara otomatis ketika komputer dinyalakan. Telah dijelaskan sebelumnya bahwa service XAMPP dan Tomcat dinyalakan dengan menjalankan ..\xampp\xampp_start.exe dan ..\xampp\catalina_start.bat. Pada saat kedua file itu dijalankan maka shell windows-nya akan muncul di layar. Hal ini akan tampak kurang baik karena dapat membingungkan pengguna yang awam. Kedua window itu akan lebih baik jika berada dalam keadaaan minimize – walaupun sebetulnya masih tampak di taskbar namun keadaanya tidak terpampang jelas di layar.

Untuk “mengakali” hal ini maka perlu dibuat sebuah file BAT yang berisi perintah:

start /min c:\xampp\xampp_start.exe

start /min c:\xampp\catalina_start.bat

start /min adalah shell command yang akan menjalankan sebuah file dalam keadaan minimize. Silakan menyimpan skrip di atas menjadi file bernama webapp_start.bat dan tempatkan di dalam folder d:\XAMPP supaya nanti terbawa ke dalam installer.

Selanjutnya langkah-langkah di atas dituangkan ke dalam skrip NSIS berikut ini.

 

Silakan compile skrip NSIS di atas menjadi sebuah file installer, dalam hal ini webapp-installer.exe.

Setelah installer dijalankan berikut ini adalah hasilnya:

  1. Sebuah folder XAMPP terbentuk di drive C.
  1. Shortcut terbentuk di Start à All Programs à WebApp Example.

nsis-webapp-07

  1. Shortcut terbentuk di Start à All Programs –> Startup.

nsis-webapp-08

Komputer harus di-reboot setelah instalasi selesai agar shortcut di Startup ini dinyalakan. Pada saat reboot dan service XAMPP dan Tomcat dinyalakan, perhatikan bagaimana shell window keduanya berada dalam keadaan minimize.

Setelah kedua service menyala maka aplikasi PHP dan Java bisa dijalankan melalui shortcut di Start –> All Programs –> WebApp Example.

  1. Shortcut Uninstall pada Start à All Programs à WebApp Example dapat dijalankan untuk menghapus aplikasi namun folder c:\xampp sengaja dibiarkan tidak terhapus karena mengandung data. Folder itu dapat dihapus secara manual jika diinginkan.

Demikianlah uraian mengenai cara pembuatan installer untu aplikasi web menggunakan NSIS.

 

end-of-doc

Leave a Reply

Your email address will not be published. Required fields are marked *