Tutorial Programming dan Informasi Teknologi

November 16, 2016

Pengembangan Aplikasi Web dengan Teknologi ASP.NET MVC (Part 1 : Persiapan)




Kebutuhan Dasar :
1. Visual Studio 2013
2. Microsoft SQL Server Express

Membuat Project Baru

Sebelum kamu belajar ASP.NET MVC, pastikan kamu sudah paham konsep MVC dalam pengembangan Web yang dibahas di artikel Konsep MVC dalam web development disini.

Untuk membangun web dengan MVC, pertama persiapkan dahulu IDE yang bernama Visual Studio, sebuah database server (dalam penulisan ini database server yang digunaan adalah Microsoft SQL Server 2014 Express), dan tekad yang kuat.

Pertama, buka Visual Studio 2013. Setelah itu, pilih menu File > New > Project (atau tekan ctrl + shiht + N). Pilih Visual C#, pilih ASP.NET Web Application, beri nama untuk project dan nama solution yang akan dibuat. Disini penulis membuat solution dengan nama yang sama dengan nama project.

Create new Project

Pilih MVC, ubah authentication menjadi No Authentication, pastikan tanda centang Host in the Cloud tidak tercentang, kemudian tekan OK. Setelah itu template project beserta solution akan terbuat.

New ASP .NET Project

Ketika template project sudah terbuat, kamu bisa mencoba dengan Start Debugging pada menu Debug, atau tekan F5.

Template ASP .NET MVC

Dapat terlihat bahwa dalam template sudah terdapat framework CSS Bootstrap, jQuery, dan beberapa contoh halaman web. Contoh halaman yang ada di template diantaranya adalah Home, About dan Contact. Bootstrap yang ada di template adalah versi 3.0.0 dan versi jQuery adalah 1.10.2. Kamu bisa saja membuat template MVC kosong pada saat membuat project baru, kemudian memasang framework CSS dan JavaScript yang berbeda.

Struktur MVC pada Project

Sebelum memulai mengembangkan web, kamu harus mengerti struktur pada Project terlebih dahulu. Lihatlah pada bagian Solution Explorer dan perhatikan folder-folder pada project. Pada framework ini, yang terutama harus kamu perhatikan adalah folder Controllers, Views dan Models.

Solution Explorer

Pada folder Controllers terdapat Controller, yaitu class-class yang menangani setiap request dari klien. Dalam tiap Controller, terdapat Action Link, yang berfungsi mengembalikan (return) HTML (utuh atau sebagian) atau berupa file Json. Nama yang diberikan pada Controller dan Action Link akan merepresentasikan alamat pada halaman web. Contohnya, terdapat controller dengan nama HomeController yang terdapat Action Link dengan nama Index, maka di browser dibuka dengan www.webyangkamubuat.com/Home/Index/. Controller dapat menerima query string dalam parameternya.

Controller pada Solution Explorer

Berikut adalah kode yang ada dalam HomeController.
 using System;  
 using System.Collections.Generic;  
 using System.Linq;  
 using System.Web;  
 using System.Web.Mvc;  
 namespace SistemInformasiMahasiswa.Controllers  
 {  
   public class HomeController : Controller  
   {  
     public ActionResult Index()  
     {  
       return View();  
     }  
     public ActionResult About()  
     {  
       ViewBag.Message = "Your application description page.";  
       return View();  
     }  
     public ActionResult Contact()  
     {  
       ViewBag.Message = "Your contact page.";  
       return View();  
     }  
   }  
 }  

Dapat dilihat pada kode diatas bahwa setiap Action Link me-return sebuah View. View yang di return dapat dilihat pada folder Views. Dalam folder Views, untuk setiap Controller memiliki folder sesuai dengan namanya, dan setiap Action Link memiliki sebuah file berekstensi .cshtml sesuai dengan nama Action Link tersebut. View dalam ASP.NET MVC digenerasi menggunakan syntax yang disebut Razor.

Views pada Solution Explorer

Dalam folder Views juga terdapat folder Shared dan view bernama _ViewStart.cshtml. Dapat kamu lihat bahwa dalam file _ViewStart.cshtml berisi kode untuk mengarahkan pada view _Layout.cshtml pada folder Shared. Dalam folder Shared inilah view yang digunakan sebagai template ditempatkan, yang isinya akan digenerate dari view yang berasal dari Action Link.

Isi dari _ViewStart.cshtml

 @{  
   Layout = "~/Views/Shared/_Layout.cshtml";  
 }  


Folder yang harus diketahui selanjutnya adalah folder Models. Folder ini isinya adalah model dari database dan ViewModel. Model dari database adalah mapping dari entity (table) yang ada dalam database, dalam sebuah Entity terdapat Property yang merepresentasikan field-field dalam tabel. ViewModel adalah model yang dibutuhkan pada transaksi data dari browser dengan web atau transaksi yang mengirim data ke sebuah View.


Membuat Model

Untuk membuat Model, buat dulu sebuah database dengan tabel-tabel sederhana seperti berikut pada SQL Server. Buat database baru dengan nama SistemInformasiMahasiswa. Dalam database buat tabel-tabel berikut.
Struktur Tabel

 create database SistemInformasiMahasiswa;  
 use SistemInformasiMahasiswa;  
 create table Mahasiswa  
 (  
      NPM integer primary key,  
      Nama varchar(50) not null,  
      TanggalLahir date not null,  
      Alamat varchar(200),  
      Telepon varchar(20)  
 );  
 create table MataKuliah  
 (  
      IdMataKuliah integer primary key,  
      NamaMataKuliah varchar(30),  
      Keterangan varchar(100)  
 );  
 create table Kelas  
 (  
      IdKelas integer primary key,  
      IdMataKuliah integer not null,  
      Dosen varchar(50) not null,  
      Hari varchar(10) not null,  
      JamMulai varchar(5),  
      JamSelesai varchar(5),  
      constraint FkKelas1 foreign key(IdMataKuliah) references MataKuliah(IdMataKuliah)  
 );  
 create table KelasMahasiswa  
 (  
      IdKelas integer,  
      NPM integer,  
      TanggalRegister date not null,  
      constraint PkKelasMahasiswa primary key(IdKelas, NPM),  
      constraint FkKelasMahasiswa1 foreign key(IdKelas) references Kelas(IdKelas),  
      constraint FkKelasMahasiswa2 foreign key(NPM) references Mahasiswa(NPM)  
 );  


Klik View -> Server Explorer kemudian klik Connect to Database

Server Explorer

Isilah instance server dan database yang akan digunakan
Add Connection

Pastikan Test Connection berhasil. Jika sudah, Klik OK, maka akan ada connection baru pada Server Explorer

Pada folder Models, klik kanan kemudian pilih Add -> New Item. Muncul jendela Add New Item, kemudian pilih Data, pilih ADO .NET Entity Data Model dan beri nama Model yang akan dibuat, kemudian klik ADD. Penulis memberi nama SIMModel dalam aplikasi ini.

Add New Item

Pilih EF Designer from Database, klik next.

Pilih Connection string yang akan digunakan, sesuai yang sudah dibuat di server explorer. Beri nama connection string, kemudian klik Next

Choose Connection

Kemudian pilih apa saja yang mau digenerate ke dalam Model. Penulis hanya memilih tabel beserta relasinya. Sedangkan namespace yang penulis gunakan adalah Model, supaya memudahkan dalam membangun aplikasi. Klik finish maka Model akan tergenerate secara otomatis berdasarkan database yang digunakan.

Pilihan generate model dari database

Aplikasi web sudah siap untuk melakukan operasi CRUD (Create, Read, Update, Delete) pada database. Pembahasan CRUD (termasuk pembahasan tentang View dan Controller) akan dibahas dalam Part 2 : CRUD. Terimakasih....



Vimala Alief Utama

No comments:

Post a Comment

Contact Form

Name

Email *

Message *