Scribd
Upload
4 views

FSWD Manual

The document outlines a series of web development experiments, including creating a home page, login page, catalogue page, and registration page using HTML, CSS, and JavaScript. Each experiment includes specific aims, source code, and expected outputs. The document serves as a practical guide for learning web development concepts and techniques.

Uploaded by

chiranjeevi.pt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

FSWD Manual

The document outlines a series of web development experiments, including creating a home page, login page, catalogue page, and registration page using HTML, CSS, and JavaScript. Each experiment includes specific aims, source code, and expected outputs. The document serves as a practical guide for learning web development concepts and techniques.

Uploaded by

chiranjeevi.pt
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 60

POINTER:

Exp No Date Name Of The Experiment Page No Remarks


1 Home Page: 3-11
Top frame:
Left frame:
Right frame:
2 Login Page: 12-13
3 Catalogue Page: 14-20
4 Registration Page: 21-22
5 Design a web page using CSS (Cascading Style Sheets) 23-24

6 Write a Java Script that calculates the squares and cubes of the 25-26
numbers from 0 to 10 and outputs HTML text that displays the
resulting values in an HTML table format.
7 Write a Java Script code that displays text―TEXT-GROWING‖ 27-28
with increasing font size in the interval of 100ms in RED
COLOR, when the font size reaches 50pt it displays ―TEXT-
SHRINKING ‖ in BLUE color. Then the font size decreases to
5pt.
8 Write a simple Hello program using Angular JS library. 29-30
9 Write a program that the Angular JS application consists of 31-32
following three important parts:
1. ng-app
2. ng-model
3. ng-bind
10 Write a program by using filters to convert the following 33-43
1. uppercase
2. lowercase
3. currency
4. order By
5. filter
6. date
11 Example PHP program for contact-uspage. 44-45
12 Example PHP program for registering users of a web site and 46-50
login.
13 Install a database (My SQL or Oracle). 51-55
Create a table which should contain at least the following fields:
name, password, email-id, phone number (these should hold the
data from the registration form).
Write a PHP program to connect to that data base and extract data
from the tables and display them. Experiment with various SQL
queries.
Insert the details of the users who register with the website,
whenever a new user clicks the submit button in the registration
page.
14 Write a PHP which does the following job: Insert the details of 56-63
the 3 or 4 users who register with the web site by using
registration form. Authenticate the user when he submits the
login form using the user name and password from the database
(insteadof cookies)

1|Page
EXPERIMENT-1

AIM: Home Page:


The static home page must contain three frames.

Top frame: Logo and the college name and links to Homepage, Login page, Registration page,
Catalogue page and Cart page (the description of the see pages will be given below).

Left frame: At least four links for navigation, which will display the catalogue of respective links.
For e.g.: When you click the link “B.Tech” the catalogue for B.Tech Books should be displayed in
the Right frame.

Right frame: The pages to the links in the left frame must be loaded here. Initially this page contains
description of the website.

Logo Web site Name


Home Login Registration Catalogue Cart
B.Tech

M.Tech Description of Website

MCA

MBA

SOURCE CODE:

head.html

<html>
<head>
<title> Swarnandhra cet</title>
</head>
<body>
<fontface="ArialBlack"size="3">
<tableborder="1"cellspacing="0"cellpadding="0"width="100%">
<tr>
<tdalign="center"><imgsrc="logo.jpg"width="100"height="100"/></td>
<tdcolspan="4"style="color:blue;text-align:center;font-
size:15px">SwarnandhraCollegeofEngineeringandTechnology</td>
</tr>
<tr>
<tdalign="left"><ahref="description.html"target="des_page">HOME</a></td>
<tdalign="left"><ahref="login.html"target="des_page">LOGIN</a></td>
<tdalign="left"><ahref="registration.html"target="des_page">REGISTRATION</a></td>
<tdalign="left"><ahref="catalogue.html"target="des_page">CATALOGUE</a></td>
<tdalign="right"><ahref="cart.html"target="des_page">CART</a></td>
</tr>
</table>
</font>
</body></html>

2|Page
OUTPUT:

3|Page
dept.html
SOURCE CODE:

<html>
<head>
<title>DepartmentsPage</title>
</head>
<body>
<fontface="ArialBlack"size="4">
<tablealign="center"height="100%">
<tr>
<td><ahref="cat_btech.html"target="des_page">B.Tech</a></td>
</tr>
<tr>
<td><ahref="cat_mtech.html"target="des_page">M.Tech</a></td>
</tr>
<tr>
<td><ahref="cat_mca.html"target="des_page">MCA</a></td>
</tr>
<tr>
<td><ahref="cat_mba.html"target="des_page">MBA</a></td>
</tr>
</table>
</font>
</body>
</html>

4|Page
Output:

5|Page
description.html

SOURCE CODE:

<html>
<head>
<title>Descriptionpage</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br>
<fontface="TIMESNEWROMAN"size="8">
<center>
DescriptionoftheWebsite
</center>
</font>
</body>
</html>

6|Page
Output:

7|Page
home.html
<html>
<head>
<title>Homepage</title>
</head>
<framesetrows="20,80">
<framesrc="head.html"name="head_page">
<framesetcols="15,85">
<framesrc="dept.html"name="dept_page">
<framesrc="desc.html"name="des_page">
</frameset>
</frameset>
</html>

8|Page
OUTPUT:

9|Page
EXPERIMENT-2

AIM:LoginPage:
Logo WebsiteName
Home Login Registration Catalogue Cart
B.Tech Username
M.Tech Login:
MCA Password:********
MBA
Submit Reset

SOURCE CODE:

login.html
<html>
<head>
<title>Login page</title>
</head>
<body>
<center>
<font face="Arial Black" size="4"><u><b>LOGIN FORM</b></u></font>
<br><br>
<form name="f1" action="" method="post">
<table frame="box" cellspacing="10">
<tr>
<td>Login</td>
<td><input type="text" size="25"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" size="25"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="SUBMIT">

<input type="reset" value="RESET"></td>


</tr>
</table>
</form>
</center>
</body>
</html>

10 | P a g e
OUTPUT

11 | P a g e
EXPERIMENT-3

AIM: Catalogue Page: The catalogue page should contain the details of all the books available in the website in a
table. The details should contain the following:

1. Snapshot of Cover Page.


2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.

SOURCE CODE:

catalogue.html
<html>
<head>
<title> Catalogue Page</title>
</head>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td><img src="xmlb.gif" height="100" width="100"/></td>
<td>Book: XML Bible
<br>Author: Winston
<br>Publication: Wiely</td>
<td>$40.5</td>
<td><img src="adc.gif" height="100" width="100"/></td>
</tr>
<tr>
<td><img src="ai.gif" height="100" width="100"/></td>
<td>Book: AI
<br>Author: S.Russel
<br>Publication: Princeton hall</td>
<td>$63</td>
<td><img src="adc.gif" height="100" width="100"/></td>

12 | P a g e
</tr>
<tr>
<td><img src="java2.gif" height="100" width="100"/></td>
<td>Book: Java 2
<br>Author: Watston
<br>Publication: BPB publications</td>
<td>$35.5</td>
<td><img src="adc.gif" height="100" width="100"/></td>
</tr>
<tr>
<td><img src="html.gif" height="100" width="100"/></td>
<td>Book: HTML in 24 hours
<br>Author: Sam Peter
<br>Publication: Sam publications</td>
<td>$100</td>
<td><img src="adc.gif" height="100" width="100"/></td>
</tr>
</table>
</body>
</html>

13 | P a g e
OUTPUT:

14 | P a g e
mca.html
<html>
<head>
<title> MCA Catalogue Page</title>
</head>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td><img src="xmlb.gif" height="100" width="100"/></td>
<td>Book: XML Bible
<br>Author: Winston
<br>Publication: Wiely</td>
<td>$40.5</td>
<td><img src="adc.gif" height="100" width="100"/></td>
</tr>
<tr>
<td><img src="html.gif" height="100" width="100"/></td>
<td>Book: HTML in 24 hours
<br>Author: Sam Peter
<br>Publication: Sam publications</td>
<td>$100</td>
<td><img src="adc.gif" height="100" width="100"/></td>
</tr>
</table>
</body>
</html>

15 | P a g e
OUTPUT

16 | P a g e
bca.html
<html>
<head>
<title> BCA Catalogue Page</title>
</head>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td><img src="xmlb.gif" height="100" width="100"/></td>
<td>Book: XML Bible
<br>Author: Winston
<br>Publication: Wiely</td>
<td>$40.5</td>
<td><img src="adc.gif" height="100" width="100"/></td>
</tr>
<tr>
<td><img src="ai.gif" height="100" width="100"/></td>
<td>Book: AI
<br>Author: S.Russel
<br>Publication: Princeton hall</td>
<td>$63</td>
<td><img src="adc.gif" height="100" width="100"/></td>
</tr>
</table>
</body>
</html>

17 | P a g e
OUTPUT:

18 | P a g e
EXPERIMENT-4
AIM: RegistrationPage: Create a―registration form―withthe followingfields
1. Name(Textfield)
2. Password(passwordfield)
3. E-mailid(textfield)
4. Phonenumber(textfield)
5. Sex (radiobutton)
6. Dateofbirth (3select boxes)
7. Languagesknown(check boxes–English,Telugu, Hindi,Tamil)
8. Address(textarea)

SOURCE CODE:

<html>
<head>
<title>Registration Page</title>
</head>
<body>
<center>
<h3 align="center"><u>REGISTRATION PAGE</u></h3>
<table border="3">
<tr><td>
<form name="f1" action="" method="post" onsubmit="">
<table cellspacing="10" cellpadding="5">
<tr><td>NAME</td><td><input type="text" size="30" name="uname"/></td></tr>
<tr><td>PASSWORD</td><td><input type="password" size="30" name="pass"/></td></tr>
<tr><td>E-MAIL ID</td><td><input type="text" size="30" name="email"/></td></tr>
<tr><td> PHONE NUMBER</td><td><input type="text" size="15" name="phone"/></td></tr>
<tr><td>GENDER</td><td><input type="radio" name="gen" value="m" />MALE
<input type="radio" name="gen" value="f" />FEMALE </td></tr>
<tr><td>DATE OF BIRTH</td>
<input type="date" name="date" /></td></tr>
<tr><td>LANGUAGES KNOWN</td>
<td>
<input type="checkbox" value="eng" name="lang" />ENGLISH
<input type="checkbox" value="tel" name="lang" />TELUGU
<input type="checkbox" value="hin" name="lang" />HINDI
<input type="checkbox" value="tam" name="lang" />TAMIL
</td></tr>
<tr>
<td>ADDRESS</td>
<td><textarea name="addr" cols="25" rows="5"></textarea></td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="SUBMIT"/>
<input type="reset" value="RESET" /></td>
</tr>
</table>
</form>
</td></tr></table>
</center>
</body>
</html>

19 | P a g e
OUTPUT:

20 | P a g e
EXPERIMENT-5

AIM: Design a web page using CSS (Cascading Style Sheets): Use different font, styles: In the style definition
you define how each select or should work (font, color etc.). Then, in the body of your pages, you refer to these
selectors to activate the styles.

SOURCE CODE:

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
color: #333;
line-height: 1.6;
}
h1 {
font-family: "Times New Roman", serif;
color: #ff6600;
font-size: 36px;
}
p{
font-style: italic;
}
.important {
font-weight: bold;
color: #0066cc;
}
#custom-font {
font-family: "Courier New", monospace;
}
</style>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph with the default font.</p>
<p class="important">This is an important paragraph with bold and blue text.</p>
<p>This paragraph has italic text.</p>
<p id="custom-font">This paragraph uses a custom monospace font.</p>
</body>
</html>

21 | P a g e
OUTPUT:

22 | P a g e
EXPERIMENT-6

AIM: Write a Java Script that calculates the squares and cubes of the numbers from 0 to 10 and outputs
HTML text that displays the resulting values in an HTML table format.

SOURCE CODE:

<!DOCTYPE HTML>
<html>
<head> <style>
table, tr,
td
{
border: solid black;
width: 33%;
text-align: center;
border-collapse: collapse;
background-color:lightblue;
}
table { margin: auto;
} </style>
<script>
document.write( "<table><tr><thcolspan='3'> NUMBERS FROM 0 TO 10 WITH THEIR QUARES
AND CUBES </th></tr>" );
document.write( "<tr><td>Number</td><td>Square</td><td>Cube</td></tr>" );
for(var n=0; n<=10; n++)
{
document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>"+ n*n*n + "</td></tr>" ) ;
}
document.write( "</table>" ) ;
</script>
</head>
</html>

23 | P a g e
OUTPUT:

24 | P a g e
EXPERIMENT-7

AIM: Write a Java Script code that displays text― TEXT-GROWING ‖with increasing font size in the interval of
100ms in RED COLOR, when the font size reaches 50pt it displays ―TEXT- SHRINKING ‖in BLUE color. Then the
font size decreases to 5pt.

SOURCE CODE:

<html>
<head>
</head>
<body>
<center>
<pid="demo"/>
</center>
<script>
varvar1=setInterval(inTimer,1000);varsize=5;
varids=document.getElementById("demo");functioninT
imer(){
size+=5;
ids.innerHTML="TEXTGROWING";
ids.setAttribute("style","font-size:"+size+"px;color:red");if(size>=50)
{
clearInterval(var1);
varvar2=setInterval(deTimer,1000);
}
}
function deTimer(){size-=5;
ids.innerHTML="TEXTSHRINKING";
ids.setAttribute("style","font-size:"+size+"px;color:blue");if(size<=5)
{
clearInterval(var1);

}
}
</script>
</body>
</html>

25 | P a g e
OUTPUT:

26 | P a g e
EXPERIMENT-8

AIM: Write a simple Hello program using Angular JS library.

SOURCE CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HELLO">
<h2>HELLO{{title}}!</h2>
</div>

<script>angular.module("myapp",[])
.controller("HELLO",function($scope){
$scope.title= "DEPARTMENT OF ARTIFICIAL INTELLIGENCE AND MACHINE LEARNING";
});
</script>
</body>
</html>

27 | P a g e
OUTPUT:

28 | P a g e
EXPERIMENT-9

AIM: Write a program that the Angular JS application consists of following three important parts:

1. ng-app
2. ng-model
3. ng-bind

SOURCE CODE:

<!DOCTYPE html>

<html>

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

<body>

<div ng-app="">

<p>Input something in the input box:</p>

<p>Name: <input type="text" ng-model="name"></p>

<p ng-bind="name"></p>

</div>

</body>

</html>

29 | P a g e
OUTPUT:

30 | P a g e
EXPERIMENT-10

1. AIM: Write a program by using filters to convert the following


1. uppercase
2. lowercase
3. currency
4. order By
5. filter
6. date

SOURCE CODE:

Upper.html:

<!DOCTYPE html>

<html>

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

<body>

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{lastName | uppercase }}</p>

</div>

<script>

angular.module('myApp', []).controller('personCtrl', function($scope) {

$scope.firstName = "RAVI",

$scope.lastName = "teja"

});

</script>

</body>

</html>

31 | P a g e
OUTPUT:

32 | P a g e
lower.html:

<!DOCTYPE html>

<html>

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

<body>

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>

<script>

angular.module('myApp', []).controller('personCtrl', function($scope) {

$scope.firstName = "ravi",

$scope.lastName = "TEJA"

});

</script>

</body>

</html>

33 | P a g e
OUTPUT:

34 | P a g e
currency.html:

<!DOCTYPE html>

<html>

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

<body>

<div ng-app="myApp" ng-controller="costCtrl">

<h1>Price: {{ price | currency }}</h1>

</div>

<script>

var app = angular.module('myApp', []);

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

$scope.price = 59;

});

</script>

<p>The currency filter formats a number to a currency format.</p>

</body>

</html>

35 | P a g e
OUTPUT:

36 | P a g e
orderby.html:

<!DOCTYPE html>

<html>

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

<body>

<div ng-app="myApp" ng-controller="orderCtrl">

<ul>

<li ng-repeat="x in cars | orderBy">{{x}}</li>

</ul>

</div>

<script>

var app = angular.module('myApp', []);

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

$scope.cars = ["Dodge", "Fiat", "Audi", "Volvo", "BMW", "Ford"];

});

</script>

<p>The array items are displayed alphabetically.</p>

</body>

</html>

37 | P a g e
OUTPUT:

38 | P a g e
filter.html:

<!DOCTYPE html>

<html>

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

<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>

<li ng-repeat="x in names | filter : 'r'">

{{ x }}

</li>

</ul>

</div>

<script>

angular.module('myApp', []).controller('namesCtrl', function($scope) {

$scope.names = [

'raviteja','rahul','praneeth','sanjay','syham','neeraja','chandhrika','jhanavi','prasad','ankammarao'

];

});

</script>

<p>This example displays only the names containing the letter "i".</p>

</body>

</html>

39 | P a g e
OUTPUT:

40 | P a g e
date.html:

<!DOCTYPE html>

<html>

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

<body>

<div ng-app="myApp" ng-controller="datCtrl">

<p>Date = {{ today | date }}</p>

</div>

<script>

var app = angular.module('myApp', []);

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

$scope.today = new Date();

});

</script>

<p>The date filter formats a date object to a readable format.</p>

</body>

</html>

41 | P a g e
OUTPUT:

42 | P a g e
EXPERIMENT-11

AIM: Example PHP program for contact-uspage.


SOURCE CODE:
<!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>
<form method="post">
<table class="table table-bordered">
<h1><li><u></u></li>
</h1>
<h1 class="center"> CONTACT PAGE </h1>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="Submit">
</table></form>
<?php
if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['subject']) && isset($_POST['message']) ){
$name = $_POST["name"];
$email = $_POST["email"];
$subject = $_POST["subject"];
$message = $_POST["message"];
}
?>

43 | P a g e
OUTPUT:

44 | P a g e
EXPERIMENT-12

AIM: ExamplePHPprogramforregisteringusers ofawebsiteandlogin.

SOURCE CODE:

register.php

<!DOCTYPE html>

<html>

<head>

<title>Registration</title>

</head>

<body>

<h2>Register</h2>

<form method="post">

<label for="first_name">First Name:</label>

<input type="text" name="first_name" required><br>

<label for="last_name">Last Name:</label>

<input type="text" name="last_name" required><br>

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

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

<label for="username">Username:</label>

<input type="text" name="username" required><br>

<label for="password">Password:</label>

<input type="password" name="password" required><br>

<label for="phone_number">Phone Number:</label>

<input type="text" name="phone_number" required><br>

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

</form>

</body>

</html>

<?php

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

45 | P a g e
$first_name = $_POST['first_name'];

$last_name = $_POST['last_name'];

$email = $_POST['email'];

$username = $_POST['username'];

$password = $_POST['password']; // Hash the password for security in a production system

$phone_number = $_POST['phone_number'];

$sql = "INSERT INTO users (first_name, last_name, email, username, password, phone_number)

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

if ($connection->query($sql) === TRUE) {

echo "Registration successful!";

} else {

echo "Error: " . $sql . "<br>" . $connection->error;

$connection->close();

?>

46 | P a g e
Login.php:
SOURCE CODE:
<!DOCTYPE html>
<html>

<head>

<title>Login</title></head>

<body>

<h2>Login</h2>

<form method="post">

<label for="username">Username:</label>

<input type="text" name="username" required><br>

<label for="password">Password:</label>

<input type="password" name="password" required><br>

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

</form></body>

</html>

<?php

session_start();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

$username = $_POST['username'];

$password = $_POST['password'];

$sql = "SELECT * FROM users WHERE username = '$username' AND password = '$password'";

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

if ($result->num_rows == 1) {

$_SESSION['username'] = $username;

header('Location: welcome.php'); // Redirect to a welcome page

} else {

echo "Invalid login credentials";

?>

47 | P a g e
OUTPUT:

48 | P a g e
EXPERIMENT-13

AIM: Install a database (Mysql or Oracle).

1. Create a table which should contain at least the following fields: name, password, email-id, phone
number (these should hold the data from the registration form).
2. Write a PHP program to connect to that data base and extract data from the tables and display them.
Experiment with various SQL queries.
3. Insert the details of the users who register with the website, whenever a new user clicks the submit
button in the registration page.
SOURCE CODE:

Register.php

<!DOCTYPE html>

<html>

<head>

<title>User Registration</title>

</head>

<body>

<h2>User Registration</h2>

<form action="registration_process.php" method="post">

<label for="name">Name:</label>

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

<label for="password">Password:</label>

<input type="password" id="password" name="password" required><br><br>

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

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

<label for="phone">Phone Number:</label>

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

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

</form>

<!-- Add a button to navigate to the display page -->

<button><a href="display.php">Display User Data</a></button>

</body>

</html>

49 | P a g e
Registration_process.php:

<?php

$hostname = "localhost"; // MySQL server hostname

$username = "root"; // MySQL username

$password = ""; // MySQL password

$database = "mydb"; // The name of the database

$conn = new mysqli($hostname, $username, $password, $database);

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

if (isset($_POST['name']) && isset($_POST['password']) && isset($_POST['email']) && isset($_POST['phone'])) {

$name = $_POST['name'];

$password = $_POST['password'];

$email = $_POST['email'];

$phone = $_POST['phone'];

$sql_insert = "INSERT INTO users (name, password, email, phone_number) VALUES (?, ?, ?, ?)";

$stmt = $conn->prepare($sql_insert);

$stmt->bind_param("ssss", $name, $password, $email, $phone);

if ($stmt->execute()) {

echo "User registration successful.";

} else {

echo "Error: " . $sql_insert . "<br>" . $conn->error;

$stmt->close();

} else {

echo "Incomplete user data submitted.";

$conn->close();

?>

50 | P a g e
Display.php:

<!DOCTYPE html>

<html>

<head>

<title>User Data</title>

</head>

<body>

<h2>User Data</h2>

<?php

$hostname = "localhost"; // MySQL server hostname

$username = "root"; // MySQL username

$password = ""; // MySQL password

$database = "mydb"; // The name of the database

$conn = new mysqli($hostname, $username, $password, $database);

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

$sql_select_all = "SELECT * FROM users";

$result_all = $conn->query($sql_select_all);

if ($result_all->num_rows > 0) {

echo "<table border='1'>

<tr>

<th>Name</th>

<th>Email</th>

<th>Phone Number</th>

</tr>";

while ($row = $result_all->fetch_assoc()) {

echo "<tr>";

echo "<td>" . $row["name"] . "</td>";

echo "<td>" . $row["email"] . "</td>";

51 | P a g e
echo "<td>" . $row["phone_number"] . "</td>";

echo "</tr>";

echo "</table>";

} else {

echo "No records found.";

$conn->close();

?>

</body>

</html>

52 | P a g e
OUTPUT:

53 | P a g e
EXPERIMENT-14

AIM: Write a PHP which does the following job: Insert the details of the 3 or 4 users who register with the web site
by using registration form. Authenticate the user when he submits the login form using the user name and password
from the database (instead of cookies)

SOURCE CODE:

register.php

<!DOCTYPE html>

<html>

<head>

<title>Registration</title>

</head>

<body>

<h1>Register</h1>

<form action="register_process.php" method="post">

<label for="username">Username:</label>

<input type="text" name="username" required><br>

<label for="password">Password:</label>

<input type="password" name="password" required><br>

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

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

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

</form>

</body>

</html>

54 | P a g e
Register_process.php

<?php

$host = 'localhost';

$dbname = 'mydb';

$username = 'root';

$password = '';

try {

$db = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

die("Database connection failed: " . $e->getMessage());

if (isset($_POST['username']) && isset($_POST['password']) && isset($_POST['email'])) {

// User input

$username = $_POST['username'];

$password = password_hash($_POST['password'], PASSWORD_DEFAULT); // Hash the password

$email = $_POST['email'];

$query = "INSERT INTO users (username, password, email) VALUES (:username, :password, :email)";

$stmt = $db->prepare($query);

if ($stmt->execute(['username' => $username, 'password' => $password, 'email' => $email])) {

// Registration successful

header('Location: registration_success.php'); // Redirect to the registration success page

} else {

echo "Error registering user. Please try again.";

} else {

echo "Invalid form data. Please make sure all fields are filled.";

?>

55 | P a g e
Registration_success.php:

<!DOCTYPE html>

<html>

<head>

<title>Registration Successful</title>

</head>

<body>

<h1>Registration Successful</h1>

<p>You have successfully registered. You can now <a href="login.php">log in</a>.</p>

</body>

</html>

56 | P a g e
login.php:

<!DOCTYPE html>

<html>

<head>

<title>Login</title>

</head>

<body>

<h1>Login</h1>

<form action="login_process.php" method="post">

<label for="username">Username:</label>

<input type="text" name="username" required><br>

<label for="password">Password:</label>

<input type="password" name="password" required><br>

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

</form>

<p>Don't have an account? <a href="register.php">Register</a></p>

</body>

</html>

57 | P a g e
Login_process.php
<?php

$host = 'localhost';

$dbname = 'mydb';

$username = 'root';

$password = '';

try {

$db = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

die("Database connection failed: " . $e->getMessage());

if (isset($_POST['username']) && isset($_POST['password'])) {

$username = $_POST['username'];

$password = $_POST['password'];

$query = "SELECT id, username, password FROM users WHERE username = :username";

$stmt = $db->prepare($query);

$stmt->execute(['username' => $username]);

$user = $stmt->fetch(PDO::FETCH_ASSOC);

if ($user && password_verify($password, $user['password'])) {

session_start();

$_SESSION['user_id'] = $user['id'];

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

header('Location: login_success.php'); // Redirect to the login success page

} else {

echo "Login failed. Please try again or register.";

} else {

echo "Invalid form data. Please make sure all fields are filled.";

?>
58 | P a g e
Login_success.php

<!DOCTYPE html>

<html>

<head>

<title>Login Successful</title>

</head>

<body>

<h1>Login Successful</h1>

<p>You have successfully logged in.</p>

</body>

</html>

59 | P a g e
OUTPUT:

60 | P a g e

You might also like