DEV Community: KartikJha-prod

How to make a Grocery store Web app with Python, Flask and MySQL (Part-3 How to use Flask to make the actual webapp)

KartikJha-prod — Tue, 13 Oct 2026 13:00:27 +0000

In this tutorial I will teach you how to make a Webapp that will this tutorial in a way that anyone who knows MySQL and basic Python can follow regardless of the fact that they read the last parts or not. This tutorial will be divided into many parts and so will the code to make it more understandable. I will provide a sample code which is made just for teaching purposes and not an actual web app for any work related tasks. I will begin this tutorial with the knowledge you should already have to follow this tutorial, followed by the skills and knowledge you will gain in this tutorial.

Pre-requisite knowledge -

• Basic SQL syntax.

• Knowledge of making a Database and tables on MySQL.

• Basic knowledge of pandas.

• Connecting a database to Python.

• Basic HTML.

If you don't have them there are many amazing tutorials on the internet that teach it in an easy to understand and beautiful way.

What you will learn -

• Using Flask to make a Webapp

• Integrating the database in the Webapp.

• How to add functions to the buttons and other widgets.

• How to make a Webapp editable.

With that in mind let us begin this tutorial.

i) The modules -

We will first start by importing the required modules

from html import escape

import pandas as pd
from flask import Flask, request, redirect, url_for
import mysql.connector

from database_grocery_store import connecting_database

These are just the Python libraries we will be using. Followed by the connecting_database function. Which is just the server's connection which I have written in a different file. Here's why I have chosen to use these modules.

• from html import escape :- It's for security so the user just can't change the website by typing HTML code.

• pandas :- To manage the data easily and more efficiently.

• Flask :- To make the Webapp.

• mysql.connector :- To connect to the database.

• from database_grocery_store import connecting_database :- This is just the function for the connection code, I have used this line because I have the connection code in a different file to make it look nicer and to make the code more readable. If you don't want to do that then don't use this line.

Here is what this connecting database function looks like in a separate file

import mysql.connector

connection = mysql.connector.connect(
    host="Your host",
    user="Your username",
    password="Your password",
    database="Your database name",
    port=3306,
)

ii) Starting the Flask application -

app = Flask(__name__)

This line just starts the Flask application.

iii) Importing the connection. -

def get_html_content():
    connection = connecting_database()

I have created a function that just gets the content in the database table. I start this function with the connection, for which I have written the code as a different function in a different file. This makes the code more readable and understandable. You can replace the connection= connecting_database() line with the connection code if you don't have the connection code in a different file.

iv) Using HTML to put the list of entries in the table in rows. -

    try:
        # 1. Products
        df_p = pd.read_sql_query("SELECT * FROM products;", connection)
        product_rows = ""
        for _, row in df_p.iterrows():
            product_rows += (
                f"<tr><td><strong>{escape(str(row.get('product_id', '')))}</strong></td>"
                f"<td>{escape(str(row.get('product_name', '')))}</td>"
                f"<td>{escape(str(row.get('category_id', '')))}</td>"
                f"<td>{escape(str(row.get('supplier_id', '')))}</td>"
                f"<td>${row.get('price', 0.0):.2f}</td></tr>"
            )

•We first run the command to get the list of all entries in the products table. df_p = pd.read_sql_query("SELECT * FROM products;", connection) This is a shorter version of the syntax using pandas. Using pandas creates the cursor and makes it easier to run SQL queries on Python.

•

product_rows = ""
for _, row in df_p.iterrows():
    product_rows +=

We use a simple for loop to get every single entry in the products table, turn it into a string and concatenate it to the end of the string.

• The last part is the HTML code to put each value in its own table. In my case the products table has the following columns

i) Product_id

ii) Product_name

iii) Category_id

iv) supplier_id

v) price

Now that we know how this works we will do the same with the rest of the tables.

        # 2. Orders (orders JOIN order_items)
        query_orders = """
            SELECT o.order_id, oi.product_id, oi.quantity, oi.unit_price
            FROM orders o
            JOIN order_items oi ON o.order_id = oi.order_id;
        """
        df_o = pd.read_sql_query(query_orders, connection)
        order_rows = ""
        for _, row in df_o.iterrows():
            order_rows += (
                f"<tr><td><strong>{escape(str(row.get('order_id', '')))}</strong></td>"
                f"<td>{escape(str(row.get('product_id', '')))}</td>"
                f"<td>{escape(str(row.get('quantity', '')))}</td>"
                f"<td>${row.get('unit_price', 0.0):.2f}</td></tr>"
            )

        # 3. Suppliers
        df_s = pd.read_sql_query("SELECT * FROM suppliers;", connection)
        supplier_rows = ""
        for _, row in df_s.iterrows():
            supplier_rows += (
                f"<tr><td><strong>{escape(str(row.get('supplier_id', '')))}</strong></td>"
                f"<td>{escape(str(row.get('supplier_name', '')))}</td>"
                f"<td>{escape(str(row.get('phone', '')))}</td></tr>"
            )

        # 4. Customers
        df_c = pd.read_sql_query("SELECT * FROM customers;", connection)
        customer_rows = ""
        for _, row in df_c.iterrows():
            customer_rows += (
                f"<tr><td><strong>{escape(str(row.get('customer_id', '')))}</strong></td>"
                f"<td>{escape(str(row.get('customer_name', '')))}</td>"
                f"<td>{escape(str(row.get('email', '')))}</td></tr>"
            )
    finally:
        connection.close()

We end the connection after finishing all four tables, so the program can run more efficiently.

v) The Webapp layout -

    return f"""<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Database Dashboard</title>
        <style>
            body {{ font-family: 'Segoe UI', sans-serif; background-color: #f4f7f6; margin: 0; padding: 20px; color: #333; }}
            .dashboard-container {{ max-width: 1200px; margin: 0 auto; }}
            .oval-container {{ background: #ffffff; border-radius: 30px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 30px; border: 1px solid #e0e0e0; overflow-x: auto; }}
            h2 {{ color: #2c3e50; margin-top: 0; }}
            h3 {{ color: #34495e; border-bottom: 2px solid #ecf0f1; padding-bottom: 5px; }}
            table {{ width: 100%; border-collapse: collapse; margin-top: 10px; margin-bottom: 20px; }}
            th, td {{ padding: 10px 12px; text-align: left; border-bottom: 1px solid #ddd; }}
            th {{ background-color: #f8f9fa; color: #2c3e50; }}
            .forms-grid {{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }}
            .form-card {{ background: white; padding: 20px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }}
            .form-group {{ margin-bottom: 12px; }}
            label {{ display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9em; }}
            input {{ width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }}
            button {{ background-color: #3498db; color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; width: 100%; font-weight: bold; }}
            button:hover {{ background-color: #2980b9; }}
        </style>
    </head>
    <body>

    <div class="dashboard-container">
        <div class="oval-container">
            <h2>📦 Live Database System Tables</h2>

            <h3>Products</h3>
            <table>
                <thead><tr><th>Product ID</th><th>Product</th><th>Category ID</th><th>Supplier ID</th><th>Price</th></tr></thead>
                <tbody>{product_rows}</tbody>
            </table>

            <h3>Orders</h3>
            <table>
                <thead><tr><th>Order ID</th><th>Product ID</th><th>Quantity</th><th>Unit Price</th></tr></thead>
                <tbody>{order_rows}</tbody>
            </table>

            <h3>Suppliers</h3>
            <table>
                <thead><tr><th>Supplier ID</th><th>Supplier Name</th><th>Phone Number</th></tr></thead>
                <tbody>{supplier_rows}</tbody>
            </table>

            <h3>Customers</h3>
            <table>
                <thead><tr><th>Customer ID</th><th>Customer Name</th><th>Email</th></tr></thead>
                <tbody>{customer_rows}</tbody>
            </table>
        </div>

        <h2>Add New Records</h2>
        <div class="forms-grid">
            <div class="form-card">
                <h3>📦 Add Product</h3>
                <form action="/add-product" method="POST">
                    <div class="form-group"><label>Product Name</label><input type="text" name="product_name" required></div>
                    <div class="form-group"><label>Category ID</label><input type="number" name="category_id" required></div>
                    <div class="form-group"><label>Supplier ID</label><input type="number" name="supplier_id" required></div>
                    <div class="form-group"><label>Price</label><input type="number" step="0.01" name="price" required></div>
                    <button type="submit">Submit Product</button>
                </form>
            </div>

            <div class="form-card">
                <h3>🛒 Add Order</h3>
                <form action="/add-order" method="POST">
                    <div class="form-group"><label>Product ID</label><input type="number" name="product_id" required></div>
                    <div class="form-group"><label>Quantity</label><input type="number" name="quantity" required></div>
                    <button type="submit">Submit Order</button>
                </form>
            </div>

            <div class="form-card">
                <h3>🏭 Add Supplier</h3>
                <form action="/add-supplier" method="POST">
                    <div class="form-group"><label>Supplier Name</label><input type="text" name="supplier_name" required></div>
                    <div class="form-group"><label>Phone Number</label><input type="text" name="phone"></div>
                    <button type="submit">Submit Supplier</button>
                </form>
            </div>

            <div class="form-card">
                <h3>👤 Add Customer</h3>
                <form action="/add-customer" method="POST">
                    <div class="form-group"><label>Customer Name</label><input type="text" name="customer_name" required></div>
                    <div class="form-group"><label>Email Address</label><input type="email" name="email"></div>
                    <button type="submit">Submit Customer</button>
                </form>
            </div>
        </div>
    </div>
    </body>
    </html>
    """

I expect you all to know at least this much HTML to follow this tutorial, but I will very briefly define the tag and what each tag does in the above given code:-

Document Structure & Metadata

• <!DOCTYPE html>

• Definition: An informative tag that tells your web browser this document is written in HTML5.

• Application: Informs the web browser to analyze the page layout and style this document properly.

• <html>

• Definition: The root tag where you place all contents in a web page.

• Application: Informs your web browser that everything you see below belongs to the HTML Document (notice the tag lang="en").

• <head>

• Definition: A special set of tags where you can place all non-visible information about your document.

• Application: Keeps your page settings, CSS instructions, and document's title in one place.

• <meta>

• Definition: A set of tags that contain specific information about your page's data.

• Application: Tells the web browser to use standard character encoding (UTF-8) and scale the page's appearance nicely on mobile devices (viewport).

• <title>

• Definition: A tag that specifies the name of the document that appears in the tab of your browser.

• Application: Displays "Database Dashboard" at the top of your browser's tab.

• <style>

• Definition: A tag that contains CSS instructions to design your HTML document's content.

• Application: Holds the instructions to color, space, align, and animate your dashboard's elements.

• <body>

• Definition: A powerful tag that keeps all visible parts of your web page.

• Application: Displays all tables, forms, and text that you see in this dashboard.

Layout & Headings

• <div>

• Definition: A tag that creates a box-like structure to hold all your elements.

• Application: Helps you organize your dashboard's layout (dashboard-container), table cards (oval-container), and forms (form-card).

• <h2>

• Definition: A tag that defines level 2 headings (usually bigger than level 3 headings).

• Application: Displays the general structure of your page (" Live Database System Tables" and "Add New Records").

• <h3>

• Definition: A tag that defines level 3 headings (used to identify unique sections within a bigger category).

• Application: Displays the unique sections inside your database ("Products", "Orders") and categories ("Add Product").

Data Display Tables

• <table>

• Definition: A tag that creates a grid/table structure to hold your data.

• Application: Designs the visual appearance of your tables (Products, Orders, Suppliers, Customers).

• <thead>

• Definition: A tag that encloses all the head content of an HTML table.

• Application: Groups all column headers to display them with a different background color.

• <tbody>

• Definition: A tag that encloses all the data rows of an HTML table.

• Application: Holds the actual values that come from your backend database ({product_rows}).

• <tr>

• Definition: A tag that encloses all the table row cells (both headers and data cells).

• Application: Makes a horizontal row of related column cells (one database record).

• <th>

• Definition: A tag that encloses headings (used to mark column headers).

• Application: Displays your table's column names (e.g., "Product ID", "Price").

• <td>

• Definition: A tag that encloses a standard table cell (holds the actual values).

• Application: Holds the actual values that come from your backend database columns.

Interactive Forms & Inputs

• <form>

• Definition: A tag that holds all interactive elements that help your users send data to your database.

• Application: Keeps your form's elements grouped and tells your web browser where to send the data (action="/add-product", method="POST").

• <label>

• Definition: A tag that provides a caption for a specific input element.

• Application: Tells your users what to type in each form input ("Product Name", "Quantity").

• <input>

• Definition: A tag that lets your users type or select data to insert into your database.

• Application: Lets your users type in strings (type="text") or numbers (type="number").

• <button>

• Definition: A tag that creates a clickable button to let users perform actions.

• Application: Submits your form data into the database when the user clicks the "Add" button (type="submit").

vi) To run the get_html_content function when the website is opened. -

@app.route('/')
def index():
    return get_html_content()

This just makes the function run when a user visits the website.

vii) To get add data functions. -

@app.route('/add-product', methods=['POST'])
def add_product():
    connection = connecting_database()
    cursor = connection.cursor()
    query = "INSERT INTO products (product_name, category_id, supplier_id, price) VALUES (%s, %s, %s, %s)"
    values = (
        request.form.get('product_name'),
        request.form.get('category_id'),
        request.form.get('supplier_id'),
        request.form.get('price'),
    )
    try:
        cursor.execute(query, values)
        connection.commit()
    except mysql.connector.Error as err:
        connection.rollback()
        return f"Database Error: {err}", 500
    finally:
        cursor.close()
        connection.close()
    return redirect(url_for('index'))

Here is how this code block works :-

• We use the @app.route('/add-product' to start the function.

•methods=['POST']) we use the POST part to make sure it is run only when it is submitted like a form.

• We define the function to add a product.

• We start that function by securing a connection to the database.

• We create a cursor and run the insert values query.

• We request to get the values from the input the user gave.

• Then we try to execute the cursor and finish with committing the connection.

• We also have an exception for if this fails. Which rolls back the changes and returns an error message.

• Finally, whether or not the exception is hit, the finally block closes both cursor and connection. After that, we redirect to the index page, which loads the table again with the updated data.

Now that we know how adding works in one table here is the code to add data in all the other tables as well.

@app.route('/add-order', methods=['POST'])
def add_order():
    connection = connecting_database()
    cursor = connection.cursor()

    try:
        # Step 1: Create the main order record
        cursor.execute("INSERT INTO orders () VALUES ()")
        new_order_id = cursor.lastrowid

        # Step 2: Look up the product's current price
        cursor.execute(
            "SELECT price FROM products WHERE product_id = %s",
            (request.form.get('product_id'),),
        )
        result = cursor.fetchone()
        if result is None:
            connection.rollback()
            return "Product ID not found", 400
        unit_price = result[0]

        # Step 3: Insert the order line with the price
        query_items = (
            "INSERT INTO order_items (order_id, product_id, quantity, unit_price) "
            "VALUES (%s, %s, %s, %s)"
        )
        values = (
            new_order_id,
            request.form.get('product_id'),
            request.form.get('quantity'),
            unit_price,
        )
        cursor.execute(query_items, values)
        connection.commit()
    except mysql.connector.Error as err:
        connection.rollback()
        return f"Database Error: {err}", 500
    finally:
        cursor.close()
        connection.close()

    return redirect(url_for('index'))


@app.route('/add-supplier', methods=['POST'])
def add_supplier():
    connection = connecting_database()
    cursor = connection.cursor()

    query = "INSERT INTO suppliers (supplier_name, phone) VALUES (%s, %s)"
    values = (
        request.form.get('supplier_name'),
        request.form.get('phone'),
    )

    try:
          cursor.execute(query, values)
        connection.commit()
    except mysql.connector.Error as err:
        connection.rollback()
        return f"Database Error: {err}", 500
    finally:
        cursor.close()
        connection.close()

    return redirect(url_for('index'))


@app.route('/add-customer', methods=['POST'])
def add_customer():
    connection = connecting_database()
    cursor = connection.cursor()

    query = "INSERT INTO customers (customer_name, email) VALUES (%s, %s)"
    values = (
        request.form.get('customer_name'),
        request.form.get('email'),
    )

    try:
        cursor.execute(query, values)
        connection.commit()
    except mysql.connector.Error as err:
        connection.rollback()
        return f"Database Error: {err}", 500
    finally:
        cursor.close()
        connection.close()

    return redirect(url_for('index'))

viii) Making the web app run when executed.

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

This makes the entire code run when executed. app.run makes it so the program run on flask's server. Debugging makes it able to give a detailed traceback when an error occurs as well making the server restart when a change is made.
Summary of achievements:-
Congratulations you have made a functioning web application that is connected to a SQL database. You have also learned how to use basic Flask. To take this to the next level you can add a delete product command as well or make more aesthetic changes on the layout perhaps even try to add pictures.

How to make a Grocery store Web app with Python, Flask and MySQL (Part-2 How to connect a database to python)

KartikJha-prod — Mon, 12 Oct 2026 10:58:46 +0000

In the last part, I taught you how to use basic SQL to make a database. In this article, I will teach you how to connect a MySQL database to Python so you can read data from the database directly from Python. In this part of the series, we will only discuss how to connect the database to Python. The next part will cover how to use Flask to make a web app that gets its data from the database you created or downloaded.

Why should you learn this?

If you know how to make a database, you should at least also know how to connect it to Python using a module, so you can read data from the database directly in the Python code without having to switch to a client like MySQL Workbench every time. Connecting to Python also makes it easier to automate tasks and to work with a lot of data, due to modules like pandas being available in Python, among many other reasons to learn this skill.

Connecting to Python is actually really simple and easy thanks to modules like mysql.connector. This tutorial will focus on the mysql.connector module. It will be divided into 2 parts: a part on how to get mysql.connector and how to connect to the database, and a second part that will cover how to run queries on the database directly from Python. So let us begin by first learning what mysql.connector is.

What is mysql.connector module

This is an official module made by the same people that made MySQL. This connector only works for databases made on MySQL, though each type of SQL service has its own connecting module. With that in mind, let us begin the tutorial.

i) How to get mysql.connector and how to use it to connect to a database.

To get mysql.connector, follow the given steps.
• Open the Python IDE of your choice.
• Open an existing file or create a new one.
• Type pip install mysql-connector-python in the terminal or install the module by clicking a button like pip install if your IDE allows it.
• Wait for it to install.

After these steps, you will have the mysql.connector module installed. To check if it has been installed, as well as the version, simply run the code provided below:-

try:
    import mysql.connector
    print("The module is installed and working")
    print(f"Driver Version: {mysql.connector.__version__}")
except ImportError:
    print("The module isn't installed perhaps you did the steps wrong? Please try again")

This is an extremely simple try and except condition which tries to import a module and prints a message if it was successful, but prints a different message when it wasn't. You can use this pattern to check if another module is installed. Just replace mysql.connector with the name of the module you want to check, and do the same in the version print statement as well. Keep in mind that not every module has a __version__ attribute, and that a module's import name can differ from the name you use with pip.

Now that we have installed the module, here is the code to connect to a database.

import mysql.connector

connection = mysql.connector.connect(
    host="Your host",
    user="Your username",
    password="Your password",
    database="Your database name",
    port=3306,
)

This is the general code to connect using this module. Here is how it works line by line.

•import statement:- just imports the module into your Python file.

•connection = mysql.connector.connect :- Connection is just a variable name, while mysql.connector.connect is just the command to connect to a database, with the information about the database inside the parentheses.

•host="Your host" :- This line just wants to know where your database is. If it is on your computer, replace "Your host" with "localhost". If it is on a cloud server, replace it with the domain name of the service. If it is on another computer, replace it with the IP address of that computer instead.

•user="Your username" :- Just wants the username of your MySQL account. Replace "Your username" with, well, your username. If you didn't create a unique username, enter the default username, which is "root".

•password="Your password" :- Just wants your password. Replace "Your password" with the password you set when you installed MySQL. MySQL has no default password, so use the one you chose during installation.

•database="Your database name" :- Just wants the name of your database. Replace it with your database name. In my case, my database name was Grocery_store_db.

•port=3306 :- 3306 is just the default value. Change it if you have a different port. Make sure not to use inverted commas (") as it is a number and not a string, unlike the others.

ii) How to run queries directly from Python

To run a query in Python, we will first have to connect to the database as shown above.
To run a query, say to get the entire table, we would use the SELECT * FROM <table_name>; query. To do this in Python, we can use the following code directly after connecting to the database:-

import mysql.connector

try:
    connection = mysql.connector.connect(
        host="localhost",
        user="your_username",
        password="your_password",
        database="Grocery_store_db"
    )

    cursor = connection.cursor()
    cursor.execute("SELECT * FROM products")

    for row in cursor.fetchall():
        print(row)

except mysql.connector.Error as e:
    print(f"Error: {e}")

finally:
    if 'connection' in locals() and connection.is_connected():
        cursor.close()
        connection.close()

We first just connect to the database. Then we create a cursor using the cursor = connection.cursor() command, then we use cursor.execute with our SQL query in parentheses. Then we use a simple for loop to print all the rows. I have also used an except block to handle errors. Finally, we close both the cursor and the connection, but only if the connection was successfully created. Now I will assume you know how to use basic pandas, so I will provide a shortcut version where pandas does all the work.

import mysql.connector
import pandas as pd

conn = mysql.connector.connect(host="localhost", user="Your username", password="Your password", database="Grocery_store_db")


products = pd.read_sql("SELECT * FROM products", conn)
print(products)

conn.close()

As you can see, the cursor creation and everything else was handled by pandas. Recent versions of pandas may show a UserWarning recommending SQLAlchemy when you use a connection like this. The code still works.

Congratulations

That's it for this part. In the next part, I will teach you how to combine these skills to make a web app using Flask. Here is what you have achieved after finishing this tutorial.

•How to connect MySQL to Python.
•How to run queries on a server from Python.
•How to shorten some commands using pandas.

How to make a Grocery store Web app with Python, Flask and MySQL (Part-1 How to use MySQL)

KartikJha-prod — Sat, 10 Oct 2026 13:31:18 +0000

In this 3-part article series, I will walk you through the process of making a web app for something as simple as the list of orders, products, suppliers, etc., of a grocery store. I will teach you how to use MySQL to make a database, how to connect it with Python, and how to make the web application.

Why learn this?

This series will be a great way to learn web development. You will learn to make a functioning web app and, more importantly, learn how to use MySQL, a popular tool for making and managing databases, as well as learn to use the Flask module, a popular module for making a web application. By the end of this series, you will have a web application that will manage the records of a grocery store.

In this part, you will learn to use MySQL to make and manage databases.

What is MySQL?

MySQL is a popular database management software that uses the SQL language to function. MySQL is so common due to its strong security and high performance.

How to get MySQL?

MySQL is a paid service, well, commercially at least. Other than that, it's free for the community. You can go to the official MySQL website to download MySQL for Windows, Linux, macOS, etc., or click the link I have provided.
https://www.mysql.com/downloads/

On the website, go to the downloads section and download the program. Then install it directly onto your PC and enter a username and password to set it up.

How to use MySQL

MySQL is a very simple application, mainly because SQL is easily understandable even to someone who doesn't know anything about it. This section will be divided into many steps.

Step 1 Making a database

In your application, simply type CREATE Database {database name};. In my case, I decided to make a simple grocery store web app, though you can still follow the series to make web apps for similar things. That's why I named my database Grocery_store_db, so the command I entered was CREATE database Grocery_store_db;, and I ran the command. To check if your database has been created, you can enter the command SHOW databases;, and you should see a database with the name you entered. In my case, it shows Grocery_store_db.

Step 2 Making tables

Now that we have a database, we want to enter a table in the database. Each table will have columns, and each column will have a datatype, which just means that a column will allow only one type of input. For example, in a column for names you don't want numbers, and in a column for phone numbers you don't want letters, so we can use datatypes and constraints to stop these inputs. There are a lot of datatypes, but the ones we will use are:-

VARCHAR(x):- This datatype allows any input with numbers or letters, with a specified limit of characters written inside the () parentheses instead of the x I have written.

INT :- Allows any integer as a valid input. It doesn't change the input to a string.

Decimal(x,y) :- The decimal datatype is just any number with a decimal in it, like the price of an item, 37.92. The x is the total number of numbers allowed, while y is the number of numbers after the decimal point. For a price in a grocery store, it is typically Decimal(10,2), where numbers like 68373.67 are allowed but 7273.789 isn't allowed because it has 3 Digits after the decimal, so we can use this datatype to bind the decimal numbers.

Some constraints are:-

•AUTO_INCREMENT :- This just counts the number automatically. For example, the first row will have serial no. 1, then 2, and if I don't enter a serial no., it automatically enters 3.

•NOT NULL :- Just says the column can't be empty.

•PRIMARY KEY :- A unique id for each row. For example, two students can have the same name but not the same admission number. So in this case, the admission number column is the PRIMARY KEY. Each table has only one primary key.

•FOREIGN KEY :- A key to join two tables by pointing to the primary key in the joined table.

•UNIQUE:- As the name says, the data in it has to be unique like the primary key, but it can be applied to multiple columns in a table, unlike the primary key.

With all that said, to create a table we will just use the following query.

CREATE TABLE customers (
    customer_id INT AUTO_INCREMENT PRIMARY KEY,
    customer_name VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE,
    join_date DATE DEFAULT (CURRENT_DATE)
);

By the way, the Default(Current date) part works only on MySQL 8.0.13 or newer versions.

This is the customers table in the Grocery_store_db database. If the table was created in a different database, then you can enter the following query.


USE Grocery_store_db;

Enter it before running the create table command. With that in mind, here are the general queries for the rest of the tables.

CREATE TABLE categories (
    category_id INT AUTO_INCREMENT PRIMARY KEY,
    category_name VARCHAR(100) NOT NULL,
    description VARCHAR(255)
);

CREATE TABLE suppliers (
    supplier_id INT AUTO_INCREMENT PRIMARY KEY,
    supplier_name VARCHAR(100) NOT NULL,
    phone VARCHAR(20)
);

CREATE TABLE products (
    product_id INT AUTO_INCREMENT PRIMARY KEY,
    product_name VARCHAR(100) NOT NULL,
    category_id INT NOT NULL,
    supplier_id INT NOT NULL,
    price DECIMAL(10,2) NOT NULL,
    FOREIGN KEY (category_id) REFERENCES categories(category_id),
    FOREIGN KEY (supplier_id) REFERENCES suppliers(supplier_id)
);

CREATE TABLE orders (
    order_id INT AUTO_INCREMENT PRIMARY KEY,
    customer_id INT NULL,
    order_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (customer_id) REFERENCES customers(customer_id)
);

CREATE TABLE order_items (
    order_item_id INT AUTO_INCREMENT PRIMARY KEY,
    order_id INT NOT NULL,
    product_id INT NOT NULL,
    quantity INT NOT NULL,
    unit_price DECIMAL(10,2) NOT NULL,
    FOREIGN KEY (order_id) REFERENCES orders(order_id),
    FOREIGN KEY (product_id) REFERENCES products(product_id)
);

Step 3 Entering values in the table

Now that we have made the tables, we want to add data to them. For that, we will use the following commands:-

Insert Into () The command is quite self-explanatory. It inserts the data specified in the parentheses into the table whose name is written after Into.

In my case, the queries for the data looked something like this.

INSERT INTO categories (category_id, category_name, description) VALUES
(1, 'Vegetables', 'Fresh fruits and vegetables'),
(2, 'Dairy & Eggs', 'Milk, cheese, butter, and eggs'),
(3, 'Bakery', 'Freshly baked bread, muffins, and pastries'),
(4, 'Meat & Seafood', 'Fresh meat, poultry, and fish'),
(5, 'Pantry', 'Canned goods, pasta, sauces');

INSERT INTO suppliers (supplier_id, supplier_name, phone) VALUES
(1, 'Local Farm Dist.', NULL),
(101, 'GreenValley Organics', '555-0192'),
(102, 'DailyDairy Co.', '555-0143'),
(103, 'Sunrise Baking', '555-0177'),
(104, 'Prime Cuts Distributing', '555-0188'),
(105, 'Ocean Catch Seafood', '555-0211'),
(106, 'JOE''S MEAT HOUSE', '627-6969'),
(107, 'Black''s farm', '765-4409');

INSERT INTO customers (customer_id, customer_name, email) VALUES
(501, 'David Miller', 'david@email.com'),
(502, 'Sarah Wilson', 'sarah@email.com'),
(503, 'Michael Chang', 'michael@email.com'),
(504, 'Emma Watson', 'emma@email.com'),
(505, 'Ben Carter', 'bencarter@email.com'),
(506, 'Harvey Spectre', 'harveyspectre@email.com');

INSERT INTO products (product_id, product_name, category_id, supplier_id, price) VALUES
(1, 'Organic Honeycrisp Apples', 1, 101, 2.99),
(2, 'Fresh Spinach (Bag)', 1, 101, 1.99),
(3, 'Whole Milk 1G', 2, 102, 3.49),
(4, 'Cheddar Cheese Block', 2, 102, 4.49),
(5, 'Sourdough Bread', 3, 103, 3.99),
(6, 'Ribeye Steak', 4, 104, 12.99),
(7, 'Atlantic Salmon Fillet', 4, 104, 9.99),
(8, 'Spaghetti Pasta', 5, 101, 1.29),
(11, 'Potatoes', 1, 1, 0.50),
(12, 'Pork Chops 16oz', 4, 104, 19.99),
(13, 'Salmon', 4, 104, 25.00);

INSERT INTO orders (order_id, customer_id) VALUES
(1001, 501), (1002, 502), (1003, 503), (1010, 504), (1011, 505);

INSERT INTO order_items (order_id, product_id, quantity, unit_price) VALUES
(1001, 1, 2, 2.99),
(1001, 3, 1, 3.49),
(1001, 5, 1, 3.99),
(1002, 6, 1, 12.99),
(1002, 2, 2, 1.99),
(1002, 8, 3, 1.29),
(1003, 6, 1, 12.99),
(1010, 2, 6, 1.99),
(1011, 6, 9, 12.99);

Step 4 Joining tables

You may have noticed that some tables in the sample database I have provided feel quite empty. For example, the orders table is just one line. Well, the reason is that the other columns, for example the customer ID that the orders table uses, are written in the customers table. It is really inefficient and doesn't really work that well if we were to enter them separately, so we use the join command. By the way, the SELECT function just specifies what to get, and FROM tells the function where to get it from.

JOIN :- This joins two columns from different tables.

When entered, it should look something like this.

SELECT o.order_id, oi.product_id, oi.quantity, oi.unit_price
FROM orders o
JOIN order_items oi ON o.order_id = oi.order_id;

Using the JOIN command, we have to enter each column name for specification.

The rest of the code looks something like this.

SELECT o.order_id, p.product_name, oi.quantity, oi.unit_price,
       oi.quantity * oi.unit_price AS line_total
FROM orders o
JOIN order_items oi ON o.order_id = oi.order_id
JOIN products p ON oi.product_id = p.product_id
ORDER BY o.order_id;

SELECT o.order_id, c.customer_name, c.email,
       p.product_name, oi.quantity, oi.unit_price
FROM orders o
JOIN customers c ON o.customer_id = c.customer_id
JOIN order_items oi ON o.order_id = oi.order_id
JOIN products p ON oi.product_id = p.product_id
ORDER BY o.order_id;

SELECT p.product_id, p.product_name, c.category_name,
       s.supplier_name, p.price
FROM products p
JOIN categories c ON p.category_id = c.category_id
JOIN suppliers s ON p.supplier_id = s.supplier_id;

If you are lazy like me and not actually using real data, feel free to just use sample databases like I did.

And that's it for this part.

What you learned

•Basic SQL syntax
•How to make databases
•How to make tables
•Just working with MySQL in general at an amateur level.

In the next part, I will teach you how to connect this database to Python so you can run commands directly from Python.

How to make a Currency Converter with tkinter and forex-python/currency converter.

KartikJha-prod — Tue, 29 Sep 2026 15:30:16 +0000

In software development, knowing how to build UIs (user interfaces) is really important. Ever wanted to make a UI for a project using a simple, high-level language like Python? The Tkinter module helps us do exactly that. Ever wanted to check the value of the currencies of different countries when compared to the currency of your own country? That can be done with another module called forex-python. In this tutorial, we will combine the forex-python module with the tkinter module to make a Currency Converter with a simple, minimalistic UI.

How the process will work.

Here's is how the program will work and in what order it will do so based on the user's input.
•Selecting Currencies:- First the user has to input both the input and output Currencies from the list provided by us.
•Selecting Amount:- Then the user has to select the amount to be converted into the output Currency.
•Clicking Convert:- After the convert button is clicked the entire script will fire up instantly.
Here I have provided a flowchart on how the script will work. The flowchart is explained below

This flowchart shows us the general idea the script should follow, whenever you are going to make a project it can be smart to make a flowchart on the general process of the script to get an idea for what you want to do. In this flowchart we can see that after the user clicks the concert button, we want our script to first check for both currencies aswell amount. Then we want our script to check for valid inputs in which we want the amount to be not negative so, amount>0 and we should convert the amount to str data type to avoid miscalculations. If these inputs are invalid we obviously want the script to reject these inputs and go back to the beginning. Next we should try to get live rates from forex-python if not possible then the script should give an error and go back the beginning aswell. Lastly if all checkpoints have been passed we want to give the result (obviously).
Now with the entire process in mind here is my code broken into smaller blocks of code with what each block does and why it's used. In a step-by-step manner.

Step-1 :- Importing the modules

import tkinter as tk
from tkinter import messagebox
from tkinter import ttk

Tkinter :- As discussed above tkinter is used for UI making.
Messagebox:- Just a subset of tkinter used to display a message in box in our case the result.
Ttk:- Used for making the widgets

Step 2:- Trying to import forex-python API

Now the reason we try to import the api is because we want the script to generate an error but if we just import it and the api is not available then the script would immediately crash for the user instead of a neat error box showed to the user.

# Requires installing the external library via terminal: pip install forex-python
try:
    from forex_python.converter import CurrencyRates

    currency_client = CurrencyRates()
# To print an error message if forex-python is not installed.
except ImportError:
    print("Please install forex-python using pip install forex-python")
    currency_client = None

Now if you are new to programming you might think why not just use if/else commands, well the reason we use try and excepts is primarily because try and except commands help us handle errors way better. Say if we used if/else commands it will look something like this

import importlib.util

# Check if the 'forex_python' module can be found in the system
if importlib.util.find_spec("forex_python") is not None:
    from forex_python.converter import CurrencyRates
    currency_client = CurrencyRates()
else:
    print("Please install forex-python using pip install forex-python")
    currency_client = None

Notice this is longer then before that is because the program wouldn't work with just replacing them, this block is longer and technically works but is still far inferior due to these reasons
•As you have probably noticed it's quite big longer because of an extra library
•If statement checks for the forex-python module twice while try command needs to check or 'try' to check it only once making it more efficient.

The rest of the code is quite self explanatory but here is what it does anyways
•First we try to get currency rates from forex python
•If the program doesn't get the currency rates the except part triggers which just generates an error which in this case is to simply print the following "Please install forex-python using pip install forex-python". Then it just sets currency client to none so the rest of the application doesn't crash.

Step 3 List of currencies supported.

Currencies = [
    "USD",
    "EUR",
    "GBP",
    "CAD",
    "AUD",
    "NZD",
    "CHF",
    "BRL",
    "MXN",
    "ZAR",
    "TRY",
    "RUB",
    "SEK",
    "NOK",
    "DKK",
    "INR",
    "JPY",
    "CNY",
    "HKD",
    "SGD",
    "KRW",
    "THB",
    "PHP",
    "IDR",
    "MYR",
    "ILS",
    "PLN",
    "CZK",
    "HUF",
    "RON",
    "HRK",
    "ISK",
]  # List of currencies that are supported by forex-python

Now we just enter the currencies we want to use into a list. You can change the variable name and add or remove currencies (make sure to only the add currencies are supported by forex-python)

Step 4:- Changing the text on the buttons

# Function to change the text on the input currency button to the selected currency.
def set_input_choice(item, button_widget):
    button_widget.config(text=item)
# To show a message box containing the text "you selected item" where item is the selected currency
    messagebox.showinfo("Selection", f"You selected: {item}")

def set_output_choice(item, button_widget):
    button_widget.config(text=item)
# To show a message box containing the text "you selected item" where item is the selected currency
    messagebox.showinfo("Selection", f"You selected: {item}")

This block of the script is responsible for changing the text on the input and output currency buttons to the name of the selected currency. We start by defining the function then just change the text to the {item} which is the selected currency. Now why we do this is to easily check if a currency has been chosen, if yes, then which currency has been chosen. It's is easiesr to get the text on a menubutton then to get the value of a menubutton.

Step 5 To get the input currencies

# Function to get what the input that the user has given for amount and currencies are.
def click():
    from_currency = Input_Currency.cget("text")
    to_currency = Output_Currency.cget("text")
    user_input = Entry_amount.get()

We will of course want to get the currencies the user has selected once they press the "convert" button. So we define a function as click() which just sets the from currency equal to the text that is displayed on the input_currency button which we will implement later. We do the same for the output_currency button. We also get the input for the amount using entry_amount.get().
(Note:- If you are having trouble understanding this I suggest you skip these steps for now and design the UI with the instructions on step 7 then comeback as it may be better for you to see the UI and the label names first in order to understand the script part to the UI.)

Step 6 To shows errors and give result.

# To check if the currencies have been selected if not then to display a selection error.
    if (
        from_currency == "Choose Input Currency"
        or to_currency == "Choose Output Currency"
    ):
        messagebox.showerror(
            "Selection Error", "Please select both currencies first."
        )
        return

# To check that the input amount is of the float datatype if not then display an invalid amount error.
    try:
        amount = float(user_input)
    except ValueError:
        messagebox.showerror("Invalid Input", "Please enter a valid amount")
        return
# To check whether the input amount is greater than zero display an error invalid amount otherwise.
    if amount <= 0:
        messagebox.showerror("Invalid Input", "Enter a number greater than zero")
        return

# To try to convert the currencies using live rates if live rates aren't available then display a connection error.
    try:
        result = currency_client.convert(from_currency, to_currency, amount)
        messagebox.showinfo(
            "Conversion Result",
            f"{amount} {from_currency} = {result} {to_currency}",
        )
    except Exception:
        messagebox.showerror(
            "Connection Error",
            "Couldn't get internet access to fetch live rates",
        )


# Function to show the user that they have 'selected' the selected currency.
def select_currency(item):
    messagebox.showinfo("Selection", f"You selected: {item}")

This is the last part of the script and is responsible for giving the errors and the result. Here's is what this script does line by line
•First we check if the text on the menubutton has been changed from the default text. If the text remains the same then we display an error.

#To check if the currencies have been selected if not then to display a selection error.
         if (
        from_currency == "Choose Input Currency"
        or to_currency == "Choose Output Currency"
    ):
        messagebox.showerror(
            "Selection Error", "Please select both currencies first."
        )
        return

•Then we check whether the input amount is a float datatype or and we subsequently also check if the amount is greater than zero a.k.a. , positive. And we display an error if otherwise for this we use this miniblock of code

# To check that the input amount is of the float datatype if not then display an invalid amount error.
    try:
        amount = float(user_input)
    except ValueError:
        messagebox.showerror("Invalid Input", "Please enter a valid amount")
        return
# To check whether the input amount is greater than zero display an error invalid amount otherwise.
    if amount <= 0:
        messagebox.showerror("Invalid Input", "Enter a number greater than zero")
        return

• Now that we have dealt with all the possible invalid amounts we want to convert the currencies (obviously) for that we have used this part of the code

# To try to convert the currencies using live rates if live rates aren't available then display a connection error.
    try:
        result = currency_client.convert(from_currency, to_currency, amount)
        messagebox.showinfo(
            "Conversion Result",
            f"{amount} {from_currency} = {result} {to_currency}",
        )
    except Exception:
        messagebox.showerror(
            "Connection Error",
            "Couldn't get internet access to fetch live rates",
        )

We use an inbuilt function on forex-python which is the currency_client.convert()
This command converts the currencies with respect to the amount. We have trapped the result in the "result" variable for ease and then for convenience of the user we ideally also want to show the conversion taking place in a separate message box. We follow all that up with the exception part which just addresses that if the result passed through the previous checkpoints but failed this one the program just couldn't get internet access. We show this error in a separate error box like the previous ones.

Now finally we tell the user they have selected a currency and exactly which currency they chose through a message box using the following code

# Function to show the user that they have 'selected' the selected currency.
def select_currency(item):
    messagebox.showinfo("Selection", f"You selected: {item}")

Step 7 Making the UI

root = tk.Tk()  # To create the window for the GUI
root.geometry("300x350")  # Size of the window
root.config(background="#000000")  # Background colour in hex code in this case black
root.title("Currency Converter")  # Title of the window

label = tk.Label(
    root,
    text="Currency converter",
    font=("Arial", 20, "bold"),
    fg="#FFFFFF",
    bg="#000000",
)  # To create a label with text "currency converter" with background and foreground colour with font size and text format in this case the text is bolded.
label.pack(pady=10)  # To add padding to the y axis of the label.

Input_Currency = tk.Menubutton(
    root, text="Choose Input Currency", bd=10, bg="#FFFFFF"
)
Input_Currency.pack()  # To place a menu button with text, border and background color.

dropdown_menu = tk.Menu(Input_Currency, tearoff=0)
for currency in Currencies:
    dropdown_menu.add_command(
        label=currency,
        command=lambda c=currency: set_input_choice(c, Input_Currency),
    )
Input_Currency["menu"] = dropdown_menu
# To create and connect the menu with a list of the currencies to the menu button.

Entry_amount = tk.Entry(root, font=("Comic Sans MS", 15), bd=3, bg="#FFFFFF")
Entry_amount.insert(0, "100")
Entry_amount.place(x=150, y=140, anchor="center")
# To put an entry field with a default value of 100.

Output_Currency = tk.Menubutton(
    root, text="Choose Output Currency", bd=10, bg="#FFFFFF"
)
Output_Currency.place(x=150, y=225, anchor="s")
# New menubutton for the output currency.

dropdown_menu2 = tk.Menu(Output_Currency, tearoff=0)
for currency in Currencies:
    dropdown_menu2.add_command(
        label=currency,
        command=lambda c=currency: set_output_choice(c, Output_Currency),
    )
Output_Currency["menu"] = dropdown_menu2
# To create and connect a new menu with the output currency button the list of currencies is the same in both menus.

Convert = tk.Button(root, text="Convert", command=click, padx=20, bd=10)
Convert.place(x=150, y=320, anchor="sw")
# To add a button which when clicked triggers the click function which is defined above from line 37  till line 75

root.mainloop()  # To loop the window so that the GUI lasts until the user closes it.

Now here is what each command does

•root.geometry, root.title, root.config To change the size, title and settings like background colour of the window respectively.

•label To display text

•menubutton To create a button with an attachable menu for the possible values for the button.

•.pack and .place to place the widget pack just places it at the default point, while place has a coordinate system for you to choose from.

•tk.menu just the menu to be attached to the menubutton.

•tk.entry to make a box that accepts entry via typing

•tk.button to make a button with a function. If notice then only when the convert button is pressed is when the click() function is triggered and if you recall then the entire logic part of the script comes in the click function.

•root.mainloop() To make the window appear after the program is ran.

(Note:- you can customise this part as much as you want)

Congratulations

You have just learnt to make a
Currency converter using your now found knowledge of being able to understand both forex-python and tkinter modules. This is a very basic but an important project in order to understand these modules. Completing this project you have gained an understanding of:-
•tkinter
•forex-python
•UI making as a whole
•try and except commands

Note:- If you are having trouble using forex-python then you may consider waiting to switch to currency_converter library just replace them there won't be much of a change.

📊 How to build a Financial Dashboard on Python step-by-step

KartikJha-prod — Sun, 27 Sep 2026 11:53:52 +0000

Have you ever wanted to look up a stock's performance on a specific date, only to find out the market was closed for a weekend or holiday? In this tutorial, we will build a program that will solve this problem using Python, Plotly, and Dash.

Instead of making a program that will just tell us the price for that date this program will create a local web server that will fetch the real time prices from the yfinance module. It takes the date and symbol chosen by the user, opens a smart 15-day window, handles market closures by redirecting to nearest working date, and makes an interactive candlestick graph.
---### 💼 Project features and result.
By the end of this guide, you will build be able to make a program that manages the following tasks:

➔ Real Time Data Extraction: It connects directly to the "Yahoo Finance" API through the yfinance module to fetch the Open, High, Low, and Close prices.
➔ Relevant window: Creates a relevant 15 days window perfect for studying trends and predicting prices.
➔ Market Closure Alerts: It smartly checks whether the stock exchange was active on your target date. If the market was closed, it alerts the user while showing the nearest trading days instead.
➔ Able to run perfectly fine on any environment: It runs perfectly on any terminal system and runs inline i.e., makes the chart and window directly in the terminal on Jupyter and Google Colab notebooks ---### 📦 Step 1: All the imports and dependencies To start, we will first need to import the libraries that will manage our UI layout, data, and graph making. Create a new file named app.py and add this code block to the top of your workspace:

import dash
from dash import dcc, html
from dash.dependencies import Input, Output, State
import plotly.graph_objects as go
from datetime import datetime, timedelta
import yfinance as yf
import pandas as pd

Why these modules?* `yfinance` ➔ pulls stock prices

dash ➔ To make the dashboard along with his UI.
plotly.graph_objects ➔ To make the chart.
datetime & timedelta ➔ To get the date and time
pandas ➔ To structure the data into a more manageable form.

to install these libraries just type in the following line of code in your notebook and run it:

pip install dash pandas plotly yfinance

python
---### 🌐 Step 2: Starting the Server
Afterwards type in the following line of code:-

app = dash.Dash(__name__)

What it does:-
This single line of code sets up our local server. The __name__ part tells Dash where to look for assets, passing this command tells dash where to look for the root folder of the project so it can find assets like styles and images.

---### ✍️ Step 3: Designing the Interface.

Now we choose how we want our interface for the dashboard to look like. I have provided my style as an example but feel free to make changes and style the Interface yourself so its to your liking. In order to do so below this block of code are definitions and explanations of what these commands do.

app.layout = html.Div(style={
'fontFamily': '"Segoe UI", Helvetica, Arial, sans-serif',
'padding': '30px',
'maxWidth': '900px',
'margin': 'auto',
'backgroundColor': '#ffffff'
}, children=[
html.H2("Historical Stock Analysis Dashboard 📊", style={'textAlign': 'center', 'color': '#2c3e50', 'marginBottom': '10px'}),
html.P("Enter a stock ticker and target date to analyze historical market performance.", style={'textAlign': 'center', 'color': '#7f8c8d', 'marginBottom': '30px'}),

html.Div(style={
'backgroundColor': '#f8f9fa',
'padding': '25px',
'borderRadius': '8px',
'marginBottom': '25px',
'boxShadow': '0 4px 6px rgba(0,0,0,0.05)'
}, children=[
html.Label("Stock Ticker Symbol:", style={'fontWeight': 'bold', 'display': 'block', 'marginBottom': '8px', 'color': '#34495e'}),
dcc.Input(id='ticker-input', type='text', value='AAPL', style={
'width': '100%', 'padding': '10px', 'fontSize': '14px', 'marginBottom': '20px', 'borderRadius': '4px', 'border': '1px solid #ccc', 'boxSizing': 'border-box'
}),

html.Label("Select Date (YYYY-MM-DD):", style={'fontWeight': 'bold', 'display': 'block', 'marginBottom': '8px', 'color': '#34495e'}),
dcc.Input(id='date-input', type='text', value='2026-01-15', style={
'width': '100%', 'padding': '10px', 'fontSize': '14px', 'marginBottom': '25px', 'borderRadius': '4px', 'border': '1px solid #ccc', 'boxSizing': 'border-box'
}),

html.Button("Get Market Summary", id='submit-btn', n_clicks=0, style={
'width': '100%', 'padding': '12px', 'backgroundColor': '#007bff', 'color': 'white', 'border': 'none', 'borderRadius': '4px', 'fontSize': '16px', 'cursor': 'pointer', 'fontWeight': 'bold'
})
]),

html.Div(id='status-output', style={'textAlign': 'center', 'fontWeight': 'bold', 'marginBottom': '20px', 'fontSize': '16px'}),
dcc.Graph(id='price-graph', config={'displayModeBar': False})
])

Explaining the UI Components*

html.Div :- what it does is it makes a box containing information (children) you can customise what is in this box using children[] and change how it looks using style{} to change color, font, size, bold, etc.

dcc.Input:- Creates a place for the user to input data in this case {ticker symbol} and target date. It is simply a box where the user is to enter the input.
dcc.Graph Creates a graph to better showcase the data to the user. The setting config={'displayModeBar': False} removes excess button trays to maintain a clean and minimalist UI design.

Feel free to play around and experiment alot in these commands so you get the hang of them.
---### 🔗 Step 4: Reactive Callback
To give life to our interface, we use the dash @app.callback() command. This part of the script will just listen for user inputs.

@app.callback(
[Output('price-graph', 'figure'),
Output('status-output', 'children'),
Output('status-output', 'style')],
[Input('submit-btn', 'n_clicks')],
[State('ticker-input', 'value'),
State('date-input', 'value')]
)
def update_dashboard(n_clicks, ticker, date_str):
# This empty base state serves as a clean canvas placeholder
empty_fig = go.Figure(layout=go.Layout(
paper_bgcolor='rgba(0,0,0,0)',
plot_bgcolor='rgba(0,0,0,0)',
xaxis={'visible': False},
yaxis={'visible': False}
))

Output: Points to the exact properties on the page we want to change. Here, we target the graph's internal figure attribute, along with the children text and color style of our warning alert container.
Input: Tracks interactions. Whenever the user enters data by an action we track that using the line n_clicks which detects input and runs the rest of the script immediately.
State: The state block prevents the program from showing error while the user is still entering data For example say the user chose to check price of AAPL the state function will make sure the program doesn't run when the user has only entered A but will wait for the user to click the button to run the program.

---### 🧮 Step 5: Financial logic.

We will place our Financial Logic. Directly underneath our empty_fig block inside the update_dashboard function, we will add our data, logic, and graph generation code:

# 1. Check for empty fields
if not ticker or not date_str:
return empty_fig, "Please input a ticker symbol and target date.", {'color': '#e74c3c'}

try:
# 2. Parse input strings into datetime objects safely
target_date = datetime.strptime(date_str.strip(), "%Y-%m-%d").date()

# 3. Formulate our 15-day context timeline window (10 days before, 5 days after)
start_date = target_date - timedelta(days=10)
end_date = target_date + timedelta(days=5)

# 4. Sanitize and normalize input text criteria
ticker_clean = ticker.strip().upper()
stock = yf.Ticker(ticker_clean)

# 5. Extract historical information windows from API lines
history = stock.history(start=start_date.strftime("%Y-%m-%d"),
end=(end_date + timedelta(days=1)).strftime("%Y-%m-%d"))

if history.empty:
return empty_fig, f"No transactional data found for symbol '{ticker_clean}' around {date_str}.", {'color': '#e74c3c'}

 Re-index dates into plain text strings to allow clean key lookups
history.index = history.index.strftime('%Y-%m-%d')

# 6. Assemble the custom Plotly Candlestick configuration arrays
fig = go.Figure(data=[go.Candlestick(
x=history.index,
open=history['Open'],
high=history['High'],
low=history['Low'],
close=history['Close'],
increasing_line_color='#2ecc71', # Professional soft green for gains
decreasing_line_color='#e74c3c' # Clean red for losses
)])

fig.update_layout(
title=f"{ticker_clean} Performance Matrix around Target Date: {date_str}",
yaxis_title="Stock Value (USD)",

xaxis_title="Trading Session Date",
template="plotly_white",
xaxis_rangeslider_visible=False,
margin=dict(l=40, r=40, t=60, b=40)
)
# 7. Evaluate operational closures and match messaging strategies
if date_str in history.index:
t_open = history.loc[date_str, 'Open']
t_close = history.loc[date_str, 'Close']
msg = f"➔ Success! Target Date Metrics Found ({date_str}) -> Open: ${t_open:,.2f} | Close: ${t_close:,.2f}"
status_style = {'color': '#27ae60'}
else:
msg = f"⚠️ Target date ({date_str}) was a market closure day. Visualizing nearest open sessions."
status_style = {'color': '#f39c12'}
return fig, msg, status_style
except ValueError:
return empty_fig, "Invalid layout structure. Please use YYYY-MM-DD format.", {'color': '#e74c3c'}
except Exception as e:
return empty_fig, f"Network Extraction Alert: {str(e)}", {'color': '#e74c3c'}

Main Logic:-

Polishing input: We use .strip() and .upper() immediately after the input so the user's input will be processed without making it too grammatically heavy for the user. For example say the user wanted to check prices for tesla shares with ticker symbol TSLA then they can just writetsla or Tsla, etc without the program rejecting the input.
Pandas: By using this line history.index.strftime('%Y-%m-%d'), we match our data to the standard dates used on a calendar. This lets us check market history with simple if/else conditions.
API Boundary Tracking: When getting the target date window limits, we add a single day buffer using timedelta(days=1) onto our end_date calculation. This makes sure that Yahoo finance gets the data in a valid time period efficiently.

🌐 Step 6: Multiple-Environment

To complete our script dashboard, we will add the final piece of operational logic that we will place at the very end of our app.py script:

 if __name__ == '__main__':
 app.run( debug=True,
 jupyter_mode='inline', 
jupyter_height=750 )

This blocks ensures that the script will run on any compiler and will run inline that is run directly in the terminal window as well show the dashboard window in the terminal window on jupyter and Google Colab notebooks.

🎉 Conclusion and Summary of Achievements

Congratulations! You have made a highly accurate, cross platform, financial dashboard using basic python. By breaking out of traditional code you have demonstrated amazing skills in dashboard and plotly modules in python.
To take your dashboard code to the next level, experiment with the following upgrades:

➔ Modify your Plotly graph to match different styles try adding toggle-able dark mode Directly in the program.
➔ Expand your callback to also accept secondary data, allowing the user to compare two ticker prices on one window in using one simple program. At the end of this tutorial you should have a program that should look something like this

DEV Community: KartikJha-prod

How to make a Grocery store Web app with Python, Flask and MySQL (Part-3 How to use Flask to make the actual webapp)

Pre-requisite knowledge -

What you will learn -

i) The modules -

ii) Starting the Flask application -

iii) Importing the connection. -

iv) Using HTML to put the list of entries in the table in rows. -

v) The Webapp layout -

vi) To run the get_html_content function when the website is opened. -

vii) To get add data functions. -

viii) Making the web app run when executed.

How to make a Grocery store Web app with Python, Flask and MySQL (Part-2 How to connect a database to python)

Why should you learn this?

What is mysql.connector module

i) How to get mysql.connector and how to use it to connect to a database.

ii) How to run queries directly from Python

Congratulations

How to make a Grocery store Web app with Python, Flask and MySQL (Part-1 How to use MySQL)

Why learn this?

What is MySQL?

How to get MySQL?

How to use MySQL

Step 1 Making a database

Step 2 Making tables

Step 3 Entering values in the table

Step 4 Joining tables

What you learned

How to make a Currency Converter with tkinter and forex-python/currency converter.

How the process will work.

Step-1 :- Importing the modules

Step 2:- Trying to import forex-python API

Step 3 List of currencies supported.

Step 4:- Changing the text on the buttons

Step 5 To get the input currencies

Step 6 To shows errors and give result.

Step 7 Making the UI

Congratulations

📊 How to build a Financial Dashboard on Python step-by-step

Why these modules?* yfinance ➔ pulls stock prices

Explaining the UI Components*

Main Logic:-

🌐 Step 6: Multiple-Environment

🎉 Conclusion and Summary of Achievements

Why these modules?* `yfinance` ➔ pulls stock prices