Vous êtes sur la page 1sur 41

1

1.Program to implement Audio and Video features for your web page.
Code:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Question one</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstra
p.min.css" rel="stylesheet"
integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.
bundle.min.js"
integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</head>

<body>
<h1>video</h1>
<div class="container-sm border">
<video controls width="400" height="400">
<source src="HP.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</div>
<h1>Audio</h1>
<div class="container shadow-lg p-3 mb-5 bg-body-tertiary
rounded">
<audio controls>
<source src="onrepeat.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</div>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/pop
per.min.js"

integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+h
Vqc2pM8ODewa9r"
crossorigin="anonymous"></script>
2

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.
min.js"
integrity="sha384-
0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
</body>

</html>

Output:
3

2.Program to design form using HTML5 elements, attributes and Semantics.


Code:
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>HTML5 Form Example</title>
<style>
/* CSS styles for the form */
form {
width: 300px;
margin: 0 auto;
}
input[type="text"], input[type="email"], textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form action="#" method="post">
<h2>Contact Us</h2>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
4

<input type="email" id="email" name="email" required>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4"
required></textarea>

<input type="submit" value="Submit">


</form>
</body>
</html>

Output:

3.Programs using Canvas and SVG.


Code:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Question one</title>
5

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstra
p.min.css" rel="stylesheet"
integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.
bundle.min.js"
integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</head>

<body>
<h1>video</h1>
<div class="container-sm border">
<video controls width="400" height="400">
<source src="HP.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</div>
<h1>Audio</h1>
<div class="container shadow-lg p-3 mb-5 bg-body-tertiary
rounded">
<audio controls>
<source src="onrepeat.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</div>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/pop
per.min.js"

integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+h
Vqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.
min.js"
integrity="sha384-
0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"></script>
</body>

</html>

Output:
6

4.Programs to demonstrate external and internal styles in the web page using font, text,
background, borders, opacity and other CSS 3 properties.
Code:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Internal and External Styles Example</title>

<style>
h2 {
font-size: 24px;
color: #008000;
}

.internal-container {
background-color: #fff;
border: 2px solid #008000;
padding: 15px;
}

.opacity-div {
background-color: #0000ff;
opacity: 0.7;
}
</style>
7

<link rel="stylesheet" href="styles.css">


</head>

<body>
<h1>External and Internal Styles Example</h1>
<div class="container">
<h2>Internal Styles</h2>
<div class="internal-container">
<p>This text uses internal styles for font, text,
background, and borders.</p>
<div class="opacity-div">
<p>This is a semi-transparent div with internal
styles.</p>
</div>
</div>
</div>

<div class="container">
<h2>External Styles</h2>
<p>This text uses external styles for font, text,
background, and borders.</p>
<div class="opacity-div">
<p>This is a semi-transparent div with external
styles.</p>
</div>
</div>
</body>

</html>

Styles.css

/* styles.css */

/* Font and Text Properties */


body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}

h1 {
font-size: 28px;
}
8

p {
font-size: 18px;
}

/* Background and Borders */


.container {
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 20px;
}

/* Opacity */
.opacity-div {
background-color: #ff0000;
opacity: 0.5; /* Semi-transparent */
}

Output:

5.Implement Transformation using Translation, Rotation and Scaling in your web page.
Code:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Transformation Example</title>
<style>
/* CSS for styling and transformations */
.transform-box {
width: 100px;
height: 100px;
background-color: #FF5733;
margin: 50px;
}
9

/* Apply transformations */
.translate {
transform: translate(50px, 50px);
/* Translate by 50px in both X and Y direction */
}

.rotate {
transform: rotate(45deg);
/* Rotate by 45 degrees */
}

.scale {
transform: scale(1.5);
/* Scale by 1.5 times */
}
</style>
</head>

<body>
<div class="transform-box translate">Translation</div>
<div class="transform-box rotate">Rotation</div>
<div class="transform-box scale">Scaling</div>
</body>

</html>

Output:
10

6.Program to show current date and time using user defined module
11

Code:
datetimodule.js
function getCurrentDateTime(){
return new Date();
}
module.exports={
getCurrentDateTime
}

Main.js
const datetimeModule=require('./datetimeModule');
function main(){
const currentDateTime= datetimeModule.getCurrentDateTime();
console.log("current date and time:",currentDateTime);

main();

Output:

7.Program using built-in modules to split the query string into readable parts.
Code:
const querystring = require("querystring");

const queryString = "name=John&age=30&city=New+York";

const parsedQuery = querystring.parse(queryString);

console.log("Parsed Query:");
console.log(parsedQuery);
12

Output:

8.Program using NPM which will convert entered string into either case
Code:
const readline = require("readline");

const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});

rl.question("enter string: ", (str) => {


rl.question("for uppercase press U, lowercase press L : ", (choice) => {
if (choice.toLowerCase() === "u") {
console.log("uppercase: ", str.toUpperCase());
} else if (choice.toLowerCase() === "l") {
console.log("lowercase: ", str.toLowerCase());
} else {
console.log("enter proper choice");
}
rl.close();
});
})

Output:
13

9.Write a program to create a calculator using Node JS. (Install and configure Node JS and
Server)
Code:
const readline = require('readline');

const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});

function add(a, b) {
return a + b;
}

function subtract(a, b) {
return a - b;
}

function multiply(a, b) {
return a * b;
}

function divide(a, b) {
if (b === 0) {
return "Error: Division by zero";
}
return a / b;
}

function calculator() {
rl.question('Enter first number: ', (num1) => {
rl.question('Enter second number: ', (num2) => {
14

num1 = parseFloat(num1);
num2 = parseFloat(num2);
rl.question('Enter operation (+, -, *, /): ',
(operation) => {
let result;
switch (operation) {
case '+':
result = add(num1, num2);
break;
case '-':
result = subtract(num1, num2);
break;
case '*':
result = multiply(num1, num2);
break;
case '/':
result = divide(num1, num2);
break;

default:
result = "Error: Invalid operation";
}
console.log('result',result );
rl.close();
});
});
});
}

calculator();

Output:
15

10.Write Program for Form validation in Angular.


Code:
form-validation.component.html.

<h2>form-validation!</h2>
<div>
<label for="username">Username</label>
<input type="text" name="username" [(ngModel)]="username">

</div>
<div>
<label for="email">Email</label>
<input type="email" name="email" [(ngModel)]="email">

</div>
<div>
<label for="password">Password</label>
<input type="password" name="password" [(ngModel)]="password">

</div>
<div>
<button (click)="validateForm()">submit</button>

</div>
<p class="error">{{error}}</p>
<p class="success">{{sucess}}</p>
form-validation.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-form-validation',
templateUrl: './form-validation.component.html',
styleUrl: './form-validation.component.css',
})
export class FormValidationComponent {
username: string = '';
password: string = '';
email: string = '';
error: string = '';
sucess: string = '';

validateForm = (): boolean => {


if (this.username == '' || this.password == '' || this.email ==
'') {
this.error = 'Please fill all the fields';
return false;
16

} else {
if (this.username.length < 8) {
this.error = 'Username must be atleast 8 characters';
return false;
}
if (this.password.length < 8) {
this.error = 'Password must be atleast 8 characters';
return false;
}
if (!this.email.includes('@')) {
this.error = 'Email must be contain @';
return false;
}
this.username = '';
this.password = '';
this.email = '';
this.error = '';
this.sucess = 'Form validation Success!';
return true;
}
return false;
};
}
17

11.Program to demonstrate the ngif, ngfor, ngswitch statements.

Code:
course.component.html

<h2>Directives-Demo</h2>
<div>
<button (click)="changeUser()">teacher</button>
<button (click)="changeUser()">student</button>
</div>
<div>

<h2 *ngIf="user=='STUDENT'">Welcome STUDENT🎒</h2>

<h2 *ngIf="user=='TEACHER'">Welcome TEACHER📚</h2>


18

</div>
<div>
<ul *ngFor="let course of courses">
<li>{{course}}</li>
</ul>
</div>
<div [ngSwitch]="user">
<p *ngSwitchCase="'STUDENT'">you can STUDY any above
subject!</p>
<p *ngSwitchCase="'TEACHER'">you can TEACH any above
subject!</p>
<p *ngSwitchDefault>invalid!</p>

</div>

course.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-course',
templateUrl: './course.component.html',
styleUrl: './course.component.css',
})
export class CourseComponent {
user: string = 'STUDENT';
courses: Array<string> = ['MCA', 'MBA-DM', 'MBA'];
changeUser = () => {
this.user == 'STUDENT' ? (this.user = 'TEACHER') : (this.user =
'STUDENT');
};
}

Output:
19

12.Create angular project which will demonstrate the usage of component directive,
structural directive and attribute directives
Code:
<h2>Directives-Demo</h2>
<div>
<!-- attribute directives -->

<button (click)="changeUser()">teacher</button>
<button (click)="changeUser()">student</button>
</div>
<div>
<!-- structural directives -->

<h2 *ngIf="user=='STUDENT'">Welcome STUDENT🎒</h2>

<h2 *ngIf="user=='TEACHER'">Welcome TEACHER📚</h2>

</div>
<div>
<ul *ngFor="let course of courses">
<li>{{course}}</li>
</ul>
</div>
<div [ngSwitch]="user">
<p *ngSwitchCase="'STUDENT'">you can STUDY any above subject!</p>
<p *ngSwitchCase="'TEACHER'">you can TEACH any above subject!</p>
<p *ngSwitchDefault>invalid!</p>

</div>
20

course.component.ts
import { Component } from '@angular/core';
//components-directives
@Component({
selector: 'app-course',
templateUrl: './course.component.html',
styleUrl: './course.component.css',
})
export class CourseComponent {
user: string = 'STUDENT';
courses: Array<string> = ['MCA', 'MBA-DM', 'MBA'];
changeUser = () => {
this.user == 'STUDENT' ? (this.user = 'TEACHER') : (this.user =
'STUDENT');
};
}
app.component.ts
<!-- component directives -->
<app-course />
<router-outlet />

Output:
13. Create angular project which has HTML template and handle the click event on click of
the
button (Installation of Angular and Bootstrap 4 CSS Framework)
Code:
app.component.html

<button (click)="popup()">click me!</button>


<router-outlet />

app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {
title = 'assignment';
21

popup = () => {
alert('hello');
};}

Output:

14.Program for basic operations, array and user interface handling.


Code:
arr.component.html

<h2>basic-array operations</h2>
<div class="arr-base">
<div class="arr">
<p *ngFor="let number of numbers">{{ number }}</p>

</div>
<div>
<input type="text" [(ngModel)]="num">

</div>
<div>
<button (click)="addElement()">Add Element</button>
<button (click)="removeElement()">Remove Element</button>
<button (click)="clearArray()">Clear Array</button>
</div>

</div>

arr.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-basic-arr',
templateUrl: './basic-arr.component.html',
22

styleUrl: './basic-arr.component.css',
})
export class BasicArrComponent {
num: number = 0;
numbers: number[] = [1, 2, 3, 4, 5];

addElement() {
this.numbers.push(this.num);
}

removeElement() {
this.numbers.pop();
}

clearArray() {
this.numbers = [];
}
}

Output:
23

15. Program to demonstrate session management using various techniques.


Code:
<?php session_start();

$_SESSION['username'] = 'rohitadhari';
$_SESSION['role'] = 'admin';

echo "username: ", $_SESSION['username'], "<br>";


echo "role: ", $_SESSION['role'], "<br>";
echo "<br>";
if (isset($_SESSION['username'])) {
echo "username in session", "<br>";
} else {
echo "username not in session";
}
echo "clearing session...", "<br>";
unset($_SESSION['role']);

if (isset($_SESSION['role'])) {
echo "role in session";
} else {
echo "role not in session";
}

session_destroy();

?>
24

Output:

16.Program to perform the CRUD Operations using PHP Script.


Code:
Config.php
<?php
$servername="localhost";
$username="root";
$password="";
$dbname="mydb";
$conn=new mysqli($servername, $username, $password, $dbname);
if($conn->connect_error){
die("connection Failed".$conn->connect_error);
}

?>
Create.php
<?php
include "config.php";
if(isset($_POST['submit'])){
$first_name = $_POST['firstname'];
$last_name = $_POST['lastname'];
$email = $_POST['email'];
$password = $_POST['password'];
$gender = $_POST['gender'];

$sql="INSERT INTO users (firstname, lastname, email, password, gender)


VALUES ('$first_name', '$last_name', '$email', '$password', '$gender')";

$result =$conn->query($sql);
25

if($result==TRUE){
echo "<script>alert('Record inserted successfully');</script>";
}
else{
echo"Error" .$sql ."<br>".$conn->error;
}
$conn->close();

}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>sign up form</h1>

<form action="" method="POST">

<input type="text" name="firstname">


<input type="text" name="lastname">
<input type="text" name="email">
<input type="text" name="password">
<input type="radio" name="gender" value="Male">male
<input type="radio" name="gender" value="Female">female
<input type="submit" name="submit" value="submit">

</form>

</body>
</html>

View.php
<?php

include "config.php";
$sql="SELECT * FROM users";
$result=$conn->query($sql);
26

?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>View Demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">
</head>
<body>
<div class="container">

<div class="table-primary">
<thead>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Gender</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
if ($result->num_rows>0)
{
while($row=$result->fetch_assoc()){

?>

<tr>
<td><?php echo $row['id'];?></td>
<td><?php echo $row['firstname'];?></td>
<td><?php echo $row['lastname'];?></td>
<td><?php echo $row['email'];?></td>
<td><?php echo $row['gender'];?></td>
<td><a class="btn btn-info" href="update.php?id=<?php echo
$row['id'];?>">edit</a>
<td><a class="btn btn-danger" href="delete.php?id=<?php echo
$row['id'];?>">delete</a></td>
27

</tr>
<?php }
}
?>
</tbody>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min
.js" integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>

Update.php
<?php
include "config.php";

if(isset($_POST['update'])){
$first_name = $_POST['firstname'];
$last_name = $_POST['lastname'];
$email = $_POST['email'];
$password = $_POST['password'];
$gender = $_POST['gender'];
$user_id = $_GET['id'];

$sql = "UPDATE users


SET firstname = '$first_name',
lastname = '$last_name',
email = '$email',
password = '$password',
gender = '$gender'
WHERE id = $user_id";

$result=$conn->query($sql);
}

if($result=TRUE){
echo "<script>alert('Record inserted successfully');</script>";

}else{
echo"Error" .$sql ."<br>".$conn->error;
}
28

if(isset($_GET['id'])){
$user_id=$_GET['id'];
$sql = "SELECT * FROM users WHERE id = '$user_id'";

$result=$conn->query($sql);

if($result->num_rows > 0){


while($row=$result->fetch_assoc()){
$first_name = $row['firstname'];
$last_name = $row['lastname'];
$email = $row['email'];
$password = $row['password'];
$gender = $row['gender'];
$id = $row['id'];
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Personal Information</h1>

<form action="" method="POST">

<input type="text" name="firstname" value="<?php echo $first_name?>">


<input type="hidden" name="user_id"value="<?php echo $first_name?>">
<input type="text" name="lastname"value="<?php echo $first_name?>">
<input type="text" name="email"value="<?php echo $first_name?>">
<input type="text" name="password" value="<?php echo $first_name?>">
<input type="radio" name="gender" value="Male"value="<?php echo $first_name?
>">male
<input type="radio" name="gender" value="Female"value="<?php echo $first_name?
>">female
<input type="submit" name="update" value="update">
29

</form>
</body>
</html>

<?php
}else{

}
}

?>

Delete.php
<?php
include('config.php');

if(isset($_GET['id'])){
$user_id=$_GET['id'];

$sql = "DELETE FROM users WHERE id = $user_id";

$result=$conn->query($sql);

if($result==TRUE){
echo "<script>alert('Record inserted successfully');</script>";
}else{
echo"Error" .$sql ."<br>".$conn->error;
}

?>

Output:
30

17.Using element display a video on the page. Provide Forward and Rewind buttons. Clicking
on Forward button should take the video ahead by 10s. Clicking on Rewind button should
take the video back by 10s. Also provide Change Video button. On clicking of this button,
change the video to some other video.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Video Player</title>
31

</head>
<body>
<video id="myVideo" width="640" height="360" controls>
<source src="HP.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><br><br>

<button onclick="rewindVideo()">Rewind -10s</button>


<button onclick="forwardVideo()">Forward +10s</button>
<button onclick="changeVideo()">Change Video</button>

<script>
var video = document.getElementById("myVideo");

function rewindVideo() {
video.currentTime -= 10;
}

function forwardVideo() {
video.currentTime += 10;
}

function changeVideo() {
video.src = "HP.mp4"; // Change the video source to a
new video file
video.load(); // Reload the video element
}
</script>
</body>
</html>
32

Output:

18. Class Test was recently held in your college. After correction of answer sheets, following
cut-offs were fixed by the academic council. Write a php program to implement the same
using decision making and flow control mechanisms. Assume necessary values of score for
executing your program. a. Students scoring 0 marks will be listed as Ab (Absent category). b.
Students scoring between 1 and 10 will be listed as Pp (Performing Poorly category). c.
Students scoring between 11 and 15 will be listed as Rt (Retest Necessary category). d.
Students scoring between 16 and 20 will be listed as Gp (Good Performers category). e.
Students scoring above 20 till 25 will be listed as O (Outstanding category). Continuing with
the above example, depending on student’s category show him a suitable message, a.
Student of Ab category should see “You were Absent. Meet class coordinator” b. Student of
Pp category should see, “ Your performance is poor. Solve whole paper again and submit.” c.
Student of Rt category should see, “You have scored less. Appear for a retest”. d. Student of
Gp Category should see, “ You have done well. Can do better.” e. Student of O category
should see, “Outstanding performance. Keep it up!”.
Code:
<?php

$score = 22;

if ($score == 0) {
$category = "Ab";
$message = "You were Absent. Meet class coordinator.";
} elseif ($score >= 1 && $score <= 10) {
$category = "Pp";
33

$message = "Your performance is poor. Solve whole paper again


and submit.";
} elseif ($score >= 11 && $score <= 15) {
$category = "Rt";
$message = "You have scored less. Appear for a retest.";
} elseif ($score >= 16 && $score <= 20) {
$category = "Gp";
$message = "You have done well. Can do better.";
} elseif ($score > 20 && $score <= 25) {
$category = "O";
$message = "Outstanding performance. Keep it up!";
} else {
$category = "Invalid";
$message = "Invalid score.";
}

echo "Your score: $score <br>";


echo "Category: $category <br>";
echo "Message: $message";
?>

Output:

19. Using HTML and PHP develop a calculator application. Implement GET/POST and User
Defined Functions to achieve this functionality. The HTML form should contain two text
boxes for accepting two numbers and one text box to display result of calculation. Also
provide one button for + (addition), one for – (subtraction), one for *(multiplication) and one
for /(division). On click of each button respective function should be called and result of the
calculation should be displayed in result text box.
Code:
<!DOCTYPE html>

<html lang="en">
<head>
34

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Calculator</title>
</head>
<body>
<h2>Simple Calculator</h2>
<form action="" method="post">
<label for="num1">Number 1:</label>
<input type="text" id="num1" name="num1" required><br><br>

<label for="num2">Number 2:</label>


<input type="text" id="num2" name="num2" required><br><br>

<label for="result">Result:</label>
<input type="text" id="result" name="result"
readonly><br><br>

<input type="submit" name="add" value="+">


<input type="submit" name="subtract" value="-">
<input type="submit" name="multiply" value="*">
<input type="submit" name="divide" value="/"><br><br>
</form>

<?php

function add($num1, $num2) {


return $num1 + $num2;
}

function subtract($num1, $num2) {


return $num1 - $num2;
}

function multiply($num1, $num2) {


return $num1 * $num2;
}

function divide($num1, $num2) {


if ($num2 == 0) {
return "Cannot divide by zero";
} else {
return $num1 / $num2;
}
}

if ($_SERVER["REQUEST_METHOD"] == "POST") {
$num1 = $_POST['num1'];
35

$num2 = $_POST['num2'];

if (isset($_POST['add'])) {
$result = add($num1, $num2);
} elseif (isset($_POST['subtract'])) {
$result = subtract($num1, $num2);
} elseif (isset($_POST['multiply'])) {
$result = multiply($num1, $num2);
} elseif (isset($_POST['divide'])) {
$result = divide($num1, $num2);
}

echo '<script>document.getElementById("result").value = "' .


$result . '";</script>';
}?>

</body>
</html>

Output:

20. Using element display a video on the page. Provide Forward and Rewind buttons.
Clicking on Forward button should take the video ahead by 10s. Clicking on Rewind button
36

should take the video back by 10s. Also provide Change Video button. On clicking of this
button, change the video to some other video.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Video Player</title>
</head>
<body>
<video id="myVideo" width="640" height="360" controls>
<source src="HP.mp4" type="video/mp4">
Your browser does not support the video tag.
</video><br><br>

<button onclick="rewindVideo()">Rewind -10s</button>


<button onclick="forwardVideo()">Forward +10s</button>
<button onclick="changeVideo()">Change Video</button>

<script>
var video = document.getElementById("myVideo");

function rewindVideo() {
video.currentTime -= 10;
}

function forwardVideo() {
video.currentTime += 10;
}

function changeVideo() {
video.src = "new_video.mp4"; // Change the video source
to a new video file
video.load(); // Reload the video element
}
</script>
</body>
</html>

Output:
37

21. Write a PHP program to check armstrong number.


Code:
<?php
function isArmstrong($number) {
$num_digits = strlen((string)$number);
$sum = 0;
$temp = $number;

while ($temp > 0) {


$digit = $temp % 10;
$sum += pow($digit, $num_digits);
$temp = (int)($temp / 10);
}

return $number == $sum;


}

$number = 153;
if (isArmstrong($number)) {
echo "$number is an Armstrong number.";
} else {
echo "$number is not an Armstrong number.";
}
?>
38

Output:

22.Write a PHP program to reverse given string.


Code:
<?php
function reverseString($str) {
$length = strlen($str);
$reversedString = '';

for ($i = $length - 1; $i >= 0; $i--) {


$reversedString .= $str[$i];
}

return $reversedString;
}

$inputString = "Hello, world!";


$reversedString = reverseString($inputString);
echo "Original string: $inputString";
echo "\n Reversed string: $reversedString";
?>

Output:
39

23. Write a PHP program to find if the given year is leap year or not.
Code:
<?php
function isLeapYear($year) {
if (($year % 4 == 0 && $year % 100 != 0) || ($year % 400 == 0))
{
return true;
} else {
return false;
}
}

$year = 2024;
if (isLeapYear($year)) {
echo "$year is a leap year.";
} else {
echo "$year is not a leap year.";
}
?>

Output:

24. Write a PHP program to create and retrieve values from sessions
Code:
<?php

session_start();

$_SESSION['username'] = 'JohnDoe';
$_SESSION['email'] = 'johndoe@example.com';

$username = $_SESSION['username'];
$email = $_SESSION['email'];
40

echo "Username: $username";


echo "Email: $email ";

unset($_SESSION['email']);

session_destroy();
?>

Output:

25. Write a PHP program to demonstrate session and cookie.


Code:
<?php

session_start();

$_SESSION['username'] = 'JohnDoe';

$cookie_name = "user";
$cookie_value = "JaneDoe";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/");

$username = $_SESSION['username'];

$cookie_value = isset($_COOKIE[$cookie_name]) ?
$_COOKIE[$cookie_name] : "";

echo "Session Username: $username <br>";


echo "Cookie User: $cookie_value <br>";

session_unset();
41

session_destroy();
?>

Output:

Vous aimerez peut-être aussi