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 Car Registration System Using HTML, CSS, and JavaScript
by Faraz - December 08, 2024Learn how to create a simple car registration system with HTML, CSS, and JavaScript in this easy step-by-step guide. Build a functional and attractive form with minimal code.
Create Marketing Hero Section using HTML and CSS
by Faraz - September 30, 2024Learn how to create a responsive marketing hero section using HTML and CSS.
Create Pop It Game using HTML, CSS, and JavaScript
by Faraz - October 08, 2024Learn how to create a fun and simple Pop It game using HTML, CSS, and JavaScript with this easy-to-follow step-by-step guide for beginners.
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.
