Web design and development, Assignments of Web Design and Development

Thí describes the web design of the shop. It contains the pages and buttons. Customers can use it to buy something.

Typology: Assignments

2019/2020

Uploaded on 12/14/2020

tran-anh-phuong
tran-anh-phuong 🇻🇳

4.4

(9)

1 document

1 / 44

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
ASSIGNMENT 1 FRONT SHEET
Qualification
BTEC Level 5 HND Diploma in Computing
Unit number and title
10: Website Design & Development
Submission date
10/08/2020
Date Received 1st submission
Re-submission Date
Date Received 2nd submission
Student Name
Tran Anh Phuong
Student ID
GCD19842
Class
GCD0803
Assessor name
Srikanth Raju Kandukuri
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
Grading grid
P1
P2
P3
P4
M1
M2
M3
D1
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15
pf16
pf17
pf18
pf19
pf1a
pf1b
pf1c
pf1d
pf1e
pf1f
pf20
pf21
pf22
pf23
pf24
pf25
pf26
pf27
pf28
pf29
pf2a
pf2b
pf2c

Partial preview of the text

Download Web design and development and more Assignments Web Design and Development in PDF only on Docsity!

ASSIGNMENT 1 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing Unit number and title 10: Website Design & Development Submission date 10/08/2020 Date Received 1st submission Re-submission Date Date Received 2nd submission Student Name Tran Anh Phuong Student ID GCD Class GCD0803 Assessor name Srikanth Raju Kandukuri 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 Grading grid P1 P2 P3 P4 M1 M2 M3 D

 Summative Feedback:  Resubmission Feedback:

Grade: Assessor Signature: Date: Signature & Date:

Table of Contents

Chapter 1: PROBLEM STATEMENT

1. SCENARIO You work as a full-stack web team leader for a leading creative web solutions and marketing company. Your team is about to have a big contract to develop an online shopping mall. One of the preparation tasks is to choose appropriate tools and techniques to realize a custom built website. As part of your role, you have been asked to create an engaging presentation to help train junior staff members on basic web technologies including hosting and website management as well as server technologies. Your presentation should not only explain basic knowledge in the domain but also points out the impact of these technologies to website design, functionality, management or performance. You also need to present more technical presentation to senior staff members to discuss about front- end, back-end technologies as well as other tools, techniques and software used to develop website from simple (online website creation tools) to complicated (custom built). Your presentation will be used as guidance of choosing suitable tools and techniques for the next project. 2. REPORT OBJECTIVES This report aims to help to understand more about basic web technologies including hosting and website management as well as server technologies and categorizing website technologies, tools and software used to develop websites. In addition, this report also explains basic knowledge in the domain but also points out the impact of these technologies to website design, functionality, management or performance; discusses about front- end, back-end technologies as well as other tools, techniques and software used to develop website from simple (online website creation tools) to complicated (custom built); explains server technologies and management services associated with hosting and managing websites.

Chapter 2: SERVER TECHNOLOGIES AND MANAGEMENT SERVICES

ASSOCIATED WITH HOSTING AND MANAGING WEBSITES

1. Identify the purpose and types of DNS, including explanations on how domain names are organized and managed. 1.1 Definition of DNS (Domain Name System) Figure 1 : DNS According to (Anon., 2001), Domain Name System (DNS) is a hierarchical and decentralized naming system for computers, services, or other resources connected to the Internet or a private network. It associates various information with domain names assigned to each of the participating entities. Most prominently, it translates more readily memorized domain names to the numerical IP addresses needed for locating and identifying computer services and devices with the underlying network protocols. By providing a worldwide, distributed directory service, the Domain Name System has been an essential component of the functionality of the Internet since 1985. The structure of DNS:  Domain name space  Domain name  Domain name syntax  Internationalized domain names  Name servers  Authoritative name server 1.2 Purpose DNS can be understood as a "translator" and "communicator". DNS will do the job of translating the domain name into an IP address with 4 different groups of numbers. For example www.tenmien.com to 421.64.874.899 or vice versa translating an IP address into a domain name. When working like that, the

The top-level-domain servers can then provide information about the address of the authority server for the domain at the second-level-domain that contains the domain name to find. The search continues until the domain authority displays the domain found. According to this mechanism of action, you can search for any domain on the domain name space. Another noteworthy point, the domain search always starts with the queries submitted to the root server. If the domain name servers at the root level are inactive, this search will not be performed. To prevent this from happening on the Internet there are currently 13 domain name servers at root level. These domain name servers in general and in the same system in particular are located in many different positions on the Internet.  Local Name Server: this server contains information to search for domain name servers hosting for lower domains. It is usually maintained by businesses, Internet service providers (ISPs). 1.3.2 Types of DNS are commonly used today  DNS Google: is one of the DNS servers commonly used today because of its stability and fast speed. (Ex: 8.8.8.8, 8.8.4.4)  DNS OpenDSN: is a popular domain name resolution system service in the world. It provides users with DNS addresses for easy, fast and secure website access. OpenDNS provides many security features, options, services based on cloud computing technology. (Ex: 208.67.222.222, 208.67.220.220)  DNS Cloudflare (Ex: 1.1.1.1)  DNS VNPT (Ex: 203.162.4.191, 203.162.4.190)  DNS Viettel (Ex: 203.113.131.1, 203.113.131.2)  DNS FPT (Ex: 210.245.24.20, 210.245.24.22) 1.4 How DNS works Figure 3 : How DNS works

The Domain Name System (DNS) is a directory of names that matches with numbers. The numbers are the IP addresses which computers use to communicate with each other. The DNS is a protocol which uses the TCP/IP protocol set. It helps convert URLs into IP addresses that computers use to identify each other on a network. It is a system that matches names with numbers like a phonebook does. With a DNS you do not need to have the IP address of everyone, you connect to a Domain name server, which holds a large database of domain names and translates them to IP addresses. So, when you type in a website like www.bbc.co.uk for example, your internet service provider will request the DNS linked with the domain name and then translates it into an IP address that a computer understands then will direct you to the correct website. If you have previously visited the website, the computer will first check the cache to see if it has already visited the website before, if not it will do a DNS query to find the website. 1.5 How domain name are organized and managed 1.5.1 Definition of domain name According to (Anon., 2001), a domain name is an identification string that defines a realm of administrative autonomy, authority or control within the Internet. Domain names are used in various networking contexts and for application-specific naming and addressing purposes. In general, a domain name identifies a network domain, or it represents an Internet Protocol (IP) resource, such as a personal computer used to access the Internet, a server computer hosting a web site, or the web site itself or any other service communicated via the Internet. 1.5.2 The structure of domain name Domain in DNS is the domain name of any website. For example: bkns.vn, dowload.com.vn, google.com, gamevui.com, etc. Those domain names are the domain names of their respective websites. The structure of a domain name is: http: //www.domainname.tld.  http: hypertext transfer protocol  www: World Wide Web  domainname: domain name  itd (top - level domain): extension ".com", ".org", ".net", ... 1.5.3 How domain name are organized and managed Domain name are organized and managed by DNS. DNS has the ability to query other DNS servers for resolved names. First, from machines within the domain, it will resolve domain name into Internet address both inside and outside the domain it manages. Second, it responds to external DNS servers trying to resolve the domain name within it. DNS server can remember which domains it resolves and uses for subsequent requests. Depending on the size of each domain name resolution system, the number of domains that can be saved differs.

computers to be able to communicate with one another. HTTP is an application protocol which runs on top level of the TCP/IP. And it uses port 80.  FTP (File Transfer Protocol) – is mainly a standard protocol of network which is used to transfer data from client to host or one server to another server. It uses a client-server architecture. When creating a website, you will use the FTP protocol to upload your created and completed web pages to the web server. The port numbers used by this are 20 for data and 21 for control.  SMTP (Simple Mail Transfer Protocol) – The mail protocol uses the SMTP protocol to send emails on the internet, it only sends the mail from one user to another. To receive the emails, then the POP3 protocol is used to collect the mail from the receiver. This protocol works with the Mail Transfer Agent (MTA) protocol to send your communication to the correct computer and email inbox. The port number used by SMTP is 25. 2.2 Web server A web server is a computer that stores a website’s components files (e.g. HTML documents, images, and JavaScript files) and delivers them to the end-user’s device over the internet. Three main elements of a web server:  Server hardware  Operating system software  Web server software  Server hardware is the physical components that are responsible for the delivering of the web content. Similarly, the server hardware has PC with large amount of memory and larger hard disk drives and also a faster processor than other normal monitors that stores the component files of a website (e.g. HTML documents, image files, CSS and JavaScript files) and can deliver them to the device end-user. It connects to the Internet and is accessible through a domain name.  Operating system software is also known as the backbone of the process, the operating system is the platform where everything will be done. The operating system provides the user interface like GUI, terminal, CMD, etc. in order to perform the work. It provides memory management, loading, and execution, data security, process management, etc. during the process. Some of operating systems are Ubuntu, Linux, Windows, etc.  Web server software consists of several parts that control how web users access files stored on an HTTP server (HTTP server). An HTTP server is software that understands URLs (web addresses) and HTTP (the protocol your browser uses to view web pages).

Basically, whenever a browser needs a file stored on a web server, the browser requests the file over HTTP. When a request connects to the correct web server (hardware), the HTTP server (software) sends the requested document back. 2.3 The purpose and relationships regarding to designing, publishing and accessing the website The server is the software (not the computer itself) that allows the computer to communicate with other computers and 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. In order for a computer to be part of the web, it must be running special web server software that allows it to handle Hypertext Transfer Protocol transactions. Web servers are also called HTTP servers. Pages delivered are most frequently HTML documents, which may include images, style sheets and scripts in addition to the text content. Multiple web servers may be used for a high traffic website. To publish a website, you need a static or dynamic web server.  A static web server, or stack, consists of a computer (hardware) with an HTTP server (software). It is a static web because the server sends the files it holds intact (as-is) to your browser.  A dynamic web server consists of a static web server plus software extensions, most commonly an application server and a database. It is a dynamic web because the application server updates the cached files before sending them to your browser via the HTTP server.  For example, to create the web pages you see in the browser, the application server might populate an HTML template with the content retrieved from a database. Sites like Wikipedia have thousands of web pages, but they are not real HTML documents, but just a few HTML templates and a huge database. This setup makes it easier and faster to maintain and distribute content. Operating systems: most people are currently using windows operating system which is necessary to perform every task during website designing and publishing. Operating systems allows them to send and receive the files and all the mechanism for designing and publishing will be inside the operating systems. The main purpose of web server software is to store website files in order to broadcast them over the internet to make possible for visitors to visit. Web server is a powerful computer or device which stores and transmits data via the internet. Apache is the most commonly used web server software on the market 6. Apache is an open source software and is maintained by a community of developers whilst being backed by the Apache Software Foundation. Apache is a good software to use on a web server as it is free to use and download and is

The ability to expand and develop is easy and quick Expanding and developing website is easy Scalability and website development are difficult Scalability and website development are difficult Diverse support tools and technologies. Web- based web 2. development. Using Ajax technology makes the browsing process faster and more user- friendly. Diverse support tools and technologies. Web- based web 2. development. Using Ajax technology makes the browsing process faster and more user-friendly. Supporting tools and technologies are few and difficult to find. Supporting tools and technologies are few and difficult to find. Based on that, users can choose a suitable technology for web design, functionality and management. Each such technology will have its own advantages and disadvantages, in which PHP technology has many advantages. PHP is considered one of the most effective web development technologies available today. ASP technology has the same advantages as PHP, but this type of technology costs more, the time to code and implement is slightly more complicated, the number of hosting providers and websites is not much. However, ASP is also among the most popular technologies in web development. In addition, other web development technologies are ASP and JSP. However, these two types have slower processing speed, the number of hosting providers is not much, the tools and support technologies are less difficult to find, scalable and web development will be more difficult.  Frameworks are “materials” that programmers can use to build their own applications or software. Instead of having to design them themselves, they just need to exploit these materials, take steps to put them together and create the final product. The framework does not require highly specialized skills. Programmers can still create finished products that are of good quality. Different frameworks will be available for different applications or software. And one of the most important skills of a developer is to know which framework is suitable for which application. Figure 4 : Frameworks

Frameworks are an important part of making a lot of today's software and applications. It offers many advantages such as:  There are general features available for application and software. For example, almost all e- commerce websites need to have registration, login, manage user data, ... The framework has built these features and programmers only need to put them into use when website construction.  Helping programmers save maximum time and effort when developing software and applications.  Allowing application products to inherit standardized features and structures. This makes application operation and maintenance and troubleshooting easier.  Allowing users to expand arbitrarily based on what the framework has provided. Programmers can extend features by selectively overwriting existing classes or adding new functionality on a Framework platform, as long as certain standards are followed. Besides the practical benefits, the framework also has certain disadvantages:  It takes a lot of time and effort to learn to master the framework  When using the framework, the size of the application and the software will be very large. In many cases, a website can weigh hundreds of megabytes of code even if it doesn't contain any content  When writing code, programmer needs to comply with the rules set out by the framework  Frameworks are usually large in size, so they are not suitable for developing very small applications. Writing your own code will save you much more time 3.1 Web Framework of Ruby: Ruby on Rails Figure 5 : Ruby on Rails URL: http://rubyonrails.org/

3.3 WEB Framework for JAVA: Spring Figure 7 : Spring URL: https://projects.spring.io/spring-framework/ Spring framework is an open source Java Platform, a lightweight solution for Java Enterprise. With Spring Framework developers can create high-performance, easy-to-test, and reusable code. Spring Framework's core features can be used in developing any Java application or building web applications on the Java EE platform. The Spring Framework's goal is to make J2EE application development easier and promote better programming using the POJO-based model. Spring Framework is developed based on the following views:  Simplify development through using simple Java objects also known as POJO (Plain Old Java Object)  Loosen binding between components through the use of Dependency Injection and writing interfaces  Approach declarative programming using convention and general aspects  Minimize ritual and boilerplate code through the use of templates and aspects  Spring Framework is often used when developing large-scale systems. 3.4 Web Framework of JavaScript: Angular Figure 8 : Angular URL: https://angular.io/

Angular is a JavaScript framework for building dynamic web applications. This is a very powerful JavaScript Framework and is often used to build Single Page Application (SPA) projects. It works based on HTML extension attributes. AngularJS is a framework with relatively large functions like Ruby on Rails. However, Angular is a framework developing based on JavaScript to create web applications. Angular is often used for frontend development through APIs, using a very powerful MVC model. Angular source code automatically fixes with different browsers, so you don't need to worry about browser compatibility issues. Angular is completely free open source and developed by thousands of programmers around the world. 3.5 Framework used in Design of CSS / JS: Bootstrap Figure 9 : Bootstrap URL: http://getbootstrap.com/ Bootstrap is called web design framework and is structured from CSS / JavaScript. Bootstrap is a framework developed by Twitter so we can easily create a flat design like Twitter. Bootstrap is a collection of built-in properties and values that help web designers save time working on a web project without having to create css, JavaScript, html, font scripts while they're repeating. The great thing about Bootstrap is that Responsive Web Design can adapt to many different screen sizes (PC, Tablet, Smartphone …), so even programmers who are not good at design can create them looking nice easily. Bootstrap templates are extremely diverse from free to paid, so by changing colors, typography ... we can completely create websites according to our imagination.  In summary, using frameworks to design a website saves a lot of time. In the long term, a framework ensures the longevity of the applications. If a development team works as they please. Only that specific group can easily maintain and upgrade the application, which is the way a publisher supports an exclusive solution.