RoR & Bootstrap v5

RoR & Bootstrap v5 guide for Trezo.

Overview

Trezo Ruby on Rails (RoR) is a powerful web development framework that accelerates the building of robust applications by following MVC architecture and providing a convention-over-configuration approach. It simplifies database handling, routing, and templating, making development more efficient.

Bootstrap v5 is a modern, responsive CSS framework that enhances RoR applications with a polished and adaptable front-end. It allows you to rapidly design layouts, components, and interactive features that work seamlessly across devices. With its utility classes, customizable themes, and JavaScript components, Bootstrap v5 empowers developers to create visually appealing and responsive interfaces without extensive custom CSS.

When combined, RoR and Bootstrap v5 provide a streamlined development process and a visually dynamic, mobile-first application. RoR handles the server-side logic and data manipulation, while Bootstrap 5 delivers a cohesive, adaptable UI that keeps users engaged. This combination is ideal for projects that require both a strong back-end and a flexible, user-friendly front-end.

What is Rails

Rails is a web application development framework written in the Ruby programming language. It is designed to make programming web applications easier by making assumptions about what every developer needs to get started. It allows you to write less code while accomplishing more than many other languages and frameworks. Experienced Rails developers also report that it makes web application development more fun.

Rails is opinionated software. It makes the assumption that there is a "best" way to do things, and it's designed to encourage that way - and in some cases to discourage alternatives. If you learn "The Rails Way" you'll probably discover a tremendous increase in productivity. If you persist in bringing old habits from other languages to your Rails development, and trying to use patterns you learned elsewhere, you may have a less happy experience.

The Rails philosophy includes two major guiding principles:

  • Don't Repeat Yourself: DRY is a principle of software development which states that "Every piece of knowledge must have a single, unambiguous, authoritative representation within a system". By not writing the same information over and over again, our code is more maintainable, more extensible, and less buggy.

  • Convention Over Configuration: Rails has opinions about the best way to do many things in a web application, and defaults to this set of conventions, rather than require that you specify minutiae through endless configuration files.

Server Requirements

To run the Trezo Rails project, ensure the following server requirements are met:

  • Ruby Version: 3.0 or higher
  • Rails Version: 7.x
  • Web Server: Puma (default for Rails)
  • Database: PostgreSQL, MySQL, or SQLite (default SQLite)
  • Bundler: Latest version
  • Node.js: Version 12+ (for Webpacker or JavaScript compilation if applicable) Operating System: Linux, macOS, or Windows

Required System Packages

Ensure that the following packages are installed:

#For Ubuntu
sudo apt-get install build-essential libssl-dev libreadline-dev zlib1g-dev

# For macOS
xcode-select --install

# For Windows
Install MSYS2 from the official website: https://www.msys2.org/

Pre-requisites

Ruby Version Manager (RVM or rbenv)

Use RVM or rbenv to manage your Ruby versions. Install either of these tools and install the correct version of Ruby:

  • RVM:
\curl -sSL https://get.rvm.io | bash -s stable rvm install ruby-3.x.x rvm use ruby-3.x.x --defaul
  • rbenv:
brew install rbenv
rbenv install 3.x.x
rbenv global 3.x.x

Bundler

Ensure Bundler is installed to manage Ruby gem dependencies:

gem install bundler

Setting Up the Project

Open the project from the ThemeForest downloaded bundle.

And open the terminal into the bundle.
cd trezo-rails
bundle install
rails server

Ruby on Rails Guides

How to add a controller with a view using commands in Ruby On Rails.

To generate a controller with views using Ruby On Rails, you can use the rails generate controller command. This command not only creates the controller file but also sets up the associated views and routes for you.

Here’s how you can do it:

Step-by-Step Instructions:

  1. Open your terminal and navigate to the root directory of your Rails application.

  2. Run the generate command to create a new controller with associated actions and views. Replace ControllerName with the desired name of your controller, and action1 action2 with the actions you want to generate:

rails generate controller ControllerName action1 action2

For example, if you want to create a Posts controller with index and show actions:

rails generate controller Posts index show

  1. Output Explanation: The command above will generate the following files:

    • app/controllers/posts_controller.rb: The controller file.
    • app/views/posts/index.html.erb: The view file for the index action.
    • app/views/posts/show.html.erb: The view file for the show action.
    • test/controllers/posts_controller_test.rb: Test file for the controller.
    • It will also update the routes.rb file with a route for the PostsController.

  2. Edit Your Controller: You can now open the PostsController (app/controllers/posts_controller.rb) and add any logic you need for your actions:

class PostsController < ApplicationController
  def index
    # your code here
  end

  def show
    # your code here
  end
end
  1. Edit Your Views: You can customize the views located in app/views/posts/ to match your desired layout and content using Embedded Ruby (ERB).

Additional Options:

  • If you only want to generate the controller without the view files, you can use the --no-helper and --no-assets options:
rails generate controller Posts --no-helper --no-assets
  • If you want to specify a different format for the views (e.g., Haml or Slim), you would need to have the appropriate gem installed and configured.

By following these steps, you can easily add a controller with associated views using Ruby On Rails and ERB.

Ruby on Rails displaying image.

To display an image in an .erb (Embedded Ruby) view file in a Rails application, you typically use the image_tag helper. This helper generates an HTML <img> tag for the specified image and provides some options for setting attributes like alt, class, and more.

Step-by-Step Instructions to View an Image in a .erb File:

  1. Place the Image in the app/assets/images Directory:

    • Make sure the image you want to display is located in the app/assets/images directory. For example, if you have an image named example.png, place it in app/assets/images.

  2. Use the image_tag Helper in Your .erb File:

    • In your view file (e.g., app/views/posts/index.html.erb), use the image_tag helper to display the image:
<%= image_tag 'example.png', alt: 'Description of image', class: 'image-class' %>

This generates the following HTML:

<img src="/assets/example.png" alt="Description of image" class="image-class" />
  1. Customizing the Image Tag:
    • The image_tag helper allows you to add HTML attributes such as alt, class, width, and height:
<%= image_tag 'example.png', alt: 'My Example Image', class: 'img-responsive', width: '200', height: '200' %>
  1. Using Image from External URL:
<%= image_tag 'https://example.com/image.png', alt: 'External Image' %>
  1. Managing Image Versions:
    • For images with different versions (like 2x images for retina displays), you can use the srcset attribute:
<%= image_tag 'example.png', srcset: { 'example.png' => '1x', '[email protected]' => '2x' }, alt: 'Responsive Image' %>

Summary

By using the image_tag helper in your .erb files, you can easily embed images stored in your Rails application’s app/assets/images directory or from an external URL, while taking advantage of various HTML attributes for customization.

Credits

Note: All images are used for preview purpose only and not included in the final purchase files.

Images

Google Fonts

IconFont

Packages

Installation Video

To help you understand the installation process better, please watch the following video tutorial. It provides a step-by-step guide on setting up the application:

Additional Notes

If you need more details, please refer to the written instructions.

Feel free to reach out to our support team if you have any questions!