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

ruby server.rb

require 'sinatra'
require 'json'

$articles = []

def timestamp"%H:%M:%S")

get '/' do'index.html')

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

post '/articles' do
  article = params.merge( {'timestamp' => timestamp}).to_json
  puts article
  $articles << article
HTML code (in HAML format)
  %h1 Post a blog entry
  %form(action="/articles" method="post")
        %input(type = "text" name="title" id="title" placeholder="Post Title")
        %textarea(name="content" rows = "5" placeholder = "Content")
        %input(type = "email" placeholder = "Email")              
        %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;