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 4 Whose in control? The controller

8 The Posts controller

9 Create a partial –app\views\posts\_post.html.erb Posted ago Step 5 How shall we look at them? Through views

10 Create a view %> Step 6 How shall we look at them? Through views

11 Create a partial –app\views\posts\_message_form.html.erb Step 7 How shall we enter tweets?

12 Modify app\views\posts\index.html.erb And include at the top... "message_form" %> Step 8 Putting everything together!

13 Modify config\routes.rb And include at the bottom... Step 9 Where 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 = Post.create(:message => params[:message]) respond_to do |format| format.html { redirect_to posts_path } format.js else flash[:notice] = "Message failed to save." format.html { redirect_to posts_path } 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 "message_form" %> Spicing it up with AJAX (3)

18 Use the magic div tag in the _post.html.erb Posted ago 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 :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 Activate the CSS

24 Voila!

25 Questions?