CS 571 Summer 2011
Course Assignments
- Homework #1: Building dynamic client-side forms: HTML, Javascript, DOM and CSS
Requires the installation of the Apache Web Server
- Homework #2: Bulding your companies Web-Based Information System for Employees
Requires the installation of MySQL
- Homework #3: Building Your Company's Web Services Information System for Customers
- Homework #4: Redo Homework 3 with CodeIgniter and JQuery
- Extra Credit Homework: Redo Homework 2 Manager part with XSLT
All assignments are due at 11:59:59pm on the day specified.
| Homework |
Points |
Assigned |
Due |
| 1 |
25 |
May 25 |
June 5 |
| 2 |
30 |
June 6 |
June 19 |
| 3 |
40 |
June 20 |
July 5 |
| 4 |
40 |
July 6 |
July 18 |
| Extra Credut |
15 |
July 8 |
July 20 |
Homework #1: Building dynamic client-side forms: HTML, Javascript, DOM and CSS
For the first homework, you are to have a valid link to the HTML page you create for this homework
that is available through your Apache web server. You tell us what this link is through the text file that
you submit along with your HTML page. If we don't see your homework page through the link you tell us,
you don't get the 5 points for a successful Apache install.
We will grade the file you submit for the HTML part. We will not grade the file available from your web server. However, if only the default Apache page is available from YOUR web server, you will lose 4 of those 5 points. Not only are you to properly install Apache, but we want to know that you know how to put HTML files in the proper place so that they can be seen.
For instance, say you create your file as myhomework1.html. You submit this file to the 351 account - so we know what the name of your homework 1 HTML file is called. In your writeup file, you tell us that you used the cs-server.usc.edu machine and port number 12345. We will
use your Apache web server currently installed with the link as: http://cs-server.usc.edu:12345/YOURUNIXID/myhomework1.html. If we do not see the page you submmitted for homework 1, you will lose 4 of the 5 points for having Apache installed.
The first step in this exercise is to download, install and configure the Apache web server. It's very easy to install
Apache. Follow the instructions conntained in this file.
There are points for having Apache properly installed.
Your task is to create a dynamic HTML page that actually contains two separate HTML forms and two report pages.
Only one form is to be displayed at a time. You get to decide what your forms are to do and how the transition
flows between the forms. Be creative, it will make the assignment more fun. Your forms are to collect data that
is displayable with your two report pages. You must support multiple uses of your forms. The report pages should display data
from each use of the forms.
For example, the first form could allow a student to provide their information with their school. The second form wowuld allow
a student to register for classes for a given semester. One report would show a listing of all the students that have provided
their information - like name, phone number, address, etc. This listing would be one line for each student that has used the form.
The second report would be accessed by a button (for each line of the first form) that would show the courses that student has
registered for.
Your HTML document (there is to be only one file) must contain at least the following form elements:
- At least 4 selection lists containing at least 5 items each. At least two of these must allow for
multiple selections by the user. Two of these selection lists are to be created dynamnically - based on
a user interaction.
- At least 8 text fields. You decide what their purpose is for these text fields.
- At least one textarea element. Again, you decide its purpose.
- At least four sets of radio buttons. There must be at least 3 buttons in a button group. You
pick the labels and values.
- At least four sets of check boxes. There must be at least 3 check boxes in a set. You pick the
labels and values.
- At least six buttons that execute Javascript to create dynamic HTML effects, or perform form field validation. This can be moving to the second form, reading user-entered data, going to a report screen, or performing some action, etc.
- Use cascading style sheets in your document to make it look nice. This includes things like
an appropriate background color, nice font and font color, good spacing,
etc.
- You are to validate at least 4 of the text field values. You decide the validation that is appropriate.
The validation cannot be all of the same type - like an age. There must be 3 different types of validation. At
least one of the validation types must be for a date that includes year, month and day.
- At least one set of the radio buttons, one set of check boxes and one of the selection lists is to be required
before the user can proceed to the next form - or finish with both forms. Your Javascript must
perform this validation. This must be followed for both forms.
- You can add other requirements for your form, but they cannot conflict with the requirements
stated above.
- One report page is to show one line for the data entered by the user of one of the forms. Clicking on something -
a button, or some text, will show all the information entered in the second form for that user.
Grading
This assignment is worth 25 points. You can get up to 3 bonus points if you've done something very nice - exceeded
the requirements stated above. You will lose points if you don't check for a user using things improperly.
There are 5 points for properly installing Apache and 20 points for meeting all the dynamic
HTML page requirements.
Submission
Along with your HTML document for this assignment, you are to submit a text file that provides the link to your web server.
Failing to provide this text file will mean that we won't be able to find your web server - you lose 5 points in this case.
You are also required to submit your HTML document electronically to the csci351
account so that it can be graded. Only this file will be graded. To submit your files electronically, enter the following
command from your Unix prompt:
submit -user csci351 -tag hw1 MYHTMLFILE MYTEXTFILE
where MYHTMLFILE is the name of the HTML file you created for your homework and MYTEXTFILE is the name of
the text file that has the link to your installed Apache web server.
THE SUBMIT SHOULD LOOK EXACTLY LIKE THAT SHOWN ABOVE EXCEPT FOR THE FILE NAMES YOU ENTER.
Homework #2: Building Your Company's Web-based Information System for Employees
In this assignment, you will select a type of company
and build a Web-based information system to allow your employees to manage your business and find out how
you are doing. You must decide what your company is going to sell. It can be products, or services -
like cutting hair, delivering packages, selling cars, etc.
In this assignment you will be installing the MySQL database and creating a
web site in your Unix account using HTML, Javascript, AJAX, SQL and PHP. Like homework 1,
I expect form field validation to be performed. It should not be possible to
put 'bad' data into your database, or have a PHP script abort because
something happened relating to incorrect data. NO OTHER SOFTWARE IS ALLOWED
EXCEPT PHP, HTML, CSS, SQL, AJAX AND JAVASCRIPT. All are to be hosted through your
Apache web server and Mysql database.
I've developed a disk-saving installation process. Turns out MySQL 5.0 is 60MB even when zipped and tarred.
The instructions allow you to untar the file directly from the 351 account -
saves you 60MB of space - and copy/download time. A good reference document for all kinds of info about MySQL is
http://dev.mysql.com/doc/refman/5.0/en/index.html
The instructions for installing php are here.
Your web site must include the following general capabilities:
- A login page for employees that establishes a
logon session variable in PHP to keep track of the user. This logon session
variable MUST time out - for security reasons.
- You are to have a set of HTML pages to allow your employees to manage your
web site data. I like to call this the administrative side of a web site.
You need at least the following:
- An administrative login page (for all employees) - with session variables to track them
appropriately. This is to time out.
- A set of pages that allow for the management of your products/services, product categories,
users, and administrators. This means you must be able to add, change, or
remove any of these four- or anything else that you create. This is NOT to be done by typing
SQL into the form. None of the 3 types of employees are programmers and they are not to be
required to know SQL.
- A set of reports so the managers in your company can view any of the data in your database.
Managers can't be trusted to actually change anything, but they are to be able to view any data in
any of your tables. They are also to be allowed search options. The options that are to be provided
are given below. The manager is to be able to specify any, or all, of the search criteria. For example,
a manager might want to see all the products in a product category that have a price between $50 and $100.
- For products: product price range, product name, product category
- For employees: by type of employee, pay range
- Create a WRITEUP file that describes your web site, how it works, your database (including field names,
field types and sizes). Include names and descriptions of each HTML page and
each PHP script.
- Lastly, you are to use AJAX
where it makes sense. AJAX can considerably improve the user's experience
with your web site.
To make grading of your submission easier, please put all your files in your webapps/ROOT directory,
or in a single subdirectory under this directory. Points will be deducted if you make the grading
of your web site more difficult.
Submission
You must submit all your files including your WRITEUP file to the csci351
account. To submit your file electronically, enter the following command from
your Unix prompt (THE SUBMIT SHOULD LOOK EXACTLY LIKE THAT SHOWN BELOW EXCEPT
FOR THE FILE NAMES YOU ENTER):
submit -user csci351 -tag hw2 MYFILES
where MYFILES are the names of all of your HTML files, PHP files and
WRITEUP file that you created for this homework separated by spaces.
Homework #3: Building Your Company's Web Services Information System
Your web site must include the following general capabilities:
- A login page for users that establishes a
logon session variable in PHP to keep track of the user. This logon session
variable MUST time out - for security reasons - if you have not already done this in homework 2.
- Whatever scheme you want to come up with to
allow users to order/view your products and services, it must include a shopping cart that is stored
in a table in your database. You need to ask for enough information that you
can send the ordered items to the customer - so all customer address
information is needed.
- An ability to display the shopping cart during the ordering process.
- The ability to edit, or even delete, the entire shopping cart and start over.
- A page so users can create a login and profile. They also must be able to edit their profile,
including their password.
- HTML pages for users to view what they have ordered
from you. This is to include a summary page that displays one line for each
order and when a button, or something on that line is clicked, the detail for
that order is displayed.
- Managers get new reports to see all about orders. They are to be able to retrieve orders,
and summaries of product sold by date, product category, or by product. Note: A single request could provide
values for all three organizing ways. For example, a manager wants the total sales for a specific product category,
for a specific time frame they specify.
Submission
You must submit all your files including your WRITEUP file to the csci351
account. To submit your file electronically, enter the following command from
your Unix prompt (THE SUBMIT SHOULD LOOK EXACTLY LIKE THAT SHOWN BELOW EXCEPT
FOR THE FILE NAMES YOU ENTER):
submit -user csci351 -tag hw3 MYFILES
where MYFILES are the names of all of your files.
Homework #4: Redo Homework 3 with CodeIgniter and JQuery
You are to redo your third homework using as much CodeIgniter as possible, on the server side. On the client side, you are to use JQuery for all your dynamic HTML. This includes accessing content by its ID, AJAX, etc.
You are also to ensure that your homework 4 is safe from cross-site scripting (XSS) and SQL injection.
You may also want to use JSON, but this is not required. The easiest way to use JSON is to use PHP 5.2.0, or newer. This will also let you use filters in PHP. The installation for PHP 5.2.0 is very similar to PHP 5.1.5, that you have. Here is a link to installing PHP 5.2.0 with Apache 1.3 on Unix. You should be able to compare this to the installation instructions that I've given for PHP 5.1.5, and notice the few differences.
Submission
You can submit individual file names by entering their name, or enter an asterisk (*) to submit all the
files in a directory.
submit -user csci351 -tag hw4 MYFILES
where MYFILES are the names of all of your files.
Extra Credit Homework: Redo Manager from Homework 2 using XSLT
You are to use 3 separate PHP scripts to extra all rows from your Product, ProductCategory, and User/Emplyee tables from homework 2. This data is to be output as an XML file. This XML file will be the input to 3 XSLT scripts that will convert the XML into HTML for display. Make it look nice - an HTML table is probably the best way to display the results.
You are to submit your PHP scripts, your XML input files, and your XSLT scripts. The grader/TA will run your XSLT script against the XML files you have provided. You are also to provide a writeup file that describes your database tables and which XML file is to be used with which XSLT script.
You do not need to have any searching capability. Just extract all the rows and all values from your tables for your XML files.
Submission
You can submit individual file names by entering their name, or enter an asterisk (*) to submit all the
files in a directory.
submit -user csci351 -tag hw5 MYFILES
where MYFILES are the names of all of your files.