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.

NB NB

You will not be able to see this in your browser yet! The code for setting up URLs and the view for this will come in part four of this tutorial. So just continue to the next part.

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

Next part

Share this post

Comments

No comments yet

Add comment