Scribd
Upload
18 views9 pages

Lab 6 - (2448001)

Uploaded by

aadityakumar.dhaka
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
18 views9 pages

Lab 6 - (2448001)

Uploaded by

aadityakumar.dhaka
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/ 9

LAB 6: FULL STACK WEB DEVELOPMENT (28/10/2024)

ROLL NO: 2448001

Using appropriate routing, write client-side (html) and server-side (python) code for the
following:
1. Accept a number from a user through a form using 'get' method. For example say 8 (or say
11). Name this page as "input.html".
If the number is even then display on another html page "result.html":
You entered an even number 8.
Else if the number is odd then display:
You entered an odd number 11.
On result.html create a hyperlink back to "input.html" via server routing.

Ans:
CODE: (input.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Input Page</title>
</head>
<body>
<h1> Enter a number: </h1>
<form action ="/result" method ="get">
<label for = "number"><b>Number: </b></label>
<input type="number" name="number" required><br>
<br><button type="submit">Submit</button>
</form>
</body>
</html>
OUTPUT:

CODE: (result.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Result Page</title>
</head>
<body>
<h1>Result</h1>
{% if number % 2 == 0 %}
<p> You entered an even number {{number}}. </p>
{% else %}
<p> You entered an odd number {{number}}. </p>
{% endif %}
<a href="/input">Back to Input Page</a>
</body>
</html>
OUTPUT :

CODE : (myserver.py)

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/input')
def input():
return render_template("input.html")

@app.route('/result', methods=['GET'])
def result():
number = int(request.args.get("number"))
return render_template("result.html",number=number)

if __name__ == '__main__':
app.run(debug=True)

Q2. On "readvalues.html" page read two numbers via text boxes and a mathematical
operation (addition, subtraction, multiplication, division) via radio button using form 'post'
method. Calculate the result based on the user's choice of operation and show the result in
"caculator.html" as below:
For example if given numbers are 2, 3 and the operation is multiplication then show:
2*3=6
For example if given numbers are 2, 0 and operation is division then show:
Division by zero is not possible !
On calculator.html create a hyperlink back to "readvalues.html" via server routing.
NOTE: use proper type conversions for float values.

Ans:
CODE (readvalues.html)

<!-- templates/readvalues.html -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator Input</title>
</head>
<body>
<form action="/calculate" method="POST">
<label for="num1">Number 1:</label>
<input type="number" id="num1" name="num1" required><br><br>
<label for="num2">Number 2:</label>
<input type="number" id="num2" name="num2" required><br><br>

<label>Operation:</label><br>
<input type="radio" id="add" name="operation" value="add" required>
<label for="add">Addition</label><br>

<input type="radio" id="subtract" name="operation" value="subtract">


<label for="subtract">Subtraction</label><br>

<input type="radio" id="multiply" name="operation" value="multiply">


<label for="multiply">Multiplication</label><br>

<input type="radio" id="divide" name="operation" value="divide">


<label for="divide">Division</label><br><br>

<button type="submit">Calculate</button>
</form>
</body>
</html>

OUTPUT
CODE (calculator.html)

<!-- templates/calculator.html -->


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator Result</title>
</head>
<body>
<h2>Calculation Result</h2>
<p>{{ result }}</p>
<a href="/readvalues">Back to Calculator</a>
</body>
</html>

OUTPUT :
CODE (myserver.py)

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/readvalues')
def readvalues():
return render_template('readvalues.html')

@app.route('/calculate', methods=['POST'])
def calculate():
# Retrieve form data
num1 = float(request.form.get('num1'))
num2 = float(request.form.get('num2'))
operation = request.form.get('operation')

# Perform calculation based on selected operation


if operation == 'add':
result = f"{num1} + {num2} = {num1 + num2}"
elif operation == 'subtract':
result = f"{num1} - {num2} = {num1 - num2}"
elif operation == 'multiply':
result = f"{num1} * {num2} = {num1 * num2}"
elif operation == 'divide':
if num2 == 0:
result = "Division by zero is not possible!"
else:
result = f"{num1} / {num2} = {num1 / num2}"
else:
result = "Invalid operation!"

# Render the result on calculator.html


return render_template('calculator.html', result=result)

if __name__ == '__main__':
app.run(debug=True)

You might also like