Setelah mengikuti kegiatan tertentu, pasti kalian pernah mendapatkan sertifikat dalam bentuk e-sertifikat yang terdapat nama kalian yang dikirimkan ke email. Lalu, kira kira bagaimana sih cara generate atau memberikan text nama peserta di sertifikat tersebut menggunakan Codeigniter 3?
Oke langsung aja, berikut caranya. Pada artikel ini, gua hanya berbagi bagaimana cara generate atau menyisipkan nama peserta di sertifikat ya..untuk studi kasus, mungkin saja bisa berbeda dengan studi kasus kalian. Artikel ini juga tidak membahas bagaimana cara konfigurasi dasar Codeigniter 3
1. Persiapan
Untuk generate nama di sertifikat, hal yang harus disiapkan tentunya template sertifikat nya. Template sertifikat ini bisa kalian buat terlebih dahulu menggunakan editor image, baik itu aplikasi offline seperti Photoshop atau online seperti Canva. Kemudian, letakkan file template sertifikat ini di projek Codeigniter kalian. Kalo gua, template ini gua letakkan di folder [nama_projek]/assets/img/certificate/template/. Untuk [nama_projek], sesuaikan dengan nama projek kalian ya. Disini gua menamakan projeknya itu "tutorial".
Selanjutnya, yang harus disiapkan adalah file tipe font berekstensi .ttf. Jika kalian belum mempunyai file tipe font, kalian bisa mencari dan download di Google Font. Sebenarnya masih banyak lagi website penyedia tipe font, baik itu gratis maupun berbayar. Jika sudah download, silahkan unzip atau extract file hasil download sampai mendapatkan file dengan ekstensi .ttf. Silahkan letakkan file .ttf tersebut di folder projek Codeigniter kalian. Pada artikel ini, gua meletakan file tipe font di folder [nama_projek]/assets/fonts. Untuk [nama_projek], sesuaikan dengan nama projek kalian ya. Disini gua menamakan projeknya itu "tutorial". Gua mencoba menggunakan tipe font Alex Brush yang gua download dari Google Font.
2. Buat File View
Selanjutnya adalah membuat file view. Karna pada artikel ini gua mau generate nama di sertifikat secara dinamis, maka dari itu gua menyiapkan form field untuk memasukkan text nama yang ingin di tempelkan pada template sertifikat.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Pakai Jquery Validation dengan Bootstrap 4</title>
<!-- Get Bootstrap CDN in https://www.bootstrapcdn.com/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- load script package jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- load script package bootstrap.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<form id="form" action="" method="GET">
<div class="form-group">
<label for="fullname">Nama Lengkap</label>
<input type="text" class="form-control" name="fullname" id="fullname" placeholder="Ketikkan Nama Lengkap di Certificate" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
3. Membuat File Class Controller
Nah, mungkin ini adalah bagian inti dari artikel ini. Yaitu membuat file class controller. Yang mana, di file class controller inilah kita akan membuat fungsi PHP untuk generate sertifikat dengan menyisipkan text nama. Oke, langsung aja berikut kodenya beserta penjelasan setiap baris kodenya
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Certificate extends CI_Controller {
public function generator()
{
if($this->input->get('fullname'))
{
//memanggil fungsi generate() untuk proses menyisipkan text nama pada sertifikat
$this->generate($this->input->get('fullname'));
}
$this->load->view('certificate/form_generator');
}
public function generate($fullname='')
{
//direktori template sertifikat dan file hasil generate
$directory = "./assets/img/certificate";
if(!is_dir($directory)) {
mkdir($directory, 0775, TRUE);
}
//path file template
$image = $directory.'/template/1.png';
//fungsi php untuk membuat image baru dari file atau URL
$createimage = imagecreatefrompng($image);
//mendapatkan width dan height dari image yang baru saja dibuat
$image_width = imagesx($createimage);
$image_height = imagesy($createimage);
//set variabel yang isinya path tempat menyimpan sertifikat hasil generate
//untuk format nama file sertifikat nya, gua menggunakan input fullname dengan menghapus spasi
//dan di konversi ke huruf kecil semua, plus disisipkan angka random, supaya nama file nya identik
//contoh : nama yang diinputkan "Roronoa Zoro", maka nama file nya kurang lebih menjadi roronoazoro345.png
$output = $directory.'/'.str_replace(" ", "", strtolower($fullname)).rand(pow(10, 2), pow(10, 3)-1).".png";
//fungsi untuk set warna text dalam format RGB
$color = imagecolorallocate($createimage, 212,165,0);
//variabel untuk set, jika text mau di putar. Jika posisi text mau yang normal, set nilainya 0
$rotation = 0;
//variabel untuk set nama di sertifikat
$certificate_text = $fullname;
//ukuran font text sertifikat, sesuaikan dengan ukuran font yang sesuai dengan template sertifikat
$font_size = 70;
//font directory untuk text
$drFont = FCPATH."/assets/fonts/AlexBrush-Regular.ttf";
//fungsi untuk memberikan kotak batas text
//return nya berupa array
$text_box = imagettfbbox($font_size,$rotation,$drFont,$certificate_text);
//fungsi untuk mengetahui panjang text ditambah padding
//silahkan sesuaikan value variable padding ini dengan template sertifikat kalian
$padding =130;
$text_width = ($text_box[2]-$text_box[0])+intval($padding);
//setup posisi x dan y terhadap template sertifikat (silahkan sesuaikan dengan template kalian)
$origin_x = $image_width - $text_width;
$origin_y = 800;
//function untuk "menempelkan" text nama di sertifikat dengan parameter yang sudah di set sebelumnya
imagettftext($createimage, $font_size, $rotation, $origin_x, $origin_y, $color, $drFont, $certificate_text);
//membuat image sertifikat yang sudah ada text namanya dengan format png dan simpan sesuai dengan value variabel output
imagepng($createimage,$output,3);
//memanggil fungsi untuk proses download sertifikat
$this->download_file($output);
}
public function download_file($path_file)
{
header("Content-Description: File Transfer");
header("Content-Type: application/octet-stream");
header("Content-Disposition: attachment; filename=\"". basename($path_file) ."\"");
readfile ($path_file);
redirect('/certificate/generator', 'reload');
exit();
}
}
dan ini lah capture hasilnya
oke, sekian artikel tentang menyisipkan text nama di sertifikat. Sekali lagi gua tekankan, untuk studi kasus, mungkin bisa berbeda dengan apa yang kalian ingin buat, silahkan disesuaikan ya..dan mungkin juga ada beberapa value variable pada class controller yang perlu disesuaikan kembali dengan template sertifikat kalian. Semoga bermanfaat yaa..
