Webdev Tutorials, for Noobs
Webdev Tutorials, for Noobs
Webdev Tutorials, for Noobs
  • $0.00 0
    Cart review

    No products in the cart.

Course Content
Setup Mac for Laravel Dev
0/7
Set up homebrew
Set up Various Apps
Install Laravel (Complete Guide)
Install Laravel Livewire
Building a Form Component in Laravel using Livewire
Handle the Form Data: Saving the Form Details to the Database
Adding Form Validation & Displaying Error & Success Messages
Build a Contact Form with Laravel Livewire

    Building a Form Component in Laravel using Livewire

    Now that your system is setup with Livewire, let’s work on creating a component.

    Step 1: Generate a Livewire Component

    Open the Terminal on your Mac and navigate to your livewire_practice directory by using the following command:

    cd [your livewire_project path]

    Make sure to replace [your livewire_practice path] with the actual path of your livewire_practice folder path. Now, you have to generate a Livewire component by running the following command in your terminal:

    php artisan make:livewire ContactForm

    make-livewire-contactform

    This command will create a new Livewire component named ContactForm. You can find the component in the “livewire” directory of your Laravel application, located in the “resources/views/” directory.

    Step 2: Add a Form to the Livewire Component View

    Next, open the contact-form.blade.php file in your code editor. You’ll find this file in the livewire_practiceresourcesviewslivewire folder. Open the file in the editor and you’ll find that the file contains some basic HTML code.

    <div> 
... 
</div>

    Between the html tags, paste in the following html form.

    <form class="form-control mx-auto my-5 w-50 p-5">
    <div class="row mb-3">
        <label for="name" class="form-label">Name</label> 
        <input id="name" type="text" class="form-control">
    </div>
    <div class="row mb-3">
        <label for="email" class="form-label">Name</label> 
        <input id="email" type="email" class="form-control">
    </div>
    <div class="row mb-3">
        <label for="subject" class="form-label">Subject</label> 
        <input id="subject" type="text" class="form-control">
    </div>
    <div class="row mb-3">
        <label for="message" class="form-label">Subject</label> 
        <textarea class="form-control" id="message" cols="30" rows="6"></textarea>
    </div>
    <div class="row">
        <button class="btn btn-primary">Send Message</button>
    </div>
</form>

    So that the code looks like:

    <div>
    <form class="form-control mx-auto my-5 w-50 p-5">
        <div class="row mb-3">
            <label for="name" class="form-label">Name</label> 
            <input id="name" type="text" class="form-control">
        </div>
        <div class="row mb-3">
            <label for="email" class="form-label">Name</label> 
            <input id="email" type="email" class="form-control">
        </div>
        <div class="row mb-3">
            <label for="subject" class="form-label">Subject</label> 
            <input id="subject" type="text" class="form-control">
        </div>
        <div class="row mb-3">
            <label for="message" class="form-label">Subject</label> 
            <textarea class="form-control" id="message" cols="30" rows="6"></textarea>
        </div>
        <div class="row">
            <button class="btn btn-primary">Send Message</button>
        </div>
    </form>
</div> 

    (note: a livewire component must always have a single html element as the top most parent element.)

    Step 3: Add the Livewire Component to a blade View

    In this file, you can add the Livewire component to your view by adding the following code in between the <body> tags. If you want, you can also replace it with the “Some Text here” text written there:

    <livewire:contact-form />

    Now open the welcome.blade.php file in your text editor. You’ll find this file in the livewire_practiceresourcesviews folder.

    This directive represents a basic HTML form. To preview what this looks like in the browser:

    You should then see:

    In the next step we will validate our data and save it to the database.

    Previous
    Next