Ruby On Rails: Difference between revisions
Jump to navigation
Jump to search
| Line 157: | Line 157: | ||
==Adding content to the page== | ==Adding content to the page== | ||
Next to go the index page and add a media objects from https://getbootstrap.com/docs/4.0/layout/media-object/. | Next to go the index page and add a media objects from https://getbootstrap.com/docs/4.0/layout/media-object/. The code at the time was | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
Revision as of 03:59, 14 August 2020
Installing
Install Dependencies
sudo apt update
sudo apt install -y curl gnupg2 dirmngr git-core zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev software-properties-common libffi-dev
Install Node
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt install -y nodejs
Install Yarn
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install -y yarn
Install Ruby
Takes a while so might want to add --verbose
cd
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL
git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
exec $SHELL
rbenv install 2.7.1
rbenv global 2.7.1
gem install bundler
Install Rails
gem install rails
Creating a Project
This took a while but did finish on version 6.0.3.2 of rails
# Create
rails new HU
# Start the server http://localhost:3000
rails server # rails s
Basics
Creating a Controller
You pass a name and an action to create a controller
rails generate controller home index
We can not change the content of the page which is found at app/views/home/index.html.erb
<h1>Welcome</h1>
Changing the default route
Lets change the default route page to be the new page. Go app/config/routes.rb
Change from
Rails.application.routes.draw do
get 'home#index'
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
Change to
Rails.application.routes.draw do
root 'home#index'
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
Adding a new route
Add Route
In app/config/routes.rb add a new route by adding a get with route name and a controller and action
get '/about' => 'home#about'
Add View
You will need a new view under app/views called about.html.erb
<h1>Abouty<h1>
Add Action
You will need a new action under app/controller/home_controller.rb
class HomeController < ApplicationController
...
def about
end
end
Layouts
Hooking up Bootstrap
We can add bootstrap to our project by going to app/views/layouts/application.html.erb and adding the min to it. Add the link from https://getbootstrap.com/docs/4.0/getting-started/download/ and add the container div around the body
<!DOCTYPE html>
<html>
<head>
<title>HU</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
...
</head>
<body>
<div class="container">
<%= yield %>
</div>
</body>
</html>
We can do this by going to the bootstrap page and grab the example https://getbootstrap.com/docs/4.0/components/navbar/. The code at the time 4.0 was
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Adding content to the page
Next to go the index page and add a media objects from https://getbootstrap.com/docs/4.0/layout/media-object/. The code at the time was
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media my-4">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="mr-3" src="..." alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">List-based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</li>
</ul>