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. 1
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"> 2
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 3
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. 4
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 5
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 6
Berikut tampilan web halaman depan yang sudah dimodifikasi dari template aslinya. 7
Berikut tampilan web halaman Entry Mahasiswa Berikut tampilan halaman Data Mahasiswa 8