Simple Blog

This example implements a simple form for posting a new entry to a blog. The server is implemented with Sinatra.

To run the example you can start the server in a terminal and visit the page http://localhost:4567 in your browser. You can retrieve the entries in JSON format by visiting the page http://localhost:4567/articles

Terminal
ruby server.rb

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

$articles = []

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

get '/' do 
  File.read('index.html')
end

get '/articles' do
  content_type :json
  {:articles => $articles}.to_json
end

post '/articles' do
  article = params.merge( {'timestamp' => timestamp}).to_json
  puts article
  $articles << article
end
HTML code (in HAML format)
%body
  %h1 Post a blog entry
  %form(action="/articles" method="post")
    %ul
      %li
        %input(type = "text" name="title" id="title" placeholder="Post Title")
      %li
        %textarea(name="content" rows = "5" placeholder = "Content")
      %li
        %input(type = "email" placeholder = "Email")              
      %li
        %input(type = "submit" name = "Post")
CSS code
body {font-family: Arial; margin: 0px;}
h1 {
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #666), 
    color-stop(1.0, #000));
  -webkit-box-shadow: 0 0 4px #333;
  color: #EEE; 
  margin: 0 0 4px 0; padding: 4px; width: 100%;
  text-align: center;
}
form ul { padding: 6px; margin: 0px; list-style-type: none; }
form ul li {
  margin: 0 0 4px 0; -webkit-border-radius: 4px;
  border: 1px solid #666; padding: 4px;
}
input, textarea {
  -webkit-appearance: none;
  border: 0; width: 95%;
}
form ul li.noborder { border: 0; padding: 0px;}
input[type=submit] {
  border: 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #EEE),
    color-stop(1.0, #AAA));
  -webkit-border-radius: 6px;
  -webkit-box-shadow: 0 0 4px #333;
  width: 100%; padding: 6px;
}