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

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

• DjangoProject.com “Writing your first Django app”
• https://docs.djangoproject.com/en/2.2/

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
   • DATABASES
   • TIME_ZONE
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

            <span>'builtins'</span><span>:</span> <span>[</span>
                <span>'django.contrib.staticfiles.templatetags.staticfiles'</span><span>,</span>
            <span>],</span>
            <span>'builtins'</span><span>:</span> <span>[</span>
                <span>'django.contrib.staticfiles.templatetags.staticfiles'</span><span>,</span>
            <span>],</span>
            'builtins': [
                'django.contrib.staticfiles.templatetags.staticfiles',
            ],

Enter fullscreen mode Exit fullscreen mode

I.e.

<span>TEMPLATES</span> <span>=</span> <span>[</span>
    <span>{</span>
        <span>'BACKEND'</span><span>:</span> <span>'django.template.backends.django.DjangoTemplates'</span><span>,</span>
        <span>'DIRS'</span><span>:</span> <span>[],</span>
        <span>'APP_DIRS'</span><span>:</span> <span>True</span><span>,</span>
        <span>'OPTIONS'</span><span>:</span> <span>{</span>
            <span>'context_processors'</span><span>:</span> <span>[</span>
                <span>'django.template.context_processors.debug'</span><span>,</span>
                <span>'django.template.context_processors.request'</span><span>,</span>
                <span>'django.contrib.auth.context_processors.auth'</span><span>,</span>
                <span>'django.contrib.messages.context_processors.messages'</span><span>,</span>
            <span>],</span>
            <span>'builtins'</span><span>:</span> <span>[</span> <span>### NEW ENTRY ### </span>                <span>'django.contrib.staticfiles.templatetags.staticfiles'</span><span>,</span>
            <span>],</span>
        <span>},</span>
    <span>},</span>
<span>]</span>
<span>TEMPLATES</span> <span>=</span> <span>[</span>
    <span>{</span>
        <span>'BACKEND'</span><span>:</span> <span>'django.template.backends.django.DjangoTemplates'</span><span>,</span>
        <span>'DIRS'</span><span>:</span> <span>[],</span>
        <span>'APP_DIRS'</span><span>:</span> <span>True</span><span>,</span>
        <span>'OPTIONS'</span><span>:</span> <span>{</span>
            <span>'context_processors'</span><span>:</span> <span>[</span>
                <span>'django.template.context_processors.debug'</span><span>,</span>
                <span>'django.template.context_processors.request'</span><span>,</span>
                <span>'django.contrib.auth.context_processors.auth'</span><span>,</span>
                <span>'django.contrib.messages.context_processors.messages'</span><span>,</span>
            <span>],</span>
            <span>'builtins'</span><span>:</span> <span>[</span> <span>### NEW ENTRY ### </span>                <span>'django.contrib.staticfiles.templatetags.staticfiles'</span><span>,</span>
            <span>],</span>
        <span>},</span>
    <span>},</span>
<span>]</span>
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 %}
<span><!doctype html></span>
<span><html</span> <span>lang=</span><span>"en"</span><span>></span>
<span><head></span>
    <span><meta</span> <span>charset=</span><span>"utf-8"</span><span>></span>
    <span><title></title></span>
    <span><meta</span> <span>name=</span><span>"viewport"</span> <span>content=</span><span>"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span>></span>
    <span><link</span> <span>rel=</span><span>"stylesheet"</span> <span>href=</span><span>"{% static 'name_of_app/css/style.css' %}"</span> <span>type=</span><span>"text/css"</span><span>></span>
    <span><link</span> <span>rel=</span><span>"stylesheet"</span> <span>href=</span><span>"{% static 'name_of_app/css/bootstrap.min.css' %}"</span> <span>type=</span><span>"text/css"</span><span>></span>
<span></head></span>
<span><body></span>
    {% block content %}{% endblock %}
<span></body></span>
<span></html></span>
{% load static %}

<span><!doctype html></span>
<span><html</span> <span>lang=</span><span>"en"</span><span>></span>

<span><head></span>
    <span><meta</span> <span>charset=</span><span>"utf-8"</span><span>></span>
    <span><title></title></span>
    <span><meta</span> <span>name=</span><span>"viewport"</span> <span>content=</span><span>"width=device-width, initial-scale=1, shrink-to-fit=no"</span><span>></span>
    <span><link</span> <span>rel=</span><span>"stylesheet"</span> <span>href=</span><span>"{% static 'name_of_app/css/style.css' %}"</span> <span>type=</span><span>"text/css"</span><span>></span>
    <span><link</span> <span>rel=</span><span>"stylesheet"</span> <span>href=</span><span>"{% static 'name_of_app/css/bootstrap.min.css' %}"</span> <span>type=</span><span>"text/css"</span><span>></span>
<span></head></span>

<span><body></span>
    {% block content %}{% endblock %}
<span></body></span>

<span></html></span>
{% 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

<span><!DOCTYPE html></span>
<span><html</span> <span>lang=</span><span>"en"</span><span>></span>
  <span><head></span>
    <span><meta</span> <span>charset=</span><span>"utf-8"</span><span>></span>
    <span><meta</span> <span>http-equiv=</span><span>"X-UA-Compatible"</span> <span>content=</span><span>"IE=edge"</span><span>></span>
    <span><meta</span> <span>name=</span><span>"viewport"</span> <span>content=</span><span>"width=device-width, initial-scale=1"</span><span>></span>
    <span><title></span>Bootstrap 4, from LayoutIt!<span></title></span>
    <span><meta</span> <span>name=</span><span>"description"</span> <span>content=</span><span>"Source code generated using layoutit.com"</span><span>></span>
    <span><meta</span> <span>name=</span><span>"author"</span> <span>content=</span><span>"LayoutIt!"</span><span>></span>
    <span><link</span> <span>href=</span><span>"css/bootstrap.min.css"</span> <span>rel=</span><span>"stylesheet"</span><span>></span>
    <span><link</span> <span>href=</span><span>"css/style.css"</span> <span>rel=</span><span>"stylesheet"</span><span>></span>
  <span></head></span>
  <span><body></span>
<span><!DOCTYPE html></span>
<span><html</span> <span>lang=</span><span>"en"</span><span>></span>
  <span><head></span>
    <span><meta</span> <span>charset=</span><span>"utf-8"</span><span>></span>
    <span><meta</span> <span>http-equiv=</span><span>"X-UA-Compatible"</span> <span>content=</span><span>"IE=edge"</span><span>></span>
    <span><meta</span> <span>name=</span><span>"viewport"</span> <span>content=</span><span>"width=device-width, initial-scale=1"</span><span>></span>

    <span><title></span>Bootstrap 4, from LayoutIt!<span></title></span>

    <span><meta</span> <span>name=</span><span>"description"</span> <span>content=</span><span>"Source code generated using layoutit.com"</span><span>></span>
    <span><meta</span> <span>name=</span><span>"author"</span> <span>content=</span><span>"LayoutIt!"</span><span>></span>

    <span><link</span> <span>href=</span><span>"css/bootstrap.min.css"</span> <span>rel=</span><span>"stylesheet"</span><span>></span>
    <span><link</span> <span>href=</span><span>"css/style.css"</span> <span>rel=</span><span>"stylesheet"</span><span>></span>

  <span></head></span>
  <span><body></span>
<!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 %}
{% extends 'name_of_app/base.html' %}

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

{% block content %}

Enter fullscreen mode Exit fullscreen mode

Then Replace

    <span><script </span><span>src=</span><span>"js/jquery.min.js"</span><span>></script></span>
    <span><script </span><span>src=</span><span>"js/bootstrap.min.js"</span><span>></script></span>
    <span><script </span><span>src=</span><span>"js/scripts.js"</span><span>></script></span>
  <span></body></span>
<span></html></span>
    <span><script </span><span>src=</span><span>"js/jquery.min.js"</span><span>></script></span>
    <span><script </span><span>src=</span><span>"js/bootstrap.min.js"</span><span>></script></span>
    <span><script </span><span>src=</span><span>"js/scripts.js"</span><span>></script></span>
  <span></body></span>
<span></html></span>
    <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

<span><script </span><span>src=</span><span>"{% static 'name_of_app/js/jquery.min.js' %}"</span><span>></script></span>
<span><script </span><span>src=</span><span>"{% static 'name_of_app/js/bootstrap.min.js' %}"</span><span>></script></span>
<span><script </span><span>src=</span><span>"{% static 'name_of_app/js/scripts.js' %}"</span><span>></script></span>
{% endblock %}
<span><script </span><span>src=</span><span>"{% static 'name_of_app/js/jquery.min.js' %}"</span><span>></script></span>
<span><script </span><span>src=</span><span>"{% static 'name_of_app/js/bootstrap.min.js' %}"</span><span>></script></span>
<span><script </span><span>src=</span><span>"{% static 'name_of_app/js/scripts.js' %}"</span><span>></script></span>
{% endblock %}

<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

<span>from</span> <span>django.shortcuts</span> <span>import</span> <span>render</span>
<span>def</span> <span>index</span><span>(</span><span>request</span><span>):</span>
    <span># gather data </span>    <span># model_class = Model.objects.... </span>
    <span># create context </span>    <span>context</span> <span>=</span> <span>{}</span>
    <span>return</span> <span>render</span><span>(</span><span>request</span><span>,</span><span>'name_of_app/index.html'</span><span>,</span><span>context</span><span>)</span>
<span>from</span> <span>django.shortcuts</span> <span>import</span> <span>render</span>

<span>def</span> <span>index</span><span>(</span><span>request</span><span>):</span>
    <span># gather data </span>    <span># model_class = Model.objects.... </span>
    <span># create context </span>    <span>context</span> <span>=</span> <span>{}</span>

    <span>return</span> <span>render</span><span>(</span><span>request</span><span>,</span><span>'name_of_app/index.html'</span><span>,</span><span>context</span><span>)</span>
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

<span>from</span> <span>django.urls</span> <span>import</span> <span>path</span>
<span>from</span> <span>.</span> <span>import</span> <span>views</span>
<span>app_name</span> <span>=</span> <span>'name_of_app'</span>
<span>urlpatterns</span> <span>=</span> <span>[</span>
    <span>path</span><span>(</span><span>''</span><span>,</span><span>views</span><span>.</span><span>index</span><span>,</span><span>name</span><span>=</span><span>'index'</span><span>)</span>
<span>]</span>
<span>from</span> <span>django.urls</span> <span>import</span> <span>path</span>

<span>from</span> <span>.</span> <span>import</span> <span>views</span>

<span>app_name</span> <span>=</span> <span>'name_of_app'</span>
<span>urlpatterns</span> <span>=</span> <span>[</span>
    <span>path</span><span>(</span><span>''</span><span>,</span><span>views</span><span>.</span><span>index</span><span>,</span><span>name</span><span>=</span><span>'index'</span><span>)</span>
<span>]</span>
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

原文链接：Quick & Dirty Django Drag & Drop Bootstrap Build with Layoutit.com