TA

Gina (Virginia) Cook
v_cook encs concordia ca

SOEN 498A

INTRODUCTION TO WEB PROGRAMMING
Monday 11:45-13:35
H-825

Lab 1 - January 12

1.1 Announcements

1.2 Review of HTML and CSS

Chapter 2 Slides

1.2.1 HTML Concepts

1.2.2 CSS Concepts

CSS tutorial

1.3 (HTML tutorial)

See also Appendix A of Knuckles & Yuen.
HTML Tutorial

1.4 HTML + CSS tutorial

1.4.1 Sample pages

Create the following pages using HTML and CSS

Figure 2.24 Page 69

Figure 2.26 Page 71

1.4.2 Practice

Try Exercise 1 on page 75.
"On the website, under Ex 1 chapter 2, you will find a picture of a personal resume template. Constuct a personal resume using the general idea of that template. You may embellish the resume, but use the same general structure in terms of the lists and borderless tables used to create columns. Use CSS (not the depreciated font element) to format the text (face, size, color), applying at least three different style classes. "
Resume Picture

1.5 Work on Assignment 1


Lab 2 - January 19

2.1 Questions from lecture?

2.2 JavaScript Concepts

Go through the Chapter 3 slides.

2.3 JavaScript Tutorial

Here are three learning options:

2.3.1 Learn by reverse-engineering

After going through the slides look through the JavaScript Examples in the Figur es (executable) section of the Chapter 3 webpage. Compare the source code with the output.

2.3.2 Learn selectively by reference

If you are already comfortable programming here is a JavaScript Tutorial for Programmers

2.3.3 Learn by Video

If you are new to both programming and JavaScript here are some tutorials on YouTube

2.3.4 JavaScript Debugging

Everyone will probably want to read: JavaScript Debugging for Beginners

More information about Debugging can be found on the Chapter 3 website

2.4 Practice

Try Exercise 4 on page 136.

2.5 Practice JavaScript Control Statements (If & While)

Download the JavaScript Calculator example which was talked about in Chapter 3. Create an exponential operator, "^" which raises num1 to the power of num2. In other words, if num1=2 and num2=3, then num1 ^ num2 should be 8. The program should work even if num1 is not an integer.

Advanced As a further modification, restrict num2 to be an integer, and send an alert if num2 is not an integer.
(Hint: Use google to find how other code implements this feature)

2.6 Practice

Try Exercise 17 on page 139.

2.7 Work on Assignment 1 (HTML)

Assignment 1 is due next week, before you leave today you should show me your working code.

2.8 Work on Assignment 2 (JavaScript)

Assignment 2 is due Feb 2 It uses java script, before you leave today you should at least start it and identify what additional knowledge you might need to implement it.

Lab 3 - January 26

3.1 Read email on how to run Perl cgi on clipper

Everyone should have recieved an email which gives them access to a group account which they will use to make their Web Application. Since there are few students we will have group size of 1 (which is why each of you have a group account). The email also explains how to run perl cgi scripts at Concordia. Scripts can only be run on clipper.encs.concordia.ca.

3.2 Set up the preferences for .cshrc

As specified in the email, Edit/create the file ~/.cshrc to have a line which says umask 700.

3.3 Create and run a php script

In the directory discussed in the email (which should be roughly /www/groups/a/a?_soen498a_4 ) you should create a php script called date.php following the code in the bottom of the email.

3.4 Create and run a perl cgi script

In the same directory copy and past the perl script into a file called date.cgi.

Possible bugs

3.5 Practice

Put the randomimage.cgi script in your folder on clipper and try to make it work.

3.6 Submit Assignment 1

3.7 Work on Assignment 2 (Javascript)

3.8 Work on Assignment 3 (Perl CGI)


Lab 4 - February 4

4.1 More perl scripting

Create a short perl script that counts words in a string.

Click here for a video tutorial

The script illustrates the use of subroutines, hashes, foreach loops on arrays and the split command.

Or you can open it locally by typing:
totem /www/home/v/v_cook/teaching/perl-wordcount.ogg &

4.2 Practice

References: Chapter 5 examples of CGI
Chapter 3 examples of Webforms and Javascript

Exercise 9 p. 222. Create an HTML page that contains a form with two text fields: one for a user name and one for a password. The form shoudl be submitted to a CGI program that you create. Store five user names and passwords in a text file. If the submitted user name and password match (test using case-insensitive string equality) a pair found in your file, return a page to the browser that states "login successful," Otherwise, return a page to the browser that contains one of the two messages: "User not found" or "User valid, but password does not match." If you use the GET method of form submission, the following lines of code will recover the user name and password submitted to the program from the form.

($user, $pass) = split (/&/, $ENV{"QUERY_STRING"} , 2);
($junk, $user) = split(/=/, $user, 2);
($junk, $pass) = split(/=/, $pass , 2); 
The $user and $pass variables will contain the entered data. The $junk variable will contain the name you give to the password element, which is not needed in the program.

See the answer.

4.3 Submit Assignment 2 (Javascript)

4.4 Work on Assignment 3 (Perl CGI)


Lab 5 - February 9

5.1 Practice designing a web application

Implement the application in Figure 1.9 p22.

5.2 Practice string matching in Perl

Do Exercise 4.a p 276 of the textbook.

Redo the exercise from last week, now however, you should use the full decoding routine. In particular, weird characters may now be used in the user names and passwords.

Submit Assignment 3


Lab 6 - February 16

Design your Blackjack Game (see features in Assignment 6)

Start looking at the features that are requested in Assignment 6 where the game will be nearly finished, (including multiplayer, adjustable bets and statistics database). Consider an over all design that will allow you to build towards those features without having to rewrite your code between Assignment 4 and Assignment 6.

Here is a Masters thesis about tracking play at a blackjack table where some aspects of the game are discussed. Menard-2008-Tracking the game of blackjack.pdf

Review Chapter 7 (Maintaining State) Slides

Chapter 7 slides and figures

Work on Assignment 4


Lab 7 - March 2

Submit Assignment 4


Lab 8 - March 9

Submit Assignment 5


Lab 9 - March 16

Work on Assignment 6

Pass by ref in perl

Some of you might be running into problems accessing arguments in subroutines. Here is a link which explains pass by reference (pointer) in perl. http://www.perlmonks.org/?node_id=6758

Debugging at the command line

http://www.perlmonks.org/?node_id=569819

POD Plain Old Documentation (like javadoc, but for Perl)

http://juerd.nl/site.plp/perlpodtut

Use DBI:CVS rather than a MySQL database

http://www.perl.com/pub/a/1999/10/DBI.html

How to require variables to be declared (easier debuging): use strict

Look at the useStrictExample.pl script. Many bugs in Perl come from the fact that you don't have to declare variables before using them. This means that you can have a typo where you meant to have a variable that you used before but Perl won't complain (no compile error). The "use strict;" will make Perl act like other languages; you will have to declare your variables with a "my" in front of them.


Lab 10 - March 23

Accessing a CSV data file

Practice getting Perl to interface with a CSV data sheet.

Debugging - ^M

Beware of ^M if you edit your files on windows you might have line feed characters which the perl on the Clipper server will not be able to interpret.

To remove the dos line feed type at the command line dos2unix filename.txt


Lab 11 - March 30

Submit Assignment 6


Valid XHTML 1.0 Transitional