Tutorials‎ > ‎

Ruby on Rails Tutorial (Part 1)

posted Dec 8, 2017, 8:09 PM by Mario Viegash   [ updated Dec 11, 2017, 11:58 PM ]

Definition

Ruby on Rails, sometimes known as “RoR” or just “Rails”, is an open source framework for Web development in Ruby, an object-oriented programming (OOP) language like Perl and Python. Ruby is an open source, interpreted, object-oriented programming language created by Yukihiro Matsumoto, who chose the gemstone’s name to suggest “a jewel of a language”.

The principle difference between Ruby on Rails and other frameworks for development lies in the speed and ease of use that developer working within the environment enjoy. How to use Ruby on Rails? Follow this tutorial and you must be understand how to use it.

 

Setting Up and Installing

For use Ruby on Rails, I recommend you to download RubyInstallers (2.3.3) and Development Kit because it is have more documentation if you find in Google.com and really easy to use for CRUD in MySQL. Ok if you have already download the installer, follow this step to install Ruby, DevKit, and Rails.

Installing Ruby

  1.    Open the Ruby Installer and wait for the wizard from the installer.
  2.    After that, you can choose to “I accept the License” and click button “Next >”.
  3.    Next step, choose the destination for install and check 3 checkboxes like this photo.
             

           and then click button “Install”.

        4.   After that, you can click “Finish” for finish your install process and you can check you Ruby installed or not using command “ruby -v”

Setup Rubygems

  1.    For setup Ruby, run the self-extracting executable for your Development Kit and select to extract it in “C:\RubyDevKit” or beside your Ruby folder.
  2.     After the extract is complete, open a Ruby command prompt and navigate to “C:\RubyDevKit”
  3.    Run the following commands

ruby dk.rb init

ruby dk.rb install

          If the process finishes you can check your Rubygems installed or not using command “gem --version”.

Installing Rails

  1.   Open a Ruby command prompt and then run this command “gem install rails”.
  2.   If the process finishes you can check your rails installed or not using command “rails -v”.

 

The Application

Initialization

Create your project using command prompt and run “rails new [Project Name] -d mysql” and wait for the process into finish or you can try following this photo.


After that you can navigate you command prompt to the project and run “rails server” or “rails s” like this photo.


After that, open localhost:3000/ in your web browser and wait it until open like this photo.


If all went well, we can start to create simple web application example insert product.

Let’s start it, for the first open the project and check the database in “database.yml” or the path “[Project Name]/config/database.yml” and see the data. You can see the file have 3 databases and then you can create all the database into your phpmyadmin, if your phpmyadmin can’t to open  you can check your xampp already opened or not.

“[Project Name]/config/database.yml”

1.   default: &default  

2.     adapter: mysql2  

3.     encoding: utf8  

4.     pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>  

5.     username: root  

6.     password:  

7.     host: localhost  

8.     

9.   development:  

10.   <<: *default  

11.   database: tutorial_development # 1 database

12.  

13.   

14. test:  

15.   <<: *default  

16.   database: tutorial_test # 1 database

17.   

18. production:  

19.   <<: *default  

20.   database: tutorial_production # 1 database 

21.   username: tutorial  

22.   password: <%= ENV['TUTORIAL_DATABASE_PASSWORD'] %>  

“localhost:8088/phpmyadmin”


After that we can start to create model using command “rails generate model NAME [field[:type][:index] field[:type][:index]]” or you can try to following this photo.


And then you can check in you project will create product model in “[Project Name]/app/models/product.rb” and run command “rake db:migrate” to insert the table into phpmyadmin.


“localhost:8088/phpmyadmin”


Now we will to create controller, open the command prompt again and run command “rails generate controller NAME [action action] [options]” or you can try to follow this photo.


After that, you can check into the project will create controller, view and route in folder controllers and views or the path like this.

“[Project Name]/app/controllers/product_controller.rb”

1.   class ProductController < ApplicationController  

2.     def index  

3.     end  

4.     

5.     def new  

6.     end  

7.     

8.     def edit  

9.     end  

10. end  

“[Project Name]/app/views/product/index.html.erb”

1.   <h1>Product#index</h1>  

2.   <p>Find me in app/views/product/index.html.erb</p>  

“[Project Name]/config/routes.rb”

1.   Rails.application.routes.draw do  

2.     get 'product/index'  

3.     

4.     get 'product/new'  

5.     

6.     get 'product/edit'  

7.     

8.     # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html  

9.   end  

“localhost:3000/product/index”


Connect to Database

Now we will start in “index.html.erb” and “product_controller.rb” to connect the database and get data from table product.

“localhost:8088/phpmyadmin”


“[Project Name]/app/views/product/index.html.erb”

1.   <h1>All Product</h1>  

2.     

3.   <table border="1" cellspacing="0" cellpadding="0" width="50%" style="text-align: center">  

4.       <tr>  

5.           <th>No</th>  

6.           <th>Product Name</th>  

7.           <th>Product Type</th>  

8.           <th>Product Stock</th>  

9.           <th>Product Price</th>  

10.     </tr>  

11.     <!-- Product in here get from controller and how to loop the data ? We can use .each and set to variable -->  

12.     <% @product.each do |p| %>  

13.         <tr>  

14.             <!-- The data from the table taken using column name  -->  

15.             <td><%= p.id %></td>   

16.             <td><%= p.product_name %></td>  

17.             <td><%= p.product_type %></td>  

18.             <td><%= p.product_stock %></td>  

19.             <td><%= p.product_price %></td>  

20.         </tr>  

21.     <% end %>  

22. </table>  

23. <br>  

24. <!-- We can use link_to for link to different html through controller -->  

25. <%= link_to "Add New Product", controller: "product", action:"new" %>  

 “[Project Name]/app/controllers/product_controller.rb”

1.   class ProductController < ApplicationController  

2.     def index  

3.       # to connect the table product we can call using the model  

4.       @product = Product.all # .all in here like query SELECT * FROM product  

5.     end  

6.     

7.     def new  

8.     end  

9.     

10.   def edit  

11.   end  

12. end  

“localhost:3000/product/index”


Insert Product Component

We are going to create a component that we will use to insert a new product.

“[Project Name]/app/views/product/new.html.erb”

1.   <h1>New Product</h1>  

2.   <!-- We can use form_for to create form product for insert new product -->  

3.<%= form_for @product, url:{action:"create"}, html:{class:"form"} do |p|%> 

    <!-- url in here using for link to the route & html in here using to identifikasi this html using for form -->  

4.       <p>  

5.           <!-- We can create component html built-in method from rails  -->  

6.           <!-- And you must field it using column name, don't forget this is case sensitive -->  

7.           <%= p.label(:product_name)%>  

8.           <%= p.text_field :product_name%>  

9.       </p>  

10.   

11.     <p>  

12.         <%= p.label(:product_type)%>  

13.         <%= p.text_field :product_type%>  

14.     </p>  

15.   

16.     <p>  

17.         <%= p.label(:product_stock)%>  

18.         <%= p.text_field :product_stock%>  

19.     </p>  

20.   

21.     <p>  

22.         <%= p.label(:product_price)%>  

23.         <%= p.text_field :product_price%>  

24.     </p>  

25.   

26.     <p>  

27.         <%= p.submit "Submit" %>  

28.     </p>  

29.   

30.     <p>  

31.         <%= link_to :"Back", controller: "product", action:"index" %>  

32.     </p>  

33. <%end%>  

“[Project Name]/config/routes.rb”

1.   Rails.application.routes.draw do  

2.       

3.     get 'product/index'  

4.     

5.     get 'product/new'  

6.       

7.     get 'product/edit'  

8.     

9.     # We use method post to send the data from html form to controller  

10.   post "create":to => "product#create"  

11.   

12.   # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html  

13. end 

“[Project Name]/app/controller/product_controller.rb”

1.   class ProductController < ApplicationController  

2.     def index  

3.       # to connect the table product we can call using the model  

4.       @product = Product.all # .all in here like query SELECT * FROM product  

5.     end  

6.     

7.     def new  

8.       @product = Product.new # .new in here to create a new data from product  

9.     end  

10.   

11.   def edit  

12.   end  

13. end  

“localhost:3000/product/new”


The Main Application

The main application will be used to store our data, with the insert product component as its child.

“[Project Name]/app/controller/product_controller.rb”

1.   class ProductController < ApplicationController  

2.     def index  

3.       # to connect the table product we can call using the model  

4.       @product = Product.all # .all in here like query SELECT * FROM product  

5.     end  

6.     

7.     def new  

8.       @product = Product.new # .new in here to create a new data from product  

9.     end  

10.   

11.   def create  

12.     @product = Product.new(product_params)  

13.     if @product.save # .save in here to check the data saved or not   

14.       redirect_to action: "index"  

15.     else  

16.       redirect_to action: "new"  

17.     end  

18.   end  

19.   

20.   def edit  

21.   end  

22.   

23.   private  

24.   

25.   # We create method private for just thic controller can access and this method use to get data from html form  

26.   def product_params  

27.     params.require(:product).permit(:product_name:product_type:product_stock:product_price)  

28.   end  

29. end  

The Result

“localhost:3000/product/new”


“localhost:3000/product/index”



“localhost:8088/phpmyadmin”



 

Comments