Course 3, session 3

Author: tomclose

_sessions/c3s3/1_arrays.md

@@ -0,0 +1,64 @@
+---
+title: Arrays
+---
+
+An array is a way of storing a list of objects. Unlike in some other languages in ruby you don't need to specify which sort of object the array will hold - it can even hold objects of different types.
+
+Arrays are written with square brackets.
+{% highlight ruby %}
+my_array = [1,2,3]
+
+empty_array = []    # an array with no elements
+{% endhighlight %}
+
+
+{% exercise %}
+Working with a partner, guess what each of the following expressions will give, then try them out in `irb`:
+
+{% highlight ruby %}
+a = [3, 39, 1, 0, 5]
+
+a[1]
+a.first
+a[0]
+a[5]
+
+a[-1]
+a[-5]
+a.last
+
+a[1..3]
+a[1..-1]
+
+b = []
+
+a.empty?
+b.empty?
+a.length
+b.length
+
+a.include?(39)
+a.include?(49)
+
+a.reverse
+a   # has this changed a?
+a.reverse!
+a   # has this changed a?
+
+a.sort
+a   # has this changed a?
+a.sort!
+a   # has this changed a?
+
+a = [1, 2, 3, 4, 5]
+
+a[3] = 6
+a   # What is a now?
+
+a[7] = 7
+a   # What else has been added?
+
+a << 9  # This one's important - you'll see it a lot
+
+{% endhighlight %}
+{% endexercise %}

_sessions/c3s3/2_array_summary.md

@@ -0,0 +1,32 @@
+---
+title: Exercise summary
+---
+
+Here are some things you learnt in the last exercise:
+
+### Accessing elements
+
+* Arrays start from 0, so that the first elements is `a[0]`
+* Arrays also allow indexing from the back, giving the last element as `a[-1]`
+* If try to access beyond the end of the array it gives `nil` (instead of an error in other languages)
+* You can access multiple elements by specifying a range, e.g. `a[1..-1]` is everything but the first element
+
+### Array methods
+
+Arrays have many useful (and largely self-explanatory) methods, including:
+
+* `empty?` - does the array have any elements, or is it the empty array `[]`
+* `length`
+* `include?(x)` - is `x` in the array
+* `reverse`, `reverse!` - as with strings the `!` permanenty changes the array
+
+### Adding to an array
+
+* You can add to an array by setting a given element explicitly `a[5] = 6`
+* If the array isn't long enough the gaps are filled with `nil`:
+
+		a = [1, 2]
+		a[6] = 5
+		a #=> [1, 2, nil, nil, nil, nil, 5]
+
+* You can also add to the end of an array by doing `a << 5`. This is very 'rubyish' and you'll see it a lot.

_sessions/c3s3/3_iteration.md

@@ -0,0 +1,54 @@
+---
+title: Iteration
+---
+
+Most programming language have some way of looping, or iterating, over a range of values.
+
+Ruby's approach to this is slightly unusual - instead of you taking elements from the array one-by-one, the ruby array *gives* the elements to you one-by-one. This might seem like a small distinction to make, but it has a significant effect on the feel of the ruby language and how you think about coding with it.
+
+The way you get an array to give you its elements is by calling its `each` method:
+
+{% highlight ruby %}
+array = [1, 2, 3, 4, 5]
+sum   = 0
+
+array.each do |n|
+  sum = sum + n
+end
+
+sum #=> 15
+{% endhighlight %}
+
+The `each` method accepts a **block** - in the example above, this is everything between `do ... end`.
+
+* The `each` method sends the elements of the array one-by-one to the block.
+* When the element arrives it is assigned to the variable `n`.
+* The code on the inside of the block is then run.
+
+In the example above, each element is added to the `sum`. The example shows one method that you can use to sum the values in an array.
+
+Below is another example, which iterates over the elements of an array, separating them into one of two lists:
+
+{% highlight ruby %}
+all_words   = ['hello', 'how', 'are', 'you', 'today']
+long_words  = []
+short_words = []
+
+all_words.each do |word|
+  if word.length >= 5
+    long_words  << word
+  else
+    short_words << word
+  end
+end
+
+long_words  #=> ['hello', 'today']
+short_words #=> ['how', 'are', 'you']
+{% endhighlight %}
+
+<small>Please note: the summing and categorising examples above can be made much neater with the use of the array methods `inject` and `select`. We'll leave that for another day though ...</small>
+
+{% exercise %}
+Take another look through the code examples above. Check you really understand how they work. Try them out in `irb`, to check they work as advertised!
+{% endexercise %}
+

_sessions/c3s3/4_displaying_lists.md

@@ -0,0 +1,55 @@
+---
+title: Lists of data
+---
+
+So far we have only inserted single values and words into an already existing `erb` template. We will now look at using ruby to generate more of the template dynamically.
+
+Suppose you have a ruby array that you want to turn into an html list:
+
+{%highlight ruby%}
+# in app.rb
+
+get '/fruit' do
+  @fruits = ["Bananas", "Apples", "Raspberries"]
+  erb :fruits_view
+end
+{% endhighlight %}
+
+We can do this by using the `@fruits` array's `each` method to iterate over the elements and put them into the page one-by-one.
+
+{% highlight html %}
+<!-- in views/fruits_view.erb -->
+<ul>
+  <% @fruits.each do |fruit| %>
+    <li><%= fruit %></li>
+  <% end %>
+</ul>
+{% endhighlight %}
+
+You might notice that we've used a different type of erb tag for the `do ... end` block: `<% %>` instead of `<%= %>`. This is really important:
+
+* You need to use `<%= %>` if you want the result of executing that line of ruby to be added to the page.
+* You need to use `<% %>` if you don't want the result of executing that line of ruby to be added to the page.
+
+Here, the bits we want adding are the elements of the array, so only they have the `<%= %>` tags. The code will cause the following html to be generated:
+
+{% highlight html %}
+<ul>
+  <li>Bananas</li>
+  <li>Apples</li>
+  <li>Raspberries</li>
+</ul>
+{% endhighlight %}
+
+You can also use the same technique to generate tables and other html (lists of divs etc.).
+
+{% exercise %}
+1. **Fork, then clone** the code for this exercise [https://github.com/code61/sinatra_c3s3](https://github.com/code61/sinatra_c3s3).
+2. Add the code to the body of `todo.erb`, so that the `@todos` display as an ordered list.
+3. Add, commit and push your code to Github.
+3. Add the code to the body of `schedule.erb`, so that the items in the `@schedule` display as rows in a table. Note that `@schedule` is an *array of arrays* - you'll need to iterate over the first array, and within the loop use the normal ways of accessing elements of an array pull out the items.
+3. Add, commit and push your code to Github.
+4. Take a look at the `get '/rsvps'` block. Try the `CSV.read` bit in irb, to see what it does. Have a go at writing the code to categorise rsvps into acceptances/rejections and count them.
+5. Update the `rsvps.erb` view, so that the right information is displayed.
+3. Add, commit and push your code to Github.
+{% endexercise %}

_sessions/c3s3/5_sinatra_static.md

@@ -0,0 +1,31 @@
+---
+title: Sinatra static assets
+---
+
+Last week we linked Twitter Bootstrap into your view templates, by linking to the online hosted version `<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">`. What if we want to link to our own files?
+
+When we were building static sites, this was simple: we just created a `main.css` file in our site folder, and linked to it. The problem is that **a sinatra site folder is not like a static site folder**. We've already seen this: `app.rb` controls the url structure, not the folders in the app folder. (Just try going to '/app.rb' or '/views/index.erb'). Because of this, just dropping a `main.css` into the sinatra folder and trying to link to it won't work.
+
+Thankfully sinatra has a solution to this problem: if you create a folder called `public`, any files you put in there will be available from the root url. For example, if I have a file `public/main.css`, I can then link to this from my template files using `<link rel="stylesheet" href="/main.css">`. The two important things to note here are:
+
+1. I'm using a root-relative link (starting with a `/`). If you don't do this, you'll have problems if you ever call that template from a different url route.
+2. I'm linking directly to `main.css`, **not** to `public/main.css`.
+
+<div class="panel panel-primary">
+  <div class="panel-heading">
+    <h3 class="panel-title">Sinatra conventions</h3>
+  </div>
+  <div class='panel-body'>
+   <ol>
+      <li>Files inside the <code>public</code> folder will be served at the root of the site. This is where you should put your own stylesheets/images etc.</li>
+      <li>You call a template with the line <code>erb :template_name</code>.</li>
+      <li>For this to work, you will need a template called <code>template_name.erb</code> in the <code>views</code> folder.</li>
+      <li>Instance variables (ones that start with <code>@</code>) will be shared with the template.</li>
+      <li>You use these shared instance variables in the template by putting them inside an erb tag: <code>&lt;%= @my_variable &gt;</code> </li>
+    </ol> 
+  </div>
+</div>
+
+{% exercise %}
+1. Link the bootstrap stylesheet you'll find in `public/dist/css/bootstrap.css` into the `head` of `todo.erb` and `schedule.erb`.
+{% endexercise %}

_sessions/c3s3/6_layout_files.md

@@ -0,0 +1,134 @@
+---
+title: Sinatra layouts
+---
+
+One of the most important principles in software engineering is to stay [DRY](http://en.wikipedia.org/wiki/Don't_repeat_yourself): **don't repeat yourself**.
+
+The basic idea is that you don't want to be copying and pasting the same code into multiple places. If you're doing this, you're making a lot of work for yourself should you ever decide to change that code.
+
+One way of staying DRY that we'll meet soon is writing functions: if there's a task that you do repeatedly, write a function to put the logic for that task in one place and then call the function when you need to do the task.
+
+Another way, that we'll be looking at today, is in the form of layouts.
+
+### The Problem
+
+In the exercise today, you've been using a lot of erb view templates. You have 4 different templates, which all share the same basic outline:
+
+{% highlight html %}
+<!-- in views/index.erb -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Event Manager 2.0</title>
+</head>
+<body>
+
+  <h1>Picture Unveiling Evening - Event Managment</h1>
+
+  <ul>
+    <li><a href='/todos'>Todo list</a></li>
+    <li><a href='/schedule'>Event schedule</a></li>
+    <li><a href='/rsvps'>RSVPs</a></li>
+  </ul>
+
+</body>
+</html>
+{% endhighlight %}
+
+{% highlight html %}
+<!-- in views/todo.erb -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Event Manager 2.0</title>
+</head>
+<body>
+  <h1>Todo list</h1>
+
+  <ul>
+    <% @todos.each do |todo| %>
+      <li><%= todo %></li>
+    <% end %>
+  </ul>
+
+</body>
+</html>
+{% endhighlight %}
+
+These files are almost the same - a lot of copy and paste has gone on.
+
+### The solution
+
+Sinatra gets round this problem by allowing you to have a `layout.erb` file in your `views` folder:
+
+{% highlight html %}
+<!-- views/layout.erb -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Event Manager 2.0</title>
+</head>
+<body>
+
+  <%= yield %>
+
+</body>
+</html>
+{% endhighlight %}
+
+You can then write only the bits that change in the other two views:
+
+{% highlight html %}
+<!-- in views/index.erb -->
+<h1>Picture Unveiling Evening - Event Managment</h1>
+
+<ul>
+  <li><a href='/todos'>Todo list</a></li>
+  <li><a href='/schedule'>Event schedule</a></li>
+  <li><a href='/rsvps'>RSVPs</a></li>
+</ul>
+{% endhighlight %}
+
+{% highlight html %}
+<!-- in views/todo.erb -->
+<h1>Todo list</h1>
+
+<ul>
+  <% @todos.each do |todo| %>
+    <li><%= todo %></li>
+  <% end %>
+</ul>
+{% endhighlight %}
+
+Sinatra knows that if you have a file called `layout.erb` it should use that as a layout. If you call `erb :index`:
+
+* It takes the `layout.erb` file.
+* It finds the bit where it says `<%= yield %>`.
+* It inserts `index.erb` at that point.
+
+You can find more about Sinatra layouts on [the internet](http://lmgtfy.com/?q=sinatra+layouts).
+
+
+<div class="panel panel-primary">
+  <div class="panel-heading">
+    <h3 class="panel-title">Sinatra conventions</h3>
+  </div>
+  <div class='panel-body'>
+   <ol>
+      <li>If you have a file <code>views/layout.erb</code> Sinatra will treat it as a layout file: whenever it renders another template, it will try and insert the output into the <code>&lt;%= yield %&gt;</code> part of the layout file.</li>
+      <li>Files inside the <code>public</code> folder will be served at the root of the site. This is where you should put your own stylesheets/images etc.</li>
+      <li>You call a template with the line <code>erb :template_name</code>.</li>
+      <li>For this to work, you will need a template called <code>template_name.erb</code> in the <code>views</code> folder.</li>
+      <li>Instance variables (ones that start with <code>@</code>) will be shared with the template.</li>
+      <li>You use these shared instance variables in the template by putting them inside an erb tag: <code>&lt;%= @my_variable %&gt;</code> </li>
+    </ol> 
+  </div>
+</div>
+
+{% exercise %}
+*Refactor* your views:
+
+1. Create a layout file, containing the shared material from each view.
+2. Remove the shared material from each view.
+3. Check that the screens still look the same!
+{% endexercise %}

_sessions/c3s3/7_homework.md

@@ -0,0 +1,9 @@
+---
+title: Homework
+---
+
+
+{% exercise %}
+1. Finish the final exercise from class. If you have time, try and make the app look a bit nicer and practice deploying to heroku.
+2. Do the [Codecademy Ruby track](http://www.codecademy.com/tracks/ruby) Sections 5 and 6.
+{% endexercise %}

_sessions/c3s3/info.yml

@@ -0,0 +1,2 @@
+title: Web Programming with Ruby 3
+strapline: Arrays