ASP NET MVC Using Entity Framework and ADO NET Entity Data Model

ASP NET MVC

Selamat siang mas bro.., senang rasanya bisa berbagi lagi disini walaupun hanya sedikit namun masih jauh lebih baik dari pada tidak berbagi sama sekali. Sedikit share aja tentang ilmu baru yang saya sapat dari tempat kerja yang baru juga, mungkin buat mas bro ASP NET MVC sudah menjadi makanan pokok dalam membuat website ataupun aplikasi lainnya. Namun buat saya pribadi ASP NET MVC merupakan bahasa pemrograman yang baru saya pelajari, ketinggalan banget yah hahahahahaaa. But it’s OK dari pada gak sama sekali.

Sedikit share pengalaman mengenai referensi untuk belajar ASP NET MVC, ternyata versi buku nya sangat sulit dan bahkan tidak ada buku yang membahas mengenai proyek website ASP NET, maklum saya lebih suka belajar sendiri dari buku. Karena setelah cari di beberapa tutorial ada saja bagian yang kurang lengkap. Setelah mencari beberapa referensi via mbah gugel, akhirnya mentok juga di Docs nya Microsoft. Buat yang mau belajar dari forumnya langsung aja masuk ke ASP NET.

Ok, sekarang langsung masuk aja yuk ke inti postingan kali ini. Oiya sebelumnya persiapkan database dan tabelnya dulu di SQL Server. Untuk kasus ini saya buat database dengan nama db_kampus dengan tabel mahasiswa didalamnya, berikut struktur tabel mahasiswa:

Tabel mahasiswa

Nah sekarang waktunya buat project baru di Visual Studio. Project yang akan kita bangun ini menggunakan Entity Framework sehingga mempercepat proses pengerjaan koding. Pilih ASP.NET Web Application (.NET Framework).

New Project

Selanjutnya pilih template MVC dan beri centang pada Add folders and core references for.

Select Template

Masih pada jendela select template diatas, klik Change Authentication. Pilih No Authentication.

Change Authentication

Kemudian klik OK, tunggu sampai proses creating project selesai. Anda akan dihadapkan pada tampilan awal project ASP NET Anda dengan tampilan Bootstrap.

Selanjutnya beralih ke panel sebelah kiri layar kerja Anda, ada Server Explorer disana, klik ikon Connect to Database.

Add Connection

Untuk server name diperoleh dari server properties di SQL Server yang Anda gunakan. Klik test connection untuk memastikan Anda sudah terkoneksi dengan database. Maka Anda akan mendapatkan tabel mahasiswa didalam server explorer.

Server Explorer

Langkah berikutnya adalah membuat Model dengan menggunakan ADO.NET Entity Data Model. Klik kanan pada Models, pilih Add, kemudian pilih ADO.NET Entity Data Model. Pada jendela Specify Name for Item, beri nama ModMhs. Klik OK.

Pada jendela Entity Data  Model Wizard, pilih EF Designer from database, klik Next.

EF Wizard

Masih pada jendela entity data model wizard, Choose Your Data Connection, pilih Yes, include the sensitive  data in the connection string. Klik Next.

Choose your data connection

Perhatikan db_kampusEntities, ini adalah context yang akan digunakan didalam koding agar terhubung dengan setiap tabel yang ada didalam database, dalam hal ini adalah tabel mahasiswa.

Pilih versi framework yang Anda gunakan, disini saya menggunakan framework versi 5.0.

Choose framework version

Berikutnya pilih tabel yang akan digunakan pada Choose Your Database Objects and Settings. Klik Finish.

Choose your database objects and settings

Yeeaayyyyy, akhirnya jadi juga ModMhs.edmx, perhatikan Solution Explorer, pada Models sudah terdapat model mahasiswa dengan nama mahasiswa.cs.

ModMhs edmx


Selanjutnya membuat Controller dengan nama mahasiswasController. Sebelum itu klik menu Build dan pilih Build Solution terlebih dahulu. Klik kanan pada Controllers lalu klik Add, berikutnya klik Controller maka akan ditampilkan jendela Add Scaffold, pilih MVC5 Controller  with views, using Entity Framework. Setting seperti gambar dibawah ini, kemudia jika sudah selesai klik Add.

Add Scaffold

Dengan pengaturan diatas, Anda tidak perlu mengetikkan code untuk controller dan view, dengan Entity Framework semua itu sudah di generate kedalam controller dan views. Berikut hasilnya:

Path Controller\mahasiswasController.cs


using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using WebApplication2.Models;
using System.Linq.Dynamic;

namespace WebApplication2.Controllers
{
public class mahasiswasController : Controller
{
private db_kampusEntities dc = new db_kampusEntities();

// GET: mahasiswas
public ActionResult Index()
{
return View(db.mahasiswas.ToList());
}

// GET: mahasiswas/Details/5
public ActionResult Details(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
mahasiswa mahasiswa = dc.mahasiswas.Find(id);
if (mahasiswa == null)
{
return HttpNotFound();
}
return View(mahasiswa);
}

// GET: mahasiswas/Create
public ActionResult Create()
{
return View();
}

// POST: mahasiswas/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "nip,nm_mhs,email,alamat")] mahasiswa mahasiswa)
{
if (ModelState.IsValid)
{
dc.mahasiswas.Add(mahasiswa);
dc.SaveChanges();
return RedirectToAction("Index");
}

return View(mahasiswa);
}

// GET: mahasiswas/Edit/5
public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
mahasiswa mahasiswa = dc.mahasiswas.Find(id);
if (mahasiswa == null)
{
return HttpNotFound();
}
return View(mahasiswa);
}

// POST: mahasiswas/Edit/5
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "nip,nm_mhs,email,alamat")] mahasiswa mahasiswa)
{
if (ModelState.IsValid)
{
dc.Entry(mahasiswa).State = EntityState.Modified;
dc.SaveChanges();
return RedirectToAction("Index");
}
return View(mahasiswa);
}

// GET: mahasiswas/Delete/5
public ActionResult Delete(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
mahasiswa mahasiswa = dc.mahasiswas.Find(id);
if (mahasiswa == null)
{
return HttpNotFound();
}
return View(mahasiswa);
}

// POST: mahasiswas/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
mahasiswa mahasiswa = dc.mahasiswas.Find(id);
dc.mahasiswas.Remove(mahasiswa);
dc.SaveChanges();
return RedirectToAction("Index");
}

protected override void Dispose(bool disposing)
{
if (disposing)
{
dc.Dispose();
}
base.Dispose(disposing);
}
}
}


Model dan Controller sudah siap, yuk buat Views create, delete, details, edit, dan index didalam folder mahasiswas.

Path Views\mahasiswas\Create.cshtml


@model WebApplication2.Models.mahasiswa

@{
ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<h4>mahasiswa</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.nm_mhs, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.nm_mhs, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.nm_mhs, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.email, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.email, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.alamat, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.alamat, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.alamat, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}


Path Views\mahasiswas\Delete.cshtml


@model WebApplication2.Models.mahasiswa

@{
ViewBag.Title = "Delete";
}

<h2>Delete</h2>

<h3>Are you sure you want to delete this?</h3>
<div>
<h4>mahasiswa</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.nm_mhs)
</dt>

<dd>
@Html.DisplayFor(model => model.nm_mhs)
</dd>

<dt>
@Html.DisplayNameFor(model => model.email)
</dt>

<dd>
@Html.DisplayFor(model => model.email)
</dd>

<dt>
@Html.DisplayNameFor(model => model.alamat)
</dt>

<dd>
@Html.DisplayFor(model => model.alamat)
</dd>

</dl>

@using (Html.BeginForm()) {
@Html.AntiForgeryToken()

<div class="form-actions no-color">
<input type="submit" value="Delete" class="btn btn-default" /> |
@Html.ActionLink("Back to List", "Index")
</div>
}
</div>


Path Views\mahasiswas\Details.cshtml


@model WebApplication2.Models.mahasiswa

@{
ViewBag.Title = "Details";
}

<h2>Details</h2>

<div>
<h4>mahasiswa</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.nm_mhs)
</dt>

<dd>
@Html.DisplayFor(model => model.nm_mhs)
</dd>

<dt>
@Html.DisplayNameFor(model => model.email)
</dt>

<dd>
@Html.DisplayFor(model => model.email)
</dd>

<dt>
@Html.DisplayNameFor(model => model.alamat)
</dt>

<dd>
@Html.DisplayFor(model => model.alamat)
</dd>

</dl>
</div>
<p>
@Html.ActionLink("Edit", "Edit", new { id = Model.nip }) |
@Html.ActionLink("Back to List", "Index")
</p>


Path Views\mahasiswas\Edit.cshtml


@model WebApplication2.Models.mahasiswa

@{
ViewBag.Title = "Edit";
}

<h2>Edit</h2>

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<h4>mahasiswa</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.nip)

<div class="form-group">
@Html.LabelFor(model => model.nm_mhs, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.nm_mhs, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.nm_mhs, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.email, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.email, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.alamat, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.alamat, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.alamat, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save changes" class="btn btn-default" />
</div>
</div>
</div>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}


Path Views\mahasiswas\Edit.cshtml


@model IEnumerable<WebApplication2.Models.mahasiswa>

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>

<div><br /></div>

<p>
@Html.ActionLink("Create New", "Create", null, new { @class="btn btn-primary"})
</p>

<table class="table>
<tr>
<th>
@Html.DisplayNameFor(model => model.nm_mhs)
</th>
<th>
@Html.DisplayNameFor(model => model.email)
</th>
<th>
@Html.DisplayNameFor(model => model.alamat)
</th>
<th></th>
</tr>

@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.nm_mhs)
</td>
<td>
@Html.DisplayFor(modelItem => item.email)
</td>
<td>
@Html.DisplayFor(modelItem => item.alamat)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.nip }) |
@Html.ActionLink("Details", "Details", new { id=item.nip }) |
@Html.ActionLink("Delete", "Delete", new { id=item.nip })
</td>
</tr>
}

</table>


Dalam sekejap web Anda sudah siap untuk di jalankan. Klik menu Build, pilih Build Solution dan jalankan program dengan menekan tombol F5 pada keyboard. Untuk Anda yang mau mendownload projectnya, silahkan sedot aja dari github/kutuonline.

Pertemuan berikutnya kita akan modifikasi dengan menampilkan data kedalam grid menggunakan DataTable.

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s