DEV Community: Devonte Johnson

Two Way Order Update System

Devonte Johnson — Wed, 15 Apr 2026 22:28:26 +0000

`✅ 1. PRODUCER – Update Order Status
HTML (producer dashboard)
{% for o in orders %}

<p>{{ o.name }} x{{ o.qty }}</p>
<p>Status: {{ o.status }}</p>

{% if o.status == 'pending' %}
    Mark as Shipped
    Cancel
{% endif %}

{% endfor %}
JavaScript
function updateStatus(id, status) {
fetch('/update_order_status', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: id, status: status })
})
.then(res => res.json())
.then(data => {
if (data.success) location.reload();
});
}
Flask
@app.route('/update_order_status', methods=['POST'])
def update_order_status():
if session.get('role') != 'producer':
return {'success': False}

data = request.get_json()

q("""
    UPDATE order_items
    SET status=%s
    WHERE id=%s
""", (data['status'], data['id']), write=True)

return {'success': True}

✅ 2. PRODUCER – Upload New Product
HTML

Add Product

Flask
@app.route('/add_product', methods=['POST'])
def add_product():
if session.get('role') != 'producer':
return redirect('/')

q("""
    INSERT INTO products(name, price, producer_id)
    VALUES(%s,%s,%s)
""", (
    request.form['name'],
    request.form['price'],
    session['uid']
), write=True)

return redirect('/producer')

✅ 3. CUSTOMER – Cancel Order
HTML (customer dashboard)
{% for o in orders %}

<p>{{ o.name }} x{{ o.qty }}</p>
<p>Status: {{ o.status }}</p>

{% if o.status == 'pending' %}
    Cancel
{% endif %}

{% endfor %}
JavaScript
function cancelOrder(id) {
fetch('/cancel_order', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: id })
})
.then(res => res.json())
.then(data => {
if (data.success) location.reload();
});
}
Flask
@app.route('/cancel_order', methods=['POST'])
def cancel_order():
if not session.get('uid'):
return {'success': False}

data = request.get_json()

# ensure customer owns the order
q("""
    UPDATE order_items oi
    JOIN orders o ON oi.order_id = o.id
    SET oi.status='cancelled'
    WHERE oi.id=%s AND o.customer_id=%s
""", (data['id'], session['uid']), write=True)

return {'success': True}

✅ 4. CSS (status colours)
.order {
padding: 10px;
margin: 10px 0;
color: white;
}

.order.pending { background: orange; }
.order.shipped { background: green; }
.order.cancelled { background: red; }`

How to Update/Cancel Orders using SQL

Devonte Johnson — Wed, 15 Apr 2026 22:26:18 +0000

`You’re basically asking two things:

How to update order status (cancel)
How to reflect that visually (colour, etc.)

Let’s do it clean and exam-ready.

✅ 1. Button → send request to Flask
HTML (pass order item ID)
Cancel Order
JavaScript
function cancelOrder(id) {
fetch('/cancel_order', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: id })
})
.then(res => res.json())
.then(data => {
if (data.success) {
location.reload(); // simplest for exam
}
});
}
✅ 2. Flask route (update DB)
@app.route('/cancel_order', methods=['POST'])
def cancel_order():
if not session.get('uid'):
return {'success': False}

data = request.get_json()

# IMPORTANT: make sure user owns this order
q("""
    UPDATE order_items 
    SET status='cancelled'
    WHERE id=%s
""", (data['id'],), write=True)

return {'success': True}

✅ 3. Display status in HTML
Example (dashboard.html)
{% for o in orders %}

<p>{{ o.name }} x{{ o.qty }}</p>
<p>Status: {{ o.status }}</p>

{% if o.status == 'pending' %}
    Cancel Order
{% endif %}

{% endfor %}
✅ 4. CSS (this is what you want)
.order {
padding: 10px;
margin-bottom: 10px;
color: white;
}

.order.pending {
background-color: orange;
}

.order.cancelled {
background-color: red;
}

.order.shipped {
background-color: green;
}
🧠 Key idea (what examiner wants)

Instead of using status=1, you’re better off using:

pending / cancelled / shipped

Why?

Easier to read
Easier to style
Easier to explain
⚠️ If you REALLY want numbers
DB:
0 = pending
1 = cancelled
2 = shipped
HTML:

🔥 Cleaner (recommended)

Just store text:

status VARCHAR(20)
✅ What you now have

✔ Button → sends request
✔ Flask updates DB
✔ Page reloads
✔ Status changes colour`

Creating Accounts

Devonte Johnson — Wed, 15 Apr 2026 12:28:31 +0000

`from flask import Flask, request, redirect, session, flash
import bcrypt
import mysql.connector

app = Flask(name)
app.secret_key = "secret"

CREATE CONNECTION (important: autocommit OFF, we handle it)

conn = mysql.connector.connect(
host="localhost",
user="root",
password="password",
database="your_db"
)

QUERY FUNCTION (FIXED)

def q(sql, params=(), one=False, write=False):
cur = conn.cursor(dictionary=True)
cur.execute(sql, params)

if write:
    conn.commit()   # ✅ ensure commit
    cur.close()
    return True

result = cur.fetchone() if one else cur.fetchall()
cur.close()
return result

@app.route('/login', methods=['POST'])
def login():
user = q(
"SELECT * FROM users WHERE email=%s",
(request.form['email'],),
one=True
)

if user:
    # DEBUG check (optional)
    print("DB HASH:", user['password_hash'])

if user and bcrypt.checkpw(
    request.form['password'].encode(),
    user['password_hash'].encode()
):
    session['uid'] = user['id']
    session['name'] = f"{user['first_name']} {user['last_name']}"
    session['role'] = user['role']

    return redirect('/')

flash('Invalid credentials', 'error')
return redirect('/')

@app.route('/register', methods=['POST'])
def register():
hashed = bcrypt.hashpw(
request.form['password'].encode(),
bcrypt.gensalt()
).decode()

try:
    q(
        "INSERT INTO users(first_name,last_name,email,password_hash,role) VALUES(%s,%s,%s,%s,%s)",
        (
            request.form['first_name'],
            request.form['last_name'],
            request.form['email'],
            hashed,
            'customer'
        ),
        write=True
    )
    print("USER INSERTED")  # ✅ debug

except Exception as e:
    print("ERROR:", e)  # ✅ SHOW REAL ERROR
    flash('Email taken or DB error', 'error')
    return redirect('/')

flash('Account created', 'success')
return redirect('/')

@app.route('/logout')
def logout():
session.clear()
return redirect('/')`

How to Make a Product and Cart Page Using SQL

Devonte Johnson — Wed, 15 Apr 2026 12:25:46 +0000

`To make this work across multiple pages (products page + cart page) using an external JS file, you mainly need to:

Keep using localStorage (you already are ✅)
Move your JS into a separate file
Make sure both pages include that script
Pass product data from your SQL-loaded HTML into addToCart()
✅ 1. Create external JS file

static/js/cart.js

let cart = JSON.parse(localStorage.getItem('cart')) || [];

function saveCart() {
localStorage.setItem('cart', JSON.stringify(cart));
}

function addToCart(id, name, price) {
const existing = cart.find(item => item.id === id);

if (existing) {
    existing.qty += 1;
} else {
    cart.push({ id, name, price, qty: 1 });
}

saveCart();
renderCart();

}

function removeFromCart(id) {
cart = cart.filter(item => item.id !== id);
saveCart();
renderCart();
}

function renderCart() {
const cartBox = document.getElementById('cart-items');
const totalBox = document.getElementById('cart-total');

if (!cartBox || !totalBox) return; // IMPORTANT (prevents errors on other pages)

cartBox.innerHTML = '';
let total = 0;

cart.forEach(item => {
    total += item.price * item.qty;

    const div = document.createElement('div');
    div.className = 'cart-item';
    div.innerHTML = `
        <span>${item.name} x${item.qty}</span>
        <span>£${(item.price * item.qty).toFixed(2)}</span>
        <button onclick="removeFromCart(${item.id})">✕</button>
    `;
    cartBox.appendChild(div);
});

totalBox.innerText = 'Total: £' + total.toFixed(2);

}

document.addEventListener('DOMContentLoaded', renderCart);
✅ 2. Include it on BOTH pages
Products page:

Cart page:

✅ 3. Products page (data from SQL)

In your Flask route:

products = q("SELECT * FROM products")
return render_template("products.html", products=products)
In your products.html
{% for p in products %}

<p>{{ p.name }} - £{{ p.price }}</p>

    Add to Cart

{% endfor %}
⚠️ Important fix (very important)

If product names can have quotes, use this safer version:

✅ 4. Cart page

Your Cart

<h3 id="cart-total">Total: £0.00</h3>

✅ How it works now
Products page → adds items to localStorage
Cart page → reads same localStorage
renderCart() runs on both pages
No backend needed for cart (yet)
🔥 Optional upgrades (tell me if you want)
Quantity +/- buttons
Persist cart to database (for logged-in users)
Cart icon with item count
Stripe checkout

If something doesn’t work, it’s usually one of these:

Wrong script path (/static/js/cart.js)
Missing tojson filter
IDs not matching

Paste your HTML if you want me to debug it directly.`