FW Tutorial - MVC Architecture · Arquitetura MVC

🇧🇷 Model-View-Controller (Padrão de Projeto) 🇺🇸 Model-View-Controller (Design Pattern)

✨ Clique em qualquer elemento do fluxo para visualizar a sequência de comunicação ✨
Click on any component below to see the request flow & data movement

🔄 Fluxo de Requisição / Request Flow (clique & entenda o caminho)
🌐
Browser / Client
Usuário acessa URL
User types URL
➡️
🎮
CONTROLLER
Recebe requisição HTTP
Handles HTTP Request
⬇️
🗄️
MODEL
Regras de negócio + DB
Business rules + Database
⬆️
🖼️
VIEW
Interface / HTML/CSS/JS
User Interface
➡️
📄
RESPONSE
Dados renderizados
Rendered page
📡 Movimento / Movement ✨ Clique nos blocos acima ✨
💡 Clique em qualquer componente para visualizar o fluxo de dados e a interação MVC.
// Exemplo de requisição típica: Browser -> Controller -> Model -> View -> Usuário

📌 Estrutura Interna · Internal Structure

Códigos típicos de cada camada no padrão MVC | Typical code snippets

🗃️ MODEL

// model/UserModel.js (Node.js exemplo)
class UserModel {
  constructor(db) { this.db = db; }
  
  async getUsers() {
    // Consulta SQL / dados
    return await this.db.query("SELECT * FROM users");
  }
  
  // Regras de negócio
  isValidEmail(email) {
    return email.includes("@");
  }
}
module.exports = UserModel;
Função: Dados, regras, comunicação com BD.
Role: Data, business logic & DB access.

🖥️ VIEW

<!-- view/users-list.ejs ou HTML -->
<div class="users-container">
  <% users.forEach(user => { %>
    <div class="card">
      <h3><%= user.name %></h3>
      <p>Email: <%= user.email %></p>
    </div>
  <% }); %>
</div>
Apresentação dos dados ao usuário (HTML/CSS/JS).
Presentation layer: displays data to user.

⚙️ CONTROLLER

// controllers/userController.js
const UserModel = require('../model/UserModel');

class UserController {
  async listUsers(req, res) {
    try {
      const model = new UserModel(db);
      const users = await model.getUsers();
      // Renderiza a view com os dados
      res.render('users-list', { users });
    } catch(err) {
      res.status(500).send("Erro interno");
    }
  }
}
Recebe requisição, orquestra Model/View, retorna resposta.
Handles input, orchestrates model & view, sends response.

🧠 Como funciona o fluxo MVC? · How MVC Works?

🇧🇷 Português:
1️⃣ Usuário faz uma requisição (URL) →
2️⃣ Controller recebe a requisição, interpreta os dados →
3️⃣ Se necessário, chama o Model (consulta BD, regras) →
4️⃣ Model retorna dados ao Controller →
5️⃣ Controller carrega a View e injeta os dados →
6️⃣ View renderiza HTML/CSS/JS e envia ao cliente (Browser).
✅ Toda interação segue esse ciclo, garantindo separação de responsabilidades.
🇺🇸 English:
1️⃣ User sends request (URL) →
2️⃣ Controller receives request, processes input →
3️⃣ Controller asks Model (DB query / business logic) →
4️⃣ Model returns data to Controller →
5️⃣ Controller loads View and passes data →
6️⃣ View renders final HTML/CSS/JS response to client.
✅ Clean separation of concerns, scalable architecture.