How to make data coming from a database clickable giving more details

[newbie1]

There is no results in the dashboard.html and even if the result was given how can I make the name clickable so that I can see the details?

"views.py"


def add_family():
    """
    Add a family to the database
    """
    check_admin()

    add_family = True

    form = FamilyForm()
    if form.validate_on_submit():
        family = Family(name=form.name.data,
                    description=form.description.data,
                    address=form.address.data,
                    phone=form.phone.data)
        try:
            # add family to the database
            db.session.add(family)
            db.session.commit()
            flash('You have successfully added a new family.')
        except:
            # in case family name already exists
            flash('Error: family name already exists.')

        # redirect to families page
        return redirect(url_for('admin.list_families'))

    # load family template
    return redirect(url_for('dashboard.html'))



"models.py"


class Family(db.Model):
    """
    Create a Family table
    """

    __tablename__ = 'families'

    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(60), unique=True)
    description = db.Column(db.String(2000))
    address = db.Column(db.String(1000))
    phone = db.Column(db.Integer, unique=True)

    def __repr__(self):
        return '<Family: {}>'.format(self.name)


"dashboard.html"

{% import "bootstrap/utils.html" as utils %}
{% extends "base.html" %}
{% block title %}Families{% endblock %}
{% block body %}
<div class="content-section">
  <div class="outer">
    <div class="middle">
      <div class="inner">
        <br/>
        {{ utils.flashed_messages() }}
        <br/>
        <h1 style="text-align:center;">Families</h1>
          <hr class="intro-divider">
          <div class="center">
            <table class="table table-striped table-bordered">
              <tbody>
              {% for family in families %}
                <tr>
                  <td> {{ family.name }} </td>
                </tr>
              {% endfor %}
              </tbody>
            </table>
          </div>
          <div style="text-align: center">
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

There is no results in the dashboard.html and even if the result was given how can I make the name clickable so that I can see the details? (Family's name, address, phone ...).

(photo) Family1
        Name: Mustermann
        Address: abc
        Phone: 12345
(photo) Family2
(photo) Family3
.
.
.

Any tips/hints/steps and help will really be appreciated

[ndc85430]

Where is the handler that serves the template? Are you actually retrieving the data from the database and passing it to the template?

[nuffink]

As ndc85430 has said there is nothing in the code you have presented that shows the retrieval of the rows form your database only the code that shows the inserting of that data.
Once you have sorted the retrieval then the change the <td> tag in your dashboard htnl to add a href similar to this but not exactly this

<td><a href="{{ url_for('my_family_details_page') }}">{{ {{ family.name }} }}</a></td>

[newbie1]

Where is the handler that serves the template? Are you actually retrieving the data from the database and passing it to the template?

@home.route('/')
def homepage():
"""
Render the homepage template on the / route
"""
return render_template('home/dashboard.html', title="Welcome")

Yes I do

---

As ndc85430 has said there is nothing in the code you have presented that shows the retrieval of the rows form your database only the code that shows the inserting of that data.
Once you have sorted the retrieval then the change the <td> tag in your dashboard htnl to add a href similar to this but not exactly this

<td><a href="{{ url_for('my_family_details_page') }}">{{ {{ family.name }} }}</a></td>

{% import "bootstrap/utils.html" as utils %}
{% extends "base.html" %}
{% block title %}Families{% endblock %}
{% block body %}
<div class="content-section">
  <div class="outer">
    <div class="middle">
      <div class="inner">
        <br/>
        {{ utils.flashed_messages() }}
        <br/>
        <h1 style="text-align:center;">Families</h1>
          <hr class="intro-divider">
          <div class="center">
            <table class="table table-striped table-bordered">
              <tbody>
              {% for family in families %}
                <tr>
                  <td> {{ family.name }} </td>
                </tr>
              {% endfor %}
              </tbody>
            </table>
          </div>
          <div style="text-align: center">
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

[ndc85430]

I don't see any code in your handler that's doing a query and passing the results to the template, so families (on line 17) isn't set.

[newbie1]

I don't see any code in your handler that's doing a query and passing the results to the template, so families (on line 17) isn't set.

you are right ... just forgot it

@admin.route('/families', methods=['GET', 'POST'])
def list_families():
    """
    List all families
    """
    families = Family.query.all()

    return render_template('admin/families/families.html',
                           families=families, title="Families")

[newbie1]

As ndc85430 has said there is nothing in the code you have presented that shows the retrieval of the rows form your database only the code that shows the inserting of that data.
Once you have sorted the retrieval then the change the <td> tag in your dashboard htnl to add a href similar to this but not exactly this

<td><a href="{{ url_for('my_family_details_page') }}">{{ {{ family.name }} }}</a></td>

I was able to retrieve the data from my database and got the family's name but now how I can make it clickable to show the details?
How can I build the 'my_family_details_page' so that I get something like this?

(photo) Family1
        Name: Mustermann
        Address: abc
        Phone: 12345
(photo) Family2
(photo) Family3

[nuffink]

newbie1 sorry if I am misunderstanding you here, but let me get this straight in my head and if it is as i believe then the below should guide you.

Objective - display a page of family names to the user and when they select the link (clickable as you say) it provides them with another page of family details which includes all the photos etc, is this correct ??

Assuming the above is, then personally (and it is IMO only, others may disagree), I would first filter your DB extract for the families, to just return a list of the names, thus reducing the load sent back of all the families details (and as the DB grows this will increase obvs) as at this point you have no idea what link they will select, so why carry all their "junk" at this point.
Then I would as you have stated in your for loop over the family list / dictionary have the following line that places your family name in a table row, as data, and associates a link with it to another @app.route and subsequently another page where the details are shown - lets call the new route '/family/details' and within that list of families page we will pass the selected link "family name" as a parameter (it will be done in the form of a query parameter in the URL to your details route function. Now I have not tested this but it should be fairly close :-

<html>
...
.
 <td><a href="{{ url_for('family_details', name={{ family.name }}) }}">{{ family.name }}</a></td>
...
...some more tags...

then for your route in your views.py or whatever you have called it...

@app.route("/family/details", methods=["GET"])
def family_details():
    family = request.args.get('name') # the name keyword here coming from the parameter "name" passed as part of url_for
    ...
      go get my DB details for that family - single row return
    ...
      construct my dictionary to send to my details page
   ....
     return render_template('myfamilydetals', details=< dictionary created from DB prior to this statement>)

myfamilydetals is your new family details page.

This is approx do not take the above as syntax to be 100% correct, but you get the idea. When you look at the url you will see that it is something similar to

http://myhostname:myportnumber/family/details/?name='Smith Family Robinson'

HTH and makes sense, if not you can always PM me. If I have got you wrong then please explain some more aka if you wanted the details to be at the side of the family name all in one page which is more about html structuring than python / flask

[newbie1]

newbie1 sorry if I am misunderstanding you here, but let me get this straight in my head and if it is as i believe then the below should guide you.

Objective - display a page of family names to the user and when they select the link (clickable as you say) it provides them with another page of family details which includes all the photos etc, is this correct ??

Assuming the above is, then personally (and it is IMO only, others may disagree), I would first filter your DB extract for the families, to just return a list of the names, thus reducing the load sent back of all the families details (and as the DB grows this will increase obvs) as at this point you have no idea what link they will select, so why carry all their "junk" at this point.
Then I would as you have stated in your for loop over the family list / dictionary have the following line that places your family name in a table row, as data, and associates a link with it to another @app.route and subsequently another page where the details are shown - lets call the new route '/family/details' and within that list of families page we will pass the selected link "family name" as a parameter (it will be done in the form of a query parameter in the URL to your details route function. Now I have not tested this but it should be fairly close :-

<html>
...
.
 <td><a href="{{ url_for('family_details', name={{ family.name }}) }}">{{ family.name }}</a></td>
...
...some more tags...

then for your route in your views.py or whatever you have called it...

@app.route("/family/details", methods=["GET"])
def family_details():
    family = request.args.get('name') # the name keyword here coming from the parameter "name" passed as part of url_for
    ...
      go get my DB details for that family - single row return
    ...
      construct my dictionary to send to my details page
   ....
     return render_template('myfamilydetals', details=< dictionary created from DB prior to this statement>)

myfamilydetals is your new family details page.

This is approx do not take the above as syntax to be 100% correct, but you get the idea. When you look at the url you will see that it is something similar to

http://myhostname:myportnumber/family/details/?name='Smith Family Robinson'

HTH and makes sense, if not you can always PM me. If I have got you wrong then please explain some more aka if you wanted the details to be at the side of the family name all in one page which is more about html structuring than python / flask

Thks for replying.
Your approach will really help me. As you so pointed out I want the details to be at the side of the family name all in one page :)
pss: the thing with the pictures is an issue that I plan to solve later because I'd like to have a picture next to each family's name like an icon and by retrieving the name I could get the picture and the name (both might be clickable to redirect to the details in the same page)