ICTWEB502 – Create Dynamic Web Pages
ICTDBS502 – Design a Database
COURSE : ICT50118 Diploma of Information Technology
subject: #ICTWEB502 – Create Dynamic Web Pages
#ICTDSB502 – Design a Database
Win Vet High School is located in the heart of Sydney. It services students from Year eight (7) to Year twelve (12) in the local surrounding community.
Win Vet High School has hired you to create a front-end administrative website for updating student details to a database. The following are some notes that you have made following initial discussions with the principal and senior educational staff at Win Vet High School.
Based on the requirements you believe that at a minimum the following web pages need to be developed:
• A login web page
• A student web page
The website is to be written in HTML5, CSS, php using a MySQL database to store data. All web pages should be located within the same directory with any images to be stored in a sub-directory called “Images”. You have been supplied with an image called “Logo.png” which must be incorporated into all web pages. This is the high school’s logo as well as create a favicon to use for the website to ensure live presence.
Login web page
The Login web page should be the first web page that the user encounters when they visit the website. It is to contain a username and password fields and a login button to authenticate the user. The password field should also be masked.
Required value Validation required
Username Required. Must be at least 6 characters.
Password Required. Must be between 8 and 12 characters
Student web page
At the top of the web page a personalised message should be displayed to the user. This message should read “Welcome <<user>>”, where <<user>> is the users name. This name should be retrieved from the stored value that was create from the users being able to use a registration form you will create. This will be displayed after the user logins into the system using the Login page.
Create different themes for different user types. An example is one theme for every guest user (a user that can access the website, student user and an administration user.
For each theme you need to create a skin and CSS file. The skin file should apply styling to the CSS styling each of the web pages while the CSS should apply styling to the HTML elements on the web page. The settings in the skin and CSS files have been left to you but there should be a visible difference between each theme based on its title.
Under this should be the functionality to be able to retrieve, add, edit and delete a student.
Each student should receive a unique student id from the system when they are first added. This should be provided by a New button. Once clicked the system should look up the current highest student id, add 1 to it and then use this as the student id value for the new student. The student id field should be between 1,000 and 10,0000.
To add a student, the user should click the Add button once they have filled out all of the relevant information about the student. At a minimum the user should provide the following information as shown in the following table for
a new student.
These details should be validated and then stored using MAMP MySQL database table so they can be accessed.
To retrieve, edit or delete an existing student the user should enter a valid student id, and then click an appropriate button (Retrieve, Update and Delete) to undertake the operation. Validation should occur to ensure that the student id exists for the student that is to be retrieved, deleted or have their details updated.
As well as allowing a user to be able to change a theme the website should highlight which control the user is currently hovering the mouse cursor over. That is, when a user moves the mouse cursor over a control it should be highlighted in a different colour that none of the themes implement. Once the cursor is moved away from the control the highlighting should disappear.
Task 1 – Create, Backup and Import Database
1. Design database according to organisational requirements – this will be created from within Workbench from the ERD model created in A3.
2. Reverse Engineer the Model in Workbench into .sql file
3. Backup Database. Save to your computer.
4. Open MAMP
5. Import your database into MAMP.
6. Create a table that holds user data to enable users to login, ensure that it has one field that is called level. The reason for this is as follows;
• Admin = 1
• Staff = 2
• Students = 3
7. Incorporate data into your database e.g., user information and other information from your findings in A2.
8. Download Data Dictionary and put into A3.
9. Determine connection with the website with Dreamweaver – a view of the database will be displayed with Dreamweaver – Point 6 in A3.
10. Review A2, Task 3, A3, Task 2 Point 7 for the pages that are required for the database as well as the website.
11. Design the required queries and output reports that are required by the client and the website e.g., forms, web page to view all contents of a database from point 10 above.
12. Compare the physical design of the database against the conceptual model and user-needs analysis to determine that you have included all the requirements by the client and the website pages.
13. If there are any differences found in the cross analysis in point 10 above and the creation of the pages that are required by the website, incorporate the changes into physical database design.
14. Backup the database in MAMP and put in a folder in your website hierarchy called Database and/or Backup.
15. Document the backup and restoration procedure for restoring and backup up of the database in MAMP
Task 2 – Test and Validate Website
16. Debug code and confirmation of securing a website using cyber security protocols and procedures – Refer to the security requirements for the database also in point 6.
17. Test your websites functionality and content across a variety of browsers and devices.
18. Evaluate web page functionality results and amend as required – use W3C’s website (implement the W3C’s Logo) and well as physically test each web page to ensure that each page displays as it should. Keep a record of this test as
19. Confirm required dynamic content functions according to task requirements – determine login, access to the database, login in under different users with different permissions and other pages that are dynamic – this can be used in the table above.
20. Submit your website with a backup of your database and your backup and restore procedure to your Trainer and obtain feedback.
21. After obtaining feedback – if required, finalise your website and obtain sign-off from your trainer.