Yay Alliteration
Things you should know.
- I'm new to Django, I.e. not an expert.
- These are instructions for a brand new Django project. I'm making a tutorial re: adding views to an existing project with this method, but I'm not there yet. In the meantime- get clever, I believe in you.
- Re: static files, if you're going to deploy this project to production the DjangoProject says "This method is grossly inefficient and probably insecure, so it is unsuitable for production." SO. See here for resolution.
- Probably doesn't need to be said, but just in case:
name_of_project
/name_of_app
show up repeatedly and need to be replaced with your own deeply creative alternatives. - Django 2+
- Bootstrap 4+
Helpful Sites
Getting to the Point Already
- Virtual Environment (I recommend this, but I'm not the cops- do what you like.)
pip install django django-bootstrap4
django-admin startproject name_of_project
cd name_of_project
python manage.py startapp name_of_app
- Create
name_of_app/templates/name_of_app
- Create
name_of_app/static/name_of_app
- Make required changes to
name_of_app/settings.py
- Add entry to
INSTALLED_APPS
:'name_of_app.apps.NameOfAppConfig',
- Add entry to
TEMPLATE
'sOPTIONS
dict, using content in related section below.
- Add entry to
- Make optional changes to
name_of_app/settings.py
- DATABASES
TIME_ZONE
python manage.py migrate
- Build layout at Layoutit, download, and unzip.
- Copy
layoutit_dir/layout/src/index.html
toname_of_project/name_of_app/templates/name_of_app
. - Copy the css/fonts/js dirs in
layoutit_dir/layout/src
toname_of_project/name_of_app/static/name_of_app
. - Create
base.html
inname_of_app/templates/name_of_app
, fill w/ content from related section below. - Open
name_of_app/templates/name_of_app/index.html
, make replacements in related section below. - Open
name_of_app/views.py
and add a view using content from related section below. - Create
name_of_app/urls.py
and fill with content from related section below. - Open
name_of_project/urls.py
and:- Add
include
to thedjango.urls
import (E.g.from django.urls import include, path
) - Add import
from name_of_app import views
- Add path to urlpatterns list:
path('name_of_app/',include('name_of_app.urls'))
- Add
python manage.py runserver
- Open browser to http://localhost:8000/name_of_app/
8. [TEMPLATE
][OPTIONS
] Entry
'builtins': [
'django.contrib.staticfiles.templatetags.staticfiles',
],
I.e.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
'builtins': [ ### NEW ENTRY ###
'django.contrib.staticfiles.templatetags.staticfiles',
],
},
},
]
14. base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{% static 'name_of_app/css/style.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'name_of_app/css/bootstrap.min.css' %}" type="text/css">
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
15. index.html
Replacements
Replace
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4, from LayoutIt!</title>
<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
With
{% extends 'name_of_app/base.html' %}
{% block content %}
Then Replace
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
With
<script src="{% static 'name_of_app/js/jquery.min.js' %}"></script>
<script src="{% static 'name_of_app/js/bootstrap.min.js' %}"></script>
<script src="{% static 'name_of_app/js/scripts.js' %}"></script>
{% endblock %}
16. views.py
Method
from django.shortcuts import render
def index(request):
# gather data
# model_class = Model.objects....
# create context
context = {}
return render(request,'name_of_app/index.html',context)
17. urls.py
from django.urls import path
from . import views
app_name = 'name_of_app'
urlpatterns = [
path('',views.index,name='index')
]
Top comments (0)