Scribd
Upload
28 views20 pages

Web Technologies Fat Exam Codes

The document provides code snippets to implement various web technologies tasks. It includes PHP code to upload files with certain constraints, HTML and JavaScript code for a registration form with validation, and code for a login system connecting to a MySQL database.

Uploaded by

Sai Vijay Nimmagadda
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
28 views20 pages

Web Technologies Fat Exam Codes

The document provides code snippets to implement various web technologies tasks. It includes PHP code to upload files with certain constraints, HTML and JavaScript code for a registration form with validation, and code for a login system connecting to a MySQL database.

Uploaded by

Sai Vijay Nimmagadda
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/ 20

Web Technologies Fat exam Codes

1.Write a PHP script to upload file with following constraints:


a. Student should upload DOC, DOCX, PDF only
b. Maximum File size is 100KB
c. Prevent file duplication when a file uploaded again
Code:-
<?php

$allowedExtensions = [

'application/pdf',

'application/msword',

'text/plain',

'application/vnd.openxmlformats-officedocument.wordprocessingml.document',

];

if(isset($_FILES['upfile'])){

$errors= array();

$file_name = $_FILES['upfile']['name'];

$file_size =$_FILES['upfile']['size'];

$file_tmp =$_FILES['upfile']['tmp_name'];

$file_type=$_FILES['upfile']['type'];

$file_ext=strtolower(end(explode('.',$_FILES['upfile']['name'])));

if(in_array($file_ext,$allowedExtensions )=== false){

$errors[]="extension not allowed, please choose correct file.";

}
if($file_size > 100000){

$errors[]='File size must be excately 100 KB';

if(empty($errors)==true){

move_uploaded_file($file_tmp,"test/".$file_name);

echo "Success";

}else{

print_r($errors);

?>

<html>

<body>

<form action="" method="POST" enctype="multipart/form-data">

<input type="file" name="upfile" />

<input type="submit"/>

</form>

</body>

</html>

2. . Create a html registration form consisting of the following fields


a) Text box with label username
b) Password box with password label
c) Password box with confirm password label
d) Textbox with label Phone number
e) Textbox with label e-mail
f) Submit and reset buttons.

When the form is submitted it has to perform the following things


using JavaScript
Validate username (username should not contain numbers and
special symbols)
Password and confirm password boxes should contain same
characters, letters and symbols, if the data in both the boxes are
different, it should display the information.
Phone number field should contain only ten digits.
The email field should be in the following format.
([email protected])
If any of the data is not correct, the html page should display the
alerts message “Not Completed” and up on successful validation
corresponding alert message “Successfully completed” should be
displayed.

Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="width=device-width, initial-scale=1, name="viewport">
<script type="text/javascript">
function myValidation()
{

var p = document.getElementById('username').value;
if (!checkUsername(p))
{
alert('User name validation rules have not matched!');
alert('Not Completed');
return false;
}

var pas = document.getElementById('pass').value;


var pasTwo = document.getElementById('repass').value;
var phone = document.getElementById('phone').value;
if (!passwordMatch(pas, pasTwo))
{
alert('The two passwords not matching');
alert('Not Completed');
return false;
}

if (!PhoneCheck(phone))
{
alert('The Phone should have exactly 10 digits');
return false;
}
alert('up. Form ready for submit.');
}

function PhoneCheck(pas)
{
var theRegexForUs = /^(\d){10}$/;
return theRegexForUs.test(pas);
}

function passwordMatch(pas, pasTwo) {


if (pas === pasTwo)
{
return true;

}
else
{
return false;
}
}

function checkUsername(username) {
// first character should be a letter

if (!username.match(/^[a-z]+$/i))
{
alert('The Username must not have anything other than Alphanumeric
characters!');
return false;
}

return true;
}
</script>
<title>Registration</title>
<!--<link rel="stylesheet" type="text/css" href="../css/post_style.css">-->
</head>
<body>
<header>
<!--Must have a section heading introducing the form-->
<h1>Registration Form</h1>
</header>
<form name="myForm" onsubmit="return myValidation();" method="post">
<div>
<!--Must ask user to input a username-->
<label for="uname">Username</label>
<input type="text" id="username" name="uname" required
placeholder="Username:"/>
</div>
<br/><br/>
<div>
<label for="pass">Password</label>
<input type="password" id="pass" name="password" required/>
</div>
<div>
<!--Must ask user to input a confirm password-->
<br/><br/>
<label for="repass">Confirm Password</label>
<input type="password" id="repass" name="repass" required/>
</div>
<div>
<!--Must ask user to input a confirm password-->
<br/><br/>
<label for="phone">Phone</label>
<input type="phone" id="phone" name="phone" required/>
</div>
<div>
<br/><br/>
<!--Must ask user to input an email.-->
<label for="email">Email Address</label>
<input type="email" id="em" name="em" required
placeholder="[email protected]"/>
</div>
<br/><br/>
<!--Must ask user to input a password-->
<!--Password input must be correct input type
(i.e. when I type I should not see the
password)-->
<input type="submit" method="post" name="action" value="Submit"/>
<button type="button" value="Reset"
onClick="window.location.reload();">Reset</button>
<!--<input type="reset" value="Reset">-->
</div>
</form>
</body>
</html>
As per the problem statement, we need to implement the conditions given below. I've
mentioned all the functions that help us implement those condition.

1. Validate username (username should not contain numbers and special symbols)

var p = document.getElementById('username').value;
if (!checkUsername(p))
{
alert('User name validation rules have not matched!');
alert('Not Completed');
return false;
}

////////

function checkUsername(username) {
// first character should be a letter

if (!username.match(/^[a-z]+$/i))
{
alert('The Username must not have anything other than Alphanumeric
characters!');
return false;
}

return true;
}

2. Password and confirm password boxes should contain same characters, letters and
symbols,
if the data in both the boxes are different, it should display the information.

var pas = document.getElementById('pass').value;


var pasTwo = document.getElementById('repass').value;
var phone = document.getElementById('phone').value;
if (!passwordMatch(pas, pasTwo))
{
alert('The two passwords not matching');
alert('Not Completed');
return false;
}
////////////

function passwordMatch(pas, pasTwo) {


if (pas === pasTwo)
{
return true;

}
else
{
return false;
}
}
3. Phone number field should contain only ten digits.

if (!PhoneCheck(phone))
{
alert('The Phone should have exactly 10 digits');
return false;
}

///////
function PhoneCheck(pas)
{
var theRegexForUs = /^(\d){10}$/;
return theRegexForUs.test(pas);
}

4. The email field should be in the following format. ([email protected])


5. If any of the data is not correct, the html page should display the alerts message “Not
Completed” and up on successful.

3.Consider a table “userinfo” with fields (username, password,


country, contact) in “userdb” database of MySQL.
a. Create home.php page consisting of hyperlinks for about.php,
login.php, change.phppages.
b. The about.php should display the names of all users in the
database.
c. The login page has two textboxes username and password and
submit button. On clicking the submit button the user has to be
validated based on the data stored in the table.
d. The change.php page has three textboxes, username, old
password, new password and allows the user to change/update
the password once the user enters username old password
correctly, otherwise displays “incorrect details”.
Code:-
d-<a href="index.php">Index Page</a>

<a href="page2.php">Page 2</a>

e-$db = new PDO("".$dbengine.":host=$dbhost; dbname=$dbname", $dbuser,


$dbpassword);

$q = "SELECT * FROM users"

$result = $db->query($q)->fetchall()

foreach ($result as $user)

echo $user['name']

};{;;

f-<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd"

<html

<head

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"

<title>Practical Work</title

</head

<body
<%

String msg = (String) request.getAttribute("message");

if(msg==null

out.println("\t")

els

out.println(msg)

<form action="login"

<label>Username : </label> <input type="text" name="username"/

<label>Password : </label> <input type="password" name="pass"/

<button type="submit">Login</button><br/> </form

</body

</html>>>>>>>;e;) >>>>>>>>

g-<form id="form" action="access.php" method="post"enctype="multipart/formdata">

<h2>DJ Access</h2

<div class="lineSpacer"></div

<p>Username <input type="text" name="username" id="userBox"/></p> <br /

<p>Password <input type="password" name="password" id="passBox"/></p> <br /

<input type="submit" value="Login to DJ Access" name="Submit" id="submit"/

<div class="lineSpacer"></div

</form

<?php if($error){ ?

<div class="error"> There was an issue with the form")</div

<?php } ?>>>>>>>>>>
4. Use AngularJS to create two controllers fruits and vegetables
consisting of fruitnames, vegnames arrays respectively. The
application should consist of,
a. Create two textboxes AddFruit and AddVeg to read values.
b. Create “Add” buttons with respect to two text boxes, on clicking
the buttons the arrays have to be updated.
C. Create “view” buttons to display the list of items in the array, use
filters to display the items in ascending order on the webpage.

Code:-
Fruitsveggies.js code:-
var app = angular.module
("application", []);
app.controller("fruits", function
($scope.fruitnames = ["orange","banana"];
$scope.addItem = function () {
if (!$scope.addMe) {
return;
}
if ($scope.fruitnames.indexof ($scope.addMe) == -1) {
$scope.fruitnames.push
($scope.addMe);
} else {
alert("Already added");
}
};
$scope.viewItem = function () {
$scope.fruitnames = $filter
("orderBy")($scope.fruitnames);
};
});
/*app.controller("vegetables",
function ($scope, $filter) {
$scope.vegnames = ["Tomato", "Brinjal"];
$scope.addItem2 = function() {
if (!&scope.addMe2) {
return;
}
if ($scope.vegnames.indexOf
($scope.vegnames.push
($scope.addMe2);
} else {
alert("Already added");
}
};
$scope.viewItem2 = function () {
$scope.vegnames = $filter
("orderBy")($scope.vegnames);
};
});*/

.js code:-
(or)
webpage.
<!DOCTYPE html>

<html ng-app="fruitsveg">

<head>

<title>AngularJS Controllers</title>

</head>

<body ng-controller="fruitsveg">

<!-- The controller containing the Fruit and Vegetable names. -->

<div ng-controller="fruits">

<table>

<tr>

<th>Name</th> <th>Price</th>

<tbody><tr ng-repeat="fruit in fruits"> <td><input type="text" value="" id="AddFruit"/>

</td>

<td><select name="price" ng-model="price" id="price"> <option value=""


selected>>Select</option></select></td>
</tr> </tbody></table> </div> <!-- The controller containing the Fruit and Vegetable names.
--> <div ng-controller="veg">

<table>

<tr>

<th>Name</th> <th>Price</th>

<tbody><tr ng-repeat="vegetable in vegnames">

<td><input type="text" value="" id="AddVeg"/>

</td>

<td><select name="price" ng-model="price" id="price"> <option value=""


selected>>Select</option></select></td> </tr> </tbody></table></div><!-- The end of the
controller structure. -->

<input type="button" value="Add Fruits"

onclick="addFruit()"> <input type="button"

value="Add Vegetables" onclick="addVeg()">

</input> </body>

</html> The above code will give below screen on the screen;
If we observe the HTML code above, it is a simple application consisting of two textboxes,
two buttons and one table to display the fruits and vegetables. We have two controllers
named as fruits and veg to control the operations in these components. The body tag has a
tag with controller as fruits and veg respectively. This tag with controller contains the two
text boxes

and two buttons.

<input type="button" value="Add Fruits"

onclick="addFruit()"> <input type="button" value="Add Vegetables" onclick="addVeg()">


The above code shows that, the button has the name of add fruits and add vegetables. On
clicking these buttons, addFruit and addVeg methods are called respectively. <div ng-
controller="fruits"> <table>

<tr>

<th>Name</th>

<th>Price</th>

<tbody><tr ng-repeat="fruit in fruits"> <td><input type="text" value="" id="AddFruit"/>


</td> <td><select name="price" ng model="price" id="price"> <option value=""
selected>>Select</option></select></td> </tr> </tbody></table> </div><!-- The end of the
controller structure. -->

The above code snippet shows that, we have two such tags in HTML body element. Both
these tags are inside of the tag with controller name fruits. The first tag is for the fruit
names and the second for the vegetable names, both these tags have tr element as child.
<input type="button" value="Add Fruits" onclick="addFruit()"> <input type="button"
value="Add Vegetables" onclick="addVeg()"> within this two textboxes which are called
AddFruit and AddVeg respectively. We have also two buttons in our code named as add
fruits and add vegetables. The code input button shows that, when it is clicked, a function
named addFruit will be called. On clicking the button addVeg, a function named addVeg will
be called respectively in our application.
5..Write a HTML code to create a form that contain three textboxes,
one submits button and clear button. Three textboxes should contain
A value(A), B value(B) and C value(c), respectively. On clicking the
submit button, the external JavaScript file should calculate the D and
display it using<h6> tag (font color should be yellow and background
color should be green). On clicking clear button, content in all the
textboxes and existing D value should be cleared. The mathematical
formula to calculate D is: D=2A+2B+2C.
Code:-

6.Develop an application using AJAX, PHP and MYSQL. Create a


dropdown list

Code:-
CREATE TABLE `countries` ( `id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
PRIMARY KEY (`id`))
CREATE TABLE `states` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`country_id` int(11) NOT NULL,
`name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
PRIMARY KEY (`id`)
)
CREATE TABLE `cities` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`state_id` int(11) NOT NULL,
`name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
PRIMARY KEY (`id`)
)

INSERT INTO `countries` VALUES (1, 'USA', 1);


INSERT INTO `countries` VALUES (2, 'Canada', 1);

INSERT INTO `states` VALUES (1, 1, 'New York', 1);


INSERT INTO `states` VALUES (2, 1, 'Los Angeles', 1);
INSERT INTO `states` VALUES (3, 2, 'British Columbia', 1);
INSERT INTO `states` VALUES (4, 2, 'Torentu', 1);

INSERT INTO `cities` VALUES (1, 2, 'Los Angales', 1);


INSERT INTO `cities` VALUES (2, 1, 'New York', 1);
INSERT INTO `cities` VALUES (3, 4, 'Toranto', 1);
INSERT INTO `cities` VALUES (4, 3, 'Vancovour', 1);
<?php
db.php

<?php
$servername='localhost';
$username='root';
$password='';
$dbname = "my_db";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}
?>

Index.php

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<div class="card-body">
<form>
<div class="form-group">
<label for="country">Country</label>
<select class="form-control" id="country-dropdown">
<option value="">Select Country</option>
<?php
require_once "db.php";
$result = mysqli_query($conn,"SELECT * FROM countries");
while($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row['id'];?>"><?php echo $row["name"];?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label for="state">State</label>
<select class="form-control" id="state-dropdown">
</select>
</div>
<div class="form-group">
<label for="city">City</label>
<select class="form-control" id="city-dropdown">
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('#country-dropdown').on('change', function() {
var country_id = this.value;
$.ajax({
url: "states-by-country.php",
type: "POST",
data: { country_id: country_id },
cache: false,
success: function(result){
$("#state-dropdown").html(result);
$('#city-dropdown').html('<option value="">Select State First</option>');
}
}); });
$('#state-dropdown').on('change', function() {
var state_id = this.value;
$.ajax({
url: "cities-by-state.php",
type: "POST",
data: {
state_id: state_id
},
cache: false,
success: function(result){
$("#city-dropdown").html(result);
}
});}); });
</script>
</body>
</html>

states-by-country.php
<?php
require_once "db.php";
$country_id = $_POST["country_id"];
$result = mysqli_query($conn,"SELECT * FROM states where country_id = $country_id");
?>
<option value="">Select State</option>
<?php
while($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row["id"];?>"><?php echo $row["name"];?></option>
<?php
}
cities-by-state.php
<?php
require_once "db.php";
$state_id = $_POST["state_id"];
$result = mysqli_query($conn,"SELECT * FROM cities where state_id = $state_id");
?>
<option value="">Select City</option>
<?php
while($row = mysqli_fetch_array($result)) {
?>
<option value="<?php echo $row["id"];?>"><?php echo $row["name"];?></option>
<?php
}
?>

You might also like