Handle the Form Data: Saving the Form Details to the Database

Saving form details to a database is a common task when developing web applications. In this tutorial, we will discuss how to save contact form details to the database. We will cover the necessary steps that include creating a migration, creating a model, and creating a controller. By the end of this tutorial, you'll be able to save the submitted contact form data to your database.

Let's not waste any more time and dive straight into it.

Step 1: Create and setup Migration

Firstly, we need to create a migration and a model. To create a migration:

• Open up the Terminal app on your Mac and execute the following command:

  php artisan make:migration create_messages_table

  
  This will create and save the Migration file in the livewire_practice/database/migrations folder with the name something like 2023_03_23_023811_create_messages_table.php. In this file name, the starting portion i.e. “2023_03_23_023811_” is auto-generated, based on the date of its creation.
  
• Open this newly created migration file and add the following code in between the “$table->id();” and “$table->timestamps();” values:

  $table->string('name');
  $table->string('email');
  $table->string('subject');
  $table->text('message');

  
  By using the above code, we have added the following fields to our database:
  • Name
  • Email
  • Subject
  • Message

Step 2: Create and setup Model

Once we have created Migration, the next step is to create a Model. Follow the below steps to continue:

• Return to the Terminal window and execute the following command to create our database from the migration file we just created:

  php artisan migrate

  
• Once executed, now execute the following command to create the Model:

  php artisan make:model Message

  
  This will create a new model file in the app/Models folder.
• Navigate to this newly created Model file, located in livewire_practiceapp\Models\Message.php, and open it.
  
• Now we’ll define the fields whose data we want to let into our database. For this, we’ll have to add the following code between the curly brackets as shown below:

  protected $fillable = ['name','email','subject','message'];

  
  In the above code, the “$fillable” line tells our database which form fields’ data it has to save. And as we have defined the name, email, subject, and message fields, the data submitted by the user in these filed will get saved into our database.
• Once that’s done, save the file and close it.

Step 3: Create Save Function

Now, we have our migration and model ready. The next is to create a save function in the Component Controller.

• To begin with, navigate to the ContactForm.php file, listed in app\Http\Livewire\ContactForm.php, and open it so that we can edit its code.
  
• Here, before we add any code to the database, we will bind the function to our form so that we can test how it works.
  To do so, add the following code as shown below:

  public function save(){
  dd('hello world');
  }

  
  
  You can add any message in place of the “hello world” as per your liking. This is just for testing purposes.
• Now, save the ContactForm.php file changes that we have just made and close it.
• Now, open up the contact-form.blade.php file which we created in our previous tutorial. To recall you, the file is located in livewire_practice\resources\views\livewire\contact-from.blade.php location.
• Here, locate the <form> opening HTML tag and replace it with the following:

  <form wire:submit.prevent="save" class="form-control mx-auto my-5 w-50 p-5">

  
• Next, add the following codes inside the <input> tags for their form divisions as shown:
  • Inside the name division’s input tag, add the following code:

    wire:model="name"

  • Inside the email division’s input tag, add the following code:

    wire:model="email"

  • Inside the subject division’s input tag, add the following code:

    wire:model="subject"

  • Inside the message division’s input tag, add the following code:

    wire:model="message"

    
    This will bind the save function to the form and prevent the default function form submission behavior.

Open the ContactForm.php file and here paste the following code right after the class ContactForm extends Component code line’s first curly brace:

public $name;
public $email;
public $subject;
public $message;

The above code will define the form fields that we want to save to our database.

Now, when the user submits the form, the save function will be called instead of the default behavior.

Step 4: Testing the Save function binding

Let’s test out the binding that we’ve just done. For this,

• Open up the contact form that we have built in a web browser. To do so, run the following command in the terminal:

  php artisan serve

  
  This will make your server live.
• Now, open up the web browser and enter the following address in the address bar:

  localhost:8000

  
• You should see the contact form in your web browser. Here, click on the Send Message button.
  
• If you see a black screen displaying your set message, which is “hello world” in our case, that means you’ve successfully called your save function instead of the default one.
  

Step 5: Modify the Save Function

After testing the Save function, now we can freely modify it so that we can actually save the submitted form data to our database. For this, we’ll have to go to our ContactForm.php file again.

In the ContactForm.php file, add the following inside the curly braces of the public function save() code line, replacing the previous “hello world” code:

Message::create([
'name'=>$this->name,
'email'=>$this->email,
'subject'=>$this->subject,
'message'=>$this->message,
]);
// redirect to form view
return redirect()->to('/');

Please note that certain text editors may add a “use” statement to the top of your code file automatically. In case this does not occur, you will need to include this statement manually. To do so, simply add the following “use” statement below the namespace line code:

use App\Models\Message; // use statement

In order to utilize the Message model that was previously established, the “use” statement comes in handy. Now, save everything and open the contact form in the web browser by following the steps described previously in this guide. Then fill out the text fields and click on the Send Message button.
You should be redirected back to the contact form page with all the text fields blank. This means that you previously entered credentials in the Contact Form fields that have been saved to the database.

Step 6: How to check the saved Database Entries

Just to confirm and access the saved data that we submitted in the aforementioned steps, you can follow the below steps. By following the below steps you’ll able to see the Database table where the submitted contact form data gets saved.

• Open Terminal on your Mac and log into your database. To log into your database, execute the following command:

  mysql -u root -p

  
• After executing the above command, you’ll be asked to enter your database password. If you have set any password, then type it and hit the return key. However, if you didn’t set any password, then don’t type anything and just press the return key.
• After logging into your MySQL database, now we’ll have to select the database which we’d created. If you have followed us from previous tutorials, then your database name must be “testdb.” So, execute the following command to select the testdb database:

  use testdb;

  
  Replace “testdb” in the above command with your database name if your database name is different.
  Also, if you don’t remember your database name, then you can first execute the following command to see the list of all your databases:
  show databases;
• Once you’ve selected the database, execute the following command to see the database entries:
  You should see your previously submitted credentials like the Name, Email, Subject, Message, etc.

  select * from messages;

  

Congratulations! You have successfully saved the Contact Form entries in your database table.

And with that said, here comes the end of this specific tutorial. In the next tutorial, we will validate our form data.