{"id":1438,"date":"2021-03-23T23:04:16","date_gmt":"2021-03-23T16:04:16","guid":{"rendered":"http:\/\/student-activity.binus.ac.id\/himti\/?p=1438"},"modified":"2021-03-23T23:04:16","modified_gmt":"2021-03-23T16:04:16","slug":"bikin-700-e-certificate-http-2020-dalam-5-menit-bisa","status":"publish","type":"post","link":"https:\/\/student-activity.binus.ac.id\/himti\/2021\/03\/23\/bikin-700-e-certificate-http-2020-dalam-5-menit-bisa\/","title":{"rendered":"Bikin 700+ e-certificate HTTP 2020 dalam 5 menit? Bisa!"},"content":{"rendered":"

HTTP (HIMTI Togetherness and Top Performance) 2020<\/strong> merupakan acara terbesar yang pernah kami selenggarakan secara virtual<\/i>, khususnya melalui Microsoft Teams dan Zoom. Jumlah peserta HTTP kali ini lebih besar daripada ajang-ajang HTTP sebelumnya, dengan jumlah peserta aktif (yang berhak menerima e-certificate) sebanyak 736 orang. Kami sendiri telah membangun sebuah situs web portal<\/i> untuk mengurus pendaftaran dan absensi peserta, yang kemudian dapat diintegrasikan oleh situs HIMTI KIT sebagai salah satu manfaat atau benefit<\/i> dari acara HTTP itu sendiri. Salah satu tantangan terberat dalam mengurus HTTP 2020 ini datang saat kami harus membuat e-certificate untuk 736 peserta aktif<\/strong> beserta 2 bintang tamu<\/strong> alias guest star<\/em> yang berpartisipasi di dalam acara tersebut. Kami tentunya merasa bahwa penggunaan sistem Mail Merge menjadi solusi yang tepat untuk kasus ini, namun mail merge<\/i> tersebut harus dilakukan dengan cara dan efisien, sehingga kami dapat mengirim para e-certificate<\/i> kepada pihak School of Computer Science secepat mungkin untuk ditandatangani secara langsung oleh bapak Freddy Purnomo, S.Kom, M.Kom (selaku dekan SOCS) dan dikirimkan kepada para peserta HTTP 2020.<\/p>\n

Apa itu Mail Merge?<\/h2>\n

Mail Merge atau Data Merge merupakan sebuah fitur yang tersedia pada aplikasi pengolah dokumen seperti Microsoft Word<\/i>, <\/i>Microsoft Outlook<\/i>, dan Adobe Photoshop<\/i> yang memungkinkan kami untuk membuat sekumpulan dokumen berdasarkan template<\/i> dan data dari sebuah spreadsheet<\/i>. Dalam kasus ini, kami dapat menggunakan Mail Merge untuk membuat sekumpulan e-certificate<\/i> dari sebuah template e-certificate<\/i> yang sudah ditandatangani oleh kami terlebih dahulu, beserta sebuah spreadsheet<\/i> (misal: file CSV dan file XLSX) yang berisi seluruh data peserta aktif HTTP 2020.<\/p>\n

Salah satu keuntungan dari Mail Merge ini adalah setiap dokumen yang dihasilkan dapat mengandung data atau informasi yang unik bagi setiap penerima. Karena itu, prinsip atau fitur ini juga sering dimanfaatkan dalam pembuatan kartu identitas (ID Card<\/i>, termasuk KTP dan BINUSIAN Card Flazz<\/a>), pengiriman surel\/e-mail<\/i>, sertifikat (termasuk e-certificate<\/i> HTTP 2020 ini), dan sebagainya. Data peserta HTTP 2020 ini kami dapatkan secara mudah dengan menyalin tabel yang ada di dalam web portal<\/i> absensi acara HTTP 2020 ke dalam program Microsoft Excel<\/i>, yang kemudian akan disimpan dalam format CSV. Namun, karena suatu bug<\/i> <\/i>pada CSS framework<\/i> yang dipakai di dalam situs tersebut, hasil data peserta yang diterima oleh kami sangat berantakan, kurang lebih seperti ini.<\/p>\n

\"\"<\/a><\/p>\n

Nah, lo! Secara struktur, file CSV (salah satu format file spreadsheet<\/i>) ini sebenarnya sudah berurutan (dari \u201cID\u201d, \u201cName\u201d, \u201cNIM\u201d, dan \u201cStatus\u201d). Namun, file tersebut memiliki banyak karakter koma di tengah-tengah record<\/i> \u201cID\u201d dan \u201cName\u201d dan akhir dari setiap baris record<\/i>. Karena itu, data spreadsheet<\/i> seperti ini tidak bisa diproses<\/b> di dalam program Mail Merge umum seperti Adobe Photoshop<\/i> tanpa diolah terlebih dahulu. Hal ini tentunya dapat memakan waktu yang lama serta beresiko jika kita harus mengolah data input terlebih dahulu untuk setiap peserta dan guest star<\/i>.<\/p>\n

Karena itu, kami memutuskan untuk membuat sebuah program C seperti yang telah kami lakukan dalam menghadapi awal-awal perkuliahan kami di School of Computer Science, BINUS UNIVERSITY. Kembali ke cara membuka file dengan perintah fopen()<\/span>. Kembali ke cara menerima input menggunakan perintah scanf<\/span>()<\/span>. Kembali ke mata kuliah COMP6047 \u2013 Algorithm and Programming<\/a>.<\/p>\n

Kembali ke materi COMP6047 \u2013 Algorithm and Programming<\/h2>\n

Jika Anda pernah mengikuti mata kuliah tersebut, Anda pastinya akan tahu tentang File Processing<\/i> (cara memproses file) dan fungsi scanf()<\/span>. Program ini menggunakan beberapa perintah serupa untuk:<\/p>\n

    \n
  1. Membuka file CSV (misalnya disimpan di dalam nama \u201cdata.csv\u201d) menggunakan perintah fopen()<\/span>,<\/li>\n
  2. Menggunakan perintah f<\/span>scan<\/span>f()<\/span> untuk mengambil data \u201cID\u201d, \u201cName\u201d, dan \u201cNIM\u201d saja,<\/li>\n
  3. Menggunakan perintah fprintf()<\/span> untuk mencetak data CSV yang diperbaiki ke dalam file output yang terpisah, yang nantinya dapat diolah oleh fitur\/wizard Mail Merge yang ada di dalam Adobe Photoshop<\/i> atau GIMP<\/i>.<\/li>\n<\/ol>\n

    Namun, setelah pertimbangan lebih lanjut, kami ternyata dapat menggunakan library<\/i> atau program command line<\/i> lain seperti ImageMagick untuk membubuhkan teks nama peserta ke dalam template e-certificate<\/i> (dalam format PNG). Karena itu, kami memutuskan untuk memanggil program ImageMagick melalui perintah system()<\/span> dalam program C karena terlihat lebih mudah daripada memanggil <\/a>library<\/i><\/a> ImageMagick secara langsung <\/a>di dalam program tersebut<\/a>.<\/p>\n

    Alhasil, kami tidak usah bekerja dua kali untuk membereskan spreadsheet<\/i> tersebut kemudian membuat Mail Merge dari data yang sudah dibereskan tersebut. Atau, dalam istilah yang sering dipakai di dalam mata kuliah COMP6049 \u2013 Algorithm Design and Analysis<\/a>, kami berhasil memangkas time complexity<\/i> proses pembuatan e-certificate<\/i> ini dari O(2n<\/i>)<\/strong> menjadi O(n<\/i>)<\/strong> saja.<\/p>\n

    Sedikit tentang ImageMagick<\/h2>\n

    ImageMagick merupakan sebuah program dan library<\/i> komputer yang berfungsi untuk mengolah gambar. Program dan library<\/i> ini biasanya sudah terpasang secara default<\/i> di beberapa distro sistem operasi Linux seperti Ubuntu dan biasanya juga digunakan di dalam program tertentu. Namun, program dan library<\/i> ImageMagick ini juga tersedia bagi pengguna Microsoft Windows dan macOS (melalui Homebrew)<\/a>. Bahkan, Anda juga dapat menggunakan library<\/i> ini di dalam proyek aplikasi native <\/i>iOS Anda.<\/p>\n

    Dalam kasus ini kami menggunakan perintah convert<\/span> yang tersedia di dalam program ImageMagick dengan memanggil convert cert.png -font Comfortaa-Regular -gravity North -pointsize 48 -annotate +0+435 ‘<NAMA PESERTA>’ ‘final\/<NIM>-<NAMA PESERTA>.png’<\/span>. Perintah ImageMagick tersebut akan membuka file template e-certificate<\/i> yang disimpan sebagai cert.png<\/span>, kemudian membubuhkan nama peserta di dalam template<\/i> tersebut dan kemudian disimpan di dalam direktori final\/<\/span> dengan nama file <NIM>-<NAMA PESERTA>.png<\/span> (seperti aturan format Display Name<\/i> dalam aplikasi Zoom untuk mahasiswa BINUS UNIVERSITY). Perintah tersebut juga akan menggunakan sebuah font<\/i> bernama Comfortaa<\/a> (salah satu font<\/i> yang digunakan dalam tema HTTP 2020) untuk menulis teks nama peserta tersebut.<\/p>\n

    Keajaiban dari fscanf()<\/h2>\n

    Oke, bagaimana kami dapat membereskan input yang bermasalah tersebut? Setiap baris CSV ini (kecuali baris awal) kami saring melalui perintah fscanf(input, “%d%[,]%[^,],%lld,%[^\\n]\\n%[^\\n]\\n%[^\\n]\\n”, &id, temp, name, &nim, temp, temp, temp)<\/span>. Variabel temp<\/span> ini akan menampung bagian string<\/i> (yakni substring<\/i>) yang dibuang begitu saja, sedangkan variabel id<\/span>, name<\/span>, dan nim<\/span> ini akan dipakai di dalam perintah ImageMagick yang telah dijelaskan sebelumnya. Sintaks %[,]<\/span> akan mengumpulkan sebuah substring<\/i> yang hanya berisi 1 atau lebih karakter koma, misalnya \u201c,\u201d, \u201c,,\u201d, dan \u201c,,,,,,,,,,,,,\u201d. Sintaks %[^,]<\/span> akan mengumpulkan sebuah substring<\/i> yang tidak diakhiri oleh karakter koma, sedangkan sintaks %[^\\n]\\n%[^\\n]\\n<\/span> akan \u201cmembuang\u201d kedua baris berikutnya (yang hanya berisi karakter koma dan teks \u201cView\u201d, lihat contoh pada gambar di atas).<\/p>\n

    Hasil Kodingannya<\/h2>\n

    Nah, berikut ini adalah keseluruhan kode sumber program C yang telah kami buat untuk menyelesaikan kasus tersebut. Anda juga dapat melihat bahwa kami menggunakan 3 variasi perintah ImageMagick yang berbeda untuk mengatur ukuran dan posisi teks nama lengkap peserta sesuai dengan panjang karakter nama tersebut (agar tetap muat di dalam e-certificate<\/i> ini)<\/p>\n

    #include <stdio.h>\r\n<\/span>#include <stdlib.h><\/span>\r\n#include <string.h><\/span>\r\n\r\nint main(){<\/span>\r\n\u00a0 \/\/ In order to run this program, make sure that you have ImageMagick installed and have your \"convert\" command available in $PATH.<\/span>\r\n\u00a0 char temp[1024], command[1024], name[128];<\/span>\r\n\u00a0 int id;<\/span>\r\n\u00a0 long long int nim;<\/span>\r\n\u00a0 FILE *input = fopen(\"data.csv\", \"r\");<\/span>\r\n\r\n\u00a0 \/\/ Scan first line<\/span>\r\n\u00a0 fscanf(input, \"%[^\\n]\\n\", temp);<\/span>\r\n\r\n\u00a0 \/\/ For each line scan for repeating commas<\/span>\r\n\u00a0 do {<\/span>\r\n\u00a0\u00a0\u00a0 fscanf(input, \"%d%[,]%[^,],%lld,%[^\\n]\\n%[^\\n]\\n%[^\\n]\\n\", &id, temp, name, &nim, temp, temp, temp);<\/span>\r\n\u00a0\u00a0\u00a0 printf(\"Generating certificate for %lld-%s\\n\", nim, name);<\/span>\r\n\u00a0\u00a0\u00a0 if (strlen(name) >= 40) sprintf(command, \"convert cert.png -font Comfortaa-Regular -gravity North -pointsize 48 -annotate +0+435 '%s' 'final\/%lld-%s.png'\", name, nim, name);<\/span>\r\n\u00a0\u00a0\u00a0 else if (strlen(name) >= 25) sprintf(command, \"convert cert.png -font Comfortaa-Regular -gravity North -pointsize 64 -annotate +0+435 '%s' 'final\/%lld-%s.png'\", name, nim, name);<\/span>\r\n\u00a0\u00a0\u00a0 else sprintf(command, \"convert cert.png -font Comfortaa-Regular -gravity North -pointsize 72 -annotate +0+420 '%s' 'final\/%lld-%s.png'\", name, nim, name);<\/span>\r\n\r\n\u00a0\u00a0\u00a0 \/\/puts(command); \/\/ Untuk kepentingan debugging<\/span>\r\n\u00a0\u00a0\u00a0 system(command);<\/span>\r\n\r\n\u00a0\u00a0\u00a0 \/\/sleep(1); \/\/ Untuk kepentingan debugging<\/span>\r\n\u00a0 } while (!feof(input));<\/span>\r\n\u00a0 fclose(input);<\/span>\r\n}<\/span><\/pre>\n
    Kodingan di atas hanya dapat membuat e-certificate<\/i> HTTP 2020 untuk para peserta saja. Untuk membuat e-certificate<\/i> bagi para guest star<\/i>, kami menjalankan perintah ImageMagick serupa dengan menggunakan template<\/i> e-certificate<\/i> khusus guest star<\/i> dan mengetik nama secara manual melalui Command Prompt \/ Terminal.<\/p>\n
    Proses ini memakan waktu sekitar 5 menit untuk membuat 738 e-certificate<\/i> di dalam sebuah laptop dengan kapasitas RAM 8GB dan prosesor Intel Core i7 generasi ketujuh, sedangkan perintah convert<\/span> dalam program ImageMagick tidak diproses menggunakan<\/a> resource <\/i><\/a>GPU apapun<\/a>. Program C tersebut akan dijalankan secara single-thread<\/i>, sehingga proses pembuatan e-certificate<\/i> ini sebenarnya dapat dipercepat melalui proses multithreading<\/i> menggunakan library<\/i> <pthread.h><\/span>.<\/p>\n
    Hal-hal yang dapat dipelajari dari kasus ini, khususnya bagi mahasiswa School of Computer Science<\/h2>\n
    Pertama-tama, jangan sepelekan materi pembelajaran bahasa C (PBC) meskipun Anda sudah menyelesaikan dan lulus dari mata kuliah COMP6047 \u2013 Algorithm and Programming<\/a>. Bahasa C setidaknya masih dapat dipakai untuk membuat program-program tertentu yang dapat dijalankan secara cepat dan efisien dibandingkan dengan bahasa pemrograman lain seperti Python. Perintah-perintah seperti scanf()<\/span> ini dapat menyelesaikan kasus ini dengan lebih cepat dibandingkan dengan metode lainnya, seperti menggunakan regular expression (regex).<\/p>\n
    Kedua, jangan sepelekan soal-soal tugas dan latihan mata kuliah tersebut, karena dengan mengerjakannya Anda akan lebih terbiasa dan siap untuk menghadapi perkuliahan saat ini sampai akhir.<\/p>\n
    Terakhir, semua #PastiAdaJalan dengan algoritma. Ya, hashtag ini sering digaungkan oleh salah satu perusahaan <\/a>super app<\/i><\/a> di Indonesia<\/a>, tapi perusahaan dan aplikasi tersebut tidak dapat berjalan tanpa\u2026 ya, algoritma!<\/p>\n","protected":false},"excerpt":{"rendered":"
    HTTP (HIMTI Togetherness and Top Performance) 2020 merupakan acara terbesar yang pernah kami selenggarakan secara virtual, khususnya melalui Microsoft Teams dan Zoom. Jumlah peserta HTTP kali ini lebih besar daripada ajang-ajang HTTP sebelumnya, dengan jumlah peserta aktif (yang berhak menerima e-certificate) sebanyak 736 orang. Kami sendiri telah membangun sebuah situs web portal untuk mengurus pendaftaran […]<\/p>\n","protected":false},"author":14,"featured_media":1441,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/student-activity.binus.ac.id\/himti\/wp-json\/wp\/v2\/posts\/1438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/student-activity.binus.ac.id\/himti\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/student-activity.binus.ac.id\/himti\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himti\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himti\/wp-json\/wp\/v2\/comments?post=1438"}],"version-history":[{"count":6,"href":"https:\/\/student-activity.binus.ac.id\/himti\/wp-json\/wp\/v2\/posts\/1438\/revisions"}],"predecessor-version":[{"id":1524,"href":"https:\/\/student-activity.binus.ac.id\/himti\/wp-json\/wp\/v2\/posts\/1438\/revisions\/1524"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himti\/wp-json\/wp\/v2\/media\/1441"}],"wp:attachment":[{"href":"https:\/\/student-activity.binus.ac.id\/himti\/wp-json\/wp\/v2\/media?parent=1438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himti\/wp-json\/wp\/v2\/categories?post=1438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/himti\/wp-json\/wp\/v2\/tags?post=1438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}