Experiment -2
Aim: Design Webpage using CSS
Description:
Apply styling to your HTML page using CSS for colors, fonts,
layouts, and responsive designs. It helps enhance the visual
appearance of your webpage.
Code:
Inline CSS
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body style="font-family: Arial; background-color: #f9f9f9;
color: #333;">
<h1 style="color: #2E86C1;">Welcome to My
Webpage</h1>
<p style="font-size: 18px;">This is a simple static page using
minimal HTML components.</p>
<h2 style="color: #117A65;">About</h2>
<p>We create web solutions that help businesses grow.</p>
<h2 style="color: #117A65;">Services</h2>
<p>
- Web Design<br>
- App Development<br>
- SEO
</p>
<p style="font-style: italic;">Contact us at:
example@email.com</p>
</body>
</html>
Internal CSS
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
body {
font-family: Arial;
background-color: #f9f9f9;
color: #333;
}
h1 {
color: #2E86C1;
}
h2 {
color: #117A65;
}
p{
font-size: 16px;
}
.contact {
font-style: italic;
}
</style>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a simple static page using minimal HTML
components.</p>
<h2>About</h2>
<p>We create web solutions that help businesses grow.</p>
<h2>Services</h2>
<p>
- Web Design<br>
- App Development<br>
- SEO
</p>
<p class="contact">Contact us at: example@email.com</p>
</body>
</html>
External CSS
body {
font-family: Arial;
background-color: #f9f9f9;
color: #333;
}
h1 {
color: #2E86C1;
}
h2 {
color: #117A65;
}
p{
font-size: 16px;
}
.contact {
font-style: italic;
}
Experiment-3
Aim: Create Dynamic Webpage using JavaScript
Description:
Use JavaScript to add interactivity like form validation,
animations, and dynamic content. This brings your webpage to
life with real-time user engagement
Code:
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h2>Login</h2>
<form onsubmit="return checkLogin()">
<label for="email">Email:</label><br>
<input type="text" id="email"><br>
<div id="emailError"></div><br>
<label for="password">Password:</label><br>
<input type="password" id="password"><br>
<div id="passwordError"></div><br>
<input type="submit" value="Login"><br><br>
<div id="status"></div>
</form>
<script>
function checkLogin(){
let e=document.getElementById("email").value.trim();
let p=document.getElementById("password").value.trim();
let ee=document.getElementById("emailError");
let pe=document.getElementById("passwordError");
let s=document.getElementById("status");
ee.textContent=""; pe.textContent=""; s.textContent="";
if(e===""||p===""){if(e==="")ee.textContent="Email
required.";if(p==="")pe.textContent="Password
required.";return false;}
if(e==="test@example.com" && p==="123456"){
s.textContent="Login successful!";
}else{
s.textContent="Invalid email or password.";
}
return false;
}
</script>
</body>
</html>
Experiment 4
Aim: Develop Dynamic Webpage Using PHP Script
Description:
Build a webpage that generates dynamic content using PHP
scripting on the server-side. Learn how PHP integrates with
HTML to respond to user inputs
Code:
<?php
$email = $_POST['email'];
$password = $_POST['password'];
$age = (int)$_POST['age'];
$gender = $_POST['gender'];
$isagree = isset($_POST['agree']) ? $_POST['agree'] : false;
if (empty($email) || empty($password) || empty($age) ||
empty($gender) || !$isagree) {
echo "Error: All fields must be filled out, and you must agree
to the terms.";
} else {
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Error: Invalid email format.";
}
else if (strlen($password) < 6) {
echo "Error: Password must be at least 6 characters long.";
}
else if ($age < 18 || $age > 100) {
echo "Error: Age must be between 18 and 100.";
}
else if (!in_array($gender, ['male', 'female'])) {
echo "Error: Please select a valid gender.";
}
else {
if ($email == "omkar@123.com" && $password ==
"password" && $age == 19 && $gender == "male" &&
$isagree) {
echo "Validated";
} else {
echo "Error: Invalid credentials.";
}
}
}
?>
Experiment -5
Aim: Develop PHP application with Database connection
Description: Create a data-driven application by connecting
PHP with MySQL. Perform operations like data insertion,
retrieval, and display on the web.
Code:
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$conn = mysqli_connect($servername, $username,
$password);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully <br> ";
$sql1 = "CREATE DATABASE myDB";
if ($conn->query($sql1) === TRUE) {
echo "Database created successfully";
$using = "USE myDB";
mysqli_query($conn,$using);
$sql = "CREATE TABLE MyGuests (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50),
reg_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON
UPDATE CURRENT_TIMESTAMP
)";
}
if (mysqli_query($conn, $sql)) {
echo "Table MyGuests created successfully <br>";
}
else {
echo "Error creating table: " . mysqli_error($conn);
}
$conn->close();
?>
Experiment 8
Aim: Implement HTTP methods using Flask
Description:
Learn to handle HTTP requests like GET, POST, PUT, and
DELETE in a Flask application. This lays the foundation for
building web APIs.
Code:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Forms</h1>
<form action="/fetch" method="post">
<label for="user">Enter Your Username</label><br>
<input type="text" name="user" id="user"><br>
<label for="pass">Enter Your Password</label><br>
<input type="password" name="pass" id="pass"><br>
<button type="submit">Submit</button>
</form>
<form action="/submit" method="get">
<label for="phone">Enter Your Phone</label><br>
<input type="tel" name="phone" id="phone"><br>
<button type="submit">submit</button><br>
</form>
</body>
</html>
App.js
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route("/")
def root():
return render_template("index.html")
@app.route("/fetch", methods=['GET', 'POST'])
def form():
if request.method == 'POST':
name = request.form.get('user', 'Guest')
return f"Hai {name}! Your Form Submitted Successfully"
return "Please submit the form."
@app.route("/submit", methods=['GET'])
def submitter():
phone = request.args.get('phone', 'Not provided')
return f'Your Phone is {phone}'
if __name__ == "__main__":
app.run(debug=True)
Experiment 9
Aim: Implement Cookies and Sessions concept using Flask
Description:
Understand how to manage user sessions in Flask for login
systems and state management. This is key for maintaining
user data across requests
Code:
App.py
from flask import Flask, render_template, request, redirect,
url_for, session, make_response
app = Flask(__name__)
app.secret_key = 'super_secret_key' # Needed for sessions
@app.route('/')
def index():
username = request.cookies.get('username')
return render_template('index.html', username=username)
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
username = request.form['username']
session['user'] = username
resp = make_response(redirect(url_for('profile')))
resp.set_cookie('username', username)
return resp
return render_template('login.html')
@app.route('/profile')
def profile():
if 'user' in session:
user = session['user']
return render_template('profile.html', username=user)
return redirect(url_for('login'))
@app.route('/logout')
def logout():
session.pop('user', None)
resp = make_response(redirect(url_for('index')))
resp.set_cookie('username', '', expires=0)
return resp
if __name__ == '__main__':
app.run(debug=True)
templates/index.html
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>Welcome!</h1>
{% if username %}
<p>Hello, {{ username }} (from cookie)!</p>
<a href="/profile">Go to Profile</a> | <a
href="/logout">Logout</a>
{% else %}
<p>You are not logged in.</p>
<a href="/login">Login</a>
{% endif %}
</body>
</html>
Templates/login.html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<h2>Login Page</h2>
<form method="POST">
<label>Username:</label>
<input type="text" name="username" required>
<button type="submit">Login</button>
</form>
</body>
</html>
Templates/profile.html
<!DOCTYPE html>
<html>
<head>
<title>Profile</title>
</head>
<body>
<h1>Welcome, {{ username }}!</h1>
<p>This is your profile page.</p>
<a href="/logout">Logout</a>
</body>
</html>
Experiment 10
Aim: Develop CRUD operations using MongoDB
Description:
Perform Create, Read, Update, and Delete operations in
MongoDB using a suitable backend. This teaches how to handle
data in a NoSQL environment.
Code:
1. Create (Insert)
Used to add data to a collection.
Using Mongo Shell:
db.students.insertOne({ name: "John", age: 21, course: "CS" });
To insert multiple documents:
db.students.insertMany([
{ name: "Alice", age: 22, course: "IT" },
{ name: "Bob", age: 20, course: "ECE" }
]);
2. Read (Find)
Used to fetch data from a collection.
Find all documents:
db.students.find();
Find with a filter:
db.students.find({ age: 21 });
Find one document:
db.students.findOne({ name: "John" })
3. Update
Used to modify existing documents.
Update one document:
db.students.updateOne(
{ name: "John" },
{ $set: { age: 22 } }
);
Update multiple documents:
db.students.updateMany(
{ course: "CS" },
{ $set: { course: "CSE" } }
);
4. Delete
Used to remove documents.
Delete one document:
db.students.deleteOne({ name: "Bob" });
Delete multiple documents:
db.students.deleteMany({ course: "IT" });
