Web Assignment V.
Sai Amrutha
21341a4563
UNIT -1
1. Create an HTML page with any required JavaScript that takes a number from text field
in the range of 0 to 999 and shows it in words. It should not accept four and above
digits, alphabets and special characters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number to Words Converter</title>
<style>
#inputField {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}
#outputField {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
margin-top: 10px;
}
#convertButton {
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<label for="inputField">Enter a number (0-999):</label>
<input type="text" id="inputField" oninput="validateInput()">
</div>
<div>
1
Web Assignment V. Sai Amrutha
21341a4563
<button id="convertButton" onclick="convertNumber()">Convert to
Words</button>
</div>
<div>
<label for="outputField">Number in Words:</label>
<output id="outputField"></output>
</div>
<script>
function validateInput() {
const inputField = document.getElementById('inputField');
const inputValue = inputField.value.trim();
if (inputValue.length > 3 || isNaN(inputValue)) {
inputField.value = '';
alert('Please enter a valid number between 0 and 999.');
}
}
function convertNumber() {
const inputField = document.getElementById('inputField');
const outputField = document.getElementById('outputField');
const inputValue = parseInt(inputField.value);
if (!isNaN(inputValue) && inputValue >= 0 && inputValue <= 999) {
const numberInWords = toWords(inputValue);
outputField.textContent = numberInWords;
} else {
alert('Please enter a valid number between 0 and 999.');
}
}
function toWords(number) {
const ones = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
const tens = ['', 'ten', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty',
'ninety'];
const hundreds = ['hundred', 'thousand'];
let words = '';
if (number === 0) {
return 'zero';
2
Web Assignment V. Sai Amrutha
21341a4563
}
if (number < 100) {
if (number < 10) {
words = ones[number];
} else {
words = tens[Math.floor(number / 10)] + '-' + ones[number % 10];
}
} else if (number < 1000) {
words = ones[Math.floor(number / 100)] + ' ' + hundreds[0] + ' ';
number %= 100;
if (number !== 0) {
words += 'and ' + toWords(number);
}
}
return words;
}
</script>
</body>
</html>
2. Design Online Examination System like Test page and Result page Apply different font
styles, font families, font colors, animations and other formatting styles to the above
static web pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Examination System</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 14px;
background-color: #f2f2f2;
}
header {
text-align: center;
3
Web Assignment V. Sai Amrutha
21341a4563
font-family: 'Times New Roman', serif;
font-size: 24px;
font-weight: bold;
padding: 20px;
background-color: #007bff;
color: #fff;
}
.question {
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.question-text {
font-size: 16px;
font-weight: bold;
}
.answer-options {
margin-top: 10px;
}
.answer-option {
margin-bottom: 5px;
}
input[type="radio"] {
margin-right: 5px;
}
.submit-button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
.submit-button:hover {
background-color: #28a745;
}
4
Web Assignment V. Sai Amrutha
21341a4563
/* Animation */
.question-text {
animation: fade-in 1s ease-in-out;
}
.answer-options {
animation: slide-in-top 1s ease-in-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slide-in-top {
from { transform: translateY(-100px); opacity: 0; }
to { transform: translateY(0px); opacity: 1; }
}
</style>
</head>
<body>
<header>Online Examination System</header>
<div class="question">
<p class="question-text">Home</p>
</body>
</html>
3. Discuss in detailed about various types of list with suitable examples each
Certainly, here's a simplified explanation of different types of lists in HTML:
1. Unordered Lists (Bulleted Lists)
5
Web Assignment V. Sai Amrutha
21341a4563
Used for items in no specific order
Represented with bullets or symbols
HTML code: ul and li tags
Example:
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
2. Ordered Lists (Numbered Lists)
Used for items in a specific order
Represented with numbers or letters
HTML code: ol and li tags
Example:
HTML
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
3. Description Lists (Definition Lists)
Used for terms and their definitions
Terms are bold, definitions are indented
HTML code: dl, dt, and dd tags
Example:
HTML
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>
4. Explain various Browser storage mechanisms with suitable examples.
Sure, here's a concise summary of the main browser storage mechanisms:
Browser Storage Mechanisms:
Cookies: Small text files stored by websites for user preferences, login information,
or tracking data.
LocalStorage: Persistent key-value storage for application data or user preferences
across sessions.
SessionStorage: Temporary key-value storage for data needed during a single
session, such as form data.
6
Web Assignment V. Sai Amrutha
21341a4563
IndexedDB: Advanced indexed database for larger amounts of structured data, like
offline storage.
5. Write program to draw the following figures on HTML canvas
a) Circle b) Rectangle c) Square
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drawing Shapes</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a circle
ctx.beginPath();
ctx.arc(100, 50, 30, 0, 2 * Math.PI);
ctx.fillStyle = '#ff0000';
ctx.fill();
// Draw a rectangle
ctx.beginPath();
ctx.rect(200, 50, 100, 50);
7
Web Assignment V. Sai Amrutha
21341a4563
ctx.fillStyle = '#0000ff';
ctx.fill();
// Draw a square
ctx.beginPath();
ctx.rect(350, 50, 50, 50);
ctx.fillStyle = '#00ff00';
ctx.fill();
</script>
</body>
</html>
UNIT -2
1. Make the static pages Responsive and attractive using Bootstrap components to view
in Medium screens and extra-large screens
2. Write program to perform auto validation of registration page using jQuery
dynamically.
$(document).ready(function() {
$('#firstName').blur(function() {
if ($('#firstName').val() === '') {
$('#firstNameError').html('Please enter your first name');
} else {
$('#firstNameError').html('');
}
});
});
3. Implement various selectors of jQuery
jQuery provides a variety of selectors that you can use to select elements in the DOM.
Here are some of the most common selectors:
Element selectors: These selectors select elements by their tag name, such as p, div, or
input.
Id selectors: These selectors select elements by their id attribute, such as #myId.
Class selectors: These selectors select elements by their class attribute, such as
.myClass.
8
Web Assignment V. Sai Amrutha
21341a4563
Descendant selectors: These selectors select elements that are descendants of other
elements, such as p > .myClass.
Child selectors: These selectors select elements that are immediate children of other
elements, such as p .myClass.
Attribute selectors: These selectors select elements by their attributes, such as
input[type="text"]
4. Design student course registration form using bootstrap components
<form class="container">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" class="form-control" id="firstName" placeholder="Enter your
first name">
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" class="form-control" id="lastName" placeholder="Enter your
last name">
</div>
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" class="form-control" id="email" placeholder="Enter your
email address">
</div>
<div class="form-group">
<label for="course">Course:</label>
<select class="form-control" id="course">
<option>Select a course</option>
<option value="1">Web Development</option>
<option value="2">Graphic Design</option>
<option value="3">Software Engineering</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
5. Discuss about bootstrap icons and Jumbotron with examples
Bootstrap Icons:
A collection of over 1,500 SVG icons for web pages.
9
Web Assignment V. Sai Amrutha
21341a4563
Include the Bootstrap icons CSS file to use them.
Apply icons using the bi class prefix and icon name.
Example: <i class="bi bi-check"></i> (check icon)
Jumbotron:
A large, prominent call-to-action component.
Typically used for marketing messages or hero units.
Create a Jumbotron using the jumbotron class.
Example:
HTML
<div class="jumbotron">
<h1>Jumbotron Heading</h1>
<p>Jumbotron text</p>
<button class="btn btn-primary">Learn More</button>
</div>
UNIT -3
1. Write a PHP to connect to the database, Insert the details of the student who registered
through Online Examination System student login page including photograph
<?php
// Connect to the database
$dbHost = "localhost";
$dbName = "online_examination";
$dbUsername = "root";
$dbPassword = "";
$conn = new mysqli($dbHost, $dbName, $dbUsername, $dbPassword);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Insert student details
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
$email = $_POST['email'];
$course = $_POST['course'];
$photograph = $_FILES['photograph']['name'];
10
Web Assignment V. Sai Amrutha
21341a4563
$sql = "INSERT INTO students (firstName, lastName, email, course, photograph)
VALUES ('$firstName', '$lastName', '$email', '$course', '$photograph')";
if ($conn->query($sql) === TRUE) {
echo "New student record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
// Upload photograph
if (isset($_FILES['photograph'])) {
$targetDir = "uploads/";
$targetFilePath = $targetDir . basename($_FILES['photograph']['name']);
if (move_uploaded_file($_FILES['photograph']['tmp_name'], $targetFilePath)) {
echo "Photograph uploaded successfully";
} else {
echo "Error uploading photograph";
}
}
// Close connection
$conn->close();
?>
2. Explain PHP exception handling with suitable program
try {
// Code that may throw an exception
} catch (Exception $e) {
// Handle the exception
echo "An error occurred: " . $e->getMessage();
}
try {
$result = 10 / 0;
echo "Result: " . $result;
} catch (DivisionByZeroError $e) {
echo "Cannot divide by zero";
}
3. Discuss about PHP Larvel frame work and benefits.
11
Web Assignment V. Sai Amrutha
21341a4563
PHP Laravel is a popular open-source PHP framework for web development. It
provides a robust and expressive syntax, along with a rich ecosystem of tools and
libraries, making it a powerful and flexible choice for building web applications.
Here are some of the key benefits of using PHP Laravel:
MVC Architecture: Laravel follows the Model-View-Controller (MVC) architecture,
which promotes code separation and maintainability.
Eloquent ORM: Laravel provides Eloquent, an object-relational mapper (ORM) that
simplifies database interactions.
Routing: Laravel's routing system makes it easy to define and handle URL requests.
Blade Templating: Laravel uses Blade, a templating engine that provides expressive
and flexible templating syntax.
Unit Testing: Laravel encourages and facilitates unit testing, promoting code quality
and maintainability.
Community and Resources: Laravel has a large and active community, with extensive
documentation and tutorials available.
4. Write PHP program to search the student marks from results table
<?php
// Connect to the database
$dbHost = "localhost";
$dbName = "online_examination";
$dbUsername = "root";
$dbPassword = "";
$conn = new mysqli($dbHost, $dbName, $dbUsername, $dbPassword);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Search student marks
$searchKeyword = $_POST['searchKeyword'];
$sql = "SELECT * FROM results WHERE studentId LIKE '%$searchKeyword%' OR
subject LIKE '%$searchKeyword%'";
12
Web Assignment V. Sai Amrutha
21341a4563
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "Student ID: " . $row['studentId’]
5. Write a PHP program, assuming three users user1, user2, user3 and having the
passwords pwd1, pwd2 and pwd3 respectively. Create a Cookie and add these three
user ID‟s and passwords to this Cookie. Read the user id and passwords entered in the
Login form and authenticate with the values (user id and passwords) available in the
cookies.
UNIT -4
1. Discuss various HTTP methods and there usage.
HTTP methods, also known as HTTP request methods, are the foundation of
communication between a web client and a web server. These methods specify the
desired action to be performed on a specific resource. The most common HTTP
methods are:
GET: Retrieves data from a specified resource.
POST: Submits data to be processed to a specified resource.
PUT: Updates an existing resource with the provided data.
DELETE: Removes a specified resource.
HEAD: Retrieves the header information of a resource without downloading the body.
OPTIONS: Describes the HTTP methods supported by the server for a specified
resource.
2. Write program to send mail to user using flask.
MAIL_SERVER = "smtp.gmail.com"
MAIL_PORT = 587
MAIL_USE_TLS = True
MAIL_USERNAME = "your_email_address@gmail.com"
MAIL_PASSWORD = "your_email_password"
from flask import Flask, render_template, request
13
Web Assignment V. Sai Amrutha
21341a4563
from flask_mail import Mail
app = Flask(__name__)
mail = Mail(app)
@app.route("/send-email", methods=["POST"])
def send_email():
recipient_email = request.form["email"]
subject = request.form["subject"]
message = request.form["message"]
msg = Message(subject, sender="noreply@example.com",
recipients=[recipient_email])
msg.body = message
mail.send(msg)
return render_template("email_sent.html")
3. Illustrate the SQLlite database connection with suitable example in Flask
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///database.db"
db = SQLAlchemy(app)
4. Explain Building Templates with include and Inheritance in Jinja2
Jinja2 is a popular templating language for web development. It provides powerful
features for building dynamic and reusable templates.
include: The include tag allows you to embed one template into another. This is useful
for sharing common elements across different pages.
Inheritance: Jinja2 supports inheritance between templates. This allows you to create a
base template that defines shared layout elements and then inherit from that base
template to create specific page templates.
5. Explain the importance of Virtual environment and how to create it.
14
Web Assignment V. Sai Amrutha
21341a4563
A virtual environment is an isolated Python environment that allows you to manage
project dependencies without affecting your global Python installation. This is
particularly important when working on multiple projects with different dependency
requirements.
pip install virtualenv
virtualenv venv
15
