Kamis, 02 September 2021

Belajar MySQL #Tak Kenal Maka Tak Pakai

Assalamuallaikum wr,wb

Pengertian MySQL sebagai RDBMS

Bagi mahasiswa maupun web developer, kalau bicara database, kemungkinan besar akan membicarakan MySQL. Tapi, kenapa harus MySQL? Bagaimana dengan Oracle? Jawaban singkat, padat dan tepat adalah: gratis dan user friendly.

MySQL adalah salah satu aplikasi RDBMS (Relational Database Management System). Pengertian sederhana RDBMS adalah: aplikasi database yang menggunakan prinsip relasional. Apa itu prinsip relasional? Kita akan membicarakannya dalam tutorial berikutnya.

MySQL juga bukan satu-satunya RDBMS, list lengkapnya ada di wikipedia. Diantaranya yang banyak dikenal adalah: Oracle, Sybase, Microsoft Access, Microsoft SQL Server, dan PostgreSQL.

MySQL bersifat gratis dan open source. Artinya setiap orang boleh menggunakan dan mengembangkan aplikasi ini. Namun walaupun gratis, MySQL di support oleh ribuan programmer dari seluruh dunia, dan merupakan sebuah aplikasi RDBMS yang lengkap, cepat, dan reliabel.


Berikut beberapa keunggulan MySQL dibandingkan dengan RDBMS lainnya:

Speed

Sebuah studi dari eWeek di February 2002 yang membandingkan performa kecepatan MySQL dengan RDBMS lainnya, seperti Microsoft SQL Server 2000, IBM DB2, Oracle 9i dan Sybase :

MySQL has the best overall performance and that MySQL scalability matches Oracle … MySQL had the highest throughput, even exceeding the numbers generated by Oracle.”

Yang terjemahan bebasnya, MySQL memiliki kecepatan yang lebih dibandingkan pesaing yang berbayar. Bagi anda ingin membaca paper tersebut, tersedia di situs MySQL

Reliability

Biasanya sesuatu yang gratis susah diandalkan, bahkan banyak bug dan sering hang. Tidak demikian dengan MySQL, karena sifatnya yang open source, setiap orang dapat berkontribusi memeriksa bug dan melakukan test case untuk berbagai skenario yang memerlukan sistem 24 jam online, multi-user dan data ratusan GB. Hasilnya, MySQL merupakan RDBMS yang reliabel namun memiliki performa diatas rata-rata.

Skalability

MySQL dapat memproses data yang sangat besar dan kompleks, tanpa ada penurunan performa yang berarti, juga mendukung sistem multi-prosesor. MySQL juga dipakai oleh perusahaan-perusahaan besar di dunia, seperti Epson, New York Times, Wikipedia, Google, Facebook, bahkan NASA.

User Friendly

Instalasi dan mempelajari MySQL cukup mudah dan tidak dipusingkan dengan banyak settingan. Cukup download aplikasi MySQL dan install, kita dapat menggunakan MySQL dalam waktu kurang dari 5 menit (dengan asumsi tidak mati lampu).

Portability and Standard Compliance

Database MySQL dapat dengan mudah berpindah dari satu sistem ke sistem lainnya. Misalkan dari sistem Windows ke Linux. Aplikasi MySQL juga dapat berjalan di sistem Linux (RedHat, SuSE, Mandrake, Debian), Embedded Linux (MontaVista, LynuxWorks BlueCat),Unix (Solaris, HP-UX, AIX), BSD (Mac OS X, FreeBSD), Windows (Windows 2000, Windows NT) dan RTOS (QNX).

Multiuser Support

Dengan menerapkan arsitektur client-server. Ribuan pengguna dapat mengakses database MySQL dalam waktu yang bersamaan.

Internationalization

Atau dalam bahasa sederhananya, mendukung beragam bahasa. Dengan dukungan penuh terhadap unicode, maka aksara non-latin seperti jepang, cina, dan korea bisa digunakan di dalam MySQL.

Wide Application Support

Biasanya database RDBMS tidak digunakan sendirian, namun ditemani dengan aplikasi atau bahasa pemrograman lainnya untuk menyediakan interface, seperti C, C++, C#, Java, Delphi, Visual Basic,  Perl Python dan PHP. Ke semua itu di dukung oleh API (Application Programming Interface) oleh MySQL.

Open Source Code

Kita pun bisa (jika mampu dan mengerti), mengembangkan MySQL dengan mempelajari kode programnya. MySQL di kembangkan dengan bahasa C and C++. Bahkan sudah terdapat berbagai variasi rasa RDBMS baru yang dikembangkan dari code MySQL, diantaranya: Drizzle, MariaDB, Percona Server dan OurDelta.

Bagaimana dengan MariaDB?

Pada tahun 2010, MySQL dibeli oleh perusahaan Oracle. Hal ini membuat khawatir banyak kalangan. Karena sebagaimana yang kita tau, Oracle merupakan perusahaan database terbesar di dunia, yang salah satu saingannya adalah MySQL.

Banyak yang khawatir bahwa suatu saat pengembangan MySQL akan dihentikan oleh Oracle. Untuk mengantisipasi hal ini, dikembangkanlah MariaDB sebagai pengganti MySQL. MariaDB dibuat oleh tim yang dulunya juga membuat MySQL.

Pada dasarnya, MariaDB adalah cloningan MySQL. Boleh dibilang bahwa MariaDB berisi MySQL yang diberi “merk” MariaDB serta penambahan fitur dan perbaikan performa. Seluruh materi yang dibahas dalam tutorial MySQL di duniailkom ini bisa berjalan baik di MariaDB maupun MySQL.

Faktanya, jika kita mendownload aplikasi XAMPP, sekarang sudah di bundle dengan database MariaDB, bukan lagi MySQL. Anda mungkin tidak sadar akan hal ini, karena di sisi programming (misalnya menggunakan PHP) dan query yang dipakai, tidak ada perbedaan antara MySQL dengan MariaDB.

Sekian  sedikit pengertian tentang MySQL Semoga Bermanfaat 


Sabtu, 31 Juli 2021

Membuat Helper format tanggal indonesia di codeigniter





Assalamualaikum Wr, Wb

Membuat Helper Format Tanggal Indonesia di Codeigniter bagaimana caranya langsung saja.

Dalam pembuatan aplikasi web, format tanggal merupakan kebutuhan penting. Sebagai contoh penggunaan format tanggal biasannya pada cetak laporan default format dalam php biasanya berbahasa inggris. untuk membuat tanggal menjadi format indonesia kita perlu membuatnya dulu.

Sebagai contoh penggunaan Format Tanggal indonesia

  • 13 Juli 2020
  • 13 Jul 2020
  • 13/07/2020
  • Senin, 13 Juli 2020
Untuk membuat helper Format Tanggal indonesia langkahnya seperti berikut

Buat file tglindo_helper.php simpan pada folder Codeigniter kita struktur folder application/helpers. kode skript seperti di bawah ini:

<?php

if (!function_exists('bulan')) {
    function bulan(){
        $bulan = Date('m');
        switch ($bulan) {
            case 1:
                $bulan = "Januari";
                break;
            case 2:
                $bulan = "Februari";
                break;
            case 3:
                $bulan = "Maret";
                break;
            case 4:
                $bulan = "April";
                break;
            case 5:
                $bulan = "Mei";
                break;
            case 6:
                $bulan = "Juni";
                break;
            case 7:
                $bulan = "Juli";
                break;
            case 8:
                $bulan = "Agustus";
                break;
            case 9:
                $bulan = "September";
                break;
            case 10:
                $bulan = "Oktober";
                break;
            case 11:
                $bulan = "November";
                break;
            case 12:
                $bulan = "Desember";
                break;

            default:
                $bulan = Date('F');
                break;
        }
        return $bulan;
    }
}

/**
 * Fungsi untuk membuat tanggal dalam format bahasa indonesia
 * @param void
 * @return string format tanggal sekarang (contoh: 22 Desember 2016)
 */
if (!function_exists('tanggal')) {
    function tanggal() {
        $tanggal = Date('d') . " " .bulan(). " ".Date('Y');
        return $tanggal;
    }
}

function tanggal_indo($tanggal)
{
$bulan = array (1 =>   'Januari',
            'Februari',
            'Maret',
            'April',
            'Mei',
            'Juni',
            'Juli',
            'Agustus',
            'September',
            'Oktober',
            'November',
            'Desember'
        );
$split = explode('-', $tanggal);
return $split[2] . ' ' . $bulan[ (int)$split[1] ] . ' ' . $split[0];
}


function format_hari_tanggal($waktu)
{
    $hari_array = array(
        'Minggu',
        'Senin',
        'Selasa',
        'Rabu',
        'Kamis',
        'Jumat',
        'Sabtu'
    );
    $hr = date('w', strtotime($waktu));
    $hari = $hari_array[$hr];
    $tanggal = date('j', strtotime($waktu));
    $bulan_array = array(
        1 => 'Januari',
        2 => 'Februari',
        3 => 'Maret',
        4 => 'April',
        5 => 'Mei',
        6 => 'Juni',
        7 => 'Juli',
        8 => 'Agustus',
        9 => 'September',
        10 => 'Oktober',
        11 => 'November',
        12 => 'Desember',
    );
    $bl = date('n', strtotime($waktu));
    $bulan = $bulan_array[$bl];
    $tahun = date('Y', strtotime($waktu));
    $jam = date( 'H:i:s', strtotime($waktu));
    
    
    return "$hari, $tanggal $bulan $tahun $jam";
}

Untuk kegunaan masing masing function sebagai berikut:
  • Function tanggal_indo untuk menampilkan format : 13 Juli 2020
  • Function format_hari_tanggal untuk menampilkan format: Senin, 13 Juli 2020 13.00
Untuk Implementasi Penggunaanya seperti berikut:

Buat file Controller baru Format_tanggal.php kode seperti berikut:

<?php 
class Format_tanggal extends CI_Controller{
    function __construct(){
        parent::__construct();
        $this->load->helper('tglindo_helper');
    }
 
    function index(){
        // Pemanggilan Fungsi dari helper
        echo tanggal_indo('2017-09-5');
        echo "<br/>";        

        // Pemanggilan Fungsi dari helper
        echo format_hari_tanggal('2017-09-5');
        echo "<br/>";      
    }
}
?>
Keterangan:
Kita harus meload helper tglindo untuk bisa digunanakan, utuk merubah tanggal kita panggil function tglindo_helper sendiri contoh seperti diatas, jalankan dan lihat hasilnya tanggal sudah berubah ke format indonesia. Sekian dan semoga bermanfaat

Seting URL Dinamis di Codeigniter

 



Assalamualaikum Wr, Wb

Kita akam membahas bagaimana cara menjadikan base_url dinamis di codeigniter, ada kalanya kita saat membuat aplikasi kita lupa untuk menseting base_url menjadi dinamis, akibatnya kadang pemanggilan file css dan lain sebagainya tidak berfungsi. ok langsung saja ya

Saat pertama kali membuat aplikasi denga Codeigniter, hal pertma yang kita lakukan adalah seting konfigurasi base_url. Config ini berguna untuk menciptakan URL yang mengakses resource yang berada pada direktori root.

Secara default konfigurasi base_url Codeigniter adalah seperti berikut


$config['base_url'] = '';

Ketika kita ingin membuat sebuah aplikasi misalnya Penjualan, maka kita merubah konfigurasi url menjadi seperti ini:

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

Bila aplikasi tersebut kita upload diserver/hosting maka akan ada errr, disebabkan karena Codeigniter mengakses localhost yang seharusnya mengakses domain/ip server.

Solusi untuk mengatasi error seperti diatas cukup mudah, kita tinggal mengatur ulang setingan base_url agar menjadi dinamis, konfigurasinya seperti ini:

base_url default

$config['base_url'] = '';

Ganti dengan konfigurasi seperti di bawah ini:

$config['base_url'] = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "https" : "http");
$config['base_url'] .= "://" . $_SERVER['HTTP_HOST'];
$config['base_url'] .= str_replace(basename($_SERVER['SCRIPT_NAME']), "", $_SERVER['SCRIPT_NAME']);

Dengan cara diatas maka kita tidak perlu merubah konfigurasi base_url secara manual, apabila berpindah domain/ server. ok mungkin segitu dulu dan semoga bermanfaat

Kamis, 29 Juli 2021

Menghitung Selisih Waktu dengan Moment JS

 



Assalamualaikum Wr, Wb


Bagai mana cara menghitung selisih waktu di php?


Sebelumnya kita intro sedikit ya hehe,

Waktu merupakan salah jenis data yang paling sering kita temui. Bekerja dengan waktu di Javascript secara manual cukup merepotkan apa lagi jika harus berurusan dengan locale masing-masing. Untuk mengatasi masalah ini, moment.js diciptakan.

Moment.js merupakan sebuah pustaka yang didesain untuk dapat mem-parsing, memvalidasi, memanipulasi serta menampilkan tanggal dan waktu di Javascript. Pustaka ini dapat bekerja dengan baik di browser ataupun Node.js. Untuk saat ini browser yang dipakai untuk pengujian moment.js adalah IE 8, 9, dan 10 di Windows 7, IE 11 di Windows 10, Chrome di Windows XP, Firefox terbaru di Linux, dan Safari terbaru di OSX 10.8 dan 10.11.

Moment.js dapat dipasang manual dengan memanggil file javascriptnya atau dipasang menggunakan package manager.


Ok langsung praktek saja


Download librari Moment.js 


File moment.js memiliki ukuran hanya 16.6k dan menggunakan Bahasa Inggris. Jika ingin menggunakan bahasa lain dalam format tampilan tanggal dan waktu kita dapat menggunakan moment-with-locales.js mendukung 115 bahasa termasuk Bahasa Indonesia dan Bahasa Jawa. Berikut contoh hasil penggunaan moment.js untuk menampilkan tanggal dan waktu dalam Bahasa Indonesia dan Jawa.


Konfigurasi 

// Bahasa Indonesia
moment().format('MMMM Do YYYY, h:mm:ss a'); // September 4 2017, 10:53:16 pagi
moment().format('dddd');                    // Senin
moment().format("MMM Do YY");               // Sep 4 17
moment().format('YYYY [escaped] YYYY');     // 2017 escaped 2017
moment().format();                         

moment("20111031", "YYYYMMDD").fromNow(); // 6 tahun yang lalu
moment("20120620", "YYYYMMDD").fromNow(); // 5 tahun yang lalu
moment().startOf('day').fromNow();        // 11 jam yang lalu
moment().endOf('day').fromNow();          // dalam 13 jam
moment().startOf('hour').fromNow();      

moment().subtract(10, 'days').calendar(); // 25/08/2017
moment().subtract(6, 'days').calendar();  // Selasa lalu pukul 10.53
moment().subtract(3, 'days').calendar();  // Jumat lalu pukul 10.53
moment().subtract(1, 'days').calendar();  // Kemarin pukul 10.53
moment().calendar();                      // Hari ini pukul 10.53
moment().add(1, 'days').calendar();       // Besok pukul 10.53
moment().add(3, 'days').calendar();       // Kamis pukul 10.53
moment().add(10, 'days').calendar();     

// Bahasa Jawa
moment().format('MMMM Do YYYY, h:mm:ss a'); // September 4 2017, 10:53:54 enjing
moment().format('dddd');                    // Senen
moment().format("MMM Do YY");               // Sep 4 17
moment().format('YYYY [escaped] YYYY');     // 2017 escaped 2017
moment().format();                          // 2017-09-04T10:53:54+07:00

moment("20111031", "YYYYMMDD").fromNow(); // 6 taun ingkang kepengker
moment("20120620", "YYYYMMDD").fromNow(); // 5 taun ingkang kepengker
moment().startOf('day').fromNow();        // 11 jam ingkang kepengker
moment().endOf('day').fromNow();          // wonten ing 13 jam
moment().startOf('hour').fromNow();      

moment().subtract(10, 'days').calendar(); // 25/08/2017
moment().subtract(6, 'days').calendar();  // Seloso kepengker pukul 10.54
moment().subtract(3, 'days').calendar();  // Jemuwah kepengker pukul 10.54
moment().subtract(1, 'days').calendar();  // Kala wingi pukul 10.54
moment().calendar();                      // Dinten puniko pukul 10.54
moment().add(1, 'days').calendar();       // Mbenjang pukul 10.54
moment().add(3, 'days').calendar();       // Kemis pukul 10.54
moment().add(10, 'days').calendar();      // 14/09/2017


Sekian Semoga Bermanfaat

Selasa, 27 Juli 2021

Query MySQL untuk Update Field Null


 

Assalamualaikum Wr, Wb

Pada field sebuah tabel terdapat opsi NULL yang memungkinkan record yang dimasukkan tidak memiliki nilai atau NULL. NULL berbeda dengan nilai kosong. Nilai kosong masih memiliki sebuah nilai yaitu string tanpa teks.

Untuk Update field dengan nilai NULL bisa menggunakan kueri di bawah ini



UPDATE [table] SET [FIELD] = 'Tentukan Nilai SET' WHERE [FIELD] IS NULL

Keterangan : 
[nama_table] = nama table
[ field ] = field yang terdapat duplikat data

Sekian Semoga Bermanfaat

Senin, 26 Juli 2021

Query MySQL Untuk Mencari dan Menghapus Data Duplikat


 



Assalamuaikaum Wr. Wb

Adakalanya kita memiliki data duplikat pada database / table tertentu. tentunya hal ini diakibatkan oleh kurangnya filter pada form yang menjadi input ke database ataupun salahnya pembentukan database itu sendiri yang dapat mengakibatkan data duplikat.

untuk menghapus data duplikat tersebut tentnunya kita perlu mencari terlebih dahulu, berikut script untuk mencari data duplikat

Skript untuk Mencari data Duplikat


SELECT * FROM [nama_table]  
WHERE [field] IN (SELECT dupid FROM (SELECT MAX([field]) AS dupid,COUNT(*) AS dupcnt  
FROM [nama_table]  
GROUP BY [field ] HAVING COUNT(*) > 1) AS duptable)

Skript untuk Hapus data Duplikat


DELETE FROM [nama_table]  
WHERE [field] IN (SELECT dupid FROM (SELECT MAX([field]) AS dupid,COUNT(*) AS dupcnt  
FROM [nama_table]  
GROUP BY [field ] HAVING COUNT(*) > 1) AS duptable)

Keterangan : 
[nama_table] = nama table
[ field ] = field yang terdapat duplikat data

Dari script tersebut akan muncul data - data yang terinput lebih dari 1x, untuk menghapusnya kita dapat lakukan dengan mengganti SELECT * menjadi DELETE


Sekian Semoga Bermanfaat

Rabu, 07 Juli 2021

Membuat Aplikasi Buku Tamu Memanfaatkan Kamera Webcam With Codeigniter

Assalamualaikum Wr, Wb

Apakabar temen2 Semoga sehat dan bahagian, untuk postingan kali ini akan berbagi cara membuat aplikasi pencatatan buku tamu dengan framework codeigniter, dengan memanfaatkan kamera webcam dari komputer, langsung saja ya hehe


Tampilan Aplikasi Seperti Gambar

Langkah Langkah

Ada 3 file dalam aplikasi ini
  1.     File Controller  Beranda.php
  2.     File Model Mtamu.php
  3.     File View beranda.php

Code File Controller

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Beranda extends CI_Controller {
  public function __construct(){
    parent::__construct();
    $this->load->model('Mtamu');
  }
  public function index(){
	date_default_timezone_set('Asia/Bangkok');
    $data = $this->Mtamu->view();
    $this->load->view('beranda');
  }
  public function tampil_tamu(){
	$data = $this->Mtamu->view();
	echo json_encode($data);
  }
  
  public function jumlah_tamu(){
	$data = $this->Mtamu->jml_tamu();
	echo json_encode($data);
  }

  public function simpan(){

    $input_nama        = $this->input->post('input_nama', true);
    $input_jeniskelamin= $this->input->post('input_jeniskelamin', true);
    $input_alamat      = $this->input->post('input_alamat', true);
    $input_nominal     = $this->input->post('input_nominal', true);
    $input_waktu       = $this->input->post('input_waktu', true);
    $image             = $this->input->post('image');

    $img      = str_replace('data:image/jpeg;base64,','', $image);
    // echo $img;
    $imgg = base64_decode($img);
    $filename = 'image_'.time().'.png';
    file_put_contents(FCPATH.'uploads/'.$filename,$imgg);

    $data = array(
      'nama'        => $input_nama,
      'jenis_kelamin'=> $input_jeniskelamin,
      'alamat'      => $input_alamat,
      'nominal'     => $input_nominal,
      'waktu'       => $input_waktu,
      'gambar'      => $filename
    );
    // print_r($data);die();
    $add = $this->db->insert('tb_tamu', $data);
    if($add){ 
      $callback = array(
        'status'=>'sukses'
      );
    }else{
      $callback = array(
        'status'=>'gagal'
      );
    }
    
    echo json_encode($callback);

  }
  public function ubah($id){
    if($this->Mtamu->validation("update")){ // Jika validasi sukses atau hasil validasi adalah true
		$this->Mtamu->edit($id);
		$callback = array(
		  'status'=>'sukses'
		);
	  }else{
		$callback = array(
		  'status'=>'gagal'
		);
	  }
  
	  echo json_encode($callback);
  }
  public function hapus($id){
    $this->Mtamu->delete($id);
    $callback = array(
      'status'=>'sukses'
    );
    echo json_encode($callback);
  }
  public function date(){
    $date = date('Y-m-d H:i:s');
    echo json_encode($date);
  }

}




Code File Model

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Mtamu extends CI_Model {

  public function view(){
    return $this->db->get('tb_tamu')->result();
  }

  public function jml_tamu(){
    return $this->db->query('SELECT date(waktu) AS wkt, COUNT(waktu) AS jumlah FROM `tb_tamu` GROUP BY date(waktu)')->result();
  }
  
  public function validation($mode){
    $this->load->library('form_validation');
    if($mode == "save"){
      $this->form_validation->set_rules('input_nama', 'Nama', 'required|max_length[50]');
      $this->form_validation->set_rules('input_jeniskelamin', 'Jenis Kelamin', 'required');
      $this->form_validation->set_rules('input_alamat', 'Alamat', 'required');
      $this->form_validation->set_rules('input_nominal', 'Nominal', 'required|numeric|max_length[15]');
    }else if($mode == "update"){
      $this->form_validation->set_rules('edit_nama', 'Nama', 'required|max_length[50]');
      $this->form_validation->set_rules('edit_jeniskelamin', 'Jenis Kelamin', 'required');
      $this->form_validation->set_rules('edit_alamat', 'Alamat', 'required');
      $this->form_validation->set_rules('edit_nominal', 'Nominal', 'required|numeric|max_length[15]');
    }
    if($this->form_validation->run()){return true;}
    else{return false;}
  }

  public function save(){
    $data = array(
      "nama" => $this->input->post('input_nama'),
      "jenis_kelamin" => $this->input->post('input_jeniskelamin'),
      "alamat" => $this->input->post('input_alamat'),
      "nominal" => $this->input->post('input_nominal'),
      "waktu" => $this->input->post('input_waktu')
    );
    $this->db->insert('tb_tamu', $data);
  }

  public function edit($id){
    $data = array(
      "nama" => $this->input->post('edit_nama'),
      "jenis_kelamin" => $this->input->post('edit_jeniskelamin'),
      "alamat" => $this->input->post('edit_alamat'),
      "nominal" => $this->input->post('edit_nominal'),
      "waktu" => $this->input->post('edit_waktu')
    );
    $this->db->where('id_tamu', $id);
    $this->db->update('tb_tamu', $data);
  }

  public function delete($id){
    $this->db->where('id_tamu', $id);
    $this->db->delete('tb_tamu');
  }
}




Code File View
<?php
	$status = $this->session->userdata("status");
	if (isset($status) != "login") {
		redirect('login');
	}
?>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>Beranda | Tamuku</title>
	<meta name="description" content="LulusanSkom" />
	<meta name="keywords" content="admin, admin dashboard, admin template, cms, LulusanSkom, responsive admin, sass, panel, software, ui, visualization, web app, application" />
	<meta name="author" content="hencework" />

	<!-- Favicon -->
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="icon" href="favicon.ico" type="image/x-icon">

	<!-- Morris Charts CSS -->
	<link href="<?php echo base_url();?>assets/vendors/bower_components/morris.js/morris.css" rel="stylesheet" type="text/css" />

	<!-- Data table CSS -->
	<link href="<?php echo base_url();?>assets/vendors/bower_components/datatables/media/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />

	<!--alerts CSS -->
	<link href="<?php echo base_url();?>assets/vendors/bower_components/sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css">

	<!-- Custom CSS -->
	<link href="<?php echo base_url();?>assets/dist/css/style.css" rel="stylesheet" type="text/css">
</head>

<body>

	<div class="wrapper theme-1-active pimary-color-red">
		<!-- Top Menu Items -->
		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="mobile-only-brand pull-left">
				<div class="nav-header pull-left">
					<div class="logo-wrap">
						<a href="<?php echo base_url();?>">
							<img class="brand-img" src="./assets/dist/img/chair2.jpg" alt="brand" />
							<span class="brand-text">Buku Tamu</span>
						</a>
					</div>
				</div>
				<a id="toggle_mobile_nav" class="mobile-only-view" href="javascript:void(0);"><i class="zmdi zmdi-more"></i></a>
			</div>
			<div id="mobile_only_nav" class="mobile-only-nav pull-right">
				<ul class="nav navbar-right top-nav pull-right">
					<li class="dropdown auth-drp">
						<a href="#" class="dropdown-toggle pr-0" data-toggle="dropdown"><?php echo $this->session->userdata('nama'); ?> <img src="<?php echo base_url();?>assets/dist/img/icon_topi.jpeg" alt="user_auth" class="user-auth-img img-circle" /><span class="user-online-status"></span></a>
						<ul class="dropdown-menu user-auth-dropdown" data-dropdown-in="flipInX" data-dropdown-out="flipOutX">
							<li>
								<a href="<?php echo base_url();?>"><i class="zmdi zmdi-account"></i><span>Profile</span></a>
							</li>
							
							<li class="divider"></li>
							<li>
								<a href="login/logout"><i class="zmdi zmdi-power"></i><span>Log Out</span></a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</nav>
		<!-- /Top Menu Items -->

		<!-- Main Content -->
		<div class="page-wrapper" style="margin-left: 0px;">
			<div class="container pt-25">

				<!-- Row -->
				<div class="row">
					<div class="col-lg-9 col-md-9 col-sm-6 col-xs-12">
						<div class="panel panel-default card-view panel-refresh">
							<div class="refresh-container">
								<div class="la-anim-1"></div>
							</div>
							<div class="panel-heading">
								<div class="row">
									<span class="weight-500 font-20 txt-primary ml-25">
									<img src="<?php echo base_url();?>assets/dist/img/toga_ku.png" width="90px" style="margin-bottom:-20px" alt="user_auth" class="user-auth-img img-circle" />&nbsp;
									Daftar Tamu</span>
									<button data-toggle="modal" data-target="#form-tambah" class="btn btn-primary btn-sm pull-right" id="btn-tambah" style="padding-right: 8px;padding-left: 8px; margin-right: 10px;">Tambah Tamu</button>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="panel-wrapper collapse in">
								<div class="panel-body">
									<div class="table-wrap">
										<div class="table-responsive">
											<table id="tabel_tamu" class="table table-hover display pb-30">
												<thead>
													<tr>
														<th>ID</th>
														<th>Nama</th>
														<th>Jenis Kelamin</th>
														<th>Alamat</th>
														<th>Foto</th>
														<th>Aksi</th>
													</tr>
												</thead>
												<tfoot>
													<tr>
														<th>ID</th>
														<th>Nama</th>
														<th>Jenis Kelamin</th>
														<th>Alamat</th>
														<th>Foto</th>
														<th>Aksi</th>
													</tr>
												</tfoot>
												<tbody id="tampil_data">
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
						<div class="panel panel-default card-view">
							<div class="panel-heading">
								<span class="weight-500 font-20 block text-center txt-primary">Jumlah Tamu</span>
								<div class="clearfix"></div>
							</div>
							<div class="panel-wrapper collapse in">
								<div class="panel-body">
									<div id="jum_tamu">
									</div>
									<div id="jum_keseluruhan">

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- /Row -->
			</div>

			<!-- Footer -->
			<footer class="footer container-fluid pl-30 pr-30">
				<div class="row">
					<div class="col-sm-12">
						<p><?php echo date('yy');?> &copy; <a href="http://www.lulusanskom.com/" target="_blank">LulusanSkom</a></p>
					</div>
				</div>
			</footer>
			<!-- /Footer -->

		</div>
		<!-- /Main Content -->

	</div>
	<!-- /#wrapper -->
	<div id="form-tambah" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h5 class="modal-title">Masukkan Data Tamu</h5>
				</div>
				<div class="modal-body">
					<div class="text-center">
						<div id="scanner"></div>
					</div>
					<div id="result_tamu">

					</div>
					<form>
						<div class="form-group">
							<label class="control-label mb-10" for="nama">Nama</label>
							<input type="text" class="form-control" name="input_nama" id="input_nama" placeholder="Masukkan Nama">
						</div>
						<div class="form-group">
							<label class="control-label mb-10" for="jenis_kelamin">Jenis Kelamin</label>
							<select class="form-control" name="input_jeniskelamin" id="input_jeniskelamin">
								<option value="Laki-laki">Laki-laki</option>
								<option value="Perempuan">Perempuan</option>
							</select>
						</div>
						<div class="form-group">
							<label class="control-label mb-10" for="alamat">Alamat</label>
							<input type="text" class="form-control" name="input_alamat" id="input_alamat" placeholder="Masukkan Alamat">
						</div>
						<div class="form-group">
							<label class="control-label mb-10" for="nominal">Nominal</label>
							<input type="text" class="form-control" name="input_nominal" id="input_nominal" placeholder="Masukkan Nominal">
						</div>
						<input type="text" class="hidden" name="input_waktu" id="input_waktu">
					</form>
				</div>
				<div class="modal-footer">
					<button id="btn-simpan" type="button" class="btn btn-sm btn-primary ">Simpan</button>
				</div>
			</div>
		</div>
	</div>

	<div id="form-edit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h5 class="modal-title">Edit Data</h5>
				</div>
				<div class="modal-body">
					<form>
						<div class="edit"><img src="" id="gambar" alt=""></div>
						<input type="text" class="hidden" name="edit_idtamu" id="edit_idtamu">
						<div class="form-group">
							<label class="control-label mb-10" for="edit_">Nama</label>
							<input type="text" class="form-control" name="edit_nama" id="edit_nama" placeholder="Masukkan Nama">
						</div>
						<div class="form-group">
							<label class="control-label mb-10" for="edit_jeniskelamin">Jenis Kelamin</label>
							<select class="form-control" name="edit_jeniskelamin" id="edit_jeniskelamin">
								<option value="Laki-laki">Laki-laki</option>
								<option value="Perempuan">Perempuan</option>
							</select>
						</div>
						<div class="form-group">
							<label class="control-label mb-10" for="edit_alamat">Alamat</label>
							<input type="text" class="form-control" name="edit_alamat" id="edit_alamat" placeholder="Masukkan Alamat">
						</div>
						<div class="form-group">
							<label class="control-label mb-10" for="edit_nominal">Nominal</label>
							<input type="text" class="form-control" name="edit_nominal" id="edit_nominal" placeholder="Masukkan Nominal">
						</div>
						<input type="text" class="hidden" name="edit_waktu" id="edit_waktu">
					</form>
				</div>
				<div class="modal-footer">
					<button id="btn-ubah" type="button" class="btn btn-sm btn-primary">Ubah</button>
				</div>
			</div>
		</div>
	</div>

	<div id="form-hapus" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h5 class="modal-title">Hapus Data</h5>
				</div>
				<div class="modal-body">
					<p class="text-center">Apakah Anda Yakin Ingin Menghapus Data Ini?</p>
					<form>
						<input type="text" class="hidden" name="hapus_idtamu" id="hapus_idtamu">
					</form>
				</div>
				<div class="modal-footer">
					<button id="btn-hapus" type="button" class="btn btn-sm btn-danger">Hapus</button>
				</div>
			</div>
		</div>
	</div>

	<!-- JavaScript -->

	<!-- jQuery -->
	<script src="<?php echo base_url();?>assets/vendors/bower_components/jquery/dist/jquery.min.js"></script>
	<script src="<?php echo base_url();?>assets/vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<!-- <script src="https://code.jquery.com/jquery-3.5.0.js"></script> -->

	<!-- Bootstrap Core JavaScript -->
	<script src="<?php echo base_url();?>assets/vendors/bower_components/bootstrap-validator/dist/validator.min.js"></script>

	<!-- Data table JavaScript -->
	<script src="<?php echo base_url();?>assets/vendors/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>

	<!-- Init JavaScript -->
	<script src="<?php echo base_url();?>assets/dist/js/init.js"></script>

	<!-- Slimscroll JavaScript -->
	<script src="<?php echo base_url();?>assets/dist/js/jquery.slimscroll.js"></script>

	<!-- Owl JavaScript -->
	<script src="<?php echo base_url();?>assets/vendors/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>

	<!-- Switchery JavaScript -->
	<script src="<?php echo base_url();?>assets/vendors/bower_components/switchery/dist/switchery.min.js"></script>

	<!-- Sweet-Alert  -->
	<script src="<?php echo base_url();?>assets/vendors/bower_components/sweetalert/dist/sweetalert.min.js"></script>

	<!-- Fancy Dropdown JS -->
	<script src="<?php echo base_url();?>assets/dist/js/dropdown-bootstrap-extended.js"></script>

	<!-- QR Code Scanner  -->
	<script src="<?php echo base_url();?>assets/vendors/bower_components/qrcode/qrcodelib.js"></script>
	<!-- <script src="./assets/vendors/bower_components/qrcode/webcodecamjquery.js"></script> -->

	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
	<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.js"></script>
	<script>
		var id = 0;

		$(document).ready(function () {

			tampil_tamu()
			jumlah_tamu()
			date();

			$('#tabel_tamu').DataTable({
				"language": {
					"decimal": "",
					"emptyTable": "Data Tidak Tersedia",
					"info": "Tampilkan _START_ - _END_ dari _TOTAL_ Data",
					"infoEmpty": "Showing 0 to 0 of 0 entries",
					"infoFiltered": "(filter dari _MAX_ total data)",
					"infoPostFix": "",
					"thousands": ",",
					"lengthMenu": "Tampilkan _MENU_ Data",
					"loadingRecords": "Loading...",
					"processing": "Proses...",
					"search": "Cari:",
					"zeroRecords": "Data Tidak Tersedia",
					"paginate": {
						"first": "First",
						"last": "Last",
						"next": "Lanjut",
						"previous": "Kembali"
					},
					"aria": {
						"sortAscending": ": activate to sort column ascending",
						"sortDescending": ": activate to sort column descending"
					}
				}
			});

			function tampil_tamu() {
				$.ajax({
					type: 'ajax',
					url: 'beranda/tampil_tamu',
					async: false,
					dataType: 'json',
					success: function (data) {
						var html = '';
						var no = 1;
						for (i = 0; i < data.length; i++) {
							html += '<tr id="' + data[i].id_tamu + '">' +
								'<td>' + no + '</td>' +
								'<td>' + data[i].nama + '</td>' +
								'<td>' + data[i].jenis_kelamin + '</td>' +
								'<td>' + data[i].alamat + '</td>' +
								// '<td>' + data[i].waktu +'<img src="<?php echo base_url('assets/');?>' + data[i].gambar + '" width="1px" style="  display: none"></td>' +
								'<td>' +'<img src="<?php echo base_url('uploads/');?>' + data[i].gambar + '" width="40px"></td>' +
								'<td>' +
								'<button class="btn btn-xs btn-primary" style="padding-left: 10px;padding-right: 10px;" data-toggle="modal" data-target="#form-edit" id="btn-edit" data-id="' + data[i].id_tamu + '" data-nama="' + data[i].nama + '" data-jk="' + data[i].jenis_kelamin + '" data-jk="' + data[i].jenis_kelamin + '" data-alamat="' + data[i].alamat + '" data-nominal="' + data[i].nominal + '" data-gambar="' + data[i].gambar + '"> <i class="fa fa-pencil"></i></button> ' +
								'<button class="btn btn-xs btn-danger" style="padding-left: 10px;padding-right: 10px;" data-toggle="modal" data-target="#form-hapus" data-id="' + data[i].id_tamu + '"> <i class="fa fa-trash"></i> </button>' +
								'</td>' +
								'</tr>'
							no++;
						}
						$('#tampil_data').html(html);
					}

				});
			}

			function jumlah_tamu() {
				$.ajax({
					type: 'ajax',
					url: 'beranda/jumlah_tamu',
					// async: false,
					dataType: 'json',
					success: function (data) {
						var html1 = '';
						var html2 = '';
						var jum = 0;
						for (i = 0; i < data.length; i++) {
							html1 += '<span class="pull-left inline-block capitalize-font txt-dark"> ' + data[i].wkt + '</span>' +
								'<span class="label label-success pull-right" style="font-size:14px;">' + data[i].jumlah + '</span>' +
								'<div class="clearfix"></div>' +
								'<hr class="light-grey-hr row mt-10 mb-10" />';
						}
						$('#jum_tamu').html(html1);
						for (u = 0; u < data.length; u++) {
							jum += parseInt(data[u].jumlah);
						}
						html2 += '<span class="pull-left inline-block capitalize-font txt-dark">Jumlah</span>' +
							'<span class="label label-primary pull-right" style="font-size:14px;">' + jum + '</span>' +
							'<div class="clearfix"></div>';
						$('#jum_keseluruhan').html(html2);

					}

				});
			}

			function date() {
				$.ajax({
					type: 'ajax',
					url: 'beranda/date',
					async: false,
					dataType: 'json',
					success: function (data) {
						$('#waktu').val(data);
						$('#edit_waktu').val(data);
					}
				});
			}

			$('#form-edit').on('show.bs.modal', function (event) {
				var button = $(event.relatedTarget);
				console.log(button);
				var id = button.data('id');
				var nama = button.data('nama');
				var jk = button.data('jk');
				var alamat = button.data('alamat');
				var nominal = button.data('nominal');
				var gambar = button.data('gambar');
				$('#edit_idtamu').val(id);
				$('#edit_nama').val(nama);
				$('#edit_jeniskelamin').val(jk);
				$('#edit_alamat').val(alamat);
				$('#edit_nominal').val(nominal);
				console.log(gambar);
				$('img#gambar').attr('src','<?=base_url("uploads/")?>'+gambar);

			})

			$('#form-hapus').on('show.bs.modal', function (event) {
				var button = $(event.relatedTarget);
				var id = button.data('id');
				$('#hapus_idtamu').val(id);
			})

			

			$('#btn-simpan').click(function () {
				
				var image = '';
				var input_nama= $('#input_nama').val();
				var input_jeniskelamin = $('#input_jeniskelamin').val();
				var input_alamat = $('#input_alamat').val();
				var input_nominal = $('#input_nominal').val();
				var input_waktu = (new Date()).toISOString().slice(0, 19).replace("T", " ");

				// var input_gambar = $('#result_tamu').val();
				var username = $('#username').val();
				var email = $('#email').val();
				var password = $('#password').val();

				Webcam.snap( function(data_uri) {
					image = data_uri;
					// console.log(image);
				});

			
				$.ajax({
					type: "POST",
					url: "<?php echo base_url("Beranda/simpan");?>",
				    data: {input_nama:input_nama, input_jeniskelamin:input_jeniskelamin, input_alamat:input_alamat, input_nominal:input_nominal, input_waktu:input_waktu, image:image},
				    success: function(response){
				    	let cek = JSON.parse(response);
				    	if (cek.status == 'sukses') {
							// Tampilkan Tabel
							tampil_tamu();
							jumlah_tamu()
							// pesan sukses
							swal({
								title: "Sukses",
								type: "success",
								text: "Anda Telah Berhasil Mengiputkan Data",
								confirmButtonColor: "#469408"
							});

							$('#form-tambah').modal('hide')
						} else {
							// Tampilkan Tabel
							tampil_tamu();
							jumlah_tamu()
							// pesan gagal
							swal({
								title: "Gagal",
								type: "error",
								text: "Data Yang Di Inputkan Harus Valid",
								showConfirmButton: false,
								timer: 1500
							});

							$('#form-tambah').modal('hide')
						}
	                      }
	                  })
			})

			$('#btn-tambah').click(function (event) {
			event.preventDefault();
				var arg = {
					resultFunction: function (result) {
						var array_tamu = result.code;
						console.log(array_tamu);
						$('#input_nama').val("asdads");
						// document.getElementById("input_nama").innerHTML = array_tamu[0];
						// document.getElementById("input_jeniskelamin").innerHTML = array_tamu[1];
						// document.getElementById("input_alamat").innerHTML = array_tamu[2];
						// document.getElementById("input_nominal").innerHTML = array_tamu[3];
						// document.getElementById("result_tamu").innerHTML = array_tamu;
					}
				};
				Webcam.set({
					width: 320,
					height: 240,
					image_format: 'jpeg',
					jpeg_quality: 90
				});
				Webcam.attach( '#scanner' );
				// $("#scanner").WebCodeCamJQuery(arg).data().plugin_WebCodeCamJQuery.play();
			})

			$('#btn-hapus').click(function () {
				id = $('#hapus_idtamu').val();
				console.log(id);
				$.ajax({
					url: 'beranda/hapus/' + id, // URL tujuan
					dataType: 'json',
					beforeSend: function () {},
					success: function (response) { // Ketika proses pengiriman berhasil
						if (response.status == 'sukses') {
							// Tampilkan Tabel
							tampil_tamu()
							jumlah_tamu()
							// pesan sukses
							swal({
								title: "Sukses",
								type: "success",
								text: "Anda Telah Berhasil Menghapus Data Ini",
								confirmButtonColor: "#469408"
							});

							$('#form-hapus').modal('hide')
						} else {
							// Tampilkan Tabel
							tampil_tamu()
							jumlah_tamu()
							// pesan gagal
							swal({
								title: "Gagal",
								type: "error",
								text: "Data Ini Gagal Di Hapus",
								showConfirmButton: false,
								timer: 1500
							});

							$('#form-hapus').modal('hide')
						}
					}
				})
			})

			$("#btn-ubah").click(function () {
				id = $('#edit_idtamu').val();
				$.ajax({
					url: 'beranda/ubah/' + id, // URL tujuan
					type: 'POST', // Tentukan type nya POST atau GET
					data: $("#form-edit form").serialize(), // Ambil semua data yang ada didalam tag form
					dataType: 'json',
					beforeSend: function () {},
					success: function (response) { // Ketika proses pengiriman berhasil
						if (response.status == 'sukses') {
							// Tampilkan Tabel
							tampil_tamu()
							jumlah_tamu()
							// pesan sukses
							swal({
								title: "Sukses",
								type: "success",
								text: "Anda Telah Berhasil Mengedit Data",
								confirmButtonColor: "#469408"
							});

							$('#form-edit').modal('hide')
						} else {
							// Tampilkan Tabel
							tampil_tamu()
							jumlah_tamu()
							// pesan gagal
							swal({
								title: "Gagal",
								type: "error",
								text: "Data Yang Di Edit Harus Valid",
								showConfirmButton: false,
								timer: 1500
							});

							$('#form-edit').modal('hide')
						}
					}
				})
			});

			$('#form-tambah').on('hidden.bs.modal', function (e) { // Ketika Modal Dialog di Close / tertutup
				$('#form-tambah #nama, #form-tambah #alamat, #form-tambah #nominal').val('') // Clear inputan menjadi kosong
			})
		})

	</script>

</body>

</html>

Salin code diatas sesuaikan dengan file masing masing kemudian jalankan 

Configurasi
Seting koneksi database sesuaikan dengan database temen temen
Tentukan Default Routing

untuk download database dan assetnya disini Download

Semoga Bermanfaat

Kamis, 14 Januari 2021

Belajar Flutter Part#1:Pengenalan dan Persiapan

 

Assalamualaikum Wr, Wb

Topiknya kali ini belajar membuat aplikasi berbasis android & IOS dengan flutter,

Apa itu Flutter ? Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membuat aplikasi mobile Android dan iOS dengan satu basis code. Dirilis pada Mei 2017 ditulis menggunakan bahasa pemrograman Dart. Flutter dirancang untuk memberi kemudahan kepada para programmer mobile dalam membangun aplikasi mobile multi platform dengan performa “native” dengan cepat.

Website Flutter : https://flutter.dev/


Jika sebelumnya saat ingin membuat aplikasi android kita harus menggunakan Java atau Kotlin dan menggunakan swift apabila ingin membuat aplikasi iOS. Maka dengan Flutter kita cukup koding satu kali maka sudah dapat membuat aplikasi android dan iOS sekaligus. Lalu seperti apa itu flutter dan kenapa harus mempelajarinya ?

1. Proses Belajar yang Mudah dan Cepat
Bagi programmer, saat berbicara tentang sebuah teknologi atau bahasa pemrograman baru tentu hal yang paling mendasar yang sering dipertanyakan yaitu seberapa besar dan lama waktu yang dibutuhkan untuk mempelajari suatu bahasa. Sebagai contoh jika kita ingin membuat aplikasi android menggunakan kotlin atau java, kita perlu memahami beberapa bahasa sekaligus seperti XML, java, dan lain-lain. Untuk membuat website berbasis PHP kita perlu memahami HTML, CSS, PHP, PHP Framework dan CMS. Semakin banyak yang perlu dipelajari semakin lama pula waktu yang perlu digunakan untuk proses belajar.

Menurut saya pribadi yang saat ini berprofesi sebagai software engineer, Flutter itu seksi. Kenapa ? Karena untuk membuat aplikasi android dan iOS menggunakan Flutter kita hanya perlu mempelajari satu bahasa yaitu DART. Syntax dart sendiri mirip seperti java dan javascript jadi bagi anda yang sudah pernah menggunakan java atau javascript tentu tidak perlu memerlukan banyak waktu untuk beradaptasi dengan Flutter.

Flutter bagi pemula juga cukup friendly, kalian tidak harus mempelajari banyak bahasa pemrograman dalam satu waktu. Cukup fokus pada dart atau langsung membuat aplikasi dengan flutter karena kodingan flutter sendiri terbilang cukup ramah untuk dipelajari. Hasil dari kodingan pun langsung dapat dilihat dengan fiture hotReload. Seru Pastinya. Konsep OOP atau Object Oriented Programming mungkin sesuatu yang biasanya jadi momok bagi programmer pemula namun tidak perlu khawatir karena yakin seiring waktu pasti kita dapat menguasainya.

2. Proses Development yang Cepat
Keuntungan lain bagi flutter developer yaitu proses pengembangan aplikasi yang cepat. Fitur Hot Reload memungkinkan kita untuk mengubah kode dan melihatnya secara langsung saat itu juga tanpa harus menunggu waktu lama untuk proses compiling.

apa itu flutter
contoh fitur hot reload pada flutter
Seperti yang dapat dilihat pada gambar diatas, dengan fiture Hot Reload kita dapat melihat hasil kodingan secara cepat tanpa harus menunggu waktu yang lama.

3. Aplikasi Native untuk Android dan IOS
Seperti yang sudah disebutkan di awal, hanya dengan sekali koding pada Flutter maka kita dapat membuat aplikasi android dan IOS secara bersamaan. Namun sebagai informasi, framework yang dapat berjalan cross platform BIASANYA memiliki masalah di segi performa. Sebagai contoh di tahun 2015-an sempat tren Ionic Framework namun sayang memiliki issue frame drop yang besar, dan yang saat ini masih populer di kategori framework cross mobile platform yaitu React Native juga banyak yang mengeluh first time load yang berat karena harus meload seluruh javascriptnya dan membutuhkan proses bridge atau semacam jembatan agar kode dapat berjalan.

Flutter berjalan di level native alias tidak memerlukan proses tambahan yang berat sehingga tentunya proses berjalannya aplikasi akan lebih smooth dan cepat. Saat ini flutter masih menjadi cross platform framework yang tercepat di tahun 2020. Perbaikan dari segi performa dan lainnya juga terus aktif dilakukan oleh google terlebih tersebar kabar bahwa Google sedang mengembangkan OS baru bernama Fuchsia yang katanya akan dijadikan sebagai pengganti dari android (yang saat ini basic pengembangannya dengan java) dan flutter yang menjadi salah satu senjata utamanya.

4. Tampilan / UI yang fleksibel dan menarik
Di Flutter semuanya adalah widget. Dengan membuat semua bagiannya menjadi widget maka kita dapat mengatur secara penuh tampilan, fungsi dan animasi di setiap pixelnya. Ini berarti kita memiliki fleksibilitas yang powerfull saat mengembangkan aplikasi dengan flutter. Flutter menggunakan Material Design sehingga tampilan sedikit berbeda dengan tampilan native tetapi hal ini menjadi positif karena kita tidak perlu membuat hal-hal dasar untuk masing-masing platform

Dengan Material Design kita tidak perlu susah payah membuat suatu tampilan dari awal, seperti pewarnaan, padding bahkan tampilan-tampilan umum pada sebuah aplikasi mobile sudah disiapkan widgetnya oleh Flutter. Sebagai contoh untuk membuat list pada flutter kita cukup menggunakan Widget yang bernama ListView maka BOOM selesai. Item-item seperti ukuran dan posisi Judul, subtitle, thumbnail sudah di sediakan sebagai properti. Kita hanya perlu menggunakan dan merubahnya sesuai kebutuhan design.

5. Tidak Banyak Tergantungan pada Pihak Ketiga
Flutter hadir dengan package yang cukup lengkap sehingga kita tidak perlu banyak menginstall library pihak ketiga (third party) untuk hal-hal mendasar. Hal ini sangat penting karena apabila core dari flutter update maka kemungkinan besar module-module internal lainnya sudah kompetible dengan update tersebut. Tidak seperti package pihak ketiga yang mungkin harus menunggu beberapa hari atau bahkan beberapa bulan untuk dapat menyesuikan dengan versi terbarunya.

Package dan library Flutter juga sangat cepat berkembang, banyak sekali library-library keren dan unik yang bisa sangat membantu dalam proses pembuatan aplikasi. Untuk melihat library flutter kamu dapat akses di https://pub.dev/

6. Dokumentasi yang Lengkap dan Komunitas yang terus berkembang
Dokumentasi Flutter sangat lengkap, anda dapat mengunjunginya di https://flutter.dev/docs. Tapi sayangnya saat ini hanya tersedia dalam bahasa inggris. Namun jangan bersedih karena disini belajarflutter.com akan coba menerjemahkannya dengan versi yang lebih mudah dipahami dan berbahasa Indonesia tentunya.


7. Popularitas yang Terus Meningkat
Flutter di 2020 memiliki trend yang sangat positif dibandingkan dengan para pesaingnya seperti React Native dan Xamarin. Memang saat ini lowongan pekerjaan dan komunitas Flutter tidak sebesar dengan React Native. Akan tetapi bukan tidak mungkin Flutter akan menguasai pasar dalam beberapa tahun kedepan.


8. Biaya Pengembangan Aplikasi bisa Lebih Murah
Bagi perusahaan, mengembangkan aplikasi mobile dengan Flutter tentu menguntungkan. Karena hanya memerlukan satu team developer saja (Flutter Developer) sudah dapat membuat aplikasi Android, iOS dan web secara bersamaan. Waktu pengerjaannya pun jadi lebih cepat karena proses kodingnya pun hanya satu kali. Bayangkan biasanya suatu perusahaan harus membayar gaji 2 team untuk membangun aplikasi di Android dan iOS kini cukup satu saja. Tidak heran beberapa perusahaan besar dunia pun berani untuk beralih ke Flutter.

Untuk melihat aplikasi yang di buat dengan flutter  kunjungi https://flutter.dev/showcase


Contoh code “Hello Word” pada Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "BelajarFlutter.com",
    home: HomeScreen(),
  ));
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Belajar Flutter"),
        ),
        body:
            Center(
              child: Text('Hello Word', 
                style: TextStyle(fontSize: 20)
              )
            )
    );
  }
}

cara create project flutter dengan cmd

pastikan sebelumnya sudah terinstall aplikasi flutter di laptop

  1. Buat folder project
  2. Buka terminal/cmd ketik flutter create nama_apk di dalam folder project tunggu hingga selesai
  3. Buka folder project otomatis udah ada folder nama_apk yang di create sebelumnya
  4. ketik di cmd flutter run, untuk menjalankan project flutter

Kurang lebih seperti gambar



Tampilannya kurang lebih seperti gambar




Sekian Dulu ya semoga bermanfaatšŸ¤ž





Kategori