Movatterモバイル変換

Khumbo Klein · 16 min read · Updated nov 2022 ·Web Programming

Get a head start on your coding projects with ourPython Code Generator. Perfect for those times when you need a quick solution. Don't wait, try it today!

Email address verification is a process that involves the confirmation of the authenticity or legitimacy of an email address. Nowadays, businesses are integrating email verification into their day-to-day operations, and this has proved to be more effective as it helps them keep only customers' email addresses that are valid and reachable.

There are tons of email address verification services on the internet, but all these come at a cost, but the good news is that you can build your own tool for this task at no cost with the help ofDjango andemail-validator packages. In this article, you will learn how to build your own web-based email address verifier from the ground up, so with that said, let us dive in!

By the end of this article, you will be able to build an application that looks like this:

Email Verifier

This is the table of contents:

Getting Started

Let us start by creating a virtual environment for the project; we will use this command:

$ python -m venv project

To activate the virtual environment, use:

$ .\project\Scripts\activate

Having created and activated the virtual environment, let us now install the required dependencies for this project in it; we will install them in one go, so use:

$ pip install django email-validator

Creating the Main Project and the Application

Now that setting up the project’s environment is taken care of, we should create Django’s main project, now run:

$ django-admin startproject webbased_emailverifier

Then cd into thewebbased_emailverifier folder, with this command:

$ cd webbased_emailverifier

Inside thewebbased_emailverifier folder, run this command:

$ python manage.py startapp verifier

This will create the verifier application.After all of this, make sure you have the following folder structure for the project:

Theverifier folder is the application, thewebbased_emailverifier folder is the main project and themanage.py file is a script that helps us execute the Django administrative commands like thestartapp,runserver, etc.

Before we move any further, let us test if Django was installed successfully, to fire up the Django local server, run the command:

$ python manage.py runserver

If the server is running successfully, paste the URLhttp://127.0.0.1:8000/ in your web browser and make sure you get this output in the browser:

This means Django was installed successfully, and we are good to proceed.

Registering the Application in the`settings.py` File

Ourverifier application is not yet known by the main project, so we must register it. To do that, open thesettings.py file located inside thewebbased_emailverifier:

And scroll down until you find theINSTALLED_APP list, and edit it so that it looks like this:

# Application definitionINSTALLED_APPS = [    'django.contrib.admin',    'django.contrib.auth',    'django.contrib.contenttypes',    'django.contrib.sessions',    'django.contrib.messages',    'django.contrib.staticfiles',    # the newly created application    'verifier',]

Thesettings.py file is an important file for the project as it is responsible for all the configurations of the project, so be very careful when editing it because one messed line of code could break the whole project.

Creating the Main View for the Application in the`views.py` File

Now we will create the view for the application and open theviews.py file that is inside theverifier folder:

Theviews.py file handles all the application logic, like capturing and validating data from forms, making API request calls, andauthenticating users.

Open it and paste these lines of code:

from django.shortcuts import renderfrom django.http import HttpResponse# Create your views here.def index(request):    return HttpResponse('This is the Index page!!')

In the code snippet, we are importingHttpResponse() function fromdjango.http, this function is just for echoing responses in the browser to the user. You will get to know more about therender() function later in the article.

Configuring the URLs for the Application

Let us now create the URLs for the application. Create aurls.py file inside theverifier folder as follows:

This file is for registering the application’s views; make sure you name iturls.py not otherwise; this is Django’s convention.

Open it and paste the following code:

# from the current folder import viewsfrom views import index# importing path from django.urlsfrom django.urls import path# this is the list of the app's views# if the app has several views then it will have several pathsurlpatterns = [    path('', index, name='home'),]

In the file, we are importing theindex() view fromviews.py file. After the imports, we create a list calledurlpatterns list, which will contain a URL path, and if the application has several views, then theurlpatterns will contain several URL paths. If you notice, thepath() function takes three arguments, the actual path as an empty string, the view, and the view’s name.

Now let us make the application’s URL known to the project, open thewebbased_emailverifier folder and open theurls.py file:

Something worth mentioning here is the application’surls.py file is not the same as the project’surls.py file. Theurls.py file inside theverifier folder is for registering all the application’s views and theurls.py file inside thewebbased_emailverifier folder is for registering all the applications' URLs. If the project has, for example, five applications, then all these applications’ URLs will be registered in the project’surls.py file.

Open it, and paste this code:

from django.contrib import adminfrom django.urls import path, includeurlpatterns = [    # this points to admin.site urls    path('admin/', admin.site.urls),    # this points to verifier urls    path('', include('verifier.urls')),]

Let us break down the code a bit so that we are on the same page. We are creating aurlpatterns list with twopath() functions, the first one points to the default admin site URLs, and the second one to theverifier application URLs using via theinclude() function.

It’s now time we test if all the configurations we have made are working. Make sure the server is running; just in case it stopped, restart it. Now in your web browser, go to this URLhttp://127.0.0.1:8000/; the output will look like this:

Everything seems to be working perfectly.

Creating and Rendering Templates

We will now switch our attention to building the frontend part of the application. We will use HTML and Bootstrap5 for styling purposes. Let us create the templates for the application inside theverifier folder.

Create a folder calledtemplates, and inside thistemplates folder, create another folder calledverifier, this is Django’s way of doing things.

This application will have two templatesbase.html and theindex.html, and they will be located inside the newly createdverifier folder:

First of all, open thebase.html and paste the following code:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Web-based Email Verifier</title>    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"></head><body>    {% block content %}    {% endblock %}    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script></body></html>

This is an HTML boilerplate file, with Bootstrap5 CSS and JavaScript added to it via the link and script tags, respectively. JavaScript will add interactivity in the front end.

Theindex.html template will inherit everything from thebase.html template, this is handy as it saves us time because we will not repeat the code, thus making it clean. Open theindex.html template and paste this code:

<!-- extends is for inheriting from the base.html -->{% extends 'verifier/base.html' %}{% block content %}<div>          <div>              <div>                  <h3>Email Verifier</h3>                  <div>                    <form action="." method="POST">                      {% csrf_token %}                      <div>                        <input type="text" required name="email-address" placeholder="Enter an email address to verify it">                        <div>                          <button type="submit">                            Verify                          </button>                        </div>                      </div>                    </form>                      <hr>                      {% if messages %}                          {% for message in messages %}                            {% if message.tags == 'success' %}                              <div role="alert">                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">                                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>                                </svg> {{ email }} is a valid email address!!!!!                                <button type="button" data-bs-dismiss="alert" aria-label="Close"></button>                              </div>                            {% elif message.tags == 'warning' %}                              <div role="alert">{{ email }}                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">                                  <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>                                </svg> {{ message }}                                 <button type="button" data-bs-dismiss="alert" aria-label="Close"></button>                              </div>                            {% endif %}                                 {% endfor %}                      {% endif %}                  </div>              </div>          </div>        </div></div>{% endblock %}

For theindex.html template to inherit from thebase.html template, we use:

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

This template is for displaying the form and email address verification results. Inside the form, we have this code:

{% csrf_token %}

Since the form is using the POST method, we are usingcsrf_token to secure it during submission from any form of malicious attack.

Having created all the templates, it Is now time we render them in the browser, open theviews.py file and edit theindex() function so that it looks like this:

def index(request):    return render(request, 'verifier/index.html')

Here we have replaced theHttpResponse() function with therender() function, this function is for rendering templates, and it takes two arguments, the request and the actual template.

Now let us get to see the first look at the application. Visit the default URL again, and if you refresh the page, you will get this result:

Congratulations on designing the application’s front end!

Verifying Email Addresses

In this final part of the article, we will implement the email address verification functionality. To do that, open theviews.py file and make it look like this:

from django.shortcuts import render# this displays flash messages or notificationsfrom django.contrib import messages# importing validate_email and EmailNotValidErrorfrom email_validator import validate_email, EmailNotValidError# Create your views here.def index(request):    # checking if the method is POST    if request.method == 'POST':        # getting the email from the form input        email = request.POST.get('email-address')        # this is the context        context = {                'email': email            }        # the try statement for verify/validating the email        try:            # validating the actual email address using the validate_email function            email_object = validate_email(email)            # creating the message and storing it            messages.success(request, f'{email} is a valid email address!!')            # rendering the results to the index page            return render(request, 'verifier/index.html', context)        # the except statement will capture EmailNotValidError error         except EmailNotValidError as e:            # creating the message and storing it            messages.warning(request, f'{e}')            # rendering the error to the index page            return render(request, 'verifier/index.html', context)    # this will render when there is no request POST or after every POST request      return render(request, 'verifier/index.html')

In the code snippet, we are importing therender() function, as usual, we are also importing the built-in Djangomessages fromdjango.contrib, this is for displaying flash messages or notifications, and finally, we are importingvalidate_email andEmailNotValidError fromemail_validator. According toemail-validator’s documentation, it states that the library validates that a string is of the form name@example.com.

In theindex() function, we are checking if the request sent isPOST. If so, then we are retrieving the email from the form data using therequest.POST.get(‘email-address’), theemail-address is the name given to the email input in the form.

After putting theemail in the context, we have atry/except block, in thetry statement, we are validating the email address using thevalidate_email() function, after successful validation, we create a success message and call therender() function. In theexcept block, we are just catching theEmailNotValidError, we are also creating a message, but this time it is of type warning, and we are calling therender() function again.

Before or after aPOST request, we still want to display the form so therender() function after thetry/except block will do this for us.

Let us give the application a try, provide a valid email address and verify it by clicking the verify button; the output you will get is this:

This time try to enter any invalid email address that has no @ symbol; the output will be this:

Enter an email address again with invalid characters, for example, an email of this formfirst..last@example.com; this is the output the application will produce:

Lastly, enter an email address with an incomplete domain name, for example,name@example; this is the output that you will get:

If you notice, all the alerts have a close button. Clicking this button makes the alerts disappear; this is possible because of the JavaScript that we included in thebase.html template, and in theindex.html template, we have if statements just below the form for filtering the alerts. Each alert has an icon; for the icons, we are using thesvg tags.

Note: The application can catch many errors; this article has not exhausted all of them, but you can try on your own to figure out what they are.

Conclusion

That’s it from this article; we hope there is so much that you have learned and that the knowledge you have gained will be applied in your future Django projects. This article walked you through the process of building a web-based email address verifier using the Django framework and the email-validator package. This can be a useful tool in business to prevent email address abuse and to ensure that only valid email addresses are being used.

You can get theproject files here.

Here are some other Django tutorials:

Happy coding ♥

Loved the article? You'll love ourCode Converter even more! It's your secret weapon for effortless coding. Give it a whirl!

View Full Code Convert My Code

Sharing is caring!

Comment panel

Got a coding query or need some guidance before you comment? Check out thisPython Code Assistant for expert advice and handy tips. It's like having a coding tutor right in your fingertips!