We have successfully made a listview that displays a list of jobs in cards. What if someone want to explore more about the job? We need a detail view to display the complete details of a single job post.
Lets add the below code in webapps > jobs > route_jobs.py
from db.repository.jobs import list_jobs
from db.repository.jobs import retreive_job #new
@router.get("/details/{id}") #new
def job_detail(id:int,request: Request,db:Session = Depends(get_db)):
job = retreive_job(id=id, db=db)
return templates.TemplateResponse(
"jobs/detail.html", {"request": request,"job":job}
)
- I believe we have done enough routes in our previous course, so you should be already understanding this route.
Time to create the file templates > jobs > detail.html
{% extends "shared/base.html" %}
{% block title %}
<title>Job Detail</title>
{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col">
<h1 class="display-5">Job Detail</h1>
</div>
</div>
<div class="row">
<table class="table table-striped table-hover">
<tbody>
<tr>
<th scope="row">Job Title</th>
<td colspan="2">{{job.title}}</td>
</tr>
<tr>
<th scope="row">Company</th>
<td colspan="2">{{job.company}}</td>
</tr>
<tr>
<th scope="row">Company URL</th>
<td colspan="2">{{job.company_url}}</td>
</tr>
<tr>
<th scope="row">Description</th>
<td colspan="2">{{job.description}}</td>
</tr>
<tr>
<th scope="row">Location</th>
<td colspan="2">{{job.location}}</td>
</tr>
<tr>
<th scope="row">Data Published</th>
<td colspan="2">{{job.date_posted}}</td>
</tr>
</tbody>
</table>
</div>
</div>
{% endblock %}
The APIRouter at webapps > base.py must have already included our route. We don't need to do anything. Lets try out our work at http://127.0.0.1:8000/details/1 You should see a page like this:
