Koneksi SQL Server dan Penerapan Template CSS Masterpage...

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.

http://www.csstemplatesforfree.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">


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


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

Documents

Transcript of Koneksi SQL Server dan Penerapan Template CSS Masterpage...