SPPU March/April 2022 Question Paper Answers
HTML5
1. Explain video & svg tag in HTML 5 with suitable example
a. The HTML <video> element is used to show a video on a web page.
Code for video tag
<!DOCTYPE html>
<html>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</html>
b. What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web
SVG is a W3C recommendation
The HTML <svg> Element
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
Code for svg circle
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
CSS3
2. What is pseudo classes in CSS explain with suitable example
A pseudo-class can be defined as a keyword which is combined to a selector that defines the
special state of the selected elements. It is added to the selector for adding an effect to the
existing elements based on their states. For example, The ":hover" is used for adding special
effects to an element when the user moves the cursor over the element.
The names of the pseudo-class are not case-sensitive.
Syntax
A pseudo-class starts with a colon (:). Let's see its syntax.
selector: pseudo-class {
property: value;
}
Example
<html>
<head>
<style>
body{
text-align:center;
}
h1:hover{
color:red;
}
h2:hover{
color:blue;
}
</style>
</head>
1. Node js
2. Write a program for multiplication of 2 numbers using event handling in node. js. Call
multiplication function as an event call
Code
var events = require('events');
var eventEmitter = new events.EventEmitter();
//Create an event handler:
var myEventHandler = function (n1,n2) {
console.log('Multiplication of 2nos.:',n1*n2);
//Assign the event handler to an event:
eventEmitter.on('multiply', myEventHandler);
//Fire the 'scream' event:
eventEmitter.emit('multiply',5,7);
Output
3. Write a program to show current date and time using user defined module in node. Js
Code
Date1.js (program for creating module)
exports.myDateTime = function () {
return Date();
};
Datedemo.js (program for accessing module)
var http = require('http');
var dt = require('./dstetime');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write("The date and time are currently: " + dt.myDateTime());
res.end();
}).listen(2001);
4. Explain Event handling in Node. js with suitable example
.In Node.js applications, Events and Callbacks concepts are used to provide concurrency.
As Node.js applications are single threaded and every API of Node js are asynchronous.
So it uses async function to maintain the concurrency.
Node uses observer pattern.
Node thread keeps an event loop and after the completion of any task, it fires the corresponding event
which signals the event listener function to get executed.
Event Driven Programming
Node.js uses event driven programming. It means as soon as Node starts its server, it simply initiates its
variables, declares functions and then simply waits for event to occur. It is the one of the reason why
Node.js is pretty fast compared to other similar technologies.
There is a main loop in the event driven application that listens for events, and then triggers a callback
function when one of those events is detected
Difference between Events and Callbacks:
Although, Events and Callbacks look similar but the differences lies in the fact that callback functions
are called when an asynchronous function returns its result where as event handling works on the
observer pattern. Whenever an event gets fired, its listener function starts executing. Node.js has
multiple in-built events available through events module and EventEmitter class which is used to bind
events and event listeners.
Example
var events = require('events');
var eventEmitter = new events.EventEmitter();
//Create an event handler:
var myEventHandler = function () {
console.log('I hear a scream!');
}
//Assign the event handler to an event:
eventEmitter.on('scream', myEventHandler);
//Fire the 'scream' event:
eventEmitter.emit('scream');
output
I hear a scream!
Angular Js Program
5. Write a program to display string in uppercase & lowercase using Angular JS filters.
Code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app
<p>
<label>Enter your name (in lower case)</label>
<input type="text" ng-model="yourname" />
</p>
<h5>Name in Uppercase</h5>
<p> {{ yourname | uppercase }} </p>
<h5>Name in lowercase</h5>
<p> {{ yourname | lowercase }} </p>
</div>
</body>
</html>
Output
6. Create a login form, both username & password fields are mandatory, after entering the values transfer
user control to next web page showing message as “You have login successfully”. (Use ng-href & ng-
required)
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" type="text/css" href="../css/styleAdmin.css">
</head>
<body ng-app="appLogin" ng-controller="LoginCtrl">
<h3>Login</h3>
<form name="frmLogin" novalidate>
<div id="loginBox">
<div class="lineBox">
<span class="label">Username</span>
<input type="text" name="username" ng-model="user.username" ng-required="true" ng-
minlength="6" ng-maxlength="8" ng-pattern="/[0-9a-z]/i">
<span class="error-message" ng-show="frmLogin.username.$dirty&&
frmLogin.username.$error" ng-hide="frmLogin.username.$dirty&& frmLogin.username.$valid">
The Username is Mandatory
</span>
</div>
<div class="lineBox">
<span class="label">Password</span>
<input type="password" name="psd" ng-model="user.password" ng-required="true" ng-
minlength="6" ng-maxlength="8" ng-pattern="/[0-9a-z]/i">
<span class="error-message" ng-show="frmLogin.psd.$dirty&&frmLogin.psd.$error" ng-
hide="frmLogin.psd.$dirty&& frmLogin.psd.$valid">
The password is Mandatory
</span>
</div>
<div class="lineBox">
<input type="button" value="submit" id="submit" ng-disabled="frmLogin.$invalid" ng-
click="submitLogin()">
</div>
</div>
</form>
<script src="../lib/angular.js"></script>
<script>
var appAdmin=angular.module('appLogin',[]);
appAdmin.controller(function($scope,loginService){
$scope.user={};
$scope.submitLogin=function(){
}
});
</script>
</body>
</html>
7. Explain ng-app, ng-model and hg-bind in Angular js with suitable example.
Code
<!DOCTYPE html>
<head>
<title>
AngularJs Directives Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="">
<div>
<input type="text" id="txtname" ng-model="name" />
<p>Your Nmae: {{name}}</p>
</div>
<div ng-init="employees=['Suresh','Rohini','Saineshwar']">
<p>Employee Details:</p>
<ul>
<li ng-repeat="name in employees">
{{ name }}
</li>
</ul>
</div>
</body>
</html>
Output
8. Program for ngIf in angular (latest Stable Version
Code
ng-if-demo.component.ts
import { Component, OnInit } from ‘@angular/core’;
@Component({
selector: ‘app-ng-if-demo’,
templateUrl: ‘./ng-if-demo.component.html’,
styleUrls: [‘./ng-if-demo.component.css’]
})
export class NgIfDemoComponent {
people: any[] = [
“name”: “Kapil Sharma”,
“age”: 40
},
“name”: “Suresh Albela”,
“age”: 32
},
“name”: “Aashish Pativala”,
“age”: 39
},
“name”: “Satendra Sharma”,
“age”: 44
},
{
“name”: “Kapil Jangir”,
“age”: 37
];
ng-if-demo.component.html
<h4>NgIf Demo</h4>
<ul *ngFor=”let person of people”>
<li *ngIf=”person.age < 35″> (1)
{{ person.name }} ({{ person.age }})
</li>
</ul>
Output
9. Program for ngSwitch in Angular (latest Stable Version
Code
ng-switch-demo.component.ts
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-ng-switch-demo’,
templateUrl: ‘./ng-switch-demo.component.html’,
styleUrls: [‘./ng-switch-demo.component.css’]
})
export class NgSwitchDemoComponent {
people: any[] = [
“name”: “Kapil Sharma”,
“age”: 40,
“state”: “Punjab”
},
“name”: “Suresh Albela”,
“age”: 32,
“state”:”Rajasthan”
},
“name”: “Aashish Pativala”,
“age”: 39,
“state”:”Madhyapradesh”
},
{
“name”: “Satendra Patel”,
“age”: 44,
“state”:”Gujarat”
},
“name”: “Kapil Jangir”,
“age”: 37,
“state”:”Rajasthan”
];
ng-switch-demo.component.html
<ul *ngFor=”let person of people”
[ngSwitch]=”person.state”> (1)
<li *ngSwitchCase=”‘Rajasthan'” (2)
class=”text-success”>{{ person.name }} ({{ person.state }})
</li>
<li *ngSwitchCase=”‘Gujarat'”
class=”text-primary”>{{ person.name }} ({{ person.state }})
</li>
<li *ngSwitchCase=”‘Punjab'”
class=”text-danger”>{{ person.name }} ({{ person.state }})
</li>
<li *ngSwitchDefault (3)
class=”text-warning”>{{ person.name }} ({{ person.state }})
</li>
</ul>
10. Program to demonstrate ng-if in angular JS
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
Keep HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
<h1>Welcome to AngulatJS!</h1>
<p>A solution of all technologies..</p>
<hr>
</div>
<p>If you uncheck the checkbox then DIV element will be removed.</p>
<p>If you check the checkbox then DIV element will return.</p>
</body>
</html>
Output
11. Program to demonstrate ng-switch in Angular Js
Code
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
Choose your favorite topic:
<select ng-model="myVar">
<option value="animals">Zoology
<option value="tuts">Tutorials
<option value="cars">Cars
<option value="bikes">Bikes
</select>
<hr>
<div ng-switch="myVar">
<div ng-switch-when="animals">
<h1>Zoology</h1>
<p>Welcome to a world of zoology.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
<div ng-switch-when="bikes">
<h1>Cars</h1>
<p>Read about bikes.</p>
</div>
<div ng-switch-default>
<h1>Switch</h1>
<p>Select topic from the dropdown, to switch the content of this DIV.</p>
</div>
</div>
<hr>
<p>The ng-switch directive hides and shows HTML sections depending on a certain value.</p>
</body>
</html>
Output
12. Explain routing in AngularJS with suitable example
What is Routing in AngularJS?
If you want to navigate to different pages in your application, but you also want the application to be a
SPA (Single Page Application), with no page reloading, you can use the ngRoute module.
The ngRoute module routes your application to different pages without reloading the entire application.
Example:
Navigate to "red.htm", "green.htm", and "blue.htm":
Code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
Output
PHP
13. Write a pHp script to demonstrate multidiamensional arrays.
Code
<?php
$emp = array
(
array(1,"sonoo",400000),
array(2,"john",500000),
array(3,"rahul",300000)
);
for ($row = 0; $row < 3; $row++) {
for ($col = 0; $col < 3; $col++) {
echo $emp[$row][$col]." ";
}
echo "<br/>";
}
?>
OUTPUT
1 sonoo 400000
2 john 500000
3 rahul 300000
14. What is cookie & session in PHP
What is Cookie?
A cookie is a small file with the maximum size of 4KB that the web server stores on the client computer.
Once a cookie has been set, all page requests that follow return the cookie name and value.
A cookie can only be read from the domain that it has been issued from. For example, a cookie set using
the domain www.guru99.com can not be read from the omain career.guru99.com.
Creating Cookies
Let’s now look at the basic syntax used to create a cookie.
<?php
setcookie(cookie_name, cookie_value, [expiry_time], [cookie_path], [domain], [secure], [httponly]);
?>
Retrieving the Cookie value
Create another file named “cookies_read.php” with the following code.
<?php
print_r($_COOKIE); //output the contents of the cookie array variable
?>
Delete Cookies
If you want to destroy a cookie before its expiry time, then you set the expiry time to a time that
has already passed.
Create a new filed named cookie_destroy.php with the following code
<?php
setcookie("user_name", "Guru99", time() - 360,'/');
?>
What is a Session?
A session is a global variable stored on the server.
Each session is assigned a unique id which is used to retrieve stored values.
Whenever a session is created, a cookie containing the unique session id is stored on the user’s
computer and returned with every request to the server. If the client browser does not support
cookies, the unique php session id is displayed in the URL
Sessions have the capacity to store relatively large data compared to cookies.
The session values are automatically deleted when the browser is closed. If you want to store the
values permanently, then you should store them in the database.
Creating a Session
In order to create a session, you must first call the PHP session_start function and then store your values
in the $_SESSION array variable.
Let’s suppose we want to know the number of times that a page has been loaded, we can use a session to
do that.
The code below shows how to create and retrieve values from sessions
<?php
session_start(); //start the PHP_session function
if(isset($_SESSION['page_count']))
{
$_SESSION['page_count'] += 1;
}
else
{
$_SESSION['page_count'] = 1;
}
echo 'You are visitor number ' . $_SESSION['page_count'];
?>
Destroying Session Variables
The session_destroy() function is used to destroy the whole Php session variables.
If you want to destroy only a session single item, you use the unset() function.
The code below illustrates how to use both methods.
<?php
session_destroy(); //destroy entire session
?>
15. Write a PHP script to create a database using MYSQL.
CODE
<html>
<body>
<h2>create database</h2>
<?php
$hname = "localhost";
$dbuser = "root";
$dbpass = "";
// Create connection
$mysqli = new mysqli($hname, $dbuser, $dbpass);
if($mysqli->connect_errno ) {
printf("Connect failed: %s<br />", $mysqli->connect_error);
exit();
printf('Connected successfully.<br />');
if ($mysqli->query("CREATE DATABASE EMP")) {
printf("Database EMP created successfully.<br />");
if ($mysqli->errno) {
printf("Could not create database: %s<br />", $mysqli->error);
$mysqli->close();
?>
</body>
</html>
16. What is Define function in PHP
Definition and Usage
The define() function defines a constant.
Constants are much like variables, except for the following differences:
A constant's value cannot be changed after it is set
Constant names do not need a leading dollar sign ($)
Constants can be accessed regardless of scope
Constant values can only be strings and numbers
Syntax
define(name,value,case_insensitive)
EXAMPLE
<?php
define("GREETING","Hello you! How are you today?");
echo constant("GREETING");
?>
17. Write a PHP script to design a form for exam registration. Insert 5 records in database and display all the
inserted records on new page.
Code
Exam.html
<!DOCTYPE html>
<html>
<head>
<h3> Exam Registration Form </h3>
</head>
<link rel="stylesheet" href="style.css"/>
<body>
<form method="POST" action="examinsert.php">
First name:<br>
<input type="text" name="first_name">
<br>
Last name:<br>
<input type="text" name="last_name">
<br>
Srudent Registration No.:<br>
<input type="number" name="stud_regno">
<br>
Registered Course:<br>
<input type="text" name="course_name">
<br><br>
<input type="submit" name="save" value="submit">
</form>
</body>
</html>
Examinsert.php
<?php
include_once 'db_con.php';
if(isset($_POST['save']))
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$stud_regno = $_POST['stud_regno'];
$course_name = $_POST['course_name'];
$sql = "INSERT INTO exam (firstname,lastname,studregno,coursename)
VALUES ('$first_name','$last_name','$stud_regno','$course_name')";
if (mysqli_query($conn, $sql)) {
echo "exam registration successfully !";
echo "<a href ='next.php'>Next form </a></br>";
} else {
echo "Error: " . $sql . "
" . mysqli_error($conn);
mysqli_close($conn);
?>
Next.php
<?php
$db = mysqli_connect('localhost', 'root', '', 'my_db');
echo "<br>"."connected successfully"."<br>";
if(!$db)
die("unable to connect");
$sql = "select * from exam";
if (!$sql)
die("could not connect database....");
}
$result = mysqli_query($db, $sql);
echo '<table border="2"><tr>';
echo "<tr><th>First Name</th>";
echo "<th>Last Name</th>";
echo "<th>Student Registration No.</th>";
echo "<th>Registered Course</th></tr>";
while(($row = mysqli_fetch_array($result)) != null)
echo "<td>".$row['firstname']."</td>";
echo "<td>".$row['lastname']."</td>";
echo "<td>".$row['studregno']."</td>";
echo "<td>".$row['coursename']."</td></tr>";
echo "</table>";
?>
Output
18. Write a PHP script to design a form to reschedule the journey dates of flights and display the updated
information on new web page.
Code
Flight.html
<!DOCTYPE html>
<html>
<head>
<h3> Flight Schedule </h3>
</head>
<link rel="stylesheet" href="style.css"/>
<body>
<form method="POST" action="flight.php">
Flight number:<br>
<input type="text" name="flight_no">
<br>
New Journey date<br>
<input type="date" name="change_date">
<br>
<br><br>
<input type="submit" name="update" value="reschedule">
</form>
</body>
</html>
Flight.php
<?php
include_once 'db_con.php';
if(isset($_POST['update']))
{
$flight_no = $_POST['flight_no'];
$change_date = $_POST['change_date'];
$sql = "UPDATE flight SET date1='$change_date' WHERE
flightno='$flight_no' ";
if (mysqli_query($conn, $sql)) {
echo "flight schedule changed successfully !";
echo "<a href ='next.php'>Next form </a></br>";
} else {
echo "Error: " . $sql . "
" . mysqli_error($conn);
mysqli_close($conn);
?>
next.php
<?php
$db = mysqli_connect('localhost', 'root', '', 'my_db');
echo "<br>"."connected successfully"."<br>";
if(!$db)
die("unable to connect");
$sql = "select * from flight";
if (!$sql)
{
die("could not connect database....");
$result = mysqli_query($db, $sql);
echo "Flight Reschedule Date";
echo "<table>";
echo "<tr><th>Flight No</th>";
echo "<th>Flight Name</th>";
echo "<th> Changed Date</th>";
echo "<th> Fair</th>";
while(($row = mysqli_fetch_array($result)) != null)
echo "<td>".$row['flightno']."</td>";
echo "<td>".$row['flightname']."</td>";
echo "<td>".$row['date1']."</td>";
echo "<td>".$row['fair']."</td></tr>";
echo "</table>";
?>
Output
