DEV Community: Praveen Bisht

CRUD Operations In Python & Django - Part 2

Praveen Bisht — Thu, 25 Jul 2024 05:13:58 +0000

In our previous article, we covered the basics of setting up a Django project and created our Exercise model, which we displayed on the front end as a list. In this article, we’ll dive into performing CRUD operations. For those unfamiliar, CRUD stands for Create, Read, Update, and Delete—essentially the four fundamental actions you can perform on your data.

Now that we have our API set up in the app folder, we’ll simply extend the index view to handle create, update, and delete requests.

The Form

Let’s set up a form that allows users to create exercises. We’ll be using HTML templates for this purpose once again. To get started, create a new template called add_exercise.html in the app/templates folder.

<form method="POST" action="/">
    {% csrf_token %}
    <input type="text" name="title" placeholder="Enter the title" />
    <input type="date" name="date"  placeholder="Enter the date" />
    <button type="submit">Save</button>
</form>

Next, in our index.html template, we’ll include the add_exercise.html template using the following method:

{% extends "base.html" %} {% block content %}
    <h2>Exercises</h2>
    {% include 'add_exercise.html' %}
...
{% endblock %}

We’re utilizing the include tag here, which promotes composability across HTML templates, making our code easier to maintain and understand. If you refresh the page in your browser, you should see the form appear on the screen.

In our HTML, we're using the <form> tag with the method attribute set to POST and the action attribute pointing to /, which is the same endpoint we use to fetch the list of exercises.

In this context, the csrf_token is a security feature represented by a randomly generated secret value. It helps protect our form submissions from forgery attacks, which is what CSRF stands for—Cross-Site Request Forgery. A unique token is generated for each user session, and it is not accessible by third-party sites, thereby preventing unauthorised changes from occurring.

Our form includes two input fields: one for the title and another for the date, following the schema of our Exercise model. When the form is submitted, the values for title and date will be sent via a POST request to the / endpoint, which will then be processed by our index view in app/views.py.

The Model

In Django, we can enhance our Exercise model—essentially a Python class—by adding specific methods that correspond to CRUD operations. In the app/models.py file, we’ll include the following:

class Exercise(models.Model):
    ...

    def create(request):
        title = request.POST.get('title')
        date = request.POST.get('date')

        exercise = Exercise.objects.create(title=title, date=date)

        return exercise

We can access title and date from the POST request, as shown in the code above. Then, we can utilize Django's built-in ORM to create a new exercise and return the created instance.

We'll leverage the same index view we use to retrieve exercises, expanding it to check if the request method is POST. If so, we'll pass the request object to the class method we previously defined. Once the exercise is created, we'll redirect the user back to the homepage or perform a page refresh, ensuring the newly added exercise appears on the screen.

from django.http import HttpResponseRedirect

from app import models

...

def index(request):
    if request.method == 'POST':
        models.Exercise.create(request)
        return redirect('/')

    exercises = (
        models.Exercise.objects.all().order_by("created_at")
    )
    return render(request, "index.html", context={'exercises': exercises})

Try creating a new exercise now, and you should see it appear at the bottom of the list.

Update Exercise

Let's refactor our code a bit before adding update functionality to the exercises. We'll move the exercises to their own template called exercise.html.

<h2>Exercises</h2>
{% include 'add_exercise.html' %}
<ul style="margin: 0; list-style: none; padding: 0">
    {% for exercise in exercises %}
        <li style="margin-top: 4px">
            {% include 'exercise.html' %}
        </li>
    {% endfor %}
</ul>

Create a template for exercise.html in the app/templates folder, and we’ll add the following HTML to it:

<form method="POST" action="/">
    {% csrf_token %}
    <input hidden name="id" value="{{exercise.id}}" />
    <input
        type="text"
        name="title"
        value="{{exercise.title}}"
        placeholder="Enter the title"
    />
    <input
        type="date"
        name="date"
        placeholder="Enter the date"
        value="{{exercise.date | date:'Y-m-d'}}"
    />
    <button type="submit" name="update">Update</button>
</form>

We’re using the <form> tag again for each exercise in the list and adding a hidden input for exercise.id, which will be used to update the exercise. Go back to the browser and refresh the page; you should see a form for each exercise in the list, with each input pre-filled with the corresponding exercise data.

Notice that we’re not using PUT as the form method; instead, we’re using POST. This is because the view handlers can only parse data sent through GET and POST requests, with no built-in support for PUT and DELETE. When we created the create class method in the Exercise class, you might have noticed we used request.POST.get('title'). While this works for POST requests, there are no PUT or DELETE methods available in the request object.

But how do we differentiate between a POST and a PUT request? If you check the form we created earlier, you’ll notice that we assigned a name attribute to the submit button. We can access this attribute in the same way we accessed title and date, using request.POST.get('update').

Let's update the create exercise form to include the same change.

<form method="POST" action="/">
    ...
    <button type="submit" name="create">Save</button>
</form>

And in our exercises view, we’ll make the following changes to differentiate between requests.

def index(request):
    if request.method == 'POST':
        create = 'create' in request.POST
        update = 'update' in request.POST

        if create == True:
            models.Exercise.create(request)
        elif update == True:
            models.Exercise.update(request)

        return redirect('/')

    exercises = (
        models.Exercise.objects.all().order_by("created_at")
    )
    return render(request, "index.html", context={'exercises': exercises})

We check for the button name and forward the request to the appropriate Exercise method accordingly.

Let's add an update class method to the Exercise model in app/models.py.

def update(request):
    id = request.POST.get('id')
    title = request.POST.get('title')
    date = request.POST.get('date')

    exercise = Exercise.objects.filter(pk=id).update(title=title, date=date)

    return exercise

To update a row in the database, we can use the update method available on the Exercise model. However, before updating, we need to ensure that we are updating the correct exercise. To do this, we filter the exercises by the primary key, which is id, and update only that specific exercise.

Delete Exercise

Similarly, we’ll add a delete button next to each exercise in the exercise.html template.

<form method="POST" action="/">
    ...
    <button type="submit" name="update">Update</button>
    <button type="submit" name="delete">Delete</button>
</form>

We’ll set delete as the value of the name attribute, and in views.py, we’ll extend the if...elif statements to handle the delete operation.

def index(request):
    if request.method == 'POST':
        create = 'create' in request.POST
        update = 'update' in request.POST
        delete = 'delete' in request.POST

        if create == True:
            models.Exercise.create(request)
        elif update == True:
            models.Exercise.update(request)
        elif delete == True:
            models.Exercise.delete(request)

        return redirect('/')

    exercises = (
        models.Exercise.objects.all().order_by("created_at")
    )
    return render(request, "index.html", context={'exercises': exercises})

And in the Exercise model, we'll add the class method delete.

def delete(request):
    id = request.POST.get('id')
    is_deleted = Exercise.objects.filter(pk=id).delete()

    if is_deleted == 1:
        return True

    return False

With this addition, we've successfully implemented CRUD operations in our Python and Django application.

Key Takeaways

Django view handlers do not support PUT and DELETE requests, as they do not parse the query parameters or request body for those HTTP methods. As a result, we must rely on POST requests and differentiate between them by passing an additional field in the request body.
Noticed that I'm making the POST request to the same route from which I'm fetching the exercises. This is important because if you were to create an endpoint like /api/exercises to handle requests, you would need to manage redirection manually. Otherwise, the behavior of the <form> tag after the request is to redirect the user to the endpoint specified in the action attribute. Therefore, you will need to manually redirect the user back to the desired page, or in our case, keep the user on the same page.

from django.http import HttpResponseRedirect

def index(request):
    ...

    return redirect('/')
    # or
    return HttpResponseRedirect(request.META['HTTP_REFERER'])

In summary, by effectively managing our POST requests and ensuring proper redirection, we can create a seamless user experience while implementing CRUD operations in our Django application.

Building a full-stack app with Python & Django

Praveen Bisht — Sat, 20 Jul 2024 05:57:46 +0000

After years of working in the JavaScript ecosystem, I got an itch of trying something new. I set a new goal for myself to build a web app using a different language. Since, I already had an understanding of Python, I decided to go with the language, hoping to repeat the process of trying my hands on different languages in future.

Initially the plan was to raw dog it using FastAPI for routing, Jinja for html templates, Postgres for database but decided to prioritise familiarity in Python web development first and chose Django instead.

So here's a beginner level guide on how I went about it.

Project Setup

mkdir python-app && cd python-app

To ensure a consistent development environment and manage project dependencies, we'll leverage pipenv, a Python virtual environment tool. If you don't have pipenv installed, refer to the installation instructions here

Let's create our Python environment using pipenv with the following command:

pipenv install

Running this command will generate two files, Pipfile and Pipfile.lock, similar to how a Node.js project uses package.json and package-lock.json. These files manage project dependencies and ensure everyone uses the exact same package versions, preventing unexpected behavior from mismatched dependencies.

Now that our environment is created, let's activate it. This ensures that any commands you run use the specific dependencies listed in our Pipfile instead of relying on globally installed packages.

pipenv shell

You shall see following output:

. /Users/prvnbist/.local/share/virtualenvs/tutorial-WmUVFWeu/bin/activate

Installing django

Django is a high-level Python web framework famous for its "batteries-included" approach, offering features like user authentication and admin panels to jumpstart development.

We can use pipenv to manage packages in our project.

pipenv install django

Django provides handy built-in commands to streamline project setup. Let's use one of them to create a project.

django-admin startproject project .

The command generated following files at the root of the project.

manage.py (Django's command-line utility for administrative tasks)
web
    __init__.py (An empty file that tells Python that this directory should be considered a Python package)
    asgi.py (An entry-point for ASGI-compatible web servers to serve your project)
    settings.py (Settings/configuration for this Django project)
    urls.py (The URL declarations for this Django project)
    wsgi.py (An entry-point for WSGI-compatible web servers to serve your projec)

To launch the development server and access your project in a web browser, run the following command:

python manage.py runserver

The following information will be displayed in the command prompt:

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
July 19, 2024 - 08:26:41
Django version 5.0.7, using settings 'project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Open http://127.0.0.1:8000 in your browser to view the default Django welcome page. This is the starting point for your web application.

App Setup

Each django project can house multiple apps, essentially functioning as mini web applications (think websites, blogs, etc.). To craft a new app within our project, let's utilize the following command:

python manage.py app

Taking a peek at the project structure now, you'll find:

app
    migrations/
        __init__.py
    __init__.py
    admin.py
    apps.py
    models.py
    tests.py
    views.py

To integrate our newly created app with the project, we need to tell Django about it. Open the project/settings.py file and locate the INSTALLED_APPS setting. This is a list that defines all the apps recognized by your Django project. Add the name of your app (which should match the app folder name) to the end of this list.

INSTALLED_APPS = [
    ...,
    'app'
]

VS Code Setup (Optional)

While manually activating the environment and running the server works, VS Code offers a smoother experience. Setting up a launch configuration automates these steps. With a click from the Run and Debug panel or simply pressing F5, your environment will activate, and the server will start, streamlining your development workflow.

To automate environment activation and server startup, let's leverage VS Code's launch configurations. Open the Command Palette (Cmd/Ctrl + Shift + P) and search for "Python: Select Interpreter". Choose the recommended option from the list that'll open another panel from where select django and it'll create the launch.json for you.

In case, the file is not created, copy the following snippet and create the .vscode/launch.json file at the root of your project.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python Debugger: Django",
            "type": "debugpy",
            "request": "launch",
            "args": ["runserver" ],
            "django": true,
            "autoStartBrowser": false,
            "program": "${workspaceFolder}/manage.py"
        }
    ]
}

Go to the Run and Debug Panel or press Ctrl/CMD + Shift + D and run the python debugger and or just press F5 and you should see the terminal opening and running the development server.

Creating views

In web development, a view often acts like a traffic controller. It handles incoming requests for specific URLs (routes) and determines how to respond. Let's create a view handler within our app/views.py file. This code will define how the application responds to a particular URL:

from django.http import HttpResponse

def index(request):
    return HttpResponse('Hello World')

Next, we need to connect it to a specific URL in the browser. This mapping is done in a file called app/urls.py (which we'll create since Django doesn't include it by default). Essentially, we're telling Django: "when someone visits the homepage URL (/), use this view handler to determine the response."

from django.urls import path

from . import views

urlpatterns = [
    path("", views.index, name="index"),
]

Now let's move in to our project and map the urls there as well in project/urls.py file.

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

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

The development server should have automatically restarted. Head over to your browser and visit http://127.0.0.1:8000. You should be greeted by the message: "Hello World!"

Creating templates

Django provides a robust templating system for crafting the user interface. This separates the presentation layer (HTML) from the application logic (Python code). Let's create a dedicated folder named templates within your app directory. Inside this folder, create an index.html file. This file will house the HTML structure that users will interact with.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Python App</title>
    </head>
    <body>Hello World</body>
</html>

Now, let's revisit our view function in app/views.py. Here, we'll leverage Django's templating system to return the index.html template we just created. By returning this template, the view essentially instructs Django on which HTML content to display in the user's browser for the homepage (/).

from django.shortcuts import render

def index(request):
    return render(request, "index.html")

Head back to the browser and hit the page refresh, you should now see your template rendering on the homepage.

As your application grows, you'll likely have multiple routes with unique templates. To maintain consistency and avoid code duplication, Django offers a way to define base templates. Let's create a base.html file within your app/templates folder. This base template will act as a foundation, containing the common layout elements that will be shared across various pages in your application.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Python App</title>
    </head>
    <body>
        <h1>Python App</h1>
        {% block content %} {% endblock %}
    </body>
</html>

The block tag in base.html defines a reusable section of the template. This section can be overridden (replaced) with custom content in child templates, like index.html. Think of it as a placeholder that child templates can fill with their unique content, while still inheriting the overall layout from the base template.

{% extends "base.html" %}
{% block content %}
    <h2>Homepage</h2>
{% endblock %}

Base templates (e.g., base.html) define reusable layouts with block sections for customization. Child templates (e.g., index.html) use extends to inherit the base layout and override specific blocks with unique content.

Save the changes and refresh the browser, and you should now see the <h1>(Python App) tag followed by the <h2>(Homepage) tag within the inherited layout!

Creating models

In Django, models act as blueprints for your data. Each model maps to a database table, defining the structure and organization of your information. Let's create these models within the app/models.py file of our application.

from django.db import models
from django.utils import timezone

class Exercise(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    title = models.TextField(null=False, blank=False)
    date = models.DateField(null=False, blank=False)
    created_at = models.DateTimeField(default=timezone.now)

Think of each Django model as a Python class representing a real-world entity (like a blog post or a product). Within this class, you define fields that map to database table columns. For example, an id field might be an auto-incrementing integer or a uuid, while a title field could be a string with a maximum length. These fields essentially determine the data you can store for each instance of your model.

Our Exercise model inherits from Django's built-in models.Model class, providing a foundation for all database-backed models in your application. Each field within the model definition corresponds to a column in the database table. For instance, we've created an id field of type UUIDField. This leverages Django's database field types to ensure the id column stores Universally Unique Identifiers (UUIDs). These randomly generated IDs guarantee uniqueness across your database.

pipenv install uuid

As our next step, we'll register our model in the app/admin.py file.

from django.contrib import admin
from app import models

admin.site.register(models.Exercise)

Let's head over to the admin panel that comes pre-configured with django framework on the /admin path but before we do that we've to perform migrations otherwise you'll see the following error.

To access the admin panel, we need to address a common step: running migrations. Migrations synchronize your models with the database, ensuring everything is set up correctly. Let's run the necessary commands to fix this.

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

Running migrations

Django migrations are like automatic updates for your database. Whenever you modify your models (adding fields, changing data types), migrations ensure the database reflects those changes. While Django creates migrations for you, it's important to know when to run them to keep everything in sync.

python manage.py migrate

Now if you try to access /admin, you should be able to see a login screen but how do we login?

To grant access to Django's admin panel, we'll need to create a superuser account. A superuser has full administrative privileges. We can achieve this using the following command.

python manage.py createsuperuser

Head back to the admin panel (http://127.0.0.1:8000/admin) and log in with your superuser credentials. Remember to restart the development server (Ctrl/Cmd + C followed by the server start command) for the changes, including migrations, to take effect.

After login, you'll be redirected to this page.

Our Exercise model isn't quite ready for the admin panel yet. Django needs to apply migrations to synchronize your models with the database. Let's run the necessary commands to create and apply these migrations, ensuring the Exercise model is properly reflected in the admin panel.

python manage.py makemigrations

Running the command will generate a migration file within your application's migrations folder. This file acts as a blueprint for applying the model changes to your database. Let's proceed with running the migrations to bring everything in sync.

python manage.py migrate

Refresh the admin panel (http://127.0.0.1:8000/admin) and navigate to the Exercises model. With migrations applied, you should now see a functional interface for managing your exercise data!

Now that the Exercises model is set up in the admin panel, feel free to add a few sample exercises! In the next steps, we'll connect to the database and dynamically display these exercises within our web templates, bringing your Django application to life!

Render exercises on the home page

To display our exercises in the template, let's modify the index handler within app/views.py. We'll introduce code to retrieve exercise data from the database.

from django.shortcuts import render

from app import models

def index(request):
    exercises = (
        models.Exercise.objects.all().order_by("created_at")
    )
    return render(request, "index.html", context={'exercises': exercises})

Django provides a fantastic tool called an Object-Relational Mapper (ORM). Think of it as a translator between the world of Python objects (like our Exercise model) and the relational database. This ORM allows us to interact with the database using familiar Python code.

In the updated index handler, we're leveraging the ORM by calling the Exercise model directly. This fetches all exercise objects from the database and conveniently orders them by their creation date (created_at) using Django's built-in functionality.

Now that we have the exercises retrieved from the database, let's pass them along to our index.html template. We'll use context parameter to achieve this. context is essentially a dictionary that allows us to send data from our Python code (views) to our HTML templates. In this case, we'll include the exercises list as part of the context, making it accessible within the template.

{% extends "base.html" %} {% block content %}
    <h2>Exercises</h2>
    <ul>
        {% for exercise in exercises %}
            <li>{{exercise.title}}</li>
        {% endfor %}
    </ul>
{% endblock %}

With the index view handler updated to fetch exercises and the context passing data to the template, save your changes. Refresh the browser, and voila! You should now see your exercises displayed on the homepage!

Congratulations! We've successfully built and launched a foundational Django application. This includes route handlers for defining application logic, templates for crafting the user interface, models for structuring your data, and database integration for persistent storage.

Getting started with Hasura

Praveen Bisht — Mon, 27 Apr 2020 14:11:09 +0000

Introduction

Image Source

Hasura is an open source engine that connects to your databases & microservices and auto-generates a production-ready GraphQL backend.

Hasura maps your Postgres schema in to GraphQL and generates queries, mutations and subscriptions for you. Along with that they also provide different types of query filters like where, order_by, limit, offset and more to help you build complex features on your front end like filtering, sorting, pagination and more.

Deployment

Hasura provides multiple ways to deploy Hasura Engine:

With Docker, you can pretty much deploy the engine on any services that allows you to use docker.

Deploying wih Heroku

To deploy Hasura with Heroku, head over to the this documentation. Tap that Deploy to Heroku button and you'll be redirected to Heroku to deploy your app.

Give your app a name and select the region you want to deploy to and then click on Deploy App button and wait for Heroku to deploy your app.

After it's deployed, you can click on View App button and you'll be taken to Hasura console. Hasura console has 4 tabs and if you're using the latest beta version then you'll have one more tab called Actions

GraphiQL: This tab gives you access to graphiql playground to explore queries, mutations and subscriptions.
Data: From this tab you can manage your SQL tables and create different schemas to host your related tables.
Remote Schema: So this is where microservices comes in. Using remote schemas you add services to your app. Now these services has to written in GraphQL as well. This functionality is similar to Schema Stiching or Schema Federation introduced by Apollo that let's you divide your backend into multiple services.
Events: Events comes in when you want to execute custom logic based on event triggers such on creating, updating or deleting a row in a table.
Actions: Currently in beta, actions can be added to existing Hasura's schema to extend it to add business logic into your queries and doing things like data validation and even authentication/authorization.

Adding Schema

A bit of knowledge of SQL tables might come handy but there's also a GUI way of managing tables which can also be used instead of writing SQL code in their SQL Editor. Let's start with creating a table.

Creating Tables

In Data tab, click on the Create Table button and you'll be taken to table creation form. We'll be taking an example of expenses management app for our demo.

Let's add expenses as our table name and we'll be creating following fields.

id: Of type UUID and set to unique with default value set to gen_random_uuid().
title: Of type Text.
category: Of type Text as well.
date: Of type timestamp without time zone
amount: Of type double precision
payment_method: Of type Text and set to nullable.

Your form should look like this now.

Now hit Add Table button in the bottom of the form to add the table. Now if you go to the GraphiQL tab you'll see that Hasura has generated queries for you which you can start exploring.

Hasura generates following queries, mutations and subscriptions for you.

Queries
- expenses
- expenses_by_pk
- expenses_aggregate
Mutations
- insert_expenses
- delete_expenses
- update_expenses
Subscriptions
- expenses
- expenses_by_pk
- expenses_aggregate

Here expenses_by_pk is for fetching expense by the primary key. The name of the queries are also generated based on table name, which can be changed from:

Data > Select Table > Modify > Custom GraphQL Root Fields.

After modifying, just save the changes and Hasura will update the query names for you.

Writing Queries

Hasura GraphQL engine auto-generates queries as part of the GraphQL schema from your Postgres schema model. It generates a range of possible queries and operators that also work with relationships defined in your SQL schema.

query MyQuery {
   expenses {
      id
      date
      title
      amount
      category
      payment_method
   }
}

You can add fields to your query as you would do with GraphQL. What Hasura gives you extra is different types of clauses to make your life easier and get built in filtering, sorting, searching functionality right away.

distinct_on: Use when you need to fetch an object with unique value that no other object shares.
limit: Used to limit the number of rows/objects you get in response.
offset: Best used with limit to do pagination.
order_by: Use to order query response in a sequence. Multiple fields can be used along with asc or desc sequence.
where: Use when needed to find an rows/objects based on a comparison done of different fields. Hasura is smart enough to show the appropriate filters according to the type of the field.

Writing Mutations

For each table you get three mutations:

create
update
delete

Each mutations gives you access to batch operations. So to add a single row/object, you can use following mutation.

mutation MyMutation {
   create_expenses(
      objects: {
         date: ""
         title: ""
         amount: ""
         category: ""
         payment_method: ""
      }
   ) {
      returning {
         id
         date
         title
         amount
         category
         payment_method
      }
   }
}

To add multiple rows/objects at once, just pass an array of objects instead of just one object.

mutation MyMutation {
   create_expenses(
      objects: [
         {
            amount: "487"
            title: "Groceries"
            payment_method: "Card"
            category: "Food & Drinks"
            date: "2017-11-17T18:30:00"
         }
         {
            amount: "5400"
            title: "Table"
            payment_method: "Card"
            category: "Furniture"
            date: "2017-11-16T18:30:00"
         }
      ]
   ) {
      returning {
         id
         date
         title
         amount
         category
         payment_method
      }
   }
}

Writing Subscriptions

Subscriptions are identical to queries in a way they're written, except for the keyword query, use subscription.

subscription MyQuery {
   expenses {
      id
      date
      title
      amount
      category
      payment_method
   }
}

Conclusion

I've been using Hasura at work for couple of weeks now. Hasura helped us to build a feature rich apps with little to no backend codebase. Hence decided to share what I've learned in past weeks. I also built an expenses app during last week which can be found on my Github.

I will be writing more articles on integrating Hasura with our front-end, so stay tuned. You can follow me on my Twitter or my Instagram to stay updated with the progress.

File based operations using NodeJS

Praveen Bisht — Wed, 15 Jan 2020 03:58:09 +0000

Ever since NodeJS' inception, we've been able to execute JavaScript code outside of the browser. But NodeJS did a lot more than just that, it opened up a way to write server side code with JavaScript itself and along with it came the ability to manipulate host system's file system.

Photo by Maksym Kaharlytskyi on Unsplash

NodeJs introduced the fs module that allows you to do synchronous or asynchronous I/O operations and it's available out of the box.

Getting Started

Make sure you've the node installed in your system, if not you can head over to Node's official site and download it from there. Now with that installed we're up and ready to do some file based operations.

To use the fs, we can use the code below. If you're using commonjs use this line of code.

const fs = require('fs')

If you're using ES, you can import it like this.

import fs from 'fs'

Now each of the operations we'll be learning have both synchronous and asynchronous methods. All the synchronous methods have Sync as a suffix. All the asynchronous methods takes a callback as it's last argument which gives us an error as first argument and data as second argument containing the result that some of the operation's return. With that being said and done, let's do some operations.

CRUD operations

Using the fs module, we can implement following operations -

Create
Read
Update
Rename
Delete

Create File

In order to create a new file, we can use fs.writeFile or fs.writeFileSync.

Synchronous Method

This method takes three arguments:

file - path of the file, where it would be stored
data - content to store inside the file, can be string or buffer.
options - an object containing key-values for configuration for ex. encoding

The return value for this method is undefined.

fs.writeFileSync('./example.txt', 'exampel content')

By default the encoding for data of string type would be utf8 and if different encoding is required, pass it using the third argument named options.

Asynchronous Method

This method takes all the arguments same as the synchronous method except it let's you pass a callback.

fs.writeFile('./example.txt', 'exampel content', (error) => {
   if(error) console.log(error);
   console.log('The file has been saved!')
})

Read File

Now if we want to read the content of the file example.txt that we just created. We can use either fs.readFile or fs.readFileSync.

Synchronous Method

This method takes just one argument i.e path of the file where it's stored and returns the contents stored in that file. The content could be either of type string or buffer. With buffer type, simply convert it to string using toString() method.

const data = fs.readFileSync('./example.txt')
// data - "exampel content"

Asynchronous Method

fs.readFile('./example.txt', (error, data) => {
   if(error) console.log(error);
   console.log(data)
})
// data - "exampel content"

Update File

Now that we have access to the content of the file and we want to update it because there's a typo you made or maybe I did which is perfectly normal, you can use the method's fs.writeFile or fs.writeFileSync again to overwrite your data.

Synchronous Method

This method just returns undefined, because incase you're file doesn't exist it'll create a new one using the path itself and store the content in that file.

fs.writeFileSync('./example.txt', 'example content')

Asynchronous Method

fs.writeFile('./example.txt', 'example content', (error) => {
   if(error) console.log(error);
   console.log('The file has been updated!')
})

Rename File

This method can be used for two purposes i.e for renaming a file/folder or moving a file/folder from one folder to another. The most likely error that it will throw is if the new name that was provided is a folder but incase if it's a file it will be overwritten. It will also throw an error if the folder you're moving the file to does not exist.

Synchronous Method

This method just takes two arguements: oldPath and newPath. Return undefined if the operation was successfull. Throws error if newPath doesn't exist or newPath is a folder.

fs.renameSync('./example.txt', './example1.txt')

Asynchronous Method

This method has similar signature as the synchronous one with an extra callback, giving us an error object that can be logged.

fs.rename('./example.txt', './example1.txt', (error) => {
   if(error) console.log(error);
   console.log('The file has been renamed!')
})

Delete File

The methods we have for deleting a file are fs.unlink and fs.unlinkSync. The most likely error it could throw is if the file you're trying to delete doesn't exist.

Synchronous Method

This version just takes a path of type string or buffer or a URL. Returns undefined if there are no errors.

fs.unlinkSync('./example1.txt')

Asynchronous Method

This version takes a path and callback as arguments. Callback gets just the error argument that can be used to log the error.

fs.unlink('./example1.txt', (error) => {
   if(error) console.log(error);
   console.log('The file has been deleted!')
})

Validation

These methods can get the job done but they're not enough because any error thrown in production, if not catched will stop the server. For ex. when you update a file, you would not want to update a wrong file because you passed tire instead of tier considering they both exist for some reason. So what do we do, we bring in validation. Simple checks before performing any operations to validate if a file exists or not.

There's a method that fs module provides for checking if a file/folder exists or not, named existsSync. The asynchronous method for this has been deprecated.

const fileExists = fs.existsSync('./example1.txt')
// fileExists - false

Now we can write our validation for file based operations.

Create File

Let's start by creating a function named create and we'll pass both the filePath and content to it. We'll use try catch to catch all the errors that could possibly be thrown.

const create = (filePath, content) => {
   try {
      const fileExists = fs.existsSync(filePath);

      if (fileExists) {
         throw { 
            success: false, 
            message: "The file already exist!" 
         };
      } else {
         fs.writeFileSync(filePath, content);
         return { 
            success: true, 
            message: "The file has been created!"
         };
      }
   } catch (error) {
      return error;
   }
};

create("./example.txt", "Example Content")

Read File

Similarly for reading a file, we can write function called read and pass our filePath to it. Before returning the content

const read = filePath => {
   try {
      const fileExists = fs.existsSync(filePath);

      if (fileExists) {
         const content = fs.readFileSync(filePath, 'utf8');

         return { 
            success: true, 
            data: content
         };
      } else {
         throw { 
            success: false, 
            message: "The file doesn't exist!"
         };
      }
   } catch (error) {
      return error;
   }
};

const content = read("./example.txt")

Update File

Before updating a file, we'll check if it exists or not and throw an error if it does not.

const update = (filePath, content) => {
   try {
      const fileExists = fs.existsSync(filePath);

      if (fileExists) {
         fs.writeFileSync(filePath, content);

         return { 
            success: true, 
            message: "The file has been updated!"
         };
      } else {
         throw { 
            success: false, 
            message: "The file doesn't exist!" 
         };
      }
   } catch (error) {
      return error;
   }
};

update('./example.txt', "New Example Content")

Rename File

With renaming a file, we'll have to make sure that both the path's i.e oldPath and newPath exists. In case you're trying to move a file, make sure the folder you're moving the file into also exists.

const rename = (oldPath, newPath) => {
   try {
      const oldFileExists = fs.existsSync(oldPath);
      const newFileExists = fs.existsSync(newPath);

      if (newFileExists) {
         throw {
            success: false,
            message: "The file you're trying to rename to already exist!"
         };
      }
      if (oldFileExists) {
         fs.renameSync(oldPath, newPath);

         return { 
            success: true, 
            message: "The file has been renamed!"
         };
      } else {
         throw { 
            success: false, 
            message: "The file you're trying to rename doesn't exist!"
         };
      }
   } catch (error) {
      return error;
   }
};

rename("./example.txt", "./example1.txt")

Delete File

Similarly for deleting a file, check if it exists and if it does then delete it or throw an error.

const unlink = filePath => {
   try {
      const fileExists = fs.existsSync(filePath);

      if (fileExists) {
         fs.unlinkSync(filePath);

         return {
            success: true,
            message: "The file has been deleted!"
         };
      } else {
         throw {
            success: false,
            message: "The file doesn't exist!"
         };
      }
   } catch (error) {
      return error;
   }
};

unlink("./example1.txt")

Conclusion

These are basic operations you might need when you want manipulate file system. The fs module contains a plethora of functions like these that you can make use of.

Here's the link for the documentation for fs module on NodeJs website for reference.

Need to ask a quick question?
Ask away on my twitter @prvnbist

originally posted on my blog

Link prev/next articles dynamically on your gatsby blog

Praveen Bisht — Mon, 13 Jan 2020 15:47:33 +0000

Introduction

Linking your next and previous article doesn't require any packages to be installed, infact it's quite simple to implement.

If you have an up and running blog with articles then you must have used Gatsby's createPages api. This api provides a createPage function that takes an object as it's first argument, gatsby refers to this object as page object. This page object takes following key's.

path : a path url where your articles will be available to read from.
component : a path to the react component that'll render the content of the article usually referred to as article template.
context : an object using which you can pass any key-value that you would want to read from the article template.

We'll be using the context key to implement this functionality.

Let's code

Each article rendered using article template get's a list of props from the createPage function. It contains a prop named pageContext. Any key-value, we define inside the context will be available through this pageContext prop. We'll be passing two keys named: prev and next representing details of previous and next article respectively.

Getting details of next/previous articles

In order to get list of all articles, we use a GraphQL query. Something like -

const result = await graphql(`
   query {

      // if you're using just markdown, replace allMdx with allMarkdownRemark
      allMdx(sort: { order: DESC, fields: [frontmatter___date] }) {
         edges {
            node {
               fields {
                  slug
               }
               frontmatter {
                  title
               }
            }
         }
      }
   }
`)

This essentially returns all the articles, in the query above, the field edges represent list of all the articles and the field node represent each article. Let's assign the edges to a variable.

const articles = result.data.allMdx.edges

Now to get the next and previous article we can just use articles[index-1].node for previous article and articles[index+1].node for next article. And incase if it's the first article, previous would be null and for the last article next would be null.

For previous article

articles.forEach(({ node }, index) => {
   createPage({
      ...
      context: {
         ...
         prev: index === 0 ? null : articles[index - 1].node
      }
   })
})

For next article

articles.forEach(({ node }, index) => {
   createPage({
      ...
      context: {
         ...
         next: index === articles.length - 1 ? null : articles[index + 1].node
      }
   })
})

Now we have access to the details of previous and next articles inside article template to render links for them.

Using the pageContext

In our article template, we can destructure the props to get the pageContext like

const Article = ({ pageContext }) => {}

Let's extract details of prev/next and save them into variables.

For previous article

const prev = pageContext.prev
   ? {
         url: `/blog/${pageContext.prev.fields.slug}`,
         title: pageContext.prev.frontmatter.title
      }
   : null

For next article

const next = pageContext.next
   ? {
         url: `/blog/${pageContext.next.fields.slug}`,
         title: pageContext.next.frontmatter.title
      }
   : null

Now render them on your article using jsx.

<div>
   {prev && (
      <Link to={prev.url}>
         <span>Previous</span>
         <h3>{prev.title}</h3>
      </Link>
   )}
   {next && (
      <Link to={next.url}>
         <span>Next</span>
         <h3>{next.title}</h3>
      </Link>
   )}
</div>

That's pretty much it, with a little CSS flair you can make it look nice😉

For Reference

I've used this same logic on my gatsby blog as well. For reference, take a look at my article template and my gatsby-node.js file.

CSS Grid - Cards Layout & Aspect Ratio

Praveen Bisht — Mon, 30 Dec 2019 13:04:57 +0000

Card-based layouts have been around in web design for longer than you may think and grown in popularity over the years. A lot of platforms have been using card based layouts for years now. Cue meme

There are many ways to implement card based layouts using flexbox, css grid or good ol' float☠. But we'll be using CSS Grid to make your life easy as a front-end developer.

Markup

Let's use un-ordered list for our card based layout but you can also use div as well.

<ul>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

Styles

Our goal is to make a layout that is structured in a grid of cards. Let's introduce CSS Grid to the mix. We'll have to define container ul as grid based container to do that we'll be adding the display property to it and setting it to the value of grid.

ul {
   display: grid;
}

With CSS Grid you can set how many columns you want in the layout using property grid-template-columns.

ul {
  grid-template-columns: 1fr 1fr 1fr;
}

This will create a 3 column layout, here fr represents a fraction of the total width the container spans. We can also use values in px, em, rem and percentages instead of fr. We set each column to 1fr and repeating it 3 times creates 3 columns for us but in case where you want to build equal width column layouts you can use repeat() to avoid repeating yourself😉

ul {
  grid-template-columns: repeat(3, 1fr);
}

Replace the first argument that repeat takes with number of columns you want. Second argument is the width each column will have. Now let's introduce some gutter in case you want some. To do that we can use grid-gap property.

ul {
  grid-gap: 16px;
}

This will add gutters of 16px wide to both columns and rows. To set different gutter to columns and rows you can either use grid-row-gap and grid-column-gap or set grid-gap to <grid-row-gap> <grid-column-gap> to assign different gutter sizes.

ul {
  grid-gap: 16px 12px;
}

ul {
  grid-row-gap: 16px;
  grid-column-gap: 12px;
}

But what if you want the layout to have as many number of columns that can fit the window and wrap on browser resize?

Let's welcome auto-fill and auto-fit to the game.

What's `auto-fill`?

auto-fill will simply fill the row with as many cards it can and will create empty columns if the number of cards are less than the number of columns.

ul {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr);
}

minmax() takes two arguments -

First - Minimum Width
Second - Maximum Width

The cards will expand as much as maximum width they have in a row until the space for new card becomes available in the row.

What's `auto-fit`

auto-fit will fill the row with as many cards as it can fit with maximum width. If a row has space to fill 10 cards of maximum width of 100px, it will fit all of them and the cards will wrap to new row if the row doesn't have space to fit a card with it's minimum width.

For more detailed difference between auto-fill and auto-fit refer to this article by @SaraSoueidan

Now for the purpose of this articles we'll be using auto-fill. With this included our css for the container has following properties.

ul {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr);
}

Now let's style our cards a bit. We'll begin by adding background color to the body tag and some padding too.

body {
  padding: 16px; 
  background: #19191C;
}

For our cards represented by li tags, let's style 'em.

li {
  height: 240px;
  background: #303035;
  border-radius: 8px;
}

Our layout so far look's like this.

Aspect Ratio

On some screens the layout might look good with fixed height but as the screen size increases or for wide devices the cards will stretch horizontally but the height will be not. To avoid this we can setup aspect ratio for our cards that'll keep them in same ratio no matter how wide or how small a screen is. Now to simulate aspect ratio on our cards we can set the height property to auto or simply remove it.

We'll be using padding-top or padding-bottom to simulate a particular aspect ratio. Below are the values that we can use to achieve different aspect ratios.

1:1 - 100%
16:9 - 56.25%
4:3 - 75%
3:2 - 66.66%
8:5 - 62.5%

Let's make our cards fit to 16:9 ratio.

li {
  padding-top: 56.25%;
  background: #303035;
  border-radius: 8px;
}

With this added we'll have our cards at 16:9 ratio no matter the size of the screen. But any content within the cards would now have been pushed down by the padding we added. To solve this we can wrap the content of the cards into a container and set it to position: absolute. With this we can position our content at the top of the card.

li {
  padding-top: 56.25%;
  background: #303035;
  border-radius: 8px;
  position: relative;
}

li > img {
  position: absolute;
  width: 100%;
}

All styles together

body {
  padding: 16px; 
  background: #19191C;
}

ul {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr);
}

li {
  padding-top: 56.25%;
  background: #303035;
  border-radius: 8px;
  position: relative;
}

li > img {
  position: absolute;
  width: 100%;
}

CSS Grid pretty much handles the responsive part for us which I see as absolute win but since we set minimum width for our cards to 320px which means if the window's size is less than that the cards will overflow. So we'll have to use media queries nonetheless🤦🏼‍♂️

@media screen and (max-width: 320px) {
   ul {
      grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
   }
}

Codepen

Create a tags input component in ReactJs

Praveen Bisht — Thu, 11 Jul 2019 10:58:04 +0000

Project Setup

We are going to be building the component using ReactJs. Let's start by installing the essentials. First we're going to create a react app using React's CRA or you can use any starter kit to begin with. Let's setup our React app.



npx create-react-app tags-input
cd tags-input

Let's get started!

In the index.js file we're going to write the code for our base component App, you can name it anything you'd like.



// index.js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.scss";

const App = () => {
    return (
        <div className="App">
            <span>Hello World!</span>
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));

Tags Input Component

We're going to be using functional components and React's useState hook to make it stateful.



// TagsInput.jsx
import React from "react";
const TagsInput = () => {
    const [tags, setTags] = React.useState([]);
    return (
        <div className="tags-input">
            <ul>
                {tags.map((tag, index) => (
                    <li key={index}>
                        <span>{tag}</span>
                        <i className="material-icons">close</i>
                    </li>
                ))}
            </ul>
            <input
                type="text"
                placeholder="Press enter to add tags"
            />
        </div>
    );
};
export default TagsInput;

Since we are going to be storing an array of tags in the state, so we can initialize it as empty array. useState hook return two values i.e the current state( and a function that can used to update the state. We're using array destructuring to get both the values from the useState. The current state in our case is called tags and the function to update it is called setTags.

Then within the return function we're mapping the tags array and displaying all the tags that will be added by the user in the state.

Add tags functionality

Let's create the functionality to add tags. We're going add an event handler onKeyUp to our input tag and return a function called addTags() and pass in the event as an argument.



// TagsInput.jsx
...
<input
    type="text"
    onKeyUp={event => addTags(event)}
    placeholder="Press enter to add tags"
/>
...

Next we'll define the addTags() function above return in our component.



// TagsInput.jsx
import React from "react";
const TagsInput = () => {
    const [tags, setTags] = React.useState([]);
    const addTags = event => {
        if (event.key === "Enter" && event.target.value !== "") {
            setTags([...tags, event.target.value]);
            event.target.value = "";
        }
    };
    return (
    ...
    );
};

We can use keycodes to make sure that the tags are only added to state if the user has pressed Enter key. Alongside that we're also adding one more condition which is to prevent empty tags from being added to the state.

Then withing our if condition, if it's true we can add the tag entered by the user using our setTags() function. you'll notice that I'm using the spread operator(...tags) here to to first add the tags we already have and then add on the tag the user just entered. This syntax just makes sure that incoming tags are added in the last of the tags array and finally we're clearing out the value from our input tag so the user can enter the new one.

Remove tags functionality

To remove a tag, the user can click on the close icon that all the tags have. I'm passing a onClick event handler to handle the remove tag functionality.



// TagsInput.jsx
...
{tags.map((tag, index) => (
    <li key={index}>
        <span>{tag}</span>
        <i
            className="material-icons"
            onClick={() => removeTags(index)} 
        >
            close
        </i>
    </li>
))}
...

We're returning a removeTags() when the user click on close icon and passing the index of the tag that's been clicked to remove. Now right below our addTags(), we'll add removeTags().



// TagsInput.jsx
...
const addTags = event => {
    ...
};
const removeTags = index => {
    setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
};
...

Since we're passing the index of the tag that the user wants to remove, we can use filter() method to remove the tag based on it's index. On the line no. 8 in above code, we're simply iterating our tags array and looking for a tag whose index matches the index of the tag the user wants to remove, once it's found it'll be filtered out and rest of the tags will remain in the resulting array. Finally we're using the spread operator again to pass in the resulting tags in an array and then use setTags() to update the state.

Let's Import TagsInput component into our base component



// index.js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.scss";

import TagsInput from './TagsInput';

const App = () => {
    return (
        <div className="App">
            <TagsInput />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));

Now how do we get the tags that the user added into our base component. We'll declare a function called selectedTags in our base component that we'll pass as props to our TagsInput component.



...
const App = () => {
    const selectedTags = tags => console.log(tags)};
    return (
        <div className="App">
            <TagsInput selectedTags={selectedTags}/>
        </div>
    );
};
...

From our TagsInput component, we can now call the selectedTags method and pass the tags array to our base component.



// TagsInput.jsx
...
const TagsInput = props => {
    const [tags, setTags] = React.useState([]);
    const addTags = event => {
        if (event.key === "Enter" && event.target.value !== "") {
            setTags([...tags, event.target.value]);
            props.selectedTags([...tags, event.target.value]);
            event.target.value = "";
        }
    };
    ...
};

You'll notice that we've passed props as parameter to our TagsInput component. We'll be using it to access the selectedTags() that we passed from the base component. On line no. 9 in above code, We're calling the selectedTags() method and passing in the same arguments as the setTags on line no. 8. Notice that I'm not passing the tags itself that we destructured from useState to avoid passing the older tags array.

Now whenever the user add a new tag, the base component will have the access to update tags array.

Codepen Demo

Thanks for reading, this is my first blogpost here - any feedback is most welcome!(https://www.prvnbist.com/blog/create-a-tags-input-component-in-react)!

Expense App 2.0🎉

Praveen Bisht — Thu, 11 Jul 2019 08:20:35 +0000

Link - https://expense-app.netlify.com/
Stack - MERN + GraphQL
Client Repo - https://github.com/prvnbist/expense-app-frontend
Server Repo - https://github.com/prvnbist/expense-app-backend

A much needed update for the expense app both feature wise and design wise. The need for an update came because of the poor form handling the old version had and the lack of basic features like edit profile details functionality.

So I started doing the redesigns a month ago on Figma, making the UI more simpler and adding the additional features. It took me a week to finish that and then began the development of new version. I began with back-end, simplifying queries, adding filter functionality to queries, wrote the update profile functionality.

Here's the change log for front-end

Added Formik & Yup validations to form fields
Added the edit profile functionality.
Wrote Modal, Tabs, Select, RadioGroup components that I've been sharing here on IG.
Added filters like search, by category and by expense type.
Added insights - statistics and more visualizations.
This isn't the end, a lot more to do and improve.

Overall, this past month has been amazing and very productive for me. I learnt new technologies like redux, redux-saga, built an app over a three day sprint for an assignment, did the whole redesign of expense app.

There's a lot more to come and I'm excited!

DEV Community: Praveen Bisht

CRUD Operations In Python & Django - Part 2

The Form

The Model

Update Exercise

Delete Exercise

Key Takeaways

Building a full-stack app with Python & Django

Project Setup

Installing django

App Setup

VS Code Setup (Optional)

Creating views

Creating templates

Creating models

Running migrations

Render exercises on the home page

Getting started with Hasura

Introduction

Deployment

Deploying wih Heroku

Adding Schema

Creating Tables

Writing Queries

Writing Mutations

Writing Subscriptions

Conclusion

File based operations using NodeJS

Getting Started

CRUD operations

Create File

Read File

Update File

Rename File

Delete File

Validation

Create File

Read File

Update File

Rename File

Delete File

Conclusion

Link prev/next articles dynamically on your gatsby blog

Introduction

Let's code

Getting details of next/previous articles

For previous article

For next article

Using the pageContext

For previous article

For next article

For Reference

CSS Grid - Cards Layout & Aspect Ratio

Markup

Styles

What's auto-fill?

What's auto-fit

Aspect Ratio

All styles together

Codepen

Create a tags input component in ReactJs

Project Setup

Let's get started!

Tags Input Component

Add tags functionality

Remove tags functionality

Let's Import TagsInput component into our base component

Codepen Demo

Expense App 2.0🎉

A much needed update for the expense app both feature wise and design wise. The need for an update came because of the poor form handling the old version had and the lack of basic features like edit profile details functionality.

What's `auto-fill`?

What's `auto-fit`