Python - Django Simple Sign up Form

In my previous tutorial, I have discussed about Creating a Simple Login and Logout. As a continuation, we are going to discuss user registration using the built in user table and registration form.

Getting Started

We're going to use our files in the previous tutorial and create a new app named account then install the app. If you have no idea how to create and install an app, refer to my tutorial about Creating and Installing New App.

Setting up our URLs

Next, we're gonna update our URLs to accommodate our signup. Go to our main directory, dproject, open urls.py then update it with the ff. codes:
  1. from django.conf.urls import url
  2. from django.contrib import admin
  3. from django.contrib.auth import views as auth_views
  4. from django.views.generic.base import TemplateView
  5. from account import views as account_views
  6.  
  7. urlpatterns = [
  8.     url(r'^admin/', admin.site.urls),
  9.     url(r'^$', TemplateView.as_view(template_name='home.html'), name='home'),
  10.     url(r'^login/$', auth_views.login, {'template_name': 'login.html'}, name='login'),
  11.     url(r'^logout/$', auth_views.logout, {'template_name': 'logged_out.html'}, name='logout'),
  12.     url(r'^signup/$', account_views.signup, name='signup'),
  13. ]

Creating our Views

We now then create the view for our sign up. Open our account app that we have created earlier then update views.py with the ff codes:
  1. from django.contrib.auth import login, authenticate
  2. from django.contrib.auth.forms import UserCreationForm
  3. from django.shortcuts import render, redirect
  4.  
  5. def signup(request):
  6.     if request.method == 'POST':
  7.         form = UserCreationForm(request.POST)
  8.         if form.is_valid():
  9.             form.save()
  10.             username = form.cleaned_data.get('username')
  11.             raw_password = form.cleaned_data.get('password1')
  12.             user = authenticate(username=username, password=raw_password)
  13.             login(request, user)
  14.             return redirect('home')
  15.     else:
  16.         form = UserCreationForm()
  17.     return render(request, 'signup.html', {'form': form})

Creating our signup.html

We now create our signup form and we're gonna create it inside our templates directory. We're gonna name this as signup.html.
  1. {% extends 'base.html' %}
  2.  
  3. {% block content %}
  4.   <h2>Sign up</h2>
  5.   <form method="post">
  6.     {% csrf_token %}
  7.     {% for field in form %}
  8.       <p>
  9.         {{ field.label_tag }}<br>
  10.         {{ field }}
  11.         {% for error in field.errors %}
  12.           <p style="color: red">{{ error }}</p>
  13.         {% endfor %}
  14.       </p>
  15.     {% endfor %}
  16.     <button type="submit" class="btn btn-success">Sign up</button>
  17.   </form>
  18. {% endblock %}

Updating our Pages

We now then update our pages to accommodate our signup form. base.html
  1. <!DOCTYPE html>
  2.   <meta charset="utf-8">
  3.   <title>{% block title %}Django User Accounts{% endblock %}</title>
  4.   {% load staticfiles %}
  5.   <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">  
  6. </head>
  7.   <div class="container">
  8.   <header>
  9.     <h1>Django User Accounts</h1>
  10.     by <a href="https://www.sourcecodester.com/user/224918/track">nurhodelta_17</a>
  11.   </header>
  12.   <hr>
  13.   <main>
  14.     {% block content %}
  15.     {% endblock %}
  16.   </main>
  17.   <hr>
  18.   </div>
  19. </body>
  20. </html>
home.html
  1. {% extends 'base.html' %}
  2.  
  3. {% block title %}Login{% endblock %}
  4.  
  5. {% block content %}
  6.         <h2>Welcome!</h2>
  7.         {% if user.is_authenticated %}
  8.       Hi {{ user.username }}!
  9.       <a href="{% url 'logout' %}" class="btn btn-danger">Logout</a>
  10.     {% else %}
  11.       <a href="{% url 'login' %}" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span>Login</a>
  12.       <a href="{% url 'signup' %}" class="btn btn-success">Signup</a>
  13.     {% endif %}
  14. {% endblock %}
logout.html
  1. {% extends 'base.html' %}
  2.  
  3. {% block title %}See you!{% endblock %}
  4.  
  5. {% block content %}
  6.   <h2>Logged out</h2>
  7.   <p>You have been successfully logged out.</p>
  8.   <a href="{% url 'login' %}" class="btn btn-primary">Log in</a>
  9.   <a href="{% url 'home' %}" class="btn btn-success">Home</a>
  10. {% endblock %}

Running our Server

Lastly, we run our server to check if our signup is working. To run the server, in the command prompt, type: python manage.py runserver That ends this tutorial. Happy Coding :)

Add new comment