Forem: Yash Patel

Django - reCaptcha

Yash Patel — Sun, 23 Jul 2023 09:35:04 +0000

Hello everyone..!

To get started with django-recaptcha, you first need to create a Django project and a Django app. But if you have already created them, you are ready to go.

If you are new to Django and don't know how to create a Django project, then you can read my blog post on "What is Django?".

If you are clear with the above instructions, then let's get started!

Installing reCaptcha

Install django-recaptcha you can find link here click me.
Install the package using command: pip install django-recaptcha.

Note: Just for your information, the project name and app name might be different for you than mine. In the instructions, I used "Django project" and "Django app" as placeholders. When creating your own project and app, you can name them whatever you like.

Configuring reCaptcha in django settings

Open settings.py file and in INSTALLED_APPS list and write 'captcha'. ```python

INSTALLED_APPS = [
...,
'captcha',
...
]


- Now add reCaptcha `public` and `private` key `settings.py`.
    ```python


RECAPTCHA_PUBLIC_KEY = 'MyRecaptchaKey123'
RECAPTCHA_PRIVATE_KEY = 'MyRecaptchaPrivateKey456'

reCaptcha configuration on Google Cloud

Go to: reCaptcha (google.com)
Click on v3 Admin Console (You need to login with google account)
In label section you can right any label name.

In reCaptcha type you can select same as given in below image.

In domains setion you can write the default IP of django server as shown in below image.

Now, expand Google Cloud Platform dropdown menu and write project name and click on submit.
Once you submit, you will get 2 Keys
- First key will be site key.
- Second key will be Secret key.

Configure Public & Private key

Copy Site key and paste it in settings.py file in the variable called RECAPTCHA_PUBLIC_KEY. ```python

RECAPTCHA_PUBLIC_KEY = 'XXXXXXXXXXXXXXXXXXXXXXX'


- Copy `Secret key` and paste it in `settings.py` file in the variable called `RECAPTCHA_PRIVATE_KEY`.
    ```python


RECAPTCHA_PRIVATE_KEY = '--XXXXXXXXXXXXXXXXXXXXXXX--'

Google reCAPTCHA setting

After Copying and Pasting The keys Click on GO TO SETTINGS given below the private key.
Check every detail and hit on back arrow button given on the top.

And you should see your console.

Creating User creation form

In django app folder create file called forms.py.
We need to open the file and create a form that allows register new user and we will also add a reCaptcha field.
Below is the code for registering new user and adding reCaptcha field. ```python

from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User

Importing Captcha

from captcha.fields import ReCaptchaField

create a user

class CreateUserForm(UserCreationForm):
class Meta:
model = User
fields = ['username', 'email', 'password1', 'password2']

# Adding reCaptcha field    
captcha = ReCaptchaField()


## Creating Views
- Open `views.py` file and import some packages.
```python


from django.shortcuts import render, redirect
from .forms import CreateUserForm

Write home view function. ```python

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


- Write register view function.
```python


def register(request):
    form = CreateUserForm()

    if request.method == "POST":
        form = CreateUserForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('home')

    context = {'form': form}
    return render(request, 'register.html', context)

Creating urls for views

Open urls.py file in your django app. If you do not have that file then you can create one.
Write below code: ```python

from django.urls import path
from . import views

urlpatterns = [
path('', views.home, name='home'),
path('register/', views.register, name='register'),
]

- go to urls.py file in django project folder and write below code:
```python


from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('<your_app_name>.urls')),
]

Templates setup

Create templates folder in your django app folder.
Create file called base.html in templates folder.
Create folder and name it same as your app name.
create file called index.html.
Below is the code for base.html. ```html

<!DOCTYPE html>

Security - {% block title %}
{% endblock title %}

{% block content %}
{% endblock content %}

- Below is the code for `index.html`.
```html


{% extends 'base.html' %}

{% block title %}Home{% endblock title %}

{% block content %}

<nav>
    <a href="{% url 'home' %}">
        &nbsp; Home
    </a>
    <div>


        <ul>
            <li>
                <a type="button" href="{% url 'register' %}">Register</a>
            </li>
            <li>

                <a type="button" href="">Login</a>
            </li>
        </ul>
    </div>
</nav>

<body>
    <br>
    <br>
    <div class="text-center">

        <a class="btn btn-info" type="button" href="{% url 'register' %}"> <i class="fa fa-user" aria-hidden="true"></i>
            &nbsp; Make an account </a>
    </div>
</body>
{% endblock content %}

Below is the code for register.html. ```html

{% extends 'base.html' %}

{% block title %}Register User{% endblock title %}

{% block content %}

<h3>Create Account</h3>
<h5>Secure your account today!</h5>
<br>


    {% csrf_token %}

    {{form}}
    Create Account


<br><br>


    {% comment %} <p>Already have an account? </p> <a href="%20url%20''%20">Login</a> {% endcomment %}

{% endblock content %}

- If you wish you can add some `bootstrap css`.

## Finally done with all configuration
- Now, follow below commands and you will be fine.
- First, write command to migrate the project `python manage.py migrate`.
- Second, write command to start the server `python manage.py runserver`.

### You can also download django code from my [GutHub](https://github.com/yashpatel-py/django_recaptcha)

## Thank you <3
This is it for this blog. If you have any doubt please let me know in comments and do not forget to react on this blog and follow me for more amazing content link this.

What is django?

Yash Patel — Sat, 15 Apr 2023 17:47:59 +0000

Django is a high-level Python web framework that enables the rapid development of secure and maintainable websites and web applications. It follows the Model-View-Controller (MVC) architectural pattern, but with some variations, such as using the Model-View-Template (MVT) pattern instead.

Django provides a robust set of tools and libraries for handling common web development tasks, such as handling forms, authentication, routing, database migrations, and more. It also emphasizes the concept of "batteries included", which means that it includes many useful features out of the box, so developers don't have to spend time building everything from scratch.

Django is a popular choice for web development due to its simplicity, scalability, and versatility. It is used by many companies and organizations, including Instagram, Spotify, Mozilla, and The Washington Post, among others.

So, Lets Dive In 🏊...!

Creating a Virtual Environment in Windows

Open the command prompt by pressing the Windows key + R and then typing cmd in the Run dialog box.
Navigate to the directory where you want to create your virtual environment using the cd command. For example, to navigate to the desktop, you can type cd Desktop.
Once you're in the desired directory, enter the command python -m venv myenv to create a virtual environment named myenv. You can choose any name for your virtual environment.
Activate the virtual environment by entering the command source myenv\Scripts\activate. You should see the name of your virtual environment appear in parentheses in the command prompt.

Creating a Virtual Environment in Mac/Linux

Open the terminal by pressing Command + Spacebar and then typing terminal in the Spotlight Search bar.
Navigate to the directory where you want to create your virtual environment using the cd command. For example, to navigate to the desktop, you can type cd Desktop.
Once you're in the desired directory, enter the command python3 -m venv myenv to create a virtual environment named myenv. You can choose any name for your virtual environment.
Activate the virtual environment by entering the command source myenv/bin/activate. You should see the name of your virtual environment appear in parentheses in the terminal.

That's it! You have successfully created a virtual environment in both Windows and Mac/Linux. Now you can install any packages or dependencies required for your project within the virtual environment without affecting the system-wide Python installation.

Installing Django

Open a command prompt or terminal window.
Check if Python is already installed on your system by running the command python --version. If Python is not installed, download and install Python from the official website.
Once Python is installed, run the command pip install django to install Django.
Wait for the installation to complete. This might take a few minutes depending on your internet connection speed.
Once the installation is complete, verify the installation by running the command django-admin --version. This should output the version number of Django installed on your system.

Congratulations! You have successfully installed Django on your local machine. You can now start building your web applications using the Django web framework.

How to Create a New Django Project.

Open your terminal or command prompt.
Navigate to the directory where you have created virtual environment and make sure your virtual environment is activated.
Run the following command to create a new Django project:
```
django-admin startproject project_name
```
Replace project_name with the name you want to give your project.
Once the project is created, navigate to the project directory using the following command:
```
cd project_name
```
Again, replace project_name with the name of your project.
To test that your project has been created successfully, run the following command:
```
python manage.py runserver
```
This will start the development server. You should be able to see the Django welcome page by navigating to http://localhost:8000/ in your web browser.

That's it! You've successfully created a new Django project.

How to create Django App

Open a terminal or command prompt.
Navigate to the root directory of your Django project (the folder where manage.py is present).
Run the following command:
```
python manage.py startapp <app_name>
```
Replace <app_name> with the name of your app. For example, if you want to create an app called blog, you would run:
```
python manage.py startapp blog
```
Django will create a new directory with the name you provided for the app. The directory will contain several files and subdirectories.

Open the settings.py file in your Django project folder and add the name of your app to the INSTALLED_APPS list. For example:

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog', # Add your app name here
]

Save the settings.py file.
You're now ready to start building your Django app!
Now run python manage.py migrate command to apply any pending database migrations to the database schema.

Now let's understand Django App file structure

project_name/
├── app_name/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── project_name/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

Let's break it down:

project_name/ - This is the root directory of the Django project.
app_name/ - This is a directory that contains a single Django app. You can have multiple apps within a single Django project.
__init__.py - This is an empty file that tells Python that this directory should be considered a Python package.
admin.py - This file is used to register models with the Django admin site.
apps.py - This file is used to configure the Django app.
models.py - This file contains the database models for the Django app.
tests.py - This file contains the test cases for the Django app.
views.py - This file contains the view functions for the Django app.
settings.py - This file contains the settings for the Django - project, such as database configuration and installed apps.
urls.py - This file contains the URL routing configuration for the Django project.
wsgi.py - This file is used for deployment to WSGI-compatible servers.
manage.py - This file is used to run management commands for the Django project.

Settings for static, media files

Set up media and static file directories
First, create two directories named "media" and "static" in your project directory to store your media and static files, respectively. To do this, simply create two folders in the root directory of your project.
Update the project settings file
In your project settings file, add the following lines of code to specify the directories where your static and media files will be stored:
```
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
```
Here, MEDIA_ROOT and STATIC_ROOT are the directories where Django will look for your media and static files, respectively. MEDIA_URL and STATIC_URL are the URLs that will be used to access your media and static files.

Update your project's URLs file
In your project's urls.py file, add the following code to serve the static and media files:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, 
document_root=settings.MEDIA_ROOT)
    urlpatterns += static(settings.STATIC_URL, 
document_root=settings.STATIC_ROOT)

Here, DEBUG is a Boolean value in your settings file that determines whether your application is running in debug mode or not. If it is set to True, then the static() and media() functions will serve your media and static files, respectively.
Now, you can access your media and static files using the URLs you specified in the MEDIA_URL and STATIC_URL settings.

After following above steps your django file structure should look something like this.

project_name/
├── app_name/
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   ├── views.py
│   └── static/
├── project_name/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
│   └── static/
└── manage.py

App and Project urls connection

In your app's directory, create a file named urls.py. This file will contain all of the URLs for your app.
In the urls.py file of your app, import the Django path function and any views that you want to associate with specific URLs.

from django.urls import path
from . import views

Define your app's URLs using the path function. This function takes two arguments: the URL pattern and the view function that should handle the request.

urlpatterns = [
    path('home/', views.home, name='home'),
    path('contact/', views.contact, name='contact'),
]

In this example, we've defined two URLs for our app: /home/ and /contact/. The first argument of the path function specifies the URL pattern, and the second argument is the view function that should handle the request. We've also given each URL a name using the name argument. This is useful when generating URLs in templates or views.

In your project's main urls.py file, import the include function from Django's urls module, as well as the urls.py file of your app.

from django.urls import include, path
from myapp import urls as myapp_urls

Here, we're assuming that our app is named myapp.

In the urlpatterns list of your project's urls.py file, add a path function for your app's URLs, using the include function to include your app's urls.py file.

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include(myapp_urls)),
]

In this example, we've added a path function for our app's URLs using the include function. The empty string '' specifies that our app's URLs should be included at the root URL of our project.

Overall, this directory structure provides a clear separation of concerns between the project-level and app-level components of a Django application. Understanding this structure is key to building scalable and maintainable Django projects.

How to send e-mail in django ?

Yash Patel — Fri, 16 Apr 2021 16:43:08 +0000

In django we can send e-mail using SMTP (Simple Mail Transfer Protocol) service which is inbuilt package in python and also in django.

What is smtp ?

SMTP (Simple Mail Transfer Protocol) is service that provides service to send, receive, and or relay outgoing mail between senders and receivers.
SMTP service takes your client email address(you can also give multiple email address) which you are using and it is formatted as smtp.gmail.com because let's take and example Gmail’s SMTP server address is smtp.gmail.com, and Twilio Send Grids is smtp.sendgrid.com. You can generally find your SMTP server address in the account or settings section of your mail client.

Django email sending setup

Step 1 --> create one folder and name it as django_email

Step 2 --> Create django project using below command
django-admin startproject emails .
Directory preview

Step 3 --> Create django app in project created from above step and use command python manage.py startapp main

Directory preview

Step 4 --> Now install app in settings.py and this file will be in emails folder
Directory preview

Step 5 --> Now you need to migrate the project using command
python manage.py migrate

Step 6 --> Go in settings.py and go at the bottom and write code under static variable

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_HOST_USER = 'gmail account email id'
EMAIL_HOST_PASSWORD = 'Your gmail password'
EMAIL_USE_TLS = True
EMAIL_PORT = 587

Here in variable EMAIL_HOST_USER you need to write the email id which have two step verification off because we need to make some settings change on your g-mail account. And In variable EMAIL_HOST_PASSWORD you need you write your g-mail account password.

Step 7 --> Now open your favorite browser and follow below steps

Go in option Account
Go in option Security and search for Less secure app access and turn that on because if you will not turn that on then django will not able to send the mail.
Directory preview

Step 8 --> Now create form.py file in mail folder and write code below code

form.py

from django import forms

class ContactMeForm(forms.Form):
    first_name = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control', 'placeholder':'Enter first name'}), required=True)
    last_name = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control', 'placeholder':'Enter last name'}), required=True)
    emailid = forms.EmailField(widget=forms.TextInput(attrs={'class':'form-control', 'placeholder':'Enter email id'}), required=True)
    phone_number = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control', 'placeholder':'Enter phone number'}))
    subject = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control', 'placeholder':'Enter subject'}), required=True)
    message = forms.CharField(widget=forms.Textarea(attrs={'class':'form-control', 'placeholder':'Enter Message'}), required=True)

Step 9 --> Now go in views.py file and write below code

views.py

from django.shortcuts import render
from main.form import ContactMeForm
from django.core.mail import send_mail, BadHeaderError
from django.http import HttpResponse
from django.contrib import messages

def home(request):
    form = ContactMeForm()

    if request.method == 'POST':
        form = ContactMeForm(request.POST)
        if form.is_valid():
            # form.save()
            # send_mail(subject, message[fname, lname, email, phonenumber, subject, message], sedner, recipient)

            subject = "Contact form inquiry"
            body = {
                'first_name': form.cleaned_data['first_name'],
                'last_name':form.cleaned_data['last_name'],
                'email': form.cleaned_data['emailid'],
                'phonenumber': form.cleaned_data['phone_number'],
                'subject': form.cleaned_data['subject'],
                'message': form.cleaned_data['message'],
            }

            message = '\n'.join(body.values())

            sender = form.cleaned_data['emailid']
            recipient = ['gameforyash@gmail.com']

            try:
                send_mail(subject, message, sender, recipient, fail_silently=True)

            except BadHeaderError:
                return HttpResponse("Invalid header found.")

            messages.success(request, "Your respoce has been submited successfully")
    context = {
        'form':form,
    }
    return render(request, "home/index.html", context)

Step 10 --> Now create urls.py file in main folder
Directory preview

Step 11 --> Open urls.py created in main folder and write below code

from django.urls import path
from main import views

urlpatterns = [
    path('', views.home, name="home"),
]

Step 12 --> Now register urls.py created in main folder to emails>url.py as shown below

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('main.urls'))
]

Step 13 --> Now create templates folder in main folder and create home folder in templates folder and create index.html in home folder

SOME THING LIKE THIS main>templates>home>index.html
Directory preview

Step 14 --> Open index.html and write below 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>Document</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
        <style>
            .marg {
                margin: 20%;
            }
        </style>
    </head>

    <body>
        <dev class="marg">
            <form class="form-contact contact_form container" action="{% url 'home' %}" method="post" id="contactForm"
                novalidate="novalidate">
                <h1>Contact us form</h1>
                {% csrf_token %}
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="first_name">Enter first name</label>
                            {{ form.first_name }}
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="last_name">Enter last name</label>
                            {{ form.last_name }}
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="form-group">
                            <label for="email">Enter Email id</label>
                            {{ form.emailid }}
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="form-group">
                            <label for="phone_number">Enter phone number</label>
                            {{form.phone_number}}
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="form-group">
                            <label for="subject">Subject</label>
                            {{form.subject}}
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="form-group">
                            <label for="Message">Enter Message</label>
                            {{form.message}}
                        </div>
                    </div>
                </div>
                <div class="form-group mt-lg-3">
                    <button type="submit" class="btn btn-outline-success">Send Message</button>
                </div>
            </form>
        </dev>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
            crossorigin="anonymous"></script>
    </body>

</html>

Step 15 --> Now start your django server using command python manage.py runserver

**Step 16 --> Fill the data and click on submit button and see your mail mail box you must see mail

mail received

If you like this shot django mail sending tutorial then please like this blog and if you have any doubts the let me know in discussion box