DEV Community: Techsolutionstuff

Tips: Optimize Database Queries (2024) 🔥

Techsolutionstuff — Wed, 01 May 2024 14:19:05 +0000

Laravel 11 Ajax Form Submit With Validation

Techsolutionstuff — Wed, 01 May 2024 04:30:00 +0000

Hello developers! In this guide, we'll see the laravel 11 Ajax form submitted with validation.

Here, we'll learn about how to submit forms with Ajax and perform validation in Laravel 11. We'll submit a form without page refresh using jQuery Ajax.

In this article, we'll create a form and it will open when click on the Create button then send an Ajax form request, and validate the form data into the controller.

So, let's see AJAX form validation in laravel 11.

Step 1: Installing Laravel 11 Application

Step 2: Create Migration and Model

Step 3: Create a Controller

Step 4: Create a Routes

Step 5: Create Blade File

Step 6: Run the Laravel 11 App

Step 1: Installing Laravel 11 Application

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel-11-ajax-form

Step 2: Create Migration and Model

Then, we'll create a migration using the following command.

php artisan make:migration create_posts_table

Migration

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up(): void()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down(): void
    {
        Schema::dropIfExists('posts');
    }
};

Next, we'll migrate the migration into the database using the following command.

php artisan migrate

Now, we'll create a Post.php model using the following command.

php artisan make:model Post

app/Models/Post.php

<?php

namespace App\Models;

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

class Post extends Model
{
    use HasFactory;

    /**
     * Write code on Method
     *
     * @return response()
     */
    protected $fillable = [
        'title', 'body'
    ];
}

Step 3: Create a Controller

Then, we'll create a new PostController.php using the following command.

php artisan make:controller PostController

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use App\Models\Post;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;

class PostController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(): View
    {
        $posts = Post::get();

        return view('posts', compact('posts'));
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function store(Request $request): JsonResponse
    {
        $request->validate([
            'title' => 'required',
            'body' => 'required',
        ]);

        Post::create([
            'title' => $request->title,
            'body' => $request->body,
        ]);

        return response()->json(['success' => 'Post created successfully.']);
    }
}

Step 4: Create Routes

Then, we'll define the routes in the web.php file.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\PostController;

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

Step 5: Create Blade File

Now, we'll create a posts.blade.php file. In this file, we'll create a form and send an AJAX jQuery request.

resources/views/posts.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Ajax Form Submit With Validation - Techsolutionstuff</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" ></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body>

<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3"><i class="fa fa-star"></i> Laravel 11 Ajax Form Submit With Validation - Techsolutionstuff</h3>
        <div class="card-body">

            <table class="table table-bordered mt-3">
                <tr>
                    <th colspan="3">
                        List Of Posts
                        <button type="button" class="btn btn-success float-end" data-bs-toggle="modal" data-bs-target="#postModal"><i class="fa fa-plus"></i> 
                          Create Post
                        </button>
                    </th>
                </tr>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Body</th>
                </tr>
                @foreach($posts as $post)
                    <tr>
                        <td>{{ $post->id }}</td>
                        <td>{{ $post->title }}</td>
                        <td>{{ $post->body }}</td>
                    </tr>
                @endforeach
            </table>

        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="postModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Create Post</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="ajax-form" action="{{ route('posts.store') }}">
            @csrf

            <div class="alert alert-danger print-error-msg" style="display:none">
                <ul></ul>
            </div>

            <div class="mb-3">
                <label for="titleID" class="form-label">Title:</label>
                <input type="text" id="titleID" name="title" class="form-control" placeholder="Name">
            </div>

            <div class="mb-3">
                <label for="bodyID" class="form-label">Body:</label>
                <textarea name="body" class="form-control" id="bodyID"></textarea>
            </div>

            <div class="mb-3 text-center">
                <button class="btn btn-success btn-submit"><i class="fa fa-save"></i> Submit</button>
            </div>

        </form>
      </div>
    </div>
  </div>
</div>

</body>

<script type="text/javascript">

    $('#ajax-form').submit(function(e) {
        e.preventDefault();

        var url = $(this).attr("action");
        let formData = new FormData(this);

        $.ajax({
                type:'POST',
                url: url,
                data: formData,
                contentType: false,
                processData: false,
                success: (response) => {
                    info('Form submitted successfully');                            
                    $('#postModal').hide();       
                },
                error: function(response){
                    $('#ajax-form').find(".print-error-msg").find("ul").html('');
                    $('#ajax-form').find(".print-error-msg").css('display','block');
                    $.each( response.responseJSON.errors, function( key, value ) {
                        $('#ajax-form').find(".print-error-msg").find("ul").append('<li>'+value+'</li>');
                    });
                }
           });

    });

</script>

</html>

Step 6: Run the Laravel 11 Application

Next, run the laravel 11 application using the following command.

php artisan serve

You might also like:

Laravel 11 Create, Run and Rollback Migration

Techsolutionstuff — Mon, 29 Apr 2024 05:30:00 +0000

In this guide, we'll see how to create, run, and roll back migration in laravel 11.

Migrations are like version control for your database. Also, see run specific migration in laravel 11 and roll back specific migration in laravel 11.

A migration class contains two methods: up and down. The up method is used to add new tables, columns, or indexes to your database, while the down method should reverse the operations performed by the up method.

Create Migration

First, we'll create a migration using the following command.

php artisan make:migration create_blogs_table

After running the above command, you will see a new file in the database/migration folder.

database/migrations/2024_04_06_144031_create_blogs_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('blogs', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->boolean('is_published')->default(0);
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('blogs');
    }
};

Run Migration

Then, we'll migrate the migration into the database using the following command.

php artisan migrate

Run Specific Migration

Run a specific migration using the following command.

php artisan migrate --path=/database/migrations/2024_04_06_144031_create_blogs_table.php

Migration Rollback

Rollback a migration using the following command:

php artisan migrate:rollback

Rollback Specific Migration

Roll back a specific migration using the following command.

php artisan migrate:rollback --path=database/migrations/2024_04_06_144031_create_blogs_table.php

Reset Migration

Reset migration will roll back all the application's migrations.

php artisan migrate:reset

Column-modifiers

In addition to the column types listed above, there are several column "modifiers" you may use when adding a column to a database table.

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

Schema::table('users', function (Blueprint $table) {
    $table->string('email')->nullable();
});

Dropping Columns

To drop a column, you may use the dropColumn method on the schema builder:

Schema::table('users', function (Blueprint $table) {
    $table->dropColumn('votes');
});

Schema::table('users', function (Blueprint $table) {
    $table->dropColumn(['votes', 'avatar', 'location']);
});

You might also like:

Laravel 10 Send Notifications in Slack Channel

Techsolutionstuff — Fri, 26 Apr 2024 04:30:00 +0000

Hey there! If you're a Laravel enthusiast like me, you probably understand the importance of effective team communication and collaboration.

One powerful way to streamline communication within your team is by integrating Slack notifications into your Laravel applications.

In this step-by-step guide, I'll walk you through sending notifications to a Slack channel using Laravel 10.

So, let's see laravel 10 sends notifications in the Slack channel, how to send notifications to the Slack channel in laravel 8/9/10, real-time logging in laravel using Slack, and how to send logs in Slack Laravel 10.

Step 1: Install Laravel 10

If you haven't already, start by installing Laravel 10 by using Composer:

composer create-project laravel/laravel my-project "10.*"

Step 2: Configure Log File

In Laravel, there's a handy file called config/logging.php where you can tweak how your app logs information. This file gives you the power to set up different channels for logging in your application.

config/logging.php

<?php

use Monolog\Handler\NullHandler;
use Monolog\Handler\StreamHandler;
use Monolog\Handler\SyslogUdpHandler;

return [

    'default' => env('LOG_CHANNEL', 'stack'),

    'deprecations' => [
        'channel' => env('LOG_DEPRECATIONS_CHANNEL', 'null'),
        'trace' => false,
    ],

    'channels' => [
        'stack' => [
            'driver' => 'stack',
            'channels' => ['single'],
            'ignore_exceptions' => false,
        ],

        'single' => [
            'driver' => 'single',
            'path' => storage_path('logs/laravel.log'),
            'level' => env('LOG_LEVEL', 'debug'),
        ],

        'daily' => [
            'driver' => 'daily',
            'path' => storage_path('logs/laravel.log'),
            'level' => env('LOG_LEVEL', 'debug'),
            'days' => 14,
        ],

        'slack' => [
            'driver' => 'slack',
            'url' => env('LOG_SLACK_WEBHOOK_URL'),
            'username' => 'Laravel Log',
            'emoji' => ':boom:',
            'level' => env('LOG_LEVEL', 'critical'),
        ],

        'papertrail' => [
            'driver' => 'monolog',
            'level' => env('LOG_LEVEL', 'debug'),
            'handler' => env('LOG_PAPERTRAIL_HANDLER', SyslogUdpHandler::class),
            'handler_with' => [
                'host' => env('PAPERTRAIL_URL'),
                'port' => env('PAPERTRAIL_PORT'),
                'connectionString' => 'tls://'.env('PAPERTRAIL_URL').':'.env('PAPERTRAIL_PORT'),
            ],
        ],

        'stderr' => [
            'driver' => 'monolog',
            'level' => env('LOG_LEVEL', 'debug'),
            'handler' => StreamHandler::class,
            'formatter' => env('LOG_STDERR_FORMATTER'),
            'with' => [
                'stream' => 'php://stderr',
            ],
        ],

        'syslog' => [
            'driver' => 'syslog',
            'level' => env('LOG_LEVEL', 'debug'),
        ],

        'errorlog' => [
            'driver' => 'errorlog',
            'level' => env('LOG_LEVEL', 'debug'),
        ],

        'null' => [
            'driver' => 'monolog',
            'handler' => NullHandler::class,
        ],

        'emergency' => [
            'path' => storage_path('logs/laravel.log'),
        ],
    ],

];

In the log file, there are different options.

'daily' => [
            'driver' => 'daily',
            'path' => storage_path('logs/laravel.log'),
            'level' => env('LOG_LEVEL', 'debug'),
            'days' => 14,
        ],

driver: This tells laravel the driver to use.
path: This tells Laravel where to write the logs to.
level: This tells Laravel the type of log to be handled by this channel. It can be debug, critical, warning etc.
days: The days option tells Laravel how long the log should be retained before deleting.

Step 3: Create a Slack App and Generate a Webhook URL

To send notifications to your Slack channel, you'll need to create a Slack app and generate a webhook URL. Follow these steps:

Go to your Slack workspace and navigate to the Apps section.
Click on Create New App, and give your app a name.
Navigate to the Incoming Webhooks section and toggle it on.
Click on Add New Webhook to Workspace and select the channel where you want to send notifications.
Copy the generated webhook URL.
Slack will now generate a webhook URL for us. Copy it, head over to your .env file and add it to your app like below.

LOG_SLACK_WEBHOOK_URL=https://hooks.slack.com/services/xxxxxxxxxx

Open up the logging.php file then under channels array, since the default is set to stack, let's change the channels to slack from single and save the file.

'stack' => [
            'driver' => 'stack',
            'channels' => ['slack'],
            'ignore_exceptions' => false,
],

Step 4: Test the Log Notification

Let's test it out by opening up Tinker and running the command below:

info("This is just a tutorial demo logging");

Congratulations! You've successfully set up and sent notifications to a Slack channel using Laravel 10.

You might also like:

Multiple ways to Validate Email Addresses

Techsolutionstuff — Wed, 24 Apr 2024 16:49:04 +0000

User Roles and Permissions Using Centralized Database in Laravel 10

Techsolutionstuff — Wed, 24 Apr 2024 04:30:00 +0000

Hey there! Welcome to my article on managing user roles and permissions using a centralized database in Laravel 10. If you're like me, you've probably worked on projects where managing user access levels can quickly become a headache.

Whether granting specific permissions to certain users or defining different roles within your application, it can get complicated fast. Thankfully, Laravel provides us with powerful tools to streamline this process. With the advent of Laravel 10.

In this article, I'll guide you through implementing user roles and permissions in Laravel 10 using a centralized database approach.

So, let's see user roles and permissions using a centralized database in laravel 10, laravel 10 user roles and permissions, roles and permissions in laravel 8/9/10, and custom roles and permissions in laravel 10.

Step 1: Setup Laravel 10 Project

Begin by creating a new Laravel 10 project using Composer:

composer create-project laravel/laravel user-role-permissions

Step 2: Setup Database

Now, we'll setup the database configuration in the .env file.

DB_CONNECTION_CENTRAL_DB=mysql
DB_HOST_CENTRAL_DB=127.0.0.1
DB_PORT_CENTRAL_DB=3306
DB_DATABASE_CENTRAL_DB=roles_and_permissions_laravel10
DB_USERNAME_CENTRAL_DB=root
DB_PASSWORD_CENTRAL_DB=

Run migrations to create these tables:

php artisan migrate

Step 3: Create Roles and Permissions Tables

Then, create a roles and permissions table using the following command.

php artisan make:migration create_roles_table
php artisan make:migration create_permissions_table

Step 4: Create Models

After that, create a model for roles and permissions.

php artisan make:model Role
php artisan make:model Permission

App/Models/Role

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Spatie\Permission\Models\Role as SpatieRole;

class Role extends SpatieRole
{
    protected $connection = 'mysql';
}

App/Models/Permission

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Spatie\Permission\Models\Permission as SpatiePermission;

class Permission extends SpatiePermission
{
    protected $connection = 'mysql';
}

Step 5: Set Environment

Now, we'll add a set environment for mysql_central_db.

config/database.php

use Illuminate\Support\Str;

return [

    /*
    |--------------------------------------------------------------------------
    | Default Database Connection Name
    |--------------------------------------------------------------------------
    |
    | Here you may specify which of the database connections below you wish
    | to use as your default connection for all database work. Of course
    | you may use many connections at once using the Database library.
    |
    */

    'default' => env('DB_CONNECTION', 'mysql'),

    /*
    |--------------------------------------------------------------------------
    | Database Connections
    |--------------------------------------------------------------------------
    |
    | Here are each of the database connections setup for your application.
    | Of course, examples of configuring each database platform that is
    | supported by Laravel is shown below to make development simple.
    |
    |
    | All database work in Laravel is done through the PHP PDO facilities
    | so make sure you have the driver for your particular database of
    | choice installed on your machine before you begin development.
    |
    */

    'connections' => [

        'sqlite' => [
            'driver' => 'sqlite',
            'url' => env('DATABASE_URL'),
            'database' => env('DB_DATABASE', database_path('database.sqlite')),
            'prefix' => '',
            'foreign_key_constraints' => env('DB_FOREIGN_KEYS', true),
        ],

        'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

        'mysql_central_db' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL_CENTRAL_DB'),
            'host' => env('DB_HOST_CENTRAL_DB', '127.0.0.1'),
            'port' => env('DB_PORT_CENTRAL_DB', '3306'),
            'database' => env('DB_DATABASE_CENTRAL_DB', 'forge'),
            'username' => env('DB_USERNAME_CENTRAL_DB', 'forge'),
            'password' => env('DB_PASSWORD_CENTRAL_DB', ''),
            'unix_socket' => env('DB_SOCKET_CENTRAL_DB', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => false,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

        'pgsql' => [
            'driver' => 'pgsql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '5432'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'charset' => 'utf8',
            'prefix' => '',
            'prefix_indexes' => true,
            'search_path' => 'public',
            'sslmode' => 'prefer',
        ],

        'sqlsrv' => [
            'driver' => 'sqlsrv',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', 'localhost'),
            'port' => env('DB_PORT', '1433'),
            'database' => env('DB_DATABASE', 'forge'),
            'username' => env('DB_USERNAME', 'forge'),
            'password' => env('DB_PASSWORD', ''),
            'charset' => 'utf8',
            'prefix' => '',
            'prefix_indexes' => true,
            // 'encrypt' => env('DB_ENCRYPT', 'yes'),
            // 'trust_server_certificate' => env('DB_TRUST_SERVER_CERTIFICATE', 'false'),
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Migration Repository Table
    |--------------------------------------------------------------------------
    |
    | This table keeps track of all the migrations that have already run for
    | your application. Using this information, we can determine which of
    | the migrations on disk haven't actually been run in the database.
    |
    */

    'migrations' => 'migrations',

    /*
    |--------------------------------------------------------------------------
    | Redis Databases
    |--------------------------------------------------------------------------
    |
    | Redis is an open source, fast, and advanced key-value store that also
    | provides a richer body of commands than a typical key-value system
    | such as APC or Memcached. Laravel makes it easy to dig right in.
    |
    */

    'redis' => [

        'client' => env('REDIS_CLIENT', 'phpredis'),

        'options' => [
            'cluster' => env('REDIS_CLUSTER', 'redis'),
            'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
        ],

        'default' => [
            'url' => env('REDIS_URL'),
            'host' => env('REDIS_HOST', '127.0.0.1'),
            'username' => env('REDIS_USERNAME'),
            'password' => env('REDIS_PASSWORD'),
            'port' => env('REDIS_PORT', '6379'),
            'database' => env('REDIS_DB', '0'),
        ],

        'cache' => [
            'url' => env('REDIS_URL'),
            'host' => env('REDIS_HOST', '127.0.0.1'),
            'username' => env('REDIS_USERNAME'),
            'password' => env('REDIS_PASSWORD'),
            'port' => env('REDIS_PORT', '6379'),
            'database' => env('REDIS_CACHE_DB', '1'),
        ],

    ],

];

Step 6: Attach Roles and Permissions

In this step, we'll attach roles and permissions in the config/permission.php file.

'role' => App\Models\Role::class,
'permission' => App\Models\Permission::class,

Step 7: Used Centralized Database

In this step, we'll use a centralized database with the help of env('DB_DATABASE_CENTRAL_DB').

$customerRevenueCharges = DB::table('loads')
    ->select('users.company_name as customer_name',DB::raw("SUM(loads.commission_amount) as total_amount"))
    ->join(env('DB_DATABASE_CENTRAL_DB').'.users',env('DB_DATABASE_CENTRAL_DB').'.users.id','loads.user_id')
    ->orderBy('total_amount','DESC')
    ->groupBy('loads.user_id')
    ->take(10)
    ->cursor();

You might also like:

How to Add Dependent Validation using jQuery Validate.js

Techsolutionstuff — Mon, 22 Apr 2024 04:30:00 +0000

Hey there! If you're like me, you know that making sure the information users input into your website is correct and secure is super important.

That's where validation comes in handy, and today, I'm excited to walk you through adding a special kind of validation called dependent validation using jQuery Validate.js.

Imagine you have a form where users must create a password and confirm it. It's crucial to ensure they've typed the same password twice, right?

In this guide, I'll take you through the process step by step, making it easy to follow even if you're new to web development.

So, let's see how to add dependent validation using jquery validate.js, jquery validation, depend validation using jquery, and condition-based validation using jquery validate.js.

Step 1: Set Up Your HTML Form

Begin by creating your HTML form with the necessary input fields. For this example, let's imagine a form with two fields: "Password" and "Confirm Password".

<form id="myForm">
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">

  <label for="confirm_password">Confirm Password:</label>
  <input type="password" id="confirm_password" name="confirm_password">

  <button type="submit">Submit</button>
</form>

Step 2: Include jQuery and jQuery Validate.js

Make sure you have jQuery and jQuery Validate.js included in your project. You can do this by adding the following script tags in your HTML file.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script>

Step 3: Write Your Validation Rules

Next, define your validation rules using jQuery Validate.js. In this case, we want to ensure that the "Confirm Password" field matches the value of the "Password" field.

$(document).ready(function() {
  $('#myForm').validate({
    rules: {
      password: {
        required: true,
        minlength: 8
      },
      confirm_password: {
        required: true,
        equalTo: '#password'
      }
    },
    messages: {
      password: {
        required: "Please enter a password",
        minlength: "Your password must be at least 8 characters long"
      },
      confirm_password: {
        required: "Please confirm your password",
        equalTo: "Passwords do not match"
      }
    }
  });
});

Example:

rules: {
    'contact': {
      required: true,
      email: {
        depends: function(element) {
          return $("#email").is(":checked");
        }
      },
      number: {
        depends: function(element) {
          return $("#phone_number").is(":checked");
        }
      }
    }
  }

Example:

<form id="myForm">
  <label for="age">Age:</label>
  <input type="number" id="age" name="age">

  <label for="grade">Grade:</label>
  <select id="grade" name="grade">
    <option value="1">1st Grade</option>
    <option value="2">2nd Grade</option>
    <option value="3">3rd Grade</option>
    <!-- More options up to 12th grade -->
  </select>

  <button type="submit">Submit</button>
</form>
$(document).ready(function() {
  $('#myForm').validate({
    rules: {
      age: {
        required: true,
        min: 1
      },
      grade: {
        required: true,
        depends: function(element) {
          // Check if age is under 18
          return $('#age').val() < 18;
        },
        max: 10
      }
    },
    messages: {
      age: {
        required: "Please enter your age",
        min: "Age must be a positive number"
      },
      grade: {
        required: "Please select your grade",
        max: "You cannot select a grade higher than 10th grade if you're under 18"
      }
    }
  });
});

In this example, the "Grade" field's validation is dependent on the value entered in the "Age" field. If the user's age is under 18, they won't be able to select a grade higher than 10th grade.

You might also like:

How to Create Services in Laravel 10

Techsolutionstuff — Fri, 19 Apr 2024 05:30:00 +0000

Hey there, Ever found yourself writing the same chunk of code over and over again in your Laravel controllers? Well, I've got just the solution for you! In this guide, I'm going to show you how to create services in Laravel 10.

Services are like little helpers that contain reusable blocks of code.

They're fantastic for keeping your controllers clean and focused, and they make your code easier to maintain and understand.

By the end of this guide, you'll be able to create your own services in Laravel and use them to streamline your application's logic.

So, let's see how to create services in laravel 10, laravel services, what is service in laravel 10, create and register the service, and how to create a service class in laravel 8/9/10.

What is the difference between helper and service in laravel?

In Laravel, both helpers and services play crucial roles in organizing and facilitating code, but they serve different purposes and are used in different contexts:

Helpers:

Helpers are utility functions or classes that provide commonly used functionalities throughout your application.
They are typically globally accessible and are used to perform common tasks like string manipulation, array operations, generating URLs, formatting data, etc.
Laravel provides a set of built-in helper functions and classes that you can use directly in your code without needing to import or instantiate them explicitly.

Services:

Services, on the other hand, are classes that encapsulate specific business logic or functionality within your application.
They are designed to handle more complex and domain-specific tasks, such as interacting with databases, making API calls, performing calculations, and implementing business rules.
Services are typically instantiated and used within your application's components (such as controllers, commands, or other services) to perform specific operations.
Unlike helpers, services are not globally accessible by default. Instead, they are typically instantiated and injected into the components that require them, following the principles of dependency injection.

Step 1: Create a New Service Class

To create a new service class, simply generate a new PHP file in your app/Services directory. You can name this file based on the functionality it provides. For example, MyService.php.

Step 2: Write Your Service Logic

Next, let's define the logic for your service. This could include interacting with models, making API calls, performing calculations, or any other business logic specific to your application.

app/Services/MyService.php

namespace App\Services;

class MyService
{
    public function doSomething()
    {
        // Your business logic goes here
        return "I'm doing something!";
    }
}

Step 3: Utilize Your Service in Controllers

Now that your service is ready, let's use it in your controllers. Simply inject your service class into the constructor or method where you need it, and then call its methods as needed.

app/Http/Controllers/MyController.php

namespace App\Http\Controllers;

use App\Services\MyService;

class MyController extends Controller
{
    protected $myService;

    public function __construct(MyService $myService)
    {
        $this->myService = $myService;
    }

    public function someMethod()
    {
        $result = $this->myService->doSomething();
        return response()->json(['message' => $result]);
    }
}

In this example, MyService contains a method doSomething() that returns a simple message.

The MyController injects an instance of MyService through its constructor and calls the doSomething() method. Finally, it returns a JSON response with the result.

Step 4: Register Your Service (Optional)

If you're using Laravel's service container to inject dependencies automatically, you don't need to register your service explicitly.

However, if you prefer manual dependency injection or need to customize how your service is instantiated, you can register it in the AppServiceProvider.

Conclusion

And that's it! You've successfully created a service in Laravel 10 and integrated it into your application.

You might also like:

How to Process Large CSV Files with Laravel 10

Techsolutionstuff — Wed, 17 Apr 2024 05:30:00 +0000

Hey folks! Are you tired of feeling overwhelmed by those massive CSV files in your Laravel projects? Well, I've got some good news for you!

In this guide, I'm going to walk you through the process of handling those hefty CSV files with ease using Laravel.

By the end of this guide, you'll have the skills and confidence to tackle those giant CSV files like a pro, thanks to the power of Laravel and some nifty tools.

In this article, we'll see how to process large CSV files with laravel 10, laravel 10 imports large CSV files, how to handle large CSV files in laravel 8/9/10, and how to import CSV files using spatie/simple-excel.

Step 1: Set Up Your Laravel Project

First things first, let's get our Laravel project up and running. If you haven't already, install Laravel by running:

laravel new my-laravel-project

Step 2: Install the spatie/simple-excel Package

Next, let's install the spatie/simple-excel package via Composer. In your terminal, navigate to your project directory and run:

composer require spatie/simple-excel

we'll use SimpleExcelReader to load it up. by default, it returns you a LazyCollection – think of it as a more considerate way to handle your data without exhausting your server's memory. This means you can process the file bit by bit.

Step 3: Create a Laravel Job for importing CSV

Now, we'll create a job using the following command.

php artisan make:job ImportCSV

App/Jobs/ImportCSV.php

<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Spatie\SimpleExcel\SimpleExcelReader;

class ImportCSV implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    /**
     * Create a new job instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Execute the job.
     */
    public function handle(): void
    {
        SimpleExcelReader::create(storage_path('app/public/products.csv'))
            ->useDelimiter(',')
            ->useHeaders(['ID', 'title', 'description'])
            ->getRows()
            ->chunk(5000)
            ->each(
                // Here we have a chunk of 5000 products
            );
    }
}

Here's is follow some steps to import large CSV files.

Chunking the CSV: We'll split the big file into smaller parts, making it easier to handle. This gives us smaller chunks to work with, which is much simpler.

Job Dispatching: We'll send each of these smaller chunks as separate tasks. This helps us manage the workload better and is gentler on your server.

Database Insertion: Then, we'll smoothly add each chunk to the database. It's a straightforward process that ensures everything goes in neatly.

Chunking the CSV

With our LazyCollection set up, we'll break down the CSV into smaller parts. It's similar to slicing a huge sandwich into smaller, manageable pieces.

php artisan make:job ImportProductChunk

For each part of the CSV file, we'll create and start a job. These jobs act like dedicated workers, each handling a portion of the data and inserting it into your database with care.

<?php

namespace App\Jobs;

use App\Models\Product;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldBeUnique;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Str;

class ImportProductChunk implements ShouldBeUnique, ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    public $uniqueFor = 3600;

    /**
     * Create a new job instance.
     */
    public function __construct(
        public $chunk
    ) {
        //
    }

    /**
     * Execute the job.
     */
    public function handle(): void
    {
        $this->chunk->each(function (array $row) {
            Model::withoutTimestamps(fn () => Product::updateOrCreate([
                'product_id' => $row['ID'],
                'title' => $row['title'],
                'description' => $row['description'],
           ]));
        });
    }

    public function uniqueId(): string
    {
        return Str::uuid()->toString();
    }
}

Ensuring Uniqueness

One important thing to remember is to use $uniqueFor and uniqueId in your jobs. It's similar to giving each worker a special ID badge. This way, you ensure that no two workers end up doing the same job, which is really bad for efficiency.

Dispatching Jobs

In our ImportCSV job, we'll send out a job for every chunk using each method.

<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Spatie\SimpleExcel\SimpleExcelReader;

class ImportCSV implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    /**
     * Create a new job instance.
     */
    public function __construct()
    {
        //
    }

    /**
     * Execute the job.
     */
    public function handle(): void
    {
        SimpleExcelReader::create(storage_path('app/public/products.csv'))
            ->useDelimiter(',')
            ->useHeaders(['ID', 'title', 'description'])
            ->getRows()
            ->chunk(5000)
            ->each(
                fn ($chunk) => ImportProductChunk::dispatch($chunk)
            );
    }
}

And there you have it! Your large CSV files are ready to be processed efficiently, with each part handled separately, avoiding any memory issues. If you're pressed for time, simply add more workers to speed up the process.

You might also like:

Read Also: How to Import CSV File in Laravel 10 using League/csv

Read Also: Efficient CSV File Uploads in Laravel 10 with Python

How to Add Flatpickr Time Picker Example

Techsolutionstuff — Mon, 15 Apr 2024 05:30:00 +0000

Hello, developers! Today, let's explore the world of time selection and learn how to integrate a sleek Time Picker into our web applications using Flatpickr.

Flatpickr, known for its simplicity and flexibility, is an excellent choice for adding date and time-picking functionalities.

In this guide, I'll walk you through the process step by step, keeping it straightforward with CDN (Content Delivery Network) files.

In this article, I'll give you examples of timer pickers, time picker with AM/PM, 24-hour time picker, and preloading time. Also, you can use it in laravel 8, laravel 9, laravel 10 and PHP.

So, let's see how to add a flatpickr time picker example, time picker, flatpickr time format, flatpickr 24 hour time, time picker cdn, time picker with am pm, jquery time picker with am pm.

Step 1: Setting Up Flatpickr

First things first, make sure Flatpickr is included in your project. You can either download it or use the CDN. For simplicity, let's go with the CDN:

<!-- Include Flatpickr CSS and JS via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

Step 2: Create an HTML Input Element

Add an input field to your HTML file with a class that you'll use for initializing Flatpickr:

<input type="text" class="time-picker" placeholder="Select Time">

Example:

Create an HTML file (e.g., index.html) and include the necessary CDN links for Flatpickr:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flatpickr Time Picker Example - Techsolutionstuff</title>

    <!-- Flatpickr CSS CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.9/dist/flatpickr.min.css">

    <!-- Flatpickr JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.9/dist/flatpickr.min.js"></script>
</head>
<body>

<input type="text" class="time-picker" placeholder="Select Time">

    <script>
        // Initialize Flatpickr with Time Picker
        flatpickr('.time-picker', {
            enableTime: true,
            noCalendar: true,
            dateFormat: 'H:i',
        });
    </script>
</body>
</html>

24-hour Time Picker

<script>
        // Initialize Flatpickr with Time Picker
        flatpickr('.time-picker', {
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i",
                time_24hr: true
        });
</script>

Time Picker w/ Limits

<script>
        // Initialize Flatpickr with Time Picker
        flatpickr('.time-picker', {
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i",
                minTime: "14:00",
                maxTime: "20:30",
        });
</script>

Preloading Time

<script>
        // Initialize Flatpickr with Time Picker
        flatpickr('.time-picker', {
                enableTime: true,
                noCalendar: true,
                dateFormat: "H:i",
                defaultDate: "15:30"
        });
</script>

You might also like:

Date Range Calendar in Flatpickr Example

Techsolutionstuff — Fri, 12 Apr 2024 05:30:00 +0000

Hello, developers! Today, let's explore how to implement a Date Range Calendar in your web applications using Flatpickr.

Flatpickr is a lightweight and customizable JavaScript date picker library, and the best part? We're going to keep things simple by using CDN (Content Delivery Network) files.

In this article, I'll give a step-by-step guide for the date range calendar in flatpickr in laravel 8, laravel 9, laravel 10, and PHP.

So, let's see the date range calendar in flatpickr example, flatpickr date range, how to set date range in datepicker, how to set date range in flatpickr, date range picker laravel 8/9/10.

Step 1: Setting Up Flatpickr

First things first, make sure Flatpickr is included in your project. You can either download it or use the CDN. For simplicity, let's go with the CDN:

<!-- Include Flatpickr CSS and JS via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

Step 2: Create an HTML Input Element

Add an input field to your HTML file with a class that you'll use for initializing Flatpickr:

<input type="text" class="date-range-picker" placeholder="Select Date Range">

Example

Create an HTML file (e.g., index.html) and include the necessary CDN links for Flatpickr:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Range Calendar with Flatpickr</title>

    <!-- Flatpickr CSS CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.9/dist/flatpickr.min.css">

    <!-- Flatpickr JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.9/dist/flatpickr.min.js"></script>
</head>
<body>

<input type="text" class="date-range-picker" placeholder="Select Date Range">

    <script>
        // Initialize Flatpickr
        flatpickr('.date-range-picker', {
            mode: 'range',
            dateFormat: 'Y-m-d',
        });
    </script>
</body>
</html>

Note that disabled dates (by either minDate, maxDate, enable or disable) will not be allowed in selections.

{
    mode: "range",
    minDate: "today",
    dateFormat: "Y-m-d",
    disable: [
        function(date) {
            // disable every multiple of 8
            return !(date.getDate() % 8);
        }
    ]
}

Preloading range dates

{
    mode: "range",
    dateFormat: "Y-m-d",
    defaultDate: ["2024-02-10", "2016-02-20"]
}

And there you have it! In just a few simple steps, we've integrated a Date Range Calendar into our web application using Flatpickr with CDN files.

You might also like:

Read Also: Laravel 10 Datatable Date Range Filter using AJAX

How to Disable Dates in Flatpickr Example

Techsolutionstuff — Wed, 10 Apr 2024 05:30:00 +0000

Greetings developers! 🌟 Today, we embark on a journey to master the art of disabling dates in Flatpickr, the date picker library that brings both elegance and functionality to your projects.

Whether you need to restrict specific dates, block out ranges, or dynamically disable dates using a function, Flatpickr has the flexibility you crave.

Let's dive in and harness the full potential of date control with Flatpickr! 📅✨

So, let's see how to disable dates in flatpickr example, disable date in date picker, specific date disable in flatpickr, past date disable in flatpickr, and date range disable in flatpickr.

Step 1: Setting Up Flatpickr

First things first, make sure Flatpickr is included in your project. You can either download it or use the CDN. For simplicity, let's go with the CDN:

<!-- Include Flatpickr CSS and JS via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

Step 2: Create an HTML Input Element

Create an HTML input element to serve as your date picker. Give it a unique ID, such as "myDatePicker."

<!-- Your HTML input element -->
<input type="text" id="myDatePicker" placeholder="Select a date">

Step 3: Disable Specific Dates

Let's start by disabling specific dates. In this example, we'll block out January 15, 2024.

// Initialize Flatpickr and disable specific date
const myDatePicker = flatpickr("#myDatePicker", {
    disable: ["2024-01-15"],
});
// Initialize Flatpickr and disable specific date
const myDatePicker = flatpickr("#myDatePicker", {
    disable: ["2025-01-30", "2025-02-21", "2025-03-08", new Date(2025, 4, 9) ],
    dateFormat: "Y-m-d",
});

Step 4: Disable a Date Range

Now, let's disable a date range, say from January 1, 2024, to January 10, 2024.

// Initialize Flatpickr and disable date range
const myDatePicker = flatpickr("#myDatePicker", {
    disable: [
        { from: "2024-01-01", to: "2024-01-10" }
    ],
});
// Initialize Flatpickr and disable date range
const myDatePicker = flatpickr("#myDatePicker", {
    dateFormat: "Y-m-d",
    disable: [
        {
            from: "2025-04-01",
            to: "2025-05-01"
        },
        {
            from: "2025-09-01",
            to: "2025-12-01"
        }
    ],
});

Step 5: Disable Dates Using a Function

For more dynamic control, let's use a function to disable weekends. This example demonstrates how to disable Saturdays and Sundays.

// Initialize Flatpickr and disable dates using a function
const myDatePicker = flatpickr("#myDatePicker", {
    disable: [
        function(date) {
            // Disable weekends (Saturdays and Sundays)
            return (date.getDay() === 0 || date.getDay() === 6);
        }
    ],
});

And there you have it! You've successfully wielded the power of Flatpickr to disable specific dates, date ranges, and even utilized a function for dynamic date control.

DEV Community: Techsolutionstuff

Tips: Optimize Database Queries (2024) 🔥

Laravel 11 Ajax Form Submit With Validation

Laravel 11 Create, Run and Rollback Migration

Laravel 10 Send Notifications in Slack Channel

Multiple ways to Validate Email Addresses

User Roles and Permissions Using Centralized Database in Laravel 10

How to Add Dependent Validation using jQuery Validate.js

How to Create Services in Laravel 10

Read Also: How to Process Large CSV Files with Laravel 10

Read Also: Role And Permission In Laravel 9 Tutorial

How to Process Large CSV Files with Laravel 10

Read Also: How to Import CSV File in Laravel 10 using League/csv

Read Also: Efficient CSV File Uploads in Laravel 10 with Python

Read Also: How To Import CSV File In MySQL Using PHP

How to Add Flatpickr Time Picker Example

Read Also: Bootstrap DateTimepicker Example

Read Also: Date Range Calendar in Flatpickr Example

Date Range Calendar in Flatpickr Example

Read Also: Bootstrap Date Range Picker Example

Read Also: Laravel 10 Datatable Date Range Filter using AJAX

How to Disable Dates in Flatpickr Example

Read Also: How to set minDate and maxDate in Flatpickr