Bangun Website CRUD Sendiri dengan ASP .Net MVC dalam Sepekan

Daftar Isi

Pengantar ASP .Net MVC dan CRUD
Persiapan Lingkungan dan Tools
Struktur Proyek ASP .Net MVC
Membuat Model Data
Membuat Database dan Koneksi
Membuat Controller CRUD
Membuat View untuk CRUD
Testing dan Debugging
Deploy Website ke Server
Sumber Belajar dan Source Code

1. Pengantar ASP .Net MVC dan CRUD

ASP .Net MVC adalah framework dari Microsoft untuk membangun aplikasi web dengan pola Model-View-Controller. CRUD adalah singkatan dari Create, Read, Update, dan Delete, yaitu operasi dasar yang sering digunakan untuk mengelola data dalam aplikasi.

Dalam ebook ini, Anda akan belajar bagaimana membangun website CRUD menggunakan ASP .Net MVC secara lengkap dan step-by-step dalam waktu sepekan.

Diagram konsep ASP.Net MVC dan operasi CRUD dengan ikon model, view, controller dan database

2. Persiapan Lingkungan dan Tools

Sebelum mulai coding, pastikan Anda sudah menyiapkan beberapa tools berikut:

Visual Studio 2022 atau Visual Studio Code dengan extension C#
.NET SDK terbaru (minimal .NET 6)
SQL Server Express atau database lain yang kompatibel
Postman atau browser untuk testing API

Setelah tools siap, kita akan membuat proyek ASP .Net MVC baru.

Tampilan Visual Studio dengan proyek ASP.Net MVC baru dan ikon tools pendukung

3. Struktur Proyek ASP .Net MVC

Setelah membuat proyek baru, Anda akan melihat struktur folder seperti berikut:

Controllers - Tempat file controller yang mengatur alur aplikasi
Models - Tempat file model data
Views - Tempat file tampilan (UI)
wwwroot - Folder untuk file statis seperti CSS, JS, gambar

Struktur ini memudahkan pengembangan dan pemeliharaan aplikasi.

Screenshot struktur folder proyek ASP.Net MVC di Visual Studio dengan folder Controllers, Models, Views

4. Membuat Model Data

Model adalah representasi data yang akan kita kelola. Contoh model sederhana untuk entitas Product :


using System.ComponentModel.DataAnnotations;

namespace YourApp.Models
{
    public class Product
    {
        [Key]
        public int Id { get; set; }

        [Required]
        [StringLength(100)]
        public string Name { get; set; }

        [DataType(DataType.Currency)]
        public decimal Price { get; set; }

        public string Description { get; set; }
    }
}

Simpan file ini di folder Models dengan nama Product.cs .

Tampilan kode C# model Product di Visual Studio dengan atribut data annotations

5. Membuat Database dan Koneksi

Kita akan menggunakan Entity Framework Core untuk menghubungkan aplikasi dengan database. Tambahkan koneksi string di appsettings.json :


"ConnectionStrings": {
  "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=YourAppDb;Trusted_Connection=True;MultipleActiveResultSets=true"
}

Buat kelas ApplicationDbContext di folder Data :


using Microsoft.EntityFrameworkCore;
using YourApp.Models;

namespace YourApp.Data
{
    public class ApplicationDbContext : DbContext
    {
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
            : base(options)
        {
        }

        public DbSet<Product> Products { get; set; }
    }
}

Jangan lupa daftarkan ApplicationDbContext di Program.cs atau Startup.cs :


builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

Tampilan kode konfigurasi koneksi database dan Entity Framework Core di Visual Studio

6. Membuat Controller CRUD

Controller mengatur logika aplikasi dan menghubungkan model dengan view. Berikut contoh controller ProductsController dengan operasi CRUD:


using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using YourApp.Data;
using YourApp.Models;
using System.Threading.Tasks;

namespace YourApp.Controllers
{
    public class ProductsController : Controller
    {
        private readonly ApplicationDbContext _context;

        public ProductsController(ApplicationDbContext context)
        {
            _context = context;
        }

        // GET: Products
        public async Task<IActionResult> Index()
        {
            return View(await _context.Products.ToListAsync());
        }

        // GET: Products/Details/5
        public async Task<IActionResult> Details(int? id)
        {
            if (id == null) return NotFound();

            var product = await _context.Products.FirstOrDefaultAsync(m => m.Id == id);
            if (product == null) return NotFound();

            return View(product);
        }

        // GET: Products/Create
        public IActionResult Create()
        {
            return View();
        }

        // POST: Products/Create
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("Id,Name,Price,Description")] Product product)
        {
            if (ModelState.IsValid)
            {
                _context.Add(product);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(product);
        }

        // GET: Products/Edit/5
        public async Task<IActionResult> Edit(int? id)
        {
            if (id == null) return NotFound();

            var product = await _context.Products.FindAsync(id);
            if (product == null) return NotFound();

            return View(product);
        }

        // POST: Products/Edit/5
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Edit(int id, [Bind("Id,Name,Price,Description")] Product product)
        {
            if (id != product.Id) return NotFound();

            if (ModelState.IsValid)
            {
                try
                {
                    _context.Update(product);
                    await _context.SaveChangesAsync();
                }
                catch (DbUpdateConcurrencyException)
                {
                    if (!ProductExists(product.Id)) return NotFound();
                    else throw;
                }
                return RedirectToAction(nameof(Index));
            }
            return View(product);
        }

        // GET: Products/Delete/5
        public async Task<IActionResult> Delete(int? id)
        {
            if (id == null) return NotFound();

            var product = await _context.Products.FirstOrDefaultAsync(m => m.Id == id);
            if (product == null) return NotFound();

            return View(product);
        }

        // POST: Products/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> DeleteConfirmed(int id)
        {
            var product = await _context.Products.FindAsync(id);
            _context.Products.Remove(product);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }

        private bool ProductExists(int id)
        {
            return _context.Products.Any(e => e.Id == id);
        }
    }
}

Tampilan kode controller ProductsController di Visual Studio dengan operasi CRUD lengkap

7. Membuat View untuk CRUD

View adalah tampilan yang dilihat pengguna. Berikut contoh view Index.cshtml untuk menampilkan daftar produk:


@model IEnumerable<YourApp.Models.Product>

@{
    ViewData["Title"] = "Daftar Produk";
}

@ViewData["Title"]


    Tambah Produk Baru



@foreach (var item in Model) {
        
}
    
    
        
            Nama
            Harga
            Deskripsi
            
        
    
    
            @item.Name
            @item.Price.ToString("C")
            @item.Description
            
                Edit |
                Detail |
                Hapus

Nama	Harga	Deskripsi
@item.Name	@item.Price.ToString("C")	@item.Description	Edit \| Detail \| Hapus

Anda juga perlu membuat view untuk Create , Edit , Details , dan Delete dengan form dan tampilan sesuai kebutuhan.

Tampilan halaman web daftar produk dengan tabel dan tombol CRUD

8. Testing dan Debugging

Setelah semua selesai, jalankan aplikasi dengan dotnet run atau melalui Visual Studio. Gunakan browser untuk mengakses halaman CRUD dan pastikan semua fungsi berjalan dengan baik.

Gunakan tools seperti Postman untuk menguji API jika Anda membuat API controller. Debug jika ada error dan perbaiki sesuai pesan error yang muncul.