{"id":132751,"date":"2023-03-28T19:03:57","date_gmt":"2023-03-28T19:03:57","guid":{"rendered":"https:\/\/blog.finxter.com\/?p=1250398"},"modified":"2023-03-28T19:03:57","modified_gmt":"2023-03-28T19:03:57","slug":"how-i-built-an-english-dictionary-app-with-django","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2023\/03\/28\/how-i-built-an-english-dictionary-app-with-django\/","title":{"rendered":"How I Built an English Dictionary App with Django"},"content":{"rendered":"\n
\n
\n
\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n
\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n
\n
<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n
5\/5 – (1 vote) <\/div>\n<\/p><\/div>\n

As we all know, 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 \"\ud83d\udcd6\" how I built an English dictionary app<\/strong>, a simple Django project for beginners.<\/p>\n

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>\n

\"\ud83d\udc47\" Scroll to the end to see the full code on GitHub!<\/strong><\/p>\n

A Dictionary App? \"\ud83d\udcd6\"<\/h2>\n
\n
\"\"<\/figure>\n<\/div>\n

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>\n

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>\n

How Will We Get The Data?<\/h2>\n

How will we build this dictionary app so that when users search for a particular word, they get the meaning? <\/p>\n

We have two options. Either we use 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>\n

\"\ud83d\udca1\" Recommended<\/strong>: Is Web Scraping Legal?<\/a><\/p>\n

The drawback is the challenge that comes with web scraping. Many websites sometimes change their 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 PyDictionary<\/code>. Therefore, we are going to perform web scraping.<\/p>\n

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>\n

Prerequisites<\/h2>\n
\n
\"\"<\/figure>\n<\/div>\n

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>\n

Getting started<\/h2>\n

Create a new folder for this project. Then you do the following:<\/p>\n

    \n
  1. Create a virtual environment
    python3 -m venv .venv<\/code><\/li>\n
  2. Activate the virtual environment
    source .venv\/bin\/activate<\/code><\/li>\n
  3. Install the required libraries in the virtual environment
    pip install django tzdata requests bs4<\/code><\/li>\n
  4. Create a requirements.txt<\/code> file to keep a record of the module versions.
    pip freeze > requirements.txt<\/code><\/li>\n<\/ol>\n

    Creating Django Project and Application<\/h2>\n

    i. Creating the project
    django-admin startproject project .<\/code>
    This creates a folder called project<\/code> in the current directory.<\/p>\n

    ii. Creating the application
    python3 manage.py startapp dictionary<\/code>
    The manage.py<\/code> file is an executable file used to run Django commands<\/p>\n

    iii. Applying migrations
    python3 manage.py migrate<\/code><\/p>\n

    iv. Checking to see if the installation was successful
    python3 mange.py runserver<\/code><\/p>\n

    \n
    \"\"<\/figure>\n<\/div>\n

    Once you see the above image, you are good to go.<\/p>\n

    Registering the App<\/h2>\n
    \n
    \"\"<\/figure>\n<\/div>\n
      \n
    1. In settings.py<\/code> file
      This step is important whenever an app is created. Navigate to the project folder. Open the settings.py<\/code> file and scroll down to the INSTALLED_APPS<\/code> section.<\/li>\n<\/ol>\n
       # 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>\n
      We have registered the app in the settings.py<\/code> file. The settings.py<\/code> file is used to configure the whole project.<\/p>\n
        \n
      1. In the urls.py<\/code> file
        Open the urls.py<\/code> file in the project folder and add this:<\/li>\n<\/ol>\n
         from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin\/', admin.site.urls), path('', include('dictionary.urls')), ]<\/pre>\n
        We have registered the app-level URL. Let’s now create it.<\/p>\n
        Creating the App URL<\/h2>\n
        This will be done inside the dictionary folder. Create a urls.py<\/code> file inside the folder and add this:<\/p>\n
        from django.urls import path\nfrom . import views urlpatterns = [ path('', views.homeView, name='home'), path('search', views.searchView, name='search'),\n]\n<\/pre>\n
        “from . import views<\/code>” tells Django to import the views.py<\/code> file residing in the dictionary folder. <\/p>\n
        The empty string indicates the home page URL which is http:\/\/127.0.0.1:8000\/<\/code> if you are using the local server. <\/p>\n
        This is where users will be directed when the web page is opened.<\/p>\n
        For the 'search'<\/code> string, the URL will be http:\/\/127.0.0.1:8000\/search<\/code>. We will be creating two functions in the views.py<\/code> file as indicated.<\/p>\n
        Notice the name<\/code> argument in the path()<\/code> function, this is another way to refer to the URLs in the template files without using the exact URLs.<\/p>\n
        Creating Views<\/h2>\n
        \n
        \"\"<\/figure>\n<\/div>\n
        In this file, we are going to perform the web scraping we mentioned earlier. The first function, the homeView()<\/code> is fairly simple. We just render the index.html<\/code> page once the app is opened.<\/p>\n
        from django.shortcuts import render\nimport requests\nfrom bs4 import BeautifulSoup as bs # Create your views here. def homeView(request): return render(request, 'index.html')<\/pre>\n
        But the 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>\n
        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>\n
        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>\n
        We import the requests<\/code> module which uses the get()<\/a><\/code> method to scrape the contents of the two websites. <\/p>\n
        \"\ud83d\udca1\" Recommended<\/strong>: My First Python Get Request<\/a><\/p>\n
        The result is a cruel HTML code staring at you. 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>\n
        For our first search using the find_all()<\/a><\/code> method from 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 dictionary.com<\/strong><\/em> website. <\/p>\n
        So, we use the getText()<\/code> method to get the text.<\/p>\n
        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>\n
        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>\n
        The answer is found in a browser’s developer tools, preferably Chrome Developer Tools<\/strong>. This is the reason I suggest familiarizing yourself with HTML before attempting this project.<\/p>\n
        Finally, we render the results on the search.html<\/code> page. Notice the else<\/code> statements. This is run if the word is not found on the website. Let’s now create the HTML files.<\/p>\n
        Creating Templates<\/h2>\n
        \n
        \"\"<\/figure>\n<\/div>\n
        Create a folder named templates<\/code> in the current directory (not in the project or app folder). Then go to the settings.py<\/code> file to let Django know of this development. In the file, import the os<\/code> module. Then scroll to the TEMPLATES section and add this:<\/p>\n
        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', ], }, },\n]<\/pre>\n
        Then create three files in the templates<\/code> folder: <\/p>\n