o use of ids and classes names
o demonstration of page layout, illustrating multi-colunm layouts with flex-boxes
o MySQL "db" folder
o There should be a sub-folder in your website folder called "db" that contains a text file "db.sql" that will create all the tables and test data needed to setup the MySQL database your web application uses
- This file should be created using the MySQL ‘export' command
o Standard users to aid testing of your project
o please connect to your database (e.g. via INCLUDE_dbConnect) with the following MySQL user:
- username: matt
- password: smith
o please define at least 2 admin user for your system as follows:
- username: admin matt
- password: admin smith
o PHP
o There should be good use of layout and comments so that your PHP files are easy to understand
o Your PHP files should follow a consistent NAMING convention
o you may wish to simplify the complexity of page content through the careful use of includes and page forwarding
o MVC - Model - View - Controller architecture
- Ideally using Twig, but certainly separating view from logic, and illustrating the use of re-usable database functions in a separate ‘model.php' file
The website should meet the following Functional and Usability requirements:
• user knows on every page which WEBSITEthey are visiting
• user knows on every page which PAGEthey are viewing in the web site
o NOTE this needs to be conveyed to the user by more than making them read heading/text on each page: e.g. navigation bar item for current page highlighted in some way
• user can easily navigate around the web site
o e.g. navigation bar always visible
• on every page the user has links to the home page and other important pages on the web site
o i.e. the user should NEVER have to use the browser ‘back' button
• All pages on the website have consistent look and feel, e.g.
o structural layout (number of columns, width of page elements etc.)
o visual presentation (use of colour, fonts, font sizes)
o the nav-bar should not ‘jump' around when the user visits different pages
• login information
o the user knows at all times if they are logged in (and with what username)
o if logged in, the user can on every page choose to LOG OUT
o if not logged in, theuser can on every page choose to LOG IN
• error messages
o if an error occurs, the user should be sent to a user-friendly error page
- stating (in simple wording) what the error was
o if attempting to access a page for which they are not authorized, such access should be prevented, and the user should receive a polite and meaningful message to that effect
• form values
o the user should be prevented from entering invalid details (e.g. they should not be invited to type in the ID of a record to edit - they should be presented with clickable text/menu items that only offer valid values)
Defense movie requirements
In addition to any on-campus demonstration, explanation and defense of your website in person, you are required to submit a video ‘screencast' with voice-over recording, in which you demonstrate the website, and explain and argue its quality and how well it has met the project requirements. The video should include both:
• seeing you navigate to different pages in the role of the two types of user (customer and administrator), and to interact with the site (changing cart contents, CRUD edits to DB etc.)
• and also show (and verbally describe) the viewing of page source code, and talking about the technical aspects of various PHP source code etc.
The maximum duration of your movie should be 5 minutes (the free Jing software limitation). Within this time you should demonstrate navigation around your website, while speaking about the quality aspects of the site and how your work meets the various project requirements.Part 1 - Website DESIGN
1 Overview of project design requirements
The project design is a document that should record and describe the design decisions you have made, concerning the 3-tiers of your database driven web application:
- Tier 1: User interface
o i.e. what will the web pages look like to the user
- Tier 2: System Logic
o i.e. what the different parts of the system should do
- Tier 3: Database model
o the data storing the current "state" of the system at any point in time
NOTE
The components of your website design are based on software engineering principles relating to the importance of designing (and improving the design) of software systems, before beginning to invest time into program implementation. Thinking carefully about your system design, and the relationships and sequence of different pages and data, will reduce the likelyhood of problems during development, and improve the structure and quality of your final system.
You are recommended to design in a simple and straightforward way, and to incrementally develop your design and system code. So start with the straightforward pages and comonents, and then design each remaining component step-by-step.
2 Project Design: (Tier 0) system overview
You should provide an overview of the contents of the system you have designed. This is a straightforward list (file name and 1-line summary) forALLthe different files the final system will contain, categorised into the web pages (public and secure), and other files (images, css, etc.), with a suitable folder hierarchy.
website/
(public pages - no login required)
index.php // home page logic
about.php // about page logic
dvdList.php // logic to to retrieve DVD list from DB and get ready to display
error.php // report errors to user
secure_login.php // login form logic (check if already logged-in)
view/ index.php // HMTL and echos for home page
about.php // HMTL and echos for about page
login.php // HMTL and echos for logic form page
etc. there will be a ‘view' page for each page that outputs HTML ...
INCLUDE_html_header.php // HTML header for every page
INCLUDE_html_nav.php // HTML for the navbar of every page
INCLUDE_default_nav_styles.php // PHP default (empty) CSS styles for nav items
(there may be some INCLUDE files for code header/footer HTML duplicated for every page in the website)
admin/ (secure pages - login via username / password required)
secure_processLogin.php // process attempt to login as admin
secure_processLogout.php // process logout action
admin_home.php // logic for admin home page
admin_editDVD.php // logic for admin edit DVD form page
admin_processEditDVD.php // logic to process attempt to modify DVD record
admin_addDVD.php // logic for create new DVD form page
admin_processAddDVD.php // logic to process new DVD record details
view/
admin_home.php // HTML and echos for admin home page
admin_INCLUDE_html_nav.php // HTML nav bar to include for all admin pages
admin_editDVD.php // HTML and echos for DVD edit form
etc.
include/
model.php // database model functions
css/
basic.css
images/
project1.jpgetc.
company_logo.png
3 Project Design: Tier 1 - User Interface Design (set of HTML pages& CSS)
Since all interaction with your system will be via HTML web pages, you need to design each of the pages the user will see. Create each of the web pages as an XHTML file.
NOTE: Every page should be a PHP page, even if it only contains HTML.
Static pages (e.g. the Home Page, the About Us page) can be created just as they will appear in the final system.
Dynamic pages (e.g. database generated Product List pages, Error pages displaying different messages) can be created with sample content "hard coded" into them. For example for a product list page simply create an HTML page containing the text and images for at least 2 products.
NOTE:
• Every FORM must specify whichPHP page form data to be sent to by a correctly defined "action" attribute
• Every page should display as the user will finally see them, so shopping cart pages, Admin pages listing products etc. must all have hard-coded example data, so you demonstrate you have DESIGNED the ‘view' for all of these pages in your website
• LOGIC pages do NOT DISPLAY TO THE USER, so these do not need to be coded up in your User Interface design (but will be described in your LOGIC design)
o Although you might want to just have each logic page ‘include()' your HTML page, so that your interface
o So that your can progressively enhanace your UI design files to slowly become your final website files
4 Project Design: Tier 2 - System Logic Design
The system logic for your web application consists of the different pieces of computerprogramming. These include:
- program code in PHP files
- any PHP object-oriented classes you may implement
o NOTE: There is no requirement to use PHP classes for this project, however, if you have learned about classes in PHP you may find they simplify your coding...)
o An example PHP class is included in the sample eVote-DVD-secure website ...
Each of these files will be listed in your system summary. Your system logic design is a straightforward description of what program code will do in each file that contains some programming. The system logic descriptions will become the COMMENTS of your code
For PHP pages please describe the sequence of the HTML/code actions and any HTML (although ideally all the HTML will be output via the corresponding ‘view' files). You may wish to go into detail about important variables and functions as well (e.g. the use of values stored in superglobals like $_SESSION).
You need to describe the HTML/code actions for each page that will contain some PHP/JavaScript programming.
An example of the logic design for a page is as follows:
- dvdList.php
o try/catch for database work
- create statement object for sending SQL messages
- define SQL query
- send query and get reference to sequence of records resulting from query execution
- loop to display details of each record in ResultSet
• retrieve fields from current record
• convert voteAverage to an integer with a "%" sign
• get image file name corresponding to number of stars
• (some HTML - to displaytable row for each DVD record)
o catch and process any exceptions
o
o set varaibles for page title and nav current page style
o include HTML view files
NOTE - if you are creating LOGIC-only pages, they will contain no HTML, since they will do their logic and then forward/redirect to the appropriate page based on the outcome of the logic.
5 Project Design: Tier 3 - Database Design
The database design for your system is a standard database description:
- Entity-Relationship diagram
- A description of each table
o Name of table
o A sentence or two summarising what the table is to store
o A list of the table attributes (defining which attributes are primary and/or foreign keys)
o At least 2 rows of sample data for each table
- A description of each relationship between tables
An example of a table description for the "DVD" table from the eVote_DVD_secure application follows.
- Table name:
o DVD
- Table summary:
o Each record records the details for a DVD product
- Attributes
o id (PK) - integer
- unique ID for each DVD record (auto increment)
o title - string length 20
- title of DVD
o category (FK) - stringlength 20
- type of DVD (horror, sci-fi etc.) - must be one of values from table DVD_CATEGORY
o price - real (2 decimal places)
- price of DVD
o voteAverage - real (2 decimal places)
- average vote value, a percentage 0.00 - 1.00
o numVotes - integer
- total number of votes to date
- Sample data
o Id=7, title=Help, category=horror, price=9.99, voteAverage=0.55, numVotes=24
o Id=10, title=Titanic, category=romance, price=12.99, voteAverage=0.88, numVotes=123