Create Translator Web App in Django: Simple Step-by-Step Guide

By Faraz - July 29, 2024

Learn how to create a translator web app using Django. Follow our simple, step-by-step guide to build a functional translator with basic features.

Join us on Telegram

create-translator-web-app-in-django-simple-step-by-step-guide.webp

Read Also how to sort rows in a table with headers using javascript.png

How to Sort HTML Table by Header Click | Sorting Data Tables

Creating a translator web application in Django is a great way to learn the basics of web development while building something useful. This guide will take you through the entire process, from setting up your Django project to creating the translation functionality. Whether you're a beginner or looking to brush up on your Django skills, this step-by-step tutorial will help you build a simple translator web app.

Prerequisites

Before we dive in, make sure you have a basic understanding of Django and web development. You'll need the following tools and libraries installed on your machine:

Python (version 3.6 or higher)
Django (version 3.0 or higher)
A text editor or IDE (such as VS Code or PyCharm)
Basic knowledge of HTML and CSS

Setting Up the Development Environment

Installing Django

Before starting, ensure you have Python installed. You can install Django using pip:

pip install django

Creating a new Django project

Create a new Django project using the following command:

django-admin startproject translator_project

Setting up the project structure

Navigate into your project directory:

cd translator_project

Create a Django App

Create a new app within your project:

python manage.py startapp translator

Install Googletrans Library

If you haven't installed googletrans, install it using pip:

pip install googletrans==4.0.0-rc1

Adding the app to the project

In translator_project/settings.py, add translator to the INSTALLED_APPS list:

INSTALLED_APPS = [
    'translator',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Building the Translator App

Create Forms

In translator, create a new file named forms.py to input text for translation and add the following function:

from django import forms

class TranslationForm(forms.Form):
    text = forms.CharField(widget=forms.Textarea, label='Text to Translate')
    target_language = forms.ChoiceField(choices=[('en', 'English'), ('fr', 'French'), ('de', 'German'), ('es', 'Spanish')], label='Target Language')

Creating the Views

Next, we’ll create views to handle user input and display translation results. Open translator/views.py and add the following:

from django.shortcuts import render
from googletrans import Translator
from .forms import TranslationForm

def translate_text(request):
    translation = None
    if request.method == 'POST':
        form = TranslationForm(request.POST)
        if form.is_valid():
            text = form.cleaned_data['text']
            target_language = form.cleaned_data['target_language']
            translator = Translator()
            translation = translator.translate(text, dest=target_language)
    else:
        form = TranslationForm()
    return render(request, 'translate.html', {'form': form, 'translation': translation})

Creating Templates

Create a template to display the form and the translated text. Create a file named translate.html in translator/templates/:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Translate Text</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        form {
            margin-top: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }
        .form-group select,
        .form-group button {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        .form-group textarea {
            width: 95%;
            padding: 10px;
            font-size: 16px;
            resize: none;
            height: 150px;
            border: 1px solid #ddd;
            border-radius: 5px;
            outline: none;
        }
        .form-group button {
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s;
            border: none;
            width: auto;
            display: inline-block;
        }
        .form-group button:hover {
            background-color: #0056b3;
        }
        .form-group button:active {
            transform: scale(0.98);
        }
        .alert {
            margin-top: 20px;
            padding: 15px;
            border-radius: 5px;
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Translate Text</h1>
        <form method="post">
            {% csrf_token %}
            <div class="form-group">
                <label for="text">Text to Translate</label>
                {{ form.text }}
            </div>
            <div class="form-group">
                <label for="target_language">Target Language</label>
                {{ form.target_language }}
            </div>
            <div class="form-group">
                <button type="submit">Translate</button>
            </div>
        </form>
        {% if translation %}
        <div class="alert" role="alert">
            <h2>Translation:</h2>
            <p>{{ translation.text }}</p>
        </div>
        {% endif %}
    </div>
</body>
</html>

Set Up URL Routing

Add a URL pattern for your view. In translator/urls.py (create this file if it doesn't exist), add:

from django.urls import path
from .views import translate_text

urlpatterns = [
    path('', translate_text, name='translate_text'),
]

Include the app's URLs in your project's URL configuration. Open translator_project/urls.py and include the counter app URLs:

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

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

Run Your Server

Apply migrations and run your server:

python manage.py migrate
python manage.py runserver

Open your browser and go to http://127.0.0.1:8000/ to see your translator application in action.

Full Translator App Project Structure

translator_project/
├── manage.py
├── translator_project/
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   ├── wsgi.py
└── translator/
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── forms.py
    ├── migrations/
    │   └── __init__.py
    ├── models.py
    ├── templates/
    │   └── translate.html
    ├── tests.py
    ├── urls.py
    ├── views.py

Conclusion

By following this guide, you have successfully created a basic translator web application using Django. You've learned how to set up a Django project, create forms, handle views, and render templates. With this foundation, you can now expand your application with additional features and improvements. Keep experimenting and building to enhance your web development skills.

Read Also Create a Responsive Tag Cloud with HTML and CSS.jpg

Create a Responsive Tag Cloud with HTML and CSS