tutorial asp beta4
Post on 19-Jul-2015
250 Views
Preview:
TRANSCRIPT
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:\Inetpub\wwwroot),
silahkan membackup data yang ada disini.
2. Database anda akan ada pada folder data dari sql server yang defaultnya di C:\Program
Files\Microsoft SQL Server\MSSQL.1\MSSQL\Data 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
6 Teknik backup dan deployment | Diktat ASP.NET 2.0 – D3 Unggulan UBL
b. Klik Kanan folder yang baru dicopy, pilih properties
7 Teknik backup dan deployment | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
10 Pembuatan User Baru pada SQL SERVER | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
11 Pembuatan User Baru pada SQL SERVER | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
13 Desain Database dan Table | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
14 Desain Database dan Table | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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)
15 Desain Database dan Table | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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:
21 Halaman Default.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
SqlDataSource
SqlDataSource1
Pilih New Connection
Pada dialog add connection
Pastikan datasource nya ialah sqlClient (jika bukan klik change dan pilih SqlClient)
22 Halaman Default.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Isi nama server dengan nama yang sama di sql server management studio
Tentukan username, nama database
23 Halaman Default.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Test koneksinya, jika berhasil klik OK. Seharusnya halaman configurasi terbuka dengan koneksi yang terpilih
24 Halaman Default.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Klik Next lalu tentukan namanya, disini saya menggunakan KatalogConnectionString (akan dipakai diseluruh projek)
Halaman select statement terbuka
25 Halaman Default.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
SqlDataSource2
ConnectionString=katalogConnectionString
26 Halaman Default.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
SqlDataSource3
ConnectionString=katalogConnectionString
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
27 Halaman Default.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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)
DropDownList
DropDownList1
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)
28 Halaman Default.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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)
29 Halaman Default.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
30 Halaman Default.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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:
31 Halaman Default.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
Dim kategori 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
Dim kategori 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 :
Jenis Object Nama Object Properties
SqlDataSource
SqlDataSource1
ConnectionString=katalogConnectionString
33 Halaman Produk.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Parameternya:
DetailsView DetailsView1 DataSourceID=SqlDataSource1
DataKeyNames=kd_brg Fields=
Tambahkan sebuah ImageField di paling atas dan jangan lupa menset
34 Halaman Produk.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
DataImageUrlField dengan field pic dan DataImageUrlFormat yang menyesuaikan dengan posisi gambar
Button Btn_back Text=kembali
Code:
Partial Class produk
Inherits System.Web.UI.Page
Protected Sub Btn_back_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Btn_back.Click
Dim kategori As String
kategori = Request.QueryString("kat")
Response.Redirect("default.aspx?kat=" + kategori)
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
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
36 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
37 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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)
SqlDataSource3 SELECT UPDATE INSERT DELETE
Barang,promosi(parsial) Barang Barang Barang
SqlDataSource4 SELECT UPDATE INSERT DELETE
Promosi Promosi Promosi
SqlDataSource5 SELECT UPDATE INSERT DELETE
Promosi
38 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Object nya ialah:
Tipe Object Nama Object Properties
SqlDataSource Connection String= Katalog Connection String
SqlDataSource1
Pada bagian Advanced
39 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
40 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
SqlDataSource4
Pada bagian WHERE Pilih Kolom kd_brg, lalu source= control , Control Name=GridView2 Klik Add
41 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
SqlDataSource5
GridView GridView1 DataSourceID=SqlDataSource1
DataKeyNames=cat_id AllowGenerateColumns=false
42 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
GridView2 DataSourceID=SqlDataSource3
DataKeyNames=kd_brg
Ubah field terakhir (promo_kd_brg) dengan properties: DataFormatString=Yes
43 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
44 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
DropDownList
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_promosi
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
45 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
46 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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)
SqlDataSource3.Insert()
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.Insert()
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
47 Halaman ManajemenData.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
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
GridView1.DataBind()
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
52 Modifikasi (1)Halaman MasterPage.master | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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:
Jenis Object Nama Object 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
54 Halaman LoginPage.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Hanya perintah select saja, lalu klik tombol where dan tambahkan 2 parameter
55 Halaman LoginPage.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
56 Halaman LoginPage.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Lalu tambahkan code nya:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Configuration
Partial Class LoginPage
Inherits System.Web.UI.Page
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:
Tipe Object Nama Object Properties
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
SqlDataSource SqlDataSource1 ConnectionString=KatalogConnectionString Properties lain Lihat Gambar
58 Halaman DaftarBaru.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Properties SQLDataSource1
pastikan generate INSERT,UPDATE, and DELETE tercentang pada kotak dialog advanced
59 Halaman DaftarBaru.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Tambahkan code nya pada daftarbaru.aspx.vb:
Imports System.Data.SqlClient
Partial Class DaftarBaru
Inherits System.Web.UI.Page
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
SqlDataSource1.Insert()
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
Catch ex As Exception
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
61 Modifikasi (2) Struktur Database | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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:
62 Modifikasi (2) Struktur Database | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
64 Pembuatan Kelas | Diktat ASP.NET 2.0 – D3 Unggulan UBL
tambahkan codenya:
65 Pembuatan Kelas | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
66 Pembuatan Kelas | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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:
Tipe Object Nama Object Properties
SqlDataSource SqlDataSource1 ConnectionString=KatalogConnectionString selectquery=
Parameter=
68 Modifikasi halaman Produk.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
Imports System.Data.SqlClient
Imports System.Web.Configuration
Partial Class produk
Inherits System.Web.UI.Page
…………………….
Protected Sub Btn_back_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Btn_back.Click
Dim kategori As String
kategori = Request.QueryString("kat")
Response.Redirect("default.aspx?kat=" + kategori)
End Sub
69 Modifikasi halaman Produk.aspx | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
Dim MyConnection As New SqlConnection(cs)
MyConnection.Open()
Dim MyCommand As New SqlCommand()
MyCommand.Connection = MyConnection
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 & "'"
Dim reader As SqlDataReader = MyCommand.ExecuteReader()
While reader.Read()
nama_brg = reader("nama_brg")
harga_jual = reader("harga_jual")
harga_diskon = reader("harga_diskon")
End While
Catch ex As Exception
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>"
Response.Write(strErrMsg)
End If
End Sub
70 HALAMAN ListKeretaBelanja | Diktat ASP.NET 2.0 – D3 Unggulan UBL
HALAMAN ListKeretaBelanja Buat halaman ListKeretaBelanja dengan desain:
Propertiesnya:
Tipe Object Nama Object Properties
LinkButton LBtn_BackToList Text=Kembali ke daftar
GridView GridView1 AutoGenerateColumns=false AutoGenerateDeleteButton=true AutoGenerateSelectButton=true DataSourceId=[kosong] Fields=
71 HALAMAN ListKeretaBelanja | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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 keinginan Lbl_total_bayar
Button Btn_Edit Text=edit jumlah Visible=false
Btn_Save Text=save pembelian
72 HALAMAN ListKeretaBelanja | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Lalu tambahkan codenya
Buat instance dari kelas kereta
Buat sebuah sub baru
Buat penanganan page load
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
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>"
Response.Write(strErrMsg)
Response.AddHeader("REFRESH", "0;URL=default.aspx")
Exit Sub
End If
'isi cart dengan session cart
Dim cart As Kereta
cart = Session("cart")
GridView1.DataSource = cart.GetItems()
'bind data ke gridview
GridView1.DataBind()
'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
Inherits System.Web.UI.Page
Public cart As Kereta
73 HALAMAN ListKeretaBelanja | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
For x = 0 To GridView1.Rows.Count - 1 Step 1
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 = Session("cart")
cart.DeleteItem(e.RowIndex)
GridView1.DataBind()
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
74 HALAMAN ListKeretaBelanja | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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 = Session("cart")
cart.UpdateQty(GridView1.SelectedIndex, CInt(txt_jumlah.Text))
GridView1.DataBind()
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")
Dim catid As String = Request.QueryString("kat")
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
Dim catid As String = Request.QueryString("kat")
'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:
Tipe Object Nama Object Properties
76 HALAMAN KonfirmasiPembelian | Diktat ASP.NET 2.0 – D3 Unggulan UBL
SqlDataSource (semua menggunakan ConnectionString= KatalogConnection String)
SqlDataSource1
Where
SqlDataSource2
Advanced: Centang Generate UPDATE, DELETE, INSERT statement
77 HALAMAN KonfirmasiPembelian | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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 keinginan Lbl_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
Imports System.Data.SqlClient
Imports System.Web.Configuration
78 HALAMAN KonfirmasiPembelian | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Code untuk page load
Code untuk menampilkan nomor baris pada gridview
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
For x = 0 To GridView1.Rows.Count - 1 Step 1
'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
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
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>"
Response.Write(strErrMsg)
Response.AddHeader("REFRESH", "0;URL=default.aspx")
Exit Sub
End If
'isi cart dengan session cart
Dim cart As Kereta
cart = Session("cart")
GridView1.DataSource = cart.GetItems()
'bind data ke gridview
GridView1.DataBind()
'isi jumlah item dan harga total
lbl_jumlah_item.Text = Session("jml_item")
Lbl_Total_Bayar.Text = Session("total")
End Sub
79 HALAMAN KonfirmasiPembelian | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
Dim MyConnection As New SqlConnection(cs)
MyConnection.Open()
Dim MyCommand As New SqlCommand()
MyCommand.Connection = MyConnection
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"
Dim reader As SqlDataReader = MyCommand.ExecuteReader()
While reader.Read()
max_kd_pesan = reader("MaxKode")
End While
Catch ex As Exception
Dim isi As String
isi = "Kegagalan query max tabel pesan"
Dim strErrMsg As String = "<script>alert('" & isi & "');</script>"
Response.Write(strErrMsg)
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)
SqlDataSource2.Insert()
Catch ex As Exception
End Try
80 HALAMAN KonfirmasiPembelian | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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"
Dim strErrMsg As String = "<script>alert('" & isi & "');</script>"
Response.Write(strErrMsg)
'hapus seluruh sesi
Session.Clear()
Response.AddHeader("REFRESH", "0;URL=default.aspx")
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
Dim catid As String = Request.QueryString("kat")
Response.Redirect("ListKeretaBelanja.aspx?kat=" & catid)
End Sub
'jika berhasil maka dimpan juga ke detail pesan
Try
Dim x As Integer
For x = 0 To GridView1.Rows.Count - 1 Step 1
'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)
SqlDataSource3.Insert()
Next x
Catch ex As Exception
Dim isi As String
isi = "Kegagalan query insert tabel detail pesan"
Dim strErrMsg As String = "<script>alert('" & isi & "');</script>"
Response.Write(strErrMsg)
Exit Sub
End Try
'Kosongkan session Card
Session("cart") = Nothing
'kembalikan halaman ke halaman utama
Dim catid As String = Request.QueryString("kat")
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:
Jenis Object Nama Object Properties
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
82 Halaman LaporanPenjualan | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Label Lbl_tgl_mulai Text=
Lbl_tgl_selesai
SqlDataSource
SqlDataSource1
ConnectionString=KatalogConnectionString
SelectCommand=
Parameter tgl_mulai:
83 Halaman LaporanPenjualan | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Parameter tgl_selesai:
GridView GridView1 AutoGenerateColumn=false
DataSourceId=SqlDataSource1 Columns(itemStyle)=[sesuaikan keinginan]
Tambahkan code berikut pada LaporanPenjualan.aspx.vb
84 Halaman LaporanPenjualan | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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>"
Response.Write(strErrMsg)
Response.AddHeader("REFRESH", "0;URL=default.aspx")
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
85 Halaman LaporanPenjualan | Diktat ASP.NET 2.0 – D3 Unggulan UBL
Protected Sub GridView1_RowCreated(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowCreated
'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 = ""
For x = 0 To GridView1.Rows.Count - 1 Step 1
'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 = ""
GridView1.Rows(x).Cells(1).Text = ""
GridView1.Rows(x).Cells(2).Text = ""
GridView1.Rows(x).Cells(3).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
86 Modifikasi (3)Halaman MasterPage.master | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
87 Modifikasi (3)Halaman MasterPage.master | Diktat ASP.NET 2.0 – D3 Unggulan UBL
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
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
LBtn_Laporan.Visible = True
End If
'jika ada isi kereta belanja
If Not Session("cart") Is Nothing Then
Dim cart As Kereta
cart = Session("cart")
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
top related