03-29-2023, 07:46 AM
How I Built an English Dictionary App with Django
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"1250398","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","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>As we all know, <a rel="noreferrer noopener" href="https://blog.finxter.com/django-developer-income-and-opportunity/" data-type="post" data-id="248182" target="_blank">Django</a> is a Python framework used for building complex web applications. Yet, it can also be used for building simple ones. In this tutorial, I’m going to show you <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4d6.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>how I built an English dictionary app</strong>, a simple Django project for beginners.</p>
<p>It takes time for a beginner to fully understand how Django works. But the key is consistency. If you keep building projects, you will gradually know enough to be dangerous with Django.</p>
<p class="has-base-background-color has-background"><strong><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f447.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Scroll to the end to see the full code on GitHub!</strong></p>
<h2>A Dictionary App? <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4d6.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /></h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="1022" height="681" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-408.png" alt="" class="wp-image-1250422" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-408.png 1022w, https://blog.finxter.com/wp-content/uplo...00x200.png 300w, https://blog.finxter.com/wp-content/uplo...68x512.png 768w" sizes="(max-width: 1022px) 100vw, 1022px" /></figure>
</div>
<p>A dictionary is an application used to get a particular word’s meaning. No matter how proficient we are in English, some words are far beyond our understanding. There are also words we may not know how to pronounce efficiently, especially those originating from a different language.</p>
<p>Furthermore, we may want to know a synonym or antonym of a given word. This is where a dictionary comes in handy. With a dictionary, we get to know not only the meaning of a word but how it is pronounced, what parts of speech it belongs to, and how it is used in a sentence. Students, no doubt, appreciate the importance of having a dictionary.</p>
<h2>How Will We Get The Data?</h2>
<p>How will we build this dictionary app so that when users search for a particular word, they get the meaning? </p>
<p>We have two options. Either we use <code>PyDictionary</code>, a Python module and an API that scrapes an online dictionary website or we perform the web scraping ourselves. None of these methods comes without a drawback.</p>
<p class="has-base-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/is-web-scraping-legal/" data-type="post" data-id="383048" target="_blank" rel="noreferrer noopener">Is Web Scraping Legal?</a></p>
<p>The drawback is the challenge that comes with web scraping. Many websites sometimes change their <a href="https://blog.finxter.com/generating-html-documents-in-python/" data-type="post" data-id="310531" target="_blank" rel="noreferrer noopener">HTML</a> structures to prevent people or bots from accessing their content. So, if an API is not actively maintained, it can quickly become useless. This is the case with <code>PyDictionary</code>. Therefore, we are going to perform web scraping.</p>
<p>Doing so will undoubtedly gain some valuable experience in web scraping, a very broad concept in Python programming. Still, we are at the mercy of website owners. They can change the HTML structures of their websites unexpectedly.</p>
<h2>Prerequisites</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="1022" height="682" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-407.png" alt="" class="wp-image-1250421" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-407.png 1022w, https://blog.finxter.com/wp-content/uplo...00x200.png 300w, https://blog.finxter.com/wp-content/uplo...68x513.png 768w" sizes="(max-width: 1022px) 100vw, 1022px" /></figure>
</div>
<p>This tutorial assumes you are familiar with Python, HTML, and Bootstrap. If not, please you are required to have at least a basic knowledge before attempting this project. Basic knowledge of Django, though not required, can speed up the learning process.</p>
<h2>Getting started</h2>
<p>Create a new folder for this project. Then you do the following:</p>
<ol>
<li>Create a virtual environment<br /><code>python3 -m venv .venv</code></li>
<li>Activate the virtual environment<br /><code>source .venv/bin/activate</code></li>
<li>Install the required libraries in the virtual environment<br /><code>pip install django tzdata requests bs4</code></li>
<li>Create a <code>requirements.txt</code> file to keep a record of the module versions.<br /><code>pip freeze > requirements.txt</code></li>
</ol>
<h2>Creating Django Project and Application</h2>
<p>i. Creating the project<br /><code>django-admin startproject project .</code><br />This creates a folder called <code>project</code> in the current directory.</p>
<p>ii. Creating the application<br /><code>python3 manage.py startapp dictionary</code><br />The <code>manage.py</code> file is an executable file used to run Django commands</p>
<p>iii. Applying migrations<br /><code>python3 manage.py migrate</code></p>
<p>iv. Checking to see if the installation was successful<br /><code>python3 mange.py runserver</code></p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="607" height="398" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-400.png" alt="" class="wp-image-1250400" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-400.png 607w, https://blog.finxter.com/wp-content/uplo...00x197.png 300w" sizes="(max-width: 607px) 100vw, 607px" /></figure>
</div>
<p>Once you see the above image, you are good to go.</p>
<h2>Registering the App</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="626" height="939" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-406.png" alt="" class="wp-image-1250419" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-406.png 626w, https://blog.finxter.com/wp-content/uplo...00x300.png 200w" sizes="(max-width: 626px) 100vw, 626px" /></figure>
</div>
<ol>
<li>In <code>settings.py</code> file<br />This step is important whenever an app is created. Navigate to the project folder. Open the <code>settings.py</code> file and scroll down to the <code>INSTALLED_APPS</code> section.</li>
</ol>
<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=""> # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # custom app 'dictionary', ]</pre>
<p>We have registered the app in the <code>settings.py</code> file. The <code>settings.py</code> file is used to configure the whole project.</p>
<ol start="2">
<li>In the <code>urls.py</code> file<br />Open the <code>urls.py</code> file in the project folder and add this:</li>
</ol>
<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=""> from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('dictionary.urls')), ]</pre>
<p>We have registered the app-level URL. Let’s now create it.</p>
<h2>Creating the App URL</h2>
<p>This will be done inside the dictionary folder. Create a <code>urls.py</code> file inside the folder and add this:</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="">from django.urls import path
from . import views urlpatterns = [ path('', views.homeView, name='home'), path('search', views.searchView, name='search'),
]
</pre>
<p>“<code>from . import views</code>” tells Django to import the <code>views.py</code> file residing in the dictionary folder. </p>
<p>The empty string indicates the home page URL which is <code>http://127.0.0.1:8000/</code> if you are using the local server. </p>
<p>This is where users will be directed when the web page is opened.</p>
<p>For the <code>'search'</code> string, the URL will be <code>http://127.0.0.1:8000/search</code>. We will be creating two functions in the <code>views.py</code> file as indicated.</p>
<p>Notice the <code>name</code> argument in the <code>path()</code> function, this is another way to refer to the URLs in the template files without using the exact URLs.</p>
<h2>Creating Views</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="1022" height="681" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-405.png" alt="" class="wp-image-1250417" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-405.png 1022w, https://blog.finxter.com/wp-content/uplo...00x200.png 300w, https://blog.finxter.com/wp-content/uplo...68x512.png 768w" sizes="(max-width: 1022px) 100vw, 1022px" /></figure>
</div>
<p>In this file, we are going to perform the web scraping we mentioned earlier. The first function, the <code>homeView()</code> is fairly simple. We just render the <code>index.html</code> page once the app is opened.</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="">from django.shortcuts import render
import requests
from bs4 import BeautifulSoup as bs # Create your views here. def homeView(request): return render(request, 'index.html')</pre>
<p>But the <code>searchView()</code> function is a little bit complex. We want to display three things when a user searches for the meaning of a word: meaning, synonyms, and antonyms. </p>
<p>So, we perform web scraping on two online dictionary websites. The first will display the meaning and the second will display the synonyms and antonyms.</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="">def searchView(request): word = request.GET['search'] response = requests.get(f'https://dictionary.com/browse/{word}') response2 = requests.get(f'https://thesaurus.com/browse/{word}') if response: soup_1 = bs(response.text, 'html.parser') meaning = soup_1.find_all('div', {'value': '1'}) meaning_1 = meaning[0].getText() else: word = f'Sorry, we couldn\'t find your word {word} in our records.' meaning = '' meaning_ = '' if response2: soup_2 = bs(response2.text, 'html.parser') synonyms = soup_2.find_all('a', {'class': 'css-1kg1yv8 eh475bn0'}) synonym_list = [] for i in range(len(synonyms)): synonym_list.append(synonyms[i].text.strip()) antonyms = soup_2.find_all('a', {'class': 'css-15bafsg eh475bn0'}) antonym_list = [] for i in range(len(antonyms)): antonym_list.append(antonyms[i].text.strip()) else: synonym_list = '' antonym_list = '' results = { 'word': word, 'meaning': meaning_1, 'synonyms': synonym_list, 'antonyms': antonym_list } return render(request, 'search.html', results)</pre>
<p>We import the <code>requests</code> module which uses the <code><a href="https://blog.finxter.com/python-requests-get-the-ultimate-guide/" data-type="post" data-id="37837" target="_blank" rel="noreferrer noopener">get()</a></code> method to scrape the contents of the two websites. </p>
<p class="has-base-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/python-requests-library-2/" data-type="post" data-id="37804" target="_blank" rel="noreferrer noopener">My First Python Get Request</a></p>
<p>The result is a cruel HTML code staring at you. <a href="https://blog.finxter.com/web-scraping-with-beautifulsoup-in-python/" data-type="post" data-id="17311" target="_blank" rel="noreferrer noopener">BeautifulSoup</a>, invaluable for web scraping does its job well to pull the data out of the HTML content. This now makes it possible to search the parsed data.</p>
<p>For our first search using the <code><a href="https://blog.finxter.com/how-to-access-the-first-second-or-n-th-child-div-element-in-beautifulsoup/" data-type="post" data-id="1230960" target="_blank" rel="noreferrer noopener">find_all()</a></code> method from <code>BeautifulSoup</code>, we want a text wrapped in a div tag with the value 1. This is where the website owners kept the meaning of a particular word on the <em><strong>dictionary.com</strong></em> website. </p>
<p>So, we use the <code>getText()</code> method to get the text.</p>
<p>The second and third searches look similar to the first but instead of a div, we search in a tag. The words were kept in a tag to make it easy for visitors to be redirected to that particular word if they want to find the definition.</p>
<p>Instead of searching for a value, we search for a CSS class. We then append the results to their respective variables. If you are new to web scraping, you may wonder how we know where those particular words reside.</p>
<p>The answer is found in a browser’s developer tools, preferably <strong>Chrome Developer Tools</strong>. This is the reason I suggest familiarizing yourself with HTML before attempting this project.</p>
<p>Finally, we render the results on the <code>search.html</code> page. Notice the <code>else</code> statements. This is run if the word is not found on the website. Let’s now create the HTML files.</p>
<h2>Creating Templates</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="1022" height="826" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-404.png" alt="" class="wp-image-1250416" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-404.png 1022w, https://blog.finxter.com/wp-content/uplo...00x242.png 300w, https://blog.finxter.com/wp-content/uplo...68x621.png 768w" sizes="(max-width: 1022px) 100vw, 1022px" /></figure>
</div>
<p>Create a folder named <code>templates</code> in the current directory (not in the project or app folder). Then go to the <code>settings.py</code> file to let Django know of this development. In the file, import the <code>os</code> module. Then scroll to the TEMPLATES section and add this:</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>Then create three files in the <code>templates</code> folder: </p>
<ul>
<li><code>base.html</code>, </li>
<li><code>index.html</code>, and </li>
<li><code>search.html</code>. </li>
</ul>
<p>The main HTML files will inherit from the <code>base.html</code> file. Open the <code>base.html</code> file and add the following:</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=""><!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dictionary App</title> <!-- CSS only --> <!-- we are getting bootstrap5 from the CDN --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head> <body> <div class="container mt-4"> <div class="row"> <div class="mt-4 p-5 bg-success text-white rounded mb-3"> <h1>Django English Dictionary</h1> </div> <div class="col-md-12"> {% block content %} <!-- here we will inject the content of every page that inherits from the base page --> {% endblock %} </div> </div> </div>
</body> </html></pre>
<p>Then, in the <code>index.html</code> add the following:</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=""><!-- the index page is inheriting from the base page -->
<!-- the extends tags are used for inheriting from the base page -->
{% extends 'base.html' %} <!-- the block content tags for containing content of the page -->
{% block content %} <form action="search"> <div class="input-group"> <input type="text" required class="form-control" name="search" placeholder="Search your favorite word......."> <div class="input-group-append"> <button class="btn btn-success" type="submit"> Search </button> </div> </div> </form> {% endblock %}
</pre>
<p>Recall in the <code>searchView()</code> function, we send a GET request to get the word input by our user from a form that bears the name <code>'search.'</code> Can you now see it in the form? </p>
<p>There will be a problem if you use it otherwise. Finally, add the following to the <code>search.html</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=""><!-- SEARCH.HTML -->
{% extends 'base.html' %}
{% block content %} <div> <h2 align="center"> {{ word | title }} </h2> <br> <p> <b>Meaning: </b>{{meaning}} </p> <br> <p> <b>Synonyms: </b> {{ synonyms }}
</p>
<br>
<p> <b>Antonyms: </b> {{ antonyms }} </p> <p><a href="{% url 'home' %}>Home</a></p> </div>
{% endblock %}</pre>
<p>We use Django templating language to render the results of the <code>searchView()</code> function to the HTML. Alright, we are done. Run the server once again and you should see something similar to the images below.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="708" height="398" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-401.png" alt="" class="wp-image-1250409" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-401.png 708w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 708px) 100vw, 708px" /></figure>
</div>
<p>That is the <code>index.html</code> web page. Once you search for a word, the <code>search.html</code> page is displayed as you can see below.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="708" height="398" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-402.png" alt="" class="wp-image-1250411" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-402.png 708w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 708px) 100vw, 708px" /></figure>
</div>
<p>Do you see how each of the pages inherits everything in the <code>base.html</code> file?</p>
<h2>Conclusion</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="626" height="939" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-403.png" alt="" class="wp-image-1250413" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-403.png 626w, https://blog.finxter.com/wp-content/uplo...00x300.png 200w" sizes="(max-width: 626px) 100vw, 626px" /></figure>
</div>
<p>We have successfully come to the end of this project. I strongly believe you have learned a lot of things you can apply to your projects. If certain things aren’t clear you may wish to read <a rel="noreferrer noopener" href="https://blog.finxter.com/how-i-created-an-url-shortener-app-using-django/" data-type="post" data-id="1196939" target="_blank">other project articles</a>. </p>
<p>The full code can be found on my GitHub page <a href="https://github.com/finxter/django_dictionary" data-type="URL" data-id="https://github.com/finxter/django_dictionary" target="_blank" rel="noreferrer noopener">https://github.com/finxter/django_dictionary</a>. Have a wonderful day.</p>
<p class="has-base-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-built-a-weather-app-using-three-python-frameworks/" data-type="post" data-id="1250320" target="_blank" rel="noreferrer noopener">How I Built a Weather App Using Three Python Frameworks</a></p>
</div>
https://www.sickgaming.net/blog/2023/03/...th-django/
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"1250398","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","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>As we all know, <a rel="noreferrer noopener" href="https://blog.finxter.com/django-developer-income-and-opportunity/" data-type="post" data-id="248182" target="_blank">Django</a> is a Python framework used for building complex web applications. Yet, it can also be used for building simple ones. In this tutorial, I’m going to show you <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4d6.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>how I built an English dictionary app</strong>, a simple Django project for beginners.</p>
<p>It takes time for a beginner to fully understand how Django works. But the key is consistency. If you keep building projects, you will gradually know enough to be dangerous with Django.</p>
<p class="has-base-background-color has-background"><strong><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f447.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Scroll to the end to see the full code on GitHub!</strong></p>
<h2>A Dictionary App? <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4d6.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /></h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="1022" height="681" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-408.png" alt="" class="wp-image-1250422" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-408.png 1022w, https://blog.finxter.com/wp-content/uplo...00x200.png 300w, https://blog.finxter.com/wp-content/uplo...68x512.png 768w" sizes="(max-width: 1022px) 100vw, 1022px" /></figure>
</div>
<p>A dictionary is an application used to get a particular word’s meaning. No matter how proficient we are in English, some words are far beyond our understanding. There are also words we may not know how to pronounce efficiently, especially those originating from a different language.</p>
<p>Furthermore, we may want to know a synonym or antonym of a given word. This is where a dictionary comes in handy. With a dictionary, we get to know not only the meaning of a word but how it is pronounced, what parts of speech it belongs to, and how it is used in a sentence. Students, no doubt, appreciate the importance of having a dictionary.</p>
<h2>How Will We Get The Data?</h2>
<p>How will we build this dictionary app so that when users search for a particular word, they get the meaning? </p>
<p>We have two options. Either we use <code>PyDictionary</code>, a Python module and an API that scrapes an online dictionary website or we perform the web scraping ourselves. None of these methods comes without a drawback.</p>
<p class="has-base-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/is-web-scraping-legal/" data-type="post" data-id="383048" target="_blank" rel="noreferrer noopener">Is Web Scraping Legal?</a></p>
<p>The drawback is the challenge that comes with web scraping. Many websites sometimes change their <a href="https://blog.finxter.com/generating-html-documents-in-python/" data-type="post" data-id="310531" target="_blank" rel="noreferrer noopener">HTML</a> structures to prevent people or bots from accessing their content. So, if an API is not actively maintained, it can quickly become useless. This is the case with <code>PyDictionary</code>. Therefore, we are going to perform web scraping.</p>
<p>Doing so will undoubtedly gain some valuable experience in web scraping, a very broad concept in Python programming. Still, we are at the mercy of website owners. They can change the HTML structures of their websites unexpectedly.</p>
<h2>Prerequisites</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="1022" height="682" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-407.png" alt="" class="wp-image-1250421" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-407.png 1022w, https://blog.finxter.com/wp-content/uplo...00x200.png 300w, https://blog.finxter.com/wp-content/uplo...68x513.png 768w" sizes="(max-width: 1022px) 100vw, 1022px" /></figure>
</div>
<p>This tutorial assumes you are familiar with Python, HTML, and Bootstrap. If not, please you are required to have at least a basic knowledge before attempting this project. Basic knowledge of Django, though not required, can speed up the learning process.</p>
<h2>Getting started</h2>
<p>Create a new folder for this project. Then you do the following:</p>
<ol>
<li>Create a virtual environment<br /><code>python3 -m venv .venv</code></li>
<li>Activate the virtual environment<br /><code>source .venv/bin/activate</code></li>
<li>Install the required libraries in the virtual environment<br /><code>pip install django tzdata requests bs4</code></li>
<li>Create a <code>requirements.txt</code> file to keep a record of the module versions.<br /><code>pip freeze > requirements.txt</code></li>
</ol>
<h2>Creating Django Project and Application</h2>
<p>i. Creating the project<br /><code>django-admin startproject project .</code><br />This creates a folder called <code>project</code> in the current directory.</p>
<p>ii. Creating the application<br /><code>python3 manage.py startapp dictionary</code><br />The <code>manage.py</code> file is an executable file used to run Django commands</p>
<p>iii. Applying migrations<br /><code>python3 manage.py migrate</code></p>
<p>iv. Checking to see if the installation was successful<br /><code>python3 mange.py runserver</code></p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="607" height="398" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-400.png" alt="" class="wp-image-1250400" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-400.png 607w, https://blog.finxter.com/wp-content/uplo...00x197.png 300w" sizes="(max-width: 607px) 100vw, 607px" /></figure>
</div>
<p>Once you see the above image, you are good to go.</p>
<h2>Registering the App</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="626" height="939" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-406.png" alt="" class="wp-image-1250419" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-406.png 626w, https://blog.finxter.com/wp-content/uplo...00x300.png 200w" sizes="(max-width: 626px) 100vw, 626px" /></figure>
</div>
<ol>
<li>In <code>settings.py</code> file<br />This step is important whenever an app is created. Navigate to the project folder. Open the <code>settings.py</code> file and scroll down to the <code>INSTALLED_APPS</code> section.</li>
</ol>
<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=""> # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # custom app 'dictionary', ]</pre>
<p>We have registered the app in the <code>settings.py</code> file. The <code>settings.py</code> file is used to configure the whole project.</p>
<ol start="2">
<li>In the <code>urls.py</code> file<br />Open the <code>urls.py</code> file in the project folder and add this:</li>
</ol>
<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=""> from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('dictionary.urls')), ]</pre>
<p>We have registered the app-level URL. Let’s now create it.</p>
<h2>Creating the App URL</h2>
<p>This will be done inside the dictionary folder. Create a <code>urls.py</code> file inside the folder and add this:</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="">from django.urls import path
from . import views urlpatterns = [ path('', views.homeView, name='home'), path('search', views.searchView, name='search'),
]
</pre>
<p>“<code>from . import views</code>” tells Django to import the <code>views.py</code> file residing in the dictionary folder. </p>
<p>The empty string indicates the home page URL which is <code>http://127.0.0.1:8000/</code> if you are using the local server. </p>
<p>This is where users will be directed when the web page is opened.</p>
<p>For the <code>'search'</code> string, the URL will be <code>http://127.0.0.1:8000/search</code>. We will be creating two functions in the <code>views.py</code> file as indicated.</p>
<p>Notice the <code>name</code> argument in the <code>path()</code> function, this is another way to refer to the URLs in the template files without using the exact URLs.</p>
<h2>Creating Views</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="1022" height="681" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-405.png" alt="" class="wp-image-1250417" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-405.png 1022w, https://blog.finxter.com/wp-content/uplo...00x200.png 300w, https://blog.finxter.com/wp-content/uplo...68x512.png 768w" sizes="(max-width: 1022px) 100vw, 1022px" /></figure>
</div>
<p>In this file, we are going to perform the web scraping we mentioned earlier. The first function, the <code>homeView()</code> is fairly simple. We just render the <code>index.html</code> page once the app is opened.</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="">from django.shortcuts import render
import requests
from bs4 import BeautifulSoup as bs # Create your views here. def homeView(request): return render(request, 'index.html')</pre>
<p>But the <code>searchView()</code> function is a little bit complex. We want to display three things when a user searches for the meaning of a word: meaning, synonyms, and antonyms. </p>
<p>So, we perform web scraping on two online dictionary websites. The first will display the meaning and the second will display the synonyms and antonyms.</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="">def searchView(request): word = request.GET['search'] response = requests.get(f'https://dictionary.com/browse/{word}') response2 = requests.get(f'https://thesaurus.com/browse/{word}') if response: soup_1 = bs(response.text, 'html.parser') meaning = soup_1.find_all('div', {'value': '1'}) meaning_1 = meaning[0].getText() else: word = f'Sorry, we couldn\'t find your word {word} in our records.' meaning = '' meaning_ = '' if response2: soup_2 = bs(response2.text, 'html.parser') synonyms = soup_2.find_all('a', {'class': 'css-1kg1yv8 eh475bn0'}) synonym_list = [] for i in range(len(synonyms)): synonym_list.append(synonyms[i].text.strip()) antonyms = soup_2.find_all('a', {'class': 'css-15bafsg eh475bn0'}) antonym_list = [] for i in range(len(antonyms)): antonym_list.append(antonyms[i].text.strip()) else: synonym_list = '' antonym_list = '' results = { 'word': word, 'meaning': meaning_1, 'synonyms': synonym_list, 'antonyms': antonym_list } return render(request, 'search.html', results)</pre>
<p>We import the <code>requests</code> module which uses the <code><a href="https://blog.finxter.com/python-requests-get-the-ultimate-guide/" data-type="post" data-id="37837" target="_blank" rel="noreferrer noopener">get()</a></code> method to scrape the contents of the two websites. </p>
<p class="has-base-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/python-requests-library-2/" data-type="post" data-id="37804" target="_blank" rel="noreferrer noopener">My First Python Get Request</a></p>
<p>The result is a cruel HTML code staring at you. <a href="https://blog.finxter.com/web-scraping-with-beautifulsoup-in-python/" data-type="post" data-id="17311" target="_blank" rel="noreferrer noopener">BeautifulSoup</a>, invaluable for web scraping does its job well to pull the data out of the HTML content. This now makes it possible to search the parsed data.</p>
<p>For our first search using the <code><a href="https://blog.finxter.com/how-to-access-the-first-second-or-n-th-child-div-element-in-beautifulsoup/" data-type="post" data-id="1230960" target="_blank" rel="noreferrer noopener">find_all()</a></code> method from <code>BeautifulSoup</code>, we want a text wrapped in a div tag with the value 1. This is where the website owners kept the meaning of a particular word on the <em><strong>dictionary.com</strong></em> website. </p>
<p>So, we use the <code>getText()</code> method to get the text.</p>
<p>The second and third searches look similar to the first but instead of a div, we search in a tag. The words were kept in a tag to make it easy for visitors to be redirected to that particular word if they want to find the definition.</p>
<p>Instead of searching for a value, we search for a CSS class. We then append the results to their respective variables. If you are new to web scraping, you may wonder how we know where those particular words reside.</p>
<p>The answer is found in a browser’s developer tools, preferably <strong>Chrome Developer Tools</strong>. This is the reason I suggest familiarizing yourself with HTML before attempting this project.</p>
<p>Finally, we render the results on the <code>search.html</code> page. Notice the <code>else</code> statements. This is run if the word is not found on the website. Let’s now create the HTML files.</p>
<h2>Creating Templates</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="1022" height="826" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-404.png" alt="" class="wp-image-1250416" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-404.png 1022w, https://blog.finxter.com/wp-content/uplo...00x242.png 300w, https://blog.finxter.com/wp-content/uplo...68x621.png 768w" sizes="(max-width: 1022px) 100vw, 1022px" /></figure>
</div>
<p>Create a folder named <code>templates</code> in the current directory (not in the project or app folder). Then go to the <code>settings.py</code> file to let Django know of this development. In the file, import the <code>os</code> module. Then scroll to the TEMPLATES section and add this:</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>Then create three files in the <code>templates</code> folder: </p>
<ul>
<li><code>base.html</code>, </li>
<li><code>index.html</code>, and </li>
<li><code>search.html</code>. </li>
</ul>
<p>The main HTML files will inherit from the <code>base.html</code> file. Open the <code>base.html</code> file and add the following:</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=""><!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dictionary App</title> <!-- CSS only --> <!-- we are getting bootstrap5 from the CDN --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head> <body> <div class="container mt-4"> <div class="row"> <div class="mt-4 p-5 bg-success text-white rounded mb-3"> <h1>Django English Dictionary</h1> </div> <div class="col-md-12"> {% block content %} <!-- here we will inject the content of every page that inherits from the base page --> {% endblock %} </div> </div> </div>
</body> </html></pre>
<p>Then, in the <code>index.html</code> add the following:</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=""><!-- the index page is inheriting from the base page -->
<!-- the extends tags are used for inheriting from the base page -->
{% extends 'base.html' %} <!-- the block content tags for containing content of the page -->
{% block content %} <form action="search"> <div class="input-group"> <input type="text" required class="form-control" name="search" placeholder="Search your favorite word......."> <div class="input-group-append"> <button class="btn btn-success" type="submit"> Search </button> </div> </div> </form> {% endblock %}
</pre>
<p>Recall in the <code>searchView()</code> function, we send a GET request to get the word input by our user from a form that bears the name <code>'search.'</code> Can you now see it in the form? </p>
<p>There will be a problem if you use it otherwise. Finally, add the following to the <code>search.html</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=""><!-- SEARCH.HTML -->
{% extends 'base.html' %}
{% block content %} <div> <h2 align="center"> {{ word | title }} </h2> <br> <p> <b>Meaning: </b>{{meaning}} </p> <br> <p> <b>Synonyms: </b> {{ synonyms }}
</p>
<br>
<p> <b>Antonyms: </b> {{ antonyms }} </p> <p><a href="{% url 'home' %}>Home</a></p> </div>
{% endblock %}</pre>
<p>We use Django templating language to render the results of the <code>searchView()</code> function to the HTML. Alright, we are done. Run the server once again and you should see something similar to the images below.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="708" height="398" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-401.png" alt="" class="wp-image-1250409" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-401.png 708w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 708px) 100vw, 708px" /></figure>
</div>
<p>That is the <code>index.html</code> web page. Once you search for a word, the <code>search.html</code> page is displayed as you can see below.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="708" height="398" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-402.png" alt="" class="wp-image-1250411" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-402.png 708w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 708px) 100vw, 708px" /></figure>
</div>
<p>Do you see how each of the pages inherits everything in the <code>base.html</code> file?</p>
<h2>Conclusion</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="626" height="939" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-403.png" alt="" class="wp-image-1250413" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-403.png 626w, https://blog.finxter.com/wp-content/uplo...00x300.png 200w" sizes="(max-width: 626px) 100vw, 626px" /></figure>
</div>
<p>We have successfully come to the end of this project. I strongly believe you have learned a lot of things you can apply to your projects. If certain things aren’t clear you may wish to read <a rel="noreferrer noopener" href="https://blog.finxter.com/how-i-created-an-url-shortener-app-using-django/" data-type="post" data-id="1196939" target="_blank">other project articles</a>. </p>
<p>The full code can be found on my GitHub page <a href="https://github.com/finxter/django_dictionary" data-type="URL" data-id="https://github.com/finxter/django_dictionary" target="_blank" rel="noreferrer noopener">https://github.com/finxter/django_dictionary</a>. Have a wonderful day.</p>
<p class="has-base-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-built-a-weather-app-using-three-python-frameworks/" data-type="post" data-id="1250320" target="_blank" rel="noreferrer noopener">How I Built a Weather App Using Three Python Frameworks</a></p>
</div>
https://www.sickgaming.net/blog/2023/03/...th-django/