Tutorial Lengkap: Membuat Template Form Login Responsive dengan Bootstrap di C# ASP.NET Core

Membuat Website kebanyakan pertama-tama kita dihadapkan dengan menu Login, Kita akan membahas tentang cara membuat Login User Sederhana. 

Langkah - langkah yang harus dilakukan antara lain, ialah :
    1. Membuat Tabel User

/****** Object:  Table [dbo].[Users]    Script Date: 11/24/2024 9:04:45 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Users](
	[UserID] [int] IDENTITY(1,1) NOT NULL,
	[UserName] [nvarchar](50) NOT NULL,
	[Password] [nvarchar](255) NOT NULL,
	[RoleID] [int] NOT NULL,
	[CompanyName] [nvarchar](100) NULL,
	[Phone] [nvarchar](20) NULL,
	[FullName] [nvarchar](100) NULL,
	[EmailAddress] [nvarchar](100) NULL,
	[CreatedDate] [datetime] NOT NULL,
	[CreatedBy] [nvarchar](50) NULL,
	[UpdatedDate] [datetime] NULL,
	[UpdatedBy] [nvarchar](50) NULL,
PRIMARY KEY CLUSTERED 
(
	[UserID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO

    2. Buat Controller Account

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;
using ALJEproject.Models; // Sesuaikan namespace berdasarkan struktur proyek Anda
using ALJEproject.ViewModels; // Anggap Anda memiliki LoginViewModel untuk detail login
using ALJEproject.Data;
using Microsoft.Extensions.Logging;
using System.Linq;
using Microsoft.AspNetCore.Http;

namespace ALJEproject.Controllers
{
    public class AccountController : Controller
    {
        private readonly ILogger<AccountController> _logger;
        private readonly ALJEprojectDbContext _context;
        private readonly PasswordHasher<User> _passwordHasher;

        // Konstruktor yang menggabungkan kedua dependensi
        public AccountController(ALJEprojectDbContext context, ILogger<AccountController> logger)
        {
            _context = context;
            _logger = logger;
            _passwordHasher = new PasswordHasher<User>();
        }

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

        [HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public IActionResult Login(LoginViewModel vm)
        {
            if (string.IsNullOrEmpty(vm.Username) || string.IsNullOrEmpty(vm.Password))
            {
                ModelState.AddModelError("", "Username and password are required.");
                return View();
            }

            if (SignInMethod(vm.Username, vm.Password))
            {
                // Set session untuk username dan role
                HttpContext.Session.SetString("Username", vm.Username);

                // Misalkan Anda mendapatkan role dari database berdasarkan username
                var user = _context.UserRoles.SingleOrDefault(u => u.UserName == vm.Username);
                if (user != null)
                {
                    HttpContext.Session.SetString("Role", user.RoleName);
                }

                return RedirectToAction("Index", "Home");
            }

            ModelState.AddModelError("", "Invalid username or password.");
            return View("Login");
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Logout()
        {
            HttpContext.Session.Clear(); // Menghapus semua data session
            return RedirectToAction("Login", "Account");
        }

        private bool SignInMethod(string username, string password)
        {
            var user = _context.Users.SingleOrDefault(u => u.UserName == username);

            if (user == null)
            {
                return false; // User not found
            }

            var result = _passwordHasher.VerifyHashedPassword(user, user.Password, password);
            return result == PasswordVerificationResult.Success;
        }      
    }
}

    3. Buat ViewModels LoginViewModel

using System.ComponentModel.DataAnnotations;

namespace ALJEproject.ViewModels
{
    public class LoginViewModel
    {
        [Required]
        [Display(Name = "Username")]
        public string Username { get; set; }

        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [Display(Name = "Remember Me")]
        public bool RememberMe { get; set; }
    }
}

    4. Buat Login.cshtml

  
@model ALJEproject.ViewModels.LoginViewModel
@{
    Layout = null;
}

<html lang="en">
<head>
    <meta charset="utf-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Login</title>
    <style>
        body {
            background-color: #30abd5;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }

        .login-card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            max-width: 400px;
            width: 100%;
            padding: 2rem;
        }

            .login-card .card-header {
                background-color: #30abd5;
                color: white;
                text-align: center;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                padding: 1rem;
            }

        .btn-primary {
            background-color: #30abd5;
            border-color: #30abd5;
        }

            .btn-primary:hover {
                background-color: #259bb3;
                border-color: #259bb3;
            }
    </style>
</head>
<body>
    <div class="login-card">
        <div class="card-header">
            <h3 class="card-title mb-0">Login</h3>
        </div>
        <div class="card-body">
            <form asp-action="Login" method="post">
                @Html.AntiForgeryToken()
                <div class="form-group">
                    <label asp-for="Username" class="font-weight-bold">Username</label>
                    <input asp-for="Username" class="form-control" placeholder="Enter your username" />
                    <span asp-validation-for="Username" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Password" class="font-weight-bold">Password</label>
                    <input asp-for="Password" class="form-control" placeholder="Enter your password" type="password" />
                    <span asp-validation-for="Password" class="text-danger"></span>
                </div>
                <div class="form-group form-check">
                    <input asp-for="RememberMe" class="form-check-input" id="rememberMeCheckbox" />
                    <label asp-for="RememberMe" class="form-check-label" for="rememberMeCheckbox">Remember Me</label>
                </div>
                <button class="btn btn-primary btn-block" type="submit">Login</button>
            </form>
        </div>
        <div class="card-footer text-center">
            <small class="text-muted">Don't have an account? <a class="text-primary" href="/Account/Register">Register</a></small>
        </div>
    </div>
</body>
</html>


@section Scripts {
    <partial name="_ValidationScriptsPartial">
}

    5. Tampilan Login akan sama seperti gambar di atas.