ASP.NET Dengan Menggunakan Tools Visual

ASP.NET Dengan
Menggunakan Tools Visual
Studio
Membuat Sistem Penilaian Online

4/22/2010
LABKOM UBL
Created by Calas09

ASP.NET Dengan Menggunakan Tools Visual Studio

MEMBUAT APLIKASI
SISTEM PENILAIAN ONLINE
ASP.NET adalah suatu bahasa pemrograman yang diciptakan oleh microsoft khusus untuk pembuatan
aplikasi berbasis web .
ASP.NET adalah bahasa pemrograman ASP.NET yang dalam pembuatannya menggunakan bahasa
pemograman vb script.
MySQL adalah sebuah DBMS(Database Management System) yang memiliki kelebihan mudah untuk
digunakan oeleh banyak orang .
Langkah awal dalam membuat aplikasi input nilai mahasiswa ini adalah kita membuat sebuah
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.

PRIMARY KEY : Id

LABKOM UBL

Page 2

ASP.NET Dengan Menggunakan Tools Visual Studio

Mendesain halaman web asp
menggunakan master page dan adrotator
Pasti anda pernah mengunjungi halamn web yang memiliki format umum yang sama pada tiap halamannya,

seperti banner iklan diatas halamn atau disamping. Format tersebut merupakan template yang dapat dipakai
ulang dan terpisah dengan isi halaman yang spesifik. Pada PHP dikenal konsep template (.tpl) . Pada ASP.NET
digunakan konsep MasterPage (.master.
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.

2. Kemudian pilih Create : Web Site,setelah itu klik pada ASP.NET Web site. Klik Browse untuk
memilih localdisk atau tempat dimana anda akan mnyimpan web yang anda buat. Pada pilihan
Lanuage pilih Visual Basic,karena disini kita akan menggunakna bahasa pemprogramn VB script.
Setelah itu klik OK.

LABKOM UBL

Page 3

ASP.NET Dengan Menggunakan Tools Visual Studio

3. Klik kanan nama project pada solution explorer dan pilih new item
4. Lalu pilihlah template “MasterPage”

LABKOM UBL

Page 4

ASP.NET Dengan Menggunakan Tools Visual Studio

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).

Pada bagian header akan kita tambahkan sebuah banner (umumnya berfungsi sebagai iklan),
dan bagian footer akan kita isi dengan tulisan copyright.

LABKOM UBL

Page 5

ASP.NET Dengan Menggunakan Tools Visual Studio

6. Untuk membuat table pada halaman master klik Layout pada menubar lalu pilih Insert Table,

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.
9. Setelah itu kita akan membuat Adrotator maka klik pada table header lalu klik Toolbox yang ada
pada bgian kiri tampilan layar anda.

LABKOM UBL

Page 6

ASP.NET Dengan Menggunakan Tools Visual Studio

10. Lalu pilih Adrotator

LABKOM UBL

Page 7

ASP.NET Dengan Menggunakan Tools Visual Studio

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

…
…
…

atau

…
…
…

12. Setelah mengenal struktur dasar XMLnya, kita lanjut dengan membuat sebuah file XML untuk
iklan tadi
13. Klik kanan nama project pada olution explorer dan pilih AddNewItem.

LABKOM UBL

Page 8

ASP.NET Dengan Menggunakan Tools Visual Studio

14. Pada kotak dialognya, pilih XMLFile dan beri nama XMLFile_header.xml

15. Setelah anda klik Add maka akan muncul isi file xml tersebut

16. Tambahkan codenya menjadi seperti berikut

LABKOM UBL

Page 9

ASP.NET Dengan Menggunakan Tools Visual Studio

Bari pertama akan menjelaskan versi dan jenis encoding dari file XML tersebut. Diantara tag
adalh property untuk satu ad(ad=advertisement=iklan), jadi pada dua cidingan di atas ada

2 iklan.
Diantara tag ialah file gambar yang ingin ditampilkan (lokasi realative), diantara tag
adalah link yang akan dieksekusibila iklan di klik, diantara tag
adalah tulisan yang ditampilkan bila browser tidak mendukung gambar, diantara tag
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

18. Pada kotak dialog, pilih tipe XML dan berikan ID (bebas)

LABKOM UBL

Page 10

ASP.NET Dengan Menggunakan Tools Visual Studio

19. Kemudian akan muncul kotak dialog seperti berikut. Klik Browse untuk memilih file XML yang
anda buat.

20. Kemudian klik pada file XML yang anda buat. Lalu klik OK.

LABKOM UBL

Page 11

ASP.NET Dengan Menggunakan Tools Visual Studio

21. Setelah itu kita akan membuat halaman web dengan MasterPage yang telah kita buat pertamatama 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.
Agar Adrotator tidak berubah-ubah ukuran (sesuaikan dengan ukuran gambar yang diload) maka
tentukan nilai property width dan height dalam pixel (secara default nilainya kosong berarti mengikuti
ukuran gambar).

LABKOM UBL

Page 12

ASP.NET Dengan Menggunakan Tools Visual Studio

MEMBUAT STRING KONEKSI
ASP tidak mendukung langsung penggunaan database MySQL, sehingga kita harus menggunakan
konektor terpisah yaitu ODBC(Open Database Conectivity). Berikut adalah tahapan yang harus dilakukan
dalam penggunaan ODBC :
1. Pastikan MySQL ODBC Driver for MySQL sudah terinstal pada PC Anda
2. Buka Control Panel -> Administratif Tool

3. Lalu Pilih DataSources(ODBC)

4. Pada Window ODBC, pilih System DSN lalu klik Add

LABKOM UBL

Page 13

ASP.NET Dengan Menggunakan Tools Visual Studio

5. Pada Kotak Dialog, pilih MySQL ODBC Driver

6. Setelah itu, isikan data yang sesuai dengan server MySQL dan database yang telah Anda buat

LABKOM UBL

Page 14

ASP.NET Dengan Menggunakan Tools Visual Studio

7. Setelah itu , klik button Test untuk melakukan koneksi

Jika koneksi berhasil, maka akan muncul Kotak Dialog seperti gambar diatas kemudian klik OK.
8. Sekarang database yang telah Anda buat telah terdaftar pada System DSN

LABKOM UBL

Page 15

ASP.NET Dengan Menggunakan Tools Visual Studio

Klik OK untuk mengakhiri Kotak Dialog.
Setelah membuat koneksi string ke MySQL dengan konektor, lalu kita memulai membuat aplikasinya
dengan menggunakan editor. Editor yang biasa digunakan adalah Visual Studio 2005 atau Visual Studio 2008.

LABKOM UBL

Page 16

ASP.NET Dengan Menggunakan Tools Visual Studio

MEMBUAT MASTER PAGES
Master Pages merupakan sebuah template yang dapat ditempati oleh berbagai ContentPlaceHolder
yang terdiri dari halaman web secara majemuk.
1. Buka Visual Studio 2005, lalu buat website baru

2. Beri nama website baru dengan asp.net, lalu klik OK.

3. Setelah muncul halaman editorny, klik kanan nama project pada Solution Explorer dan pilih Add New
Item.

LABKOM UBL

Page 17

ASP.NET Dengan Menggunakan Tools Visual Studio

4. Kemudian akan muncul kotak Dialog seperti dibawah ini, lalu pilih Master Pages. Isikan nama
Master.master pada texbox name,pilih Language “Visual Basic” kemudian klik Add.

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.
6. Apabila Master Pages sudah dibuat, selanjutnya kita akan membuat Web Form yang nantinya berisi
data master mahasiswa, transaksi dan laporan. Pertama kita akan membuaat Form master
mahasiswa.

LABKOM UBL

Page 18

ASP.NET Dengan Menggunakan Tools Visual Studio

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:

TexBox

Button
GridView

Gbr 1.1 Master Mahasiswa
Source Code : hal . 24

LABKOM UBL

Page 19

ASP.NET Dengan Menggunakan Tools Visual Studio

Form diatas memiliki beberapa komponen, yaitu :
a. TextBox
b. Label
c. Button
d. SqlDataSource
e. Gridview
7. Untuk menulis atau melihat codeny, kita bisa double klik toolbox yang ingin dilihat codeny. Atau bisa
dengan cara klik tools View Code yang ada pada Solution Explorer.

8. Contoh tampilan transaksi Input nilai
9.

Gbr 1.2 Transaksi Input Nilai
Source Code : hal . 27

10. Mengoneksikan data yang telah diinput dengan SqlDataSource

LABKOM UBL

Page 20

ASP.NET Dengan Menggunakan Tools Visual Studio

Klik Configure Data Source, lalu pilih New Connection

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 :

Kemudian klik button Test Connection untuk memastikan database terkoneksi oleh konektor ODBC.
Apabila sudah benar-benar terkoneksi, maka akan muncul tampilan seperti dibawah ini :

LABKOM UBL

Page 21

ASP.NET Dengan Menggunakan Tools Visual Studio

Klik button Next hingga muncul tampilan Kotak Dialog Configure the Select Statement

Pilih Specify a custom SQL statement or stored procedure -> pilih Next.
Pada tab select, ketikan SELECT * FROM nilai lalu klik Next.

LABKOM UBL

Page 22

ASP.NET Dengan Menggunakan Tools Visual Studio

Kemudian klik Test Query, apabila tidak ada kesalahan syntax maka seharusnya akan muncul hasil
querynya -> klik Finish.

LABKOM UBL

Page 23

ASP.NET Dengan Menggunakan Tools Visual Studio

Source Code Master Mahasiswa

Partial Class masterMahasiswa
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
txtJur.Enabled = False
txtStrata.Enabled = False
txtnim.Focus()
End If
End Sub
Protected Sub txtnim_TextChanged(ByVal sender As
Object, ByVal e As System.EventArgs) Handles
txtnim.TextChanged
Dim b As String
Dim c As String
b = Mid(txtnim.Text, 3, 2)
c = Mid(txtnim.Text, 5, 1)
If b = "11" Then
txtJur.Text = "Teknik Informatika"
ElseIf b = "12" Then
txtJur.Text = "Sistem Informasi"
Else
txtJur.Text = "Ekonomi"
End If
If c = "5" Then
txtStrata.Text = "S1"
ElseIf b = "4" Then
txtStrata.Text = "S2"
Else
txtStrata.Text = "D3"
End If
txtNama.Focus()
End Sub
Private Sub bersih()
txtnim.Text = ""
txtNama.Text = ""
txtAlamat.Text = ""
txtJur.Text = ""
txtStrata.Text = ""
txttlp.Text = ""
txtnim.Focus()
End Sub

LABKOM UBL

Page 24

ASP.NET Dengan Menggunakan Tools Visual Studio

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Button1.Click
If txtnim.Text = "" Or txtNama.Text = "" Or txtAlamat.Text =
"" Or txtJur.Text = "" Or txtStrata.Text = "" Or txttlp.Text = "" Then
Response.Write(" alert('Data masih
kosong');")
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(" alert('berhasil Disimpan');")
bersih()
GridView1.DataBind()
Else
Response.Write(" alert(' tidak berhasil Dsimmpan');")
End If
Catch ex As Exception
Response.Write(" alert(' data gagal diinput');")
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(" alert('berhasil didelete');")
GridView1.DataBind()
bersih()
Else
Response.Write(" alert(' tidak berhasil didelete');")
End If
Catch ex As Exception
Response.Write(" alert(' data gagal
diinput');")
Label1.Text = ex.Message
Label1.Visible = True
End Try
End Sub

LABKOM UBL

Page 25

ASP.NET Dengan Menggunakan Tools Visual Studio

Protected Sub txtNama_TextChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles txtNama.TextChanged
txtAlamat.Focus()
End Sub
Protected Sub txtAlamat_TextChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles txtAlamat.TextChanged
txttlp.Focus()
End Sub
Protected Sub txttlp_TextChanged(ByVal sender As Object, ByVal e As
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()
End Sub
End Class

LABKOM UBL

Page 26

ASP.NET Dengan Menggunakan Tools Visual Studio

SOURCE CODE Entry_Nilai

Imports
Imports
Imports
Partial

System.Data
System.Data.Odbc
System.Web.Configuration
Class entry_nilai

Inherits System.Web.UI.Page
Dim strkoneksi As String = "Driver={MySQL ODBC 3.51
Driver};Server=localhost;Database=web_inventory;Uid=praktek;Pwd=mahasiswa;
"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles Me.Load
Dim cs As String =
WebConfigurationManager.ConnectionStrings("koneksi").ConnectionString
Dim Mykoneksi As New OdbcConnection(cs)
Mykoneksi.Open()
Dim mykomand As New OdbcCommand()
mykomand.Connection = Mykoneksi
Dim jurusan As String = ""
Dim nama As String = ""
Try
mykomand.CommandText = "select nama,jurusan from mahasiswa
where nim= '" & Request.QueryString("field") & "' "
Dim reader As OdbcDataReader = mykomand.ExecuteReader()
While reader.Read()
nama = reader("nama")
jurusan = reader("jurusan")
txtnama.Text = nama
txtjur.Text = jurusan
End While
Catch ex As Exception
Dim isi As String
isi = "Kegagagalan data nim"
Dim strmsg As String = "alert('" & isi &
"');"
Response.Write(strmsg)
Exit Sub
End Try
Mykoneksi.Close()
txtnim.Text = Request.QueryString("field")
txtAbsen.Focus()
End Sub

LABKOM UBL

Page 27

ASP.NET Dengan Menggunakan Tools Visual Studio

Sub bersih()
txtAbsen.Text = ""
txtTugas.Text = ""
txtUas.Text = ""
txtUts.Text = ""
txtMatkul.Text = ""
txtMatkul.Focus()
End Sub
Protected Sub txtAbsen_TextChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles txtAbsen.TextChanged
If (txtAbsen.Text > 100) Then
Response.Write(" alert(' nilai inputan maksimum
100');")
txtAbsen.Text = ""
Exit Sub
End If
txtTugas.Focus()
End Sub
Protected Sub txtTugas_TextChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles txtTugas.TextChanged
If (txtTugas.Text > 100) Then
Response.Write(" alert(' nilai inputan maksimum
100');")
txtTugas.Text = ""
txtTugas.Focus()
Exit Sub
End If
txtUts.Focus()
End Sub
Protected Sub txtUts_TextChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles txtUts.TextChanged
If (txtUts.Text > 100) Then
Response.Write(" alert(' nilai inputan maksimum
100');")
txtUts.Text = ""
txtUts.Focus()
Exit Sub
End If
txtUas.Focus()
End Sub
Protected Sub txtUas_TextChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles txtUas.TextChanged
If (txtUas.Text > 100) Then
Response.Write(" alert(' nilai inputan maksimum
100');")
txtUas.Text = ""
txtUas.Focus()
Exit Sub
End If
End Sub

LABKOM UBL

Page 28

ASP.NET Dengan Menggunakan Tools Visual Studio

Protected Sub txtMatkul_TextChanged(ByVal sender As Object, ByVal e As
System.EventArgs) Handles txtMatkul.TextChanged
txtAbsen.Focus()
End Sub
Protected Sub btnsimpan_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles btnsimpan.Click
If txtnim.Text = "" Or txtAbsen.Text = "" Or txtTugas.Text = "" Or txtUas.Text
= "" Or txtUas.Text = "" Or txtJur.Text = "" Then
Response.Write(" alert('Data masih kosong');")
Exit Sub
End If
Dim uas, absen, uts, tugas, total As Integer
Dim grade As String
absen = Integer.Parse(txtAbsen.Text)
uts = Integer.Parse(txtUts.Text)
uas = Integer.Parse(txtUas.Text)
tugas = Integer.Parse(txtTugas.Text)
total = (absen * 0.1) + (tugas * 0.1) + (uts * 0.3) + (uas * 0.5)
If total >= 85 And
grade = "A"
ElseIf total >= 75
grade = "B"
ElseIf total >= 65
grade = "C"
ElseIf total >= 55
grade = "D"
Else
grade = "E"
End If

total