While Redux has long been the go-to solution for centralized state management, React's Context API now provides a built-in mechanism for handling global states without the need for external libraries.

This article will explore how to leverage the power of the React Context API to manage global states effectively while following best practices and coding standards.

Understanding the React Context API:

The React Context API allows data to be passed down the component tree without the need for prop drilling, enabling components at any level to access and update the global state.

By utilizing the Context API, we can simplify the process of managing the state and eliminate the need to pass props through intermediate components.

Creating a Global State Context:

To start using the Context API, we first need to create a context that will hold our global state.

We can do this by using the createContext function provided by React. Here's an example of how to create a global state context:

import React, { createContext, useState } from 'react';

const GlobalStateContext = createContext();

const GlobalStateProvider = ({ children }) => {
  const [globalState, setGlobalState] = useState(initialState);

  return (
    <GlobalStateContext.Provider value={{ globalState, setGlobalState }}>
      {children}
    </GlobalStateContext.Provider>
  );
};

export { GlobalStateContext, GlobalStateProvider };

In the above code snippet, we create a context called GlobalStateContext using createContext(). We also define a provider component called GlobalStateProvider that wraps up our entire application. It uses the useState hook to initialize and manage the global state. The value prop of the provider exposes the state and a corresponding setter function to its child components.

Accessing Global State:

Once the global state context is set up, we can access the state from any component within its descendant tree. To do this, we need to use the useContext hook provided by React. Here's an example of accessing the global state:

import React, { useContext } from 'react';
import { GlobalStateContext } from './GlobalStateProvider';

const MyComponent = () => {
  const { globalState, setGlobalState } = useContext(GlobalStateContext);

  // Access global state variables and update state as needed
  // ...

  return (
    // JSX for the component
  );
};

In the above code, we import the GlobalStateContext from our previously created context file. By using the useContext hook, we can access the global state object and the setter function, allowing us to read and update the state within the component.

Updating Global State:

To update the global state, we can simply call the setter function provided by the context. This will trigger a re-render of any component that consumes the state. Here's an example of how to update the global state:

import React, { useContext } from 'react';
import { GlobalStateContext } from './GlobalStateProvider';

const MyComponent = () => {
  const { globalState, setGlobalState } = useContext(GlobalStateContext);

  const updateState = () => {
    setGlobalState({ ...globalState, newValue: 'updated value' });
  };

  return (
    <button onClick={updateState}>Update Global State</button>
  );
};

In the above code, we define an updateState function that calls the setGlobalState function with a new state object. By spreading the existing global state and updating specific values, we ensure that the previous state is not lost. This approach helps maintain immutability and avoids unexpected side effects.

Best Practices:

When working with the React Context API for global state management, it's important to follow some best practices:

1. Avoid excessively large global states: Keep the global state focused and only include necessary data to prevent unnecessary re-renders.

2. Use separate context providers for related state: If your application has multiple distinct sections with their own state, consider creating separate context providers for each.

3. Optimize renders with memoization: Utilize the React.memo or useMemo hooks to prevent unnecessary re-renders of components consuming the global state.

4. Consider using reducer pattern: For more complex state management scenarios, you can combine the Context API with the use of reducers to handle actions and state updates in a more structured manner.

Conclusion:

The React Context API, along with the useState and useContext hooks, provides a powerful solution for managing global state in React applications. By adopting best practices and adhering to coding standards, we can effectively leverage the Context API to simplify state management and improve the scalability and maintainability of our applications.

As a React developer, I often found myself spending valuable time manually creating components and managing CSS modules.

The lack of consistency and repetitive tasks inspired me to develop a CLI tool that would automate these processes, leading to increased productivity and code quality.

The Inspiration from Angular CLI:

During my journey of learning Angular, I was impressed by Angular CLI's power and efficiency in generating components and managing project structure.

This inspired me to create a similar CLI tool for React, tailored to my specific needs.

The Pain Points

Before the creation of my React CLI tool, I faced several challenges in my React development workflow:

1. Manual Component Creation: Creating react components with the necessary boilerplate code was time-consuming and error-prone. It often resulted in inconsistencies across different components.

2. CSS Module Management: Managing CSS modules for each component was a tedious task. I had to create separate CSS module files, import them into the component files, and ensure consistent naming conventions.

The Birth of the React CLI

Motivated by my challenges, I embarked on developing a custom CLI tool for React. The goal was to automate component generation, enforce best practices, and improve development efficiency.

Key Features of the React CLI:

1. Component Generation: The CLI allows me to generate React components effortlessly with a single command. It takes the component name from the command and automatically generates the corresponding component file (either .jsx or .tsx) with the required boilerplate code.

2. CSS Module Integration: To maintain consistency and avoid naming conflicts, the CLI automatically creates a CSS module file for each component. It associates the CSS module with the component file and ensures a clean separation of styles.

3. Project Structure Management: The CLI intelligently detects the project's root directory, ensuring that the generated components are placed correctly within the project structure. It automatically creates the necessary directories, such as src/components, if they don't exist.

4. TypeScript Support: The CLI seamlessly handles TypeScript projects by checking for the presence of tsconfig.json. If TypeScript is detected, it generates .tsx components; otherwise, it generates .jsx components.

Installation

To use the Rtfc CLI, you can either install it globally or use it with npx without global installation.

Global Installation

npm install -g rtfc-cli
rtfc-cli g Navbar

Usage with npx

npx rtfc-cli generate <componentName>
# example
# npx rtfc-cli g Navbar

Replace <componentName> with the desired name of your React component.

Future Updates

To further enhance the React CLI and provide even more value to developers, I have planned the following future updates:

1. Class Component Support: In addition to functional components, I will introduce support for generating class components. This will cater to developers who prefer the class component syntax or have existing codebases using class components.

2. Next.js Integration: Next.js is a popular framework for server-rendered React applications. To extend the CLI's compatibility, I will add support for generating components specific to Next.js projects, incorporating Next.js conventions and features.

You can find the React CLI on npm here and the GitHub repository here. Feel free to check it out, provide feedback, and contribute to its development.

Thank you ❤️

I thought of giving it a try and found it to be really easy to set up and deploy.

In this post, I'll help you in creating your first serverless function on Digital Ocean, how to deploy them and all the necessary steps.

Enjoy the post✌🏻.

🎳 Getting started with DO Functions

👤 Create a Digital Ocean account

If you don't have a digital ocean account, you can create one here.

This link will give you free $100💸 for your testing with a validity of 60 days. You can use this credit for all your tests related to droplets or serverless.

Once you have the account, we can now move on to installing the doctl CLI which will help us in bootstrapping the serverless app.

⬇️ Install doctl

If you are on a Mac, you can install doctl with homebrew.

brew install doctl

For Linux, you can use Snap Package

sudo snap install doctl

For Windows, you can use the below commands on your Powershell. Open Powershell with Run as Administrator

Invoke-WebRequest https://github.com/digitalocean/doctl/releases/download/v1.76.0/doctl-1.76.0-windows-amd64.zip -OutFile ~\doctl-1.76.0-windows-amd64.zip

This will download the most recent version of doctl. We can now proceed with the unzip of the file.

Expand-Archive -Path ~\doctl-1.76.0-windows-amd64.zip

We can now move the doctl into a dedicated directory and add it to your system’s path by running:

New-Item -ItemType Directory $env:ProgramFiles\doctl\
Move-Item -Path ~\doctl-1.76.0-windows-amd64\doctl.exe -Destination $env:ProgramFiles\doctl\
[Environment]::SetEnvironmentVariable(
    "Path",
    [Environment]::GetEnvironmentVariable("Path",
    [EnvironmentVariableTarget]::Machine) + ";$env:ProgramFiles\doctl\",
    [EnvironmentVariableTarget]::Machine)
$env:Path = [System.Environment]::GetEnvironmentVariable("Path","Machine")

You can also find a how-to guide 📖 on installing and configuring doctl by following this link.

Once done, we can now proceed with creating of API Token.

🔑 Create an API token

To generate a personal access token, you first need to log in to your digital ocean control panel.

Click on the API link in the sidebar. When on the Tokens/Keys tab of the Personal access tokens section, click the Generate New Token button.

A New personal access token window will appear.

You can set the name to whatever you want and the same with the expiry of the token. Make sure to give both read and write access while generating the token.

Make sure to copy it safely as it will not be shown again.

You can also follow this link to generate a personal access token on the digital ocean.

We can now proceed with the access token to provide access to doctl.

🔓 Use API token to grant account access to doctl

Run the following command and when prompted, pass the token string. You can also give this auth context a name.

doctl auth init --context <NAME>
# ex doctl auth init --context serverless

You can add multiple accounts and can switch between auth contexts.

doctl auth list
doctl auth switch --context <NAME>

We can now proceed with the validation of the doctl.

✅ Validate if the doctl is working

You can review your account details by running the following command to confirm you have successfully authorised doctl.

doctl account get

If authorized successfully, you will get something like this.

Email                    Droplet Limit    Email Verified    UUID                                    Status
pratik@gmail.com    10               true              d0161b45-8c09-4233-dv32-63614c84a0dd    active

Now we are ready to proceed with installing the support for serverless.

⬇️ Install support for serverless functions

To install the support for serverless Functions, we need to install a software extension for that.

doctl serverless install

You'll get installation status something like this.

Downloading...Unpacking...Installing...Cleaning up...
Done

Next, we need to connect to the development namespace with the following command.

doctl serverless connect

It will show the name and API host of your namespace.

We are now ready to proceed with the creation of our first serverless app.

🖥 Create a serverless app

Navigate to the directory where you want your functions to stay and then run the following command.

doctl serverless init --language js do-serverless

The -l or --language flag specifies which programming language to use. We have option for go, javascript, php, and python.

A directory named do-serverless will be created with sample code for "hello world" and configuration files.

do-serverless/
├── packages
│   └── sample
│       └── hello
│           └── hello.js
└── project.yml

We don't have to make any changes to the js file, it can be used as it is, we just need to deploy the code to test.

⬆️ Deploy the serverless app

In order to deploy the serverless code, we need to come out of the directory do-serverless and run the following command.

doctl serverless deploy do-serverless

And if you are in the same directory, you can run doctl serverless deploy .

🔗 Requesting the live URL of the function

You can request the live URL of the function with the following command.

doctl sbx fn get sample/hello --url

This will give you the URL something like this.

https://faas-blr1-22237d592.doserverless.co/api/v1/web/fn-29f27939-608f-4a63-8b2f-6a35e24c7613/sample/hello

You can also list all of your deployed functions with the following command.

doctl serverless functions list

Datetime        Access   Kind      Version  Actions
─────────────── ──────── ───────── ──────── ─────────────────────────────────────────────────
05/25 01:56:34  web      nodejs:14 0.0.1    sample/hello

👀 Developing in watch mode

We can also develop our functions in watch mode as it can speed up our development time as it will keep on watching for code changes and automating build steps.

To develop in watch mode, run the following command:

doctl serverless watch do-serverless

When you are done with the development, press CTRL+C to exit the watch mode.

🕵🏻‍♂️ Inspecting the logs

We can also see the logs from your functions. Just run the following command.

doctl serverless activations logs --limit 3

By default, the limit is 1. We can also add the --follow flag to follow the logs as they are generated.

We can also follow logs from a specific function with the help of the following command.

doctl serverless activations logs --follow --function sample/hello

❤️ Final thought

I tried and deployed my function and was able to get a decent response time (~140ms) and this was actually good as compared to Firebase Functions which I used in the last project.

Hopefully, I'll try building a couple of projects using DO Functions and see how it performs. So far I really liked how easy was it to set up😀.

You can follow the actual doc from the digital ocean for complete information on functions and the official post here.

I hope this post will help you in creating your first serverless function on the digital ocean. If you found this post helpful, please share this post with others and also leave a comment below and let me know your thoughts.

Thanks for the time, see you in my next post.

❤

The formidable module is used for parsing both the form data and the file uploads. It's very easy to use and can be easily integrated.

Installation

Visit npmjs or click here or you can install the package by using the below command.

npm i formidable

The highlights of this module are (according to npmjs):

• Fast (~900-2500 MB/sec) & streaming multipart parser
• Low memory footprint
• Graceful error handling
• Very high test coverage

app.js

const express = require("express")
const fs = require("fs");
const formidable = require("formidable");

const app = express();

app.post("/handle-uploads", (req, res) => {
  const form = formidable();
  form.parse(req, async (err, fields, files) => {
    // your form fields will be found inside 'fields' variable
    // your form files will be inside files variable
  });
});

app.listen(3300, (err) => {
  if (err) console.log(err);
  console.log("Server started on port 3300");
});

Let's say we want to upload the file to a particular location suppose inside the uploads directory.

For that, we have to specify the path inside form.parse().

// inside app.post("/handle-uploads", (req, res) => {

const form = formidable();
form.parse(req, async (err, fields, files) => {
  if (err) {
    return res.status(400).json({
      status: "Failure",
      msg: "Some error occured " + err.message,
    });
  }
  let oldPath = files.nameOfTheField.path;
  let newPath = `./uploads/${files.nameOfTheField.name}`;
  fs.rename(oldPath, newPath, (err) => {
    if (err) {
      return res.status(400).json({
        status: "Failure",
        msg: "Failed to upload file. " + err.message,
      });
    }
    res.status(201).json({
      status: "Success", 
      msg: "File uploaded successfully"
    });
  });
});

Thanks

I hope this post will help you in handling file uploads easily. If you found this code helpful, please share this post with others and also leave a comment below and let me know your thoughts.

Thanks for the time, see you in my next post.

❤

If you'll use them in your production level app, this may not help you in finding the exact error and when did that occur.

To have a proper track of your errors, we must use something reliable so that we can check for our error later.

One of the best way to identify all of your error is to make a log file for all of your errors.

But hey, how will I create log files for all of my future errors?

I was working on my office project where I learnt that it's quite easy to implement, all thanks to Vibhor sir.

Don't worry. You don't have to create log files for your errors manually.

The best thing about Node js is that it has packages for everything you can think of😉.

Using Winston

Winston makes it super easy in logging your errors. With over 6,155,906 installs each week, you can think how much power it has.

You can easily implement it in your code.

Start by installing Winston

npm i winston

We, need another package to have our logs rotated at a particular interval. Logs can be rotated based on a date, size limit, and old logs can be removed based on the count of elapsed days.

npm i winston-daily-rotate-file

The DailyRotateFile transport can rotate files by minute, hour, day, month, year or weekday.

The next step is to set up the code for Winston.

Let's create a file for Winston. You can name it whatever you want.

I'll be naming logger.js

const winston = require("winston");
require("winston-daily-rotate-file");

const dashLog = new winston.transports.DailyRotateFile({
  filename: "./logs/dash-%DATE%.log",
  datePattern: "YYYY-MM-DD",
  zippedArchive: true,
  maxSize: "20m",
});

const dash = winston.createLogger({
  transports: [
    dashLog,
    new winston.transports.Console({
      colorize: true,
    }),
  ],
});

module.exports = {
  dashLogger: dash,
};

Some of the options which I've used here are filename, datePattern, zippedArchive, maxSize.

filename: This will let you name your log files the way you want.

datePattern: It is used to dictate the frequency of the file rotation.

zippedArchive: A boolean to define whether or not to gzip archived log files. (default: 'false')

maxSize: Maximum size of the file after which it will rotate.

Now, open your starting file of node js. Mine is app.js

To use this logger, we just need to import our logger.js file and instead of using console.log(), we can use our custom logger.

In our app.js

const express = require("express");

const { dashLogger } = require("./logger");

const app = express();

app.use(express.json());

app.get("/", (req, res) => {
  try {
    return res.render("view", {
      data,
    });
  } catch (error) {
    console.error(error);
    dashLogger.error(`Error : ${error},Request : ${req.originalUrl}`);
    res.render("400");
  }
});

app.listen(3000, () => {
  console.log("Server started");
});

What we have done here is that we are wrapping our code in a try-catch block and if it throws an error, our logger will create a log file inside of the logs directory.

Here, I've also kept req.originalUrl so that it would be easy to detect where is the actual point of error. It will log the error with the actual route.

In this way, we can easily have the logs of our application and it will help us in finding the error easily.

Thanks

I hope this post will help you in debugging your code much easier. If you found this code helpful and the logger actually helped you at any point of time, just leave a comment below and let me know.

Thanks for the time, see you in my next post.

❤

Creating your own database for storing all the words and their meanings can be quite a difficult task. The best way which I found was to use any dictionary API available in the market.

I tried searching a lot and found one API which a developer has made available for free.

https://dictionaryapi.dev/

Now, that we have the API, we'll test this API first and then we'll implement this API in our code.

BTW, here is the final version of the project.

I've hosted the app on Vercel and the platform is super easy to deploy your projects for free and it also comes with CI/CD which makes updating your application super easy and fast.

Let's start

Open your browser and go to this link. This is the homepage of the API we are going to use.

Copy the link provided or use the below link.

https://api.dictionaryapi.dev/api/v2/entries/<language_code>/<word>

Change the language_code to the language of your choice (See the list of supported languages in the docs).

https://api.dictionaryapi.dev/api/v2/entries/en/<word>

# I have changed it to en for English

Replace <word> with the word whose meaning you want to find.

https://api.dictionaryapi.dev/api/v2/entries/en/programmer

# this is how the API has to be used

Once you'll hit this URL in your browser, you'll get the JOSN response something like this.

[
  {
    "word": "programmer",
    "phonetics": [
      {
        "text": "/ˈproʊˌɡræmər/",
        "audio": "https://lex-audio.useremarkable.com/mp3/programmer_us_1.mp3",
      }
    ],
    "meanings": [
      {
        "partOfSpeech": "noun",
        "definitions": [
          {
            "definition": "A person who writes computer programs.",
            "example": "computer programmers and analysts"
          }
        ]
      }
    ]
  }
]

From the response, we can easily extract the required data and populate in our HTML elements.

Making request using fetch()

When we try to make any request to any endpoint, fetch() returns a promise. To handle the promise, either we can use .then().catch() or we can use async-await.

Here, I've used async await.

Below is the code for making the request.

// I've made the function async
const fetchData = async (word) => {

  // make a req to the api
  const result = await fetch(
    `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
  );

  if (!result.ok) {
    alert("No definition found");
    return;
  }

  const data = await result.json();

};

Here is the HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dictionary App</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1 class="h1">Dictionary App</h1>
      <div class="input">
        <input
          onkeypress="handle(event)"
          type="text"
          class="search-field"
          placeholder="Type and press enter"
        />
      </div>
      <div class="result">
        <h1 class="word"></h1>
        <p class="phonetics"></p>
        <audio
          src=""
          controls
        ></audio>
        <p class="wordmeaning"></p>
        <p class="word-definition"></p>
        <p class="wordmeaning"></p>
        <div class="synonyms"></div>
      </div>
    </div>
    <script src="./app.js"></script>
  </body>
</html>

We have some text elements and a search field. For the styling part, you can use your own custom CSS or you can use the CSS code provided below.

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1a576;
}

::-webkit-scrollbar-thumb {
  background: #e47632;
}

.container {
  display: flex;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffc5a1;
}

.h1 {
  font-weight: 300;
  margin-bottom: 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.search-field {
  padding: 10px;
  width: 500px;
  font-size: 20px;
  color: #1e1e1e;
  outline: none;
  border-radius: 5px;
  border: 1px solid #1e1e1e;
}

.result {
  display: none;
  margin-top: 20px;
  width: 500px;
  height: 500px;
  border-radius: 5px;
  background-color: #fff;
  padding: 30px;
  overflow-y: scroll;
  border-left: 5px solid #e66a1e;
}

.result > h1 {
  font-size: 40px;
  font-weight: 300;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  display: inline;
}

.wordmeaning {
  display: inline-block;
  font-size: 24px;
  margin-bottom: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.phonetics {
  display: inline-block;
  background-color: #ffc5a1;
  padding: 5px 10px;
  border-radius: 50px;
  font-weight: 600;
  margin-bottom: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.result > audio {
  width: 100%;
  outline: none;
  margin-bottom: 20px;
}

.word-definition {
  font-size: 28px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 500;
  margin-bottom: 20px;
}

.synonyms {
  display: flex;
  font-size: 22px;
  flex-direction: row;
  flex-wrap: wrap;
}

.pills {
  margin-right: 10px;
  padding: 5px 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background-color: #ffc5a1;
}

/* your media query here */
@media only screen and (max-width: 500px) {
  .container {
    padding: 20px;
  }
  .search-field,
  .result {
    width: 100%;
  }
}

I've tried to make the app responsive for mobile as well.

Now the Javascript

const resultDiv = document.querySelector(".result");
const wordEle = document.querySelector(".word");
const phonetics = document.querySelector(".phonetics");
const audio = document.querySelector("audio");
const wordMeaning = document.querySelector(".word-definition");
const synonyms = document.querySelector(".synonyms");

// function to handle all the word
const handle = async (e) => {
  if (e.keyCode === 13) {
    const word = e.target.value;
    // make a req to the api
    const result = await fetch(
      `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
    );
    if (!result.ok) {
      alert("No definition found");
      return;
    }
    const data = await result.json();
    resultDiv.style.display = "block";
    wordEle.innerText = data[0].word;
    phonetics.innerText = data[0].phonetics[0].text;
    audio.src = data[0].phonetics[0].audio;
    wordMeaning.innerText = data[0].meanings[0].definitions[0].definition;
    const synonymsArray = data[0].meanings[0].definitions[0].synonyms;
    if (synonymsArray) {
      let synonymsData = "";
      for (let i = 0; i < synonymsArray.length; i++) {
        synonymsData += `<p class="pills">${synonymsArray[i]}</p>`;
      }
      synonyms.innerHTML = synonymsData;
    } else {
      synonyms.innerHTML = '<p class="pills">No synonyms available</p>';
    }
  }
};

Now, push the code to Github and from there you can connect your Github to Vercel and you can deploy your app in one click.

Well, this was all for today's post and if you found it helpful, please leave a like & comment.

Thanks for your time and I'll meet you in my next post. Take care and happy coding🙂!

What is Hooks in React?

Hooks are the concept in React, which allows you to use states and some other features of React which was earlier available only in the class-based component.

So, after the introduction of Hooks in React, you'll be able to use the state and some other features inside your functional component, which was not possible earlier without writing class-based components.

One of the best examples of hooks in react is useState function.

The useState hook

State in react holds the property value in a component. When the state changes, the component re-renders.

To use states in our functional component, we use the useState hook and, it helps us to eliminate the use of class in our code.

Unlike class, the state shouldn't have to be an object while using useState hook. It can contain any data type.

The useState method takes an initial value of state as the parameter and, it returns an array which contains two elements, the initial value of the state and a function to make changes or modify the state's initial value.

Let's see useState hook in action.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Here the useState will return two value, one is the initial value of count and another is function to change the value of count.

Now we are able to use the variable count inside the p tag. It will show the value of count instead of the text count.

<p>You clicked {count} times.</p>

Since the initial value of our count is 0, it will show, You clicked 0 times.

Now, we are calling the setCount method inside the onClick of the button and we are incrementing the value of the count once the button is pressed.

This will increment the value of the count and will update the UI.

This was all about useState Hook in a react app'. If you found my application helpful, please mark recommend below in the comments section below.

I hope you liked my post on Getting started with useState hook in React JS and if you found my post helpful, please share it with your friends and if you have any doubt, feel free to comment below and I'll try to solve your problem ASAP.

Thanks for your time and I'll meet you in my next post. Take care and happy coding🙂!

All you need is Google API Credential and react-google-login package which you can install using NPM.

Update: Here is the live link to the app what we are going to make.

Google API Credentials

We'll start by getting Google API keys and, for this, you need a google account which I hope we all have one.

Now, go to the below URL and sign in there. Google Cloud Platform

Here, you need to click on the Create Project button. It'll ask you to enter a name for your project.

Enter any name for your project and click Create.

Now go to the homepage of Google Console and from the menu on your left side of the screen, click on OAuth consent screen. Make sure your project is selected which you have created just now.

Give your application a name and click save. It will redirect to a new page and, it will ask you to Create Credentials.

Click on that and select OAuth client ID from the dropdown.

It will ask you for the application type. Select the Web application and hit Create.

Give it a name and a redirect URL.

http://localhost:3000/

All done. It will provide you with your client id and client secret key.

You are now done with the Google API Credentials part.

Let us now install react-google-login package.

To install the package, type the below command in your terminal and hit enter and it will install the package.

npm i react-google-login

Once the package is installed, we can now move to the code part.

We need to create two components in our src directory.

1. Login.jsx
2. Logout.jsx
3. Profile.jsx

Let's see the login component.

Inside your Login.jsx file, paste the following code.

Don't forget to replace the client id in both the components with your client id.

import React from "react";
import { GoogleLogin } from "react-google-login";

const clientId = 
      "your-client-id-here.apps.googleusercontent.com";

function Login(props) {
  function onSuccess(res) {
    props.setUser(res.profileObj);
  }
  function onFailure(res) {
    // console.log(res);
    alert(`Oops! Some error occured: ${res}`);
  }

  return (
    <div>
      <GoogleLogin
        clientId={clientId}
        buttonText="Login"
        onSuccess={onSuccess}
        onFailure={onFailure}
        cookiePolicy={"single_host_origin"}
        isSignedIn={true}
      />
    </div>
  );
}

export default Login;

We are done with the login part and we can now move to the logout part. Below is the code for the logout component. Paste the below code in your Logout.jsx file.

import React from "react";
import { GoogleLogout } from "react-google-login";

const clientId =
      "your-client-id-here.apps.googleusercontent.com";

function Logout(props) {
  function onSuccess(res) {
    props.setUser(null);
  }

  return (
    <div>
      <GoogleLogout
        clientId={clientId}
        buttonText="Logout"
        onLogoutSuccess={onSuccess}
      />
    </div>
  );
}

export default Logout;

We are done with the login and logout component and we are left with the Profile component. Create a new file named Component.jsx and paste the below code.

import React from "react";
import Logout from "./Logout";
import "../stylesheet/Profile.css";

function Profile(props) {
  return (
    <div className="profile-card">
      <img src={props.user.imageUrl} alt="" />
      <h1>{props.user.name}</h1>
      <span>{props.user.email}</span>
      <p>Id: {props.user.googleId}</p>
      <Logout setUser={props.setUser} />
    </div>
  );
}

export default Profile;

Now we need to import both login and profile components in our app component. Here is the code for App.js file. Paste this code in your App.js file.

import React, { useState } from "react";
import Login from "./Login";
import Profile from "./Profile";
import "../stylesheet/App.css";

function App() {
  const [user, setUser] = useState(null);
  return (
    <div className="app">
      {user ? (
        <Profile user={user} setUser={setUser} />
      ) : (
        <Login setUser={setUser} />
      )}
    </div>
  );
}

export default App;

Let's understand the code

Now, what is happening here is we are creating a user state and storing the user profile object in it once the user is logged in.

  const [user, setUser] = useState(null);

In my both login and profile component, I'm passing setUser as a prop so that I can update the user when the user tries to log in and when a user tries to logout in profile component, I'm setting the user state to null.

The ternary operator is helping me to render content conditionally and if you are not familiar with conditional rendering then you can take reference from my post on conditional rendering here.

How to render content conditionally in React JS

I know this is not the best-looking sign-in page but this post is not about CSS styling. If you want to style your index page, you can do by adding a stylesheet named App.css in the same directory and paste the below code.

.app {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

Now we are done with the App.css and we need to style our Profile card. Here is the code for the Profile.css. Copy the below code and paste the code in your Profile.css stylesheet.

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 400px;
  background-color: rgb(252, 231, 231);
  border-radius: 5px;
}

.profile-card > img {
  width: 100px;
  border-radius: 50%;
}

.profile-card > h1 {
  color: rgb(87, 87, 87);
  font-size: 22px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.profile-card > span {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: rgb(77, 77, 77);
}

.profile-card > p {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: rgb(36, 36, 36);
  font-size: 12px;
}

Now, we are done with the login. If you want to test the link, open your terminal and run the below command in your terminal.

npm start    

This will start your app and will open the URL in your default browser.

Use any of your Gmail and it will log you in and will show you email in the alert box.

This was all about how to use 'login with Google in a react app'. Here is the link to the GitHub repo for the complete source code.

ThePratikSah/login-with-google-react-app

If you found my application helpful, please star my repo on GitHub.

I hope you liked my post on Log in with Google in a React App and if you found my post helpful, please share it with your friends and if you have any doubt, feel free to comment below and I'll try to solve your problem ASAP.

Thanks for your time and I'll meet you in my next post. Take care and happy coding🙂!

It is one of the easiest ways to onboard any user into your app. You just need a single click and with your Google account, the user can easily login or signup in your website.

In today's post, I'll be showing you how you can use Google Sign-in on your PHP website. All you need is Google API Credentialand Google API Client Library for PHP which you can install using composer.

Google API Credentials

We'll start by getting Google API keys and for this, you need a google account and I hope we all have one.

Now, go to the below URL and sign in there.

Google Cloud Platform

Here, you need to click on Create Project button. It'll ask you to enter a name for your project.

Enter any name for your project and click Create.

Now go to the homepage of Google Console and from the menu on your left side of the screen, click on OAuth consent screen. Make sure your project is selected which you have created just now.

Give your application a name and click save. It will redirect to a new page and it will ask you to Create Credentials.

Click on that and select OAuth client ID from the dropdown.

It will ask you for application type. Select Web application and hit Create.

Give it a name and a redirect URL.

Enter the below URL in place of redirect URL. Here php-google-signin is the name of my project.

http://localhost/php-google-signin/index.php

All done. It will provide you with your client id and client secret key.

You are now done with the Google API Credentials part.

Let us now install google-api-package with the help of composer.

If you don't have composer installed in your machine, you can download it from here.

Composer

Once downloaded, install the required package by typing the following command from your terminal.

composer require google/apiclient:"^2.7"

Once the package is installed inside your project folder, we can now move on with the config.php page.

Inside your config.php page, place the below code and you just need to replace two lines of code with your google's client id and client secret key.

<?php  

// include google client library for php autoload file
require_once 'vendor/autoload.php';

// make object of google API client
$google_client = new Google_Client();

// set google oauth client ID

// enter your client id here inside the quotes
$google_client->setClientId('your-client-id-here-apps.googleusercontent.com');

// set google OAuth client secret key

// enter your client secret key here inside the quotes
$google_client->setClientSecret('your-client-secret-key-here');

// set google oauth redirect uri
$google_client->setRedirectUri('http://localhost/php-learning/index.php');

// to get email and profile
$google_client->addScope('email');
$google_client->addScope('profile');

// start session on web page
session_start();

?>

On line number 12, enter you client id which you copied from google.

// enter client id inside the quotes
$google_client->setClientId('');

On line number 17, enter your client secret.

// client secret key inside the quotes
$google_client->setClientSecret('');

You are done with the config.php file and we can now move on to index.php.

Inside your index.php file, paste the following code.

<?php  

include 'config.php';

$login_btn = '';

if (isset($_GET['code'])) {

    // fetching the token
    $token = $google_client->fetchAccessTokenWithAuthCode($_GET['code']);

    // check for any error while 
    if (!isset($token['error'])) {

        // set access token used for requests
        $google_client->setAccessToken($token['access_token']);


        // store access token in session for future use
        $_SESSION['access_token'] = $token['access_token'];

        // create object of google service oauth2 class
        $google_service = new Google_Service_Oauth2($google_client);

        // get user profile data from google
        $data = $google_service->userinfo->get();

        // find profile data and store it in session variable
        if (!empty($data['given_name'])) {
            $_SESSION['fname'] = $data['given_name'];
        }

        // fetch the first name and store it in the session variable
        if (!empty($data['family_name'])) {
            $_SESSION['lname'] = $data['family_name'];
        }

        if (!empty($data['email'])) {
            $_SESSION['email'] = $data['email'];
        }

        if (!empty($data['picture'])) {
            $_SESSION['picture'] = $data['picture'];
        }

    }

}

// check of the user is logged in using google account.
if (!isset($_SESSION['access_token'])) {
    $login_btn = '<a href="'.$google_client->createAuthUrl().'">Login with Google</a>';
}

?>

<!DOCTYPE html>
<html>
<head>
    <title>Google Login</title>
</head>
<body>

    <?php if ($login_btn == '') {

        // if login btn is a blank string, it means we have the auth token

    ?>

    <div>
        <h1>Welcome to Google Profile</h1>
        <p>Name: <?php echo $_SESSION['fname']; ?></p>
        <p>Email: <?php echo $_SESSION['email']; ?></p>
        <img src="<?php echo $_SESSION['picture']; ?>">
        <a href="logout.php">Logout</a>
    </div>


    <?php } else { ?>

        <!-- we don't have the auth token, we need to login the user -->
        <div>
            <?php echo($login_btn); ?>
        </div>

    <?php } ?>

</body>
</html>

I know this is not the best looking sign-in page but this post is not about CSS styling. If you want to style your index page, you can do by adding a stylesheet.

Now, we are done with the login part. If you want to test the link, open your browser and paste the link of your project index.php and it will ask you to login with google.

Use any of your Gmail and it will log you in and will show you your name, email and your profile picture.

Now we are left with the signout or the logout part. Below is the code for logout.php

<?php  

include ('config.php');

$accesstoken = $_SESSION['access_token'];

// reset oauth token
$google_client->revokeToken($accesstoken);

// destroy entire session data
session_destroy();

// redirect page to index.php
header('location:index.php');

?>

You are done with the PHP Google Sign in part. I hope you liked my post on login with Google in a PHP web app and if you found my post helpful, please share it with your friends and if you have any doubt, feel free to comment below.

Thanks for your time and I'll meet you in my next post. Take care and happy coding🙂!

What is SQL?

SQL is Structured Query Language, which is a computer language for storing, manipulating and retrieving data stored in a Relational Database.

It is the standard language for Relational Database System.

The term CRUD stands for CREATE, READ, UPDATE and DELETE or DESTROY.

Let's start with the CREATE statement in SQL.

One more thing. If you want to try these queries, you can try them online and you don't have to configure the database locally. Here is the link to an online database.

SQL Online IDE - for Data Science

CREATE

The create statement can be used for both Database and Table creation. Let's see the database creation.

Creating Database

We'll start with the query for database creation.

CREATE DATABASE ecommerce;

This query will help you in creating a database named ecommerce.

Now, let's try to create a table with the CREATE statement.

If you don't know what a table is, read more about it here. Table (database) - Wikipedia)

Creating Table

For creating a table in the database, we need to pass column names with their data types in the query.

Here I'll be creating a users table.

CREATE TABLE users (
    id INT NOT NULL, 
    name STRING,
    PRIMARY KEY (id)
);

The above query will create a table named users and, it will have columns named id, name.

To identify every row uniquely, we have id and, we increment them automatically and we'll also set them as PRIMARY KEY and, it should be NOT NULL.

INSERT

Now we are done with the creating database and table we can now try to store some data in the users table.

To insert data in the table, we have the INSERT statement.

INSERT INTO users
VALUES (1, "Pratik Sah");

It will add a new row in the users table and the values will be stored in the respective columns or fields.

Try inserting some rows on your own.

READ

We already have stored some useful data in the table, time to retrieve them.

For reading, we have the SELECT statement.

Suppose we want to access name column from the table, we'll write:

SELECT name FROM users;

If we want to select everything from the table, we use * for that.

SELECT * FROM users;

CONDITIONS

Suppose we want to read only those data which satisfies a particular condition, then we'll use WHERE in our query.

SELECT * FROM users WHERE name = "Pratik";

Here, we'll get those results only which have name equals to Pratik in the table users.

We can also use id for querying a particular row from the table. For example, SELECT name FROM users WHERE id=1 and it will return us the name of the row where the id will be 1.

UPDATE

We now have our data stored in our table. We may want to change the name of the user or maybe the user wants to change the email. In that case, we can use the update statement.

UPDATE users
SET name='Pratik'
WHERE id=1;

The above statement will help us to update the name of the user with id equals to 1. We can use this statement for making any changes stored in the table.

DELETE

Sometimes what happens is, suppose a user wants to delete his account from our portal. We may want to delete his record from our users table and to that, we use the DELETE statement.

The delete statement helps us in deleting the data from our table.

DELETE FROM users
WHERE id=1;

Now, this will delete the entire row from the users table where id will be 1.

NOTE: Don't forget to use the WHERE or else it will delete the entire row from the table.

Sometimes we want to add a completely new column in our table. Now, in that case, we have to ALTER our table.

ALTER

ALTER is used to add, delete or modify columns in an existing table.

Suppose we want to add a new field in our users table where we want to store the age of user. We'll add a new column using the ALTER keyword.

ALTER TABLE users
ADD age INT;

Now, this command will add a new column named age with the data type INT in our users table.

Well, this was all for today's post and if you found it helpful, please leave a like, share this post with your friends & comment below if you have any doubts.

Thanks for your time and I'll meet you in my next post. Take care and happy coding🙂!

Well, all your worries now come to an end as we'll be learning how to host your static portfolio or any static website for free without spending a penny or by sharing your credit card details (in case of AWS).

All you need is to be familiar with the git command line and Github and you are good to go.

Github Pages

Github is home to over 100 million repositories and 40 million developers working together to host and review code, manage projects, and build software together.

It is a code hosting platform for version control and collaborations where developers can work together on projects from anywhere.

You can learn about Git commands from Ananya's notes on Git from here.

Now, let's start with the hosting part.

1. Let's create a new repo: go to github.com/new
2. For Repository Name, enter username.github.io where username is your actual username.
3. Make sure your repository is public.
4. Do not check "Initialize this repository with a README", we don't need it now.
5. Click "Create repository".

You can also learn about Creating repository from here Creating a new repository - GitHub Docs

I assume you had created a new directory with an Html file, a CSS file and a JS file in it. Both CSS and JS are optional but you must have at least one index.html file in it.

If you don't have one, copy the below code and paste it in your index.html file inside a new directory.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Js Intro!</title>
  </head>
  <body>
    <h1>Hi, welcome to my site!</h1>
  </body>
</html>

Now, open a terminal and navigate to the current directory where your index.html file is located.

Now we need to initialize a new Git repository in the current working directory.

$ git init
# This will initialize a new git repo in the current directory. 

Now, we need to add the files in our new local repository. This stages them for the first commit.

$ git add .

Now we need to commit the files that you've staged in your local repository.

$ git commit -m "First commit"

At the top of your GitHub repository's Quick Setup page, copy the remote repository URL. It will look something like this.

https://github.com/username/username.github.io.git

Now, in the Command prompt, add the URL which you copied, for the remote repository where your local repository will be pushed.

$ git remote add origin remote_repository_URL
# remote_url: https://github.com/username/username.github.io.git
# please check for the username in the URL before proceding

This will set the new remote URL for your local repository.

Now, we are ready to push our code to Github.

$ git push origin master

It might take up to 5-10 minutes and after that, you’ll be able to see your newly created page at http://username.github.io/

If you make updates, be sure to push to the master branch!

If you want to link a custom domain name, here is a link to an in-depth guide on linking a custom domain name with Github.

Using a custom domain for GitHub pages

Well, this was all for today's post and if you found it helpful, please leave a like & comment below if you have any doubts.

Thanks for your time and I'll meet you in my next post. Take care and happy coding🙂!

To check the live app that I've created, here is the link to the app. It is a Progressive Web App so you can also install it on your device and use it as a native app.

All of our todo items will be stored in the local storage of our browser and we'll load the todos from the browser every time we'll load our app.

This will eliminate the use of a database for storing our todos and you can read more about local storage here.

Window.localStorage

Now, let's create the basic HTML structure of our todo app.

Create an index.html file in the root directory of your project. Here is the HTML code for our todo app.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Todo by Pratik</title>
    <link rel="stylesheet" href="style.css">
    <meta name="description" content="Offline Todo app, use on the go. No need of internet connectivity. Todo by Pratik is the best todo app you'll need.">
    <link rel="shortcut icon" href="./img/todo.png" type="image/x-icon">
    <link rel="manifest" href="./manifest.json">
  </head>
  <body>
    <div class="main">
      <h1>Todo by <a href="https://pratiksah.com">Pratik</a></h1>
      <input type="text" placeholder="Type and press Enter &#8594;" id="todo" />
      <p class="text-info">Tap on todo to remove them.</p>
      <div class="container">
        <!-- incomplete todo -->
        <div class="incomplete"></div>
      </div>
    </div>
    <!-- link to jq and external js -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="./app.js"></script>
  </body>
</html>

Here, I've used jQuery and an external js file for handling all the logic for our app.

Now, to style our app, we are using some custom CSS.

Create a new style.css file in the root directory and paste the below code.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 80px 20px;
}

.main {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  width: 40vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  color: rgb(58, 58, 58);
}

a {
  color: rgb(100, 100, 100);
  text-decoration: none;
}

input {
  margin-top: 30px;
  padding: 15px;
  font-size: 22px;
  margin-bottom: 20px;
  border-radius: 4px;
  border: 1px solid rgb(58, 58, 58);
  color: rgb(58, 58, 58);
}

.text-info {
  margin: 0px 0px 10px 0px;
  color: rgb(117, 117, 117);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.card {
  width: 100%;
  padding: 15px;
  background-color: rgb(58, 58, 58);
  color: white;
  margin-bottom: 10px;
  border-radius: 4px;
  align-items: center;
}
.card:hover {
  background-color: rgb(121, 119, 119);
  cursor: pointer;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background:  rgb(92, 91, 91);
}


@media screen and (max-width: 768px) {
  body {
    padding: 10px 20px;
    margin: 0;
  }
  .main {
    width: 80vw;
    margin-top: 30px;
  }
}

Now, this code will help you in styling your app and it will also make your app responsive as I've also used media query.

Let's create our app.js file inside the root directory and we'll write all of our logic in jQuery here.

We'll start by checking the data from the localStorage of the browser whenever our app will load.

To store any data in the localStorage, we use localStorage.setItem('name', 'Pratik');

This will create a key named name and the value of this key will be Pratik.

Now, to get the data, we can use localStorage.getItem('name') and this will return us with the value stored in that key-value pair.

If no key is available with that name, this will return us null.

Now, we'll use the same logic to check for our previous todos stored in the localStorage and if exists, we'll fetch the data from the localStorage and load it in the div with class card.

checkTodos();

// check for data in localStorage

function checkTodos() {
  // todos in the key of my localStorage
  let dataInLocalStorage = localStorage.getItem("todos");
  // check if it is null or not
  if (dataInLocalStorage == null) {
    todos = [];
  } else {
    todos = JSON.parse(dataInLocalStorage);
  }
  let html = "";
  todos.forEach((todo, index) => {
    html += `<div class='card' onclick='removeTodo(${index});'>${todo}</div>`;
  });
  $(".incomplete").empty().append(html);
}

Next, we'll write the logic to add todos and save them in the localStorage.

// adding items in todos

$("input").on("keypress", (e) => {
  if (e.which === 13 && $("input").val() !== "") {
    todo = $("input").val();
    let todosData = localStorage.getItem("todos");
    if (todosData == null) {
      todos = [];
    } else {
      todos = JSON.parse(todosData);
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
    $("input").val("");
    checkTodos();
  }
});

Here, you can see that I've also called the checkTodos() function to update the UI once a new todo is added.

Now, the final code to remove the todo from the localStorage and from the UI.

// logic for removing todo from the todos list

let removeTodo = (index) => {
  let todosData = localStorage.getItem("todos");
  todos = JSON.parse(todosData);
  todos.splice(index, 1);
  localStorage.setItem("todos", JSON.stringify(todos));
  checkTodos();
};

Here, I've created an arrow function for removing the items from the todo. This will also remove the item from the localStorage and it will then update the localStorage with the new data.

The removeTodo() function will be called whenever we'll tap on any of our todo items.

Now, here is the complete code of app.js of the todo app.

checkTodos();

// check for data in localStorage

function checkTodos() {
  // todos in the key of my localStorage
  let dataInLocalStorage = localStorage.getItem("todos");
  // check if it is null or not
  if (dataInLocalStorage == null) {
    todos = [];
  } else {
    todos = JSON.parse(dataInLocalStorage);
  }
  let html = "";
  todos.forEach((todo, index) => {
    html += `<div class='card' onclick='removeTodo(${index});'>${todo}</div>`;
  });
  $(".incomplete").empty().append(html);
}

// adding items in todos

$("input").on("keypress", (e) => {
  if (e.which === 13 && $("input").val() !== "") {
    todo = $("input").val();
    let todosData = localStorage.getItem("todos");
    if (todosData == null) {
      todos = [];
    } else {
      todos = JSON.parse(todosData);
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
    $("input").val("");
    checkTodos();
  }
});

// logic for removing from the todos list
let removeTodo = (index) => {
  let todosData = localStorage.getItem("todos");
  todos = JSON.parse(todosData);
  todos.splice(index, 1);
  localStorage.setItem("todos", JSON.stringify(todos));
  checkTodos();
};

Now, you are done with the coding part and you can now start using it.

Well, this was all for today's post and if you found it helpful, please leave a like & comment below and in my next post, we'll see how you can deploy your static web app for free on Netlify.

I'll be deploying this todo app on netlify and you can also add a domain name there for free.

Thanks for your time and I'll meet you in my next post. Take care and happy coding🙂!

The API is free to use and you can get your API keys from the link below. Just signup and you are good to go.

Сurrent weather and forecast - OpenWeatherMap

Now we can copy the API key that we need to fetch the weather of a new location. Go to the API section and select the Current Weather Data and click Subscribe.

Now click on get API key under the free plan and copy the key which they provided.

Once you are done with the account creation and copying the key, we can now start with the code.

Open your terminal and navigate to the location where you want to create your Node Js app.

Next, we need to create a new directory and name it weatherapp or you can name it as per your choice.

mkdir weatherapp

Navigate to this directory.

cd weatherapp

Now, we need to set up a node js project in this directory. Write the following command in your terminal and follow the instructions as shown there.

npm init

Open your weatherapp directory in you favourite text editor and we can now move on to the code.

Create a new file inside your weatherapp directory and name it app.js.

This is going to be the starting file of our app. We'll come back to this file once we are done with the installation of the requires packages.

Now, we'll install all the required packages for this project.

The first thing we need is to install is Express and body-parser.

Run the following command in your terminal inside your project's directory.

npm install express --save

npm install body-parser

For templates, we are going to use EJS. You can read more about ejs on their official docs from the link below.

EJS -- Embedded JavaScript templates

We'll first start with the installation of ejs in our project with the help of the following command.

npm install ejs

Next, we need to create a new directory named views in our root directory.

Inside the views directory, we are going to store all of our templates.

Now create a new file inside views directory and name it index.ejs.

Copy the following code and paste it in your index.ejs file.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weatherly</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <% if (data === '') { %>
    <div class="container mt-5 col-lg-6">
      <p class="display-4 text-center">Weatherly🌤! by <a href="https://pratiksah.com" target="_blank">Pratik</a></p>
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Search weather of your location</h5>
          <form action="/" method="post">
            <div class="form-group">
              <input type="text" class="form-control" name="location" placeholder="Location">
              <p class="display-5 mt-3 text-muted">Default location is Purnia, In</p>
            </div>
            <button type="submit" class="btn btn-primary">Go</button>
          </form>
        </div>
      </div>
    </div>
    <% } else if (data === '0') { %>
    <div class="container mt-5">
      <div class="card">
        <div class="card-body">
          <p class="card-title">Oops! Lost in space🚀, try locations from Earth🌏 !</p>
        </div>
      </div>
      <div class="text-center">
        <a href="/" class="btn btn-primary mt-5 mx-auto">New location</a>
      </div>
    </div>
    <% } else { %>
    <div class="container mt-5">
      <p class="display-4 text-center">Weatherly! by <a href="https://pratiksah.com" target="_blank">Pratik</a></p>
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Weather in <%= data.name %>, <%= data.sys.country %></h5>
          <p class="text-muted">Lat: <%= data.coord.lat %>, Lon: <%= data.coord.lon %></p>
          <img class="float-right" src="http://openweathermap.org/img/wn/<%= data.weather[0].icon %>@2x.png" alt="icon">
          <p class="display-1"><%= data.main.temp%><sup>o</sup>C</p>
          <span class="text-muted">Feels like <%= data.main.feels_like %><sup>o</sup>C</span>
          <h5 class="text-capitalize font-weight-bold"><%= data.weather[0].description %></h5>
          <div class="overflow-x">
            <span class="pr-5 inf"><i class="fas fa-wind"></i> Wind <%= data.wind.speed %> m/sec</span>
            <span class="pr-5 inf"><i class="fas fa-paper-plane"></i> Pressure <%= data.main.pressure %> mb</span>
            <span class="pr-5 inf"><i class="fas fa-tint"></i> Humidity <%= data.main.humidity %>%</span>
            <span class="pr-5 inf"><i class="fas fa-eye"></i> Visibility <%= data.visibility/1000 %> km</span>
            <span class="pr-5 inf"><i class="fas fa-cloud"></i> Cloudiness <%= data.clouds.all %>%</span>
          </div>
        </div>
      </div>
      <div class="text-center">
        <a href="/" class="btn btn-primary mt-5 mx-auto">New location</a>
      </div>
    </div>
    <% } %>
    <script src="https://kit.fontawesome.com/ad862d8e11.js" crossorigin="anonymous"></script>
  </body>

</html>

Now, come back to our app.js file and import express, https and body-parser.

const express = require('express')
const https = require('https')
const bodyParser = require('body-parser')

Now, we'll create a new express app. const app = express()

Now, we'll set up our view-engine to ejs. app.set('view engine', 'ejs')

Now we'll create a middleware that will help us in parsing the content of the form submitted.

app.use(bodyParser.urlencoded({extended: true}))

Next, we will be serving a form with an input field that will take location as an input.

The above ejs file will help us to serve a form that will take input of a location from the user.

Here I have used an external CSS, if you want to use that, here is the code to it.

.fas {
  width: 1.3em !important;
}

@media only screen and (max-width: 800px) {
  .inf {
    display: block !important;
  }
  .display-1 {
    font-size: 3rem;
  }
}

style.css This CSS file is to be placed inside a public directory inside the root directory and if you don't know how to serve a static file in node js using express, you can follow my other post, here is the link to it.

Serving static files in Node js

Now, let's write our complete code for index.js file. Here is the code for the api call.

const express = require('express')
const https = require('https')
const bodyParser = require('body-parser')


const app = express()

// telling my app to use ejs as the default template engine
app.set('view engine', 'ejs')

app.use(bodyParser.urlencoded({
  extended: true
}))

// code to serve the static files
app.use(express.static("public"))

app.get('/', (req, res) => {
  res.render('index', {data: ''});
})

app.post('/', (req, res) => {
  const location = req.body.location ? req.body.location : "Purnia";
  const appId = "Your_API_Key_Here";
  const url = "https://api.openweathermap.org/data/2.5/weather?q=" + location + "&appid=" + appId + "&units=metric";
  https.get(url, (response) => {
    if (response.statusCode === 200) {
      response.on("data", (data) => {
        const weatherData = JSON.parse(data);
        res.render('index', {data: weatherData});
      })
    } else {
      res.render('index', {data: "0"})
    }
  })
})

app.listen(process.env.PORT || 80)

Once you are done with the final code of app.js you can now start your server and it will launch your app.

To start your server, type npm start and this will run ther server on port 80.

Now, open your browser and go to http://localhost/, you'll see your app running. Enter any location and it will show you the weather of that location.

Here is the link to the app which I made using OpenWeatherMap and hosted on Heroku for free.

Well, this was all for today's post and if you found it helpful, please leave a like & comment and in my next post, I'll teach you how you can create your own todo app with jQuery and localStorage.

Thanks for your time and I'll meet you in my next post. Take care and happy coding🙂!

Serving static files using Express Js

Express Js has a built-in middleware express.static that helps us to serve the static files in Node Js application.

You can learn more about express.static from their official docs.

Serving static files in Express

While using express.static, we can provide the directory name to the method where the static files are stored.

Let's create a directory where we want to store our static files and name it public. Open a terminal and run the below command.

mkdir public && cd public

Now, we can paste any static file here like images or CSS/JS files.

Here I'll be creating a styles.css file.

I'll be using this static file for styling my Html page.

touch styles.css

This will create a new file named styles.css.

Below is the sample code for CSS. Copy the code and paste it in your styles.css file.

* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

/* your custom css here */

Now we have our static file in our public directory, its time to serve it using Express Js.

Add the following code to your main js file after creating the express app.

const express = require('express')

const app = express()

// this middleware will help you to serve your static files
app.use(express.static('public'))

app.listen(80)

Now, this middleware will help us to access all the static files that are in the public directory.

Let's create a views directory in our root directory and inside it, we can create index.html file.

This file will be served to the users whenever someone comes to the root URL.

Below is the sample code for index.html file. Copy the code and paste it in your index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index JS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <p>Home Page</p>
    <ul>
      <a href="/product">Products</a>
    </ul>
  </nav>
  <form action="/" method="post">
    <input type="text" name="name" id="name">
    <input type="submit" value="Submit">
  </form>
</body>
</html>

Now, we have our Html code and our CSS static file, let us try to link our CSS with our Html file.

<link rel="stylesheet" href="/styles.css">

The above line will try to locate the CSS file in the same directory if it was a static website, but because of express.static middleware code, Express will provide the path of our public directory and this will help the Html code to access the CSS file.

Well, this was all for today. I know this post was a bit small but this will help you to serve your static files in Node Js.

Thanks for your time. If you found this post helpful😊, please share this with your friends.

If you stuck into some kind of problem, feel free to comment below. I'll be happy to help you🙂.

Till then bye and happy coding!

This is a basic Django web application focusing on some basic crud and we will be saving the data in an SQLite database.

Why Django?

Django is a free and open-source python-based web framework for creating dynamic web apps. Some popular sites that use Django are Instagram, Mozilla, The Washington Post, etc.

The Web framework for perfectionists with deadlines | Django!

We will use bootstrap for styling the form. For using the bootstrap, we can use either CDN or we can download the CSS files from the bootstrap site.

Below is the code for a simple Form made using bootstrap.

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <title>Contact</title>
</head>

<body>

  <h1 class="text-center my-5">Contact Form</h1>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-6">
        <form action="" method="POST">
          <div class="form-group">
            <label for="name">Full Name</label>
            <input type="text" class="form-control" name="name" id="name" placeholder="Your Name">
          </div>
          <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" name="email" class="form-control" id="email" placeholder="name@example.com">
          </div>
          <div class="form-group">
            <label for="message">Your message</label>
            <textarea class="form-control" name="desc" id="message" rows="3"></textarea>
          </div>
          <input type="submit" class="btn btn-primary" value="Submit">
        </form>
      </div>
    </div>
  </div>

</body>

</html>

Here we have used the CDN link for including bootstrap in our HTML code.

To submit our form, I have used input type submit but you can also use the button tag in place of input type submit.

In place of form action, we will try to submit the form in the same path that will be the root URL and we will handle form submission in our code.

This code will help us in creating a form which we will be using it in the templates of our Django project.

Now we are done with the HTML, and now, we can start with the Django project setup.

Note: Before starting with Django, we will create a virtual environment where we will have all our files and packages stored.

Creating a Virtual Environment

Before starting with creating a virtual environment, we need to install a package that will help us in creating the environment.

A virtual environment is a tool to create a private workspace for a Python application.

One of the major advantages of using a virtual environment is the ability to install modules locally.

You can also export a working environment and execute Python programs in that environment.

Make sure you have the latest version of Python installed on your system.

Now you are done with that, and we can now move to the next step of creating the virtual environment.

We have many python packages for creating the virtual environment. Here I'll be using the pipenv.

The main reason for using pipenv is that its commands are the same on all the platforms.

To install this package on your system, copy the below command and paste it in your terminal.

# for mac and Linux users
pip3 install pipenv

# for windows users
pip install pipenv

terminal This package automatically creates and manages virtual env for your projects, as well as adds/remove packages from your pipfile as you install/remove packages.

Now this package is installed on your system. The next step is to create a new virtual environment.

For creating a new virtual environment, let's first create a new directory which we are going to use it as our virtual environment for this project, and name it myenv for now.

You can name it anything you want but for now, keep it the same.

# command to create a new directory
mkdir myenv

# command to open that directory
cd myenv

terminal mkdir myenv will help you in creating a new directory, and cd myenv will help you to change the working directory to myenv.

Now we are inside our folder where we want to create the env, run the following command to create a new environment inside myenvdirectory.

# command to create a new virtual env
pipenv shell

terminal This command will create and activate a new virtual environment in your present directory, and now you are ready to install new packages in your env.

But wait. You can't install any packages simply by writing pip install.

Since you are inside the virtual env of pipenv, you need to use a slightly modified command to install any packages.

Now don't get panic here. The command is not so hard to keep it in mind.

Earlier we used to write pip install xyz-package, but now we need to write pipenv install xyz-package.

Not so major change but worth keeping in mind.

Now we are ready with the package installation, and we can head over to install Django.

Head over to the official documentation of Django by clicking here.

Copy the following command and paste it into your terminal, and it will help you to install Django.

# this will install Django in your virtual env
pipenv install Django

terminal To check the installed packages, type the following command, and it will list all the installed packages in your terminal.

pip freeze

terminal You'll see the list of all the installed packages in your terminal, and it will also have Django in it.

Note: The Django which we tried to install is installed only in this virtual env and not globally. So you cannot use it from anywhere.

This also means if you need to create a new Django project, you need to create a new virtual env and install Django from fresh again.

Creating a Django project

Now we are installed with Django, and we can move on to creating a new project with Django.

To create a new Django project, copy the following command and paste it in your terminal.

django-admin startproject contactform

terminal Here the contactformis the name of our project.

You can now see that django-admin has created some files for us to work on. We are not going to change anything as of now.

Next is to change the directory to contactform and start our server.

# to change the working directory
cd contactform

# to see the files and folders
ls

terminal Here you can see the folders and files of our contactform.

ls helps us to list all the files and folders inside our current directory. Inside this directory, we have a manage.py file, a db.sqlite3 and a directory name contactform.

db.sqlite3 is optional. It may get created or maybe not, but don't worry. We will seel it later.

Now we have our project created, and we can start our server now and have a look at it in our browser.

Start Server

To start the server, you can run the following command.

# for mac and Linux users
python3 manage.py runserver

# for windows users
python manage.py runserver

terminal Now go to http://127.0.0.1:8000/, and you'll see you Django project up and running. This is the default page of the index. You'll learn how to serve your own HTML page later in this post.

Since we are done with the project setup and our server is started now, we can move on to creating our app for the contact form.

You might be thinking that we have already created a project above using the django-admin command, then why are we going to create a new app.

The answer is simple.

In Django, everything is an app. Whether you want to create a blog, or you want to create e-commerce. Everything is an app.

Create a contact app

Now to create a contact app, we'll run the following command in the same directory.

Don't get confused with the directory hierarchy. They are very straight forward. You just need to keep things in mind the way they are.

For running these commands, you don't need to terminate your running server. You can open a new terminal in the same directory and then you can activate the environment there and then you can use any of these commands without any problem.

# for mac and Linux 
python3 manage.py startapp contact

# for windows
python manage.py startapp contact

terminal Now you have your contact app ready, and we can now move to the next part.

But before moving forward, let's revise the points as they are very confusing at the beginning.

1. First, we installed a python package that helps us to create our virtual env.
2. Next, we created a new folder named myenv inside which we created our virtual environment using pipenv shell.
3. After that, we installed Django in our virtual env.
4. We then created a new Django project named contactform using django-admin startproject contactform
5. Next, we changed our directory and opened contactform, and inside that, we have our project files from contactform and a manage.py file.
6. We then started the server so that our project will be live and can be seen in the browser.
7. And after this, we created a new app for the contact form.

Handling URLs

To handle all the URLs, Django has URL dispatcher which handles all the endpoints. This means that, whether you want to go the root URL or at /admin, everything is being handled by Django URL dispatcher.

Here we want to handle our URLs by the urls.py of our contact app but we don’t have any urls.py file in our app’s directory. So we need to create one.

Create a new urls.py file inside the contact app directory.

Open your contactform’surls.py file and import includefrom django.urls. Now inside urlpatterns array, add path('', include('contact.urls')) as shown in the below code.

"""contactform URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
# here I have imported include from django.urls

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('contact.urls'))
]
#I have also added a new path which will be handled by the urls.py file of my contact directory

Now what is happening here is we are telling our project’s urls.py file that if any user comes with the request of root URL or /, tell him to meet contact’s urls.py.

Now inside app's urls.py, add the following code.

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

# we need to import views from our contact app
from contact import views

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

When it meets contact’s urls.py file, the URL dispatcher of the contact app checks for matching path. If any path matches with the path defined in the views.py file our app, then the request is served with the defined response.

We have named our defined path as name='index'. This is up to you what you want to name the path which you have defined.

Since we don’t have any path defined inside our views.py file, we need to define a path in our app’s views.py file.

Below is the code that will help us to serve any response if the request is for /. Replace the code of views.py file with the below code.

from django.shortcuts import render, HttpResponse

# Create your views here.
def index(request):
  return HttpResponse('Working')

Here I have not served any static Html file but I'll do that later in this post.

Similarly, you can create some other path inside your app's urls.py file and you can define the method that will handle the request inside the views.py file.

These methods take the request as a parameter and don’t forget to import HttpResponse from django.shortcuts.

Now, check your root endpoint, it will show your HttpResponse which you’ve created and not the default response of Django.

Here we have used HttpResponse to render some basic string response inside views.py file. The views.py also has import render but you might be thinking why to import it when we are not using it.

To use render, we need to define the path of templates directory first and then only we can use it to render our templates.

So our next step is to create two new directories, static and templates in the same directory where manage.py, app’s file and project’s files are stored.

The Django application serves static files like static CSS files or the JS files or any other kind of static files from its static directory.

To use return render request, we need some kind of HTML template, and that needs to be stored inside the templates directory.

Keep one thing in mind, people can see your static files or the files stored in the static directory but they can’t see your python code. So don’t keep any file that has some important details inside the static directory.

Now open your settings.py file and paste the following code just below the STATIC_URL = '/static/' as shown in the below code.

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'

# Copy from below
# Static directory path
STATICFILES_DIRS = [
    BASE_DIR / "static",
    '/var/www/static/',
]

You just need to paste the STATICFILES_DIRS and not the complete code.

You can also read more about managing static files from the link given below.

Managing static files

Now let’s try to serve any static file from the static directory. Copy any image and paste it in the static directory and open its path in the browser.

http://127.0.0.1:8000/static/demo.txt

I’ve created a demo.txt file and stored it in a static directory. Similarly, you can store any file and it can be served using the same static URL. Make sure you are using the correct URL.

Templates path configuration

Our next step is to configure the path of templates directory to use our HTML templates. You just need to copy the following code BASE_DIR / "templates" and paste it in the TEMPLATES array’s 'DIRS': [ BASE_DIR / "templates" ], or as shown in the code below.

# See the code in line number 7
# Make sure your code looks same as mine

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [ BASE_DIR / "templates" ],
        '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',
            ],
        },
    },
]

This will configure the path of the template directory and you are now ready to serve your Html templates.

Now create a new index.html file inside your templates directory. Now open your views.py file and here we are going to use return render(request, ‘index.html’).

Below is the code to use it in the views.

from django.shortcuts import render

# Create your views here.
def index(request):
  return render(request, 'index.html')

We can now remove HttpResponse as we no longer use it in our views.py file.

Using variables with templates

We can also use variables in our Html template to send any information that we want to show on our Html template.

To use any variable, we use {{ variable_name }} in our template.

<!-- Copy the following code and paste it in your HTML template -->
<p>I am {{ name }}</p>

And inside my views.py file, I can pass this variable with template.

from django.shortcuts import render

# Create your views here.

def index(request):
  # create your variable here
  context = {
    'name' : 'Pratik'
  }
  # pass it here with the html template
  return render(request, 'index.html', context)

Django Admin Panel

Now you are done with the templating, we can now move to the admin panel. Visit http://127.0.0.1:8000/admin/ and you’ll see a login form. Try login and it will give you an error no such table: auth_user.

This error is because we don’t have any table in our database as of now. To make the changes in our database, we need to run two terminal commands.

# fro Mac and Linux users
python3 manage.py makemigrations

# for Windows users
python manage.py makemigrations

terminal And the second command

# fro Mac and Linux users
python3 manage.py migrate

# for Windows users
python manage.py migrate

terminal When you’ll run the first command, this will not show any changes. But when you’ll run the second command, you’ll see some changes in the terminal.

This is because Django uses some default schema or table for user authentication. Now when you try to log in, this time it will not show the same error.

It will ask you to enter the correct username and password.

Creating superuser

We know why our id and password is wrong as there is no user registered by default.

So we need to create a new superuser. Below is the command to create a new superuser. This will ask you for some basic information and a new superuser will be created.

# fro Mac and Linux users
python3 manage.py createsuperuser

# for Windows users
python manage.py createsuperuser

terminal You can now use that credentials to log in to the admin panel. All our database model, information stored in database can be seen in the admin panel.

You might be thinking how to change the title and header of our admin panel and name it as per our application as Django administration doesn’t look professional. This can be changed by adding these code in your project’s urls.py file.

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

# Add these three lines of code in your urls.py file same as I did
admin.site.site_header = "Contact Admin"
admin.site.site_title = "Contact Admin Portal"
admin.site.index_title = "Welcome to Contact Portal"

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

Note: These codes need to be pasted in your project level urls.py file and not in app-levelurls.py file.

Now check your admin panel. This will look much better now after the name change.

Model class

We are done with the form setup. Let us now create a model class for saving the data from our contact form.

But before that, let’s understand what is a model?

A database model is a type of data model that determines in which manner data can be stored and manipulated.

Ex: Relational model

Now inside your models.py file, let us create a Contact model. We need to import models from django.db and then write our model class. Copy the below code to create a contact model.

from django.db import models

# Create your models here. 
# Note that I have used an uppercase letter for class name

class Contact(models.Model):
  name = models.CharField(max_length=122)
  email = models.CharField(max_length=120)
  desc = models.TextField()
  date = models.DateField()

Now let us run makemigrations command to register all the changes in the model.

# fro Mac and Linux users
python3 manage.py makemigrations

# for Windows users
python manage.py makemigrations

This command will tell Django to make a note of all the changes I’ve made in the model.

This will not make any new table or make any changes in the database. This will only register the changes that are made and these changes will come into effect when we run the migrate command.

But for your surprise, the makemigrations will still show that No changes detected.

But how is this possible? We have made changes in the model, but this is still showing that the model is still the same.

The reason is simple. We have made changes, but we have not registered our model yet to make the changes.

To register our model, open your admin.py file and import Contact from contact.models. Or you can paste the following code in your admin.py file.

from django.contrib import admin
from contact.models import Contact  

# Register your models here.
admin.site.register(Contact)

This will register your model with Django but you need to register your app in INSTALLED_APPS inside settings.py file.

Go to your apps.py file inside your contact app directory, copy the name of the class and go to settings and inside INSTALLED_APPS, paste it there as ‘contact.apps.ContactConfig’ or as shown in the code below.

# here as shown in the first line inside the array

INSTALLED_APPS = [
    'contact.apps.ContactConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Now when you’ll try to run the makemigrations command, this will make some changes that you will see in your terminal and inside your project directory.

# fro Mac and Linux users
python3 manage.py makemigrations

# for Windows users
python manage.py makemigrations

And when you’ll run migrate command, this will generate a new table named contact that can be seen in the admin panel.

# fro Mac and Linux users
python3 manage.py migrate

# for Windows users
python manage.py migrate

Visit your admin panel and there you'll see the contact table like this.

We can save data from the admin panel directly but we are not going to do that here. We will submit our form data using the Html form we have created in our HTML file.

To accept the data for our model field, we need to write our logic inside our views.py file and we are good to go.

Now inside our views.py file, we need to paste the following code.

from django.shortcuts import render
from datetime import datetime
from contact.models import Contact

# Create your views here.
def index(request):
  if (request.method == 'POST'):
    name = request.POST.get('name')
    email = request.POST.get('email')
    desc = request.POST.get('desc')
    contact = Contact(name=name, email=email, desc=desc, date=datetime.today())
    contact.save()
  return render(request, 'index.html')

Let us understand what we are doing with the following code.

1. We have imported our model class and datetime.
2. Next, we are going to check if the request is GET or POST.
3. If the request is GET, we simply return our Html template.
4. If the request is POST, we are fetching name, email, desc from the form and we are passing it in the constructor of our model class and in this way, they will be stored in our table when we call the save method.

We can now try to submit our form. But wait, now this is showing that CSRF verification failed. Request aborted.

What does that mean?

The CSRF middleware and template tag provides easy-to-use protection against Cross-Site Request Forgeries. You can learn more about it here.

Cross Site Request Forgery protection

This error occurred because of missing csrf token. We can add this code {% csrf_token %} inside our <form> tag or as shown below.

<form action="/" method="POST">
  {% csrf_token %}
  <div class="form-group">
    <label for="name">Full Name</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="Your Name">
  </div>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" name="email" class="form-control" id="email" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="message">Your message</label>
    <textarea class="form-control" id="message" name="desc" rows="3"></textarea>
  </div>
  <input type="submit" class="btn btn-primary" value="Submit">
</form>

If you want to change the name of user who sent you the mail, you can do it by adding this small code inside your models.py file.

from django.db import models

# Create your models here. 
# Note that I have used an uppercase letter for class name

class Contact(models.Model):
  name = models.CharField(max_length=122)
  email = models.CharField(max_length=120)
  desc = models.TextField()
  date = models.DateField()
  # code to show name of the person who sent you the message
  def _str_(self):
    return self.name

Now, the admin panel will show you the name of the sender who has sent you the message.

You can download the code from my GitHub repo from the blow link.

ThePratikSah on GitHub

Well, this was all for today. I know this post is way too long but this is an in-depth guide for Django contact form.

Thanks for your time. If you found this post helpful😊, please share this with your friends.

If you stuck into some kind of problem, feel free to comment below. I'll be happy to help you🙂.

Creating State in React

The state is defined inside React.Component. Below code is an example of a stateful component in React.

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      header: "Pratik",
    };
  }

  changeHeader = () => {
    this.setState({header: 'Pratik Sah'});
  }

  render() {
    return (
      <div>
        <h1>{this.state.header}</h1>
        <button onClick={this.changeHeader}>Change</button>
      </div>
    );
  }
}

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

Once the class extends Component, we need to call the super(); method inside the constructor. This helps us to call the parent's constructor.

this.state

Now we can use the state property to store our app's current state.

For example, here I tried to store header as "Pratik"

this.state = {
  "header": "Pratik",
}

and in my <h1></h1> tag, I've used is to display my name.

this.state.header inside h1 tag is going to return the value of header as 'Pratik'.

After that, I've created a button to manipulate the value of the state.

On clicking the button, a function named changeHeader will be called and this will change the value inside the state with the help of setState() method. The setState method is also defined inside React.Component.

Inside the changeHeader method:

changeHeader = () => {
  this.setState({header: 'Pratik Sah'});
}

Now this will change the state from 'Pratik' to 'Pratik Sah' on button click.

This is how a React state works. I hope you've understood the concept of state and setState and if you have found this post helpful, please share it with your friends.

If you stuck in any kind of error, feel free to comment your doubts in the comment section below.

If you liked this post please mark this post as Recommend by clicking the ❤️ button below in the comments section. This will help me a lot.

Thanks for your time. See you in my next post. Take care and happy coding✌️.

Let us understand this with an example. Suppose we are inside our profile section. We want to see the details from our profile page but we don't want to see the form below that to edit the information at the same time. It'll look a bit annoying.

We want to see the edit form only when we want to edit any information or when we want to add any information.

This can be toggled on a button click. This looks easy right. Yes, but the implementation part is a bit tricky.

We can toggle visibility in two different methods.

1. Using the ternary operator
2. Using the if statement

It's up to you which one you want to use. I prefer the second one. I' tell you why but let me show you both the ways first.

For using any of the methods, we need to add a visibility state that is going to hold the toggle state.

So, let's add a visibility state.

const [visible, setVisible] = useState(() => true);

Note: Here I'll be using React Hooks for implementing state but this can be done on both class as well as in functional component.

Here I've kept the state visible at the initial stage. We will change the state when we will try to toggle the visibility.

Using the Ternary Operator

Next inside the return statement, we are going to use the ternary operator of javascript.

condition ? statement1 : statement2;

I hope all of you are aware of this ternary operator. If not, it's fine. You can learn it here. We are using ternary operator because we can't use if block here.

Now in place of condition, we will put the current toggle state and in place of statement1, we will keep the JSX content which we want to show.

In place of statement2, we will keep null. Null will hide the content from there.

We also require a button to toggle the state and we have to handle onClick of the button for the visibility.

Here is the code for the same.

import React, { useState } from "react";

const HooksEx = () => {
  const [visible, setvisible] = useState(() => true);

  return (
    <div>
      <button
        onClick={() => {
          // here I am toggling the visibility using ! operator
          setvisible((visible) => !visible);
        }}
      >
        Toggle Visibility
      </button>
      {visible ? <p>Pratik</p> : null}
    </div>
  );
};

export default HooksEx;

Next, we are going to use the if statement to hide the content and this method is more cleaner way of doing the same.

Using the if statement

When we are using this method, we have to create a new variable and we have to assign null in that variable.

let inputValue = null;

Now inside if condition, we will put the current toggle state and in place of statement body, we will keep the JSX content which we want to show.

Similarly, we will use a button to toggle the state and we have to handle onClick of the button for the visibility.

Here is the code for the same.

import React, { useState } from "react";

const HooksEx = () => {
  const [visible, setvisible] = useState(() => true);

  let input = null;

  if (visible) {
    input = (
      <div>
        <p>Pratik</p>
      </div>
    );
  }

  return (
    <>
      <button
        onClick={() => {
          setvisible((visible) => !visible);
        }}
      >
        Toggle Visibility
      </button>
      {input}
    </>
  );
};

export default HooksEx;

This is going to toggle our content whatever we have kept inside the statement of the conditionals.

Well, this was all for today. Thanks for your time. If you found this post helpful😊, please share this with your friends.

If you stuck into some kind of problem, feel free to comment below. I'll be happy to help you🙂.

This is Pratik and I'll meet you in my other post✌️.