Pada artikel ini, kita akan belajar bagaimana membuat fitur Login dan Ganti Password sederhana dengan menggunakan C# ASP.NET tanpa menggunakan database. Fitur ini sangat cocok untuk aplikasi kecil atau prototipe yang membutuhkan autentikasi sederhana.
1. Gambaran Umum
Kita akan membuat sebuah AccountController yang menangani logika login dan perubahan password. Data pengguna akan disimpan dalam sebuah list statis di memori. Hal ini memungkinkan kita untuk membuat autentikasi yang cepat tanpa koneksi ke database.
2. Struktur Proyek
Untuk memulai, berikut adalah struktur proyek yang kita buat:
- Models/User.cs: Model untuk data pengguna.
- Models/LoginViewModel.cs: Model untuk login.
- Models/ChangePasswordViewModel.cs: Model untuk ganti password.
- Controllers/AccountController.cs: Controller untuk menangani fitur login dan ganti password.
- Views/Account/Login.cshtml: Halaman untuk login.
- Views/Account/ChangePassword.cshtml: Halaman untuk ganti password.
3. Implementasi Kode
3.1. Membuat Model Data
Models/User.cs
namespace WebAppLogin.Models
{
public class User
{
public int Userid { get; set; }
public string Username { get; set; }
public string Password { get; set; }
public string Email { get; set; }
}
}
Models/LoginViewModel.cs
namespace WebAppLogin.Models
{
public class LoginViewModel
{
[Required(ErrorMessage="Username is Required")]
public string Username { get; set; }
[Required(ErrorMessage ="Password is Requierd")]
public string Password { get; set; }
}
}
namespace WebAppLogin.Models
{
public class ChangePasswordViewModel
{
public string Username { get; set; }
public string OldPassword { get; set; }
public string NewPassword { get; set; }
public string ConfirmPassword { get; set; }
}
}
Berikut adalah kode untuk AccountController:
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using WebAppLogin.Models;
namespace WebAppLogin.Controllers
{
public class AccountController : Controller
{
private readonly List _users ;
public AccountController()
{
_users = new List
{
new User{Userid=1,Username="Alfiyan",Password="Alje123",Email="alje@gmail.com"},
new User{Userid=2,Username="ari",Password="Alje123",Email="alje@gmail.com"}
};
}
public IActionResult Index()
{
return View();
}
[HttpGet]
public IActionResult Login()
{
return View();
}
[HttpPost]
public IActionResult Login(LoginViewModel model)
{
if (ModelState.IsValid)
{
var user = _users.FirstOrDefault(m => m.Username == model.Username && m.Password == model.Password);
if (user != null)
{
TempData["Message"] = "Login successful";
return RedirectToAction("Index","Home");
}
else
{
ModelState.AddModelError("","Invalid Username of Password.");
}
}
return View(model);
}
[HttpGet]
public IActionResult ChangePassword()
{
return View();
}
[HttpPost]
public IActionResult ChangePassword(ChangePasswordViewModel model)
{
if (ModelState.IsValid)
{
var user = _users.FirstOrDefault(u => u.Username == model.Username && u.Password == model.OldPassword);
if (user != null)
{
if (model.NewPassword==model.ConfirmPassword)
{
user.Password = model.NewPassword;
TempData["Message"] = "Password changed successfully";
return RedirectToAction("Login");
}
else
{
ModelState.AddModelError("","New Password and Confirm Password do not match");
}
}
else
{
ModelState.AddModelError("","Invalid Username or Password");
}
}
return View(model);
}
}
}
Views/Account/Login.cshtml
@model LoginViewModel
<h2>Login</h2>@if (TempData["Message"] != null){ <div class="alert alert-success"> @TempData["Message"] </div>}<!-- Menampilkan pesan error --><div asp-validation-summary="ModelOnly" class="text-danger"></div><form asp-action="Login" method="post"> <div> <label for="Username">Username :</label> <input asp-for="Username" /> <span asp-validation-for="Username" class="text-danger"></span> </div> <div> <label for="Password">Password :</label> <input asp-for="Password" type="password" /> <span asp-validation-for="Password" class="text-danger"></span> </div> <button type="submit">Login</button></form>
@model ChangePasswordViewModel
<h2>Login</h2><!-- Menampilkan pesan error --><div asp-validation-summary="ModelOnly" class="text-danger"></div><form asp-action="ChangePassword" method="post"> <div> <label for="Username">Username :</label> <input asp-for="Username" /> </div> <div> <label for="Password">OldPassword :</label> <input asp-for="OldPassword" type="password" /> </div> <div> <label for="Password">NewPassword :</label> <input asp-for="NewPassword" type="password" /> </div> <div> <label for="Password">ConfirmPassword :</label> <input asp-for="ConfirmPassword" type="password" /> </div> <button type="submit">Change Password</button></form>
5. Menjalankan Aplikasi
Jalankan aplikasi di Visual Studio.
Akses halaman Login melalui URL /Account/Login.
Akses halaman Change Password melalui URL /Account/ChangePassword.
Kesimpulan
Dengan pendekatan ini, kita dapat membuat fitur login dan ganti password sederhana tanpa harus menggunakan database. Anda dapat menambahkan fitur lebih lanjut seperti validasi atau keamanan tambahan di masa mendatang.
untuk link githubnya disini https://github.com/alfiyanjaelani/WebAppLogin
Silahkan di download
Semoga artikel ini bermanfaat! Jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar. 😊
ConversionConversion EmoticonEmoticon