Reference no: EM131247360

Assignment

Instructions

1. Create a Microsoft Word document named "your name - your student number - code and screenshots.docx" and enter details into it as described throughout this document.

2. Create a folder in the top level of the public directory of your Webhost account and name it your given name (e.g. jimmy). Your assignment submission should be in that folder.

3. All pages you create in this assignment should look professional and be interesting or attractive, should be accessible to people with disabilities, and should follow good web design principles, and separate styling and coding into external CSS and JavaScript files.

Section 1 - HTML5, CSS, JavaScript

1. Choose a Business to create a Website for. Before progressing, tell you teacher the name and purpose of your business

2. Create a HTML5 page named "sponsors.html"

3. Your page should be divided into 3 sections - a header, a footer, and a main content area:
a. The header should contain your business logo, business name, and navigation buttons.
i. The navigation buttons should be implemented as CSS buttons. There should be at least 2 buttons - one for the home page which will be the main page you create in Section 2 of this assignment, and one that links back to this page ("sponsors.html")
ii. The logo can be one you make yourself or one that you copy from somewhere. Be sure the image is not copyright protected and be sure to keep the file size as small as possible
b. The main content area should contain the content discussed below here in point 6
c. The footer should contain your business' contact details
And don't forget to use appropriate HTML5 tags for the header, footer, main content area, and navigation bar.

4. The 3 sections described above should be wrapped in a parent div and that div should be centred in the middle of the client's viewport.

5. Place an image in the background of your Webpage. Make it an image that stretches to fill the client's viewport and prevent it from scrolling with the Webpage.

6. Pretend that you have companies paying you to advertise on your site - one that wants to use an image and the other a video:
a. The image you use should not breach copyright laws. Clicking on the image should take the user to that fictitious advertiser's site.
Use CSS or JQuery to animate the image in an attention-grabbing way (such as wiggling on page load, or growing on mouse-over)
b. The video should be implemented using the HTML5 <video> tag and should have a Flash fall-back. Have the video play by default, loop continuously, and not show the playback controls.
Place a text link under the video that loads the advertiser's site

7. Use CSS to alter the font family, font size, and font colours in the Webpage.

8. Create other CSS rules as necessary to demonstrate that you have an understanding of Class, ID and Tag rules.

9. Paste into your MS Word document:
a. The URL of your sponsors page
b. 3 screenshots showing you have run your HTML, CSS, and JavaScript through validators
c. All the code you created (but not the JQuery library), and make sure to clearly identify the code with the filename

Section 2 - Creating a Dynamic Site

Choose either one of these options:

Option A: A WordPress shopping cart site
Option B: A Post Office website that allows customers to search for their post box details

Section 2: Option A. - The WordPress shopping cart site

1. Tell your lecturer the type of business you will set up (e.g. a t-shirt site). Then install the latest stable version of WordPress into the folder you created in Section 1. You should be able to access your WordPress site simply by entering that folder name at the end of your domain name e.g. https://www.yourDomain.net/jimmy

2. Install a shopping cart plugin, such as WooCommerce

3. Modify the default installation with a new theme (e.g. one from the creators of WooCommerce). Use the theme's customisation tools to modify that theme by changing your site's title, text, and colours in some meaningful way.

4. Create a child theme and use it to alter the CSS of your site in some meaningful way (e.g. change the font type for the entire site, or the background colour for the entire site)

5. Offer at least 2 items for sale, and set their prices unrealistically high (e.g. $1000 for a t-shirt) and make it clear to visitors to your site that it isn't open for business yet

6. Set up the payment options for PayPal
a. Restrict sales to Australian customers only
b. Set up postage costs, making it just one price for everyone in Australia

7. Add a new link in your navigation bar to the sponsors page you created in Section 1

8. Set up a "Contact Us" page by using a WordPress plugin. Customers should be able to enter their email address and a message and press send. Their message should arrive in the email account "[email protected]", which has the password "wmpwmpwmp".
9. Install the WordPress SEO plugin by Yoast and have that plugin create your sitemap.xml file

10. Make your site known to Google using your Google Webmaster account

11. Into the Microsoft Word document you created in Section 1, paste the following:
a. The URL of your WordPress home page
b. Screenshots of your Dashboard's WooCommerce (or other shopping cart) settings:
i. Show that you have restricted sales to Australian customers
ii. Show the payment options that you have set up
iii. Show that you have set-up shipping costs
c. Screenshots of your SEO plugin settings
d. 3 Screenshots showing that you have customised your site's parent theme using the theme's inbuilt customisation options. The 1st screenshot should show how the page looks in its default state, the 2nd should show the settings you changed, and the 3rd the page after the change)
e. The contents of your child theme's CSS file and a screenshot showing that you have activated your child theme
f. 2 Screenshots showing the effect your child theme has on your site (that is, one screenshot for before, and one for after)
g. A screenshot of your Google Webmaster account showing that you have "added" your site and your sitemap file.

Section 2: Option B. - Writing PHP and MySQL code

1. Create MySQL code in Notepad (or similar) that would create a database. Use your own given name in the databases name (e.g. jim_abc123databasename) and within that database create a table called kids that contains the records of at least 10 children, giving each a name, gender, date of birth, and parent name.

2. Paste your MySQL tools into the SQL tool in your Webhost's cPanel to create your table. Your Host may have some control over your database name, but be sure to include your given name as part of the database name. [Note that you may want to create a local copy of your database in your WAMP folder to speed up the development and testing of the HTML/PHP/CSS/JS code that follows]

3. Create the following CSS, JavaScript and PHP files and upload them to the folder you created in Section 1:
a) A HTML5 page named "index.html" that:
1. Displays a <form> asking the user for their name and their child's name.
2. Use JavaScript to check that the boxes are not left empty and display an appropriate error message if one or both are.
b) A PHP page named "process.php" that:
1. Display an error message if either the child's or parent's name doesn't exist
2. Displays the child's details, neatly laid out within a HTML <table> if they do exist
3. Includes two other files using the PHP "include" or "require_once" command - header.php and footer.php. The contents of these 2 files should be the same as what you created for a header and footer in Section 1 above. Because of this, you may prefer to make your "sponsors.html" page in Section 1 a PHP page, so that you can simply "include" the header and footer files in both sponsors.php and process.php.
b) A PHP program called "connections.php" which establishes a connection to your database.
c) Link to the CSS file you created in Section 1. The process.php file should be styled in the following ways, at a minimum:

- Font colours, the font face, and font sizes

- The page backgrounds

- Make your Webpage sit in the middle of the client's viewport

4. Create and upload a sitemap.xml file for your site

5. Make your site and your sitemap file known to Google using a Google Webmaster account

6. Into the Microsoft Word document you created in Section 1, paste the following:

a) Screenshots of the contents of the table or tables you created. Take these screenshots from your Webhost's phpMyAdmin tool

b) Screenshots from your Webhost's public directory showing your assignment's directory structure. This may require multiple screenshots

c) A screenshot of your Google Webmaster account showing that you have "added" your site and told Google about your sitemap file

d) All PHP, CSS any JavaScript code that you wrote yourself (not the code of libraries or tools such as JQuery or Bootstrap)

Section 3 - Report

Imagine that your Website is your idea for your boss's business. She likes the idea about the general design of the site (such as a sponsors page). What she is most interested in is the implementation choices you have made for your site, and to that end would like you to prepare a report explaining your choices. She understands that you are developing your Website creation skills on the fly.

So while working on your assignment take notes on limitations with your site and ideas for improving your site. Think about different technologies you could have used if you had been exposed to them earlier, and technologies you tried to implement but couldn't complete to your satisfaction. Examples of the topics you could discuss are your choices for a Webhost, the use of JavaScript instead of CSS, the choice of HTML5 over Flash, choosing to implement CSS through external style sheets, or choosing WordPress instead of building pages from scratch.

The main idea is to show your boss that you have developed your grasp Web technologies (the possibilities and perhaps their limitations) and let her know the directions she could take the site from here.

Place this report in a separate MS Word document named your name - your student number - code and screenshots.docx and be sure to format it professionally. Use screenshots of your site to clarify your discussion about your site.

Maximum length 1000 words. Minimum length 500 words.