In this project, you will create a dynamic, data-driven customer data management web app using HTML5, CSS, JavaScript, PHP, and MySQL database.

ITEC 3280 Web Programming – Final Project

In this project, you will create a dynamic, data-driven customer data management web app using HTML5, CSS, JavaScript, PHP, and MySQL database. The application must incorporate best practices and standards for a Web-based information system.

Part I – MySQL Database (20pts)

By using phpMyAdmin in the XAMPP, create a MySQL database (named ‘shoppingdb’) with the following tables:

1. Logins

The logins table contains two fields:

User ID (VARCHAR (50), user_id)
Password (VARCHAR (50), password)

            Then add some fictitious userid and password.

• Customers

The customers table contains ten fields:

User ID (VARCHAR (50), user_id)

First Name (VARCHAR (50), first_name)
Last Name (VARCHAR (50), last_name)
Address (VARCHAR (100), address)
City (VARCHAR (50), city)
State (VARCHAR (50), state)

Zip (VARCHAR (10), zip)
Email (VARCHAR (100), email)
Gender (CHAR (2), gender)

Phone (VARCHAR (20), phone)

Then add some fictitious data (user_id in logins table and user_id in customers table should be the same).

Part II – Web Development (HTML and CSS) (20 pts)

This web application will consist of four web pages. Each page will need to meet the following requirements:

1. Research and determine optimized web page layout dimensions based upon current browser usage statistics. The layout dimensions should be used on each page.
2. Use CSS techniques (no tables or frames) to create a page layout template. This template should be used for each page.
3. The document must conform to HTML 5 and CSS standards. Use the W3C validator (http://validator.w3.org/) and the CSS validator (http://jigsaw.w3.org/css-validator/) 
4. Site must be tested for accessibility issues to conform to section 508 and W3C accessibility guidelines using the instructor’s specified tool.

Part III – Web Scripting (PHP and JavaScript) (60 pts)

Create the following pages based on the HTML/CSS template created in part II. Add the following PHP/JavaScript functionality:

• login.php

Create a login page that requires the user to input a user name and password. When the “Login” button is clicked, the input is validated against the values stored in the “logins” table. If the user name and/or password is incorrect, error messages are displayed on the page. If the user name and password are correct, the user is redirected to acccount.php. In addition, the login page contains a ‘register’ link so that a new user can register. If the register link is clicked, the user is redirected to register.php.

• account.php

Create an account detail page that displays the following customer profile using appropriate HTML controls:

User ID (span)

First Name (span)
Last Name (span)
Address (span)
City(span)
State (span)

Zip (span)
Email (span)
Gender (span)

Phone (span)

In addition, it includes an edit button, which redirects the user to profile update page (edit.php) when it is clicked.

• register.php

Create a new customer register page that contains appropriate HTML form controls to allow the user to input the following user data:

User ID (textbox)

Password (textbox)

First Name (textbox)
Last Name (textbox)
Address (textbox)
City(textbox)
State (drop down list)

Zip (textbox)
Email (textbox)
Gender (text box)

Phone (text box)

Submit Button

When the submit button is clicked, a javascript function is called to validate the user input. The javascript validation routine should ensure that all fields are input, gender should be ‘M’ or ‘F’ in uppercase, email should contain the ‘@’ and at least one dot (‘.’). (You may use the following simple email regular expression, /^\w+([-+.’]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/).

If all data is correct, the date is inserted into the ‘logins’ and ‘customers’ tables. If any input is incorrect, error messages should be displayed within span tags to the right of the form controls.

• edit.php

The edit.php page shows all of the user data associated with the current user id. The user data should be displayed within appropriate form controls (password should be displayed as stars or dots). The page also includes ‘Update’ button.  If the ‘Update’ button is clicked, any changes to the data are updated to the ‘logins’ and “customers” tables.

• The site must utilize unobtrusive coding. All JavaScript should be coded in an external file .js file. All JavaScript files should include comments and other appropriate documentation. All JavaScript routines should include appropriate error handling.

1. Export the ‘shoppingdb’ as SQL format and turn it in with other files (submit a zip file).

 

Looking for a Similar Assignment? Order now and Get 10% Discount! Use Coupon Code "Newclient"