a simple twitter app with ruby on rails – messages with ajax
TRANSCRIPT
-
8/8/2019 A Simple Twitter App with Ruby on Rails Messages With Ajax
1/10
A Simple Twitter App with Ruby on Rails Messages
With Ajax
Ruby on Rails is a web application framework that promotes rapid development.
Clients demands are ever increasing yet they still expect the same quality of output.
Frameworks, like Rails, help to achieve this; why? here are some of the reasons:
The second part of this tutorial: A Simple Twitter App with Ruby on Rails
User Authentication
The third part of this tutorial: A Simple Twitter App with Ruby on Rails
Building Friendships
Convention over Configuration (CoC):
This is used to reduce the amount of up-front configuartion. The idea is; if you
abide by certain coding conventions, you will have little, to none, configuration
to do.
Object-Relational Mapping (ORM):
ORM reducing coupling to the database. This abstraction allows you changed
the DBMS provider with little trouble.
Structured Code:
The MVC pattern forces you to organise your code in a clean, structured way.
This results in more maintainable code.
Plugins:
Plugins save you from re-inventing the wheel every time you want to add
functionality to your app. For instance, making you web app capable of
performing searches can be easily added with the acts_as_ferret plugin. There
are many more plugins!
Who is this Tutorial for?
http://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ror/a-simple-twitter-app-with-ruby-on-rails-user-authentication.htmlhttp://www.noupe.com/ror/a-simple-twitter-app-with-ruby-on-rails-user-authentication.htmlhttp://www.noupe.com/ror/a-simple-twitter-app-with-ruby-on-rails-building-friendships.htmlhttp://www.noupe.com/ror/a-simple-twitter-app-with-ruby-on-rails-building-friendships.htmlhttp://www.noupe.com/ror/a-simple-twitter-app-with-ruby-on-rails-user-authentication.htmlhttp://www.noupe.com/ror/a-simple-twitter-app-with-ruby-on-rails-user-authentication.htmlhttp://www.noupe.com/ror/a-simple-twitter-app-with-ruby-on-rails-building-friendships.htmlhttp://www.noupe.com/ror/a-simple-twitter-app-with-ruby-on-rails-building-friendships.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.html -
8/8/2019 A Simple Twitter App with Ruby on Rails Messages With Ajax
2/10
This tutorial is for people who have learnt the basics of Rails and want to take things to
the next level. This tutorial is not a beginners guide for getting started with Rails. If you
are just starting out with Rails I suggest this article from Six Revisions.
What this Tutorial Covers
In the first part of this three part series, we cover setting up a simple message model,
which will hold the messages posted. Further to this, we will learn how to post a
message asynchronously, using AJAX.
View Demo of Twitter App with Ruby on Rails
Basic Application Design
Ok, so youve decided to create a twitter style micro-blog using Ruby on Rails. First,
we need to think about our basic requirements and from this we can model our
application.
There are many ways that this can be done, but we will use a simple technique in which
you jot down a few paragraphs about how and what the application is expected to do
then highlight the nouns. So, lets try it.
My web app should work in a similar way to twitter. Users should be able to register
with the site and create shortposts. Users should be able to follow other users. Each
user should be able to see their own posts plus the users they are following.
Note that Ive been selective in what nouns Ive highlighted. You only really need to
take notice of the nouns which you feel will need to store data to the database.
I know there is more to twitter than this, but lets leave it simple. As you can see the
nouns, which will need to store data to the database are posts and users. So we
require two models:
In the first part of the tutorial, we are going to deal with posts only.
Post User
Creating the Project Files
Before we do anything we need to create a project for our twitter web app.
1. > rails twitter -d mysql
As you can see, I will be using MySQL as the DBMS, however, feel free to use
whatever database you want.
http://sixrevisions.com/web-development/how-to-create-a-blog-from-scratch-using-ruby-on-rails/http://www.therailworld.com/posts/18-Create-a-Twitter-App-with-Rails-Demo-Datahttp://sixrevisions.com/web-development/how-to-create-a-blog-from-scratch-using-ruby-on-rails/http://www.therailworld.com/posts/18-Create-a-Twitter-App-with-Rails-Demo-Data -
8/8/2019 A Simple Twitter App with Ruby on Rails Messages With Ajax
3/10
Open the database.yml file in the config folder and modify the password as required. An
example is shown below.
1. development:
2. adapter: mysql
3. encoding: utf84. database: twittest_development
5. pool: 5
6. username: root
7. password: yourpassword
8. host: localhost
Now, create the database with the rake command.
1. > rake db:create
Implementing the basic Message Model
So lets go right ahead and generate the Post model and migrate it.
1. > ruby script/generate model post message:text
2. > rake db:migrate
Controller
Now, lets create a controller for the post model.
1. > ruby script/generate controller posts
We need to set up some methods for interacting with the model. Edit your
posts_controller.rb file and add the following methods:
view plaincopy to clipboard print ?
1. class PostsController < ApplicationController
2. def index3. @posts = Post.all(:order => "created_at DESC")
4. respond_to do |format|
5. format.html
6. end
7. end
8.
9. def create
10. @post = Post.create(:message => params[:message])
11. respond_to do |format|
12. if @post.save
13. format.html { redirect_to posts_path }14. else
http://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.html -
8/8/2019 A Simple Twitter App with Ruby on Rails Messages With Ajax
4/10
15. flash[:notice] = "Message failed to save."
16. format.html { redirect_to posts_path }
17. end
18. end
19. end
20. end
We only need two methods, index and create. The index method creates an instance
variable containing all the posts in descending order. The create method is used to
create a new post.
Views
Lets create the index view. First, well create a partial for posts. Create a file called
_post.html.erb in the views/posts folder and add the code below.
1.
Posted ago
2.
The index view is now very simple. Create a file called index.html.erb in the
views/posts folder and add the code below.
1. @posts %>
Create some Posts
Open a console session and create a few new messages, as shown below.
view plaincopy to clipboard print ?
1. > ruby script/console
2. Loading development environment (Rails 2.3.2)
3. >> Post.create!(:message => "My first post" )
4. >> Post.create!(:message => "Post number two!" )
Create a Form for Posts
Obviously youre not going to get the user to use the console to create messages. So,our next task is to inject some functionality into our web app to allow the user to create
messages. Twitter has an input box above the indexed messages, which is used for
submitting a new message; We will keep our web app the same.
First, we will create a partial for the form, then we will render that partial at the top of
the index view. Create a file called _message_form.html.erb in the posts view folder
and add the following code:
view plaincopy to clipboard print ?
1. "posts", :action => "create") do %>
2.
http://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.html -
8/8/2019 A Simple Twitter App with Ruby on Rails Messages With Ajax
5/10
3. "44x6") %>
4.
5.
Now, we need to modify the index view to render this partial at the top. Open the
index.html.erb file and modify the code as follows:
view plaincopy to clipboard print ?
1. "message_form" %>
2. @posts %>
For this to work we need to make one last modification. Open the route.rb file and map
a new posts resource, as shown below. (Note: the comments from this file have been
removed).
view plaincopy to clipboard print ?
1. ActionController::Routing::Routes.draw do |map|
2. map.resources :posts
3. map.connect ':controller/:action/:id'
4. map.connect ':controller/:action/:id.:format'
5. end
This creates a few named routes. If you look back to the create method in the posts
controller, youll see that we make use of the posts_path named route; Defining the
posts resource makes this named route available.
So, lets fire up the web server and a see how things look.
1. > ruby script/server
Now open a browser and go to http://localhost:3000/posts. You should see a screen, as
shown below.
http://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.html -
8/8/2019 A Simple Twitter App with Ruby on Rails Messages With Ajax
6/10
Adding some AJAX
AJAX allows you to make asynchronous requests to the server using JavaScript. We
will make use of AJAX to make the posting a message a bit smoother.
When the user clicks on the Update button, we want the message to update withoutrefreshing the browser. We have a few things to do to add AJAX functionality. First,
lets change the create method in the posts controller:
view plaincopy to clipboard print ?
1. def create
2. @post = Post.create(:message => params[:message])
3. respond_to do |format|
4. if @post.save
5. format.html { redirect_to posts_path }
6. format.js7. else
8. flash[:notice] = "Message failed to save."
9. format.html { redirect_to posts_path }
10. end
11. end
12. end
The only change here is the format.js code, allowing the create method to respond to
JavaScript. Next, we need to create a posts layout file. In the views/layout folder create
a file called posts.html.erb and add the following code:
view plaincopy to clipboard print ?
http://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.html -
8/8/2019 A Simple Twitter App with Ruby on Rails Messages With Ajax
7/10
1.
2.
3.
4.
5. 6.
7.
8.
9.
10.
11.
The main purpose of this is to make use of the javascript_include_tag call, which
includes the relevant JavaScript files for AJAX and some visual effects. Next, we need
to make a small addition to the index view (index.html.erb).
view plaincopy to clipboard print ?
1. "message_form" %>
2.
3. @posts %>
4.
As you can see all we have added is a div block surrounding the posts partial. This will
be used later when we are specifying where the AJAX response should be placed.
Nearly there! Now we will add a div_for block to our post partial (_post.html.erb).
view plaincopy to clipboard print ?
1.
2.
Posted ago
3.
4.
Edit the _message_form.html.erb partial and change the form_tag call to
form_remote_tag as show in the code extract below:
view plaincopy to clipboard print ?
1. "posts", :action => "create") do %>
The div_for operation create a div block with a unique id, this is especially useful when
looping through several records. Finally, we need to create the rjs template. To do this,
create a file called create.js.rjs in the views/posts folder and add the following code.
1. page.insert_html :top, :posts, :partial => @post
2. page[@post].visual_effect :highlight
http://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.html -
8/8/2019 A Simple Twitter App with Ruby on Rails Messages With Ajax
8/10
The first line specifies that a new post partial will be rendered at the top of the posts div
when the asynchronous call responds. The second line specifies that a highlight visual
effect will be applied to that block when it is rendered.
Thats it! Start you web server again, browse to http://localhost:3000/posts and give it a
go.
Make it Look Pretty!
Ive created a stylesheet, which we can use to make things look a bit more respectful.
Create a file called layout.css in the public/stylesheets folder then add the following
CSS code:
view plaincopy to clipboard print ?
1. body
2. {
3. font-family: tahoma, sans-serif;
4. font-size: 18px;
5. background-color: #4B7399;
6. width: 100%;
7. color: #ffffff;
8. margin: 0;
9. text-align: center;
10. }11.
12. #content
13. {
14. width: 800px;
15. margin: 0 auto;
16. text-align: left;
17. }
18.
19. .post
20. {
21. padding: 5px 20px 5px 20px;22. background-color: #ffffff;
23. margin: 20px 0 20px 0;
24. color: #000000;
25. }
Finally, you will need to add stylesheet_link_tag call to the posts.html.erb layout file.
As per below, the call should be placed in the head tag.
view plaincopy to clipboard print ?
1. 2.
http://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.html -
8/8/2019 A Simple Twitter App with Ruby on Rails Messages With Ajax
9/10
3.
4.
OK! It doesnt look that pretty, but it will do for our purposes.
Setting up a Home Page
To have the root URL (http://localhost:3000) direct the user towards your posts you will
first need to delete the public/index.html file. Do this now.
The second thing you need to do is set up a route in your config\routes.rb file. Open
routes.rb in notepad and add a new line to the end using map.root, as shown below.
view plaincopy to clipboard print ?
1. ActionController::Routing::Routes.draw do |map|
2. map.resources :posts
3. map.connect ':controller/:action/:id'
4. map.connect ':controller/:action/:id.:format'
5. map.root :controller => "posts"
6. end
For more on routes, try the Rails API Documentation
Now if you browse to http://localhost:3000. The request will be routed to the posts
controller.
Summary
http://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://api.rubyonrails.org/classes/ActionController/Routing.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://www.noupe.com/ajax/create-a-simple-twitter-app.htmlhttp://api.rubyonrails.org/classes/ActionController/Routing.html -
8/8/2019 A Simple Twitter App with Ruby on Rails Messages With Ajax
10/10
This concludes the first part of the series. Depending on the popularity of this article,
parts 2 and 3 will follow shortly.