PACKAGING DAN DEPLOYMENT APLIKASI WEB

5.1 Fasilitas Sistem Packaging untuk Aplikasi
Web
Aplikasi web adalah aplikasi yang berjalan di atas protokol HTTP.
Untuk menjalankan aplikasi web, kita cukup menggunakan browser
seperti:
Internet Explorer (IE)
Gambar 5.1 Contoh aplikasi web
56
Netscape
Opera
dan lain-lain
Bagaimana aplikasi web ini bekerja mulai dari server hingga
diterima browser? OK, coba perhatikan gambar di bawah ini.
Gambar 5.2 Sistem kerja aplikasi web
Prinsip kerja aplikasi web dapat dijelaskan berdasarkan gambar di
atas:
1. Mula-mulai client (browser seperti Internet Explorer) melakukan
surfing, contohnya ke http://www.netindonesia.net.
2. Komputer client akan melakukan permintaan ke server untuk
dihubungkan ke URL yang diinginkan.
3. Server menemukan URL yang diinginkan client.
4. Server http://www.netindonesia.net melakukan proses permintaan
yang diterima.
5. Selanjutnya server http://www.netindonesia.net mengirim kembali
data yang diingikan ke client.
57
6. Server menerima data dari server http://www.netindonesia.net.
7. Server melakukan proses untuk mengembalikan data ke client
yang meminta data ke URL http://www.netindonesia.net.
8. Client browser menerima data server dan menampilkannya ke
browser.
Pada teknologi .NET kita juga dapat membuat aplikasi web yang
dinamakan ASP.NET dan tool pembuatnya menggunakan Visual
Studio .NET.



 

           



 

      
Gambar 5.3 Project ASP.NET pada Visual Studio .NET 2003
58
Sebelum membuat project ASP.NET dengan Visual Studio .NET
maka kita harus memastikan bahwa IIS telah diinstal di komputer.
Jika kita sudah menginstal IIS sebelum menginstal Visual Studio
.NET maka secara otomatis Visual Studio .NET akan melakukan
registrasi framework .NET ke dalam IIS, tapi apabila kita
menginstal Visual Studio .NET terlebih dulu sebelum menginstal
IIS maka kita harus melakukan registrasi framework .NET pada
IIS secara manual dengan file aspnet_regiis.exe. Berikut ini cara
menginstal framework.NET secara manual ke dalam IIS.
1. Jalankan command line console. Pada Windows 2000, XP,
dan 2003, console dapat dipanggil dengan mengklik Start |
Run. Ketik cmd.
Gambar 5.4 Memanggil Commandline lewat Run
2. Setelah kotak dialog Commandline muncul maka arahkan ke
direktori di mana file aspnet_regiis.exe berada. Umumnya file
ini diletakan di direktori Windows, contohnya:
C:\WINDOWS\Microsoft.NET\Framework\v1.1.4322
Folder v1.1.4322 menunjukan versi framework .NET. Carilah
versi tertinggi.
3. Ketik command berikut:
aspnet_regiis -i
Setelah IIS telah terregistrasi dengan baik maka kita sekarang
siap membuat aplikasi web dengan ASP.NET
59
5.2 Implementasi Packaging dan Deployment
Pada subbab kali ini, kita akan membuat implementasi dan
deployment aplikasi web ASP.NET yang dibuat dengan Visual
Studio .NET 2003.
5.2.1 Skenario Project
Skenario yang akan dibuat di dalam project ini adalah pembuatan
aplikasi ASP.NET dengan sistem authentication. Di bawah ini
gambar skenarionya:
Gambar 5.5 Rancangan aplikasi ASP.NET
Dalam rancangan aplikasi ASP.NET ini kita akan membuat 3
page, yaitu:
Page default.aspx yang berisi data-data tampilan. Page ini
hanya dapat diakses jika pengunjung site sudah melakukan
proses authentication.
Page login.aspx adalah page untuk melakukan proses login.
Page logout.aspx adalah page untuk melakukan proses logout.
Berikut ini sequence diagram dari aplikasi ASP.NET yang akan
kita buat.
60
Gambar 5.6 Sequence diagram untuk project ASP.NET
Keterangan dari sequence diagram pada gambar di atas adalah
sebagai berikut:
1. Mula-mula user akan meminta page default.aspx.
2. Jika user belum melakukan proses login maka sistem akan
melemparkannya ke page login.aspx.
3. Jika user sudah melakukan proses login maka page
default.aspx akan menampilkan data yang diambil dari
database.
4. Pada page login.aspx, user memasukan user id dan password.
5. Jika user memasukkan user id dan password dengan benar
maka sistem akan melemparkan ke page default.aspx.
6. User dapat mengakhiri session login-nya jika mengklik logout
sehingga sistem akan melemparkannya ke page logout.aspx.
5.2.2 Pembuatan Aplikasi Web
Di bawah ini adalah langkah-langkah implementasi skenario yang
telah kita buat:
1. Buka Visual Studio .NET 2003.
61
2. Buat project baru dengan template ASP.NET. Untuk C#, beri
nama WebCSharpApp, sedangkan untuk VB.NET beri nama
WebVBApp.
3. Ubah nama file WebForm1.aspx menjadi Login.aspx.
4. Buat UI untuk Login.aspx seperti gambar di bawah ini:
Gambar 5.7 UI untuk page Login.aspx
Berikut ini properti komponennya:
Komponen Property Nilai
Label Text User ID
Label Text Password
TextBox ID txtUserID
ID txtPassword
TextBox
TextMode Password
Button Text Login
5. Klik dua kali tombol Login dan tambahkan kode di bawah ini:
C#

private void Button1_Click(object sender, System.EventArgs e)
{
if(this.txtUserID.Text.Trim()==”user” &&
this.txtPassword.Text.Trim()==”123″)
{
Session[“userid”] = this.txtUserID.Text;
Response.Redirect(“default.aspx”);
}
}
62
VB

Private Sub Button1_Click(ByVal sender As System.Object,
ByVal e As System.EventArgs) Handles Button1.Click
If Me.txtUserID.Text.Trim() = “usr” And _
Me.txtPassword.Text.Trim() = “123” Then
Session(“userid”) = Me.txtUserID.Text
Response.Redirect(“default.aspx”)
End If
End Sub
6. Selanjutnya tambahkan page baru dengan cara mengklik
kanan dan memilih menu Add | Add New Item.
Gambar 5.8 Menambahkan page baru
7. Akan muncul kotak dialog berikut.
Gambar 5.9 Memilih jenis item yang akan ditambahkan ke project
63
8. Pilih template Web Form dan beri nama default.aspx. Klik
tombol Open jika telah selesai.
9. Buat UI untuk default.aspx sebegai berikut.
Gambar 5.10 UI untuk page default.aspx
Berikut ini properti komponennya:
Komponen Property Nilai
ID lbError
ForeColor Red
Text []
Label
Visible False
Label Text Data Employee
NavigateUrl Logout.aspx
HyperLink
Text Logout
DataGrid ID DataGrid1
10. Tambahkan namespace baru berikut ini.
C#

using System.Data.SqlClient;
VB

Imports System.Data.SqlClient
64
11. Tambahkan 2 method code berikut pada default.aspx.
C#

private bool ValidateLogin()
{
if(Session[“userid”]!=null)
{
if((string)Session[“userid”]!=””)
return true;
else
return false;
}
return false;
}
private void PopulateData()
{
string sConn =
“server=(local);database=northwind;uid=guest;pwd=123;”;
string sSql = “select EmployeeID,FirstName,LastName from
Employees”;
try
{
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(sSql,sConn);
da.Fill(ds);
if(ds!=null)
{
this.DataGrid1.DataSource = ds.Tables[0];
this.DataGrid1.DataBind();
}
}
catch(SqlException err)
{
this.lbError.Text = err.Message;
this.lbError.Visible = true;
}
}
VB

Private Function ValidateLogin() As Boolean
If Not Session(“userid”) Is Nothing Then
If Session(“userid”) <> “” Then
Return True
Else
Return False
End If
End If
Return False
End Function
Private Sub PopulateData()
Dim sConn As String =
“server=(local);database=northwind;uid=guest;pwd=123;”
65
Dim sSql As String = “select
EmployeeID,FirstName,LastName from Employees”
Try
Dim ds As New DataSet
Dim da As New SqlDataAdapter(sSql, sConn)
da.Fill(ds)
If Not ds Is Nothing Then
Me.DataGrid1.DataSource = ds.Tables(0)
Me.DataGrid1.DataBind()
End If
Catch ex As SqlException
Me.lbError.Text = ex.Message
Me.lbError.Visible = True
End Try
End Sub
Catatan:
Ganti nilai pada Connection String sesuai dengan konfigurasi
database Anda, terutama nilai user dan password.
“server=(local);database=northwind;uid=guest;pwd=123;”
12. Pada event Load dari page default.aspx, tambahkan kode di
bawah ini.
C#

private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
if(!IsPostBack)
{
if(ValidateLogin())
PopulateData();
else
Response.Redirect(“login.aspx”);
}
}
VB

Private Sub Page_Load(ByVal sender As System.Object, ByVal e
As System.EventArgs) Handles MyBase.Load
‘Put user code to initialize the page here
If Not IsPostBack Then
If ValidateLogin() = True Then
PopulateData()
Else
Response.Redirect(“login.aspx”)
End If
End If
End Sub
66
13. Kemudian tambahkan page baru, yaitu Logout.aspx.
14. Pada event Load pada page Logout.aspx, tambahkan kode
berikut.
C#

private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
if(!IsPostBack)
{
Session[“userid”] = null;
this.Session.Clear();
Response.Redirect(“login.aspx”,true);
}
}
VB

Private Sub Page_Load(ByVal sender As System.Object, ByVal e
As System.EventArgs) Handles MyBase.Load
‘Put user code to initialize the page here
If Not IsPostBack Then
Session(“userid”) = Nothing
Me.Session.Clear()
Response.Redirect(“login.aspx”, True)
End If
End Sub
15. Kompilasi project ini untuk memastikan bahwa tidak ada
kesalahan.
16. Sebelum menjalankan, tentukan Start Page dengan mengklik
kanan page default.aspx.
Gambar 5.11 Menentukan Start Page
67
17. Pilih menu Set As Start Page.
18. Jalankan project ini.
Keterangan kode
Mula-mula user akan masuk ke page default.aspx. Bagian event
Load page default.aspx akan mengecek apakah user telah
melakukan login dengan mengecek Session[“userid”] yang dilakukan
pada method ValidateLogin().
if(!IsPostBack)
{
if(ValidateLogin())
PopulateData();
else
Response.Redirect(“login.aspx”);
}
Implementasi method ValidateLogin():
private bool ValidateLogin()
{
if(Session[“userid”]!=null)
{
if((string)Session[“userid”]!=””)
return true;
else
return false;
}
return false;
}
Sintaks untuk menampilkan data dengan cara mengambil data
dari database SQL Server 2000 melalui objek ADO.NET:
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(sSql,sConn);
da.Fill(ds);
if(ds!=null)
{
this.DataGrid1.DataSource = ds.Tables[0];
this.DataGrid1.DataBind();
}
Untuk bagian page Login.aspx, kita tidak mengunakan Windows
Authentication, Active Directory Authentication, atau Database
Authentication, melainkan mengunakan Hardcode. Penulis tidak
membahas masalah authentication secara mendalam karena
68
akan banyak dijumpai pada topik-topik yang berhubungan
dengan sekuriti.
Berikut ini teknik authentication (penulis tidak merekomendasikan
algoritma ini untuk diterapkan di produksi. Kode ini hanya sebagai
contoh saja):
if(this.txtUserID.Text.Trim()==”user” &&
this.txtPassword.Text.Trim()==”123″)
{
Session[“userid”] = this.txtUserID.Text;
Response.Redirect(“default.aspx”);
}
Pada kode di atas, jika proses login sukses maka nama userid
akan disimpan di session dan dilemparkan ke page default.aspx.
Pada Logout.aspx, kita melakukan penghapusan semua session
dan melemparkan user ke page Login.aspx.
if(!IsPostBack)
{
Session[“userid”] = null;
this.Session.Clear();
Response.Redirect(“login.aspx”,true);
}
Berikut ini hasil dijalankannya program. Pada awalnya sistem
akan masuk ke page Login.aspx. Masukkan user=“user” dan
password=“123”.
Gambar 5.12 Hasil running page Login.aspx
69
Gambar 5.13 Menampilkan data
Klik tombol Login dan page akan berpindah ke default.aspx dan
selanjutnya akan menampilkan data dari database.
Jika kita ingin logout, cukup klik link Logout.
5.2.3 Pembuatan Packaging
Langkah selanjutnya kita akan membuat packaging dari aplikasi
desktop yang telah dibuat. Lakukan langkah-langkah di bawah ini:
1. Tambahkan project baru pada solution kita dengan mengklik
kanan solution di bagian Solution Explorer.
Gambar 5.14 Menambah project baru
70
2. Pilih menu Add | New Project….
3. Selanjutnya akan muncul kotak dialog untuk project baru.
4. Pilih tipe project yaitu Setup and Deployment Projects.
5. Pilih template yaitu Web Setup Project.
6. Tulis nama project setup, misalnya WebSetup1.
7. Setelah selesai, klik tombol OK.
8. Untuk memasukkan aplikasi web yang telah dibuat di
packaging, kita dapat mengklik kanan project setup seperti
ditunjukkan gambar di bawah ini.
Gambar 5.15 Menambahkan project output ke packaging
9. Pilih menu Add | Project Output.
10. Akan muncul kotak dialog seperti gambar di bawah ini.
Gambar 5.16 Pemilihan Project Output
71
11. Pada gambar di atas, pilih project yang akan ditambahkan ke
packaging, misalnya project yang telah kita buat, yaitu
WebCsharpApp (untuk C#) atau WebVBApp (untuk VB).
12. Pilih menu “Primary output” dan “Content Files” dengan
meng-kliknya sambil menekan Ctrl.
13. Setelah selesai, klik tombol OK.
14. Jika sukses maka tampilan pada Solution Explorer akan
menjadi seperti gambar di bawah ini:
Gambar 5.17 Tampilan Solution Explorer
setelah packaging (C#) dibuat
15. Untuk melakukan Build Project Setup, klik kanan web project
setup dan build.
5.2.4 Deployment
Setelah membuat aplikasi packaging maka langkah selanjutnya
adalah menginstalnya ke komputer target. Untuk kasus ini, cara
instalasi cukup dilakukan dengan mengklik file setup.exe yang
merupakan hasil dari web project setup.
Pada packaging web, pada langkah kedua dari kotak dialog
Installation Wizard akan muncul dialog seperti ditunjukkan gambar
di bawah ini.
72
      
 
  
Gambar 5.18 Langkah ke-2 Web Installation Wizard
Pada gambar di atas, kita akan diminta memasukkan nama
Virtual Directory yang akan masuk ke direktori wwwroot dari IIS.
Port digunakan web server untuk melayani request. Umumnya
port web server adalah 80.
Untuk proses uninstall aplikasi web melalui file setup tersebut,
akan muncul kotak dialog seperti di bawah ini:
Gambar 5.19 Uninstall aplikasi web melalui file setup.exe
Pilihlah “Remove [nama_project]” untuk menghapus aplikasi.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s