Reference no: EM133928357
Web Technologies
The objectives of this assignment are as follows:
To exercise your ability to create web pages using HTML and CSS.
To transform the XML documents from Assessment 2 (Web-Based Assignment 1) into HTML using PHP.
To test your skill in deploying a website in a self-hosted server environment.
To evaluate your expertise with JavaScript for client side processing.
1. Outline
Following the success of the initial website launch, the FeverGamez board have decided to expand the website to faciliate selling second-hand products submitted by customers from all over the world. More precisely, your project is now to extend your website to allow people to complete a form listing their second-hand products with all the details required by FeverGamez. Several website improvements should also be included. Get expert online assignment help in the USA.
Your website should still be be simple, friendly and attractive. This can be achieved by satisfying the requirements and completing the tasks in the following sections:
Section 2: General Requirements
Section 3: Web Server Setup and Website Import
Section 4: Category Pages
Section 5: Data Collection Page
Section 6: Responsive Web Design
2. General Requirements
2.1 Web Server Requirements
Your website must run on an Apache web server which uses PHP to implement the server-side behaviour.
Your website must maintain a proper directory. All files must be stored in a directory named fevergamez. For clarity, all images included in the website must be stored in the fevergamez/data/images directory; all xml files included in the website must be stored in the fevergamez/data/xml directory; and all template files included in the website must be stored in the fevergamez/themes directory. You may include additional directories according to your discretion.
2.2 HTML Requirements
All the HTML pages (generated using PHP) that form your website should satisfy the following:
Coded according to the HTML Living Standard.
Contain the full HTML document structure, i.e., include <!DOCTYPE>, <html>, <head>, <meta>, <title> and <body>.
There should be complete navigation capabilities across your website, such that:
Each webpage should contain hyperlinks to every other webpage.
The hyperlinks are implemented using relative URLs.
The footer of each page should contain a copyright statement including your name, student number, email address, and degree.
b
In general, in order to draw your target audience, make sure that your website considers factors such as navigability, content layout, element positioning on screen, text size, colour contrast, readability, consistency, and accessibility. All visual formatting of the Web site will be implemented using Cascading Style Sheets (CSS). You will be using external style file, document-level style sheet, and inline styles in this assignment.
Create at least one external style file named style.css. This external style file should achieve the following CSS requirements to all your web pages:
Left and right side margin of at least 30px for the main content (body) of all webpages. Note that this is improved from the previous assignment to cater for responsive design.
A nice background for the webpages. The text must be readable with the background.
The text colours of a link before they are visited, after they are visited, and during a user action must be different from each other. The link must be italicized when you move the cursor over them. Note that this is improved from the previous assignment to cater for responsive design.
Include at least one id and one class selector.
Hooked to at least one <div>, used to provide some interesting styling (your choice of borders, background, floating alignment, etc.)
Hooked to at least one <span>, used to provide some formatting (e.g., a colour or font change) for a few words of text.
You must also include at least one document-level style sheet and at least one inline style to the Homepage (index.php). Note that document-level style sheet is used to apply styles that are unique to the particular page, whereas inline styles should only be used for one-off visual effects.
3. Web Server Setup and Website Import
3.1 Web Server Setup
This subsection involves setting up the Apache web server with XAMPP. This could be easily achieved by following the steps outlined in Task 2 of Lab 6.
3.2 Website Import
Upon completing subsection 3.1, you will import your website from Assignment 1. This can be achieved through the following steps:
Create the fevergamez/data/images directory. Move all images in the website to this directory. Remember to change the image src attributes in your HTML code to point to the new location.
Create the fevergamez/data/xml directory. Move all xml files in the website (xmltemplate.xml, xmldata1.xml, and xmldata2.xml) to this directory.
Create the fevergamez/theme directory. Copy your external stylesheet style.css into this folder.
In the fevergamez/theme directory, create a PHP template file called template.php. In this file, create a template that links to the external stylesheet and data of your HTML pages. [Hint: refer to Lab 7 Task 1.]
Convert all HTML pages from the previous assignment (index.html, about.html, and contact.html) into PHP files (index.php, about.php, and contact.php) such that they will be generated using the PHP template (template.php). [Hint: refer to Lab 7 Task 1.]
4. Genre Pages
4.1 Renaming XML Data Files
Rename your two XML files (xmldata1.xml and xmldata2.xml) in Assignment 1 according to the genre of the product. For example, if xmldata1.xml hosts products of the adveture genre, rename it to adventure.xml.
4.2 PHP Template for Reading XML Data
You will be writing a separate PHP template named xmltemplate.php which is stored in the fevergamez/theme directory. This template file will dynamically generate HTML pages (via query elements) from your two XML files (renamed xmldata1.xml and xmldata2.xml). The HTML pages that are generated should fit in with the style of the rest of your website (i.e., similar formatting, colors, etc).
Note that all of your XML files have the same tags and DTD. Thus, you only need to make 1 PHP template (xmltemplate.php) which allows the creation of a HTML page containing:
A level 1 heading which mentions the genre.
List of all the products in the genre, including information in your XML files such as:
Name
Description
Pricing
Search tags
Reviews
Any picture(s) of the product
URL of a webpage related to the product.
Note that you are allowed to modify your XML files to cater for changes you need. [Hint: refer to Lab 7 Task 2.]
4.3 PHP File to Access Genre Pages
Create a PHP file named genre.php which is stored in the fevergamez directory. This is the "landing" page that will direct visitors to the correct genre pages by reading the name of the XML file from the GET parameters of the URL. As an example, to access the adventure genre HTML page. In this case, the genre.php file is retrieving the query string 'adventure' from the URL. [Hint: refer to Lab 7 Task 2.]
Next, you need to include and update the navigation links on your website to enable access to these genre pages. Carefully note that all genre pages link to the same genre.php file, with subtle differences governed be the query string ?genre= at the end of the URL.
5. Data Collection Page
Creata a Data Collection page named collection.php, where users can list and provide details about their second hand products. This will be done as a form, which sends the information as a POST request to a script submit.php located in the fevergamez directory when they click the "Submit" button. The following things need to be included on the page.
An appropriate level 1 heading.
Information about the person submitting:
Their first name.
Their last name.
Their email address.
A binary choice question on whether they have submitted a product before. Apply a default response here.
Information about the product - Include all information in your XML template, with the following additional requirements:
Required tags and attributes (elements with no modifiers or the '+' modifier, and attributes with #REQUIRED) should be required fields on your form before it can be submitted. These fields should be visually marked to the user with an asterisk '*'.
A dropdown box for the user to indicate the genre of the product. The dropdown box should list all existing genre.
A checkbox to indicate whether the user has read the terms and conditions. This checkbox should be required before the form can be submitted.
There should be buttons to add search tags for each product as per the XML. Each individual item should also have a button to delete it (there is a minimum of one, so the delete button of the last remaining item should be removed). Use JavaScript to implement the behaviour of these buttons. [Hint: refer to Lab 8 Task 4.]
If any reviews are entered, each review must contain the phrase "x out of 5 stars" (where x must be a number from 0 to 5 allowing a single decimal place, i.e, 0, 1.1, 3, and 4.5 are all valid). Use JavaScript to check this when the submit button is clicked. The form should not submit if this phrase is not present in each review, and an error message should be displayed to the user. Remember, there could be zero reviews. [Hint: refer to Lab 8 Task 2 and you may use GenAI tools to generate the regex string for check only.]
Buttons to submit and clear the form should be present.
6. Responsive Web Design
The site staff want the website to be well-designed, and easily accessible for both humans and computers (especially search engines). To that end, the website must look visually appealing across a wide range of devices, and use a consistent style independent of which web browser is used.
All webpages should use a responsive layout, that grows and shrinks when the screen size changes. The website should also use a different layout for small screens (and specifically mobile devices) and you must achieve this by using media queries in your style.css. You should set the viewport meta tag in your template files to indicate that your webpages are mobile-friendly. [Hint: refer to Lecture 9.]
In addtion, you must optimise your website. This involves:
Optimising images such that overly large files are not unnecessarily loaded for small display sizes. All images should be in a compressed, efficient format such as webp or avif. You can use an image compression service to optimise your images. All images must include a descriptive alt attribute that describes the image for screen readers.
Minimizing content layout shift by setting explicit widths and heights for images.
7. [Bonus Task] Form Submission Script
You will write a PHP script submit.php to receive and process the data collection form (collection.php) for new products. Data from the form will be written to existing XML files according to the following specifications:
Once the script has confirmed that the required genre file exists, the XML file should be opened, and the new product data should be added. The resulting XML file MUST be valid (that is, it must validate).
At the end of a valid submission, the user should be redirected to the appropriate genre page showing their new product listed. A form submission success message should be displayed on this page to the user.
8. Coding Style
All of your work (HTML, XML, CSS, PHP, and Javascript) should be validated and valid (meaning no errors). Use the following for validation:
Your HTML, XML, CSS, PHP, and JavaScript codes must be neat, clear, and indented. For all code files, you must include comments at the top of the file, stating the name of the file, the name of the author and the date the file was created. You must also at least include comments in your code files which addresses the marking critera.
Milestone 1
The first milestone aims to check that you have completed your setup of the Apache web server and that you have started to import your website from Assignment 1.
The following will be checked:
The directory structure of your virtual host.
The website is accessible
The default webpage for your website should be your homepage from Assignment 1.
All webpages in your website should be loading all linked resources (hyperlinks, images, etc.) correctly.
Your external CSS should be correctly linked.
Milestone 2
The second milestone aims to check that you have started working on pulling data from your XML files, and you have a reasonable grasp of the basics of JavaScript.
The following will be checked:
The PHP template file that pulls the XML data. This should correctly open the appropriate file and retrieve the data.
Both of your genre pages. These pages are not required to be neat at this point, but you should be able to display all of the data from each file. including links and images, each in their appropriate elements (e.g., <a> and <img>).
A working version of one of the yellow-highlighted JavaScript tasks in section 4 and S. You only need to show one, but it must be fully
functional.