DEV Community

William Lake
William Lake

Posted on

Quick & Dirty Django Drag & Drop Bootstrap Build with Layoutit.com

#django #bootstrap #tutorial #python

Yay Alliteration

Things you should know.

  1. I'm new to Django, I.e. not an expert.
  2. 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.
  3. 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.
  4. 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.
  5. Django 2+
  6. Bootstrap 4+

Helpful Sites

Getting to the Point Already

  1. Virtual Environment (I recommend this, but I'm not the cops- do what you like.)
  2. pip install django django-bootstrap4
  3. django-admin startproject name_of_project
  4. cd name_of_project
  5. python manage.py startapp name_of_app
  6. Create name_of_app/templates/name_of_app
  7. Create name_of_app/static/name_of_app
  8. Make required changes to name_of_app/settings.py
    • Add entry to INSTALLED_APPS: 'name_of_app.apps.NameOfAppConfig',
    • Add entry to TEMPLATE's OPTIONS dict, using content in related section below.
  9. Make optional changes to name_of_app/settings.py
  10. python manage.py migrate
  11. Build layout at Layoutit, download, and unzip.
  12. Copy layoutit_dir/layout/src/index.html to name_of_project/name_of_app/templates/name_of_app.
  13. Copy the css/fonts/js dirs in layoutit_dir/layout/src to name_of_project/name_of_app/static/name_of_app.
  14. Create base.html in name_of_app/templates/name_of_app, fill w/ content from related section below.
  15. Open name_of_app/templates/name_of_app/index.html, make replacements in related section below.
  16. Open name_of_app/views.py and add a view using content from related section below.
  17. Create name_of_app/urls.py and fill with content from related section below.
  18. Open name_of_project/urls.py and:
    • Add include to the django.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'))
  19. python manage.py runserver
  20. Open browser to http://localhost:8000/name_of_app/

8. [TEMPLATE][OPTIONS] Entry 

            'builtins': [
                'django.contrib.staticfiles.templatetags.staticfiles',
            ],
Enter fullscreen mode Exit fullscreen mode

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',
            ],
        },
    },
]
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

With

{% extends 'name_of_app/base.html' %}

{% block content %}
Enter fullscreen mode Exit fullscreen mode

Then Replace

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scripts.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

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 %}
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

17. urls.py 

from django.urls import path

from . import views

app_name = 'name_of_app'
urlpatterns = [
    path('',views.index,name='index')
]
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

matowang profile image

Never have unhandled Errors in TypeScript

Matthew Wang -

devstoriesplayground profile image

Top 10 Platforms to Practice Python

Devstories Playground -

miriacode profile image

How I built my first mechanical keyboard [Tutorial] [Part 2]

Miriam Acuña -

code42cate profile image

Day 13: Docker Multistage Builds

Jonas Scholz -