WEB-SYSTEM

UNIT I
Introduction to Web Systems

• The World Wide Web, as we know it today, is a product of decades of

technological advancement and innovation.
• Its roots can be traced back to the early days of the internet, when researchers
and scientists were developing interconnected networks to share information and
resources.

Key milestones in the evolution of the web

● 1960’s: The ARPANET (Advanced Research Projects Agency Network) is
established, laying the groundwork for the internet.
● 1989: Tim Berners-Lee develops the Hypertext Markup Language (HTML), a
language for creating structured documents.
● 1990: Berners-Lee proposes the concept of the World Wide Web, a global
information system based on HTML and the Hypertext Transfer Protocol
(HTTP).
● EARLY 1990’: The first web browsers (such as Mosaic) and web servers
emerge, making it possible for people to access and create web content.
● Late 1990s and early 2000s: The dot-com boom and the rise of e-commerce
drive rapid growth in the web.
● 2010: The mobile revolution and the emergence of social media platforms
transform the way people interact with the web.

Internet Protocols and Web Architecture

• The internet is a vast network of interconnected computers that communicate
using a set of standardized protocols.
•These protocols ensure that data can be transmitted reliably and efficiently across
the network.

Key internet protocols

1. TCP/IP (Transmission Control Protocol/Internet Protocol)
The fundamental protocols that govern communication on the internet.
2. HTTP (Hypertext Transfer Protocol)
The protocol used to transfer web pages and other data between web servers
and web browsers.
3. DNS (Domain Name System)
A system that translates human-readable domain names into machine-
readable IP addresses.
4. FTP (File Transfer Protocol)
A protocol for transferring files between computers.

Web architecture
 ● The web is typically structured as a client-server architecture, where
clients (web browsers) send requests to servers (web servers) for web
content.
● The server processes the request and sends the requested content back to the
client.

Web Browsers and Web Servers

● Web browsers
A web browser is a software application that allows users to access and
view web content
● Popular web browsers include:
Google Chrome, Mozilla Firefox, Safari, Microsoft Edge
● Web servers
computer system that delivers web pages to clients. Web servers typically run
software such as Apache

Key components of a web server

● Web server software
The software that handles incoming requests and sends out responses
● Web content
The files (HTML, CSS, JavaScript, images, etc.) that make up the web pages.
● Database (optional)
A database may be used to store and retrieve dynamic content.

UNIT II: Web Development

● Web developers play a crucial role in creating and maintaining websites.
● Their responsibilities can vary depending on their specific expertise and
the project requirements.

FRONT-END DEVELOPER
- Focuses on the visual elements of a website, including the layout, design,
and user interface.
- They primarily work with HTML, CSS, and JavaScript
BACK-END DEVELOPER
- Handles the server-side logic and functionality of a website, such as
database interactions and API integrations.
- They often work with languages like PHP, Python, Ruby, or Java.
FULL-STACK DEVELOPER
- Possesses skills in both front-end and back- end development, allowing them
to work on all aspects of a website.
UI/UX DESIGNER
- Designs the user interface and user experience of a website, focusing on
creating intuitive and visually appealing designs.

WEB DESIGNER
 - Creates the overall look and feel of a website, including the layout, color
scheme, and typography
- A professional responsible for designing a website's user interface focuses on
creating a visually appealing and user-friendly experience that effectively
communicates the website's mission. Poor design leads 38% of visitors to
stop engaging, while 48% consider design the most crucial factor in
determining a business’s credibility. Additionally, 98% of users who have a
bad experience will turn to a competitor.

Web development involves a wide range of technologies and tools:

1. HTML
● The fundamental language for creating web pages.
● It defines the structure and content of a page.
2. CSS
● Used to style HTML elements, controlling their appearance,
layout, and formatting.
3. JAVASCRIPT
● A programming language that adds interactivity and dynamic
features to web pages.
4. BOOTSTRAP
● A popular front-end framework that provides pre-built components and
styles for creating responsive websites.

UNIT III: Introduction to the Web Development Life Cycle

● The web development life cycle (WDLC) is a structured process that outlines
the steps involved in creating a website/web application. It helps ensure that
the project is completed efficiently and effectively.
● Phase of the WDLC is project planning and requirements gathering.

PROJECT PLANNING:
● Define project goals and objectives.
● Identify target audience and their needs.
● Determine project scope and timeline.
● Assign roles and responsibilities to team members.
● Create a project plan with milestones and deadlines.

PROJECT REQUIREMENT GATHERING

● Gather information about the website's functionality, features, and design
preferences
● Conduct interviews, surveys, and user research to understand user needs.
● Create detailed requirements documents, such as wireframes and mockups.

WEB DESIGN AND USER EXPERIENCE

● Once the requirements are gathered, the next phase is web design and user
experience (UX). Web Design and User Experience
 ● This involves creating the visual elements of the website, as well as ensuring
that it is easy to use and navigate.
1. Create wireframes and mockups to visualize the layout and structure of
the website
- wireframe is a set of schematic (usually black and white) blocks
that outline the arrangement of the elements on the future
website/app interface.
- It usually shows the layout of the buttons, visuals, copy, but
doesn’t go into details presenting only the main design ideas.
- mockup is a page or screen of the finished application design, as
it will look to the user
- It is colorful, with thought-out visuals and typography, and it
gives viewers a realistic impression of the future product’s look.
2. Design the visual elements, including color scheme, typography, and
imagery.
3. Ensure that the design is responsive and looks good on different devices.

USER EXPERIENCE
● Consider usability factors such as navigation, accessibility, and load times.
● Conduct user testing to gather feedback and make improvements.
● Ensure that the website is intuitive and easy to use for the target audience

UNIT IV: COMMON METHODS INCLUDE

-GET, POST, OUT, DELETE

• GET
Purpose: Send data to the server to be processed
Example: Submitting a form with user input

• POST
Purpose: Send data to the server to be processed
Example: Submitting a form with user input

• PUT
Purpose: Update existing data on the server
Example: Modifying user profile information

• DELETE
Purpose: Remove data from the server
Example: Deleting a user account
STATUS CODES
HTTP RESPONSES INCLUDE STATUS CODES THAT INDICATE THE OUTCOME OF THE
REQUEST.

EXAMPLE STATUS OF CODE

● 200 OK
The request was successful, and the server has returned the requested data
Example Use: When a user accesses a web page, and the page loads
successfully
● 404 NOT FOUND
The requested resource was not found on the server
Example Use: When a user tries to access a URL that doesn't correspond to an
existing web page or resource
● 400 BAD REQUEST: The server cannot process the request due to client error
(e.g., malformed syntax).
● Example: A user submits a form without filling out the required fields,
triggering a "400 Bad Request" error.
● 401 UNAUTHORIZED: Authentication is required but has not been provided or
failed. Example: Trying to access a website’s dashboard without logging in
causes a "401 Unauthorized" error.
● 403 FORBIDDEN: The server understands the request but refuses to authorize
it. Example: Attempting to view restricted content without proper permissions
results in a "403 Forbidden" error.
● 500 INTERNAL SERVER ERROR: The server encountered an unexpected
condition that prevented it from fulfilling the request.
● Example: A website crashes due to server misconfiguration, causing a "500
Internal Server Error."
● 503 SERVICE UNAVAILABLE: The server is temporarily unable to handle the
request, often due to maintenance or overload.
Example: A website undergoing server maintenance returns a "503
Service Unavailable" error.
● 302 FOUND: The requested resource has been temporarily moved to a
different URL. Example: A webpage temporarily redirects users to a new page,
showing a "302 Found" status.
● 301 MOVED PERMANENTLY: The requested resource has been permanently
moved to a new URL.
Example: A website changes its domain name, and users are redirected to the
new URL with a "301 Moved Permanently" status.
● 204 NO CONTENT: The server successfully processed the request but
returns no content.
Example: A user submits a form that doesn’t require a new webpage, leading
to a "204 No Content" response.