Cara menggunakan html input qr code

Pada suatu hari tiba-tiba tanpa di sengaja saya bertemu dengan sahabat lama saya. Saya hampir tidak mengenalinya saking lamanya tidak berjumpa.

Dia terlihat gemukkan sekarang. tapi, biar bagaimanapun saya merasa senang bisa bertemu dengan dia lagi.

Karena sudah lama tidak berjumpa, kami pun memutuskan untuk hangout keluar minum kopi.

Dalam perjalanan menuju warung kopi, cuaca pun mulai menunjukkan tanda-tanda mau hujan.

Awan-awan hitam mulai mengepul dan tetesan hujan pun mulai terasa dan kami pun bergegas untuk cepat-cepat sampai di warung kopi.

Sesampainya disana, kami pun memesan kopi hitam hangat.

Kami pun menikmati seruput demi seruput kopi hitam hangat tersebut. Ditambah lagi cuaca cukup dingin karena derasnya hujan menambah sensasi nikmat dari kopi kami.

Kami pun ngobrol banyak. Mulai dari penjalanan kuliah, relationship, visi misi, masa depan, dan pekerjaan.

Di tengah-tengah pembicaraan, tiba-tiba dia terdiam lalu mengeluarkan smartphone-nya dan berkata: “Bagaimana caranya aku bisa menghubungi kamu lagi? Bagaimana kalo melalui line aja?. Sini, scan QR CODE saja biar cepat”, Ujarnya.

Saya pun tertegun, dan memeriksa saku demi saku. Tanpa disadari ternyata handphone saya ketinggalan.

Karena takut mengecewakan dia, saya pun memberikan nomor handphone saya kepadanya.

Sebenarnya saya bersyukur, karana handphone saya ketinggalan karena sebenarnya saya tidak punya LINE, BBM, ataupun WhatApp. Akun sosmed yang saya punya hanyalah Facebook dan Instagram.

Dari pembicaraan tersebut, saya menyadari satu hal. Saya merasa tertarik dengan QR CODE dan saya mendapatkan ide untuk belajar bagaimana membuat QR CODE dengan codeigniter.

Ide terkadang memang muncul di saat momen-momen seperti itu. QR Code berhasil menarik perhatian saya.

Sepulangnya dari warung kopi saya pun mulai menelusuri tentang QR CODE, ternyata QR CODE ini benar-benar mengagumkan. Selain dapat menampung banyak karakter, juga dapat menampung huruf kanji Jepang.

Saya yakin anda sudah tidak asing lagi dengan QR CODE, apa lagi anda punya akun BBM atau LINE. Jika mungkin diantara Anda masih ada yang asing tentang QR CODE, berikut penjelasannya.

QR Code (Quick Response Code) merupakan bentuk evolusi dari BARCODE (Kode Batang) dari satu dimensi menjadi dua dimensi.

Sederhananya QR CODE merupakan perkembangan dari BARCODE.

Setelah saya pelajari, ternyata QR CODE ini telah banyak digunakan oleh pengembang sistem informasi untuk membangun sistem informasi member ataupun Human Resources (HR).

Boommm, lagi-lagi QR CODE menarik perhatian saya.

Semakin jauh saya menelusuri tentang QR CODE, akhirnya saya menemukan sebuah library QR Code untuk codeigniter.

Tanpa menunda lagi saya langsung mempelajarinya. Ternyata library-nya sangat bagus dan mudah digunakan oleh pemula sekalipun.

Begitu saya berhasil melakukannya, tidak sabarnya rasanya ingin sharing. Karena saya yakin akan banyak yang membutuhkannya.

Pada kasus kali ini, saya akan sharing bagaimana membuat NIM (Nomor Induk Mahasiswa) kedalam bentuk QR CODE.

Adapun caranya sebagai berikut:

Dapatkan diskon 75% paket hosting dan gratis domain + extra diskon 5% dengan menggunakan kupon: MFIKRI

#1. PERSIAPAN

Sebelum proses pembuatan, ada tahap yang tidak boleh anda lewatkan begitu saja. Yaitu tahap persiapan.

Apa saja yang perlu anda persiapkan?

Berikut listnya:

Codeiginter, jika anda belum memilikinya silahkan download di situs resminya www.codeigniter.com

Jquery, Jika anda belum memilikinya, silahkan download di situs resminya www.jquery.com

Bootstrap, bootstrap ini berfungsi untuk mempercantik tampilan. Jika anda belum memilikinya, silahkan download di situs resminya www.getbootstrap.com

Codeigniter-PHP-QR-Code, merupakan library untuk membuat QR Code menggunakan codeigniter. Untuk mendownload-nya silahkan download di link berikut:

https://github.com/dwisetiyadi/CodeIgniter-PHP-QR-Code

#2. PEMBUATAN STRUKTUR DATABASE DAN TABLE

Berikutnya, yang perlu anda lakukan adalah pembuatan database dan struktur table.

Database, buat database dengan mengeksekusi query berikut:

CREATE DATABASE db_akademik;

Pada query diatas, anda akan mendapatkan sebuah database dengan nama db_akademik.

Table, buat Tabel mahasiswa dengan mengeksekusi query berikut:

CREATE TABLE mahasiswa(
nim VARCHAR(15) PRIMARY KEY,
nama VARCHAR(50),
prodi VARCHAR(40),
qr_code VARCHAR(50)
)ENGINE=INNODB;

Query diatas akan menghasil sebuah tabel mahasiswa dengan field nim dengan type data varchar(15), nama dengan type data varchar(50), prodi dengan varchar(40), dan qr_code dengan type data varchar(50).

#3. INSTALLASI CODEIGNITER

Untuk menginstall codeigniter, silahkan extract codeigniter yang sudah di download sebelumnya ke folder www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP).

Kemudian rename (ganti nama) project codeigniter anda sesuai dengan project Anda. Disini saya memberi nama qrcode.

Setelah di extract, buat folder assets sejajar dengan folder application dan system, kemudian sertakan file bootstrap dan jquery didalam folder assets. Sehingga terlihat struktur project kita seperti berikut:

Pada gambar diatas dapat dilihat, bahwa didalam folder assets terdapat folder css, fonts, images, dan js.

Didalam folder css, terdapat file bootstrap.css

Didalam folder js, terdapat file bootstrap.js dan jquery-2.1.4.min.js.

Sedangkan folder fonts dan images merupakan folder bawaan bootstrap.

#4. KONFIGURASI CODEIGNITER

Buka application/config/autoload.php atur menjadi seperti berikut:

$autoload['libraries'] = array('database');
$autoload['helper'] = array('url');

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/qrcode/';

Terakhir buka application/config/database.php

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => '',
	'database' => 'db_akademik', //sesuaikan dengan database anda!
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

Selanjutnya, Copy-kan folder qrcode dan file Ciqrcode.php yang terdapat dari master Codeigniter-PHP-QR-Code ke folder project application/libaries/.

Sehingga terlihat seperti gambar berikut:

#5. MODEL

Buat sebuah model dengan nama Mahasiswa_model.php dengan kode sebagai berikut:

<?php
class Mahasiswa_model extends CI_Model{

	function get_all_mahasiswa(){
		$hasil=$this->db->get('mahasiswa');
		return $hasil;
	}
	
	function simpan_mahasiswa($nim,$nama,$prodi,$image_name){
		$data = array(
			'nim' 		=> $nim,
			'nama' 		=> $nama,
			'prodi' 	=> $prodi, 
			'qr_code' 	=> $image_name
		);
		$this->db->insert('mahasiswa',$data);
	}
}

Pada model mahasiswa_model dapat dilihat terdapat dua function. Yaitu function get_all_mahasiswa() dan function simpan_mahasiswa().

Function get_all_mahasiswa() berfungsi untuk menampilkan semua data mahasiswa yang ada di tabel mahasiswa ke view.

Sedangkan function simpan_mahasiswa() berfungsi untuk menyimpan data mahasiswa kedalam database.

#6. CONTROLLER

Buat sebuah controller dengan nama Mahasiswa.php dengan kode sebagai berikut:

<?php 
class Mahasiswa extends CI_Controller{
	function __construct(){
		parent::__construct();
		$this->load->model('mahasiswa_model'); //pemanggilan model mahasiswa
	}

	function index(){
		$data['data']=$this->mahasiswa_model->get_all_mahasiswa();
		$this->load->view('mahasiswa_view',$data);
	}

	function simpan(){
		$nim=$this->input->post('nim');
		$nama=$this->input->post('nama');
		$prodi=$this->input->post('prodi');

		$this->load->library('ciqrcode'); //pemanggilan library QR CODE

		$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/images/'; //direktori penyimpanan qr code
		$config['quality']		= true; //boolean, the default is true
		$config['size']			= '1024'; //interger, the default is 1024
		$config['black']		= array(224,255,255); // array, default is array(255,255,255)
		$config['white']		= array(70,130,180); // array, default is array(0,0,0)
		$this->ciqrcode->initialize($config);

		$image_name=$nim.'.png'; //buat name dari qr code sesuai dengan nim

		$params['data'] = $nim; //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

		$this->mahasiswa_model->simpan_mahasiswa($nim,$nama,$prodi,$image_name); //simpan ke database
		redirect('mahasiswa'); //redirect ke mahasiswa usai simpan data
	}
}

Pada controller Mahasiswa terdapat tiga function. Yaitu function __construct(), function index(), dan function simpan().

Function __construct() berfungsi sebagai konstruktor.

Function index() berfungsi untuk menampilkan view dengan nama mahasiswa_view sekaligus membawa data mahasiswa yang disimpan dalam benruk array.

Function simpan() berfungsi untuk menyimpan data mahasiswa yang baru kedalam database sekaligus membuat NIM (Nomor Induk Mahasiswa) kedalam bentuk QR CODE.

#7. VIEW

Buat sebuah view dengan nama mahasiswa_view.php dengan kode sebagai berikut:

<!DOCTYPE html>
<html>
<head>
	<title>Data Mahasiswa</title>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
	<div class="container">
		<div class="row">
			<h2>Data <small>Mahasiswa</small></h2>
			<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Add New</button>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>NIM</th>
						<th>NAMA</th>
						<th>PRODI</th>
						<th>QR CODE</th>
					</tr>
				</thead>
				<tbody>
					<?php foreach($data->result() as $row):?>
					<tr>
						<td style="vertical-align: middle;"><?php echo $row->nim;?></td>
						<td style="vertical-align: middle;"><?php echo $row->nama;?></td>
						<td style="vertical-align: middle;"><?php echo $row->prodi;?></td>
						<td><img style="width: 100px;" src="<?php echo base_url().'assets/images/'.$row->qr_code;?>"></td>
					</tr>
					<?php endforeach;?>
				</tbody>
			</table>
		</div>
	</div>

	<!-- Modal add new mahasiswa-->
	<form action="<?php echo base_url().'index.php/mahasiswa/simpan'?>" method="post">
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Add New Mahasiswa</h4>
		      </div>
		      <div class="modal-body">
		    
		          <div class="form-group">
		            <label for="nim" class="control-label">NIM:</label>
		            <input type="text" name="nim" class="form-control" id="nim">
		          </div>
		          <div class="form-group">
		            <label for="nama" class="control-label">NAMA:</label>
		            <input type="text" name="nama" class="form-control" id="nama">
		          </div>
	       		  <div class="form-group">
		            <label for="prodi" class="control-label">PRODI:</label>
		            <select name="prodi" class="form-control" id="prodi">
		            	<option>Sistem Informasi</option>
		            	<option>Sistem Komputer</option>
		            	<option>Manajemen Informatika</option>
		            </select>
		          </div>
	        
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
		        <button type="submit" class="btn btn-primary">Simpan</button>
		      </div>
		    </div>
		  </div>
		</div>
	</form>

	<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-2.1.4.min.js'?>"></script>
	<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
</body>
</html>

Related: Tutorial Lengkap CodeIgniter 4 Untuk Pemula

#8. SELESAI

Silahkan buka browser anda dan jalan controller mahasiswa dengan mengunjungi url : http://localhost/qrcode/index.php/mahasiswa

Bagaimana cara masukan kode QR?

Bagaimana cara membaca kode QR?

Seperti apa kode QR?