Forem: Jérôme W

Using ChatGPT in a Laravel 10 project

Jérôme W — Mon, 20 Feb 2023 21:55:31 +0000

This tutorial explains how to use ChatGPT in a Laravel 10 project.

I will try to be clear and concise 😃

What you will get

Setup

I'm supposing you already installed the Laravel 10 framework, using the official documentation

Step 1: create controller

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;

class ChatGPTController extends Controller
{
    public function index()
    {
        return view('chatgpt.index');
    }

    public function ask(Request $request)
    {
        $prompt = $request->input('prompt');
        $response = $this->askToChatGPT($prompt);

        return view('chatgpt.response', ['response' => $response]);
    }

    private function askToChatGPT($prompt) 
    {
        $response = Http::withoutVerifying()
            ->withHeaders([
                'Authorization' => 'Bearer ' . env('CHATGPT_API_KEY'),
                'Content-Type' => 'application/json',
            ])->post('https://api.openai.com/v1/engines/text-davinci-003/completions', [
                "prompt" => $prompt,
                "max_tokens" => 1000,
                "temperature" => 0.5
            ]);

        return $response->json()['choices'][0]['text'];
    }
}

Step 2: create routes

<?php
use App\Http\Controllers\ChatGPTController;
use Illuminate\Support\Facades\Route;

(...)
Route::get('/chatgpt', [ChatGPTController::class, 'index'])
    ->name('chatgpt.index');
Route::post('/chatgpt/ask', [ChatG²PTController::class, 'ask'])
    ->name('chatgpt.ask');

Step 3: create layout

// layouts/app.blade.php
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>My ChatGPT App</title>

        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container mt-5">
            @yield('content')
        </div>
    </body>
</html>

Step 4: create index view

// chatgpt/index.blade.php
@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Ask something to ChatGPT</div>

                    <div class="card-body">
                        <form method="POST" action="{{ route('chatgpt.ask') }}">
                            @csrf

                            <div class="form-group">
                                <input type="text" class="form-control text-center" name="prompt" placeholder="Ask something...">
                            </div>

                            <button type="submit" class="btn btn-primary">Send</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Step 5: create response view

// chatgpt/response.blade.php
@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">ChatGPT answer</div>

                    <div class="card-body">
                        <p>{{ $response }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Final step 6: create a .env variable

CHATGPT_API_KEY=YOUR_API_KEY

Get the ChatGPT API key

To get the API key, you can go to api-keys section in your openai platform account and generate your key

The final word 💬

Thanks for reading this little tutorial, feel free to add a comment to share your opinions! 😀☕

If you want the project I created for this tutorial, feel free to go on the repository

If you want more examples, you can go to the official example section : https://platform.openai.com/examples

How to start Laravel project with "sail up" instead of "./vendor/bin/sail up"

Jérôme W — Tue, 31 May 2022 19:11:14 +0000

This tutorial explains how to create a shorcut in your terminal to allow you to start your Laravel project with sail up command instead of ./vendor/bin/sail up using .bashrc in MacOS.

There are only 2 little steps!

Before starting

First, you need to open your terminal. Simple, isn't ? 😂

Step 1

In your terminal, run this to open your .bash_profile file :

nano ~/.bash_profile

And paste this :

if [ -r ~/.bashrc ]; then
   source ~/.bashrc
fi

Exit and save the modification.

Step 2

Still in your terminal, run this to open your .bashrc file :

nano ~/.bashrc

And paste this :

alias sail='bash vendor/bin/sail'

Exit and save the modification.

The final word 💬

Here we go, you can now open any Laravel project using Sail and write the following command to start it :

sail up

Personally, I'm using the Docker's detached mode to free my terminal and be able to use it directly. This consists of adding -d like this :

sail up -d

❓ Notice that I showed 2 steps but depending on your OS environment, you could probably skip the step 1.

Thanks for reading this little tip, feel free to add a comment to share your opinions! 😀☕

How to create a multilingual project in Laravel 8 (i18n)

Jérôme W — Fri, 28 May 2021 20:27:15 +0000

This tutorial explains how to create a language system and be able to change the language in the menu with the corresponding translations.

I will try to be clear and concise 😃

Check out a Spanish translation here

Setup

First, you need to create a controller App/Http/Controllers to record the language in session and be able to retrieve it with the middleware we will create just after :

namespace App\Http\Controllers;

use App;
use Illuminate\Http\RedirectResponse;

class LocalizationController extends Controller
{
    /**
     * @param $locale
     * @return RedirectResponse
     */
    public function index($locale)
    {
        App::setLocale($locale);
        session()->put('locale', $locale);
        return redirect()->back();
    }
}

Now, you must create a middleware App/Http/Middleware to retrieve the language that was recorded in session :

namespace App\Http\Middleware;

use App;
use Closure;

class Localization
{
    /**
     * Handle an incoming request.
     * @param \Illuminate\Http\Request $request
     * @param \Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if (session()->has('locale')) {
            App::setLocale(session()->get('locale'));
        }
        return $next($request);
    }
}

After that, you must save the middleware in app/http/Kernel.php :

    /**
     * The application's route middleware groups.
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            (...)
            \App\Http\Middleware\Localization::class,
        ],

        (...)
    ];

Finaly, create a route to change the language :

use App\Http\Controllers\LocalizationController;

Route::get('lang/{locale}', [App\Http\Controllers\LocalizationController::class, 'index']);

Create the dropdown

First, you must create a flag folder in public/images and store flags images inside :

Secondly, in your menu, insert this code to be able to switch from one language to another :

@php $locale = session()->get('locale'); @endphp
<li class="nav-item dropdown">
    <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
        @switch($locale)
            @case('en')
            <img src="{{asset('images/flag/en.png')}}" width="25px"> English
            @break
            @case('fr')
            <img src="{{asset('images/flag/fr.png')}}" width="25px"> Français
            @break
            @default
            <img src="{{asset('images/flag/en.png')}}" width="25px"> English
        @endswitch
        <span class="caret"></span>
    </a>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="lang/en"><img src="{{asset('images/flag/en.png')}}" width="25px"> English</a>
        <a class="dropdown-item" href="lang/fr"><img src="{{asset('images/flag/fr.png')}}" width="25px"> Français</a>
    </div>
</li>

Let's try it

To test that everything works, insert this code on your homepage or any other page :

<h1>@lang("Bonjour")</h1>

Then to finish, in the resources/lang folder, you have to create a folder for each language you want (for example fr and en) and for each folder, do the following to take into account the text of the homepage to translate :

<?php
// EN folder
return [
    'Bonjour' => 'Hello'
];

Here we go, now if you click on the english flag in your menu, the Bonjour text will change to Hello.

Notice that if you need, there is another way to make translations using json :

{
    "Bonjour" : "Hello"
}

The final word 💬

Thanks for reading this little tutorial, feel free to add a comment to share your opinions! 😀☕

If you're looking for a lot a flags, I have a repository with :

284 flags of countries and unions all over the world
With name France.png or ISO 3166-1 alpha-2 codes fr.png
Available sizes: 16×16, 24×24, 32×32, 48×48, 64×64, 128×128
Icon formats: PNG

If you want more informations about localization, you can refer in official Laravel documentation : https://laravel.com/docs/8.x/localization

How to use SweetAlert2 in Laravel 8 using Composer

Jérôme W — Sun, 23 May 2021 09:48:10 +0000

This tutorial explains how to use in your existing Laravel 8 project the popular JavaScript SweetAlert2 library, using Composer.

Please be indulgent for my first tutorial 😅
I will try to be clear and concise 😃

Installation

Following the official documentation, first thing you need to do is to use Composer to add the package to your project's dependencies :

composer require realrashid/sweet-alert

After installing the sweet-alert package, register the service provider in your config/app.php configuration file :

'providers' => [
    /*
    * Package Service Providers...
    */
    RealRashid\SweetAlert\SweetAlertServiceProvider::class,
],

Also, add the Alert facade to the aliases array in the same configuration file :

'aliases' => [
    (...)
    'Alert' => RealRashid\SweetAlert\Facades\Alert::class,
],

Finaly, you must add the sweetalert view in your master layout :

@include('sweetalert::alert')

And run the below command to publish the package assets :

php artisan sweetalert:publish

Use

To use SweetAlert2 globally in your project, you must add a middleware in your base controller app/Http/Controllers/Controller.php :

use RealRashid\SweetAlert\Facades\Alert;

class Controller extends BaseController
{
    (...)

    public function __construct()
    {
        $this->middleware(function($request,$next){
            if (session('success')) {
                Alert::success(session('success'));
            }

            if (session('error')) {
                Alert::error(session('error'));
            }

            return $next($request);
        });
    }
}

Now, everytime you will redirecting with flashed session data, you will see the alert.

Let's do this, supposing you are creating an item, do this in your ItemsController app/Http/Controllers/ItemsController.php :

use App\Models\Item;
use Illuminate\Validation\ValidationException;

class ItemsController extends Controller
{
    (...) 

    public function store(Request $request)
    {
        $request->validate([
            'name' => 'item title',
            'price' => 10
        ]);

        try {
            Item::create([
                'name' => $request->name,
                'price' => $request->price
            ]);

            return redirect()->back()
                ->with('success', 'Created successfully!');
        } catch (\Exception $e){
            return redirect()->back()
                ->with('error', 'Error during the creation!');
        }
    }
}

Here we go! Was very simple, isn't it ?

Yes that's cool but it doesn't works with form validation... 😈

Use with form validation

There is a little trick to use the SweetAlert2 with the native Laravel form validation.

First, you must add a specific flash session name in the base controller app/Http/Controllers/Controller.php that we modified above :

(...)

class Controller extends BaseController
{
    (...)

    public function __construct()
    {
        $this->middleware(function($request,$next){
            if (session('success')) {
                Alert::success(session('success'));
            }

            if (session('error')) {
                Alert::error(session('error'));
            }

            if (session('errorForm')) {
                $html = "<ul style='list-style: none;'>";
                foreach(session('errorForm') as $error) {
                    $html .= "<li>$error[0]</li>";
                }
                $html .= "</ul>";

                Alert::html('Error during the creation!', $html, 'error');
            }

            return $next($request);
        });
    }
}

And still in the ItemsController app/Http/Controllers/ItemsController.php, just before the try catch, you must replace the precedent validation bloc by the Validator facades, like this :

(...)
use Illuminate\Support\Facades\Validator;

class ItemsController extends Controller
{
    (...) 

    public function store(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'name' => 'required',
            'price' => 'required|int'
        ]);

        if ($validator->fails()) {
            return redirect()->back()
                ->with('errorForm', $validator->errors()->getMessages())
                ->withInput();
        }

        try {
            Item::create([
                'name' => $request->name,
                'price' => $request->price
            ]);

            return redirect()->back()
                ->with('success', 'Created successfully!');
        } catch (\Exception $e){
            return redirect()->back()
                ->with('error', 'Error during the creation!');
        }
    }
}

Here we go! Now, when you have a failed validation, you must see the error alert with the corresponding fields.

Little tip

If you want to keep the fields filled when validation fails, you must use the withInput() method in your controller and use the old() method as the value in your blade, like following.

In your controller app/Http/Controllers/ItemsController.php :

if ($validator->fails()) {
     return redirect()->back()
          ->with('errorForm', $validator->errors()->getMessages())
          ->withInput();
}

In your blade resources/views/items/create.blade.php :

<input type="text" class="form-control" id="name" name="name" value="{{ old('name') }}">

The final word 💬

Thanks for reading this little tutorial, feel free to add a comment to share your opinions! 😀☕

Some links :