On day 66, we create an API that serves data on cafes with wifi and good coffee. Today, you're going to use the data from that project to build a fully-fledged website to display the information.
Included in this assignment is an SQLite database called cafes.db that lists all the cafe data.
Using this database and what you learnt about REST APIs and web development, create a website that uses this data. It should display the cafes, but it could also allow people to add new cafes or delete cafes.
For example, this startup in London has a website that does exactly this:
https://laptopfriendly.co/london
Solution:
index.html
{% block title %}Coffee and Wifi{% endblock %}
<body>
{% block content %}
<div class="jumbotron text-center">
<div class="container">
<h1 class="display-4">☕️ Coffee & Wifi 💻</h1>
<p class="lead">Want to work in a cafe but need power and wifi?</p>
<hr class="my-4">
<p>You've found the right place! Checkout my collection of cafes with data on power socket availability, wifi speed and coffee quality.</p>
<a class="btn btn-warning btn-lg" href="{{ url_for('add') }}" role="button">Add New Cafe</a>
</div>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>view</th>
<th>Location</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for cafe in cafes %}
<tr>
<td>{{ cafe[0] }}</td>
<td>{{ cafe[1] }}</td>
<td width="20%"><img height="100" width="100" src="{{ cafe[3] }}"> </td>
<td>{{ cafe[4] }}</td>
<td>
<a href="{{ url_for('edit', cafe_id=cafe[0]) }}">Edit</a>
|
<a href="{{ url_for('delete', cafe_id=cafe[0]) }}">Delete</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
</body>
add.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add New Cafe</title>
<style>
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Add New Cafe</h1>
<form method="post">
<table>
<tr>
<th><label for="name">Name:</label></th>
<td><input type="text" id="name" name="name" required></td>
</tr>
<tr>
<th><label for="map_url">Map URL:</label></th>
<td><input type="text" id="map_url" name="map_url" required></td>
</tr>
<tr>
<th><label for="img_url">Image URL:</label></th>
<td><input type="text" id="img_url" name="img_url" required></td>
</tr>
<tr>
<th><label for="location">Location:</label></th>
<td><input type="text" id="location" name="location" required></td>
</tr>
<tr>
<th><label for="has_sockets">Has Sockets:</label></th>
<td><input type="checkbox" id="has_sockets" name="has_sockets"></td>
</tr>
<tr>
<th><label for="has_toilet">Has Toilet:</label></th>
<td><input type="checkbox" id="has_toilet" name="has_toilet"></td>
</tr>
<tr>
<th><label for="has_wifi">Has WiFi:</label></th>
<td><input type="checkbox" id="has_wifi" name="has_wifi"></td>
</tr>
<tr>
<th><label for="can_take_calls">Can Take Calls:</label></th>
<td><input type="checkbox" id="can_take_calls" name="can_take_calls"></td>
</tr>
<tr>
<th><label for="seats">Seats:</label></th>
<td><input type="text" id="seats" name="seats"></td>
</tr>
<tr>
<th><label for="coffee_price">Coffee Price:</label></th>
<td><input type="text" id="coffee_price" name="coffee_price"></td>
</tr>
</table>
<br>
<input type="submit" value="Add Cafe">
</form>
<a href="{{ url_for('index') }}">Back to Cafe List</a>
</body>
</html>
edit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Cafe</title>
<style>
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Edit Cafe</h1>
<form method="post">
<table>
<tr>
<th><label for="name">Name:</label></th>
<td><input type="text" id="name" name="name" value="{{ cafe[1] }}" required></td>
</tr>
<tr>
<th><label for="map_url">Map URL:</label></th>
<td><input type="text" id="map_url" name="map_url" value="{{ cafe[2] }}" required></td>
</tr>
<tr>
<th><label for="img_url">Image URL:</label></th>
<td><input type="text" id="img_url" name="img_url" value="{{ cafe[3] }}" required></td>
</tr>
<tr>
<th><label for="location">Location:</label></th>
<td><input type="text" id="location" name="location" value="{{ cafe[4] }}" required></td>
</tr>
<tr>
<th><label for="has_sockets">Has Sockets:</label></th>
<td><input type="checkbox" id="has_sockets" name="has_sockets" {% if cafe[5] %}checked{% endif %}></td>
</tr>
<tr>
<th><label for="has_toilet">Has Toilet:</label></th>
<td><input type="checkbox" id="has_toilet" name="has_toilet" {% if cafe[6] %}checked{% endif %}></td>
</tr>
<tr>
<th><label for="has_wifi">Has WiFi:</label></th>
<td><input type="checkbox" id="has_wifi" name="has_wifi" {% if cafe[7] %}checked{% endif %}></td>
</tr>
<tr>
<th><label for="can_take_calls">Can Take Calls:</label></th>
<td><input type="checkbox" id="can_take_calls" name="can_take_calls" {% if cafe[8] %}checked{% endif %}></td>
</tr>
<tr>
<th><label for="seats">Seats:</label></th>
<td><input type="text" id="seats" name="seats" value="{{ cafe[9] }}"></td>
</tr>
<tr>
<th><label for="coffee_price">Coffee Price:</label></th>
<td><input type="text" id="coffee_price" name="coffee_price" value="{{ cafe[10] }}"></td>
</tr>
</table>
<br>
<input type="submit" value="Update Cafe">
</form>
<a href="{{ url_for('index') }}">Back to Cafe List</a>
</body>
</html>