+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: Python (https://www.sickgaming.net/forum-83.html)
+--- Thread: [Tut] How I Created a Translation and Counter App using Django (/thread-100992.html)
[Tut] How I Created a Translation and Counter App using Django - xSicKxBot - 04-18-2023
How I Created a Translation and Counter App using Django
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"1299311","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"1","legendonly":"","readonly":"","score":"5","starsonly":"","best":"5","gap":"5","greet":"Rate this post","legend":"5\/5 - (1 vote)","size":"24","title":"How I Created a Translation and Counter App using Django","width":"142.5","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}'>
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 142.5px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> 5/5 – (1 vote) </div>
</p></div>
<p>In this two-part tutorial series, we will learn how to <strong>create a translation app using Django</strong>. <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f920.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> As an extra feature, we are going to demonstrate two ways to <strong>create a word counter</strong> that counts the number of words written.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="922" height="614" src="https://blog.finxter.com/wp-content/uploads/2023/04/image-159.png" alt="" class="wp-image-1299569" srcset="https://blog.finxter.com/wp-content/uploads/2023/04/image-159.png 922w, https://blog.finxter.com/wp-content/uploads/2023/04/image-159-300x200.png 300w, https://blog.finxter.com/wp-content/uploads/2023/04/image-159-768x511.png 768w" sizes="(max-width: 922px) 100vw, 922px" /></figure>
</div>
<p>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.</p>
<p>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.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="428" src="https://blog.finxter.com/wp-content/uploads/2023/04/image-160-1024x428.png" alt="" class="wp-image-1299571" srcset="https://blog.finxter.com/wp-content/uploads/2023/04/image-160-1024x428.png 1024w, https://blog.finxter.com/wp-content/uploads/2023/04/image-160-300x125.png 300w, https://blog.finxter.com/wp-content/uploads/2023/04/image-160-768x321.png 768w, https://blog.finxter.com/wp-content/uploads/2023/04/image-160-1536x641.png 1536w, https://blog.finxter.com/wp-content/uploads/2023/04/image-160.png 1686w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>As part of learning Django through building projects, we are going to implement such a feature.</p>
<h2 class="wp-block-heading">What We Are Going to Learn</h2>
<p>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 <a href="https://blog.finxter.com/javascript-data-types/" data-type="post" data-id="222514" target="_blank" rel="noreferrer noopener">JavaScript</a> and <a href="https://blog.finxter.com/python-developer-income-and-opportunity/" data-type="post" data-id="189354" target="_blank" rel="noreferrer noopener">Python</a>.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="529" height="902" src="https://blog.finxter.com/wp-content/uploads/2023/04/image-161.png" alt="" class="wp-image-1299574" srcset="https://blog.finxter.com/wp-content/uploads/2023/04/image-161.png 529w, https://blog.finxter.com/wp-content/uploads/2023/04/image-161-176x300.png 176w" sizes="(max-width: 529px) 100vw, 529px" /></figure>
</div>
<p>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.</p>
<h2 class="wp-block-heading">Getting Started</h2>
<p>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 <a href="https://blog.finxter.com/how-i-created-an-url-shortener-app-using-django/" data-type="post" data-id="1196939" target="_blank" rel="noreferrer noopener">this article to learn how to install Django</a>.</p>
<p>Your Django project should be created in the current folder using the name, <code>translator</code>. Then use <code>app</code> as the name of the Django app. After installation, go to the <code>settings.py</code> file and add the app name.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # custom app 'app', ]</pre>
<h2 class="wp-block-heading">Creating the View Function</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="922" height="615" src="https://blog.finxter.com/wp-content/uploads/2023/04/image-162.png" alt="" class="wp-image-1299577" srcset="https://blog.finxter.com/wp-content/uploads/2023/04/image-162.png 922w, https://blog.finxter.com/wp-content/uploads/2023/04/image-162-300x200.png 300w, https://blog.finxter.com/wp-content/uploads/2023/04/image-162-768x512.png 768w" sizes="(max-width: 922px) 100vw, 922px" /></figure>
</div>
<p>Next, go to the <code>views.py</code> file and add the following code to it.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">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')
</pre>
<p>This is a very simple view function. We get the input from the HTML form provided it is a <code>POST</code> request. Then, we call on the <code>Translator</code> class of the <code>translator</code> module to translate the given text into the language selected. The <code>Translator</code> class has an argument, <code>to_lang</code>. This indicates the language you want your text to be translated.</p>
<p>We finally use the <code>render</code> function to display the translated text on the <code>index.html</code> web page. We can as well use the <code>HttpResponse()</code> function but it will not be displayed on the <code>index.html</code> web page.</p>
<p>But if the request method is not <code>POST</code>, we simply return the web page containing an empty form.</p>
<p>This part is as simple as it should be. But in future tutorials, we will be dealing with a more complicated view function.</p>
<h2 class="wp-block-heading">The Templates</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="601" height="902" src="https://blog.finxter.com/wp-content/uploads/2023/04/image-163.png" alt="" class="wp-image-1299578" srcset="https://blog.finxter.com/wp-content/uploads/2023/04/image-163.png 601w, https://blog.finxter.com/wp-content/uploads/2023/04/image-163-200x300.png 200w" sizes="(max-width: 601px) 100vw, 601px" /></figure>
</div>
<p>Next is the templates folder. Create the folder and add it to the <code>settings.py</code> file.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">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', ], }, },
]
</pre>
<p>Inside the folder, we create the <code>index.html</code> file.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><!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>
</pre>
<p>You can see the form element has the method property as <code>POST</code>. Without this, our view function will not work as expected. The <code>csrf_token</code> is a mandatory requirement for security. We use the <code>select</code> element to list the languages. You can add as many as you want.</p>
<p>Notice that the <code>textarea</code> and the <code>select</code> elements each has a <code>name</code> 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.</p>
<p>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</code> file and add this:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from django.contrib import admin
from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('app.urls'))
]</pre>
<p>For the app level create a <code>app/urls.py</code> file and add this:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from django.urls import path
from .views import index urlpatterns = [ path('', index, name='home'),
]</pre>
<p>Check the <a href="https://blog.finxter.com/how-i-created-an-url-shortener-app-using-django/" data-type="post" data-id="1196939" target="_blank" rel="noreferrer noopener">article I mentioned</a> 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.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="695" height="391" src="https://blog.finxter.com/wp-content/uploads/2023/04/image-158.png" alt="" class="wp-image-1299550" srcset="https://blog.finxter.com/wp-content/uploads/2023/04/image-158.png 695w, https://blog.finxter.com/wp-content/uploads/2023/04/image-158-300x169.png 300w" sizes="(max-width: 695px) 100vw, 695px" /></figure>
</div>
<p>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()</code> function? It is a <a href="https://blog.finxter.com/python-dictionary/" data-type="post" data-id="5232" target="_blank" rel="noreferrer noopener">dictionary</a> object, the name of the key being what we passed to the <code>textarea</code> element. Thus, we are telling Django to display the value of the key to the web page. </p>
<p>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</code> library.</p>
<h2 class="wp-block-heading">Conclusion</h2>
<p>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 <a href="https://github.com/finxter/django_translate" data-type="URL" data-id="https://github.com/finxter/django_translate">here</a>. In the second part, we will learn two ways we can count the number of words written in the <code>textarea</code> element:</p>
<p class="has-base-2-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4a1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended</strong>: <a href="https://blog.finxter.com/how-i-created-a-translation-and-counter-app-using-django-2-2/" data-type="URL" data-id="https://blog.finxter.com/how-i-created-a-translation-and-counter-app-using-django-2-2/" target="_blank" rel="noreferrer noopener">How I Created a Translation and Counter App using Django (2/2)</a></p>
</div>
https://www.sickgaming.net/blog/2023/04/17/how-i-created-a-translation-and-counter-app-using-django/