TUTORIAL
Codeigniter
Tutorial Membuat Tanda Tangan Digital/Elektronik (Digital Signatur/TTE) Menggunakan Barcode Untuk Cek Keaslian File dengan CodeIgniter 3 dan JSignPdf
Halo Klinik Coders...
Ditutorial ini kita akan mempelajari bagaimana cara membuat tanda tangan digital/elektronik (Digital Signature/TTE) menggunakan barcode dan untuk cek keaslian file pdf. Disini kita menggunakan Framework CodeIgniter dan JSignPdf untuk penerapannya.Tahap#1 - Pendahuluan
Tanda tangan adalah tulisan tangan, kadang-kadang diberi gaya tulisan tertentu dari nama seseorang atau tanda identifikasi lainnya yang ditulis pada dokumen sebagai sebuah bukti dari identitas dan kemauan (Sumber : Wikipedia).
Tanda tangan digital adalah skema matematika untuk memverifikasi keaslian pesan atau dokumen digital. Tanda tangan digital yang valid, di mana prasyarat dipenuhi, memberi penerima alasan yang sangat kuat untuk percaya bahwa pesan itu dibuat oleh pengirim yang dikenal, dan bahwa pesan itu tidak diubah dalam perjalanan (Sumber : Wikipedia).
Tanda tangan elektronik dibuat melalui mekanisme kriptografi kunci publik. Kriptografi kunci publik memanfaatkan dua buah kunci yang berbeda namun saling berkaitan secara matematika, yakni kunci publik dan kunci privat. Kunci publik dapat diberikan atau diakses oleh siapa pun dan digunakan oleh pihak lain untuk melakukan verifikasi/validasi atas tanda tangan elektronik yang kita buat. Dalam Infrastruktur Kunci Publik, kunci publik ditanam dalam sertifikat elektronik yang diterbitkan/dikeluarkan oleh Certification Authority. Sedangkan private key harus dijaga kerahasiaannya, atau dalam kata lain hanya pemilik kunci saja yang dibolehkan mengetahui dan mengakses kunci tersebut (Sumber : BSRE).
Berikut scema Tanda tangan digital/elektronik
Tahap#2 - Persiapan
Untuk membuat Tanda tangan digital/elektronik kita membutuhkan tools sebagai berikut :
- Java SE Runtime Environment
Untuk menjalankan tanda tangan digital/elektronik kita membutuhkan Java sebagai eksekutor. Filenya bisa didownload disini - File P12
Untuk authorization Tanda Tangan Digitalnya kita membutuhkan Self-signed certificate yang bisa dibuat disini dan jika ingin menggunakan sertifikat dari Klinik Code bisa didownload disini - CodeIgniter
Disini untuk penerapannya saya menggunakan Framework CodeIgniter. Filenya bisa didownload disini - CI QRCode
Untuk melihat keaslian File PDF kita membutuhkan sebuah libray yaitunya CI QRCode yang bisa didownload disini - JSignPdf
Untuk sign Tanda tangan digitalnya kita menggunakan JSignPdf. Filenya bisa didownload disini - Dokumentasi JSignPdf
Untuk lebih menguasai JSignPdf bisa baca dokumentasinya disini
Tahap#3 - Installasi
Setelah persiapan pada tahap 2 diatas selesai buatlah struktur aplikasinya seperti gambar berikut : 
Selanjutanya untuk library dan third_party Aplikasi pihak ketiga yaitu JSignPdf
Tahap#4 - Konfigurasi
Pada tahap ini kita akan mensetting CodeIgniternya
- application/config/autoload.php
Disini kita membutuhkan 2 buah helper
$autoload['helper'] = array('url', 'file');
- application/config/config.php$config['base_url'] = 'https://demo.klinikcode.com/digital_sign/';$config['index_page'] = '';
- application/config/routes.php$route['default_controller'] = 'digital_sign';
- .htaaccess
Untuk url friendly ubahlah .htaccess menjadi# Checks to see if the user is attempting to access a valid file,
# such as an image or css document, if this isn�t true it sends the
# request to index.php
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
Header set X-XSS-Protection "1; mode=block"
Header always append X-Frame-Options SAMEORIGIN
Header set X-Content-Type-Options nosniff
Tahap#5 - Buat File Controller Digital_sign.php
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Digital_sign extends CI_Controller
{
public function index()
{
$data = [
'title' => 'Digital Signature'
];
$this->load->view('digital_sign', $data);
}
public function sign()
{
$this->load->library('ciqrcode');
$output = [
'status' => false,
'message' => '',
'error' => ''
];
$id = $this->input->post('id');
$config['upload_path'] = './ttd/belum_ttd/';
$config['allowed_types'] = 'pdf';
$config['file_name'] = 'Dokumen Contoh';
$config['overwrite'] = true;
$config['max_size'] = 1024;
$this->load->library('upload', $config);
if (!$this->upload->do_upload($id)) {
$output['status'] = false;
$output['message'] = $this->upload->display_errors();
} else {
$upload = ['upload_data' => $this->upload->data()];
$file_name = $upload['upload_data']['file_name'];
$token = substr(md5($file_name), 0, 10);
$qr_image = strtotime(date('Y-m-d H:i')) . '-' . strtoupper($token) . '.png';
$file_names = explode('.pdf', $file_name);
$params['data'] = site_url('ttd/sudah_ttd/' . $file_names[0] . '_signed.pdf');
$params['level'] = 'H';
$params['size'] = 4;
$params['savename'] = FCPATH . "ttd/qrcode/" . $qr_image;
$this->ciqrcode->generate($params);
$path_jar = APPPATH . 'third_party/jsignpdf/JSignPdf.jar';
$path_pdf = realpath('./ttd/belum_ttd/' . $file_name);
$path_p12 = realpath('./ttd/p12/KLINIKCODE-2020-07-22-170537.p12');
$visualisasi = realpath('./ttd/qrcode/' . $qr_image);
$passphrase = 'password';
$output_path = realpath('./ttd/sudah_ttd/');
$llx = 64.57554;
$lly = 687.8667;
$urx = 249.4964;
$ury = 616.0;
if (file_exists($path_jar)) {
$output['java'] = "Java Valid";
}
if (file_exists($path_pdf)) {
$output['pdf'] = "Dokumen Valid";
}
if (file_exists($path_p12)) {
$output['sertifikat'] = "Sertifikat Valid";
}
if (!file_exists($path_p12)) {
$output['status_sertifikat'] = "Sertifikat Tidak Ditemukan !";
}
if (!($cert_store = file_get_contents($path_p12))) {
$output['read_sertifikat'] = "Sertifikat tidak bisa dibaca !";
}
if (!openssl_pkcs12_read($cert_store, $cert_info, $passphrase)) {
$output['pass_key'] = "Pass Key Salah !";
}
$first = 1;
$command = 'java -jar "' . $path_jar . '" "' . $path_pdf . '" -kst PKCS12 -ksf "' . $path_p12 . '" -ksp "' . $passphrase . '" -tsh SHA256 -ha SHA256 -d "' . $output_path . '" -os "_signed" -llx ' . $llx . ' -lly ' . $lly . ' -urx ' . $urx . ' -ury ' . $ury . ' --l4-text "" --l2-text "" --bg-scale -1 --bg-path "' . $visualisasi . '" -r "Dokumen telah ditandatangani secara elektronik" -l "Padang" -c "https://klinikcode.com" --page ' . $first . ' -V -v';
exec($command, $val, $er);
if ($er == 0 || $er == 3) {
$output['status'] = true;
@unlink($visualisasi);
} else {
$output['error'] = $er;
$output['status'] = false;
}
}
echo json_encode($output);
}
}
- Method index
Berfungsi untuk menampilkan file pdf yang akan ditanda tangani - Method sign
Berfungsi untuk memproses upload file pdf dan generated qrcode sampai dengan tahapan sign tanda tangan digital menggunakan JSignPdf
Tahap#6 - Buat File Views digital_sign.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title><?= $title; ?></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="card mt-3">
<div class="card-header">
<?= $title; ?>
</div>
<div class="card-body">
<form id="form-sign">
<div class="form-group">
<label for="file_pdf">File PDF</label>
<input type="file" class="form-control" id="file_pdf" name="file_pdf" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Sign</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<iframe id="tampil_pdf" style="display: none;" src="" width="100%" height="768px"></iframe>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
function base_url(link = '') {
let alamat = "<?= base_url(); ?>" + link;
return alamat;
}
$('#form-sign').on('submit', function(e) {
e.preventDefault();
let form_data = new FormData(document.getElementById("form-sign"));
let file_data = $('#file_pdf').prop('files')[0];
form_data.append('file', file_data);
form_data.append('id', 'file_pdf');
$.ajax({
url: "<?php echo base_url('digital_sign/sign'); ?>",
dataType: 'json',
mimeType: "multipart/form-data",
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'POST',
success: function(data) {
console.log(data);
if (data.status = true) {
$('#tampil_pdf').show();
$('#tampil_pdf').attr('src', base_url('ttd/sudah_ttd/Dokumen_Contoh_signed.pdf') + '#view=FitH');
}
}
});
});
</script>
</body>
</html>
Tahap#7 - Eksekusi
Jika tahapan diatas telah dilakukan dengan benar makan akan terlihat hasilnya sebagai berikut :
Untuk melihat QRCodenya bisa teman-teman download dulu file pdf yang ditampilkan. Jika sudah tampil seperti gambar berikut ini :
Tahap#8 - Testing menggunakan VeryDS
Untuk menguji coba apakah file pdf ini benar-benar sudah di tanda tangani, teman-teman bisa mendownloadnya di play store dan Scan qrcodenya. Jika berhasil akan terlihat seperti gambar dibawah ini :
Demikianlah tutorial ini saya buat, mudah-mudahan bermanfaat bagi teman-teman. Jika ada pertanyaan, kritik dan saran silahkan berkomentar dibawah ini.
Let's Coding...
About author
Alfikri
Saya seorang web developer. Saya sangat suka tantangan untuk mempelejari hal-hal baru dalam dunia pemograman.
You may also like
Comments
Recent Posts
Tutorial Membuat Tanda Tangan Digital/Elektronik (Digital Signatur/TTE...
03-08-2020
Tutorial sederhana untuk pemula membuat struktur organisasi dinamis me...
19-07-2020 Tutorial Sederhana Membuat Form Otomatis Terisi Menggunakan CodeIgnite...
09-08-2020 Tutorial lengkap membuat Keamanan Data Enkripsi Deskripsi menggunakan...
07-07-2020Scroll to Top