RIA: What is RIA?

● A Rich Internet Application (RIA) is a Web application with many of the

same features and appearances as a desktop application.
● A RIA requires a browser, browser plug-in or virtual machine to deliver a
user application.
● RIAs have always been about the user experience, it enhancing the end-
user experience in different ways.
● RIAs can run faster and be more engaging. They can offer users a better
visual experience, better accessibility, usability and more interactivity than
traditional browser applications that use only HTML and HTTP.
● A RIA can perform computation on both the client side and server side.
User Interface, its related activity and capability on the client side and the
data manipulation and operation on the application server side.

Explain the characteristics of Rich Internet Applications.

RIA Characteristics
Performance - RIAs can often perform better than traditional applications on the basis of the
characteristics of network and applications, performance of server also improved by offloading
possible processing work to the client system and also perceived performance in terms of UI
responsiveness and smoother visual transitions and animations are key aspects of any RIA.

Offline use - When connectivity is unavailable, it might still be possible to use an RIA. An RIA
platform let the user work with the application without connecting to the Internet and synchronizing
it automatically when the user goes live.

Security - RIAs should be as secure as any other web applications.

Consistency of look and feel - With RIA tools, the user interface and experience with different
browsers, devices and operating systems can be more carefully controlled and made consistent.

Direct Interaction - An RIA can use a wider range of controls that allow greater efficiency and
enhance the user experience. In RIAs, for example, users can interact directly with page elements
through editing or drag-and-drop tools. They can also do things like pan across a map or other
image.
RIA Characteristics

Better Feedback - Because of their ability to change parts of pages without reloading, RIAs can
provide the user with fast and accurate feedback, real-time confirmation of actions and choices,
and informative and detailed error messages.

Partial-page updating - RIAs incorporate additional technologies, such as real-time streaming,

high-performance client-side virtual machines, and local caching mechanisms that reduce latency
(wait times) and increase responsiveness.

Advanced Communication - Sophisticated communications with supporting servers through

optimized network protocols can considerably enhance the user experience.

Rapid Development - RIA framework should facilitate rapid development of a rich user experience
through its easy-to-use interfaces in ways that help developers.

Rich Internet applications: The tools

The list of current technologies that can be used to build modern RIAs is long.
Here are some of them:

● AJAX
● Adobe Flash, Flex and Adobe Integrated Runtime (AIR)
● Microsoft Silverlight
● Curl (an object-oriented language with embedded HTML markup)
● Google Gears
● OpenLaszlo and Webtop
● Oracle WebCenter
 AJAX:

AJAX - Technologies
AJAX cannot work independently. It is used in combination with other technologies to create
interactive webpages.

HTML/XHTML and CSS - used for displaying content and style. It is mainly used for presentation

DOM - For accessing and manipulating structured documents. Represents the structure of XML
and HTML documents. It is used for dynamic display and interaction with data.

XML or JSON - For carrying data to and from server. JSON (Javascript Object Notation) is like
XML but short and faster than XML.

XMLHttpRequest - JavaScript object that performs asynchronous interaction with the server.

JavaScript - It is used to bring above technologies together. Independently, it is used mainly for
client-side validation. Loosely typed scripting language. JavaScript function is called when an
event occurs in a page. Glue for the whole AJAX operation.
How AJAX Works? AJAX communicates with the server using XMLHttpRequest object.

How Ajax works ? Explain in detail.

OR
What is the use of the XMLHttpRequest object? Explain methods that are used to send requests to servers using AJAX?

How AJAX Works? AJAX communicates with the server using XMLHttpRequest object.

1. User sends a request from the UI and

a javascript call goes to
XMLHttpRequest object.
2. HTTP Request is sent to the server by
XMLHttpRequest object.
3. Server interacts with the database
using JSP, PHP, Servlet, ASP.net etc.
4. Data is retrieved.
5. Server sends XML data or JSON data
to the XMLHttpRequest callback
function.
6. HTML and CSS data is displayed on
the browser.
AJAX - XMLHttpRequest
An object of XMLHttpRequest is used for asynchronous communication between client
and server.

It performs following operations:

1. Sends data from the client in the background

2. Receives the data from the server
3. Updates the web page without reloading the entire page.

Properties of XMLHttpRequest object

onReadyStateChange, readyState, responseText, responseXML

Methods of XMLHttpRequest object

open( method, URL, async ), send( content ), setRequestHeader( label, value )

Properties of XMLHttpRequest
Methods of XMLHttpRequest

AJAX - Simple Example: Write a Ajax code which loads the data from the server and updates the parts of a web page
selectively withoutreloading the entire page.

<script type="text/javascript"> index1.html

intro.txt
function getIntro()
{
Hello All!
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET","intro.txt",false);
Welcome to DBIT
xmlHttp.send(null);
Its Internet Programming
var element = document.getElementById("list");
Hands-on Session
element.innerHTML = xmlHttp.responseText;
}
</script>

<form>
<h1> Welcome to <i> My Class </i> </h1>
<input type="button" value="Get Intro" onclick="getIntro();" />

</form>
<div id="list">
</div>
AJAX - Simple Example

What is jQuery?
● jQuery is a small and lightweight JavaScript library.
● jQuery is cross-platform.
● jQuery simplifies HTML document traversing (DOM manipulation), event
handling, animating, and Ajax interactions for rapid web development.
● jQuery means "write less do more".

The purpose of jQuery is to make it much easier to use

Javascript on your website.
About jQuery?
● Features of jQuery
● Easy DOM manipulation
● Easy CSS manipulation
● Better event methods techniques
● Effects and Animations
● Simplify Ajax calls
● And much more

jQuery Syntax
$(selector).action(call_back function)

Where,

● A $ sign to define/access jQuery

● A (selector) to "query (or find)" HTML elements
● A jQuery action() to be performed on the element(s)
 jQuery Syntax some of the most commonly used selectors.

● $("*") Wildcard: This selects every element

$(selector).action(call_back function) on the page.
● $(this) Current: This selects the current
Where, element being operated on within a function.
● $("p") Tag: This selects every instance of the
● A $ sign to define/access jQuery
<p> tag.
● A (selector) to "query (or find)" HTML elements
● $(".example") Class: This selects every
● A jQuery action() to be performed on the element(s)
element that has the example class applied to
it.
● $("#example") Id: This selects a single
instance of the unique example id.
● $("[type='text']") Attribute: This selects any
element with text applied to the type attribute.
● $("p:first-of-type") Pseudo Element: This
selects the first <p>.

jQuery Syntax
some of the most commonly used selectors.
$(selector).action(call_back function) ● click() Click: This executes on a single mouse
click.
Where, ● hover() Hover: This executes when the
● A $ sign to define/access jQuery mouse is hovered over an element.
● A (selector) to "query (or find)" HTML elements mouseenter() and mouseleave() apply only to
● A jQuery action() to be performed on the element(s) the mouse entering or leaving an element,
respectively.
● submit() Submit: This executes when a form
is submitted.
● scroll() Scroll: This executes when the screen
is scrolled.
● keydown() Keydown: This executes when
you press down on a key on the keyboard.
jQuery Example <body>
Hello All !! This is Sana Shaikh
<html>
<p class="message"> Some are good people. .... </p>
<p class="message"> We like to work with such
<head> people. .. </p>
<p> Goodbye All. .. </p>
<title>The jQuery Example</title>
</body>
</html>
<script
src="https://www.tutorialspoint.com/jquery/jq
uery-3.6.0.js"></script>

<script>
$(document).ready(function() {
$(".message").hide();

Write a jQuery scripts to:

(i) Animates a paragraph to fade to an specified opacity (complete the animation within 500 milliseconds)
(ii) Apply effects of slideUp, slideDown, hide, show on a div element
 effect.html myjs.js
<html> $(document).ready(function() {
<head> $("#slideU").click(function(){
<title>The jQuery Effects </title> $("#container").slideUp();
<script });
src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js
"></script> $("#slideD").click(function(){
<script src="myjs.js"></script> $("#container").slideDown();
</head> });
<body>
$("#slideT").click(function(){
<p>Click me to see it fade.</p> $("#container").slideToggle();
<div id="container"> </div> });

<button id="slideU"> Slide Up </button> $( "p" ).click(function() {

<button id="slideD"> Slide Down </button> $( this ).fadeTo( "slow", 0.50 );
<button id="hide"> Hide </button> });
<button id="show"> Show </button> });
</body>
</html>

Create an HTML form that accepts Emp Id, First_Name and Gender from the user. Write a PHP code to store this information
into the Employee table using MySQL database.

MySQL Database
Create database UserDB
Use UserDB;
Create Emp Table (EID, Name, Gender) in
Database - UserDB
Create table Emp (EID number Primary
key,
Name varchar(10),
Gender varchar(2));
 Create an HTML form that accepts Emp Id, First_Name and Gender from the user. Write a PHP code to store this information
into the Employee table using MySQL database.

Emp.html
<html>
<head>
<title>Student Details</title>
</head>
<body>
<h2> Student Registration Form</h2>
<form name="f1" action = "insert.php" method = "POST">
<p> <label> Emp ID: </label>
<input type = "text" id ="eid" name = "eid" /> </p>
<p> <label> Name: </label>
<input type = "text" id ="ename" name = "ename" /> </p>
<p>
<label> Gender: </label>
<input type = "text" id ="gen" name = "gen" />
</p>
<p>
<input type = "submit" id = "btn" value = "STORE" />
</p>
</form> </body> </html>

Create an HTML form that accepts Emp Id, First_Name and Gender from the user. Write a PHP code to store this information
into the Employee table using MySQL database.

Emp.html
<html> insert.php
<head> <?php
<title>Student Details</title> $host = "localhost";
</head> $user = "root";
<body> $password = '';
<h2> Student Registration Form</h2> $db_name = "UserDB";
<form name="f1" action = "insert.php" method =
$con = mysqli_connect($host, $user, $password, $db_name);
"POST">
<p> <label> Emp ID: </label> if(mysqli_connect_errno()) {
<input type = "text" id ="eid" name = "eid" /> </p> die("Failed to connect with MySQL: ". mysqli_connect_error()); }
<p> <label> Name: </label>
<input type = "text" id ="ename" name = "ename" /> $eid = $_POST['eid'];
</p> $ename = $_POST['ename'];
<p> $gen = $_POST['gen'];
<label> Gender: </label> $sql1 = "insert into Emp values ('$eid','$ename','$gen')";
<input type = "text" id ="gen" name = "gen" /> if(mysqli_query($con, $sql1)){
</p> echo "Records inserted successfully.";
<p> } else{
<input type = "submit" id = "btn" value = "STORE" />
echo "ERROR: Could not able to execute $sql1. " . mysqli_error($con);
</p>
}
</form> </body> </html>
?>
Get and Post
methods
in PHP

The GET method supports only string data types, while the POST method supports different data types such as
string, numeric, binary, and so on.

Get and Post

methods
in PHP
Get and Post
methods
in PHP

XML
● XML stands for eXtensible Markup Language and it is used for storing
and transferring data.
● It focuses on data rather than how the data looks, is designed to send, store,
receive and display data.
● XML does not depend on software and hardware, it is platform and
programming language independent.
● XML bridges the gap between human readability and machine readability.
Unlike HTML where most of the tags are predefined, XML doesn’t have
predefined tags, rather you have to create your own tags.
● The filename extension of XML is .xml
 XML Features

● XML is an extensible markup language like HTML.

● It is extensible and human-readable.
● It is platform and language independent.
● It preserves white space.
● Overall simplicity.
● Self-descriptive in nature.
● It separates data from HTML.
● XML tags are not predefined. You need to define your customized tags.
● XML was designed to carry data, not to display that data.
● Markup code of XML is easy to understand for a human.
● Well-structured format is easy to read and write from programs.

XML Example - for storing book details

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="COOKING">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="CHILDREN">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore> books.xml
 XML Schema Generator - DTD
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type = "text/xsl"
href = "student.xsl"?>
<class>
<student>
<rollno> 1 </rollno> <!ELEMENT class (student+)>
<fname> Sana </fname>
<lname> Shaikh </lname> <!ELEMENT student
</student>
(rollno,fname,lname)>
<student>
<rollno> 2 </rollno> <!ELEMENT rollno (#PCDATA)>
<fname> Bushra </fname>
<!ELEMENT fname (#PCDATA)>
<lname> Shaikh </lname>
</student> <!ELEMENT lname (#PCDATA)>
<student>
<rollno> 3 </rollno>
<fname> Bilal </fname>
<lname> Ansari </lname>
</student>
</class>

XML Schema Generator

 Student.xsl <xsl:for-each select="class/student">
XSLT <tr>
<?xml version="1.0"
<td><xsl:value-of select="rollno"/></td>
encoding="UTF-8"?>
<td><xsl:value-of select="fname"/></td>
<xsl:stylesheet version="1.0" <td><xsl:value-of select="lname"/></td>
xmlns:xsl="http://www.w3.org/1999/ </tr>

XSL/Transform"> </xsl:for-each>

<xsl:template match="/">
<html> </table>
<body> </body>
<h2> Student's List </h2> </html>
<table border="1"> </xsl:template>
<tr bgcolor="yellow"> </xsl:stylesheet>
<th> RollNo </th>
<th> FName </th>
<th> LName </th>
</tr>

Student.xml
XSLT <?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type = "text/xsl" href = "student.xsl"?>
<class>
<student>
<rollno> 1 </rollno>
<fname> Sana </fname>
<lname> Shaikh </lname>
</student>
<student>
<rollno> 2 </rollno>
<fname> Bushra </fname>
<lname> Shaikh </lname>
</student>
<student>
<rollno> 3 </rollno>
<fname> Bilal </fname>
<lname> Ansari </lname>
</student>
</class>
 ReactJS is a declarative, efficient, and flexible JavaScript library for building
reusable UI components.

Why we use ReactJS ?

● The main objective of ReactJS is to develop User Interfaces (UI) that
improves the speed of the apps.
● It uses virtual DOM (JavaScript object), which improves the performance of
the app. The JavaScript virtual DOM is faster than the regular DOM.
● We can use ReactJS on the client and server-side as well as with other
frameworks.
● It uses component and data patterns that improve readability and helps to
maintain larger apps.
● React only changes what needs to be changed!

React Environment Setup

Set up an environment for the successful development of ReactJS application.
Install NodeJS and NPM:

● sudo apt update

● sudo apt install nodejs
● node -v
● sudo apt install npm
● npm -v

You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine. To create a
project, run:

npx create-react-app app-sana

cd app-sana

npm start
npx create-react-app
app-sana

cd app-sana

npm start
See output
in browser
Open
app-sana in
VS Code

In src
folder,
Open
App.js
Check
output

Try to add two

more paragraphs in
App.js file

And now Check

output
You will finds
ERRORS…

Return element
should be one
element

Add div element

and now check
output
 Lets Create own component (app)

src -> components

-> header.js
export default header;
 Write a short note on React JS. Write a script to build a header component in React?
● ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable
UI components.
● It is an open-source, component-based front end library which is responsible only for
the view layer of the application.
● It was initially developed and maintained by Facebook and later used in its products
like WhatsApp & Instagram.
● The main objective of ReactJS is to develop User Interfaces (UI) that improves the
speed of the apps.
● It uses virtual DOM (JavaScript object), which improves the performance of the app.
The JavaScript virtual DOM is faster than the regular DOM.
● We can use ReactJS on the client and server-side as well as with other frameworks.
● It uses component and data patterns that improve readability and helps to maintain
larger apps.
● React only changes what needs to be changed!

Code:
App.js
npx create-react-app app-sana import logo from ‘./log.svg’;
cd app-sana import ‘./App.css’;
npm start import Header from ‘./components/header’;

header.js function App() {

import React from “react”; return(
<div>
function Header() <Header/>
{ <h1> Hello World </h1>
return(
<p> This is my first react app </p>
<div>
<p> We are learning React </p>
<h1> Header Section </h1>
</hr> </div>
<h2> Sana Shaikh </h2> );
<p> Its my Header Component. </p> }
</div> export default App ;
)
}
export default Header ;
 Write a short note on JSX. Write a code for anyone simple application using JSX
JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in
React (within JavaScript code). It is easy to create a template using JSX in React, but it is not a simple template
language instead it comes with the full power of JavaScript. It is faster than normal JavaScript as it performs
optimizations while translating to regular JavaScript. Instead of separating the markup and logic in separated files,
React uses components for this purpose. We will learn about components in detail in further articles.

Syntax:
const element = <h1> Hello world </h1>;

Characteristics of JSX:
● JSX is not mandatory to use there are other ways to achieve the same thing but using JSX makes iteasier
to develop react application.
● JSX allows writing expression in { }. The expression can be any JS expression or React variable.
● To insert a large block of HTML we have to write it in a parenthesis i.e, ().
● JSX produces react elements.
● JSX follows XML rule.
● After compilation, JSX expressions become regular JavaScript function calls.
● JSX uses camelcase notation for naming HTML attributes. For example, tabindex in HTML is used as
tabIndex in JSX.

Code:
import React from 'react';
import ReactDOM from 'react-dom/client';

const myElement = (
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
);

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(myElement);