Model-View-Controller (MVC) Explained with Food, Because Food is Delicious

Haley Demos
May 17 · 5 min read

If you have ordered from a restaurant, then you’ve already experienced MVC.

Note: I am self-taught and I was the aforementioned coder so I hope you find this helpful on your learning journey.

MVC is a standard way of organizing code into reusable boxes.

After scrolling through yelp for new restaurants, you decide on a quaint, local Indian restaurant. You are a user looking to place an food order. You walk into a small, dimly lit room with soft Carnatic music playing in the background. You browse through the menu and finally decide on the special. When it’s your turn to order, you point to the menu and order (user input), “One bhindi masala with paratha, please!”

Photo by Rani George on Unsplash

Before we get too into our example, lets succinctly explain the 3 pieces of MVC

View: This is what the user sees and interacts with.

Controller: The intermediary between the model and view. It takes user input and relays it to the model. It also receives data updates, sending commands to update the user interface.

MVC Diagram

Now back to the food 🥘

  1. Charge you for the dish
  2. Grab a plate
  3. Search for Bhindi
  4. Add 1 serving of Bhindi to the plate
  5. Add 2 paratha to the plate
  6. Add yogurt
  7. Deliver plate to you

While the process is nearly identical to you ordering Chicken Tikka Masala, it has distinct ingredients that the server will never get confused (The Chicken Tikka Masala Curry). It is also important to realize that the server can only use the tools and resources that are located at their restaurant. If you asked for a burger, the server wouldn’t be able to complete your request as this restaurant only serves curry. This specified and limited set of tools is your model.

  • Plates
  • Curries
  • Breads
  • Sides (yogurt & pickle)
  • Curry Ladle
  • Server’s hands and feet

When the server delivers the meal you can see and eat, this is called the view. This view was built from a specific set of instructions from the model and delivered by the controller (server) to your table.

What happens if I want more paratha? Well obviously asking your bread basket to replicate won’t accomplish much. You would need to ask the server for more bread which would initiate a new process.

It is important to have a well organized restaurant. In theory the faster the server delivers dishes, the more money they will make. You want to minimize the amount of time it takes to search and deliver. This is also why all the curries are prepared ahead of time.

Multiple Developers can work on the MVC concurrently.

MVC can be used for most web development languages

Curry is your model class. It includes all the private ingredients with your getters and setters.

public class Curry
{


private String name;
private Boolean includeYogurt;
private String bread;



public String getName()
{
return name;
}

public void setName(String name)
{
this.name = name;
}

public Boolean getIncludeYogurt() {
return includeYogurt;
}

public void setIncludeYogurt(Boolean includeYogurt) {
this.includeYogurt = includeYogurt;
}

public String getBread() {
return bread;
}

public void setBread(String bread) {
this.bread = bread;
}
}

Here is the brains of the meal preparation, your controller.

public class ServerController
{
private Curry model;
private CurryView view;

public ServerController(Curry model, CurryView view)
{
this.model = model;
this.view = view;
}


public void setCurryName(String name)
{
model.setName(name);
}

public String getCurryName()
{
return model.getName();
}

public void setCurryBread(String bread)
{
model.setBread(bread);
}

public String getCurryBread()
{
return model.getBread();
}

public void setCurryIncludeYogurt(Boolean includeYogurt)
{
model.setIncludeYogurt(includeYogurt);
}

public Boolean getCurryIncludeYogurt()
{
return model.getIncludeYogurt();
}

public void updateView()
{
view.printCurryDetails(model.getName(), model.getBread(),
model.getIncludeYogurt());
}
}

Here is the view or what you would see output to the screen.

public class CurryView
{
//what you can see on your table
public void printCurryDetails(String curryName, String bread,
Boolean includeYogurt)
{
System.out.println("Curry: ");
System.out.println("Name: " + curryName);
System.out.println("Bread Choice: " + bread);
System.out.println("Yogurt: " + includeYogurt);
}
}

And finally, here you are as the user. This code demonstrates what would happen if you decided to order another meal after your first. Try running the code in your IDE to understand the flow better.

public class User {

public static void main(String[] args)
{
Curry model = retriveCurryFromDatabase();

CurryView view = new CurryView();

ServerController controller = new ServerController(model,
view);

controller.updateView();
//You ordering another meal
controller.setCurryName("Chicken Tikka");

controller.updateView();
}

private static Curry retriveCurryFromDatabase()
{
Curry curry = new Curry();
curry.setName("Bhindi");
curry.setBread("Paratha");
curry.setIncludeYogurt(true);
return curry;
}
}

Note: I realize this is not the best example to code, but in following with a good analogy I like to follow up with application. If you want more examples try a TODO app or this Student example from tutorialspoint.