26.1 : Job Listview part 2


So, we have made a directory named "webapps" to serve our web apps and we have also included the route to serve a homepage with a navbar. But that's not how our final product looks like. We want something like this:

So, let's start our journey. We start by modifying the templates > general_pages > homepage.html file.

{% extends "shared/base.html" %}

{% block title %}
  <title>Job Board</title>
{% endblock %}

{% block content %}
  <div class="container">
  <div class="row">
    <div class="col">
      <h1 class="display-5">Find Jobs..</h1>
  <div class="row">
      {% for job in jobs %}
        <div class="col-lg-4 col-md-3 col-sm-10 mr-auto">
          {% with obj=job %}
      		{% include "components/cards.html" %}
    	  {% endwith %}

          {% if loop.index %3 %}
          {% else %}
            </div></div><br><div class="row">
          {% endif %}
      {% endfor %}
{% endblock %}

Now, we need a new file, templates > components > cards.html file. This is going to be a bootstrap card.

<div class="card shadow p-3 mb-2 bg-body rounded" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">{{obj.title}}</h5>
    <p class="card-text">Company : {{obj.company}}</p>
    <p class="card-text">Company URL : <a href="{{obj.company_url}}">{{obj.company_url}}</a></p>
    <p class="card-text">Description : {{obj.description[:60]}}</p>
    <a href="/jobs/detail/{{obj.id}}" class="btn btn-primary">Read more</a>

All done..🥵 Time to test our work at
Hurrey, It works!

Prev: 26 : Displaying … Next: 27 : Job …

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.



Refund Policy

Follow us on our social media channels to stay updated.

© Copyright 2022-23 Team FastAPITutorial