Upload
others
View
10
Download
0
Embed Size (px)
Citation preview
1 http://mhulyana.wordpress.com
Koneksi SQL Server dan Penerapan Template CSS Masterpage pada
ASP.NET
Beberapa pembahasan sebelumnya, saya pernah posting mengenai pembuatan form pada web form
ASP.NET. Pada kesempatan ini saya kembali mempublikasikan mengenai ASP.NET dengan koneksi ke SQL
Server 2008 dan penerapan template CSS pada Masterpage ASP.NET.
Studi kasus dalam hal ini saya terapkan dalam entri data mahasiswa.
Ada lima langkah yang harus kita lakukan yaitu sebagai berikut:
Langkah pertama adalah membuat Masterpage dan menerapkan Template CSS pada ASP.NET.
1. Siapkan template, dapat di download di http://www.csstemplatesforfree.com/, kemudian, ekstrak.
2. Pada Visual Studio, di dalam project website tambahkan new item, pilih Masterpage.
3. Buat folder di bawah C:\...\NamaWebsite\, berikan nama misalnya tema.
2 http://mhulyana.wordpress.com
4. Paste template CSS hasil ekstrakan tadi ke dalam folder Tema
5. Buka file index.html, copykan script yang berada diantara tag <body>...</body>
6. Paste script di source Masterpage, di bawah <form id="form1" runat="server">
7. Selanjutnya, copy paste file default.css ke dalam source Masterpage, diantara tag <head runat="server">…</head>.
8. Pindahkan ContentPlaceHolder ke lokasi yang diinginkan, misalnya dibwah <div id="content">
3 http://mhulyana.wordpress.com
9. Ketika menambahkan item web form baru, centang masterpage, pilih masterpage yang sudah
diberikan template tadi.
Langkah kedua adalah membuat Database dan Table pada SQL Server 2008.
1. Buat database dengan nama Campus.
2. Buat Table dan desain sebagai berikut, simpan dengan nama TableMahasiswa:
Lengkah ketiga adalah menampilkan table pada web form.
1. Buat connection terlebh dahulu pada Visual Studio
4 http://mhulyana.wordpress.com
Data source: Pilih Microsoft SQL Server, Server name: Pilih sesuai nama server anda, lalu pilih
database yang telah dibuat yaitu Campus.
2. Drag TableMahasiswa dari menu Server Explorer ke dalam halaman web form yang akan
menampilkan data mahasiswa.
5 http://mhulyana.wordpress.com
Langkah keempat adalah membuat desain halaman entry.
Buat desain antar muka entry data mahasiswa pada web form untuk halaman entry data, dengan field-field
entry yang disesuaikan pada field di TableMahasiswa, yaitu sebagai berikut:
Keterangan komponen:
ToolBox ID Text/ Item
NPM TextBox TxtNPM -
Nama TextBox TxtNama -
Alamat TextBox TxtAlamat -
Program Studi TextBox TxtProgram -
Jenjang Pendidikan DropDownList DdJenjang D3 S1 S2
Simpan Data Button BtnSimpan Simpan Data
Reset Field Button BtnReset Reset Field
Cari Data Button BtnCari Cari Data
Lihat Data Button BtnLihat Lihat Data
Langkah kelima adalah coding form entry mahasiswa agar dapat melakukan input data dan mencari data.
Imports System.Data
Imports System.Data.SqlClient
Partial Class FormEntryMahasiswa
Inherits System.Web.UI.Page
Private constring As String =
ConfigurationManager.ConnectionStrings("CampusConnectionString1").ConnectionStri
ng
Private oConn As New SqlConnection(constring)
Private oTbl As New DataTable
Private xReader As SqlDataReader
Protected Sub BtnSimpan_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles BtnSimpan.Click
6 http://mhulyana.wordpress.com
Dim sql As String = "INSERT INTO TableMahasiswa VALUES ('" & TxtNPM.Text
& "','" & TxtNama.Text & "','" & TxtAlamat.Text & "','" & TxtProgam.Text & "','"
& DdJenjang.Text & "')"
Dim oCmd As New SqlCommand
oConn.Open()
oCmd.Connection = oConn
oCmd.CommandText = sql
oCmd.ExecuteNonQuery()
End Sub
Protected Sub BtnReset_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles BtnReset.Click
TxtNPM.Text = ""
TxtNama.Text = ""
TxtAlamat.Text = ""
TxtProgam.Text = ""
DdJenjang.SelectedIndex = -1
End Sub
Protected Sub BtnCari_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles BtnCari.Click
If Not Len(TxtNPM.Text) = 0 Then
oConn.Close()
oConn.Open()
Dim ocmd As New SqlCommand("SELECT * FROM TableMahasiswa where
NPM='" + TxtNPM.Text + "'", oConn)
xReader = ocmd.ExecuteReader
If xReader.HasRows Then
xReader.Read()
TxtNama.Text = xReader("Nama")
TxtAlamat.Text = xReader("Alamat")
TxtProgam.Text = xReader("ProgramStudi")
DdJenjang.Text = xReader("JenjangPendidikan")
Else
TxtNPM.Text = "Tidak ditemukan"
End If
xReader.Close()
End If
End Sub
Protected Sub BtnLihat_Click(ByVal sender As Object, ByVal e As
System.EventArgs) Handles BtnLihat.Click
Response.Redirect("DataMahasiswa.aspx")
End Sub
End Class
7 http://mhulyana.wordpress.com
Berikut tampilan web halaman depan yang sudah dimodifikasi dari template aslinya.
8 http://mhulyana.wordpress.com
Berikut tampilan web halaman Entry Mahasiswa
Berikut tampilan halaman Data Mahasiswa