Spring Boot

CalcController.java

package com.javatest.demo;

import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

class MyCalc {
    private int num1;
    private int num2;

    public int getNum1() {
        return num1;
    }
    public void setNum1(int num1) {
        this.num1 = num1;
    }
    public int getNum2() {
        return num2;
    }
    public void setNum2(int num2) {
        this.num2 = num2;
    }
    
    @Override
    public String toString() {
        return "MyCalc [num1=" + num1 + ", num2=" + num2 + "]";
    }
}

@RestController
public class CalcController {


    @RequestMapping("test")
    public String test() {
        return "Testing....";
    }

    /** Read query params */
    @RequestMapping("mycalc")
    @GetMapping
    public String getMet(@RequestParam("num1") int x, @RequestParam int y) {
        return String.format("%s + %s = %s", x, y, x+y);
    }

    /** Read raw json data */
    @PostMapping("mycalc")
    public String postMet(@RequestBody MyCalc obj) {
        int x = obj.getNum1();
        int y = obj.getNum2();

        return String.format("%s - %s = %s", x, y, x - y);
    }

    /** Read form data */
    @PutMapping("mycalc")
    public String putMet(
        @RequestParam("num1") int x,
        @RequestParam("num2") int y) {
        return String.format("%s * %s = %s", x, y, x * y);
    }

    /** Read from raw json */
    @DeleteMapping("mycalc")
    public String deleteMet(@RequestBody MyCalc obj) {
        int x = obj.getNum1();
        int y = obj.getNum2();
        return String.format("%s / %s = %s", x, y, x / y);
    }

}

src/main/resources/application.properties

spring.datasource.url=jdbc:mysql://localhost:3306/<databasename>
spring.datasource.username=<username>
spring.datasource.password=<password>
spring.datasource.driverClassName=com.mysql.cj.jdbc.Driver

User.java (POJO/DAO/JPA)

package com.javatest.demo;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;

@Entity
@Table(name="users")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String age;
    private String city;
    private int quota;

    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getAge() {
        return age;
    }
    public void setAge(String age) {
        this.age = age;
    }
    public String getCity() {
        return city;
    }
    public void setCity(String city) {
        this.city = city;
    }
    public int getQuota() {
        return quota;
    }
    public void setQuota(int quota) {
        this.quota = quota;
    }


    
    // getters and setters

    
}

UserController.java

package com.javatest.demo;


import java.util.List;

import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.data.jpa.repository.JpaRepository;

interface UserRepository extends JpaRepository<User, Long> {
    // Custom queries can be defined here
}

@RestController
@RequestMapping("users")
public class UserController {
    
    private final UserRepository userRepository;
    
    public UserController(UserRepository userRepository) {
        this.userRepository = userRepository;
    }

    @RequestMapping("")
    public String index() {
        return "I am from index";
    }

    @RequestMapping("listing")
    public List<User> listing() {
        // List<User> users = new ArrayList<>();
        return userRepository.findAll();
    }

    @DeleteMapping("delete/{id}")
    public String deleteUser(@PathVariable Long id) {
        // Check if the user with the specified ID exists
        if (userRepository.existsById(id)) {
            userRepository.deleteById(id);
            return String.format("User %s is deleted successfully", id);
        } else {
            // Handle the case when the user does not exist (e.g., return an error response)
            // You can throw an exception or return an appropriate response based on your application's requirements.
        }
        return "";
    }

    @PostMapping("create")
    public User createUser(@RequestBody User user) {
        return userRepository.save(user);
    }


    @GetMapping("get-single/{id}")
    public User getUserById(@PathVariable Long id) {
        // Use the UserRepository to fetch the user by ID
        return userRepository.findById(id).orElse(null);
    }

    @PutMapping("/update/{id}")
    public User updateUser(@PathVariable Long id, @RequestBody User updatedUser) {
        // Check if the user with the specified ID exists
        userRepository.findById(id).orElse(null);

        // Set the ID of the updated user to the specified ID
        updatedUser.setId(id);

        // Save the updated user to the database
        return userRepository.save(updatedUser);
    }

}

DemoApplication.java (Run this file to serve spring boot application)

package com.javatest.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}

}

File Structure

.
├── HELP.md
├── mvnw
├── mvnw.cmd
├── pom.xml
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── javatest
│   │   │           └── demo
│   │   │               ├── CalcController.java
│   │   │               ├── DemoApplication.java
│   │   │               ├── User.java
│   │   │               └── UserController.java
│   │   └── resources
│   │       ├── application.properties
│   │       ├── static
│   │       └── templates
│   └── test
│       └── java
│           └── com
│               └── javatest
│                   └── demo
│                       └── DemoApplicationTests.java
└── target
    ├── classes
    │   ├── application.properties
    │   └── com
    │       └── javatest
    │           └── demo
    │               ├── CalcController.class
    │               ├── DemoApplication.class
    │               ├── MyCalc.class
    │               ├── User.class
    │               ├── UserController.class
    │               └── UserRepository.class
    └── test-classes
        └── com
            └── javatest
                └── demo
                    └── DemoApplicationTests.class

23 directories, 18 files

POC

VSCode Extesnsions

Spring Boot Web + JPA + MySQL

Got it ✅
Let’s build this from scratch, step by step, including MySQL dependency so you’re future-ready but you can still just run Hello World without DB config.


🚀 Spring Boot Hello World (with future MySQL support) in VS Code

1. Prerequisites

Check you have these installed:

java -version      # Java 17 or 21 recommended
mvn -v             # Maven installed

VS Code Extensions:

  • Extension Pack for Java
  • Spring Boot Extension Pack (optional but helpful)

2. Generate Spring Boot Project

Option A (VS Code)

  1. Press Ctrl+Shift+P → search Spring Initializr: Create a Maven Project.
  2. Select:
    • Spring Boot version: 3.x (latest)
    • Project: Maven
    • Language: Java
    • Group Id: com.example
    • Artifact Id: hello
    • Dependencies: Spring Web, Spring Data JPA, MySQL Driver
  3. It will create and open the project in VS Code.

Option B (Browser)

Go to 👉 https://start.spring.io
Choose:

  • Maven Project, Java, Spring Boot 3.x
  • Group: com.example
  • Artifact: hello
  • Dependencies: Spring Web, Spring Data JPA, MySQL Driver
    Download → unzip → open folder in VS Code.

3. Project Structure

You’ll see:

hello/
 ├─ src/main/java/com/example/hello/
 │   ├─ HelloApplication.java
 │   └─ controller/HelloController.java   (we’ll create)
 ├─ src/main/resources/
 │   ├─ application.properties
 ├─ pom.xml

4. Minimal pom.xml

Your pom.xml should contain (important part only):

<dependencies>
    <!-- Spring Web for REST APIs -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- MySQL JDBC Driver -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-j</artifactId>
        <scope>runtime</scope>
    </dependency>

    <!-- JPA (for DB support in future) -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>

    <!-- Testing -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

⚡ Even if MySQL is not configured, the app will still run fine.


5. Application Entry Point

Generated file → HelloApplication.java:

package com.example.hello;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class HelloApplication {

    public static void main(String[] args) {
        SpringApplication.run(HelloApplication.class, args);
    }
}

6. Create Controller

Create folder controller under com.example.hello.
File: HelloController.java

package com.example.hello.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "Hello World";
    }
}

7. Run the Application

In VS Code terminal:

mvn spring-boot:run

Or run HelloApplication.java directly via Run → Start Debugging.


8. Test in Browser / Curl

Visit:

http://localhost:8080/hello

Output:

Hello World

9. (Future) MySQL Connection Setup

When you’re ready to use MySQL, edit src/main/resources/application.properties:

spring.datasource.url=jdbc:mysql://localhost:3306/mydb
spring.datasource.username=root
spring.datasource.password=secret

spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect

Then you can create Entity + Repository classes for DB operations.


✅ That’s it — you now have:

  • A working Hello World REST API (/hello)
  • MySQL support already included for future use

SQL DQL Test 2

  1. list all selling in 2019
  2. count all selling year wise order by selling
  3. select all selling in march month of year 2019
  4. count selling in 22 week of year 2020
  5. select all selling from 1st Feb 2019 to 31st Mar 2019
  6. select all customers who place orders in 2019
  7. select all customers from USA who placed order in 2019
  8. select all customers whose order is on hold
  9. select all customers who placed order in march month only
  10. select top 5 customers from USA (who has maximum orders from country USA)

SQL DQL Test 1

  1. select employees in descending order – salary
  2. select all employees from Mumbai
  3. select all employees having salary more than average salary
  4. select sum of salary from table
  5. select all unique address
  6. select details, salary from table
    (details should be concatenation of name and address)
  7. select names of employees having max salary
  8. select employees having 2nd max salary
  9. count employees by address, order by employee count
    e.g. select count(name,address) from employee
  10. show count of employees from nagpur only
  11. select all employees whose names starts or ends with vowels
  12. find employees having max salary in particular city
  13. select top 5 salaried employees
  14. select 2nd highest salaried employees
  15. show cities having total salary more than 200000
  16. Show all students who appeared for exam
  17. show student, subject and total marks of students whose total marks are more than 80

PHP CRUD CHEAT SHEET

MySQL Schema

CREATE TABLE `users` (
  `id` int NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `age` int NOT NULL,
  `city` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB;

REST API

rest_api.php

<?php

header('Access-Control-Allow-Origin: *');

$servername = "localhost";
$username = "diituser";
$password = "%TGBbgt5";
$dbname = "ecom";

try {
  $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {
  echo "Error: " . $e->getMessage();
}




switch($_SERVER['REQUEST_METHOD']) {
    case 'GET':

        if(isset($_REQUEST['id']) && $_REQUEST['id'] != '') {
            $id = $_REQUEST['id'];
            $sql = "SELECT * FROM users WHERE id = $id";
            $stmt = $conn->prepare($sql);
            $stmt->execute();
            $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
            $records = $stmt->fetch();
        } else {
            $sql = "SELECT * FROM users";
            $stmt = $conn->prepare($sql);
            $stmt->execute();
            $result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
            $records = $stmt->fetchAll();
        }
        echo json_encode($records);

    case 'DELETE':

        $data = json_decode(file_get_contents('php://input'), true);

        $id = $data["id"];
        $sql = "DELETE FROM users WHERE id = $id";
        $stmt = $conn->prepare($sql);
        $stmt->execute();
        echo json_encode(["result" => "success"]);

    case 'POST':

        $data = json_decode(file_get_contents('php://input'), true);

        $name = $data["name"];
        $age = $data['age'];
        $city = $data['city'];
        $sql = "INSERT INTO `users` (`id`, `name`, `age`, `city`) VALUES (NULL, '$name', '$age', '$city'); ";
        $stmt = $conn->prepare($sql);
        $stmt->execute();
        echo json_encode(["result" => "success"]);

    case 'PUT':

        $data = json_decode(file_get_contents('php://input'), true);

        $id = $data['id'];
        $name = $data["name"];
        $age = $data['age'];
        $city = $data['city'];
        $sql = "UPDATE users SET `name` = '$name', age = '$age', city = '$city' WHERE id = $id";
        $stmt = $conn->prepare($sql);
        $stmt->execute();
        echo json_encode(["result" => "success"]);
}


$conn = null;

FRONT END

script.js

const api_url = "rest_api.php";
function loadData(records = []) {
  var table_data = "";
  for (let i = 0; i < records.length; i++) {
    table_data += `<tr>`;
    table_data += `<td>${records[i].name}</td>`;
    table_data += `<td>${records[i].age}</td>`;
    table_data += `<td>${records[i].city}</td>`;
    table_data += `<td>`;
    table_data += `<a href="edit.php?id=${records[i].id}"><button class="btn btn-primary">Edit</button></a>`;
    table_data += "&nbsp;&nbsp;";
    table_data += `<button class="btn btn-danger" onclick=deleteData('${records[i].id}')>Delete</button>`;
    table_data += `</td>`;
    table_data += `</tr>`;
  }
  //console.log(table_data);
  document.getElementById("tbody").innerHTML = table_data;
}
function getData() {
  fetch(api_url)
    .then((response) => response.json())
    .then((data) => {
      console.table(data);
      loadData(data);
    });
}
function getDataById(id) {
  fetch(`${api_url}?id=${id}`)
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      document.getElementById("id").value = data.id;
      document.getElementById("name").value = data.name;
      document.getElementById("age").value = data.age;
      document.getElementById("city").value = data.city;
    });
}
function postData() {
  var name = document.getElementById("name").value;
  var age = document.getElementById("age").value;
  var city = document.getElementById("city").value;
  data = { name: name, age: age, city: city };
  fetch(api_url, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  })
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
      window.location.href = "index.php";
    });
}
function putData() {
  var id = document.getElementById("id").value;
  var name = document.getElementById("name").value;
  var age = document.getElementById("age").value;
  var city = document.getElementById("city").value;
  data = { id: id, name: name, age: age, city: city };
  fetch(api_url, {
    method: "PUT",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  })
    .then((response) => response.json())
    .then((data) => {
      console.table(data);
      window.location.href = "index.php";
    });
}
function deleteData(id) {
  user_input = confirm("Are you sure you want to delete this record?");
  if (user_input) {
    fetch(api_url, {
      method: "DELETE",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ id: id }),
    })
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        window.location.reload();
      });
  }
}

index.php

<html>

<head>
    <title>Project</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</head>

<body class="d-flex flex-column h-100 container">
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-link active" aria-current="page" href="#">Listing</a>
                        <a class="nav-link" href="add.php">Add New</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <table class="table table-striped table-hover text-center">
        <thead>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
            <th>Action</th>
        </thead>
        <tbody id="tbody">
        </tbody>
        <tfoot>
        </tfoot>
    </table>
    <footer class="footer mt-auto py-3 bg-light">
        <div class="container text-center">
            <span class="text-muted">right &copy; 2021</span>
        </div>
    </footer>
</body>
<script src="script.js"></script>
<script>
    getData();
</script>

</html>

add.php

<html>

<head>
    <title>Project</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</head>

<body class="d-flex flex-column h-100 container">
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-link" href="index.php">Listing</a>
                        <a class="nav-link active" aria-current="page" href="add.php">Add New</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <h3>Add Document</h3>
    <form onsubmit="return false;">
        <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" autofocus>
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Age</label>
            <input type="text" class="form-control" id="age">
        </div>
        <div class="mb-3">
            <label for="city" class="form-label">City</label>
            <input type="text" class="form-control" id="city">
        </div>
        <button class="btn btn-primary" onclick="return postData()">Submit</button>
        <a href="index.php" class="btn btn-primary">Cancel</a>
    </form>
    <footer class="footer mt-auto py-3 bg-light">
        <div class="container text-center">
            <span class="text-muted">right &copy; 2021</span>
        </div>
    </footer>
</body>
<script src="script.js"></script>
<script>
</script>

</html>

edit.php

<html>

<head>
    <title>Project</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</head>

<body class="d-flex flex-column h-100 container">
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-link" href="index.php">Listing</a>
                        <a class="nav-link active" aria-current="page" href="add.php">Add New</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <h3>Edit Document</h3>
    <form onsubmit="return false;">
        <input type="hidden" class="form-control" id="id">
        <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" autofocus>
        </div>
        <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Age</label>
            <input type="text" class="form-control" id="age">
        </div>
        <div class="mb-3">
            <label for="city" class="form-label">City</label>
            <input type="text" class="form-control" id="city">
        </div>
        <button class="btn btn-primary" onclick="return putData()">Update</button>
        <a href="index.php" class="btn btn-primary">Cancel</a>
    </form>
    <footer class="footer mt-auto py-3 bg-light">
        <div class="container text-center">
            <span class="text-muted">right &copy; 2021</span>
        </div>
    </footer>
</body>
<script src="script.js"></script>
<script>
    const urlParams = new URLSearchParams(window.location.search);
    const id = urlParams.get('id');
    getDataById(id);
</script>

</html>

Deploy Flask App on Heroku

mkdir app
cd app

app.py

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route("/")
def index():
    return "Hello World!"

@app.route('/add')
def add():
    num1 = int(request.args.get('num1'));
    num2 = int(request.args.get('num2'));

    return f"{num1} + {num2} = {num1 + num2}"

#if __name__ == "__main__":
    #app.run(debug=True);
    #app.run(host="0.0.0.0", port=int("1234"), debug=True)

runtime.txt

python-3.10.8

Procfile

web: gunicorn app:app

requirements.txt

click==8.0.3
colorama==0.4.4
Flask==2.0.2
Flask-Cors==3.0.10
gunicorn==20.1.0
itsdangerous==2.0.1
Jinja2==3.0.3
MarkupSafe==2.0.1
PyMySQL==1.0.2
six==1.16.0
Werkzeug==2.0.2

OR

You can output all dependencies using following command

python -m pip freeze > requirements.txt
heroku login

#onetime
heroku create <appname>
heroku git:remote -a <appname>
git init

#repeat whenever you make changes
git add .
git commit -m 'heroku push'
git push heroku master

Test API

https://myflaskapp2022.herokuapp.com/
https://myflaskapp2022.herokuapp.com/add?num1=5&num2=9

Troubleshoot

heroku logs --tail --app eflask-app-dusra

If still it is not working please do check spellings of files

https://devcenter.heroku.com/articles/buildpacks

React Cheat Sheet

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Create new react project

npm -v
npm i npx
npx create-react-app my-react-app
cd my-react-app
code .

Run from terminal

npm start

OR

npm start --port 8000

Open Browser and run the react app http://localhost:3000 OR http://ipaddress:3000

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <>
      <h1>Test App</h1>
    </>
  );
}

export default App;

Create new component and use click and change event

src/components/Add.js

import { Fragment, useState } from "react";


function Add () {

    const [ num1, setNum1 ] = useState(0);
    const [ num2, setNum2 ] = useState(0);
    const [ result, setResult ] = useState(0);

    function addFun() {
        setResult(num1 + num2);
    }

    return (<Fragment>
        <h1>Addition of two numbers</h1>
        <input type="text" onChange={ e => setNum1(parseInt(e.target.value)) }/>
        <input type="text" onChange={ e => setNum2(parseInt(e.target.value)) } />
        <button onClick={addFun}>Get Addtion</button>
        <div>{result}</div>
    </Fragment>);
}

export default Add;

Add this Add component in App component as tag <Add />

import './App.css';
import Add from './components/Add';

function App() {
  return (
    <>
      <Add />
      <Add />
      <h1>Test App</h1>
    </>
  );
}

export default App;

React Properties

App.js

import './App.css';
import Add from './components/Add';

function App() {
  return (
    <>
      <Add x="5" y="6"/>
      <Add x="7" y="8"/>
      <h1>Test App</h1>
    </>
  );
}

export default App;

Add.js

import { Fragment, useState } from "react";


function Add (props) {

    const [ num1, setNum1 ] = useState(parseInt(props.x));
    const [ num2, setNum2 ] = useState(parseInt(props.y));
    const [ result, setResult ] = useState(0);

    function addFun() {
        setResult(num1 + num2);
    }

    return (<Fragment>
        <h1>Addition of two numbers</h1>
        <input type="text" onChange={ e => setNum1(parseInt(e.target.value)) }/>
        <input type="text" onChange={ e => setNum2(parseInt(e.target.value)) } />
        <button onClick={addFun}>Get Addtion</button>
        <div>{result}</div>
    </Fragment>);
}

export default Add;

Ajax call in React.js

Create new component Users

components/User.js

import { Fragment } from "react";

function User(props) {

    //object destructoring assignment
    const {id, name, username, email} = props.user;

    return (
        <Fragment>
            <tr>
                <td>{props.user.id}</td> 
                <td>{props.user.name}</td>
                <td>{username}</td>  
                <td>{email}</td>
            </tr>
        </Fragment>
    );

}

export default User;

components/UsersListing.js

import { Fragment, useState } from "react";
import User from "./User";

function UsersListing () {

    const [ users, setUsers ] = useState([]);


    function getUsers() {

        fetch("https://jsonplaceholder.typicode.com/users")
        .then(response => response.json())
        .then(json => {
                console.table(json)
                var rows = [];
                for(let i = 0; i < json.length; i++) {
                    rows.push(<User key={i} user={json[i]}/>);
                }
                setUsers(rows);
            }
        );

    }

    return (<Fragment>
        <h1>Users Listing</h1>
        
        <button onClick={getUsers}>Get Users</button>

        <table border='1'>
            <thead>
                <th>Id</th>
                <th>Name</th>
                <th>Username</th>
                <th>Email</th>
            </thead>
            <tbody>
                {users}
            </tbody>
        </table>
    </Fragment>);
}

export default UsersListing;

Use <UsersListing /> component in App.js JSX to show users list

Routing

https://www.w3schools.com/REACT/react_router.asp

Deploy React App on Github

Create repository on github

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<username>/<repositoryname>.git
git remote set-url origin https://<githubtoken>@github.com/<username>/<repositoryname>.git
#git clone https://<username>:<githubtoken>@github.com/<username>/<repositoryname>.git

To get github token Go To Profile Settings => Developer Settings => Personal Access Token => Generate New Token

npm install gh-pages --save-dev

vim package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "homepage": "https://gitname.github.io/repositoryname",
  "private": true,
  
  
 "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
npm run deploy
git status
git add .
git commit -m 'deploy react on github'
git push
https://<username>.github.io/<repositoryname>/

To publish react app locally

npm run build

verify build directory and index.html file

build index.html

<link rel="manifest" href="manifest.json"/>
<title>React App</title>
<script defer="defer" src="./static/js/main.<yourhash>.js"></script>
<link href="./static/css/main.<yourhash>.css" rel="stylesheet">

You can publish this in xampp htdocs folder

index.html

<!DOCTYPE html>
<html>

<head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react-router@5.0.0/umd/react-router.min.js"></script>
    <script src="https://unpkg.com/react-router-dom@5.0.0/umd/react-router-dom.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous"></script>
</head>

<body class="container-fluid">


    <div id="root"></div>
    <script type="text/babel">

        function Home() {
            return <h1>This is home</h1>
        }

        function UserComponent() {
            return <h1>This is user</h1>
        }

        function AdminComponent() {
            return <h1>This is admin</h1>
        }


        const Router = window.ReactRouterDOM.BrowserRouter;
        const Route = window.ReactRouterDOM.Route;
        const Link = window.ReactRouterDOM.Link;
        const Prompt = window.ReactRouterDOM.Prompt;
        const Switch = window.ReactRouterDOM.Switch;
        const Redirect = window.ReactRouterDOM.Redirect;

        function App() {
            return <>
            <Router>

                <nav>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/admin">Admin</Link>
                        </li>
                        <li>
                            <Link to="/user">Users</Link>
                        </li>
                    </ul>
                </nav>

                <Switch>
                    <Route path='/user' component={UserComponent} />
                    <Route path='/admin' component={AdminComponent} />
                    <Route exact path='/' component={Home} />
                </Switch>
            </Router>
            </>;
        }

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

</body>
</html>

Python CRUD App

Create CRUD Application using Python and MySQL connector

Show following options

1. List All Records
2. Delete
3. Insert
4. Update
5. Search
0. Exit

Write separate function for each functionality

Program should not get exited unless user select 0 option.

You can use any module to connect to MySQL from python

Blockchain Demo

main.js

const SHA256 = require('crypto-js/sha256');

class Block {
	
	constructor(index, timestamp, data, prevHash = '') {
		this.index = index;
		this.timestamp = timestamp;
		this.data = data;
		this.prevHash = prevHash;
		this.hash = this.calculateHash();
	}
	
	calculateHash() {
		return SHA256(this.index + this.prevHash + this.timestamp + JSON.stringify(this.data)).toString();
	}
	
}

class Blockchain {
	constructor() {
		this.chain = [this.createGenesisBlock()];
	}
	
	createGenesisBlock() {
		return new Block(0, "01/01/2021", "Genesis block", "0");
	}
	
	getLatestBlock() {
		return this.chain[this.chain.length - 1];
	}
	
	addBlock(newBlock) {
			newBlock.prevHash = this.getLatestBlock().hash;
			newBlock.hash = newBlock.calculateHash();
			this.chain.push(newBlock);
	}
	
	isChainValid() {
		for(let i=1; i < this.chain.length; i++) {
			const currentBlock = this.chain[i];
			const prevBlock = this.chain[i-1];
			
			if(currentBlock.hash !== currentBlock.calculateHash()) {
				return false;
			}
			
			if(currentBlock.prevHash != prevBlock.hash) {
				return false;
			}
		}
		
		return true;
	}
	
}

let tcoin = new Blockchain();
tcoin.addBlock(new Block(1, "03/09/2021", {amt: 100}));
tcoin.addBlock(new Block(1, "04/09/2021", {amt: 200}));

console.log(tcoin.isChainValid());
console.log(JSON.stringify(tcoin, null, 4));

//tempering data
tcoin.chain[2].amt = 2000;
console.log(JSON.stringify(tcoin, null, 4));
console.log(tcoin.isChainValid());

Proof of Work

const SHA256 = require('crypto-js/sha256');

class Block {
	
	constructor(index, timestamp, data, prevHash = '') {
		this.index = index;
		this.timestamp = timestamp;
		this.data = data;
		this.prevHash = prevHash;
		this.hash = this.calculateHash();
		this.nonce = 0;
	}
	
	calculateHash() {
		return SHA256(this.index + this.prevHash + this.timestamp + JSON.stringify(this.data) + this.nonce).toString();
	}
	
	mineBlock(complexity) {
		while(this.hash.substring(0, complexity) !== Array(complexity + 1).join("0")) {
			this.nonce++;
			//console.log(this.nonce);
			this.hash = this.calculateHash();
		}
		
		console.log(`Block mined: ${this.hash}`);
	}
	
}

class Blockchain {
	constructor(complexity = 0) {
		this.chain = [this.createGenesisBlock()];
		this.complexity = complexity;
	}
	
	createGenesisBlock() {
		return new Block(0, "01/01/2021", "Genesis block", "0");
	}
	
	getLatestBlock() {
		return this.chain[this.chain.length - 1];
	}
	
	addBlock(newBlock) {
			newBlock.prevHash = this.getLatestBlock().hash;
			//newBlock.hash = newBlock.calculateHash();
			newBlock.mineBlock(this.complexity);
			this.chain.push(newBlock);
	}
	
	isChainValid() {
		for(let i=1; i < this.chain.length; i++) {
			const currentBlock = this.chain[i];
			const prevBlock = this.chain[i-1];
			
			if(currentBlock.hash !== currentBlock.calculateHash()) {
				return false;
			}
			
			if(currentBlock.prevHash != prevBlock.hash) {
				return false;
			}
		}
		
		return true;
	}
	
}

let tcoin = new Blockchain(5);

console.log("Mining Block 1...");
tcoin.addBlock(new Block(1, "03/09/2021", {amt: 100}));

console.log("Mining Block 2...");
tcoin.addBlock(new Block(1, "04/09/2021", {amt: 200}));

console.log(JSON.stringify(tcoin, null, 4));

RegEx

Playground for practice https://regexr.com/ https://regex101.com/

Pattern Matching

Regex Syntax

/<regex pattern>/

Starts with wild card character

^

Ends with wcc

$

set enclosed in

[set]
[^invert-set]

only numbers

^[0-9]+$
^\d+$

only characters

^[a-zA-Z]+$
^\w+$

occurance wcc

* => any number of occurrence
? => 0 or 1 occurrence
+ => 1 or many occurrence

e.g. adarsh mishra
to match 1 space /adarsh\smishra/
to match multiple space /adarsh\s+mishra/
to match 0 or many spaces /adarsh\s*mishra/

no special characters

^[0-9a-zA-Z\s]+$

limited characters or numbers

^[0-9]{6}$
^[a-z]{3}$

min / max range characters or numbers

^[0-9]{3,6}$
^[a-z]{3,6}$

OR clause

^(chacha|bhatija)$

case insensitive

//i

global check

//g

search any pattern
(.) e.g. “https://www.youtube.com/watch?v=hw_HpTI_Wkw”.match(/v=(.)/)[1]

will return video id hw_HpTI_Wkw

Assignment

  1. girls / boys name
  2. phone number
  3. find Indian zip code
  4. valid name
  5. email id
  6. 8-12 character password
  7. aadhaar number
  8. pancard
  9. name starts with vowels
  10. names ends with vowels
  11. names having only 5 characters
  12. credit card number

Sample Text

1234567890
123453
DAVPS0412P
127836320613
9876543210
098762
xyz@yahoo.com
smita
&UJMmju7
shailesh
143258761937
priyanka
abc@gmail.com
112096851365
%TGBbgt5
priya