Webdev Week 1

Ruby, Sinatra, & MVC

Webdev Week N

  • Before class: finish Lab N-1
  • Before class: look at the Chapter N introduction & do the reading
  • After class: read the rest of Chapter N & do Lab N

The Web in the early 90's:

The Web in the early 90's:

  • Static content
  • Unidirectional flow of information
  • Basically a networked filesystem with a funky new text document format

~2004

Dynamic Content

  • HTML is generated on-the-fly rather than read from static files.
  • Content can now be generated by non-technical users. Blogging, YouTube, Webmail are all now possible.
  • Huge array of competing technologies: SSI, ASP, .net, Java Servlet Pages, PHP, C#, Flash, Shockwave, etc.

Early Web Application Design

<html>
  <head>
  <?php my_header() ?>
  </head>
  <body>
    <?php sidebar() ?>
    <?php my_body() ?>
    <?php maybe_some_database_calls() ?>
  </body>
</html>

Problems:

  • Spaghetti code
  • Database change? Better rewrite everything!
  • Design changes == code changes

The fix: MVC

Model
View
Controller

Models

  • An interface layer that sits in between the database and the rest of the application
  • Provides a consistent way to interact with and validate data
  • Allows applications to be database-agnostic (i.e. you can switch between different database technologies with minimal changes to your code)

Views

  • Define how data from the Model is presented to the user
  • Contain little or no business logic - changing a view doesn't change how an application works, just how it looks
  • View Partials prevent code duplication

Controllers

  • The "glue" between Models and Views
  • Handle querying the Models for data and handing it off to the Views

Sinatra

  • A web application microframework that allows for MVC design
  • Handles all of the "nuts and bolts" for you (HTTP, query parsing, url resolution)
  • Ruby language
$ git clone https://github.com/qrohlf/webdev-gettingstarted.git
$ cd webdev-gettingstarted
$ bundle install
$ shotgun

# now look at http://localhost:9393 in your browser

If you didn't finish section 0.4 in the textbook:

Sinatra Structure

  • app.rb – App logic (i.e. the Controller
  • views/ – View templates
    • layout.erb – gets wrapped around all Views. 
    • index.erb – view for the site index.
    • bottles.erb – another view
  • Gemfile – Tracks Ruby dependencies
  • Gemfile.lock – Tracks dependency versions
  • config.ru – Tells Ruby web servers how to run your app

ERB Basics

<% @lyrics.each do |line| %>
<p><%= line %></p>
<% end %>

Your MVC Todo app

  • Model will be a text file - you can choose the format
  • Each entry in our "database" will have a task and maybe a due date (we'll need to handle both cases)
  • Controller will be the get '/' and post '/' routes in app.rb
  • View will be an ERB view located in views/todo.erb (or something similar)

Get started

  • Read chapter 1 in the course website

  • Start working on the lab

  • Ask questions in IRC

Missed a slide? slides.com/quinnrohlf/webdev-week-1

Webdev Week 1

By Quinn Rohlf

Made with Slides.com

Webdev Week 1

  • 1,290

More from Quinn Rohlf