JSFiddle - React, Tailwind, and code Playground

by Jessie Lau

HTML

<form action="/friends/{{ friend[0].id }}/edit" method="POST">
          <div class="form-group">
            <label>First Name:</label>
            <input class="form-control" type="text" name="first_name" value="{{ friend[0].first_name }}">
          </div>
          <div class="form-group">
            <label>Last Name:</label>
            <input class="form-control" type="text" name="last_name" value="{{ friend[0].last_name }}">
          </div>
          <div class="form-group">
            <label>Age:</label>
            <input class="form-control" type="number" name="age" value="{{ friend[0].age }}">
          </div>
          <div class="form-group">
            <label>Location:</label>
            <input class="form-control" type="text" name="location" value="{{ friend[0].location }}">
          </div>
          <button class="btn btn-primary pull-right" type="submit" name="id" value="{{ friend[0].id }}">Save</button>
        </form>

JavaScript

from flask import Flask, render_template, redirect, request
from mysqlconnection import MySQLConnector
import time
app = Flask(__name__)
mysql = MySQLConnector('friend_list')


@app.route("/")
def index():
    friends = mysql.fetch("SELECT * FROM friend")
    return render_template("index.html", friends=friends)


@app.route("/friends", methods=["POST"])
def create_new_friend():
    query = ("INSERT INTO friend(first_name, last_name, age, location, created_at)VALUES('{}', '{}', '{}', '{}', '{}')".format(
        request.form["first_name"], request.form["last_name"], request.form["age"], request.form["location"], time.strftime("%Y/%m/%d %H:%M")))
    mysql.run_mysql_query(query)
    return redirect("/")


@app.route("/friends/<id>/edit")
def edit_friend(id):  # display an edit friend page
    friend = mysql.fetch("SELECT * FROM friend WHERE id = {}".format(id))
    return render_template("edit.html", friend=friend)


@app.route("/friends/<id>", methods=["POST"])
def update_friend_info(id):  # handler sumbit form to edit friend
    query = ("UPDATE friend SET first_name='{}',last_name='{}',age='{}',location='{}' WHERE id='{}'".format(request.form["first_name"], request.form["last_name"], request.form["age"], request.form["location"], request.form["id"]))
    mysql.run_mysql_query(query)
    return redirect("/friends/<id>/edit")


@app.route("/friends/<id>/delete", methods=["POST"])
def delete_friend(id):
    query = ("DELETE FROM friend WHERE id = {}".format(request.form["id"]))
    mysql.run_mysql_query(query)
    return redirect("/")

app.run(debug=True)