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!

TUTORIAL GOALS

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

To install using Rails 5, run on the terminal:

PowerShell

1

gem install rails

Make sure the version of Rails running is really 5:

PowerShell

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

1

rails new car_rent_admin

Now go to your Gemfile and add the following gems:

Ruby

1

2

3

4

gem'remotipart',github:'mshibuya/remotipart'

gem'rails_admin',github:'sferik/rails_admin'

gem'rails_admin_rollincode','~> 1.0'

gem"devise"

*NOTE: If you are using Rails 4, you do not need to add the first Gem (remotipart).

Now Run Bundle on the console:

PowerShell

1

bundle install

To install Rails Admin, run on the console:

PowerShell

1

railsgrails_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

1

Where doyou want tomount rails_admin?Press for[admin]

To create database, run on the console:

Default

1

rake db:create

Now to see the result, run on the console:

PowerShell

1

railss

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

\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).

In the model “Car” and also in the model “Customer”, add the following line:

Ruby

1

belongs_to:rent

To finalize add the following line in the model “Claim”.

Ruby

1

has_one:rent

Great, now we have our tables and models configured.

Run:

PowerShell

1

railss

Access the browserhttp://localhost:3000/adminand see how your administrative site is now with the new tables.

\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

1

railsgmodelUser

Let´s install Devise, run:

Ruby

1

railsgeneratedevise:install

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

Ruby

1

railsgeneratedeviseUser

In the console, run:

Ruby

1

rakedb: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

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 tohttp://localhost:3000/adminand 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 thisclick 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 onFacebook). 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

1

ENV['RAILS_ADMIN_THEME']='rollincode'

Now, run the following commands:

Ruby

1

rm-rftmp/cache/assets/development/

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

Ruby

1

rakeassets:clean&&rakeassets:precompile

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

Ruby

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

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

handleActiveBase();

functionhandleActiveBase(){

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

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

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

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

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

}

});

}

});

$(function(){

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

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

vararray_menu=[];

varlvl_1=null;

varcount=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(vari=0;i<=array_menu.length;i++){

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

}

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

handleActiveBase();

functionhandleActiveBase(){

$('.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 thislink.

I’ve done an inventory management system for Trust Filmsusing 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!