269 |
281 |
282 |
283 | ### String interpolation
284 |
285 | We often need to build a string out of other strings and bits of Ruby. In
286 | Ruby we can do this with "string interpolation".
287 |
288 | Within the string we use the interpolation marker `#{}`. Inside those
289 | brackets we can put any variables or Ruby code which will be evaluated,
290 | converted to a string, and output in that spot of the outer string.
291 |
292 | ```
293 | irb(main):019:0> "The dog #{name} is #{age_human_years} human years old, which is #{age_dog_years} in dog years."
294 | => "The dog Fido is 4 human years old, which is 28 in dog years."
295 | ```
296 |
297 | > Note: on a Mac you can enter the `#` key with option (`⌥`) + 3
298 |
299 | #### Task 4: Use string interpolation
300 |
301 | Using string interpolation in `irb`, create a string with the text:
302 |
303 | > "The answer to life, the universe and everything is ..."
304 |
305 | Where `...` is the value of the `answer` variable you set in Task 3.
306 |
307 | Answer
270 | 271 | ``` 272 | irb(main):020:0> answer = 7 * 6 273 | => 42 274 | irb(main):021:0> answer * 10 275 | => 420 276 | irb(main):022:0> answer 277 | => 42 278 | ``` 279 | 280 |
308 |
318 |
319 |
320 | ### Calling methods
321 |
322 | While programming, we often find ourselves doing the same thing over and over again. It would be nice if we could give a particular task a name, and run it by calling its name.
323 |
324 | In Ruby we do this with *methods*, and there are lots of them already built
325 | into the language. One example is `rand`, which generates a random number:
326 |
327 | ```
328 | irb(main):025:0> rand
329 | => 0.11487911496307956
330 | ```
331 |
332 | If we want to generate a random number less than a particular number, we can
333 | provide our maximum to `rand` as an "argument":
334 |
335 | ```
336 | irb(main):026:0> rand(100)
337 | => 7
338 | irb(main):027:0> rand(100)
339 | => 43
340 | ```
341 |
342 | You can also call some methods on things by using a `.` like this:
343 |
344 | ```
345 | irb(main):028:0> "make me louder".upcase
346 | => "MAKE ME LOUDER"
347 | irb(main):029:0> "em esrever".reverse
348 | => "reverse me"
349 | ```
350 |
351 | #### Task 5: Decode a secret message
352 |
353 | Decode this top secret, encrypted message:
354 |
355 | ```
356 | !gniog peeK !llew repus gniod er'uoY
357 | ```
358 |
359 | (Hint: it's not Welsh - it's been reversed)
360 |
361 | Answer
309 | 310 | ``` 311 | irb(main):023:0> answer = 7 * 6 312 | => 42 313 | irb(main):024:0> "The answer to life, the universe and everything is #{answer}" 314 | => "The answer to life, the universe and everything is 42" 315 | ``` 316 | 317 |
362 |
370 |
--------------------------------------------------------------------------------
/source/lesson-3-writing-ruby-scripts.html.md.erb:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Lesson 3: Writing Ruby Scripts"
3 | weight: 5
4 | ---
5 |
6 | # Lesson 3: Writing Ruby Scripts
7 |
8 | ## Introduction
9 |
10 | ### Objectives
11 |
12 | In this tutorial we are going to look at:
13 |
14 | * getting user input
15 | * doing things multiple times using loops
16 | * building simple programs
17 | * using `require` to access other Ruby modules
18 | * using Ruby's `Date` type
19 | * using `File` to read files in Ruby
20 |
21 | ### Goal
22 |
23 | By the end of this tutorial you will have used what you learnt in lesson 2 to
24 | build a couple of small Ruby programs, including one like [this times tables game](https://repl.it/@RichardTowers/TimesTablesGame).
25 |
26 | ### Running a file with Ruby
27 |
28 | We've been having fun with `irb` in Lesson 2 - it's a great tool for exploring and
29 | learning about Ruby. Ideally though we'd like to be able to save our programs
30 | for later, and run them whenever we want.
31 |
32 | To do this, we can write a Ruby script in a text editor (like you did with HTML in
33 | lesson 1), then run the script from the command line with `ruby name-of-your-script.rb`.
34 |
35 | Ruby files end with the extension `.rb`.
36 |
37 | #### Task 1: My first Ruby script
38 |
39 | * Exit `irb` by running the `exit` command
40 | * Create a file in your text editor (we recommended Visual Studio Code in lesson 1) called `hello.rb`
41 | * Confirm you can see the file in the command line by running `ls`
42 | * From the command line, use Ruby to run your file by typing `ruby hello.rb` and pressing enter
43 | * You should see nothing returned (because `hello.rb` is empty at the moment)
44 |
45 | ### Interacting with the user
46 |
47 | Now that we're running our Ruby from a file, we can't rely on `irb` to handle
48 | all of our user input and output. When we want to show something to the user
49 | we need to explicitly say so, and likewise, when we want some input from the
50 | user we have to explicitly ask for it.
51 |
52 | Ruby provides a `puts` method (put string) and a `gets` method (get
53 | string).
54 |
55 | * `puts` - prints a string to the command line
56 | * `gets` - waits for the user to type one line of text into the command line,
57 | when they press enter, returns whatever the user typed (so you can store it
58 | in a variable)
59 |
60 | #### Task 2: Hello world!
61 |
62 | Add the following to your `hello.rb` file, save it, and run it with `ruby hello.rb`:
63 |
64 | ```ruby
65 | puts("What is your name?")
66 | name = gets
67 | puts("Hello #{name}")
68 | ```
69 |
70 | We can use `puts` and `gets` to create a very simple text based user interface.
71 |
72 | #### Getting things wrong in Ruby scripts
73 |
74 | Just like `irb`, if you get something wrong in a Ruby script Ruby will tell
75 | you by printing an error message. Nothing to worry about - programmers make
76 | mistakes all the time.
77 |
78 | Imagine a script called `oops.rb` containing:
79 |
80 | ```ruby
81 | puts("time for a deliberate error")
82 | oops("this won't work")
83 | ```
84 |
85 | When you run this with `ruby oops.rb` you'll get an error like this:
86 |
87 | ```
88 | time for a deliberate error
89 | oops.rb:2:in `Answer
363 | 364 | ``` 365 | irb(main):030:0> "!gniog peeK !llew repus gniod er'uoY".reverse 366 | => "You're doing super well! Keep going!" 367 | ``` 368 | 369 |
104 |
114 |
115 | #### Task 4: Create a script that multiplies two numbers
116 |
117 | Create a new script called `multiply.rb` in your text editor.
118 |
119 | Note that `gets` gets the user input as a `string`. In Ruby strings and
120 | numbers are *not the same* (`"42"` is not equal to `42`).
121 |
122 | When you need to ask the user for a number you must ask them for a string and
123 | then convert it into a number using `.to_i` like so:
124 |
125 | ```ruby
126 | user_input_as_string = gets
127 | user_input_as_number = user_input_as_string.to_i
128 | ```
129 |
130 | The `i` in `.to_i` stands for "integer" which is fancy way of saying
131 | "whole number".
132 |
133 | Use `gets`, `.to_i` and `puts` to get two strings from the user,
134 | converts them to numbers, multiplies them together and prints the result.
135 |
136 | Answer
105 | 106 | ```ruby 107 | puts("Enter a string to reverse: ") 108 | input = gets 109 | puts("Your string reversed is: ") 110 | puts(input.reverse) 111 | ``` 112 | 113 |
137 |
150 |
151 |
152 |
153 | ### Defining methods
154 |
155 | The Ruby authors didn't manage to write every method we'll ever need into
156 | Ruby itself, so sometimes we need to define our own.
157 |
158 | This means we can write abstractions that describe what we're doing and we
159 | don't have to repeat ourselves.
160 |
161 | Earlier, we had this line of code:
162 |
163 | ```ruby
164 | age_dog_years = age_human_years * 7
165 | ```
166 |
167 | This is okay, but it's a little surprising to see that `7` in there - what's
168 | it doing? It would be nicer if we could write:
169 |
170 | ```ruby
171 | age_dog_years = convert_to_dog_years(age_human_years)
172 | ```
173 |
174 | and hide away the grubby implementation details inside a method.
175 |
176 | In Ruby a method definition looks like this:
177 |
178 | ```ruby
179 | def method_name(argument)
180 | result = "some value"
181 | return result
182 | end
183 | ```
184 |
185 | You can name a method anything you could name a variable (they're
186 | `snake_cased` by convention too). They can have as many lines of code inside
187 | them as you want.
188 |
189 | #### Task 5: Create a script that converts human years to dog years
190 |
191 | Create a script called `dog-years.rb`. Use `puts`, `gets` and `.to_i`
192 | to ask the user how old their dog is.
193 |
194 | Assuming that dogs age faster than humans, and that there are seven "dog
195 | years" to one "human year", define a method which:
196 |
197 | * takes an age in human years as a argument
198 | * multiplies the age in human years by seven
199 | * returns the result of the multiplication
200 |
201 | Call the method in your script, and print the result.
202 |
203 | Answer
138 | 139 | ```ruby 140 | puts("Enter the first number:") 141 | x_string = gets 142 | x_number = x_string.to_i 143 | puts("Enter the second number:") 144 | y_string = gets 145 | y_number = y_string.to_i 146 | puts("#{x_number} * #{y_number} = #{x_number * y_number}") 147 | ``` 148 | 149 |
204 |
220 |
221 | ### Repeating things
222 |
223 | Answer
205 | 206 | ```ruby 207 | def convert_to_dog_years(age) 208 | return age * 7 209 | end 210 | 211 | puts("How old is your dog in human years?") 212 | age_human_years_string = gets 213 | age_human_years_number = age_human_years_string.to_i 214 | 215 | age_dog_years = convert_to_dog_years(age_human_years_number) 216 | puts("Your dog is #{age_dog_years} in dog years") 217 | ``` 218 | 219 |
224 |
225 | So far, each line of code we've written has run exactly once (each time a
226 | script runs). Ruby goes through each line in the script, runs it, then moves
227 | on to the next line. When it reaches the end of the file, the script exits.
228 |
229 | One of the things that computers are really good at is repeating themselves.
230 | In Ruby we can use methods like `loop` and `.times` to make the computer
231 | repeat things.
232 |
233 | You might want to try some of the following out in `irb` to get a feel for
234 | how they work. (If you get stuck in a loop in `irb` you can escape it by
235 | pressing `ctrl + c`):
236 |
237 | ```ruby
238 | 5.times do
239 | puts("Odelay!")
240 | end
241 | ```
242 |
243 | ```ruby
244 | 10.times do |i|
245 | puts("#{10 - i} green bottles, hanging on the wall,")
246 | puts("#{10 - i} green bottles, hanging on the wall,")
247 | puts("And if one green bottle should accidentally fall,")
248 | puts("There'll be #{9 - i} green bottles hanging on the wall.")
249 | puts
250 | end
251 | ```
252 |
253 | ```ruby
254 | loop do
255 | puts("What's your name?")
256 | name = gets
257 | puts("Hello #{name} (to exit this infinite loop, press ctrl+c)")
258 | end
259 | ```
260 |
261 | The bit between the `do` and the `end` is called a block, which is run by the
262 | method repeatedly. Blocks can take parameters after the `do`, which are
263 | wrapped in vertical pipes like `|i|`.
264 |
265 | #### Task 6: Update one of your scripts to work in a loop
266 |
267 | Earlier, you wrote a few scripts that ask the user for some input, do
268 | something with the input then print the result and exit. Change one of these
269 | scripts (e.g. `multiply.rb`) so they do this in an infinite loop (using `loop`).
270 |
271 | If you get stuck in an infinite loop (a loop which never ends) in the command
272 | line you can break out by pressing `ctrl + c`.
273 |
274 |
275 |
290 |
291 | ### Conditionals
292 |
293 | One last thing to learn is how to get the computer to do something based on
294 | some condition. To do this, we can use the `if` statement, like so:
295 |
296 | ```ruby
297 | puts("What is your name?")
298 | name = gets
299 | if name.include?("r")
300 | puts("Hi #{name} - you sound like a pretty cool person")
301 | else
302 | puts("Hi nerd")
303 | end
304 | ```
305 |
306 | An `if` statement takes a "condition" (something that evaluates
307 | to `true` or `false`). You can use things like `==` (equals), `<` (less than),
308 | or methods like `.include?` (like we did in the example).
309 |
310 | Note that we use `==` instead of `=` to compare two values. This is because
311 | `==` tests if two values are equal, whereas `=` assigns the value on the right
312 | to the variable on the left.
313 |
314 | If the condition is true Ruby will run the lines of code between
315 | the `if` and the `else`, otherwise Ruby will run the lines of code between
316 | the `else` and the `end`.
317 |
318 | ### Tying it all together
319 |
320 | Phew! That was a lot to learn. To recap, we've learned:
321 |
322 | * how to use `irb`
323 | * how to use numbers
324 | * what "strings" are and how to use them
325 | * how to use variables to name things
326 | * how to "interpolate" strings
327 | * how to call methods
328 | * how to run Ruby from a file
329 | * how to interact with a user
330 | * how to define methods
331 | * how to repeat things
332 | * how to do things conditionally
333 |
334 | If you've understood all of that, well done! You now know the basics of
335 | programming. There's a lot more to learn, but it all builds on these
336 | fundamentals.
337 |
338 | To tie everything you've learned together, here's one final "hard" task.
339 |
340 | #### Task 7: Build a times tables game
341 |
342 | Right at the beginning, we said you'd build [this times tables game](https://repl.it/@RichardTowers/TimesTablesGame).
343 |
344 | To do this you'll need to use everything you've just learned. It's a pretty
345 | difficult problem for a beginner, so if you get stuck on something don't be
346 | afraid to ask for help.
347 |
348 | Here's a rough plan of how to implement this:
349 |
350 | * create a `score` variable to keep track of the users score
351 | * in a loop that happens 4 times
352 | * generate two numbers between 1 and 12 using `rand` and assign them to variables
353 | * print a message to the user asking them to multiply the numbers together
354 | * get the user's answer and covert it to a number (using `.to_i`)
355 | * compare the user's answer to the answer Ruby thinks is correct
356 | * show the user a message saying whether they're correct (and add one to their score)
357 | * if the user scored 4 then show them a message saying they got them all right
358 | * otherwise, show the user a message commiserating them for their failure
359 |
360 | For bonus points, consider whether you could define a method to do some of
361 | the work to make the loop easier to read.
362 |
363 | Answer
276 | 277 | ```ruby 278 | loop do 279 | puts("Enter the first number:") 280 | x_string = gets 281 | x_number = x_string.to_i 282 | puts("Enter the second number:") 283 | y_string = gets 284 | y_number = y_string.to_i 285 | puts("#{x_number} * #{y_number} = #{x_number * y_number}") 286 | end 287 | ``` 288 | 289 |
364 |
410 |
411 | ### Using `require` to access other Ruby modules
412 |
413 | In lesson 2 we used a number of built-in Ruby methods, like `rand` (to get
414 | a random number), `.reverse` (to reverse a string), `gets` and
415 | `puts` (to read and write strings from the command line).
416 |
417 | These methods are so useful that they live in the core of Ruby, so you can
418 | always call them.
419 |
420 | Some bits of Ruby are used less often, and these are not included by default.
421 | To use these other bits you need to `require` them. For example, the `"date"`
422 | module lets you work with dates and times, but it isn't included by default.
423 |
424 | Running `require("date")` includes the date code so you can use it in your
425 | script. For example:
426 |
427 | ```
428 | irb(main):001:0> require("date")
429 | => true
430 | irb(main):002:0> Date.today
431 | => #Answer
365 | 366 | ```ruby 367 | def multiplication_challenge 368 | x = rand(12) + 1 369 | y = rand(12) + 1 370 | 371 | print("What is #{x} multiplied by #{y} ? ") 372 | user_input = gets 373 | user_input_as_a_number = user_input.to_i 374 | 375 | correct_answer = x * y 376 | if user_input_as_a_number == correct_answer 377 | puts(":) correct!") 378 | return true 379 | else 380 | puts(":( oops!") 381 | puts("The answer was #{correct_answer}") 382 | return false 383 | end 384 | end 385 | 386 | number_of_rounds = 4 387 | score = 0 388 | 389 | puts("Times tables challenge") 390 | puts("----------------------") 391 | puts 392 | puts("You will be asked #{number_of_rounds} questions.") 393 | puts("Press enter to start...") 394 | gets 395 | 396 | number_of_rounds.times do |i| 397 | if multiplication_challenge 398 | score = score + 1 399 | end 400 | end 401 | 402 | if score == number_of_rounds 403 | puts("You scored #{score}/#{number_of_rounds}. Well done!") 404 | else 405 | puts("You scored #{score}/#{number_of_rounds}. Better luck next time!") 406 | end 407 | ``` 408 | 409 |
479 |
487 |
488 | irb(main):003:0> birthday.strftime("%A")
489 | => "Wednesday"
490 | ```
491 |
492 |
493 |
494 | ### Using `File` to read files in Ruby
495 |
496 | Sometimes it's nice to be able to store things in files, and read these files
497 | using Ruby so we can do something with the contents. Ruby has a `File.read`
498 | method that lets us do this.
499 |
500 | `File.read` takes the path to the file as an argument, and returns the
501 | contents of the file as a string.
502 |
503 | ```
504 | irb(main):004:0> File.read("/Users/your-username/Desktop/lesson-1-html-and-css/index.html")
505 | => "\n...
506 | ```
507 |
508 | We can work with the contents using all the string methods (like
509 | `.reverse`) we've already seen.
510 |
511 | There are lots of other useful methods like `.size` (which returns how many
512 | characters there are in the string), and `.sub` (which takes two arguments,
513 | and substitutes the first occurence of the first string with the second).
514 |
515 | ```
516 | irb(main):005:0> "Cats are the best".sub("Cat", "Dog")
517 | => "Dogs are the best"
518 | irb(main):006:0> "Dogs are the best".size
519 | => 17
520 | ```
521 |
522 | #### Task 2: count the characters in a file
523 |
524 | We created a file in `lesson-1-html-and-css/index.html`. Use `File.read`
525 | and `.size` to work out how many characters there are in the file.
526 |
527 | > In Finder you can copy the path to a directory by right clicking, holding
528 | down the option key (`⌥`), and choosing *Copy "Directory" as Pathname*.
529 | Alternatively, you can drag the folder onto the terminal and it will type
530 | the path for you.
531 |
532 | Answer
480 | 481 | ``` 482 | irb(main):001:0> require("date") 483 | => true 484 | 485 | irb(main):002:0> birthday = Date.new(1988, 1, 20) 486 | => #
533 |
543 |
544 |
545 | ## Further reading
546 |
547 | If you learn best from _weird_ books then [_why's (poignant) guide](https://poignant.guide/)
548 | is excellent (see cartoon below). If you'd prefer something less silly, have a look at:
549 |
550 | * [Learn to Program](https://pine.fm/LearnToProgram/)
551 | * [Learn Ruby The Hard Way](https://learnrubythehardway.org/book/)
552 | * [Ruby Koans](http://rubykoans.com/)
553 |
554 | Which are all great.
555 |
556 | 
557 |
--------------------------------------------------------------------------------
/source/lesson-4-ruby-on-the-web.html.md.erb:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Lesson 4: Ruby on the Web"
3 | weight: 6
4 | ---
5 |
6 | # Lesson 4: Ruby on the Web
7 |
8 | ## Introduction
9 |
10 | ### Objectives
11 |
12 | In this tutorial we are going to look at:
13 |
14 | * what HTTP is and how it works
15 | * using Google Chrome's Developer tools to inspect HTTP requests
16 | * building a web server with Ruby
17 | * templating HTML
18 | * introducing web security
19 |
20 | ### Goal
21 |
22 | By the end of this tutorial you will have built an "Apply for a barking permit" webpage:
23 |
24 | Answer
534 | 535 | ``` 536 | irb(main):006:0> file = File.read("/Users/your-username/Desktop/lesson-1-html-and-css/index.html") 537 | => "\n... 538 | irb(main):007:0> file.size 539 | 1260 540 | ``` 541 | 542 |
25 |
26 |
27 | You'll have a basic understanding of how web applications work, and a good foundation to build on.
28 |
29 | ## Introduction to HTTP
30 |
31 | ### What is HTTP?
32 |
33 | HTTP stands for HyperText Transfer Protocol.
34 |
35 | HTTP describes the format of the communications between your web browser and
36 | a "web server" (which is just a kind of computer).
37 |
38 | Your browser sends HTTP requests and the server responds with HTTP responses.
39 |
40 | For example, when you visit `www.gov.uk` your browser will send a request a like this:
41 |
42 | ```http
43 | GET / HTTP/1.1
44 | Host: www.gov.uk
45 | ```
46 |
47 | And GOV.UK's server will respond with something like:
48 |
49 | ```
50 | HTTP/1.1 200 OK
51 | Date: Wed, 29 May 2019 12:08:17 GMT
52 | Content-Type: text/html; charset=UTF-8
53 | Content-Length: 32897
54 |
55 |
56 |
57 | ... snip ...
58 |
59 | ```
60 |
61 | In this case the response contains the HTML of the GOV.UK homepage.
62 |
63 | ### Viewing HTTP requests using browser developer tools
64 |
65 | Modern browsers come with built in tools that let you see what's happening
66 | under the hood. In Google Chrome on a Mac you can bring these up for any
67 | webpage by pressing Command + Option + I (`⌘ + ⌥ + I`).
68 |
69 | 
70 |
71 | The Network tab shows you the requests and responses your browser is sending and receiving.
72 |
73 | #### Task 3: Use the developer tools to look at an HTTP request
74 |
75 | Go to any website you like and use the developer tools to look at the first
76 | HTTP request it makes.
77 |
78 |
79 |
85 |
86 | ## Building web servers with Ruby
87 |
88 | ### What is a web server?
89 |
90 | A web server is a computer program that can understand HTTP requests and
91 | respond to them with HTTP responses.
92 |
93 | In lesson 1 we built a website which sent the same HTML back for every
94 | request. By getting Ruby involved in handling the request we can make our
95 | website dynamic (so the response is not always the same). We can also perform
96 | side effects in response to certain requests (like sending emails, or
97 | printing out physical barking permits).
98 |
99 | Ruby is a great language to get started with, because it has everything you
100 | need to build simple web servers built right in to the language.
101 |
102 | First of all, let's create some files for us to serve.
103 |
104 | #### Task 4: Create files and directories
105 |
106 | * Create a folder called `lesson-4-ruby-on-the-web` next to your other lesson folders.
107 | * Inside this folder, create another folder called `public`, and copy [the images folder from lesson 1](/lesson-1-html-and-css.html#element-image-img) inside.
108 |
109 | You should end up with a directory structure like:
110 |
111 | ```
112 | lesson-4-ruby-on-the-web
113 | └── public
114 | └── images
115 | ├── puppy-in-a-hat.jpg
116 | └── shiba-inu.jpg
117 | ```
118 |
119 | ### Hello WEBrick!
120 |
121 | Earlier we `require`'d `"date"` so we could do some things with dates which
122 | are not in the core ruby language. Similarly, we can require a thing called
123 | `"webrick"` which allows us to build HTTP servers.
124 |
125 | We can use WEBrick to create a new server by calling the
126 | `WEBrick::HTTPServer.new` method like this:
127 |
128 | ```ruby
129 | require("webrick")
130 | server = WEBrick::HTTPServer.new(Port: 8080, DocumentRoot: './public')
131 | ```
132 |
133 | This might look a bit confusing because it uses some bits of Ruby we haven't
134 | introduced yet (what are all these colons doing all of a sudden?). Do not
135 | worry about it - at some point you'll learn about modules, classes, and named
136 | arguments and it will all make sense.
137 |
138 | The `server` lets us respond to HTTP requests in any way we like. We can use
139 | the `.mount_proc` method to attach a block of Ruby code to a particular request like this:
140 |
141 | ```ruby
142 | server.mount_proc("/home") do |request, response|
143 | puts("Hello server!")
144 | response.body = "Hello browser!"
145 | end
146 | ```
147 |
148 | `.mount_proc` is a bit like `.times` from lesson 3:
149 |
150 | ```ruby
151 | 10.times do |i|
152 | puts("#{10 - i} green bottles, hanging on the wall,")
153 | # ...
154 | end
155 | ```
156 |
157 | only instead of running the block 10 times straight away, WEBrick will run
158 | the block every time a request is made to the `/home` path.
159 |
160 | The final thing we need to do to make the server work is start it, which we
161 | do by calling the `.start` method after we've made all our calls to
162 | `.mount_proc`:
163 |
164 | ```ruby
165 | server.start
166 | ```
167 |
168 | #### Task 5: Create a "hello world" server
169 |
170 | * Create a file inside the `lesson-4-ruby-on-the-web` folder called `hello-world-server.rb`
171 | * Copy / paste (or type) the following ruby into `hello-world-server.rb`
172 |
173 | ```ruby
174 | require("webrick")
175 | server = WEBrick::HTTPServer.new(Port: 8080, DocumentRoot: './public')
176 |
177 | server.mount_proc("/home") do |request, response|
178 | puts("Hello server!")
179 | response.body = "Hello browser!"
180 | end
181 |
182 | server.start
183 | ```
184 |
185 | * On the command line, change directory into `lesson-4-ruby-on-the-web` using `cd`
186 | * Run `hello-world-server.rb` from the command line with `ruby hello-world-server.rb`
187 | * Visit [http://localhost:8080/home](http://localhost:8080/home) in your browser
188 | * Reload the page a few times to see what happens
189 |
190 | Answer (screenshots)
80 | 81 |  82 |  83 | 84 |
191 |
217 |
218 | ### Serving HTML
219 |
220 | We usually want to respond with some HTML, not just "Hello browser!".
221 |
222 | To make the browser treat our response as HTML we need to set an HTTP header
223 | called `Content-Type` like this:
224 |
225 | ```ruby
226 | server.mount_proc("/home") do |request, response|
227 | response.content_type = "text/html; charset=utf-8"
228 | response.body = "Answer
192 | 193 | You should see a web page that says "Hello browser!" and you should see some lines on the command line like this: 194 | 195 | ``` 196 | [2019-05-29 21:38:46] INFO WEBrick 1.3.1 197 | [2019-05-29 21:38:46] INFO ruby 2.3.7 (2018-03-28) [universal.x86_64-darwin17] 198 | [2019-05-29 21:38:46] INFO WEBrick::HTTPServer#start: pid=86541 port=8080 199 | Hello server! 200 | ::1 - - [29/May/2019:21:38:58 BST] "GET / HTTP/1.1" 200 14 201 | - -> / 202 | Hello server! 203 | ::1 - - [29/May/2019:21:38:59 BST] "GET /favicon.ico HTTP/1.1" 200 14 204 | http://localhost:8080/ -> /favicon.ico 205 | Hello server! 206 | ::1 - - [29/May/2019:21:39:03 BST] "GET / HTTP/1.1" 200 14 207 | - -> / 208 | Hello server! 209 | ::1 - - [29/May/2019:21:39:03 BST] "GET /favicon.ico HTTP/1.1" 200 14 210 | http://localhost:8080/ -> /favicon.ico 211 | ``` 212 | 213 | Note that `puts("Hello server!")` still prints to the command line, and that 214 | the `response.body` is what we see in the browser. 215 | 216 |Hello browser!
" 229 | end 230 | ``` 231 | 232 | It can get difficult to maintain if we put all our HTML in ruby strings like 233 | we did in the example above. It would be much nicer if we could have our HTML 234 | in html files and our Ruby in ruby files. Fortunately, we can achieve this 235 | with `File.read`: 236 | 237 | 238 | ```ruby 239 | server.mount_proc("/home") do |request, response| 240 | response.content_type = "text/html; charset=utf-8" 241 | response.body = File.read("index.html") 242 | end 243 | ``` 244 | 245 | (This assumes there's a file called `index.html` in your command line's working directory) 246 | 247 | #### Task 6: Serve an HTML file with WEBRick 248 | 249 | * Copy `lesson-1-html-and-css/index.html` into `lesson-4-ruby-on-the-web` 250 | * Create a copy of `hello-world-server.rb` called `barking-permit-server.rb` 251 | * Using the example above, make the server respond with the text from `index.html` 252 | * Run the server with `ruby barking-permit-server.rb` and visit [http://localhost:8080/home](http://localhost:8080/home) to check it works 253 | * When you're done, stop the server with `CTRL + C` 254 | 255 |
256 |
270 | ### Responding to requests
271 |
272 | Our "Apply for a Barking Permit" page contains a form.
273 |
274 | Forms let the user provide the server with some input. When you submit the
275 | form you should see the URL update to have `?dog-name=Fido&dog-age=3` at the
276 | end.
277 |
278 | What's happening is the browser is making a second HTTP request to the
279 | server, but this time it's passing the user input in the URL (the bits after
280 | the question mark are called query parameters).
281 |
282 | We can access query parameters inside our WEBrick block using
283 | `request.query["key"]` (note: square brackets, not round brackets)
284 |
285 | ```ruby
286 | server.mount_proc("/home") do |request, response|
287 |
288 | dog_name = request.query["dog-name"]
289 | dog_age = request.query["dog-age"]
290 |
291 | puts("The dog #{dog_name} is #{dog_age} years old")
292 |
293 | response.body = File.read("index.html")
294 | end
295 | ```
296 |
297 | #### Task 7: different responses depending on the query
298 |
299 | * Update `barking-permit-server.rb` to read user input with `request.query[]`
300 | * Using `if request.query["dog-name"]` set the value of `response.body` to be
301 | "The dog Fido is 3 years old" if the user provided a name, or
302 | `File.read(...)` if not
303 | * Run the server with `ruby barking-permit-server.rb`, visit [http://localhost:8080/home](http://localhost:8080/home) and submit the form
304 | * When you're done, stop the server with `CTRL + C`
305 |
306 | Answer
257 | 258 | ```ruby 259 | require("webrick") 260 | server = WEBrick::HTTPServer.new(Port: 8080, DocumentRoot: './public') 261 | 262 | server.mount_proc("/home") do |request, response| 263 | response.body = File.read("index.html") 264 | end 265 | 266 | server.start 267 | ``` 268 | 269 |
307 |
328 |
329 | ### Templating HTML
330 |
331 | We've learned how to get the user's form input on the server, and change our
332 | response depending on the input.
333 |
334 | Our response to the user should be HTML as well though. If we're reading the
335 | HTML response from a file how do we change the contents based on the user's
336 | input?
337 |
338 | Templating lets us take a file and substitute placeholders with values of our
339 | choice. There are lots of fancy templating languages out there, but for us
340 | Ruby's `.sub` method will be good enough.
341 |
342 | Imagine we had some HTML in a file called `fruits.html`:
343 |
344 | ```html
345 | Answer
308 | 309 | ```ruby 310 | require("webrick") 311 | server = WEBrick::HTTPServer.new(Port: 8080, DocumentRoot: './public') 312 | 313 | server.mount_proc("/home") do |request, response| 314 | dog_name = request.query["dog-name"] 315 | dog_age = request.query["dog-age"] 316 | 317 | if dog_name 318 | response.body = "The dog #{dog_name} is #{dog_age} years old" 319 | else 320 | response.body = File.read("index.html") 321 | end 322 | end 323 | 324 | server.start 325 | ``` 326 | 327 |Favourite Fruit
346 | 347 |My favourite fruit is FAVOURITE_FRUIT_NAME. I like it the best because it is FAVOURITE_FRUIT_REASON.
348 | ``` 349 | 350 | We could load this file up, and then substitute the placeholders like this: 351 | 352 | ```ruby 353 | File.read("fruits.html") 354 | .sub("FAVOURITE_FRUIT_NAME", "Banana") 355 | .sub("FAVOURITE_FRUIT_REASON", "easy to peel") 356 | ``` 357 | 358 | Which would return: 359 | 360 | ```html 361 |Favourite Fruit
362 | 363 |My favourite fruit is Banana. I like it the best because it is easy to peel.
364 | ``` 365 | 366 | #### Task 8: Template barking permit 367 | 368 | Create a file called `barking-permit-template.html` in `lesson-4-ruby-on-the-web`. 369 | 370 | Add the following HTML to the file (it's fine to copy-paste this): 371 | 372 |
373 | Apply for a Barking Permit
380 |
381 |
392 |
393 |
394 |
422 |
423 | Update `barking-permit-server.rb` so that when `request.query["dog-name"]` is
424 | set, `response.body` is set to `File.read("barking-permit-template.html")`.
425 |
426 | Use `.sub` to replace `DOG_NAME` with `request.query["dog-name"]` and a
427 | second `.sub` to replace `DOG_AGE_HUMAN_YEARS` with `request.query["dog-age"]`.
428 |
429 | Run the server with `ruby barking-permit-server.rb`, visit [http://localhost:8080/home](http://localhost:8080/home) and submit the form.
430 |
431 | When you're done, stop the server with `CTRL + C`.
432 |
433 | HTML for `barking-permit-template.html`
374 | 375 | ```html 376 | 377 | 378 | 379 |
395 |
417 |
418 |
419 | ```
420 |
421 | Apply for a Barking Permit
396 |
397 |
416 |
398 |
415 |
399 |
406 | 400 | Application complete 401 |
402 |
403 | Your permit is available below
404 |
405 |
407 |
408 |
413 |
414 | | Barking Permit | ||
|---|---|---|
 | ||
| Name | DOG_NAME | |
| Age (human years) | DOG_AGE_HUMAN_YEARS | |
434 |
457 |
458 | ### Finishing off the Barking Permit
459 |
460 | Following Task 8, our Barking Permit has:
461 |
462 | * Name
463 | * Age (human years)
464 |
465 | We could use Ruby to add some more rows to the permit and make it a bit more
466 | useful. For example: age in Dog Years (from lesson 3) and how long the permit
467 | is valid for.
468 |
469 | #### Task 9: Add rows to the Barking Permit
470 |
471 | * Add rows (`Answer
435 | 436 | ```ruby 437 | require("webrick") 438 | server = WEBrick::HTTPServer.new(Port: 8080, DocumentRoot: './public') 439 | 440 | server.mount_proc("/home") do |request, response| 441 | dog_name = request.query["dog-name"] 442 | dog_age = request.query["dog-age"] 443 | 444 | if dog_name 445 | response.body = File.read("barking-permit-template.html") 446 | .sub("DOG_NAME", dog_name) 447 | .sub("DOG_AGE_HUMAN_YEARS", dog_age) 448 | else 449 | response.body = File.read("index.html") 450 | end 451 | end 452 | 453 | server.start 454 | ``` 455 | 456 |
484 |
516 |
517 | ### Warning: security!
518 |
519 | We've deliberately cut some corners by using `.sub` for our templating
520 | which would cause security problems in a production application.
521 |
522 | In particular, mixing user input and HTML can leave us vulnerable to a thing
523 | called [Cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting).
524 |
525 | You do not need to worry about this for the purposes of this lesson, but if
526 | you're building a production website make sure to talk to a developer to
527 | check you're following good security practices.
528 |
529 | Frameworks like [Ruby on Rails](https://rubyonrails.org/) and
530 | [Sinatra](http://sinatrarb.com/) help you avoid making security mistakes like
531 | this.
532 |
533 | ## Congratulations!
534 |
535 | If you've made it this far, give yourself a massive pat on the back! These
536 | three lessons have been a whirlwind introduction to the world of programming
537 | on the web. Do not worry if it things still seem confusing - programming is a
538 | skill that takes time to learn.
539 |
540 | Programming is amazingly useful now that computers are such a big part of our
541 | lives, but it can also be great fun. Hopefully this is just the start of your
542 | learning journey!
543 |
544 | ## Further reading
545 |
546 | * [http://tutorials.codebar.io/](http://tutorials.codebar.io/)
547 | * [http://railsgirls.com/](http://railsgirls.com/)
548 |
--------------------------------------------------------------------------------
/source/lesson-1-html-and-css.html.md.erb:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Lesson 1: HTML and CSS"
3 | weight: 3
4 | ---
5 |
6 | # Lesson 1: HTML and CSS
7 |
8 | ## Introduction
9 |
10 | ### Objectives
11 |
12 | In this tutorial we are going to look at:
13 |
14 | * what is HTML?
15 | * what is an element?
16 | * webpage structure
17 | * fundamental HTML elements
18 | * applying styles with classes and CSS
19 |
20 | ### Goal
21 |
22 | By the end of this tutorial you will have built an "Apply for a barking permit" webpage:
23 |
24 | Answer
485 | 486 | ```ruby 487 | require("webrick") 488 | require("date") 489 | 490 | def convert_to_dog_years(age_human_years) 491 | return age_human_years * 7 492 | end 493 | 494 | server = WEBrick::HTTPServer.new(Port: 8080, DocumentRoot: './public') 495 | 496 | server.mount_proc("/home") do |request, response| 497 | dog_name = request.query["dog-name"] 498 | dog_age = request.query["dog-age"] 499 | 500 | if dog_name 501 | response.body = File.read("barking-permit-template.html") 502 | .sub("DOG_NAME", dog_name) 503 | .sub("DOG_AGE_HUMAN_YEARS", dog_age) 504 | .sub("DOG_AGE_DOG_YEARS", convert_to_dog_years(dog_age.to_i).to_s) 505 | .sub("PERMIT_ISSUED_ON", Date.today.strftime("%d/%m/%Y")) 506 | .sub("PERMIT_VALID_UNTIL", (Date.today + 1000).strftime("%d/%m/%Y")) 507 | else 508 | response.body = File.read("index.html") 509 | end 510 | end 511 | 512 | server.start 513 | ``` 514 | 515 |
25 | 
26 |
27 |
28 |
29 | This webpage contains a heading, some body text, two forms and a button.
30 |
31 | Even though HTML and CSS are not programming languages they’re important fundamentals, and they’ll help you understand how the internet works.
32 |
33 | We’ll cover programming languages (like Ruby and Python) in future lessons.
34 |
35 | ## Introduction to HTML and CSS
36 |
37 | ### What do HTML and CSS stand for?
38 |
39 | HTML stands for Hyper Text Markup Language
40 |
41 | CSS stands for Cascading Style Sheets
42 |
43 | ### What are HTML and CSS?
44 |
45 | HTML is the language used to build websites. All text and content that you
46 | see on the internet is built using HTML.
47 |
48 | CSS is used with HTML to style the page.
49 |
50 | Whenever you go to a website (e.g. www.gov.uk) your browser sends a request
51 | to a special computer called a "server". The server sends back HTML and CSS,
52 | which your browser turns into a webpage for you to look at.
53 |
54 | ## HTML elements
55 |
56 | An element is an HTML building block. There are paragraphs, headings,
57 | links, lists, and many more.
58 |
59 | HTML elements are made up of an opening tag (sometimes including some attributes), content, and a closing tag.
60 |
61 | 
62 | (Image from wikipedia)
63 |
64 | See the [Mozilla HTML elements reference documentation](https://developer.mozilla.org/en/docs/Web/HTML/Element) for more information.
65 |
66 | ## Webpage structure
67 |
68 | ### `doctype` and `HTML`
69 |
70 | The doctype is the first thing that must be defined in an HTML page. It tells
71 | the browser which version of HTML the page is using.
72 |
73 | ```html
74 |
75 | ```
76 |
77 | These days you will only ever need to use `html`. There used to be lots of
78 | complicated doctypes in the olden days. See the [W3C documentation on doctypes and markup styles](https://www.w3.org/wiki/Doctypes_and_markup_styles) for more information.
79 |
80 | The doctype is always followed by the `` tag, which contains the contents of your page.
81 |
82 | ```html
83 |
84 |
85 |
86 | ```
87 |
88 | ### `head` and `body` tags
89 |
90 | A HTML page is split into two parts. The `head` and the `body`.
91 |
92 | The `head` contains webpage information like the page title (the text in the
93 | browser tab), stylesheets, scripts and other information about the page.
94 | Everything in the `head` is invisible - you can’t put an image or a paragraph
95 | of text in `head`.
96 |
97 | The `body` contains webpage content that is visible to the user.
98 |
99 | ## Presentational HTML Elements
100 |
101 | Let's start by defining the basic structure of your website.
102 |
103 | Open Visual Studio Code and create a new folder for your work called `lesson-1-html-and-css`. Select **File > Open Folder...** and select the correct folder:
104 |
105 |
26 |
27 |
106 | 
108 | 
109 |
110 |
111 | Then inside this folder create a new file called `index.html` by clicking the **New File...* button in the sidebar:
112 |
113 | Screenshots showing how to add a folder in Visual Studio Code
107 |
108 |
109 |
114 | 
116 |
117 |
118 | ### Task 1: doctype, html, head and body
119 |
120 | Using what we just learnt, and with guidance from your coach, do the following:
121 |
122 | * declare the doctype to be HTML
123 | * open and close a set of `` tags
124 | * Within this, create the `head` and `body` tags
125 |
126 | Once you've done this, open `index.html` in your web browser:
127 |
128 | Screenshot showing how to add a file in Visual Studio Code
115 |
116 |
129 | 
131 |
132 |
133 | Do you see anything on the page?
134 |
135 | ### Task 2: set the page title
136 |
137 | Now inside your head tag create a `Screenshot showing how to open the HTML file in Google Chrome
: 130 |
131 | Heading
176 |Heading
177 |Heading
178 |Heading
179 |Heading
180 |Heading
181 | ``` 182 | 183 | A `h1` defines the most important heading whereas a `h6` defines the least important. 184 | 185 | Headings should go from `h1` to `h6` in order - always start from ``, next use ``, and so on.
186 |
187 | It's important to not skip one or more heading levels - this is because screenreaders can jump from heading to heading and leaving a heading level out may lead to a user being confused.
188 |
189 |
190 | Don't:
191 |
192 | ```html
193 | Heading 1
194 | Heading 3
195 | Heading 4
196 | ```
197 |
198 | Do:
199 |
200 | ```html
201 | Heading 1
202 | Heading 2
203 | Another heading 2
204 | Yet another heading 2
205 | Heading 3
206 | ```
207 |
208 | Headings can skip a level when going back up to a more important heading level:
209 |
210 | ```html
211 | Heading 1
212 | Heading 2
213 | Heading 3
214 | Heading 4
215 | Another heading 2
216 | Another heading 3
217 | ```
218 |
219 | #### Task 3: add a heading
220 |
221 | Add a `h1` heading tag, which includes the phrase `Apply for a Barking Permit`, inside the `body` tag of your page.
222 |
223 | ### Element: paragraph (`p`)
224 |
225 | Putting content into a `
Heading 1
194 |Heading 3
195 |Heading 4
196 | ``` 197 | 198 | Do: 199 | 200 | ```html 201 |Heading 1
202 |Heading 2
203 |Another heading 2
204 |Yet another heading 2
205 |Heading 3
206 | ``` 207 | 208 | Headings can skip a level when going back up to a more important heading level: 209 | 210 | ```html 211 |Heading 1
212 |Heading 2
213 |Heading 3
214 |Heading 4
215 |Another heading 2
216 |Another heading 3
217 | ``` 218 | 219 | #### Task 3: add a heading 220 | 221 | Add a `h1` heading tag, which includes the phrase `Apply for a Barking Permit`, inside the `body` tag of your page. 222 | 223 | ### Element: paragraph (`p`) 224 | 225 | Putting content into a `` tag will break your text up into paragraphs. 226 | This helps make the content of your page easier to read for the user. 227 | 228 | #### Task 4: add a paragraph 229 | 230 | Add the following paragraph inside your `
` tag, after the ``: 231 | 232 | ```html 233 |
234 | The ministry of dogs is trying a new pilot. Good dogs can apply for a 235 | barking permit so they can woof whenever they like. It’s not yet clear how 236 | this permit will be enforced. 237 |
238 | ``` 239 | 240 | ### Element: link (`a`) 241 | 242 | A link lets the user go to another webpage. We use the attribute `href` to indicate where you want the user to go. 243 | 244 | The link tag is called `a` for "anchor". 245 | 246 | #### Task 5: add a link 247 | 248 | Add a link to the end of your paragraph: 249 | 250 | ```html 251 | 252 | More information about barking 253 | 254 | ``` 255 | 256 | ### Element: div (`div`) 257 | 258 | A div tag lets you group elements together. Grouping elements is useful as we can later style them together (e.g. giving them all the same colour). 259 | 260 | #### Task 6: add a div 261 | 262 | Wrap your existing paragraph, link and heading in a div: 263 | 264 | ```html 265 |
266 |
272 | ```
273 |
274 | It's called "div" for "division".
275 |
276 | ### Element: image (`img`)
277 |
278 | So far we've learned a lot about how to add text to our page. Now let’s add some images!
279 |
280 | Before we start, we'll need to add the image files we want to use to the
281 | project folder.
282 |
283 | It's common to keep images in their own folder, so first,
284 | create a folder called `images` inside the same folder as your HTML file.
285 |
286 | Next, download the images you'll need. Do this by right-clicking each of
287 | the following links, select 'Save Link As...', and save it to the images folder
288 | you just created:
289 |
290 | * Apply for a Barking Permit
267 |268 | The ministry of dogs is trying a new pilot. Good dogs can apply for a barking permit so they can woof whenever and wherever they like. It’s not yet clear how this permit will be enforced. 269 | More information about barking. 270 |
271 |
291 | *
292 |
293 | Images are primarily made up of three components:
294 |
295 | * the `
308 | ```
309 |
310 | Here you can see we have told the `src` of the image to look in the images
311 | folder and display the image `shiba-inu.jpeg`, then we have given it a
312 | description in the `alt` attribute.
313 |
314 | ## Forms
315 |
316 | Forms let you ask your user for input. There are a number of interactive
317 | components (like text boxes and buttons) you can use in forms.
318 |
319 | ### Element: form (`form`)
320 |
321 | The `