Templates and Forms

Projects in Information Technology II

(see handouts)

Install rails with the following command in "Start Command Prompt with Ruby"
gem install rails -v 5.2.3
Check the installed version with
rails --version
Use irb to play with arrays and iterators (each, map, select, reject, inject,…).

1st week: HTML markup ⇒ structure
2nd week: CSS stylesheet ⇒ styling
3rd week: Programming with Ruby
4th week: Dynamically create a Web page with a program, and serve it from a Web server
Today: Simplify Web page creation with templates, make them more flexible with forms

Basic idea: Replace Web page output in program code
with code islands in literal Web page
Available for many programming languages:
JSP (Java Server pages), ASP (Microsoft Active Server Pages)
Programming language that started as a template engine: PHP
Templates for Ruby: ERB (embedded Ruby)

	CGI	ERB
Web page contents	explicit output	direct
Web page markup	explitic output	direct
Program code	direct	`<% ... %>`
Program results	direct calculation, explicit output	`<%= ... %>`

Input from users to Web applications mostly via Web forms
Main form element in HTML: form
Start tag syntax: <form method='get'>
Two methods (get and post), today we use get
Request to server by an URI with query part, e.g.:
http://localhost:12000/my_template.html.erb?exponent=0.7&step=3

URI (Universal/Uniform Resource Identifier): Formally correct name (RFC 3986)
URL (Universal/Uniform Resource Locator): Widely used term (URL 'standard')
IRI (Internationalized Resource Identifier): Extension allowing non-ASCII characters (RFC 3987)
Caution: アイデンティファイア, NOT アイデンティファ―
Start with scheme, e.g. http:, https:, ftp:, mailto:, tel:, data:, …
Part after ? is query part

Each form field (e.g. input element) produces a name-value pair, separated by =
Fields (parameters) are separated by &
Example: http://my.site.com/page.html?name₁=value₁&name₂=value₂
Server-side libraries and frameworks are designed to handle query parts easily
Example: servlet_request.query[name₁] ⇒ value₂
Query values are strings, so conversion is necessary
Query parts may contain arbitrary values, so be careful about security (see Bobby Tables)

There are many form fields, but the most important is input,
in particular <input type='text'> for textual input.
Form fields should be labeled with label elements
Initial values can be given with a value attribute
(for <input type='submit'>, the value is the text on the button)
The name attribute gives the parameter name

There are many ways to loop with steps.

Example: Loop from 0 to 20 with steps of 2:

(0..20).each { |n| ... if n%2 == 0 }
(0..20).select { |n| n%2 == 0 }.each { ... }
(0..10).each { |n| ... n*2 }
(0..10).map { |n| n*2 }.each { |n| ... }
(0..20).each_slice { |a| ... a[0] }
(0..20).step(2) { |n| ... }
0.step(20, 2) { |n| ... }

Make sure you know at least one of these.

Convert your program from exercise 4c to an ERB template in a file 5a_convert_marks.html.erb.
Enclose Ruby code (except HTML output) with <% and %> or <%= and %>.
Remove puts/print statements (replace with <%=... where necessary).
Remove the HTTP header/empty line output.
Replace ENV['QUERY_STRING'] with servlet_request...
Before or after the definition of the convert_mark function, add a line saying:
extend self
Start webrick and test your program with various exponents.
Save the source (HTML only) of your Web page and validate it. Fix any validation errors.
Submit the program 5a_convert_marks.html.erb to Moodle (deadline: 17:20).

Add a form to your template from exercise 5a in a file 5b_convert_marks_form.html.erb.
Hint: You can use the "Exponentiation in Ruby" example for hints.
The form uses two inputs: exponent and step.
A step of 5 will only output converted marks for 0, 5, 10, and so on.
Use a default of 1 if the step is not given, and 0.5 for the exponent.
Make sure the form values are set to the input values when repeatedly using the form.
Start webrick (if not already started) and test your program with various exponents and steps,
and with URIs missing some or all of the parameters.
Save the source (HTML only) of your Web page and validate it. Fix any validation errors.
Submit the program 5b_convert_marks_form.html.erb to Moodle (deadline: 18:20).

Download the student data from Moodle
Create a template in a file 5c_student_table.html.erb that outputs this student data in a table, including the grade average
Use a parameter (sort=familyname, sort=givenname, sort=english, sort=math, sort=average) to indicate sort order.
Use the Ruby sort or sort_by method to sort the array before starting with the ouput
(hint: check out these methods on the Web)
As usual, check your template using webrick and validate it
Submit the program 5c_student_table.html.erb to Moodle (deadline: May 15 (Wednesday), 19:00)

Install sqlite3 on your notebook computer:
Download https://sqlite.org/2019/sqlite-tools-win32-x86-3280000.zip
and copy the files in the zip file (sqlite3.exe, sqldiff.exe, sqlite3_analyzer.exe) into a directory that is in your PATH.
Check the sqlite3 version with
sqlite3 --version
This should e.g. be
3.28.0 2019-04-16 19:49:53 884b4b7e50...
Install SQLite Studio using the installer at https://sqlitestudio.pl/files/sqlitestudio3/complete/win32-inst/InstallSQLiteStudio-3.2.1.exe
Install the sqlite3 gem with (this may take some time):
gem install sqlite3