Studio
Membuat Sistem Penilaian Online
database di MySQL. Buat database dengan nama “workshop”. Di dalam database wokshop tersebut terdapat 2 buah table yaitu, mahasiswa dan nilai . Berikut adalah contoh table yang telah dibuat :
1. Tabel mahasiswa
Table mahasiswa digunakan untuk menampung data mahasiswa yang didaftarkan pada form master.
PRIMARY KEY : nim
2. Table nilai
Table nilai ini akan digunakan untuk menampung nilai mahasiswa pada form transaksi.
Pada tutorial kali ini akan member tahu anda membuat sebuah halamn master lengkap dengan penampilan banner untuk iklan (tampilan random).
Tujuannya agar kita mengetahui konsep penggunaan master page dan salah satu cara menampilkan iklan (banner) dengan mudah pada web yang anda buat.
a. Membuat halaman MasterPage
1. Buat lah sebuah website baru dengan nama Latihan. Pertama buka Microsoft visual studio anda. Maka akan mucul tampilan seperti dibawah ini.
5. Anda akan dihadapkan pada halaman master yang kosong
Halaman Master adalah sebuah tempalte umum yang dapat di gunakan berkali-kali oleh halaman lain (cocok untuk header dan footer dari sebuah halaman). Pada halaman master yang kosong, akan anda temukan sebuah ContentPlaceHolder yang berfungsi sebagai penampung halaman lain. Jadi bagian diluar ContentPlaceHolder adalah bagian yang akan kita edit (sebagai header dan footer).
7. Pilih Template kemudian pilih Header,Footer and Side. Disini kita membuat table footer berfungsi untuk menempatken banner, side untuk menempaatkan menu pilihan yang terdapat pada web yang anda buat, sedangkan footer untuk menempatkan tulisan copyright
8. Untuk menempatkan ContentPlaceHolder pada bagian tengah table, sorot objek yang akan dipilih lalu klik kanan CUT pada objek contentplaceholder lalu Paste pada bagian tengah table.
11. Adrotator akan menanyakan sumber datanya,.
Adrotator membutuhkan sumber data agar berfungsi dengan baik. Sumbernya bias berupa database, bias juga berupa file XML, isini kita menggunakan file XML, karena cocok untuk banner yang sederhna (jika banner rumit disarakan menggunakan database). Sekaligu mempeljari truktur file XML.
*). Sekilas tentang XML.
XML(Extended Markup Language) merupakan pengembangan dari HTML yang mampu mendukung penyimpanan data dengan baik dan terstruktur, cocok untuk sinkronisasi antar program, antar database atau antar platform.
Struktur file XML teratur dan selalu memiliki tag buka dan tag tutup antar data <xml>
12. Setelah mengenal struktur dasar XMLnya, kita lanjut dengan membuat sebuah file XML untuk iklan tadi
14. Pada kotak dialognya, pilih XMLFile dan beri nama XMLFile_header.xml
15. Setelah anda klik Add maka akan muncul isi file xml tersebut
Bari pertama akan menjelaskan versi dan jenis encoding dari file XML tersebut. Diantara tag <ad> adalh property untuk satu ad(ad=advertisement=iklan), jadi pada dua cidingan di atas ada 2 iklan.
Diantara tag<imageUrl> ialah file gambar yang ingin ditampilkan (lokasi realative), diantara tag <NavigateUrl> adalah link yang akan dieksekusibila iklan di klik, diantara tag <alternateText> adalah tulisan yang ditampilkan bila browser tidak mendukung gambar, diantara tag <Impresions> adlah besarnya kemungkinaniklan itu akan tampil dari proses acak (random). Pastikan anda mengganti ImageUrl dengan nma file gambar yang valid yang ada di project anda. Lalu jangan lupa di save.
17. Kembali ke halaman MasterPage.master dan klik kombo dari Adrotator1. Pilih New DataSource
19. Kemudian akan muncul kotak dialog seperti berikut. Klik Browse untuk memilih file XML yang anda buat.
21. Setelah itu kita akan membuat halaman web dengan MasterPage yang telah kita buat pertama-tama kita akan hapus dahulu halaman default.aspx karena pada awalnya halaman ini tidak menggunakan masterpage.
22. Klik kanan default.aspx lalu pilih delete. Klik OK untuk konfirmasi.
23. Setelah di delete, tambahkan lagi item baru, hanya saja pada kotak dialog new item, pastikan
checkbox “select master page tercentang
24. Saat ditanya master page apa yang digunakan, pilihlah master page yang telah dibuat.
25. Klik OK dan masuklah ke modus desain. Seharusnya anda mendapatkan halaman yang mirip seperti tampilan halaman master page hanya saja background yang ada berwarna agak kelabu, dan objek yang aktif hanya ContentPlaceHolder.
(*Untuk setiap halaman yang membutuhkan header dan footer yang sama, anda bisa menggunakan masterpage yang sama. Sehingga satu masterpage bisa dipakai beulang kali.
Tanda ~ (tilde/cacing) artinya root dari project anda. Sehingga ~/image/header.jpg mengacu pada file header.jpg yang ada dalam folder image yang ada dalam folder root project anda.
3. Lalu Pilih DataSources(ODBC)
5. Pada Kotak Dialog, pilih MySQL ODBC Driver
7. Setelah itu , klik button Test untuk melakukan koneksi
Jika koneksi berhasil, maka akan muncul Kotak Dialog seperti gambar diatas kemudian klik OK.
Klik OK untuk mengakhiri Kotak Dialog.
2. Beri nama website baru dengan asp.net, lalu klik OK.
5. Setelah itu, Anda akan dihadapkan pada halaman master yang masih kosong.
Gambar diatas adalah tampilan halaman master atau Master Pages yang masih kosong. Halaman ini yang nantinya dapat digunakan berkali-kali oleh halaman form yang lain. Pada halaman master yang kosong selalu ditemukan ContentPlaceHolder kosong yang bisa diedit. ContentPlaceHolder ini berfungsi sebagai penampung halaman lain. Bagian luar ContentPlaceHolder yang bisa kita edit untuk membuat header dan footer.
Setelah muncul tampilan seperti diatas, kita lalu memilih Master Pages yang akan dijadikan sebagai template dari form mahasiswa. Pertama klik button Add->pilih Master Pages master.master->klik OK. Apabila telah dibuat Form mahasiswanya, kita bisa langsung mengedit di dalam area ContentPlaceHolder.
Contoh tampilannya inputannya:
Gbr 1.1 Master Mahasiswa Source Code : hal . 24
TexBox
Button
8. Contoh tampilan transaksi Input nilai 9.
Gbr 1.2 Transaksi Input Nilai Source Code : hal . 27
Maka akan tampil gambar seperti diatas,setelah itu pada Kotak Dialog Add Connection, pilih System Data Source dan pilih nama datasource atau database yang telah kita buat tadi lalu klik OK.
Contoh tampilannya :
Klik button Next hingga muncul tampilan Kotak Dialog Configure the Select Statement
End If
End Sub
Protected Sub txtnim_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles
Exit Sub
End If
Dim query As String
query = "Insert into mahasiswa values('" & txtnim.Text & "','"
& txtNama.Text & "','" & txtAlamat.Text & "','" & txttlp.Text & "','"
& txtJur.Text & "','" & txtStrata.Text & "')"
SqlDataSource2.InsertCommand = query Try
If SqlDataSource2.Insert() = 1 Then
Response.Write("<script> alert('berhasil Disimpan');</script>") bersih()
GridView1.DataBind() Else
Response.Write("<script> alert(' tidak berhasil Dsimmpan');</script>") End If
Catch ex As Exception
Response.Write("<script> alert(' data gagal diinput');</script>") Label1.Text = ex.Message
Label1.Visible = True
End Try
End Sub
Protected Sub Button3_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Button3.Click
Dim query As String
query = "delete from mahasiswa where nim= '" & txtnim.Text & "'"
SqlDataSource2.DeleteCommand = query
Try
If SqlDataSource2.Delete() = 1 Then
Response.Write("<script> alert('berhasil didelete');</script>") GridView1.DataBind()
bersih()
Else
System.EventArgs) Handles txttlp.TextChanged Button1.Focus()
End Sub
Protected Sub Button4_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Button4.Click bersih()
Inherits System.Web.UI.Page where nim= '" & Request.QueryString("field") & "' "
If (txtAbsen.Text > 100) Then
Protected Sub txtTugas_TextChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles txtTugas.TextChanged
Protected Sub txtUts_TextChanged(ByVal sender As Object, ByVal e As
If txtnim.Text = "" Or txtAbsen.Text = "" Or txtTugas.Text = "" Or txtUas.Text = "" Or txtUas.Text = "" Or txtJur.Text = "" Then
Response.Write("<script> alert('Data masih kosong');</script>") Exit Sub
"','" & txtMatkul.Text & "')"
