Create a New Record: POST from HTML Form

Until now, we have been talking about API returning data from the server. Now, it's time to post data. We will create a new category.

For Controller methods, we will use the usual naming.

routes/api.php:

Route::get('/user', function (Request $request) {
    return $request->user();
})->middleware('auth:sanctum');
 
Route::get('categories', [\App\Http\Controllers\Api\CategoryController::class, 'index']);
Route::get('categories/{category}', [\App\Http\Controllers\Api\CategoryController::class, 'show']);
Route::post('categories', [\App\Http\Controllers\Api\CategoryController::class, 'store']); 
 
Route::get('products', [\App\Http\Controllers\Api\ProductController::class, 'index']);

We will create a new category in the Controller, but what will we return? In a regular form without API, it would usually return a redirect to some page. But in this case, we must return some data in a JSON format. Here, the best practice is to return the created record.

app/Http/Controllers/Api/CategoryController.php:

use Illuminate\Http\Request;
 
class CategoryController extends Controller
{
    // ...
 
    public function store(Request $request)
    {
        $category = Category::create($request->all());
 
        return new CategoryResource($category);
    }
}

Now, let's try to launch this endpoint from the client.

In the client, we set the method to POST and added all the fields with values.

After creating a new category, we see the returned data is the created one. And the status code is 201 Created.

There are more available status codes. You can check them at https://httpstatuses.io.

Let's try to create a category from Vue.js. I made a simple form with the name input, and after submitting it, calls the submit method.

But the main code we need to look at is the JavaScript part.

<template>
    // ...
</template>
 
<script setup>
import { ref } from 'vue';
 
const name = ref('')
 
const submit = () => { 
    axios.post('/api/categories', {
        name: name.value
    })
        .then(response => {
            console.log('New Category ID: ' + response.data.data.id)
        })
} 
</script>

Using Axios, we send the POST request to the earlier added /api/categories POST endpoint with the data, in this case, just the name. After the response is successful, we log the new category ID.

In the network tab, we can see the response.