Like Button

1. How to solve - jQuery id selector works only for the first row in the DB: https://stackoverflow.com/questions/11114622/jquery-id-selector-works-only-for-the-first-element.

2. How to solve - increase the number when the button clicked in jQuery

   https://stackoverflow.com/questions/4701349/jquery-increase-the-value-of-a-counter-when-a-button-is-clicked

3. How to solve - async button

   By using $(this).html(function (idx, val) {return val})

# Read
@app.route("/store", methods=["GET"])
def store_get():
    stores = list(db.stores.find())
    for store in stores:
        store['_id'] = str(store['_id'])

    return jsonify({"stores": stores})

# Like button
@app.route("/like", methods=["POST"])
def like_update():
    id_receive = request.form['id_give']

    like = db.stores.find_one({"_id": ObjectId(id_receive)}, {"like": 1})
    num_like = int(like["like"]) + 1
    add_like = { '$set': {'like': num_like }}

    db.stores.update_one({"_id": ObjectId(id_receive)}, add_like)
    return jsonify({'msg': 'like is increased by 1'})

let temp_html = `<button type="button" class="btn like" value=${id}>&#128077 ${like}</button>`

$(".like").click(function () {
    // Frontend: Increasing Like count on the page
    $(this).html(function (i, val) {
            return `&#128077 ${val.split(" ")[1] * 1 + 1}`;
    });

    // Backend: Sending Like count on th page to the DB
    let formData = new FormData();
    formData.append("id_give", this.value);
    fetch("/like", { method: "POST", body: formData })
            .then((response) => response.json())
            .then((data) => {});
});

Delete Button

# Delete
@app.route("/store", methods=["DELETE"])
def store_delete():
    id_receive = request.form['id_give']
    db.stores.delete_one({"_id": ObjectId(id_receive)})
    return jsonify({'msg': 'Store is successfully deleted!'})

let temp_html = `<button type="button" class="btn btn-dark delete" value=${id}>DELETE</button>`

$(".delete").click(function () {
        let formData = new FormData();
        formData.append("id_give", this.value);
        fetch("/store", { method: "DELETE", body: formData })
            .then((response) => response.json())
            .then((data) => {
                window.location.reload();
        });
});

AWS EC2 Deployment

• Why using AWS EC2?

: “Fast and reliable cloud servers” is the major cause for having a greater number of developers who prefer using Amazon EC2, yet a lower number of developers shed light on the feature of “Integrates with a variety of AWS services” as the number one reason behind going with the AWS Elastic Beanstalk.

1. AWS EC2 > Instances

2. Launch an instance > Name and tags > Application and OS Images: Ubuntu > Instance type: t2.micro > Key pair: Create new key pair: Key pair name, RSA, .pem > Download .pem file > Network settings: Auto-assign public IP - Enable > Launch

3. Copy Public IPv4 address

   

4. Open FileZilla

   

   Once connected successfully, it will show like this

   

5. Create a directory and move all files from the Local site to the Remote site (do not include venv, only the source codes) (or we can just do git clone <remote repo url>)

6. Open bash > enter the following command: ssh -i <.pem key address> ubuntu@<Public IPv4 address>

7. Open bash under the current directory as a directory we created > Enter the following command:

   1. sudo add-apt-repository universe

   2. sudo apt-get update

   3. sudo apt-get install python3-pip, then move to the directory

   4. pip install -r requirements.txt

8. Run the server: python3 app.py

9. Open the website: Public IPv4 address + Port number (like http://100.25.193.224:5000/)

10. ERROR:

    1. Edit Inbound Rules like the following screenshot:

       

11. Now, we are successfully able to open the deployed website