This document provides an overview of the key components needed to build a web application using Ruby on Rails. It explains that Rails uses a file-based structure and development requires tools like Sublime Text for coding, a command line interface for commands, and a database for data storage. GitHub is used for version control and deploying to Heroku allows hosting the application publicly. The document represents these concepts visually and provides basic explanations of how HTML provides structure, CSS handles presentation, JavaScript enables interactivity, Ruby is the programming language, and the command line and database are utilized. It recommends learning the fundamentals like HTML, CSS, and other languages before attempting to build with Rails.

1. Ruby on Rails
A playful guide
Perry Carbonell | Sep 2013

2. Applications are typically constructed using a bunch of files located in your local folders. Ruby on Rails is no
different; it has a bunch of files embedded in particular folders which serve a particular purpose. Michael Hartl
describes this (re: table 1.1) as follows:

3. Here’s what you need
Sublime
Text
C:
localhost:3000 database
To start ROR, you need a file editor. Notepad comes default with most PC’s but the power of Sublime
Text is head and shoulders above the trusty Notepad. I’ll use this symbol to describe Sublime Text
more:
Like I said in my earlier statement,
files live in folders within your
computer. I’ll use this symbol to
describe folder directory: Folder Directory
You will also need a tool to run
commands on your computer.
Some people like the visual nature of
IDE’s for running commands. I’m a
little old school and use Git Bash to
run my commands. Here’s my
symbol:
You will eventually reach a stage where you will
need to deploy your code in your local
(development) environment. Here’s my
representation of your local including a database:
Finally you need to use your internet to get to a
few other resources such as:
GitHub (web-based version control)
Heroku (your cloud production platform)
Heroku database
GitHub site Git Version files
Blue to denote web-based. I’ll explain these more later.

4. Here’s what’s happening | Sublime Text
Sublime
Text
C:
localhost:3000
database
Directory
1
Heroku database
Git Hub
1 Use Sublime Text to code. With ROR, this could be anything from Ruby to HTML, CSS, Javascript languages. It
will therefore work to your advantage to have a good working knowledge of these languages prior working with
ROR.
2 These files live in several folders within your directory (re: slide 2).
2

5. Here’s what’s happening | Command Line
Sublime
Text
C:
localhost:3000
database
Directory
1
Heroku database
Git Hub
1 Use Command Line to make files, move files, commit, merge, push etc. Command lines are exactly that, they are
commands that execute some action on your application. I’m using Git Bash for this purpose.
2 Once you initially push, your code is uploaded to your development environment (locahost:3000).The application
is connected to a database (SQL Lite for standard ROR) and you use the command line to manipulate the database.
2

6. Here’s what’s happening | Git Hub & Heroku
Sublime
Text
localhost:3000
database
Directory
1
Heroku database
GitHub
C:
2
1 GitHub is used as a version control system. As soon as you’re happy with your development code, you can push
the code up to GitHub. You can now perform further development on your local environment knowing that you have
GitHub as back-up (it mimics the file and folder directory structure shaded in grey on the right..
2 Heroku can be treated as your production environment. It also has its own database which is important to note.

7. Here’s what’s happening | Dev vs Prod
Sublime
Text
C:
localhost:3000
database
Directory
Heroku database
Git Hub
Development
Environment
(local drive)
Production
Environment
(on the WEB)

8. Here’s what it really looks like
Sublime
Text
C:
Directory
My Representation The Real Thing

9. Here’s what it really looks like
My Representation The Real Thing
Heroku
GitHub

10. Here’s what’s happening | with HTML
C:
database
Directorystyle in CSS
behaviour in
JavaScript and
Ruby
structure in HTML
Wiki says:
It basically provides the structure for your web
page. Here’s a sample:
HyperText Markup Language (HTML) is the main markup language for creating
web pages and other information that can be displayed in a web browser.
HTML is written in the form of HTML elements consisting of tags enclosed in angle
brackets (like <html>), within the web page content. HTML tags most commonly
come in pairs like <h1> and </h1>, although some tags represent empty
elements and so are unpaired, for example <img>. The first tag in a pair is the
start tag, and the second tag is the end tag (they are also called opening tags and
closing tags). In between these tags web designers can add text, further tags,
My say:

11. Here’s what’s happening | with CSS
C:
database
Directorystyle in CSS
behaviour in
JavaScript and
Ruby
structure in HTML
Wiki says:
This is your presentation layer. Here’s a
sample:
Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation semantics (the look and formatting) of a document written in a
markup language. Its most common application is to style web pages written in
HTMLand XHTML, but the language can also be applied to any kind of XML
document, including plain XML, SVG and XUL.
CSS is designed primarily to enable the separation of document content (written in
HTML or a similar markup language) from document presentation, including
elements such as the layout, colors, and fonts.
My say:

12. Here’s what’s happening | Website
composition
C:
database
Directorystyle in CSS
behaviour in
JavaScript and
Ruby
structure in HTML
Wiki says:
It facilitates user interaction. Here’s a sample
embedded within HTML:
JavaScript (JS) is an interpreted computer programming language.[5]
As part of
web browsers, implementations allow client-side scripts to interact with the user,
control the browser, communicate asynchronously, and alter the document
contentthat is displayed.[5]
It has also become common in server-side
programming, game development and the creation of desktop applications.
My say:

13. Here’s what’s happening | with Ruby
C:
database
Directorystyle in CSS
behaviour in
JavaScript and
Ruby
structure in HTML
Wiki says:
Ruby on Rails is the framework whereas Ruby
is the language. Here’s a Ruby snip:
Ruby is a dynamic, reflective, object-oriented, general-purpose programming
language. It was designed and developed in the mid-1990s by Yukihiro "Matz"
Matsumoto in Japan.
Ruby embodies syntax inspired by Perl with Smalltalk-like features and was also
influenced by Eiffel and Lisp.[8]
It supports multiple programming paradigms,
including functional, object oriented, and imperative. It also has a dynamic type
system and automatic memory management.
My say:

14. Here’s what’s happening | with Command Line
C:
database
Directorystyle in CSS
behaviour in
JavaScript and
Ruby
structure in HTML
Wiki says:
Implement your code by giving it commands.
Here, I’m in the process of going in to my
working folder:
A command-line interface (CLI), also known as command-line user interface,
console user interface,[1]
and character user interface (CUI), is a means of
interacting with a computer program where the user (or client) issues commands
to the program in the form of successive lines of text (command lines).
The CLI was the primary means of interaction with most popular operating
systems in the 1970s and 1980s, including MS-DOS, CP/M, Unix, and Apple DOS.
The interface is usually implemented with a command line shell, which is a
program that accepts commands as text input and converts commands to
appropriate operating system functions.
My say:

15. Here’s what’s happening | with the database
C:
database
(db)
Directorystyle in CSS
behaviour in
JavaScript and
Ruby
structure in HTML
Wiki says:
The first sentence in the Wiki says it all.
FYI if you use ROR, here’s a link to some
Rails Command Lines. Within this you will find
the code
rake db:migrate
which is one of the most important command
you will be using (it modifies the db schema).
A database is an organized collection of data. The data are typically organized to
model relevant aspects of reality in a way that supports processes requiring this
information. For example, modeling the availability of rooms in hotels in a way that
supports finding a hotel with vacancies.
Database management systems (DBMSs) are specially designed applications that
interact with the user, other applications, and the database itself to capture and
analyze data. A general-purpose database management system (DBMS) is a
software system designed to allow the definition, creation, querying, update, and
administration of databases.
My say:

16. The Wrap
Now there’s a lot of things going on here for a beginner as you can see. There’s only so
much you can learn in a month’s time so when approaching something with a scope as
large as this, it’s probably not a bad idea to break things down into smaller bite size chunks.
Having a closer look into slides 10 - 15, basically the composition of a web app, I’ve decided
to go ‘Back to the Basics’ and pick-up the fundamentals in the order of the slides I have
listed i.e. HTML 5 first, CSS next and so on.
I hope these slides help others out there. At the very least, I intend to look back on this and
remind myself where it all began.
Until the next blog, take care out there and happy coding.
Perry Carbonell
marketmeasuresaustralia@gmail.com