Ruby on Rails Integration

MDB backend integration with Ruby on Rails for Standard

This article shows you how to integrate Ruby on Rails backend application with MDB Standard UI Kit.

Prerequisites

Before starting the project make sure to install the following utilities:

Node LTS (14.x.x or higher recommended)
Ruby version 2.7.0 or later
MySQL (8.x.x or higher recommended)
Yarn (1.22.19 or higher recommended)
MDB GO
Code editor. We recommend VSCode

Creating a new Ruby on Rails application

Let's create a fresh Ruby on Rails application so that we can go through all the steps together. For this tutorial we'll be using MySQL database.

Step 1

Install Ruby on Rails on your computer.

terminal

        
            
        gem install rails

Step 2

Navigate within the terminal to the directory where you want to create your application then run the code from the snippet below to create your app and change the directory.

terminal

        
            
      rails new toDoApp -j esbuild -d mysql
      cd toDoApp

Note: In case of an error bound to the installation of the mysql2 gem, check the solution from this Github thread.

Step 3

Create a controller, model, and database for handling endpoints. Task is the name of your file - you can change whatever you like. After that you should have new files in app/controllers, app/models and db/migrate directory - in this particular case all of them will have the name Tasks (framework creates the plural on its own).

macOS/Linux
Windows

        
            
        bin/rails generate scaffold task name:text description:text

        
            
        ruby bin\rails generate scaffold task name:text description:text

Step 3

Creating a MySQL database.

In order to create a new database you need to run the following command.

Note: If you don't have MDB CLI installed yet, you can do it with NPM: npm install -g mdb-cli. Now log in with your MDB account, type: mdb login. If you don't have account yet you can create one using mdb register command.

Terminal

        
            
          mdb database init -db mysql8

Create a new user
Provide username, password, database name and description.

CLI will display your username, password, database name and connections string. You will need this data in the next step. Now you can go to phpMyAdmin where you will be able to handle the administration of the MySQL database.

Note: the password must contain at least one uppercase letter, one lowercase letter, one number, one special symbol and have minimum length of 8.

Step 4

In the database.yml file go to the development section and add the database connection details. Change the values between brackets for the ones you got after creating a new MySQL Database from our starter.

./config/database.yml

        
            
      development:
        adapter: mysql2
        host: mysql.db.mdbgo.com
        database: [Database Name]
        username: [Username]
        password: [Password]

Step 6

Migrate a database.

macOS/Linux
Windows

        
            
        bin/rails db:migrate

        
            
        ruby bin\rails db:migrate

Step 7

Run your server with a command from the snippet below.

macOS/Linux
Windows

        
            
        bin/dev

        
            
        rails s

This will boot Puma which is the default Ruby web server. To access your application via any browser visit http://localhost:3000/. There you should see the Rails default information page. When you want to stop the web server, press Ctrl+C in the terminal window where it's running.

Install MDB

In this section, we will add MDB styles and JavaScript files to the Ruby on Rails app.

Step 1

From the base project directory type the following command in the terminal. It will change the directory to vendor and initialize MDB CLI. From the list of starters select Standard.

Terminal

        
            
        cd vendor
        mdb frontend init mdb5-free-standard

Step 2

Add vendor to assets path in config/initializers/assets.rb file.

./config/initializers/assets.rb

        
            
        Rails.application.config.assets.paths << Rails.root.join('vendor')

Step 3

In the application.css file import CSS files.

./app/assets/stylesheets/application.css

        
            
        @import "mdb5-free-standard/css/mdb.min.css"

Step 4

In the application.js add those lines to import JS files.

./app/javascript/application.js

        
            
        import * as mdb from "../../vendor/mdb5-free-standard/js/mdb.umd.min.js"
        window.mdb = mdb;

To Do App with MDB

In this section, we will present the capabilities of Ruby on Rails used with the MDB package by creating an example To Do App.

Step 1

From ./app/views/tasks remove unnecessary files leaving _form.html.erb, _task.html.erb and index.html.erb.

Step 2

We are going to modify default GET, POST, PUT/PATCH and DELETE endpoints that support the functionality of the front-end app. To do that go to tasks_controller.rb and replace its content with code from the snippet below.

./app/controllers/tasks_controller.rb

        
            
          class TasksController < ApplicationController
            before_action :set_task, only: %i[ show edit update destroy ]
          
            # GET /tasks or /tasks.json
            def index
              @tasks = Task.all
            end
          
            # POST /tasks or /tasks.json
            def create
              @task = Task.new(name: params[:name], description: params[:description])
          
              respond_to do |format|
                if @task.save
                  format.html { redirect_to tasks_url, notice: "Task was successfully created." }
                else
                  format.html { redirect_to tasks_url, status: :unprocessable_entity }
                end
              end
            end
          
            # PATCH/PUT /tasks/1 or /tasks/1.json
            def update
              respond_to do |format|
                if @task.update(name: params[:name], description: params[:description])
                  format.html { redirect_to tasks_url, notice: "Task was successfully updated." }
                else
                  format.html { redirect_to tasks_url, status: :unprocessable_entity }
                end
              end
            end
          
            # DELETE /tasks/1 or /tasks/1.json
            def destroy
              @task.destroy
          
              respond_to do |format|
                format.html { redirect_to tasks_url, notice: "Task was successfully destroyed." }
              end
            end
          
            private
              # Use callbacks to share common setup or constraints between actions.
              def set_task
                @task = Task.find(params[:id])
              end
          
              # Only allow a list of trusted parameters through.
              def task_params
                params.require(:task).permit(:name, :description)
              end
          end

Step 3

At the end of the head tag in the application.html.erb file add the content of the snippet below.

./app/views/layouts/application.html.erb

        
            
          <!-- Font Awesome -->
          <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
          <!-- Google Fonts -->
          <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet"/>

Step 4

At the end of the body tag in the application.html.erb file add the content of the snippet below.

./app/views/layouts/application.html.erb

        
            
          <script type="module">
            document.querySelectorAll('.form-outline').forEach((formOutline) => {
              new mdb.Input(formOutline).update();
            });
            let taskForm, taskModalLabel, editNameInput, editDescInput, addTaskButton;
          </script>

Step 5

In ./app/views/tasks prepare partials _form.html.erb and _task.html.erb by replacing its current content with the content of the snippets below.

_form.html.erb
_task.html.erb

        
            
          <%= form_with(model: task) do |form|  %>
            <div class="modal-body">
                <div class="form-outline mb-4" data-mdb-input-init>
                    <%= form.text_field :name, class: "form-control", id: "editNameInput" %>
                    <%= form.label :name, class: "form-label", for: "editNameInput" %>
                </div>

                <div class="form-outline mb-4" data-mdb-input-init>
                    <%= form.text_field :description, class: "form-control", id: "editDescInput"%>
                    <%= form.label :description, class: "form-label", for: "editDescInput" %>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal" data-mdb-ripple-init>Close</button>
                <%= form.button "Save", type: "submit", class: "btn btn-primary", id: "confirmButton", "data-mdb-ripple-init" => true %>
            </div>
          <% end %>

        
            
          <div id="<%= dom_id task %>">
            <div class="fw-bold name"><%= task.name %></div>
            <div class="fw-bold desc"><%= task.description %></div>
          </div>

Step 6

In ./app/views/tasks/index.html.erb paste the content of the snippet below.

index.html.erb

        
            
        <div class="row pt-5">
          <div class="col text-center">
              <button class="btn btn-primary" data-mdb-modal-init data-mdb-ripple-init  data-mdb-target="#TaskModal" id="addTaskButton">Add
                  task</button>
          </div>
        </div>
      
        <div id="tasks">
            <!-- List of tasks -->
            <div class="row mt-3 p-5">
                <div class="col d-flex justify-content-center align-items-center">
                    <ul class="list-group list-group-light" style="min-width: 22rem;">
                        <% @tasks.each do |task| %>
                        <li class="list-group-item d-flex justify-content-between align-items-center gap-5" id="<%= task.id %>">
                            <%= render task %>
                            <div class="d-flex align-items-center">
                                <button class="btn btn-primary btn-floating me-2" data-mdb-modal-init data-mdb-ripple-init
                                    data-mdb-target="#TaskModal" id="addTaskButton"
                                    onclick="setModalValues(<%= task.id %>)"><span class="fas fa-pen text-white"
                                        title="edit"></span></button>
                                <%= button_to task, method: :delete, class:"btn btn-danger btn-floating", "data-mdb-ripple-init" => true do%>
                                <span class="fas fa-trash text-white" title="delete"></span>
                            <% end %>
                            </div>
                        </li>
                        <% end %>
                </div>
            </div>
        </div>
        
      
        <!-- Modal Add -->
        <div class="modal fade" id="TaskModal" tabindex="-1" aria-labelledby="TaskModalLabel" aria-hidden="true"
            data-mdb-backdrop="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="taskModalLabel">Add task</h5>
                        <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <%= render "form", task: @task, method: :post %>
                </div>
            </div>
        </div>
      
      <script>
          taskForm = document.querySelector("#TaskModal form");
          taskModalLabel = document.getElementById('taskModalLabel');
          editNameInput = document.getElementById('editNameInput');
          editDescInput = document.getElementById('editDescInput');
      
      
          function setModalValues(id) {
              taskModalLabel.innerText = 'Edit task';
              const task = document.getElementById(id)
              editNameInput.value = task.querySelector('.name').innerText;
              editDescInput.value = task.querySelector('.desc').innerText;
              taskForm.action = `/tasks/${id}`;
              taskForm.method = 'put';
          }
      
          addTaskButton = document.querySelector('#addTaskButton');
          addTaskButton.addEventListener('click', () => {
              taskModalLabel.innerText = 'Add task';
              taskForm.reset();
              taskForm.action = `/tasks`;
              taskForm.method = 'post';
          })
      </script>

To access your application visit http://localhost:3000/tasks. There you should see a simple To Do app connected to MySQL database.

Important: For Windows users, some more steps need to be taken. Please follow the steps below.

Additional step 1

In the package.json change scripts to match the content of the snippet below.

./package.json

        
            
            "scripts": {
              "build": "esbuild app/javascript/application.js --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
              "watch": "esbuild app/javascript/application.js --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --watch"
            }

Additional step 2

From toDoApp directory run the watch script to watch changes in your JavaScript and CSS files.

Terminal

        
            
          npm run watch

Additional step 3

Restart your server to see changes.

Optimization

If you want to further optimize your application please visit:

Backend features

Ruby on Rails:

This example was created with the use of Ruby on Rails. Our app is connected to MySQL database and is ready to receive get, post, put and delete requests.

MDB CLI:

The database in this example was created using MDB CLI with Graphical User Interface available under phpmyadmin.mdbgo.com

Frontend features

MDB UI KIT:

We have successfully added MDB UI Kit to the created app, with which we can build basic views very quickly.

Views and Layouts:

We have successfully integrated the backend with the MDB package and can send basic requests to backend Ruby on Rails application.