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.
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.
That’s a wrap!
I hope you enjoyed this article
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
Subscribe to my Newsletter
Get the latest posts delivered right to your inbox
Latest Post
Create an Hourglass Timer Loader using HTML and CSS
by Faraz - September 13, 2024Learn how to create a simple hourglass timer loader using HTML and CSS. Follow our step-by-step guide for a visually appealing and functional loader.
Create Animated Logout Button Using HTML and CSS
by Faraz - August 08, 2024Learn to create an animated logout button using simple HTML and CSS. Follow step-by-step instructions to add smooth animations to your website’s logout button.
Create Interactive Booking Button with mask-image using HTML and CSS (Source Code)
March 10, 2024
Create Dice Rolling Game using HTML, CSS, and JavaScript
by Faraz - August 21, 2024Learn how to create a dice rolling game using HTML, CSS, and JavaScript. Follow our easy-to-understand guide with clear instructions and code examples.
Tooltip Hover to Preview Image with Tailwind CSS
by Faraz - August 01, 2024Learn how to create a tooltip hover effect to preview images using Tailwind CSS. Follow our simple steps to add this interactive feature to your website.
Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js
January 23, 2024
Create Sticky Bottom Navbar using HTML and CSS
by Faraz - August 29, 2024Learn how to create a sticky bottom navbar using HTML and CSS with this easy-to-follow guide.
