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}
    )

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:

Prev: 26.1 : Job … Next: 28 : User …
FastAPITutorial

Brige the gap between Tutorial hell and Industry. We want to bring in the culture of Clean Code, Test Driven Development.

We know, we might make it hard for you but definitely worth the efforts.

Contacts

Refunds:

Refund Policy
Social

Follow us on our social media channels to stay updated.

© Copyright 2022-23 Team FastAPITutorial