CSE4IFU-Web Development and Website Design – IT Computer Science Assignment Help

Assignment Task

Task

Web Assignment 

Objective
Demonstrate your knowledge and understanding of web development and website design.

Problem Description
This assignment continues on from the content you have completed in lab 7.
You will be designing a functioning online shopping system for an online business. This particular business doesn’t have a physical store and functions entirely online. For this reason it is very important for them to have a well-designed web page. The online shop will be written with PHP, HTML5 and CSS. JavaScript will not be permitted. You have been provided with some partially completed code. Along with some implementation documentation to guide you. The online shop system must allow customers to search for products of their interest and add them into a shopping cart.

When the user is ready to buy they will navigate to the view cart page where they will view the items in the cart. The user will then enter their username and click confirm order. If the user does not have an account, they will need to sign up using the sign up form. Once the order has been confirmed the user is shown a receipt of the order.
The online shop will have two special pages.CustomerList.php will list the details of all the customer in the database. OrderList.php will list the details of all the orders in the database. These special pages are for the business owners, and are not intended for customers. Pages that are intended for customers should not display unnecessary technical details such as the ProductIDs or CustomerIDs.

Rules and Requirements
• The site must run correctly on webprog.cs.latrobe.edu.auserver
• The site must run correctly in Google Chrome.
• All CSS styles MUST be placed into a CSS file. (shopstyle.css) There must be no CSS code in your HTML/PHPfiles
• JavaScript is not allowed in this assignment, do not use any JS code. This includes but not limitedto:[removed] tags, and onclick attributes.
• Your site MUST use relative URLs for all resources (including images and hyperlinks). The only exception to this rule is the hyperlink to the brandswebsite.
• When you submit your assignment please include all the files your site needs to operate (including the database directory).
• Your code must be HTML5 compliant please use the HTML5 validator (see the end of Lab07 forinstructions)
• The website should have a consistent look and feel. All the pages should have the same layout and the navigation bar should always be visible to theuser.
• You website must be secure from SQL Injection attacks and Cross site scriptingattacks.
• Make sure you have read this document and all relevantdocumentation.
• You are not expected to implement any sort of password authentication system
• You are not expected to implement a payment system, you can assume that when a customer completes an order the money magically appears in the businesses       bankaccount.
• Your site must contain at least one CSS animation (but still keep itprofessional).
• The site must have a logo (of your own design) at the top next to theheading.
• The search system needs to work and have links to go to the next and pervious pages (seeLab07).
• Your code must be indented and easy toread.
 

Your Task
You job is to take the partial solutions and make them into a fully functioning online store website.
Most of the PHP code is done for you, the real challenge is making the website look professional and attractive to potential customers.
Please make sure you have read the PHP and Database lectures. Lectures 5 and 7 in particular.
Making an online system like this can be overwhelming it is important to break the system down into smaller tasks. Here are the tasks you need to complete BEFORE starting the assignment.

1. Ensure you have completed Lab07(at least up to Task11)
2. Copy all the provided assignment code into the Lab07directory.
3. View the provided files in a web browser and see how they function (if at all, some may haveerrors)
4. Open all the files in the lab07 directory in Notepad++ and read the code and commentsprovided.
5. Carefully read this document and any attached documentation on LMS. Here are the main tasks you need to do for thisassignment.
6. Get a navigation barworking.
7. Get the websitefunctional.
8. Make the website lookprofessional.
9. Complete any additionalrequirements.

If you get stuck on task 2 put it aside and work on task 3 until you can get help. Web assignments like this sound easy enough but please don’t underestimate the time required to complete this assignment. Start it as soon as possible. Another thing to note about this assignment is how much code is reusable. Some files are very similar. For this assignment the majority of the marks will be on the style and layout of the website. That is, how it looks and feels. And also the quality of the code. I highly recommend looking at what other successful online shops look like such as Amazon and eBay. What things do they display on the page? What colours do they use? How big is the text? When working with real clients they often do not know exactly want they want. It’s your job as a web developer to interpret their requirements and deliver a final product. Please ensure your code is valid HTML5. Remember that just because ‘it works’ does not mean it is correct. Use the HTML5 validator to check your HTML code (see lab07).

Task 1 – The Navigation bar
The first thing you should do is get a basic navigation bar working so that you can at least browse the website.

The navigation bar is just like what we did in lab 05.
The navigation bar MUST contain links to the following pages:
• Homepage.php (you may also name this file index.php if youlike)
• ProductList.php
• ViewCart.php
• CustomerList.php
• OrderList.php
• SignUp.php

Please note that all the files on this website use the shopstyle.css file. So any styles you put in shopstyle.css will apply to all the pages.
It’s OK of the page is ugly at this point we will style it later. Once you have the navigation bar finished, copy its code to all the PHP pages except: ProcessOrder, AddToCart, EmptyCart and AddNewCustomer because they will not be visible to the user. You navigation bar links should change colour when the user hovers the mouse over them.

Task 2 – Getting the website functional.
I have provided you most of the PHP code, you just need to fill in the blanks.
Don’t forget to check over the Lecture notes they contain many handy examples.
I have provided you with a document called “Assignment 2 File Details” this file explains what each PHP file will do, and what SQL statements are required in eachfile.
Some of the PHP files are already fullyfunctioning.
You should look though the PHP files and complete any of the TODO statements.
Open all the PHP files in Notepad++ and press Ctrl + F and search for the word “TODO”.

Task 3 – Making the site look professional.
website contain excellent examples of the things you can do with CSS and layouts.
What you should do is pick a file to focus on to start with (such as ProductList.php).
Then decide on a layout structure, where should the navigation bar go? Where should the heading go?
Some people like to draw a layout plan on paper of how they want the page to look before starting any code.

Look around at other people’s websites and blogs for ideas.
As I said at the start of this course web design requires a large amount of self-directed learning. There are plenty of online resources on working with HTML and CSS.
Once you have decided how you want your page to be structured think about what kinds of divs you will need. Most website will have four major divs: container, header, navigation, and main. HTML5 provides new semantic tagsfor these functions like and you can use these if you like. But

and

tags like we did in the labs are also acceptable. I find that it makes things easier if you assign a random background colour to all the divs using CSS. This makes it easier to see where the divs are. Once you have the main site layout figured out you need to think about how the products should be displayed Do you want them listed one per line or a side by side layout? (Examples below)

The layout and style is up to you – after all, you are the web developer.
Once you have all the layout looking the way you want it’s time to assign colours and fonts.
I would advise against using bright colours, except maybe on the prices. Having a bright yellow background is not very aesthetically pleasing.
Remember that you are building a website for a business, you need to keep the page looking as professional as possible.
You can apply CSS to any item in the page, including buttons and form fields.
Finally once you are happy with the layout copy the relevant HTML code to the other PHP files.

Task 4 – Additional Requirement