ITEC
334 Fall 2011
Online Application Development
Implementation Project (IP)
Please see IP alternative
To be done INDIVIDUALLY
Last
Updated 19/19/11 (clarified text for deliverable 2)
The main goal with this project is to provide students with hands-on experience on the implementation of a web business application online. Students will develop an online application throughout the semester and will need to deliver a working application at the end of the semester. The project will have deliverables due throughout the semester. Each deliverable will closely parallel related lab work and homework. For example, the database design for the implementation project will be due shortly after the database design homework is due. This is intended to help students put to practice immediately what they just learned in the classroom and lab.
This project will be relatively simple but should illustrate the necessary steps that need to be taken to develop and implement an online business application. This is entirely a hands-on exercise. The minimum requirements for the project are:
A login screen to access the application. The login screen needs to process a login ID and password for user authentication.
A main menu with options to enter, update, display and delete data in various tables.
A database with at least 5 tables loaded on a web hosting service provider (facilitated by the instructor but students can opionally use any web hosting service of their choice). At least 2 of these tables must contain important transactional data. At least one of these tables must be a lookup table. The remaining tables can be either main data, lookup or intersection tables.
HTML code and server-side scripts to display data from each of the 5 tables. As follows:
The display for main transactional data tables should be for a single "user-selected" record. For example, if one of your tables has client data, you will need a prompt or picklist for the user to select the client to display. Upon selection of the client, the application needs to display that client's record.
The display for pick lists or reference tables should display a listing of all records.
The display for intersection or any other tables can be either for a single record or all records, which ever makes more sense for you application.
HTML forms and necessary server-side scripts for data entry into at least 3 of the 5 tables. The 3 tables you select should be the ones that contain the most important transactional data in your application.
HTML code and server-side scripts to delete data only from all tables without a delete restriction (i.e., not affected by a delete:restrict rule in your database design -- MS Access will not allow you to delete data in tables that have a delete:restrict rule associated with a relationship). The delete function must apply on a single user-selected record (not a range of records). If the database has more than 5 tables, the application only needs to delete data from 5 tables (the most important ones).
HTML forms and the necessary server-side scripts to change (i.e., update) data in at least 2 of the 5 tables. The 2 tables you select should be the ones that contain the most important transactional data in your application.
At least 2 client-side scripts written in JavaScript. At least one of these scripts must be for input control or quick calculations in data forms and must be developed by the student. The second script can be for either input control, quick calculations or special display effects (note: special displays can be implemented with JavaScript code downloaded from publicly available sources, but the source must be noted in the script).
Use of cascading stylesheets (CSS) in all visible pages.
An "about" page. You will use this page to provide your users with all the necessary information to try and use your application (e.g., test user ID, password, brief overview of the application, special issues that require explanation, etc. IMPORTANT: it is impossible for your professor to remember all passwords and special issues for all students. You MUST provide all the necessary information for the professor and TA to test your entire site and be able to grade it.
Optional "extras" page. Many students want to develop additional functionality and features to their sites. This is highly encouraged and if the functionality is meaningful it may receive extra credit points. If you would like to do this, please create a separate page with links and explanations to all your extra work, so that your required work is graded separately first. It is difficult to distinguish required from extra work when these are comingled.
IMPORTANT: the instructor will provide you with many script templates that contain most of the functionality described above. Your job is to develop your own scripts and/or adapt the ones provided by your professor to implement this functionality with your specific database. If you adapt the instructor's scripts, it is very important that you give your application your own look and field. That is, any template adopted from the professor or other sources must have a fair amount of modification and customization done by the student. Applications that have too much resemblance to the instructor's scripts in terms of format, layout and colors will not be evaluated favorably. The idea is for you to adapt the functionality of the application but give it your own look and feel so that it becomes YOUR application.
While the final project delivery weights more heavily on your IP grade, the timely submission of quality deliverables throughout the semester is very important. This is a project that most definitely CAN'T be completed last minute. You will need a lot of planning up front and steady progress on your work. Also, the project will be graded based not only on functionality, but also on intuitive interface and professional appearance. More specifically, this are the grading components for the IP:
(20%) Timely high quality deliverable progress
IP-Deliverable 1: Application proposal (2-page double spaced max) describing the application to be developed. The proposal needs to be approved by the instructor.
IP-Deliverable 2: Using the Prjxx.mdb file I placed in database folder in your FTP account (which you had to download), develop and upload the MS Access database for your application. Again, it is important that you do all your work in the database file I already provided and that you leave the _test table provided in it without changes. I need this table for periodic testing of our accounts. Your database needs to have all the necessary tables described in 3 above with all the necessary primary keys, foreign keys and relationships. You should also enter at least a couple of test records in each table. The table needs to be uploaded back in the database folder of your FTP account.
IP-Deliverable 3: This deliverable is intended to help you get started and begin prototyping your application. Develop and upload to your FTP account the web hosting service the following:
Menu and Sub-Menu Pages. All onlilne applications have menus and sub-menus to help visitors navigate through the site. Stop and think for a moment how you want your application to look like. The functionality you will be implementing involves displaying, entering, deleting and modifying data from various tables in your database. Consequently, my suggestion is to have a main menu with options to either: (1) display, enter, delete and modify data and, once the user selects one of these, you can present them with a sub menu to select in which table to do this; or conversely (2) have a list of tables in your main menu for your users to select and, once the table has been selected, you can present them with a list of actions to choose (display, enter, delete, modify). Alternatively, you can create your own navigation and menu structure, but be sure that it is user friendly and easy to follow. Please name your top menu page "main.html". All sub-menus need to have navigation links to further sub-menus (if any) and links to navigate back to the parent menu and the main menu.
Login Page. Create a page called "login.html". You will use this HTML page later to log into your application with a password. For now, all you need in this page is a form with: (1) a user ID input box; (2) a password input box; and (3) a submit or login button. This button must link to your main menu "main.html" (note: this login page does not process user authentication yet, but later on in the semester you will change this to point to an ASP script that will authenticate your users and make your site password protected).
Data Entry Pages: HTML forms for data
entry into the 3 transactional
tables you implemented in your database per item 5 above. There is no need
to program the data entry scripts at this point, only the HTML forms where
the data will be inputed. Important: I suggest naming
each HTML file for each of these forms similarly to its corresponding table, with a
suffix like "Add" to distinguish it from forms for other operations (e.g., customersAdd.html) or something like that. Similarly,
I suggest naming the data fields in these forms to correspond "identically"
to your database table fields (e.g., CustomerID, LastName, FirstName).
Important suggestion: while you don't really need scripts for these forms for
this deliverable, you will need to convert these forms to ASP.NET scripts at
some point because dynamic pick lists require ASP.NET programming. So, you have
two choices: (1) you can give an extension of .html to your forms now and rename
them later to .aspx; or (2) (Recommended) give your HTML forms an extension of
.aspx. They will work fine with only HTML, but later you won't need to rename
them when you add ASP.NET scripts.
Buttons: each HTML data entry form should have at the end: (1) a submit or add button; (2) a navigation link or button to go back to the previous menu; and (3) a navigation link or button to go back to the main menu.
About Page. Create a page called about.html. Your main.html page should have a link to this page. You can keep this page blank for now, but the page must exist, even if blank. Later on, you will use this page to provide your users with all the necessary information to try and use your application (e.g., test user ID, password, brief overview of the application, special issues that require explanation, etc. IMPORTANT: it is impossible for your professor to remember all passwords and special issues for all students. You MUST provide all the necessary information for the professor and TA to test your entire site and be able to grade it.
IP-Deliverable 4: Further develop and upload all the necessary data entry forms consistent with your database design and using picklists (this is always a good thing to show your clients at early stages of the development cycle). Further details:
Continue building the forms you started for deliverable IP3. All your data entry forms should be complete by now and the names for all data entry fields should match the field names in the corresponding database tables. Again, you need to have fully developed HTML data entry forms for at least 3 tables.
Each foreign key in your database should have a corresponding picklist in the corresponding form field to be able to browse and select valid entries for that field. Since you don't know how to generate dynamic picklists with ASP.NET yet, simply list a couple of sample values in your picklists for now. You will be changing this later.
IP-Deliverable 5: Develop the necessary server-side ASP.NET scripts to display data from the required 5 tables. Suggestion: since you have already created HTML forms for data entry into 3 transactional tables, you can copy these HTML forms into similar forms for data display. This way your data display will have a similar layout and look and feel as your data entry forms. For example, if you crated a data entry form called CustomerAdd.html to add customers, you can copy this file into another HTML file and name it CustomerDisplay.html. Then modify this HTML file to display data instead of input fields. This is a very common practice.
IP-Deliverable 6: Develop the necessary server-side ASP.NET scripts to enter new data into 3 tables and delete data from all tables that don't have delete restrictions. This is where you can use the data entry forms you created in Deliverable 3 and further refined in Deliverable 4. The action parameter in the form tag needs to point to the script that will process the data entry. For example, if you have a form called customerAdd.aspx that you created to enter data, the form tag in that script should say something like action="customerAddSubmit.aspx", which is the name of the script you would need to write to process the data insert into the database table.
IP-Deliverable 7: Develop the necessary server-side ASP.NET scripts to update existing data in 2 transactional tables. Naturally, each of these updates will require: (1) a script to capture from the user the record you want to update; (2) a script to diaplay the data in that record and allow the user to modify it; and (3) a script to process the modifications after the user clicks on the submit button.
IP-Deliverable 8: Class presentation. In your final work, you must include CSS in all your pages and have a total of at least 2 client-side scripts in JavaScript as described above. You will make a brief demonstration of your application to your classmates.