Unit 3 - Web Development Basics

• The current generation of web technology is built around dynamic

content.
• We expect the Web to be interactive, user-driven, and constantly
changing.
The application server provides access to business logic for use by client application programs.
It is responsible for computing the business logics of the web application, like carrying out a
bank account fund transfer or computing the shortest route to drive from one city to another.

IIS, Apache, Nginx

 Elements of Web Development
• Browsers (Google Chrome, Safari, Firefox, Internet Explorer)
• HTML (Hypertext Markup Language)
• CSS (Cascading Style Sheets)
• Programming languages
• JavaScript: Supported by all web browsers.
• Python: Used by the Django framework.
• Ruby: Used by the Ruby on Rails framework.
• PHP: Used by WordPress, Joomla Content Management Systems. ( PHP is abbreviated as Hypertext
Preprocessor. It was abbreviated previously as Personal Home Page.)
• Objective-C: Led by Apple, this is the programming language behind
• iOS.
• Swift: Apple’s newest programming language.
• Java: Used by Android (Google) and many desktop applications.
 Cont..
• Frameworks
• Meteor: A full-stack (front- and back-end) JavaScript framework.
• Node.js: A server-side JavaScript framework.
• Ruby on rails: A full-stack framework built using ruby.
• Django: A full-stack framework built using python.
• Ionic: A mobile framework.
• Bootstrap: A UI (user interface) framework for building with HTML, CSS, and
JavaScript.
• Content management systems (CMS): WordPress, Joomla, and Drupal are popular
solutions that support the creation and modification of digital content.
• NET: A full-stack framework built by Microsoft.
• Angular.js: A front-end JavaScript framework.
 Cont..
• Libraries
• Databases
• MongoDB: This open-source NoSQL database is currently the only database
supported by Meteor.
• Redis: The most popular key-value store, this database is lighting fast for retrieving
data but does not allow for much depth in the data storage.
• PostgreSQL: A popular open-source SQL database.
• MySQL: Another popular open-source SQL database, MySQL is used in WordPress
sites.
• Oracle: An enterprise SQL database.
• SQL Server: A SQL server manager created by Microsoft.
• Neo4j: A graph-based NoSQL variant.
 Cont..
• Client (or client-side)
• Server (or server-side)
• Front-end
• Back-end
• Protocols (HTTP, DDP(Distributed Data Protocol): The DDP protocol uses web sockets to create a
consistent connection between the client and the server.)

• API
• Data formats
• JSON: JavaScript Object Notation is quickly becoming the most popular data format.
• XML: The main data format in the earlier days of the Web, eXtensible Markup
Language was predominantly used by Microsoft systems.
• CSV: Comma-Separated Values is data formatted by commas. Excel data is typically
formatted this way.
 Cont..
• GitHub: Referred to as a developer’s collaborative platform, GitHub is
now the largest online storage space of collaborative works that exist
in the world.
• In reality, GitHub itself is simply a social network like Facebook or
Instagram where you build a profile, upload projects to share, and
connect with other users by following their accounts.
• Web hosting- WAMP (Windows, Apache, MySQL, and PHP) LAMP
(Linux, Apache, MySQL, and PHP
 Client-Side and Server-Side Scripting
• The scripts may be created in two ways: on the client side or
the server side, where the server-side scripts are processed on a
server.
• In contrast, client-side scripting needs browsers to execute scripts on
the client system but doesn't connect with the server executing the
client-side scripts.
Cont..
 Model-View-Controller Architecture for Web
Application Development
• Model-View-Controller (or MVC, as it is popularly called) is a software
design pattern for developing web-based, desktop, and mobile
applications.
• It has been a widely adopted web development framework written to
split up the business logic, database access, and presentation layers,
thus separating the input, processing, and output of an application.
• The framework has three interconnected components:
• the model,
• the view, and
• the controller.
 Cont..
• Model: The lowest level of the pattern, which is responsible for
maintaining data.
• It concerns the data structure/database schema used.
• It responds to the request from the view and also responds to
instructions from the controller to update itself.
• View: This is about “what a user sees.”
• It is responsible for displaying all or a portion of the data to the user.
• It presents the data in a particular format triggered by a controller’s
decision.
 Cont..
• Controller: The code that controls the interactions between the
model and the view.
• The controller is responsible for responding to user input and
performs interactions on the data model objects.
• The controller
• receives the input,
• it validates the input,
• and then it performs the business operation that modify the state of the data
model.
 Cont..

MVC Architecture Design The flow of Data in MVC Components

 Cont..
Advantages:
• Simultaneous development: Multiple developers can work simultaneously
on model, controller, and views.
• High cohesion: MVC enables logical grouping of related actions on a
controller. The views for a specific model are also grouped together.
• Low coupling: The very nature of the MVC framework is such that
there Ease of modification: Because of the separation of
responsibilities, future development or modification is easier.
• Multiple views for a model: Models can have multiple views.
 Cont..

Disadvantages:
• It is difficult to read, change, test, and reuse this model
• It is not suitable for building small applications.
• The inefficiency of data access in view.
• The framework navigation can be complex as it introduces new
layers of abstraction which requires users to adapt to the
decomposition criteria of MVC.
• Increased complexity and Inefficiency of data
 Client-Side Technologies
HTML: Hypertext Markup Language
• Hypertext Markup Language (HTML) is a simple text formatting
language for annotating a document in a way that is syntactically
distinguishable from the text, thus creating hypertext documents.
• A hypertext document is viewed in a web Browser, such as Internet
Explorer or Netscape Navigator.
• The browser is a program that understands the document written in
HTML and displays it by interpreting the document contents.
• A unique feature of this versatile language is that it allows the
creation of links, also known as hyperlinks.
 Cont..
Creating an Hypertext Markup Language Document
• Every HTML document corresponds to a single page.
• An HTML document consists of HTML elements.
• HTML is a tag-oriented language (most HTML elements consist of a
Start Tag and an End Tag).
• HTML is not case sensitive (HeAD and hEAd mean the same thing).
• A file containing HTML elements can only be saved with the file
extension as .HTM or .HTML.
 Cont..
• Tags
• Tags are control text used to denote various elements in an HTML
document.
• A tag in HTML comprises a left angular bracket (<), followed by a tag
name, and closed by a right angular bracket (>).
• For example: <html>, <body>, and <title>. The tags described here are
examples of start tags.
• Every start tag must have an end tag, which is similar to the start tag
but with a forward slash sign before the tag name: </html>, </body>,
and </title>.
 Cont..
Hypertext Markup Language Element
• HTML elements are fundamental blocks of a web page. Here is an
overview of HTML elements:

• Container elements: All container elements are paired (i.e., they have
start and end tags).
• The start tag consists of the tag name enclosed in left and right angular
brackets (for instance, <body>).
• The end tag is identical to the start tag except for a slash (/) that
preceeds the text within angular brackets of the end tag (e.g., </body>).
• Container elements contain parameters and parameters of an element
are given between the start tag and the end tag.
 Cont..
• Empty elements: Empty elements have only
a start tag and no end tag.
• Hence, an empty element has no
parameters, but can take attributes given
within the angular brackets of the start tag.
• HTML attributes: Attributes are used to
define an HTML element’s characteristics
and are placed inside the element’s opening
tag.
• All attributes are made up of two parts: a
name (the property that you want to set)
and a value (the value of the named
property).
• The value is always put in quotes. Attribute
names and values are not case sensitive, but
lowercase is recommended. Basic structure of an HTML page.
 CSS: Cascading Style Sheets
• CSS stands for Cascading Style Sheets
• It is a style sheet language used for describing the look and
formatting of a document written in HTML (Hypertext Markup
Language).
• CSS separates the presentation of a web page from its structure,
allowing web designers to control the visual appearance and
layout of multiple web pages at once.
 Types of CSS
There are three ways of inserting a style sheet:

• Internal or Embedded CSS

• External CSS
• Inline CSS
 Internal style sheet
<!DOCTYPE>
<html>
<head>
• An internal style sheet may be <style>
used if one single page has a h1{
unique style. color:white;
background-color:red;
• Internal styles are defined }
within the <style> element, p{
inside the <head> section of an color:blue;
HTML page. }
</style>
</head>
<body>
<h1>Welcome 4th BCA</h1>
<p>This is Paragraph.</p>
</body>
</html>
 External style sheet
• With an external style sheet, you can change the look of an entire
website by changing just one file!
• Each page must include a reference to the external style sheet file inside
the <link> element.
• The <link> element goes inside the <head> section
• An external style sheet can be written in any text editor. The file should
not contain any html tags. The style sheet file must be saved with a .css
extension.
 Creating the external
style sheet
• Create a text file; this file will be your style sheet. Name it style1.css
• In your CSS file, copy and paste the below code, then save the file:

body {
background-color: lightblue;
}

h1 {
color: purple;
margin-left: 20px;
}
 Cont..
Linking your document to your
stylesheet <!DOCTYPE html>
<html>
• Create another text file; this file will <head>
be your HTML document. Name it <link rel="stylesheet" href="style1.css">
whatever you like. </head>
<body>
• In your HTML file, copy and paste hypertext reference
the following lines; the <link...> line <h1>This is a heading</h1>
references your style sheet: <p>This is a paragraph.</p>

rel is a relation. It </body>

specifies the relation
between the tag and href
</html>
 Inline CSS
• An inline style may be used to apply a unique style for
a single element.
• To use inline styles, add the style attribute to the
relevant element. The style attribute can contain any
CSS property.
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>
 JavaScript
• JavaScript (js) is a light-weight object-oriented programming language
which is used by several websites for scripting the webpages.
• It was introduced in the year 1995 for adding programs to the
webpages in the Netscape Navigator browser.
• Since then, it has been adopted by all other graphical web browsers.
• With JavaScript, users can build modern web applications to interact
directly without reloading the page every time.
• The traditional website uses js to provide several forms of interactivity
and simplicity.
 Cont..
Features of JavaScript
1.All popular web browsers support JavaScript as they provide built-in
execution environments.
2.JavaScript follows the syntax and structure of the C programming
language. Thus, it is a structured programming language.
3.JavaScript is an object-oriented programming language that uses
prototypes rather than using classes for inheritance.
4.It is a light-weighted and interpreted language.
5.It is a case-sensitive language.
6.JavaScript is supportable in several operating systems including,
Windows, macOS, etc.
 Cont..
<html>
• JavaScript Example <body>
<h2>JavaScript Sample Program</h2>
<script>
document.write(“Welcome 4th BCA");
</script>
</body>
</html>

<!DOCTYPE html>
One of many JavaScript <html>
<body>
HTML methods
is getElementById() <h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

</body>
</html>
 Cont..
<!DOCTYPE html>
<html>
Button onclick <body>

<h2>JavaScript with getelementbyid</h2>

<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML =
"Hello JavaScript!"'>Click Me!</button>

</body>
</html>
<!DOCTYPE html>
<html>
Writing into the HTML output using <body>
document.write() by using button
<h2>Add 2 numbers</h2>
<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>
 Cont..
<!DOCTYPE html>
<html>
The function is <head>
invoked (called) <script>
when a button is function myFunction() {
clicked document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
a JavaScript </head>
function is placed <body>
in the <head>
section of an HTML <h2>Demo JavaScript in Head</h2>
page.
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>
 Cont..
<!DOCTYPE html>
• Bulb-off and Bulb- <html>
On Program using JS <body>

<h2>On/OFF Blub</h2>
<button
onclick="document.getElementById('myimage').src='pic_bulbon.gif'
">Turn on the light</button>
<img id="myimage" src="pic_bulboff.gif">
<button
onclick="document.getElementById('myimage').src='pic_bulboff.gif'
">Turn off the light</button>

</body>
</html>
 Bootstrap Framework
• Bootstrap is the most popular open source front-end (HTML,
CSS, and JavaScript) framework for developing responsive,
mobile-first projects on the Web.
• It includes HTML- and CSS-based design templates for
typography, forms, buttons, tables, navigation, modals,
image carousels, and more, as well as optional JavaScript
plug-ins.
• Bootstrap was developed by Jacob Thornton and Mark Otto
at Twitter and was released as an open source product in
August 2011 on GitHub
 Bootstrap framework.

Cont..
Bootstrap has three main files:
• bootstrap.css: A CSS framework
• bootstrap.js: A JavaScript/jQuery
framework
• glyphicons: A font (an icon font set)
• Additionally, Bootstrap requires
jQuery to function.
• jQuery is an extremely popular and
widely used JavaScript library, which
simplifies and adds cross-browser
compatibility to JavaScript.
 Cont..
Thus, the Bootstrap package includes:
• Scaffolding: A basic structure with Grid System, link styles, and
background
• CSS: Global CSS settings, fundamental HTML elements styled and
enhanced with extensible classes, and an advanced grid system.
• Components: Over a dozen reusable components built to provide
iconography, dropdowns, navigation, alerts, pop-overs, and much more.
• JavaScript plug-ins: One can easily include all of them at once or one at a
time
• Customization: The ability to customize Bootstrap’s components, LESS
variables. The biggest advantage of using Bootstrap is that it consists of
tools for creating flexible and responsive web layouts, as well as common
interface components.
 Cont..
Key features
• Responsive features: Bootstrap gives you the ability to easily create
responsive designs. The responsive features make your web pages
appear correctly on different devices and screen resolutions without
any change in markup.
• Consistent design: All Bootstrap components share the same design
templates and styles through a central library so the designs and
layouts of your web pages are consistent.
• Compatible with browsers: Bootstrap is created with modern
browsers in mind and it is compatible with all modern browsers, such
as Mozilla Firefox, Google Chrome, Safari, edge, and Opera.
• Open source: It is completely free to download and use.
 AngularJS Framework
• AngularJS is an open-source web application framework.
• It was originally developed in 2009 by Misko Hevery and
Adam Abrons. It is now maintained by Google. Its latest
version is 1.2.21.
• AngularJS is a structural framework for dynamic web
applications.
• It lets you use HTML as your template language and lets you
extend HTML's syntax to express your application components
clearly and succinctly.
 Cont..
General Features
• AngularJS is an efficient framework that can create Rich Internet Applications
(RIA).
• AngularJS provides developers an option to write client-side applications
using JavaScript in a clean Model View Controller (MVC) way.
• Applications written in AngularJS are cross-browser compliant. AngularJS
automatically handles JavaScript code suitable for each browser.
• AngularJS is open source, completely free, and used by thousands of
developers around the world. It is licensed under the Apache license version
2.0.
• Overall, AngularJS is a framework to build large-scale, high-performance,
and easy to-maintain web applications.
 Cont..
Core Features
• Data-binding − It is the automatic synchronization of data between model
and view components.
• Scope − These are objects that refer to the model. They act as a glue
between controller and view.
• Controller − These are JavaScript functions bound to a particular scope.
• Services − AngularJS comes with several built-in services such as $http to
make a XMLHttpRequests. These are singleton objects which are
instantiated only once in app.
• Filters − These select a subset of items from an array and returns a new
array.
• Directives − Directives are markers on DOM elements such as elements,
attributes, css, and more. These can be used to create custom HTML tags
that serve as new, custom widgets. AngularJS has built-in directives such
as ngBind, ngModel, etc.
 Cont..
• Templates − These are the rendered view with information
from the controller and model. These can be a single file (such
as index.html) or multiple views in one page using partials.
• Routing − It is concept of switching views.
• Model View Whatever − MVW is a design pattern for dividing
an application into different parts called Model, View, and
Controller, each with distinct responsibilities. AngularJS does
not implement MVC in the traditional sense, but rather
something closer to MVVM (Model-View-ViewModel). The
Angular JS team refers it humorously as Model View
Whatever.
 Cont..
• Deep Linking − Deep linking
allows to encode the state
of application in the URL so
that it can be bookmarked.
The application can then be
restored from the URL to
the same state.
• Dependency Injection −
AngularJS has a built-in
dependency injection
subsystem that helps the
developer to create,
understand, and test the
applications easily.
 Cont..
<!DOCTYPE html>
• The ng-app <html ng-app>
<script
directive tells src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang
AngularJS that this ular.min.js"></script>
is the root <body>

element of the <p>My first expression: {{ 5 + 5 }}</p>

AngularJS
</div>
application.
</body>
ng-app − This </html>
directive defines and
links an AngularJS
application to HTML.
 Cont..
<!DOCTYPE html>
• ng-model − This
<html ng-app>
<script
directive binds the src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.
values of min.js"></script>
<body>
AngularJS
application data to <p>Input something in the input box:</p>
HTML input
<p>Name : <input type="text" ng-model="name"
placeholder="Enter your name"></p>
controls. <h1>Hello {{name}}</h1>

</body>
</html>
 Cont..
Disadvantages of AngularJS
• Though AngularJS comes with a lot of merits, here are some
points of concern −
• Not Secure − Being JavaScript only framework, application
written in AngularJS are not safe. Server side authentication
and authorization is must to keep an application secure.
• Not degradable − If the user of your application disables
JavaScript, then nothing would be visible, except the basic
page.
 Server-Side Scripting
All server-side technologies share a common set of features: Read data
submitted by the user.
• Generate HTML dynamically based on user input.
• Determine information about the client browser.
• Access database systems.
• Exploit the HTTP protocol.

The marketplace for server-side web development solutions is a crowded one,

with several available options, such as CGI (Common Gateway Interface), Perl,
ASP (Active Server Pages), PHP (Hypertext Preprocessor), JSP (Java Server
Pages), Cold Fusion, and Node.js.
 Personal Home Pages
• PHP was originally an acronym for personal home pages, but is
now a recursive acronym for PHP: Hypertext Preprocessor.
• It is a server-side scripting language used to make HTML pages
dynamic, with extension .php
• Considering the Model-View-Controller (MVC) for web
application development framework, the database forms the
bottom most layer (the model), PHP runs as the middle layer (the
controller), and HTML forms the topmost layer (the view).
XAMPP is an abbreviation where X stands for Cross-Platform,
A stands for Apache, M stands for MYSQL, and the Ps stand
for PHP and Perl
 Cont..
Sample Page in Personal Home Pages
• Basically, a PHP file is a text file with the .php extension. It consists of:
Text
• HTML tags
• PHP Scripts
• PHP is about writing commands to a server.
• It was designed to work with HTML, basically embedding into the
HTML code.
• Though, you can create PHP files without any HTML tags, it is referred
to as a pure PHP file.
 Cont..
<!DOCTYPE html>
<html>
<body> Sample PHP programs
<?php
<!DOCTYPE html> echo "My first PHP script!";
<html> ?>
<body>
</body>
<?php </html>
echo date ("r");
?>

</body> Program to Displaying current date and

</html>
time
 Cont..
Personal Home Pages Syntax
• PHP is similar to C/C++ when it comes to basic syntax, though it has
its own variations.
• The PHP interpreter provides the functionality to “preprocess
hypertext,” which means executing PHP commands and producing
the desired HTML.
• It supports many databases like MySQL, PostgreSQL, and Oracle.
 Cont..
Key syntactical rules that PHP follows are: Each statement is
terminated by a semicolon.
• Space insensitive.
• Keywords (if, else, while, echo, and so on), classes, functions, and
user-defined functions are not case sensitive. For example, all the
following echo statements are legal (and equal).
• All variable names are case-sensitive.
• Comments in PHP can be given as:
• // for a single-line comment.
• # is also for a single-line comment.
• /* begins a multi-line comment block that spans over multiple lines.
• */ appears at the end of a multi-line comment block.
 Node.js: Server-Side JavaScript
• Node.js is a very powerful JavaScript-based framework/platform built
on Google Chrome’s JavaScript V8 Engine.
• It is an open-source, cross-platform runtime environment for
developing I/O intensive web applications like video streaming sites,
single-page applications, and other web applications.
• It is significantly faster than PHP because of the event callback
mechanism.
 Cont..
• Diagram show development of web sites in PHP running with
Apache and Node.js, respectively.
 Cont..
A node.js web application contains the following three parts:
• Import required modules: The “require” directive is used to load a
Node.js module.
• Create server: You have to establish a server which will listen to the
client’s request similar to Apache HTTP Server.
• Read request and return response: The server created in the second
step will read an HTTP request made by a client, which can be a
browser or console, and return the response.
Cont..