Web Design

on

Web Design Practical 1 - React State

Program

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");
  const [count, setCount] = useState(0);
  const [show, setShow] = useState(false);
  const [student, setStudent] = useState({
    name: "Amir",
    age: 20,
    city: "Shirpur"
  });

  const [subjects, setSubjects] = useState([
    "React",
    "JavaScript"
  ]);

  return (
    <div>
      <h2>React State Example</h2>

      <input
        placeholder="Enter name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />

      <h3>Hello {name}</h3>

      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>

      <button onClick={() => setShow(!show)}>
        {show ? "Hide" : "Show"}
      </button>

      {show && (
        <p>
          Age: {student.age}, City: {student.city}
        </p>
      )}

      <button onClick={() => setSubjects([...subjects, "HTML"])}>
        Add Subject
      </button>

      <p>Subjects: {subjects.join(", ")}</p>
    </div>
  );
}

export default App;

Output

React State Example

[ Amit ]

Hello Amit

[ Count: 2 ]

[ Hide ]

Age: 20, City: Shirpur

Subject: React, JavaScript, HTML

[ Add Subject ]

Web Design Practical 2 - React Client-Side Form Validation

Program

import React, { useState } from "react";

function App() {
  const [form, setForm] = useState({
    name: "",
    email: ""
  });

  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();

    if (form.name === "" || form.email === "") {
      setError("All fields are required");
    }
    else if (!/^\S+@\S+\.\S+$/.test(form.email)) {
      setError("Enter a valid email");
    }
    else {
      setError("");
      alert("Form submitted successfully");
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>

        <input
          type="text"
          placeholder="Name"
          value={form.name}
          onChange={(e) =>
            setForm({...form, name: e.target.value})
          }
        />

        <input
          type="email"
          placeholder="Email"
          value={form.email}
          onChange={(e) =>
            setForm({...form, email: e.target.value})
          }
        />

        <button type="submit">Submit</button>

        {error && <p style={{color:"red"}}>{error}</p>}

      </form>
    </div>
  );
}

export default App;

Output

Name
Email

[ Submit ]

All fields are required

or

Enter a valid email

or

Form submitted successfully

Web Design Practical 3 - React Form Components

Program

import { useState } from "react";

function App() {
  const [form, setForm] = useState({
    name: "",
    email: "",
    gender: "",
    course: "",
    agree: false
  });

  const change = (e) => {
    const { name, value, type, checked } = e.target;

    setForm({
      ...form,
      [name]: type === "checkbox" ? checked : value
    });
  };

  return (
    <div>
      <h2>Form Components</h2>

      <label>Name</label>
      <input
        type="text"
        name="name"
        value={form.name}
        placeholder="Enter Name"
        onChange={change}
      />

      <br />

      <label>Email</label>
      <input
        type="email"
        name="email"
        value={form.email}
        placeholder="Enter Email"
        onChange={change}
      />

      <br />

      <label>Gender</label>

      <input
        type="radio"
        name="gender"
        value="Male"
        checked={form.gender === "Male"}
        onChange={change}
      />
      Male

      <input
        type="radio"
        name="gender"
        value="Female"
        checked={form.gender === "Female"}
        onChange={change}
      />
      Female

      <br />

      <label>Course</label>

      <select
        name="course"
        value={form.course}
        onChange={change}
      >
        <option value="">Select Course</option>
        <option value="BCA">BCA</option>
        <option value="BBA">BBA</option>
        <option value="BCS">BCS</option>
        <option value="BSc">BSc</option>
      </select>

      <br />

      <label>
        <input
          type="checkbox"
          name="agree"
          checked={form.agree}
          onChange={change}
        />
        Agree
      </label>

      <hr />

      <p>Name: {form.name}</p>
      <p>Email: {form.email}</p>
      <p>Gender: {form.gender}</p>
      <p>Course: {form.course}</p>
      <p>Agree: {form.agree ? "Yes" : "No"}</p>
    </div>
  );
}

export default App;

Output

Form Components

Name
[ Rahul ]

Email
[ rahul@gmail.com ]

Gender
○ Male
○ Female

Course
[ BCA ]

☑ Agree

Name: Rahul
Email: rahul@gmail.com
Gender: Male
Course: BCA
Agree: Yes

Web Design Practical 4 - React Student Registration Form

Program

import React, { useState } from "react";

function App() {
  const [data, setData] = useState({});

  const change = (e) => {
    setData({
      ...data,
      [e.target.name]: e.target.value
    });
  };

  const submit = (e) => {
    e.preventDefault();
    alert("Registration Successful");
  };

  return (
    <div>
      <h2>Student Registration</h2>

      <form onSubmit={submit}>

        <input
          name="name"
          placeholder="Name"
          onChange={change}
        />

        <br />

        <input
          name="email"
          placeholder="Email"
          onChange={change}
        />

        <br />

        <input
          name="age"
          type="number"
          placeholder="Age"
          onChange={change}
        />

        <br />

        <input
          name="dob"
          type="date"
          onChange={change}
        />

        <br />

        <select name="course" onChange={change}>
          <option value="">Select Course</option>
          <option value="BCA">BCA</option>
          <option value="BBA">BBA</option>
          <option value="BCS">BCS</option>
        </select>

        <br />

        <input
          type="radio"
          name="gender"
          value="Male"
          onChange={change}
        />
        Male

        <input
          type="radio"
          name="gender"
          value="Female"
          onChange={change}
        />
        Female

        <br /><br />

        <button type="submit">Register</button>

      </form>
    </div>
  );
}

export default App;

Output

Student Registration

Name: Rahul
Email: rahul@gmail.com
Age: 20
DOB: 15/08/2006
Course: BCA
Gender: Male

Registration Successful

Web Design Practical 5 - React Simple Login Form

Program

import { useState } from "react";

function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  function login(e) {
    e.preventDefault();

    if (email === "" || password === "") {
      alert("Please fill all fields");
    }
    else {
      alert("Welcome " + email);
    }
  }

  return (
    <div style={{textAlign:"center", marginTop:"100px"}}>

      <h2>Login Form</h2>

      <form onSubmit={login}>

        <input
          type="email"
          placeholder="Enter Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />

        <br /><br />

        <input
          type="password"
          placeholder="Enter Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />

        <br /><br />

        <button type="submit">Login</button>

      </form>

    </div>
  );
}

export default App;

Output

Login Form

Email
[ Enter Email ]

Password
[ Enter Password ]

[ Login ]

Welcome user@example.com

Web Design Practical 6 - Node.js POST Method

Program

const express = require("express");

const app = express();

app.use(express.urlencoded({ extended: true }));

app.get("/", (req, res) => {
  res.send(`
    <h2>POST Method</h2>

    <form method="POST" action="/login">
      <input
        name="username"
        placeholder="Enter Username"
      >

      <button type="submit">
        Login
      </button>
    </form>
  `);
});

app.post("/login", (req, res) => {
  console.log("Data Received:", req.body);

  res.send("Hello " + req.body.username);
});

app.listen(5000, () => {
  console.log("Server Started");
  console.log("Open: http://localhost:5000");
});

Output

POST Method

[ Enter Username ] [ Login ]

After submitting:

Hello Rahul

Web Design Practical 7 - Node.js GET Method

Program

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  console.log("GET Request Received");

  res.send("Hello, this is GET Method");
});

app.listen(5000, () => {
  console.log("Server Started");
  console.log("Open: http://localhost:5000");
});

Output

GET Method Output

Hello, this is GET Method

Web Design Practical 8 - Login Authentication Using Node.js

Program

const express = require("express");

const app = express();

app.use(express.urlencoded({ extended: true }));

app.get("/", (req, res) => {
  res.send(`
    <h2>Login</h2>

    <form method="POST" action="/login">

      <input
        name="username"
        placeholder="Username"
      >

      <br>

      <input
        name="password"
        type="password"
        placeholder="Password"
      >

      <br>

      <button type="submit">Login</button>

    </form>
  `);
});

app.post("/login", (req, res) => {

  if(
    req.body.username === "admin" &&
    req.body.password === "1234"
  )
  {
    res.send("Login Successful");
  }
  else
  {
    res.send("Invalid Username or Password");
  }

});

app.listen(5000, () => {
  console.log("Server Started");
});

Output

Login

Username
[ admin ]

Password
[ **** ]

[ Login ]

Login Successful

Web Design Practical 9 - Node.js and MongoDB Student Information

Program

const express = require("express");
const mongoose = require("mongoose");

const app = express();

app.use(express.json());

mongoose.connect(
  "mongodb://127.0.0.1:27017/studentDB"
);

const Student = mongoose.model("Student", {
  name: String,
  age: Number,
  course: String
});

app.post("/student", async (req, res) => {

  const student = new Student(req.body);

  await student.save();

  res.send("Student information stored successfully");

});

app.listen(5000, () => {
  console.log("Server started at http://localhost:5000");
});

Sample Data

{
  "name": "Rahul",
  "age": 20,
  "course": "BCA"
}

Output

Student information stored successfully

Web Design Practical 10 - Node.js MongoDB CRUD Operations

Program

const express = require("express");
const mongoose = require("mongoose");

const app = express();

app.use(express.json());

mongoose.connect(
  "mongodb://127.0.0.1:27017/studentDB"
);

const Student = mongoose.model("Student", {
  name: String,
  age: Number,
  course: String
});

app.get("/students", async (req, res) => {

  res.json(await Student.find());

});

app.put("/student/:id", async (req, res) => {

  await Student.findByIdAndUpdate(
    req.params.id,
    req.body
  );

  res.send("Student updated");

});

app.delete("/student/:id", async (req, res) => {

  await Student.findByIdAndDelete(
    req.params.id
  );

  res.send("Student deleted");

});

app.listen(5000, () => {
  console.log("Server started on port 5000");
});

Operations

GET
/students

Displays all students.

PUT
/student/:id

Updates student information.

DELETE
/student/:id

Deletes student information.

Comments

Post a Comment