Web Application

Development & Hosting Pt-1

Introduction

BY Gift Msigwa

ITT 06112
Internet

❖ As a developer, it is important to have a solid understanding of what the internet is and how it
works.
❖ It is the foundation upon which most modern software applications are built.
❖ In order to build effective, secure, and scalable applications and services, you need to have a solid
understanding of how the internet works and how to leverage its power and connectivity.
Introduction to the Internet

❖ Before we learn what the Internet is, we need to understand what a Network is.
❖ A network is a group of computers or other devices which are connected to eachother.
❖ For example,
➢ You at your home might have a network of computers and devices.
➢ Your friend living next door might have a similar network of devices.
➢ Their neighbor might have a similar network of devices.
➢ All these networks when connected together form the internet.

NB: The internet is a network of networks.

How the Internet Works: An Overview
❖ At a high level, the internet works by connecting devices and computer systems together using a
set of standardized protocols.
❖ These protocols define how information is exchanged between devices and ensure that data is
transmitted reliably and securely.
❖ The core of the internet is a global network of interconnected routers, which are responsible for
directing traffic between different devices and systems.
❖ When you send data over the internet, it is broken up into small packets that are sent from your
device to a router.
❖ The router examines the packet and forwards it to the next router in the path towards its
destination.
❖ This process continues until the packet reaches its final destination.
How the Internet Works: Protocols

❖ To ensure that packets are sent and received correctly, the internet uses a variety of protocols,
including the Internet Protocol (IP) and the Transmission Control Protocol (TCP).
➢ IP is responsible for routing packets to their correct destination,
➢ while TCP ensures that packets are transmitted reliably and in the correct order.
❖ In addition to these core protocols, there are a wide range of other technologies and protocols that
are used to enable communication and data exchange over the internet,
➢ including the Domain Name System (DNS),
➢ the Hypertext Transfer Protocol (HTTP),
➢ and the Secure Sockets Layer/Transport Layer Security (SSL/TLS) protocol.
❖ As a developer, it is important to have a solid understanding of how these different technologies
and protocols work together to enable communication and data exchange over the internet.
 Basic Concepts and Terminology
❖ To understand the internet, it’s important to be familiar with some basic concepts and terminology.
❖ Here are some key terms and concepts to be aware of:
➢ Packet: A small unit of data that is transmitted over the internet.
➢ Router: A device that directs packets of data between different networks.
➢ IP Address: A unique identifier assigned to each device on a network, used to route data to the correct destination.
➢ Domain Name: A human-readable name that is used to identify a website, such as google.com.
➢ DNS: The Domain Name System is responsible for translating domain names into IP addresses.
➢ HTTP: The Hypertext Transfer Protocol is used to transfer data between a client (such as a web browser) and a server (such
as a website).
➢ HTTPS: An encrypted version of HTTP that is used to provide secure communication between a client and server.
➢ SSL/TLS: The Secure Sockets Layer and Transport Layer Security protocols are used to provide secure communication over
the internet.

NB: Understanding these basic concepts and terms is essential for working with the internet and developing internet-based
applications and services.
The Role of Protocols in Internet

❖ Protocols play a critical role in enabling communication and data exchange over the internet.
❖ A protocol is a set of rules and standards that define how information is exchanged between
devices and systems.
❖ Role of Protocols in Internet:
➢ IP is responsible for routing packets of data to their correct destination,
➢ while TCP and UDP ensure that packets are transmitted reliably and efficiently.
➢ DNS is used to translate domain names into IP addresses,
➢ and HTTP is used to transfer data between clients and servers.
❖ One of the key benefits of using standardized protocols is that they allow devices and systems from
different manufacturers and vendors to communicate with each other seamlessly.
➢ For example, a web browser developed by one company can communicate with a web server developed by
another company, as long as they both adhere to the HTTP protocol.
Understanding IP Addresses and Domain Names
❖ IP addresses and domain names are both important concepts to understand when working with
the internet.
❖ An IP address is a unique identifier assigned to each device on a network.
❖ It’s used to route data to the correct destination, ensuring that information is sent to the intended
recipient.
➢ For example “192.168.1.1”
❖ Domain names, on the other hand, are human-readable names used to identify websites and other
internet resources.
❖ They’re typically composed of two or more parts, separated by periods.
➢ For example, “google.com”
❖ Domain names are translated into IP addresses using the Domain Name System (DNS).
Introduction to HTTP and HTTPS

❖ HTTP (Hypertext Transfer Protocol) and HTTPS (HTTP Secure) are two of the most commonly
used protocols in internet-based applications and services.
❖ HTTP is the protocol used to transfer data between a client (such as a web browser) and a server
(such as a website).
➢ When you visit a website, your web browser sends an HTTP request to the server, asking for the webpage or
other resource you’ve requested.
➢ The server then sends an HTTP response back to the client, containing the requested data.
❖ HTTPS is a more secure version of HTTP, which encrypts the data being transmitted between the
client and server using SSL/TLS (Secure Sockets Layer/Transport Layer Security) encryption.
➢ This provides an additional layer of security, helping to protect sensitive information such as login credentials,
payment information, and other personal data.
Building Applications with TCP/IP
❖ TCP/IP (Transmission Control Protocol/Internet Protocol) is the underlying communication protocol used
by most internet-based applications and services.
❖ It provides a reliable, ordered, and error-checked delivery of data between applications running on
different devices.
❖ When building applications with TCP/IP, there are a few key concepts to understand:
➢ Ports: Ports are used to identify the application or service running on a device.
■ Each application or service is assigned a unique port number, allowing data to be sent to the correct
destination.
➢ Sockets: A socket is a combination of an IP address and a port number, representing a specific endpoint for
communication.
■ Sockets are used to establish connections between devices and transfer data between applications.
➢ Connections: A connection is established between two sockets when two devices want to communicate with each
other.
■ During the connection establishment process, the devices negotiate various parameters such as the maximum
segment size and window size, which determine how data will be transmitted over the connection.
➢ Data transfer: Once a connection is established, data can be transferred between the applications running on each
device.
■ Data is typically transmitted in segments, with each segment containing a sequence number and other
metadata to ensure reliable delivery.
Securing Internet Communication with SSL/TLS

❖ As we discussed earlier, SSL/TLS is a protocol used to encrypt data being transmitted over the
internet.
❖ It is commonly used to provide secure connections for applications such as web browsers, email
clients, and file transfer programs.
❖ When using SSL/TLS to secure internet communication, there are a few key concepts to
understand:
➢ Certificates: SSL/TLS certificates are used to establish trust between the client and server.
➢ Handshake: During the SSL/TLS handshake process, the client and server exchange information to negotiate
the encryption algorithm and other parameters for the secure connection.
➢ Encryption: Once the secure connection is established, data is encrypted using the agreed-upon algorithm
and can be transmitted securely between the client and server.
How browsers work

❖ A web browser is a type of software that allows you to find and view websites on the Internet.
❖ There are five major browsers used on desktop today:
➢ Chrome,
➢ Internet Explorer,
➢ Firefox, Safari
➢ and Opera.
 The browser's high level structure
❖ The browser's main components are:
➢ The user interface: this includes the address bar, back/forward button,
bookmarking menu, etc. Every part of the browser display except the
window where you see the requested page.
➢ The browser engine: marshals actions between the UI and the
rendering engine.
➢ The rendering engine: responsible for displaying requested content.
For example if the requested content is HTML, the rendering engine
parses HTML and CSS, and displays the parsed content on the screen.
➢ Networking: for network calls such as HTTP requests, using different
implementations for different platform behind a
platform-independent interface.
➢ UI backend: used for drawing basic widgets like combo boxes and
windows. This backend exposes a generic interface that is not platform
specific. Underneath it uses operating system user interface methods.
➢ JavaScript interpreter. Used to parse and execute JavaScript code.
➢ Data storage. This is a persistence layer. The browser may need to
save all sorts of data locally, such as cookies. Browsers also support
storage mechanisms such as localStorage, IndexedDB, WebSQL and
FileSystem.
Reference

❖ The browser's high level structure

❖
Assignment 1
The World Wide Web (WWW)

❖ A way to access and share information

➢ Technical papers, marketing materials, recipes,
❖ Ahuge network of computers: the Internet
❖ Graphical, not just textual
❖ Information is linked to other information
❖ Application development platform
➢ Shop from home
➢ Provide self-help applications for customers and partners
WWW (WEB) Architecture
WWW (WEB) Architecture

❖ Client/Server, Request/Response architecture

➢ You request a Web page
■ e.g. http://www.msn.com/default.asp?name=Leon
■ HTTP request
➢ The Web server responds with data in the form of a Web page
■ HTTP response
■ Web page is expressed as HTML
➢ Pages are identified as a Uniform Resource Locator (URL)
■ Protocol: http
■ Web server: www.msn.com
■ Webpage: default.asp
■ Can also provide parameters: ?name=Leon
Web Standards
❖ Governing body for Internet since 1992
➢ http://www.isoc.org
❖ Internet Engineering Task Force (IETF)
➢ http://www.ietf.org/
➢ Founded 1986
➢ Alarge open international community of network designers, operators, vendors, and researchers concerned
with the evolution of the Internet architecture and the smooth operation of the Internet
➢ It is open to any interested individual
❖ World Wide Web Consortium (W3C)
➢ http://www.w3.org
➢ Founded 1994 by Tim Berners-Lee
➢ an open forum of companies and organizations with the mission to lead the Web to its full potential
➢ W3C has around 450 Member organizations from al over the world Publishes technical reports and
recommendations
➢ The rule-making body of the Web si the W3C
➢ W3C puts together specifications for Web standards
➢ The most essential Web standards are HTML, CSS and XML
What Is Web Application Development?

❖ Web development, also known as website development, refers to the tasks associated with
creating, building, and maintaining websites and web applications that run online on a browser.
➢ It may, however, also include web design, web programming, and database management.
❖ Web Development vs. Web Design
➢ Web Designers:
■ Create everything a user sees on a website or software product, including all visual, color, typography,
and usability elements
➢ Web Developers:
■ Write the code that makes a website function, whether they work on the front end or back end
(server-side)
Main components of a web application

❖ A web application typically consists of various components that work together to provide a
user-friendly and functional experience.
❖ These components can be categorized into:
➢ Front-end components
➢ Back-end components
Primary components of a web application

❖ User Interface (UI):

➢ HTML (Hypertext Markup Language): Defines the structure and content of web pages.
➢ CSS (Cascading Style Sheets): Determines the visual presentation and layout of web pages.
➢ JavaScript: Enables dynamic and interactive functionality within the web application.
❖ Web Server:
➢ A web server (e.g., Apache, Nginx, or Microsoft IIS) receives and processes incoming HTTP requests, serves
static files (HTML, CSS, images, etc.), and routes requests to the appropriate components.
❖ Application Server:
➢ An application server (e.g., Node.js, Tomcat, Ruby on Rails) handles server-side logic, interacts with databases,
and generates dynamic content.
Primary components of a web application

❖ Database:
➢ Databases (typically relational databases like MySQL or PostgreSQL) store and manage the application's
data.
❖ Back-End Logic:
➢ The back-end logic includes the server-side code responsible for processing requests, implementing business
logic, and interacting with the database.
❖ APIs (Application Programming Interfaces):
➢ APIs enable communication between different components of the application and external services, defining
how data and functionality can be accessed and used.
❖ Authentication and Authorization:
➢ Components for user authentication (verifying user identity) and authorization (granting access rights) to
ensure data security and privacy.
What Is Web Hosting?

❖ Web hosting is an online service that allows you to publish your website files onto the internet.
❖ So, anyone who has access to the internet has access to your website.
❖ Types of Web Hosting
➢ Shared Hosting
➢ VPS (Virtual Private Server) Hosting
➢ Dedicated Server Hosting
➢ Cloud Hosting
➢ Reseller Hosting
Web Design Principles

❖ Interoperability: Web languages and protocols must be compatible with one another independent
of hardware and software
❖ Evolution: The Web must be able to accommodate future technologies. Encourages simplicity,
modularity and extensibility
❖ Decentralization: Facilitates scalability and robustness
What Is Web Development?

❖ Web development is the process of creating websites and web

applications.
❖ It involves design, layout, coding, content creation, and
functionality.
❖ Web development often involves using programming
languages, tools, and frameworks.
❖ Also known as Web Programing
❖ There two division of web application:
➢ Front-end Development ( Also called Client-side Development)
➢ Backend Development (also called Server-side Development)
Front-end Development

❖ Front-end development is the process of creating the visual and

interactive elements of a website that users interact with directly.
❖ It focuses on the visual elements of a website that a user will
interact with.
❖ A front end developer has one general responsibility: to ensure that
website visitors can easily interact with the page. They do this
through the combination of design, technology and programming to
code a website's appearance, as well as taking care of debugging.
❖ The common technologies we can use in front-end development are:
➢ HTML
➢ CSS
➢ JAVASCRIPT
Front-end Development Technologies

❖ HTML was first created by Tim Berners-Lee, starting in 1989. It

stands for Hypertext Markup Language.
❖ Hypertext means that the document contains links that allow the
reader to jump to other places in the document.
❖ A Markup Language is a way that computers speak to each other to
control how text is processed and presented.
❖ It describes the structure of a web page and consists series of
elements.
❖ Its elements tells browser how to display the content.
❖ It's code is written in Notepad or any text editor but save it as .htm
or .html extension.
Front-end Development Technologies (Cont…)

❖ CSS was first proposed by Hakon Wium Lie on October 10,

1994 at CERN (European Organization for Nuclear
Research).
❖ Cascading Style Sheets (CSS) describes how HTML elements
are to be displayed on screen.
❖ CSS saves a lot of work. It can control the layout of multiple
web pages all at once.
❖ It is also responsible for responsive layouts of a website.
❖ It is also written in any text editor but save as .css extension.
Front-end Development Technologies (Cont…)

❖ Javascript was invented by Brendan Eich in 1995.

❖ Javascript is the Programming Language for the Web.
❖ Javascript can update and change both HTML and CSS.
❖ Javascript is responsible for the Functioning of the website.
❖ It is a scripting language that enables us to create dynamically
updating content, control multimedia, animate images, and
pretty much everything else.
❖ It is also written in any text editor but add the .js extension.
Back-end Development

❖ Backend development controls what goes on behind

the scenes of the web applications.
❖ It is also known as server side development.
❖ Backend usually consists of three parts:
❖ A server
❖ An Application
❖ A Database
❖ Users can't see how the backend works but this code
is what communicates the database information to
the browser.
❖ Common Backend development technologies are:
➢ SQL
➢ PHP
Back-end Development Technologies

❖ SQL stands for Structured Query Language.

❖ SQL let us access and manipulate databases.
❖ SQL became a standard of the American National Standards
Institute (ANSI) in 1986, and of the International Organization
for standardization (ISO) in 1987.
❖ SQL is a database language, it is used for database creation,
deletion, fetching rows, and modifying rows, etc.
❖ It can retrieve data and executes queries against the database.
❖ Every website is supported by a database at the backend. Each
time a user submits information or searches something in the
website, data gets stored and retrieved from the database. SQL is
the language for querying and storing data in the database.
Back-end Development Technologies (Cont…)

❖ PHP is an acronym for "PHP: Hypertext Preprocessor".

❖ PHP is a widely-used, open source scripting language.
❖ PHP scripts are executed on the server.
❖ PHP is free to download and use.
❖ PHP is a server side scripting language that is embedded in
HTML.
❖ It is used to manage dynamic content, databases, session
tracking, even build entire e-commerce sites.
Who is Web Developer?

❖ A web developer is a programmer who specializes in the development of

World Wide Web applications using a client-server model.
❖ The applications typically use HTML, CSS and JavaScript in the client, PHP, C#,
Python, Node.js or Java in the server, and http for communications between
client and server.
❖ Web developers typically do the following:
➢ Meet with clients or management to discuss the needs and design of a website.
➢ Create and test applications for a website.
➢ Write code for the website, using programming languages such as HTML, CSS, etc.
➢ Work with other team members to determine what information the site will contain.
➢ Work with graphics and other designers to determine the website's layout.
➢ Integrate graphics, audio, and video into the website.
➢ Monitor website traffic.
Type of Web Developer

❖ There are 3 kinds of Web Developers -

➢ Front End Developer,
➢ Back End Developer and,
➢ Full Stack Developer.
❖ Front-End Developer :-They are responsible for how a website
looks. They create the site's layout and integrate graphics,
applications (such as a retail checkout tool), and other content.
They also write web design programs in a variety of computer
languages, such as HTML or JavaScript.
❖ Back-End Developer :- They are responsible for server-side web
application logic and integration of the work front-end
developers do.
❖ Full-Stack Developer :- A full-stack web developer is a person
who can develop both client and server software. They perform
the task of both Front end and Back End Developer.