PROGRAM TITLE: COMPUTING NETWORK ENGINEERING

UNIT TITLE:

ASSIGNMENT NUMBER:1

ASSIGNMENT NAME: WEB Design & Development

SUBMISSION DATE: 12/02/2023

DATE RECEIVED: 12/02/2023

TUTORIAL LECTURER: Pham Son Tung

WORD COUNT: 4394

STUDENT NAME: NGUYEN VAN THINH

STUDENT ID: BKC13107

MOBILE NUMBER: 0325925546

Summative Feedback:

Internal verification:
Contents
I. Theoretical basis 4
1.1 Domain and DNS 4
1.2 Web server – server 5
- Client-server model 6
- Protocols for accessing the web server 6
- How to put website on internet 7
1.3 Frontend and Backend 10
- Frontend 10

− BackEnd 10

− Relationship/difference between Frontend and Backend 10

1.4 UX/UI and tools 11

− Principles of building UX / UI for the website 11

− Popular UX/UI tools 11

- The difference between Online Website Creation Tools and Custom Built Sites 12

1.5 Software testing and quality assurance 12

− Website testing: 12

− Website testing tools: 13

− Quality assurance - QA: 13

1.6 Technologies and frameworks used to develop websites 14

- Framework 14
- Website creation tools: 14
1.7 SEO Website 14
II. WEBSITE DESIGN AND BUILDING 16
2.1 Problem statement: 16
2.2 Requirements of the problem 16

I. Theoretical basis
1.1 Domain and DNS
- Domain or domain name is the address of a website operating on the
Internet.The place that people use to search on the browser to access any website.
Domains are represented by letters or numbers in the alphabet instead of theserver's IP
address.

- The Domain Name System (DNS) is the phonebook of the Internet. Humans
access information online through domain names, like nytimes.com or espn.com. Web
browsers interact through Internet Protocol (IP) addresses. DNS translates domain names
to IP addresses so browsers can load Internet resources.
• Dynamic Domain Name System, or DDNS, is a service that was developed to take the place of
static IP addresses. Dynamic domain name system is another name for DDNS. This is how a
domain name is mapped to a dynamic IP address, starting with the domain name and ending with
a formatted number

There are 4 DNS server:

 DNS recursor - The recursor can be thought of as a librarian who is asked to

gofind a particular book somewhere in a library. The DNS recursor is a server designed
to receive queries from client machines through applications such as web browsers.
Typically the recursor is then responsible for making additional requests in order to
satisfy the client’s DNS query.

 Root nameserver - The root server is the first step in translating (resolving)
human readable host names into IP addresses. It can be thought of like an indexin a
library that points to different racks of books - typically it serves as a reference to other
more specific locations.

 TLD nameserver - The top level domain server (TLD) can be thought of as a
specific rack of books in a library. This nameserver is the next step in the searchfor a
specific IP address, and it hosts the last portion of a hostname (In example.com, the TLD
server is “com”).

 Authoritative nameserver - This final nameserver can be thought of as a

dictionary on a rack of books, in which a specific name can be translated into its
definition. The authoritative nameserver is the last stop in the nameserver query.If the
authoritative name server has access to the requested record, it will return the IP address
for the requested hostname back to the DNS Recursor (the librarian) that made the initial
request.
- When the domain name is entered in your web browser, a request is sent to the
global network of servers that form the Domain Name System (DNS), which is like a
phonebook of the internet. - The server then searches the name servers related to the
domain and forwards the request to the name servers. The name servers are big
computers, which are managed by hosting companies. The hosting company forwards the
request to the webserver where your site is stored. The web server fetches the requested
web page or information and forwards it to the browser. - The Domain Names System is
managed by InternetCorporation for Assigned Names and Numbers (ICANN). It is a non-
profit organization that creates and implements the policies for domain names. - ICANN
authorizes the companies called Domain Name Registrars for selling domain names. It
also allows them to make changes to domain names registry on your behalf, and to sell
domain names, manages their records, renewal, and transfer to other registrars. As a
domain name owner, you are required to renewyour domain registration before it
expires.\

1.2 Web server – server

- A web server is software and hardware that uses HTTP (Hypertext Transfer Protocol)
and other protocols to respond to client requests made over the WorldWide Web. The main
job of a web server is to display website content through storing, processing and
delivering webpages to users. Besides HTTP, web servers also support SMTP (Simple
Mail Transfer Protocol) and FTP (File Transfer Protocol), used for email, file transfer and
storage.

 On the hardware side, a web server is a computer that stores web server
software and a website's component files (for example, HTML documents, images, CSS
stylesheets, and JavaScript files). A web server connects to the Internet and supports
physical data interchange with other devices connected tothe web.

 On the software side, a web server includes several parts that control how
webusers access hosted files. At a minimum, this is an HTTP server. An HTTP server is
software that understands URLs (web addresses) and HTTP (the protocol your browser
uses to view webpages). An HTTP server can be accessed through the domain names of
the websites it stores, and it delivers thecontent of these hosted websites to the end user's
device.
- Client-server model
The Client-server model is a distributed application structure that partitions taskor
workload between the providers of a resource or service, called servers, and service
requesters called clients. In the client-server architecture, when the clientcomputer sends a
request for data to the server through the internet, the server accepts the requested process
and deliver the data packets requested back to the client. Clients do not share any of their
resources. Examples of Client-Server Model are Email, World Wide Web, etc.

- Protocols for accessing the web server

 HTTP stands for Hypertext Transfer Protocol. It is an application layer,
request-response protocol for the web. HTTP has a client-server architecture that enables
the reliable transfer of resources between a web application server and auser agent (UA)
such as a web browser. UAs include web crawlers, mobile apps, and other software that is
used to access web resources. HTTP was designed to enable easy communication between
devices and applications on theweb. It defines how requests for content are formatted and
transmitted, and how responses are constructed. HTTP transmits content such as text,
images, audio, and video using a suite of protocols called Transmission Control
Protocol/Internet Protocol (TCP/IP).

 Hypertext transfer protocol secure (HTTPS) is the secure version of HTTP,

which is the primary protocol used to send data between a web browser and a website.
HTTPS is encrypted in order to increase security of data transfer. This is particularly
important when users transmit sensitive data, such as by logging into a bank account,
email service, or health insurance provider. HTTPS uses anencryption protocol to encrypt
communications. The protocol is called TransportLayer Security (TLS), although formerly
it was known as Secure Sockets Layer (SSL). This protocol secures communications by
using what’s known as an asymmetric public key infrastructure. This type of security
system uses two different keys to encrypt communications between two parties:

The private key - this key is controlled by the owner of a website and it’s kept, as the
reader may have speculated, private. This key lives on a web server and isused to decrypt
information encrypted by the public key.
The public key - this key is available to everyone who wants to interact with theserver in
a wy that’s secure. Information that’s encrypted by the public key canonly be decrypted
by the private key.

 FTP (File Transfer Protocol) is used to communicate and transfer files

betweencomputers on a TCP/IP (Transmission Control Protocol/Internet Protocol)
network, aka the internet. Users, who have been granted access, can receive andtransfer
files in the File Transfer Protocol server (also known as FTP host/site).

There are three approaches on how to establish an FTP connection. A very simple method
is using a command-line FTP, such as using Command prompt for Windows or Terminal
in Mac/Linux. Developers still use it today for transferring files using FTP. A user also
can use a web browser to communicatewith the FTP server. A web browser is more
convenient when users want to access large directories in the server. Yet, it’s often less
reliable and slower thanusing a dedicated FTP program. Today, the most common
practice to use FTP, especially for a web developer, is by using an FTP client. An FTP
client provides more freedom compared to the command line and web browser. It is also
easier to manage and more powerful compared to the other methods.
- How to put website on internet
1. Pick a Reliable Web Hosting Company

Creating and maintaining a website is not something that you should take lightly. It’s
crucial to pick a top-notch web host that has all the key features tokickstart your project.

Here are several factors that you should consider when choosing a hosting
provider:

 Live support. A good hosting service should have a team of experts who can
help you at any time. There’s no worse feeling than running into some issuesand having
to wait for days to get a response.

 Control over your web hosting space. The less control you have over your
hosting account, the more likely you are to run into trouble when your sitegrows.
 Room for growth. Before you choose web host, make sure it offers scalable
solutions that can provide more power (such as virtual private servers or cloudwebsite
hosting).

 Money-back guarantee. Nobody likes a bad investment, so make sure to check

for a refund policy. This will give you a time frame to test everything out before
committing to the hosting service.

2. Choose Your Website Upload Method

The next challenge is picking the right tool for uploading your website to theinternet. Here
are four of the most popular tools to upload a website:

 File Manager

A file manager is a browser-based tool with all the key features to take care of your
website files and directories. If you have a Hostinger account, log into thehPanel and find
File Manager under the Files section. However, the File Manager has an upload limit. If
your website files are larger than 256MB, you should opt for the next tool instead.

 Automatic Website Importer

For Hostinger users, you can find an Import Website feature in hPanel. You canuse this
feature to extract a website archive to the public_html directory. The tool supports .zip,
.tar and .tar.gz formats, and the upload limit is 256MB.

 WordPress Migration Plugins

If you plan to use WordPress, there are several ways to upload your website to the CMS.
One of the easiest methods is using a WordPress migration plugin likeAll in One WP
Migration. After installing and activeting the plugin, the rest of the steps are self-
explanatory.

3. Upload Files to Your Website

Using File Manager

 Login to Hostinger’s hPanel and navigate to File Manager.

 Once you’re in the public_html directory, select the Upload Files icon from
theupper-right menu.
 Select the website archive file on your computer and Upload it to our server.

 Right-click on the uploaded file and Extract the archived files to the
public_htmlfolder.

4. Move the Website Files to the Main Root Directory

 In some cases, an additional directory will be created when you upload

website files. As a result, visitors will be directed to yourdomain.com/subfolder instead of
the default yourdomain.com.

 To prevent that from happening, you need to make sure all the files are
locatedin the root directory of your domain, which is public_html.

You can use the File Manager to move your website files. All you need to do isright-
click on the subfolder, select the Move option, and set public_html as the destination.

5. Import Your Database

If your website uses a database, you’ll also need to import it along with yourwebsite files

 Create a new MySQL database and user.

Access your newly created database via phpMyAdmin.

 Use the Import section to upload the backup file of your database.

 Update the MySQL database connection details (database name, host,

user,password) in its configuration files.

6. Check If the Website Works

Once you complete your upload, it’s time for a final check!
 If your domain name is registered and already pointed to your web host,
enterthe domain name into your browser and see if it directs you to your website.

 Keep in mind that DNS changes can take up to 48 hours to fully propagate
worldwide. As such, if you just pointed your domain to the web host’s nameservers,
you might need to wait for a while.
 Use an online tool like whatsmydns.net to check the state of your DNS
propagation. Just enter your domain name and the tool will check the DNSrecords
against multiple name servers.

1.3 Frontend and Backend

- Frontend

The frontend is everything a user sees and interacts with when they click on a link or type
in a web address. The web address is also known as at URL, or Uniform Resource
Locator, and it tells what webpage should load and appear inyour browser.

Popular frontend technologies: HTML, JavaScript, CSS,…

− BackEnd

Backend is all the parts that support the operation of a website or application thatcannot be
seen by the user. Arguably BackEnd is like the human brain. It processes requests,
commands, and selects the correct information to display on the screen

Popular Backend technologies: PHP, C++, Java, Python,...

− Relationship/difference between Frontend and Backend

FRONTEND BACKEND

Frontend refers to the client-side ofthe Backend refers to the server-side ofthe
application. application.

It is the part of the website users cansee and It constitutes everything that happensbehind
interact with. the scenes.
 It typically includes everything that It generally includes a web server that
attributes to the visual aspects of websites. communicates with a database to serve
requests that the frontend presents.

It forms the basis of what users can It is the brain of the website that is

touch and experience on their web never visible to the end users.
browsers.

The essentials of frontend web The essentials of backend development

development include HTML, CSSand include Ruby, Python,Java, .Net, etc…
JavaScript.

1.4 UX/UI and tools

− Principles of building UX / UI for the website

1. First thing first

FTF means that we always prioritise the things that matter most. That means Iwill prioritise
important customer groups, important feature groups, important information to
customers…. Specifically, what I think is the following:

● Mobile First
● Notice the first view
● Important function
● Important Information

2. Don’t make me think

● Instructions for new customers

● Instructions when encountering errors

3. Consistent

● Typography
● Distance and alignment
● Space
● Principles for presenting different types of data

− Popular UX/UI tools

Adobe XD
Sketch
InVision Studio
Axure
 Craft
 Proto.io
 Figma
….
-> We will use Figma for this lesson

- The difference between Online Website Creation Tools and Custom Built Sites

Online creation tools Custom-build creation

Define - Are also known as CMS (Content - Develop a website from scratchwith
Management System) like coding. For this, you need knowledge
WordPress, Drupal, Joomlaand Wix. of some languages like HTML, CSS,
- These tools are used to build JavaScript, etc…
websites just by drag and drop.
- Don’t need any coding
knowledge.

Pros - Easy to learn and use. - Customization.

- Need less time to learn. - Full control is in your hand.
- Fast way to build a website. - Everything (every) is possible tomake
with coding.
- No limitations.

Cons - Security risk. - Not easy to learn

- Large website size. - Need much time to learn
- Limitations in some things. - Takes more times to build
websites
1.5 Software testing and quality assurance

− Website testing:

Website testing is the name for a process of testing web applications for errorsbefore
delivering the product to the customer. This step will help solve problems in website
application such as: Features, web services, security, ability to handle traffic, …
− Website testing tools:

Watir, TestComplete, Test Studio, WatiN, SOAtest, etc…

− Quality assurance - QA:

Quality assurance (QA) is any systematic process of determining whether a product or

service meets specified requirements. QA establishes and maintainsset requirements for
developing or manufacturing reliable products. A quality assurance system is meant to
increase customer confidence and a company's credibility, while also improving work
processes and efficiency, and it enablesa company to better compete with others.
Quality assurance utilises one of three methods:

● Failure testing, which continually tests a product to determine if it

breaksor fails. For physical products that need to withstand stress, this could involve

testing the product under heat, pressure or vibration. For softwareproducts, failure

testing might involve placing the software under high usage or load conditions.

● Statistical process control (SPC), a methodology based on objective

data and analysis and developed by Walter Shewhart at Western Electric Company and

Bell Telephone Laboratories in the 1920's and 1930's. This methodology uses statistical

methods to manage and control the productionof products.

● Total quality management (TQM), which applies quantitative methods

asthe basis for continuous improvement. TQM relies on facts, data and analysis to
support product planning and performance reviews.

1.6 Technologies and frameworks used to develop websites

- Framework
Framework is a structure that you can build software on. It serves as a foundation, so
you're not starting entirely from scratch. Frameworks are typically associated with a
specific programming language and are suited todifferent types of tasks.

- Using frameworks saves time and reduces the risk of errors. You don't need
towrite everything from the ground up, so there's less chance of introducing errors. Plus,
frameworks have already been tested, so there's less to worry about. Other advantages
include:
● More secure code

● Simpler testing and debugging

● Avoiding duplicate code

● Clean and easily adaptable code

● Able to focus on writing code specific to the project

● Can be extended
- Website creation tools:
Ruby on Rails, Angular JS, Bootstrap, Spring, Cake PHP, Laravel, Xamarin,Apache
Spark.

-> We will use Bootstrap for this lesson

1.7 SEO Website

− SEO stands for the phrase (Search Engine Optimization) which means
searchengine optimization, or in other words SEO is a set of ways to optimise your
website's ranking on search engines. such as google, bing, yahoo... thereby bringing in
customers and profits for businesses.
− Ways to improve website position:
● Edit Title Tags

One of the easiest and fastest ways to improve website queuing is to edit titletags. Having a
website with an appropriate title makes it possible for search
engines to know what each page is about. It will also increase the number of visits to your
website which will generate more leads for your website.
● Website Content Optimization

Implemented a number of changes including linking urls through a text, usingtitle tags
where applicable, adding alt + title tags to your images, writing a fewintros for page by
page

● Provide your contact information

Providing information about your phone number , email , information about your business
can also be beneficial for users who want to search for somethingin a particular place.

● Hosting upgrade

If your website has heavy images and videos, but your readers can be from allover the
world, then perhaps you should consider using a content delivery network (CDN).
CloudFlare to upgrade loading speed and user experience. If your site is aimed at users in
a particular area, you should place your host as close to that area as possible.

● Improve site navigation

Use CSS dropdowns to restructure the navigation so it's neat, and there shouldbe a parent
page for small sections of the site. Use the spreadsheet to record thecurrent sitemap and the
new sitemap.

● Switch to WordPress

Ease of use, plenty of customization options, and a supportive community ofdevs and
enthusiasts make WordPress my favourite.

● Replace Flash with jQuery

In my opinion, Flash is really a bad choice. It can't display on most mobile devices and is
good too long to load for impatient customers. That aside, jQuery can provide many of
the same benefits as Flash but is much lighter andvery user-friendly as well as most
mobile devices.
● Code cleanup

Some tools to use such as: Firebug of Firefox, GT Metrix Performance tool or Google
Webmaster. These tools will point out errors and provide guidelines forimproving your
site's performance.

● Define a main goal in the web

Decide what you want your users to do when they visit your website. Then focus
everything around it and highlight this on your website. The user will beguided naturally to
the point you want and you will get amazing results.
However, you're sure to try out different highlights to see which is the best option.

● Design upgrade

Please upgrade your website to become professional, clean representing yourcompany to give
users the most impressive experience.

II. WEBSITE DESIGN AND BUILDING

2.1 Problem statement:

- Thegioididong is a company that sells mobile devices such as phones, laptops and
accessories and isa customer of BKS. As an employee of the company, you are
responsible for meeting with customers and gathering requirements from customers to
build a website that includes bothfunctional and non-functional. From there, develop and
build a Web site with selected technology (frontend, backend...), server (hardware,
operating system...). One month after meeting the customer, BKS needs to demo the
website, build some websites according to the previous design from the customer and
write a script to test the functions.

2.2 Requirements of the problem

- A website consists of 3 pages: main page, login page, product page.

- The website has the following basic functions:

-> On admin side:

● Login
● Insert product
● Display product
● Edit product
● Delete product
● Delete customer
● Delete admins account
● Update admins account
● Display customer
● Display admins account

-> On customer side:

● Display all product
● Send information to admin page
● Select product

- Technology used:

● Frontend: HTML, CSS, Javascript

● Backend: PHP
● Website server: Xampp

- ERD:

- Database Diagram
 2.3 Website interface design
- Interface design pages

Customer
Page Image
homePa
ge
 Send
infor to
admin
site

Admin
Page Image
Login
admin
Dasboard
Admin

Product Page
Insert
page
Update
Page

User
Page
Update
User page

Customer
page

- Figma:
https://www.figma.com/file/XP8WHwMyRVmDsXu62Olpuc/Untitled?node-
id=1%3A27&t=XANj7bn4leK2TNRl-1

2.4 Evaluation of website development process

- In the process of website development, I found that my websites have completed quite
well the following functions:

+ Create products

+ Show products

+ Product update

+ Delete product

+ send information

- However, there are also some limitations:

+ User security information may be exposed due to unencrypted password md5

+ Users after logging in can still exit the login screen themselves without the "logout" key

+ I can not create notification whenever I click delete something

III. Evaluation of website development process

3.1 Demo website

 Customer
Page Image

Product
page

Admin
Page Image
 SIGNUP
PAGE

LOG IN
PAGE
Insert
PRODUCT

Update
page
DELETE
product

Delete
customer

DELETE
ADMIN
 UPDATE
ADMIN

3.2 Result evaluation

- Manual test:

LOGIN TEST RESULT STATUS

Admin
Username:dangthibi CLICK LOGIN PASS PASS
nh123@gmail.com

Pass: binhcute123
Email:dangthibi CLICK LOGIN FAIL PASS
nh123@gmail.c
om
Pass: 111112
(pass wrong)

SIGN UP TEST RESULT STATUS

Name: nguyen Click PASS PASS
Last name: thi binh SIGN
Email: UP
dangthibinh123@gmail.com
Pass binhcute123
Confirm : binhcute123
(confirm right)
Name: nguyen Click FAIL PASS
Last name: thi binh SIGN
Email: UP
dangthibinh123@gmail.com
Pass binhcute123
Confirm : thinh123
(confirm wrong)

INSERT TEST RESULT STATUS

Name: Iphone14 CLICK INSERT PASS PASS

Price: 799
Brands: Apple
Image: image.png
edition: PROMAX

Name: CLICK INSERT PASS FAIL

Price: 2000 Brands:
Apple Image:
Image.pngeditions:
good (name
informationmissing)

Name: Samsung S22 CLICK INSERT Fail PASS

Ultra
Price:
Brands: Apple
Image: Image.png
Description: good
(price information
missing)

UPDATE TEST RESULT STATUS

 Name: Iphone14 CLICK UPDATE FAIL FAIL
Price: 999 Brands:
Image: Image.png
Description: good
(brand information
missing)

Name: Iphone14 CLICK UPDATE PASS PASS

Price: 999 Brands:
Apple Image:
Image.png
EDITION:
PROMAX

DELETE TEST RESULT STATUS

Product CLICK DELETED PASS

user CLICK DELETED PASS

customer CLICK DELETED

Send information TEST RESULT STATUS

Buy iphone 8 and iphone Click remove deleted PASS
14
And remove iphone 8

Buy iphone 8 and iphone Click get go Customer retrieved PASS

14

Buy 3 iphone 8 Click remove all Deleted pass

(click remove all)

UPDATE ADMIN TEST RESULT STATUS

ACCOUNT
CHANGE ACCOUNT: Click UPDATE PASS PASS
Dangthibinh123@gmail.com
Pass: binhcute123
Name: thinh
 Last name : nguyen van
Confirm : binhcute123
(change name and last name)
CHANGE ACCOUNT: CLICK UPDATE PASS PASS
Dangthibinh142@gmail.com
Pass: binhcute123
Name: thinh
Last name : nguyen van
Confirm : binhcute123
(change email)
CHANGE ACCOUNT: CLICK UPDATE PASS PASS
Dangthibinh123@gmail.com
Pass: thinhcute123
Name: binh
Last name : dang thi
Confirm : thinhcute123
(change Pass)
CHANGE ACCOUNT: CLICK UPDATE FAIL PASS
Dangthibinh123@gmail.com
Pass: thinhcute123
Name: binh
Last name : dang thi
Confirm : thinhcute
(confirm wrong)

- Test Plan:
Test What is How Test Expected Date Actual Action
testing date result results taken
TC1 Create Insert Dec2 The 1/01/2023 PASS None
phone information informationof
new phone phone are up
to
home page
TC2 Update Update price Dec3 Show the 1/01/2023 PASS None
phone and update home
descriptions page
“Iphone14”
TC3 Delete Delete Dec4 The phone 1/01/2023 PASS None
phone phone has deleted
“Iphone14”
 TC4 Search Search Dec5 Show all 1/01/2023 PASS None
phone “Iphone” phones have
name name
“Iphone”

IV. References
- Web Development - GeeksforGeeks
- Search Engine Land - News, Search Engine Optimization (SEO), Pay-
Per-Click(PPC)