44Full Stack Development –20CS52IExperiment 21: Install MongoDB and perform CRUD operation on Database and documentsStep 1:Go to MongoDB official website Step 2:Click on Products > MongoDB Community EditionStep 3:Download the MongoDB Community Server for your OS Step 4:To downloadthe MongoDB shell click on Products > Tools > shellStep 5:Download the zip file and extract itStep 6:Now execute the executable file of MongoDB server after the download is finishedStep 7:Accept the license terms and agreement and click on next. Step 8:Selectcomplete and click Next every timekeeping everything as it is. Click on Install.Step 9:Once the installation is complete click on finish.Step 10:Now Copy the extracted file to C:/drive and create subfolder with name data/dbin the same drive. Step 11:Now copy the bin folder path of both shell and server and add those pathsto environment variables.Step 12:Launch the command prompt and start the server by executingthe command 'mongod'Step 13:Open another command prompt and launch the MongoDB shell using mongoshcommandStep14:CRUD Operation in MongoDB (Let's take an example of Student)Step15:Create Database
45Full Stack Development –20CS52Iuse StudentStep 16:Create Collectiondb.createCollection('studentInfo')Step 17:Show Collectionshow collectionsStep 18:Show Databaseshow dbsStep 19:Insert a single Documentsdb.studentInfo.insertOne({id: 101, name:"Vikas Singh",age: 24, address:"Varanasi"})Step 20:Insert multiple documentsdb.studentInfo.insertOne([{id: 101, name:"Vikas Singh",age: 24, address:"Varanasi"}, {id: 102, name:"Anchal Rai",age: 22, address:"Varanasi"}])Step 21:Show documents in a collectiondb.studentInfo.find()Step 22:Show documents in a collection using filterdb.studentInfo.find({id: 102})Step 23:Update one documentdb.studentInfo.updateOne({}, {address: "Bangalore"})
46Full Stack Development –20CS52IStep 25:Delete single documentdb.studentInfo.deleteOne({address: "Bangalore"})Step 26:Delete multiple documentsdb.studentInfo.deleteMany({})
47Full Stack Development –20CS52IExperiment 22: Perform CRUD operation on MongoDB through REST API using Spring Data MongoDBCreate a project using Spring InitializerStep 1:Open web browser and go to start.spring.io .Step 2:Create project with following information:•Project-Maven•Language-JAVA•Spring Boot Version-3.0.1•Project Metadata-oGroup:com.acharyaoArtifact:studentdataoName:studentdataoPackage Name:com.acharya.studentdataoPackaging:JaroJava Version:17•Dependencies -oSpring WeboSpring Data MongoDBoLombokoSpring Boot DevToolsStep 3:Click on Generate. And Extract the downloaded file where you have saved.To Run a project in VS CodeStep 1:Launch VS CodeStep 2:Go to File > Open Folder and navigate to the extracted project and click on Open.VS Codewill start scanning for the project once it detectsSpring Boot Dashboardwill appear. Dashboard will look for Spring projects once it find our project,we have open it will be listed in dashboardStep 3:Go to Explorer > src > main > package (com\acharya\studentdata) inside that you will find a default Application file with main method
48Full Stack Development –20CS52IStep 4:Create two class filesnamed 'Student.java' and 'StudentController.java' and an interface named 'StudentRepo.java'After creating the above three files the project structure would be like -Step 5:Go to Student.java and write the following code -//Student.javapackagecom.acharya.studentdata;importorg.springframework.data.annotation.Id;importorg.springframework.data.mongodb.core.mapping.Document;importlombok.AllArgsConstructor;importlombok.Data;importlombok.NoArgsConstructor;@Data@NoArgsConstructor@AllArgsConstructor@Document(collection="studentData")publicclassStudent{@Id
49Full Stack Development –20CS52Iprivateintid;privateStringname;privateStringaddress;}Step 6:Go to 'StudentRepo.java' and enter the following code -//StudentRepo.javapackagecom.acharya.studentdata;importorg.springframework.data.mongodb.repository.MongoRepository;publicinterfaceStudentRepoextendsMongoRepository<Student,Integer>{}Step 7:Go to main Application java file that contain method and modify it with following code -//StudentController.javapackagecom.acharya.studentdata;importjava.util.List;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.web.bind.annotation.DeleteMapping;importorg.springframework.web.bind.annotation.GetMapping;importorg.springframework.web.bind.annotation.PathVariable;importorg.springframework.web.bind.annotation.PostMapping;importorg.springframework.web.bind.annotation.RequestBody;importorg.springframework.web.bind.annotation.RestController;@RestControllerpublicclassStudentController{@AutowiredpublicStudentReporepo;@PostMapping("/createData")publicStringcreateStudent(@RequestBodyStudentstudent){repo.save(student);return"Data added successfully.";}@GetMapping("/fetchData")publicList<Student>fetch(){returnrepo.findAll();}
50Full Stack Development –20CS52I@DeleteMapping("removeData/{id}")publicStringdelete(@PathVariableintid){repo.deleteById(id);return"Document deleted successfully";}}Step 8:Navigate tosrc/main/resourcefolder and modify with the following code -Note:Enter your MongoDB database name what you have to create and it should match what you will create on MongoDB server.//Application.propertiesserver.port=8888spring.data.mongodb.host=localhostspring.data.mongodb.database=studentStep 9:To run the Application. Go toSpring Boot Dashboardpresent at left side of the VS Code. In Apps you will find your project name> Click on Run.It will open the terminal and run the spring projectStep 10:Launch a command prompt and run the MongoDB server usingmongodStep 11:Launch another command prompt and launch the MongoDB Shell mongoshStep 12:Create a database and collection as mentioned in our application. In my case the database name is 'student' and collection name is 'studentData'Step 13:Launch Postman or Thunder Client click on New RequestStep 14:To test the method use the post after the endpoint URL i.e.,http://localhost:PORT/labelStep 15:Click on send and cross check the document from MongoDB
51Full Stack Development –20CS52IExperiment 23: Create a docker image and run a container using docker image. Also do the same using docker file.Step 1:Go to play with docker official websiteStep2: Click on LoginStep 3: Click on startStep 4: Click on create new instance at left side of the pageStep 5: To create a docker image run the following command –docker create <IMAGE NAME>Step 6: Show the existing images of docker use the command –docker imagesStep 7: To run a docker image in a container execute the following command –dockerrun -it <IMAGE>Step 8:Exit the container you're in.Step 9:Click on Editor to create a dockerfileStep 10:Enter the following script and save the fileFROMubuntuMAINTAINERvikasRUNapt-get updateCMD["echo", "Hello World"]Step 11:Now rename the file to `Dockerfile`
52Full Stack Development –20CS52Imv <filename> DockerfileStep 12:To create an image and run container using the docker file hit the following commanddocker build .Step 13:If you want to deploy a web application create a NGINX container To do so follow the steps belowCreate a NGINX image with -Step 13.a:Run the NGINX container by binding the port number using -p flagdocker run -p 8085:80 nginxStep 13.b:Now click on open port on top of screen and enter the port number you bandedStep 13.c:The deployed application will be opened in a new tab
53Full Stack Development –20CS52IExperiment 24: Create react application and deploy on AWSStep 1:Create a folder on desktopStep 2:Open the created folder in VS CodeStep 3:Right click on Explorer > Open Folder in IntegratedTerminalStep 4:Run the command to create a react applicationStep 5:Go to GitHubofficial websiteStep 6:Login to your GitHubaccount and create a repositoryStep 7:Copy the HTTPS git linkStep 8:Now add the remote link to the git using the following command Step 9:Now run the following command to push your application to the repository you just createdStep 10:Now open AWSConsoleStep 11:Search for AWSAmplify in services and launch the AWSAmplifyStep 12:Click on get started > Web Hosting Step 13:Select the GitHubas a storage for yourreact application and click Nex