Minggu, 28 November 2021

Belajar Python

 Assalamualaikum  Wr, Wb


Topik Kali ini kita akan bahas mengenai bahasa python kita mulai dari sitak sintak dasar dulu agar lebih terstruktur

Intro Dulu gaes hehe

Python adalah salah satu bahasa pemrograman yang dapat melakukan eksekusi sejumlah instruksi multi guna secara langsung (interpretatif) dengan metode orientasi objek. Python adalah bahasa pemrograman yang paling mudah dipahami. Python dibuat oleh programmer Belanda bernama Guido Van Rossum.

Di era digital segala profesi yang berkaitan dengan teknologi dan komputer dianggap menjanjikan di masa depan, salah satunya adalah programmer. Banyak hal yang bisa Anda ciptakan saat menekuni dunia programmer, seperti software, aplikasi pada smartphone, program GUI, program CLI, Internet of Things, games dan lain-lainnya. Untuk dapat membuat itu semua, seorang programmer harus menguasai bahasa pemrograman.. Ada banyak bahasa pemrograman yang bisa dipelajari, namun banyak yang merekomendasikan Python sebagai salah satu bahasa pemrograman. Mengapa demikian? Banyak yang berasumsi bahwa Python lebih mudah dimengerti dibandingkan bahasa pemrograman lainnya. Informasi selengkapnya akan dipaparkan pada artikel berikut ini.

Sejarah Python

Python dibuat dan dikembangkan oleh Guido Van Rossum, yaitu seorang programmer yang berasal dari Belanda. Pembuatannya berlangsung di kota Amsterdam, Belanda pada tahun 1990. Pada tahun 1995 Python dikembangkan lagi agar lebih kompatibel oleh Guido Van Rossum. Selanjutnya pada awal tahun 2000, terdapat pembaharuan versi Python hingga mencapai Versi 3 sampai saat ini. Pemilihan nama Python sendiri diambil dari sebuah acara televisi yang lumayan terkenal yang bernama Mothy Python Flying Circus yang merupakan acara sirkus favorit dari Guido van Rossum.


Kelebihan dan Kekurangan Python

Banyak orang yang tertarik untuk menggunakan Python karena dianggap mudah untuk dipelajari, sekalipun oleh para pemula. Kode-kode yang ada didalamnya  mudah dibaca dan dapat menjalankan banyak fungsi kompleks dengan mudah karena banyaknya standard library. Pengembangan program pada Python pun dapat dilakukan dengan cepat dan menggunakan lebih sedikit kode. Bahkan Python mampu menjadikan program dengan skala sangat rumit menjadi mudah. Python sendiri mendukung multi platform dan multi system serta memiliki sistem pengelolaan memori otomatis seperti Java.

Sayangnya Python cukup lambat dijalankan. Untuk pengembangan platform Android dan IOS juga terbilang  kurang support. Python juga memiliki keterbatasan dengan akses basis data. Selain itu Python tidak cocok untuk melakukan tugas-tugas intensif memori dan pekerjaan multi-core/ multi-processor. sudah dulu ya intronya kebanyakan malah ndak di baca nanti hehehe

Persiapan Alat Tempur

  • Sudah Terinstal Python di laptop tement temen, apabila temen menggunakan linux / mac python sudah otomatis terinstall tutorial install python disini
  • Menggunakan terminal 
  • Niat dan doa
Langkah langkah memulai 

buka terminal kemudian cek apakah python sudah terinstal, sintak untuk cek python:

python --version
Hasil nya jika sudah terinstall akan seperti gambar seperti dibawah ini:

 

Jika tampilan sudah seperti diatas selamat saatnya untuk belajar bahasa python, 

untuk memulai ketikan perintah  { python }  di terminal temen temen hasilnya akan seperti gambar dibawah

untuk menampilkan tulisan kita bisa menggunakan perintah seperti dibawah di terminal
print('Hello Word') 
hasilnya akan seperti gambar dibawah ini

 

Untuk percobaan lainnya

Selanjutnya temen2 bisa mencoba beberapa operator dasar paa python
10 + 5 atau 10 - 5 atau 10 % 5 dan seterunya
Untuk Keluar dari termianl kita bisa tekan Ctrol+D kalau di mackbook atau tuliskan diterminal exit()

Membuat File Python

untuk membuat file python kita bisa mengunakan visual studio code dengan menyimpan file dengan ektensi .py

Langkahnya
  1. buka visual studio code / text edit temen temen
  2. buat folder misal python kemudian buat file baru dengan nama main.py
  3. dalam file tersebut tulisakan perintah
  4. print('Hello Word Sedang belajar python') Kemudian save
  5. panggil file python tadi di terminal dengan cara masuk ke folder projet misal cd /python
  6. ketika sudh masuk folder tulis perintah python nama_file atau seperti ini python main.py tekan enter
  7. maka hasilnya akan tampil di terminal temen temen
Selanjutnya 

ini adalah  tutorial awal dari pyton sederhana dan mudah next insaAllah akan membahas kelanjutan dari seri tutorial python
Sekian dan semoga bermanfaat Terimakasih🙏

Kamis, 14 Oktober 2021

Login Codeigniter

 Assalamualikum Wr, Wb


Topik Kali ini kita akan bahas mengenai pembuatan login di aplikasi pengaduan jaringan berbasis web, fitur ini adalah bagian awal untuk membuat aplikasi, kenapa mesti pakai login di aplikasi, login diperlukan untuk mencegah user melihat data data kita, biasanya digunakan untuk masuk di level administrator, langsung saja


Perlengkapan / Donwload

  •     Framework Codeigniter v-3
  •     Admin Lte v-2.40 

Langkah Langkah

  1. Membuat tabel user
  2. Membuat controller login
  3. Membuat model login
  4. Membuat view/tampilan
Membuat tabel user, sebelum membuat tabel user buat dulu database, struktur tabel user,  insert data di tabel user

CREATE TABLE `user` (
`user_id` int(11) NOT NULL,
`id_desa` varchar(11) NOT NULL DEFAULT 'kosong',
`id_upt` varchar(11) NOT NULL DEFAULT 'kosong',
`id_opd` varchar(11) NOT NULL DEFAULT 'kosong',
`username` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
`no_telp` varchar(13) NOT NULL,
`level` enum('0','1') NOT NULL DEFAULT '1'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;


Insert data user, jalankan kode dibawah ini di phpmyadmin

INSERT INTO `user` (`user_id`, `id_desa`, `id_upt`, `id_opd`, `username`, `password`, `no_telp`, `level`) VALUES
(17, '', '', '19', 'admin', '255297dc48c4087a1fe0096c802c33336e01f268', '946467457648', '0'),

Membuat Controller Login
Buat file baru di folder controller, example penamaan file Auth.php kodenya seperti ini:


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

class Auth extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
        $this->load->model('user_m');
        $this->load->library('form_validation');
    }

    public function login()
    {
        check_already_login();
        $data['judul'] = "Login Admin";
        $this->load->view('login', $data);
    }
    
    public function proses()
    {
        $post = $this->input->post(null, true);
        if (isset($_POST['login'])) {
            $this->load->model('user_m');
            $query = $this->user_m->login($post);

            if ($query->num_rows() > 0) {
                $row = $query->row();
                $params = array(
                    'userid' => $row->user_id,
                    'level' => $row->level
                );
                $this->session->set_userdata($params);
                $this->session->set_flashdata('success', 'Login Berhasil!');

                redirect('administrator');
            } else {
                echo "<script>
                         alert('Login Gagal! Password atau Username Yang Anda Masukkan Salah');
                         window.location = '" . site_url('login') . "';
                     </script>";
            }
        }
    }


Membuat file Login Model User_m.php

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

class User_m extends CI_Model
{
    public function login($post)
    {
        $this->db->select('*');
        $this->db->from('user');
        $this->db->where('username', $post['username']);
        $this->db->where('password', sha1($post['password']));
        // $this->db->where('level != "0"');
        $query = $this->db->get();
        return $query;
    }
 

Membuat File view login.php

<?php
defined('BASEPATH') or exit('No direct script access allowed');
?>
  <!DOCTYPE html>
<html>
  
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><?= $judul ?></title>
  <link rel="icon" href="<?= base_url() ?>assets/img/icon.png">

  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="<?php echo base_url() ?>assets/template/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="<?php echo base_url() ?>assets/template/bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="<?php echo base_url() ?>assets/template/bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="<?php echo base_url() ?>assets/template/dist/css/AdminLTE.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="<?php echo base_url() ?>assets/template/plugins/iCheck/square/blue.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>

<div id="flash-data" data-flashdata="<?= $this->session->flashdata('success'); ?>"></div>

<body class="hold-transition login-page">
  <div class="login-box">
    <div class="login-logo">
      <a href="<?php echo base_url() ?>assets/index2.html"><b>Admin</b>Masuk</a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
      <p class="login-box-msg">Silahkan Masuk</p>

      <form action="<?php echo site_url('auth') ?>" method="post">
        <div class="form-group has-feedback">
          <input type="text" class="form-control" name="username" placeholder="username" required />
          <span class="glyphicon glyphicon-user form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input type="password" class="form-control" name="password" placeholder="Password" required />
          <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="checkbox icheck">
              <label>
                <input type="checkbox"> Ingat Saya?
              </label>
            </div>
          </div>
          <!-- /.col -->
          <div class="col-xs-4">
            <button type="submit" name="login" class="btn btn-primary btn-block btn-flat">Masuk</button>
          </div>
          <!-- /.col -->
        </div>
      </form>
    </div>
    <!-- /.login-box-body -->
  </div>

  <script src="<?php echo base_url() ?>assets/template/bower_components/jquery/dist/jquery.min.js"></script>
  <!-- Bootstrap 3.3.7 -->
  <script src="<?php echo base_url() ?>assets/template/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <!-- iCheck -->
  <script src="<?php echo base_url() ?>assets/template/plugins/iCheck/icheck.min.js"></script>
  <!-- sweetalert -->
  <script src="<?= base_url('assets/sweetalert2.all.min.js') ?>"></script>
  <!-- <script src="<?= base_url('assets/popup.js') ?>"></script> -->


  <script>
    $(function() {
      $('input').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' /* optional */
      });
    });
  </script>

  <script>
    var flashData = $('#flash-data').data('flashdata');
    // console.log(flashData);

    if (flashData) {
      Swal.fire({
        icon: "success",
        title: "Logout Berhasil!",
        text: "Jangan Lupa Beristirahat",
      })
    }
    //   else{
    //     Swal.fire({
    //     title: "Login Gagal",
    //     text: "Username atau Password Anda Tidak terdaftar",
    //     icon: "error",
    //   });
    // }
  </script>
  <script>
    // $("#gagal").click(function(){

    //   swal.fire({
    //     title : "Login Gagal!",
    //     text : "Password atau Username Yang Anda Masukkan Salah",
    //     icon : "Warning",
    //   })
    // })
    // var masuk = $('#salah').data('gagal');

    // if(masuk){
    //     swal.fire({
    //     title : "Login Gagal!",
    //     text : "Password atau Username Yang Anda Masukkan Salah",
    //     icon : "Warning",
    //   })
    // }
  </script>

</body>

</html>


Jalankan projec di web tampilan seperti dibawah ini















Semoga bermanfaat next postingan akan membuat tampilan dashboard setelah login 🙏🙏

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

Kategori