27 : Job Detail View

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: