Scribd
Upload
2 views20 pages

Akash Record

The document outlines various experiments focused on web development, including designing webpages with CSS, creating dynamic webpages using JavaScript and PHP, and implementing CRUD operations with MongoDB. Each experiment includes specific aims, descriptions, and code examples demonstrating the concepts. The document serves as a comprehensive guide for learning web technologies and server-side scripting.

Uploaded by

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

Akash Record

The document outlines various experiments focused on web development, including designing webpages with CSS, creating dynamic webpages using JavaScript and PHP, and implementing CRUD operations with MongoDB. Each experiment includes specific aims, descriptions, and code examples demonstrating the concepts. The document serves as a comprehensive guide for learning web technologies and server-side scripting.

Uploaded by

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

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" });

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy