Wednesday, November 11, 2015

Pemrograman Berbasis WEB Menggunakan ASP.NET

Postingan Ini Ditulis sebagai pengambilan nilai UTS Mata Kuliah SPL Berbasis WEB.

Nama: Muhammad Ihsan Al Kahfi.
NIM: 2012130021.
Jurusan: Teknik Informatika.
Semester: 7

Pengertian Pemrograman WEB
    Pemrograman Web adalah diambil dari 2 suku kata yaitu pemrograman dan web. Pemrograman diartikan proses, cara, perbuatan program.
    Definisi Web : jaringan komputer yang terdiri dari kumpulan situs internet yang menawarkan teks dan grafik dan suara dan sumber daya animasi melalui protokol transfer hypertext
    Banyak keuntungan yang diberikan oleh Aplikasi berbasis Web dari pada aplikasi berbasis desktop, sehingga aplikasi berbasis web telah diadopsi oleh perusahaan sebagai bagian dari strategi teknologi informasinya, karena beberapa alasan :
        Akses informasi mudah,
       
    • Setup server lebih mudah
    • Informasi mudah didistribusikan
    • Bebas platform, informasi dapat disajikan oleh browser web pada sistem operasi mana saja karena adanya standar dokumen berbagai tipe data dapat disajikan 
ASP.NET

    Active Server Pages .NET (sering disingkat sebagai ASP.NET) adalah kumpulan teknologi dalam Framework .NET untuk membangun aplikasi web dinamik dan XML Web Service (Layanan Web XML).
    Halaman ASP.NET dijalankan di server kemudian akan dibuat halaman markup (penanda) seperti HTML ( Hypertext Markup Language), WML (Wireless Markup Language), atau XML (Extensible Markup Language) yang dikirim ke browser desktop atau mobile.
     
MEMBUAT MASTER PAGE
    Master page merupakan halaman utama yang akan muncul dan memuat pada setiap halaman web. Fungsinya dengan master page ini kita tidak perlu mendesain semua tampilan pada halaman web jadi dengan adanya master page kita hanya cukup sekali desain tampilan sehingga dapat digunakan untuk banyak sekali halaman web dengan desain tampilan yang kita buat sekali di master page.
    Buka program Visual Studio 2010, lalu buat file project baru dan pilih Web dan pilih ASP.NET Web Application, lalu berikan nama "latihan1" sebagai nama project nya. seperti gambar berikut :
    Setelah muncul area kerja Web Aplication, selanjutnya beralih ke tool Solution Explorer, klik kanan pada direktori web latihan1 kemudian plih add New Item.
    Pilih master page dan beri nama : latihan1.master kemudian klik Add.
    Selanjutnya buat sebuah folder untuk meletakan file StyleSheet(.css)dan beri nama satu.css, kemudian isi dengan script dibawah ini
    Kemudian kembali lagi ke master page dan ubah script pada bagian head dan body seperti script dibawah ini
    Sehingga saat tampilan master pagenya adalah sebagai berikut :
    Selanjutnya tambahkan item web form using Master Page, klik kanan pada solution explorer latihan1 pilih add > new item. Lalu pilih Web Form using Master Page dan beri nama WebForm2.aspx

MENGGUNAKAN VALIDATION TOOLS 
    Validation tools berfungsi untuk menghindari debug atau eror dalam pengolahan data dengan memberikan aturan terhadap tool-tool input
    Melanjutkan project sebelumnya "latihan1". Buka item WebForm2.aspx, tambahkan script di dalam ASP Content Place Holder
SCRIPTNYA
Penjelasan
    Validation Sumary berfungsi untuk menampilkan pesan Eror dari ketidaksesuaian aturan pada input, yang sudah diberi validation rule. Required Field Validator berfungsi untuk memberikan aturan jika tool input (textbox) tidak diberikan data/masukan/input maka fungsi selanjutnya tidak akan diteruskan. Compare Field Validator berfungsi untuk memberikan aturan dengan membandingkan dua tool input (textbox).
    Jika dijalankan maka hasilnya adalah sebagai berikut :







    Note : Website Terlihat responsif (Mengikuti besaran view web browser),dikarenakan pengaturan fungsi panjang dan lebar id pada css yang menggunakan persentase "%", bukan pixel "px".
     

MENAMPILKAN DATABASE MS.SQL-SERVER DI ASP.NET
    Microsoft SQL Server adalah program yang berfungsi untuk menyimpan dan mengolah database, dan dapat dihubungkan dengan program pengembang perangkat lunak, contohnya ASP.NET.
    Buka program Microsoft SQL Server, kemudian login.
    Tahap awal, buat sebuah database dengan nama : latihan
    Selanjutnya buat tiga table yaitu : table_agama, table_jurusan, dan table_mahasiswa :
    Buat field dengan pengaturan tipe datanya pada masing-masing table.
  • table_mahasiswa : mahasiswa_id(tinyint)[primary key], nim(varchar(25)), nama(varchar(50)), agama(tinyint), tempat_lahir(varchar(50)), tanggal_lahir(date), jenis_kelamin(char), jurusan_id(tinyint)
  • table_agama : agama_id(tinyint)[primary key], deskripsi(varchar(25))
  • table_jurusan : jurusan_id(tinyint [primary key], nama(varchar(25))
    Selanjutnya atur relationship(hubungan) antar table

  • Field agama_id pada table table_agama pada table table_mahasiswa

  • Field jurusan_id pada table table_jurusan, ke field jurusan_id pada table table_mahasiswa


    Selanjutnya buka project latihan1 ASP.NET pada Visual Studio.
    Buat item Web Form Using Master Page baru, dan beri nama view.aspx
    Buat Judul text "Kolom View" kemudian tambahkan Grid View dibawahnya.
    Selanjutnya tambahkan connection string sekaligus menampilkan database pada Database latihan yang kita buat sebelumnya pada Microsoft SQL Server.
    Klik Grid View yang sudah kita masukan, kemudian klik tanda panah putih disebelah kanan atas Grid Viewnya sampai muncul seperti gambar berikut :
    Kemudian Klik dropdown Chose Data Souce lalu pilih New Data source. Kemudian pilih Database SQL

    Selanjutnya pilih New Connection.
    Masukan Nama server, username, password, dan pilih nama database yang akan dihubungkan pada connection string. Klik Ok.
    Selanjutnya Klik Next
    Beri nama constring1, kemudian klik Next
    Selanjutnya Pilih "Specify a custom SQL statement or stored procedure", dan klik Next.
    Pada tab "SELECT" dan kolom "SQL Statement", masukan query dibawah ini :



    Kemudian Klik Next dan Klik "Test query" untuk mengetahui hasil dari query yang dimasukan. Kemudian Klik "Finish"
    Hasil desain nya adalah sebagai berikut :


    Untuk merubah header pada Grid Viewnya.
    Lakukan modifikasi script header, pada tab source Ubah tulisan dalam tanda kutip seperti gambar berikut :
    Kemudian jalankan, dan hasilnya adalah seperti ini :



TERIMAKASIH