When it comes to dynamic web apps, the database is a crucial component. But is it possible to create a dynamic web app with a login/register form and dynamic data display without using a database? The answer is yes! In this post, I will explain how you can easily create a dynamic website without any traditional databases like MySQL or PostgreSQL. Make sure to share this post with your friends and leave your feedback in the comments below. Let’s get started! 😊

Storing the Data in the JSON file

If we want to create a dynamic website without a database, we can use JSON files as a substitute. It may sound strange, but let me explain. We will use .json files as a database for our projects because JSON is a widely used format for storing content outside of programs. We will create lists inside JSON files and use the Python module named json (which is pre-installed with Python). You can import it with this code:

import json

After importing the json module, you can use this code to create a JSON file. You can also manually create a JSON file using Explorer.

open("filename.json", 'w')

Now we will create a flask app and assign a route to it.

from flask import Flask # Importing Flask From the flask Module

app = Flask(__name__) # Initializing App From Flask

@app.route("/") # Creating a Main root "/"
def home(): # Assigning the Main Function to the root
    return "Homepage" # Returning "Homepage" written on the webpage

app.run(debug = True) # Running the Flask App

Now Let’s create a Example HTML File and Add a Form in It.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Macstock Tech</title>
</head>
<body>
    <form action="/" method="POST">
        Enter Your Name: <input type="text" name="name">
        Enter Your Email: <input type="email" name="email">
        Enter Your Password: <input type="password" name="password">
        <button type="submit">Submit Details</button>
    </form>
</body>
</html>

Make Sure to Keep HTML File Inside “Templates” Folder (Create a Folder and name it “Templates” Where the Python File is Stored).

After that, we will write three keys and create blank list in the place of values for storing data in Our Json File.

filename.json

{"name": [], "email": [], "password": []}

Now We will Handle the Backend in Our Python File.

Main.py

from flask import Flask, request # Importing Flask and Request To Catch Request
import json # Import Json
from flask.templating import render_template # Importing Render Template To Server HTML Files

app = Flask(__name__) # Initialiazing App

@app.route("/", methods=["GET", "POST"]) # Creating Main Route
def home(): # Assinging a Function to the Route
    if request.method == "POST": # IF it is a post request
        name = request.form["name"] # Getting Input Name
        email = request.form["email"] # Getting Email
        password = request.form["password"] # Getting Password
        with open("filename.json", 'r') as json_file: # Opening The Json File as readable format
            data = json.load(json_file) # Storing Content of Json File In a Variable
            name_list = data["name"] # Getting Name List of Json File
            email_list = data["email"] # Getting Email List of Json File
            password_list = data["password"] # Getting Password List of Json File
            name_list.append(name) # Inserting Name Fetched From the HTML File to The List
            email_list.append(email) # Inserting Email Fetched From the HTML File to The List
            password_list.append(password) # Inserting Password Fetched From the HTML File to The List
        with open("filename.json", 'w') as container: # Opening Json File as writable format
            json.dump(data, container) # Storing the Previous Data with the New Inserted Data
    return render_template("index.html") # Returning Index.html

app.run(debug=True) # Running the Flask app

Now if you Run the Python File and then go to http://127.0.0.1:5000/ in your Browser, you will see the HTML Page.

After that, When You Fill All Details and Then Click On Submit Button then Your Details Will be Stored in the .json File.

Webpage

filename.json

So, now you’ve learned how to store data dynamically in a JSON file from an HTML webpage. Next, let’s move on to getting data from JSON files into an HTML file.

We will create a sample HTML file for demonstration.

Reading from the JSON file

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Macstock Tech</title>
</head>
<body>
    {% for name, email, password in data %}
    <h1>This the the name of the User: {{ name }}</h1>
    <h1>This the the email of the User: {{ email }}</h1>
    <h1>This the the password of the User: {{ password }}</h1>
    {% endfor %}
</body>
</html>

Make Sure to Also Put this HTML File Inside the Templates Folder!

Now we will create a new route in our Python file and serve the HTML page with data (Name, Email, Password) fetched from the JSON file.

Main.py

@app.route("/show-data") # Creating a New Route "/show-data"
def show_data(): # Assigning a funtion to the route
    with open("filename.json", 'r') as data_handler: # Opening the Json File as readable format
        data = json.load(data_handler) # Loading all contents of the json file to a variable
    name_list = all_data["name"] # Getting the List Of Name From the json File
    email_list = all_data["email"] # Getting the List of Email From the Json File
    password_list = all_data["password"] # Getting the List of Password From The Json File
    data = zip(name_list, email_list, password_list) # Creating a Zip Of All of the data and storing it in a variable
    return render_template("main.html", data=data) # Rendering the Template with the Data

Now, when you go to http://localhost:5000/show-data, you will see all the names, emails, and passwords that you filled in using the main page (index.html).

Webpage

If you fill in more information on the main page, then more information will be shown before the webpage is automated by a for loop.

So, now you’ve learned how to store and fetch data from a JSON file. We hope you found this useful. Thanks for reading! 🙂

Categorized in:

Projects, Python,