Tutorial Title:
Creating web application on Ruby on Rails without scaffold
Course: Web Engineering
Instructor: Muhammad Samim
Note: Copy and paste commands in terminal after dollar sign ($)
1.CREATING AN APP
- Open terminal by pressing Ctrl + Alt + t
- $ mkdir webApps
- $ cd webApps
- $ rails new blog -d postresql
2. CREATING HOME PAGE CONTROLLER
- $ rails generate controller home index
3. GO TO home/webApps/blog/app/view/home/index.html.erb TYPE OR PASTE BELLOW HTML CODE AND SAVE IT.
- <h1> Welcome to Home Page </h1>
4. CREATING DATABASE AND MIGRATING TO SHOW PAGES ON BROWSER
- $ rake db:create
- $ rake db:migrate
5. OPEN YOUR BROWSER AND TYPE THE LOCALHOST ADDRESSES TO CHECK
- localhost:3000 (for home page)
- localhost:3000/home/index
6. MAKING HOME/INDEX FILE AS YOUR HOME PAGE
- Go to home/webApps/blog/config/routes.rb and type the following codes
- get 'home/index'
- root 'home#index'
7. OPEN YOUR BROWSER AND type localhost addresses to check
- localhost:3000 (for home page)
- localhost:3000/home/index
8. MAKING ROUTES FOR YOUR DIFFERENT PAGES
- go to home/webApps/blog/config/routes.rb and add following code
- resources :articles
- it will create routes for articles#index, articles#create, articles#new, articles#edit, articles#show, articles#update, articles#destroy
9. TO CHECK ROUTES OF PAGES TYPE THE FOLLOWING COMMAND
10. CREATING CONTROLLER FOR ARTICLES TO DEFINE PAGES OF ARTICLES MADE BY resources :articles
- $ rails generate controller articles
11. GO TO home/webApps/blog/app/controller/articles_controller.rb AND ADD THE FOLLOWING CODES
12. CREATING new.html.erb FILE
- Go to home/webApps/blog/app/view/
- Right click>New Document> New Document. Rename and save with name new.html.erb > open it and type the bellow code
- <h1> New Page of Articles </h1>
13. CREATING FORM USING RUBY LANGUAGE
go to home/webApps/blog/app/view and open new.html.erb and paste the following Ruby Code and save
- <%= form_for :article, url: articles_path do |f| %>
<p>
<%= f.label :title %><br>
<%= f.text_field :title %>
</p>
<p>
<%= f.label :body %><br>
<%= f.text_area :body%>
</p>
<p>
<%= f.submit %>
</p>
<% end %>
14. OPEN YOUR BROWSER AND GO TO THE LINK TO CHECK THE CREATED FORM
- localhost:3000/articles/new
15. CREATING THE ARTICLES MODEL TO SAVE THE DATA FROM USER
- $ rails generate model Article title:string body:text
- $ rake db:migrate
16. CREATING THE CREATE PAGE OF ARTICLES TO SAVE THE DATA go to home/webApps/blog/app/controllers and open articles_controller.rb file and add the following code (after def new end) and save file.
- def create
@article = Article.new(article_params)
@article.save
redirect_to @article
end
private
def article_params
params.require(:article).permit(:title, :body)
end
17. DEFINING SHOW PAGE IN ARTICLE CONTROLLER
go to home/webApps/blog/app/controllers and open articles_controller.rb file and add the following code
Note: you must define it on the top (before def new end )
- def show
@article = Article.find(params[:id])
end
18. CREATING show.html.erb FILE TO SHOW WHAT ARE SAVED IN CREATE
go to home/webApps/blog/app/view
- Right click > New Document > Empty Document. Rename file and save with name show.html.erb. Open it and save the following Ruby codes
- <p>
<strong>Title:</strong>
<%= @article.title %>
</p>
<p>
<strong>Text:</strong>
<%= @article.body %>
</p>
19. DEFINING INDEX PAGE TO LIST ALL SAVED DATA (ARTICLES)
- go to home/webApps/blog/controllers/ and open articles_controller.rb and add the following code
Note: now it must be on top (before def show end)
- def index
@articles = Article.all
end
20. CREATING index.html.erb FILE TO LIST ALL SAVED DATA IN ONE PAGE
- go to home/webApps/blog/app/view
- Right click > New Document > Empty Document. Rename file and save with name index.html.erb. Open it and save the following Ruby codes
- <h1>Listing articles</h1>
<table>
<tr>
<th>Title</th>
<th>Text</th>
</tr>
<% @articles.each do |article| %>
<tr>
<td><%= article.title %></td>
<td><%= article.body %></td>
</tr>
<% end %>
</table>
21. LINKING PAGES WITH EACH OTHER ADDING LINK OF ARTICLE IN HOME PAGE
- go to home/webApps/blog/app/view/home and open index.html.erb file and add the following codes of Ruby
- <%= link_to 'My Blog', controller: 'articles' %>
22. ADDING LINK OF NEW ARTICLE IN ARTICLES INDEX PAGE
- go to home/webApps/blog/app/views/articles/ and open index.html.erb file and add the following codes of Ruby
- <%= link_to 'New article', new_article_path %>
23. ADDING LINK OF INDEX PAGE OF ARTICLES IN NEW PAGE OF ARTICLE (FORM)
- <%= link_to 'Back', articles_path %>
24. ADDING LINK OF INDEX PAGE OF ARTICLES IN SHOW PAGE OF ARTICLE
- go to home/webApps/blog/app/views/articles/ and open show.html.erb file and add the following codes of Ruby
- <%= link_to 'Back', articles_path %>
25. ADDING VALIDATIONS (APPLYING SOME RULES)
- go to home/webApps/blog/app/models open articles.rb file and add following codes
- validates :title, presence: true,
length: { minimum: 5 }
26. 6. AFTER ADDING VALIDATION THE @article.save RETURNS FALSE, SO WE NEED TO CATCH THE ERROR AND KEEP THE USER ON THE SAME FORM.
- go to home/webApps/blog/app/controllers and open articles_controller.rb file and modify the code (replace both definition completely with old ones)
- def new
@article = Article.new
end
- def create
@article = Article.new(article_params)
if @article.save
redirect_to @article
else
render 'new'
end
end
27. MODIFYING SOME CODES TO SHOW THE CAUGHT ERROR IN NEW PAGE OF ARTICLES (REPLACE OLD CODES WITH BELLOW CODE COMPLETELY)
- Go to home/webApps/blog/app/view and open new.html.erb and replace old codes with bellow codes completely.
- <%= form_for :article, url: articles_path do |f| %>
<% if @article.errors.any? %>
<div id="error_explanation">
<h2>
<%= pluralize(@article.errors.count, "error") %> prohibited
this article from being saved:
</h2>
<ul>
<% @article.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<p>
<%= f.label :title %><br>
<%= f.text_field :title %>
</p>
<p>
<%= f.label :body %><br>
<%= f.text_area :body %>
</p>
<p>
<%= f.submit %>
</p>
<% end %>
<%= link_to 'Back', articles_path %>
28. DEFINING EDIT PAGE IN ARTICLES CONTROLLER TO MAKE IT ABLE TO BE UPDATED
- go to home/webApps/blog/app/controllers and open articles_controller.rb and add bellow codes bellow (def new (code) end)
- def edit
@article = Article.find(params[:id])
end
29. CREATING edit.html.erb file TO EDIT SAVED RECORDS
- Go to home/webApps/blog/app/views/articles Right click > New Document
> Empty Document. Rename it with edit.html.erb. Open and paste
bellow codes of Ruby
- <h1> Welcome to Edit Page of Articles </h1>
<%= form_for :article, url: article_path(@article), method: :patch do |f| %>
<% if @article.errors.any? %>
<div id="error_explanation">
<h2>
<%= pluralize(@article.errors.count, "error") %> prohibited
this article from being saved:
</h2>
<ul>
<% @article.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<p>
<%= f.label :title %><br>
<%= f.text_field :title %>
</p>
<p>
<%= f.label :body %><br>
<%= f.text_area :body %>
</p>
<p>
<%= f.submit %>
</p>
<% end %>
<%= link_to 'Back', articles_path %>
30. DEFINING UPDATE ACTION IN ARTICLES CONTROLLER
- Go to home/webApps/blog/app/controllers and open articles_controller.rb and add bellow codes bellow (def edit (codes) end)
- def update
@article = Article.find(params[:id])
if @article.update(article_params)
redirect_to @article
else
render 'edit'
end
end
31. ADDING LINK OF EDIT TO MODIFY THE SAVE RECORDS IN INDEX PAGE OF ARTICLES
- go to home/webApps/blog/app/views/articles/ and open index.html.erb file and replace bellow codes with old codes completely
- <h1> Welcome to index page of Articles </h1>
<table>
<tr>
<th>Title</th>
<th>Text</th>
<th colspan="2"></th>
</tr>
<% @articles.each do |article| %>
<tr>
<td><%= article.title %></td>
<td><%= article.body %></td>
<td><%= link_to 'Show', article_path(article) %></td>
<td><%= link_to 'Edit', edit_article_path(article) %></td>
</tr>
<% end %>
</table>
<%= link_to 'New article', new_article_path %>
32. IF TWO PAGES USE SIMILAR CODES THEN WE MAKE ONE PARTIAL PAGE HOLDING BOTH CODES AND THEN WE CALL PARTIAL PAGE IN EACH PAGE TO CLEAN UP DUPLICATION.
- Go to home/webApps/blog/app/views/articles and Right click > New Document > Empty Document. Rename it with name _form.html.erb then open it and paste bellow codes of Ruby and save
- Note: When ever we make partial page that will be started from underscore then page name eg. _form.html.erb
- <h1> Using one partial page and calling in different pages </h1>
<%= form_for @article do |f| %>
<% if @article.errors.any? %>
<div id="error_explanation">
<h2>
<%= pluralize(@article.errors.count, "error") %> prohibited
this article from being saved:
</h2>
<ul>
<% @article.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<p>
<%= f.label :title %><br>
<%= f.text_field :title %>
</p>
<p>
<%= f.label :body %><br>
<%= f.text_area :body %>
</p>
<p>
<%= f.submit %>
</p>
<% end %>
33. DELETING CODE OF new.html.erb AND CALLING PARTIAL PAGE CODE BECAUSE WE KEPT CODE OF new.html.erb IN PARTIAL PAGE _form.html.erb
- Go to home/webApp/blog/app/views/articles and open new.html.erb file and replace old codes with bellow code completely.
- <h1> New page of Articles </h1>
<%= render 'form' %>
<%= link_to 'Back', articles_path %>
34. DELETING CODE OF edit.html.erb AND CALLING PARTIAL PAGE CODE BECAUSE WE KEPT CODE OF edit.html.erb IN PARTIAL PAGE _form.html.erb
- Go to home/webApp/blog/app/views/articles and open edit.html.erb file and replace old codes with bellow code completely.
- <h1> Edit page of Articles </h1>
<%= render 'form' %>
<%= link_to 'Back', articles_path %>
35. DEFINING DESTROY IN article_controller.rb TO MAKE USER ABLE TO DELETE SAVED RECORD
- Go to home/webApps/blog/app/controllers and open articles_controller.rb then add bellow codes bellow (def update ( codes ) end )
- def destroy
@article = Article.find(params[:id])
@article.destroy
redirect_to articles_path
end
36. ADDING LINK OF DESTROY IN INDEX PAGE OF ARTICLES AND DEFINING DELETE METHOD TO CONFIRM DELETION.
- Go to home/webApps/blog/app/views/articles and open index.html.erb and replace the bellow codes with old codes.
- <h1> Welcome to index page of Articles </h1>
<table>
<tr>
<th>Title</th>
<th>Text</th>
<th colspan="2"></th>
</tr>
<% @articles.each do |article| %>
<tr>
<td><%= article.title %></td>
<td><%= article.body %></td>
<td><%= link_to 'Show', article_path(article) %></td>
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Destroy', article_path(article), method: :delete, data: { confirm: 'Are you sure?' } %></td>
<% end %>
</tr>
</table>
<%= link_to 'New article', new_article_path %>_path %>
- Note: we need to add just <td><%= link_to 'Destroy', article_path(article), method: :delete, data: { confirm: 'Are you sure?' } %></td> in old code and bellow set of codes combined new codes and old codes to reduce the chances of errors.
