Spesifikasi: Ukuran: 14x21m Tebal: 220 hlm Harga: Rp 38.800 Terbit pertama: Mei 2005 Sinopsis singkat: Aplikasi .NET akhir-akhir ini mengalami perkembangan yang membanggakan. Hal yang sangat naif apabila kita membuat aplikasi .NET yang canggih tetapi kita tidak mampu membuat packaging dan deployment dibeberapa komputer. Buku ini hadir untuk memenuhi kebutuhan dalam hal packaging dan deployment melalui Visual Studio.NET. Dengan membaca buku ini, Anda dipandu untuk membuat kemasan instalasi yang tampak profesional untuk semua program buatan Anda. Tentunya ini akan semakin menambah daya tarik dan nilai jual program Anda tersebut! Sebagai nilai tambahnya, buku ini memuat pembahasan dengan bahasa Visual Basic dan C# sehingga Anda dapat dengan mudah membandingkan dan menerapkan keduanya.
BAB 5
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
55
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 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. 56
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.
Gambar 5.3 Project ASP.NET pada Visual Studio .NET 2003
57
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
58
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.
59
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. 60
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
TextMode
Password
Text
Login
TextBox Button
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"); } }
61
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
62
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
Label
Label HyperLink DataGrid
Property
Nilai
ID
lbError
ForeColor
Red
Text
[]
Visible
False
Text
Data Employee
NavigateUrl
Logout.aspx
Text
Logout
ID
DataGrid1
10. Tambahkan namespace baru berikut ini. C# --using System.Data.SqlClient; VB --Imports System.Data.SqlClient
63
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;"
64
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
65
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
66
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
67
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
68
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
69
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
70
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. 71
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. 72
