CREATING AN ADMINISTRATIVE SYSTEM WITH RAILS ADMIN IN 25 MINUTES!

WHAT WE ARE GOING TO DO AND WHY RAILS ADMIN?

In this tutorial we will create a complete administrative system using Rails Admin in 25 minutes! :).
The idea is that after doing the tutorial you will be able to create a complete administrative system (with authentication) for any type of business :). As an example we will create a system to manage the rental of vehicles where you can register the car fleet, the customers, the rents and also record possible “claims” that have occurred during the car rental.

Rails Admin is a Gem that creates an interface for you to manage your data. For further explanation take a look at Gem’s page on GitHub, clicking here!

A MOMENT TO THANK

I would like to thank all the readers for the receptivity that the Blog is having. Each feedback I received in the first two posts are greatly serving as incentive for me to continue to produce valuable content and further improve the quality of the work.
Simply, thank you all!

If you have not seen the Post on “12 Gems you need to know”, click here (Portuguese).

PROJECT INGREDIENTS

Rails 5 (But if you want you can use 4)
Rails Admin (Gem)
Devise (Gem)
Rollincode (Theme)

TUTORIAL GOALS

Create our Rails 5 Project and install the Gem of Rails Admin.
Create the database structure.
Create Authentication using Devise.
Place a topic on Rails Admin.

WHERE TO FIND THE COMPLETE CODE

This project will be complete on GitHub, if you want to see the code access this link! While you´re at it, follow me on GitHub 🙂

GET TO WORK

FIRST WE ARE GOING TO CREATE THE PROJECT AND INSTALL THE GEMS
1. To install using Rails 5, run on the terminal:
PowerShell

gem install rails

1

gem install rails
Make sure the version of Rails running is really 5:

PowerShell

rails -v

1

rails -v
If everything is right, you should see that the version is 5 on the console.
Run on the terminal to create your project:

PowerShell

rails new car_rent_admin

1

rails new car_rent_admin
Now go to your Gemfile and add the following gems:

Ruby

gem 'remotipart', github: 'mshibuya/remotipart' gem 'rails_admin', github: 'sferik/rails_admin' gem 'rails_admin_rollincode', '~> 1.0' gem "devise"

1
2
3
4

gem 'remotipart', github: 'mshibuya/remotipart'
gem 'rails_admin', github: 'sferik/rails_admin'
gem 'rails_admin_rollincode', '~> 1.0'
gem "devise"
1. * NOTE: If you are using Rails 4, you do not need to add the first Gem (remotipart).
Now Run Bundle on the console:

PowerShell

bundle install

1

bundle install
To install Rails Admin, run on the console:

PowerShell

rails g rails_admin:install

1

rails g rails_admin:install
When you run the command, Rails Admin will ask on which route you would like to install, in this tutorial I will leave / admin as the default, but you can choose another route or even install in home.

Default

Where do you want to mount rails_admin? Press for [admin]

1

Where do you want to mount rails_admin? Press for [admin]
To create database, run on the console:

Default

rake db:create

1

rake db:create
Now to see the result, run on the console:

PowerShell

rails s

1

rails s

Okay, now you should already be able to see the following screen by accessing the browser http://localhost:3000/admin

best completely free dating sites 2019

\o/ We are Online:), let´s configure Rails Admin now!

DATABASE

Just remembering, the example we are doing here today is a simple system to manage the rental of cars. We will only create the Models, it´s not necessary to create Controllers or even routes when using Rails Admin.

Let´s create the following Models:

Car: Store the company´s vehicles.
Client: People who will rent the cars.
Rent: Relates a car and a customer in the event of Rent.
Claim: If an accident occurs during the rental of a car, this table stores what happened. (I.e: the door was dented and the customer must pay $300).
User: The person who will use the management system. (We will generate with Devise).

LET´S CREATE:

To create the Model Car, run on the console:

PowerShell

rails g model car brand:string kind:string available:boolean

1

rails g model car brand:string kind:string available:boolean
Now for the Model Customer, run:

PowerShell

rails g model client name:string document:string phone:string

1

rails g model client name:string document:string phone:string
For the Rent, run:

PowerShell

rails g model rent price:decimal status:boolean rent_date:datetime devolution_date:datetime car_id:integer client_id:integer

1

rails g model rent price:decimal status:boolean rent_date:datetime devolution_date:datetime car_id:integer client_id:integer
Go to the migration generated for the Rental and replace the line:

PowerShell

"t.decimal :price"

1

"t.decimal :price"

with:

PowerShell

t.decimal :price, :decimal, :precision => 8, :scale => 2

1

t.decimal :price, :decimal, :precision => 8, :scale => 2

This is to make the field more appropriate to store monetary values.
Now for the Model Claim, run:

PowerShell

rails g model claim price:decimal status:boolean kind:integer descrição:text rent_id:integer

1

rails g model claim price:decimal status:boolean kind:integer descrição:text rent_id:integer
Go to the migration generated for the Claim and replace the line:

PowerShell

"t.decimal :price"

1

"t.decimal :price"

with:

PowerShell

t.decimal :price, :decimal, :precision => 8, :scale => 2

1

t.decimal :price, :decimal, :precision => 8, :scale => 2

This is to make the field more appropriate to store monetary values
Now to generate the tables, run:

PowerShell

rake db:migrate

1

rake db:migrate
We need to create the links between our tables now:
- Go to the model “Rent” and add the following lines:
  
  Ruby
  
  has_one :car has_one :client belongs_to :claim
  
  1
  2
  3
  
  has_one :car
  has_one :client
  belongs_to :claim
- In the model “Car” and also in the model “Customer”, add the following line:
  
  Ruby
  
  belongs_to :rent
  
  1
  
  belongs_to :rent
- To finalize add the following line in the model “Claim”.
  
  Ruby
  
  has_one :rent
  
  1
  
  has_one :rent

Great, now we have our tables and models configured.

Run:

rails s

rails s

Access the browser http://localhost:3000/admin and see how your administrative site is now with the new tables.
https://onebitcode.com/time-out-new-york-app-dating/

\o/ Great, we can now create, edit, or delete data in our tables. Play around with your administrative system and learn how to use Rails Admin interface, you will see that it is quite complete.

AUTHENTICATION

Like any closed system, our system must have an authentication method. We could use a basic authentication, but why not use the devise that in addition to being simple is complete? Let´s go:

To create the Model of our system administrator, run:

Ruby

rails g model User

1

rails g model User
Let´s install Devise, run:

Ruby

rails generate devise:install

1

rails generate devise:install
Now to create the devise fields and add the options to the Model User, run:

Ruby

rails generate devise User

1

rails generate devise User
In the console, run:

Ruby

rake db:migrate

1

rake db:migrate
Now go to the file “config/initializers/rails_admin.rb”, there you will be able to edit your management system in the future, but for now look for the following patch of commented code and “uncomment” it:

Ruby

## == Devise == # config.authenticate_with do # warden.authenticate! scope: :user # end # config.current_user_method(&:current_user)

1
2
3
4
5

## == Devise ==
# config.authenticate_with do
# warden.authenticate! scope: :user
# end
# config.current_user_method(&:current_user)
Excellent, now in the browser go to http://localhost:3000/admin and you will be redirected to the Login screen.
Wonderful, we have our login page (you can customize it, in the Devise documents you can learn how, click here), since you do not have an account yet, you can click “Sign Up” and create your account to login. (You can approve or reject new registrations on the platform, see how).

\o/ Great, we managed to create an authentication method using Devise. Now you are able to manage the people that access your platform and block unauthorized access.

To end this tutorial in great style, we will now put a theme in our Rails Admin to make it more presentable.

BUT FIRST A SIMPLE TASK FOR YOU TO PROBE

You may have noticed that where we put relations between the models (has_one), we ended up with two visible fields, for example, in this picture below the creation of Rental, we have twice the car field and twice the customer field. You can make it appear only once by adding to the file “config/initializers/rails_admin.rb” which model field you would like to appear. To know how to do this click here.

INSTALLING THE TEMPLATE

We already have our ready and functional website, but of course, adding new features to it is in your hands (but if you need advice, just talk to me on Facebook). Based on what we have learned here so far, you are able to quickly create an administrative system and impress your boss that is always rushing you or finally create a quality admin for your Startup.

LET´S INSTALL!

First, add the following line in “config/application.rb” after Bundler.required:

Ruby

ENV['RAILS_ADMIN_THEME'] = 'rollincode'

1

ENV['RAILS_ADMIN_THEME'] = 'rollincode'
Now, run the following commands:

Ruby

rm -rf tmp/cache/assets/development/

1

rm -rf tmp/cache/assets/development/

* If the theme does not work, run this command before:

Ruby

rake assets:clean && rake assets:precompile

1

rake assets:clean && rake assets:precompile

Finally the last step, create the following file (“app/assets/javascripts/rails_admin/custom/ui.js”) and paste the code below it:

$(document).on('ready pjax:success', function() {
 handleActiveBase();
 function handleActiveBase() {
 $('.sub-menu').each(function () {
 if ($(this).hasClass('active')) {
 $(this).parent().prev().addClass('active');
 $(this).parent().prev().addClass('open');
 $(this).parent().slideDown();
 }
 });
 }
});

$(function () {
 var width = $('.nav-stacked').width();
 $('.navbar-header').width(width);

 var array_menu = [];
 var lvl_1 = null;
 var count = 0;

 $('.sidebar-nav li').each(function (index, item) {
 if ($(item).hasClass('dropdown-header')) {
 lvl_1 = count++;
 array_menu[lvl_1] = []
 } else {
 $(item).addClass('sub-menu sub-menu-' + lvl_1);
 }
 });

 for (var i = 0; i <= array_menu.length; i++) {
 $('.sub-menu-' + i).wrapAll("<div class="sub-menu-container"></div>");
 }

 $('.sub-menu-container').hide();

 handleActiveBase();
 function handleActiveBase() {
 $('.sub-menu').each(function () {
 if ($(this).hasClass('active')) {
 $(this).parent().prev().addClass('active');
 $(this).parent().slideDown();
 }
 });
 }

 $('.dropdown-header').bind('click', function () {
 $('.dropdown-header').removeClass('open');
 $(this).addClass('open');

 $('.dropdown-header').removeClass('active');
 $('.sub-menu-container').stop().slideUp();
 $(this).toggleClass('active');
 $(this).next('.sub-menu-container').stop().slideDown();
 });
});

$(document).on('ready pjax:success', function() {

handleActiveBase();

function handleActiveBase() {

$('.sub-menu').each(function () {

if ($(this).hasClass('active')) {

$(this).parent().prev().addClass('active');

$(this).parent().prev().addClass('open');

$(this).parent().slideDown();

}

});

}

});

$(function () {

var width = $('.nav-stacked').width();

$('.navbar-header').width(width);

var array_menu = [];

var lvl_1 = null;

var count = 0;

$('.sidebar-nav li').each(function (index, item) {

if ($(item).hasClass('dropdown-header')) {

lvl_1 = count++;

array_menu[lvl_1] = []

} else {

$(item).addClass('sub-menu sub-menu-' + lvl_1);

}

});

for (var i = 0; i <= array_menu.length; i++) {

$('.sub-menu-' + i).wrapAll("<div class="sub-menu-container"></div>");

}

$('.sub-menu-container').hide();

handleActiveBase();

function handleActiveBase() {

$('.sub-menu').each(function () {

if ($(this).hasClass('active')) {

$(this).parent().prev().addClass('active');

$(this).parent().slideDown();

}

});

}

$('.dropdown-header').bind('click', function () {

$('.dropdown-header').removeClass('open');

$(this).addClass('open');

$('.dropdown-header').removeClass('active');

$('.sub-menu-container').stop().slideUp();

$(this).toggleClass('active');

$(this).next('.sub-menu-container').stop().slideDown();

});

Now just run Rails and see how your admin looks beautiful 🙂

CONCLUSION AND INDICATIONS

Thanks for following this tutorial until here \o/, I hope it helps you to create administrative systems in a simple manner using Ruby On Rails + Rails Admin.Rails Admin is pretty cool and has more options that can be explored, to find out more take a look at their Wiki in this link.

I’ve done an inventory management system for Trust Films using Rails Admin and the result was amazing, so you can do cool stuff with this Gem.

If you want to access the complete code of what we did here for reference, please visit GitHub clicking here.

I’m working hard to create quality content and in Portuguese, so if you liked this tutorial and others, share it with your friends :), it helps a lot (there are some share buttons below).

If you have any questions, write in the comments or talk to me on Facebook. I’ll be very happy to help you.

If you have not signed up, sign up to our Newsletter here on the right side and on top, every Friday I send a summary of the best that I produced in the week for you.

Again, thank you for the attention and receptivity that these contents have had in the community!

A big hug
Leonardo Scorza[:]

janeiro 17, 2020