Tutorial Programming dan Informasi Teknologi

December 5, 2016

Pengembangan Aplikasi Web dengan Teknologi ASP.NET MVC (Part 2 : CRUD)




Sebelumnya : Part 1 : Persiapan
Hal lain yang harus dipelajari : Linq, Razor

CRUD, yang merupakan singkatan dari Create, Read, Update dan Delete adalah operasi yang dapat dilakukan di dalam database melalui Aplikasi. Dalam artikel ini, penulis akan menjelaskan tentang CRUD dimulai dari memasukkan data Mata Kuliah, Mahasiswa, dan Kelas, serta data kelas yang diikuti mahasiswa.

Membuat Controller

Untuk membuat sebuah Controller, pada solution explorer klik kanan folder Controllers, pilih Add, pilih Controller. Pilih Empty Controller kemudian beri nama Controller dengan nama yang kamu inginkan, tapi jangan buang kata Controller dari nama Controller tersebut.

Nama Controller

Beri nama Controller dengan nama MataKuliahController, kemudian tambahkan method-method (action link) beserta Parameternya . Contohnya dalam MataKuliahController, tambahkan kode seperti berikut:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SistemInformasiMahasiswa.Controllers
{
    public class MataKuliahController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Create()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Create(string NamaMatKul, string Keterangan)
        {
            return View();
        }
        public ActionResult Details(int IdMataKuliah)
        {
            return View();
        }
        public ActionResult Update(int IdMatKul)
        {
            return View();
        }
        [HttpPost]
        public ActionResult Update(int IdMatKul, string NamaMatKul, string Keterangan)
        {
            return View();
        }
    }
}


Tambahkan juga Controller Kelas, dan Mahasiswa seperti cara diatas. Untuk Controller KelasMahasiswa akan dibuat terakhir kali karena data yang disubmit akan dibuat menggunakan ViewModel.

Membuat View

Tambahkan View di folder Views/MataKuliah dengan nama mengikuti nama Action Link pada Controller. Caranya dapat klik kanan pada Action Link kemudian pilih Add View atau tambahkan manual pada Sulotion Explorer dengan file extention .cshtml.

Menambahkan View

Tambahkan juga view untuk Mahasiswa dan Kelas

Folder Views

Operasi CRUD

Create Mata Kuliah

Ubah isi file  MataKuliah/Create.cshtml dengan kode berikut ini.

 @model SistemInformasiMahasiswa.Models.MataKuliah  
 @{  
   ViewBag.Title = "Create Mata Kuliah";  
 }  
 <div class="row">  
   @if (ViewBag.Message != null)  
   {  
   <div class="col-md-12">  
     <div class="alert alert-danger">  
       @ViewBag.Message  
     </div>  
   </div>  
   }  
   <div class="col-md-12">  
     <h2>Create Mata Kuliah</h2>  
     <br />  
     @using (Html.BeginForm("Create", "MataKuliah", FormMethod.Post))  
     {  
       <div class="form-group">  
         <label>Mata Kuliah :</label>  
         @Html.TextBoxFor(model => model.NamaMataKuliah, new { @class = "form-control" })  
       </div>  
       <div class="form-group">  
         <label>Keterangan :</label>  
         @Html.TextBoxFor(model => model.Keterangan, new { @class = "form-control" })  
       </div>  
       <input type="submit" class="btn btn-primary" value="Create" />  
     }  
   </div>  
 </div>  


Ubah ActionLink Create yang ada pada MataKuliahController menjadi seperti ini

 public ActionResult Create()  
 {  
   return View();  
 }  
 [HttpPost]  
 public ActionResult Create(string NamaMataKuliah, string Keterangan)  
 {  
   MataKuliah MatKul = new MataKuliah();  
   if (NamaMataKuliah == "" || Keterangan == "")  
   {  
     ViewBag.Message = "Pastikan value tidak kosong.";  
     return View();  
   }  
   try  
   {  
     using (SistemInformasiMahasiswaEntities db = new SistemInformasiMahasiswaEntities())  
     {  
       MatKul.IdMataKuliah = db.MataKuliah.Count() + 1;  
       MatKul.NamaMataKuliah = NamaMataKuliah;  
       MatKul.Keterangan = Keterangan;  
       db.MataKuliah.Add(MatKul);  
       db.SaveChanges();  
     }  
     TempData["message"] = "Data Mata Kuliah berhasil disimpan.";  
     return RedirectToAction("Index", "MataKuliah");  
   }  
   catch (Exception)  
   {  
     ViewBag.Message = "Terjadi kesalahan saat menyimpan.";  
     return View(MatKul);  
   }  
 }  


Ketika kamu menjalankan aplikasi, kemudian mengakses halaman http://localhost:(port)/MataKuliah/Create maka akan tampil halaman berikut ini

Create Mata Kuliah
Ketika anda mengisi Mata Kuliah dan Keterangan kemudian klik tombol Create, maka form pada halaman tersebut akan terkirim ke action link /MataKuliah/Create (dalam bentuk POST). Dapat dilihat pada action link tersebut terdapat validasi, yang mana jika mata kuliah atau keterangan kosong maka akan kembali ke view Create disertai pesan error.

Jika form terdapat data, maka data akan dimasukkan ke database dalam tabel MataKuliah. Data dimasukkan ke database tidak dengan query, melainkan menggunakan Linq (Language Integrated Query). Kemudian jika berhasil menambah data pada database, aplikasi akan me-redirect ke halaman /MataKuliah/Index, namun jika gagal, aplikasi akan me-return View kembali disertai pesan Error.

Details Mata Kuliah

Ubah file MataKuliah/Details.cshtml dengan kode berikut ini.

 @model SistemInformasiMahasiswa.Models.MataKuliah  
 @{  
   ViewBag.Title = "Detail Mata Kuliah";  
 }  
 <div class="row">  
   @if (ViewBag.Message != null)  
   {  
     <div class="col-md-12">  
       <div class="alert alert-danger">  
         @ViewBag.Message  
       </div>  
     </div>  
   }  
   <div class="col-md-12">  
     <h2>Detail Mata Kuliah</h2>  
     <br />  
       <div class="form-group">  
         <div class="input-group">  
           <span class="input-group-addon">ID Mata Kuliah</span>  
           <label type="text" class="form-control">@Html.DisplayFor(m => m.IdMataKuliah)</label>  
         </div>  
       </div>  
       <div class="form-group">  
         <div class="input-group">  
           <span class="input-group-addon">Nama Mata Kuliah</span>  
           <label type="text" class="form-control">@Html.DisplayFor(m => m.NamaMataKuliah)</label>  
         </div>  
       </div>  
     <div class="form-group">  
       <div class="input-group">  
         <span class="input-group-addon">Keterangan</span>  
         <label type="text" class="form-control">@Html.DisplayFor(m => m.Keterangan)</label>  
       </div>  
     </div>  
     @Html.ActionLink("Back", "Index", "MataKuliah", null, new { @class = "btn btn-warning" })  
   </div>  
 </div>  


Kemudian ubah Action Link Details pada MataKuliahController.cs dengan kode berikut

 public ActionResult Details(int IdMatKul)  
 {  
   MataKuliah MatKul = new MataKuliah();  
   using (SistemInformasiMahasiswaEntities db = new SistemInformasiMahasiswaEntities())  
   {  
     MatKul = db.MataKuliah.Find(IdMatKul);  
   }  
   if (MatKul== null)  
   {  
     return HttpNotFound();  
   }  
   return View(MatKul);  
 }  


Akses url http://localhost:(port)/MataKuliah/Details?IdMatkul=1 akan menampilkan detail Mata Kuliah dengan ID = 1.

Details Mata Kuliah


Jika Create dan Details sudah dibuat, maka langkah selanjutnya adalah membuat Index untuk menampilkan seluruh mata kuliah yang terdapat di database.

Index Mata Kuliah

Ubah file MataKuliah/Index.cshtml menjadi seperti ini

 @model List<SistemInformasiMahasiswa.Models.MataKuliah>  
 @{  
   ViewBag.Title = "Index";  
 }  
 <div class="row">  
   @if (ViewBag.Message != null)  
   {  
     <div class="col-md-12">  
       <div class="alert alert-success">  
         @ViewBag.Message  
       </div>  
     </div>  
   }  
   <div class="col-md-12">  
     <h2>Index Mata Kuliah</h2>  
     <br />  
     @Html.ActionLink("Create New", "Create", "MataKuliah", null, new { @class = "btn btn-primary" })  
     <table class="table table-hover table-striped">  
       <thead>  
         <tr>  
           <th>ID Mata Kuliah</th>  
           <th>Nama Mata Kuliah</th>  
           <th>Keterangan</th>  
           <th>Action</th>  
         </tr>  
       </thead>  
       @if (Model.Count > 0)  
       {  
         <tbody>  
           @foreach (var item in Model)  
           {  
             <tr>  
               <td>@Html.DisplayFor(model => item.IdMataKuliah)</td>  
               <td>@Html.DisplayFor(model => item.NamaMataKuliah)</td>  
               <td>@Html.DisplayFor(model => item.Keterangan)</td>  
               <td>  
                 @Html.ActionLink("Details", "Details", "MataKuliah", new { IdMataKuliah = item.IdMataKuliah }, new { @class = "btn btn-success" })  
                 @Html.ActionLink("Edit", "Update", "MataKuliah", new { IdMataKuliah= item.IdMataKuliah }, new { @class = "btn btn-danger" })  
               </td>  
             </tr>  
           }  
         </tbody>  
       }  
     </table>  
   </div>  
 </div>  


Kemudian ubah Action Link Index yang ada pada MataKuliahController.cs menjadi seperti ini

 public ActionResult Index()  
 {  
   List<MataKuliah> DaftarMatKul = new List<MataKuliah>();  
   using (SistemInformasiMahasiswaEntities db = new SistemInformasiMahasiswaEntities())  
   {  
     DaftarMatKul = db.MataKuliah.ToList();  
   }  
   if (TempData["message"] != null)  
   {  
     ViewBag.Message = TempData["message"];  
   }  
   return View(DaftarMatKul);  
 }  


Dapat kamu lihat pada View, index akan menampilkan data mata kuliah menggunakan perulangan. Sedangkan pada Controller data yang diambil merupakan List dari Mata Kuliah. Jika kamu akses URL http://localhost:(port)/MataKuliah/Index maka akan tampil halaman berikut ini:

Halaman Index

Update Mata Kuliah

Ubah file MataKuliah/Update.cshtml menjadi seperti ini

 @model SistemInformasiMahasiswa.Models.MataKuliah  
 @{  
   ViewBag.Title = "Update Mata Kuliah";  
 }  
 <div class="row">  
   @if (ViewBag.Message != null)  
   {  
     <div class="col-md-12">  
       <div class="alert alert-danger">  
         @ViewBag.Message  
       </div>  
     </div>  
   }  
   <div class="col-md-12">  
     <h2>Update Mata Kuliah (ID Mata Kuliah: @Model.IdMataKuliah)</h2>  
     <br />  
     @using (Html.BeginForm("Update", "MataKuliah", FormMethod.Post))  
     {  
       @Html.HiddenFor(model => model.IdMataKuliah)  
       <div class="form-group">  
         <label>Mata Kuliah :</label>  
         @Html.TextBoxFor(model => model.NamaMataKuliah, new { @class = "form-control" })  
       </div>  
       <div class="form-group">  
         <label>Keterangan :</label>  
         @Html.TextBoxFor(model => model.Keterangan, new { @class = "form-control" })  
       </div>  
       <input type="submit" class="btn btn-primary" value="Update" />  
     }  
   </div>  
 </div>  


Kemudian ubah Action Link Update yang ada pada MataKuliahController.cs menjadi seperti ini

 public ActionResult Update(int IdMataKuliah)  
 {  
   MataKuliah MatKul = new MataKuliah();  
   using (SistemInformasiMahasiswaEntities db = new SistemInformasiMahasiswaEntities())  
   {  
     MatKul = db.MataKuliah.Find(IdMataKuliah);  
   }  
   if (MatKul == null)  
   {  
     TempData["message"] = "Mata Kuliah dengan ID " + IdMataKuliah + " tidak ada.";  
     return RedirectToAction("Index");  
   }  
   return View(MatKul);  
 }  
 [HttpPost]  
 public ActionResult Update(int IdMataKuliah, string NamaMataKuliah, string Keterangan)  
 {  
   MataKuliah MatKul = new MataKuliah();  
   if (NamaMataKuliah == "" || Keterangan == "")  
   {  
     MatKul.IdMataKuliah = IdMataKuliah;  
     MatKul.NamaMataKuliah = NamaMataKuliah;  
     MatKul.Keterangan = Keterangan;  
     ViewBag.Message = "Pastikan value tidak kosong.";  
     return View(MatKul);  
   }  
   else  
   {  
     using (SistemInformasiMahasiswaEntities db = new SistemInformasiMahasiswaEntities())  
     {  
       MatKul = db.MataKuliah.Find(IdMataKuliah);  
       MatKul.NamaMataKuliah = NamaMataKuliah;  
       MatKul.Keterangan = Keterangan;  
       try  
       {  
         db.SaveChanges();  
         TempData["message"] = "Data Mata Kuliah berhasil diubah.";  
         return RedirectToAction("Index", "MataKuliah");  
       }  
       catch (Exception)  
       {  
         ViewBag.Message = "Terjadi kesalahan saat menyimpan.";  
         return View(MatKul);  
       }  
     }  
   }  
 }  


Update Mata Kuliah


Saat kamu membuka halaman http://localhost:(port)/MataKuliah/Update?IdMataKuliah=1 maka akan tampil form untuk mengubah isi data mata kuliah seperti diatas. Ketika kamu klik tombol Update, maka data mata kuliah dengan ID = 1 akan berubah sesuai dengan apa yang kamu isi.



Seperti itulah konsep CRUD yang menggunakan teknologi ASP.NET MVC. Kamu dapat membuat CRUD untuk Kelas dan Mahasiswa untuk latihan. Untuk memasukkan data Kelas yang diikuti Mahasiswa akan dibahas di Part 3 penulisan ini.... Terimakasih.



Vimala Alief Utama


1 comment:

  1. Nyimak dulu :D, praktek prlan plran yg penting masuk ke akal :3

    ReplyDelete

Contact Form

Name

Email *

Message *