DEV Community: Sachin kumar singh

My New professional Web app that looks Awesome

Sachin kumar singh — Mon, 23 Jan 2023 04:45:55 +0000

I am happy to share you all, about my new project completey built by me using the latest Mern stack technology

I have previously built many small applications but this is the big scale project and i am very delighted to complete this on time.

Here is the link and github repo of this Awesome website

Rento.com

Github frontend repo

Github backend rep

Its all take me more than a month of continuous hard work and dedication to build all the awsome functionalities of this site

I learnt many new tricks and hacks durind this projects and also some lessons for developers.

I found that continous practice towards your goal bring you to succes in your work.
Now i am more excited to build some large scale applications in near future
Stay tuned with me and don't forget to follow me to get recent updates from my side

What is Java Virtual Machine (JVM)

Sachin kumar singh — Mon, 23 Jan 2023 04:15:57 +0000

This is the second tutorial of java programming for beginners series, and in this tutorial we are briefly discuss about java virtual machine's working and functionalities and why it is important.

The Heart of java programming

You may also called the jvm as the heart of java programming.
JVM is responsible for making java protable and universal.

JVM working

Step1.

First of all .java file or programme is converted into .class file consisting of byte code instruction by the java compiler.The java compiler remains outside of the jvm.

step2

Now .class file is given to the jvm. Jvm consist of a module called class loader sub system that performs the below functionalities

The class loader sub system loads the .class file into memory
Then it verifies whether all byte code instructions are proper or not. If it finds any instruction suspicious the eecution is rejected immediately.
If the byte instruction are proper,then it assign necessary
memory to execute the programme.

Note

This memory is didvided into various parts mention below

1.Method area

This memory block stores the class code, code of the methods in java programme and variables.

2.Heap

This is the area where objects are created.

3. Pc registers

This registers contain memory address of the insturctions of the methods. if there are 5 methods, 5 pc regiters will be used to trac the instruction of the methods.

This is the breif and short discussion on Java virutal machine(jvm)
stay tuned for our next tutorial on java
to know more about jvm visit official java documentations.

core JAVA for begineers android developers

Sachin kumar singh — Mon, 23 Jan 2023 03:30:56 +0000

Introduction to Java programming

Hello guys, i am back with amazing java tutorial for beginners.
This whole series of java is perfectly designed for beginners need to get started in java and android development.

Features of Java programming

so lets discuss features of java without any more due.

Platform independent Java programme can be developed on any computer system and the execution of that program is possible on any other computer system loaded with 'JVM'.

2.Object-oriented
Java programme is truely object-oriented language you cannot write and execute java programme without the use of classes in java.
This helps to build real life applications with the help of java.

3.Secure
Java was developed to work in netwroked and distributed environments by providing security
By using java one can easily minimise the problems like eavesdropping, tampering, impersonation and virus threats.

4.Portable
Java is a portable programming language because it yeild the same result on every machine.

5.Multithreading
multithreading is a programming concept and a technique in which a programme can do multiple things on the same to provide speed and efficiency.

......

BONUS

.....
In the next tutorial we are going to learn about the JVM responsible for making java programming universal and platform independent.

React Router Version 6 Tutorial How to Set up React Router@6

Sachin kumar singh — Wed, 02 Nov 2022 03:15:43 +0000

In this tutorial we are going to discuss how to get started with react router version 6 to navigate and render multiple componets in your single page application(spa)

Prerequisites

A Basic React application
Basic knowledge of react

Install React Router
The first step after creating a react app is to install react router
To install the react router open your command line and type below code and hit enter to install react router@6

npm install react-router-dom@6

if you are using yarn then

yarn add react-router-dom@6

Setup React Router
The setup of react router is very simple. Navigate to your src folder and open index.js file after then import BrowserRouter from 'react-router-dom' and wrap the root component with this.

After doing so your index.js file may look like this

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";

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

How To Route the other Componets
We are done with the inital setup and now we can create routes for other componets to render follow me

Create Mutiple components to Route
Now we are creating multiple components like home.js signup.js and about.js etc.

import React from 'react'

function Contacting() {
    return (
        <div className="bg-danger">
            <p>This is the contact page</p>
        </div>
    )
}

export default Contacting

                Contact.js

import React from 'react'

function AboutUs() {
    return (
        <div className="bg-primary">
            <p>This is the about page</p>
        </div>
    )
}

export default AboutUs

                        About.js

function HomePage() {
  return (
    <div className="bg-success">
      <p>This is the home page</p>
    </div>
  );
}

export default HomePage

                         Home.js

Defining Routes

Now open app.js file and define the routes and path for specific component to render

import { Routes, Route } from "react-router-dom"
import HomePage from "./Home.js"
import AboutUs from "./About.js"
import Contacting from "./Contact.js"

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={ <HomePage/> } />
        <Route path="aboutus" element={ <AboutUs/> } />
        <Route path="contacting" element={ <Contacting/> } />
      </Routes>
    </div>
  )
}

export default App

use Link tag provided by react-router-dom to navigate around

import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <h1>This is the home page</h1>
      <Link to="aboutus">Click to view our about page</Link>
      <Link to="contacting">Click to view our contact page</Link>
    </div>
  );
}

export default Home;

That's all for this tutorial now we can play around with react router in your react app.

Note:-This will work only for react router version 6

follow me on github to get more tutorial like this

Sachinsingh101 (Sachin Kumar Singh) · GitHub

Programmer | Developer | Learner | Typist | Editor - Sachinsingh101

github.com

How to create a mern stack Crud application ?

Sachin kumar singh — Tue, 01 Nov 2022 04:31:15 +0000

Introduction
In this tutorial we are going to learn that how we can create a beginners friendly crud application with the help of mern-stack.
Prior knowledge
To follow this tutorial you should have minimum knowledge of react,node and mongodb. This are the technologies that together combine to form a mern stack.
To get the complete source code visit my github account

Sachinsingh101 / Mern-Crud-App

This is an Advance Crud-app made with mern-stack, You can perform any of crud operations in this app.You can colaborate with me for future projects coming soon....

THE FRONTEND
step-1
First of open your vs code editor or any other editor you like
then create a folder named it as mern stack crud.
Inside this folder create two folders named it as client or server.

step-2
Inside client folder we will create our react application.
open command line and Type ""npx create-react-app app" then hit enter to create a basic react application inside client folder.
after this you folder structure should look like this.

step-3
After the step mention above navigate to src folder and create a folder named it as component folder.
In this folder we will keep our all the components like 'Add user componet','edit user','all user' or the navbar component

step-4
Navigate to src folder then component folder and create a file or component named it as 'add user' component
then write you code or copy the code mention below to create a basic 'add user' interface

import {useState} from 'react'
import axios from 'axios'
function Adduser(){
    const [user,setuser]=useState({
        Name:"",
        email:"",
        number:""
    });
    function changeHandler1(e){
        setuser({
            ...user,Name:e.target.value
        })

    }
    function changeHandler2(e){
        setuser({
            ...user,email:e.target.value
        })
    }
    function changeHandler3(e){
        setuser({
            ...user,number:e.target.value
        })
    }
    function submitHandler(e){
        e.preventDefault()
        const userdata={
            name:user.Name,
            email:user.email,
            number:user.number

        }
        try{
            axios.post('http://localhost:4000/add',userdata);
            setuser({
                Name:"",
                Email:"",
                number:""
            });
            alert("user added successfully !!!");
        }catch (err){
            console.log("react aios post error",err);
        }


        console.log(userdata);

    }


    return(
        <>
          <div className="container m-5">
            <h1 className="text-center text-dark">Add User</h1>
            <form onSubmit={submitHandler}>
             <input type="text" placeholder="Enter your Name" name="name" className="form-control m-3" onChange={changeHandler1} value={user.Name} required></input>
             <input type="email" placeholder="Enter your Email" name="email" className="form-control m-3" onChange={changeHandler2} value={user.Email} required></input>
             <input type="number" placeholder="Enter your Phone number" name="number" className="form-control m-3" onChange={changeHandler3} value={user.number} required></input>
             <input  type="submit"  className="btn btn-primary form-control m-3" ></input>
             <input type="reset" className="btn btn-danger form-control m-3"></input>
            </form>
          </div>
        </>
    )
}
export default Adduser;

Eplained:- In above code we are first creating a form after we are creating state to hold the input of the forms field then post these data to backend with the help of aios.
step-5
similarly create a file named as 'alluser.js' inside component folder and copy the code below or write you own code to get a basic all user interface

import {useState,useEffect} from 'react'
import {Link} from 'react-router-dom'
import axios from 'axios'
function Getallusers(props){

    const [Alluser,setuser]=useState({
        students:[]
    })
    useEffect(()=>{
        try{
            axios.get('http://localhost:4000/getallusers').then(res=>{
                setuser({
                    students:res.data
                });

            })
        }catch(err){
            console.log("error while getting users",err);
       }
    }) 


    return(
        <> 
          <table className='container-fluid text-center bg-light p-3'>
            <thead >
                <tr className='row p-3'>
                    <th className='col'>Name</th>
                    <th className='col'>Email</th>
                    <th className='col'>Phone number</th>
                </tr>
            </thead>
          </table>
          <table className='container-fluid'>
            <thead >

                {
                        Alluser.students.reverse().map(function(value,i){
                            return <tr className='bg-danger text-white text-center border border-dark'>
                                      <td className='border-end border-dark'>{value.name}</td>
                                      <td className='border-end border-dark'>{value.email}</td>
                                      <td className='border-end border-dark'>{value.number}</td>
                                      <Link to={`/Edit/${value._id}`} className='btn btn-danger text-dark' onClick={props.name} id="edit">Action</Link>
                                    </tr>

                        })
                    }
            </thead>
          </table>
        </>
    )
}
export default Getallusers;

Eplained:- In the above code first we create a table then make a get request with aios then save the response to the state and use it in the table to show the alluser in our app.
step-6
similarly create a file named it as 'edituser.js' inside component folder and write your own code or paste it from here to create a edit user interface

import axios from "axios";
import {  useParams } from "react-router-dom";
import {useState,useEffect} from 'react';


function Edituser(){
    const [newdata,setnewdata]=useState({
        Name:"",
        Email:"",
        number:""
    });
    function changeHandler1(e){
        setnewdata({
           ...newdata, Name:e.target.value
        });
    }
    function changeHandler2(e){
        setnewdata({
           ...newdata, Email:e.target.value
        });
    }
    function changeHandler3(e){
        setnewdata({
           ...newdata, number:e.target.value
        });
    }
    const routeParams=useParams();
    const id=routeParams.id;
    function getsingledata(){
        axios.get(`http://localhost:4000/getsingleuser/${id}`).then(res=>{
            setnewdata({
                Name:res.data.name,
                Email:res.data.email,
                number:res.data.number
            });
            console.log(newdata);
        })
        console.log(id);
    }
    useEffect(()=>{
        getsingledata();
    },[]);
    function submitHandler(e){
        e.preventDefault()
        const updatedData={
            name:newdata.Name,
            email:newdata.Email,
            number:newdata.number
        }
        try{
            axios.put(`http://localhost:4000/Edit/${id}`,updatedData);
            setnewdata({
                Name:"",
                Email:"",
                number:""
            });
            alert("data updated successfully !!!");
        }catch(err){
            console.log("error while updating",err);
        }    
    }
    function deleteuser(){
        try {
            axios.delete(`http://localhost:4000/deleteuser/${id}`);
            alert("user deleted successfully !!!!");
            setnewdata({
                Name:"",
                Email:"",
                number:""
            });
            alert("user updated successfully !!!!1");
        }catch(err){
            console.log("error while making delete request",err);
        }

    }


    return(
        <>
          <div className="container mt-5">
          <form onSubmit={submitHandler}>
             <h1 className="text-center">Edit User</h1>
             <input type="text" placeholder="Enter your Name" name="name" className="form-control m-3" value={newdata.Name} required onChange={changeHandler1}></input>
             <input type="email" placeholder="Enter your Email" name="email" className="form-control m-3" value={newdata.Email}required onChange={changeHandler2}></input>
             <input type="number" placeholder="Enter your Phone number" name="number" className="form-control m-3" value={newdata.number} required onChange={changeHandler3}></input>
             <input  type="submit" className="btn btn-primary form-control m-3"></input>
         </form>
         <h5 className="text-center text-muted">OR</h5>
         <div className="btn btn-outline-danger form-control m-3 " onClick={deleteuser}>Delete</div>
          </div>

        </>
    );

}
export default Edituser;

eplained:- In the above code first we make a form then make a get request to fill up the form with the user details then maka a put request after user make some changes to his data to save it again to the database.

step-7
Import these componets to app.js file.
after that your app.js file should look like this.

// import logo from './logo.svg';
import {Routes,Route, redirect} from 'react-router-dom'
import './App.css';
import Navbar from './components/navbar.js';
import Adduser from './components/adduser';
import Getallusers from './components/alluser';
import Edituser from './components/edituser.js'

function App() {

  return (
    <>
      <Navbar/>
      <Routes>
        <Route path="/" element={<Adduser/>}/>
        <Route path="/get" element={<Getallusers/>}></Route>
        <Route path={`/Edit/:id`} element={<Edituser/>}></Route>
        {/* <Route path="/redirect"></Route> */}
      </Routes>
    </>
  );
}

export default App;

Now our frontend part completed and this is first part of our tutorial.

THE BACKEND
step-1
Open the command line and navigate to server folder then install the dependencies mention below to start working with the backend.
first step:- npm init then
1.Express(npm i epress)
2.mongoose(npm i mongoose)
3.nodemon(npm i nodemon)
4.cors(npm i cors)
5.body-parser(npm i body-parser)
6.dotend(npm i dotend)
Note:- you can also install these dependencies in one go just type
'npm i epress mongoose nodemon cors body-parser dotenv '
and thats all we are ready to work with backend.

step-2
Inside server folder create the following folder or file mention below
1.routes
2.database
3.controllers
4.'.env'
5.app.js

setp-3
Navigate to app.js file and paste the code given below

import cors from 'cors'
import express from "express";
import bodyParser  from 'body-parser';
import dotenv from 'dotenv'
dotenv.config();
import router from './routes/userroute.js'
import connection from './database/connectDB.js';
import './database/model.js';
const app=express();
app.use(cors());
app.use(bodyParser.json({extended:true}));
app.use(bodyParser.urlencoded({extended:true}));
const port=process.env.PORT || '4000'
const DATABASE_URL=process.env.DATABASE_URL


app.get('/',(req,res)=>{
    res.send("Hello world from express");
})

app.use('/',router);
connection(DATABASE_URL)
app.listen(port,()=>{
    console.log("listening to 3000 port");
})

step-4
Navigate to route folder and create userroute.js file and paste the following code

import express from "express";
import {postfunction , getfunction , Editfunction ,Getsingleuser, Deleteuser} from "../controllers/usercontroller.js";
const router=express.Router();

router.all('/add',postfunction);
router.get('/getallusers',getfunction);
router.put('/Edit/:id',Editfunction);
router.get('/getsingleuser/:id',Getsingleuser);
router.delete('/deleteuser/:id',Deleteuser);

export default router;

step-5
Navigate to controllers folder and create controller.js file and paste the following code inside it

import userModel from "../database/model.js";


const postfunction =  (request,response)=>{
   const data=request.body;
   const userdata=new userModel(data);
   userdata.save()
   response.send(data);
   console.log(data);

}
const getfunction=(req,res)=>{
   // res.send("hello world");
   const allusers=userModel.find((error,data)=>{
      if(error){
         return next(error)
      }else{
         res.json(data);
      }
   });

}

const Editfunction=async (req,res)=>{
   try{
      const newdata=req.body;
      const param=req.params;
      const update= await userModel.findByIdAndUpdate(param.id,newdata);
      console.log(newdata,update)
   }catch(err){
      console.log("error while updating data",err);
   }

}
const Getsingleuser=async(req,res)=>{
   try{
      const Data= await userModel.findById(req.params.id,'name email number');
      res.json(Data);
      console.log(Data);
      // console.log(Data);
   }catch(err){
      console.log("error while getting each  user",err);
   }
}
const Deleteuser= async (req,res)=>{
   try{
      const id=req.params.id;
      await userModel.findByIdAndDelete(id);
      console.log(req.params.id);
   }catch(err){
      console.log("error while deleting user",err);
   }
}

export {getfunction,postfunction,Editfunction,Getsingleuser,Deleteuser}

step-6
Navigate to database folder and create connectDb.js file and paste the following code inside it to connect with database

import mongoose from 'mongoose'

const connection = async(DATABASE_URL)=>{
    try{
        const Db_optiion={
            Dbname:"Sachimaa"
        }
        await mongoose.connect(DATABASE_URL,Db_optiion);
        console.log("Database connected successfully");
    } catch(err){
        console.log("error while connecting to Database ",err);
    }
}

export default connection;

stpe-7
Inside databse folder create another file named it as module.js and paste the following code given below

import mongoose from "mongoose";

const userSchema=new mongoose.Schema({
    name:{type:String,required:true},
    email:{type:String,required:true},
    number:{type:Number,required:true}
})

const userModel= mongoose.model('user',userSchema);

export default userModel;

step-8
Now our backend is completed and our Crud app is ready
You can host it to github or any other platform.