Front Facing Django Django.How

Showing the Database’s content on the Front Facing

n view.py under index function, get the list of question and store them in an object then pass them to the url

Import model from .models import Listing
Save data from DB into an object listings = Listing.objects.all()
Create the dictionary to pass to the template


  context = {
        'listings' : listings
    }

4. Pass the context return render(request, ‘listings/listings.html’, context)

5. Use the data in template {{ listing.listing.title }}

6. Show many rows use for loop

<br /> {% if listings %}<br /> {% for listing in listings %}<br /> </p> <div> <img decoding="async" class="card-img-top" src="{{listing.photo_main.url}}" alt=""></p> <h2>{{listing.title}}</h2> <p>{{listing.description}}</p> <p> <a href="{% url 'listing' listing.id %}" >More Info</a> </div> <p> {% endfor %}<br /> {% else %}</p> <div> <p>No Listings</p> </div> <p> {% endif %}<br />

Linking to a Single Record

The id must be passed in the html link, urls.py, and views.py

1. In the HTML file you want to use

2. In urls.py


path('', views.listing, name='listing'),

3. In views.py


def listing(request, listing_id):
    return render(request, 'listings/listing.html')

Example


from django.shortcuts import render
from .models import Listing

def index(request):
    listings = Listing.objects.all()
    context = {
        'listings' : listings
    }
    return render(request, 'listings/listings.html', context)

Edit the HTML file

<br /> {% extends ‘base.html’ %}<br /> {% load humanize %}</p> <p>{% block content %}</p> <p> {% if listings %}<br /> {% for listing in listings %}<br /> </p> <div class="col-md-6 col-lg-4 mb-4"> <div class="card listing-preview"> <img decoding="async" class="card-img-top" src="{{listing.photo_main.url}}" alt=""></p> <div class="card-img-overlay"> <h2> <span class="badge badge-secondary text-white">{{listing.price | intcomma}}</span><br /> </h2> </p></div> <div class="card-body"> <div class="listing-heading text-center"> <h4 class="text-primary">{{ listing.title}}</h4> <p> <i class="fas fa-map-marker text-secondary"></i> {{listing.city}} {{listing.state}}, {{listing.zapcode}}</p> </p></div> <hr> <div class="row py-2 text-secondary"> <div class="col-6"> <i class="fas fa-th-large"></i> Sqft: 3200</div> <div class="col-6"> <i class="fas fa-car"></i> Garage: 2</div> </p></div> <div class="row py-2 text-secondary"> <div class="col-6"> <i class="fas fa-bed"></i> Bedrooms: 3</div> <div class="col-6"> <i class="fas fa-bath"></i> Bathrooms: 2</div> </p></div> <hr> <div class="row py-2 text-secondary"> <div class="col-12"> <i class="fas fa-user"></i> Kyle Brown</div> </p></div> <div class="row text-secondary pb-2"> <div class="col-6"> <i class="fas fa-clock"></i> 2 days ago</div> </p></div> <hr> <p> <a href="listing.html" class="btn btn-primary btn-block">More Info</a> </div> </p></div> </p></div> <p> {% endfor %}<br /> {% else %}</p> <div class="md-col-12"> <p>No Listings</p> </div> <p> {% endif %}</p> <p>

Important Tools

Humanize makes make number looks better https://docs.djangoproject.com/en/3.0/ref/contrib/humanize/

apnumber 1 becomes one.
intcomma 1000000 to become 1,000,000
intword 1000000 becomes 1.0 million.
naturalday 16 Feb 2007 becomes yesterday. Assuming today is 17 Feb 2007
naturaltime17 Feb 2007 16:29:31 becomes 29 seconds ago.

Add the app to the INSTALLED_APPS in the settings.py file ‘django.contrib.humanize’,
load it in HTML file you want to use {% load humanize %}
Use it {{listing.price | intcomma}}