Setting Up Our Envirnoment, And Creating The Home Page

Django: The web framework for perfectionists with deadlines

Hello everyone am excited to share with you guys what I've learned through developing this user registration/login Django app. You can find it on github and integrate it into a bigger system project that needs to have a registration/login system.

In today's part of the series, we are going to set up our environment, create the skeleton of our website and our home page.

Before we get started let me show you what our home page will look like after we are done with this tutorial.

Okay enough talk, let's get started.
...

First thing is first let's install some packages that we need to get started. Am assuming you have a decent understanding of using virtual environments for your projects, but if not it's okay here is a link where you can check out why it's important and how to set it up.

After setting up the virtual environment, go to your terminal and install django with this command pip install django

We can now create a new django project. I named the project user_management you can name it anything you want.

django-admin startproject user_management

I assume you have some background with django before, so I won't get much into what project structure that startproject command created for us. But be free to ask me what you don't understand in the comments section below, and I'll try my best to answer them.

Next step is to start a new app. This is one of the awesome features django has - being able to create reusable apps.

python manage.py startapp users

Before getting any further install this app in the settings.py module. I once spent an hour trying to debug an issue only to realize that I didn't install my app(pure pain it is!). So make sure to do this.

settings.py

INSTALLED_APPS = [
    # list of other apps django created for us.
    'users'  # add this
]

Now let's create our first view. Go to the views.py module inside the users app, where we handle the logic for certain routes. Let's create a view function that will render our home page template.

views.py

from django.shortcuts import render

def home(request):
    return render(request, 'users/home.html')

What we did is pretty basic. We used function based view to render our home page(which doesn't exist currently but we will create that in a bit). Next let's map our urlpatterns to this home view function.

Create a urls.py module inside the users app.

users/urls.py

from django.urls import path
from .views import home

urlpatterns = [
    path('', home, name='users-home'),
]

Since we used our home view to handle the logic for the route we created, we should import our home view from views.py

I prefixed the name of the path with 'users' to avoid any collides with other app routes. I know we don't have any other app right now but it's a good practice.

Okay good, but we still need to include our users app urls module inside the main project's urls module by calling the include() function from django.urls.

Our main project's urls module tells django which urls should take us to our users app, then the users app urls.py takes it from there so let's go ahead and do that.

user_management/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('users.urls')),  # This is what we added
]

path('', include('users.urls')) -> I put the empty string because I want the users app home page to be the home page of the entire website(http://localhost:8000/).

And yes we haven't created the html file yet so let's go ahead and do that.

Inside the users app create a folder named templates. Then inside templates create another folder named users. Inside here we will put all of the templates we are going to use for this app.

To avoid repetition of code, let's create a base.html file in which all of our other html files will extend from. Okay now inside our base html file let's add the following.

base.html

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

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

    <title>{% block title %} {% endblock %} </title>
</head>
<body>
  <div class="container p-3 my-3">
    <div class="row">
      <div class="col-md-12">
        <nav class="navbar navbar-expand-md navbar-light " style="background-color: #f0f5f5">
          <a href="/" class="navbar-brand">Home</a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <div class="navbar-nav ml-auto">
                  <a href="#" class="nav-item nav-link">Profile</a>
                  <a href="#" class="nav-item nav-link">Logout</a>
                  <a href="#" class="nav-item nav-link">Sign in</a>
                </div>
            </div>
        </nav>
        {% block content %}{% endblock %}
      </div>
    </div>
  </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
</html>

What we did is setup the basic html structure and I used Bootstrap to give some styling and responsiveness to our pages. Note that all the links inside the nav are dead links since we haven't created any other pages yet.

In the future, We will also add conditions to display login/logout buttons depending on whether the user is authenticated or not.

All the other html pages will extend from the above base html, while at the same time adding their own unique title, and content. Feel free to play with it and make it look more awesome for your needs.

Now create another html file which is going to be our home page. Remember when we set up the view, we named the template 'home.html', so let's go ahead and create a home.html inside users/templates/users/

home.html

{% extends "users/base.html" %}
{% block title %} Home Page {% endblock title%}
{% block content %}
    <div class="jumbotron">
        <h1 class="display-4">Welcome</h1>
        <p class="lead">
            This is <b>user registration and login system</b> build with django which is
            a Python-based free and open-source web framework that follows the model–template–views architectural pattern.
        </p>
        <hr class="my-4">
        <p class="lead">
            <a class="btn btn-primary btn-lg" href="#" role="button">Logout</a>
            <a class="btn btn-primary btn-lg" href="#" role="button">Sign in</a>
        </p>
    </div>

{% endblock content %}

Great! Now see if it works. Run the development server, python manage.py runserver and go to http://localhost:8000/

Thanks for your time! Please leave a comment and any suggestions are welcome. Follow me to get updates. Hope to see you next time with the second part of the series.