D.A.

V PUBLIC SCHOOL
AUNDH, PUNE

(SESSION 2024-2025)

MOBILE STORE USING

DATAFRAMES

SUBMITTED BY:-

AKSHAY KARTHIK AKELLA

XII – B
ROLL NO. –

1
2
 CONTENTS :-

● Certificate 2
● Code 4
● Output 22
● Bibliography 23

File Hierarchy and CSV file

3
 main.py

import pandas as pd

import matplotlib.pyplot as plt

from flask import Flask, render_template, request, redirect, url_for

import random

global df
df = pd.read_csv('data.csv')
app = Flask(__name__)
global customer_name

@app.route('/', methods=['POST', 'GET'])

def name():
global customer_name
if request.method == 'POST':
customer_name = request.form.get("name")
return redirect(url_for('home'))
return render_template('index.html', redirect_url="/home")

@app.route('/home')
def home():
rand_ind = random.sample(range(len(df)), 3)
mobile_names = df.iloc[rand_ind][["phone_model", "price_usd", "ram",
"storage", "battery"]].values.tolist()
print(mobile_names)

max_row = df.loc[df['price_usd'].idxmax()]
min_row = df.loc[df['price_usd'].idxmin()]
result = [[max_row['phone_model'], max_row['price_usd'], max_row['ram'],
max_row['storage'], max_row['battery'], "most expensive", "warning"],
[min_row['phone_model'], min_row['price_usd'], min_row['ram'],
min_row['storage'], min_row['battery'], "cheapest deal", "success"]]

print(result)
return render_template('home.html', rand_mobs=mobile_names,
heir_mobs=result)

@app.route('/search', methods=['POST', 'GET'])

def search():

4
 df_filtered = None
if request.method == 'POST':
phone_brand = request.form.get('brand')
price_range = request.form.get('price')
sort_by = request.form.get('sort')

df_filtered = df[df['phone_brand'] == phone_brand]

# print(df_filtered)

price_range_values = price_range.split('-')
min_price = int(price_range_values[0])
max_price = int(price_range_values[1])
df_filtered = df_filtered[(df_filtered['price_usd'] >= min_price) &
(df_filtered['price_usd'] <= max_price)]
# print(df_filtered)

if sort_by == 'asc':
df_filtered = df_filtered.sort_values(by='price_usd',
ascending=True)
elif sort_by == 'desc':
df_filtered = df_filtered.sort_values(by='price_usd',
ascending=False)

df_filtered = df_filtered.loc[:, ["phone_model", "price_usd", "ram",

"storage", "battery"]].values.tolist()

brands = df['phone_brand'].unique()
if df_filtered is None:
return render_template('search.html', brand_names=brands)
else:
return render_template('search.html', brand_names=brands,
phones=df_filtered)

global cart
cart = pd.DataFrame(columns=["name", "price", "ram", "storage", "battery",
"quantity"])

@app.route('/add_to_cart', methods=['POST'])
def add_to_cart():
item = {
"name": request.form.get("name"),
"price": request.form.get("price"),
"ram": int(request.form.get("ram")),
"storage": int(request.form.get("storage")),
"battery": int(request.form.get("battery")),
"quantity":1
}
cart.loc[len(cart)] = item

5
 return redirect(url_for('home'))

@app.route('/add', methods=['POST'])
def add():
print('check')
item = {
"name": request.form.get("name"),
"price": request.form.get("price"),
"ram": int(request.form.get("ram")),
"storage": int(request.form.get("storage")),
"battery": int(request.form.get("battery")),
"quantity":int(request.form.get("quantity"))
}
cart.loc[len(cart)] = item
return redirect(url_for('search'))

@app.route('/cart')
def mycart():
print(cart)
cart_names = cart.loc[:, ["name", "price", "ram", "storage", "battery",
"quantity"]].values
subtotal = 0
total = 0
shipping = 0

for name, price, ram, storage, battery, quantity in cart_names:

subtotal += float(price)*int(quantity)
shipping += 10*int(quantity)
subtotal = round(subtotal, 2)
discount = round(0.1*subtotal, 2)
total = round(subtotal + shipping - discount, 2)

print(cart)
print(cart_names)
return render_template('cart.html', cart_mobs=cart_names,
subtotal=subtotal, shipping=shipping, total=total, discount=discount)

@app.route('/remove_item', methods=['POST'])
def remove_item():
global cart
phone_name = request.form.get('phone_name')
if phone_name in cart['name'].values:
cart = cart.loc[cart['name'] != phone_name]

return redirect(url_for('mycart'))

6
@app.route('/update_quantity', methods=['POST'])
def update_quantity():
global cart

phone_name = request.form.get('phone_name')
new_quantity = int(request.form.get('quantity'))
if phone_name in cart['name'].values:
cart.loc[cart['name'] == phone_name, 'quantity'] = new_quantity
return redirect(url_for('mycart'))

@app.route('/thanks')
def thanks():
global cart
cart = cart.iloc[0:0]
print(cart)
return render_template('thankyou.html', cust=customer_name)

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

cart.html
<!DOCTYPE html>

<html>
<head>
<title>Shopping Cart</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Use only Bootstrap 4 -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></scrip
t>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></sc
ript>
<style>
/* Navbar fixes */

7
.navbar {
margin-bottom: 50px;
border-radius: 0;
}

.navbar-nav {
margin-left: 0;
padding-left: 0;
}

.navbar-nav li {
padding: 0;
margin-right: 10px;
}

.navbar-nav > li > a {

padding-top: 14px;
padding-bottom: 14px;
}

.navbar-nav li a {
margin-right: 0;
}

.jumbotron {
margin-bottom: 0;
}

footer {
background-color: #f2f2f2;
padding: 25px;
}

.shopping-cart {
padding-bottom: 50px;
font-family: 'Montserrat', sans-serif;
}

.shopping-cart.dark {
background-color: #f6f6f6;
}

.shopping-cart .content {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
background-color: white;
}

.shopping-cart .block-heading {

8
 padding-top: 50px;
margin-bottom: 40px;
text-align: center;
}

.shopping-cart .block-heading p {
text-align: center;
max-width: 420px;
margin: auto;
opacity: 0.7;
}

.shopping-cart .block-heading h1,

.shopping-cart .block-heading h2,
.shopping-cart .block-heading h3 {
margin-bottom: 1.2rem;
color: #3b99e0;
}

.shopping-cart .items {
margin: auto;
}

.shopping-cart .items .product {

margin-bottom: 20px;
padding-top: 20px;
padding-bottom: 20px;
}

.shopping-cart .items .product .info {

padding-top: 0px;
text-align: center;
}

.shopping-cart .items .product .info .product-name {

font-weight: 600;
}

.shopping-cart .items .product .info .product-name .product-info {

font-size: 14px;
margin-top: 15px;
}

.shopping-cart .items .product .info .product-name .product-info

.value {
font-weight: 400;
}

9
.shopping-cart .items .product .info .quantity .quantity-input {
margin: auto;
width: 80px;
}

.shopping-cart .items .product .info .price {

margin-top: 15px;
font-weight: bold;
font-size: 22px;
}

.shopping-cart .summary {
border-top: 2px solid #5ea4f3;
background-color: #f7fbff;
height: 100%;
padding: 30px;
}

.shopping-cart .summary h3 {
text-align: center;
font-size: 1.3em;
font-weight: 600;
padding-top: 20px;
padding-bottom: 20px;
}

.shopping-cart .summary .summary-item:not(:last-of-type) {

padding-bottom: 10px;
padding-top: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.shopping-cart .summary .text {

font-size: 1em;
font-weight: 600;
}

.shopping-cart .summary .price {

font-size: 1em;
float: right;
}

.shopping-cart .summary button {

margin-top: 20px;
}

@media (min-width: 768px) {

.shopping-cart .items .product .info {

10
 padding-top: 25px;
text-align: left;
}

.shopping-cart .items .product .info .price {

font-weight: bold;
font-size: 22px;
top: 17px;
}

.shopping-cart .items .product .info .quantity {

text-align: center;
}

.shopping-cart .items .product .info .quantity .quantity-input {

padding: 4px 10px;
text-align: center;
}
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<h1>Mobile Store</h1>
</div>
</div>

<nav class="navbar navbar-expand-lg navbar-light bg-dark">

<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggler" data-
toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link text-white"
href="/home">Home</a></li>
<li class="nav-item"><a class="nav-link text-white"
href="/search">Search</a></li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a class="nav-link text-white"
href="/cart"><i class="fas fa-shopping-cart"></i> Cart</a></li>
</ul>
</div>

11
 </div>
</nav>
<main class="page">
<section class="shopping-cart dark">
<div class="container">
<div class="block-heading">
<h2>Checkout</h2>
<p>Verify everything before checkout. Happy Shopping!!</p>
</div>
<div class="content">
{% if cart_mobs|length == 0 %}
<div class="alert alert-warning text-center" role="alert">
Your cart is empty.
</div>
{% elif cart_mobs|length != 0 %}
<div class="row">
<div class="col-md-12 col-lg-8">
<div class="items">
{%for name,price,ram,storage,battery,quantity in cart_mobs%}
<div class="product" id="{{name}}">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-8">
<div class="info">
<div class="row">
<div class="col-md-5 product-name">
<div class="product-name">
<a href="#">{{name}}</a>
<div class="product-info">
<div>Battery: <span class="value">{{battery}}mAh</span></div>
<div>RAM: <span class="value">{{ram}}GB</span></div>
<div>Memory: <span class="value">{{storage}}GB</span></div>
</div>
</div>
</div>
<div class="col-md-4 quantity">
<form action="/update_quantity" method="POST">
<label for="quantity">Quantity:</label>
<input id="quantity" name="quantity" min="1" type="number"
value="{{quantity}}" class="form-control quantity-input" />
<input type="hidden" name="phone_name" value="{{name}}">
<button type="submit" class="btn btn-primary btn-sm mt-2">Update</button>
</form>
<form action="/remove_item" method="POST">
<input type="hidden" name="phone_name" value="{{name}}">
<button type="submit" class="btn btn-danger btn-sm mt-2">
<i class="fas fa-trash"></i> Remove
</button>

12
 </form>
</div>
<div class="col-md-3 price">
<span>${{price}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-12 col-lg-4">
<div class="summary">
<h3>Summary</h3>
<div class="summary-item"><span class="text">Subtotal</span><span
class="price">{{subtotal}}</span></div>
<div class="summary-item"><span class="text">Discount</span><span
class="price">{{discount}}</span></div>
<div class="summary-item"><span class="text">Shipping</span><span
class="price">{{shipping}}</span></div>
<div class="summary-item"><span class="text">Total</span><span
class="price">{{total}}</span></div>
<button type="button" class="btn btn-primary btn-lg btn-block"><a
class="text-white" href="/thanks">Checkout</a></button>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</section>
</main>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></sc
ript>
<script>
function removeItem(productId) {
const productElement = document.getElementById(productId);
productElement.remove();
}
</script>
</body>

13
</html>

home.html
<!DOCTYPE html>

<html lang="en">
<head>
<title>Mobile Store Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></scrip
t>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></sc
ript>
<style>
.navbar {
margin-bottom: 50px;
border-radius: 0;
}

.jumbotron {
margin-bottom: 0;
}
footer {
background-color: #f2f2f2;
padding: 25px;
}
</style>
</head>
<body>

<div class="jumbotron">
<div class="container text-center">
<h1>Mobile Store</h1>
<!-- <p>Mission, Vission & Values</p> -->
</div>
</div>

<nav class="navbar navbar-inverse">

14
 <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="/search">Search</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/cart"><i class="fas fa-shopping-cart"></i> Cart</a></li>
</ul>
</div>
</div>
</nav>

<div class="container">
<div class="row">

{%for phone_model,price,ram,storage,battery in rand_mobs%}

<div class="col-sm-4">
<div class="panel panel-info">
<div class="panel-heading">Random Picks</div>
<div class="panel-body">{{phone_model}}</div>
<div class="panel-body">${{price}}</div>
<div class="panel-body">{{ram}}GB</div>
<div class="panel-body">{{storage}}GB</div>
<div class="panel-body">{{battery}}mAh</div>
<div class="card-footer text-center">
<form method="POST" action="/add_to_cart">
<input type="hidden" name="name" value="{{phone_model}}">
<input type="hidden" name="price" value="{{price}}">
<input type="hidden" name="ram" value="{{ram}}">
<input type="hidden" name="storage" value="{{storage}}">
<input type="hidden" name="battery" value="{{battery}}">
<button type="submit" class="btn btn-primary btn-block">Add to
Cart</button>
</form>
</div>
</div>
</div>
{% endfor %}
{%for phone_model,price,ram,storage,battery,heir,type in heir_mobs%}

15
 <div class="col-sm-4">
<div class="panel panel-{{type}}">
<div class="panel-heading">{{heir}}</div>
<div class="panel-body">{{phone_model}}</div>
<div class="panel-body">${{price}}</div>
<div class="panel-body">{{ram}}GB</div>
<div class="panel-body">{{storage}}GB</div>
<div class="panel-body">{{battery}}mAh</div>
<div class="card-footer text-center">
<form method="POST" action="/add_to_cart">
<input type="hidden" name="name" value="{{phone_model}}">
<input type="hidden" name="price" value="{{price}}">
<input type="hidden" name="ram" value="{{ram}}">
<input type="hidden" name="storage" value="{{storage}}">
<input type="hidden" name="battery" value="{{battery}}">
<button type="submit" class="btn btn-primary btn-block">Add to
Cart</button>
</form>
</div>
</div>
</div>
{% endfor %}
</div><br>
</div><br><br>

<footer class="container-fluid text-center">

<p>Mobile Store 2025</p>
</footer>

</body>
</html>

index.html
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>

16
 <div class="container d-flex flex-column justify-content-center align-
items-center vh-100">
<h1 class="mb-4">Welcome to Mobile Store</h1>
<form action="/" method="POST" class="w-50">
<div class="form-group">
<label for="name">Enter Your Name:</label>
<input type="text" id="name" name="name" class="form-control"
placeholder="Your Name" required>
</div>
<button type="submit" class="btn btn-primary btn-block mt-
3">Submit</button>
</form>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></sc
ript>
</body>
</html>

search.html

Click or tap<!DOCTYPE html>

<html lang="en">
<head>
<title>Search Page - Mobile Store</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></scrip
t>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></sc
ript>
<style>

17
 .card {
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
margin: 10px 0;
}
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
</style>
</head>
<body>

<!-- Jumbotron Heading -->

<div class="jumbotron text-center">
<h1>Mobile Store</h1>
<p>Your one-stop shop for the latest mobile phones</p>
</div>

<!-- Navbar -->

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="/home">Home</a></li>
<li class="active"><a href="/search">Search</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/cart"><i class="fas fa-shopping-cart"></i> Cart</a></li>
</ul>
</div>
</div>
</nav>

<!-- Main Content -->

<div class="container">
<h2>Search Mobiles</h2>
<form method="POST" action="/search">

18
 <div class="form-group">
<label for="brand">Phone Brand:</label>
<select class="form-control" id="brand" name="brand">
{% for brand in brand_names %}
<option value="{{brand}}">{{brand}}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="price">Price Range:</label>
<select class="form-control" id="price" name="price">
<option value="0-200">Under $200</option>
<option value="200-500">$200 - $500</option>
<option value="500-1000">$500 - $1000</option>
<option value="1000-2000">$1000 - $2000</option>
<option value="2000-9999">Above $2000</option>
</select>
</div>
<div class="form-group">
<label for="sort">Sort By:</label>
<select class="form-control" id="sort" name="sort">
<option value="asc">Price: Low to High</option>
<option value="desc">Price: High to Low</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Search</button>
</form>

<hr>

<div id="results" style="margin-top: 30px;">

{% if phones is not none %}
<div class="row">
{% for name, price, ram, storage, battery in phones %}
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading">{{name}}</div>
<div class="panel-body">
<p>Price: ${{ price }}</p>
<p>RAM: {{ ram }} GB</p>
<p>Storage: {{ storage }} GB</p>
<p>Battery: {{ battery }} mAh</p>
</div>
<div class="panel-footer text-center">
<form method="POST" action="/add">

<form method="POST" action="/add">

<input type="hidden" name="name" value="{{name}}">

19
 <input type="hidden" name="price" value="{{price}}">
<input type="hidden" name="ram" value="{{ram}}">
<input type="hidden" name="storage" value="{{storage}}">
<input type="hidden" name="battery" value="{{battery}}">
<input type="number" name="quantity" min="1" value="1"
class="form-control" style="width: 70%; margin: auto;">
<button type="submit" class="btn btn-primary btn-
block">Add to Cart</button>
</form>
</form>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<script>console.log('empty')</script>
{% endif %}

<footer class="container-fluid text-center">

<p>Mobile Store 2025</p>
</footer>

<script>
// div = document.getElementById('hide')
// function unhide(){
// div.removeAttributes('id')
// }
</script>
</body>
</html>

thankyou.html

<html lang="en">

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>

20
 <link
href='https://fonts.googleapis.com/css?family=Lato:300,400|Montserrat:700'
rel='stylesheet' type='text/css'>
<style>
@import
url(//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-
awesome.min.css);
</style>
<link rel="stylesheet" href="https://2-22-4-dot-lead-
pages.appspot.com/static/lp918/min/default_thank_you.css">
<script src="https://2-22-4-dot-lead-
pages.appspot.com/static/lp918/min/jquery-1.9.1.min.js"></script>
<script src="https://2-22-4-dot-lead-
pages.appspot.com/static/lp918/min/html5shiv.js"></script>
</head>
<body>
<header class="site-header" id="header">
<h1 class="site-header__title" data-lead-id="site-header-title">THANK
YOU!</h1>
</header>

<div class="main-content">
<i class="fa fa-check main-content__checkmark" id="checkmark"></i>
<p class="main-content__body" data-lead-id="main-content-body">Order
placed, Thank You {{cust}}<br>Redirecting to homepage in...</p>
<h1 id="countdown"></h1>
</div>
<footer class="site-footer" id="footer">
</footer>
<script>
let countdown = 5;
function startCountdown() {
if (countdown > 0) {
document.getElementById('countdown').textContent = countdown;
countdown--;
setTimeout(startCountdown, 1000);
} else {
window.location.href = "/"
}
}
startCountdown();
</script>
</body>
</html

21
OUTPUT:

22
23
24
 BIBLIOGRAPHY
● kaggle.com
● youtube.com
● w3schools.com
● getbootstrap.com
● cssauthor.com

25