5 |
6 | ### [[ Reading Material ]]
7 |
8 | #### HTTP Methods
9 |
10 | The HTTP method is the type of request you send to the server. You can choose from these five types below:
11 |
12 | - `GET` : This request is used to get a resource from a server. If you perform a `GET` request, the server looks for the data you requested and sends it back to you. In other words a `GET` request performs a `READ` operation. This is the default request method.
13 |
14 | - `POST` This request is used to create a new resource on a server. If you perform a `POST` request, the server creates a new entry in the database and tells you whether the creation is successful. In other words, a `POST` request performs an `CREATE` operation.
15 |
16 | - `PUT` and `PATCH`: These two requests are used to update a resource on a server. If you perform a `PUT` or `PATCH` request, the server updates an entry in the database and tells you whether the update is successful. In other words, a `PUT` or `PATCH` request performs an `UPDATE` operation.
17 |
18 | - `DELETE` : This request is used to delete a resource from a server. If you perform a `DELETE` request, the server deletes an entry in the database and tells you whether the deletion is successful. In other words, a `DELETE` request performs a `DELETE` operation.
19 |
20 |
21 | **REST API** are a combination of METHODS( GET, POST etc) , PATH (based on resource name)
22 |
23 | Suppose you have a resource named `task`, Here is the example of 5 REST APIs commonly available for task.
24 |
25 | 1. **READ APIs :**
26 |
27 | - GET `\tasks` : to read all
28 |
29 | - GET `\task\:id` : to read a particular task which can be identified by unique `id`
30 |
31 |
32 | 2. **CREATE APIs :**
33 |
34 | - POST `\tasks` : to create a new task object (data will go inside request body)
35 |
36 | 3. **UPDATE APIs :**
37 |
38 | - PUT `\task\:id` : to update a particular task which can be identified by unique `id`. Data to be updated will be sent in the request body. Document data will be generally **totally replaced.**
39 | - PATCH `\task\:id` : to update a particular task which can be identified by unique `id`. Data to be updated will be sent in the request body. Only few fields will be replace which are sent in **request body**
40 |
41 | 4. **DELETE APIs** :
42 |
43 | - DELETE `\task\:id` : to delete a particular task which can be identified by unique `id`.
44 |
45 | ### [[ Chapter Notes ]]
46 |
47 | - **REST API** is a standard for making APIs.
48 | - We have to consider a resource which we want to access - like **Product**
49 | - We access **Product** using combination of HTTP method and URL style
50 |
51 | **REST API ( CRUD - Create , Read , Update, Delete) :**
52 |
53 | - **CREATE**
54 | - **POST** /products - create a new resource (product)
55 |
56 | - **READ**
57 | - **GET** /products - read many resources (products)
58 | - **GET** /products/:id - read one specific resource (product)
59 |
60 | - **UPDATE**
61 | - **PUT** /products/:id - update by replacing all content of specific resource (product).
62 | - **PATCH** /products/:id - update by only setting content from body of request and not replacing other parts of specific resource (product).
63 |
64 | - **DELETE**
65 | - **DELETE** /products/:id - delete a specific resource (product).
66 |
67 |
68 |
69 |
70 | ### [[ Assignments ]]
71 |
72 | - **Assignment 1** : Make an API similar to explained above for `Quotes` take dummy data from same site ([dummy json quotes](https://dummyjson.com/quotes))
73 |
--------------------------------------------------------------------------------
/Grand Hackathon/client/src/pages/Appointment.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Navbar from "../components/navbar";
3 | import { toast, ToastContainer } from 'react-toastify';
4 | import 'react-toastify/dist/ReactToastify.css';
5 | import "../styles/appoi.css"; // Make sure to import your CSS file
6 |
7 | const Appointment = () => {
8 | const [loginData, setLoginData] = useState({
9 | name: "",
10 | email: "",
11 | phone: "",
12 | });
13 |
14 | const handleChange = (e) => {
15 | setLoginData({
16 | ...loginData,
17 | [e.target.name]: e.target.value,
18 | });
19 | };
20 |
21 | const handleSubmit = (e) => {
22 | e.preventDefault();
23 |
24 | // Log the data to the console
25 | console.log("Form data submitted:", loginData);
26 |
27 | // Show a toast
28 | toast.success('Form Submitted!', {
29 | position: "top-right",
30 | autoClose: 5000,
31 | hideProgressBar: false,
32 | closeOnClick: true,
33 | pauseOnHover: true,
34 | draggable: true,
35 | progress: undefined,
36 | theme: "dark",
37 | });
38 |
39 | // Reset the input fields
40 | setLoginData({
41 | name: "",
42 | email: "",
43 | phone: "",
44 | });
45 |
46 | // Your login logic goes here
47 | // If you want to perform additional actions or send the data to the server, you can do it here
48 | };
49 |
50 | return (
51 | <>
52 | Your Oral Health Matters to Us
15 |16 | Get a Brighter Smile from London's Best Dentists 17 |
18 | 19 | 22 | 23 |34 | Get a Dazzling Smile in Lowest Price 35 |
36 |41 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae 42 | tenetur nisi nihil illum eligendi eum esse aut accusamus. 43 | Obcaecati praesentium facilis nisi ullam culpa ipsum saepe 44 | veritatis recusandae, nemo non.lorem ipsum and then 45 |
46 |Card title
65 |66 | Some quick example text to build on the card title and make up 67 | the bulk of the card's content. 68 |
69 | 70 | Go somewhere 71 | 72 |Card title
80 |81 | Some quick example text to build on the card title and make up 82 | the bulk of the card's content. 83 |
84 | 85 | Go somewhere 86 | 87 |Card title
95 |96 | Some quick example text to build on the card title and make up 97 | the bulk of the card's content. 98 |
99 | 100 | Go somewhere 101 | 102 |Card title
110 |111 | Some quick example text to build on the card title and make up 112 | the bulk of the card's content. 113 |
114 | 115 | Go somewhere 116 | 117 |