DEV Community: Muhammad Bilal Mohib-ul-Nabi

How to perform CRUD operations with PostgreeSQL,NodeJS,ExpressJS and KnexJS using Restful API

Muhammad Bilal Mohib-ul-Nabi — Fri, 08 Jul 2022 16:40:26 +0000

🏁 Getting Started with the BackEndPernBookInfo API

The source code can be found at my github. It is completely tested but requires the postgreSQL install and database and table creation before you can use it
Source Code

Demonstration of BookInfo App Build With PERN

Demonstration

🤔 What is the BackEndPernBookInfo API?

It is the API that allows you to fetch,update,delete and perform CRUD operations for the PostgreeSQL database used in the project.This is a Restful API for the PostgreeSQL Database so that it can be used with the backend.It is basically used at the front end of Book Info App

🔧 Tools Used

NodeJS
ExpressJS
KnexJS for Migrations And Schema creation
PostgreeSQL

🧐 Operations that can be performed on the BackEndPernBookInfo API

It performs the following operations for both tables student and book:

GET — an HTTP request to Read (Used to read an existing resource)
POST — an HTTP request to Create (Used to create and add a resource)
PUT —an HTTP request to Update(client sends data that updates the entire resource)(Used to update an entire resource)
PATCH — HTTP request to Update (client sends partial data that is to be updated without modifying the entire data)(Used to partially update a resource)
DELETE — HTTP request to Delete (Used to delete an entire resource)

🪀 API Routes

### 1. The API has the following routes for student table crud:

GET http://localhost:8080/student — returns a list of all students
GET http://localhost:8080/student/id — returns a list of a single student by provided id
POST http://localhost:8080/student/ — to Post a JSON object to create a new student
PUT http://localhost:8080/student/id — to Update a student by provided id
DELETE http://localhost:8080/student/id — to Delete a student by provided id

### 2. The API has the following routes for book table crud:

GET http://localhost:8080/book — returns a list of all books
GET http://localhost:8080/book/id — returns a list of a single book by provided id
POST http://localhost:8080/book/ — to Post a JSON object to create a new book
PUT http://localhost:8080/book/id — to Update a book by provided id
DELETE http://localhost:8080/book/id — to Delete a book by provided id

🖥️ How do I use the BackEndPernBookInfo API?

IMPORTANT:Remember that the backend will never run until you have postgresql installed on your system.

So for getting started you need to have a PostgreeSQL database installed on your system.

Installing PostgreeSQL

To Download PostgreeSQL you can go to their downloads page here : https://www.postgresql.org/download/.You also need to Remember that you need to create database in my case I have used my_database so that we can create tables in it.So lets get started.

Check if PostgreeSQL is installed on your system

Note that you need to set the environment variables for your postgresql installation location after it is installed.
To check if PostgreeSQL is installed properly on your system or not run the following command in cmd or terminal

  psql --version

It will return you the version of PostgreeSQL installed on your system if installed properly if you dont know how to set the environment variables for postgresql check out this resource.
Setting the environment variable for postgresql

Creating The database

Database can be created from command line or from GUI i.e on pgAdmin.It will be installed when you install postgresql on your windows system.
We will create our database from command line.So after verifying our database is installed and is working in our system.Lets create it but before that we need to create a user because super user is a user who has access and full access to all operations to postgresql which could be dangerous so that is the reason we need to create a user role. So lets do it. ### Creating a user role
To access PostgreSQL from the terminal, use the command psql with the option -d to select the database you want to access and -U to select the user. If the terminal replies that the psql command is not found, you’ll most likely need to add the Postgres bin/ and lib/ directories into your system path.

  psql -d postgres -U postgres

You will be asked to input your password. Use the password you created earlier. Once you’re logged in, create a new user by adding a login permission with the password root.

  CREATE ROLE my_user WITH LOGIN PASSWORD 'root';

A user is simply a role that has login permission. Now that you have one, give it permission to create databases by issuing the ALTER ROLE [role name] CREATEDB syntax.

  ALTER ROLE my_user CREATEDB;

Log out from your postgres superuser and log in as my_user using the command \q.

  psql -d postgres -U my_user

Now our user named my_user has been created successfully.Its time to create our database
### Creating Database

To create our database run the following command.Note you should be logged in as user role under which you want to create database and I assume you to be logged in as user named my_user that we just created not super user otherwise you might run a command and destroy your core postgres may be It was just for fun but keep attention about that.

  CREATE DATABASE my_database;

With that our database my_database is successfully created.

Creating Tables with KnexJS in our database.

Now before we start the project its very much important that we understand the process of creating tables and table schemas using knexjs. So to get started you need to run these commands in the root of the project and follow what I say,

So there are 2 tables used throughout the backend. These are
1) book
2) student
Now to create the schema and tables we will simply use the knexjs
Its a great tool for managing tables creation and shema management and working with the databases.
Now to created the tables we have to intiliaze knexJS in our project wit the command

  npx knex init 
  #  You dont need to run this command Remember because I have provided you with knex js file configured for you.If you wanna try this you have to delete that file knexfile.js and create your configuration so for now just follow me

Note:
You dont need to run this command Remember because I have provided you with knex js file configured for you.If you wanna try this you have to delete that file knexfile.js and create your configuration so for now just follow me

Although if you delete knexfile.js and want to create a new one enter the following code in knexfile.js

  // Update with your config settings.
  /**
  * @type { Object.<string, import("knex").Knex.Config> }
  */
  module.exports = {
   development: {
    client: 'pg',
    connection: {
      host:"localhost",
      port: 5432,
      database:"todo", // The name of your database
      user:"my_user", // Your username
      password:"pyarapakistan", // Your password
    },
  },
  production: {
    client: 'postgresql',
    connection: {
      database: 'todo',
      user:     'my_user',
      password: 'pyarapakistan',
    },
    pool: {
      min: 2,
      max: 10
    },
    migrations: {
      tableName: 'knex_migrations'
    }
  }
  };

Now lets start migrating. To migrate the database or create table in database, the command to start migration and create table is npx knex migrate:make create_[YourTableNameHere]_table So Remember we have to create two tables so first we will create student* table

  npx knex migrate:make create_student_table

You will see that a folder called migrations and this will be the location of your Student table’s first migration and all the future migrations for the table.

Now paste the following code in your first migration

  /**
   * @param { import("knex").Knex } knex
   * @returns { Promise<void> }
   */
  exports.up = function (knex) {
    return knex.schema.createTable('student', (table) => {
        table.increments('id')
        table.string('first_name').notNullable();
        table.string('last_name').notNullable();
        table.string('profile_picture');
    });
  };

  /**
  * @param { import("knex").Knex } knex
  * @returns { Promise<void> }
  */
  exports.down = function (knex) {
    return knex.schema.dropTable('student');
  };

Now lets send some data using seed file and it will populate our student table

  npx knex seed:make 01_seed

You will see a folder called ‘seeds’ and this will be the location of your Student table’s first seed file and all the future seeds for the table.

Now add the following code to the seed file named 01_seed.js

  /**
  * @param { import("knex").Knex } knex
  * @returns { Promise<void> } 
  */
  exports.seed = async function (knex) {
  // Deletes ALL existing entries
  await knex('student').del();

  await knex('student').insert([
    { id: 1, first_name: 'Muhammad', last_name: 'Ali', profile_picture: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Muhammad_Ali_NYWTS.jpg/800px-Muhammad_Ali_NYWTS.jpg' },
    { id: 2, first_name: 'Muhammad', last_name: 'Bilal', profile_picture: 'https://media-exp2.licdn.com/dms/image/D4D35AQGUZHpq5EnnVA/profile-framedphoto-shrink_200_200/0/1656647188500?e=1657785600&v=beta&t=fOq6rhFvJsvuEMjuECoetJe5sDnmBCIzcSSGmyPIVgI' },
    { id: 3, first_name: 'Ammar', last_name: 'Mohib', profile_picture: 'https://media-exp2.licdn.com/dms/image/C4E03AQHfkSjT0tOhTQ/profile-displayphoto-shrink_200_200/0/1619987742513?e=1662595200&v=beta&t=NmG0JCAhLl51qgg1UULhDJniczduFykDLx3fK1rFL-M' }
   ]);
  };

Now lets add them to the database table student using the command

  npx knex seed:run

You will see the student table updated in your gui pgAdmin4 or other tool.
👏 Congratulations Great Work Till Now.

Now lets create migration for table book.The command is as below as previously described

  npx knex migrate:make create_book_table

Add the following code to the book table migration in migration folder

  /**
  * @param { import("knex").Knex } knex
  * @returns { Promise<void> }
  */
  exports.up = function (knex) {
    return knex.schema.createTable('book', (table) => {
        table.increments('id')
        table.string('book_name').notNullable();
        table.string('author').notNullable();
        table.string('borrowed_by');
        table.string('borrowed_date').notNullable();
        table.string('return_date').notNullable();
    });
  };

  /**
  * @param { import("knex").Knex } knex
  * @returns { Promise<void> }
  */
  exports.down = function (knex) {
    return knex.schema.dropTable('book');
  };

Once you have created your schema, you can now migrate your table to pgAdmin4 by running:

  npx knex migrate:latest

Now lets create second see file that is

  npx knex seed:make 02_seed

It will migrate all the migrations in migraton folder to the database which you can view in PostgreeSQL pgAdmin4 tool for GUI View means our database.
Paste the following code to the 02_seed.js

  /**
  * @param { import("knex").Knex } knex
  * @returns { Promise<void> } 
  */
  exports.seed = async function (knex) {
  // Deletes ALL existing entries
  await knex('book').del();

  await knex('book').insert([
    { id: 1, book_name: 'Programmer Handy Notes', author: 'Sam Francisco', borrowed_by: 'bilal mohib', borrowed_date: '2020-07-21', return_date: '2022-10-01' },
    { id: 2, book_name: 'Starting Out With C++ From Control Strucutes through Objects', author: 'Tonny Gaddis', borrowed_by: 'Ammar Khan', borrowed_date: '2019-12-15', return_date: '2023-01-25' },
    { id: 3, book_name: 'Starting Out With Java From Control Strucutes through Objects', author: 'Tonny Gaddis', borrowed_by: 'Asfand Yar Khan', borrowed_date: '2017-05-20', return_date: '2025-10-15' },
  ]);
  };

Lets run this command again to migrate finally.

  npx knex seed:run

With this the book table will be filled up with data

📋 Tables Created in the Database

student ——> This table contains the first_name,last_name and profile_photo in its columns.
book ——> This table creates the columns for the book name, author, borrowed by (student name) or empty, date of borrow, expected date of return

🏃🏾 Starting the project

Download the repository and run npm install. The node modules will be installed that are essential for running the project.
In the root of the project run node index.js or if you have nodemon installed nodemon index.js
If PostgreeSQL is installed on your system the backend will be started on port 8080 at http://localhost:8080/ successfully.
😀 Congratulations. You definately did great if you followed till now.
Now you can use the apis along with frontend

Find Me

Follow me on Linkedin for useful updates regarding development
My Github Profile

Resources

Blogs are much faster than videos so I mostly consult blogs but you can consult video tutorials if you want to

How to change navbar style on scroll in React JS/Next JS

Muhammad Bilal Mohib-ul-Nabi — Fri, 13 May 2022 08:12:41 +0000

Today I am going to tell you one of the simplest ways to change the navbar styling on scroll.So first of all.Lets create a component Header.I am pasting the bootstrap simple code for Header just to keep things as simple as I can.To use the html css of bootstrap we have to first convert it in jsx which you can easily do by going to this website.

htmltojsx
Simply paste the code copied from bootstrap navbar and paste it on this website.It will return you with jsx code.
Header.jsx

 <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <a className="navbar-brand" href="#">Navbar</a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon" />
        </button>
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav mr-auto">
            <li className="nav-item active">
              <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">Link</a>
            </li>
            <li className="nav-item dropdown">
              <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                <a className="dropdown-item" href="#">Action</a>
                <a className="dropdown-item" href="#">Another action</a>
                <div className="dropdown-divider" />
                <a className="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li className="nav-item">
              <a className="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <form className="form-inline my-2 my-lg-0">
            <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>

and its css will be

Header.css

.navbar {
    background-color: #a8dcef;
    height: 105px;
    width: 100%;
    position: fixed;
    z-index: 1000;
    border-bottom: 1px solid rgb(192, 192, 192);
}

Now we will use useEffect hook to

Read the scroll position and store it in the data attribute.
Listen for new scroll events.
Update scroll position.

So this is the code you have to paste it in useEffect hook in Header.jsx

useEffect(() => {
        // The debounce function receives our function as a parameter
        const debounce = (fn) => {
            // This holds the requestAnimationFrame reference, so we can cancel it if we wish
            let frame;
            // The debounce function returns a new function that can receive a variable number of arguments
            return (...params) => {
                // If the frame variable has been defined, clear it now, and queue for next frame
                if (frame) {
                    cancelAnimationFrame(frame);
                }
                // Queue our function call for the next frame
                frame = requestAnimationFrame(() => {
                    // Call our function and pass any params we received
                    fn(...params);
                });
            }
        };

        // Reads out the scroll position and stores it in the data attribute
        // so we can use it in our stylesheets
        const storeScroll = () => {
            document.documentElement.dataset.scroll = window.scrollY;
        }

        // Listen for new scroll events, here we debounce our `storeScroll` function
        document.addEventListener('scroll', debounce(storeScroll), { passive: true });

        // Update scroll position for first time
        storeScroll();
    })

Now Last Step.For changing the styling we can use this css.In Header.css

html:not([data-scroll="0"]) .navbar {
    position: fixed;
    top: 0;
    width: 100%;
    /* background-color: #fff; */
    opacity: 0.9;
    box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.5);
    transition: 0.4s linear;
}

Note:-

And thats it.Now you will see a change when you scroll down.

This format can be used to change any class on scroll the format is

html:not([data-scroll="0"]) .Here Class name {
    /* Write the code you want to change */
}

Share it if you found it helpful!
Let me know in the comments if you find any difficulty.I will be there to help you.
Thanks.

Using Drop Down Picker in React Native Expo Version 36 SDK

Muhammad Bilal Mohib-ul-Nabi — Wed, 15 Dec 2021 13:36:53 +0000

Dec 14 '20

for expo use this works for me even is there a warn but works!

import { Picker } from 'react-native'
// state
 const [picked, setPicked] = useState(1.15);

 <Picker
        selectedValue={picked}
        style={{ height: 50, width: 100 }}
        onValueChange={(itemValue, itemIndex) =>
          setPicked(itemValue)
        }>

        <Picker.Item label="Canda 5%" value={1.05} />
        <Picker.Item label="Japan 8%" value={1.08} />

…

Open Full Answer

For Expo this will work.The React native picker suggested in their expo documentation was not working for me over version of 36 react native expo sdk.

import { Picker } from 'react-native' 
// state
 const [picked, setPicked] = useState(1.15);

 <Picker
        selectedValue={picked}
        style={{ height: 50, width: 100 }}
        onValueChange={(itemValue, itemIndex) =>
          setPicked(itemValue)
        }>

        <Picker.Item label="Canda 5%" value={1.05} />
        <Picker.Item label="Japan 8%" value={1.08} />
        <Picker.Item label="USA 10%" value={1.10} />
        <Picker.Item label="Egypt 14%" value={1.14} />
        <Picker.Item label="Saudi Arabia 15%" value={1.15} />
        <Picker.Item label="China 16%" value={1.16} />
        <Picker.Item label="Algeria 17%" value={1.17} />
        <Picker.Item label="18%" value={1.18} />
        <Picker.Item label="German 19%" value={1.19} />
        <Picker.Item label="German 19%" value={1.20} />
</Picker>

Answer: How to resolve the error on 'react-native start'

Muhammad Bilal Mohib-ul-Nabi — Tue, 14 Dec 2021 11:46:26 +0000

Sep 26 '19

386

I just got a similar error for the first time today. It appears in \node_modules\metro-config\src\defaults\blacklist.js, there is an invalid regular expression that needed changed. I changed the first expression under sharedBlacklist from:

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

to:

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,

…

Open Full Answer

I just got a similar error for the first time today. It appears in \node_modules\metro-config\src\defaults\blacklist.js, there is an invalid regular expression that needed changed. I changed the first expression under sharedBlacklist from:

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

to:

var sharedBlacklist = [ /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/
];

Copied from https://stackoverflow.com/a/58122821/13161180
Credit goes to Clem

Watch mode is not supported in this environment Error!

Muhammad Bilal Mohib-ul-Nabi — Tue, 14 Dec 2021 10:00:24 +0000

https://github.com/expo/expo-cli/issues/1589#issuecomment-591675826

How to create an object with dynamic keys in JavaScript?

Muhammad Bilal Mohib-ul-Nabi — Tue, 14 Dec 2021 05:31:41 +0000

To create object with dynamic key the format is

const key = "This is key"
const tempObj = {
  [key]:60,
  price:'99'
}
console.log(tempObj.key) //Output = 60

Here is another example:

const key = 'title';
const value = 'JavaScript';

const course = {
[key]: value,
price: '$99'
};

console.log(course.title); // JavaScript
console.log(course.price); // $99

The value of the key can be any expression as long as it is wrapped in brackets []:

const key = 'title';
const value = 'JavaScript';

const course = {
    [key + '2']: value,
    price: '$99'
};

console.log(course.title2);  // JavaScript
console.log(course.price);  // $99

In this way you can create object with dynamic keys in javascript.
Thank you for reading.

Getting Unique Values and removing repeted items from an array

Muhammad Bilal Mohib-ul-Nabi — Mon, 13 Dec 2021 12:44:34 +0000

Mar 7 '16

These days, you can use ES6's Set data type to convert your array to a unique Set. Then, if you need to use array methods, you can turn it back into an Array:

var arr = ["a", "a", "b"];
var uniqueSet = new Set(arr); // {"a", "b"}
var uniqueArr =

…

Open Full Answer

Rendering Local/Static Images in Next JS

Muhammad Bilal Mohib-ul-Nabi — Mon, 13 Dec 2021 04:14:29 +0000

To render a static image in Next JS.

Always store images in the folder called public under the src directory.
To render an image if image name was img.png.Then it will be available like this.

<img src={`img.png`} alt="Person Avatar" />

Thats it.
For more info
Original Source

Configuring c/c++ on windows for VS Code.

Muhammad Bilal Mohib-ul-Nabi — Mon, 06 Dec 2021 22:52:27 +0000

Follow these steps to configure VS code for c/c++ on windows.

1) Installing Compiler

To install gcc compiler for windows you can use MSYS2.It consists of bundle of tools and will install gcc also.
You can download this from the link below.
msys2

Installation of MSYS2

Download the installer: msys2-x86_64-20211130.exe
Run the installer. MSYS2 requires 64 bit Windows 7 or newer.
Enter your desired Installation Folder (short ASCII-only path on a NTFS volume, no accents, no spaces, no symlinks, no subst or network drives, no FAT).
When done, tick Run MSYS2 now.
Once the msys2 terminal is open enter the below command

pacman -Syu

Enter y when it asks to proceed with installation.
At the end the terminal will be closed automatically.

Now again run the terminal msys2 by searching from start menu. Run the following command to update the rest of the base packages.

pacman -Su

Now You have to install some tools and the mingw-w64 GCC to start compiling: Run the following command to install them

pacman -S --needed base-devel mingw-w64-x86_64-toolchain

When it asks whether default all or it allows you to enter a number.Better is press the enter key and it will install all the packages.

To start building using the mingw-w64 GCC, close this window and run "MSYS MinGW 64-bit" from Start menu. Now you can call make or gcc to build software for Windows.

2) Install c/c++ extension on VS code.

Programming Advice

Muhammad Bilal Mohib-ul-Nabi — Mon, 06 Dec 2021 22:27:51 +0000

Programming requires patience.Patience to think,patience to implement,patience to practise and the patience to deal with errors until they are resolved.
Programming requires Focus.Focus on what you are thinking,focus on how you have to think,focus on the way you are implementing and the constant focus on the problem you got.
Programming requires to be knowledgable.It requires a deep understanding of the concepts and understanding before you can implement whats going on in your mind.

Programming isnt difficult but keeping pace with the technology when its constantly changing is a way one can make a better progress in this world.

Tic Tac Toe C++

Muhammad Bilal Mohib-ul-Nabi — Sun, 18 Jul 2021 15:21:30 +0000

This is my impelementation for tic-tac-toe in c++.The code is tested in standard c++.If you find any problems just let me know.Thanks.

#include <iostream>
#include<cstdlib>
#include<string>
using namespace std;
void start()
{
    int number;
    cout << "____________________________________________________________________________________________________" << endl;
    cout << "____________________________OK WLCOME TO THE TIC-TAC-TOE GAME_______________________________________" << endl;
    cout << "THE TOSS IS GOING TO BE DONE\n";
    cout << "____________________________________________READY___________________________________________________" << endl;
    cout << "Decide HEAD OR TAIL\n";
    cout << "press any random number:\t";
    cin >> number;
    switch (number % 2)
    {
    case 0:cout << "HEAD Won the toss\n";
        break;
    case 1:cout << "TAIL Won the toss\n";
        break;
    }
    cout << "_________________________OK START YOUR GAME NOW\n";
}

void design()
{
    system("CLS");
    char arr[3][3] = { { '1','2','3' },{ '4','5','6'},{ '7','8','9'} };
    for (int i = 0; i < 3; i++)
    {
        for (int j = 0; j < 3; j++)
        {
            cout << "|" << arr[i][j] << "|";

        }
        cout << endl;
    }
}

int main()
{
    string name1, name2;
    start();
    system("pause");
    system("CLS");
    cout << "Enter your name player 1 which won the toss\n";
    cin >> name1;
    cout << "Enter your name player 2 who lost the toss\n";
    cin >> name2;
    cout << "Player 1 is'" << name1 << "'choose head or tail\n\n";
    cout << "Player 2 is'" << name2 << "'enter any number\n\n";
    cout << "X is for player " << name1 << endl;
    cout << "# is for player " << name2 << endl;
    design();
    char arr[3][3] = { { '1','2','3' },{ '4','5','6'},{ '7','8','9'} };
    int count = 0, isGameOver = 0, number;
    bool wrong = false;
    while (count < 9 && isGameOver != 1)
    {
        switch (count % 2)
        {
        case 0:
        {
            count++;
            cout << "Its Player________________________________ "<< name1<<"___________________________turn\n";
            cout << "                                                                                          " << name1 << " has X SYMBOL\n";
            cout << "                                                                                          " << name2 << " has # SYMBOL\n";
            cout << "Enter the number\n";
            cin >> number;
            switch (number)
            {
            case 1:
            {
                if (arr[0][0] == 'X' || arr[0][0] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[0][0] = 'X';
                }
                break;
            }
            case 2:
            {
                if (arr[0][1] == 'X' || arr[0][1] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[0][1] = 'X';
                }
                break;
            }
            case 3:
            {
                if (arr[0][2] == 'X' || arr[0][2] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[0][2] = 'X';
                }
                break;
            }
            case 4:
            {
                if (arr[1][0] == 'X' || arr[1][0] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                {
                    arr[1][0] = 'X';
                }
                break;
            }
            case 5:
            {
                if (arr[1][1] == 'X' || arr[1][1] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[1][1] = 'X';
                }
                break;
            }
            case 6:
            {
                if (arr[1][2] == 'X' || arr[1][2] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[1][2] = 'X';
                }
                break;
            }
            case 7:
            {
                if (arr[2][0] == 'X' || arr[2][0] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[2][0] = 'X';
                }
                break;
            }
            case 8:
            {
                if (arr[2][1] == 'X' || arr[2][1] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[2][1] = 'X';
                }
                break;
            }
            case 9:
            {
                if (arr[2][2] == 'X' || arr[2][2] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[2][2] = 'X';
                }
                break;
            }
            }
            system("CLS");
            for (int i = 0; i < 3; i++)                                                                         
            {
                for (int j = 0; j < 3; j++)
                {
                    cout << "|" << arr[i][j] << "|";

                }
                cout << endl;
            }

            if (((arr[0][0] == 'X') && (arr[0][1] == 'X') && (arr[0][2] == 'X')) ||
                ((arr[1][0] == 'X') && (arr[1][1] == 'X') && (arr[1][2] == 'X')) ||
                ((arr[2][0] == 'X') && (arr[2][1] == 'X') && (arr[2][2] == 'X')) ||
                ((arr[0][2] == 'X') && (arr[1][2] == 'X') && (arr[2][2] == 'X')) ||
                ((arr[0][1] == 'X') && (arr[1][1] == 'X') && (arr[2][1] == 'X')) ||
                ((arr[0][0] == 'X') && (arr[1][0] == 'X') && (arr[2][0] == 'X')) ||
                ((arr[0][0] == 'X') && (arr[1][1] == 'X') && (arr[2][2] == 'X')) ||
                ((arr[0][2] == 'X') && (arr[1][1] == 'X') && (arr[2][0] == 'X')))
            {
                cout << "player     ________________"<< name1<<"   _________________________wins";
                isGameOver = 1;
            }
            else if(count==9)
            {
                cout << "\n\n\nDRAW has occured";
                isGameOver = 1;

            }
            break;
        }

        case 1:
        {
            count++;
            cout <<"Its Player ____________________________ "<<name2<<" ____________________________________ turn\n";
            cout << "                                                                                          " << name2 << " has # SYMBOL\n";
            cout << "                                                                                          " << name1 << " has X SYMBOL\n";
            cout << "Enter the number\n";
            cin >> number;
            switch (number)
            {
            case 1:
            {
                if (arr[0][0] == 'X' || arr[0][0] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                  arr[0][0] = '#';
                }
                break;
            }
            case 2:
            {
                if (arr[0][1] == 'X' || arr[0][1] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[0][1] = '#';
                }
                break;
            }
            case 3:
            {
                if (arr[0][2] == 'X' || arr[0][2] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[0][2] = '#';
                }
                break;
            }
            case 4:
            {
                if (arr[1][0] == 'X' || arr[1][0] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[1][0] = '#';
                }
                break;
            }
            case 5:
            {
                if (arr[1][1] == 'X' || arr[1][1] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[1][1] = '#';
                }
                break;
            }
            case 6:
            {
                if (arr[1][2] == 'X' || arr[1][2] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[1][2] = '#';
                }
                break;
            }
            case 7:
            {
                if (arr[2][0] == 'X' || arr[2][0] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[2][0] = '#';
                }
                break;
            }
            case 8:
            {
                if (arr[2][1] == 'X' || arr[2][1] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[2][1] = '#';
                }
                break;
            }
            case 9:
            {
                if (arr[2][2] == 'X' || arr[2][2] == '#')
                {
                    cout << "Enter another number";
                    cout << "Enter the number\n";
                    cin >> number;
                    wrong = true;
                }
                else
                {
                    arr[2][2] = '#';
                }
                break;
            }
            default:cout << "Enter right number please";
            }
            system("CLS");
            for (int i = 0; i < 3; i++)
            {
                for (int j = 0; j < 3; j++)
                {
                    cout << "|" << arr[i][j] << "|";

                }
                cout << endl;
            }

            if (((arr[0][0] == 'o') && (arr[0][1] == 'o') && (arr[0][2] == 'o')) ||
                ((arr[1][0] == 'o') && (arr[1][1] == 'o') && (arr[1][2] == 'o')) ||
                ((arr[2][0] == 'o') && (arr[2][1] == 'o') && (arr[2][2] == 'o')) ||
                ((arr[0][2] == 'o') && (arr[1][2] == 'o') && (arr[2][2] == 'o')) ||
                ((arr[0][1] == 'o') && (arr[1][1] == 'o') && (arr[2][1] == 'o')) ||
                ((arr[0][0] == 'o') && (arr[1][0] == 'o') && (arr[2][0] == 'o')) ||
                ((arr[0][0] == 'o') && (arr[1][1] == 'o') && (arr[2][2] == 'o')) ||
                ((arr[0][2] == 'o') && (arr[1][1] == 'o') && (arr[2][0] == 'o')))
            {
                cout << "player_________________________"<<name2<<"__________________wins";
                isGameOver = 1;
            }
            else if(count==9)
            {
                cout << "\n\n\nDRAW has occured";
                isGameOver = 1;
            }
            break;
        }
        }
    }
    return 0;
}