[Tut] How I Created a Translation and Counter App using Django

[xSicKxBot]

How I Created a Translation and Counter App using Django

5/5 – (1 vote)

In this two-part tutorial series, we will learn how to create a translation app using Django. As an extra feature, we are going to demonstrate two ways to create a word counter that counts the number of words written.



Translating text to a language one can understand is no longer a new development. As many businesses are done on an international level, it necessitates the need to communicate in a language the other party can understand.

Advancement in technology has removed the barrier to communication. With an app such as Google Translate, you can get the meaning of text written in another language.



As part of learning Django through building projects, we are going to implement such a feature.

What We Are Going to Learn

As earlier stated, this is a two-part series project tutorial. The first part focuses on building a translation app. In the second part, we are going to learn how to add another feature, a word counter. I’m going to show you how to go about building it using both JavaScript and Python.



By the end of this tutorial, you are not only going to learn how Django interacts with web pages, but you are also going to learn how to manipulate the DOM with JavaScript. Thus, even if you have little or no knowledge of HTML, CSS, and JavaScript, you can combine your knowledge of Python with my explanation to understand what we are doing.

Getting Started

Although this is a beginner Django project, I expect you to know the steps involved in setting up Django as I don’t have to be repeating myself whenever I’m writing a Django project tutorial. However, if this is your first time, check this article to learn how to install Django.

Your Django project should be created in the current folder using the name,

Code:

translator

. Then use

Code:

app

as the name of the Django app. After installation, go to the

Code:

settings.py

file and add the app name.

Code:

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # custom app 'app', ]

Creating the View Function



Next, go to the

Code:

views.py

file and add the following code to it.

Code:

from django.shortcuts import render from translate import Translator # Create your views here. def index(request): if request.method == 'POST': text = request.POST['translate'] lang = request.POST['language'] translator = Translator(to_lang=lang) translation = translator.translate(text) context = { 'translation': translation, } return render(request,'index.html', context) return render(request, 'index.html')

This is a very simple view function. We get the input from the HTML form provided it is a

Code:

POST

request. Then, we call on the

Code:

Translator

class of the

Code:

translator

module to translate the given text into the language selected. The

Code:

Translator

class has an argument,

Code:

to_lang

. This indicates the language you want your text to be translated.

We finally use the

Code:

render

function to display the translated text on the

Code:

index.html

web page. We can as well use the

Code:

HttpResponse()

function but it will not be displayed on the

Code:

index.html

web page.

But if the request method is not

Code:

POST

, we simply return the web page containing an empty form.

This part is as simple as it should be. But in future tutorials, we will be dealing with a more complicated view function.

The Templates



Next is the templates folder. Create the folder and add it to the

Code:

settings.py

file.

Code:

TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')], # add these 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]

Inside the folder, we create the

Code:

index.html

file.

Code:

<!DOCTYPE html> <html> <head> <title>Django Translate</title> </head> <body> <h1>Django Translate App</h1> <form method="post"> {% csrf_token %} <label for="django">Enter Text:</label> <br/> <textarea onChange="" id="translate" name="translate" placeholder="Enter your text here" rows="10" cols="70"></textarea> <br> <select required name="language"> <option value="French">French</option> <option value="Spanish">Spanish</option> <option value="German">German</option> <option value="Italian">Italian</option> </select> <br> <br> <button id="btn" type="submit">Translate</button> </form> <br> <textarea id="text" placeholder="Your text will appear here" rows='10' cols='70'>{{ translation }}</textarea> </body> <script src="{% static 'js/script.js' %}"></script> </html>

You can see the form element has the method property as

Code:

POST

. Without this, our view function will not work as expected. The

Code:

csrf_token

is a mandatory requirement for security. We use the

Code:

select

element to list the languages. You can add as many as you want.

Notice that the

Code:

textarea

and the

Code:

select

elements each has a

Code:

name

property, and if you check the view function, you will see that it has the same name as found in the HTML file. This is the way we retrieve data from the web page.

Finally, we register the URL of the app both in the project level and in the app level. For the project level, go to

Code:

translate/urls.py

file and add this:

Code:

from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('app.urls')) ]

For the app level create a

Code:

app/urls.py

file and add this:

Code:

from django.urls import path from .views import index urlpatterns = [ path('', index, name='home'), ]

Check the article I mentioned to see a brief explanation of the above code. That’s it. We are good to go. Fire up the local server to test what we have done.



Notice how we make the translated text appear inside the box. We accomplished this using Django templating language. Remember the context variable passed to the

Code:

render()

function? It is a dictionary object, the name of the key being what we passed to the

Code:

textarea

element. Thus, we are telling Django to display the value of the key to the web page.

And what is the value? The translated text! That is how Django dynamically writes to a web page. Feel free to play with any language of your choice provided the language is included in the

Code:

translate

library.

Conclusion

This is how we come to the end of the first part of this tutorial series. The full code for the project series can be found here. In the second part, we will learn two ways we can count the number of words written in the

Code:

textarea

element:

Recommended: How I Created a Translation and Counter App using Django (2/2)