Skip to content
Gallery
Azavea
for Azavea
More
Share
Explore
PCA app

icon picker
app skeleton

In the below two example, we have the simplified Flask app demonstrating insertion into an RDS table, and an updating of not only the database, but a Pandas DataFrame to be consumed by the neural network; this is the core process I’ve been using with social workers, who are taking in new clients, and need to determine risk factors for abuse and trafficking.
1
from flask import Flask, render_template, request
from sqlalchemy import create_engine
from flask_mysqldb import MySQL
import pymysql
import pandas as pd
# import gitsecret

# app variable, config
app = Flask(__name__)

app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = 'Photon959'
app.config['MYSQL_DB'] = 'pcadata'


mysql = MySQL(app)
db_connection_str = 'mysql+pymysql://root:Photon959@localhost/pcadata'
db_connection = create_engine(db_connection_str)

# pandas reads from updated table, and pulls data into df
df = pd.read_sql('SELECT * FROM Circle', con=db_connection)


@app.route('/', methods=['GET', 'POST'])
def inputNewClient():
if request.method == "POST":
details = request.form
fname = details['fname']
lname = details['lname']
age = details['age']
book = details['book']
cur = mysql.connection.cursor()
cur.execute("INSERT INTO Circle(fname, lname, age, book) VALUES (%s, %s, %s, %s)",
(fname, lname, age, book))
mysql.connection.commit()
cur.close()
return render_template('index.html', flask_token="Allahuabha")


if __name__ == '__main__':
app.debug=True
app.run()

There are no rows in this table
⁠

The user interacts with the controller above through this view, handled by React. The React setup is demonstrated in the below two examples, where we have the React app.js calling the routes:
1
import React from 'react';
import './App.css';
import Navigation from './components/Navbar';
import Routes from './Routes';

function App() {
return (
<div className="bodyText" style={{color:'chartreuse'}}>
<Navigation />
<Routes />
</div>
);
}

export default App;
2
import React, { Component } from "react";
import { Router, Switch, Route } from "react-router-dom";
import Home from "./Home/Home";
import Login from "./Login/Login";

import history from './history';

export default class Routes extends Component {
render() {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/login" component={Login} />
</Switch>
</Router>
)
}
}
3
​
There are no rows in this table
⁠

Below, the entire page is rendered in React; css is included in the JSX script, so that I do not have to copy + paste a css file into this doc.
1
import React from 'react';
import './Home.css';

function Home() {
return (
<div className="App" style={{color:'chartreuse'}}>
<form method="POST" action="">

<div style={{fontSize:"19px",letterSpacing:'4px'}}>input data:</div> <br/>

<div className="superfield" style={{transform:'translateY(9px)'}}>
<div className="field">
<div>first name</div>
<input type = "text" name= "fname" style={{
fontSize:"19px", borderStyle:"solid",
borderRadius:"9px", borderWidth:"5px",
borderColor:"#FF00FF09", opacity:"60%",
outline:"none"}} /> <br/>
</div>

<div className="field">
<div>last name</div>
<input type = "text" name = "lname" style={{
fontSize:"19px", borderStyle:"solid",
borderRadius:"9px", borderWidth:"5px",
borderColor:"#FF00FF09", opacity:"60%",
outline:"none"}} /> <br/>
</div>

<div className="field">
<div>age</div>
<input type = "int" name = "age" style={{
fontSize:"19px", borderStyle:"solid",
borderRadius:"9px", borderWidth:"5px",
borderColor:"#FF00FF09", opacity:"60%",
outline:"none"}} /> <br/>
</div>

<div className="field">
<div>book</div>
<input type = "int" name = "book" style={{
fontSize:"19px", borderStyle:"solid",
borderRadius:"9px", borderWidth:"5px",
borderColor:"#FF00FF09", opacity:"60%",
outline:"none"}} /> <br/>
</div>

<input type = "submit" style={{margin:"26px"}}/>
</div>

</form>
</div>
);
}

export default Home;
There are no rows in this table
⁠

On the frontend, we enter the data into those fields, and Pandas gets the updated table. Then, from the Pandas DataFrame, we can get a statistical report of the queried table:
1
If we run :
​
2
python3 panda.py
​
3
we get the report and the updated dataframe:
​
4
age book
count 45.000000 45.000000
mean 33.400000 1.133333
std 16.979132 0.726135
min 12.000000 0.000000
25% 17.000000 1.000000
50% 29.000000 1.000000
75% 50.000000 1.000000
max 60.000000 3.000000
fname lname age book
0 vince paris 31 2
1 dorri ziai 34 1
2 ikeem cooper 26 2
3 tushar rai 20 2
4 kenneth walker 15 2
5 mohamed fofana 15 1
6 julie paris 29 1
7 jaleh najmi 25 1
8 shaun gould 34 3
9 albert paris 60 1
10 kim greene 50 1
11 hajja fofana 12 0
12 ethan jyg 12 0
There are no rows in this table
⁠


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.