> For the complete documentation index, see [llms.txt](https://certil-remy.gitbook.io/learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://certil-remy.gitbook.io/learn/sinatra/untitled-6.md).

# Intro To MVC

## Overview

We'll discuss the structure of MVC web applications and explain the relationship between the different components in this application.

## Objectives

1. List the problems of creating a web application in one file
2. Define and describe the three components- models, views, and controllers- of the MVC framework
3. Explain the relationship between models, views, and controllers

## Model-View-Controller

[![Link to MVC Video](https://camo.githubusercontent.com/96eafb9f1469e15f4021943dadeaa08d4d0e73cb/687474703a2f2f696d672e796f75747562652e636f6d2f76692f49543534755955495351672f302e6a7067)](http://www.youtube.com/watch?v=IT54uYUISQg)

We could create a web application in one file, with thousands of lines of code in the same document. It would work. But it would also present us with some very big challenges. It would be close to impossible to debug our program, and our code would be virtually unreadable.

Instead, we use frameworks, Sinatra being one of them, to separate an application's code by function and make writing, reading, and debugging code a much more pleasant and simple experience.

The Model-View-Controller paradigm is a popular way of building frameworks for web applications - it provides a *separation of concerns* where groups of files have specific jobs and interact with each other in very defined ways. In a nutshell:

* **Models:** The 'logic' of a web application. This is where data is manipulated and/or saved.
* **Views:** The 'front-end', user-facing part of a web application - this is the only part of the app that the user interacts with directly. Views generally consist of HTML, CSS, and Javascript.
* **Controllers:** The go-between for models and views. The controller relays data from the browser to the application, and from the application to the browser.

## The Restaurant Analogy

If you've ever been to a restaurant, you'll know that there is a clear separation of concerns that takes place. The person cooking the food is not the same as the person delivering the food, and the person eating the food is someone completely different. Let's think of MVC as if it were a restaurant.

### Models

First, there are the cooks (the models) that make the food. They take orders (from the waiter), and prepare the customer's meal. Once ready, they give it to the waiter to deliver to the customer.

In Sinatra, models are generally written as Ruby classes. Models can also connect to databases to persist data. Think of models as the main logic behind your web application.

### Views

The customers place orders and receive plates of food (the views). The orders are placed with the waiter, who takes them back to the kitchen.

In Sinatra, views are written as `.erb` files, consisting of HTML and embedded Ruby (Ruby code written within HTML). They are what the user actually sees when they use your web application.

### Controllers

The waiters (the controllers) shuttle between the kitchen and the front of the restaurant. They take requests from the customer to the kitchen, and take prepared meals from the kitchen to the customer. Without the waiter, our customers would be hungry and our chefs would have nothing to do.

In Sinatra, controllers are written in Ruby and consist of 'routes' that take requests sent from the browser ("GET this data", "POST that data"), run code based on those requests by using models, and then render the `.erb` (view) files for the user to see.

View [Intro To MVC](https://learn.co/lessons/sinatra-intro-to-mvc) on Learn.co and start learning to code for free.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://certil-remy.gitbook.io/learn/sinatra/untitled-6.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.