1 Dr Alexiei Dingli Web Science Stream A ROR Twitter.

1

Dr Alexiei Dingli

Web Science Stream

A ROR Twitter

2

Create Twitter in 30 minutes ...

Let’s get our hands dirty!

3

What is Twitter?

4

• Write a pragraph describing what you want to achieve ...

My web app should work in a similar way to twitter. Users should be able to register with the site and create short posts. Users should be able to follow other users. Each user should be able to see their own posts plus the users they are following.

Step 1

5

• Creating the application

> rails twitter

Step 2

6

• Let’s create the basic database post model

> ruby script/generate model post message:text  

• Setup the directories

> rake db:migrate  

Step 3

7

> ruby script/generate controller posts 

Step 4Whose in control? The controller

8

The Posts controller

9

• Create a partial– app\views\posts\_post.html.erb

<p><b>Posted <%= time_ago_in_words(post.created_at) %> ago</b></p>  

<p><%= post.message %></p> 

Step 5How shall we look at them? Through views

10

• Create a view– app\views\posts\index.html.erb

<%= render :partial => @posts %>

Step 6How shall we look at them? Through views

11

• Create a partial– app\views\posts\_message_form.html.erb

Step 7How shall we enter tweets?

12

• Modify• app\views\posts\index.html.erb

• And include at the top ...

<%= render :partial => "message_form" %>

Step 8Putting everything together!

13

• Modify• config\routes.rb

• And include at the bottom ...

Step 9Where can I find it? Look at the routes!

14

• Try it out ...–  ruby script/server  

Step 10

15

• Modify the create method to accept java script files

def create  

  @post = Post.create(:message => params[:message])  

  respond_to do |format|  

    if @post.save  

      format.html { redirect_to posts_path }  

      format.js  

    else  

      flash[:notice] = "Message failed to save."  

      format.html { redirect_to posts_path }  

    end  

  end  

end  

Spicing it up with AJAX (1)

16

• Modify• app\views\layouts\posts.html.erb

Spicing it up with AJAX (2)

17

Use the magic div tag in the index.html.erb

<%= render :partial => "message_form" %>  

<div id="posts">

  <%= render :partial => @posts %>  

</div>  

Spicing it up with AJAX (3)

18

Use the magic div tag in the _post.html.erb

<% div_for post do %>  

   <p><b>Posted <%= time_ago_in_words(post.created_at) %> ago</b></p>  

   <p><%= post.message %></p>  

<% end %>  

Spicing it up with AJAX (4)

19

Modify the form tag in the partial _message_form.html.erb

<% form_remote_tag

:url => {:controller => "posts", :action => "create"} do %>

Spicing it up with AJAX (5)

20

The magic of Ruby Java Script. Create a views/posts/create.rjs

page.insert_html :top, :posts, :partial => @post  

page[@post].visual_effect :highlight 

Spicing it up with AJAX (6)

21

How’s the spice?

22

Create in public/stylesheets a file called layout.css and paste the following layout ...

Ugly duckling? Use some CSS

23

• In the header of the app/views/layouts/posts.html.erb add

<%= stylesheet_link_tag 'layout' %>

Activate the CSS

24

Voila!

25

Questions?