TUTORIAL

  1. Home
  2. Tutorial
Codeigniter

Tutorial Membuat Tanda Tangan Digital/Elektronik (Digital Signatur/TTE) Menggunakan Barcode Untuk Cek Keaslian File dengan CodeIgniter 3 dan JSignPdf

03-08-2020 17:30:47 BY Alfikri Read 5858x 11 min read

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 :

  1. Java SE Runtime Environment
    Untuk menjalankan tanda tangan digital/elektronik kita membutuhkan Java sebagai eksekutor. Filenya bisa didownload disini
  2. 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
  3. CodeIgniter
    Disini untuk penerapannya saya menggunakan Framework CodeIgniter. Filenya bisa didownload disini
  4. CI QRCode
    Untuk melihat keaslian File PDF kita membutuhkan sebuah libray yaitunya CI QRCode yang bisa didownload disini
  5. JSignPdf
    Untuk sign Tanda tangan digitalnya kita menggunakan JSignPdf. Filenya bisa didownload disini
  6. 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);
  }
}
  1. Method index
    Berfungsi untuk menampilkan file pdf yang akan ditanda tangani
  2. 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...

Download
Tags #TTDDigital #DigitalSignature #Barcode #CodeIgniter #JSignPdf #Bootstrap #JQuery #TTE

About author

Alfikri

Saya seorang web developer. Saya sangat suka tantangan untuk mempelejari hal-hal baru dalam dunia pemograman.

You may also like
Tutorial Sederhana Membuat Form Otomatis Terisi Menggunakan PHP Native, Library FAKER, JQuery, Select2 dan AJAX (Studi Kasus : Data Siswa)
PHP 09-08-2020
Tutorial Video Membuat Toko Online Menggunakan CodeIgniter 3, Bootstrap 4, dan AdminLTE 3.0.5 Part-3 Membuat Login dan Logout
Codeigniter 26-07-2020
Tutorial CodeIgniter 4 Untuk PEMULA
CodeIgniter 4 28-07-2020
Tutorial Membuat Create, Read, Update dan Delete (CRUD) Menggunakan CodeIgniter 3, Bootstrap 4.5.2, AJAX dan Datatable
Codeigniter 19-08-2020
Tutorial Video Membuat Toko Online Menggunakan CodeIgniter 3, Bootstrap 4, dan AdminLTE 3.0.5 Part-4 Membuat Limit Login (Login Attempts) untuk keamanan LOGIN
Codeigniter 26-07-2020
Tutorial Cara Membuat Laporan Nilai Siswa Beserta Nilai Angka dan Keterangan Menggunakan PHP, Library FPDF dan MYSQLi
FPDF 23-07-2020

Leave a Reply

Recent Posts

Tutorial Membuat Tanda Tangan Digital/Elektronik (Digital Signatur/TTE...
03-08-2020
Tutorial Lengkap membuat CRUD Datatables Server Side menggunakan CodeI...
14-07-2020
Tutorial sederhana untuk pemula membuat struktur organisasi dinamis me...
19-07-2020
Tutorial Membuat Cek Ongkos Kirim Memanfaatkan API Raja Ongkir Menggun...
11-08-2020
Tutorial Sederhana Membuat Form Otomatis Terisi Menggunakan CodeIgnite...
09-08-2020
Tutorial lengkap membuat Keamanan Data Enkripsi Deskripsi menggunakan...
07-07-2020

Categories

Scroll to Top