Register Form with Captcha Code in Laravel 11

Register Form with Captcha Code in Laravel 11

Hello dear,

This tutorial will show you how to clone a Laravel project from Gitlab. let’s discuss the steps to clone the Laravel project from GitHub. I explained the clone Laravel project from GitHub simply. This article goes into detail on the clone Laravel project from Github on the server.

In this tutorial, I will show you step-by-step instructions on how to clone Laravel projects from Github, GitLab, or Bitbucket and set up an Ubuntu server from scratch. you can easily clone Laravel 6, Laravel 7, Laravel 8, Laravel 9, Laravel 10, and Laravel 11 projects from this post.

So, let's follow the below step-by-step and get done with the clone Laravel app.

Click to Download Project

Click to Download Admin Template

 Prerequisites:

* Git: Git is a version control system that tracks source code changes during software development. Make sure Git is installed on your system. You can download Git from https://git-scm.com/ and follow the installation instructions for your operating system.

* PHP: Laravel requires PHP to be installed on your system. You need PHP version 7.3 or higher. You can check your PHP version by running php -v in your terminal.

* Composer: Composer is a dependency manager for PHP and is used to install Laravel and its dependencies. You can download Composer from https://getcomposer.org/ and follow the installation instructions for your operating system.

* Web Server: You'll need a web server to serve your Laravel application. While Laravel comes with a built-in development server, it's recommended that Apache or Nginx be used for production deployments.

* Database: If the cloned project uses a database, make sure you have the required database management system (e.g., MySQL, PostgreSQL, SQLite) installed on your system. 

Configure Laravel Project:

Install the brand new Laravel project by typing the following command.

composer create-project --prefer-dist laravel/laravel laravelcaptcha

Install the Captcha package:

We must add the Mews captcha package, so switch to your terminal and type the command below.

composer require mews/captcha

Create one controller

php artisan make:controller CaptchaController --resource

It will create one controller file called the CaptchaController.php file.

Define validation and captcha code in the controller file.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Mews\Captcha\Facades\Captcha;

class CaptchaController extends Controller
{
    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
        return view("captchacreate");
    }

    public function captchaValidate(Request $request)
    {
        $request->validate([
            "name" => "required",
            "email" => "required|email",
            "password" => "required|min:6",
            "captcha" => "required|captcha",
        ]);
    }
    public function refreshCaptcha()
    {
        return response()->json(["captcha" => captcha_img()]);
    }
}

Define Routes 

We list the route in routes  >>  web.php file. So let us do it.

Route::group(['namespace' => 'App\Http\Controllers\Auth'],function()
{
    // ----------------------------login--------------------------------//
    Route::controller(LoginController::class)->group(function () {
        Route::get('/login', 'login')->name('login');
        Route::post('/login', 'authenticate');
        Route::get('/logout', 'logout')->name('logout');
    });

    // ------------------------- register ------------------------------//
    Route::controller(RegisterController::class)->group(function () {
        Route::get('/register', 'create')->name('register');
        Route::post('/register','captchaValidate')->name('register');    
        Route::get('refresh/captcha','refreshCaptcha')->name('refresh/captcha');    
    });
});

Create one view file

Create a file in the resources  >>  views  >>   captchacreate.blade.php and set the following code.

<span class="captcha">{!! captcha_img() !!}</span>
<button type="button" class="btn btn-success"><i class="fa fa-refresh" id="refresh"></i></button>

<script type="text/javascript">
    $('#refresh').click(function(){
      $.ajax({
         type:'GET',
         url:'refresh/captcha',
         success:function(data){
            $(".captcha").html(data.captcha);
         }
      });
    });
</script>

Custom captcha

Then move to config >> captcha.php file and change the below code:

<?php

use Illuminate\Support\Str;
return [
    "default" => [
        "length" => 3,
        "width" => 120,
        "height" => 36,
        "quality" => 90,
        "math" => true,
        "expire" => 60,
        "encrypt" => false,
    ],
];

Clear Cache:

php artisan optimize

Serve the Application:

Finally, you can use the following command to start the Laravel development server:

php artisan serve

This will make your application accessible  http://localhost:8000 by default.

Read more document:https://github.com/mewebstudio/captcha