Blog Tutorial

When reading about a new framework, I often find that the best way to get
familiar is to read a brief tutorial on how to develop a simple application.
This can quickly give new users a sense of the development flow and processes
involved in using a framework. This guide will show new users how to develop a
simple blog using the Padrino framework. Along the way, each step will be
explained and links will be provided to further information on different
relevant topics.

Study Guide

To skip this tutorial or immediately see the complete blog tutorial project, you
can checkout the
blog tutorial repository using Git:

$ git clone git@github.com:padrino/blog-tutorial.git

Installation

In order to develop a Padrino application, we must have a few things installed.
First, we must obviously have ruby and
rubygems installed. Next, we must install
the padrino framework gems:

$ gem install padrino

For more details on installation, check out the
installation guide. Once this has
been finished, all necessary dependencies should be ready and we can begin
developing our sample blog.

Project Generation

To create a Padrino application, the best place to start is using the convenient
Padrino generator. Similar to Rails, Padrino has a project generator which will
create a skeleton application with all the files you need to being development
of your new idea. Padrino is an agnostic framework and supports using a variety
of different template, testing, JavaScript and database components. You can
learn more by reading the generators guide.

For this sample application, we will use the ActiveRecord ORM, the Slim
templating language, the RSpec testing framework and the jQuery JavaScript
library. With that in mind, let us generate our new project:

This command will generate our basic Padrino project and the print out a nice
report of the files generated. The output of this generation command can be
viewed in this gist file. Notice the -b flag in the previous command which automatically instructs bundler
to install all dependencies. All we need to do now is cd into our brand new application.

$ cd blog-tutorial

Now, the terminal should be inside the root of our newly generated application
with all necessary gem dependencies installed. Let us take a closer look at the
particularly important generated files before we continue on with development.

Gemfile – Be sure to include any necessary gem dependencies for your app in
this file!

app/app.rb – This is the primary configuration file for your core
application.

config/apps.rb – This defines which applications are mounted in your
project.

app/controllers – This is where the Padrino route definitions should be
defined.

app/helpers – This is where helper methods should be defined for your
application.

app/views – This should contain your template views to be rendered in a
controller.

lib – This should contain any extensions, libraries or other code to be used
in your project.

public – This is where images, style sheets and JavaScript files should be
stored.

spec – This is where your model and controller tests should be stored.

For now, the defaults for the database connection settings (config/database.rb) are
OK for this tutorial.

This environment can be configured in config/apps.rb as:
Padrino.configure_apps do
if RACK_ENV == 'production'
disable :reload
disable :reload_templates
else
enable :reload
enable :reload_templates
end
end
or can be configured in app/app.rb as
if Padrino.env == :production
# do production
else
# non production here
end

Let us also setup a few simple routes in our application to demonstrate the
Padrino routing system. Let's go into the app/app.rb file and enter the
following routes:

# app/app.rbmoduleBlogTutorialclassApp<Padrino::ApplicationregisterScssInitializerregisterPadrino::MailerregisterPadrino::Helpersenable:sessions# Add these routes below to the app file...get"/"do'Hello World!'endget:about,:map=>'/about-us'dorender:haml,'%p This is a sample blog created to demonstrate how Padrino works!'endendend

Note that the first route here sets up a simple string to be returned at the
root URL of the application. The second route defines a one-line about page
inline using Haml which is then explicitly mapped to the /about-us URL. The
symbol :about is used to reference the route later.

Be sure to check out the controllers guide for a comprehensive overview of the routing system.

Admin Dashboard Setup

Next, this is a good time to setup the Padrino admin panel which allows us to
easily view, search and modify data for a project. Let's go back to the console
and enter:

$ padrino g admin

This will create the admin sub-application within your project and mount it
within the config/apps.rb file. The output of this command can be viewed in
this gist file.

Now, you should follow the instructions of the output:

1) Run 'bundle'
2) Run 'bundle exec rake db:create'if you have not created a database yet
3) Run 'bundle exec rake db:migrate'
4) Run 'bundle exec rake db:seed'
5) Visit the admin panel in the browser at '/admin'

During this process, you will be prompted to enter an email and password to use
for the admin dashboard. Be sure to remember this for use later in development.

Booting Padrino

Now the Padrino project has been generated, the database has been configured and
created and the admin panel has been properly setup. We can now start up our
Padrino application server. This is quite easy to do with the built-in Padrino
tasks. Simply execute the following in the terminal:

Your application now exists on http://localhost:3000. Visit this URL in the
browser and you should see the Hello World!.

We can also visit the admin panel by going to the URL:
http://localhost:3000/admin and then log in using the admin credentials
specified during the rake db:seed command performed earlier. Feel free to explore
this area and checkout the existing accounts. We will come back to this in more
detail later. To read more about the features of the admin panel, check out the
Admin Panel Guide.

Worth noting here is that Padrino has full support for code reloading in
development mode. This means you can keep the Padrino server running and change
your code source and when you refresh in the browser, the changes will be
automatically displayed. You might want to open up a new terminal and cd to
your directory and keep the server running.

Creating Posts

Now that the application is ready and the layouts have been defined, let's
implement the functionality to view our blog posts and even add the ability to
create new posts!

Let's start off by generating the model into our app directory. As of version
0.13.1, the models will default to generating at the top level 'models'
directory in a project. If you want to place your models to another location, you can append
the -a option to the command - this is handy if you would like to have models which
should be coped only to sub-apps.

This controller is defining routes that can be accessed via our application. The
"http method" get starts off the declaration followed by a symbol representing
the "action". Inside a block we store an instance variable fetching the
necessary objects and then render a view template. This should look familiar to
those coming from Rails or Sinatra.

Next, we'll want to create the views for the two controller actions we defined:
index and show.

This can be helpful to understand the mapping between controllers and urls.

Attaching Accounts to Posts

So far, a post does not have a user associated as the author. Suppose that now
we want to let every post have an author. Let's revisit our post model. We'll
start by adding a new migration to attach an Account to a Post.

Now, lets add another user. Revisit http://localhost:3000/admin and click on
the Account tab. Now create a new Account record (don't forget to give the new
account the admin role). Once you have a new account, try logging into it and
then adding one more post in the admin interface. There you have it,
multiple users and posts!

See the effects of our changes by visiting http://localhost:3000/posts to see
our newly created posts linked to the author that wrote them.

Site Layout

Now that the application has been properly configured and the server has been
started, let's create a few basic styles and define a layout to prepare the
application for continued development.

First, let us create a layout for our application to use. A layout is a file
that acts as a container for the content templates yielded by each route. The
layout should be used to create a consistent structure between each page of the
application. To create a layout, simply add a file to the app/views/layouts
directory:

This layout creates a basic structure for the blog and requires the necessary
stylesheets and javascript files for controlling the behavior and presentation
of our site. The layout also includes some dummy elements such as a fake search
and stubs for list items left as an exercise for the reader.

The second style sheet is the application style sheet to give our blog a better
look and feel. The
full contents of the style sheet can be found in the
sample blog repository and should be put into
app/stylesheets/application.scss.

With the layout and these two stylesheets in place, the blog will now have a
much improved look and feel! See the new style by visiting
http://localhost:3000/posts.

Generating RSS Feed for Posts

Finally, before the application is deployed, let's set up RSS and Atom feeds for
our new blog so people can subscribe to our posts. For the feeds, we're going to
head back to the posts controller and make a few changes by appending a
provides option to our index block. This command below instructs the route
that it should respond to HTML, RSS and Atom formats.