Python web application CRUD sample using CherryPy and MongoDB database

A CRUD sample implemented using CherryPy framework and MongoDB database.
All the CRUD operations are explained in detail with code samples.
To connect to MongoDB, pymongo library is used.
Complete the step by step tutorial to get familiarized with Python CherryPy web application development and MongoDB database integration.
This sample lists a set of books available in a library. Users can add, edit or delete from this list.
Contents
Set up python in your machine

Install CherryPy and Jinja2 Template Engine

Install pymongo

Web Application Initial Setup
Setting up First page

MongoDB Database Setup

Read data from MongoDB and list

Create or update record
Delete a Record

CherryPy CRUD with MongoDB - Complete code

Other web app samples
Set up python in your machine

Download and install the latest version of python from Python Website.

Setting up virtual environment is not a must, but its is good to keep all your projects within a virtual environment. Here, we will proceed with a virtual environment.

For that, go to the command prompt and cd to the folder where you are going to keep your project.
Run command python -m venv book_library to create a virtual environment folder book_library. We will be keeping all our code in this folder and the installed package files will also be kept automatically within this folder.

Now, activate the VE using command:

For Windows:

book_library\Scripts\activate.bat

For Linux, macOS:

source book_library /bin/activate

After VE activation, from cmd type cd book_library to navigate to the project folder.
Install CherryPy and Jinja2 Template Engine

To install CherryPy, run command pip install CherryPy or pip3.9 install CherryPy
If not working use commands:

For Windows:

py -3.9 -m pip install CherryPy

For Linux, macOS:

python3.9 -m pip install CherryPy

Also install Jinja2 using the command pip install Jinja2. Jinja2 is basically a template engine that helps in serving the html to the user. Using this library along with CherryPy helps in faster development. For example, we are using Jinja2 function get_template to render HTML page from the python code and python codes like for loops are added to the HTML page using the Jinja2 template markup syntax.
Install pymongo

For MongoDB connection we are going to use the pymongo library. Install this using the command: pip install pymongo or pip3.9 install pymongo (If using 3.9 python version).

Run pip freeze or pip3.9 freeze to check if all packages installed successfully.
Web Application Initial Setup

Let us start with the initial set of code that is required for every CherryPy web applications. Create a file named books.py (you can provide any name) inside book_library folder and copy below code to it. books.py is going to contain your start-up code which is required to run the web app.
Now, from command prompt navigate to book_library folder and execute command py books.py or python books.py or py -3.9 -m books or python3.9 -m books (Based on the Python version used and the Operating System).
```
import cherrypy

class BookLibrary(object):
    @cherrypy.expose
    def index(self):
        return 'Book Library app is starting up'

if __name__ == '__main__':
    cherrypy.quickstart(BookLibrary())
```
This code imports cherrypy module and then a startup class is created and initiated using the quickstart method from the __main__. Startup class should have a method named index that will load the first HTML content.
In command prompt, we will see the below message when execution starts without any issues.
```
	[08/Jun/2022:18:11:50] ENGINE Listening for SIGTERM.
	[08/Jun/2022:18:11:50] ENGINE Bus STARTING
	CherryPy Checker:
	The Application mounted at '' has an empty config.

	[08/Jun/2022:18:11:50] ENGINE Started monitor thread 'Autoreloader'.
	[08/Jun/2022:18:11:50] ENGINE Serving on http://127.0.0.1:8080
	[08/Jun/2022:18:11:50] ENGINE Bus STARTED
```
Copy the URL http://127.0.0.1:8080 to your browser and run. The message Book Library app is starting up will display in the web browser, if the set up is proper and without any issues.
Setting up First page

Now we are going to load an HTML file as the first page of the application.
Create an HTML file bookslist.html inside book_library folder.

Add below code to bookslist.html page.
In books.py, add the line return open('bookslist.html') inside index function to render this HTML as the first page.
Copied

<!DOCTYPE html> <html lang="en-US" dir="ltr"> <head> <title>Books List</title> </head> <body> <h2>Books List</h2> </body>
Copied

import cherrypy class BookLibrary(object): @cherrypy.expose def index(self): return open('bookslist.html') if __name__ == '__main__': cherrypy.quickstart(BookLibrary())
Changes are automatically compiled and on refreshing the web page we can see the HTML page as the output.

MongoDB Database Setup

We will use the PyMongo adapter to create database and a table and insert data to it.
Create a file named mongodbData.py in the same code folder and paste the below code in it.
Run this file using command py mongodbData.py or python mongodbData.py or py -3.9 -m mongodbData or python3.9 -m mongodbData.py

This set of code connects to the local MongoDB client and then creates a database and a table in it. You should have MongoDB installed locally in your machine or use a valid server url in the below code.
Then we are inserting five records to the table.

import pymongo

booklibraryClient = pymongo.MongoClient("mongodb://localhost:27017/")
booksDB = booklibraryClient["BookLibrary"]
bookstable = booksDB["BooksTable"]

bookslist = [
  { "ID": 1, "Name": "Harry Potter", "Year": 2020, "Price": 100 },
  { "ID": 2, "Name": "The Lord of the Rings", "Year": 2018, "Price": 80 },
  { "ID": 3, "Name": "The Alchemist", "Year": 2010, "Price": 85 },
  { "ID": 4, "Name": "The Da Vinci Code", "Year": 2017, "Price": 70 },
  { "ID": 5, "Name": "The Twilight Saga", "Year": 2015, "Price": 90 }
]

tbl = bookstable.insert_many(bookslist)
print(tbl.inserted_ids)

Read data from MongoDB and list

bookslist.html is going to hold the list of books in the library. To list the items, add below code to the body of the HTML and modify books.py main method as below. Also import pymongo. In python file, we are reading data from MongoDB database BookLibrary using pymongo built-in functions as shown below and pass it to html as a parameter. In html, we are looping through the items and list it as table rows.

import cherrypy
import pymongo
import os
from jinja2 import Environment, FileSystemLoader

def connectDB():
    booklibraryClient = pymongo.MongoClient("mongodb://localhost:27017/")
    booksDB = booklibraryClient["BookLibrary"]
    return booksDB

class BookLibrary(object):
    @cherrypy.expose
    def index(self):
        books = []
        booksDB = connectDB()
        bookstable = booksDB["BooksTable"]
        for book in bookstable.find():
            books.append({"id": book["ID"], "name": book["Name"], "year": book["Year"], "price": book["Price"]})
        templenv = Environment(loader=FileSystemLoader(os.getcwd()))
        return templenv.get_template('bookslist.html').render(books=books)


if __name__ == '__main__':
    cherrypy.quickstart(BookLibrary())

<table class="table">
    <thead>
        <tr>
        <th scope="col">Id</th>
        <th scope="col">Name</th>
        <th scope="col">Year</th>
        <th scope="col">Price</th>
        </tr>
    </thead>
    <tbody>
        {% for book in books %}
            <tr>
                <td>{{ book.id }}</th>
                <td>{{ book.name }}</td>
                <td>{{ book.year }}</td>
                <td>{{ book.price }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>

For styling we will use Bootstrap 5. Add below 2 lines inside head of html.


    <link rel="stylesheet" crossorigin="anonymous"
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" >
    
	<script crossorigin="anonymous"
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" >
	</script>

On reload, we will get below output window.

Create or update record

Add a new link button in the bookslist.html above the table.

    <a class="btn btn-primary" href="openaddbookpage/0">Add New Book</a>

Add new html file, addbook.html and place the below code.
Add two links for edit and delete in bookslist.html as below.
Add two more route methods, openaddbookpage() and savebookdetails() in books.py below index() method to handle routing to the edit page and saving the data (Double check the pasted contents are properly intended).

    @cherrypy.expose
    def openaddbookpage(self, id=0):
        bk = []
        templenv = Environment(loader=FileSystemLoader(os.getcwd()))
        if int(id) == 0:
            return templenv.get_template('addbook.html').render(book=bk)
        else:
            booksDB = connectDB()
            bookstable = booksDB["BooksTable"]
            for book in bookstable.find( { "ID": int(id) } ):
                bk.append({"id": book["ID"], "name": book["Name"], "year": book["Year"], "price": book["Price"]})
            return templenv.get_template('addbook.html').render(book=bk[0])
    
    @cherrypy.expose
    def savebookdetails(self, id=0, name='', year=0, price=0):
        templenv = Environment(loader=FileSystemLoader(os.getcwd()))
        idexists = 0
        booksDB = connectDB()
        bookstable = booksDB["BooksTable"]
        for book in bookstable.find( { "ID": int(id) } ):
            idexists = 1
            break
        if int(idexists) == 0:
            bookstable.insert_one( { "ID": int(id), "Name": name, "Year": year, "Price": price } )
        else:
            condition = { "ID": int(id) }
            updatedval = { "$set": { "Name": name, "Year": year, "Price": price } }
            bookstable.update_one(condition, updatedval)
        raise cherrypy.HTTPRedirect("/")

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
    <title>Book Details</title>
    
    <link rel="stylesheet" crossorigin="anonymous"
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" >
    
	<script crossorigin="anonymous"
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" >
	</script>

</head>

<body>
    <h2>Book Details</h2>

    <form action="../savebookdetails" method = "POST">
        <div class="form-group row">
          <label for="id">Id</label>
          <input type="text" class="form-control" name="id" value="{{book.id}}">
        </div>
        <div class="form-group row">
            <label for="name">Book Name</label>
            <input type="text" class="form-control" name="name" value="{{book.name}}">
        </div>
        <div class="form-group row">
            <label for="year">Year</label>
            <input type="text" class="form-control" name="year" value="{{book.year}}">
        </div>
        <div class="form-group row">
            <label for="price">Price</label>
            <input type="text" class="form-control" name="price" value="{{book.price}}">
        </div>
        <button type="btnAdd" class="btn btn-primary">Submit</button>
        <a href="/" class="btn btn-primary">Cancel</a>
      </form>
</body>

<table class="table">
    <thead>
        <tr>
        <th scope="col">Id</th>
        <th scope="col">Name</th>
        <th scope="col">Year</th>
        <th scope="col">Price</th>
        <th scope="col">Edit</th>
        <th scope="col">Delete</th>
        </tr>
    </thead>
    <tbody>
        {% for book in books %}
            <tr>
                <td>{{ book.id }}</th>
                <td>{{ book.name }}</td>
                <td>{{ book.year }}</td>
                <td>{{ book.price }}</td>
                <td><a href='openaddbookpage/{{ book.id }}'>Edit</a></td>
                <td><a href='deletebook/{{ book.id }}'>Delete</a></td>
            </tr>
        {% endfor %}
    </tbody>
</table>

Add New Book button in the list page calls openaddbookpage route with ID as 0. So Book Details page opens in Create mode with empty text boxes.
Edit link next to each row also calls openaddbookpage route, but passes ID number to the Book Details page. So the details of the selected book gets fetched from the DB and bind to the corresponding text boxes in the HTML page.

savebookdetails route is called on Submit button click. If the entered ID number doesn't exist in the database, new book gets added using insert_one method. Otherwise, existing record is updated using update_one method.

Delete a Record

For delete, we will add a new route method deletebook() and call delete_one method to delete the selected ID.

    @cherrypy.expose
    def deletebook(self, id=0):
        booksDB = connectDB()
        bookstable = booksDB["BooksTable"]
        bookstable.delete_one({ "ID": int(id) })
        raise cherrypy.HTTPRedirect("../")

CherryPy CRUD with MongoDB database - Complete code

Complete code is placed below.

import cherrypy
import pymongo
import os
from jinja2 import Environment, FileSystemLoader

def connectDB():
    booklibraryClient = pymongo.MongoClient("mongodb://localhost:27017/")
    booksDB = booklibraryClient["BookLibrary"]
    return booksDB

class BookLibrary(object):
    @cherrypy.expose
    def index(self):
        books = []
        booksDB = connectDB()
        bookstable = booksDB["BooksTable"]
        for book in bookstable.find():
            books.append({"id": book["ID"], "name": book["Name"], "year": book["Year"], "price": book["Price"]})
        templenv = Environment(loader=FileSystemLoader(os.getcwd()))
        return templenv.get_template('bookslist.html').render(books=books)
    
    @cherrypy.expose
    def openaddbookpage(self, id=0):
        bk = []
        templenv = Environment(loader=FileSystemLoader(os.getcwd()))
        if int(id) == 0:
            return templenv.get_template('addbook.html').render(book=bk)
        else:
            booksDB = connectDB()
            bookstable = booksDB["BooksTable"]
            for book in bookstable.find( { "ID": int(id) } ):
                bk.append({"id": book["ID"], "name": book["Name"], "year": book["Year"], "price": book["Price"]})
            return templenv.get_template('addbook.html').render(book=bk[0])
    
    @cherrypy.expose
    def savebookdetails(self, id=0, name='', year=0, price=0):
        templenv = Environment(loader=FileSystemLoader(os.getcwd()))
        idexists = 0
        booksDB = connectDB()
        bookstable = booksDB["BooksTable"]
        for book in bookstable.find( { "ID": int(id) } ):
            idexists = 1
            break
        if int(idexists) == 0:
            bookstable.insert_one( { "ID": int(id), "Name": name, "Year": year, "Price": price } )
        else:
            condition = { "ID": int(id) }
            updatedval = { "$set": { "Name": name, "Year": year, "Price": price } }
            bookstable.update_one(condition, updatedval)
        raise cherrypy.HTTPRedirect("/")

    @cherrypy.expose
    def deletebook(self, id=0):
        booksDB = connectDB()
        bookstable = booksDB["BooksTable"]
        bookstable.delete_one({ "ID": int(id) })
        raise cherrypy.HTTPRedirect("../")


if __name__ == '__main__':
    cherrypy.quickstart(BookLibrary())

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
    <title>Books List</title>
    <link rel="stylesheet" crossorigin="anonymous"
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" >
    
	<script crossorigin="anonymous"
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" >
	</script>
</head>

<body>
    <h2>Books List</h2>
    <a class="btn btn-primary" href="openaddbookpage/0">Add New Book</a>
    <table class="table">
        <thead>
            <tr>
            <th scope="col">Id</th>
            <th scope="col">Name</th>
            <th scope="col">Year</th>
            <th scope="col">Price</th>
            <th scope="col">Edit</th>
            <th scope="col">Delete</th>
            </tr>
        </thead>
        <tbody>
            {% for book in books %}
                <tr>
                    <td>{{ book.id }}</th>
                    <td>{{ book.name }}</td>
                    <td>{{ book.year }}</td>
                    <td>{{ book.price }}</td>
                    <td><a href='openaddbookpage/{{ book.id }}'>Edit</a></td>
                    <td><a href='deletebook/{{ book.id }}'>Delete</a></td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</body>

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
    <title>Book Details</title>
    
    <link rel="stylesheet" crossorigin="anonymous"
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" >
    
	<script crossorigin="anonymous"
	src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" >
	</script>

</head>

<body>
    <h2>Book Details</h2>

    <form action="../savebookdetails" method = "POST">
        <div class="form-group row">
          <label for="id">Id</label>
          <input type="text" class="form-control" name="id" value="{{book.id}}">
        </div>
        <div class="form-group row">
            <label for="name">Book Name</label>
            <input type="text" class="form-control" name="name" value="{{book.name}}">
        </div>
        <div class="form-group row">
            <label for="year">Year</label>
            <input type="text" class="form-control" name="year" value="{{book.year}}">
        </div>
        <div class="form-group row">
            <label for="price">Price</label>
            <input type="text" class="form-control" name="price" value="{{book.price}}">
        </div>
        <button type="btnAdd" class="btn btn-primary">Submit</button>
        <a href="/" class="btn btn-primary">Cancel</a>
      </form>
</body>

Other web app samples

Crud Samples implemented using different frameworks and databases.

Flask

Flask CRUD with JSON

Flask CRUD with SQL Server

Flask CRUD with MySQL

Flask Web App Sample using MongoDB

Flask CRUD with Oracle

Flask CRUD with PostgreSQL

Flask Web App Sample using MariaDB

Flask Web App Sample using Firebase DB

Django

Django CRUD with JSON

Django CRUD with SQL Server

Django CRUD with MySQL

Django Web App Sample using MongoDB

Django CRUD with Oracle

Django CRUD with PostgreSQL

Django Web App Sample using MariaDB

Django Web App Sample using Firebase DB

CherryPy

CherryPy CRUD with SQL Server

CherryPy Web App Sample using MongoDB

CherryPy CRUD with Oracle

CherryPy CRUD with JSON

CherryPy Web App Sample using Firebase DB

CherryPy CRUD with MySQL

CherryPy Web App Sample using MariaDB

CherryPy CRUD with PostgreSQL

Python web application CRUD sample using CherryPy and MongoDB database

Contents

Set up python in your machine

Install CherryPy and Jinja2 Template Engine

Install pymongo

Web Application Initial Setup

Setting up First page

MongoDB Database Setup

Read data from MongoDB and list

Create or update record

Delete a Record

CherryPy CRUD with MongoDB database - Complete code

Other web app samples

Flask

Django

CherryPy