Rabu, 26 Agustus 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

Kamis, 20 Agustus 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

Rabu, 19 Agustus 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

Sabtu, 15 Agustus 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

Kamis, 13 Agustus 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

Selasa, 11 Agustus 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

Selasa, 04 Agustus 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

Senin, 03 Agustus 2020

Membuat Qrcode dengan library Ciqrcode

Assalamualaikum Sobat Semua, 

Postingan kali ini akan membuat qrcode dengan mengunakkan framework Codeigniter dan library Ciqrcode langsung saja ya sobat semua

Peralatan yang di butuhkan

  1. Download Framework Codeigniter versi 3 Download Disini
  2. Download Library Ciqrcode Download Disini
  3. Sudah Terinstall xampp Pengguna Windows

Implementasi Code

  1. extract folder framework codeigniter, kemudian rename menjadi qrcode, taruh di dalam folder xampp/htdocs
  2. Buat File Controller Qrcode di dalam folder controller
  3. Buat File Model qrcode_model didalam folder model
  4. Buat File Qrcode_view didalam folder view
  5. Buat Database misal mahasiswa
Catatan untuk folder controller, model dan view sudah di sediakan oleh framework codeigniter yang sudah sobat download

File Qrcode Controller, Copy Code dibawah

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

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

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

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

		$config['cacheable']	= true; //boolean, the default is true
		$config['cachedir']		= './assets/'; //string, the default is application/cache/
		$config['errorlog']		= './assets/'; //string, the default is application/logs/
		$config['imagedir']		= './assets/images/'; //direktori penyimpanan qr code
		$config['quality']		= true; //boolean, the default is true
		$config['size']			= '1024'; //interger, the default is 1024
		$config['black']		= array(224,255,255); // array, default is array(255,255,255)
		$config['white']		= array(70,130,180); // array, default is array(0,0,0)
		$this->ciqrcode->initialize($config);

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

		$params['data'] 	= $nim; //data yang akan di jadikan QR CODE
		$params['level'] 	= 'H'; //H=High
		$params['size'] 	= 10;
		$params['savename'] = FCPATH.$config['imagedir'].$image_name; //simpan image QR CODE ke folder assets/images/
		$this->ciqrcode->generate($params); // fungsi untuk generate QR CODE

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


File Qrcode_model, Copy Code dibawah


<?php
class Qrcode_model extends CI_Model{

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

}

File Qrcode_view, Copy Code dibawah


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

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

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

Buat Database db_qrku, buat tabel mahasiswa
Code Tabel mahasiswa


CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `nim` varchar(15) NOT NULL,
  `nama` varchar(50) DEFAULT NULL,
  `prodi` varchar(40) DEFAULT NULL,
  `qr_code` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`nim`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


INSERT INTO `mahasiswa` (`nim`, `nama`, `prodi`, `qr_code`) VALUES
('1210158', 'Sigit', 'Sistem Informasi', '1210158.png'),
('1210159', 'Joko', 'Manajemen Informatika', '1210159.png'),
('1210160', 'Andi', 'Sistem Komputer', '1210160.png');


Jika Sudah Buka Browser dan ketik url sesuai dengan nama folder sobat, contoh: localhost/qrcode

Kurang Lebih Hasilnya akan seperti ini


Mungkin Cukup Itu dulu dan semoga bermanfaat. Download Full Source Code

dipostingan selanjutnya nanti kita belajar edit dan hapus data

Kategori