Daftar Isi

1. Pendahuluan
2. Persiapan Lingkungan Pengembangan
3. Struktur Proyek ASP.NET Core
4. Membuat Model Data eCommerce
5. Membuat Database dengan Entity Framework Core
6. Membuat Controller dan API
7. Membuat View dengan Razor Pages
8. Autentikasi dan Autorisasi
9. Keamanan Aplikasi eCommerce
10. Testing dan Debugging
11. Deploy Aplikasi ke Server
12. Sumber Belajar dan Referensi

1. Pendahuluan

Dalam panduan ini, Anda akan belajar langkah demi langkah bagaimana membangun aplikasi eCommerce yang aman menggunakan ASP.NET Core. Kami akan membahas mulai dari persiapan lingkungan, pembuatan model data, hingga deployment aplikasi.

ASP.NET Core adalah framework open-source yang powerful untuk membangun aplikasi web modern dan scalable. Dengan fitur keamanan yang lengkap, ASP.NET Core sangat cocok untuk aplikasi eCommerce yang membutuhkan perlindungan data dan transaksi.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, pastikan Anda sudah menyiapkan lingkungan pengembangan berikut:

• Visual Studio 2022 atau Visual Studio Code
• .NET 7 SDK terbaru (atau versi terbaru yang stabil)
• SQL Server Express atau database lain yang kompatibel
• Postman untuk testing API

Setelah menginstall, buat project baru dengan perintah berikut di terminal:

dotnet new webapp -n EcommerceApp
      

Buka folder project di editor pilihan Anda dan jalankan aplikasi dengan:

dotnet run
      

3. Struktur Proyek ASP.NET Core

Struktur folder default pada ASP.NET Core WebApp adalah sebagai berikut:

• Pages/ - Berisi Razor Pages (View + PageModel)
• wwwroot/ - File statis seperti CSS, JS, gambar
• appsettings.json - Konfigurasi aplikasi
• Program.cs - Entry point aplikasi dan konfigurasi service

Anda dapat menambahkan folder baru seperti Models , Data , dan Services untuk mengorganisir kode.

4. Membuat Model Data eCommerce

Model data adalah representasi objek yang akan digunakan dalam aplikasi. Berikut contoh model produk dan kategori:

using System.ComponentModel.DataAnnotations;

namespace EcommerceApp.Models
{
    public class Category
    {
        public int Id { get; set; }
        [Required, StringLength(100)]
        public string Name { get; set; }
        public ICollection<Product> Products { get; set; }
    }

    public class Product
    {
        public int Id { get; set; }
        [Required, StringLength(200)]
        public string Name { get; set; }
        [Required]
        public decimal Price { get; set; }
        public string Description { get; set; }
        public int CategoryId { get; set; }
        public Category Category { get; set; }
    }
}

      

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

5. Membuat Database dengan Entity Framework Core

Tambahkan package EF Core dan SQL Server dengan perintah:

dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
      

Buat folder Data dan buat kelas AppDbContext.cs :

using Microsoft.EntityFrameworkCore;
using EcommerceApp.Models;

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

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

      

Tambahkan konfigurasi di Program.cs untuk koneksi database:

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

// Jangan lupa menambahkan connection string di appsettings.json:
{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=EcommerceDb;Trusted_Connection=True;"
  }
}

      

Jalankan migrasi untuk membuat database:

dotnet ef migrations add InitialCreate
dotnet ef database update
      

6. Membuat Controller dan API

Untuk membuat API produk, buat folder Controllers dan buat file ProductsController.cs :

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using EcommerceApp.Data;
using EcommerceApp.Models;

namespace EcommerceApp.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class ProductsController : ControllerBase
    {
        private readonly AppDbContext _context;

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

        [HttpGet]
        public async Task<ActionResult<IEnumerable<Product>>> GetProducts()
        {
            return await _context.Products.Include(p => p.Category).ToListAsync();
        }

        [HttpGet("{id}")]
        public async Task<ActionResult<Product>> GetProduct(int id)
        {
            var product = await _context.Products.Include(p => p.Category).FirstOrDefaultAsync(p => p.Id == id);
            if (product == null)
                return NotFound();
            return product;
        }

        [HttpPost]
        public async Task<ActionResult<Product>> CreateProduct(Product product)
        {
            _context.Products.Add(product);
            await _context.SaveChangesAsync();
            return CreatedAtAction(nameof(GetProduct), new { id = product.Id }, product);
        }

        [HttpPut("{id}")]
        public async Task<IActionResult> UpdateProduct(int id, Product product)
        {
            if (id != product.Id)
                return BadRequest();

            _context.Entry(product).State = EntityState.Modified;
            try
            {
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!_context.Products.Any(e => e.Id == id))
                    return NotFound();
                else
                    throw;
            }
            return NoContent();
        }

        [HttpDelete("{id}")]
        public async Task<IActionResult> DeleteProduct(int id)
        {
            var product = await _context.Products.FindAsync(id);
            if (product == null)
                return NotFound();

            _context.Products.Remove(product);
            await _context.SaveChangesAsync();
            return NoContent();
        }
    }
}

      

Jangan lupa menambahkan service controller di Program.cs :

builder.Services.AddControllers();
app.MapControllers();
      

7. Membuat View dengan Razor Pages

Razor Pages memudahkan pembuatan UI. Contoh halaman daftar produk di Pages/Products/Index.cshtml :

@page
@model EcommerceApp.Pages.Products.IndexModel
@{
    ViewData["Title"] = "Daftar Produk";
}

Daftar Produk


    @foreach (var product in Model.Products)
    {
        
    }
    

    

        

            
Nama
            
Kategori
            
Harga
        
    
    

            
@product.Name
            
@product.Category.Name
            
@product.Price.ToString("C")
        


      

Kode PageModel di Pages/Products/Index.cshtml.cs :

using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using EcommerceApp.Data;
using EcommerceApp.Models;

namespace EcommerceApp.Pages.Products
{
    public class IndexModel : PageModel
    {
        private readonly AppDbContext _context;

        public IndexModel(AppDbContext context)
        {
            _context = context;
        }

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

        public async Task OnGetAsync()
        {
            Products = await _context.Products.Include(p => p.Category).ToListAsync();
        }
    }
}

      

8. Autentikasi dan Autorisasi

Untuk mengamankan aplikasi, gunakan ASP.NET Core Identity. Tambahkan package:

dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore
      

Tambahkan Identity di Program.cs :

builder.Services.AddDefaultIdentity<IdentityUser>()
    .AddEntityFrameworkStores<AppDbContext>();

app.UseAuthentication();
app.UseAuthorization();
      

Buat halaman login dan register menggunakan scaffolding atau manual dengan Razor Pages. Contoh sederhana form login:

@page
@model LoginModel
@{
    ViewData["Title"] = "Login";
}


    
Login
    

        Email
        
    
    

        Password
        
    
    
        Login
    


      

9. Keamanan Aplikasi eCommerce

Beberapa praktik keamanan penting yang harus diterapkan:

• Gunakan HTTPS untuk semua komunikasi
• Validasi input dari user untuk mencegah SQL Injection dan XSS
• Gunakan ASP.NET Core Identity untuk autentikasi dan manajemen user
• Implementasikan role-based authorization untuk membatasi akses
• Enkripsi data sensitif seperti password dan informasi pembayaran
• Gunakan Anti-forgery token untuk form POST

Contoh penggunaan Anti-forgery token di Razor Page:

<form method="post">
    @Html.AntiForgeryToken()
    <!-- form fields -->
</form>

      

10. Testing dan Debugging

Testing sangat penting untuk memastikan aplikasi berjalan dengan baik dan aman. Gunakan:

• Unit testing dengan xUnit atau NUnit
• Integration testing untuk API dan database
• Manual testing dengan Postman dan browser
• Debugging menggunakan Visual Studio Debugger

Contoh unit test sederhana untuk service produk:

using Xunit;
using EcommerceApp.Models;

public class ProductTests
{
    [Fact]
    public void Product_Price_Should_Be_Positive()
    {
        var product = new Product { Price = -10 };
        Assert.True(product.Price >= 0, "Harga produk harus positif");
    }
}

      

11. Deploy Aplikasi ke Server

Setelah aplikasi selesai, deploy ke server produksi. Pilihan hosting:

• Azure App Service
• Amazon AWS Elastic Beanstalk
• VPS dengan IIS atau Nginx reverse proxy

Contoh deploy ke Azure App Service:

dotnet publish -c Release
az webapp up --name nama-aplikasi-anda --resource-group nama-resource-group --runtime "DOTNETCORE|7.0"
      

12. Sumber Belajar dan Referensi

• Dokumentasi Resmi ASP.NET Core
• Entity Framework Core Tutorial
• Channel YouTube IAmTimCorey - Tutorial ASP.NET Core dan C#
• Channel YouTube .NET - Video resmi dari Microsoft
• Dokumentasi Tailwind CSS
• Pluralsight Course: Building Web APIs with ASP.NET Core and EF Core