Django admin backend

Wed, 20 May 2020 00:00:00 +0000

Create an admin user for the backend

When starting a django project an admin backend is created automatically. To hace access to this backend first a superuser has to be created. Before this can be done you have to migrate databases with the following command (virtual environement activated):

pyhton3 manag3.py makemigrations
pyhton3 manag3.py migrate

This ensures that all tables are available in the backend. Next you need to create a superuser with:

python3 manage.py createsuperuser

After typing name and password of the backend admin you can launch it.

Django templates

Wed, 20 May 2020 00:00:00 +0000

.html templates in Django & how to inherit layout

In Django it is a good practice to inherit layout. Therefor you first need to make a template directory in your app. There you can save a base.html. This site has the base layout of all sites which are extended wwith it. This is how a base.html file can look like:

 {% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
{% if title %}
<title> Django Blog - {{ title }} </title>
{% else %}
<title> Django Blog </title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<!-- clicking on django blog in the nav bar will go to blog-home of urls.py - blog -->
<a class="navbar-brand mr-4" href="{% url 'blog-home' %}">Django Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<!-- clicking on django blog in the nav bar will go to blog-home of urls.py - blog -->
<a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
<!-- clicking on django blog in the nav bar will go to blog-about of urls.py - blog -->
<a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Login</a>
<a class="nav-item nav-link" href="#">Register</a>
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

The file refers to online available bootstrap and CSS stylesheets as well as to JacaScript files.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

It has a navigation bar in the header of the page:

<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<!-- clicking on django blog in the nav bar will go to blog-home of urls.py - blog -->
<a class="navbar-brand mr-4" href="{% url 'blog-home' %}">Django Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<!-- clicking on django blog in the nav bar will go to blog-home of urls.py - blog -->
<a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
<!-- clicking on django blog in the nav bar will go to blog-about of urls.py - blog -->
<a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Login</a>
<a class="nav-item nav-link" href="#">Register</a>
</div>
</div>
</div>
</nav>
</header>

And the main page consists of a sidebar and the individual content of each site:

<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>

Thereby the content of each site is refered with:

<div class="col-md-8">
{% block content %}{% endblock %}
</div>

The individual sites are also stored in the templates directory of your app and are extended with the base.html file. Sytax look like this:

{% extends "blog/base.html" %}
{% block content %}
<h1>About page!</h1>
{% endblock content %}

The navabar header is referencing his links with:

<div class="navbar-nav mr-auto">
<!-- clicking on django blog in the nav bar will go to blog-home of urls.py - blog -->
<a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
<!-- clicking on django blog in the nav bar will go to blog-about of urls.py - blog -->
<a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
</div>

Thereby href=“{% url ‘blog-home’ %} refers to the urls.py file of the app. Syntax of the urls.py file looks like this:

from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='blog-home'),
path('about/', views.about, name='blog-about'),
]

This file itself refers to the views.py file in the app directory. This file contains this code:

 from django.shortcuts import render
posts = [
{
'author':'Alex',
'title' : 'Blog Post 1',
'content': 'First post content',
'date_posted': 'May 20, 2020'
},
{
'author':'Bettina',
'title' : 'Blog Post 2',
'content': 'second post content',
'date_posted': 'May 21, 2020'
}
]
def home(request):
context = {
'posts': posts
}
return render(request, 'blog/home.html', context)
def about(request):
return render(request, 'blog/about.html', {'title': 'About'})

Each app has its own urls.py file. And the django project refers to this urls in the settings.py file in the project directory with this code:

....
from django.urls import path, include
from django.contrib import admin
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('blog.urls')),
]
....

django | Alex Hildebrandt

Django admin backend

Create an admin user for the backend

Django templates

.html templates in Django & how to inherit layout

References: Youtube django series