Setup

Official setup | Deploying to Heroku | Rails app guide

Communication

Sign into this Slack team: railsgirls19.slack.com
Come up with a team name

Installing Rails

Windows

RailsInstaller Includes Rails, Ruby and Git.

verification:

ruby --version
rails --version
git --version
sqlite3 --version

Tourbleshooting Issue where the executables aren't found in the PATH (RailsInstaller 3.2) GitHub issue thread | SO

 Fix with replacing the Ruby path in `.bat` files in `./RailsInstaller/bin`:
 ```
 In Sublime: Ctrl+Shift+F
   @"C:\Users\emachnic\GitRepos\railsinstaller-windows\stage\Ruby2.2.0\bin\ruby.exe"
 with
   @"%~dp0ruby.exe"
 ```

Babun or Cmder (recommended)
Visual Studio Code (recommended) or Sublime Text

Intro to the Web

HTML

HTML(HyperText Markup Language) markup language to create web pages. A markup language is a way of annotating a document so that it is distinguishable from text. Originates from writers who "marked up" documents while reviewing them. (best resource MDN)

Defines the document structure which can be interpreted by the browser in a form of elements like headers (<h1 />), paragraphs (<p />), links (<a />), images (<img />), etc.

Open up Facebook and change a few elements in browsers code inspector.

Creating a simple static page

copy this snippet into an index.html in your workdir

<!DOCTYPE html>
<html>
  <head>
    <title>RGNS 16</title>
  </head>
  <body>

    <h1>My first HTML page</h1>
    <img src="https://i.imgur.com/m6TIhtA.png" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere eu justo vel vehicula. Proin bibendum molestie nulla non porta. Aenean molestie cursus luctus. Fusce ex nunc, rutrum eget dolor a, tempor tempor sapien. Aenean rutrum </p>

  </body>
 </html>

open the file in the browser by copying its path to the address bar
edit the webpage in the browser (Right click > Inspect element):
```
<h1 style="color:orange;">My first HTML page</h1>
```
- press Tab once you double click the h1 element to add the style portion
- block-level elements (<p>) vs. inline elements (<em>, <strong>) (visible by hovering in the browser element inspector)
- HTML attributes: <a href="https://www.google.com" title="You've hovered over me" target="_blank" >Link to Google</a>
change background to
```
<body style="background-color:#CC2523">
```

center the image

 <img src="http://www.ubelly.com/wp-content/uploads/2013/04/railsgirls.png" style="display: block; margin-left: auto; margin-right: auto" />

refresh the page so that everything dissapears
intro to CSS and create a CSS file in the workdirectory CSS (Cascading Style Sheet) is a style sheet language used to alter the presentation of a document written in a markup language.
- create style.css
```
body {
   background-color:#CC2523;
}

h1 {
   color:orange;
}

img {
   display: block;
   margin-left: auto;
   margin-right: auto
}
```
- remove all style references from index.html and include the stylesheet in the <head>
```
<link rel="stylesheet" type="text/css" href="style.css" />
```

Ruby

Rails

Guide

Internals

MVC, a construct describing components by its responsibilities
explain the connection between HTML and Rails (dynamic and static pages)
briefly view the Gemfile and explain what gems are and how our application depends on these
run the rails command and see the available options
- run rails generate without any options and explore the options
Rails scafolding runs a set of generators which sets up CRUD for a model
run scaffolding and migrations for movies

rails generate scaffold movies name:string description:text picture:string
# take a look at the ./bin directory; mention Rake tasks
ruby bin/rake db:migrate

ignore the DB migration for now
touch on routes

ruby bin/rake routes -a

open a new tab in the terminal and leave the scaffolding output intact

Views

V part in MVC, used for displaying the data
explore the view directory; focus on ./layouts/applications.html.erb
- justify the need for layouts (code reuse, common parts of the page, navbar)
- explain yield, <%= %> (visible, logic) and the purpose of ERB (embedded ruby) files
- take a look at the Bootstrap CSS (cdn)
  - talk about its purpose: responsiveness, cross-browser compatibility
relationship with the controller
add a navbar to the layout
- the <nav> tag on MDN
- see the Bootstrap [navbar component](http://getbootstrap.com/ nents/#navbar)

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">The Movie app</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/movies">Movies</a></li>
      </ul>
    </div>
  </div>
</nav>

briefly mention the assets directory and add the styling for the table

body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }

[back to the scaffolding output] run through the invoking erb generator to see the view files; mention the _form.html.erb naming convention, partials

Controllers

C in the MVC pattern; used to orchestrate the communication between views and models
aims to be thin (very little logic); emphasise the single responsibility approach
back to the scaffolding output; see what is generated in the scaffold_controller task
explore the controllers directory and open the movies_controller.rb
- make the connection between controller methods and the views which are generated for each action
explain routing
- run ruby bin/rake routes and explain the HTTP actions, parameters
  - switch to the rails server console and see what happens when a page is opened
- make the connection between the resource attribute in ./config/route.rb and the displayed routes from the command above
- make the default route point to movies by adding root :to => redirect('/movies') to ./config/routes.rb
complete the circle with route -> controller#method > view
back to the movies_controller.rb, dissect each method, point out comments above the methods
see the associated view files and how they display our dynamic data

Models

M in the MVC patter; abstracts the connection to the DB; holds business logic
make the connection between the Movie refernces in index, new, create and the model
back to the scaffolding output, see the active_record task
- explain what migrations are; why they're needed; open the migration file and make the connection between the scaffolding parameters and the creation of table fields in the DB
add a few movies through the app, including a blank one
open ./models/movie.rb and add validation for the name field

validates :name, presence: true
validates :name, length: { minimum: 2 }

fire up rails console and try to save an empty movie

film = Movie.new({})
film.save
film.valid?
film.validate
film.errors
film.update_attribute(:name, "Sedam i po")
film.valid?
film.save

make the connection between the if block in the create method in movies_controller.rb and the validation
- add debugger before the if and see what can be see about the object which is created;
- explore the params payload and movie_params method

adding a rating field to movies

rails generate migration AddRatingToMovies rating:integer
ruby bin/rake db:migrate

open ./views/movies/_form.html.erb and add

<div>
   <%= f.range_field(:rating, in: 1..100) %>
</div>

saving the movie doesn't store the rating; explain parameter restrictions
- stop the exection again with the debugger and see the movie_params and params
- add the :rating field to movie_params in movies_controller.rb
- try to save again

Ideas: [notify Slack on image uploads, add Bootstrap rating badges based on rating (green > 50, red < 50 )].

Troubleshooting the ExecJS::ProgramError after bootstrapping the app with scaffold + migrate: uncomment the rubyracer gem in the Gemfile and run bundle install --path vendor/bundle. Install NodeJS, restart the shell so that NodeJS is in the PATH, start the Rails server with bundle exec rails server.

Version control with Git

git config --global user.name "Ime"
git config --global user.email [email protected]
git init .
# commit the files
git add .
git commit -m "Moj prvi komit"

Deploying to Heroku

ngrok sharing between the groups

ervinb/rgns_guide.md