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

 

Setelah membuat tutorial Login, selanjutnya saya akan sharing cara membuat Logout, inilah step-step nya:

    1. Buat controller

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;

        }      

    }

}

    2. Buat view di _Layout.cshtml

@using Microsoft.AspNetCore.Http

@{ 

    var username = Context.Session.GetString("Username"); // Ambil username dari session 

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>@ViewData["Title"] - ALJEproject</title>

    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

    <link rel="stylesheet" href="~/css/site.css" />

    <link rel="stylesheet" href="~/lib/fontawesome/css/all.min.css" />

</head>

<body>

    <header>

        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">

            <div class="container">

                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ALJEproject</a>

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"

                        aria-expanded="false" aria-label="Toggle navigation">

                    <span class="navbar-toggler-icon"></span>

                </button>

                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">

                    <ul class="navbar-nav flex-grow-1">

                        <li class="nav-item">

                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>

                        </li>

                        @if (ViewBag.Menus != null)

                        {

                            var groupedMenus = ViewBag.Menus as List<Menu>;


                            foreach (var parentMenu in groupedMenus.Where(m => m.ParentMenuID == null)) // Hanya ambil parent menu

                            {

                            <li class="nav-item dropdown">

                                <a class="nav-link dropdown-toggle text-dark" href="#" id="menuDropdown_@parentMenu.MenuID" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                    @parentMenu.MenuDesc <!-- Nama parent menu sebagai label dropdown -->

                                </a>

                                <div class="dropdown-menu" aria-labelledby="menuDropdown_@parentMenu.MenuID">

                                    @foreach (var subMenu in parentMenu.SubMenus)

                                    {

                            <a class="dropdown-item" asp-area="" asp-controller="@subMenu.ControllerName" asp-action="Index">@subMenu.MenuDesc</a>}

                                </div>

                            </li>

                            }

                         }

                        <li class="nav-item dropdown">

                            <a class="nav-link dropdown-toggle text-dark" href="#" id="administratorDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                Administrator

                            </a>

                            <div class="dropdown-menu" aria-labelledby="administratorDropdown">

                                <a class="dropdown-item" asp-area="" asp-controller="Menu" asp-action="Index">Menu</a>

                                <a class="dropdown-item" asp-area="" asp-controller="User" asp-action="Index">User</a>

                                <a class="dropdown-item" asp-area="" asp-controller="UserAccess" asp-action="Index">User Access</a>

                                <a class="dropdown-item" asp-area="" asp-controller="Role" asp-action="Index">Role</a>

                                <a class="dropdown-item" asp-area="" asp-controller="Option" asp-action="Index">Option</a>

                            </div>

                        </li>

                    </ul>

                    <ul class="navbar-nav">

                        @if (!string.IsNullOrEmpty(username))

                        {

                            username = Context.Session.GetString("Username");

                            <li class="nav-item">

                                <span class="navbar-text text-dark">Hello, @username!</span>

                            </li>

                            <li class="nav-item">

                                <form asp-area="" asp-controller="Account" asp-action="Logout" method="post" class="form-inline">

                                    <button type="submit" class="btn btn-link nav-link text-dark">Logout</button>

                                </form>

                            </li>

                        }

                        else

                        {

                            <li class="nav-item">

                                <a class="nav-link text-dark" asp-area="" asp-controller="Account" asp-action="Login">Login</a>

                            </li>

                        }

                    </ul>

                </div>

            </div>

        </nav>

    </header>

    <div class="container">

        <main role="main" class="pb-3">

            @RenderBody()

        </main>

    </div>


    <footer class="border-top footer text-muted">

        <div class="container">

            &copy; 2024 - ALJEproject - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>

        </div>

    </footer>

    <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="~/lib/fontawesome/js/all.min.js"></script>

    @await RenderSectionAsync("Scripts", required: false)

</body>

</html>

Previous
Next Post »