Creating web application on Ruby on Rails without scaffold

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

• $ rake routes

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

• def new
   end

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. 

SHARE

Muhammad Samim

• 
• 
• 
• 
•