1.
Criando o Projeto
Para iniciar, crie um novo projeto MVC no .NET Core 6:
dotnet new mvc -n LoginCRUD
cd LoginCRUD
Adicione os pacotes necessários:
dotnet add package [Link]
dotnet add package [Link]
dotnet add package [Link] (Este não vai funcionar)
dotnet add package [Link]
dotnet add package [Link]
via NuGet instalar [Link]
Pacotes corretos:
dotnet add package [Link] --version 8.0.0
dotnet add package [Link] --version 8.0.0
dotnet add package [Link] (não vai funcionar
dotnet add package [Link] --version 8.0.0
dotnet add package [Link] --version 8.0.0
dotnet add package [Link] --version 8.0.0
2. Configuração do Banco de Dados
2.1. Configurar o [Link]
{
"ConnectionStrings": {
"DefaultConnection": "Server=localhost;Database=loginappdb;User=root;Password=yourpassword;"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"[Link]": "Warning"
}
},
"AllowedHosts": "*"
}
2. Configuração do Banco de Dados
2.1. Configurar o [Link]
{
"ConnectionStrings": {
"DefaultConnection": "Server=localhost;Database=loginappdb;User=root;Password=yourpassword;"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"[Link]": "Warning"
}
},
"AllowedHosts": "*"
}
2.2. Configurar o DbContext
Crie uma classe AppDbContext no diretório Data:
using [Link];
using [Link];
namespace [Link]
{
public class AppDbContext : DbContext
{
public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }
public DbSet<Usuario> Usuarios { get; set; }
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
[Link]<Usuario>()
.Property(u => [Link])
.HasDefaultValueSql("CURRENT_TIMESTAMP");
[Link]<Usuario>()
.Property(u => [Link])
.HasDefaultValueSql("CURRENT_TIMESTAMP");
}
}
}
3. Modelo de Dados
Crie a classe Usuario no diretório Models:
using System;
using [Link];
namespace [Link]
{
public class Usuario
{
public int Id { get; set; }
[Required]
public string Nome { get; set; }
[Required]
[EmailAddress]
public string Email { get; set; }
[Required]
public string Login { get; set; }
[Required]
public string Senha { get; set; }
public DateTime DataCadastro { get; set; }
public DateTime DataLogin { get; set; }
}
}
4. Repositório
Crie uma interface IUsuarioRepository e sua implementação UsuarioRepository no
diretório Repositories:
using [Link];
using [Link];
using [Link];
namespace [Link]
{
public interface IUsuarioRepository
{
Task<IEnumerable<Usuario>> GetAllAsync();
Task<Usuario> GetByIdAsync(int id);
Task AddAsync(Usuario usuario);
Task UpdateAsync(Usuario usuario);
Task DeleteAsync(int id);
}
public class UsuarioRepository : IUsuarioRepository
{
private readonly AppDbContext _context;
public UsuarioRepository(AppDbContext context)
{
_context = context;
}
public async Task<IEnumerable<Usuario>> GetAllAsync()
{
return await _context.[Link]();
}
public async Task<Usuario> GetByIdAsync(int id)
{
return await _context.[Link](id);
}
public async Task AddAsync(Usuario usuario)
{
await _context.[Link](usuario);
await _context.SaveChangesAsync();
}
public async Task UpdateAsync(Usuario usuario)
{
_context.[Link](usuario);
await _context.SaveChangesAsync();
}
public async Task DeleteAsync(int id)
{
var usuario = await _context.[Link](id);
if (usuario != null)
{
_context.[Link](usuario);
await _context.SaveChangesAsync();
}
}
}
}
5. Serviço
Crie uma interface IUsuarioService e sua implementação UsuarioService no
diretório Services:
using [Link];
using [Link];
using [Link];
using [Link];
namespace [Link]
{
public interface IUsuarioService
{
Task<IEnumerable<Usuario>> GetAllAsync();
Task<Usuario> GetByIdAsync(int id);
Task AddAsync(Usuario usuario);
Task UpdateAsync(Usuario usuario);
Task DeleteAsync(int id);
}
public class UsuarioService : IUsuarioService
{
private readonly IUsuarioRepository _usuarioRepository;
public UsuarioService(IUsuarioRepository usuarioRepository)
{
_usuarioRepository = usuarioRepository;
}
public async Task<IEnumerable<Usuario>> GetAllAsync()
{
return await _usuarioRepository.GetAllAsync();
}
public async Task<Usuario> GetByIdAsync(int id)
{
return await _usuarioRepository.GetByIdAsync(id);
}
public async Task AddAsync(Usuario usuario)
{
await _usuarioRepository.AddAsync(usuario);
}
public async Task UpdateAsync(Usuario usuario)
{
await _usuarioRepository.UpdateAsync(usuario);
}
public async Task DeleteAsync(int id)
{
await _usuarioRepository.DeleteAsync(id);
}
}
}
6. Controlador
Crie um controlador UsuarioController no diretório Controllers:
using [Link];
using [Link];
using [Link];
using [Link];
namespace [Link]
{
[Route("api/[controller]")]
[ApiController]
public class UsuarioController : ControllerBase
{
private readonly IUsuarioService _usuarioService;
public UsuarioController(IUsuarioService usuarioService)
{
_usuarioService = usuarioService;
}
[HttpGet]
public async Task<IActionResult> GetAll()
{
var usuarios = await _usuarioService.GetAllAsync();
return Ok(usuarios);
}
[HttpGet("{id}")]
public async Task<IActionResult> GetById(int id)
{
var usuario = await _usuarioService.GetByIdAsync(id);
if (usuario == null)
{
return NotFound();
}
return Ok(usuario);
}
[HttpPost]
public async Task<IActionResult> Create([FromBody] Usuario usuario)
{
if (![Link])
{
return BadRequest(ModelState);
}
await _usuarioService.AddAsync(usuario);
return CreatedAtAction(nameof(GetById), new { id = [Link] }, usuario);
}
[HttpPut("{id}")]
public async Task<IActionResult> Update(int id, [FromBody] Usuario usuario)
{
if (id != [Link])
{
return BadRequest();
}
await _usuarioService.UpdateAsync(usuario);
return NoContent();
}
[HttpDelete("{id}")]
public async Task<IActionResult> Delete(int id)
{
await _usuarioService.DeleteAsync(id);
return NoContent();
}
}
}
7. Configuração do Startup
No arquivo [Link], configure os serviços e o middleware:
using [Link];
using [Link];
using [Link];
using [Link];
var builder = [Link](args);
// Add services to the container.
[Link]<AppDbContext>(options =>
[Link]([Link]("DefaultConnection"),
new MySqlServerVersion(new Version(8, 0, 0))));
[Link]<IUsuarioRepository, UsuarioRepository>();
[Link]<IUsuarioService, UsuarioService>();
[Link]();
var app = [Link]();
// Configure the HTTP request pipeline.
if (![Link]())
{
[Link]("/Home/Error");
[Link]();
}
[Link]();
[Link]();
[Link]();
[Link]();
[Link](
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
[Link]();
8. Views
8.1. Página de Login ([Link])
Crie uma página de login em Views/Home/[Link]:
@{
ViewData["Title"] = "Login";
}
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<h2 class="text-center">Login</h2>
<form id="loginForm">
<div class="form-group">
<label for="login">Login</label>
<input type="text" class="form-control" id="login" required>
</div>
<div class="form-group">
<label for="senha">Senha</label>
<input type="password" class="form-control" id="senha" required>
</div>
<button type="submit" class="btn btn-primary btn-block">Entrar</button>
</form>
</div>
</div>
</div>
@section Scripts {
<script>
$(document).ready(function () {
$('#loginForm').on('submit', function (e) {
[Link]();
const login = $('#login').val();
const senha = $('#senha').val();
$.ajax({
url: '/api/Usuario/Login',
method: 'POST',
contentType: 'application/json',
data: [Link]({ login: login, senha: senha }),
success: function (response) {
[Link] = '/Home/Dashboard';
},
error: function (xhr) {
alert('Login ou senha incorretos');
}
});
});
});
</script>
}
Run HTML
8.2. Página de Dashboard ([Link])
Crie uma página de dashboard em Views/Home/[Link]:
@{
ViewData["Title"] = "Dashboard";
}
<div class="container">
<h2>Lista de Usuários</h2>
<table id="usuariosTable" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Email</th>
<th>Login</th>
<th>Data Cadastro</th>
<th>Data Login</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
@section Scripts {
<link rel="stylesheet" type="text/css"
href="[Link]
<script type="text/javascript" charset="utf8"
src="[Link]
<script>
$(document).ready(function () {
var table = $('#usuariosTable').DataTable({
ajax: {
url: '/api/Usuario',
dataSrc: ''
},
columns: [
{ data: 'id' },
{ data: 'nome' },
{ data: 'email' },
{ data: 'login' },
{ data: 'dataCadastro' },
{ data: 'dataLogin' },
{
data: null,
render: function (data, type, row) {
return `<button class="btn btn-warning btn-sm" onclick="editUsuario($
{[Link]})">Editar</button>
<button class="btn btn-danger btn-sm" onclick="deleteUsuario($
{[Link]})">Excluir</button>`;
}
}
]
});
[Link] = function (id) {
[Link] = `/Home/Edit/${id}`;
};
[Link] = function (id) {
if (confirm('Tem certeza que deseja excluir este usuário?')) {
$.ajax({
url: `/api/Usuario/${id}`,
method: 'DELETE',
success: function () {
[Link]();
}
});
}
};
});
</script>
}
9. Migrações e Banco de Dados
Execute as migrações para criar o banco de dados e a tabela de usuários:
dotnet ef migrations add InitialCreate
dotnet ef database update
--
dotnet ef migrations remove
10. Testes
Agora, você pode executar o projeto e testar o sistema de login e o CRUD de usuários:
dotnet run
melhorar a interface do usuário e a experiência do usuário com mais estilos e scripts
personalizados.
11. Instalar o dotnet-ef
#dotnet tool install --global dotnet-ef
12. Considerações Finais
Este é um exemplo básico de um sistema CRUD de login em .NET Core 8 com MySQL
8. Você pode expandir este projeto adicionando autenticação, autorização, validações
adicionais, e outras funcionalidades conforme necessário. Além disso, você pode