*Episode 13* PYTHON (Create a Base Project of Django)

Creating a base project

This episode covers :-

 1) How to prepare a general base project.

•  Setup :-

Terminal

cp -fr 14-Models 15-Base-Project

cd 15-Models

source ../venv/bin/activate

•  Adding a description field :-

    Open myapp models.py file:

myapp/models.py

├── 15-Base-Project

│ ├── myapp

│ │ ├── models.py # < here

    Add the description field:

myapp/models.py

from django.db import models

class Flower(models.Model):

title = models.CharField(max_length=255, default='')

description = models.TextField(default='') # < here

     Run migrations:

Terminal

python manage.py makemigrations

python manage.py migrate

     Visit http://127.0.0.1:8000/admin/ and add descriptions for the flowers. You can find mock data in here: https://samuli.to/Lorem.

•  Adding masonry like columns :-

    Edit myapp index.html template and wrap the cards in card-columns div and use the description attribute for the card text:

myapp/templates/myapp/index.html

<div class="card-columns"> <!-- here -->

{% for flower in flowers %}

<div class="card">

<div class="card-body">

<h5 class="card-title">{{ flower.title }}</h5>

<p class="card-text">{{ flower.description | truncate\

chars:100 }}</p> <!-- here -->

...

</div>

</div>

{% endfor %}

</div>

     Card-columns organizes the cards in a masonry like columns.

     Truncatechars filter truncates a string if it’s longer than the number specified. It also adds an ellipsis sequence to the end.

•  Adding a footer :-

     Add footer element to the base.html template:

base/templates/base/base.html

...

</main>

<footer class="footer"> <!-- here -->

<div class="container">

<span class="text-muted">

Base project for the <a target="_blank" href="h\

ttps://leanpub.com/django-the-easy-way">"Django - The Easy \

Way" </a>book.

</span>

</div>

</footer>

Edit the base app site.css file and add styling for the .footer class:

base/static/base/css/site.css

.footer {

text-align: center;

font-size: 16px;

height: 60px;

line-height: 60px;

}

     You should now see something like this:

 Summary

•  We now have a decent base project to work with. We use this for some of the chapters as a starting point. You might want to use this as a base for your own experiments.
•  Bootstrap offers some helpful classes like card-columns that accomplish quite a bit with very little markup.
•  Template filters allow you to manipulate template output like truncate strings or format dates.

👈Episode 12(P).                                                                                              Episode 14(P)👉

Share This Post

PRINT THIS POST