Rails Girls App Dry Run

railsgirlsktm-notes.md

1. Create Idea Scaffold and run server

   rails generate scaffold idea name:string description:text picture:string
   rails db:migrate
   rails server
   

2. Add Bootstrap 4 CSS & JS

   <!-- CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   
   <!-- JS -->
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
   

3. Replace <%= yield %> with

   <div class="container">
     <%= yield %>
   </div>
   

4. Add Navbar as:

   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container">
         <a class="navbar-brand" href="#">The Idea App</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="/ideas">Ideas</a>
               </li>
            </ul>
         </div>
      </div>
   </nav>
   

5. Add Footer as:

   <footer>
     <div class="container">
         Rails Girls <%= Time.now.year %>
     </div>
   </footer>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
   

6. Open app/assets/stylesheets/application.css and at the bottom add

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

7. Update the background color of Navbar as that of Rails Girls Navbar site.

   .navbar {
     background-color: #d33824;
   }
   
   # Remove 'bg-primary' from <nav> tag
   

8. Adding picture uploads

   Ctrl+C and Open Gemfile in the project directory using your text editor and under the line gem 'sqlite3' add gem 'carrierwave' and run bundle.

9. Generate the code for handling uploads:

   rails generate uploader Picture
   

10. Open app/models/idea.rb and under the line class Idea < ApplicationRecord and add mount_uploader :picture, PictureUploader

11. Open app/views/ideas/_form.html.erb and change <%= form.text_field :picture %> to <%= form.file_field :picture %>.

Note: Right now it only shows a path to the file, so let’s fix that.

12. To show the picture in the page of the idea itself, open app/views/ideas/show.html.erb and change <%= @idea.picture %> to <%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %> . Also, update in app/views/ideas/index.html.erb.

13. Let's redirect the root url to idea index page

Open config/routes.rb and after the first line add root to: redirect('/ideas').

14. Create static page in your app

    rails generate controller pages info 
    

15. Add a button to your navigation bar

<li><a href="/pages/info">Info</a></li>