Creating a Laravel Insert Form with Modal and Controller

Step 1: Create the Model and Migration

Set up database credentials in .env file

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password

First, create a model and migration for your data.

For example, let’s say we’re creating a simple Post model with a title and content.

Run this Artisan command to create the model and migration:

php artisan make:model Post -m

This will generate two files:

• app/Models/Post.php (the model)
• database/migrations/xxxx_xx_xx_xxxxxx_create_posts_table.php (the migration file)

Next, edit the migration file to define the posts table structure. Open database/migrations/xxxx_xx_xx_xxxxxx_create_posts_table.php and update it like this:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->timestamps();
    });
}

Then, run the migration to create the table:

php artisan migrate

Tables created

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;

    protected $fillable = ['title', 'content'];
}

Modify The Post Model to store the data.

Step 2: Create the Controller

Now, create a controller where you will handle the insert functionality.

Get Aishwarya M S’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Run this Artisan command to create the controller:

php artisan make:controller PostController

Next, open the app/Http/Controllers/PostController.php file and add a method to display the form and a method to insert data.

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    // Display the form for creating a new post
    public function create()
    {
        return view('posts.create');
    }

    // Store the new post in the database
    public function store(Request $request)
    {
        // Validate the request
        $request->validate([
            'title' => 'required|string|max:255',
            'content' => 'required|string',
        ]);

        // Create and save the new post
        Post::create([
            'title' => $request->title,
            'content' => $request->content,
        ]);

        // Redirect or return success
        return redirect()->route('posts.create')->with('success', 'Post created successfully!');
    }
}

Step 3: Define Routes

In the routes/web.php file, define routes to handle the creation and storing of posts.

use App\Http\Controllers\PostController;

Route::get('/posts/create', [PostController::class, 'create'])->name('posts.create');
Route::post('/posts', [PostController::class, 'store']);

Step 4: Create the View (with Modal)

Now, create a view to display the modal for inserting a new post. Create a file called resources/views/posts/create.blade.php.

In this file, you will create a simple HTML form inside a modal using Bootstrap for the modal functionality.

<!-- resources/views/posts/create.blade.php -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Post</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <!-- Button to open modal -->
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#postModal">Create Post</button>

        <!-- Modal -->
        <div class="modal fade" id="postModal" tabindex="-1" aria-labelledby="postModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="postModalLabel">Create a New Post</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- Post creation form -->
                        <form action="{{ url(https://medium.com/'/posts') }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label for="title" class="form-label">Title</label>
                                <input type="text" class="form-control" id="title" name="title" required>
                            </div>
                            <div class="mb-3">
                                <label for="content" class="form-label">Content</label>
                                <textarea class="form-control" id="content" name="content" rows="3" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-success">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

This will show a button that opens a modal where you can create a new post. The form will send a POST request to store the data.

Step 5: Test the Application

1. Start your Laravel development server:

php artisan serve

• Visit http://localhost:8000/posts/create in your browser.
• Click the “Create Post” button to open the modal and submit the form.
• After successful submission, you will be redirected to the same page with a success message.