Expriment-1

Basics of GitHub operations such as an account creation, create

push and pull repository between GitHub and Git local
repository.

Step1: Open GitHub official website.

Step2: create an account by clicking on sign in on GitHub.

Step3: follow the screen instruction to complete sign in.

Step4: After creating your account, verify your email and sign in with your credentials.
Step5: Now click in profile and go to your repositories.

Step6: click on new to create new repository.

Step7: provide a name for your repository and check the ‘add Readme file’ and click on
create repository.

Step8: go to desktop and create a folder with some dummy files.

Step9: Launch command prompt or git bash and navigate to the created folder.

Note: you must add your name and email in git bash and the ssh keys to your Git Hub
account before performing any git operation.
Step10: Use the following command to initialize repository.
git init

Step11: Now add all the files on tracking position using following command.

git add -A

Step12: Now add commit all the files using following command.

git commit -m “this is first commit”

Step13: now add the remote repo link of the GitHub to connect the folder with the GitHub
repository using the following command.

git remote add <name> <url>

Step14: now push the repository using the following command.

git push <name> <branch>

Step15: the file will appear on the GitHub.

Step16: click on add new file >create a new file.

Step17: Provide a name to your file and write some content.

Step18: add a commit message and click on commit.

Step19: to get the file on our local system we just added perform pull operation with
following command.

git pull <name> <branch>

 Expriment-4

Implement programmatically navigation between different

components using react Router.
App.js
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import NavBar from "./Components/NavBar";
import Home from "./Components/Navigation/Home";
import About from "./Components/Navigation/About";
import Contact from "./Components/Navigation/Contact";

function App() {
return (
<div>
<BrowserRouter>
<NavBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/About" element={<About />} />
<Route path="/Contact" element={<Contact />} />
</Routes>
</BrowserRouter>
</div>
);
}

export default App;

NavBar.jsx
import React from "react";
import { Link } from "react-router-dom";

const NavBar = () => {

return (
<div>
<nav>
<Link to="/">HOME</Link> <br />
<Link to="/About">ABOUT</Link> <br />
<Link to="/Contact">CONTACT</Link> <br />
</nav>
<hr />
</div>
);
};

export default NavBar;

Home.jsx
import React from "react";

const Home = () => {

return (
<div>
<h2>Welcome to Home Page</h2>
</div>
 );
};
export default Home;
About.jsx
import React from "react";

const About = () => {

return (
<div>
<h2>Welcome to About Page</h2>
</div>
);
};

export default About;

Contact.jsx
import React from "react";

const Contact = () => {

return (
<div>
<h2>Welcome to Contact Page</h2>
</div>
);
};
export default Contact;
Output:
Home page:

About page:

Contact page:
 Expriment-5

Create a form to add new product details to the product

catalogue React.

App.js

import React from "react";

import ProductForm from "./Components/ProductForm";

function App() {

return (

<div>

<ProductForm />

</div>

);

export default App;

ProductForm.jsx
import React, { useState } from "react";

const ProductForm = () => {

const [productName, setProductName] = useState("");

const [description, setDescription] = useState("");

const [price, setPrice] = useState("");

const handleSubmit = (e) => {

e.preventDefault();

console.log("Product Name:", productName);

console.log("Description:", description);
 console.log("Price:", price);

};

return (

<form onSubmit={handleSubmit}>

<h1>Product Catalogue</h1>

<p>

<label>

Product Name :{" "}

<input

type="text"

value={ProductName}

onChange={(e) => setProductName(e.target.value)}

required

/>

</label>

</p>

<p>

<label>

Description :{" "}

<textarea

value={Description}

onChange={(e) => setDescription(e.target.value)}

required

/>

</label>

</p>

<p>

<label>

Price :{" "}

<input

type="number"
 value={Price}

onChange={(e) => setPrice(e.target.value)}

required

/>

</label>

</p>

<button type="submit">Add Product</button>

export default ProductForm;

Output :
 Expriment-6
Create a spring application with spring initializer using dependencies like
spring web, spring data JPA.
To create a project using spring initializer:
Step1: open web browser and go to start.spring.io .
Step2: create project with following information:
1) Project- Maven
2) Language- java
3) Spring Boot- choose a version
4) Dependencies-
 Spring Data JPA
 Spring web
 H2 database
Click “generate” and download the zip file.

Step3: unzip the folder and open IDE like VS code.

To run a project in visual studio.

Step1: in vs code install spring boost extension pack.

Step2: in the project navigate to src/main/java directory a default package

(com/example/demo) is already created with a main java Application file
(DemoApplication.java)
Step3: create a simple JPA entity for a person. This entity will be persisted in the database.
Person.java

package com.example.demo;

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

@Entity
public class Person {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
private int age;
 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 int getAge() {

return age;
}

public void setAge(int age) {

this.age = age;
}
}
Step4: create a repository interface for the PersonRepository entity using Spring Data JPA.
PersonRepository.java

package com.example.demo;

import org.springframework.data.jpa.repository.JpaRepository;

public interface PersonRepository extends JpaRepository<Person, Long> {

// You can add custom queries here if needed
}
Step5: create a RESTful controller to handle HTTP requests related to users.
package com.example.demo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/persons")
public class PersonController {

@Autowired
private PersonRepository personRepository;

@GetMapping
public List<Person> getAllPersons() {
return personRepository.findAll();
}
 @PostMapping
public Person createPerson(@RequestBody Person person) {
return personRepository.save(person);
}
}
Step6: open the src/main/resources/application.properties file and paste the following code
—
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
step7: run your Spring Boot application. You can do this by executing
‘DemoAppllication.java’ file

Step8: use postman to test your end points.

For example , you can send a POST request to ‘http//llocalhost:8080/persons’ with a JSON
payload to create a new person. Or you can GET request to ‘http//localhost:8080/persons’

Output:
 Expriment-7

How to create RESTful service using Spring Boot and install and
test with Postman

Step1: open web browser and go to start.spring.io .

Step2: create project with following information:
5) Project- Maven
6) Language- java
7) Spring Boot- choose a version
8) Dependencies-
 Spring web
Click “generate” and download the zip file.

Step3 unzip the file and open in vs code or any other IDE.
Step4: create a simple REST controller BY adding a new Class, for example,
‘HelloController.java’:

package com.example.demo;

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

@RestController
@RequestMapping("/api")
public class HelloController {

@GetMapping("/hello")
public String sayHello() {
return "Hello, welcome to the RESTful service!";
}
}
  Step5: run your Spring Boot application. You can do this by executing
‘DemoApplication.java’ file

1) Install Postman:
Download and install Postman from https://www.postman.com/downloads/.
2) Open Postman:
Open postman on your device.
3) Make a request:
Set the request type to get. Set URL to http://localhost:8080/api/ hello
4) Send a Request:
Click on “Send” button to send the GET request and view the response
 Expriment-8

Perform CRUD operations on MongoDB using Compass

Step1: download and install MongoDB compass from.

https://www.mongodb.com/try/download/community

Step2: open MongoDB compass and click on ‘connect’ to default URL.

Step3: click on the’ +’ icon to create database.

Step4: Assign the database Name and collection name and click on Create Database.
Step5: open MONGOSH and write the commands in it.

Step6: use the following command to get into the database.

use database_name
Step7: use the following command to create document in the collection

db.collection_name.insertOn

db.collection_name.insertMany([{key:value},{key:value}])

Step8: use the following command to retrieve document from collection

db.collection_name.find({“age”:18})
db.collection_name.find()

Step9: use the following command to update the existing documents in the collection.

db.collection_name.updateOne({key:value},{$set:{key:new_value}})
db.collection name.updateMany({key:value};{$set:key:new_value}})
Step10: use the following command to delete the documents in the database.

db.collection_name.deleteOne({key:value})

db.collection_name.deleteMany({key:value})
 Expriment-9

Perform CRUD operations on MongoDB through REST API using

Spring Boot Starter and view the response on Postman.

Step1: open web browser and go to start.spring.io .

Step2: create project with following information:
1) Project- Maven
2)Language- java
3)Spring Boot- choose a version
4)Dependencies-
 Spring web
 Spring Data MongoDB
Click “generate” and download the zip file.

Step3: unzip and open the file in IDE like vs code

Step4: in your application.properties or application.yml file specify the MongoDB

connection details.
spring.data.mongodb.host=localhost
spring.data.mongodb.port=27017
spring.data.mongodb.database=mydatabase

step5: create a simple entity class representing your MongoDB document for example:
@Id
private String id;
private String name;
private double price;

public Product(String id, String name, double price) {

this.id = id;
this.name = name;
this.price = price;
}
public String getId() {
return id;
}

public void setId(String id) {

this.id = id;
}

public String getName() {

return name;
}
public void setName(String name) {
this.name = name;
}
public double getPrice() {
return price;
}

public void setPrice(double price) {

this.price = price;
}
Step6: create a repository interface by extending MongoRepository. For example

package com.example.demo;
import org.springframework.data.mongodb.repository.MongoRepository;
public interface ProductRepository extends MongoRepository<Product, String> {
}
Step7: Create a REST controller that maps HTTP requests and includes CRUD operations:
// ProductController.java
package com.example.demo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Optional;

@RestController
@RequestMapping("/products")
public class ProductController {
 @Autowired
private ProductRepository itemRepository;

@GetMapping
public List<Product> getAllItems() {
return itemRepository.findAll();
}

@GetMapping("/{id}")
public Optional<Product> getItemById(@PathVariable String id) {
return itemRepository.findById(id);
}
}
@PostMapping
public Product createItem(@RequestBody Product item) {
return itemRepository.save(item);
}

@PutMapping("/{id}")
public Product updateItem(@PathVariable String id, @RequestBody Product item) {
if (itemRepository.existsById(id)) {
item.setId(id);
return itemRepository.save(item);
}
return null; // Handle not found case
}
@DeleteMapping("/{id}")
public void deleteItem(@PathVariable String id) {
itemRepository.deleteById(id);
}
Step8: run your Spring Boot application. You can do this by executing
‘DemoApplication.java’.

Step9: use Postman to test your endpoints.

Output:
You can send a POST request to ‘http://localhost:8080/products’ with JSON payload to
create new product. For example:
You can send GET request to ‘http://localhost:8080/products’ to view the products. For
example:

You can send PUT request to ‘http://localhost:8080/products’ to update the existing

products for example:
You can send DELETE request to ‘http://localhost:8080/products’ to delete the existing
products for example:
 Expriment-10

Create docker container from docker image and run the docker
container.

Step1: download and install docker desktop

Step2: open docker desktop.

Step3: create a folder with any name like MyDockerImages and open any command line in
that folder

Step4: you need to have the Docker image that you want to use. You can obtain an image
from Docker Hub or any other container registry by using the following command

docker pull image_name:tag

Step5: after pulling the image, you can create and run a Docker container based on that
image by using this command.

docker run –name container_name -d image_name:tag

Step6: you can check the status of your running containers by using the following
command.

docker ps