Download Website Design and Development asm 2 and more Assignments Web Design and Development in PDF only on Docsity!
ASSIGNMENT 2 FRONT SHEET
Qualification BTEC Level 5 HND Diploma in Computing
Unit number and title 10: Website Design & Development
Submission date Date Received 1st submission
Re-submission Date Date Received 2nd submission
Student Name Le Anh Minh Student ID GCD
Class GCD0904 Assessor name Phan Thanh Tra
Student declaration
I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that
making a false declaration is a form of malpractice.
Student’s signature Minh
Grading grid
P5 P6 P7 M4 M5 D2 D
Summative Feedback: Resubmission Feedback:
Grade: Assessor Signature: Date:
Signature & Date:
- Screenshot of account.php: ....................................................................................................................................................................................................................... 33
- Screenshot of topgame.php ...................................................................................................................................................................................................................... 33
- Screenshoot of FH5.php : ............................................................................................................................................................................................................................. 35
- Screenshot of login.php : ............................................................................................................................................................................................................................. 38
- Screenshot of register.php : ....................................................................................................................................................................................................................... 38
- Screenshot of buy.php : ................................................................................................................................................................................................................................ 39 III. Compare the website to the original designs and draw conclusions ............................................................................................................................................. 39 Chapter 3 – Testing ............................................................................................................................................................................................................................................................. 40
Chapter 1 – Design Plan
I. Website construction goals
First, an online website needs to have a beautiful and attractive web interface. Beautiful interface design, suitable color tones for the products sold are mandatory criteria of a website selling games. a) Object of the website:
- Website login information
- News updates
- Customer (user and guest):
- View product information as well as other news.
- Order products b) Characteristics: Website designed with:
- Easy-to-use interface makes it easy for users to use.
- Can register to become a member of the site
- Login before being able to access the information in the website.
- See the list of new games and hot games.
- You can buy all games via easy payment with online banking method.
System analysis
a) The system's input and output information:
Input information:
- Customer information
- Product information
- The order b) Influence agent Customer (Client): User and Guest
III. Wireframe My website consists of the following main directories:
The css folder used to store css files. CSS will help HTML forms to display more vibrant colors, frame
formats, media, ... Besides, CSS will help them a lot of work in building the interface, only a small piece
of code will make our app more professional shimmer.
The images folder is used to store the images that we will use for a website.
The inc folder is used to store files that will be shared by the entire website
Beautiful website interface will decide the attention of customers, so, when designing the
website to sell flowers, we choose many beautiful modern web templates and SEO and modern
standards for customers to choose from. A wireframe is a visualization of a Web page. It is
meant to show all the items included on a particular page, without defining the look (or graphic
design). Below is the wireframe for my website.
Account.php:
When accessing the website, you must have an account or create a new account. If not logged in, this web page will always appear
with the function of taking the user to the login or registration page.
Topgame.php and newgame.php:
pages containing a list of games. topgame contains a list of hot games and newgame contains a list of new games.
Login.php:
Website login form
IV. Sitemap for web development:
Here is a diagram of how the web pages are arranged.
First, when accessing the website, the website will display the
login registration page. Depending on whether or not already
have an account, they will give an option with the intent to log
in to the homepage as a user. The homepage will appear after
the user has just logged in, with the options being New Game
and Hot Game. These options take the user to a list of hot games
or new games. The user looks in the list and selects the game he
wants. Next, the web takes users to a detailed information page
about the game with the option to buy the game. When the user
clicks on the option to buy the game, a page about the payment
method and information will appear.
V. Principles and Standards using in making Website
Here I am going to describe some principle and standard which I have used to make the site and help
me to make the site attractive and good looking as well as more functionable,
performance of the site. Similarly, if the size of the div is 100/ 200 and the size of the image
is 300/200 then it can reduce the performance of the speed but if the div is larger we can use
large image photo so it is also necessary to keep in mind that the size of the photo is also
accurate and the photo must look like professional must be related to their company which
help the visitors to know more about the company and its services. Also using infographics
and videos helps the site to be more effective at communicating then written piece of content.
4. Mobile Friendly
There are more users who uses different mobile devices than personal computers so it is vey
necessary that site is able to adjust their size according to the size of devices and if the site is
no responsive then there is high chance of loosing battles to your competitors and the visitors
of the site will be also low which will decrease the ranking of the site. Therefore, site must be
responsive and able to work to different mobile devices without losing its content. Moreover,
it increases the visibility on Search Engines which helps to increase the visitors of the site as
well as time and cost on-site content management is decreased. Additionally, it guarantees
that any user on any device will have the better experience on the site and lowers the bounce
rates of the site and improve the webpage’s loading speed.
5. Easy Loading
Every visitors hates the website which take more time to load and they don’t want to waste
the time to being waited for the opening of the site so it very necessary the site of the speed is
very fast and content of the site is also loaded quickly which helps to increase the number of
visitors. Similarly, if the speed of the site is good then visitors can suggest the site to their
friend and their can also suggest to others which increase the position of the site and also
increases the prestige as well. Therefore, speed of the site can be increased by optimizing
image sizes, combining code into a central CSS or JavaScript file which help to reduce the
HTTP request and compress HTML, CSS and JavaScript enhanced the loading speed of the
site.
These are the principles and standard that I have used for making the website as well as help me to
choose better option to make the site more attractive and functionable.
language to make the site dynamic as well as also the content of the site and to store all the record of
the passenger I have MySQL and I am using this software because its security is very high relevant
to other software and programming languages.
Chapter 2 – Implementation
I. Source code Samples of the Website
1. Example of account.php
This is code example of header and body of account.php
2. Example of login.php:
This is the line of code to connect the input to the database. php line of code check login information
The line of php code checks the login password to see if it matches the information in the database. line of code to save login information. line of html code to create a form to enter login information
