Laravel for Beginners : a Quick Guide - 8
Tags: laravel, php, mvc
Published: 2021-08-24 15:55:42

###Laravel Routes###

I hope you understood the concept of adding data from user interface and receiving it response back to user interface,

Let's revisit concept of 'routes'...

> what is 'route' ?

simply, route is a key word that connects user interface to the backend - Controller;  :)

Ok in my previous articles you saw these kinds of routes ;

```
Route::get('addData', [DataController::class,'addData']);
```

right ?

(revisit web.php file and verify it once)

this will connect to addData() function present under DataController Class, correct ?


Hope you observed that you are using **Route** Object to define new route ;

this **Route** object is actually defined under this class (you can notice this at the top section of the file align with *use* keyword)

```
Illuminate\Support\Facades\Route;
```

then after that you observe key word **get**; it is nothing but HTTP method; yes exactly,

it will catch a type of request using a HTTP method that you used while calling that route,

HTTP method is a way request rises to the application's backend ;

What are different types of HTTP methods ?

* GET
* POST
* PUT
* PATCH
* DELETE 
* OPTIONS

for a time being lets concentrate on GET and POST methods only, and these are the methods we frequently use in our laravel applications.

Laravel support all these kinds of methods; like
 
```
Route::get('addData', [DataController::class,'addData']);
```
```
Route::post('addData', [DataController::class,'addData']);
```
```
Route::put('addData', [DataController::class,'addData']);
```
```
Route::patch('addData', [DataController::class,'addData']);
```
```
Route::delete('addData', [DataController::class,'addData']);
```
```
Route::options('addData', [DataController::class,'addData']);
```


along with above mentioned HTTP method routes laravel also provides another route type, it is **any** , it catches any kind of HTTP method

 ```
Route::any('addData', [DataController::class,'addData']);
```
### Mistyped routes/requests ###
laravel matches incoming requests HTTP method first, then it finds suitable route in web.php file, if it found then control moves to controller's method; else you can observe 404 page

let try this,
You know we have a route called,
```
Route::get('addData', [DataController::class,'addData']);
```

hit this route from browser; (hope you are running laravel app)

**http://127.0.0.1:8000/addData**

you can observe this 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bp0o6g7hjc8m4evwrobd.png)

right ? 

now just alter keyword **addData** to **addData--1** present in the url; Ok

now hit that url again;
(Do verify that we don't have any route defined called **addData--1** in our web.php file)

**http://127.0.0.1:8000/addData--1**

since we don't have any such route; laravel manages to load 404 page;

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjdmwqbro2z5hlww7mv1.png)

So, no need to worry about mistyped routes/requests from browser, laravel manages it by itself, seems interesting right ? :)


### Routes and Form submit ###
whenever the form submit happens, some that will be passed to the backend from our user interface(say frontend), right ?

Open **addData.blade.php** file located under resources->views folder

```
<html>
    <body>
        <div>
            <h3>Add Data</h3>
            <form method="GET" action="{{ url('saveFormData') }}">
                <label>Name</label>
                <input type="text" name="name" />
                <label>Age</label>
                <input type="number" name="age" />
                <button type="submit">Save</button>
            </form>
        </div>
    </body>
</html>
```

you can observe **method** and **action** mentioned with form element

method - GET
action - route saveFormData

here form is submitting data to the route **saveFormData** via GET http method; you know it I suppose :)

Now open **DataController** class and go to the function returned by 'saveFormData' route; it is **saveForm()**, add dd() of $request after entering the function. 

```
public function saveForm(Request $request) {
        dd($request);
        $data = [
            'name' => $request->name,
            'age' => $request->age
        ];
        $insertData = Data::create($data);
        
        if(isset($insertData['id'])) {
            $message = "Success";
        } else {
            $message = "Failed";
        }

        $response = [
            'message'=>$message
        ];

        return view('response',$response);
 }
```

Ok, then hit the route 'addData' from your browser;
####http://127.0.0.1:8000/addData####

then fill the form and submit;
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvzvn2fvfrxz5t6m7c33.png)

You can see this window right ?
Now,, just observe URL bar;

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78ypv8rz7gdzhbxql658.png)


you can see those form input data; those are passing as a url parameters to the backend(Controller); right ?

now, lets change form method from **GET** to **POST** present in the file addData.blade.php

```
<form method="POST" action="{{ url('saveFormData') }}">
```
 Again, hit the **addData** route and fill the form ; then submit.

What you are seeing ?

this error right ?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdpd34x82pftvydoscak.png)

Why ?

Observe web.php file; there is no route with a method post having keyword 'saveFormData' ; Observed ?

what you got ?
route catches an http method that request is coming from; through form you are sending data through POST method for 'saveFormData'  route; it actually doesn't exist;

```
Route::get('saveFormData', [DataController::class,'saveForm']);
```

it is a **get** route with a key word 'saveFormData' , it doesn't catches request with POST method; then how to catch it ?

Simple, create a similar route with **post** method; like

```
Route::post('saveFormData', [DataController::class,'saveForm']);
```

that too returning same controller's same method; no issues.

now again hit the url : ####http://127.0.0.1:8000/addData####

and fill the form and submit again;

what you are seeing now ?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sq4fh54gsrxm64m9quv9.png)

you are seeing dd() response of $request; right ?

Observe URL bar now; there is no url parameters exist but still Controller is receiving form data; right ?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cjlfmbzj13ihfuzf50o.png)

This is what the main difference between GET and POST http methods :)

POST method doesn't shows form submitted data as an URL parameters where as GET method clearly shows;

There is a limitation of data length that can be passed through GET method, where POST method hasn't any such;

Even though both the method has there own features; primarily we can prefer form data should be submitted through POST method, a secure approach we believe;

While sending FORM data through POST we need add another constraint to the form i.e CSRF token (Cross-Site Request Forgery)
is a way our application identifies that request is coming / data is submitting from known/authenticated source, Laravel automatically generates this CSRF token and just we need to add it within our form element

within form element of the addData blade file we just need to mention 
```
@csrf
```

```
<html>
    <body>
        <div>
            <h3>Add Data</h3>
            <form method="POST" action="{{ url('saveFormData') }}">
                @csrf
                <label>Name</label>
                <input type="text" name="name" />
                <label>Age</label>
                <input type="number" name="age" />
                <button type="submit">Save</button>
            </form>
        </div>
    </body>
</html>
```
it will be automatically verified by laravel while receiving the request at backend;

this is all about brief explanation on Laravel Routes; Hope you understood about it;

Bye ;)