Assignment 1 1633 Website Design Development Distinction

This exercise scores Distinction in Web programming. This exercise demonstrates how to program an ecommerce website in PHP, using tools such as html, css, js, boostrap. There is full authorization and exception handling.

ASSIGNMENT 1 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 10: Website Design & Development

Submission date 28/03/2023 Date Received 1st submission 28/03/2023

Re-submission Date Date Received 2nd submission

Student Name Tran Duc Long Student ID GCH210562

 Summative Feedback:  Resubmission Feedback:

Signature & Date:

2.1

2.2

WEB DESIGN & DEVELOPMENT

TRAN DUC LONG – GCH210562

Task 1: SERVER TECHNOLOGIES AND MANAGEMENT SERVICES

WEB

DNS

COMMUNICATION PROTOCOLS

SERVER HARDWARE

SERVER SOFTWARE

OPERATING SYSTEM

WWW stands for World Wide Web and was created in 1989 by Tim Berners Lee, a British physicist Since then, it has been constantly evolving and improving.

1.1 History of website

How to web work

Step 1: URL gets resolved

Step 2: Request is sent

Step 3: Response is parsed

Step 4: Website is displayed

Definition: DNS (Domain Name System) is a system that translates domain names into IP addresses, allowing devices to connect to the internet using human-readable domain names instead of numerical IP addresses.

Purpose: DNS translates human-readable domain names like www.example.com into numerical IP addresses for computers to interact over the internet, making

it a critical component of internet architecture.

1.2 Identity the purpose and types of DNS

DNS recursive server

It is the first resource that the

user sees and either returns the

query result if it is cached or

connects to the next-level server

if it is not.

Top level domain server

The root server directs the

query based on the top-level

domain — the.com, edu,

or.org in the URL

DNS root servers

If the recursive server's answer is not cached, the query is sent to this server first

There are several types of DNS servers

Types of DNS

Authoritative name server

The authoritative name server is the DNS query's final point of contact.

DNS is hierarchical, with multiple organizations controlling domains at various query stages

The root zone database is managed by IANA, an ICANN affiliate, with 12 companies administering hundreds of root servers.

1.3 How domain names are organized

DNS manages its distributed database using a hierarchical structure known as the domain name space This structure is an inverted tree, with the root domain at the top The root domain is denoted by a (.).

1.4 How domain names are managed

Definition: Communication protocols are sets of rules and standards that govern the exchange of data between devices on a network They define the format, timing, sequencing, and error control mechanisms required for successful

communication.

1.5 Communication protocol

Message consistency should be used to communicate.

Purpose

Explain syntactic semantics and analog synchronization.

Cover authentication, error detection, and

signaling.

Some types communication protocols

TCP protocols FTP

IP address

Hypertext Transfer Protocols

HTTP (Hypertext Transfer Protocol) is a communication protocol that enables the transfer of data between a client (usually a web browser) and a server over the internet

It defines how messages are formatted and

transmitted, as well as what actions web servers

and browsers should take in response to various

commands.

Servers are tangible pieces of hardware that are in charge of storing data There are several kinds of servers accessible Regardless of the options, there is a huge array of server hardware accessible.

1.6 Web server hardware

Tower servers

Tower servers are designed to be placed on a desk or on the floor and are typically used by small businesses or for applications that require only a few servers.

Blade servers

Rack servers

Mainframes

Blade servers are similar to rack-mounted servers, but

they offer greater scalability and flexibility by fitting into

a blade enclosure that can hold multiple blade servers.

Rack-mounted servers are compact and designed to be mounted in server racks, making them ideal for applications that require a large number of servers in a small space.

Modern mainframes can handle heavy I/O loads and a large

number of concurrent transactions, making them ideal for

financial services businesses that require real-time

transactions.

An operating system (OS) is a software that manages a computer's hardware and provides common services for computer programs.

1.7 Operating system

Purpose: Its primary purpose is to act as an interface between the computer's hardware and its users, allowing them to interact with the system and run applications.

Type of Server OS:

Windows server (2000, 2003 R3, 2008…)

Unix (Red Hat)

Mac OS X Server

The server is the software (not the computer itself) that:

- Allows the computer to communicate with other computers -Waits for a request for information, then retrieve and send that information back as quickly as possible

This software is installed In the actual computer, which is installed server operating system and called host.

1.8 Web server software

Some type of web server software

Run on various operating systems and supports a range of programming

1.9 Relationships between communication protocols, server hardware, operating and web

server software

Communication protocols

Server hardware Operating system Web server

software

Design Communicate with

devices and the network system

Run website design software

the internet

Control and implement the website

Public website

Access a website Data transfer over

the internet

Data exchange in the network

Webpage using

DNS

Control user access to files on the server

Task 2: Evaluate or critically review technical notes on all of the expected topics (M1-M2)

Web application technologies and Frameworks

Impact of web technologies and frameworks

Search engine

Search engine optimisation

Solutions to improve SEO

A web app runs on a server and is accessible through a browser

Its interface can provide valuable statistics to the development team, aiding in product and marketing strategies, and improving app

performance.

2.1 Web application technologies and Frameworks

Pros:

Most commonly used web development frameworks are free and open-source, with non-restrictive licenses that allow for-profit use They typically come with documentation and guidance, although paid support may be available for faster and more concise assis tance The Ruby on Rails community is known for its supportive nature.

Cons:

Their core components can be challenging to modify, limiting customization options Learning new frameworks can be time

-consuming, and developers need training or study documentation to become proficient with them, which can slow down

development.

2.2 Evaluation the impact of web technologies and

frameworks

A search engine is a well-coordinated set of programs that searches for and identifies items in a database that meet certain criteria Search engines are used to access information on the World Wide Web

The important of them:

They provide easy access to information, help users navigate the internet, have a significant impact on business, aid research and development, and drive innovation in the industry.

2.3 Search Engine

Search engine optimization (SEO) refers to the tactics used to enhance the visibility of a website in search engines like Bing and Google for queries related to products, services, or topics of expertise

2.4 Search engine optimisation

2.5 Some of solutions to improve SEO

Create and optimize XML Sitemaps Make your website super fast

Make website mobile-friendly Migrate your site to https protocol

Task 3: Discuss the capabilities and relationships between front-end and backend website

Website static and dynamic

3.1 Static and dynamic website

Web Client

Web Server

WEB BROWSER

IE, Chrome, FF, Safaris,

http request

http response

Server find html file

1 3

- Don’t allow any user interaction.

- The results didn’t meet the needs of each user with dynamically

changing content

Dynamic website – Website 2.0

Web Client

Web Server

WEB BROWSER

IE, Chrome, FF, Safaris,

http request

http response

Build html file

1 5

4

Database

Web server executes a program

- Allows customizing the content and its appearance in the browser.

- Generates content “on-demand”.

- Accepts the user inputs through web browser.

- Several technologies evolved to make web sites more flexible and dynamic.

- Variety device such as PDAs, Cell phones, and so on is used XHTML

Documents.

Definition: Front-end development is the process of creating the visual

components of a website that users can interact with through a

browser

3.2 Front-end

Some popular technologies of front-end

Used for styling and visually formatting web pages, including layout, colors, fonts, and animations.

Cascading Style Sheets

A programming language used for creating interactive and dynamic user experiences on web pages.

Hypertext Markup Language

Definition: The backend of a website is responsible for organizing

data and ensuring the proper functioning of the client side Backend developers create features that users can only access through the front-end.

3.3 Back-end

Some popular technologies of back-end

Java

Java is a free language that runs

on any platform and is used by tech giants like Amazon, Google, and Netflix

C#

C# is a Microsoft-developed, object-oriented programming language for building complex programs.

PHP

PHP is an open-source side language for creating dynamic web pages, known as PHP Hypertext Preprocessor.

3.4 Relationship between front-end and back-end

3.5 Front-end and Back-end replace to presentation and application layer

The front-end and back-end work together to create a complete system The front-end provides a user interface, while the back-end processes data and handles system logic Without both, the system would not function

properly.

Task 4: Review the database and tools used to develop websites and discuss the differences between online website creation tools and custom built sites with regards to design flexibility, performance, functionality, User Experience (UX) and User Interface (UI) (P4)

Database

IDE and CMS

Online website creation tools

Custom built website

Compare online website creation tool and custom built website

Definition: Databases are computer frameworks that store, organize,

protect, and share data, often called a database management

system (DBMS).

4.1 Database

Some types of database

Definition: An integrated development environment (IDE) is a piece

of software that serves as a text editor, debugger, and compiler all

in one.

4.2 IDEs and type of IDE

Some types of IDE popular

One of the most popular IDEs, Visual Studio and visual studio code, is known for its excellent

functionality and continued support for extensions and updates.

Eclipse is a free to use open source editor Some experienced developers strongly advise it

Definition: A content management system (CMS) helps firms

manage digital data These systems enable whole teams to create, modify, organize, and publish data.

4.3 CMS and type of CMS

Some types of CMS

4.4 Online website creation tools

Some example of tools website builders

A custom-built website would be excellent for your business if you have the funds and time.

4.5 Custom built website

Website creation tools Custom built sites

Website creation tools are pre-built software applications that allow users

to create a website using templates and drag-and-drop interfaces Colors and maybe fonts can be modified, but the layout is rather fixed.

A custom-built website involves the hiring of a web development team that takes the time to understand the company's requirements and builds a website from scratch This option provides greater flexibility, control, and scalability than website creation tools.

4.6 The differences between website creation tools and custom built sites.

Task 5: Evaluate a range of tools and techniques available to design and develop a custom built website(M3)

IDE

Database management system

Web design

Server

Sublime text

A lightweight and efficient editor supporting various programming languages and file types, regarded

as the fastest for code writing.

Visual studio code

Supports multiple languages, including JavaScript, with easy-to- use shortcuts and community contributions for smooth code

Microsoft SQL Server is a widely used RDBMS for storing and

managing data, favored for mission-critical applications and large datasets.

5.2 Database Management System

Open-source MySQL is a favored, scalable RDBMS for web and

software development due to its popularity and

cost-effectiveness.

Adobe Photoshop CS6 is a widely used software for designing graphics and visual content for custom websites, equipped with powerful tools

XAMPP is a comprehensive web development environment with tools and technologies for designing and developing custom-

built websites.

XAMPP

5.4 Server

Task 6: Justify the tools and techniques chosen to realize a custom built website.(D1)

Interface

Database

Tool IDE

Server

6.1 Interface

I use the tool figma to build my website interface because

It have plugins for generating CSS code, exporting assets, and integrating with other tools

It provides a range of vector editing tools that can be used to create and manipulate shapes, icons, and other design elements.

I use the adobe photoshop cc 2023 to build my website interface because

It help me be easy to change color correction and resizing by pts.

Photoshop includes a range of text tools that can be used to add text to designs This includes the ability to manipulate font styles, sizes, colors, and effects.

6.2 IDE

I use visual studio code to generate the source code because:

It integrates with git environment, or technologies like ajax, jquery, php, etc.

I like the color of its themes.

6.3 Database Management System

I use SQL server to create relational database

It makes it possible for me to back up my data

I can quickly create by concatenating ER diagrams in this tool

6.4 Server

I use Xampp as the server to run the website

It includes phpMyAdmin, I can create and manage databases, run SQL queries, and perform other database-related tasks.

It helps me to detect the error code in the process of creating the web

a DNS organised 10

b DNS are managed 11 III Explain the purpose and relationships between communication protocols, server hardware, operating systems and web server software with regards to designing, publishing and accessing a website.(P2) 13 3.1 Communication protocols 13

a Definition: 13

b Purpose: 14

c HTTP protocol 15 3.2 Web server hardware 16 3.3 Web server software 17 3.4 Operating systems 21 3.5 Relationships between communication protocols, server hardware Operating systems and web server software 22

IV Evaluate the impact of common web development technologies and frameworks with regards to website design, functionality and

management (M1) 23 4.1 Web Application Technologies and Frameworks 23 4.2 Evaluation the impact of web technologies and frameworks: 26