Djitter - how to build a twitter clone using Django 2.0 - Part two

Djitter - how to build a twitter clone using Django 2.0 - Part two

Published 06. jun 2018 06:11 by Stein Ove Helset

Today we're going to focus on setting up the base templates.

This tutorial is mostly about Django and it requires that you got basic HTML and CSS skills. We are going to use the Bootstrap css framework to keep it as simple as possible. If you're stuck on something regarding HTML/CSS or the Bootstrap framework you can just leave me a comment below and I'll try to answer you as good and soon as possible.

In the root of the project you can create a new folder called templates and inside that folder you can create a file called base.html


$ mkdir templates && touch templates/base.html

Open base.html in your favorite editor (we recommend Sublime Text) and paste the following code.


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Djitter</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>

  <body style="padding-top: 80px;">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">  
      <a class="navbar-brand" href="/">Djitter</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">
          {% if request.user.is_authenticated %}
            <li class="nav-item">
              <a class="nav-link" href="/">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/feed">Feed</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/signout">Sign out</a>
            </li>
          {% endif %}
        </ul>
      </div>
    </nav>
    <!-- End Navbar -->

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

    <!-- Scripts - Bootstrap -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>v
</html>

This is just default starter template from Bootstrap. The only Django related code here is the {% block main %}{% endblock %}. This file will be the base template for the project and {% block main %}{% endblock %} makes it possible to extend the base.html and insert code in that block. We have added one link in the menu, but this will not be shown before the user is logged in.

In the navigation we only show the links to users who are authenticated. Because if they're not authenticated there is no reason to show these links.

We'll be creating one more template in this part and that part is called frontpage.html is will be very simple. Just created one more file inside the templates folder.


$ touch templates/frontpage.html

This file will act as the front page where you can sign in or sign up if you don't have an account. Copy the following code to that file.


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

{% block main %}
<div class="row">
  <div class="col-12">
    <h1>Welcome to Djitter</h1>
  </div>
</div>

<hr>

<div class="row">
  <div class="col-6">
    <h2>Sign in</h2>

    {% if signinform.errors %}
      {% for field in signinform %}
        {% for error in field.errors %}
          <div class="alert alert-danger">
            <b>{{ error|escape }}</b>
          </div>
        {% endfor %}
      {% endfor %}
      {% for error in signinform.non_field_errors %}
        <div class="alert alert-danger">
          <b>{{ error|escape }}</b>
        </div>
      {% endfor %}
    {% endif %}

    <form action="." method="post">
      {% csrf_token %}

      {% for field in signinform %}
        <div class="form-group">
          {{ field }}
        </div>
      {% endfor %}

      <input type="submit" value="Sign in" name="signinform" class="btn btn-primary">
    </form>
  </div>

  <div class="col-6">
    <h3>Don't have an account yet?</h3>

    {% if signupform.non_field_errors %}
      <div class="alert danger">
        {{ signupform.non_field_errors }}
      </div>
    {% endif %}

    {% if signupform.errors %}
      {% for field in signupform %}
        {% for error in field.errors %}
          <div class="alert alert-danger">
            <b>{{ error|escape }}</b>
          </div>
        {% endfor %}
      {% endfor %}
      {% for error in signupform.non_field_errors %}
        <div class="alert alert-danger">
          <b>{{ error|escape }}</b>
        </div>
      {% endfor %}
    {% endif %}

    <form action="." method="post">
      {% csrf_token %}

      {% for field in signupform %}
        <div class="form-group">
          {{ field }}
        </div>
      {% endfor %}

      <input type="submit" value="Sign up" name="signupform" class="btn btn-primary">
    </form>
  </div>
</div>
{% endblock %}

Djitter - Signin

It does not look very flattering. But it's more than good enough for this project where we aim to learn you Django. But here is a little challenge for you. Try to customize the style and make it look like a social network you would actually use.

If you've got any questions your are more than welcome to leave a comment and I'll answer as soon as possible.

Next part

Share this post

Comments

Chuck

06. jun 2018 11:25

Perfect, already looking forward to the next post

Jarred

06. jul 2018 16:46

I'm having issues with the username/password fields not showing up copy/pasted the code exactly as you outlined and have created the directories as instructed cannot get them to show up. Any ideas?

Stein Ove Helset

06. jul 2018 20:43

Hi Jarred,
it's because this is just the HTML for the forms. In the template code we iterate through all the fields in the sign up and sing in forms, but they have not been created yet. If you go to the next part and try again I'm sure they will show :-)

Add comment