Senin, 12 Oktober 2020

Cara membuat aplikasi surat dengan upload file word ke server

 Assalamualaikum Wr Wb,,,

Sebagai seorang programmer tentu kita mendapati case yang aneh aneh yang bertujuan untuk mempermudah user dalam pengerjaanya. Dalam tutorial ini saya akan memaparkan bagai mana membuat aplikasi surat yang case nya seperti ini 

1. User membuat surat menggunakan microsot word di laptop / pc-nya masing-masing kemudian user membubuhkan kode ${no_surat} dan ${qrcode} yang fungsinya agar nomer surat tercipta otomatis, dan terdapat gambar qrcode di word tersebut.

nah dari file word tersebut saat di upload akan terbentuk file pdf seperti ini :
Jadi dari kode ${no_surat} dan ${qrcode} akan berubah menjadi nomor surat yang otomatis, dan gambar qrcode,, sedangkan gambar "waiting for approval" itu variasi aja kalau suratnya belum di approve atasan.

2. Saat di upload semua text akan di simpan di database.
3. Setelah itu surat di cetak kemudian di tanda tangani basah baru kemudian di upload lagi ke server. Karean ada qrcode nya maka sistem otomatis menemukan file tersebut.

Kira2 seperti itu schema aplikasi ini, sebelumnya saya menggunakan ubuntu sebagai server, akan tetapi saat dijadikan file PDF hasilnya jelek sekali, So terpaksa saya migrasi server saya ke OS windows. Itupun di windows harus diinstal office terbaru agar word-nya gak berantakan.
Okkay berikut ini yang harus di persiapkan untuk aplikasi ini

0. Libreoffice utk mengubah docx ke txt agar file di txt bisa disimpan ke database
1. Officetopdf.exe yaitu fungsinya saat file docx di upload system akan mengubah file docx menjadi pdf
2. Saveaspdfandxps kalau ini aplikasi agar officetopdf berjalan 


3.Total PDF Converter fungsinya utk convert pdf ke gambar jpg, agar qrcode bisa terscan, saya memilih aplikasi ini karena bisa command line dan hasil jpgnya bagus
4. jdk-8u241-windows-i586 atau diatasnya gk apa2 asalkan saat setting path bener

Untuk di serverside wajib install ini
1. PHPWORD : untuk mengganti kode ${no_surat} menjadi nomor surat
2. CIQRCODE : karena saya pakai codeignitter ada library khusus utk membuat qrcode
3. TCPDF : untuk menampilkan pdf di web
4. PHPZINGDECODER : ini saat upload pdf diubah ke jpg oleh total pdf converter kemudian dari jpg tersebut di scan qrcode-nya

untuk aplikasi tersebut di atas cari di internet ya tutorialnya,, soalnya bakal panjang banget kalau aku njelasin semuanya satu persatu.

Okay pertama tama saat upload file docx ke server kita harus ubah dulu file docx nya ke txt menggunakan libreoffice, caranya :

$fileupload = $lokasi_baru . $no_surat_file_tmp . '.docx';
$comando2 = '"C:\Program Files\LibreOffice\program\soffice.exe" --headless --convert-to txt:Text --outdir  ./assets/pdf/ ' . $fileupload;
$var2 = exec($comando2);
                
So file docx yang lokasinya di $fileupload akan dijadikan txt ke di lokasi ./asset/pdf

Kedua file txt disimpan ke database

 $lines = file_get_contents('./assets/pdf/'  . $id_user . '.txt');
$lines = htmlspecialchars($lines);

kemudian simpan $lines ke database.

Jadi seperti itulah konfigurasi untuk upload docx nya ke server dan semua text didalam nya bisa tersimpan di server


Okkay langkah ke 2 menampilkan docx ke pdf dan mengubah ${qrcode} menjadi gambar qrcode

pertama kita buat dulu qrcodenya pakai library qrcode yg udah ada di codeignitter

$this->load->library('ciqrcode');
        $config['cacheable']    = true; //boolean, the default is true
        $config['cachedir']     = './assets/'; //string, the default is application/cache/
        $config['errorlog']     = './assets/'; //string, the default is application/logs/
        $config['imagedir']     = './assets/img/qrcode/'; //direktori penyimpanan qr code
        $config['quality']      = true; //boolean, the default is true
        $config['size']         = '1024'; //interger, the default is 1024
        $config['black']        = array(225, 255, 255); // array, default is array(255,255,255)
        $config['white']        = array(0, 0, 0); // array, default is array(0,0,0)
        $this->ciqrcode->initialize($config);
        $no_suratqr =  $no_surat;  //inisialisasikan nomer surat sesuai keiginnan anda
        $image_name = $id_user_login . '.png'; //buat name dari qr code sesuai dengan nim
        $params['data'] = $no_surat; //data yang akan di jadikan QR CODE
        $params['level'] = 'H'; //H=High
        $params['size'] = 10;
        $params['savename'] = FCPATH . $config['imagedir'] . $image_name; //simpan image QR CODE ke folder assets/images/
        $this->ciqrcode->generate($params); // fungsi untuk generate QR CODE

so dari code tersebut diatas file qrcode sudah tercipta, kemudian tinggal memasukkan gambar qrcode ke file word menggunakan PHPWORD dengan fitur templateprocesor

$templateProcessor = new \PhpOffice\PhpWord\TemplateProcessor('./assets/docx/' . $namabaru);
$templateProcessor->setImageValue('qrcode', array('path' => './assets/img/qrcode/' . $id_user_login . '.png', 'width' => 77, 'height' => 77, 'ratio' => false));
$templateProcessor->setValue('no_surat', $no_suratqr);
$templateProcessor->saveAs("./assets/docx_temp/" . $id_user . ".docx");

sehingga tercipta file docx yang sudah ada gambar qrcodenya 
kemudian untuk menampilkan file docxnya kita convert dulu ke pdf menggunakan officetopdf, caranya :

$comando = 'C:\xampp\OfficeToPDF.exe  ./assets/docx_temp/' . $id_user . '.docx ./assets/pdf/' . $id_user . '.pdf';
$var = exec($comando, $output);

nah maka file pdf tercipta, tinggal tampilkan aja ke user file pdf tersebut ke user
oh iya,, disini terlihat utk nama file saya pakai $id_user,, itu sengaja saya lakukan supaya file tersebut kan hanya bersifat temporary jadi utk nama file saya pakai id_user yang login, agar terhapus file lama menjadi file yang baru.

Okkay sekarang langkah ke 3 upload file pdf dari docx yang udah dicetak yang ada gambar qrcodenya agar otomatis kesimpen...

Jadi user harus scan lagi file yang sudah di print ke dalam pdf, nah agar zxing bisa deteksi gambar tersebut maka file pdf tersebut harus di ubah ke jpg,, caranya pakai aplikasi totalpdfconverter

$comando = '"C:\Program Files\CoolUtils\Total PDF Converter\PDFConverter.exe" ./assets/pdf_app/' . $id_user . '.pdf -p1 ./assets/jpg_temp/'  . $id_user . '.jpg -fo  -dpi 100';
$var = exec($comando, $output);

terus file jpg tersebut di scan dah qrcodenya paka zxing :

   $decoder        = new PHPZxingDecoder();
   $decoder->setJavaPath('"C:\Program Files (x86)\Java\jdk1.8.0_241\bin\java.exe"');
   $data           = $decoder->decode('./assets/jpg_temp/' . $id_user . '.jpg');


   if ($data->IsFound()) {
// jika nilai qrcode di temukan tinggal cari nilai tersebut di database,, trus ubah deh nama file-nya sesuai dg yang kita mau 
                } 


Mohon maaf beribu ribu maaf,, tulisan ini sangat kacau sekali, berhubung banyak deadline tugas yang harus di kerjakan maka sy gk sempet ngerapikan tulisan ini.. 
Kalau ada pertanyaan monggo tulis di komentar, Insya Allah saya akan jawab ....