SENG 513 Tutorials

There are two tutorials each week during which students can work on their weekly assignment. The idea is that we will briefly discuss the assignment at the beginning of the first tutorial and then students can use tutorial time to solve it and have it graded by the end of the second tutorial.
The grading for the assignments will be done in class, so students are expected to present their results to the TA before the end of the second tutorial. Each assignment will yield a maximum of 2 points.

Create an object that exemplifies basic features of the JavaScript language. By executing the source file with Node it should output the current date, the number of days left in the year, and if the current day of the month is an odd or even number. To achieve this assign textual, numerical, and bolean values to member variables of the object and use arrays, functions, conditions, and loops (at least once each).

Download assignment as a PDF

This assignment is intended to get you started with the distributed revision control system Git and the hosted environment GitHub. Git is installed on the department's Linux servers and is freely available - you can do this assignment either on a department server or on your own machine.

1) Set up Git and GitHub

Use git config --global to set your name and email for your local Git environment. By setting the config property color.ui to true git output will be more colourful. Now sign up at GitHub for free, generate SSH keys, and make sure you can connect. Send Marian an email with your GitHub account so that he can add you as a collaborator to the repository, which allows you to push your changes to the repository.

2) Clone repository

Clone the remote repository to your local environment using the git clone command. If you are a collaborator, you find a read-and-writable Git URL on the repository page. Run the server, open it in the browser, and inspect the code.

3) Create a local branch

For this assignment you add another Hello World example in a different (human) language. In order to work on this new feature create a new local branch with the name of the language you intend to add using the git branch command. Switch to the new branch using git checkout.

4) Make changes and commit

Choose the language you want to add from the issues page on GitHub by adding a comment with your intention to add this feature. To add your language you need to modify server.js and create a file in the langs directory. For the change in server.js please follow the example for English. Add and commit these changes locally using git add and git commit. For the commit description use expressive language and include a reference to the issue number you are addressing by adding Closes GH-n, with n referring to the issue number you chose. Use git status to review which files are tracked, modified, and untracked, and use git diff to review the changes since the last commit. After committing you can review previous commits using git log.

5) Merge language branch with master

Once you are happy with your changes and they are all committed, you can merge the new language branch with your master branch. To do this you need to switch back to master first with git checkout and then use git merge with the new language branch name.

6) Pull latest changes from origin

Before you push your changes to the shared repository, make sure that the changes that were pushed to origin by your collaborators are also in your local repository by issuing a git pull. Depending on the nature of the remote changes, this step may require you to manually merge certain remote changes with your local ones, likely in server.js.

7) Push changes to origin

After you pulled the latest commits from the shared repository, you can push your changes with git push. You may have to go back to step 6), if more remote changes occurred in the meantime.

The idea of this assignment is to learn how to save form data into a database. Use add.html and server.js from Assignment 4 as the basis. You have to extend the server to handle POST requests and store the submitted data into a database. You can omit handling uploaded images. Use SQLite as the database management system, it is installed on the department servers and is also freely available.

1) Set up SQLite database

In order to interface with SQLite use the node-sqlite module that is installed on the department server csc for you, so that you can include it with var sqlite = require("sqlite");
To use node-sqlite on your computer you can compile and install it using node-waf or npm.

You can choose the way you create the database and table, for example, in server.js using the node-sqlite module or the sqlite3 console program. Either way make sure that you not only capture all the fields of the form (except the image), but also include a unique id as the primary key.

2) Save form data into table

Make sure your form in add.html specifies POST as the method and an action that your server.js uses to identify the POST request submitted with the form. Use the data and end events of the request to put together the form data and parse it using the querystring module. Save the data into the database table you created previously using the node-sqlite module. When the data is saved, the browser should be redirected to the form.

When showing your solution in the tutorial, you will be asked to demonstrate submitting a form, display the table contents using sqlite3, and explain your changes to server.js.

In this week's assignment, you will use JavaScript and jQuery to change the content of a page via the browser's Document Object Model (DOM), associate events with page elements, and issue Ajax requests. The idea behind the assignment is showing live Twitter streams for three search terms: 'egypt', 'libya', and 'iran'. The page should allow the viewer to switch between these updating tweet lists interactively. When clicking on one of the terms, the corresponding list of tweets should appear showing each tweet's author, text, time, and user image. Each list of tweets should update every 10 seconds. You can use this page static.html as the basis for your solution.

1) Getting data from Twitter

Use jQuery's getJSON method to issue GET requests from the browser to Twitter's search API. As this is going to be a cross-domain request, it is necessary to use the JSONP format by specifying a callback parameter. jQuery will transparently handle JSONP when the callback in the URL is callback=?. To get only the newest tweets you can use refresh_url in the Twitter response from the initial request. In order to continuously update the tweet lists, you can set a delay of 10 seconds with window.setTimeout, whenever the corresponding ajax call is finished. Be mindful with the frequency of API calls - you don't want to be blocked from Twitter.

2) Adding tweets to the page

When receiving the response from Twitter, you need to add the tweets to the corresponding tweet list. If you want to see in a better format how the Twitter response is structured, check out Chris Nielsen's JSON Visualization page. Use the markup for the tweets from the static.html example. To add content to a DOM element, you need to select the corresponding list with a element+class selector, for example, $("ul.egypt")..., and then use a modification method, such as prepend, which inserts html at the beginning of the matched element(s).

3) Switching between search terms

Clicking on one search item in the searches list should result in only having the corresponding tweet list shown. Use jQuery's click method to bind the click event to the search terms. In order to hide the lists that are not corresponding with the current search term you could, for example select the three tweet lists and exclude the current list from the selection with the not method. Think about how to provide a smooth transition between hiding the current list and showing the new list. The currently active search term in the searches list should have the class 'active' which gives it a black background. Use addClass and removeClass to add and remove classes from elements.

To show your solution, you will be asked to demonstrate your page and explain your source code.

This week is intended to improve your Git skills, with regard to contributing your own code to a shared repository as well as reviewing and merging someone else's contribution. You may want to review the help page on GitHub on pull requests and the Git Reference website. As an example, we will be creating a show case page of jQuery's DOM event and manipulation capabilities. All your changes will be in the same file index.html. In other words, it is going to be a long web page demonstrating what is possible in terms of client-side event logic.

Make sure you use feature branches for your changes and the review. Leave your local master branch for keeping in sync with the mainline.

Contribute Your Code

Fork this assignment's GitHub repository and clone it within your local Git environment. This will set your fork on GitHub as a remote named 'origin'. Before you do any changes, create a feature branch, from which you will do your code changes.

You decide what kind of feature you implement - the only constraint is to use at least one of jQuery's event methods and one of its manipulation methods. Try to come up with something unique. Add page elements for your feature only to a div element with your GitHub account name as the id and 'demo' as the div's class. You can put your JavaScript code either into the corresponding div element or the head element. In the latter case, please, put your username in front of it in a comment.

Once you are happy with your changes, commit and push them from your local feature branch to a feature branch on your fork on GitHub. Important: in order to use pull requests, do not push these changes to the shared repository. Then issue a pull request on GitHub from your feature branch. Find another student in the tutorial to review and merge your code.

Review Someone Else's Code

Peer up with someone else to review their code and push it into the shared repository. To do this, go to the pull requests on GitHub and announce that you are going to review it. Then pull in the changes from that user into a separate branch of your local Git environment. Create the separate branch from your master (not your own feature branch). Inspect the code and the change by comparing the review branch with your up-to-date master:
git diff master..review (assuming the branch 'master' is in sync with the mainline and the branch 'review' is the one you created for the review). This will give you a sense if something is going to be deleted that should not.

If you are satisfied, merge from the review branch with your local master. If the merge causes conflicts, try to resolve them or ask the contributor to update their repository and code. If the merge worked out, switch to master, merge the review branch, and push the changes form your master to the master branch of the mainline. You might have to add the mainline as a remote.

When you're all done, please, demonstrate both your own contribution and the review.

In this week's assignment you will use HTTP cookies to distinguish between new and returning visits to a simple web site running on Node. Visitors should also be able to remove the cookie on the site. There are essentially three types of visits, first time, returning, and leaving (see screenshots).

First time

For, the initial request, the server should return a welcome page with a cookie as an HTTP header. To set the cookie use either writeHead() or setHeader() of Node's response object. Note: Browsers often automatically ask for a favicon of a website - to not count this as a request, check the path of the request.

Returning

If the cookie has been sent with the HTTP request, display a different message greeting the returning visitor. Include a link for removing the cookie pointing to another path (e.g., /reset).

Leaving

The third type of request can be distinguished from the other two requests using the url of the request (see above). To have the cookie removed from the visitor's browser, the server needs to return a cookie with an Expires date/time string of the past.

To show your solution, you will be asked to demonstrate your web page and explain your source code.

This week, you'll practice using Cascading Style Sheets (CSS) to specify the presentation of an HTML page. To do this you need to create two style sheets: one that replicates a given design, and another one with your own unique style. You will use this HTML file index.html as the basis, which you cannot change. The idea is that you can only change the presentation through the CSS files. There are many CSS resources on the Web, for example, the Working Draft for CSS 2.1 and also tutorials and a reference on HTML Dog. Make sure the style sheets are valid CSS 2.1 using W3C's CSS Validator.

Match a Given Design

Create a style sheet style.css that mimics the layout and typography as depicted in this screenshot.png. To achieve this, you need to specify style properties for at least the body, headings, table of contents, and links.

Make Your Own Design

Create your own unique style sheet for the given page. As an inspiration, what one can achieve with CSS, check out css Zen Garden. Besides creating another valid style sheet, the only requirement is to use type, descendant, class, and id selectors (at least one of each) and style properties specifying at least typography, positioning, and colours of elements.

To demo show both of your designs, the style sheets, and that they are valid.

This week's assignment - the last assignment for this course! - is about creating forms with HTML5. You can reuse your solution for Assignment 5, but you don't need to save data into a database. The general idea is to use the new input types and attributes, and simply output the form data into the console on the server. Refer to the Web Forms page of the Dive into HTML5 site for a good overview.

It is up to you what kind of form you create. Simply pick a scenario and include a range of input types and attributes. For the input types include at least one input element for each of the following:
email and web addresses, numbers, slider, dates, and search queries.
And incorporate the following attributes where it makes sense:
autofocus, placeholder, max, min, step, and required.

To demo, please, present your form, submit some data, explain your source, and show that it's valid.