{"id":3518,"date":"2020-07-10T11:53:15","date_gmt":"2020-07-10T11:53:15","guid":{"rendered":"http:\/\/truelogic.org\/wordpress\/?p=3518"},"modified":"2020-07-10T11:53:19","modified_gmt":"2020-07-10T11:53:19","slug":"setup-a-django-3-project-with-bootstrap-4","status":"publish","type":"post","link":"https:\/\/truelogic.org\/wordpress\/2020\/07\/10\/setup-a-django-3-project-with-bootstrap-4\/","title":{"rendered":"Setup a Django 3 project with Bootstrap 4"},"content":{"rendered":"\n

OVERVIEW<\/strong><\/p>\n\n\n\n

This post looks at how to create a Django 3 project app and incorporate Bootstrap 4 files into it. This also looks at how to setup the folders for putting static assets like images, css files etc. There are different explanations given in various places on the web depending on the version of Django being used. This post gives the steps on making the above configuration work successfully . This post assumes that you are using a Linux OS but the steps will be applicable to other OS with minor changes. We are using Python3 here.<\/p>\n\n\n\n

1.CREATE PROJECT<\/strong><\/p>\n\n\n\n

In the folder where you want to create the project type django-admin startproject myproject<\/code> . This will create the project structure. Change current folder to myproject<\/code> . The directory structure should look something like this:<\/p>\n\n\n\n

.
\n\u251c\u2500\u2500 manage.py
\n\u2514\u2500\u2500 myproject
\n \u251c\u2500\u2500 asgi.py
\n \u251c\u2500\u2500 init<\/strong>.py
\n \u251c\u2500\u2500 settings.py
\n \u251c\u2500\u2500 urls.py
\n \u2514\u2500\u2500 wsgi.py<\/p>\n\n\n\n

To test the created site, type python3 manage.py runserver<\/code><\/p>\n\n\n\n

On opening http:\/\/localhost:8000 you should see the following:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2.CREATE APP<\/strong><\/p>\n\n\n\n

We will now create an app within the project. Staying in the project directory (myproject) type python3 manage.py startapp myapp<\/code><\/p>\n\n\n\n

The directory structure should be something like this now:<\/p>\n\n\n\n

\u251c\u2500\u2500 db.sqlite3
\n\u251c\u2500\u2500 manage.py
\n\u251c\u2500\u2500 myapp
\n\u2502   \u251c\u2500\u2500 admin.py
\n\u2502   \u251c\u2500\u2500 apps.py
\n\u2502   \u251c\u2500\u2500 init<\/strong>.py
\n\u2502   \u251c\u2500\u2500 migrations
\n\u2502   \u2502   \u2514\u2500\u2500 init<\/strong>.py
\n\u2502   \u251c\u2500\u2500 models.py
\n\u2502   \u251c\u2500\u2500 tests.py
\n\u2502   \u2514\u2500\u2500 views.py
\n\u2514\u2500\u2500 myproject
\n \u251c\u2500\u2500 asgi.py
\n \u251c\u2500\u2500 init<\/strong>.py
\n \u251c\u2500\u2500 pycache<\/strong>
\n \u2502   \u251c\u2500\u2500 init<\/strong>.cpython-36.pyc
\n \u2502   \u251c\u2500\u2500 settings.cpython-36.pyc
\n \u2502   \u251c\u2500\u2500 urls.cpython-36.pyc
\n \u2502   \u2514\u2500\u2500 wsgi.cpython-36.pyc
\n \u251c\u2500\u2500 settings.py
\n \u251c\u2500\u2500 urls.py
\n \u2514\u2500\u2500 wsgi.py<\/p>\n\n\n\n

3.CREATE VIEWS<\/strong><\/p>\n\n\n\n

We will now create a couple of views for display. Open myapp\/views.py<\/code> and add the following code to it:<\/p>\n\n\n\n

from django.shortcuts import render\nfrom django.http import HttpResponse\n\n# Create your views here.\n\ndef index(request):\n    return HttpResponse(\"Home page\")\n\ndef details(request):\n    return HttpResponse(\"Details page\")\n\n\n<\/code><\/pre>\n\n\n\n
Create a urls.py<\/code> in the myapp<\/code> folder to handle url redirection. This file will then be called in the urls.py<\/code> within mysite<\/code>. Put the following code into myapp\/urls.py<\/code>:<\/p>\n\n\n\n
from django.urls import path\nfrom . import views\n\nurlpatterns = [\n        path('', views.index, name=\"index\"),\n        path('details\/', views.details, name=\"details\"),\n        ]\n\n\n<\/code><\/pre>\n\n\n\n
In mysite\/urls.py<\/code> add the following code:<\/p>\n\n\n\n
from django.urls import path\nfrom . import views\n\nurlpatterns = [\n        path('', views.index, name=\"index\"),\n        path('details\/', views.details, name=\"details\"),\n        ]\n\n\n<\/code><\/pre>\n\n\n\n
4.SETUP BOOTSTRAP<\/strong><\/p>\n\n\n\n
Type pip3 install django-bootstrap4<\/code> to install Bootstrap4 into the django installation<\/p>\n\n\n\n
In mysite\/settings.py<\/code>, add bootstrap4<\/code> to the list of INSTALLED_APPS<\/code><\/p>\n\n\n\n
5.CREATE TEMPLATES WITH HTML FILES<\/strong><\/p>\n\n\n\n
Now we will use HTML files to generate views. First create a folder called templates<\/code> under myapp<\/code> . Create another folder called myapp<\/code> under templates<\/code>. So now the folder structure will be myapp\/templates\/myapp<\/code><\/p>\n\n\n\n
We have two views to generate – index and details. We will create a separate header and footer template which we can use in the other pages. Create another folder components<\/code> under myapp<\/code> . So the folder will be  myapp\/templates\/myapp\/components<\/code><\/p>\n\n\n\n
Under components folder create a file header.html<\/code> and add the following script:<\/p>\n\n\n\n
<html>\n<head><title><\/title>\n{% load bootstrap4 %}\n{% bootstrap_css %}\n{% bootstrap_javascript jquery='full'%}\n \n<\/head>\n\n<\/code><\/pre>\n\n\n\n
Create another file called footer.html and add the following script:<\/p>\n\n\n\n
<hr>\n<div class=\"row\">\n\t<div class=\"col-sm-12 text-center small\">Footer comes here<\/div>\n<\/div>\n<\/html>\n\n<\/code><\/pre>\n\n\n\n
Under templates\/myapp<\/code> folder create index.html and add the following script:<\/p>\n\n\n\n
{% include \"myapp\/components\/header.html\" %}\n\n<body>\nHomepage\n<div class=\"container\">\n\t<div class=\"row border\">\n\t\t<div class=\"col-sm-3\">Left col\n\t\t<\/div>\n\t\t<div class=\"col-sm-9\">Right col<\/div>\n\t<\/div>\n<div class=\"clearfix\"><\/div>\n<\/div>\n\n{% include \"myapp\/components\/footer.html\" %}\n\n<\/code><\/pre>\n\n\n\n
Under templates\/myapp<\/code> folder create details.html and add the following script:<\/p>\n\n\n\n
{% include \"myapp\/components\/header.html\" %}\n\n<body>\nHomepage\n<div class=\"container\">\n\t<div class=\"row border\">\n\t\t<div class=\"col-sm-12 text-center\">Details page<\/div>\n\t<\/div>\n<div class=\"clearfix\"><\/div>\n<\/div>\n\n{% include \"myapp\/components\/footer.html\" %}\n<\/code><\/pre>\n\n\n\n
Now we go back to myapp\/views.py <\/code>and change the code to use templates:<\/p>\n\n\n\n
from django.shortcuts import render\nfrom django.http import HttpResponse\n\n# Create your views here.\n\ndef index(request):\n    return render(request, \"myapp\/index.html\")\n\ndef details(request):\n    return render(request, \"myapp\/details.html\")\n\n<\/code><\/pre>\n\n\n\n
We need to add the templates folder to mysite\/settings.py :<\/p>\n\n\n\n
\nTEMPLATES = [\n    {\n        'BACKEND': 'django.template.backends.django.DjangoTemplates',\n        'DIRS': [\n                '\/var\/www\/myproject\/myapp\/templates',\n            ],\n<\/code><\/pre>\n\n\n\n
Run the project again. You should see the following output for http:\/\/localhost:8000\/myapp<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
And this page for http:\/\/localhost:8000\/myapp\/details<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
6.SETUP FOLDERS FOR STATIC ASSETS<\/strong><\/p>\n\n\n\n
Now we will setup the folder structure to put up our own assets like images, scripts etc.<\/p>\n\n\n\n
Under myproject\/myapp <\/code>create a folder called static<\/code>. Under static<\/code> create three folders called css, img<\/code> and js<\/code>. It should look something like this:<\/p>\n\n\n\n
static
\n\u251c\u2500\u2500 css
\n\u251c\u2500\u2500 img
\n\u2514\u2500\u2500 js<\/p>\n\n\n\n
Open myproject.settings.py and add the following settings:<\/p>\n\n\n\n
STATIC_URL = '\/static\/'\nSTATICFILES_DIRS = [\n    os.path.join(BASE_DIR, \"myapp\/static\"),\n\n]<\/code><\/pre>\n\n\n\n
Create a custom.css<\/code> under static\/css<\/code> and add the following script:<\/p>\n\n\n\n
body {background-color: #eeeeee; font-size:12px; min-height:800px;}<\/code><\/p>\n\n\n\n
Create a test.js<\/code> under static\/js<\/code> and add the following script:<\/p>\n\n\n\n
alert(\"This is javascript\");<\/code><\/pre>\n\n\n\n
Add a sample image to static\/img<\/code> folder for testing. We will assume its called python-logo.png<\/code><\/p>\n\n\n\n
Open myapp\/header.html <\/code>and update the script as below:<\/p>\n\n\n\n
<html>\n<head><title><\/title>\n\t{% load bootstrap4 %}\n{% bootstrap_css %}\n{% bootstrap_javascript jquery='full'%}\n{% load static %}\n<link rel=\"stylesheet\" href=\"{% static \"css\/custom.css\" %}\" \/>\n<script src=\"{% static \"js\/test.js\" %}\"><\/script>\n<\/head>\n<\/code><\/pre>\n\n\n\n
Open myapp\/index.html and update the script as follows:<\/p>\n\n\n\n
{% include \"polls\/components\/header.html\" %}\n{% load static %}\n\n<body>\nHomepage\n<div class=\"container\">\n\t<div class=\"row border\">\n\t\t<div class=\"col-sm-3\">\n\t\t\t<img src=\"{% static \"img\/python-logo.png\" %}\" class=\"img img-fluid\">\n\t\t<\/div>\n\t\t<div class=\"col-sm-9\"><h1>Right col<\/h1><\/div>\n\t<\/div>\n<div class=\"clearfix\"><\/div>\n<\/div>\n\n{% include \"polls\/components\/footer.html\" %}\n<\/code><\/pre>\n\n\n\n
Before running the app, do a migration with python3 manage.py migrate<\/code><\/p>\n\n\n\n
Now run the app with http:\/\/localhost:8000\/myapp . The output should be something like this:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
CONCLUSION<\/strong><\/p>\n\n\n\n
The above steps enable your site to use Bootstrap and also put in place your own assets .<\/p>\n","protected":false},"excerpt":{"rendered":"
OVERVIEW This post looks at how to create a Django 3 project app and incorporate Bootstrap 4 files into it. This also looks at how […]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":3429,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[297],"tags":[],"class_list":["post-3518","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-python"],"_links":{"self":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/3518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/comments?post=3518"}],"version-history":[{"count":25,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/3518\/revisions"}],"predecessor-version":[{"id":3547,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/3518\/revisions\/3547"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media\/3429"}],"wp:attachment":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media?parent=3518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/categories?post=3518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/tags?post=3518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}