Webpage Developing Weekly I learned 4

Jun 21 2021

Flask basic setting

In a project folder make app.py(python host serving file), templates folder(html folder), and static folder(css folder).

from flask import Flask, render_template ##use render_template to ##import html
app = Flask(__name__)

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

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

Post

Post server

@app.route('/order', methods=['POST']) #request url: /order and post # method.
def save_order():
    name = request.form['name_give']  # get name as name_give
    qty = request.form['qty_give'] 
    address = request.form['address_give'] 
    number = request.form['number_give']
    doc = {
        'name' : name,           #  And make a doc and insert to db
        'qty' : qty,
        'address' : address,
        'number' : number
    }
    db.orders.insert_one(doc)
    return jsonify({'msg': 'Successfully ordered'}) #return msg when # its successfully operated.

Post html

function order() {
    let name = $('#nameInp').val()/ get the value in nameInp and put / in name
    let qty = $('#inputGroupSelect01').val()
    let address = $('#addressInp').val()
    let number = $('#numberInp').val()
    $.ajax({
        type: "POST",
        url: "/order",
        data: {name_give:name, qty_give:qty, address_give:address, number_give:number},/ give the data that the name is given in server
        success: function (response) {
            alert(response['msg']); / alert msg when it successfully / operated.
            window.location.reload()
        }
    })
}

GET

Get server

@app.route('/order', methods=['GET'])
def view_orders():
    orders = list(db.orders.find({}, {'_id': False}))  # put all the  # data in orders
    return jsonify({'all_orders': orders})  # give the data as #all_orders

Get html

function showOrders() {
    $.ajax({
        type: "GET",
        url: "/order",
        data: {},
        success: function (response) {
            let orders = response['all_orders']
            for (let i = 0; i < orders.length; i++) { / make a for /statement and put all the data in single.
                let name = orders[i]['name']
                let qty = orders[i]['qty']
                let address = orders[i]['address']
                let number = orders[i]['number']
                let temp_html = `<tr> /make a temp_html
                                    <td>${name}</td>
                                    <td>${qty}</td>
                                    <td>${address}</td>
                                    <td>${number}</td>
                                </tr>`
                $('#orderTable').append(temp_html) / put temp_html in #orderTable
            }

        }
    })
}