Clean Up The Application


Not Complete
Views: 145
Published Date: Oct. 22, 2018, 3:33 p.m.
Section: Build The CMS

Join Our Mailing List

Get the latest tutorials right to your inbox and you can unsubscribe anytime.


Clean Up Our CMS Application

I have forgotten to important steps we must complete before we move on to the authentication section of our tutorial series. 

The first step we need to complete is we need to add ALLOWED_HOSTS to our local_settings.py file. This will be an empty list but since we do not have it set in the local_settings.py file we are using the production ALLOWED_HOSTS and some of you are probably getting errors. To fix this we just need to add an empty list to our local_settings.py file.

ALLOWED_HOSTS = []

Second, we will need to set up a base.html file that will be the main file for our templates. Normally this is one of the first files I configure but in the process of teaching I somehow skipped over this file. Create a file named base.html. Add the following code to this file.

{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static 'css/starter-template.css' %}" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <main role="main" class="container">
        {% block content %}
        {% endblock %}
    </main><!-- /.container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('src="<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
  </body>
</html>

Finally, open up your index.html file and change it to match the code below.

{% extends 'base.html' %}
{% block content %}
      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>
{% endblock %}

Conclusion

Now we have a project properly configured we can move on to the authentication tutorial series.



Ask A Question


Similar Tutorials


Install Heroku Command Line Interface

Clean Up The Application

Install Git On Your Computer

Set Up A Virtual Environment For Our CMS In Django 2

Introduction To Building A CMS In Django 2

Last 5 Tutorials


The Array Object

Printing NumPy Arrays

How To Create An NumPy Array

Key NumPy Attributes

NumPy Array Vs. List

Most Popular


Introduction To Command Line and Python Commands

Install Python 3.7 On Mac OS X

Introduction To Python 3.7 Tutorial Series

How To Use The Django For Loop Counter

Upload A CSV File To Django