You will need to pass (move) data to and from your GUI (web pages) and Python code (usually main.py). Examples include:

From a web page to your main.py

• Any user data that needs to be stored in your database e.g. names, dates etc
• Any input that is used for a calculation e.g. calculating the time difference between two dates

From your main.py to a web page

• A list of data from your database that will be used to populate a drop down (combo box) list on your web page
• Details about a database entry - e.g. a person that need to be displayed

How this works is detailed below.

The general principles are:

1. Query your database to get the correct data. This might be a single variable or several variables

person = session.query(Person).filter(Person.ssn == ssn).first()
fname = person.get_firstname()
print(fname) #check getter method works
lname = person.get_lastname()
gender = person.get_gender()
age = person.get_age()

1. Ensure the data is in the correct form/type (e.g. single variable, list etc)
2. In the return render template section, create and assign variables with values

render_template("update.html",page_title='UPDATE A PERSON', ids=ssn, Fname = fname, Lname = lname, Gender = gender, Age = age)

Therefore the new variable Fname is assigned the value from person.get_firstname()

1. The variable e.g. Fname can be accessed in the html page by using {{Fname}}

<input type="text" id="firstname" name="fname" placeholder="firstname" value = "{{Fname}}">

The general principles are:

1. In main.py use WTForms - create a class for your form

class RegisterForm(FlaskForm):
  useremail = EmailField(label = ('Email'), validators=[InputRequired(), Length(max=60), Email()], render_kw={"placeholder": "Email"})
 
  password = PasswordField(label = ('Password'),validators=[InputRequired(), Length(min=4, max=20)], render_kw={"placeholder": "Password"})

1. In your web page create form elements

<form method="POST" action="">
  {{form.hidden_tag()}}

<div class="form-group">
                 {{form.useremail.label}}{{form.useremail}}
                </div>
                <div class="form-group">
                  {{form.password.label}}{{form.password}}
                  </div>
                  <div class="form-group">
  {{form.submit}}
                    </div>

1. In your main.py, in the route that needs to access the data, get the data from the form by creating a form variable that has the form class as the value, and then using the wtform form.elementname.data to retrieve the data:

@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegisterForm()
    if form.validate_on_submit():
      hashed_password = bcrypt.generate_password_hash(form.password.data)
      new_person = Person(id=form.id.data,first=form.firstname.data, last=form.lastname.data, gender=form.gender.data, age = form.age.data, username = form.username.data, email = form.useremail.data, pwd = hashed_password)