Livewire Qr Generator

readme.md

This code generates QR codes based on user input. It utilizes the following packages, To install the required packages, run the following commands:

• composer require simplesoftwareio/simple-qrcode "~4"
• composer require jeroendesloovere/vcard

After installing the packages, you can start using them in your code to generate QR codes and VCards based on user input.

https://youtu.be/7G98383X53I

qr-generator.blade.php

<div>
    <div class="flex justify-center" x-data="{ activeTab: 'url' }">
        <div class="w-35 bg-gray-200">
            <ul class="py-4">
                <li @click="activeTab = 'url'" :class="{ 'bg-blue-500 text-white': activeTab === 'url' }"
                    class="cursor-pointer px-4 py-2 mb-2">Website URL</li>
                <li @click="activeTab = 'emailAdress'" :class="{ 'bg-blue-500 text-white': activeTab === 'emailAdress' }"
                    class="cursor-pointer px-4 py-2 mb-2">E-mail Address</li>
                <li @click="activeTab = 'phoneNumber'" :class="{ 'bg-blue-500 text-white': activeTab === 'phoneNumber' }"
                    class="cursor-pointer px-4 py-2 mb-2">Phone Number</li>
                {{-- <li @click="activeTab = 'geoAddress'" :class="{ 'bg-blue-500 text-white': activeTab === 'geoAddress' }"
                    class="cursor-pointer px-4 py-2 mb-2">Geo Address</li> --}}
                <li @click="activeTab = 'VCard'" :class="{ 'bg-blue-500 text-white': activeTab === 'VCard' }"
                    class="cursor-pointer px-4 py-2 mb-2">VCard</li>
            </ul>
        </div>
        <div class="w-1/2 px-4 bg-gray-100 ">
            <div x-show="activeTab === 'url'">
                <label for="websiteUrl">Website URL</label>
                <input type="text" id="websiteUrl" wire:model.lazy="websiteUrl"
                    class="w-full border border-gray-300 px-2 py-1">
                @if ($websiteUrl !== null)
                    <div class="my-4 flex justify-center">
                        {!! SimpleSoftwareIO\QrCode\Facades\QrCode::format('svg')->style('square')->size(400)->eye('circle')->generate(Request::url($websiteUrl)) !!}
                    </div>
                    <div class="my-4 text-center">
                        <x-button danger type="button" wire:click="refresh">
                            reset
                        </x-button>
                    </div>
                @endif
            </div>
            <div x-show="activeTab === 'emailAdress'">
                <label for="email">Email</label>
                <input type="email" id="email" wire:model.lazy="email"
                    class="w-full border border-gray-300 px-2 py-1">
                @if ($email !== null)
                    <div class="my-4 flex justify-center">
                        {!! SimpleSoftwareIO\QrCode\Facades\QrCode::format('svg')->style('square')->size(400)->eye('circle')->email($email) !!}
                    </div>
                    <div class="my-4 text-center">
                        <x-button danger type="button" wire:click="refresh">
                            reset
                        </x-button>
                    </div>
                @endif
            </div>
            <div x-show="activeTab === 'phoneNumber'">
                <label for="phone">Phone</label>
                <input type="number" id="phone" wire:model.lazy="phone"
                    class="w-full border border-gray-300 px-2 py-1">
                @if ($phone !== null)
                    <div class="my-4 flex justify-center">
                        {!! SimpleSoftwareIO\QrCode\Facades\QrCode::format('svg')->style('square')->size(400)->eye('circle')->phoneNumber($phone) !!}
                    </div>
                    <div class="my-4 text-center">
                        <x-button danger type="button" wire:click="refresh">
                            reset
                        </x-button>
                    </div>
                @endif
            </div>
            {{-- <div x-show="activeTab === 'geoAddress'">
                <label for="address">Address</label>
                <input type="text" id="lat" class="w-full border border-gray-300 px-2 py-1">
                <input type="text" id="lon" class="w-full border border-gray-300 px-2 py-1">
            </div> --}}
            <div x-show="activeTab === 'VCard'">
                <label for="name">Name</label>
                <x-input type="text" id="name" class="w-full border border-gray-300 px-2 py-1"
                    wire:model.lazy="name" :value="old('name')" />

                <label for="company_name">Company Name</label>
                <x-input type="text" id="company_name" class="w-full border border-gray-300 px-2 py-1"
                    wire:model.lazy="company_name" :value="old('company_name')" />

                <label for="phone">Phone</label>
                <x-input type="text" id="phone" class="w-full border border-gray-300 px-2 py-1"
                    wire:model.lazy="phone" :value="old('phone')" />

                <label for="email">Email</label>
                <x-input type="text" id="email" class="w-full border border-gray-300 px-2 py-1"
                    wire:model.lazy="email" :value="old('email')" />

                <label for="address">Address</label>
                <x-input type="text" id="address" class="w-full border border-gray-300 px-2 py-1"
                    wire:model.lazy="address" :value="old('address')" />

                <label for="website">Website</label>
                <x-input type="text" id="websiteUrl" class="w-full border border-gray-300 px-2 py-1"
                    wire:model.lazy="websiteUrl" :value="old('websiteUrl')" />

                <label for="instagram">Instagram</label>
                <x-input type="text" id="instagram" class="w-full border border-gray-300 px-2 py-1"
                    wire:model.lazy="instagramLink" :value="old('instagramLink')" />

                <label for="facebook">Facebook</label>
                <x-input type="text" id="facebook" class="w-full border border-gray-300 px-2 py-1"
                    wire:model.lazy="facebookLink" :value="old('facebookLink')" />

                <label for="tiktok">TikTok</label>
                <x-input type="text" id="tiktok" class="w-full border border-gray-300 px-2 py-1"
                    wire:model.lazy="tiktokLink" :value="old('tiktokLink')" />

                <label for="whatsapp">WhatsApp</label>
                <x-input type="text" id="whatsapp" class="w-full border border-gray-300 px-2 py-1"
                    wire:model.lazy="whatsappLink" :value="old('whatsappLink')" />
                <div class="my-4 text-center">
                    <x-button danger type="button" wire:click="generateQrCode">
                        generate Qr Code
                    </x-button>
                    <x-button danger type="button" wire:click="data">
                        fill with data
                    </x-button>
                </div>
                @if ($qrCodeData !== null)
                    <div class="my-4 flex justify-center">
                        {!! SimpleSoftwareIO\QrCode\Facades\QrCode::format('svg')->style('square')->size(400)->eye('circle')->generate($qrCodeData) !!}
                    </div>
                    <div class="my-4 text-center">
                        <x-button danger type="button" wire:click="refresh">
                            reset
                        </x-button>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

QrGenarator.php

<?php

declare(strict_types=1);

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Facades\Gate;
use SimpleSoftwareIO\QrCode\Facades\QrCode;
use JeroenDesloovere\VCard\VCard;
use JeroenDesloovere\VCard\Formatter\VCardFormatter;
use Request;

class QrGenerator extends Component
{
    public $activeTab = 'url';
    public $email ;
    public $phone ;
    public $name ;
    public $company_name ;
    public $address ;
    public $websiteUrl ;
    public $qrImage ;
    public $qrCodeData ;
    public $instagramLink;
    public $facebookLink;
    public $tiktokLink;
    public $whatsappLink;

    public function render(): View
    {
        return view('livewire.qr-generator');
    }

    
    public function refresh()
    {
        $this->reset();
    }

   public function data()
    {
        $this->name = '';
        $this->company_name = '';
        $this->phone = '';
        $this->email = '';
        $this->address = '';
        $this->websiteUrl = '';
        $this->instagramLink = '';
        $this->facebookLink = '';
        $this->tiktokLink = '';
        $this->whatsappLink = '';
    }

    public function generateQrCode(): void
    {

        $vcard = new VCard();
                
        // Set the basic information
        $vcard->addName($this->name);
        $vcard->addCompany($this->company_name);
        $vcard->addPhoneNumber($this->phone);
        $vcard->addEmail($this->email);
        $vcard->addAddress($this->address);
    
        // Add social media links
        $vcard->addURL($this->websiteUrl, 'Website'); 
        $vcard->addURL($this->instagramLink, 'Instagram'); 
        $vcard->addURL($this->facebookLink, 'Facebook'); 
        $vcard->addURL($this->tiktokLink, 'TikTok'); 
        $vcard->addURL($this->whatsappLink, 'WhatsApp'); 
        $vcard->addLabel('street, worktown, workpostcode Belgium');

        // Format the VCard data as a string
        $qrCodeData = $vcard->getOutput();
    
        $this->qrCodeData = $qrCodeData;
    
    }
}