Buat Situs Web ASP.NET Core MVC CRUD Menggunakan RepoDB ORM Dan SQL Server

  • Whatsapp
Buat Situs Web ASP.NET Core MVC CRUD Menggunakan RepoDB ORM Dan SQL Server

Halo semua!

Posting blog ini menggambarkan cara membuat Aplikasi Web ASP.NET Core 5.0 MVC CRUD menggunakan RepoDB ORM dan SQL Server. RepoDB adalah pustaka ORM hybrid untuk .NET yang merupakan ORM alternatif untuk Dapper dan EntityFramework. Kerangka ini dibuat oleh Michael Camara Pendon. Proyek ini juga mengintegrasikan Bootstrap 4 untuk penataan dan Unit Kerja dengan Pola Desain Repositori sebagai mekanisme datanya. Saya juga menginstal Font Awesome 5 melalui Libman untuk menampilkan ikon ke kontrol tombol. Jadi untuk memulai, lakukan langkah-langkah berikut di bawah ini.

I. Setup Proyek

1. Buat tabel Atlet di database Anda menggunakan skrip yang disediakan. Tabel ini akan berfungsi sebagai kumpulan data untuk proyek ini.

Bacaan Lainnya

USE [your_database]
GO

/****** Object: Table [dbo].[Athletes] Script Date: 5/5/2021 4:13:47 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Athletes](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](100) NULL,
[Age] [int] NULL,
[Country] [varchar](50) NULL,
[Sport] [varchar](50) NULL,
[Allowance] [decimal](18, 2) NULL,
[Weight] [decimal](18, 2) NULL,
[Height] [decimal](18, 2) NULL,
[Gender] [varchar](50) NULL,
CONSTRAINT [PK_Athletes] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

2. Buat aplikasi web ASP.NET Core 5.0 MVC baru.
3. Tambahkan folder baru bernama Data Access Layer dengan dua subfolder yaitu Repository dan UnitOfWork. Untuk proyek ini, saya tidak menambahkan perpustakaan kelas yang memisahkan infrastruktur dan model karena ini hanya melibatkan pengkodean minimal.

Membuat CRUD Situs Web ASP.NET Core MVC Menggunakan RepoDB ORM Dan SQL Server

4. Tambahkan paket Nuget RepoDB.SqlServer untuk berkomunikasi dengan database SQL Server.

Membuat CRUD Situs Web ASP.NET Core MVC Menggunakan RepoDB ORM Dan SQL Server

5. Instal versi 5.x font-awesome melalui libman.

Membuat CRUD Situs Web ASP.NET Core MVC Menggunakan RepoDB ORM Dan SQL Server

6. Selanjutnya adalah menambahkan string koneksi di dalam appsettings.json. Pastikan untuk mengganti nama server dan database.

{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*",
"ConnectionStrings": {
"ASPCoreRepoDB": "Server=YourServer;Database=YourDB;Integrated Security=True"
}
}

II. Coding Kelas Model

1. Di dalam folder Model Anda, tambahkan kelas yang berisi informasi yang menggambarkan seorang atlet. Model ini tidak memiliki atribut validasi sendiri. Anda dapat memilih untuk menambahkannya jika Anda mau.

   [Serializable]
public class Athletes
{
public int ID { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public string Country { get; set; }
public string Sport { get; set; }
public decimal Allowance { get; set; }
public decimal Weight { get; set; }
public decimal Height { get; set; }
public string Gender { get; set; }

public Athletes()
{
ID = 0;
Name = string.Empty;
Age = 0;
Country = string.Empty;
Sport = string.Empty;
Allowance = 0;
Weight = 0;
Height = 0;
Gender = string.Empty;
}
}

AKU AKU AKU. Mengkodekan Kelas dan Antarmuka Akses Data (Repositori dan Unit Kerja)

Di bagian ini, kita akan membuat inferaces dan kelas menggunakan Pola Desain Repositori dan Unit Kerja. Untuk penjelasan lebih lanjut, silakan merujuk ke halaman ini Menerapkan Repositori dan Unit Pola Kerja dalam Aplikasi ASP.NET MVC disediakan oleh Microsoft.

1. Tambahkan antarmuka IRepository dengan definisi fungsi umum untuk operasi CRUD seperti FindByID (), GetAll (), Add (), Delete () dan Update ().

public interface IRepository<T> where T: class{
T FindByID(int ID);
IEnumerable<T> GetAll();
int Add(T Entity);
int Delete(T Entity);
int Update(T Entity);
}
2. Buat kelas yang disebut GenericRepository yang mengimplementasikan antarmuka IRepository. Kelas ini memiliki dua variabel yaitu IConfiguration yang mengambil nilai string koneksi dari appsettings.json dan string koneksi. Dalam metode konstruktor, tetapkan nilai untuk variabel IConfiguration menggunakan injeksi konstruktor. Setelah diinisialisasi, gunakan metode GettConnectionString () untuk mengambil nilai string koneksi dan menyimpannya ke variabel tingkat kelas. Kelas ini juga mengimplementasikan metode yang ditentukan dalam antarmuka IRepository yang menggunakan rangkaian fungsi yang telah ditentukan ORM RepoDB untuk memanipulasi informasi database.

public class GenericRepository<T> : IRepository<T> where T : class{
private readonly IConfiguration _configuration;
private readonly string connectionString;

public GenericRepository(IConfiguration configuration)
{
_configuration = configuration;
connectionString = _configuration.GetConnectionString("ASPCoreRepoDB");
}

public int Add(T Entity)
{
int id = 0;

try
{
using (var connection = new SqlConnection(this.connectionString))
{
id = (int)connection.Insert<T>(Entity);
}
}
catch (Exception ex)
{
return -1;
}

return id;
}

public int Update(T Entity)
{
int affectedRows = 0;

try
{
using (var connection = new SqlConnection(this.connectionString))
{
affectedRows = (int)connection.Update<T>(Entity);
}
}
catch (Exception ex)
{
return -1;
}

return affectedRows;
}

public int Delete(T Entity)
{
int affectedRows = 0;

try
{
using (var connection = new SqlConnection(this.connectionString))
{
affectedRows = (int)connection.Delete<T>(Entity);
}
}
catch (Exception ex)
{
return -1;
}

return affectedRows;
}

public T FindByID(int ID)
{
T result;

try
{
using (var connection = new SqlConnection(this.connectionString))
{
result = connection.Query<T>(ID).FirstOrDefault();
}
}
catch (Exception ex)
{
return null;
}

return result;
}

public IEnumerable<T> GetAll()
{
List<T> lstAthletes;

lstAthletes = new List<T>();

try
{
using (var connection = new SqlConnection(this.connectionString))
{
connection.Open();
lstAthletes = connection.QueryAll<T>().ToList();
}
}
catch (Exception ex)
{
return null;
}

return lstAthletes;
}
}

3. Di dalam folder UnitOfWork Anda, buat antarmuka IUnitOfWork dengan repositori Atlet berjenis IRepository.

 public interface IUnitOfWork
{
IRepository<Athletes> AthletesRepository { get; }
}

4. Kemudian tambahkan kelas UnitOfWork yang mengimplementasikan antarmuka IUnitOfWork dengan membuat properti AthletesRepository yang nilainya ditetapkan di kontraktor.

public class UnitOfWork : IUnitOfWork
{
public IRepository<Athletes> AthletesRepository { get; private set; }

public UnitOfWork(IRepository<Athletes> repository)
{
this.AthletesRepository = repository;
}
}

5. Dalam file Startup.cs, inisialisasi kelas SqlServerBootstrap dari RepoDB dan petakan antarmuka dengan implementasinya yang sesuai menggunakan metode AddTransient ().

public void ConfigureServices(IServiceCollection services)
{
RepoDb.SqlServerBootstrap.Initialize();
services.AddTransient(typeof(IRepository<>), typeof(GenericRepository<>));
services.AddTransient<IUnitOfWork, UnitOfWork>();

services.AddControllersWithViews();
}

IV. Coding Kelas Controller

Di kelas HomeController.cs, buat variabel Unit Of Work tingkat kelas yang kemudian akan diberi nilai melalui konstruktor HomeController. Agar ini berfungsi, Anda sudah memetakan jenis layanan dan implementasinya di file Startup.cs seperti yang disebutkan di atas. Dan kemudian buat metode ActionResult yang akan menampilkan semua atlet ke tampilan, menambahkan atlet baru ke database, memperbarui nilainya, dan menghapusnya dari database. Setiap metode ActionResult yang ditentukan akan memanggil metode CRUD dari kelas repositori yang menggunakan fungsi RepoDB yang mengagumkan melalui variabel Unit Of Work.

public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
private IUnitOfWork _unitOfWork;

public HomeController(ILogger<HomeController> logger, IUnitOfWork unitOfWork)
{
_logger = logger;
_unitOfWork = unitOfWork;
}

public IActionResult Index()
{
List<Athletes> model;

model = new List<Athletes>();

model = _unitOfWork.AthletesRepository.GetAll().ToList();

return View(model);
}

[HttpGet]
public IActionResult Create()
{
return View();
}

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Create(Athletes athlete)
{
if (ModelState.IsValid)
{
_unitOfWork.AthletesRepository.Add(athlete);

return RedirectToAction("Index");
}

return View("Index");
}

[HttpGet]
public IActionResult Edit(int? id)
{
Athletes model;

model = new Athletes();

if (id == null)
return NotFound();

model = _unitOfWork.AthletesRepository.FindByID(Convert.ToInt32(id));

if (model == null)
return NotFound();

return View(model);
}

[HttpPost]
public ActionResult Edit(Athletes athlete)
{
try
{
_unitOfWork.AthletesRepository.Update(athlete);
return RedirectToAction("Index");
}
catch
{
return View();
}
}

[HttpGet]
public IActionResult Delete(int? id)
{
Athletes model;

model = new Athletes();

if (id == null)
return NotFound();

model = _unitOfWork.AthletesRepository.FindByID(Convert.ToInt32(id));

if (model == null)
return NotFound();

return View(model);
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Delete(Athletes athlete)
{
try
{
_unitOfWork.AthletesRepository.Delete(athlete);
return RedirectToAction("Index");
}
catch
{
return View();
}
}

public IActionResult Privacy()
{
return View();
}

[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}

V. Mengkode Tampilan

1. Layout.cshtml – Referensi file css fontawesome yaitu fontawesome.css, regular.min.css dan solid.min.css.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Superstar Athletes</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
@* header, container and footer elements here *@
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.css" />
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">
@RenderSection("Scripts", required: false)
</body>
</html>

2. Index.cshtml – Halaman ini memiliki tabel yang akan diisi dengan record yang diambil dari sumber data. Setiap baris memiliki tombol hapus dan edit yang mengarahkan untuk menghapus dan mengedit halaman masing-masing. Halaman ini juga memiliki tombol baru yang membuka informasi Tambah Atlet Baru.

@model IEnumerable<ASPCoreMVCRepoDB.Models.Athletes>

@{
ViewData["Title"] = "Index";
}

<div id="divIndexHeader">
<h3>Athletes Record Monitoring</h3>
</div>

<div id="divIndexCreate" class="row">
<a asp-action="Create" class="btn btn-primary">
<i class="fas fa-plus"><span> Add Athlete</span></i>
</a>
</div>
<div class="row">
<table id="tblRecords" class="table table-bordered table-striped">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.ID)
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Age)
</th>
<th>
@Html.DisplayNameFor(model => model.Country)
</th>
<th>
@Html.DisplayNameFor(model => model.Sport)
</th>
<th>
@Html.DisplayNameFor(model => model.Allowance)
</th>
<th>
@Html.DisplayNameFor(model => model.Weight)
</th>
<th>
@Html.DisplayNameFor(model => model.Height)
</th>
<th>
@Html.DisplayNameFor(model => model.Gender)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.ID)
</td>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Age)
</td>
<td>
@Html.DisplayFor(modelItem => item.Country)
</td>
<td>
@Html.DisplayFor(modelItem => item.Sport)
</td>
<td>
@Html.DisplayFor(modelItem => item.Allowance)
</td>
<td>
@Html.DisplayFor(modelItem => item.Weight)
</td>
<td>
@Html.DisplayFor(modelItem => item.Height)
</td>
<td>
@Html.DisplayFor(modelItem => item.Gender)
</td>
<td>
<a asp-action="Edit" title="Edit Employee" asp-route-id="@item.ID">
<i class="fas fa-edit"></i>
</a>
<a asp-action="Delete" title="Delete Employee" asp-route-id="@item.ID">
<i class="fas fa-trash"></i>
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
@section scripts{
<link href="~/css/Athletes.css" rel="stylesheet" />
}

3. Create.cshtml – Tampilan ini bertanggung jawab untuk menambahkan atlet baru ke database.

@model ASPCoreMVCRepoDB.Models.Athletes

@{
ViewData["Title"] = "Create";
}

<div>
<h3>Add New Athlete</h3>
</div>

<hr />
<div class="row">
<div class="col-6">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group row">
<label asp-for="Name" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Age" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Age" class="form-control" />
<span asp-validation-for="Age" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Country" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Country" class="form-control" />
<span asp-validation-for="Country" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Sport" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Sport" class="form-control" />
<span asp-validation-for="Sport" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Allowance" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Allowance" class="form-control" />
<span asp-validation-for="Allowance" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Weight" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Weight" class="form-control" />
<span asp-validation-for="Weight" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Height" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Height" class="form-control" />
<span asp-validation-for="Height" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Gender" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Gender" class="form-control" />
<span asp-validation-for="Gender" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-4"></div>
<div class="col-8">
<input type="submit" value="Create" class="btn btn-primary" />
<a asp-action="Index" class="btn btn-info">Back to List</a>
</div>
</div>
</form>
</div>
</div>

4. Edit.cshtml – Halaman ini bertanggung jawab untuk mengedit atlet yang ada dari database. Tata letak formulir mirip dengan halaman Buat kecuali yang memiliki bidang tersembunyi untuk ID atlet. Karena ID adalah kolom identitas di database kami, kami tidak perlu mengeditnya.

@model ASPCoreMVCRepoDB.Models.Athletes

@{
ViewData["Title"] = "Edit";
}

<div>
<h3>Edit Athlete Record</h3>
</div>

<hr />
<div class="row">
<div class="col-6">
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="ID" />
<div class="form-group row">
<label asp-for="Name" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Age" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Age" class="form-control" />
<span asp-validation-for="Age" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Country" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Country" class="form-control" />
<span asp-validation-for="Country" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Sport" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Sport" class="form-control" />
<span asp-validation-for="Sport" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Allowance" class="control-labe col-4"></label>
<div class="col-8">
<input asp-for="Allowance" class="form-control" />
<span asp-validation-for="Allowance" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Weight" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Weight" class="form-control" />
<span asp-validation-for="Weight" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Height" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Height" class="form-control" />
<span asp-validation-for="Height" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label asp-for="Gender" class="control-label col-4"></label>
<div class="col-8">
<input asp-for="Gender" class="form-control" />
<span asp-validation-for="Gender" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-4"></div>
<div class="col-8">
<input type="submit" value="Save" class="btn btn-primary" />
<a asp-action="Index" class="btn btn-info">Back to List</a>
</div>
</div>
</form>
</div>
</div>

5. Delete.cshtml – Halaman ini akan menampilkan record yang akan dihapus. Ketika formulir dikirimkan, itu akan memanggil metode Hapus di pengontrol dan menghapus catatan itu dari database menggunakan ID pemain.

@model ASPCoreMVCRepoDB.Models.Athletes

@{
ViewData["Title"] = "Delete";
}

<div>
<h3>Are you sure you want to delete this record?</h3>
</div>

<hr />
<div>
<dl class="row">
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Name)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Name)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Age)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Age)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Country)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Country)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Sport)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Sport)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Allowance)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Allowance)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Weight)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Weight)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Height)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Height)
</dd>
<dt class="col-sm-2">
@Html.DisplayNameFor(model => model.Gender)
</dt>
<dd class="col-sm-10">
@Html.DisplayFor(model => model.Gender)
</dd>
</dl>

<form asp-action="Delete">
<input type="hidden" asp-for="ID" />
<input type="submit" value="Delete" class="btn btn-danger" />
<a asp-action="Index" class="btn btn-info">Back to List</a>
</form>
</div>

6. Athletes.css – File ini memiliki gaya css kustom yang digunakan oleh tampilan proyek.

#divIndexCreate {
margin-top: 20px;
margin-bottom: 20px;
}

#divIndexHeader {
margin-top: 50px;
margin-bottom: 50px;
text-align:center;
}

#tblRecords{
border-radius: 5px;
}

Saat menjalankan proyek, tampilan Indeks akan muncul di layar.

Membuat CRUD Situs Web ASP.NET Core MVC Menggunakan RepoDB ORM Dan SQL Server

Pos terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *