Web application architecture
Download as PPTX, PDF13 likes13,280 views
The document outlines the fundamentals of web application architecture, detailing the types of software, components of websites and web applications, and the essential technologies involved. It emphasizes the three core components of a web application: the client-side GUI, web server, and data storage, along with the programming languages used in each layer. Additionally, it provides a basic development framework for creating a web application, including planning, file organization, and coding practices.
Web application architecture
- 1. Web Application Architecture by Tejaswini Deshpande WebFanzine Media http://www.webfanzine.com/ Basics, Components, Design and Development
- 2. Web Application Types of Software Desktop Applications Server Softwares Plugins Embedded Software What is a Web Application? Is Website a Web Application?
- 3. Activity Share some Popular Websites that you know
- 5. Activity Share some Popular Web Applications
- 6. Popular Web Applications Facebook – the Social Network Pixlr – Image Creation, Photo Editing & Effects Zamzar – Online File Conversion Gmail – Webmail Clients bit.ly – Short URL Services WolframAlpha – Computational Knowledge Engine
- 7. Activity Lets list all probable components of a modern Website
- 8. Components of a Website Logo Navigation Search Content Images & Multimedia Gallery & Blog Contact Form Registration form Members only area Downloadable files Shopping cart
- 9. Activity Lets list all probable components of a Web App say Facebook
- 10. Components of a Web Application Logo Sign-up or Log in Dashboard Navigation Notifications Search features Activity Log Statistics Various Forms Settings User Profiles Reports
- 11. In a most simplified language a full fledged Web Applications consist of three basic components Architecture of a Web Application
- 12. GUI – Client Side The user interface is always rendered on a browser Popular browsers Programming languages HTML (renders actual content) CSS (Beautifies the content) Javascript (Add effects, interaction, alter content)
- 13. Web Server Web servers are computers that deliver Web pages. Web server has an IP address and most of the times a domain name Eg. http://www.webfanzine.com/index.html Any computer can be turned into Web Server
- 14. Web Server Programming languages PHP ASP.NET JAVA PERL Python Ruby on rails
- 15. Data Storage Server side scripting language can communicate with database Common databases MySQL SQL (DB2 & Microsoft) Microsoft Access Oracle
- 16. Basic Web Application - Requirements Local Web Server A browser Basic knowledge of HTML, CSS, Javascript, PHP and MySQL Originality & Licensing ( Never ever copy others code exactly as it is. Respect other developers ) Online Web Server to deploy the application
- 17. Basic Web App – Development Idea – Decide what is the purpose of your web application Wireframe – On paper or a rapid prototype Create a dedicated folder for your app Create separate folders for css, js, images etc Create main file – name it index.php
- 18. Basic Web App – Development The index.php file will be similar to HTML (.html) file, difference being you can write PHP code inside that file Follow basic structure of HTML file After you write HTML for the content that will be displayed, add CSS to each element as per the design
- 19. Basic Web App – Development All CSS will go in separate file say main.css in CSS folder Follow PHP syntax to do any kind of computation or server side validation. In order to fetch or save data to database Connect to MySQL database Fetch the data in PHP variables or save the data Close the connection You can display the fetched data by populating the HTML elements with PHP variables
- 20. Basic Web App – Development Save this folder (say firstapp) into proper (www) folder of your local web server You can open your application by opening url like http://localhost/firstapp/ in your browser. Let us check the actual mini app for the syntax
- 21. Questions ?? “One of the very important characteristics of a student is to question, only students have the capability to learn. http://www.webfanzine.com/
- 23. Helpful Links - Basic http://www.w3schools.com/ http://www.codecademy.com/