Simple Blog with jQuery

This example implements a simple blog using jQuery Mobile. The server is implemented with Sinatra When a new entry is posted to the url '/new', the server appends it to the list of articles. There are two views that are served by the server: index and new Both the views share the same layout that renders the jQuery page.

Terminal
ruby server.rb

htmlFormBlog/server.rb
require 'sinatra'
require 'json'
require 'haml'

$articles = [{:title => "Welcome", 
               :content => "My first post",
               :email => "hello@blog.com",
               :timestamp => "1.1.2012 10:20:30"}]

def timestamp
  Time.now.strftime("%d.%m.%Y %H:%M:%S")
end

get '/' do 
  #Renders the haml template index.html.haml
  #with the default layout layout.html.haml
  haml :index, :layout => :layout
end

get '/new' do 
  haml :new
end

post '/new' do
  #Symbolize the params keys
  article = params.inject({}) { |h,(k,v)| h[k.to_sym] = v; h }
  
  article[:timestamp] = timestamp
  $articles << article

  puts article
  redirect to ("/")
end

The layout contains the html headers and the jQuery page template. The yield functions renders the content of the view that is invoked by the controller.

htmljQueryBlog/layout.haml
!!! 5
%html
  %head
    %meta(charset="utf-8")
    %meta(content="IE=edge,chrome=1" http-equiv="X-UA-Compatible")
    %meta(name="viewport" content="width=device-width, initial-scale=1")
    %link(rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css")
    %script(type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js")
    %script(type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js")
    %title
      Form Blog
  %body
    %div(data-role="page" id="home")
      %div(data-role="header")
        %h1 Our First Blog

      %div(data-role="content")
        = yield
        
      %div(data-role="footer" data-position="fixed")
        %div(data-role="navbar")
          %ul
            %li
              %a(href="/" data-ajax="false") Posts
            %li
              %a(href="/new" data-ajax="false") New Entry    

The main view is a jQuery listview where each item shows the content of the blog entry. The global variable $articles is also accessible in the haml code.

htmljQueryBlog/index.haml
%ul(data-role = "listview")
  - $articles.each do |a|
    %li
      %p.ui-li-aside
        =a[:timestamp]
      %h3 
        =a[:title]
      %p
        %strong
          =a[:email]
      %p 
        =a[:content]

This view contains the form for creating a new blog entry.

htmljQueryBlog/new.haml
%form(action="/new" method="post")
  %input(type = "text" name="title" id="title" placeholder="Post Title")
  %textarea(name="content" rows = "5" placeholder = "Content")
  %input(type = "email" name="email" placeholder = "Email")              
  %button#postEntry(type = "submit") Post

You can try this example by starting the server and visiting the page http://localhost:4567 in your browser

terminal
ruby server.rb