KEMBAR78
Web Application Architecture: Basics, Components, Design and Development | PDF | Web Application | World Wide Web
Scribd
Upload
117 views22 pages

Web Application Architecture: Basics, Components, Design and Development

The document discusses the basics of web application architecture. It describes web applications as consisting of three main components: the GUI on the client side rendered through HTML, CSS and JavaScript in browsers, a web server running applications using languages like PHP, ASP.NET or Java, and a database for data storage like MySQL or SQL. The document provides examples of popular websites and web applications and lists common components of each. It outlines the basic requirements, development process and file structure for creating a simple web application using HTML, CSS, PHP and a database.

Uploaded by

Sheikh Araf Ahmed Raad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
117 views22 pages

Web Application Architecture: Basics, Components, Design and Development

The document discusses the basics of web application architecture. It describes web applications as consisting of three main components: the GUI on the client side rendered through HTML, CSS and JavaScript in browsers, a web server running applications using languages like PHP, ASP.NET or Java, and a database for data storage like MySQL or SQL. The document provides examples of popular websites and web applications and lists common components of each. It outlines the basic requirements, development process and file structure for creating a simple web application using HTML, CSS, PHP and a database.

Uploaded by

Sheikh Araf Ahmed Raad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Web Application Architecture

Basics, Components, Design and Development


Web Application

 Types of Software
 Desktop Applications
 Server Softwares
 Plugins
 Embedded Software
 What is a Web Application?
 Is Website a Web Application?
Activity

Share some Popular Websites that you


know
Popular Websites
Activity

Share some Popular Web Applications


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
Activity

Lets list all probable components of a


modern Website
Components of a Website

 Logo  Blog
 Navigation  Contact Form
 Search  Registration form
 Content  Members only area
 Images & Multimedia  Downloadable files
 Gallery & Slideshows  Shopping cart
Activity

Lets list all probable components of a


Web App say Facebook
Components of a Web Application

 Logo  Activity Log


 Sign-up or Log in  Statistics
 Dashboard  Various Forms
 Navigation  Settings
 Notifications  User Profiles
 Search features  Reports
Architecture of a Web Application
In a most simplified language a full fledged Web Applications consist of three basic components
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)
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
Web Server

 Programming languages
 PHP
 ASP.NET
 JAVA
 PERL
 Python
 Ruby on rails
Data Storage

 Server side scripting language can communicate with database


 Common databases
 MySQL
 SQL (DB2 & Microsoft)
 Microsoft Access
 Oracle
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
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
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
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
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
Questions ??
“One of the very important characteristics of
a student is to question, only students have
the capability to learn.
http://www.webfanzine.com/
Thank You 

You might also like