PACKAGING DAN DEPLOYMENT PADA APLIKASI VB.NET

PACKAGING DAN

DEPLOYMENT APLIKASI WEB

Fasilitas Sistem Packaging untuk Aplikasi

Aplikasi web adalah aplikasi yang berjalan di atas protokol HTTP.

Untuk menjalankan aplikasi web, kita cukup menggunakan brow-

ser seperti:

Internet Explorer (IE)

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) mela-

kukan surfing, contohnya ke

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

www.netindonesia.net

melakukan proses permintaan

yang diterima.

5. Selanjutnya server

www.netindonesia.net

mengirim kembali

data yang diingikan ke client.

6. Server menerima data dari server

www.netindonesia.net

7. Server melakukan proses untuk mengembalikan data ke client

yang meminta data ke URL

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.

Projectaplikasi

webASP.NET

padaVisualC#

Projectaplikasi

webASP.NET

padaVB.NET

Gambar 5.3 Project ASP.NET pada Visual Studio .NET 2003

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

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.

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.

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:

---

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");

}

---

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

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.

---

using System.Data.SqlClient;

---

Imports System.Data.SqlClient

11. Tambahkan 2 method code berikut pada

default.aspx

---

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;

}

---

Private Function ValidateLogin() As Boolean

If Not Session("userid") Is Nothing Then

If Session("userid") <> "" Then

Return True

Else

Return False

End If

Return False

End Function

Private Sub PopulateData()

Dim sConn As String =

"server=(local);database=northwind;uid=guest;pwd=123;"

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.

---

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");

}

---

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 Sub

13. Kemudian tambahkan page baru, yaitu

Logout.aspx

14. Pada event Load pada page

Logout.aspx

, tambahkan kode

berikut.

---

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);

}

---

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

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

kukan 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

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

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

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

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.

PortWebServerVirtualDirectory

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.

PACKAGING DAN DEPLOYMENT PADA APLIKASI VB.NET

Tidak ada komentar:

Posting Komentar