Laravel’de HTML’den kurs bitirme sertifikaları nasıl oluşturulur

İlk olarak Accreditly blogunda yayımlandı.

Laravel uygulamanızda bir kursu bitirenler, kanıt istiyor: indirebilecekleri, bastırıp LinkedIn’de gösterebilecekleri bir sertifika. Genellikle bunun üretilmesi zahmetli oluyor. DomPDF, tablo dışındaki CSS’leri bozar ve sunucunuzda bir headless Chrome kurmak bakım gerektiren bir iş. Daha temiz bir yol var. Sertifikayı, standart bir Blade görünümü gibi tasarlıyorsunuz, rendelenmiş HTML’yi bir görüntü API’sine gönderiyorsunuz ve PNG’yi kullanıcıya kaydediyorsunuz. Makalenin sonunda, kursu tamamlayanları markalı, doğrulanabilir bir sertifika görüntüsüne dönüştüren bir CertificateService oluşturmuş olacaksınız.

Tasarımı Blade’de Tutun

Bir sertifika, sadece stilize edilmiş bir HTML belgesidir. Zor olan kısım, o tasarımı her açıldığında aynı görünen bir dosyaya dönüştürmektir. Bu nedenle tasarımı, hâlihazırda çalıştığınız yer olan Blade’de tutun ve rendelenmesi için gerçek Chromium üzerinden geçen bir hizmete teslim edin. Bu kılavuz, tam da bu amaç için oluşturulmuş HTML to Image API‘sini kullanıyor. Bitmiş bir düzenle başlayıp başlamayacağınızdan emin değilseniz, değerleri geçirebileceğiniz hazır bir tamamlama sertifikası şablonu var.

Akış üç adımdan oluşuyor. Blade görünümünü bir HTML dizesine rendere edin, bu dizgiyi API’ye POST edin, ardından dönen resmi kullanıcı ve kursa kaydedin.

Adım 1: Sertifika görünümünü oluşturun

Sertifikayı, uygulamanızın stil sayfasına bağımlı kalmayan satır içi stillerle, kendi kendine yeterli bir HTML belgesi olarak tasarlayın.

{{-- resources/views/certificates/completion.blade.php --}}





    
Tamamlama Sertifikası
    
    
Bu belge,
    
{{ $name }}
    
şu kursu tamamladı: {{ $date }}
    

      Doğrulama için {{ config('app.url') }}/verify/{{ $code }}
    

Tüm bunlar, isim, kurs başlığı, tarih ve doğrulama kodu gibi dört değer tarafından yönlendirilir. Kod önemli, çünkü bunu en sonunda entegre edeceğiz.

Adım 2: Görünümü render edin ve API’yi çağırın

Blade görünümünü view()->render() ile bir dizeye rendere edin, ardından bunu Laravel’in HTTP istemcisiyle /api/html uç noktasına POST edin. API, HTML’nizi alır ve boyutlarıyla birlikte geri bir PNG döndürür.

// app/Services/CertificateService.php
namespace App\Services;

use App\Models\Course;
use App\Models\User;
use Illuminate\Support\Facades\Http;

class CertificateService
{
    public function generate(User $user, Course $course): string
    {
        $html = view('certificates.completion', [
            'name'   => $user->name,
            'course' => $course->title,
            'date'   => now()->format(),
            'code'   => $this->verificationCode($user, $course),
        ])->render();

        $response = Http::withHeaders([
            'X-API-Key' => config(),
        ])->post(, [
            => $html,
            => 1600,
            => 1130,
        ]);

        return $response->throw()->json();
    }

    public function verificationCode(User $user, Course $course): string
    {
        return strtoupper(substr(
            hash(, {$user->id}$course->id}.config()), 0, 10
        ));
    }
}

Anahtarınızı config/services.php dosyasına ekleyin. Böylece kodlarınız arasında dağılmaz:

=> [
    => env(),
],

1600x1130 boyutlandırması, temiz bir şekilde basılan bir A4 oranıdır. Doğrulama kodu, kullanıcının, kursun ve uygulama anahtarınızın bir deterministik hash’idir; böylece aynı tamamlama her zaman aynı kodu üretir ve kimse başkasınınkisini tahmin edemez.

Adım 3: Tamamlandığında sertifikayı verin

Rendere etme işlemi birkaç saniye alır, bu yüzden bunu istekten ziyade sıraya alınmış bir işte yapın. URL’yi kalıcı hale getirin, böylece aynı tamamlamada tekrar render işlemi yapmazsınız.

// app/Jobs/IssueCertificate.php
class IssueCertificate implements ShouldQueue
{
    use Dispatchable, Queueable;

    public function __construct(public User $user, public Course $course) {}

    public function handle(CertificateService $certs): void
    {
        Certificate::updateOrCreate(
            [=> $this->user->id, => $this->course->id],
            [
                => $certs->verificationCode($this->user, $this->course),
                => $certs->generate($this->user, $this->course),
            ]
        );
    }
}

Sertifikayı verme işlemini, bitiş dersini tamamladığınız dinleyicide başlatın:

IssueCertificate::dispatch($user, $course);

Dosyayı kendi diskine kaydet

Barındırılan URL çoğu uygulama için yeterlidir ve en hızlı yoldur. Ancak dosyayı kendiniz tutmak isterseniz, aynı işte indirin ve S3 veya yerel depolama alanına koyun:

$contents = Http::get($url)->body();
Storage::disk()->put({$code, $contents);

Bir gruba aynı anda sertifika veriyorsanız, bunları sıraya alınmış işler halinde oluşturun; böylece yavaş bir render diğerlerini de bekletmez.

Sertifikayı doğrulanabilir hale getirin

Bir sertifika sadece kontrol edilebiliyorsa değerlidir. Görüntüde yazılı olan kod, kendi sitenizdeki bir rotaya işaret eder:

Route::get(, function (string $code) {
    $certificate = Certificate::where(, $code)->firstOrFail();

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

O URL’yi ziyaret eden herkes, sertifikanın kime verildiğini ve hangi kurs için verildiğini görür; bu da gerçek bir yeterliği, güzel bir resimden ayıran unsurdur. Sertifika görüntüsüne doğrulama URL’sinin bir QR kodunu ekleyin ve bir telefon kamerası işlemi sizin yerinize yapsın.

Bu sistemin tamamı: tasarım için bir Blade görünümü, onu rendere etmek için bir API çağrısı, verdiğiniz sertifikayı yöneten sıraya alınmış bir iş ve sertifikanın doğrulanması için bir rota. Tasarım HTML’de yaşamaya devam eder, böylece onu saniyeler içinde değiştirebilirsiniz ve kendi sunucunuzda mükemmel bir dosya almak için bir tarayıcı çalıştırmazsınız.