DEV Community: Shahin Idrisi

🔁 Understanding Model, Controller, and Route in MERN Stack with Example

Shahin Idrisi — Mon, 28 Jul 2025 16:54:23 +0000

When building a full-stack application using the MERN stack (MongoDB, Express, React, Node.js), the backend architecture plays a critical role in ensuring the application is well-structured, scalable, and easy to maintain.

In this blog post, we’ll explore the relationship between Model, Controller, and Route in a MERN backend setup and walk through a dummy example to help you understand how they communicate with one another.

📦 What is the MVC Pattern?
The MERN backend usually follows the MVC pattern:

Model – Interacts with the database (MongoDB)

Controller – Contains logic to handle requests/responses

Route – Defines the API endpoints

View – In MERN, this is handled by React on the frontend

🧠** Flow of Communication**
Here's how everything connects:

Client sends a request to an API endpoint (like /api/students/add)

Route catches the request and passes it to the correct Controller

Controller uses a Model to interact with MongoDB

Model returns data to Controller, which sends a response back to Client

📘 Dummy Example: Student Management API
Let’s create a basic API to manage student records.

Folder Structure:
backend/
├── controllers/
│ └── studentController.js
├── models/
│ └── studentModel.js
├── routes/
│ └── studentRoutes.js
├── server.js

1️⃣ Model – models/studentModel.js

const mongoose = require('mongoose');

const studentSchema = new mongoose.Schema({
  name: { type: String, required: true },
  rollNumber: { type: Number, required: true },
  class: { type: String, required: true },
});

const Student = mongoose.model('Student', studentSchema);

module.exports = Student;

What it does: Defines a Mongoose schema to store student info in MongoDB.

2️⃣ Controller – controllers/studentController.js

const Student = require('../models/studentModel');

// Get all students
const getAllStudents = async (req, res) => {
  try {
    const students = await Student.find();
    res.status(200).json(students);
  } catch (error) {
    res.status(500).json({ message: 'Error fetching students' });
  }
};

// Add a new student
const addStudent = async (req, res) => {
  const { name, rollNumber, class: studentClass } = req.body;

  try {
    const newStudent = new Student({ name, rollNumber, class: studentClass });
    await newStudent.save();
    res.status(201).json(newStudent);
  } catch (error) {
    res.status(400).json({ message: 'Failed to add student' });
  }
};

module.exports = {
  getAllStudents,
  addStudent
};

What it does: Contains the logic to get students from DB or add a new one.

3️⃣ Routes – routes/studentRoutes.js


const express = require('express');
const router = express.Router();
const { getAllStudents, addStudent } = require('../controllers/studentController');

router.get('/', getAllStudents);         // GET /api/students/
router.post('/add', addStudent);         // POST /api/students/add

module.exports = router;

What it does: Maps API endpoints to controller functions.

4️⃣ Server Entry – server.js


const express = require('express');
const mongoose = require('mongoose');
const studentRoutes = require('./routes/studentRoutes');
const app = express();

// Middleware
app.use(express.json());

// Routes
app.use('/api/students', studentRoutes);

// Connect MongoDB and start server
mongoose.connect('mongodb://127.0.0.1:27017/school')
  .then(() => {
    console.log('MongoDB Connected');
    app.listen(5000, () => console.log('Server running on port 5000'));
  })
  .catch((err) => console.log(err));

_What it does: Connects all parts and starts the Express server.
_

🔄 How a Request Flows
When a POST request is sent to /api/students/add:

Route in studentRoutes.js catches it

It calls addStudent() from studentController.js

The controller creates a new Student using the Model

The Model saves it to MongoDB

A JSON response is sent back to the client

🧩 Final Thoughts
Understanding the communication between Model, Controller, and Route is key to mastering backend development in MERN. Once you get this flow, your projects become much easier to scale and maintain.

🔧 Want to connect this backend to a React frontend? Let me know in the comments and I’ll write a follow-up!

✍️ Author: Shahin Idrisi
💬 Feel free to reach out for help with your MERN projects!

JAVA Servlet Tutorial for Beginners with HTML example

Shahin Idrisi — Tue, 22 Apr 2025 13:52:16 +0000

Learn how to create a Java Servlet and connect it with an HTML form. Step-by-step guide for beginners with code examples.

🚀Introduction
If you're diving into Java web development, servlets are one of the first things you’ll encounter. In this blog, we’ll walk through a simple example of how to create a servlet and connect it with an HTML form.

By the end, you’ll understand how to send data from an HTML page to a servlet and process it on the server.

🧠 What is a Java Servlet?

A Java Servlet is a Java class used to handle HTTP requests and responses. It runs on a Java EE-compliant server such as Apache Tomcat, GlassFish, WildFly, or Jetty. Servlets act as a bridge between your front-end (HTML) and back-end (Java logic), forming the foundation of Java-based web applications.
If you're just building simple web apps or learning servlets, Tomcat is perfect.
But if you're building enterprise applications, you might prefer GlassFish or WildFly.

🔄 How a Servlet Works

When a user fills out a form on your website and clicks Submit, this is what happens behind the scenes in a Java Servlet:
User submits a form (like typing their name).
The browser sends this form data as an HTTP request to the server (e.g., Tomcat).
The server (like Tomcat) receives the request and looks for the correct servlet to handle it. This is done by matching the URL in the request to the servlet’s configuration (in web.xml or @WebServlet).
Servlet container (Tomcat) creates two things:
HttpServletRequest: This object holds the data the user sent (like the name they typed in the form).
HttpServletResponse: This is used by the servlet to send the response (what the user will see after submitting the form).
The servlet is then called to process the request:
If the request is a GET (a simple page load), it calls doGet().
If it’s a POST (like submitting a form), it calls doPost().
Inside the doPost() (or doGet()), the servlet:
Reads the form data using request.getParameter().
Processes it (e.g., checks if the name is valid or stores it in a database).
Prepares a response, like a message, using response.getWriter().
The servlet sends back the response to the browser. The user sees the result (like "Hello, John!").

🛠️ Tools Required

- NetBeans or Eclipse
- Apache Tomcat (or use NetBeans with built-in Tomcat)
- Java SDK

✍️ Step-by-Step Example

Create the HTML Form Create a file named index.html:

    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div>
        <h1>This is shortform converter</h1>
        <form method="POST" action=MyServlet">
              Name: <input type="text" name="username"><br>
              <input type="submit" value="Submit">
        </form>
    </body>
</html>

Create the Java Servlet Create a new Servlet named MyServlet.java:

 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 *
 * @author SERAJ
 */
public class MyServlet extends HttpServlet {

    /**
     * Processes requests for both HTTP <code>GET</code> and <code>POST</code>
     * methods.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        try (PrintWriter out = response.getWriter()) {
            /* TODO output your page here. You may use following sample code. */
            out.println("<!DOCTYPE html>");
            out.println("<html>");
            out.println("<head>");
            out.println("<title>Servlet Servlet1</title>");            
            out.println("</head>");
            out.println("<body>");
            String name = request.getParameter("username");
            out.println("<h2>Hello, " + name + "!</h2>");
            out.println("</body>");
            out.println("</html>");
        }
    }

    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    /**
     * Handles the HTTP <code>GET</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Handles the HTTP <code>POST</code> method.
     *
     * @param request servlet request
     * @param response servlet response
     * @throws ServletException if a servlet-specific error occurs
     * @throws IOException if an I/O error occurs
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    /**
     * Returns a short description of the servlet.
     *
     * @return a String containing servlet description
     */
    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}

Configure web.xml Inside your project’s WEB-INF/web.xml file, add this:

  <servlet-name>MyServlet</servlet-name>
  <servlet-class>MyServlet</servlet-class>
</servlet>

<servlet-mapping>
  <servlet-name>MyServlet</servlet-name>
  <url-pattern>/MyServlet</url-pattern>
</servlet-mapping>

Run Your Project Deploy the project on Tomcat.

Open index.html in your browser.

Enter a name and click Submit.

You should see:
👉 "Hello, [Your Name]!"

🔧 Common Errors & Fixes

✅ Conclusion
You’ve now built your first Java Servlet that connects to an HTML form! This is the foundation for building more advanced web apps using Java.