CSG2431, Semester 2, 2016 Assignment 1 Page 1 CSG2431: Interactive Web Development Assignment 1: Basic Scripting/Database Website (Concert Bookings) Assignment Marks: Marked out of 25 (25% of unit) Due Date: 12 September 2016, 9:00AM Assignment Overview In this first assignment, you will build skills in both client and server side web development, particularly in the essential areas of form processing, form validation and database interaction. You are required to build a MySQL database driven XHTML and PHP website to manage online booking for free concerts. People who wish to attend a concert (known as "attendees") can register on the website and make bookings, and the administrators of the website can log into the website to manage the details of the concerts. This assignment forms the basis for assignment two, in which you will add new features to the system and apply more in-depth business rules. Public Section of the Website People who visit the website without being logged in can only access the following:  A registration page, where people can register an attendee account  An attendee login form, containing a text field for a mobile number, a password field for a password and a submit button  A list of upcoming concerts  Only concerts that have not yet happened should appear in the list  Order the list by the concert dates  An admin login form, containing a text field for a username, a password field for a password and a submit button These things do NOT all need to be on the same page. You are welcome to design all sections of the website however you like, as long as the functionality is implemented. An example of a possible layout has been provided on the next page. This unit is focused upon the functional aspects of web development rather than the creative aspects, so you are not required to create a website that looks pretty.CSG2431, Semester 2, 2016 Assignment 1 Page 2 Example of possible layout of the public section of the website Attendee Registration Before a user can log in as an attendee, they must fill out the registration form to register an account. The registration form must include the following fields:  First name and surname  Gender  Date of Birth (in YYYY-MM-DD format)  Mobile phone number  Password (and a password confirmation field) All fields are required, and the form should be validated using BOTH JavaScript and PHP – make the validation as strong as possible, checking for things such as blank fields, a numeric mobile phone number and a correctly formatted date of birth. Be sure to adhere to the date of birth format specified and use the "DATE" data type to store it in the database. If the date of birth is appearing as "0000-00-00" in the database when an attendee registers, then the insert query is not providing the date in an appropriate format. When the form is validated successfully, the details should be inserted as a row in an "attendees" table in the database. Attendees can then log in to the website via the attendee login form using their mobile phone number and password. For this reason, your PHP validation will need to check that the mobile phone number supplied in the registration form has not already been used by another attendee.CSG2431, Semester 2, 2016 Assignment 1 Page 3 Attendee Section of the Website The page that attendees are taken to after logging in must contain the following:  Their name, e.g. "Welcome, Joe Bloggs" or "You are logged in as Joe Bloggs"  A link to log out  A list of upcoming concerts  Only concerts that have not yet happened should appear in the list  Order the list by the concert dates  Beside each concert there should be a link for the attendee to make a booking  A list of the upcoming concerts that they have bookings for  Only concerts that have not yet happened should appear in the list  Order the list by the concert dates  Beside each booking there should be a link for the attendee to cancel their booking  If the attendee has no bookings, display a "You have no bookings." message Example of possible layout of the attendee section of the website When an attendee clicks the "Book" link next to a concert, their mobile phone number and the id number of the concert (both stored in the database) should be inserted as a row in a "bookings" table in the database.CSG2431, Semester 2, 2016 Assignment 1 Page 4 Each attendee can only have one booking for each concert. An error message should be shown if they try to book for a concert they already have a booking for. You can also ensure that the "Book" link does not appear next to concerts that they already have a booking for. The details of concerts that the attendee has made bookings for should appear in their list of bookings. Clicking the "Cancel" link next to a booking deletes the appropriate row in the "bookings" table in the database. Use sessions to ensure that the attendee functionality works properly: 1. When an attendee logs in, store their mobile phone number as a session variable 2. Check that the attendee mobile number session variable exists and is not empty in order to allow access to pages and functionality that require an attendee to be logged in 3. Use the session variable when adding and cancelling bookings 4. Destroy the session when the logout link is clicked Admin Section of Website The details of the website administrators are also stored in the database, in an "admins" table. You do not need to create a registration form for admins – simply add a few of them directly into the database. The only details that need to be stored about admins are their username and password. Admins log in to the website with their username and password using the admin login form. Once logged in, they are taken to an admin-only section of the website that must contain the following:  A link to log out  The ability to manage bands. This involves:  Viewing a list of the bands that are currently in the database  Adding new bands to the database  Editing the details of bands in the database  Deleting existing bands from the database  The ability to manage venues. This involves:  Viewing a list of the venues that are currently in the database  Adding new venues to the database  Editing the details of venues in the database  Deleting existing venues from the database  The ability to add concerts  To add a concert, a band and a venue must be selected from dynamically-generated drop down lists, and a date and time must be specified  In this assignment, admins do NOT need to be able to edit or delete concerts  Admins should also be able to view all concerts that have been added, even those which have already occurredCSG2431, Semester 2, 2016 Assignment 1 Page 5 Before any concerts can be added, bands and venues must be added to the database. These are stored in two very simple database tables:  A "bands" table, consisting of a "band_id" column and a "band_name" column  A "venues" table, consisting of a "venue_id" column and a "venue_name" column Admins must be able to view lists of existing bands and venues, add new ones, edit the names of existing ones, and delete them. Example of possible layout of the manage bands page in the admin section of the website To add a new concert, the admin must select a band and a venue from dynamically-generated drop down lists. They must also enter a date (in YYYY-MM-DD format) and time (format not important). Make sure that the validation of the add concert form checks that a band and a venue has been selected, and that the date of the concert is in the future (equal to or later than the current date). Example of possible layout of the add concert page in the admin section of the website When a concert is added, a new row is inserted into a "concerts" table in the database, containing the id number of the band, the id number of the venue, the date and the time.CSG2431, Semester 2, 2016 Assignment 1 Page 6 Use sessions to ensure that access to the admin pages and functionality is controlled: 1. When an admin logs in, store their username as a session variable 2. Check that the admin username session variable exists and is not empty in order to allow access to pages and functionality that require an admin to be logged in 3. Destroy the session when the logout link is clicked Business Rules Within the website, there are a number of business rules that must be adhered to. These are all common sense rules that ensure that the website runs smoothly and effectively.  Band and venue names must be unique (e.g. cannot have two bands with the same name)  Admins cannot delete bands that are linked to any concerts (upcoming or in the past)  Admins cannot delete venues that are linked to any concerts (upcoming or in the past)  Admins must confirm their action when they try to delete a band or venue Website Structure & Functionality Summary As detailed, the website contains a public section, an attendee section and an admin section. The attendee-only and admin-only pages and functionality must be restricted to only allow access to the appropriately logged in users. Ensure that your website provides convenient, consistent and logical options to navigate from page to page. The following diagram illustrates the structure of the website and its functionality. As long as you implement the functionality described, you are welcome to design the layout of the pages however you desire. Public Section  Upcoming concert list  Attendee registration  Attendee login  Admin login Attendee Section  Logged in attendee's name  Upcoming concert list and book links  List of current bookings and cancel links  Logout link Admin Section  List, add, edit and delete bands  List, add, edit and delete venues  Add concerts and see full concert list  Logout linkCSG2431, Semester 2, 2016 Assignment 1 Page 7 Database Structure The MySQL database storing the data must be a well-structured and efficient. A suggested structure is presented below. If you wish to deviate from this structure, please discuss it with your tutor. It is recommended that you use auto-incrementing integers as primary keys for the "bookings", "concerts", "bands" and "venues" tables. Mobile phone numbers are an appropriate primary key for attendees, and usernames are an appropriate primary key for admins. Consider the following sample content if you are having difficulty understanding how data is stored in a database. Primary key columns have been given a grey background. attendees table: bookings table: mob_phone first_name surname … booking_id mob_phone concert_id 111111111 Joe Bloggs … 1 222222222 2 222222222 Sue Woods … 2 111111111 1 concerts table: concert_id band_id venue_id concert_date concert_time 1 1 2 2016-10-02 8pm 2 2 1 2016-09-26 7pm bands table: venues table: band_id band_name venue_id venue_name 1 Big Beats 1 Camboon Hall 2 The Ladder Coins 2 The Club Based on this data, you can see that Joe Bloggs has a booking for the Big Beats concert at The Club, and Sue Woods has a booking for the Ladder Coins concert at Camboon Hall. Ensure that all fields in your database tables use the most appropriate data type to efficiently store the data they require. Make sure that all dates use the "DATE" data type in MySQL, and that you adhere to the YYYY-MM-DD format. This will make some of Assignment 2 easier to complete. attendees (each row stores the details of an attendee) admins (each row stores the details of an admin) bookings (each row stores the details of a booking. This involves an attendee's mobile phone number and the id number of a concert) concerts (each row stores the details of a concert. This involves the id number of a band, the id number of a venue, a date and a time) bands (each row stores the name of a band) venues (each row stores the name of a venue)CSG2431, Semester 2, 2016 Assignment 1 Page 8 Sample Content / Submission of Deliverables You are free to invent bands and venues, or use the names of ones you like. Make sure that you include at least 3 bands and 3 venues. Make sure that you include at least 5 concerts, and that at least one of them has a date which is in the past (i.e. the concert has already occurred). Once your assignment is complete, re-read the assignment brief to make sure you have implemented everything that is asked for. Then, submit the following in a zip/rar file:  The folder inside your htdocs folder which contains your assignment code files. Make sure you have used relative paths for any links in your assignment – I should not need to deploy your assignment into the same folder structure that you developed it in when marking  An SQL file of your database, exported using phpMyAdmin (see this video)  A text file named readme.txt containing the login details for all users in your database, and references for any code or resources you have used Include your name and student id in the file name of the zip/rar file. Upload the file to the Blackboard assignment submission area on or before the assignment due date and time. NOTE: I will be marking your assignments with the same XAMPP setup used for this unit. I should be able to simply drop your code folder in my htdocs folder and import your database file and start marking. Assignments are marked AS IS – if there are strange configuration issues or code errors that cause some or all of the functionality to fail, marks will be subtracted accordingly. Always test what you are planning to submit, particularly if you have used a different environment than XAMPP. Referencing, Plagiarism and Collusion Web development often relies on new developers finding examples of code that performs a task that they need, so that they can understand how it works. Many websites provide freely available code snippets, functions and tutorials. Learning from and using these are perfectly legitimate, as long as it is done within the university rules. Blackboard contains links to guides on plagiarism, referencing and academic misconduct. These will guide you as to how much you can use and how to use it, and it goes without saying that ANY code you use (even if you modify it) must be fully referenced. Any code or interface features found in your assignments that have not been referenced, or have been written by someone other than yourself will typically attract zero marks and a report of academic misconduct on your university record. Also, while helping your friends and learning together is great, be careful about working too closely with others on your assignment. NEVER SHARE YOUR CODE – EVEN AFTER THE DUE DATE. If multiple people submit code which is identical or almost the same, it is collusion. Collusion will be penalised and result in a report of academic misconduct on your university record. It is important that you are the author of your code, and understand it. If you are uncertain about plagiarism, collusion or referencing, simply email your tutor, lecturer or unit coordinator and ask.CSG2431, Semester 2, 2016 Assignment 1 Page 9 CSG2431 Interactive Web Development Assignment 1 Marking Key Marks Allocation Criteria Marks Allocated Public Section of Website All aspects of public section of website are well implemented and working. Includes list of upcoming concerts, login functionality and attendee registration. 3 Attendee Section of Website All aspects of attendee section of website are well implemented and working. Includes displaying attendee name, viewing upcoming concert list, and making/cancelling bookings. 5 Admin Section of Website All aspects of admin section of website are well implemented and working. Includes managing bands and venues, adding concerts and viewing full concert list. 5 Client & Server Side Form Validation Checking that all forms contain the required information and the correct data types/format, and that any errors in validation are handled by the system appropriately. 3 Session Based Access Control & Use of Session Variables Sessions and session variables used to control access and store necessary data. 3 Business Rules All business rules are implemented and enforced in an efficient and effective manner. 3 Extra Features & Advanced Solutions These marks are awarded for any extra features, advanced solutions and other miscellaneous elements which demonstrate a greater level of understanding. 3 Total 25