Scribd
Upload
54 views27 pages

Final 336

1) The document describes several AngularJS practical examples including using AngularJS to get input from a search box and display the result when the enter key is pressed. 2) It also describes building a shopping list application where users can add and remove items from the list using AngularJS features. 3) The document further discusses PHP practical examples like form submission and data retrieval on the server side, including functions, and developing applications using sessions and cookies.

Uploaded by

pranjalkemkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
54 views27 pages

Final 336

1) The document describes several AngularJS practical examples including using AngularJS to get input from a search box and display the result when the enter key is pressed. 2) It also describes building a shopping list application where users can add and remove items from the list using AngularJS features. 3) The document further discusses PHP practical examples like form submission and data retrieval on the server side, including functions, and developing applications using sessions and cookies.

Uploaded by

pranjalkemkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

Web Technology SEM - 5 IU2241231336

Practical 4.1

Aim: Using Angular JS, user get input value search box and enter it in AngularJS
component using Enter key.
HTML CODE:
<!DOCTYPE html>

<html ng-app="myApp">

<head>

<title>AngularJS Enter Key Example</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

</head>

<body ng-controller="MyController">

<input type="text" ng-model="searchText" ng-keypress="searchOnEnter($event)"


placeholder="Enter search term and press Enter">

<div>

<strong>Search Result:</strong> {{ searchResult }}

</div> <script> var app =

angular.module('myApp', []);

app.controller('MyController', function ($scope) {

$scope.searchText = '';

$scope.searchResult = '';

$scope.searchOnEnter = function ($event) {

if ($event.keyCode === 13) {

$scope.searchResult = $scope.searchText;

};

});

</script>

</body>

INDU UNIVERSITY CSE E2 1


Web Technology SEM - 5 IU2241231336

</html>

OUTPUT:

(Before pressing Enter)

(After pressing Enter)

INDU UNIVERSITY CSE E2 2


Web Technology SEM - 5 IU2241231336

Practical 4.2

AIM :Using Angular JS features make a shopping list/To-do list where you can
add or remove items.
HTML CODE:
<!DOCTYPE html>

<html ng-app="myApp">

<head>

<title>Shopping List / To-Do List</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

</head>

<body ng-controller="ListController">

<h1>Shopping List / To-Do List</h1>

<div>

<input type="text" ng-model="newItem" placeholder="Add an item">

<button ng-click="addItem()">Add</button>

</div>

<ul>

<li ng-repeat="item in items">

{{ item }}

<button ng-click="removeItem($index)">Remove</button>

</li>

</ul> <script> var app =

angular.module('myApp', []);

app.controller('ListController', function ($scope) {

$scope.items = [];

$scope.newItem = '';

INDU UNIVERSITY CSE E2 3


Web Technology SEM - 5 IU2241231336

$scope.addItem = function () {

if ($scope.newItem.trim() !== '') {

$scope.items.push($scope.newItem);
$scope.newItem = '';

};

$scope.removeItem = function (index) {

$scope.items.splice(index, 1);

};

});

</script>

</body>

</html>

OUTPUT:

(Before adding Apple)

(After adding Apple and before adding Mango)

INDU UNIVERSITY CSE E2 4


Web Technology SEM - 5 IU2241231336

(After removing Apple)

INDU UNIVERSITY CSE E2 5


Web Technology SEM - 5 IU2241231336

Practical-5.1
AIM: PHP based web application to understand data retrieval on server side.

Code:
Index.html:
<html>
<head>
</head>
<body>
<form method="get" name="reg" action="reg1.php" enctype="text/plain">
<fieldset align="center">
<legend>Registration form</legend>
<table border="0" height="*" width="*" cellspacing="10" cellpadding="5" align="center">
<tr>
<td>Enter username</td>
<td>
<input type="text" name="uname" placeholder="Enter username">
</td></tr>
<tr>
<td>Enter password</td>
<td>
<input type="password" name="pwd" placeholder="Enter password" required>
</td></tr>
<tr>
<td>Enter email</td>
<td>
<input type="email" name="email" placeholder="Enter Email" required>
</td></tr>
<tr>
<td>Contact Number</td>

INDU UNIVERSITY CSE E2 6


Web Technology SEM - 5 IU2241231336

<td>
<input type="number" name="mob" size="10" required>
</td></tr>
<tr>
<td>DOB</td>
<td>
<input type="date" name="dob">
</td></tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gen" value="Male" checked> Male
<input type="radio" name="gen" value="Female"> Female
<input type="radio" name="gen" value="Other"> Other
</td>
</tr>
<tr>
<td>Select city</td>
<td>
<select name="city" multiple>
<option value="">Select city</option>
<option value="amd">Ahmedabad</option>
<option value="srt">Surat</option>
<option value="rkt">Rajkot</option>
<option value="mum">Mumbai</option>
<option value="bng">Banglore</option>
<option value="kol">Kolkata</option>
</td></tr>
<tr>
<td>Select state</td>
<td>
INDU UNIVERSITY CSE E2 7
Web Technology SEM - 5 IU2241231336

<select name="state" multiple>


<option value="">Select state</option>
<option value="guj">Gujarat</option>
<option value="mah">Maharashtra</option>
<option value="kar">Karnataka</option>
<option value="wb">West Bengal</option>
</td></tr>
<tr>
<td>Address</td>
<td>
<textarea name="address" rows="10" col="30" >
</textarea>
</td></tr>
<tr>
<td>Hobbies</td>
<td>
<input type="checkbox" name="hob" value="Cricket"> Cricket
<input type="checkbox" name="hob" value="Reading"> Reading
<input type="checkbox" name="hob" value="Music"> Music
</td></tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="submit" value="Register">
<input type="reset" name="reset" value="Reset">
</td></tr>
</table>
</fieldset>
</form>
</body>
</html>

INDU UNIVERSITY CSE E2 8


Web Technology SEM - 5 IU2241231336

Reg1.php:
<?php
$uname = $_GET["uname"];
$pwd = $_GET["pwd"];
$email = $_GET["email"];
$mob = $_GET["mob"];
$dob = $_GET["dob"];
$gen = $_GET["gen"];
$city = $_GET["city"];
$state = $_GET["state"];
$address = $_GET["address"]; $hob = $_GET["hob"]; echo "<table border cellspacing='10px'
cellpadding='10px' align=center>
<caption><h1>Result</h1></caption>
<tr>
<td>Name</td>
<td>$uname</td>
<tr>
<tr>
<td>Email</td>
<td>$email</td>
</tr>
<tr>
<td>Mobile number</td>
<td>$mob</td>
</tr>
<tr>
<td>DOB</td>
<td>$dob</td>
</tr>
<tr>
<td>Gender</td>

INDU UNIVERSITY CSE E2 9


Web Technology SEM - 5 IU2241231336

<td>$gen</td>
</tr>
<tr>
<td>City</td>
<td>$city</td>
</tr>
<tr>
<td>State</td>
<td>$state</td>
</tr>
<tr>
<td>Address</td>
<td>$address</td>
</tr>
</table>
?>

INDU UNIVERSITY CSE E2 10


Web Technology SEM - 5 IU2241231336

Output:

INDU UNIVERSITY CSE E2 11


Web Technology SEM - 5 IU2241231336

Practical-5.2
AIM: Include, require, date functions in php.

Code:
<?php include 'header.php';
require 'con.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SignUp Form</title>
</head>
<body>
<form action="insert.php" method="post">
<label for="email">Email: </label>
<input type="email" name="email" id="email"><p>
<label for="password">Password: </label>
<input type="password" name="password" id="password"><p>
<input type="submit" value="Sumbit">
</form>
</body>
</html>

header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

INDU UNIVERSITY CSE E2 12


Web Technology SEM - 5 IU2241231336

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>Header File</title>
</head>
<body>
<h1>Welcome To SignUp Page</h1>
</body>
</html>

con.php
<?php
$conn = mysqli_connect('localhost', 'root', '', 'demo');
if (!$conn)
{
die('Connection failed: ' . mysqli_connect_error());
}
else{
// echo "Connection Pass";
}
?>

insert.php
<?php
require 'con.php';
$email = $_REQUEST['email'];
$password = $_REQUEST['password'];
$signup_date = date("d/m/Y");
$sql = "INSERT INTO signup (email, password, date) VALUES ('$email', '$password',
'$signup_date')";
if ($conn->query($sql) === TRUE)
{
echo "New record created successfully";

INDU UNIVERSITY CSE E2 13


Web Technology SEM - 5 IU2241231336

}
?>
Output:

INDU UNIVERSITY CSE E2 14


Web Technology SEM - 5 IU2241231336

Practical-5.3
AIM: Develop PHP web application using session and cookie.

Code:
Using session:
Index1.html:
<form method="get" action="session.php">
<input type="text" name="name">
<input type="submit" name="submit" value="Register">
</form>

s1.php :
<?php
session_start(); echo "Hello ".$_SESSION['name'];
?>
<br>
<a href="destroy.php">Logout</a>
session.php : <?php
session_start(); if(isset($_REQUEST['name']) &&
$_REQUEST['name']!=null)
{
$_SESSION['name']=$_REQUEST['name']; header('Location:s1.php');
}
else
{
header('Location:index1.php');
}
?>

destroy.php:

INDU UNIVERSITY CSE E2 15


Web Technology SEM - 5 IU2241231336

<?php
session_start();
session_destroy();
header('Location:index1.php');
?>
Output:

INDU UNIVERSITY CSE E2 16


Web Technology SEM - 5 IU2241231336

Using cookie :
index2.html :
<form method="get" action="session1.php">
<input type="text" name="name">
<input type="submit" name="submit" value="Register">
</form>

c1.php :
<?php
session_start(); echo "Hello ".$_COOKIE['name'];
?>
<br>
<a href="destroy1.php">Logout</a>

session1.php:
<?php
if(isset($_REQUEST['name']) && $_REQUEST['name']!=null)
{
$VALUE=$_REQUEST['name'];
setcookie("name",$VALUE,time()+3600);
header('Location:c1.php');

}
else
{
header('Location:index2.php');
}
?>

destroy1.php :
<?php setcookie("uname","",time()-3600);
INDU UNIVERSITY CSE E2 17
Web Technology SEM - 5 IU2241231336

header('Location:index2.php');
?>
Output:

INDU UNIVERSITY CSE E2 18


Web Technology SEM - 5 IU2241231336

Practical-5.4
AIM: Understand PHP MyAdmin.
phpMyAdmin is a free and open-source web-based administration tool for managing MySQL
and MariaDB databases. It provides a user-friendly graphical interface that simplifies database
administration tasks, making it accessible to both beginners and experienced database
administrators. In this document, we will explore the key features and functionalities of
phpMyAdmin, its installation, and common use cases.

Table of Contents

1. Installation
• Web-based Installation
• Manual Installation
• Configuration

2. User Interface
• Dashboard
• Navigation Pane
• Main Work Area

3. Database Operations
• Creating Databases
• Creating Tables
• Importing and Exporting Data
• Querying Databases

4. User Management
• Creating Users
• Setting Privileges

5. Server Status and Variables

INDU UNIVERSITY CSE E2 19


Web Technology SEM - 5 IU2241231336

6. Advanced Features
• SQL Query Editor
• Designer Tool
• Exporting Database as SQL

7. Security Considerations

□ Securing phpMyAdmin

1. Installation :Web-based Installation


Many web hosting providers offer phpMyAdmin as part of their hosting packages, allowing
users to install it with a few clicks through a control panel like cPanel or Plesk.
Manual Installation:
For manual installation, you can download the latest version of phpMyAdmin from the official
website (https://www.phpmyadmin.net/downloads/) and follow the installation instructions
provided in the documentation.

Configuration :
After installation, you may need to configure phpMyAdmin to connect to your MySQL or
MariaDB server. You can set up database credentials and other settings in the config.inc.php
file.

2. User Interface Dashboard:


The phpMyAdmin dashboard provides an overview of your databases, server status, and recent
activity. It offers quick access to common tasks.
Navigation Pane:
On the left side of the interface, you'll find a navigation pane that displays the list of databases,
tables, and other database objects. This pane makes it easy to switch between different databases
and access their tables and data. Main Work Area:
The main work area is where you perform actions like creating, editing, and deleting tables and
records. It also houses features like the SQL query editor and database designer.

3. Database Operations

INDU UNIVERSITY CSE E2 20


Web Technology SEM - 5 IU2241231336

Creating Databases
You can create new databases directly from phpMyAdmin. Provide a name and choose a
character set and collation for the database.
Creating Tables:
Inside a database, you can create tables with specific columns, data types, and constraints.
phpMyAdmin offers a visual table designer for this purpose.
Importing and Exporting Data:
You can import and export data in various formats, including SQL, CSV, and Excel. This makes
it easy to back up your databases or transfer data between systems.
Querying Databases:
phpMyAdmin includes a SQL query editor where you can run SQL queries to retrieve, update,
or delete data from your databases. It supports syntax highlighting and auto-completion.

4. User Management Creating Users:


Database users can be created and managed through phpMyAdmin. You can specify their
permissions and restrict access to specific databases or tables.
Setting Privileges:
phpMyAdmin allows you to assign various privileges to users, including SELECT, INSERT,
UPDATE, DELETE, and more. You can also grant administrative privileges like CREATE and
DROP.

5. Server Status and Variables:


You can monitor the status of your MySQL or MariaDB server through phpMyAdmin. It
displays server information, uptime, and configuration variables. This information is valuable
for troubleshooting and optimization.

6. Advanced Features SQL Query Editor:


Advanced users can utilize the SQL query editor for writing and executing complex SQL
statements. This is particularly useful for tasks that go beyond the capabilities of the graphical
interface.
Designer Tool: phpMyAdmin includes a designer tool that allows you to create and visualize the
structure of your database with diagrams. It helps you understand and manage complex
relationships between tables. Exporting Database as SQL:
You can export your entire database or specific tables as SQL files. This is essential for creating
backups or migrating databases to other servers.

INDU UNIVERSITY CSE E2 21


Web Technology SEM - 5 IU2241231336

7. Security Considerations Securing phpMyAdmin:


To ensure the security of your phpMyAdmin installation, you should take the following
precautions:
• Keep phpMyAdmin up to date with the latest security patches.
• Use strong passwords for database users.
• Restrict access to the phpMyAdmin interface by IP address or through authentication
mechanisms.
• Disable root login and create separate, limited-privilege users.
• Regularly review server logs for suspicious activity.
In conclusion, phpMyAdmin is a powerful and user-friendly tool for managing MySQL and
MariaDB databases. Its web-based interface simplifies database administration tasks and
provides essential features for database creation, management, and maintenance. When used
responsibly and with security best practices in mind, phpMyAdmin can be an invaluable asset
for developers and database administrators
myphpadmin:

INDU UNIVERSITY CSE E2 22


Web Technology SEM - 5 IU2241231336

Practical 5.5
AIM: Implement php application to store employee records in MySQL
database.
Code:
<!DOCTYPE html>

<head>

<body>

<!-- Table -->

<form method="post" action="">

<table align ="center" border="1" cellspacing="0" cellpadding="2">

<caption><h1> Employee Details Form</h1></caption>

<tr>

<td>Company Id:</td>

<td><input type="text" id="cid" name="cid" placeholder="Enter IU no" required> </td>

</tr>

<tr>

<td>Full name:</td>

<td><input type="text" name="fname" placeholder="Enter username"> </td>

</tr>

<tr>

<td>Date of Birth:</td>

<td><input type="date" name="DOB"

placeholder=""> </td>

</tr>

<tr>

<td>Gender:</td>

<td>

INDU UNIVERSITY CSE E2 23


Web Technology SEM - 5 IU2241231336

<input type="radio" name="gender" value="Male"

checked> Male

<input type="radio" name="gender"

value="Female" checked> Female

</td>
</tr>

<tr>

<td>Email:</td>

<td><input type="email" name="email" placeholder="@gmail.com"> </td>

</tr>

<tr>

<td>Phone number:</td>

<td><input type="text" name="number"> </td>

</tr>

<tr>

<td>Select city:</td>

<td>

<select name ="city" >

<option value="">Select city</option>

<option value="Ahmedabad">Ahmedabad</option>

<option value="Baroda">Baroda</option>

<option value="Rajkot">Rajkot</option>

<option value="Surat">Surat</option>

</td>

</tr>

<tr>

<td>Enter zipcode:</td>

<td><input type="number" name="zipcode" placeholder="Enter

6 digit zipcode"> </td>

INDU UNIVERSITY CSE E2 24


Web Technology SEM - 5 IU2241231336

</tr>

</table>

<br>

<legend align="center">

<input type="submit" name="submit" value="Register">

<input type="reset" value="Reset">

</legend>

</form>

<br><br>

</body>

</head>

</html>

<?php if(isset($_POST['submit']))

$cid=$_POST['cid'];

$name=$_POST['fname'];

$mail=$_POST['email'];

$pno=$_POST['number'];

$dob=$_POST['DOB'];

$gender=$_POST['gender'];

$city=$_POST['city'];

$zip=$_POST['zipcode'];

$con=mysqli_connect("localhost","root","","mysql");
$tab="INSERT INTO `emp_reg`(`Company_id`, `Full_name`, `DOB`, `Gender`, `Email`,
`Phone_number`,`City`,`Zip`)VALUES('$cid','$name','$dob','$gender','$mail',$pno,'$city','$zi
p')";

mysqli_query($con,$tab);

$q="SELECT * FROM `emp_reg`"; $res=mysqli_query($con,$q);

INDU UNIVERSITY CSE E2 25


Web Technology SEM - 5 IU2241231336

echo "<h4 align='center'>Following are the details added to PHP MYSQL database:</h4>";

echo "<table border='1' align='center' cellpadding='5'>

<tr>
<th>Company Id</th><th>Full
name</th><th>DOB</th><th>Gender</th><th>Email</th><th>Phone
number</th><th>City</th><th>Zip</th>

</tr>";

if(mysqli_num_rows($res)>0)

While($x=mysqli_fetch_array($res))

{ echo

"<tr>

<td>$x[0]</td>

<td>$x[1]</td>

<td>$x[2]</td>

<td>$x[3]</td>

<td>$x[4]</td>

<td>$x[5]</td>

<td>$x[6]</td>

<td>$x[7]</td>

</tr>";

} else {
echo "<tr>

<td colspan='8'> No result Found </td>

</tr>"; }
echo
"</table>";

INDU UNIVERSITY CSE E2 26


Anurag Yadav Web Technology IU2241231336

?>
Output:

CSE-E2

You might also like