Web Application Development PDF

# Unit 1: Overview of the Web as a Platform for Applications ## A. Learning Objectives: - Define what is a website and its type. - Familiarize with the basic tools in website development. - Know how to set up a basic web page. ## B. Pre-test ## C. Content ### 2.1 Website VS Web Application * A...

# Unit 1: Overview of the Web as a Platform for Applications ## A. Learning Objectives: - Define what is a website and its type. - Familiarize with the basic tools in website development. - Know how to set up a basic web page. ## B. Pre-test ## C. Content ### 2.1 Website VS Web Application * A website is a collection of web pages that are designed to provide information about a company, organization, or individual. * A web application is a dynamic website that allows users to interact with it, perform specific tasks, and accomplish goals. ### Types of Websites There are many types of websites available. This document covers the following website types: * **Personal Website:** Used for sharing personal information and branding. * **Photo Sharing Website:** Used to store and share photographs online. * **Blog:** Used to share information, ideas, and views. * **Informational Website:** Used to provide information on various topics. * **E-commerce Website:** Used to buy or sell products online. * **Social Media Website:** Used to connect with each other. * **Educational Websites:** Include websites of colleges, schools, and tuitions. * **Portfolio Websites:** Used to showcase a person's best work. * **Non-Profit Websites:** Used to inform about the organization, raise funds, etc. * **Magazine and News Websites:** Used to publish news and information. ### 2.2 Who are the developers? Web developers build and maintain websites for clients who are trying to get their product or service onto the web. ### Types of Web Developers * **Front-end Developer:** Focuses on the front-end of the website, which users interact with in their browser. * **Back-end Developer:** Focuses on the back-end of the website, which contains server-side code, data, and logic. * **Full-stack developers** work with both the front and back ends. ### 2.3 Tools Needed in Website Development * **Text Editors:** Used for writing and editing code. Popular choices include Visual Studio Code, Sublime Text, and Atom. * **Integrated Development Environments (IDEs):** Offer more comprehensive features including debugging, code profiling, and build automation tools. Popular choices include Eclipse, NetBeans, and Visual Studio. * **Browser:** Used to access and display websites on the internet. * **Languages & Frameworks:** Languages are used to write code for web browsers, servers, and other web tools. Frameworks provide standardized architecture to promote best practices in web development. * **Database Management System (DBMS):** Used to store, organize, and manage data for web applications and websites. * **Web Server:** Used to serve web pages and other web content to clients over the internet. ### 2.4 Basic principles of web architecture Web architecture refers to the overall design and structure of web applications and websites. Here are some key principles: 1. **Monolithic Architecture:** All application components are combined into a single codebase and deployed as a single unit. 2. **Client-server Architecture:** The application is split into two parts: client-side code (runs in the user's browser) and server-side code (runs on the web server). 3. **Microservices Architecture:** The application is split into small, independent services that communicate with each other over the network. 4. **Service-oriented Architecture (SOA):** Focuses on reusable services with standardized interfaces, promoting platform-independence. 5. **Serverless Architecture:** The application is split into small, event-driven functions, that run in a serverless computing environment. ### Core Components of Web Architecture * **Client-Side:** * Web Browsers * HTML, CSS, and Javascript * **Server-Side:** * Web Servers * Server-side Programming Languages * **Database:** * Examples: MySQL, PostgreSQL, MongoDB * **Networking:** * Protocols: HTTP/HTTPS, DNS for Domain Resolution, TCP/IP for data transfer * CDNs: Distribute content globally to reduce latency