Web Application Anatomy

Overview of an MVC framework

Created by James Riley / @mrjamesriley

Brazil
SupaDupa
Web application overview MVC Pattern

MVC - Model View Controller

Separation of concerns

Manageable and re-usable code

Kitchen drawer

Codebar: Events page

Codebar Events

Model

The Data and Business logic


            class Event < ActiveRecord::Base

              validates_presence_of :organiser, :location, :date

            end
          

View

The HTML for the page


            

Events

<% @events.each do |event| %>

<%= event.date %>

Workshop at <%= event.location %>

Sponsor: <%= event.sponsor %>

<% end %>

Controller

The co-ordinator

Fetches data for use in the view


            class EventController < ApplicationController

              def index
                @events = Event.all
              end

            end
          

Router

The entry point

Matches URLs to Controllers


            get '/events', controller: 'events', action: 'index'
          

1) Visitor requests CodeBar.io/events

2) Router points to EventsController

3) Controller asks Event Model for all events

@events = Event.all

4) Model selects all Event from the Database

SELECT * FROM events

5) Turns Event records into an array

6) Events array assigned to @events

7) @events variable made available to the view

@events = Event.all

8) View generates HTML and passes back to controller


@events.each do |event|
  Workshop at <%= event.location %>
end
          

9) Complete web page sent to the browser

I WANT MORE!

Rails Tutorial by Michael Hartl

Rails course at CodeSchool

Thank you for listening!




Created by James Riley / @mrjamesriley