Rails

When refactoring, it’s a good idea to visualise or draw a diagram of how the outcome is going to look. I’m going to use what I’ve created so far and refactor the working parts that I want to use into my main page.

First I need to understand how it’s going to work. My welcome page already has a partial called ‘left_column’. Within the left column, I am now going to nest another partial view called _income.html.erb which contains a bit of basic HTML

This new partial calls incomes/new, which in turn renders _incomes_form.html.erb

In the app/views/welcome/controller I can now render the new partial by writing

<% render “welcome/incomes”%>

Running the rails server and refreshing the localhost:3000 page will prove this worked and the new partial will appear

After running into a number of errors and having a thinking for a good 10 minutes, it’s decided that the better way to build is to going to start off with only one controller, one set of views and one model. I’m going to root my app in ‘incomes’ and eliminate the need for a welcome/index

Rails.application.routes.draw do  
  root 'incomes#new'
   
  resources :incomes, except: [:show, :index]

My app/views/income/index now consists only of a header and a form render.

# Incomes
<%= render 'incomes/incomes_form' %>

Following steps that were previously described, I’m going to recreate the welcome/index page that I had made earlier in the build. This time I am going to cut out unnecessary lines as I go.

<div class="row">
  <div class="col-md-12">
    <h1>
      <center>
        My Budget
      </center>
    </h1>
    
    This is an app designed to assist individuals in projecting their own budgets, savings and expenses from week to week. It will be built with Ruby on Rails, customized boostrap and postgreSQL assisted by tutorials demonstyrating an understanding of development processes

    <div class="row">
      <div class="col-md-8">
          <%= render 'incomes/new_incomes_form' %>
      </div>
      
      <div class="col-md-4">
      </div>
    </div>
          

Upon testing out the form, it is clear that it still works just fine. However it doesn’t look how I want it to.

By updating the html it is starting to look better, now I’m going to need to create some more new partials and form buttons to ensure the forms are correctly wired.

First I’ll rename the current partial to app/views/incomes/_new_incomes_form.htl.erb, make the same change in the app/views/incomes/index.html.erb and check it by refreshing my web browser

Next, I’ll create a new partial app/views/incomes/_incomes_index.html.erb which will have the same form.  The create action in the app/controllers/income_controller.rb now simply needs to redirect to an edit_income_path, instead of ‘index’

def create
  @income = Income.new(income_params)
    respond_to do |format|
      if @income.save
      format.html { redirect_to edit_income_path(@income)}
    end
  end
end

Now that I have a working new path running from new, directly to edit I can add html to the editable form.html

Now when I submit an edit, the server throws an error – cannot redirect to nil

That’s where the ‘update’ in my app/controllers/income_controller.rb needs to redirect back to the edit page again

def update
  respond_to do |format|
    if @income.update(income_params)
      format.html { redirect_to edit_income_path(@income)}
    end
  end
end

In the same way as above, I’m going to move the root page again as there is no longer a need for the app/views/incomes/index – this app will be rooted to income#new

Rails.application.routes.draw do
  root 'incomes#new'

  resources :incomes, except: [:show, :index]

Now to tidy up the layout HTML used in multiple places across pages can all be brought into the app/views/layouts/application.html.erb instead of taking up space

<div class="row">
  <div class="col-md-12">
    <h1>
      <center>
        My Budget
      </center>
    </h1>
    
    <p>
      <center>
        This is an app designed to assist individuals in projecting their own budgets, savings and expenses from week to week. It will be built with Ruby on Rails, customized boostrap and postgreSQL assisted by tutorials demonstyrating an understanding of development processes
      </center>
    </p> 
  </div> 
</div> 

<%= yield %>

I can also rearrange the layout of the form in the app/views/incomes/_incomes_index_form.html and app/views/incomes/_new_incomes_form.html.

[ruby] <%= form_for [@income] do |f| %>

<tr>
  <td>
    <div>
      <%= f.label :other_income %>
      <%= f.number_field :other_income %>
    </div>
  </td>
</tr> 

<tr>
  <td>
    <div>
      <%= f.label :income_total %> 
      <%= f.number_field :income_total %>
    </div>
  </td>
</tr> 

<% end %> ```

It’s also a good time to edit the parameters of the incomes_table as none of the fields are compulsory

Following which, I will need to exit the rails server and run

$ rake db:drop && rake db:create && rake db:migrate

After running the server again, this can be tested by not completing the form fields and clicking the update button.

The index route is no longer needed so I can exclude that in the routes.rb - Test it our by running rake routes

I also no longer need it in the income_controller.r

..and in the views/incomes folder too

And lastly I can get rid of all the welcome page related stuff that will no longer be used or needed

Reference and follow my working example at

• https://github.com/SelenaSmall/My_Budget/commit/8da81a58a70ec576255616f753576616f0815340

Database Table: In my app/db/migrate it shows what information can be set in the income table. It also shows that all fields must be filled in for the form to be submitted.

Views:

First, I’m going to create an _incomes_form.html.erb partial is a data entry form which will allow me to input data regarding income information and then save it to the main page. It will also redirect back to an updated index page once data entry is complete.

This partial needs to be called from the new.html.erb file I created in my last tutorial and can be done so with the following line. This line needs to be in <%brackets%> because it is a ruby call, in an html file.

We can test this out by writing something in the new partial and refreshing the localhost3000/income/new path

new

<%= render 'incomes/incomes_form' %>

For data entry to occur, I need to code some forms. I’m going to use a bootstrap form with fields for data entry. I am going to code each form field to access a specific field in my income table. This is a loop which will iterate through all the field’s specified within the income table:

Controller: In my income/controller.rb I now need to define “new” so that the compiler knows that this is going to be a new row in my income table (in the posgreSQL db). New is defined as follows:

<%= form_for [@income] do |f| %>
  <div class="field">
    <%= f.label :wages %><br /> <%= f.number_field :wages %>
  </div>
<% end %>

ERROR: I receive a series of errors which points out that I need to be careful how I name my files and because of pluralisation I need to rename my views and controller file. After renaming them all correctly

app/controllers/incomes_controller.rb

app/models/income.rb

app/views/incomes

Errors then continue to give directions as to where those changes need to be updated throughout the application

Create: Now that I have the _income_form.html partial rendering for @income, it can be tested by typing a number in the form and hitting enter. Naturally, I get an error because I have not declared the “create” action in my controller.rb

This block will call the income_params and store the data I’ve just entered in the :wages field

def create
  @income = Income.new(income_params)
    respond_to do |format|	  
      if @income.save    
      format.html { redirect_to incomes_path}
    end
  end
end

I receive a new error which tells me that I need to provide information in all of the table fields in order for this to be valid. This can be seen in the Income Migration, where it has been specified that all fields are compulsory.

The extra fields just need to be included in the views/_incomes_form.html.erb

<%= form_for [@incomes] do |f| %>
  <div class="field">
    <%= f.label :wages %><br /> <%= f.number_field :wages %>
  </div>
<% end %>

After refreshing the localhost:3000/incomes/new page, the missing fields will appear. Now when you hit enter nothing happens (or does it?) – the error is gone though

Now I want this new data to be updated in a table when I return to my index page after saving. I can draw up a table in the app/views/index.html.erb which will access the new data stored.

This is my new income partial

<%= form_for [@income] do |f| %>

  <div class="field">
    <%= f.label :wages %><br /> <%= f.number_field :wages %>
  </div>

  <div>
    <%= f.label :other_income %><br /> <%= f.number_field :other_income %>
  </div>

  <div>
    <%= f.label :income_total %><br /> <%= f.number_field :income_total %>
  </div>

<% end %>

Next, the new form needs a “submit” button to actually save the data

<div class="actions">
  <%= f.submit %>
</div>

And that’s when you’ll get a new error which cannot redirect to nil and prompt the need for an ‘update’ action in the incomes_controller.rb

The redirection path in the income_controller.rb simply needs to be updated as we do not have the need for a ‘show’ file

format.html { redirect_to incomes_path}

The new link now works. You can also see that the save action from earlier had done something and multiple rows have now been created.

The other thing we can do at this point, having decided there will be no need for a ‘show’ path (which is automatically generated when resources are created) in the design, I can simply exclude it in the routes.rb

Rails.application.routes.draw do
  resources :incomes, except: [:show]

  # The priority is based upon order of creation: first created -> highest priority.
  # See how all your routes lay out with "rake routes".

To prove this has worked, exit the rails server and run

$ rake routes

There is no longer an income#show route available.

Refresh the localhost and everything else still works just fine. Optimisation as you go keeps your files clean and tidy - its easier to read later on, when it gets really complicated.

*Ref:

• https://github.com/SelenaSmall/My_Budget/commit/1927a3b7e4ae83bf702f61f8f35b18e2abc4a793

Now that I have my layouts set up and some working partials. I can follow my previous partials instruction set to render a form which will update my income information. Of course I’ll need a few modifications in my income controller as well.

First, I’m going to create a new.html.erb file under app/views/income which will later render a partial as in my previous tutorial.

In the routes file I can include the following line to test out my new page and navigate to localhost300/income/index

get ‘income/index’

Now in the income_controller.rb I can declare set_income and some income_params which tell the compiler which table to access in the database and what information is available.

  private

  def set_income
    @income
  end

  def income_params
    params.require(:income).permit(:wages, :other_income, :income_total)
  end

end

I can also specify which actions can access the information parsed by set_income. For example, def new is going to link up to a new page which will allow me to enter data and store it in the table before taking me back to my home page.

I can now create another page called new.html.erb in the app/views/income folder. A simple link will navigate to this page from the app/views/income/index.html.erb

After creating the new file, we first need to either exit the rails server and run rake routes or open a new tab in the terminal and run rake routes. This will show us a list of all available routes in the system. If the one we are looking for isn’t there, we can always create it later.

It is clear to see that there are significantly more routes available than what are specified in the routes.rb, this is because every resource automatically comes with seven routes - index, create, new, edit, show, update and destroy. You can also see that I have some double ups.

Rails.application.routes.draw do
  get 'welcome/index'
  get 'income/index'
  resources :income

  # The priority is based upon order of creation: first created -> highest priority.
  # See how all your routes lay out with "rake routes".

I have two different routes, both of which will get me income#index and two more for welcome#index, now in this case I do not actually have a use for two different routes to either of these paths. I can simply remove the get ‘welcome/index’ and get ‘income/index’ in the routes file.

Rails.application.routes.draw do
  resources :income

  # The priority is based upon order of creation: first created -> highest priority.
  # See how all your routes lay out with "rake routes".

This seems like only a minor optimisation but in the long run the compiler reads every single line of code, so there’s no point in wasting resources and time later on.

Back to the new link. We can see from the list of routes available that the path we need to take is a ‘get’ action

new_income GET /income/new(.:format) income#new<

By running a link_to path in the app/views/income/index.html.erb we can wire up the ‘new’ page.

Income
  <%= link_to 'New', new_income_path %>

After saving and reloading the income/index page we can see there is a now a link titled “new”

Simply clicking on the link will test it out. It redirects the new page we created earlier. You can see in the web browsers path that the route is income#index (a resource default option).

*Ref:

• https://github.com/SelenaSmall/My_Budget/commit/ced655a90671724329a3771bddf2c48e69606c53

Now that I have successfully created a model and migrated a database for income, it’s time to create controllers and views to be able to access the income information visually.

The following terminal command will generate a new controller called “income_controller.rb” under app/controllers

$ bin/rails generate controller Income

As you can see, I have created an income controller which currently does nothing

If you look under app/views, another new income folder has also been created. In here is where we will store all view files relating to “income.” View files need to be compatible with web browsers, ie html files. I am going to create will be called index.html.erb

For the time being, I simply want to ensure I can access the page so I have simply typed the word “Income” in our new index file

Going back to my income controller, I now need to ensure I can access my new view

The last step to ensure that my new controller and view are working properly is to ensure they have been correctly routed in app/config/routes.rb - I want to be able to access (get) the new view I have just created

After changing the routes files, I need to remigrate again with the following command

$ rake db:drop && rake db:create && rake db:migrate

After running the rails server again, I can now navigate to localhost:3000/income/index and we can see that my new view has worked

Keep watching to see how I use forms and bootstrap modals to update income information.

*Reference

• https://github.com/SelenaSmall/My_Budget

In this example I will be using rake and Active Record Migrations to create a new income model backed by a posgreSQL database.

-First I’ll need to ensure I have included postgreSQL

PostgreSQL is the default database on Mac OS X Server as of version 10.7. The standard version of Mac OS X includes only the PostgreSQL command line client utilities*

-Ensure the correct gem is included in the Gemfile

-Update the app/config/database.yml file. You will see that the default database used with Ruby on Rails is sqlite3. We are going to use posgreSQL

Having changed the development environment, I need to run a migration to ensure that rails knows I am now using posgreSQL. This can be done with the following terminal command.

$ bin/rake db:migrate RAILS_ENV=development

Now I can generate a new model for income

$ rails generate model income wages:int other_income:int income_total:int

This will create a new model under app/models/

This will also create a new file under app/db/migrate which shows a record of all migrations that have been created.

I get an error because I’ve given the wrong instructions to the migration

The update below specifies whether each field is allowed to be null or not, I also should have migrated “integers” not “ints” - I make these updates directly in the migration file with sublime

Next I will need to re-create and migrate the database to update the changes, this can be done in one simple command

$ rake db:drop && rake db:create && rake db:migrate

If you are watching your screen in sublime, you can see the migration quickly disappear and reappear indicating that the drop, create, migrate was successful. Your terminal will also confirm this

Now that I have successfully migrated an income model, it’s time to create a view and controller to be able to access that information visually.

Working Example Reference https://github.com/SelenaSmall/My_Budget

*Ref

• http://www.postgresql.org/download/macosx/

*Resources

• http://guides.rubyonrails.org/active_record_migrations.html

Keep watching to see how I build My budgeting app.

What are partials? Partials in rails are views which enable you to create layouts with multiple content sections. I am going to nest three content partial views within the right hand column (also a partial) of my app to render a budgets summary section which will each eventually draw information from different models.

Running through the creation of a new right hand column partial to follow on from my last tutorial, I will first create the new file _rightcolumn.html.erb under app/views/welcome.

Adding the line of Ruby seen here on line 18 in app/views/welcome/index.html will render my new partial on the right hand side of the screen.

<div class="row">
  <div class="col-md-8">
    <%= render "welcome/leftcolumn"%>
  </div>
  
  <div class="col-md-4">
    <%= render "welcome/rightcolumn"%>
  </div>
</div>

In the new _righthand column partial, I have put in a header “Projections” as this is where my budget summary will be.

# Projections 

<div class="row">
  <%= render "welcome/next_pay_day"%>
</div>

As you can see in lines 3-5, I have also rendered another partial called _next_pay_day.html.erb which was created in the same way as above.

Next_pay_day will show summary calculations for the next pay day. This model will be replicated for End_of_month and End_of_year as well.

The _next_pay_day.html.erb partial contains the following HTML to render a summary table. Again, this model will be the same for End_of_month and End_of_year summaries too.

## Next Pay Day

<table>
  <tr>
    <td>
      Pay
    </td>
  </tr>
  
  <tr>
    <td>
      Balance
    </td>
  </tr>
  
  <tr>
    <td>
      Credit Card Repayments
    </td>
  </tr>
  
  <tr>
    <td>
      Savings
    </td>
  </tr>Excess Cash
</table>

Now the app is starting to come together with an overall base view and layout.

Keep watching, in the next tutorial I will be using posgreSQL and Rake Migrations to create some data storage.

*Reference

• https://github.com/SelenaSmall/My_Budget

In this tutorial, I am endeavouring to get the base of my app looking how I would like it, so I can create an initial building block to start from. It will enable me to complete models as I go.

1. Following my previous tutorial, I will begin setting up the layout files for my app and put in a nav-bar along the top.

http://selenasmall.com/2015/08/27/collaboration-room-setting-up-layouts-with-bootstrap-and-ruby-on-rails/

2. I will need to use a little bit of HTML in order to get the desired layout and make the app somewhat appealing. CSS will be added at a later time to get desired visual effects.

First up, I’m going to center the header & description under app/views/welcome/index.html.erb

It’s as simple as adding the ‘center’ tags, seen below

<h1>
  <center>
    My Budget
  </center>
</h1>

<body>
  <center>
    <p>This is an app designed to assist individuals in projecting their own budgets, savings and expenses from week to week. It will be built with Ruby on Rails, customized boostrap and postgreSQL assisted by tutorials demonstyrating an understanding of development processes</p>
  </center>
</body>

Next, I’m going to create a new row on the page, so as not confuse different segments of the page. Lines 1 & 2 and 10 & 11 wraps the header content in it’s own “row”. Only the data between lines 3-9 will show up or affect this area of the page.

<div class="row">
  <div class="col-md-12">
    <h1>
      <center>
        My Budget
      </center>
    </h1>
    
    <p>
      <center>
        This is an app designed to assist individuals in projecting their own budgets, savings and expenses from week to week. It will be built with Ruby on Rails, customized boostrap and postgreSQL assisted by tutorials demonstyrating an understanding of development processes
      </center>
    </p>
  </div>
</div> 

Below the header row, I am going to want to create two columns. The best way to do this is to create a new “row” with a new class spanning only a portion of the page. (Remember, the page width is broken down into 12 segments).

<div class="row">
  <div class="col-md-8">
  </div>
  
  <div class="col-md-4">
  </div>
</div>

These six lines will split the page into two columns, one will be 2/3rds of the page, the other 1/3rd.

Let’s test it out.

1. I’m going to create a new partial called _leftcolumn.html.erb under app/views/welcome

2. In that partial, I’m going to just write some simple HTML to produce a rough layout of the left-hand column of my app. This will likely be modified later…

<br /> 
                      
<h1>My Budget</h1>

<table>
  <th>
    Balance <i>Pay day before pay </i>
  </th>
  
  <th>$</th>
  
  <tr>
    <td>+ Pay</td>
    
    <td>$</td>
  </tr>
  
  <tr>
    <td>+ One-off Income</td>
    
    <td>$</td>
  </tr>
</table>

<table>
  <th>New Balance</th>
  <th>$</th>
  
  <tr>
    <td>- Transfers</td>
    <td>$</td>
  </tr>
</table>

<table>
  <th>
    New Balance
  </th>
  
  <th>$</th>
  
  <tr>
    <td>- Outgoings</td>
    <td>$</td>
  </tr>
  
  <tr>
    <td>- One-off Expenses</td>
    <td>$</td>
  </tr>
</table>

<div>Projected Balance Next Pay</div>

<div>Projected Balance End of the Month</div>

<div>Projected Balance End of the Year</div>

</body> 

1. Back in the app/views/welcome/index.html.erb file, we need to write out the line of Ruby which will call and render our new partial within the static index page.

<div class="col-md-8">
  <%= render "welcome/leftcolumn"%>
</div>

Although the HTML will likely change with further styling, I at least have a start point with working views.

Now to render the right-hand column, I can simply follow the last 3 steps again to get the initial layout on the page. I will need to ensure the ruby code to render my new _rightcolumn.html.erb partial is in the correct ‘div’ under app/views/welcome/index.html.erb file.

*Reference

• https://github.com/SelenaSmall/My_Budget

I am going to build a very simple Personal Budgeting App with Ruby on Rails. This tutorial will go through the development process I have taken to get started.

1. After thinking of the idea and going through it in my mind a few times, I grab a piece of paper and brainstorm. I write down everything I think of, sometimes scribbling over things that I had already written out.

2. Now to the computer. Using the following program I am going to mock up my app. How it’s going to look and work. Plan out the idea that I’ve got in my mind.

https://mockups-gdrive-bmpr.appspot.com/

The image above is how I am currently visualising the base layout of the app to be. It is likely a large amount of this will change as I continue to build. The diagrams below describe various models that I will incorporate into the app. It is most likely that each model or pair of modals shown will be represented on the screen in a similar way.

3. Following the steps from my earlier tutorial, I am going to set up a new Ruby on Rails Project called “MyBudget” which will be stored in a Github repository. The repo will updated along with tutorials here at http://www.selenasmall.com as I build the app.

Setting up with Ruby on Rails tutorial https://wordpress.com/post/96865345/100/

Github working model https://github.com/SelenaSmall/My_Budget

Keep watching to see how I build my app!

For quick and easy layout designs I have integrated Bootstrap. It means you don’t need to waste a whole lot of time learning/designing how your application is going to look. It gives you enough, though to present a professional looking front end.

1. First up, you’ll need to install bootstrap and sass, you can follow the simple instructions at http://getbootstrap.com/getting-started/

Once your downloads are complete, you will need to ensure that you require the correct gems in your application’s app/Gemfile

2. Under app/assets/stylesheets you should find a file names application.css

Rename this file application.scss and input the following code into the file. This will allow me to utilize the components of bootstrap that I’m going to want to use.

3. Under app/assets/javascripts there is a file called application.js

Line 16 below will allow my app to read the javascript components of the bootstrap used in my rails app

Now you’re ready to start Bootstrapping!

4. Under app/views/layouts you should see a file called application.html.erb

By editing this file, you can alter the layout of your entire application. The text inside the

5. The first thing I want to have across the top of my application is a nav-bar to make it easy for users to navigate the site. Here is how I’m going to build it.

First, we need in put in an empty nav-bar inside the ‘body’ tags

A nav-bar will appear at the top of your page.

6. Inside the ‘nav’ tags is where drop-down menus, links and buttons might be places. The Collaboration Room will have a drop-down menu to select user login/logout in the nav-bar.

The following code will produce a drop-down menu on the right-hand side of the nav-bar:

The following the class=”dropdown-menu” will produce a drop-down with a link to login/out. Note that this “drop-down menu” needs to be inside the class=”dropdown” link for it to work.

7. The last thing I want to is ensure that my entire app is centered on the page. To do this is simple. Just include ‘centre’ tags around the <%= yield %>, which shows all of the content.

The Collaboration Room Application is already starting to take form.

*References

• https://github.com/SelenaSmall/collaboration

*Resources

• http://getbootstrap.com/getting-started/
• http://getbootstrap.com/getting-started/
• http://getbootstrap.com/components/#navbar-brand-image

Quick set up your local env with Rails for a new application. The following tutorial takes you through the first steps I took to generate my blank rails application on mac os x. This is where I will begin…

This tutorial expects some prior knowledge of frameworks, ruby, rails, command line, how web applications work, sublime text 2, mac os x

1. Install Rails - http://railsinstaller.org/en

2. Using your terminal, navigate to your dev root (the folder where you keep all of your applications, programs, development).

3. Follow these simple commands:

Create new app

$ rails new collaboration_room

Move into new app file

$ cd collaboration_room

Start the server

$ rails s

4. Navigate in chrome to:

Your local server

localhost:3000

5. Open your app in sublime text 2 and navigate to:

collaboration_room/app/config/routes/

6. Add the following new line under the first line and save the file:

7. Refresh your localhost in chrome. Your should get a routing error:

8. Back to your terminal, follow these simple commands to create your new page:

Exit server

ctrl+c

Generate new controller file

$ bin/rails generate controller welcome index

Start the server

$ rails s

Now your good to go with your new blank rails app.

Enjoy!

Resources: * http://guides.rubyonrails.org/getting_started.html