Tutorial asp beta4

D3 Unggulan Universitas Budi Luhur
Project Katalog
Aplikasi E-commerce sederhana dengan ASP.Net 2.0
JC
1/22/2007

2 Pengantar Project Katalog | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Pengantar Project Katalog
Buku Diktat ini diperuntukkan untuk membantu proses belajar –mengajar di lingkungan kampus
Universitas Budi Luhur Program D3 Unggulan. Penulis menyadari bahwa diktat ini masih banyak
kekurangannya dan masih terus dalam perbaikan , oleh karena itu silahkan ajukan saran anda ke
d3unggulan@bl.ac.id.
Adapun diktat ini disusun berdasarkan bentuk kronologis , jadi beberapa bagian program akan diperbaiki
atau ditambah ulang sesuai dengan kebutuhan.
Versi yang digunakan ialah ASP.NET 2.0 dengan bahasa code Visual Basic dan database SQLServer2005.
Project ini belum 100% selesai (tidak sampai level pengiriman, hanya sampai pemesanan) namun sudah
menutupi kisaran materi yang diperlukan untuk pengembangan lebih lanjut.
Keterangan tentang coding disatukan dalam komentar coding, jika tidak memungkinkan akan dijelaskan
dibawahnya.
Gambaran aplikasi didasarkan pada bentuk umum aplikasi penjualan yang ada dalam buku ASP.NET 2.0
Everyday Apps oleh Doug Lowe
Diktat ini tidak membahas tentang desain dan sifat Database DBMS (seperti relasi dan sifatnya), akan
dibahas tentang teknik membuatnya dalam SQLSERVER, namun selebihnya dianggap user telah
mengetahui sifat –sifat dan desain DBMS secara umum.
Diktat ini ditujukan untuk materi pertengahan hingga akhir sehingga pelajar harus sudah mengenal
dasar ASP.NET terlebih dahulu.

3 Gambaran Umum | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Gambaran Umum
Dalam aplikasi ini, diharapkan kita dapat membuat suatu website yang menyajikan daftar barang yang
dijual (dalam bentuk catalog) agar dapat dilihat umum. Jika ada yang berminat, ia dapat mendaftarkan
dirinya menjadi anggota, lalu melakukan pemesanan barang. Tidak akan disertakan teknik validasi yang
advance(misalnya validasi nomor kartu kredit).
Seorang user yang memiliki hak setara admin dapat menambah, memperbaiki, dan menghapus entry
(barang)yang diinginkan, sedangkan user biasa hanya dapat memesan barang.
Halaman web yang dibuat terdiri dari :
1. DaftarBaru.aspx
2. Default.aspx
3. KonfirmasiPembelian.aspx
4. LaporanPenjualan.aspx
5. ListKeretaBelanja.aspx
6. LoginPage.aspx
7. ManajemenData.aspx
8. MasterPage.master
9. Produk.aspx
Dibagi dalam 3 kronologi:
1. Bagian catalog (halaman nomor 2,7,9)
2. Bagian Login (halaman nomor 1,6)
3. Bagian Penjualan (halaman nomor 3,4,5)
(karena dibagi dalam kronologi, maka halaman MasterPage.master dan database akan
mengalami revisi berulang)
Setelah materi diktat ini selesai, maka mahasiswa diharapkan dapat mengembangkannya hingga tingkat
aplikasi yang user friendly (validasi dan penanganan kesalahan yang lebih spesifik)

4 Sebelum anda mulai | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Sebelum anda mulai
Sebelum memulai pembuatan project ini, dan setiap kali anda membuka dan melanjutkan atau
memperbaiki, pastikan:
1. Visual Studio .NET 2005 terinstall dengan baik (dengan dotnet framework 2.0)
2. WebServer IIS berjalan dengan normal pada port 80 (harap hati-hati dengan web server lain
seperti apache, karena akan bentrok)
3. SQLServer (Express) terinstall dan servicenya berjalan dengan baik
4. Terinstall Microsoft SQLServer Management studio express (dapat di-download di
Microsoft.com)
Disarankan :
1. Sistem anda minimal memiliki RAM 512MB (256 sangat minimal) dengan clock speed prosessor
diatas 1.5 Ghz
2. Tidak menjalankan program lain yang memakan resource system, karena visual studio sangat
boros resource seiring dengan besarnya project.

5 Teknik backup dan deployment | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Teknik backup dan deployment
1. Isi Project anda akan ada pada wwwroot dari IIS (yang defaultnya ada di C:Inetpubwwwroot),
silahkan membackup data yang ada disini.
2. Database anda akan ada pada folder data dari sql server yang defaultnya di C:Program
FilesMicrosoft SQL ServerMSSQL.1MSSQLData terdiri dari 2 file utama yaitu : katalog.mdf
dan katalog_log.ldf
3. Jika memindahkan content halaman ke computer lain (di copy ke folder wwwroot IIS computer
target), dan berusaha untuk membukanya di lokasi baru dengan VS, anda akan mendapatkan
error bahwa folder tersebut belum “ditandai” sebagai “aplikasi”.
JIka anda “memaksa” buka web site tersebut, maka saat di-RUN akan muncul error yang
berkaitan dengan authentication mode , dst. Solusinya adalah dengan mensetting folder
tersebut dari IIS terlebih dahulu:
a. Buka IIS Admin

b. Klik Kanan folder yang baru dicopy, pilih properties

c. Pada Tab Directory, Klik Tombol Create di bagian Application Setting, Klik Appy lalu OK
d. buka lagi dari VS
4. Dalam proses pemindahkan database, jika ingin memasukkan database dari file luar , gunakan
fitur attach (klik kanan pada database) pada sqlserver management studio lalu pilih file *.mdf
yang ingin di-attach

BAB 1
Katalog barang
Default.aspx
+
Default.aspx.vb
Menampilkan daftar
barang yang ditawarkan
berdasarkan kategori,
menampilkan barang –
barang promosi
Produk.aspx
+
Produk.aspx.vb
Menampilkan Informasi
lengkap dari barang yang
dipilih
MasterPage.master
+
MasterPage.master.vb
Halaman Master yang
menjadi template untuk
semua halaman dalam
projek
Web.config
Halaman configurasi
proyek yang memuat
string koneksi
ManajemenData.aspx
+
ManajemenData.aspx.vb
Halaman untuk
menambah, mengedit dan
menghapus kategori,
barang, dan promosi

9 Pembuatan User Baru pada SQL SERVER | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Pembuatan User Baru pada SQL SERVER
Buka Microsoft SQL Server Management Studio Express
Untuk pertama kali, gunakan windows authentication, klik connect
Proyek ini menggunakan user yang berdasarkan sql authentication, jadi, kita buat dulu user baru. Pada
panel kiri, expand bagian security-login, lalu klik kanan dan pilih new login

Pada bagian General, isi Login name dengan dotnet (anda bisa menggunakan nama lain namun koneksi
pada proyek menggunakan acuan nama dotnet), pilih SQl Server authentication dan isikan kedua kotak
password dengan nilai dotnet, jangan lupa hilangkan centang pada Enforce password policy jika anda
tidak menggunakan Windows 2003 server
Pada bagian Server Roles, centang hak sebagai sysadmin, lalu klik ok

Untuk Memungkinkan user login dengan SQL Server authentication, maka klik kanan nama server di
panel kiri lalu pilih properties
Pada bagian security pilih SQL Server and Windows Authentication mode klik OK lalu restart service
SQLServer

12 Desain Database dan Table | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Desain Database dan Table
Selanjutnya kita buat databasenya:
Pada panel kiri klik kanan Databases dan pilih new Database
Pada bagian general isikan nama database dengan katalog, lalu klik OK
Setelah database terbentuk, sekarang kita buat table kategori. Expand katalog lalu klik kanan Tables dan
pilih new table
Isi field nya sesuai dengan gambar dibawah, jangan lupa mensave dengan nama kategori

Lanjutkan dengan table barang
Dan table promosi
Selanjutnya kita tarik relation shipnya, klik kanan Database Diagrams, lalu pilih New Database Diagram
Masukkan ketiga table, lalu tarik relation nya. Dari :
(Jangan terbalik)
1. kd_brg table barang ke kd_brg table promosi
2. cat_id table promosi ke cat_id table barang

Save diagram, ketika ditanya bahwa ini akan mengubah data pada table, setujui
Langkah selanjutnya ialah menyiapkan data dummy(uji coba) agar nanti ada data yang bisa ambil dari
proyek, sesuaikan keinginan anda, disini penulis menggunakan data barang – barang computer dalam 3
kategori. (ingat data hanya bisa dimasukkan berurutan dari kategori-barang-promosi)

16 Pembuatan Project | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Pembuatan Project
Buat project baru dengan memilih menu File-NewWebSite 1
Pilih Locationnya HTTP (pada IIS) dan namanya (catalog) lalu klik OK
1
Visual Studio pada contoh menggunakan environment web development (ditanyakan saat pertama kali visual
studio dijalankan) sehingga mungkin agak berbeda dengan environment anda

17 Pembuatan Project | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Setelah beberapa waktu, akan terbuka halaman standar (default.aspx) dengan sebuah file lain
(web.config) dan sebuah folder App_Data di solution explorer
Untuk menampung gambar maka kita buat sebuah folder images dengan cara mengklik kanan lokasi di
Solution Explorer lalu memilih new folder dan member nama images.
Didalamnya dibuat lagi 2 folder, satu untuk gambar ukuran penuh (produk) dan satu untuk gambar kecil
(thumbnail), sehingga strukturnya seperti berikut:
Tambahkan sebuah halaman web kosong dengan nama Produk.aspx agar nanti mudah untuk
memberikan link(caranya lihat digambar pembuatan masterPage dihalaman 8, pilih template Web
Form), perhatikan bahwa halaman produk.aspx, default.aspx dan masterpage.master selevel dibawah
lokasi root

18 Halaman MasterPage.master | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Halaman MasterPage.master
Klik kanan pada nama proyek di Solution Explorer dan pilh add new item
pilih MasterPage dan klik Add

19 Halaman MasterPage.master | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Desain halaman Master
Ada 2 buah object utama yaitu:
Jenis Object Nama Object Properties
Label Lbl_infoLogin Text=
Style=[sesuai keinginan]
ContentPlaceHolder ContentPlaceHolder1
Lima gambar yang ada merupakan 5 object Image yang diisi dengan gambar sesuai kebutuhan dari
folder images yang telah dibuat di awal

20 Halaman Default.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Halaman Default.aspx
Halaman ini otomatis terbuat saat project dibuat, namun karena kita ingin menggunakan masterpage
(template) pada halaman ini, maka buka tampilan source dan ganti syntax yang ada menjadi:
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true"
CodeFile="Default.aspx.vb" Inherits="_Default" title="Katalog Supply"
EnableSessionState="True" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
</asp:Content>
Lalu pindah ke mode design dan desain seperti berikut:
Adapun objectnya ialah:

SqlDataSourc
e
SqlDataSource
1
Pilih New Connection
Pada dialog add connection
Pastikan datasource nya ialah sqlClient (jika bukan klik change dan
pilih SqlClient)

Isi nama server dengan nama yang sama di sql server management
studio
Tentukan username, nama database

Test koneksinya, jika berhasil klik OK. Seharusnya halaman configurasi
terbuka dengan koneksi yang terpilih

Klik Next lalu tentukan namanya, disini saya menggunakan
KatalogConnectionString (akan dipakai diseluruh projek)
Halaman select statement terbuka

Pilih custom (seperti diatas) lalu klik next.
Ketik syntax sql yang memilih barang yang sedang promosi (atau
gunakan Query Builder) lalu klik Next
Klik Finish
SqlDataSource
2
ConnectionString=katalogConnectionString

SqlDataSource
3
Parameter : (objek DropDownList 1 sudah harus ada terlebih dahulu)
DataList DataList1 DataSourceId=SqlDataSource1
DataKeyField=kd_brg
Tambahkan sebuah Link Button dari dalam template (Klik panah
segitiga hijau kecil di kanan atas kontrol DataList1) Lalu pilih Edit
Template

Letakkan Kursor di posisi yang diinginkan lalu tambahkan sebuah
LinkButton
Set Properti LinkButton itu dengan:
ID=Btn_feature
CommandName=select
Text=info
Lalu klik End Template Editing
Untuk mendapatkan Desain DataList (sesuaikan keinginan), perhatikan
bahwa anda dapat mengganti baris dengan menambahkan tag <br />
antara <asp:Label> (ketik dari modus source)
DropDownLis
t
DropDownList
1
DataSourceId=SqlDataSource2
Jangan lupa mencentang enable AutoPostBack, lalu tentukan field
yang ingin dimunculkan dalam daftar (field to display) dan field yang
menjadi nilai kembalian control tersebut (field for the value)

GridView GridView1 DataSourceId=SqlDataSource3
Tambahkan image field dengan memilih ImageField pada Available
fields(lihat gambar) lalu klik tombol Add, lalu letakkan urutannya di
paling atas (klik panah atas biru disamping Selected fields)

DataImageUrlField=thumb
DataImageUrlFormat=~/images/thumbnail/{0}
(Untuk Keterangan lebih lanjut lihat endNotei
)
Tambahkan sebuah select field (ada di dalam kelompok
CommandField) dan letakkan urutannya di paling bawah

Jangan lupa untuk menset :
SelectText=Info
ShowSelectButton=True
Untuk bound field yang lain, dapat diset secara individu di panel
kanan, khususnya pada bagian header text dan itemstyle
Adapun code nya ialah:

Info tentang response.redirect dapat anda lihat di lampiranii
Info tentang request.querystring dapat anda lihat di lampiraniii
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Me.Load
If Not IsPostBack Then 'jika tidak dalam mode post back
Dim kategori As String
kategori = Request.QueryString("kat") 'ambil nilai parameter kat
If Not kategori Is Nothing Then
DropDownList1.SelectedValue = kategori 'set ddl ke isi kat
End If
End If
End Sub
Protected Sub DataList1_SelectedIndexChanged(ByVal sender As Object, ByVal e
As System.EventArgs) Handles DataList1.SelectedIndexChanged
Dim kd_brg As String
'isi kd_brg dengan nilai terpilih dari datalist satu yang telah di trim
kd_brg = DataList1.SelectedValue.ToString().Trim()
'isi kategori dengan pilihan dari dropdownlist1
kategori = DropDownList1.SelectedValue
'langsung redirect (Oper alamat) ke halaman produk beserta parameternya
Response.Redirect("Produk.aspx?kd_brg=" + kd_brg + "&kat=" + kategori)
End Sub
Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e
As System.EventArgs) Handles GridView1.SelectedIndexChanged
Dim kd_brg As String
'isi kd_brg dengan nilai terpilih dari gridview satu yang telah di trim
kd_brg = GridView1.SelectedValue.ToString().Trim()
'isi kategori dengan pilihan dari dropdownlist1
kategori = DropDownList1.SelectedValue
'langsung redirect (Oper alamat) ke halaman produk beserta parameternya
Response.Redirect("Produk.aspx?kd_brg=" + kd_brg + "&kat=" + kategori)
End Sub
End Class

32 Halaman Produk.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Halaman Produk.aspx
Halaman ini adalah halaman lanjutan dari default.aspx yang berfungsi untuk menampilkan detail produk
yang dipilih dengan ilustrasi gambar yang lebih besar dan informasi lebih lengkap.
Halaman ini dicapai saat user mengklik Link Info yang ada pada gridview atau datalist.
Desainlah halaman seperti berikut
Object nya ialah :
SqlDataSour
ce
SqlDataSourc
e1

Parameternya:
DetailsView DetailsView1 DataSourceID=SqlDataSource1
DataKeyNames=kd_brg
Fields=
Tambahkan sebuah ImageField di paling atas dan jangan lupa menset

DataImageUrlField dengan field pic dan DataImageUrlFormat yang
menyesuaikan dengan posisi gambar
Button Btn_back Text=kembali
Code:
Partial Class produk
Protected Sub Btn_back_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Btn_back.Click
kategori = Request.QueryString("kat")
Response.Redirect("default.aspx?kat=" + kategori)
End Sub
Handles Me.Load
Response.Expires = 0
End Sub
End Class

35 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Halaman ManajemenData.aspx
Halaman ini berfungsi untuk menambah, mengedit, atau menghapus data barang yang dapat
ditampilkan.
Desainlah halamannya seperti dibawah

Terdapat 5 SqlDataSource dengan 5 fungsi yang berbeda (yang keempat dan kelima sebenarnya bisa
disatukan, namun disini dipisah karena object yang mengaksesnya berbeda, dalam pengembangan yang
efisien, gabungkan kedua SqlDataSource ini)
Nama Command yang dipakai Pada Table
SqlDataSource1 SELECT
UPDATE
INSERT
DELETE
kategori
SqlDataSource2 SELECT Kategori (parsial)
UPDATE
INSERT
DELETE
Barang,promosi(parsial)
Barang
Barang
Barang
UPDATE
INSERT
DELETE
Promosi
Promosi
Promosi
UPDATE
INSERT
DELETE
Promosi

Object nya ialah:
Tipe Object Nama Object Properties
SqlDataSourc
e
Connection
String=
Katalog
Connection
String
SqlDataSource1
Pada bagian Advanced

SqlDataSource2
SqlDataSource3
Ada 4 Command yang diisi, anda bisa menggunakan query builder
untuk membantu membuat command, Trik untuk mempercepat
proses pembuatan command Update, insert, dan delete dapat
dilihat pada lampiran iv

SqlDataSource4
Pada bagian WHERE
Pilih Kolom kd_brg, lalu source= control , Control Name=GridView2
Klik Add

SqlDataSource5
GridView GridView1 DataSourceID=SqlDataSource1
DataKeyNames=cat_id
AllowGenerateColumns=false

GridView2 DataSourceID=SqlDataSource3
DataKeyNames=kd_brg
Ubah field terakhir (promo_kd_brg) dengan properties:
DataFormatString=Yes

GridView3 DataSourceID=SqlDataSource4
DataKeyNames=kd_brg
HTML Table ID=HtmlTable1 2 Kolom, 5 baris
TextBox
(posisi
Pada
HTMLTable1)
Txt_catid Posisi = baris 2 kolom 2,3,4
Text=Txt_catname
Txt_catinfo
Button
(posisi
Pada
HTMLTable1)
Btn_save Text=save
Btn_reset Text=reset

DropDownLis
t
DropDownList1
ChooseDataSource
HTML Table ID=HTMLTable2 2 Kolom, 11 Baris
TextBox
(Posisi
Pada
HTMLTable2)
Txt_kd_brg Kolom 2 Baris 2,3,4,5,6,7,9,10
Text=Txt_nama_brg
Txt_info_brg
Txt_path_thumb
Txt_path_pic
Txt_harga_jual
Txt_info_promosi
Txt_harga_promo
si
CheckBox Chk_promo Posisi = HTMLTable2 baris 8 Kolom 2
AutoPostBack=True
Text=Yes
Button Btn_save_barang Posisi = HTMLTable2 baris 11 Kolom 1
Text=save
Visible=false
Btn_reset_barang Posisi = HTMLTable2 baris 11 Kolom 2
Text= reset
Visible=false
Codenya :
Code yang menangani saat tombol save dan reset (kategori) ditekan:
Imports System.Data.SqlClient

Code untuk menangani saat tombol reset barang ditekan
Protected Sub btn_reset_barang_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles btn_reset_barang.Click
'kosongkan semua textbox barang
txt_kd_brg.Text = ""
txt_nama_brg.Text = ""
txt_info_brg.Text = ""
txt_path_pic.Text = ""
txt_path_thumb.Text = ""
txt_harga_jual.Text = ""
txt_info_promosi.Text = ""
txt_harga_promosi.Text = ""
chk_promo.Checked = False
End Sub
Protected Sub btn_save_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Handles btn_save.Click
'tentukan parameter masukan
SqlDataSource1.InsertParameters("cat_id").DefaultValue = txt_catid.Text
SqlDataSource1.InsertParameters("cat_name").DefaultValue = txt_catname.Text
SqlDataSource1.InsertParameters("cat_info").DefaultValue = txt_catinfo.Text
SqlDataSource1.Insert()
'hapus isi kolom
Call btn_reset_Click(Me, e)
'bind ulang kontrol yang membutuhkan
SqlDataSource2.DataBind()
DropDownList1.DataBind()
End Sub
Protected Sub btn_reset_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles btn_reset.Click
'kosongkan semua textbox untuk kategori
txt_catid.Text = ""
txt_catinfo.Text = ""
txt_catname.Text = ""
End Sub

Untuk menangani saat tombol save barang ditekan
Protected Sub btn_save_barang_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles btn_save_barang.Click
'InsertCommand="INSERT INTO [barang] ([kd_brg], [cat_id], [nama_brg],
[info], [thumb], [pic], [harga_jual])
'VALUES (@kd_brg, @cat_id, @nama_brg, @info, @thumb, @pic, @harga_jual)
Try
'tentukan parameter
SqlDataSource3.InsertParameters("kd_brg").DefaultValue = txt_kd_brg.Text
SqlDataSource3.InsertParameters("cat_id").DefaultValue =
DropDownList1.SelectedValue.ToString
SqlDataSource3.InsertParameters("nama_brg").DefaultValue =
txt_nama_brg.Text
SqlDataSource3.InsertParameters("info").DefaultValue = txt_info_brg.Text
SqlDataSource3.InsertParameters("thumb").DefaultValue =
txt_path_thumb.Text
SqlDataSource3.InsertParameters("pic").DefaultValue = txt_path_pic.Text
SqlDataSource3.InsertParameters("harga_jual").DefaultValue =
CLng(txt_harga_jual.Text)
Catch ex As SqlException
If ex.Number = 2627 Then 'duplicate key
'jika ada duplicate key, artinya barang sudah ada, maka dilanjutkan
ke bagian promosi
End If
End Try
If chk_promo.Checked = True Then
Try
'InsertCommand="INSERT INTO [promosi] ([kd_brg], [info],
[harga_diskon])
SqlDataSource5.InsertParameters("kd_brg").DefaultValue =
txt_kd_brg.Text
SqlDataSource5.InsertParameters("info").DefaultValue =
txt_info_promosi.Text
SqlDataSource5.InsertParameters("harga_diskon").DefaultValue =
CLng(txt_harga_promosi.Text)
SqlDataSource5.DataBind()
GridView2.DataBind()
Catch ex As SqlException
If ex.Number = 2627 Then 'duplicate key
'do nothing
End If
End Try
End If
'hapus isi kolom
Call btn_reset_barang_Click(Me, e)
End Sub

Untuk menangani lainnya:
Protected Sub chk_promo_CheckedChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles chk_promo.CheckedChanged
'sesuaikan visibility kedua textbox dengan nilai checked dari chk_promo
txt_info_promosi.Visible = chk_promo.Checked
txt_harga_promosi.Visible = chk_promo.Checked
End Sub
Handles Me.Load
'jika bukan admin, tolak isi content
If Session("hak") <> "1" Then
Dim strErrMsg = "<script>alert('Anda bukan admin, login dulu sebagai
admin');</script>"
'tampilkan pesan kesalahan
Response.Write(strErrMsg)
Response.AddHeader("REFRESH", "0;URL=default.aspx")
End If
End Sub
Protected Sub GridView2_SelectedIndexChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles GridView2.SelectedIndexChanged
'ambil data dari gridview lalu tampilkan ke textbox, perhatikan bahwa
'ini amat tergantung pada desain dan urutan field pada gridview,
'Cell dimulai dari index 0 pada paling kiri
txt_kd_brg.Text = GridView2.SelectedRow.Cells(1).Text
txt_nama_brg.Text = GridView2.SelectedRow.Cells(3).Text
txt_info_brg.Text = GridView2.SelectedRow.Cells(4).Text
txt_path_thumb.Text = GridView2.SelectedRow.Cells(5).Text
txt_path_pic.Text = GridView2.SelectedRow.Cells(6).Text
txt_harga_jual.Text = GridView2.SelectedRow.Cells(7).Text
End Sub
Protected Sub GridView3_RowDeleted(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.GridViewDeletedEventArgs) Handles GridView3.RowDeleted
'bind ulang data ke gridview
End Sub

BAB 2
Session, Login dan daftar baru
LoginPage.aspx
+
LoginPage.aspx.vb
Halaman Login untuk user
DaftarBaru.aspx
+
DaftarBaru.aspx.vb
Halaman pendaftaran
bagi user baru

49 Setting IIS untuk Session | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Setting IIS untuk Session
Setelah manajemen data selesai, kita tambahkan fitur Login, saat ini seharusnya dalam project ada 3 file
utama:
1. Default.aspx +code
2. Produk.aspx +code
3. ManajemenData.aspx + code
4. MasterPage.master + code
Kita tidak akan memanfaatkan fitur internal asp.net 2.0 untuk login (karena untuk belajar ), kita akan
membuat sendiri proses login.
Agar dapat menggunakan login, kita harus meng-enable session pada asp, berikut adalah caranya:
1. Buka IIS Manager, Buka properties Website, pilih tab ASP.NET lalu klik edit global configuration
2. Pilih tab state management , lalu set seperti pada gambar
3. Konfirmasi sesuai kebutuhan.

50 Modifikasi (1) Struktur Database | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Modifikasi (1) Struktur Database
Berikutnya, kita buat table yang dibutuhkan.
Pada database katalog, buat table Pengguna dengan detail:
Hak ialah code untuk menentukan apakah user adalah admin atau tidak. Disini kode 1 ialah Admin dan
kode 2 ialah user pelanggan.
Field Hak diisi dengan default value 2, jadi tidak perlu dimasukkan dalam insert query (setiap orang yang
mendaftar otomatis menjadi user biasa)

51 Modifikasi (1)Halaman MasterPage.master | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Modifikasi (1)Halaman MasterPage.master
Berikutnya kita buat dulu halaman kosong (web form kosong) dengan nama :
LoginPage.aspx
DaftarBaru.aspx
pastikan kedua halaman itu menggunakan master page yang telah ada
Selanjutnya kita edit halaman masterpage.master agar ada tampilan seperti dibawah saat dilihat dalam
browser
Tambahkan sebuah Label, 2 Link Button, dan button dibawah gambar dan sebelum ContentPlaceHolder
adapun propertiesnya:
Tipe Control Nama Control Properties
Label Lbl_infoLogin Text=Label (bebas)
Visible=true
LinkButton LBtn_Login PostBackUrl=~/LoginPage.aspx
Visible=False
Text=Login
Button Btn_Logout Text=Logout
Visible=True
LinkButton LBtn_Manage PostBackUrl=~/ManajemenData.aspx
Text=Manajemen Data
Visible=False

Tambahkan code berikut pada masterpage.master.vb:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Session("logged") Is Nothing Then
lbl_infoLogin.Text = "Anda Belum Login!"
Lbtn_Login.Visible = True
Btn_Logout.Visible = False
LBtn_Manage.Visible = False
ElseIf Session("logged") = True Then
lbl_infoLogin.Text = "Selamat datang, " & Session("Username").ToString
Btn_Logout.Visible = True
'jika admin (kode hak untuk admin =1)
If Session("hak") = "1" Then
LBtn_Manage.Visible = True
End If
End If
End Sub
Protected Sub Lbtn_logout_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Btn_Logout.Click
Session.Clear()
Response.Redirect("default.aspx")
End Sub

53 Halaman LoginPage.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Halaman LoginPage.aspx
Pada halaman LoginPage.aspx, desain contentnya seperti berikut:
Terdapat 5 object dengan properties:
Link Button LBtn_DaftarUser PostBackUrl=~/DaftarBaru.aspx
Text=Daftar disini
TextBox Txt_UserName Text=
TextMode=SingleLine
TextBox Txt_Password Text=
TextMode=Password
Button Btn_Login Text=Login
SqlDataSource SqlDataSource1 ConnectionString=KatalogConnectionString
Setting = lihat gambar

Hanya perintah select saja, lalu klik tombol where dan tambahkan 2 parameter

Lalu tambahkan code nya:
Imports System.Data
Imports System.Web.Configuration
Partial Class LoginPage
Protected Sub Btn_login_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Btn_login.Click
Dim cs As String =
WebConfigurationManager.ConnectionStrings("katalogConnectionString").ConnectionString
Dim MyConnection As New SqlConnection(cs)
MyConnection.Open()
Dim MyCommand As New SqlCommand()
MyCommand.Connection = MyConnection
Dim username As String = ""
Dim hak As String = ""
'cek keberadaan di database
Try
MyCommand.CommandText = "SELECT [UserName], [Password], [Hak] FROM [Pengguna]
WHERE (([UserName] = @UserName) AND ([Password] = @Password))"
MyCommand.Parameters.AddWithValue("@UserName", txt_Username.Text)
MyCommand.Parameters.AddWithValue("@Password", txt_Password.Text)
Dim reader As SqlDataReader = MyCommand.ExecuteReader()
While reader.Read()
username = reader("UserName")
hak = reader("Hak")
End While
Catch ex As Exception
End Try
If username <> "" Then 'jika data ada
Session("logged") = True
Session("username") = username
Session("hak") = hak
End If
'redirect
Response.Redirect("default.aspx")
End Sub
End Class

57 Halaman DaftarBaru.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Halaman DaftarBaru.aspx
Pada halaman daftarBaru.aspx tambahkan desain seperti berikut:
Dengan object:
TextBox
Txt_Username Text=
Txt_Password TextMode=Password
Text=Txt_CPassword
Txt_nama
Text=
Txt_alamat
Txt_telepon
Txt_kartuKredit
Button Btn_submit Text=Submit
Label Lbl_Info Text=
LinkButton Lbtn_backToLogin PostBackUrl= ~/LoginPage.aspx
Properties lain Lihat Gambar

Properties SQLDataSource1
pastikan generate INSERT,UPDATE, and DELETE tercentang pada kotak dialog advanced

Tambahkan code nya pada daftarbaru.aspx.vb:
Partial Class DaftarBaru
Protected Sub btn_Submit_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles btn_Submit.Click
'cek apakah password benar
If txt_password.Text <> txt_CPassword.Text Then
'isi info lalu keluar
lbl_Info.Text = "Password tidak sama"
Exit Sub
End If
'coba isi ke db
Try
SqlDataSource1.InsertParameters("Username").DefaultValue =
txt_Username.Text
SqlDataSource1.InsertParameters("Password").DefaultValue =
txt_password.Text
SqlDataSource1.InsertParameters("Nama").DefaultValue = txt_nama.Text
SqlDataSource1.InsertParameters("Alamat").DefaultValue = txt_alamat.Text
SqlDataSource1.InsertParameters("Telp").DefaultValue = txt_telepon.Text
SqlDataSource1.InsertParameters("NoKartuKredit").DefaultValue =
txt_KartuKredit.Text
'hak sebagai customer diisi default value db
Catch x As SqlException
If x.ErrorCode = 2627 Then 'username sudah ada
lbl_Info.Text = "Username sudah ada, pilih username lain"
Exit Sub
End If
lbl_Info.Text = "ada error tak terduga"
Exit Sub
End Try
lbl_Info.Text = "Data berhasil dimasukkan"
End Sub
End Class

BAB 3
Kereta Belanja, Pemesanan dan Laporan
ListKeretaBelanja.aspx
+
ListKeretaBelanja.aspx.vb
Halaman verifikasi yang
menampilkan daftar
belanja, user dapat
mengedit jumlah belanja
atau membatalkan item
KonfirmasiPembelian.aspx
+
KonfirmasiPembelian.aspx.vb
Halaman konfirmasi yang
menampilkan daftar belanja
beserta data pembeli
LaporanPenjualan.aspx
+
LaporanPenjualan.aspx.vb
Halaman laporan penjualan
(pemesanan) yang
menampilkan data sesuai
kurun waktu tertentu

Modifikasi (2) Struktur Database
Selanjutnya untuk memungkinkan user membuat daftar belanja, 2 table berikut dibuat:
Field Sub Total pada table Detail_pesan adalah formula yang tipe datanya tidak dinyatakan. Pilih Field
lalu isi formulanya pada bagian formula:

Tambahkan relationship pada diagram menjadi

63 Pembuatan Kelas | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Pembuatan Kelas
Kita buat dahulu kelas yang akan menampung objek belanjaan
Klik kanan pada Solution Explorer lalu, pilih add asp.net folder dan klik app_code
Klik Kanan app_code pilih new item lalu buat kelas baru dengan nama ItemKereta

tambahkan codenya:

Imports Microsoft.VisualBasic
Public Class ItemKereta
'deklarasi property
Private _kd_brg As String
Private _nama_brg As String
Private _harga As Long
Private _qty As Integer
'method property
Public Property kd_brg() As String
Get
Return _kd_brg
End Get
Set(ByVal value As String)
_kd_brg = value
End Set
End Property
Public Property nama_brg() As String
Get
Return _nama_brg
End Get
Set(ByVal value As String)
_nama_brg = value
End Set
End Property
Public Property harga() As Long
Get
Return _harga
End Get
Set(ByVal value As Long)
_harga = value
End Set
End Property
Public Property qty() As Integer
Get
Return _qty
End Get
Set(ByVal value As Integer)
_qty = value
End Set
End Property
'property read only
Public ReadOnly Property SubTotal() As Double
Get
Return _harga * _qty
End Get
End Property
'konstruktor
Public Sub New(ByVal kd_brg As String, ByVal nama_brg As String, ByVal harga As
Long, ByVal qty As Integer)
Me.kd_brg = kd_brg
Me.nama_brg = nama_brg
Me.harga = harga
Me.qty = qty
End Sub
End Class

Buat sebuah kelas lagi dengan nama kereta lalu tambahkan code berikut:
Imports Microsoft.VisualBasic
Imports System.Collections.Generic
Public Class Kereta
'deklarasi property
Private _keretaBelanja As List(Of ItemKereta)
'konstruktor
Public Sub New()
_keretaBelanja = New List(Of ItemKereta)()
End Sub
'untuk ambil isi
Public Function GetItems() As List(Of ItemKereta)
Return _keretaBelanja
End Function
'untuk nambah isi
Public Sub AddItems(ByVal kd_brg As String, ByVal nama_brg As String, ByVal harga As Long, ByVal
qty As Integer)
Dim barang_ada As Boolean = False 'selalu anggap barang belum ada dulu
'cek di dalam daftar
For Each item As ItemKereta In _keretaBelanja
If item.kd_brg = kd_brg Then
item.qty += 1
barang_ada = True
End If
Next
'jika barang belum ada
If Not barang_ada Then
Dim item As New ItemKereta(kd_brg, nama_brg, harga, 1)
_keretaBelanja.Add(item)
End If
End Sub
'untuk tambah qty
Public Sub UpdateQty(ByVal index As Integer, ByVal qty As Integer)
Dim item As ItemKereta
item = _keretaBelanja(index)
item.qty = qty
End Sub
'untuk delete item
Public Sub DeleteItem(ByVal index As Integer)
_keretaBelanja.RemoveAt(index)
End Sub
'untuk lihat jumlah item
Public ReadOnly Property Count() As Integer
Get
Return _keretaBelanja.Count
End Get
End Property
End Class

67 Modifikasi halaman Produk.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Modifikasi halaman Produk.aspx
Tambahkan tombol “tambah” pada produk.aspx
Propertiesnya:
selectquery=
Parameter=

DetailsView DetailsView1 DataSourceID=SqlDataSource1
ItemStyle=(sesuaikan keinginan anda, atur via
properties Fields)
Button Btn_back Text= Kembali
Btn_Add Text= Tambah
Tambahkan kode untuk tombol btn_back
Import beberapa referensi sebelum kelas
Tambahkan code berikut untuk tombol btn_add
Imports System.Data
Partial Class produk
…………………….
Protected Sub Btn_back_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Btn_back.Click
kategori = Request.QueryString("kat")
Response.Redirect("default.aspx?kat=" + kategori)
End Sub

Protected Sub btn_Add_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles
btn_Add.Click
'cek apakah sudah login
If Session("logged") = True Then
Dim kd_brg As String = Request.QueryString("kd_brg")
Dim catid As String = Request.QueryString("kat")
Dim nama_brg As String = ""
Dim harga_jual As Long
Dim harga_diskon As Long
'ambil data dari database
Dim cs As String =
WebConfigurationManager.ConnectionStrings("katalogConnectionString").ConnectionString
MyConnection.Open()
Try
MyCommand.CommandText = "SELECT barang.kd_brg, barang.nama_brg, barang.harga_jual,
promosi.harga_diskon " & _
"FROM barang LEFT OUTER JOIN promosi ON barang.kd_brg = promosi.kd_brg WHERE
barang.kd_brg='" & _
kd_brg & "'"
While reader.Read()
nama_brg = reader("nama_brg")
harga_jual = reader("harga_jual")
harga_diskon = reader("harga_diskon")
End While
End Try
'ambil harga termurah
Dim harga As Long
If harga_diskon <> 0 Then
harga = harga_diskon
Else
harga = harga_jual
End If
'buat kereta belanja
Dim cart As Kereta
If Session("cart") Is Nothing Then
cart = New Kereta
Session("cart") = cart
Else
cart = Session("cart")
End If
'tambahkan item
cart.AddItems(kd_brg, nama_brg, harga, 1)
Response.Redirect("ListKeretaBelanja.aspx?kd_brg=" & kd_brg & "&kat=" & catid)
Else
Dim isi As String
isi = "anda belum login, tolong login dulu"
Dim strErrMsg = "<script>alert('" & isi & "');</script>"
End If
End Sub

70 HALAMAN ListKeretaBelanja | Diktat ASP.NET 2.0 – D3 Unggulan UBL
HALAMAN ListKeretaBelanja
Buat halaman ListKeretaBelanja dengan desain:
Propertiesnya:
LinkButton LBtn_BackToList Text=Kembali ke daftar
GridView GridView1 AutoGenerateColumns=false
AutoGenerateDeleteButton=true
AutoGenerateSelectButton=true
DataSourceId=[kosong]
Fields=

Field pertama ialah templateField dengan header text=No
sisanya ialah BoundField dengan Headertext dan style
sesuai kebutuhan
Panel Panel1 Visible=false
<Table> None(object HTML) 2 Kolom 3 baris
border=1 (setting dari tampilan source)
Ada didalam panel1
Label Lbl_Nama_brg Posisi: Kolom Pertama Baris 3
Text =Silahkan pilih diatas
Style=sesuaikan kebutuhan
TextBox Txt_jumlah Posisi: Kolom Kedua Baris 3
Text=
Style=sesuaikan kebutuhan
DropDownList DropDownList1 AutoPostBack=true
Items=
Label Lbl_jum_item Font=larger
style=sesuaikan keinginanLbl_total_bayar
Button Btn_Edit Text=edit jumlah
Visible=false
Btn_Save Text=save pembelian

Lalu tambahkan codenya
Buat instance dari kelas kereta
Buat sebuah sub baru
Buat penanganan page load
Handles Me.Load
'jika session cart tidak ada, maka laporkan kesalahan session
If Session("cart") Is Nothing Then
Dim isi As String
isi = "Session anda kosong, tolong ulangi dari halaman utama"
Dim strErrMsg = "<script>alert('" & isi & "');</script>"
Exit Sub
End If
'isi cart dengan session cart
Dim cart As Kereta
GridView1.DataSource = cart.GetItems()
'bind data ke gridview
'hitung totalnya
Call hitung_total()
End Sub
'sub ini untuk menghitung jumlah item dan harga total
Protected Sub hitung_total()
Dim x As Integer
Dim jum_item As Integer = 0
Dim Total As Double = 0.0
For x = 0 To GridView1.Rows.Count - 1 Step 1
'hitung jumlah item
jum_item += CInt(GridView1.Rows(x).Cells(5).Text.ToString)
Total += Double.Parse(GridView1.Rows(x).Cells(6).Text)
Next
lbl_jumlah_item.Text = jum_item
Lbl_Total_Bayar.Text = Total
End Sub
Partial Class ListKeretaBelanja
Public cart As Kereta

Penanganan GridView
Penanganan DropDownList
Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles DropDownList1.SelectedIndexChanged
'agar textbox diisi dengan pilihan, data tidak langsung disave
txt_jumlah.Text = DropDownList1.SelectedValue
End Sub
Protected Sub GridView1_RowCreated(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowCreated
'buat(iterasi)untuk nomor urut
Dim x As Integer
GridView1.Rows(x).Cells(1).Text = (x + 1).ToString
Next
End Sub
Protected Sub GridView1_RowDeleting(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.GridViewDeleteEventArgs) Handles GridView1.RowDeleting
cart.DeleteItem(e.RowIndex)
Call hitung_total()
End Sub
Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles GridView1.SelectedIndexChanged
'enable panel
Panel1.Visible = True
btn_edit.Visible = True
lbl_nama_brg.Text = GridView1.SelectedRow.Cells(3).Text
txt_jumlah.Text = GridView1.SelectedRow.Cells(5).Text
End Sub

Penanganan Tombol
Protected Sub btn_edit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Handles btn_edit.Click
'isi cart dengan data Session
cart.UpdateQty(GridView1.SelectedIndex, CInt(txt_jumlah.Text))
Call hitung_total()
'disable panel1 agar tidak terjadi logic error
Panel1.Visible = False
btn_edit.Visible = False
End Sub
Protected Sub LBtn_backToList_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles LBtn_backToList.Click
Dim kd_brg As String = Request.QueryString("kd_brg")
Response.Redirect("default.aspx?kd_brg=" & kd_brg & "&kat=" & catid)
End Sub
Protected Sub Btn_Save_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Btn_Save.Click
'isi session baru untuk jumlah item dan total
Session("jml_item") = lbl_jumlah_item.Text
Session("total") = Lbl_Total_Bayar.Text
'redirect ke halaman konfirmasi
Response.Redirect("KonfirmasiPembelian.aspx?kat=" & catid)
End Sub

75 HALAMAN KonfirmasiPembelian | Diktat ASP.NET 2.0 – D3 Unggulan UBL
HALAMAN KonfirmasiPembelian
Halaman ini memberikan data belanja dan data pembeli dan meminta konfirmasi apakah data belanja
ingin disimpan (dipesan jika dilihat dari sudut pandang pembeli) berdasarkan informasi yang
ditampilkan. Desainlah tampilan seperti gambar berikut:
Adapun propertiesnya:

SqlDataSource
(semua menggunakan
ConnectionString=
KatalogConnection
String)
SqlDataSource1
Where
SqlDataSource2
Advanced: Centang Generate UPDATE, DELETE, INSERT
statement

SqlDataSource3
Advanced: Centang Generate UPDATE, DELETE, INSERT
DetailsView DetailsView1 DataSourceID=SqlDataSouce1
GridView GridView1 AutoGenerateColumns=false
DataSourceID=[kosong]
Fields=[sama dengan gridview1 halaman ListKeretaBelanja]
Saran : Copy saja dari halaman ListKeretaBelanja lalu
hilangkan delete dan select nya)
Label Lbl_jum_item Font=larger
style=sesuaikan keinginanLbl_total_bayar
Button
(style sesuaikan
sendiri)
Btn_yes Text= Ya! tagih dan kirimkan barangnya
Btn_no Text= Tidak, saya ingin batal
Btn_edit Text= Saya masih ingin mengubah daftar belanja saya
Tambahkan import sebelum kelas
Imports System.Data

Code untuk page load
Code untuk menampilkan nomor baris pada gridview
'buat(iterasi)untuk nomor urut
Dim x As Integer
'ingat, nomor urut sekarang ada di cell 1 (index 0)karena tidak ada
kolom delete dan select
GridView1.Rows(x).Cells(0).Text = (x + 1).ToString
Next
End Sub
Handles Me.Load
'jika session cart tidak ada, maka laporkan kesalahan session
If Session("cart") Is Nothing Or Session("username") Is Nothing Then
Dim isi As String
isi = "Session anda kosong, tolong ulangi dari halaman utama"
Dim strErrMsg As String = "<script>alert('" & isi & "');</script>"
Exit Sub
End If
'isi cart dengan session cart
Dim cart As Kereta
GridView1.DataSource = cart.GetItems()
'bind data ke gridview
'isi jumlah item dan harga total
lbl_jumlah_item.Text = Session("jml_item")
Lbl_Total_Bayar.Text = Session("total")
End Sub

Code untuk tombol btn_yes
Protected Sub Btn_yes_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Btn_yes.Click
'cari nomor kode pesan yang terakhir
Dim cs As String =
WebConfigurationManager.ConnectionStrings("katalogConnectionString").ConnectionStri
ng
MyConnection.Open()
Dim kd_pesan As String = ""
Dim max_kd_pesan As Integer = 0
'cek keberadaan di database
Try
MyCommand.CommandText = "SELECT count(pesan.kd_pesan) AS MaxKode FROM
Pesan"
While reader.Read()
max_kd_pesan = reader("MaxKode")
End While
Dim isi As String
isi = "Kegagalan query max tabel pesan"
Exit Sub
End Try
'naikkan nilainya
max_kd_pesan += 1
'pengubahan format, agar kd_pesan menjadi 10 digit pas yang diawali nol
kd_pesan = StrDup(10 - Len(max_kd_pesan.ToString), "0") &
max_kd_pesan.ToString
'simpan ke database
Try
'"INSERT INTO [Pesan] ([Kd_Pesan], [Tgl_Pesan], [UserName], [Total])
VALUES
SqlDataSource2.InsertParameters("Kd_Pesan").DefaultValue = kd_pesan
SqlDataSource2.InsertParameters("Tgl_Pesan").DefaultValue =
Now().ToString
SqlDataSource2.InsertParameters("UserName").DefaultValue =
Session("username")
SqlDataSource2.InsertParameters("Total").DefaultValue =
Double.Parse(Lbl_Total_Bayar.Text)
End Try

Code untuk tombol btn_No dan Btn_edit
Protected Sub Btn_no_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Btn_no.Click
'informasikan pembatalan
Dim isi As String
isi = "Seluruh catatan belanja anda sesi ini akan dihapus, dan di logout"
'hapus seluruh sesi
Session.Clear()
End Sub
Protected Sub Btn_edit_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Btn_edit.Click
'kembalikan halaman ke halaman list
Response.Redirect("ListKeretaBelanja.aspx?kat=" & catid)
End Sub
'jika berhasil maka dimpan juga ke detail pesan
Try
Dim x As Integer
'INSERT INTO [Detail_Pesan] ([Kd_Pesan], [kd_brg], [harga], [Qty])
SqlDataSource3.InsertParameters("Kd_Pesan").DefaultValue =
StrDup(10 - Len(kd_pesan.ToString), "0") & kd_pesan.ToString
SqlDataSource3.InsertParameters("kd_brg").DefaultValue =
GridView1.Rows(x).Cells(1).Text
SqlDataSource3.InsertParameters("harga").DefaultValue =
Double.Parse(GridView1.Rows(x).Cells(3).Text.ToString)
SqlDataSource3.InsertParameters("Qty").DefaultValue =
CInt(GridView1.Rows(x).Cells(4).Text)
Next x
Dim isi As String
isi = "Kegagalan query insert tabel detail pesan"
Exit Sub
End Try
'Kosongkan session Card
Session("cart") = Nothing
'kembalikan halaman ke halaman utama
Dim isi2 As String
isi2 = "Data Belanja anda sudah disimpan dan akan dikirim, terima kasih"
Dim strErrMsg2 As String = "<script>alert('" & isi2 & "');</script>"
Response.Write(strErrMsg2)
'Response.Redirect("default.aspx?kat=" & catid)
Response.AddHeader("REFRESH", "0;URL=default.aspx?kat=" & catid)
End Sub

81 Halaman LaporanPenjualan | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Halaman LaporanPenjualan
Halaman ini merupakan halaman untuk menampilkan data-data pemesanan dalam jangka waktu
tertentu.
Buatlah halaman LaporanPenjualan dengan desain :
Adapun Object nya:
LinkButton LBtn_Main PostBackUrl=~/Default.aspx
Text=Kembali ke halaman utama
HTML Table 2 Baris 2 Kolom
Border=0
Calendar Cal_start SelectedDate=[sesuaikan keinginan]
Cal_End

Label Lbl_tgl_mulai Text=
Lbl_tgl_seles
ai
SqlDataSour
ce
SqlDataSourc
e1
ConnectionString=KatalogConnectionString
SelectCommand=
Parameter tgl_mulai:

Parameter tgl_selesai:
GridView GridView1 AutoGenerateColumn=false
DataSourceId=SqlDataSource1
Columns(itemStyle)=[sesuaikan keinginan]
Tambahkan code berikut pada LaporanPenjualan.aspx.vb

Untuk page load:
Untuk menangani format tampilan dan perubahan tanggal
Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load
'set agar hanya admin yang bisa masuk
If Session("logged") <> True And Session("Hak") <> "1" Then
'keluar
Dim strErrMsg As String = "<script>alert('Anda bukan admin,
login dulu sebagai admin');</script>"
Exit Sub
End If
'setting tanggal awal dan akhir
lbl_tanggal_mulai.Text = "2007-01-01"
lbl_tanggal_selesai.Text = "2007-12-31"
End Sub

'sub ini untuk membereskan tampilan agar data yang sama tidak ditampilkan
'sebenarnya dapat menggunakan Crosstab query, namun karena materinya
dititik beratkan pada ASP dan bukan
'database, maka digunakan jalan yang membuat anda belajar lebih banyak
'gunakan crosstab query untuk hasil kembalian data yang lebih baik langsung
dari database
'--------------------------------------------------------------------------
-------------------
'contoh ini tergantung desain. Pada contoh ini :
'kolom kd_pesan ialah Cell 0
'kolom tgl_pesan ialah Cell 1
'kolom username ialah cell 2 dst
Dim x As Integer = 0
Dim kd_pesan As String = ""
'jika baris pertama, cukup simpan nilainya
If x = 0 Then
kd_pesan = GridView1.Rows(x).Cells(0).Text
Else
'jika bukan, maka mulai bandingkan
If kd_pesan = GridView1.Rows(x).Cells(0).Text Then
'jika sama, maka kosongkan baris tersebut
GridView1.Rows(x).Cells(0).Text = ""
Else
'jika tidak sama, maka ambil nilai baru sebagai basis
perbandingan
kd_pesan = GridView1.Rows(x).Cells(0).Text
End If
End If
Next
End Sub
Protected Sub Cal_start_SelectionChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Cal_start.SelectionChanged
Call update_batas()
End Sub
Protected Sub update_batas()
lbl_tanggal_mulai.Text = Cal_start.SelectedDate.ToString
lbl_tanggal_selesai.Text = Cal_end.SelectedDate.ToString
End Sub
Protected Sub Cal_end_SelectionChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Cal_end.SelectionChanged
Call update_batas()
End Sub

Modifikasi (3)Halaman MasterPage.master
untuk mengakomodasi penambahan halaman baru maka tambahkan link ke halaman baru:
Propertiesnya
Tipe Control Nama Control Properties
LinkButton LBtn_Laporan PostBackUrl=~/LaporanPenjualan.aspx
Visible=False
Text=Laporan Penjualan
LBtn_ToListKeretaBelanja Text=Klik disini untuk melihat kereta Belanja
Visible=False

Tambahkan 2 link button tadi dalam code, agar hanya muncul jika login admin
Tambahkan handler saat LBtn_ToListKeretaBelanja di klik:
Protected Sub Lbtn_ToListKeretaBelanja_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Lbtn_ToListKeretaBelanja.Click
Response.Redirect("ListKeretaBelanja.aspx")
End Sub
Handles Me.Load
If Session("logged") Is Nothing Then
lbl_infoLogin.Text = "Anda Belum Login!"
Lbtn_Login.Visible = True
Btn_Logout.Visible = False
LBtn_Manage.Visible = False
ElseIf Session("logged") = True Then
lbl_infoLogin.Text = "Selamat datang, " & Session("Username").ToString
Btn_Logout.Visible = True
'jika admin (kode hak untuk admin =1)
If Session("hak") = "1" Then
LBtn_Manage.Visible = True
LBtn_Laporan.Visible = True
End If
'jika ada isi kereta belanja
If Not Session("cart") Is Nothing Then
Dim cart As Kereta
lbl_jum_item.Text = cart.Count.ToString
Else
lbl_jum_item.Text = "0"
End If
End If
End Sub

88 LAMPIRAN | Diktat ASP.NET 2.0 – D3 Unggulan UBL
LAMPIRAN
i
Penggunaan DataImageUrlFormat berfungsi untuk memberi tahu control posisi gambar ada dimana dalam
struktur folder, tentu saja ini harus disesuaikan dengan data pada database. Pada contoh ini, data pada database
hanya berupa nama file dan extention nya, maka DataImageUrlFormat harus diisi lengkap dengan posisi folder
yang berisi gambar relative terhadap root
Tanda ~ merupakan pengganti posisi root
Tanda {0} merupakan lambang pengganti data
Contoh :
Data pada database  field “pic” dengan isi = gambar1.jpg
Posisi asli gambar http://localhost/NamaProyek/Gambar
Maka isi dari 2 properti utama dari ImageField ialah:
DataImageUrlField = pic
DataImageUrlFormat =~/Gambar/{0}
ii
Response.redirect adalah perintah agar browser di redirect untuk membuka halaman yang kita tentukan
iii
Request.querystring adalah syntax yang menyatakan bagian data tambahan yang dikirim melalui URL, pada ASP
bagian ini dimulai setelah tanda Tanya (?) dibelakang URL resmi, contoh:
http://www.suatusitus.com/daftar.aspx?kode=001&nama=rudi
bagian berwarna merah merupakan bagian querystring, ada 2 yaitu : kode yang nilainya 001 dan nama yang
nilainya rudi
iv
kadangkala,pada SqlDataSource kita ingin membuat select query yang berhubungan dengan 2 table atau lebih,
namun sekaligus juga Update, Insert, dan Delete query. Permasalahannya ialah anda jadi harus mengetik satu –
persatu, trik nya adalah membuat select query biasa dari 1 table, lalu centang Generate INSERT,UPDATE,DELETE
pada bagian Advanced, lalu klik finish, lalu buka ulang dan memilih custom sql query untuk mengganti bagian
Select Query

Tutorial asp beta4

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Similar to Tutorial asp beta4

Similar to Tutorial asp beta4 (20)

Tutorial asp beta4