Short-Term Project — Book Review

2 min readAug 14, 2021

Applying FLASK, MongoDB, and Python to Construct an OpenAPI

HTML File — “index.html”

<!DOCTYPE html>
<html lang="ko">

<head>
    <!-- Webpage Title -->
    <title>Book Review | Jooyoung Oh</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous">

    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">

    <script type="text/javascript">

        $(document).ready(function () {
            showReview();
        });

        function makeReview() {
            let title = $('#title').val()
            let author = $('#author').val()
            let review = $('#bookReview').val()

            $.ajax({
                type: "POST",
                url: "/review",
                data: {title_give: title, author_give: author, review_give: review},
                success: function (response) {
                    alert(response["msg"]);
                    window.location.reload();
                }
            })
        }

        function showReview() {
            $.ajax({
                type: "GET",
                url: "/review",
                data: {},
                success: function (response) {
                    let reviews = response['all_reviews']
                    for (let i = 0; i < reviews.length; i++) {
                        let title = reviews[i]['title']
                        let author = reviews[i]['author']
                        let review = reviews[i]['review']

                        let temp_html = `<tr>
                                            <td>${title}</td>
                                            <td>${author}</td>
                                            <td>${review}</td>
                                         </tr>`
                        $('#reviews-box').append(temp_html)
                    }
                }
            })
        }

    </script>

    <style type="text/css">
        * {
            font-family: "Do Hyeon", sans-serif;
        }

        h1,
        h5 {
            display: inline;
        }

        .info {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .review {
            text-align: center;
        }

        .reviews {
            margin-top: 100px;
        }
    </style>
</head>

<body>
<div class="container" style="max-width: 600px;">
    <img src="https://previews.123rf.com/images/maxxyustas/maxxyustas1511/maxxyustas151100002/47858355-education-concept-books-and-textbooks-on-the-bookshelf-3d.jpg"
         class="img-fluid" alt="Responsive image">
    <div class="info">
        <h1>Leave a Brief Review</h1>
        <p>Leaving a short review of the book or any other publications you've read may influence others and make their
            lives richer!</p>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">TTL</span>
            </div>
            <input type="text" class="form-control" id="title">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">ATR</span>
            </div>
            <input type="text" class="form-control" id="author">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">RW</span>
            </div>
            <textarea class="form-control" id="bookReview"
                      cols="30"
                      rows="5" placeholder="Your review can be as long as 140 words!"></textarea>
        </div>
        <div class="review">
            <button onclick="makeReview()" type="button" class="btn btn-primary">Submit</button>
        </div>
    </div>
    <div class="reviews">
        <table class="table">
            <thead>
            <tr>
                <th scope="col">Title</th>
                <th scope="col">Author</th>
                <th scope="col">Review</th>
            </tr>
            </thead>
            <tbody id="reviews-box">
            </tbody>
        </table>
    </div>
</div>
</body>

</html>

Server — “app.py”

from flask import Flask, render_template, jsonify, request
app = Flask(__name__)

from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta

## HTML
@app.route('/')
def home():
    return render_template('index.html')

## API
@app.route('/review', methods=['POST'])
def write_review():
    title_receive = request.form['title_give']
    author_receive = request.form['author_give']
    review_receive = request.form['review_give']

    doc = {
        'title':title_receive,
        'author':author_receive,
        'review':review_receive
    }

    db.bookreview.insert_one(doc)

    return jsonify({'msg': 'Saved!'})

@app.route('/review', methods=['GET'])
def read_reviews():
    reviews = list(db.bookreview.find({}, {'_id': False}))
    return jsonify({'all_reviews': reviews})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

Short-Term Project — Book Review

Written by Jooyoung Oh