FRONT END FRAMEWORK AND BACK END

TECHNOLOGIES
Front End Framework: Introduction to jQuery - Syntax,
Selectors, Events, Traversing, AJAX ; Introduction to
Bootstrap – Basics, Grids, Themes ; Angular JS – Expressions,
Modules, Data Binding, Scopes, Directives & Events,
Controllers, Filters, Services, Validation.
Back End Technologies: Introduction to RESTful services,
Resources, Messages (Request, Response), Addressing,
Methods – (GET, POST, PUT, DELETE).
Front End Framework: Introduction to jQuery
• What is jQuery?
• jQuery is a lightweight, fast, and feature-rich JavaScript library that
simplifies HTML document traversal, event handling, animations, and
AJAX interactions.

Why jQuery is Used (Need for jQuery)

• Reduces lengthy JavaScript code
• Simplifies DOM manipulation
• Handles browser compatibility issues
• Easy event handling
• Built-in effects and animations
• Simplifies AJAX calls
 Features of jQuery

• Simple syntax
• Cross-browser compatibility
• DOM manipulation
• Event handling
• Effects and animations
• AJAX support
• Method chaining
• Advantages of jQuery
• Easy to learn and use
• Shorter code than JavaScript
• Powerful DOM manipulation
• Strong community support
• Compatible with modern browsers
• Limitations of jQuery
• Slower than pure JavaScript for complex apps
• Less useful in modern frameworks (React, Angular)
• Requires JavaScript enabled browser
Syntax, Selectors, Events, Traversing, AJAX
jQuery Syntax
jQuery uses a simple and short syntax to perform actions on
HTML elements.
Basic Syntax
$(selector).action();
• $ → jQuery symbol
• selector → Selects HTML elements
• action() → Performs operation
Example
$("#demo").hide();
 jQuery Selectors
Selectors are used to select HTML elements to perform
operations.
Types of jQuery Selectors
• Element Selector
$("p")
Selects all <p> elements.
• ID Selector
$("#title")
Selects element with id title.
• Class Selector
$(".box")
Selects all elements with class box.
• Universal Selector
$("*")
Selects all elements.
• Attribute Selector
$("input[type='text']")
 jQuery Events
Events are actions performed by the user or browser. Common jQuery Events

Event Description
click() Mouse click
dblclick() Double click
mouseenter() Mouse hover
mouseleave() Mouse leave
keypress() Key pressed
keydown() Key down
submit() Form submit
change() Input change
load() Page load
Event Example
$("button").click(function()
{
alert("Button clicked");
}
);
jQuery Traversing
• Traversing allows moving through the DOM tree to find related
elements.
Parent
Traversing
Method Description
parent() Selects direct parent
parents() Selects all parents

$("p").parent();
 Child Traversing
Method Description
children() Selects direct children
find() Selects all descendants

$("div").children();
 Sibling Traversing

Method Description
siblings() All siblings
next() Next sibling
prev() Previous sibling

$("h1").next();
 Filtering Methods

Method Use
first() First element
last() Last element
eq() Element at index
not() Exclude elements

$("p").first();
 jQuery AJAX

AJAX allows data exchange with a server without reloading the page.
load() Method
Loads data from server into an element.
$("#demo").load("[Link]");
$.get() Method
Sends HTTP GET request.
$.get("[Link]", function(data) { $("#demo").html(data); });
$.post() Method
Sends HTTP POST request.
$.post("[Link]", {name:"Asha"}, function(data) {
$("#demo").html(data);
});
$.ajax() Method
Most powerful AJAX method.
$.ajax({ url: "[Link]", type: "GET", success: function(result)
{ $("#demo").html(result); } });

Advantages of jQuery AJAX

• No page reload
• Faster data access
• Improved user experience
• Simplified server communication
 Introduction to Bootstrap

Introduction to Bootstrap
• Bootstrap is a free and open-source front-end framework used to
design responsive and mobile-first websites quickly and easily. It was
developed by Twitter.
Why Bootstrap?

• Faster web development

• Responsive design by default
• Consistent UI across browsers
• Large collection of ready-made components
• Easy to learn and use
Bootstrap Basics
• Features of Bootstrap
• Mobile-first approach
• Predefined CSS classes
• Built-in JavaScript components
• Responsive grid system
• Cross-browser compatibility
• Customizable themes
Applications of Bootstrap
• Creating Responsive Websites

• Prototyping Web Applications

• Developing Admin Dashboards

• Building Landing Pages

• Designing E-commerce Frontends

Bootstrap Components

• Bootstrap offers a rich set of pre-designed components to

streamline UI development. These include buttons, cards,
modals, navbars, and more.

Accordion

Alerts

Badges

Breadcrumb

Buttons

Button Group
• Bootstrap Utilities
• Bootstrap utilities are small, reusable classes that provide
additional functionality and control. They include classes for
spacing, alignment, borders, and background colors.
• Background
• Borders
• Colors
• Display
• Flex
• Float
• Interactions
 Bootstrap Files

• Bootstrap mainly consists of:

[Link] – Styling and layout
[Link] – Interactive components
[Link]/Icons – Glyphicons or Bootstrap Icons
 Basic Bootstrap Classes

.container – Fixed-width responsive container

.container-fluid – Full-width container
.row – Horizontal group of columns
.col – Column inside a row
.btn – Button styling
.text-center – Center aligned text
 Bootstrap Grid System

The Grid System is used to create page layouts through rows and
columns.
Key Concepts
• Total width divided into 12 columns
• Uses Flexbox
• Responsive for different screen sizes
Grid Structure
<div class="container">
<div class="row">
<div class="col">Column 1
</div>
<div class="col">Column 2
</div>
</div>
</div>
Grid Classes Based on Screen Size

Class Prefix Device Type

.col- Extra small (mobile)
.col-sm- Small (tablets)
.col-md- Medium (laptops)
.col-lg- Large (desktops)
.col-xl- Extra large screens
Example
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
Advantages of Grid System
• Easy layout design
• Fully responsive
• No need for custom CSS
• Clean and organized structure
Key Concepts of Bootstrap Grid System
Container
A container is the outermost wrapper that holds grid elements.
Types of Containers

Class Description

.container Fixed-width responsive container

.container-fluid Full-width container

Width changes at specified screen
.container-{breakpoint}
size
Example:
<div class="container">
Content here
</div>
Rows
• .row creates a horizontal group of columns
• Must be placed inside a container
• Uses negative margins to align columns properly
<div class="row"> ... </div>
Columns
• Columns are placed inside rows
• Total columns per row = 12
• Columns auto-adjust width if size is not specified

<div class="col">Auto width</div>

 Responsive Grid Breakpoints
Bootstrap uses breakpoints to adapt layouts to different screen sizes.

Breakpoint Class Prefix Screen Size

Extra small .col- <576px
Small .col-sm- ≥576px
Medium .col-md- ≥768px
Large .col-lg- ≥992px
Extra large .col-xl- ≥1200px
Extra extra
.col-xxl- ≥1400px
large
 Nested Grids
Rows and columns can be nested inside another
column.
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">Nested 1</div>
<div class="col-md-6">Nested 2</div>
</div>
</div>
</div>
Advantages of Bootstrap Grid System
• Fully responsive
• Mobile-first design
• Easy layout creation
• No extra CSS required
• Supports nesting and reordering
 Bootstrap Themes
• Introduction
• A Bootstrap Theme is a customized design template built on top of
the Bootstrap framework. It modifies Bootstrap’s default styles such
as colors, fonts, layouts, and components to create a unique and
branded appearance while maintaining responsiveness.
Purpose of Bootstrap Themes
• To change the default look and feel of Bootstrap
• To maintain design consistency
• To save UI development time
• To support branding requirements
• To create professional-looking websites quickly
 Types of Bootstrap Themes

1. Default Bootstrap Theme

• Comes with Bootstrap by default
• Uses standard colors, fonts, and components
• Minimal design
• Suitable for general-purpose websites
Custom Bootstrap Themes
• Created by developers
• Override default Bootstrap styles
• Uses custom colors, typography, and layouts

Example:
body
{
background-color: #f4f4f4;
}
Pre-Built Bootstrap Themes
• Ready-made templates
• Available as free or paid themes
• Used for dashboards, portfolios, e-commerce sites
Examples:
• Admin dashboards
• Landing pages
• Corporate websites
Key Components of a Bootstrap Theme

Color System
Bootstrap uses a predefined color palette:

Class Purpose
.text-primary Main theme color
.bg-success Success message
.bg-danger Error message
.bg-warning Alert
 Typography

Bootstrap defines default typography styles

•Font family
•Headings
•Line height
•Text alignment
Example:
<h1 class="display-4">
Bootstrap Theme
</h1>
Buttons and Components
Themes customize:
•Buttons
•Forms
•Cards
•Navbars
•Alerts
•Modals

<button class="btn btn-primary">Submit</button>

Layout and Spacing
• Themes control:
• Margin and padding
• Grid spacing
• Section alignment

<div class="p-3 m-2 bg-light">

Advantages of Bootstrap Themes
• Saves development time
• Consistent UI design
• Easy customization
• Responsive by default
• Reusable design components
Limitations of Bootstrap Themes
• Websites may look similar
• Requires CSS knowledge for deep customization
• Extra unused styles may increase file size
 Angular JS – Expressions
Introduction to AngularJS
AngularJS is an open-source JavaScript framework developed by
Google for building dynamic single-page web applications (SPA).
It follows the MVC (Model–View–Controller) architecture and extends
HTML using directives.
Features
• Two-way data binding
• Dependency Injection
• Modular structure
• Reusable components
• Declarative UI using HTML
 AngularJS Expressions

Definition
AngularJS expressions are written inside double curly braces {{ }} and
are used to bind data to HTML.
Characteristics
• Similar to JavaScript expressions
• Can contain variables, operators, and functions
• Do not support loops or conditionals
• Evaluated against the scope
Examples
<p> { { 10 + 20 } }
</p>
<p>
{
{ name }}
</p>
<p>
{
{ price * quantity }
}
</p>
 AngularJS Modules
Definition
A module defines an AngularJS application. It acts as a container for
controllers, services, filters, and directives.

Syntax
<div ng-app="myApp"></div>
var app = [Link]("myApp", []);
Advantages
• Organizes application code
• Easy maintenance
• Supports dependency injection
Data Binding
Definition
Data binding is the automatic synchronization of data between the model
and the view.
Types of Data Binding
1. One-Way Data Binding
Data flows in one direction.
<p>
{
{ message }
}
</p>
Two-Way Data Binding
Changes in view update model and vice versa.
<input type="text" ng-model="name">
<p>
{{ name }}
</p>

Advantages
• Reduces coding effort
• Keeps UI and data synchronized
• Improves user experience
 Scopes

Definition
• The scope is a JavaScript object that binds the controller and the
view.

Types of Scopes

1.$rootScope – Global scope

2.$scope – Controller-specific scope
[Link] scope – Inherited from parent
Example
[Link]("myCtrl", function($scope)
{ $[Link] = "AngularJS"; }
);
Html code
<p>{{ name }}</p>
 Directives & Events
AngularJS Directives
Definition
Directives are special HTML attributes that extend HTML functionality. Common Built-
in Directives
Directive Purpose
ng-app Defines Angular app
ng-model Binds data
ng-bind Binds text
ng-repeat Loops data
ng-if Conditional display
ng-show / ng-hide Show/Hide elements
<li ng-repeat="x in names">
{{ x }}
</li>
AngularJS Events

Event Directive Description

ng-click Mouse click
ng-change Input change
ng-submit Form submit
ng-mouseover Mouse hover
<button ng-click="count = count + 1">Click</button>
Controllers

Definition
• Controllers manage application logic and data. They control the
behavior of the view.
• Syntax
[Link]("myCtrl", function($scope)
{
$[Link] = "Welcome";
}
);
• Role of Controller
• Initialize scope variables
• Define functions
• Control data flow
 Filters
• Definition
• Filters format data before displaying it to the user.
Built-in Filters

Filter Usage
uppercase Convert text to uppercase
lowercase Convert to lowercase
currency Currency format
date Date formatting
orderBy Sorting
filter Search/filter data
Example
<p>
{{ name | uppercase }}
</p>
<p>
{{ price | currency }}
</p>
 Services

Definition
Services are reusable objects or functions used to share data and
logic across controllers.
Common Services
• $http – Server communication
• $timeout – Delay execution
• $interval – Repeated execution
• $location – URL handling
Custom Service Example
Example
[Link]("myService", function()
{
[Link] = "Hello Service";
});
 AngularJS Validation
Definition
AngularJS provides client-side form validation using built-in directives.
Validation Directives

Directive Purpose
ng-required Mandatory field
ng-minlength Minimum length
ng-maxlength Maximum length
ng-pattern Pattern validation
type="email" Email validation
Example
<form name="myForm">
<input type="email" name="email" ng-model="email" required>
<span ng-show="[Link].$[Link]">
Required
</span>
</form>
Form States
•$valid
•$invalid
•$dirty
•$pristine
•$touched
• Advantages of AngularJS
• Fast development
• MVC architecture
• Two-way data binding
• Reusable components
• Easy testing
• Limitations of AngularJS
• Performance issues for large apps
• Complex for beginners
• SEO challenges
 Back End Technologies

Introduction to RESTful services

What is REST?
• REST stands for Representational State Transfer.
It is an architectural style used to design web services that allow
communication between client and server over the internet.
• A RESTful service is a web service that follows REST principles and
uses HTTP protocol.
• Why RESTful Services?
• Used to connect frontend (AngularJS / jQuery) with backend
• Enables data exchange between systems
• Supports scalability and performance
• Platform independent (works with any language)
• Real-World Example
• Online shopping website
• Mobile banking application
• Social media platforms
Characteristics of RESTful Services

[Link]–Server Architecture
1. Client handles UI
2. Server handles logic and database
[Link]
1. Each request is independent
2. Server does not store client session
[Link] Interface
1. Standard HTTP methods
2. Standard data formats (JSON / XML)
[Link]-Based
1. Everything is treated as a resource
 Resources in RESTful Services
What is a Resource in REST?
• In RESTful services, a resource is any entity or data that can be
identified, accessed, and manipulated using a URI (Uniform Resource
Identifier).
 Examples of Resources

Application Resource
College system Student, Course
Banking system Account, Transaction
E-commerce Product, Order
Hospital system Patient, Appointment
Identifying Resources Using URI
Each resource is uniquely identified using a URI / URL.

Example:
[Link]
[Link]
•/students → collection of resources
•/students/101 → single resource
Types of Resources
Collection Resource
Represents a group of similar resources.
Example:
/students
Represents:
•All students in the database
Individual Resource
Represents a single entity.
Example:
/students/101
Represents:
Student with ID 101
Resource Representation
• A resource can be represented in different formats.
• Common Representations:
• JSON (Most widely used)
• XML
Example (JSON Representation):
{ "id": 101, "name": "Keerthana", "department": "Computer Science" }
 Messages in RESTful Services

What are Messages in REST?

• In RESTful services, communication between client and server happens through
HTTP messages.
There are two types of messages:
[Link] Message – sent by the client
[Link] Message – sent by the server
Request Message
Definition
• A request message is an HTTP message sent by the client to the
server to perform an operation on a resource.
It tells the server:
• What action to perform
• On which resource
• With what data
Components of Request Message
• A request message consists of the following parts:
[Link] Line
[Link]
[Link] (Optional)
Request Line
Contains:
•HTTP Method
•Resource URI
•HTTP Version

Example:
GET /api/students/101 HTTP/1.1
 HTTP Methods Used in Requests

Method Purpose
GET Retrieve data
POST Send new data
PUT Update data
DELETE Delete data
Request Headers
Headers provide additional information about the request.
Common Request Headers:

Header Description
Host Server address
Content-Type Data format
Authorization Authentication
Accept Expected response format
Request Body
•Contains data sent to server
•Used mainly in POST and PUT

Example:
{ "name": "Keerthana", "course": "Web Development" }
Response Message
• Definition
• A response message is an HTTP message sent by the server to the
client after processing the request.
It tells the client:
• Request status
• Result of operation
• Requested data (if any)
Components of Response Message
• A response message consists of:
[Link] Line
[Link]
[Link]
Status Line
• Contains:
• HTTP Version
• Status Code
• Status Message
Response Headers
Headers provide information about the response data.
Common Response Headers:

• Header • Description
• Content-Type • Format of response
• Content-Length • Size of response
• Cache-Control • Caching rules
Response Body
Contains the actual data returned by the server.
Example:

{
"id": 101,
"name": "Keerthana",
"course": "Web Development“
}
 Addressing
Introduction
• In RESTful web services, addressing refers to the technique of
identifying and accessing resources using Uniform Resource
Identifiers (URIs). REST follows a resource-oriented architecture,
where every resource is uniquely addressable through a URI.
• Unlike traditional web services, REST does not focus on operations
but on resources and their representations.
Resource Concept in REST
A resource is any information or object that can be accessed through a REST API.
Examples of Resources:
• Student
• Employee
• Product
• Order
• Book
Each resource:
• Has a unique identity
• Is accessed using a URI
• Can have multiple representations (JSON, XML, HTML)
Uniform Resource Identifier (URI)
• A URI is a string of characters used to uniquely identify a resource on the web.
• General URI Format:
• scheme://host:port/path?query-parameters
Types of Addressing in REST
Collection Resource Addressing

Used to represent a group of resources.

Example:
/students
• Represents all students
• Typically used with GET and POST methods
Methods in RESTful Services (HTTP
Methods)
• In RESTful web services, methods (also called HTTP verbs) define the
action to be performed on a resource identified by a URI.
• The most commonly used methods are GET, POST, PUT, and DELETE,
which map closely to CRUD operations.

CRUD Operation HTTP Method

Create POST
Read GET
Update PUT
Delete DELETE
GET Method
Definition
• The GET method is used to retrieve or read data from the server. It
does not modify the resource.
• Characteristics
• Used for fetching resources
• Data is sent in the URL
• Safe (does not change server state)
Syntax
GET /api/users/101 HTTP/1.1
Example
GET /students/5
POST Method
• Definition
• The POST method is used to create a new resource on the server.
• Characteristics
• Used for sending data to the server
• Data is sent in the request body
• Not idempotent (multiple requests create multiple resources)
Syntax
POST /api/users HTTP/1.1 Content-Type: application/json

Example
POST /students
{ "name": "Ravi",
"age": 20 }
PUT Method
• Definition
• The PUT method is used to update or replace an existing resource.
• Characteristics
• Replaces the entire resource
• Idempotent
Syntax
PUT /api/users/101 HTTP/1.1
Example
PUT /students/5 { "name": "Ravi Kumar", "age": 21 }
DELETE Method
• Definition
• The DELETE method is used to remove a resource from the server.
Characteristics
• Deletes the specified resource
• Idempotent
• No request body required
• Not cacheable
Syntax
DELETE /api/users/101 HTTP/1.1
Example
DELETE /students/5
 NPTEL Links
NPTEL – Web Technologies playlist (general web frameworks & scripting)
🔗 [Link]
Intro to jQuery – Tutorial for Beginners (covers syntax & selectors)
🔗 [Link]
Bootstrap Tutorial for Beginners (responsive grids & components)
👉 [Link]
Bootstrap in Angular/JS (integration guide)
🔗 [Link]
AngularJS Tutorial – Introduction to AngularJS
🔗 [Link]
Bootstrapping AngularJS App (angular start)
🔗 [Link]
AngularJS & Bootstrap Integration Example
🔗 [Link]
RESTful Web Services – GET, POST, PUT, DELETE Explained
👉 [Link]