Spesifikasi: Ukuran: 14x21m Tebal: 220 hlm Harga: Rp Terbit pertama: Mei 2005 Sinopsis singkat:

Transkripsi

1 Spesifikasi: Ukuran: 14x21m Tebal: 220 hlm Harga: Rp 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.

2 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

3 Netscape Opera dan lain-lain Bagaimana aplikasi web ini bekerja mulai dari server hingga diterima browser? OK, coba perhatikan gambar di bawah ini. 56 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 2. Komputer client akan melakukan permintaan ke server untuk dihubungkan ke URL yang diinginkan. 3. Server menemukan URL yang diinginkan client. 4. Server melakukan proses permintaan yang diterima. 5. Selanjutnya server mengirim kembali data yang diingikan ke client.

4 6. Server menerima data dari server 7. Server melakukan proses untuk mengembalikan data ke client yang meminta data ke URL 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. Project aplikasi web ASP.NET pada Visual C# Project aplikasi web ASP.NET pada VB.NET Gambar 5.3 Project ASP.NET pada Visual Studio.NET

5 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\v Folder v 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

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

7 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 Pembuatan Aplikasi Web Di bawah ini adalah langkah-langkah implementasi skenario yang telah kita buat: 1. Buka Visual Studio.NET

8 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 TextBox ID TextMode txtpassword 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"); 61

9 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 Sub End If 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

10 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 Label ID ForeColor Text [] Visible lberror Red False Label Text Data Employee HyperLink NavigateUrl Text Logout.aspx Logout DataGrid ID DataGrid1 10. Tambahkan namespace baru berikut ini. C# using System.Data.SqlClient; VB Imports System.Data.SqlClient 63

11 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

12 Dim ssql As String = "select EmployeeID,FirstName,LastName from Employees" End Sub Catatan: 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 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 End Sub If Not IsPostBack Then If ValidateLogin() = True Then PopulateData() Else Response.Redirect("login.aspx") End If End If 65

13 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() End Sub Response.Redirect("login.aspx", True) End If 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

14 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

15 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

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

17 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

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

19 Port Web Server Virtual Directory 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