Back to -Tutorials -Sapphire (Ruby In Steel) Tutorials -Archives -Rails

How To Create a Ruby On Rails Blog - Part One

Part One: Entering Posts

For many people, the one thing that really ‘turned them on’ to Ruby On Rails was the twenty minute demo given by Rails’ creator, David Heinemeier Hansson in which he showed how to create a weblog complete with user-submitted comments. You can watch his original demo online here: http://www.rubyonrails.com/screencasts.

Also, see Part Two of this tutorial. Note: This Tutorial uses Rails 1.2. We also have guidance on creating a blog with Rails 2.0.

This is a great way to show how simple it is to create a fairly complex application using Rails. However, you will see that, in order to generate this application it is necessary to switch many times between standalone text editors, database tools, file managers, web browsers and command prompts. Ruby In Steel can greatly simplify this by integrating the entire development process into Visual Studio. Here I will guide you through the steps to creating a simple Blog application which allows multiple comments to be associated with each blog post. I have made a few changes to the original ‘blog demo application’ in order to simplify it somewhat; for example, in my version I use ‘migrations’ to create the database tables rather than doing it the hard way using a standalone database tool.

Incidentally, if you want to create an application that is identical to the ‘canonical’ Rails Blog, refer to our older tutorial HERE.

NOTE: This tutorial assumes that you already have Ruby, Rails, MySQL and Ruby In Steel Developer installed. For more information on installing all the required software, see…
- Setting Up Ruby (and Rails) For Ruby In Steel – From Scratch
- Installing MySQL For Ruby On Rails

OK, so let’s get started. Load up Ruby In Steel Developer (or Trial) edition and follow along…

Create A New Rails Project

In Visual Studio...
- Select the File menu, New then Project.
- Select Ruby In Steel in the left-hand pane. In the right-hand pane select Rails Project.

- Enter a name such as ‘MyBlogProject’ in the Name field and, optionally, browse to a directory.
- Leave ‘Create directory for solution’ checked.
- Click OK.

Create The Rails Application

A dialog box pops up to prompt you to select a database server, name your database and host.

Here I assume you are using MySQL. You may use other database servers such as SQL Server (for more information see: Using SQL Server With A Rails Application. But, for the sake of simplicity, I suggest using MySQL with this tutorial.

- Make sure MySQL is selected as the database server.
- Check off the Development and Test database types.
- Now fill out the database settings:

The actual details will vary according to your local settings. You should, for example, enter the host, user name and password (if any) which you have previously specified when setting up your database server:

Database = railsblog
User = root
password = (enter your MySQL password or leave blank if none)
Host = localhost

- Click OK

You should now see a ‘Creation and Import Data’ dialog.

This provides information on the application you are about to create. (Note: this same dialog also appears when you import an existing project in which case, the source directory and file statistics will also be shown).

- Press ‘Proceed’.

The Rails application, complete with a MySQL database, will now be created. After a short wait, you should see all the application’s folders and files appear beneath the project branch in the Solution Explorer.

Verify That Rails Is Running

The easiest way to run an application is by clicking the One-click Rails Debugger or by pressing the F5 function key. This starts the server and runs the application in debugging mode.

- Select One-Click Rails Debugger on the Ruby menu.

Wait a few moments for the server will start. You should see something like this in the Ruby Console (if the Ruby Console isn’t visible, select the View menu then Other Windows, Ruby Console)...

- Press CTRL+W, W to open a web browser inside Visual Studio. Or you may open any standalone browser of your choice. In the address bar enter http://localhost:3000.

NOTE: If you are not using the default port, 3000, you will need to specify the actual port number in the address - e.g. if the server port is 3003, you should enter: http://localhost:3003

All being well, you will now see a ‘Welcome screen’ from Rails, similar to the following:

Generate a Post Model

We now need to create the model, which is the part of a Rails application which works with the database. The database itself was created automatically by the Project Rails Wizard when you first started work on this application.

First, make sure the Generate window is visible:

- Select Generate from the Ruby menu. Now generate a Post model (to handle messages posted into the blog):

- In the Generate window, select model as the Script Action. Enter post as the Script Value. Ensure that the Generate radio button is selected. Then click Go.

Wait a few moments while Rails generates some new files. If you now look in the Solution Explorer, you should see a file named 001_create_posts.rb in the \db\migrate folder. This is a ‘migration’ file. Migrations can be used to modify existing databases.

Here we are going to use this file to create some database tables in Ruby code (rather than doing this using SQL or a dedicated database management tool).

- Double-click 001_create_posts.rb to open the file in the Ruby In Steel editor.
- Edit the self.up method to the following:

The code in the 001_create_posts.rb file should now look like this...

- Press CTRL+S to save your changes.

Rails uses ‘up’ and ‘down’ methods to create and delete (drop) database tables. You can also use migrations to move between different iterations of your database.

Now perform the ‘migration’ to update the database and create the table with the columns specified.

- Select Rake from the Ruby menu to make the Rake window visible.
- In the Rake window, select the db:migrate Rake Action
- Click Go.

A command window pops up at this point. When the Rake task completes you will be returned to the prompt...

- Close the command window.

Let’s add some ‘scaffolding’ (that is, some default behavior to get the application up and running quickly). We are going to this by running a Rails script to auto-generate a number of useful methods.

- In the Generate window, select scaffold as the Script Action, enter post blog as the Script Value and ensure the Generate radio button is checked.
- Click Go.

After a few moments, you should see several new files appear in the Solution Explorer (expand the \controllers and \views folders if necessary, to see some of these).

Add A View

Now, let’s create a custom view to define the web page which the user will see.
- Using the Solution Explorer Open \views\blog\list.rhtml, delete its contents and replace them with the following:

- Save your changes.

Edit The Controller

Now let’s adapt the controller. The controller is typically where most of the Ruby programming occurs.

- Open the \app\controllers folder in the Solution Explorer.
- Load blog_controller.rb into the code editor.
- Delete all the code of the list method and replace it with this:

We need to stop the debugger now (so that we can add a new file).
- Click the Debug menu then Stop Debugging.

- Right click the \views\blog folder in the Solution Explorer and select Add, New Item.

- In the Add New Item dialog, select Empty Ruby/HTML File.

- Edit the name to _post.rhtml (take care to include the ‘_’ at the start of the name) and click Add (this new file is a ‘partial’ template page).

The ‘_’ at the start of the name _posts.rhtml tells Rails that this is a ‘partial’ - that is, this file can be incorporated into one or more other pages during the process of constructing a fully formed web page when the application is run.

- Add this code to the _post.rhtml file:

RHTML files contain a mix of HTML markup and Ruby code embedded between tags such as <%= and %>. Rails processes these files before the final pages are displayed in the web browser, executing the embedded Ruby and constructing a HTML page as a result. Here, for example, the embedded Ruby will get data such as the body of a post which will then be displayed in the HTML page.

- Save your changes.
- Load show.rhtml into the editor.
- Delete this:

<% for column in Post.content_columns %>
<b><%= column.human_name %>:</b> <%=h @post.send(column.name) %>
<% end %>

- In its place, add this:

The show.rhtml file should now contain this...

- Save your changes.

Now, test it out.

Start the debugger again:

- Click the One-Click Rails Debugger on the Ruby menu.
- Wait for the server to star again (check this in the Ruby Console):

- To go back to the browser press CTRL+W,W if necessary) and enter the address of the Blog application (in the address either use the default port, 3000, or whichever port number you used previously):


You should see your page with its list view (list.rhtml) active. This is what should appear...

The default view is defined in the index method of the controller file, blog_controller.rb
def index
   render :action => 'list'

Most blogs allow users to leave comments. Let’s add that feature next...

- Go to Part Two of this tutorial

Bookmark and Share   Keywords:  rails  tutorial
© SapphireSteel Software 2014