1 dr alexiei dingli web science stream a ror twitter
TRANSCRIPT
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
6
• Let’s create the basic database post model
> ruby script/generate model post message:text
• Setup the directories
> rake db:migrate
Step 3
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
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!
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)
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)
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