Koneksi SQL Server dan Penerapan Template CSS Masterpage pada ASP.NET

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

6. Paste script di source Masterpage, di bawah

7. Selanjutnya, copy paste file default.css ke dalam source Masterpage, diantara tag ….

8. Pindahkan ContentPlaceHolder ke lokasi yang diinginkan, misalnya dibwah


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


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.


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

NPM Nama Alamat Program Studi Jenjang Pendidikan

TextBox TextBox TextBox TextBox DropDownList

TxtNPM TxtNama TxtAlamat TxtProgram DdJenjang

Simpan Data Reset Field Cari Data Lihat Data

Button Button Button Button

BtnSimpan BtnReset BtnCari BtnLihat

Text/ Item D3 S1 S2 Simpan Data Reset Field Cari Data 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


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


Berikut tampilan web halaman depan yang sudah dimodifikasi dari template aslinya.


Berikut tampilan web halaman Entry Mahasiswa

Berikut tampilan halaman Data Mahasiswa


Koneksi SQL Server dan Penerapan Template CSS Masterpage pada ASP.NET

Recommend Documents