Code 3: homes.html

This file is what we see on the web page. Thanks to this file we can see buttons, tables with their respective cells and fields. Also, we can send flash messages. Everything between the block body and endblock file will be styled by the layout.html file

{% extends "layout.html" %}

{% block body %}

<div class="row"><h3>INFORMATION</h3></div>

<div class="row">

<div class="col-md-4">

{% with messages = get_flashed_messages() %}

{% if messages %}

{% for message in messages %}

<div class="alert alert-success alert-dismissible fade show" role="alert">

{{ message }}

<button type="button" class="close" data-dismiss="alert" aria-label="Close">

<span aria-hidden="true">×</span>

</button>

</div>

{% endfor %}

{% endif %}

{% endwith %}

<div class="card card-body">

<form action="/add" method="POST">

<div class="form-group">

<input type="text" class="form-control" name="user" placeholder="USER">

</div>

<div class="form-group">

<input type="text" class="form-control" name="time" placeholder="TIME">

</div>

<div class="form-group">

<input type="text" class="form-control" name="location" placeholder="LOCATION">

</div>

<div class="form-group">

<input type="text" class="form-control" name="description" placeholder="DESCRIPTION">

</div>

<div class="form-group">

<input type="text" class="form-control" name="samplecollected" placeholder="SAMPLECOLLECTED">

</div>

<div class="form-group">

<input type="text" class="form-control" name="date" placeholder="DATE">

</div>

<button type="submit" class="btn btn-primary btn-block">

Save

</button>

</form>

</div>

</div>

<div class="col-md-8">

<table id="example" class="table table-striped table-bordered" style="width:100%">

<thead>

<tr>

<td>ID</td>

<td>USER</td>

<td>TIME</td>

<td>LOCATION</td>

<td>DESCRIPTION</td>

<td>SAMPLECOLLECTED</td>

<td>DATE</td>

<td>Option</td>

</tr>

</thead>

<tbody>

{% for rinformations in rinformation %}

<tr>

<td>{{ rinformation.0 }}</td>

<td>{{ rinformation.1 }}</td>

<td>{{ rinformation.2 }}</td>

<td>{{ rinformation.3 }}</td>

<td>{{ rinformation.4 }}</td>

<td>{{ rinformation.5 }}</td>

<td>{{ rinformation.6 }}</td>

<td width="130">

<a href="/edit/{{rinformation.0}}" class="btn btn-secondary btn-sm">Edit</a>

<a href="/delete/{{rinformation.0}}" class="btn btn-danger btn-delete btn-sm">Delete</a>

</td>

</tr>

{% endfor %}

</tbody>

</table>

</div>

</div>

</div>

{% endblock %}