Practical: Savitribai Phule Pune Uiversity

SAVITRIBAI PHULE PUNE UIVERSITY
Siddhant Institute of Computer Application

PUNE-411 041
PRACTICAL
Student Name: Jagruti Bhor.
MCA (2nd Sem)
Roll No. 130

1. Program to implement audio and video features for your
web page
Video:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="viideo.mp4" type="video/mp4">
<source src="viideo.WebM " type="video/WebM">
Your browser does not support the video tag.
</video>
</body>
</html>
Audio:
<!DOCTYPE html>
<html>
<body>
<h1>The audio element</h1>
<p>Click on the play button to play a sound:</p>
<audio controls>
<source src="ThousandYears.mp3" type="audio/wav">
<source src="ThousandYears.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
2. program to design form using HTML5 elements,
attributes and semantics.
<!DOCTYPE html>
<html>
<body>
<h1>LOGIN PAGE</h1>
<form><br>
<label for="fname">Email Id: <br>
<input type="text" id="fname"><br>
<label for="lname">Password: <br>

<input type="text" id="lname"><br>
<input type="submit" value="Submit">

</form>
<p>If you click the "Submit" button, the form-data will be
sent to a page called "/action_page.php".</p>
</body>
</html>
3. Program using Canvas and svg
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"width="200" height="100"
style="border:1px solid black;"></canvas>
<svg width="400" height="210" >
<text x="0" y="20" fill="red"
transform="rotate(30,20,40)"> I Love SVG!</text>
</svg>
</body>
</html>
4. Program to demonstrate external and internal style in the

web page using font,text,background,borders,opacity and other
CSS 3 properties.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external
stylesheet, and internal style</p>
</body>
</html>
5. Implement Transformation using Translation , Rotation, And
Scaling in your web page
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
width: 150px;
height: 80px;
background-color: yellow;
-ms-transform: rotate(20deg); /* IE 9 */
transform: rotate(20deg);
}
div.b {
width: 150px;
height: 80px;
-ms-transform: skewY(20deg); /* IE 9 */
transform: skewY(20deg);
}
div.c {
width: 150px;
height: 80px;
-ms-transform: scaleY(1.5); /* IE 9 */
transform: scaleY(1.5);
}
</style>
</head>
<body>
<h1>The transform Property</h1>
<h2>transform: rotate(20deg):</h2>
<div class="a">Hello World!</div>
<br>
<h2>transform: skewY(20deg):</h2>
<div class="b">Hello World!</div>
<br>
<h2>transform: scaleY(1.5):</h2>
<div class="c">Hello World!</div>
</body>
</html>
6. Program to show current date and time using user defined
model.
import java.time.LocalDateTime; // import the LocalDateTime

class
public class Main {

public static void main(String[] args) {
LocalDateTime myObj = LocalDateTime.now();
System.out.println(myObj);
}
}
7. Program using built-in modules to split the query string into
readable parts
var url = require('url');
var adr = 'http://localhost:8080/default.htm?

year=2017&month=february';
//Parse the address:
var q = url.parse(adr, true);
/*The parse method returns an object containing url properties*/
console.log(q.host);
console.log(q.pathname);
console.log(q.search);
/*The query property returns an object with all the querystring

parameters as properties:*/
var qdata = q.query;
console.log(qdata.month);
8. Program using NPM which will convert entered string into
either case
<!DOCTYPE html>
<html>
<body>
<p>Click the button to convert the string to uppercase

letters.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "Hello World!";
var res = str.toUpperCase();
document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>
9. Write a program to create a calculator using node JS.
//route - sum
server.route({
method: 'GET',
path: '/calculator/sum/{num1}+{num2}',
handler: function (request, h) {
const num1 = parseInt(request.params.num1);

var data = {
answer: num1 + num2
};
return data;
}
});
Subtraction:
//route - subtraction
server.route({
method: 'GET',
path: '/calculadora/sub/{num1}-{num2}',
var data = {
resposta: num1 - num2
};
return data;
}
});
Multiplication:
//route - multiplication
server.route({
method: 'GET',
path: '/calculadora/multi/{num1}*{num2}',

var data = {
resposta: num1 * num2
};
return data;
}
});
Division:
//route - division
server.route({
method: 'GET',
path: '/calculadora/div/{num1}/{num2}',

var data = {
resposta: num1 / num2
};
return data;
}
});
}
10. Write program for from validation in Angular.

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang
ular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>

<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
11. Program to demonstrate the ngif, ngfor, ngswithch

statements.
<!DOCTYPE html>
<html>
<script
<body ng-app="">
My favorite topic is:

<select ng-model="myVar">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
<hr>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</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-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>
12. Create angular project which will demonstrate the usge of

component directive ,structural directive and attribute
directives
<!DOCTYPE html>
<html>
<script
<body>
<div ng-app="" ng-init="firstName='John'">

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
13. Create angular project which has html template and handle
the click event on click of the button
<!DOCTYPE html>
<html>
<script
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.products = ["Milk", "Bread", "Cheese"];
$scope.addItem = function () {
$scope.products.push($scope.addMe);
}
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">

<ul>
<li ng-repeat="x in products">{{x}}</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
<p>Write in the input field to add items.</p>
</body>
</html>
14. Program for basic operations, array and user interface

handling
<!DOCTYPE html>
<html>
<body>
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] . ".";
?>
</body>
</html>
15. Program to demonstrate session management using various
techniques.
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// Echo session variables that were set on previous page
echo "Favorite color is " . $_SESSION["favcolor"] . ".<br>";
echo "Favorite animal is " . $_SESSION["favanimal"] . ".";
?>
</body>
</html>
16. Program to perform the CRUD Operations using PHP Script.

Creating a sample Database table:
CREATE TABLE `customers` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 100 ) NOT NULL ,
`email` VARCHAR( 100 ) NOT NULL ,
`mobile` VARCHAR( 100 ) NOT NULL
) ENGINE = INNODB;
Connecting to Database
<?php
class Database
{
private static $dbName = 'crud_tutorial' ;
private static $dbHost = 'localhost' ;
private static $dbUsername = 'root';
private static $dbUserPassword = 'root';

private static $cont = null;

public function __construct() {
die('Init function is not allowed');
}

public static function connect()
{
// One connection through whole application
if ( null == self::$cont )
{
try
{
self::$cont = new PDO( "mysql:host=".self::
$dbHost.";"."dbname=".self::$dbName, self::$dbUsername, self::
$dbUserPassword);
}
catch(PDOException $e)
{
die($e->getMessage());
}
}
return self::$cont;
}

public static function disconnect()
{
self::$cont = null;
}
}
Create a Twitter Bootstrap powered grid

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
<div class="row">
<h3>PHP CRUD Grid</h3>
</div>
<div class="row">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Mobile Number</th>
</tr>
</thead>
<tbody>
<?php
include 'database.php';
$pdo = Database::connect();
$sql = 'SELECT * FROM customers ORDER BY id DESC';
foreach ($pdo->query($sql) as $row) {
echo '<tr>';
echo '<td>'. $row['name'] . '</td>';
echo '<td>'. $row['email'] . '</td>';
echo '<td>'. $row['mobile'] . '</td>';
echo '</tr>';
}
Database::disconnect();
?>
</tbody>
</table>
</div>
</div> 
</body>
</html>

Practical: Savitribai Phule Pune Uiversity

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Practical: Savitribai Phule Pune Uiversity

Uploaded by

Copyright:

Available Formats

SAVITRIBAI PHULE PUNE UIVERSITY

Siddhant Institute of Computer Application

Student Name: Jagruti Bhor.

MCA (2nd Sem)

Roll No. 130

<label for="lname">Password: <br>

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

4. Program to demonstrate external and internal style in the

<h1>The transform Property</h1>

import java.time.LocalDateTime; // import the LocalDateTime

public class Main {

var url = require('url');

var adr = 'http://localhost:8080/default.htm?

//Parse the address:

var q = url.parse(adr, true);

/*The parse method returns an object containing url properties*/

/*The query property returns an object with all the querystring

var qdata = q.query;

<p>Click the button to convert the string to uppercase

<button onclick="myFunction()">Try it</button>

const num1 = parseInt(request.params.num1);

const num1 = parseInt(request.params.num1);

const num1 = parseInt(request.params.num1);

10. Write program for from validation in Angular.

<p>Try writing in the input field:</p>

<p>The input's valid state is:</p>

11. Program to demonstrate the ngif, ngfor, ngswithch

My favorite topic is:

<p>The ng-switch directive hides and shows HTML sections

12. Create angular project which will demonstrate the usge of

<div ng-app="" ng-init="firstName='John'">

<div ng-app="myShoppingList" ng-controller="myCtrl">

<p>Write in the input field to add items.</p>

14. Program for basic operations, array and user interface

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

Create a Twitter Bootstrap powered grid

You might also like

/The parse method returns an object containing url properties/