im very new to python and flask-sql alchemy and im supposed to create a shopping cart for my html which adds a product to the cart everytime i click the add button. however, im not sure how to even start…
app.html
<html>
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{% block title %}Store App{% endblock %}</title>
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo left">{% block page %}Store App{% endblock %}</a>
</div>
</nav>
<form>
<div class="container">
<div class="input-field">
<input name="text">
<button class="btn right" type="submit" value="search">Search</button>
</div>
</div>
</form>
<div>
<div class="row left" style="width: 45%; height:80vh; overflow-y: scroll; float:left;">
<div class="col s12 m6">
<main id="media" class=" darken-4 white-text">
<section id="media-list">
{% for product in products %}
<div class="card" style="width:80vh;" id="card4">
<div class="card-content black-text">
<img src="{{ product.image }}" alt="" width="200px" height="200px">
<p>Name: {{product.name}}</p>
<p>Price: {{product.price}}</p>
<button type="submit" class="right">Add</button>
</div>
</div>
{% endfor %}
</section>
</main>
</div>
</div>
<div class="row right" style="width: 50%; height:80vh; overflow-y: scroll; float:right;">
<div class="col s12 m6">
<main id="media" class=" darken-4 white-text">
<section id="media-list">
<table class="table table-striped">
<tr>
<th>name</th>
<th>quantity</th>
<th>price</th>
<th>total</th>
</tr>
</table>
<h3>Total: </h3>
</section>
</main>
</div>
</div>
</div>
models.py
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()
import datetime
class Product(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(50))
category = db.Column(db.String(50))
price = db.Column(db.Float)
image = db.Column(db.String(120))
about = db.Column(db.String(50))
cart = db.relationship('Cart', backref="cart", lazy=True)
def toDict(self):
return{
'id':self.id,
'name':self.name,
'category':self.category,
'price':self.price,
'image':self.image,
'about':self.about,
'cart':[ product.toDict() for product in self.products]
}
class Cart(db.Model):
id = db.Column(db.Integer, primary_key=True)
quantity = db.Column(db.Integer)
product_id = db.Column(db.Integer, db.ForeignKey('product.id'))
def toDict(self):
return{
'id':self.id,
'quantity':self.quantity,
'product_id':self.product_id,
'product':self.product.toDict()
}
main.py
from flask_cors import CORS
from flask import Flask, request, session, render_template, redirect, flash, url_for, jsonify
from sqlalchemy.exc import IntegrityError
from models import db, Product, Cart #add application models
''' Begin boilerplate code '''
def create_app():
app = Flask(__name__, static_url_path='')
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
app.config['SECRET_KEY'] = "MYSECRET"
CORS(app)
db.init_app(app)
return app
app = create_app()
app.app_context().push()
''' End Boilerplate Code '''
######################### Template Routes ##############################
@app.route('/')
def index():
name = request.args.get('text')
if name:
products = Product.query.filter(
Product.name.like( '%'+name+'%' )
| Product.about.like( '%'+name+'%' )
| Product.category.like( '%'+name+'%' )
)
else:
products = Product.query.all()
return render_template('app.html', products=products)
########################### API Routes #############################
@app.route('/app')
def client_app():
return app.send_static_file('app.html')
if __name__ == '__main__':
app.run(host='0.0.0.0', port=8080, debug=True)