Category: Software Programming

Develop Contact Form using Livewire in Laravel

Learn how to create a responsive contact form using Livewire in Laravel. Step-by-step tutorial with validation, form submission, and real-time updates.

Developing a Contact form using Livewire in Laravel is straightforward and involves a very few key steps.

In this post, we will learn to develop contact form using Livewire component in Laravel. Follow the below steps:

Step 1: Install Livewire

To create any Livewire form, you must have Livewire installed over Laravel project. If you haven’t installed Livewire yet, you can do so via Composer:

composer require livewire/livewire

It will install Livewire package to you Laravel project.

Step 2: Create a Livewire Component

Now, we need to create a Livewire component for contact form. You can generate a Livewire component using Artisan command as follows:

php artisan make:livewire ContactForm

This will create 2 files as follows:

  • A Livewire component file at app/Http/Livewire/ContactForm.php
  • A Blade view at resources/views/livewire/contact-form.blade.php

Your contact form component is now ready to be used. But, we haven’t added any logic or any design to this component. So, if you add this component to any file, it will display blank page.

Step 3: Define the Livewire Component Logic

Open app/Http/Livewire/ContactForm.php and add all contact form related logic to the file as follows:

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Contact;
use Illuminate\Validation\Rule;

class ContactForm extends Component
{
    public $name, $email, $message;

    protected $rules = [
        'name' => 'required|min:3',
        'email' => 'required|email',
        'message' => 'required|min:5',
    ];

    public function submit()
    {
        $this->validate();

        // Save data
        Contact::create([
            'name' => $this->name,
            'email' => $this->email,
            'message' => $this->message,
        ]);

        // Reset the form
        $this->reset(['name', 'email', 'message']);

        session()->flash('success', 'Your message has been sent!');
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}

Step 4: Create the Livewire Blade View

Open resources/views/livewire/contact-form.blade.php and update the HTML form as per your requirement. I have added my blade file design as follows:

<div>
    @if (session()->has('success'))
        <div class="p-3 mb-4 text-green-600 bg-green-200 border border-green-600 rounded">
            {{ session('success') }}
        </div>
    @endif

    <form wire:submit.prevent="submit">
        <div class="mb-4">
            <label for="name" class="block font-bold">Name:</label>
            <input type="text" id="name" wire:model="name" class="w-full p-2 border rounded">
            @error('name') <span class="text-red-600">{{ $message }}</span> @enderror
        </div>

        <div class="mb-4">
            <label for="email" class="block font-bold">Email:</label>
            <input type="email" id="email" wire:model="email" class="w-full p-2 border rounded">
            @error('email') <span class="text-red-600">{{ $message }}</span> @enderror
        </div>

        <div class="mb-4">
            <label for="message" class="block font-bold">Message:</label>
            <textarea id="message" wire:model="message" class="w-full p-2 border rounded"></textarea>
            @error('message') <span class="text-red-600">{{ $message }}</span> @enderror
        </div>

        <button type="submit" class="px-4 py-2 text-white bg-blue-600 rounded">Send</button>
    </form>
</div>

I have added some additional features like displaying success message and added error message display elements to each fields.

Step 5: Add Livewire to a Page

Now it is ready to be included to any page. You can include this component using @livewire directive provided by Livewire package. Include this Livewire component in your Blade view (e.g., resources/views/contact.blade.php):

@extends('layouts.app')

@section('content')
    <div class="container mx-auto p-4">
        <h1 class="text-xl font-bold">Contact Us</h1>
        @livewire('contact-form')
    </div>
@endsection

Still it is not visible to the page. Because, Livewire scripts and styles are missing.

Step 6: Include Livewire Scripts

You have to add Livewire scripts and styles to the layout, where you want to display any Livewire Component. You can add Livewire scripts and styles to the layout using their directives @livewireScripts and @livewireStyles respectively.

Add Livewire scripts in your layouts/app.blade.php file before the closing </body> tag of the layout file:

@livewireScripts
</body>
</html>

And add the Livewire styles in <head> tag of the layout file:

@livewireStyles

Note: If you have multiple layouts and these layouts are used to display Livewire Compoment pages, then you have to add Livewire scripts and styles in all of these layouts.

Step 7: Run Migrations and Serve the App

In component file, we have added a code to save contact form details to the database. So, If you don’t have contacts table already, create a migration for the contacts table:

php artisan make:migration create_contacts_table

Open the migration file (database/migrations/xxxx_xx_xx_xxxxxx_create_contacts_table.php) and add the necessary fields as follows:

public function up()
{
    Schema::create('contacts', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email');
        $table->text('message');
        $table->timestamps();
    });
}

public function down(): void
{
    Schema::dropIfExists('contacts');
}

Run the migration:

php artisan migrate

It will create the contacts table into the project database. Now, create a model for this migration:

php artisan make:model Contact

It will create contact model file app/models/Contact.php. Open this model file and update it as follows,

<?php

namespace App\Models;

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

class Contact extends Model
{
    use HasFactory;

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

Finally, start your Laravel development server:

php artisan serve

Now, visit http://127.0.0.1:8000/contact, and you should see your Livewire-powered Contact Form working dynamically!

Additional Features You Can Add

  • Real-time validation: Add wire:model.blur="name" to inputs.
  • Loading indicators: Use wire:loading to show a spinner while submitting.

Git Commands to Remove Merged or Nonexistent Local Branches

Discover git commands to delete local branches that have been removed from remote or merged into the main branch.

Over time, your local git branches list can become overwhelming, particularly if you develop on a single branch, generate a pull request, merge it into the main branch, and then remove the remote git branch once it has been merged. After the branch is removed from the remote repository, there is no need to keep it on your local machine.

The following git command will delete all local branches that have been merged into the main branch. If your git trunk branch is not named main or you wish to remove all branches that have been merged into a branch other than main, simply modify the two instances of the word main in the command to reflect the name of your branch.

List of git commands to remove local merged git branches

To remove all the local branches, which are merged into the main branch, navigate to the root of the repository and run the following git commands,

  • Fetch the latest updates from the git repository
git fetch
  • See the list of local branches available in the repository
git branch
  • Delete all local branches that have been merged to main branch 
git branch --merged main | grep -v "^\* main" | xargs -n 1 -r git branch -d

Explanation:

This command is a combination of several Git commands and shell commands that work together to delete all the local Git branches that have been merged into the main branch, except for the main branch itself.

Here’s a breakdown of the individual commands and what they do:

  1. git branch --merged main: This command lists all the local branches that have been merged into the main branch. The --merged option tells Git to only list branches that have been fully merged into main.
  2. grep -v "^\* main": This command filters out the main branch from the list of branches. The -v option tells grep to invert the match, i.e., show only the lines that do not match the pattern. The pattern in this case is "^\* main", which matches lines that start with an asterisk (\*) followed by the text main.
  3. xargs -n 1 -r git branch -d: This command passes the list of merged branches (excluding main) to the git branch -d command, which deletes each branch. The -n 1 option tells xargs to pass one branch name at a time to the git branch -d command. The -r option tells xargs to only run the git branch -d command if there is at least one branch name to pass to it. The -d option tells Git to delete the branches, but only if they have been fully merged into the current branch (in this case, main). Note that this option will fail if the branch has unmerged changes, in which case the -D option could be used instead to force-delete the branch.

Want to learn such useful commands? Get a Mastering Git book from https://amzn.to/3Hp527B

List of git commands to remove local nonexistent git branches

Similarly, run the following git commands to remove all the deleted branches from the local computer:

  • Fetch the latest updates from the git repository
git fetch
  • See the list of local branches available in the repository
git branch
  • Delete all local branches that have been merged to main branch 
git branch -vv | grep ': gone]' | grep -v '\*' | awk '{ print $1; }' | xargs -r git branch -d

Explanation:

This command is a combination of several commands in a shell pipeline that work together to delete Git branches that are marked as "gone".

Here’s a breakdown of the individual commands and what they do:

  1. git branch -vv: This command lists all the Git branches in the local repository, with additional information about their upstream branches (if any). The -vv option adds more information about whether each branch is “up to date”, “behind”, or “ahead” of its upstream branch.
  2. grep ': gone]': This command filters the output of the git branch -vv command to only show the branches that are marked as "gone". The grep command searches for lines that contain the text ": gone]", which indicates that a branch is gone.
  3. grep -v '\*': This command further filters the output to exclude any branches that are currently checked out (indicated by the asterisk symbol). The -v option tells grep to invert the match, i.e., show only the lines that do not contain an asterisk.
  4. awk '{ print $1; }': This command extracts only the branch names from the filtered output. The awk command splits each line of input into fields and prints only the first field, which is the branch name.
  5. xargs -r git branch -d: This command passes the branch names to the git branch -d command, which deletes each branch. The -r option tells xargs to only run the git branch -d command if there is at least one branch name to pass to it. The -d option tells Git to delete the branches. Note that this option will fail if the branch has unmerged changes, in which case the -D option could be used instead to force-delete the branch.

Note: you can test these git commands by creating temporary repository on any git platform like, GitHub, GitLab or Bitbucket.

Disclaimer: This post contains affiliate links. If you use these links to buy something, I may earn a commission at no extra cost to you.

Laravel Middleware Explained: What It Is & How to Create One

Learn what middleware is in Laravel, why it’s essential, and how to create custom middleware for handling requests efficiently. Step-by-step guide included.

Middleware provides a convenient mechanism for inspecting and filtering HTTP requests entering your application. It’s best to envision middleware as a series of “layers” for HTTP requests that must pass through before they hit your application. Each layer can examine the request and even reject it entirely.

For example, Laravel includes a middleware that verifies the authenticity of the user of your application. If the user is not authenticated, the middleware will redirect the user to your application’s login screen. However, if the user is authenticated, the middleware will allow the request to proceed further into the application.

To perform different tasks, we can develop many middlewares besides authentication. For example, a logging middleware might log all incoming requests to your application. 

Laravel framework has included many middlewares, including middleware for authentication and CSRF protection. All of these middlewares are located in the app/Http/Middleware directory.

Create a custom middleware

To create a middleware, we can use the following command,

php artisan make:middleware <middleware-name>

For example, if we want to create a middleware for checking transactions, we can run the following command,

php artisan make:middleware CheckTransaction

 After successful execution of the command, a middleware class will be created under the app/Http/Middleware directory.

In this class, we can define methods to check transactions. If the transaction is not completed, we can redirect the user back to the failed transaction page. However, on the successful transactions, we can allow users to proceed to the next page.

<?php
 
namespace App\Http\Middleware;
 
use Closure;
 
class CheckTransaction
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if ($request->input('status') !== 'completed') {
            return redirect('transaction-failed');
        }
 
        return $next($request);
    }
}

As you can see, if the transaction status does not set to “completed”, the middleware will return an HTTP redirect to the client; otherwise, the request will be passed further into the application.

To pass the request deeper into the application (allowing the middleware to “pass”), you should call the $next callback with the $request.

What are accessors and mutators?

Understand accessors and mutators with real-world examples. Learn how to format and modify model data automatically.

Accessors and mutators are public member functions in a class that exists solely to set or get the value of a class member variable. They are often referred to as getter and setter or set and get functions. I will use the term setter for mutators and getter for accessors for this article.

Many programmers think why we should create getter and setter functions when we can declare public member variables and access them easily using the object of the class. But, there are many benefits from a software engineering point of view to create classes with only private member variables and use getters and setters to manipulate their values.

One of the primary benefits of object oriented design is combining the data and the methods that operate on them into a single component. This is referred to as encapsulation. It allows you to hide the actual implementation of the class from the users of the object. It allows the programmer to make changes in the hidden part of the class design without affecting the users of the objects derived from the class. So if you created some complex class and sold it to a bunch of other developers, you could make changes to your class to improve performance of the hidden part, and they would not have to rewrite their code to use newer versions.

Another crucial benefit of setter functions is that, you can validate the data before set the value. For example, we have created one class for accounting and let’s assume the maximum value for any transaction is 10000. With a public variable, there is no way to stop someone from setting this value to 20000.

Naming conventions

Typically, programmers name getter functions as “get” followed by the name of the variable being accessed and setter functions as “set” followed by the variable name.

Getters and setters in use

The example below adds getters and setters to our Accounting class. 

class Accounting
{
private:
  int transactionLimit;

public:
  // setters
  bool setTransactionLimit(int);

  // getters
  int getTransactionLimit();
};

// Setter function perform input validation
bool Accounting::setTransactionLimit(int l) {
  if (l < 0 || l > 10000)
    return false;
  else {
    transactionLimit = l;
    return true;
  }
}

// Simple getter functions. This hide the 
// actual method of storage from object user.  
int Accounting::getTransactionLimit() {
  return transactionLimit;
}

In above class, the setter functions also validate the input and return true if the value is acceptable or false if not. In that way, the programmer using the class can know if the provided value is valid and write the code to respond in an appropriate manner.