Thursday, January 14, 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🤞





Wednesday, August 26, 2020

Belajar Javascript/Jquery Part 4 Menciptakan Efek Visual

Assalamualaikum Wr, Wb
Topiknya masih seputar jquery ya, Sedikit Pengantar
Jquery bisa dipakai untuk memberi efek visual. Contoh, untuk menggeser beberapa elemen bisa kesamping, keatas, kebawah untuk contoh kita akan menggeser elemen keatas. kodenya seperti dibawah ini:

Kode Menggeser elemen ke atas

$("#atas").slideUp("slow");

Kode Menggeser elemen ke bawah

$("#bawah").slideDown("slow");

Yok langsung saja kita prakter
Persiapan
  • Buka Text editor untuk menulis Halaman Web
  • Buat File index.html
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
       function geserAtas(){
           $("#pertama").slideUp("slow");
       }
       function geserBawah(){
           $("#pertama").slideDown("slow");
       }
    </script>
</head>
<body>
    <center>
    <h1>Menggeser Elemen Paragraf keatas dan kebawah </h1>
    <div>
        <p id="pertama">Paragraf 1</p>
        <p>Paragraf 2</p>
        <p>Paragraf 3</p>
        <p>Paragraf 4</p>
    </div>
    <p>Ini Paragraf 5</p>
    <form>
        <input type="button" value="Geser Keatas" onclick="geserAtas()">
        <input type="button" value="Geser Kebawah" onclick="geserBawah()">
    </form>
    </center>
</body>
</html>

Simpan dan jalankan file index.html dibrowser temen temen klik tombol geserkeatas otomatis paragraf pertama akan hilang, dan untuk menampilkannya klik tombol geserkebawah. lebih jelasnya serperti gambar dibawah ini

Gambar ketika paragraf diklik geserkeatas
Gambar ketikaa paragraf diklik geserkebawah
Gimana? mudah ya, cukup itu dulu dan semoga bermanfaat

Thursday, August 20, 2020

Belajar Javascript/Jquery Part 3 Menampilkan dan Menyembunyikan Eleman Halaman

Assalamualaikum Wr,wb
Jquery dapat menampilkan dan menyembunyikan elemen-elemen halaman dengan mudah. menyembunyikan sebuah elemen halaman dengan fungsi hide(), yang digunakan dengan sebuah selektor seperti ini:
$('p:first').hide();
dan untuk menampilkan sebuah elemen menggunakan fungsi show() contohnya seperti ini:
$('p:first').show();
Yuk langsung saja kita praktek
Pesiapan
  • Buka Text editor untuk menulis Halaman Web
  • Buat File index.html
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        function sembunyikan(){
            $('p:first').hide();
        }
        function tampilkan(){
            $('p:first').show();
        }
    </script>
</head>
<body>
    <center>
    <h1>Menyembuyikan dan Menampilkan Elemen Paragraf</h1>
    <div>
        <p>Paragraf 1</p>
        <p>Paragraf 2</p>
        <p>Paragraf 3</p>
        <p>Paragraf 4</p>
    </div>
    <form>
        <input type="button" value="Sembuyikan" onclick="sembunyikan()">
        <input type="button" value="Tampilkan" onclick="tampilkan()">
    </form>
    </center>
</body>
</html>
Simpan file kemudian buka project dibrowser klik tombol sembunyikan, akan terlihat paragraf pertama tidak tampil lagi, untuk menampilkan lagi tinggal klik tombol tampilkan. lebih jelasnya seperti gambar dibawah ini

gambar ketika paragraf tampil semua
gambar ketika paragraf disembunyikan

Mudahkan? oh iya javascript atau jquery biasanya digunakan untuk mempercantik tampilan website.

Belajar Javascript/Jquery Part2 Meyeleksi Beberapa element Halaman

Assalamualaikum Wr,Wb
Sesuai judul postingan kita akan belajar bagaimana cara menyeleksi beberapa element halaman sekaligus Ketika kita melewatkan sebuah selektor pada fungsi jquery(), atau fungsi $() itu artinya kita sudah menyeleksi sekumpulan elemen.
Pada contoh kali ini kita akan memakai elemen paragraf pada sebuah halaman menggunakan selektor "p", kalau di tulisa dalam jquery seperti ini $("p"). Selektor ini akan menghasilkan semua elemen paragraf. dan akan menghitung jumlah elemen paragraf dengan fungsi jquery size() dan menampilkanya pada kotak alert. yuk langsung praktek aja
Persiapan
  • Gunakan Editor seperti visual studio code, untuk membuat halaman web
  • Buat File baru dengan akhiran .HTML, disi saya mencontohkan dengan membuat file index.html
  • Panggil File jquery.js
  • Tambhkan kode jquery untuk menghitung jumlah paragraf
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript/Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <center>
    <h1>Menghitung Halaman Paragraf</h1>
    <div>
        <p>Ini Paragraf 1</p>
        <p>Ini Paragraf 2</p>
        <p>Ini Paragraf 3</p>
        <p>Ini Paragraf 4</p>
    </div>
    <form>
        <input type="button" value="Hitung Paragraf" onclick="hitung()">
    </form>
    </center>
</body>
</html>

File jquery.js CDN
 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

kode untuk menghitung jumlah paragraf

<script>
    function hitung(){
        alert("Ada Sebanyak " + $("p").size() + " Paragraf");
    }
</script>

Taruh kode jquery diantar tag HEAD, kemudian simpan dan dan panggil file index.html dibrowser, klik tombol hitung paragraf, nanti temen akan meliah sebuah kotak alert yang mengitung jumlah paragraf di halaman index.html, coba temen temen tambahkan jumlah paragraf lagi di file index, kemudian simpan, klik lagi tombol hitung paragraf, otomatis jumlah pargraf akan bertambah, Kurang Lebih Tampilanya seperti dibawah ini

Satu lagi Contoh untuk menyeleksi elemen dengan gaya style css. buka halaman index.html copy paste kode dibawah ini
File index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar Javascript/Jquery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        p.kedua{
            font-weight: bold;
        }
        p.diwarnai{
            background-color: red;
        }
    </style>
</head>
<body>
    <center>
    <h1>Menghitung Halaman Paragraf</h1>
    <div>
        <p>Ini Paragraf 1</p>
        <p class="kedua">Ini Paragraf 2</p>
        <p>Ini Paragraf 3</p>
        <p>Ini Paragraf 4</p>
    </div>
    <form>
        <input type="button" value="Hitung Paragraf" onclick="hitung()">
        <input type="button" value="Warnai" onclick="warna()">
    </form>
    </center>
</body>
</html>


<script>
    function hitung(){
        alert("Ada Sebanyak " + $("p").size() + " Paragraf");
    }
    function warna(){
        $('p.kedua').toggleClass("diwarnai");
    }
</script>

Penambahakan Fungsi Jquery

<script>
    function hitung(){
        alert("Ada Sebanyak " + $("p").size() + " Paragraf");
    }
    function warna(){
        $('p.kedua').toggleClass("diwarnai");
    }
</script>

jangan lupa save dulu perubahan di file index.html, kemudian refresh browser temen temen, klik tombol warnai, kurang lebih tampilanya seperti dibawah ini
Sekian dulu, semoga bisa dipahami dan bermanfaat, InsaAllah Part belajar jquery akan terus diupdate

Wednesday, August 19, 2020

Membuat CRUD Dasar PHP dan MySQLi part 4

Assalamualaikum Wr,Wb
Melanjutkan Dari Postingan CRUD Part3, kali ini akan share bagaiman cara hapus data dari database MysQli, pastikan sudah mengikuti tahan dari seri CRUD part1 dan part3, karen postingan ini saling berkaitan, yuk langsung saja yah
Persiapan
  1. Sudah Mengikuti Seri CRUD part1, part2 dan part3
File File yang dibutuhkan
  1. File koneksi.php
  2. File index.php
  3. File aksi_crud.php
Buka file index.php kemudian tambahkan kode dibawah ini tepat di bawah menu Edit

 <a href='aksi_crud.php?id=$d[id]&act=hapus'>HAPUS</a>

Buka lagi file aksi_crud.php tambahkan kode dibawah ini

elseif($_GET['act'] == 'hapus'){
		
// menangkap data id yang dikirim dari url
$id  = $_GET['id'];
// query menghapus data dari databases
mysqli_query($konek, "DELETE FROM mahasiswa  where id='$id' ");

// mengalihkan halaman kembali ke awal
header('location:crud.php');
}

Coba perhatikan kode diatas, pertama tama kita tankap data id yang di kirim dengan GET kemudian ditampung di variabel $id, kemudian kita membuat query delete berdasarkan id yang telah di simpan di dalam variabel $id.
Coba buka kembali project crud di browser temen temen, kurang lebih akan tampil seperti gambar dibawah ini ada menu HAPUS tepat dibawah menu Edit
Gambar halaman index.php setelah ada penambahan menu hapus
Sekaran saya akan coba menghapus data mahasiswa dengan nama sutrisno dan hasil nya sekarang sutrisno berhasil terhapus, hasilnya seperti dibawah ini
Gambar Setelah menghapus data mahasiswa dengan nama sutrisno
Cukup Mudahkan temen temen, Akhirnya Seri Crud PHP dan MySQLi sudah selesai Semoga Bermanfaat, Next Postingan kita akan lanjut kan bagaimana integrasi tampilan Boostrap Dengan PHP dan Mysqli

Membuat CRUD Dasar PHP dan MySQLi part 3

Assalamualaikum Wr,Wb
Melanjutkan Dari Postingan CRUD Part2, kali ini akan share bagaiman cara update data dari database MysQli, pastikan sudah mengikuti tahan dari seri CRUD part1 dan part2, karen postingan ini saling berkaitan, yuk langsung saja yah.
Persiapan
  1. Sudah mengikuti Crud part1 dan part2
File File yang dibutuhkan
  1. File koneksi.php
  2. File index.php
  3. File edit_data.php
  4. File aksi_crud.php
File File diatas sebagian sudah dibahas, jika file sudah ada tinggal dibuka lagi untuk sedikit ditambahkan code untuk keperluan update data
File index.php

<!-- panggil file koneksi -->
<?php include "koneksi.php" ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar CRUD</title>
    <style>
        tr, th, td{
            padding: 10px;
        }
        th{
            background-color: indianred;
            color:#fff;
            font-size:large
        }
        h1{
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <center>
    <h1>Tampil Semua Mahasiswa</h1>

    <!-- code untuk memanggil form tambah data -->
    <div style="margin-left:650px"><h3><a href="tambah_data.php">Tambah Data</a></h3></div>

    <table border="1px solid">
        <tr>
            <th>No</th>
            <th>NPM</th>
            <th>Nama Mahasiswa</th>
            <th>Program Studi</th>
            <th>Tanggal Lulus</th>
            <th>Nomor Ijazah</th>
            <th>IPK</th>
            <th>AKSI</th> // kode baru
        </tr>
        <?php
        $sql = mysqli_query($konek, "SELECT * FROM mahasiswa ORDER BY id ASC");
        $no = 1;
        while ($d = mysqli_fetch_array($sql)) {
            echo "<tr>
                        <td width='40px' align='center'>$no</td>
                        <td>$d[npm]</td>
                        <td>$d[nama_mhs]</td>
                        <td>$d[prodi]</td>
                        <td>$d[tgl_lulus]</td>
                        <td>$d[no_ijazah]</td>
                        <td>$d[ipk]</td>

                        <td>
                            <a href='edit_data.php?id=$d[id]'>EDIT</a> 
                        </td>
                    </tr>";
            $no++;
        }
        ?>
    </table>
    </center>
</body>
</html>

Perhatikan code di atas, ada penambahan code baru untuk kebutuhan menu edit lebih jelasnya seperti dibawah ini

 <td>
    <a href='edit_data.php?id=$d[id]'>EDIT</a> 
</td>

File edit_data.php

<?php
    include "koneksi.php";
    $id =  $_GET['id'];
    $sql = mysqli_query($konek, "SELECT * FROM mahasiswa where id = '$id'");
    $row = mysqli_fetch_array($sql);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Data</title>
    <style>
        table,tr,th,td{
            width: 400px;
            padding: 3px;
        }
    </style>
</head>
<body>
<center>
    <h1>Edit Data Mahasiswa</h1>
    <form method="post" action="aksi_crud.php?act=edit">
        <table class="table">
            <input type="hidden" name="id" value="<?php echo $row['id'] ?>">
            <tr>
                <td>NPM</td>
                <td>
                    <input type="text" name="npm" value="<?php echo $row['npm'] ?>" />
                </td>
            </tr>

            <tr>
                <td>Nama Mahasiswa</td>
                <td>
                     <input type="text" name="nama" value="<?php echo $row['nama_mhs'] ?>" />
                </td>
            </tr>

            <tr>
                <td>Program Studi</td>
                <td>
                    <select name="prodi">
                        <option value="Teknik Informatika" <?php echo $row["prodi"] == "Teknik Informatika" ? "selected" : "" ?>>Teknik Informatika</option>
                        <option value="Sistem Informasi" <?php echo $row["prodi"] == "Sistem Informasi" ? "selected" : "" ?>>Sistem Informasi</option>
                        <option value="Teknik Komputer" <?php echo $row["prodi"] == "Teknik Komputer" ? "selected" : "" ?>>Teknik Komputer</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Tanggal Lulus</td>
                <td>
                   <input type="date" name="tgllulus" value="<?php echo $row['tgl_lulus'] ?>" />
                </td>
            </tr>

            <tr>
                <td>No. Ijazah</td>
                <td>
                   <input type="text" name="noijazah" value="<?php echo $row['no_ijazah'] ?>" />
                </td>
            </tr>

            <tr>
                <td>IPK</td>
                <td>
                    <input type="text" step="0.01" name="ipk" value="<?php echo $row['ipk'] ?>" />
                </td>
            </tr>

            <tr>
                <td></td>
                <td>
                    <input  type="submit" value="Simpan" />
                    <a  href="crud.php"><button>Kembali</button></a>
                </td>
            </tr>
        </table>
        </form>
</center>
</body>
</html>

File edit_data kurang lebihnya sama dengan form tambah data di mana hanya menambahkan value di setiap inputannya. untuk mendapatkan data berdasarkan id, tambahkan query seperti di bawah ini

<?php
    $id =  $_GET['id'];
    $sql = mysqli_query($konek, "SELECT * FROM mahasiswa where id = '$id'");
    $row = mysqli_fetch_array($sql);
?>
Query diatas untuk menampilkan value yang akan ditampilkan di form edit_data, dari tabel mahasiswa berdasarkan id
File aksi_crud.php

elseif($_GET['act'] == 'edit')
{
    //variabel dari elemen form
    $id     = $_POST['id'];
    $npm 	= $_POST['npm'];
    $nama 	= $_POST['nama'];
    $prodi  = $_POST['prodi'];
    $tgl	= $_POST['tgllulus'];
    $noijazah = $_POST['noijazah'];
    $ipk	= $_POST['ipk'];

    $query="UPDATE mahasiswa SET npm='$npm',nama_mhs='$nama',prodi='$prodi',tgl_lulus='$tgl', no_ijazah='$noijazah', ipk = '$ipk' where id='$id'";
    mysqli_query($konek, $query);
    header('location:crud.php');

} // akhir proses edit data

Untuk Proses update data kurang lebinya sama seperti tambah data hanya bedanya menambahkan where berdasarkan id mahasiswa, untuk query update data codenya seperti dibawah ini

$query="UPDATE mahasiswa SET npm='$npm',nama_mhs='$nama',prodi='$prodi',tgl_lulus='$tgl', no_ijazah='$noijazah', ipk = '$ipk' where id='$id'";
query diatas mennggunakan where id, id diambil dari berdasarkan form edit_data
Semoga temen temen paham dengan penjelansan yang memang kurang jelas ya,wkwk
Silahkan temen temen buka project crud dibrowser perhatikan nanti akan ada tambahan menu edit data
gambar setelah penambahan menu edit
Gambar form edit_data bila menu edit di klik
Bagaimana mudahkan? Next potingan akan membahas lanjutan dari crud hapus data Sekian dulu pembahansan dari edit data, dan semoga bermanfaat

Saturday, August 15, 2020

Membuat CRUD Dasar PHP dan MySQLi part 2

Assalamualaikum Wr, Wb
Melanjutkan Dari postingan CRUD part1, kali ini akan share bagaimana cara tambah data ke database MySQLi, yuk langsung saja
Persiapan
  1. Sudah Mengikuti CRUD Part 1
File File yang di butuhkan
  1. File koneksi.php
  2. File index.php
  3. File Form tambah_data.php
  4. File aksi_crud.php
File diatas sebagian sudah dibahas di part1, jika file sudah ada tinggal buka dan edit atau tambahkan beberapa code untuk keperluan tambah data
File index.php

<!-- panggil file koneksi -->
<?php include "koneksi.php" ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar CRUD</title>
    <style>
        tr, th, td{
            padding: 10px;
        }
        th{
            background-color: indianred;
            color:#fff;
            font-size:large
        }
        h1{
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <center>
    <h1>Tampil Semua Mahasiswa</h1>

    <!-- code untuk memanggil form tambah data -->
    <div style="margin-left:650px"><h3><a href="tambah_data.php">Tambah Data</a></h3></div>

    <table border="1px solid">
        <tr>
            <th>No</th>
            <th>NPM</th>
            <th>Nama Mahasiswa</th>
            <th>Program Studi</th>
            <th>Tanggal Lulus</th>
            <th>Nomor Ijazah</th>
            <th>IPK</th>
        </tr>
        <?php
        $sql = mysqli_query($konek, "SELECT * FROM mahasiswa ORDER BY id ASC");
        $no = 1;
        while ($d = mysqli_fetch_array($sql)) {
            echo "<tr>
                        <td width='40px' align='center'>$no</td>
                        <td>$d[npm]</td>
                        <td>$d[nama_mhs]</td>
                        <td>$d[prodi]</td>
                        <td>$d[tgl_lulus]</td>
                        <td>$d[no_ijazah]</td>
                        <td>$d[ipk]</td>
                    </tr>";
            $no++;
        }
        ?>
    </table>
    </center>
</body>
</html>


<div style="margin-left:650px"><h3><a href="tambah_data.php">Tambah Data</a></h3></div>

Perhatikan code diatas untuk memanggil file form tambah_data.php, untuk memanggil file menggunakan taq html
<a href=""></a>

File form tambah_data.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD Tambah Data</title>
</head>
<body>
<center>
<h1>Tambah Data Mahasiswa</h1>
<form method="post" action="aksi_crud.php?act=insert">
    <table class="table">
        <tr>
            <td width="160">NPM</td>
            <td><input class="form-control" type="text" name="npm" /></td>
        </tr>
        <tr>
            <td>Nama Mahasiswa</td>
            <td><input class="form-control" type="text" name="nama" />
            </td>
        </tr>
        <tr>
            <td>Program Studi</td>
            <td>
                <select name="prodi" class="form-control">
                    <option value="Teknik Informatika">Teknik Informatika</option>
                    <option value="Sistem Informasi">Sistem Informasi</option>
                    <option value="Teknik Komputer">Teknik Komputer</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Tanggal Lulus</td>
            <td><input class="form-control" type="date" name="tgllulus" /></td>
        </tr>
        <tr>
            <td>No. Ijazah</td>
            <td><input class="form-control" type="text" name="noijazah"  /></td>
        </tr>
        <tr>
            <td>IPK</td>
            <td><input class="form-control" type="number" step="0.01" name="ipk" /></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Simpan" />
                <button><a href="crud.php">Kembali</a></button>
            </td>
        </tr>
    </table>
</form>
</center>
</body>
</html>

Perhatikan code form dengan action="aksi_crud.php?act=insert" itu artinya aksi proses simpan data berada di file aksi_crud.php

File aksi_crud.php

<?php
// pemanggilan file koneksi.php
include "koneksi.php";

// jika ada get act
if(isset($_GET['act'])){

  //proses simpan data
  if($_GET['act']=='insert'){

      //variabel dari elemen form
      $npm 	= $_POST['npm'];
      $nama 	= $_POST['nama'];
      $prodi  = $_POST['prodi'];
      $tgl	= $_POST['tgllulus'];
      $noijazah = $_POST['noijazah'];
      $ipk	= $_POST['ipk'];

      // validasi isian form tambah data
      if($npm=='' || $nama=='' || $prodi=='' || $tgl=='' || $noijazah=='' || $ipk==''){
          header('location:tambah_data.php');
      }else{			
          //proses simpan data admin
          $simpan = mysqli_query($konek, "INSERT INTO mahasiswa(npm,nama_mhs,prodi,tgl_lulus,no_ijazah,ipk) 
                          VALUES ('$npm','$nama','$prodi','$tgl','$noijazah','$ipk')");

          if($simpan){
              header('location:crud.php');
          }else{
              header('location:crud.php');
          }
      }
  } // akhir proses simpan data
  else{
      header('location:crud.php');
  }
} // akhir get act
else{
	header('location:crud.php');
}
?>

Sedikit penjelasan form tambah data mengarahkan proses simpan data di file aksi_crud dengan kondisi jika act="insert" maka yang di jalankan adalah query dari simpan data ke database, nantinya fil aksi_crud juga bisa digunakan untuk proses edit_data.php dengan kondisi act="edit", tapi itu nanti saja dibahasnya sekalian prakter untuk edit data.

Di file aksi_crud ada validasi form inputan tidak boleh kosong, misal nama mahasiswa atau ipk tidak diisi maka validasai otomasi akan mengarahkan ke form tambah_data lagi

Coba Sekarang Jalankan Dibrowser temen temen dengan url localhot/nama_folder, dan akan tampil halaman list data mahasiswa kemudian ada menu navigasi untuk tambah data coba klik menu tambah data otomatis form tambah data akan tampil

Gambar list data mahasiswa

Gambar Form tambah data

Coba temen temen isi form tambah data kemudian klik simpan otomatis data akan tersimpan kedatabase dan halaman akan otomatis pindah ke halaman list data mahasiswa, bagaimana mudahkan? Next potingan akan membahas lanjutan dari crud edit data

Sekian Dulu ya semoga bermanfaat

Thursday, August 13, 2020

Membuat CRUD Dasar PHP dan MySQLi part 1

Assalamualaikum Wr, Wb
Sesuai Judul Postingan Kali ini akan share cara membuat crud dengan php dan mysqli
Tujuannya agar temen temen bisa membuat website yang dinamis, langsung saja ya
Persiapan
  1. Berdoa Dulu ya biar ilmunya nanti bermanfaat
  2. Laptop sudah tersinstall server seperti XAMPP untuk windows, cara install dan download xampp Disini
  3. laptop sudah terinstall text editor, kalau saya suka pakai visual studio code, silahkan download visual studio Disini
  4. Persiapkan juga cemilan atau kopi ya
File File yang dibutuhkan
  1. file koneksi.php
  2. file index.php
  3. file tambah_data.php
  4. file edit_data.php
  5. file hapus_data.php
  6. Buat Database db_crud dan buat tabel mahasiswa
kode tabel mahasiswa

CREATE TABLE `mahasiswa` (
  `id` int(10) NOT NULL,
  `npm` varchar(10) DEFAULT NULL,
  `nama_mhs` varchar(40) DEFAULT NULL,
  `prodi` varchar(40) DEFAULT NULL,
  `tgl_lulus` date DEFAULT NULL,
  `no_ijazah` varchar(40) DEFAULT NULL,
  `ipk` decimal(3,2) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
File koneksi.php

<?php
//variabel koneksi
$konek = mysqli_connect("localhost","root","","db_crud");

if(!$konek){
	echo "Koneksi Database Gagal...!!!";
}
File index.php

<!-- panggil file koneksi -->
<?php include "koneksi.php" ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar CRUD</title>
</head>
<body>
    <h1>Tampil Semua Mahasiswa</h1>
    <table border="1px solid">
        <tr>
            <th>No</th>
            <th>NPM</th>
            <th>Nama Mahasiswa</th>
            <th>Program Studi</th>
            <th>Tanggal Lulus</th>
            <th>Nomor Ijazah</th>
            <th>IPK</th>
        </tr>
        <?php
        $sql = mysqli_query($konek, "SELECT * FROM mahasiswa ORDER BY id ASC");
        $no = 1;
        while ($d = mysqli_fetch_array($sql)) {
            echo "<tr>
                        <td width='40px' align='center'>$no</td>
                        <td>$d[npm]</td>
                        <td>$d[nama_mhs]</td>
                        <td>$d[prodi]</td>
                        <td>$d[tgl_lulus]</td>
                        <td>$d[no_ijazah]</td>
                        <td>$d[ipk]</td>
                    </tr>";
            $no++;
        }
        ?>
    </table>
</body>
</html>

Penjelasan Sedikit tentang kode diatas
pertama kita panggil file koneksi.php, code untuk memanggil file koneksi seperti dibawah ini
<!-- panggil file koneksi -->
<?php include "koneksi.php" ?>

kemudian kita buat query untuk menampilkan data dari tabel mahasiswa kode querynya seperti ini

 $sql = mysqli_query($konek, "SELECT * FROM mahasiswa ORDER BY id ASC");
variabel $konek di ambil dari file koneksi.php

kemudian untuk menampilkan data kita menggunakan perulangan while untuk kode perulangan wihile seperti dibawah ini

while ($d = mysqli_fetch_array($sql)) {
  echo "<tr>
              <td width='40px' align='center'>$no</td>
              <td>$d[npm]</td>
              <td>$d[nama_mhs]</td>
              <td>$d[prodi]</td>
              <td>$d[tgl_lulus]</td>
              <td>$d[no_ijazah]</td>
              <td>$d[ipk]</td>
          </tr>";
  $no++;
}

Jika sudah panggil dibrowser temen temen, kurang lebih hasil tampilanya seperti dibawah ini

Untuk Pemanis tampilan temen temen bisa menambakan code css, taruh diantara taq
<head></head>
Code cssnya

<style>
    tr, th, td{
        padding: 10px;
    }
    th{
        background-color: indianred;
        color:#fff;
        font-size:large;
    }
    h1{
        text-transform: uppercase;
    }
</style>

Next Postingan akan kita lannjutkaan bagaimana cara menambahkan data ke database

Tuesday, August 11, 2020

Cara Mudah Export Data Ke Excel Dari Database MySQLi

Assalamualaikum Wr, Wb
Sesuai Judul Postingan kali ini akan membahas cara export data ke excel, tujuannya untuk memudahkan jika ingin mencetak atau untuk laporan. langsung saja ya

Persiapan

  1. Buat file index.html
  2. Buat file export_excel.html
  3. Buat code untuk export data ke Excel
  4. Jalankan File diBrowser, tahukan cara untuk menjalankan dibrowser
File index.html
<html>
<head>
	<title>Export Data Ke Excel Dengan PHP</title>
    <style type="text/css">
	body{
		font-family: sans-serif;
	}
	table{
		margin: 20px auto;
		border-collapse: collapse;
        width: 50%;
	}
	table th,
	table td{
		border: 1px solid #3c3c3c;
		padding: 10px 8px;
        background-color: burlywood;
        text-align: center;
 
	}
	a{
		background-color: burlywood;
		color: #fff;
		padding: 8px 10px;
		text-decoration: none;
		border-radius: 2px;
	}
	</style>
</head>
<body>
<div style="text-align: center;">
	<div><h1>Export Data Ke Excel Dengan PHP</h1></div>
	<div><a target="_blank" href="export_excel.php">EXPORT KE EXCEL</a></div>
 </div>

	<table>
		<tr>
			<th>No</th>
			<th>Nama</th>
			<th>Alamat</th>
			<th>No.Telp</th>
		</tr>
		<tr>
			<td>1</td>
			<td>Sigit</td>
			<td>Kudus</td>
			<td>0829121223</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Joko</td>
			<td>Kudus</td>
			<td>08291212211</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Jimi</td>
			<td>Medan</td>
			<td>0829121223</td>
		</tr>
		<tr>
			<td>4</td>
			<td>Inok</td>
			<td>Kudus</td>
			<td>02133324344</td>
		</tr>
		<tr>
			<td>5</td>
			<td>Muhammad Ulil</td>
			<td>Kudus</td>
			<td>08231111223</td>
		</tr>
		<tr>
			<td>6</td>
			<td>Waloni</td>
			<td>Kudus</td>
			<td>027373733</td>
		</tr>
		<tr>
			<td>7</td>
			<td>Ferdian</td>
			<td>Kudus</td>
			<td>0829121223</td>
		</tr>
		<tr>
			<td>8</td>
			<td>Tanta</td>
			<td>Kudus</td>
			<td>23432423423</td>
		</tr>
		<tr>
			<td>9</td>
			<td>Eko Wibowo</td>
			<td>Kudus</td>
			<td>0829234233</td>
		</tr>
		<tr>
			<td>10</td>
			<td>Ari Untung</td>
			<td>Kudus</td>
			<td>0829239323</td>
		</tr>
	</table>
</body>
</html>
File export_excel.html

<html>
<head>
	<title>Export Data Ke Excel Dengan PHP</title>
    <style type="text/css">
	body{
		font-family: sans-serif;
	}
	table{
		margin: 20px auto;
		border-collapse: collapse;
        width: 50%;
	}
	table th,
	table td{
		border: 1px solid #3c3c3c;
		padding: 10px 8px;
        background-color: burlywood;
        text-align: center;
 
	}
	a{
		background-color: burlywood;
		color: #fff;
		padding: 8px 10px;
		text-decoration: none;
		border-radius: 2px;
	}
	</style>
</head>
<body>
<div style="text-align: center;">
	<div><h1>Export Data Ke Excel Dengan PHP</h1></div>
	<div><a target="_blank" href="export_excel.php">EXPORT KE EXCEL</a></div>
 </div>

	<!-- Kode untuk export data ke Exel -->
	<?php
	header("Content-type: application/vnd-ms-excel");
	header("Content-Disposition: attachment; filename=Data_pegawai.xls");
	?>


	<table>
		<tr>
			<th>No</th>
			<th>Nama</th>
			<th>Alamat</th>
			<th>No.Telp</th>
		</tr>
		<tr>
			<td>1</td>
			<td>Sigit</td>
			<td>Kudus</td>
			<td>0829121223</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Joko</td>
			<td>Kudus</td>
			<td>08291212211</td>
		</tr>
		<tr>
			<td>3</td>
			<td>Jimi</td>
			<td>Medan</td>
			<td>0829121223</td>
		</tr>
		<tr>
			<td>4</td>
			<td>Inok</td>
			<td>Kudus</td>
			<td>02133324344</td>
		</tr>
		<tr>
			<td>5</td>
			<td>Muhammad Ulil</td>
			<td>Kudus</td>
			<td>08231111223</td>
		</tr>
		<tr>
			<td>6</td>
			<td>Waloni</td>
			<td>Kudus</td>
			<td>027373733</td>
		</tr>
		<tr>
			<td>7</td>
			<td>Ferdian</td>
			<td>Kudus</td>
			<td>0829121223</td>
		</tr>
		<tr>
			<td>8</td>
			<td>Tanta</td>
			<td>Kudus</td>
			<td>23432423423</td>
		</tr>
		<tr>
			<td>9</td>
			<td>Eko Wibowo</td>
			<td>Kudus</td>
			<td>0829234233</td>
		</tr>
		<tr>
			<td>10</td>
			<td>Ari Untung</td>
			<td>Kudus</td>
			<td>0829239323</td>
		</tr>
	</table>
</body>
</html>
Code Untuk Export data Ke Excel

<?php
header("Content-type: application/vnd-ms-excel");
header("Content-Disposition: attachment; filename=Data_pegawai.xls");
?>
Hasil Bila di jalankan di browser

Bagaimana untuk implementasi dengan mysqli? langsung saja

Persiapan
  1. Buat Database baru untuk nama bebas
  2. Buat Tabel tb_aset
  3. Buat folder project baru masukan folder kedalam folder xampp/htdocs
  4. Buat File Koneksi.php didalam folder project
  5. Includkan File koneksi.php ke folder index.php
  6. Buat File index.php didalam folder project
  7. Buat File export_excel.php didalam folder project
Code Tabel tb_aset

CREATE TABLE `tb_aset` (
  `id` int(11) NOT NULL,
  `kode_qr` varchar(10) NOT NULL,
  `nama` varchar(100) NOT NULL,
  `nama_barang` varchar(100) NOT NULL,
  `tgl_pakai` date NOT NULL,
  `kondisi` varchar(100) NOT NULL,
  `status` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
File koneksi.php

<?php
//sesuaikan dengan confiq database 
$konek = mysqli_connect("localhost","root","","db_anda");

if(!$konek){
	echo "Koneksi Database Gagal...!!!";
}
File index.php

<!-- memanggil file koneksi -->
<?php include "koneksi.php" ?>

<div><a target="_blank" href="export_excel.php">EXPORT KE EXCEL</a></div>
<table class="table table-bordered table-striped " id="data">
    <tr>
        <th>No</th>
        <th>Nama Pegawai</th>
        <th>Nama Barang</th>
        <th>Status Pegawai</th>
        <th>Tanggal Pakai</th>
        <th>Kondisi</th>
    </tr>
    <?php

    $sql = mysqli_query($konek, "SELECT * FROM tb_aset");
    $no = 1;
    while ($d = mysqli_fetch_array($sql)) {
        echo "<tr>
            <td width='40px' align='center'>$no</td>
            <td><a href='data_aset.php?id=$d[id]&view=edit'>$d[nama]</a></td>
            <td>$d[nama_barang]</td>
            <td>$d[status]</td>
            <td>$d[tgl_pakai]</td>
            <td>$d[kondisi]</td>
        </tr>";
        $no++;
    }
    ?>
</table>
File export_excel.php

<?php
// memanggil file koneksi
include "koneksi.php";

// code untuk export ke excel
header("Content-type: application/vnd-ms-excel");
header("Content-Disposition: attachment; filename=Data_Pemakaiaset.xls");
?>

<table class="table table-bordered table-striped">
    <tr>
        <th>No</th>
        <th>Nama Pegawai</th>
        <th>Nama Barang</th>
        <th>Status Pegawai</th>
        <th>Tanggal Pakai</th>
        <th>Kondisi</th>
    </tr>
    <?php

    $sql = mysqli_query($konek, "SELECT * FROM tb_aset order by id asc");
    $no = 1;

    while ($d = mysqli_fetch_array($sql)) {
        echo "<tr>
                <td width='40px' align='center'>$no</td>
                <td>$d[nama]</td>
                <td>$d[nama_barang]</td>
                <td>$d[status]</td>
                <td>$d[tgl_pakai]</td>
                <td>$d[kondisi]</td>
            </tr>";
        $no++;
    }
    ?>
</table>

Silahkan Klik Button Export ke Excel, otomatis data akan terdonwload dengan format excel, Nah selesai sudah postingan cara export data ke excel, mudah bukan? sekian dulu ya mudahan mudahan bermanfaat 😀

Download Code Lengkapnya

Tuesday, August 4, 2020

Penggunaan Library WebCodeCamJS Berbasis Web

Webcodecam adalah plugin jquery untuk membaca Barcode Dan QR Code yang dibuat oleh seorang developer asal Huangria bernama Toth Andras, library ini memiliki beberapa keunggulan di antaranya:
  1. Sangat Mudah Digunakan
  2. Ada Bayak pengaturan untuk menampilkan hasil scan
  3. Penggunaannya yang mudah
  4. Suport dengan banyak browser
Alat alat yang diperlukan
  1. Download Library WebcodeCamJs
  2. Editor Untuk Menulis syntak, contoh : notepad atau Visual Studio Code
Implementasi Penggunaannya
  1. Buat Folder project baru misal latihan
  2. Buat folder assets didalam folder latihan, masukan library webcodecamjs yang sudah sobat download,reneme menjadi webcodecamjs
  3. buat file index.html didalam folder latihan
  4. Jalankan dibrowser, url: https://localhost/latihan
  5. persiapkan contoh qrcodenya untuk keperluan testing
Code file index.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>WebCodeCamJS</title>
        <link href="assets/webcodecamjs/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/webcodecamjs/css/style.css" rel="stylesheet">
    </head>
    <body>

        <div class="container" id="QR-Code">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="navbar-form navbar-left">
                        <h4>WebCodeCamJS.js Demonstration</h4>
                    </div>
                    <div class="navbar-form navbar-right">
                        <select class="form-control" id="camera-select"></select>
                        <div class="form-group">
                            <input id="image-url" type="text" class="form-control" placeholder="Image url">
                            <button title="Decode Image" class="btn btn-default btn-sm" id="decode-img" type="button" data-toggle="tooltip"><span class="glyphicon glyphicon-upload"></span></button>
                            <button title="Image shoot" class="btn btn-info btn-sm disabled" id="grab-img" type="button" data-toggle="tooltip"><span class="glyphicon glyphicon-picture"></span></button>
                            <button title="Play" class="btn btn-success btn-sm" id="play" type="button" data-toggle="tooltip"><span class="glyphicon glyphicon-play"></span></button>
                            <button title="Pause" class="btn btn-warning btn-sm" id="pause" type="button" data-toggle="tooltip"><span class="glyphicon glyphicon-pause"></span></button>
                            <button title="Stop streams" class="btn btn-danger btn-sm" id="stop" type="button" data-toggle="tooltip"><span class="glyphicon glyphicon-stop"></span></button>
                         </div>
                    </div>
                </div>
                <div class="panel-body text-center">
                    <div class="col-md-6">
                        <div class="well" style="position: relative;display: inline-block;">
                            <canvas width="320" height="240" id="webcodecam-canvas"></canvas>
                            <div class="scanner-laser laser-rightBottom" style="opacity: 0.5;"></div>
                            <div class="scanner-laser laser-rightTop" style="opacity: 0.5;"></div>
                            <div class="scanner-laser laser-leftBottom" style="opacity: 0.5;"></div>
                            <div class="scanner-laser laser-leftTop" style="opacity: 0.5;"></div>
                        </div>
                      
                    </div>
                    <div class="col-md-6">
                        <div class="thumbnail" id="result">
                            <div class="well" style="overflow: hidden;">
                                <img width="320" height="240" id="scanned-img" src="">
                            </div>
                            <div class="caption">
                                <h3>Scanned result</h3>
                                <p id="scanned-QR"></p>
                            </div>
                        </div>
                    </div>
                </div>
                
        <script type="text/javascript" src="assets/webcodecamjs/js/filereader.js"></script>
       
        <script type="text/javascript" src="assets/webcodecamjs/js/qrcodelib.js"></script>
        <script type="text/javascript" src="assets/webcodecamjs/js/webcodecamjs.js"></script>
        <script type="text/javascript" src="assets/webcodecamjs/js/main.js"></script>
    </body>
</html>

Hasil Dari Code Diatas


Untuk menjalankan scan klik tombol play di pojok kiri atas
Semoga Bermanfaat

Category