Scribd
Upload
6 views32 pages

Full Stack

The document contains a series of PHP and JavaScript programming exercises aimed at teaching various web development concepts such as database management, form handling, session management, cookie handling, and event handling. Each problem statement includes a source code example along with objectives and expected outputs. The exercises cover creating databases, handling user input, updating records, and manipulating web page elements using JavaScript.

Uploaded by

pnegi2562
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
6 views32 pages

Full Stack

The document contains a series of PHP and JavaScript programming exercises aimed at teaching various web development concepts such as database management, form handling, session management, cookie handling, and event handling. Each problem statement includes a source code example along with objectives and expected outputs. The exercises cover creating databases, handling user input, updating records, and manipulating web page elements using JavaScript.

Uploaded by

pnegi2562
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/ 32

Name: Ritika Kumari Sub :Full Stack Dev Practical

Roll no: 2301300/48 Sub Code: PMC 101


Course: MCA sec A

Problem Statement-5 Write a PHP program to create a database and a table using
Mysqli.

Objective: To understand how to create database and a table using Mysqli

Source Code-
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "db2";
$conn = new mysqli($servername,
$username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn-
>connect_error);
}
$sql = "CREATE TABLE Student (
id INT(6) PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50)
)";
if ($conn->query($sql) === TRUE) {
echo "Table Student created successfully";
} else {
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

echo "Error creating table: " . $conn-


>error;
}
$conn->close();
?>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

OUTPUT
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

PROBLEM STATEMENT-6 Create a student Registration form in PHP and


Save and Display the student Records.

Objective: To understand how to create form and save in database.


Source Code
<!DOCTYPE html>
<html lang="en">
<head>

<title>Student Registration Form</title>


</head>
<body>

<h2>Student Registration Form</h2>

<form method="post">
<label for="rollno">RollNo:</label>
<input type="number" name="rollno" required><br><br>

<label for="name">Name:</label>
<input type="text" name="name" required><br><br>

<label for="email">Email:</label>
<input type="email" name="email" required><br><br>

<label for="course">Course:</label>
<input type="text" name="course" required><br><br>

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


</form>

<?php
// Database connection
$dbHost = "localhost";
$dbUser = "root";
$dbPass = "";
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

$dbName = "student";

$conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo"Student Record<br>";
if (isset($_POST['rollno'])) {
$rollno = $_POST["rollno"];
echo "RollNo: $rollno<br>";
}
if (isset($_POST['name'])) {
$name = $_POST["name"];
echo "Name: $name<br>";
}
if (isset($_POST["email"])) {
$email = $_POST["email"];
echo "Email: $email<br>";
}
if (isset($_POST["course"])) {
$course = $_POST["course"];
echo "Course: $course<br>";
$sql = "INSERT INTO students (rollno, name, email, course) VALUES ('$rollno',
'$name', '$email', '$course')";

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


echo "Registration successful!";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}

}
$conn->close();
?>
</body>
</html>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Output
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

ProblemStatement-7: Write a PHP program to update records like course information


and roll number entered by the user in the above student registration form
Objective: To understand how to take input from user and update in mysqli database
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Registration Form</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form method="post">
<label for="rollno">RollNo:</label>
<input type="number" name="rollno" required><br><br>
<label for="name">Name:</label>
<input type="text" name="name" required><br><br>
<label for="course">Course:</label>
<input type="text" name="course" required><br><br>
<input type="submit" value="Update">
</form>

<?php
// Database connection
$dbHost = "localhost";
$dbUser = "root";
$dbPass = "";
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

$dbName = "student";
$conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo"Student Record<br>";
if (isset($_POST['rollno'])) {
$rollno = $_POST["rollno"];
echo "RollNo: $rollno<br>";
}
if (isset($_POST['name'])) {
$name = $_POST["name"];
echo "Name: $name<br>";
}
if (isset($_POST["course"])) {
$course = $_POST["course"];
echo "Course: $course<br>";
$sql = "UPDATE students SET course='$course',rollno='$rollno' WHERE
name='$name'";
if ($conn->query($sql) === TRUE) {
echo "Course and RollNo information updated successfully!";
} else {
echo "Error updating course information: " . $conn->error;
}?>
</body>
</html>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Output
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Problem Statement 8- Write a program to read customer information like c_no,


c_name, item_purchased and mob_no from customer table and display all this
information in table format on output screen.
Objective: To understand how to fetch record from mysql database

Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Customer Information</title>
</head>
<body>
<?php
$dbHost = "localhost";
$dbUser = "root";
$dbPass = "";
$dbName = "employee";
$conn = new mysqli($dbHost, $dbUser,
$dbPass, $dbName);
if ($conn->connect_error) {
die("Connection failed: " . $conn-
>connect_error);
}
$sql = "SELECT c_no, c_name,
item_purchased, mob_no FROM
customer";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

echo "<table>";
echo "<tr><th>Customer
Number</th><th>Customer
Name</th><th>Item
Purchased</th><th>Mobile
Number</th></tr>";
while($row = $result->fetch_assoc()) {
echo
"<tr><td>".$row["c_no"]."</td><td>".$ro
w["c_name"]."</td><td>".$row["item_purc
hased"]."</td><td>".$row["mob_no"]."</td
></tr>";
}
echo "</table>";
}
else {
echo "0 results";
}

$conn->close();
?>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Output
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Problem Statement9- Write a PHP program to upload an image and save in the
database.
Objective: To understand how to upload an image and save in the database.

Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Upload</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="image" id="image"><br>
<input type="submit" value="Upload Image" name="submit"><br><br>
</form>
<?php
$dbHost = "localhost";
$dbUser = "root";
$dbPass = "";
$dbName = "student";

$conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);

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

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["image"])) {


$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["image"]["name"]);
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

if (move_uploaded_file($_FILES["image"]["tmp_name"], $targetFile)) {
$imageName = basename($_FILES["image"]["name"]);
$sql = "INSERT INTO images (image_name) VALUES ('$imageName')";

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


echo "Image uploaded and information saved in the database.";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>

</body>
</html>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Output
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Problem Statement10- Write a PHP program to set a cookie on the web page for 7
days and display the message whether the cookie is set or not.

Objective: To understand how to to set a cookie on the web page.

Source Code
<!DOCTYPE html>
<?php
$cookie_name = "Ritika";
$cookie_value = "19";
setcookie($cookie_name, $cookie_value,
time() + (7 * 24 * 60 * 60), "/"); // 86400 =
1 day
?>
<html>
<body>
<?php
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie named '" . $cookie_name .
"' is not set!";
} else {
echo "Cookie '" . $cookie_name . "' is
set!<br>";
echo "Value is: " .
$_COOKIE[$cookie_name];
}
?> </body></html>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Output
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Problem Statement 11- Write a PHP program to create a session, if the user is logged
in display the message “user logged in” if the session ends display “user logged out”.

Objective: To understand how to create a session.


Source Code
<?php
// Start the session
session_start();

// Check if the user is logged in


if (isset($_SESSION['user_id'])) {
// User is logged in
echo "User logged in";
} else {
// User is logged out
echo "User logged out";
}
$_SESSION['user_id'] = 123;
header("Refresh: 5");
/*
unset($_SESSION['user_id']); // Unset the user ID when the user logs out
session_destroy();
header("Refresh: 5"); // Refresh the page after 5 seconds to see the change in status
*/
?>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Output
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Problem Statement12- Write a JavaScript program to test the first character of a


string is uppercase or not.

Objective: To understand how to use uppercase method

Source Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
</head>
<body>
<script>
function isFirstCharacterUppercase(str) {

if (str.length === 0) {
return false;
}

var firstChar = str.charAt(0);

return firstChar === firstChar.toUpperCase();


}
var inputString = prompt("Enter The String:");
if (isFirstCharacterUppercase(inputString)) {
document.write("The first character is uppercase.");
} else {
document.write("The first character is not uppercase.");
}
</script>
</body>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Output
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Problem Statement13- Write a JavaScript program to apply all mouse events on any
element.

Objective: To understand how to use mouse events.

Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Events Example</title>
<style>
#targetElement {
width: 200px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>

<div id="targetElement">Click me!</div>

<script>
var targetElement = document.getElementById('targetElement');

function handleMouseDown() {
document.write('Mouse Down');
}
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

function handleMouseUp() {
document.write('Mouse Up');
}

function handleMouseMove() {
document.write('Mouse Move');
}

function handleMouseOver() {
document.write('Mouse Over');
}

function handleMouseOut() {
document.write('Mouse Out');
}
targetElement.addEventListener('mousedown', handleMouseDown);
targetElement.addEventListener('mouseup', handleMouseUp);
targetElement.addEventListener('mousemove', handleMouseMove);
targetElement.addEventListener('mouseover', handleMouseOver);
targetElement.addEventListener('mouseout', handleMouseOut);
</script>

</body>
</html>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Output
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Problem Statement14- Write a JavaScript program to change the background color of


the web page on the onchange event.
Objective: To understand how to use onchange event.

Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color Changer</title>
</head>
<body>

<label for="colorPicker">Choose a color:</label>


<input type="color" id="colorPicker" onchange="changeBackgroundColor(event)">

<script>
function changeBackgroundColor(event) {
// Get the selected color value from the color picker input
var selectedColor = event.target.value;

// Set the background color of the body to the selected color


document.body.style.backgroundColor = selectedColor;
}
</script>

</body>
</html>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Output
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Problem Statement15- Create a student registration form with the following fields
• Username: must contain university name as a pattern
• Password: should be alphanumeric
• Phone number: starts with the digits {6,7,8,9}
• Email id: valid email address
And validate the form using javaScript as the above-mentioned
conditions.

Objective: To understand how to validate forms.

Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>

<form id="registrationForm" onsubmit="return validateForm()">


<label for="username">Username (must contain GEHU):</label>
<input type="text" id="username" name="username" required>
<span id="usernameError" class="error"></span>
<br>

<label for="password">Password (alphanumeric):</label>


<input type="password" id="password" name="password" required>
<span id="passwordError" class="error"></span>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

<br>

<label for="phoneNumber">Phone Number (starts with 6, 7, 8, or 9):</label>


<input type="text" id="phoneNumber" name="phoneNumber" required>
<span id="phoneNumberError" class="error"></span>
<br>

<label for="email">Email ID (valid email address):</label>


<input type="email" id="email" name="email" required>
<span id="emailError" class="error"></span>
<br>

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


</form>

<script>
function validateForm() {
document.getElementById("usernameError").textContent = "";
document.getElementById("passwordError").textContent = "";
document.getElementById("phoneNumberError").textContent = "";
document.getElementById("emailError").textContent = "";
var username = document.getElementById("username").value;
if (!username.includes("GEHU")) {
document.getElementById("usernameError").textContent = "Username must
contain GEHU";
return false;
}
var password = document.getElementById("password").value;
if (!/^[a-zA-Z0-9]+$/.test(password)) {
document.getElementById("passwordError").textContent = "Password should be
alphanumeric";
return false;
}
var phoneNumber = document.getElementById("phoneNumber").value;
if (!/^[6-9]\d{9}$/.test(phoneNumber)) {
document.getElementById("phoneNumberError").textContent = "Phone Number
should start with 6, 7, 8, or 9";
return false;
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

}
var email = document.getElementById("email").value;
if (!isValidEmail(email)) {
document.getElementById("emailError").textContent = "Invalid email address";
return false;
}

return true;
}

function isValidEmail(email) {
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
}
</script>

</body>
</html>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Output
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Problem Statement16- Write a JavaScript program to display the current date and
time in the following format
Date: date/month/year
Time: hour/minute/second
Objective: To understand how to use Date Object

Source Code
<!DOCTYPE html>
<html>
<head>
<title>Current Date and Time</title>
<script>

function displayDateTime() {

var dtString = new Date();


document.write(dtString + "<br>");
var dt = new Date();
var dd = dt.getDate();
var mm = dt.getMonth() + 1;
var yy = dt.getFullYear();
document.write(dd + "/" + mm + "/" + yy + "<br>");
var hh = dt.getHours();
var mi = dt.getMinutes();
var ss = dt.getSeconds();
document.write(hh + "/" + mi + "/" + ss);
}
displayDateTime();
</script>
</head>
<body>
</body>
</html>
Name: Ritika Kumari Sub :Full Stack Dev Practical
Roll no: 2301300/48 Sub Code: PMC 101
Course: MCA sec A

Output

You might also like