Web Application Development 
Ujjwal Ojha
Who am I? 
• Ujjwal Ojha 
• BSc. CSIT 
• Hrevert Technologies 
• Web application development
Introduction 
• Developing a web site for internet or intranet. 
• Ranges from developing simple static web 
sites to complex dynamic web applications
According to Wikipedia, 
Web development is a broad term for the work 
involved in developing a web site for the 
Internet (World Wide Web) or an intranet (a 
private network). Web development can range 
from developing the simplest static single page 
of plain text to the most complex web-based 
internet applications, electronic businesses, and 
social network services
How does the Web Works
Client Request
Server Response
Layers 
• In web development, the terms “web design”, 
"front end" and "back end" are distinctions 
which refer to the separation of concerns 
between a presentation layer and a data 
access layer respectively.
Web Design 
• All the works related with graphics 
• Prototype Designs 
• Making Layouts 
• Color Selection 
• Work related with Photoshop, Illustrator, 
InDesign
Front-End 
• Front end development is the development of 
those elements of a website that the 
customers sees and interacts with directly. 
• Working in coordination with the backend 
developer and the web designers.
Components that make the Front-End 
HTML 
CSS 
JavaScript
<p> Markup Language</p> 
<p> What each part of website is </p> 
<p> define headers, paragraphs, 
links, images, and more, 
so your browser knows 
how to structure the web page 
you‘re looking at. </p> 
<image> </image>
Styling the web 
Looks and Formatting 
Colors, Backgrounds, Fonts 
Animations, 3D Effects 
body { 
font-family: Arial; 
color: white; 
background-color: black; 
}
<script> alert(“JavaScript”) </script> 
Programming Language for Manipulating 
The Contents of the Web Page. 
Make the web application more interactive. 
Single Page Application 
• Menus 
• Image Sliders 
• Popup Windows 
• Alert Messages 
ECMA Script
Back-End 
• Back end development is the development of 
those elements of website that customers 
indirectly interact with. 
• The backend usually consists of three parts: a 
server, an application, and a database.
Web Server 
Web server is a computer system which handles 
HTTP requests and delivers web pages to clients. 
EXAMPLES: 
• Apache 
• IIS 
• Nginx 
• GWS
Back-End Application 
• Computer program that remains in the 
background, or resides on a server. 
• Communicates with server and databases. 
• The web application creates, deletes, changes, 
renames, etc. items in the database. 
• It makes front-end content dynamic
Database 
• Store information on the server side. 
• Useful to create data-driven websites and web 
applications. 
– MySQL 
– Mongo dB 
– Oracle
PHP
Introduction 
• Wikipedia 
Definition: 
– PHP is a server-side 
scripting language 
designed for web 
development but 
also used as a 
general-purpose 
programming 
language. 
• PHP is mostly used 
on the server-side 
to dynamically 
generate http 
response based on 
the client request.
My First PHP program 
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
</head> 
<body> 
<?php 
echo 'Hello World'; 
?> 
</body> 
</html>
Things that you should know 
• Backend languages like PHP, Ruby, Nodejs 
• JQuery 
• Bootstrap 
• d3js 
• git (for versioning projects) 
• Github, Bitbucket 
• WordPress
What’s your preference? 
• A lot of these technologies are related 
• If you are into UI go for Web Design. 
• If you like programming and designing then go 
for front-end. 
• If you’re interested in what’s going behind the 
scene then go for back-end development.
Thank You

Gettings started with Web development

  • 1.
  • 2.
    Who am I? • Ujjwal Ojha • BSc. CSIT • Hrevert Technologies • Web application development
  • 3.
    Introduction • Developinga web site for internet or intranet. • Ranges from developing simple static web sites to complex dynamic web applications
  • 4.
    According to Wikipedia, Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, and social network services
  • 5.
    How does theWeb Works
  • 6.
  • 7.
  • 9.
    Layers • Inweb development, the terms “web design”, "front end" and "back end" are distinctions which refer to the separation of concerns between a presentation layer and a data access layer respectively.
  • 10.
    Web Design •All the works related with graphics • Prototype Designs • Making Layouts • Color Selection • Work related with Photoshop, Illustrator, InDesign
  • 12.
    Front-End • Frontend development is the development of those elements of a website that the customers sees and interacts with directly. • Working in coordination with the backend developer and the web designers.
  • 14.
    Components that makethe Front-End HTML CSS JavaScript
  • 15.
    <p> Markup Language</p> <p> What each part of website is </p> <p> define headers, paragraphs, links, images, and more, so your browser knows how to structure the web page you‘re looking at. </p> <image> </image>
  • 16.
    Styling the web Looks and Formatting Colors, Backgrounds, Fonts Animations, 3D Effects body { font-family: Arial; color: white; background-color: black; }
  • 17.
    <script> alert(“JavaScript”) </script> Programming Language for Manipulating The Contents of the Web Page. Make the web application more interactive. Single Page Application • Menus • Image Sliders • Popup Windows • Alert Messages ECMA Script
  • 18.
    Back-End • Backend development is the development of those elements of website that customers indirectly interact with. • The backend usually consists of three parts: a server, an application, and a database.
  • 19.
    Web Server Webserver is a computer system which handles HTTP requests and delivers web pages to clients. EXAMPLES: • Apache • IIS • Nginx • GWS
  • 20.
    Back-End Application •Computer program that remains in the background, or resides on a server. • Communicates with server and databases. • The web application creates, deletes, changes, renames, etc. items in the database. • It makes front-end content dynamic
  • 21.
    Database • Storeinformation on the server side. • Useful to create data-driven websites and web applications. – MySQL – Mongo dB – Oracle
  • 22.
  • 23.
    Introduction • Wikipedia Definition: – PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. • PHP is mostly used on the server-side to dynamically generate http response based on the client request.
  • 24.
    My First PHPprogram <!DOCTYPE html> <html> <head> <title></title> </head> <body> <?php echo 'Hello World'; ?> </body> </html>
  • 25.
    Things that youshould know • Backend languages like PHP, Ruby, Nodejs • JQuery • Bootstrap • d3js • git (for versioning projects) • Github, Bitbucket • WordPress
  • 26.
    What’s your preference? • A lot of these technologies are related • If you are into UI go for Web Design. • If you like programming and designing then go for front-end. • If you’re interested in what’s going behind the scene then go for back-end development.
  • 27.