DON HONORIO VENTURA STATE UNIVERSITY COLLEGE OF COMPUTING STUDIES

2nd Semester AY 2022 - 2023

CPCP 223(B)
Web Application Development
Reden Paul L. Rivera, MIT
Instructor
Content
• Introduction
• Brief overview of web application development
• Importance of web development in today's world
• Objective of the presentation of web application development

• Understanding the basics of web development

• Client-server architecture
• Different components of a website
• Setting up development environment
Introduction
• Brief overview of web application development
• Importance of web development in today's world
• Objective of the presentation of web application development
Brief overview of web application development

Web application development refers to the creation of dynamic websites and web-
based software applications that run on a web server and can be accessed through a
web browser. These applications are designed to perform specific tasks, such as
managing databases, processing user input, and providing a user-friendly interface.
The development process typically involves several stages, including requirements
gathering, design and prototyping, coding, testing and deployment. The core
technologies used in web application development include HTML, CSS, JavaScript,
and various back-end programming languages such as PHP, Python, Ruby, and Java.
Web application development is an important and rapidly growing field that is
essential to the growth of the internet. Companies and organizations of all sizes use
web applications to automate business processes, increase efficiency, and provide
better customer experiences. Additionally, web application development offers
exciting and rewarding career opportunities for developers and software engineers.
Importance of web development

Web development plays a critical role in today's digital world. Some of the key benefits and importance of web development
include:
1. Increased Accessibility and Convenience: Web applications provide easy access to information and services from anywhere, at
any time, making it more convenient for users.
2. Improved User Experience: Well-designed web applications offer a better user experience by providing intuitive navigation,
clear information architecture, and engaging visual designs.
3. Business Automation: Web applications can automate a variety of business processes, such as inventory management, customer
relationship management, and financial reporting, helping organizations to increase efficiency and save time and money.
4. Online Presence and Branding: A well-designed website can establish a company's online presence, promote its brand, and
provide a professional image to potential customers.
5. Increased Sales and Revenue: Web applications can provide an additional sales channel for businesses, helping them to reach a
larger audience and increase revenue.
6. Better Customer Engagement: Web applications can provide an interactive platform for customers to engage with a company
and provide valuable feedback, leading to improved customer satisfaction and increased loyalty.
7. Career Opportunities: Web development is an in-demand field with many career opportunities, including web developers,
UI/UX designers, and full-stack engineers.
In conclusion, web development plays a critical role in the growth of the internet and is essential to the success of businesses in
today's digital age.
Objective of the presentation of web application development

The objective of the presentation on web application development can vary depending on the context and audience, but
some common objectives might include:
1. Introducing the concept of web application development: If the audience is not familiar with the topic, the
presentation might aim to provide a basic overview of what web application development entails and its importance.
2. Demonstrating the process of web application development: The presentation might show the steps involved in
designing, building, and launching a web application, including the tools and technologies used.
3. Highlighting the benefits of web applications: The presenter might emphasize the advantages of using web
applications over traditional software applications, such as accessibility from any device with an internet connection and
scalability.
4. Showcasing a specific web application: The presentation might focus on a specific web application and its features,
demonstrating how it meets user needs and solves a particular problem.
5. Providing tips and best practices: The presenter might share tips and best practices for designing and developing web
applications that are user-friendly, secure, and scalable.
6. Discussing current and future trends: The presentation might cover the latest trends in web application development
and speculate on future developments and how they might impact the industry.
Understanding the basics of web
development
• Client-server architecture
• Different components of a website
• Setting up development environment
• Overview of the components of a website
(HTML, CSS, JavaScript, PHP, MySQL)
Understanding the basics of web development

Web development is the process of creating and maintaining websites and web applications. It involves a combination of skills and
technologies, including HTML, CSS, JavaScript, and various back-end programming languages such as PHP, Ruby, and Python. Here
are some of the basic concepts in web development:
1. HTML (HyperText Markup Language): HTML is a markup language used to structure and display content on the web. It
provides a way to define the structure and content of a web page, including text, images, and links.
2. CSS (Cascading Style Sheets): CSS is a style sheet language used to define the appearance of a web page. It allows web
developers to control the layout, colors, and fonts of a web page, making it visually appealing to users.
3. JavaScript: JavaScript is a programming language used to add interactivity and dynamic behavior to a web page. It allows
developers to create animations, interactive forms, and other dynamic content that can respond to user actions.
4. Back-end Development: The back-end of a web application is responsible for processing requests from the front-end and
delivering the data or content requested by the user. This can involve the use of back-end programming languages and databases.
5. Responsive Design: Responsive design is a design approach that allows a website or web application to adapt to different screen
sizes and devices, providing an optimal viewing experience for users.
6. Web Standards: Web standards are established guidelines and protocols that govern the way web content is created, delivered,
and displayed. Adhering to these standards helps ensure that web pages are compatible with different browsers and devices and
that they can be easily accessed by users with disabilities.
These are just some of the basic concepts in web development, and there is much more to learn and explore in this field. It's a
constantly evolving field with new technologies and approaches emerging all the time, so it's important for web developers to stay up
to date with the latest developments.
Understanding the structure of a web page

The structure of a web page is determined by the HTML elements used to create it. A typical web page has several
main components:
1. Head: The head of a web page contains information about the page, such as the title, meta information, and links to
stylesheets and scripts. The head is not visible to the user, but it is important for search engines and other web
applications.
2. Body: The body of a web page contains the main content of the page, such as text, images, and links. The body is
structured using HTML elements such as headings, paragraphs, lists, links, and images.
3. Header: The header of a web page typically contains the title or logo of the website, navigation links, and any other
important information that needs to be visible at the top of the page.
4. Main Content: The main content of a web page is the area where the primary information is displayed. It may be
structured using headings, paragraphs, lists, images, and other HTML elements.
5. Footer: The footer of a web page typically contains information such as contact details, copyright information, and
links to additional pages or resources.
This structure is just a basic example and can vary depending on the needs of the website. The layout and appearance
of a web page can be controlled using CSS, which is used to specify the styling and formatting of the content. With
CSS, you can control the font, color, background, and layout of the web page to create a visually appealing and
functional website.
Client-server architecture

The client-server architecture is a widely used architecture for the development of distributed systems and applications, including web
applications. It is a model in which one computer, the client, requests and receives services or resources from another computer, the
server.
In the context of web applications, the client is typically a web browser, and the server is a web server hosting the web application. The
client sends a request to the server for a particular resource, such as a web page or data, and the server responds by sending the requested
information to the client.
The client-server architecture has several advantages, including:
1. Separation of concerns: The client and server can be designed and developed independently, with each focusing on its specific
responsibilities. This can make the development process more streamlined and efficient.
2. Scalability: The server can be designed to handle multiple requests from multiple clients, making it easy to scale the system as the
number of users increases.
3. Centralized control: The server can be designed to enforce security and access control policies, ensuring that only authorized clients
can access the resources they need.
4. Improved reliability: The server can be designed to handle failures and provide backups or other redundancy mechanisms,
improving the overall reliability of the system.
However, the client-server architecture also has some disadvantages, including increased network latency and the need for specialized
network and server infrastructure.
Overall, the client-server architecture is a flexible and scalable architecture that has proven to be effective for the development of a wide
range of web applications and other distributed systems.
Different components of a website

A website typically consists of several components that work together to provide a cohesive and functional user experience. These components can
include:
1. HTML (HyperText Markup Language): HTML is the structure and content of a web page. It defines the elements on the page, such as text,
images, and links, and the relationships between them.
2. CSS (Cascading Style Sheets): CSS is used to define the look and feel of a web page. It controls the layout, colors, and font styles, making it
possible to create visually appealing and consistent web pages.
3. JavaScript: JavaScript is a programming language used to add interactivity and dynamic behavior to a web page. It can be used to create
animations, forms, and other dynamic content that responds to user actions.
4. Images and Multimedia: Websites often include images, videos, and other forms of multimedia to enhance the user experience and convey
information.
5. Navigation: Navigation is the way that users move around a website, finding the information they need and interacting with the site's content.
Navigation typically consists of a menu or series of links that provide access to the different sections of the site.
6. Content Management System (CMS): A CMS is a software platform that makes it easy to manage and update the content of a website. It can
provide a user-friendly interface for adding, editing, and organizing content, without the need for technical expertise.
7. Databases: Many websites use databases to store and retrieve information, such as user data or product information. The database can be
accessed and updated through the web application, providing dynamic and up-to-date information to users.
8. Web Server: A web server is a computer that delivers web pages and other content to users in response to requests. It hosts the website and
manages the communication between the client (the user's web browser) and the server.
These are the main components of a website, but there can be many others, depending on the specific requirements of the site and the technologies
used. A well-designed website integrates these components in a way that provides a seamless and intuitive user experience, while also meeting the
needs of the site's owners and users.
Setting up development environment

Setting up a development environment is the process of preparing your computer and software to develop and test a web application.
Here are the steps to set up a basic web development environment:
1. Install a code editor: A code editor is a program used for writing and editing code. Some popular code editors for web
development include Visual Studio Code, Atom, and Sublime Text.
2. Install a web browser: You'll need a web browser to test your web application and debug any issues. The most popular web
browsers for web development are Google Chrome, Mozilla Firefox, and Apple Safari.
3. Install a web server: To run a web application locally, you'll need a web server. One popular web server for development is
Apache, which can be installed as part of the XAMPP software stack.
4. Install a database management system: If your web application uses a database, you'll need to install a database management
system, such as MySQL or PostgreSQL.
5. Install any necessary dependencies or libraries: Depending on the web application you are developing, you may need to install
additional dependencies or libraries, such as PHP, Ruby, or Python.
6. Configure your development environment: Once you have installed the necessary software, you'll need to configure your
development environment to work with your web application. This may include setting up virtual hosts, editing configuration files,
or setting environment variables.
7. Test your setup: Finally, test your development environment to ensure that everything is set up correctly and that your web
application runs as expected.
Once your development environment is set up, you're ready to start developing and testing your web application. Keep in mind that
these steps are just a basic outline, and the exact setup process will depend on the specific technologies and tools you are using.
Overview of the components of a website (HTML, CSS, JavaScript, PHP, MySQL)

A website typically consists of several components, including:

1. HTML
2. CSS (Cascading Style Sheets)
3. JavaScript
4. PHP (Hypertext Preprocessor)
5. MySQL
Overview of the components of a website (HTML, CSS, JavaScript, PHP, MySQL)

HTML (Hypertext Markup

Language): HTML is a
markup language used to
create the structure and content
of a web page. HTML tags are
used to define headings,
paragraphs, lists, links, images,
and other elements of a web
page.
Overview of the components of a website (HTML, CSS, JavaScript, PHP, MySQL)

CSS (Cascading Style

Sheets): CSS is used to style
and format the content of a
web page. CSS styles can be
applied to HTML elements to
control their appearance, such
as font size, color, background,
and layout.
Overview of the components of a website (HTML, CSS, JavaScript, PHP, MySQL)

JavaScript: JavaScript is a
scripting language that is
used to add interactivity to a
web page. JavaScript can be
used to validate user input,
update content dynamically,
and create animations and
effects.
Overview of the components of a website (HTML, CSS, JavaScript, PHP, MySQL)

PHP (Hypertext
Preprocessor): PHP is a
server-side scripting language
that is used to build dynamic
web applications. PHP is often
used in conjunction with a
database, such as MySQL, to
store and retrieve data.
Overview of the components of a website (HTML, CSS, JavaScript, PHP, MySQL)

MySQL: MySQL is a
relational database
management system
(RDBMS) used to store and
manage data for web
applications. MySQL is used
to store data such as user
accounts, product
information, and order
history.
Overview of the components of a website (HTML, CSS, JavaScript, PHP, MySQL)

These components work together to create a complete and functional web application.
HTML provides the structure and content of a web page, CSS is used to style and format the
content, JavaScript adds interactivity, PHP is used to build dynamic applications, and
MySQL is used to store and manage data.