Python Flask and Jinja syntax. How to get a name to show on another page?

[pc510]

I am trying to make a web app using Flask, but I am having trouble with the Jinja syntax. I am following CS50. I want to take the student's name and dorm from index.html and display it on success.html. However, I am unable to do this. All that displays is

"You have successfully registered! from has registered." Whereas I want it to say "You have successfully registered! [STUDENT] from [DORM NAME] has registered."

Here is the main.py code

from flask import Flask, render_template, request
import csv

app = Flask(__name__)

students = []

@app.route('/')
def index():
    # does this go here?

    return render_template('index.html')


@app.route('/register', methods=["POST", "GET"])
def register():

    name = request.form.get("name")

    if not request.form.get("name") or not request.form.get("dorm"):
        return "Failure!"
    file = open("registered.csv", "a")
    writer = csv.writer(file)
    writer.writerow((request.form.get("name"), request.form.get("dorm")))
    file.close()

    return render_template("success.html")



@app.route('/registered')
def registered():
    file = open("registered.csv", "r")
    reader = csv.reader(file)
    students = list(reader)
    return render_template("registered.html", students=students)

@app.route("/registrants")
def registrants():
    file = open("registered.csv", "r")
    reader = csv.reader(file)
    students = list(reader)
    return render_template("registered.html", students=students)

Here is the index.html code

{% extends "layout.html" %}

{% block body %}
<h1>register</h1>
    <form action="/register" method="post">
        <input name="name" placeholder="Name" type="text" id="name">

        <select name="dorm" method="post">
            <option disabled selected value="" id="dorm" name="dorm">Dorm</option>
            <option value="apley court">apley court</option>
            <option value="candy">candy</option>
            <option value="d dorm">d dorm</option>

        </select>
        <input type="submit" value="Register"><br>
        <p>Or see who else is <a href="{{ url_for('registered') }}">REGISTERED</a></p>
    </form>
{% endblock %}

And here is the success.html code

{% extends "layout.html" %}

{% block body %}
    You have successfully registered!
    {{ name }} from {{ dorm }} has registered.
{% endblock %}

My guess is that the problem is in the success.html code, but I cannot figure out what I am doing wrong and why I cannot grab the input variables from the html inputs. Any help would be much appreciated. Thank you!

 

[menator01]

setup
templates
... index/form.html
... success.html

server.py

server.py

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def home():
    return render_template('index.html')
@app.route('/success/', methods=['GET', 'POST'])
def success():
    if request.method == 'POST':
        data = request.form
        return render_template('success.html', data=data)
if __name__ == '__main__':
    app.run()

index/form.html

<style>
    div {
        margin: 2em;
    }
</style>

<form action="/success/" method="POST">
    <div>
    <input type="text" name="name" placeholder="Name" id="name">
    </div>
    <div>
    <select name="dorm" id="dorm">
        <option disabled selected value="">Dorm</option>
        <option value="apley court">apley court</option>
        <option value="candy">candy</option>
        <option value="d dorm">d dorm</option>
    </select>
    </div>
    <div>
    <input type="submit" value="Register">
    </div>
</form>

success.html

<p>
    <h1>{{data['name']}}, you have successfully registered.</h1>
    {{data['name']}} from {{data['dorm']}} dorm
</p>

 

[pc510]

<h1>{{data['name']}}, you have successfully registered.</h1>
{{data['name']}} from {{data['dorm']}} dorm has registered.

This code is working great. Thanks! I was having some trouble saving the content to the CSV file, so I rewrote the code to look like this. I combined the success and register pages.

index.py:

from flask import Flask, render_template, request
import csv

app = Flask(__name__)

students = []

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

@app.route('/success', methods=['POST','GET'])
def success():
    if request.method == 'POST':
        data = request.form # this returns the data from the form?
        return render_template('success.html', data=data)

@app.route('/register', methods=["POST", "GET"])
def register():
    name = request.form.get("name")
    if not request.form.get("name") or not request.form.get("dorm"):
        return "Failure!"
    file = open("registered.csv", "a")
    writer = csv.writer(file)
    writer.writerow((request.form.get("name"), request.form.get("dorm")))
    file.close()
    if request.method == 'POST':
        data = request.form
        return render_template('success.html', data=data)

@app.route('/registered')
def registered():
    file = open("registered.csv", "r")
    reader = csv.reader(file)
    students = list(reader)
    return render_template("registered.html", students=students)

I had a quick follow up question. For the code

<h1>{{data['name']}}, you have successfully registered.</h1>
{{data['name']}} from {{data['dorm']}} dorm has registered.

where are the 'name' and 'dorm' within the [ ]? Is this the "id" from the HTML input section?

 

[menator01]

The form returns a dict. Name and form are keys in the dict

 

[menator01]

It is the name part of the form

 

[menator01]

Kinda went a little further with your project. Plan on adding a database to hold the data at some point.
I'm using an html table that I done a few days back.
Sorry about all the lines of code.
directory setup
/ root
----__init__.py
----/static
--------/css
--------/js
--------/images
----/templates
--------all html files

__init__.py

from flask import Flask, render_template, request, redirect, url_for, session
import json
# File path, Must have read/and write by the server
file = '/var/www/FlaskApp/student.json'
# Open and load json file
with open(file, 'r') as jsonfile:
    students_data = json.load(jsonfile)
# Create the app
app = Flask(__name__)
# Ucomment to run standalone
# app.secret_key = '123@'
# Set the app root and redirect to home/start page
@app.route('/', methods=['GET'])
def index():
    return redirect(url_for('home'))
# Main view page
@app.route('/home')
def home():
    session['students'] = students_data
    return render_template('home.html')
# Form page
@app.route('/form')
def form():
    return render_template('form.html')
# Function for registering data and storing in a session for site wide use
@app.route('/register', methods=['POST', 'GET'])
def register():
    if request.method == 'POST':
        # Will be writing data to json file here
        session['data'] = request.form
        return redirect(url_for('success'))
# View for success page
@app.route('/success/')
def success():
    data = session.get('data')
    return render_template('success.html', data=data)
# View for students in json file
@app.route('/students')
def students():
    return render_template('students.html')
# Run the app
if __name__ == '__main__':
    app.run()

css files
form.css

.myform {
    box-shadow: 0 0 8px black;
    border-radius: 20px;
    border-spacing: .5em;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    background-image: linear-gradient(skyblue, lightsteelblue);
    padding: 8px;

}
.myform table {
    width: auto;
}
.myform th {
    background-color: transparent;
}

.myform input {
    position: relative;
    margin: auto;
    width: 100%;
}

.myform td {
    padding: 4px 12px 6px 4px;
    background-color: transparent;
    border: solid 1px rgb(50,50,50);
}

.myform h4 {
    margin: 2px 0 8px 4px;
}

.myform .btn, .myform select {
    cursor: pointer;
    margin-left: 4px;
}

student.css

h1 {
    background-image: linear-gradient(skyblue, lightsteelblue);
    text-align: center;
    padding: .5em;
    color: white;
    text-shadow: 0 0 2px black;
    box-shadow: 0 0 5px black;
    border-radius: 10px;
}

.tab {
    padding: 1em;
    background-color: skyblue;
    width: 400px;
    margin: 1em 0 0 0;
    line-height: 2em;
    box-shadow: 0 0 8px rgb(30,30,30);
    border-radius: 8px;
}

style.css

html,
body {
    height: 96%;
}

table {
    position: relative;
    top: 2%;
    left: 5%;
    width: 90%;
    height: 100%;
    border-spacing: 0;
}

th {
    height: 10%;
    font-size: 3em;
    background-color: lightsteelblue;
    border-radius: 20px 20px 0 0;
    color: white;
    text-shadow: 0 0 5px rgb(30, 30, 30), 0 0 6px rgb(255, 255, 255);
}

.logo {
    float: left;
    position: relative;
    left: 35%;
}

.mid {
    background-color: steelblue;
}

.midrow {
    background-image: linear-gradient(lightsteelblue, steelblue);
}

td {
    vertical-align: top;
    background-color: steelblue;
}

.left,
.right {
    width: 15%;
    height: 85%;
    background-image: linear-gradient(lightsteelblue, steelblue);
}


h3 {
    text-align: center;
    background-color: dodgerblue;
    margin: 4px;
    color: white;
    text-shadow: 1px 1px 3px rgb(10, 10, 10);
    border-radius: 10px 10px 0 0;
    text-decoration: underline;
}

ul {
    list-style-type: none;
}

ul li {
    margin: 4px 0 4px 0;
}

.mid {
    box-shadow: inset 0 0 4px 5px rgba(30, 30, 30, .5);
    border-radius: 20px;
    background-image: radial-gradient(rgb(200, 200, 200), rgb(255, 255, 255) 70%, rgb(200, 200, 200));
    padding: 2em;
}

.footer {
    background-color: steelblue;
    border-radius: 0 0 20px 20px;
    text-align: center;
    padding-top: 16px;
    color: white;
    text-shadow: 0 0 3px rgb(30, 30, 30);
    font-size: 1.25em;
}

a:any-link {
    color: blue;
}

a:hover {
    color: cyan;
    text-shadow: 0 0 3px black;
}

p {
    font-size: 1.25em;
    font-family: tahoma;
    font-style: italic;
}

#clock {
    font-size: 14px;
}

#date {
    font-size: 14px;
    padding-left: 2.5em;
}

.date-time {
    background-color: dodgerblue;
    margin: -4px 4px 4px 4px;
    padding: 4px;
    color: white;
    text-shadow: 2px 2px 2px black;
    border-radius: 0 0 10px 10px;
}

success.css

.success-table {
    height: auto;
    border-spacing: .15em;
    border-radius: 20px;
    padding: 1em;
    box-shadow: 0 0 5px black;
}

.success-table td {
    padding: 8px;
    background-color: steelblue;
    color: white;
    text-shadow: 1px 1px 2px black;
}

.success-table th {
    font-size: 1.75em;
}

.tleft {
    width: 15%;
}

.success-table .tfoot {
    height: 20px;
    background-color: lightsteelblue;
    border-radius: 0 0 20px 20px;
   
}

template files
index.html

<!DOCTYPE html>
<html lang='us'>

<head>
    <title>My Page</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <script type="text/javascript" src="/static/js/clock.js"></script>
    <script type="text/javascript" src="/static/js/date.js"></script>
</head>

<body>

    <table>
        <tr>
            <th colspan="3">
                <img class="logo" src="/static/images/ratt.svg" width="80px">
                My Page Heading
            </th>
        </tr>

        <tr class="midrow">
            <td class="left">
                <h3>Menu</h3>
                <ul>
                    <li><a href="{{url_for('home')}}">Home</li>
                    <li><a href="{{url_for('form')}}">Register</li>
                    <li><a href="{{url_for('students')}}">View Registery</li>
                </ul>
            </td>
            <td class="mid">
                {% block body %}    

                {% endblock %}
            </td>
            <td class="right">
                <h3>Current Date / Time</h3>
                <div class="date-time">
                    <span id="date"></span>
                    /
                    <span id="clock"></span>
                </div>
                <script>
                    currentTime();
                    currDate();
                </script>
               
            </td>
        </tr>

        <tr>
            <td colspan="3" class="footer">Gaming-Rat Productions &copy: 11/06/2022</td>
        </tr>
    </table>

</body>

</html>

form.html

{% extends 'index.html' %}
{% block body %}
<link rel="stylesheet" href="/static/css/form.css">
<form action="/register" method="post">
    <table class="myform">
        <tr>
            <th colspan="2">Register</th>
        </tr>
        <tr>
            <td>First Name:</td>
            <td>
                <input type="text" name="fname" placeholder="First Name">
            </td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td>
                <input type="text" name="lname" placeholder="Last Name">
            </td>
        </tr>
        <tr>
            <td>
                <h4>Dorms</h4>
                <select name="dorm">
                    <option value="apley court">Apley Court</option>
                    <option value="candy">Candy</option>
                    <option value="d dorm">D Dorm</option>
                </select>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <input class="btn" type="submit" value="Register">
            </td>
            <td></td>
        </tr>
    </table>
</form>

{% endblock %}

home.html

{% extends 'index.html' %}
{% block body %}

<h1>Start Page</h1>
{% endblock %}

student.html

{% extends 'index.html' %}
{% block body %}
<link rel="stylesheet" href="/static/css/student.css">
<h1>Student Registery</h1>
{% set data = session.get('students') %}

{%for s in data.values()%}
{%for item in s%}
<div class="tab">
<strong>Name:</strong> {{item['lname'].title()}}, {{item['fname'].title()}}
<br>
<strong>Dorm:</strong> {{item['dorm'].title()}}
</div>
{%endfor%}
{%endfor%}
{% endblock %}

success.html

{% extends 'index.html' %}
{% block body %}
<link rel="stylesheet" href="/static/css/success.css">
<table class="success-table">
    <tr>
        <th colspan="2">Information Registered</th>
    </tr>

    <tr>
        <td class="tleft">Name:</td>
        <td>{{data['fname'].title()}} {{data['lname'].title()}}</td>
    </tr>

    <tr>
        <td class="tleft">Dorm:</td>
        <td>{{data['dorm'].title()}}</td>
    </tr>

    <tr>
        <td class="tfoot" colspan="2"></td>
    </tr>
</table>
{% endblock %}

Javascript files

clock.js

function currentTime() {
    let date = new Date();
    let hh = date.getHours();
    let mm = date.getMinutes();
    let ss = date.getSeconds();
    let session = "AM";

    if (hh == 0) {
        hh = 12;
    }
    if (hh > 12) {
        hh = hh - 12;
        session = "PM";
    }

    hh = (hh < 10) ? "0" + hh : hh;
    mm = (mm < 10) ? "0" + mm : mm;
    ss = (ss < 10) ? "0" + ss : ss;

    let time = hh + ":" + mm + ":" + ss + " " + session;

    document.getElementById("clock").innerText = time;
    let t = setInterval(function () {
        currentTime()
    }, 1000);
}

date.js

function currDate() {
    var date = new Date()
    var weekday = date.toLocaleString('en-us', {weekday: 'short' });
    var month = date.toLocaleString('en-us', {month: 'long'});
    var day = date.getDate();
    var year = date.getFullYear();
   
    var curdate = weekday + ' ' + month + ' ' + day + ' ' + year;
    document.getElementById('date').innerHTML = curdate;
}

 

[menator01]

Latest progress pic. Will update the code when I have it fully functional

 

[pc510]

Wow, thanks menator. This is really helpful! And this will also help others with similar issues. This is super clear, and it is nice to see how the code works on a more detailed project. Look forward to seeing the code and the app when it's all done!

 

[menator01]

all Files and folders
There is not much error checking in the app so, you will probably find bugs.

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies