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 penulis terapkan dalam entry data mahasiswa.

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

new-item-masterpage

3.  Buat folder di bawah C:\…\NamaWebsite\, berikan nama misalnya tema.

new-folder
4.  Paste template CSS hasil ekstrakan tadike dalam folder Tema

paste-template
5.  Buka file index.html, copykan script yang berada diantara tag <body>…</body>

copy-index.html
6.  Paste script di source Masterpage, di bawah <form id=”form1runat=”server”>

paste-index.html

7.  Selanjutnya, copy paste file default.css ke dalam source Masterpage, diantara tag <head runat=”server”>…</head>.

css

 

8.  Pindahkan ContentPlaceHolder ke lokasi yang diinginkan, misalnya dibwah <div id=”content”>

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

desain-TableMahasiswa

Lengkah ketiga adalah menampilkan table pada web form.

1.  Buat connection terlebh dahulu pada Visual Studio.

data-conn-add-connection

Data source: Pilih Microsoft SQL Server, Server name: Pilih sesuai nama server anda, lalu pilih database yang telah dibuat yaitu Campus.

add-connection

2.  Drag TableMahasiswa pada halaman web form yang akan menampilkan data mahasiswa.

gird-TableMahasiswa

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:

desain-entryDataMahassiwa

 

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.

source-code-FormEntryMahasiswa

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

Berikut tampilan web halaman Entry Mahasiswa halaman-entry

Berikut tampilan halaman Data Mahasiswa halaman-dataMahasiswa

 

Download template centerstage

Download source-code-Masterpage.master

Download source-code-FormEntryMahasiswa

Download Artikel 

Leave a comment

1 Comment

  1. gan seorang programmer ya…? paham tentang programan begituan

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: