ibarat.me

Membuat CRUD Checkbox Menggunakan PHP MySQL

2020-01-16T16:44:00.000-08:00

Selamat datang kembali di blog Mari belajar coding. Jika tutorial sebelumnya kita pernah membahas cara menyimpan data checkbox menggunakan PHP dan MySQL, tutorial kali ini kita akan belajar membuat sebuah aplikasi simple CRUD checkbox menggunakan PHP. Dalam artikel ini akan dibahas cara menyimpan data checkbox, edit data, hapus data serta menampilkan data yang telah berhasil disimpan.

Membuat CRUD Checkbox Menggunakan PHP MySQL

Pertama-tama kita buat database terlebih dahulu. Buat database akademik dan tabel siswa untuk menyimpan nama siswa dan hobi.

CREATE DATABASE  `akademik`;
USE `akademik`;
CREATE TABLE `siswa` (
`SiswaID` int(11) NOT NULL AUTO_INCREMENT,
`nama` varchar(255),
`hobi` varchar(255),
PRIMARY KEY (`SiswaID`)
);

Selanjutnya buat koneksi.php untuk menghubungkan aplikasi dengan database akademik.

<?php
  mysql_connect("localhost","root","");
  mysql_select_db("akademik");
 ?>

Buat file index.php untuk menampilkan data siswa yang berhasil disimpan kedalam tabel.

<?php
  include "koneksi.php";
?>
<!DOCTYPE html>
<html>
<head>
 <title>Mari Belajar Coding</title>
</head>
<body>
  <div align="center">
    <h3><b>Membuat CRUD Checkbox Menggunakan PHP MySQL<br>Maribelajarcoding.com </b></h3>

    <a href="formAdd.php">Tambah Data</a>
    <br><br>
     <!--menampilkan data di tabel-->
     <table border="1" width="700px">
      <tr>
       <th width="10%">No</th>
       <th width="35%">Nama</th>
       <th>Hobi</th>
       <th width="20%"></th>
      </tr>
      <?php
      $i=1;
      $sql=mysql_query("SELECT * FROM siswa");
      while ($data=mysql_fetch_array($sql)) {
      ?>
       <tr>
        <td><?=$i++;?></td>
        <td><?=$data['nama']?></td>
        <td><?=$data['hobi']?></td>
        <td><a href="formEdit.php?id=<?=$data['SiswaID']?>">Edit</a> || <a href="delete.php?id=<?=$data['SiswaID']?>">Hapus</a></td>
       </tr>
      <?php 
      }
      ?>  
     </table>
  </div>
</body>
</html>

Buat formAdd.php untuk membuat sebuah form simpan data.

<?php
  include "koneksi.php";
?>
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div align="center">
    <h3><b>Form Tambah Data</b></h3>
    <form method="POST">
      <table>
        <tr>
        <td width="60px" valign="top">Nama</td>
        <td valign="top"> 
         <input type="text" name="nama" id="nama">
        </td>
       </tr>
       <tr>
        <td width="60px" valign="top">Hobi</td>
        <td valign="top"> 
         <label><input type="checkbox" name="hobi[]" value="Nonton">Nonton</label><br>
         <label><input type="checkbox" name="hobi[]" value="Menulis">Menulis</label><br>
         <label><input type="checkbox" name="hobi[]" value="Traveling">Traveling</label><br>
         <label><input type="checkbox" name="hobi[]" value="Otomotif">Otomotif</label><br>
         <label><input type="checkbox" name="hobi[]" value="Fotografi">Fotografi</label><br>
         <label><input type="checkbox" name="hobi[]" value="Programming">Programming</label>
        </td>
       </tr>
       <tr>
        <td width="60px" valign="top"></td>
        <td valign="top"> 
         <input type="submit" name="simpan" value="Simpan">
         <a href="index.php">Kembali</a>
        </td>
       </tr>
      </table>
     </form>
      <?php
        if (isset($_POST['simpan'])) {
          $nama = $_POST['nama'];
          $hobi = implode(",", $_POST['hobi']);
          $query=mysql_query("INSERT INTO siswa(nama, hobi) VALUES('$nama','$hobi')");  
          if ($query) {
             header("location:index.php");
           } 
        }
       ?>
  </div>
</body>
</html>

Buat formEdit.php untuk menampilkan data edit pada form.

<?php
  include "koneksi.php";
?>
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div align="center">
    <h3><b>Form Edit Data</b></h3>
    <?php
    //menampilkan data siswa berdasarkan siswaID
      $siswaID=$_GET['id'];
      $sql=mysql_query("SELECT * FROM siswa WHERE SiswaID='$siswaID'");
      $data=mysql_fetch_array($sql);
      //data hobi dari tabel siswa 
      $datahobi=explode(',', $data['hobi']);
      
       
    ?>
    <form method="POST">
      <table>
        <tr>
        <td width="60px" valign="top">Nama</td>
        <td valign="top"> 
         <input type="text" name="nama" id="nama" value="<?=$data['nama']?>">
        </td>
       </tr>
       <tr>
        <td width="60px" valign="top">Hobi</td>
        <td valign="top"> 
         <label><input type="checkbox" name="hobi[]" value="Nonton" <?php if (in_array("Nonton", $datahobi)) echo "checked";?> >Nonton</label><br>
         <label><input type="checkbox" name="hobi[]" value="Menulis" <?php if (in_array("Menulis", $datahobi)) echo "checked";?> >Menulis</label><br>
         <label><input type="checkbox" name="hobi[]" value="Traveling" <?php if (in_array("Traveling", $datahobi)) echo "checked";?> >Traveling</label><br>
         <label><input type="checkbox" name="hobi[]" value="Otomotif" <?php if (in_array("Otomotif", $datahobi)) echo "checked";?> >Otomotif</label><br>
         <label><input type="checkbox" name="hobi[]" value="Fotografi" <?php if (in_array("Fotografi", $datahobi)) echo "checked";?> >Fotografi</label><br>
         <label><input type="checkbox" name="hobi[]" value="Programming" <?php if (in_array("Programming", $datahobi)) echo "checked";?>  >Programming</label>
        </td>
       </tr>
       <tr>
        <td width="60px" valign="top"></td>
        <td valign="top"> 
         <input type="submit" name="update" value="Update">
          <a href="index.php">Batal</a>
        </td>
       </tr>
      </table>
     </form>
      <?php
        if (isset($_POST['update'])) {
          $nama = $_POST['nama'];
          $hobi = implode(",", $_POST['hobi']);
          $query=mysql_query("UPDATE siswa SET nama='$nama', hobi='$hobi' WHERE SiswaID='$siswaID' ");  
          if ($query) {
             header("location:index.php");
           } 
        }
       ?>
  </div>
</body>
</html>

Keterangan:
Fungsi in_array di gunakan untuk mengecek apakah data value dari input checkbox ada didalam array hobi yang berasal dari database. Jika ada, maka inputan checkbox akan tercentang otomatis dengan menambahkan attribute checked.

Terakhir buat delete.php untuk menangani proses hapus data.

<?php
  include "koneksi.php";
  $siswaID=$_GET['id'];
  $query=mysql_query("DELETE FROM siswa WHERE SiswaID='$siswaID'");
  if ($query) {
   header("location:index.php");
  } 
?>

Tutorial membuat CRUD Checkbox Menggunakan PHP MySQL telah selesai. Semoga bermanfaat.

Source Code:

crud-checkbox.zip

Related Search:
Edit data checkbox PHP
Update data dengan checkbox PHP
Menampilkan checkbox tercentang dari database PHP
CRUD checkbox PHP

Membuat Fungsi Terbilang dengan PHP

2020-01-15T15:13:00.000-08:00

Selamat datang di blog Mari belajar coding. Saat kita membuat sebuah aplikasi, terkadang kita perlu menyebutkan nilai nominal sebuah angka atau nilai mata uang rupiah. Misalnya kita memiliki angka 1.324 maka penyebutan terbilangnya adalah seribu tiga ratus dua puluh empat. Pada tutorial kali ini kita akan belajar membuat sebuah fungsi terbilang dengan PHP untuk membantu dalam menyebutkan nilai nominal angka secara otomatis.

Membuat Fungsi Terbilang dengan PHP

Silahkan buka aplikasi editor yang biasa teman-teman gunakan, salin kode dibawah ini.

<?php

function kata($x) {
    $x = abs($x);
    $angka = array("", "satu", "dua", "tiga", "empat", "lima",
    "enam", "tujuh", "delapan", "sembilan", "sepuluh", "sebelas");
    $temp = "";
    if ($x <12) {
        $temp = " ". $angka[$x];
    } else if ($x <20) {
        $temp = kata($x - 10). " belas";
    } else if ($x <100) {
        $temp = kata($x/10)." puluh". kata($x % 10);
    } else if ($x <200) {
        $temp = " seratus" . kata($x - 100);
    } else if ($x <1000) {
        $temp = kata($x/100) . " ratus" . kata($x % 100);
    } else if ($x <2000) {
        $temp = " seribu" . kata($x - 1000);
    } else if ($x <1000000) {
        $temp = kata($x/1000) . " ribu" . kata($x % 1000);
    } else if ($x <1000000000) {
        $temp = kata($x/1000000) . " juta" . kata($x % 1000000);
    } else if ($x <1000000000000) {
        $temp = kata($x/1000000000) . " milyar" . kata(fmod($x,1000000000));
    } else if ($x <1000000000000000) {
        $temp = kata($x/1000000000000) . " trilyun" . kata(fmod($x,1000000000000));
    }     
        return $temp;
}

function terbilang($x, $style=3) {
    if($x<0) {
        $hasil = "minus ". trim(kata($x));
    } else {
        $hasil = trim(kata($x));
    }     
    switch ($style) {
        case 1:
            // mengubah semua karakter menjadi huruf besar
            $hasil = strtoupper($hasil);
            break;
        case 2:
            // mengubah karakter pertama dari setiap kata menjadi huruf besar
            $hasil = ucwords($hasil);
            break;
        case 3:
            // mengubah karakter pertama menjadi huruf besar
            $hasil = ucfirst($hasil);
            break;
    }     
    return $hasil;
}

//contoh penggunakan
$nilai="5392";
echo terbilang($nilai);
?>

Keterangan:
Untuk menggunakan fungsi terbilang, silahkan teman-teman panggil fungsi terbilang() dengan isi parameter nilai angka . contoh seperti di atas yang di beri highlight.

Hasil dari kode diatas seperti di gambar dibawah ini.

Teman-teman bisa mengubah karakter terbilang yang akan ditampilkan seperti menjadikan semua karakter huruf besar, karakter pertama dari setiap kata menjadi huruf besar atau karakter pertama saja menjadi huruf besar dengan mengganti isi parameter $style terbilang().
$style=1

$style=2

$style=3

Membuat Koneksi SQL Server dengan PHP

2020-01-14T05:42:00.000-08:00

Selamat datang di blog Mari belajar coding. Beberapa waktu yang lalu saya dapat projek membuat sebuah aplikasi yang kebetulan menggunakan bahasa pemrograman PHP dan SQL Server untuk databasenya. Koneksi antara PHP dan SQL Server ternyata perlu driver tambahan untuk menghubungkannya jika kita menggunakan Xampp. Pada tutorial kali ini saya akan sharing mengenai cara membuat koneksi SQL Server dengan PHP.

Membuat Koneksi SQL Server dengan PHP

Pertama-tama cek versi PHP yang teman-teman gunakan melalui php info http://localhost/dashboard/phpinfo.php, disini saya menggunakan PHP versi 5.6.

Setelah mengetahui versi PHP yang digunakan, kita download Driver SQL Servernya melalui link ini. microsoft.com/download. Terdapat beberapa pilihan seperti gambar dibawah ini. Silahkan sesuaikan versi PHP yang teman-teman gunakan, untuk pengguna PHP versi 5.6 seperti saya pilih SQLSRV32.EXE.

Ekstrak file SQLSRV32.EXE yang tadi di download. file hasil ekstrak seperti dibawah ini.

Pindahkan file hasil ekstrak tadi ke directory xampp/php/ext.

Edit php.ini yang berada pada directory xampp/php. Tambahkan extension sqlsrv sesuai versi PHP.

extension=php_pdo_sqlsrv_56_nts.dll
extension=php_pdo_sqlsrv_56_ts.dll
extension=php_sqlsrv_56_nts.dll
extension=php_sqlsrv_56_ts.dll

Untuk driver SQLSRV versi 3.2 dan 3.1 perlu menginstall juga Microsoft ODBC Driver 11. Sedangkan SQLSRV versi 3.0 memerlukan Microsoft SQL Server 2012 Native Client. Silahkan download dan install terlebih dahulu Microsoft ODBC Driver 11.

Baca juga Simpan Data SQL Server dengan PHP

Restart service apache melalui Xampp Control Panel. Untuk melihat apakah driver sudah terinstal, silahkan cek melalui PHP info, cari pdo_sqlsrv seperti gambar dibawah ini.

Terakhir kita buat koneksi antara PHP dengan SQL Server.

<?php
$serverName = "serverName\SQLEXPRESS"; 
$connectionInfo = array( "Database"=>"dbName", "UID"=>"userName", "PWD"=>"password");
$conn = sqlsrv_connect( $serverName, $connectionInfo);

if( $conn ) {
     echo "Connection established.<br />";
}else{
     echo "Connection could not be established.<br />";
     die( print_r( sqlsrv_errors(), true));
}?>

Simpan Data Multiple Combobox dengan Select2 dan PHP

2020-01-13T21:28:00.000-08:00

Selamat datang kembali di blog Mari belajar coding. Jika tutorial sebelumnya kita belajar bagaimana menyimpan data multiple checkbox menggunakan PHP. Tutorial kali ini kita akan belajar bagaimana menyimpan data multiple combobox atau select dropdown menggunakan PHP. Combobox merupakan komponen inputan yang digunakan untuk memilih salah satu kata atau kalimat dari list data yang telah di tentukan. Normalnya pengguna hanya dapat memilih satu dari beberapa list data yang di tampilkan, namun dengan menambahkan attribute multiple pengguna dapat memilih lebih dari satu pilihan.

Penggunaan multiple combobox html tidak terlalu nyaman menurut saya, karena Pengguna harus menekan tombol Ctrl atau Shift saat memilih beberapa data. Kita dapat menggunakan plugin Select2 untuk membantu mempermudah dalam memilih beberapa data combobox.

Contoh dibawah ini form combobox tanpa menggunakan plugin select2.

See the Pen Multiple Combobox by Singgih Saputro (@singgih-saputro) on CodePen.

Contoh form combobox menggunakan plugin select2.

See the Pen Multiple Combobox Select2 by Singgih Saputro (@singgih-saputro) on CodePen.

Simpan Data Multiple Combobox dengan Select2 dan PHP

Pertama-tama kita buat database terlebih dahulu untuk menyimpan data dari combobox yang telah dipilih oleh Pengguna. Contoh database yang akan kita gunakan yaitu data hobi. Buat database dan tabel hobi seperti dibawah ini.

CREATE DATABASE `hobi`;
USE `hobi`;
CREATE TABLE `hobi` (
`id_hobi` int(11) NOT NULL AUTO_INCREMENT,
`hobi` varchar(255),
PRIMARY KEY (`id_hobi`)
);

Selanjutnya buat form inputan seperti dibawah ini.

<form method="POST">
  <table>
   <tr>
    <td width="60px" valign="top">Hobi</td>
    <td valign="top"> 
     <select id="hobi" name="hobi[]" multiple="multiple" style="width:300px">
   <option value="Nonton">Nonton</option>
   <option value="Menulis">Menulis</option>
   <option value="Traveling">Traveling</option>
   <option value="Otomotif">Otomotif</option>
   <option value="Fotografi">Fotografi</option>
   <option value="Programming">Programming</option>
  </select>
    </td>
   </tr>
   <tr>
    <td width="60px" valign="top"></td>
    <td valign="top"> 
     <input type="submit" name="simpan" value="Simpan">
    </td>
   </tr>
  </table>
 </form>

Keterangan:
Penggunaan atribute name pada inputan hobi menggunakan kurung siku karena data yang dipilih akan di eksekusi sebagai data array.

Tambahkan Jquery dan plugin select2 di antara tag head. Teman-teman bisa mengunduh plugin select2 di web resminya select2.org atau bisa mengakses langsung melalui cdn seperit dibawah ini.

<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/i18n/id.js" type="text/javascript"></script>

Konfigurasi Combobox dengan plugin select2.

<script type="text/javascript">
 $(document).ready(function() {
     $('#hobi').select2({
      placeholder: "Pilih Hobi",
   allowClear: true,
   language: "id"
     });
 });
</script>

Buat koneksi database dan proses simpan data.

<?php
  //koneksi kedatabase
   mysql_connect("localhost","root","");
   mysql_select_db("hobi");
 
 //proses simpan data
 if (isset($_POST['simpan'])) {

  //perulangan data array dari inputan combobox
  foreach ($_POST['hobi'] as $value) {
   mysql_query("INSERT into hobi(hobi) VALUES('".$value."')");
  }
 }
 ?>

Kode lengkapnya seperti dibawah ini, simpan kode berikut ini dengan nama file latihan1.php.

<!DOCTYPE html>
<html>
<head>
 <title>Maribelajarcoding.com</title>
 <script
 src="https://code.jquery.com/jquery-3.4.1.min.js"
 integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
 crossorigin="anonymous"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/i18n/id.js" type="text/javascript"></script>

 <script type="text/javascript">
  $(document).ready(function() {
      $('#hobi').select2({
       placeholder: "Pilih Hobi",
    allowClear: true,
    language: "id"
      });
  });
 </script>
</head>

<body>
 <div align="center">
  <h3>Simpan Data Multiple Select Dropdown dengan Plugin Select2</h3>
  <h4>maribelajarcoding.com</h4>
  <form method="POST">
    <table>
     <tr>
      <td width="60px" valign="top">Hobi</td>
      <td valign="top"> 
       <select id="hobi" name="hobi[]" multiple="multiple" style="width:300px">
     <option value="Nonton">Nonton</option>
     <option value="Menulis">Menulis</option>
     <option value="Traveling">Traveling</option>
     <option value="Otomotif">Otomotif</option>
     <option value="Fotografi">Fotografi</option>
     <option value="Programming">Programming</option>
    </select>
      </td>
     </tr>
     <tr>
      <td width="60px" valign="top"></td>
      <td valign="top"> 
       <input type="submit" name="simpan" value="Simpan">
      </td>
     </tr>
    </table>
   </form>
  <?php
   //koneksi kedatabase
   mysql_connect("localhost","root","");
   mysql_select_db("hobi");

  //proses simpan data
  if (isset($_POST['simpan'])) {

   //perulangan data array dari inputan combobox
   foreach ($_POST['hobi'] as $value) {
    mysql_query("INSERT into hobi(hobi) VALUES('".$value."')");
   }
  }
  ?>

   <table border="1" width="500px">
    <tr>
     <th width="10%">No</th>
     <th>Hobi</th>
    </tr>
    <?php
    $i=1;
    $sql=mysql_query("SELECT * FROM hobi");
    while ($data=mysql_fetch_array($sql)) {
    ?>
     <tr>
      <td><?=$i++;?></td>
      <td><?=$data['hobi']?></td>
     </tr>
    <?php 
    }
    ?>
   </table>
 </div>
</body>
</html>

Kita dapat menyimpan multiple data combobox dalam satu baris data di database seperti gambar dibawah ini dengan mengubah proses simpan data. Buat file latihan2.php

Latihan2.php

<!DOCTYPE html>
<html>
<head>
 <title>Maribelajarcoding.com</title>
 <script
 src="https://code.jquery.com/jquery-3.4.1.min.js"
 integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
 crossorigin="anonymous"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/i18n/id.js" type="text/javascript"></script>

 <script type="text/javascript">
  $(document).ready(function() {
      $('#hobi').select2({
       placeholder: "Pilih Hobi",
    allowClear: true,
    language: "id"
      });
  });
 </script>
</head>

<body>
 <div align="center">
  <h3>Simpan Data Multiple Select Dropdown dengan Plugin Select2</h3>
  <h4>maribelajarcoding.com</h4>
  <form method="POST">
    <table>
     <tr>
      <td width="60px" valign="top">Hobi</td>
      <td valign="top"> 
       <select id="hobi" name="hobi[]" multiple="multiple" style="width:300px">
     <option value="Nonton">Nonton</option>
     <option value="Menulis">Menulis</option>
     <option value="Traveling">Traveling</option>
     <option value="Otomotif">Otomotif</option>
     <option value="Fotografi">Fotografi</option>
     <option value="Programming">Programming</option>
    </select>
      </td>
     </tr>
     <tr>
      <td width="60px" valign="top"></td>
      <td valign="top"> 
       <input type="submit" name="simpan" value="Simpan">
      </td>
     </tr>
    </table>
   </form>
  <?php
   //koneksi kedatabase
   mysql_connect("localhost","root","");
   mysql_select_db("hobi");

  //proses simpan data
  if (isset($_POST['simpan'])) {

   $data = implode(",", $_POST['hobi']);
      mysql_query("INSERT into hobi(hobi) VALUES('".$data."')");   
  }
  ?>

   <table border="1" width="500px">
    <tr>
     <th width="10%">No</th>
     <th>Hobi</th>
    </tr>
    <?php
    $i=1;
    $sql=mysql_query("SELECT * FROM hobi");
    while ($data=mysql_fetch_array($sql)) {
    ?>
     <tr>
      <td><?=$i++;?></td>
      <td><?=$data['hobi']?></td>
     </tr>
    <?php 
    }
    ?>
   </table>
 </div>
</body>
</html>

Tutorial simpan data multiple combobox dengan PHP telah selesai. Sekian, semoga bermanfaat.

Source Code:

multiselect.rar

Mengganti Icon Marker Google Maps API dengan Gambar

2020-01-12T21:33:00.000-08:00

Selamat datang kembali di blog Mari belajar coding. Jika tutorial sebelumnya kita pernah belajar mengganti icon marker Google Maps API menggunakan plugin Maps Icon, kali ini kita akan belajar mengganti icon marker dengan gambar yang telah kita siapkan terlebih dahulu. Penggunaan plugin maps icon sebenarnya lebih efisien karena tidak perlu menyiapkan gambar untuk mengganti icon marker, tetapi penggunaan gambar juga lebih bisa di sesuaikan sesuai kebutuhan. Kita juga bisa mendesain sendiri gambar atau icon apa yang akan di gunakan sebagai marker maps.

Untuk mengganti icon marker dengan gambar sebenarnya hanya menambah variabel icon. Lihat baris yang diberi highlight. Teman-teman bisa mengganti url atau alamat icon.


var marker = new google.maps.Marker({
    map: map,
    animation: google.maps.Animation.DROP,
    position: myLatlng,
    icon: 'https://img.icons8.com/officel/40/000000/marker.png'
});

Contoh lengkapnya seperti di bawah ini, ganti api key dengan api key teman-teman.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
   
      function initMap() {
        var mapCanvas = document.getElementById('map');      
        // Center maps
        var myLatlng = new google.maps.LatLng(-6.9902658,110.4229144);

        // Map Options    
        var mapOptions = {
          zoom: 12,
          center: myLatlng
        };
        
        // Create the Map
        map = new google.maps.Map(mapCanvas, mapOptions);

        var marker = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            position: myLatlng,
            icon: 'https://img.icons8.com/officel/40/000000/marker.png'
        });

        // To add the marker to the map, call setMap();
        marker.setMap(map);
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

Untuk menampilkan marker dari database, kita perlu menyiapkan database nya terlebih dahulu. Buat database db_maps, selanjutnya buat tabel Tempat untuk menyimpan data tempat dan koordinat lokasi. Buat satu tabel lagi untuk menyimpan data Tipe tempat. Tipe tempat ini yang akan menentukan icon apa yang akan ditampilkan sebagai marker.

CREATE DATABASE `db_maps`;
USE `db_maps`;

CREATE TABLE `tempat` (
`Id_Tempat` int(11) PRIMARY KEY NOT NULL,
`Nama_Tempat` varchar(255),
`Alamat` varchar(255),
`Id_Tipe` int(11),
`Lat` varchar(50),
`Lng` varchar(50)
);

CREATE TABLE `tipe` (
`Id_Tipe` int(11) PRIMARY KEY NOT NULL,
`Tipe` varchar(50),
`Image_Path` varchar(255)
);

Insert data kedalam tabel tempat dan tipe.

INSERT INTO `tempat` (`Id_Tempat`, `Nama_Tempat`, `Alamat`, `Id_Tipe`, `Lat`, `Lng`) VALUES
(1, 'Paragon City Mall Semarang', 'Jl. Pemuda No.118, Sekayu, Kec. Semarang Tengah, Kota Semarang, Jawa Tengah 50132', 1, '-6.9788825', '110.4136937'),
(2, 'Achmad Yani International Airport', 'Tambakharjo, Kec. Semarang Bar., Kota Semarang, Jawa Tengah 50149', 2, '-6.9663401', '110.3728004'),
(3, 'Lawang Sewu', 'Jl. Pemuda, Sekayu, Kec. Semarang Tengah, Kota Semarang, Jawa Tengah 50132', 3, '-6.9839838', '110.4097825');


INSERT INTO `tipe` (`Id_Tipe`, `Tipe`, `Image_Path`) VALUES
(1, 'Shop', 'icon/shopping-pin.png'),
(2, 'Airport', 'icon/airport-pin.png'),
(3, 'Building', 'icon/building-pin.png');

Setelah database dibuat dan insert data kedalam tabel. Selanjutnya kita akan membuat sebuah JSON data tempat dengan PHP. data-maps.php

<?php

 header('Content-Type: application/json; charset=utf8');
 
 $con = mysqli_connect("localhost","root","","db_maps");

 //query untuk menampilkan data maps dan icon image
 $sql="SELECT
   tempat.Id_Tempat,
   tempat.Nama_Tempat,
   tempat.Alamat,
   tempat.Lat,
   tempat.Lng,
   tipe.Tipe,
   tipe.Image_Path
  FROM
   tempat
   LEFT JOIN tipe ON tempat.Id_Tipe=tipe.Id_Tipe";

 $query=mysqli_query($con, $sql);

 $array=array();
 while($data=mysqli_fetch_assoc($query)) $array[]=$data; 
 
 echo json_encode($array);
?>

Buat file latihan.php untuk menampikan maps beserta markernya.

<!DOCTYPE html>
<html>
  <head>
    <title>maribelajarcoding.com</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>  
     <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <div align="center">
      <a href="https://www.maribelajarcoding.com" target="_blank">maribelajarcoding.com</a>
    </div>
     <script>
        function initMap() {
       
        var mapCanvas = document.getElementById('map');      
        // Center maps
        var myLatlng = new google.maps.LatLng(-6.9902658,110.4229144);
        // Map Options    
        var mapOptions = {
          zoom: 12,
          center: myLatlng
        };
        
        // Create the Map
        map = new google.maps.Map(mapCanvas, mapOptions);

        var infoWindow = new google.maps.InfoWindow;

        //request data from data-maps.php
        $.getJSON( "data-maps.php", function( data ) {
          //parsing data json 
          $.each( data, function( i, item ) {

            //set point marker
            var point = new google.maps.LatLng(
                        parseFloat(item.Lat),
                        parseFloat(item.Lng));

            //create pop up info header
            var infowincontent = document.createElement('div');
            var strong = document.createElement('strong');
            strong.textContent = item.Nama_Tempat;
            infowincontent.appendChild(strong);
            
            infowincontent.appendChild(document.createElement('br'));

            //create pop up info content
            var text = document.createElement('text');
            text.textContent = item.Alamat
            infowincontent.appendChild(text);

            //marker option
            var marker = new google.maps.Marker({
                map: map,
                animation: google.maps.Animation.DROP,
                position: point,
                icon: item.Image_Path
            });

            //popup info 
            marker.addListener('click', function() {
              infoWindow.setContent(infowincontent);
              infoWindow.open(map, marker);
            });

          });
          
        });
        }
    </script>

  </body>
</html>

Ganti your api key dengan api google maps teman-teman, pastikan terkoneksi dengan internet untuk request data Google Maps.

Source Code:

MapsIconImage.zip

Membuat Pagination dengan PHP dan Mysql

2020-01-11T04:27:00.000-08:00

Selamat datang kembali di blog Mari belajar coding. Jika tutorial sebelumnya kita pernah membuat pagination dengan PHP dan Plugin Datatables, kali ini kita akan membuat sebuah pagination dengan coding secara manual. Sebenarnya menggunakan plugin Datatables untuk menampilkan data dalam sebuah tabel lebih efisien, karena kita hanya memanggil fungsi datatables. Pagination, shorting, export data dan sebagainya telah di buat otomatis. Pagination merupakan sebuah cara untuk menampilkan data dalam beberapa halaman.

Membuat Pagination dengan PHP dan Mysql

Pertama-tama kita buat databasenya untuk menampung data. Buat database akademik dengan tabel siswa.


CREATE DATABASE akademik;
USE akademik;

CREATE TABLE `siswa` (
`SiswaID` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`Nama` varchar(100),
`Alamat` text,
`JenisKelamin` varchar(50)
);

Insert data kedalam tabel siswa.


INSERT INTO `siswa` VALUES ('1', 'Ardin', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('2', 'Vita', 'Kudus', 'Perempuan');
INSERT INTO `siswa` VALUES ('3', 'Wisnu', 'Tegal', 'Laki-laki');
INSERT INTO `siswa` VALUES ('4', 'Angga', 'Rembang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('5', 'Dian', 'Wonosobo', 'Laki-laki');
INSERT INTO `siswa` VALUES ('6', 'Ali', 'Brebes', 'Laki-laki');
INSERT INTO `siswa` VALUES ('7', 'Nia', 'Pati', 'Perempuan');
INSERT INTO `siswa` VALUES ('8', 'Yudis', 'Salatiga', 'Laki-laki');
INSERT INTO `siswa` VALUES ('9', 'Iman', 'Surakarta', 'Laki-laki');
INSERT INTO `siswa` VALUES ('10', 'Yogi', 'Sleman', 'Laki-laki');
INSERT INTO `siswa` VALUES ('11', 'Rifki', 'Magelang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('12', 'Anisa', 'Wonosobo', 'Perempuan');
INSERT INTO `siswa` VALUES ('13', 'Rani', 'Rembang', 'Perempuan');
INSERT INTO `siswa` VALUES ('14', 'Rahmat', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('15', 'Ayu', 'Kudus', 'Perempuan');
INSERT INTO `siswa` VALUES ('16', 'Nabila', 'Sleman', 'Perempuan');
INSERT INTO `siswa` VALUES ('17', 'Heri', 'Pati', 'Laki-laki');
INSERT INTO `siswa` VALUES ('18', 'Nugroho', 'Magelang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('19', 'Farida', 'Salatiga', 'Perempuan');
INSERT INTO `siswa` VALUES ('20', 'Andri', 'Tegal', 'Laki-laki');
INSERT INTO `siswa` VALUES ('21', 'Andi', 'Surakarta', 'Laki-laki');
INSERT INTO `siswa` VALUES ('22', 'Handayani', 'Brebes', 'Perempuan');
INSERT INTO `siswa` VALUES ('23', 'Rendy', 'Semarang', 'Laki-laki');

Buat koneksi.php untuk menghubungkan aplikasi dengan database akademik.


<?php
 $host = "localhost"; 
 $username = "root"; 
 $password = ""; 
 $database = "akademik"; 
 $con = mysqli_connect($host, $username, $password, $database); 
?>

Buat tabel html untuk menampilkan data dari database. Data yang akan ditampilkan hanya lima data, untuk mengubah berapa data yang akan di tampilkan kedalam tabel, ganti value pada parameter data. Lihat baris yang diberi highlight. Query pada tabel siswa akan menggunakan limit untuk membatasi jumlah data yang akan ditampilkan. Contoh limit 0,5 akan menampilkan data mulai dari row pertama (0) pada tabel sebanyak lima data. Sedangkan limit 2, 5 akan menampilkan data mulai dari data ke tiga(2) dari tabel siswa sebanyak 5 data.


<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>No.</th>
      <th>Nama</th>
      <th>Alamat</th>
      <th>Jenis Kelamin</th>
    </tr>
  </thead>  
  <tbody>
    <?php
    include "koneksi.php";
    
    $page = (isset($_GET['page']))? (int) $_GET['page'] : 1;
    
    // Jumlah data per halaman
    $limit = 5;

    $limitStart = ($page - 1) * $limit;
              
    $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa LIMIT ".$limitStart.",".$limit);
    
    $no = $limitStart + 1;
    
    while($row = mysqli_fetch_array($SqlQuery)){ 
    ?>
      <tr>
        <td><?php echo $no++; ?></td>
        <td><?php echo $row['Nama']; ?></td>
        <td><?php echo $row['Alamat']; ?></td>
        <td><?php echo $row['JenisKelamin']; ?></td>
      </tr>
    <?php           
    }
    ?>
  </tbody>      
</table>

Buat button pagination, disini kita menggunakan class bootstrap.


<div align="right">
  <ul class="pagination">
    <?php
    // Jika page = 1, maka LinkPrev disable
    if($page == 1){ 
    ?>        
      <!-- link Previous Page disable --> 
      <li class="disabled"><a href="#">Previous</a></li>
    <?php
    }
    else{ 
      $LinkPrev = ($page > 1)? $page - 1 : 1;
    ?>
      <!-- link Previous Page --> 
      <li><a href="index.php?page=<?php echo $LinkPrev; ?>">Previous</a></li>
    <?php
      }
    ?>

    <?php
    $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa");        
    
    //Hitung semua jumlah data yang berada pada tabel Sisawa
    $JumlahData = mysqli_num_rows($SqlQuery);
    
    // Hitung jumlah halaman yang tersedia
    $jumlahPage = ceil($JumlahData / $limit); 
    
    // Jumlah link number 
    $jumlahNumber = 1; 

    // Untuk awal link number
    $startNumber = ($page > $jumlahNumber)? $page - $jumlahNumber : 1; 
    
    // Untuk akhir link number
    $endNumber = ($page < ($jumlahPage - $jumlahNumber))? $page + $jumlahNumber : $jumlahPage; 
    
    for($i = $startNumber; $i <= $endNumber; $i++){
      $linkActive = ($page == $i)? ' class="active"' : '';
    ?>
      <li<?php echo $linkActive; ?>><a href="index.php?page=<?php echo $i; ?>"><?php echo $i; ?></a></li>
    <?php
      }
    ?>
    
    <!-- link Next Page -->
    <?php       
    if($page == $jumlahPage){ 
    ?>
      <li class="disabled"><a href="#">Next</a></li>
    <?php
    }
    else{
      $linkNext = ($page < $jumlahPage)? $page + 1 : $jumlahPage;
    ?>
      <li><a href="index.php?page=<?php echo $linkNext; ?>">Next</a></li>
    <?php
    }
    ?>
  </ul>
</div>

Kode lengkap seperti dibawah ini, simpan dengan nama index.php


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Maribelajarcoding.com - Pagination dengan PHP dan Mysql</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- css bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">maribelajarcoding.com</a>
    </div>
  </div>
</nav>
  
<div class="container">
  <div align="center">
    <h3><b>Pagination PHP dan Mysql</b></h3>
    <h4><b>maribelajarcoding.com</b></h4>
  </div>
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>No.</th>
        <th>Nama</th>
        <th>Alamat</th>
        <th>Jenis Kelamin</th>
      </tr>
    </thead>  
    <tbody>
      <?php
      include "koneksi.php";
      
      $page = (isset($_GET['page']))? (int) $_GET['page'] : 1;
      
      // Jumlah data per halaman
      $limit = 5;

      $limitStart = ($page - 1) * $limit;
                
      $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa LIMIT ".$limitStart.",".$limit);
      
      $no = $limitStart + 1;
      
      while($row = mysqli_fetch_array($SqlQuery)){ 
      ?>
        <tr>
          <td><?php echo $no++; ?></td>
          <td><?php echo $row['Nama']; ?></td>
          <td><?php echo $row['Alamat']; ?></td>
          <td><?php echo $row['JenisKelamin']; ?></td>
        </tr>
      <?php           
      }
      ?>
    </tbody>      
  </table>
  <div align="right">
    <ul class="pagination">
      <?php
      // Jika page = 1, maka LinkPrev disable
      if($page == 1){ 
      ?>        
        <!-- link Previous Page disable --> 
        <li class="disabled"><a href="#">Previous</a></li>
      <?php
      }
      else{ 
        $LinkPrev = ($page > 1)? $page - 1 : 1;
      ?>
        <!-- link Previous Page --> 
        <li><a href="index.php?page=<?php echo $LinkPrev; ?>">Previous</a></li>
      <?php
        }
      ?>

      <?php
      $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa");        
      
      //Hitung semua jumlah data yang berada pada tabel Sisawa
      $JumlahData = mysqli_num_rows($SqlQuery);
      
      // Hitung jumlah halaman yang tersedia
      $jumlahPage = ceil($JumlahData / $limit); 
      
      // Jumlah link number 
      $jumlahNumber = 1; 

      // Untuk awal link number
      $startNumber = ($page > $jumlahNumber)? $page - $jumlahNumber : 1; 
      
      // Untuk akhir link number
      $endNumber = ($page < ($jumlahPage - $jumlahNumber))? $page + $jumlahNumber : $jumlahPage; 
      
      for($i = $startNumber; $i <= $endNumber; $i++){
        $linkActive = ($page == $i)? ' class="active"' : '';
      ?>
        <li<?php echo $linkActive; ?>><a href="index.php?page=<?php echo $i; ?>"><?php echo $i; ?></a></li>
      <?php
        }
      ?>
      
      <!-- link Next Page -->
      <?php       
      if($page == $jumlahPage){ 
      ?>
        <li class="disabled"><a href="#">Next</a></li>
      <?php
      }
      else{
        $linkNext = ($page < $jumlahPage)? $page + 1 : $jumlahPage;
      ?>
        <li><a href="index.php?page=<?php echo $linkNext; ?>">Next</a></li>
      <?php
      }
      ?>
    </ul>
  </div>
</div>

</body>
</html>

Tutorial membuat pagination dengan PHP mysql telah selesai. Sekian, semoga bermanfaat.

Membuat Pencarian(searching) dan Pagination dengan PHP

2020-01-10T10:13:00.000-08:00

Selamat datang kembali di blog Mari belajar coding. Tutorial kali ini kita akan belajar membuat sebuah form pencarian data dan pagination. Jika tutorial sebelumnya kita hanya membuat sebuah pagination untuk menampilkan data dalam beberapa halaman pada tabel, kali ini kita akan menambahkan kolom pencarian untuk mempermudah dalam mencari data berdasarkan kata kunci yang telah di inputkan.

Membuat Pencarian dan Pagination dengan PHP

Teman-teman bisa menggunakan database akademik yang pernah kita gunakan pada tutorial sebelumnya untuk membuat pagination dengan PHP dan Mysql atau buat baru seperti contoh dibawah ini.


CREATE DATABASE akademik;
USE akademik;

CREATE TABLE `siswa` (
`SiswaID` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`Nama` varchar(100),
`Alamat` text,
`JenisKelamin` varchar(50)
);

Inputkan data kedalam tabel siswa sebagai contoh data yang akan kita tampilkan nantinya.


INSERT INTO `siswa` VALUES ('1', 'Ardin', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('2', 'Vita', 'Semarang', 'Perempuan');
INSERT INTO `siswa` VALUES ('3', 'Wisnu', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('4', 'Angga', 'Rembang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('5', 'Dian', 'Wonosobo', 'Laki-laki');
INSERT INTO `siswa` VALUES ('6', 'Ali', 'Brebes', 'Laki-laki');
INSERT INTO `siswa` VALUES ('7', 'Nia', 'Pati', 'Perempuan');
INSERT INTO `siswa` VALUES ('8', 'Yudis', 'Salatiga', 'Laki-laki');
INSERT INTO `siswa` VALUES ('9', 'Iman', 'Surakarta', 'Laki-laki');
INSERT INTO `siswa` VALUES ('10', 'Yogi', 'Sleman', 'Laki-laki');
INSERT INTO `siswa` VALUES ('11', 'Rifki', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('12', 'Anisa', 'Wonosobo', 'Perempuan');
INSERT INTO `siswa` VALUES ('13', 'Rani', 'Rembang', 'Perempuan');
INSERT INTO `siswa` VALUES ('14', 'Rahmat', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('15', 'Ayu', 'Semarang', 'Perempuan');
INSERT INTO `siswa` VALUES ('16', 'Nabila', 'Sleman', 'Perempuan');
INSERT INTO `siswa` VALUES ('17', 'Heri', 'Pati', 'Laki-laki');
INSERT INTO `siswa` VALUES ('18', 'Nugroho', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('19', 'Farida', 'Salatiga', 'Perempuan');
INSERT INTO `siswa` VALUES ('20', 'Andri', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('21', 'Andi', 'Surakarta', 'Laki-laki');
INSERT INTO `siswa` VALUES ('22', 'Handayani', 'Semarang', 'Perempuan');
INSERT INTO `siswa` VALUES ('23', 'Rendy', 'Semarang', 'Laki-laki');

Setelah selesai membuat database akademik dan input datanya, selanjutnya kita buat file koneksi.php untuk menghubungkan antara aplikasi dengan database.


<?php
 $host = "localhost"; 
 $username = "root"; 
 $password = ""; 
 $database = "akademik"; 
 $con = mysqli_connect($host, $username, $password, $database); 
?>

Buat form untuk pencarian data, disini kita buat dua jenis pencarian yaitu pencarian berdasarkan nama dan alamat. Untuk formnya sendiri kita gunakan method Get bukan Post.


<form class="form-inline" >
  <div class="form-group">
    <select class="form-control" id="Kolom" name="Kolom" required="">
      <?php
        $kolom=(isset($_GET['Kolom']))? $_GET['Kolom'] : "";
      ?>
      <option value="Nama" <?php if ($kolom=="Nama") echo "selected"; ?>>Nama</option>
      <option value="Alamat" <?php if ($kolom=="Alamat") echo "selected";?>>Alamat</option>
    </select>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" id="KataKunci" name="KataKunci" placeholder="Kata kunci.." required="" value="<?php if (isset($_GET['KataKunci']))  echo $_GET['KataKunci']; ?>">
  </div>
  <button type="submit" class="btn btn-primary">Cari</button>
  <a href="index.php" class="btn btn-danger">Reset</a>
</form>

Buat sebuah tampilan data di tabel seperti contoh dibawah ini, variabel page digunakan untuk menampung data request page dari url, variabel kolom cari dan kolom kata kunci juga di gunakan untuk menampung data yang di peroleh dari url. Untuk menampilkan data dalam beberapa halaman, kita gunakan query limit pada sql.


<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>No.</th>
      <th>Nama</th>
      <th>Alamat</th>
      <th>Jenis Kelamin</th>
    </tr>
  </thead>  
  <tbody>
    <?php
    include "koneksi.php";
    
    $page = (isset($_GET['page']))? (int) $_GET['page'] : 1;
   
    $kolomCari=(isset($_GET['Kolom']))? $_GET['Kolom'] : "";
    
    $kolomKataKunci=(isset($_GET['KataKunci']))? $_GET['KataKunci'] : "";

    // Jumlah data per halaman
    $limit = 5;

    $limitStart = ($page - 1) * $limit;
    
    //kondisi jika parameter pencarian kosong
    if($kolomCari=="" && $kolomKataKunci==""){
      $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa LIMIT ".$limitStart.",".$limit);
    }else{
      //kondisi jika parameter kolom pencarian diisi
      $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa WHERE $kolomCari LIKE '%$kolomKataKunci%' LIMIT ".$limitStart.",".$limit);
    }
    
    $no = $limitStart + 1;
    
    while($row = mysqli_fetch_array($SqlQuery)){ 
    ?>
      <tr>
        <td><?php echo $no++; ?></td>
        <td><?php echo $row['Nama']; ?></td>
        <td><?php echo $row['Alamat']; ?></td>
        <td><?php echo $row['JenisKelamin']; ?></td>
      </tr>
    <?php           
    }
    ?>
  </tbody>      
</table>

Terakhir kita buat paginationnya, untuk mempercantik tampilan tabel dan pagination gunakan framework bootstrap.


<div align="right">
  <ul class="pagination">
    <?php
      // Jika page = 1, maka LinkPrev disable
      if($page == 1){ 
    ?>        
      <!-- link Previous Page disable --> 
      <li class="disabled"><a href="#">Previous</a></li>
    <?php
      }
      else{ 
        $LinkPrev = ($page > 1)? $page - 1 : 1;  

        if($kolomCari=="" && $kolomKataKunci==""){
        ?>
          <li><a href="index.php?page=<?php echo $LinkPrev; ?>">Previous</a></li>
     <?php     
        }else{
      ?> 
        <li><a href="index.php?Kolom=<?php echo $kolomCari;?>&KataKunci=<?php echo $kolomKataKunci;?>&page=<?php echo $LinkPrev;?>">Previous</a></li>
       <?php
         } 
      }
    ?>

    <?php
      //kondisi jika parameter pencarian kosong
      if($kolomCari=="" && $kolomKataKunci==""){
        $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa");
      }else{
        //kondisi jika parameter kolom pencarian diisi
        $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa WHERE $kolomCari LIKE '%$kolomKataKunci%'");
      }     
    
      //Hitung semua jumlah data yang berada pada tabel Sisawa
      $JumlahData = mysqli_num_rows($SqlQuery);
      
      // Hitung jumlah halaman yang tersedia
      $jumlahPage = ceil($JumlahData / $limit); 
      
      // Jumlah link number 
      $jumlahNumber = 1; 

      // Untuk awal link number
      $startNumber = ($page > $jumlahNumber)? $page - $jumlahNumber : 1; 
      
      // Untuk akhir link number
      $endNumber = ($page < ($jumlahPage - $jumlahNumber))? $page + $jumlahNumber : $jumlahPage; 
      
      for($i = $startNumber; $i <= $endNumber; $i++){
        $linkActive = ($page == $i)? ' class="active"' : '';

        if($kolomCari=="" && $kolomKataKunci==""){
    ?>
        <li<?php echo $linkActive; ?>><a href="index.php?page=<?php echo $i; ?>"><?php echo $i; ?></a></li>

    <?php
      }else{
        ?>
        <li<?php echo $linkActive; ?>><a href="index.php?Kolom=<?php echo $kolomCari;?>&KataKunci=<?php echo $kolomKataKunci;?>&page=<?php echo $i; ?>"><?php echo $i; ?></a></li>
        <?php
      }
    }
    ?>
    
    <!-- link Next Page -->
    <?php       
     if($page == $jumlahPage){ 
    ?>
      <li class="disabled"><a href="#">Next</a></li>
    <?php
    }
    else{
      $linkNext = ($page < $jumlahPage)? $page + 1 : $jumlahPage;
     if($kolomCari=="" && $kolomKataKunci==""){
        ?>
          <li><a href="index.php?page=<?php echo $linkNext; ?>">Next</a></li>
     <?php     
        }else{
      ?> 
         <li><a href="index.php?Kolom=<?php echo $kolomCari;?>&KataKunci=<?php echo $kolomKataKunci;?>&page=<?php echo $linkNext; ?>">Next</a></li>
    <?php
      }
    }
    ?>
  </ul>
</div>

Kode lengkapnya seperti ini, simpan dengan nama file index.php


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Maribelajarcoding.com - Pagination dengan PHP dan Mysql</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- css bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">maribelajarcoding.com</a>
    </div>
  </div>
</nav>
  
<div class="container">
  <div align="center">
    <h3><b>Pencarian dan Pagination PHP</b></h3>
    <h4><b>maribelajarcoding.com</b></h4>
  </div>
  <!--Panel Form pencarian -->
  <div class="row">
    <div class="col-md-5">
      <div class="panel panel-default">
        <div class="panel-heading"><b>Pencarian</b></div>
        <div class="panel-body">
          <form class="form-inline" >
            <div class="form-group">
              <select class="form-control" id="Kolom" name="Kolom" required="">
                <?php
                  $kolom=(isset($_GET['Kolom']))? $_GET['Kolom'] : "";
                ?>
                <option value="Nama" <?php if ($kolom=="Nama") echo "selected"; ?>>Nama</option>
                <option value="Alamat" <?php if ($kolom=="Alamat") echo "selected";?>>Alamat</option>
              </select>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" id="KataKunci" name="KataKunci" placeholder="Kata kunci.." required="" value="<?php if (isset($_GET['KataKunci']))  echo $_GET['KataKunci']; ?>">
            </div>
            <button type="submit" class="btn btn-primary">Cari</button>
            <a href="index.php" class="btn btn-danger">Reset</a>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- Tabel data Siswa -->
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>No.</th>
        <th>Nama</th>
        <th>Alamat</th>
        <th>Jenis Kelamin</th>
      </tr>
    </thead>  
    <tbody>
      <?php
      include "koneksi.php";
     
      $page = (isset($_GET['page']))? (int) $_GET['page'] : 1;
      
      $kolomCari=(isset($_GET['Kolom']))? $_GET['Kolom'] : "";
     
      $kolomKataKunci=(isset($_GET['KataKunci']))? $_GET['KataKunci'] : "";

      // Jumlah data per halaman
      $limit = 5;

      $limitStart = ($page - 1) * $limit;
      
      //kondisi jika parameter pencarian kosong
      if($kolomCari=="" && $kolomKataKunci==""){
        $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa LIMIT ".$limitStart.",".$limit);
      }else{
        //kondisi jika parameter kolom pencarian diisi
        $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa WHERE $kolomCari LIKE '%$kolomKataKunci%' LIMIT ".$limitStart.",".$limit);
      }
      
      $no = $limitStart + 1;
      
      while($row = mysqli_fetch_array($SqlQuery)){ 
      ?>
        <tr>
          <td><?php echo $no++; ?></td>
          <td><?php echo $row['Nama']; ?></td>
          <td><?php echo $row['Alamat']; ?></td>
          <td><?php echo $row['JenisKelamin']; ?></td>
        </tr>
      <?php           
      }
      ?>
    </tbody>      
  </table>
  <div align="right">
    <ul class="pagination">
      <?php
        // Jika page = 1, maka LinkPrev disable
        if($page == 1){ 
      ?>        
        <!-- link Previous Page disable --> 
        <li class="disabled"><a href="#">Previous</a></li>
      <?php
        }
        else{ 
          $LinkPrev = ($page > 1)? $page - 1 : 1;  

          if($kolomCari=="" && $kolomKataKunci==""){
          ?>
            <li><a href="index.php?page=<?php echo $LinkPrev; ?>">Previous</a></li>
       <?php     
          }else{
        ?> 
          <li><a href="index.php?Kolom=<?php echo $kolomCari;?>&KataKunci=<?php echo $kolomKataKunci;?>&page=<?php echo $LinkPrev;?>">Previous</a></li>
         <?php
           } 
        }
      ?>

      <?php
        //kondisi jika parameter pencarian kosong
        if($kolomCari=="" && $kolomKataKunci==""){
          $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa");
        }else{
          //kondisi jika parameter kolom pencarian diisi
          $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa WHERE $kolomCari LIKE '%$kolomKataKunci%'");
        }     
      
        //Hitung semua jumlah data yang berada pada tabel Sisawa
        $JumlahData = mysqli_num_rows($SqlQuery);
        
        // Hitung jumlah halaman yang tersedia
        $jumlahPage = ceil($JumlahData / $limit); 
        
        // Jumlah link number 
        $jumlahNumber = 1; 

        // Untuk awal link number
        $startNumber = ($page > $jumlahNumber)? $page - $jumlahNumber : 1; 
        
        // Untuk akhir link number
        $endNumber = ($page < ($jumlahPage - $jumlahNumber))? $page + $jumlahNumber : $jumlahPage; 
        
        for($i = $startNumber; $i <= $endNumber; $i++){
          $linkActive = ($page == $i)? ' class="active"' : '';

          if($kolomCari=="" && $kolomKataKunci==""){
      ?>
          <li<?php echo $linkActive; ?>><a href="index.php?page=<?php echo $i; ?>"><?php echo $i; ?></a></li>

      <?php
        }else{
          ?>
          <li<?php echo $linkActive; ?>><a href="index.php?Kolom=<?php echo $kolomCari;?>&KataKunci=<?php echo $kolomKataKunci;?>&page=<?php echo $i; ?>"><?php echo $i; ?></a></li>
          <?php
        }
      }
      ?>
      
      <!-- link Next Page -->
      <?php       
       if($page == $jumlahPage){ 
      ?>
        <li class="disabled"><a href="#">Next</a></li>
      <?php
      }
      else{
        $linkNext = ($page < $jumlahPage)? $page + 1 : $jumlahPage;
       if($kolomCari=="" && $kolomKataKunci==""){
          ?>
            <li><a href="index.php?page=<?php echo $linkNext; ?>">Next</a></li>
       <?php     
          }else{
        ?> 
           <li><a href="index.php?Kolom=<?php echo $kolomCari;?>&KataKunci=<?php echo $kolomKataKunci;?>&page=<?php echo $linkNext; ?>">Next</a></li>
      <?php
        }
      }
      ?>
    </ul>
  </div>
</div>

</body>
</html>

Sebenarnya kita dapat menggunakan sebuah plugin untuk membuat searching dan pagination otomatis tanpa perlu menulis kode sendiri seperti diatas dengan menggunakan plugin datatables.

Baca juga Membuat Pagination dengan Plugin DataTables

Tutotial untuk membuat kolom pencarian data dan pagination denga PHP Mysql telah selesai. Sekian, semoga bermanfaat.

Source code:

searchingpagination.zip

Membuat Grafik Pie Persentase (%) dengan Chart.js dan PHP

2020-01-09T16:30:00.000-08:00

Selamat datang kembali di blog Mari belajar coding. Jika tutorial sebelumnya kita pernah membuat chart grafik berbentuk batang atau bar chart, tutorial kali ini kita akan belajar membuat sebuah grafik Pie dengan plugin Chart.js dan PHP Mysql. Pie Chart merupakan sebuah grafik untuk menyajikan data dalam bentuk lingkaran, kita juga dapat menyajikan data dalam bentuk donat(doughnut chart).

Membuat Grafik Pie Persentase (%) dengan Chart.js dan PHP

Pertama-tama buat database terlebih dahulu. Dalam tutorial ini kita akan menggunakan database penjualan dengan satu tabel produk.


CREATE DATABASE `penjualan`;
USE `penjualan`;

CREATE TABLE `produk` (
`IdProduk` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`NamaProduk` varchar(255),
`JmlItem` int(11)
);

Selanjutnya insert data ke dalam tabel produk.


INSERT INTO `produk` VALUES ('1', 'Elpiji 3 Kg', '187');
INSERT INTO `produk` VALUES ('2', 'Bright Gas 5.5 Kg', '105');
INSERT INTO `produk` VALUES ('3', 'Bright Gas 12 Kg', '24');
INSERT INTO `produk` VALUES ('4', 'Elpiji 12 Kg', '78');
INSERT INTO `produk` VALUES ('5', 'Ease Gas 9 Kg', '49');

Setelah database selesai di buat dan insert data kedalam tabel produk, selanjutnya kita akan membuat sebuah json data menggunakan PHP. Simpan kode dibawah ini dengan nama file data-produk.php.


<?php
 header('Content-Type: application/json; charset=utf8');
  
  //koneksi kedatabase penjualan
 $server = "localhost";
  $user = "root";
 $pass = "";
 $dbname = "penjualan";

 $koneksi = mysqli_connect($server,$user,$pass,$dbname);
 //query tabel produk
 $sql="SELECT * FROM produk";
 $query=mysqli_query($koneksi, $sql) or die(mysqli_error($koneksi));

 $array=array();
 while($data=mysqli_fetch_assoc($query)) $array[]=$data; 

 //mengubah data array menjadi format json
 echo json_encode($array);
?>

Tampilan data-produk.php dalam bentuk json jika di jalankan melalui browser seperti gambar di bawah ini.

Download Plugin Chart.js, Jquery dan framework Bootstrap, kemudian ekstrak hasil download tadi seperti gambar dibawah ini.

Untuk request data produk, kita bisa menggunakan fungsi getJSON, seperti dibawah ini.


$.getJSON( "http://localhost:/chart-pie/data-produk.php", function( data ) {

});

Parsing data Json untuk menampilkan data produk ke dalam tabel html dan membuat array untuk label serta data chart.js


var TabelData="";
$(data).each(function(i){ 
    TabelData +="<tr><td>"+data[i].NamaProduk+"</td><td>"+data[i].JmlItem+"</td></tr>"; 
});
//tampilkan di tabel id DataTabelProduk
$("#DatatTabelProduk").html(TabelData);

//array untuk chart label dan chart data
var isi_labels = [];
var isi_data=[];
var TotalJml = 0;
//menghitung total jumlah item
data.forEach(function (obj) {
    TotalJml += Number(obj["JmlItem"]);
});

//push ke dalam array isi label dan isi data
var JmlItem = 0;
$(data).each(function(i){         
    isi_labels.push(data[i].NamaProduk); 
    //jml item dalam persentase
    isi_data.push(((data[i].JmlItem/TotalJml) * 100).toFixed(2));
});

Konfigurasi Chart.js


//deklarasi chartjs untuk membuat grafik 2d di id mychart   
var ctx = document.getElementById('myChart').getContext('2d');

var myPieChart = new Chart(ctx, {
    //chart akan ditampilkan sebagai pie chart
    type: 'pie',
    data: {
        //membuat label chart
        labels: isi_labels,
        datasets: [{
            label: 'Data Produk',
            //isi chart
            data: isi_data,
            //membuat warna pada chart
            backgroundColor: [
                'rgb(26, 214, 13)',
                'rgb(235, 52, 110)',
                'rgb(52, 82, 235)',
                'rgb(138, 4, 113)',
                'rgb(214, 134, 13)'
            ],
            //borderWidth: 0, //this will hide border
        }]
    },
    options: {
        //konfigurasi tooltip
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var dataset = data.datasets[tooltipItem.datasetIndex];
                    var labels = data.labels[tooltipItem.index];
                    var currentValue = dataset.data[tooltipItem.index];
                    return labels+": "+currentValue+" %";
                }
            }
        }
      }
});

Untuk menampilkan data produk kedalam tabel dan chartjs nya, kita perlu membuat sebuah tabel dan canvas seperti kode dibawah ini.


<div class="row">
    <div class="col-md-5">
        <div class="panel panel-primary">
            <div class="panel-heading"><b>Data Produk</b></div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Nama Produk</th>
                            <th>Jml Item</th>
                        </tr>
                    </thead>
                    <tbody id="DatatTabelProduk">
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-7">
        <div class="panel panel-primary">
            <div class="panel-heading"><b>Grafik Data</b></div>
            <div class="panel-body">
                <canvas id="myChart"></canvas>
            </div>
        </div>
        
    </div>
</div>

Baca juga Membuat Grafik Grouping dengan Chartjs PHP dan Mysql

Kode lengkapnya seperti dibawah ini, simpan dengan nama file index.php.


<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding.com</title>
 <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="Chartjs/Chart.min.css">
 <script type="text/javascript" src="JQuery/jquery-3.4.1.min.js"></script>
 <script type="text/javascript" src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="Chartjs/Chart.min.js"> </script>
</head>
<body>
    <div class="container">
        <div class="page-header" align=" center">
            <h2 >Membuat Grafik Pie Persentase (%) dengan Chart.js dan PHP</h2>
            <h4>maribelajarcoding.com</h4> 
        </div>
        <div class="row">
            <div class="col-md-5">
                <div class="panel panel-primary">
                    <div class="panel-heading"><b>Data Produk</b></div>
                    <div class="panel-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Nama Produk</th>
                                    <th>Jml Item</th>
                                </tr>
                            </thead>
                            <tbody id="DatatTabelProduk">                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-7">
                <div class="panel panel-primary">
                    <div class="panel-heading"><b>Grafik Data</b></div>
                    <div class="panel-body">
                        <canvas id="myChart"></canvas>
                    </div>
                </div>                
            </div>
        </div>
    </div>
<script>
$.getJSON( "http://localhost:/chart-pie/data-produk.php", function( data ) {
    var TabelData="";
    $(data).each(function(i){ 
        TabelData +="<tr><td>"+data[i].NamaProduk+"</td><td>"+data[i].JmlItem+"</td></tr>"; 
    });
    //tampilkan di tabel id DataTabelProduk
    $("#DatatTabelProduk").html(TabelData);

    //array untuk chart label dan chart data
    var isi_labels = [];
    var isi_data=[];
    var TotalJml = 0;
    //menghitung total jumlah item
    data.forEach(function (obj) {
        TotalJml += Number(obj["JmlItem"]);
    });

    //push ke dalam array isi label dan isi data
    var JmlItem = 0;
    $(data).each(function(i){         
        isi_labels.push(data[i].NamaProduk); 
        //jml item dalam persentase
        isi_data.push(((data[i].JmlItem/TotalJml) * 100).toFixed(2));
    });

    //deklarasi chartjs untuk membuat grafik 2d di id mychart   
    var ctx = document.getElementById('myChart').getContext('2d');

    var myPieChart = new Chart(ctx, {
        //chart akan ditampilkan sebagai pie chart
        type: 'pie',
        data: {
            //membuat label chart
            labels: isi_labels,
            datasets: [{
                label: 'Data Produk',
                //isi chart
                data: isi_data,
                //membuat warna pada chart
                backgroundColor: [
                    'rgb(26, 214, 13)',
                    'rgb(235, 52, 110)',
                    'rgb(52, 82, 235)',
                    'rgb(138, 4, 113)',
                    'rgb(214, 134, 13)'
                ],
                //borderWidth: 0, //this will hide border
            }]
        },
        options: {
            //konfigurasi tooltip
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        var dataset = data.datasets[tooltipItem.datasetIndex];
                        var labels = data.labels[tooltipItem.index];
                        var currentValue = dataset.data[tooltipItem.index];
                        return labels+": "+currentValue+" %";
                    }
                }
            }
          }
    });
});
</script>
</body>
</html>

Tutorial membuat grafik Pie persentase dengan chart.js dan PHP telah selesai,sekian semoga bermanfaat.

Related search
Membuat grafik pie dengan PHP
Show percentages on Pie/Doughnut chart.js

CRUD PHP Ajax Sederhana

2020-01-08T19:07:00.000-08:00

Selamat datang di blog Mari belajar coding. Tutorial kali ini kita akan belajar membuat sebuah aplikasi web untuk menyimpan, mengedit, menghapus serta menampilkan data dari database atau yang lebih sering di kenal dengan istilah aplikasi crud menggunakan PHP dan Ajax jquery. Teknologi Ajax merupakan suatu teknik untuk melakukan pertukaran data antara client dan server di belakang layar, sehingga halaman web tidak harus dibaca ulang atau reload halaman setiap kali melakukan perubahan. Dalam tutorial ini kita akan belajar bagaimana cara mengkombinasikan antara PHP dan Ajax untuk membangun sebuah aplikasi website yang lebih interaktif tanpa reload halaman.

CRUD PHP Ajax Sederhana

Pertama-tama kita siapkan database nya terlebih dahulu. Dalam tutorial ini kita akan menggunakan database akademik dengan satu tabel bernama mahasiswa.


CREATE DATABASE `akademik`;
USE `akademik`;

CREATE TABLE `mahasiswa` (
`IdMhsw` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`Nama` varchar(150),
`JenisKelamin` varchar(20),
`Alamat` text,
`Agama` varchar(30),
`NoHp` varchar(15),
`Email` varchar(150)
);

Setelah database dibuat, selanjutnya buat file koneksi.php untuk menghubungkan aplikasi dengan database akademik.


<?php
 //koneksi ke database akademik
 $server = "localhost";
  $user = "root";
 $pass = "";
 $dbname = "akademik";

 $koneksi = mysqli_connect($server,$user,$pass,$dbname);
 if(mysqli_connect_errno()){
  echo "Koneksi database gagal".mysqli_connect_error();
 }
?>

Download library jquery untuk menggunakan fungsi ajax nya. Kemudian buat file index.php


<!DOCTYPE html>
<html>

<head>
    <title>Simple Crud Ajax</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            //load data mahasiswa saat aplikasi dijalankan 
            loadData();

            //Load form add
            $("#contentData").on("click", "#addButton", function() {
                $.ajax({
                    url: 'form-add.php',
                    type: 'get',
                    success: function(data) {
                        $('#contentData').html(data);
                    }
                });
            });

            //Load form edit dengan parameter IdMhsw
            $("#contentData").on("click", "#EditButton", function() {
                var IdMhsw = $(this).attr("value");
                $.ajax({
                    url: 'form-edit.php',
                    type: 'get',
                    data: {
                        IdMhsw: IdMhsw
                    },
                    success: function(data) {
                        $('#contentData').html(data);
                    }
                });
            });

            //button batal
            $("#contentData").on("click", "#cancelButton", function() {
                loadData();
            });

            //simpan data mahasiswa
            $("#contentData").on("submit", "#formAdd", function(e) {
                e.preventDefault();
                $.ajax({
                    url: 'service.php?action=save',
                    type: 'post',
                    data: $(this).serialize(),
                    success: function(data) {
                        alert(data);
                        loadData();
                    }
                });
            });

            //edit data mahasiswa
            $("#contentData").on("submit", "#formEdit", function(e) {
                e.preventDefault();
                $.ajax({
                    url: 'service.php?action=edit',
                    type: 'post',
                    data: $(this).serialize(),
                    success: function(data) {
                        alert(data);
                        loadData();
                    }
                });
            });

            //hapus data mahasiswa berdasarkan IdMhsw
            $("#contentData").on("click", "#DeleteButton", function() {
                var IdMhsw = $(this).attr("value");
                $.ajax({
                    url: 'service.php?action=delete',
                    type: 'post',
                    data: {
                        IdMhsw: IdMhsw
                    },
                    success: function(data) {
                        alert(data);
                        loadData();
                    }
                });
            });
        })

        function loadData() {
            $.ajax({
                url: 'data-mahasiswa.php',
                type: 'get',
                success: function(data) {
                    $('#contentData').html(data);
                }
            });
        }
    </script>
</head>

<body>
    <div align="center">
        <h2>Simple Crud Ajax dan PHP</h2>
        <div id="contentData"></div>
    </div>
</body>

</html>

Letakkan file index.php dan jquery dalam satu folder. Fungsi load data untuk menangani proses request data mahasiswa yang akan di tampilkan pada div contentData. Buat file data-mahasiwa.php seperti dibawah ini.


<button id="addButton" class="btn btn-primary">Tambah Data</button>
<br>
<br>
<table border="1">
    <thead>
        <tr>
            <th>No.</th>
            <th>Nama</th>
            <th>Jenis Kelamin</th>
            <th>Alamat</th>
            <th>Agama</th>
            <th>No. HP</th>
            <th>Email</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
        <?php
   include "koneksi.php";
   $no=1;
   $query=mysqli_query($koneksi, "SELECT * FROM Mahasiswa ORDER BY IdMhsw DESC") or die(mysqli_error($koneksi));
   while ($result=mysqli_fetch_array($query)) {
    ?>
            <tr>
                <td>
                    <?php echo $no++; ?>
                </td>
                <td>
                    <?php echo $result['Nama']; ?>
                </td>
                <td>
                    <?php echo $result['JenisKelamin']; ?>
                </td>
                <td>
                    <?php echo $result['Alamat']; ?>
                </td>
                <td>
                    <?php echo $result['Agama']; ?>
                </td>
                <td>
                    <?php echo $result['NoHp']; ?>
                </td>
                <td>
                    <?php echo $result['Email']; ?>
                </td>
                <td>
                    <button id="EditButton" value="<?php echo $result['IdMhsw']; ?>">Edit</button>
                    <button id="DeleteButton" value="<?php echo $result['IdMhsw']; ?>">Delete</button>
                </td>
            </tr>
            <?php
   }
  ?>
    </tbody>
</table>

Buat form-add.php untuk menampilkan form tambah data.


<form method="POST" id="formAdd">
    <table>
        <tr>
            <td>Nama</td>
            <td>
                <input type="text" name="Nama" id="Nama" required="" />
            </td>
        </tr>
        <tr>
            <td>Jenis Kelamin</td>
            <td>
                <label>
                    <input type="radio" name="JenisKelamin" id="JenisKelamin" value="Laki-laki" required="" />Laki-laki</label>
                <label>
                    <input type="radio" name="JenisKelamin" id="JenisKelamin" value="Perempuan" required="" />Perempuan</label>
            </td>
        </tr>
        <tr>
            <td>Alamat</td>
            <td>
                <textarea name="Alamat" id="Alamat" required=""></textarea>
            </td>
        </tr>
        <tr>
            <td>Agama</td>
            <td>
                <select name="Agama" id="Agama" required="">
                    <option disabled="" selected="">-Pilih-</option>
                    <option value="Islam">Islam</option>
                    <option value="Kristen">Kristen</option>
                    <option value="Katholik">Katholik</option>
                    <option value="Budha">Budha</option>
                    <option value="Hindhu">Hindhu</option>
                    <option value="Konghucu">Konghucu</option>
                    <option value="Lain-lain">Lain-lain</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>No. HP</td>
            <td>
                <input type="text" name="NoHP" id="NoHP" required="" />
            </td>
        </tr>
        <tr>
            <td>Email</td>
            <td>
                <input type="email" name="Email" id="Email" required="" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" name="simpan" id="simpan" value="Simpan" />
                <button id="cancelButton" type="button">Batal</button>
            </td>
        </tr>
    </table>
</form>

Baca juga Membuat Validasi Form dengan JQuery Form Validator

Buat form-edit.php, Form edit ini berbeda dengan form add diatas, karena inputan pada form akan terisi dan ter check otomatis sesuai data dari database.


<?php
 include "koneksi.php";
 $IdMhsw=$_GET['IdMhsw'];
 $query=mysqli_query($koneksi, "SELECT * FROM Mahasiswa WHERE IdMhsw='$IdMhsw'") or die(mysqli_error($koneksi));
 $result=mysqli_fetch_array($query);
?>
    <form method="POST" id="formEdit">
        <table>
            <tr>
                <td>Nama</td>
                <td>
                    <input type="hidden" name="IdMhsw" id="IdMhsw" required="" value="<?php echo $result['IdMhsw']; ?>" />
                    <input type="text" name="Nama" id="Nama" required="" value="<?php echo $result['Nama']; ?>" />
                </td>
            </tr>
            <tr>
                <td>Jenis Kelamin</td>
                <td>
                    <label>
                        <input type="radio" name="JenisKelamin" id="JenisKelamin" value="Laki-laki" required="" <?php if($result[ 'JenisKelamin']=="Laki-laki" ) echo "checked"; ?> />Laki-laki</label>
                    <label>
                        <input type="radio" name="JenisKelamin" id="JenisKelamin" value="Perempuan" required="" <?php if($result[ 'JenisKelamin']=="Perempuan" ) echo "checked"; ?> />Perempuan</label>
                </td>
            </tr>
            <tr>
                <td>Alamat</td>
                <td>
                    <textarea name="Alamat" id="Alamat" required="">
                        <?php echo $result['Alamat']; ?>
                    </textarea>
                </td>
            </tr>
            <tr>
                <td>Agama</td>
                <td>
                    <select name="Agama" id="Agama" required="">
                        <option disabled="" selected="">-Pilih-</option>
                        <option value="Islam" <?php if($result[ 'Agama']=="Islam" ) echo "selected"; ?>>Islam</option>
                        <option value="Kristen" <?php if($result[ 'Agama']=="Kristen" ) echo "selected"; ?>>Kristen</option>
                        <option value="Katholik" <?php if($result[ 'Agama']=="Katholik" ) echo "selected"; ?>>Katholik</option>
                        <option value="Budha" <?php if($result[ 'Agama']=="Budha" ) echo "selected"; ?>>Budha</option>
                        <option value="Hindhu" <?php if($result[ 'Agama']=="Hindhu" ) echo "selected"; ?>>Hindhu</option>
                        <option value="Konghucu" <?php if($result[ 'Agama']=="Konghucu" ) echo "selected"; ?>>Konghucu</option>
                        <option value="Lain-lain" <?php if($result[ 'Agama']=="Lain-lain" ) echo "selected"; ?>>Lain-lain</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>No. HP</td>
                <td>
                    <input type="text" name="NoHP" id="NoHP" required="" value="<?php echo $result['NoHp']; ?>" />
                </td>
            </tr>
            <tr>
                <td>Email</td>
                <td>
                    <input type="email" name="Email" id="Email" required="" value="<?php echo $result['Email']; ?>" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" name="simpan" id="simpan" value="Simpan" />
                    <button type="button" id="cancelButton">Batal</button>
                </td>
            </tr>
        </table>
    </form>

Terakhir buat service.php untuk menangani proses simpan, edit dan hapus data oleh pengguna. Dalam service.php ini, terdapat kondisi sesuai aksi yang di lakukan.


<?php
include "koneksi.php";

switch ($_GET['action'])
{

    case 'save':

        $Nama = $_POST['Nama'];
        $JenisKelamin = $_POST['JenisKelamin'];
        $Alamat = $_POST['Alamat'];
        $Agama = $_POST['Agama'];
        $NoHP = $_POST['NoHP'];
        $Email = $_POST['Email'];

        $query = mysqli_query($koneksi, "INSERT INTO Mahasiswa(Nama, JenisKelamin, Alamat, Agama, NoHp, Email) VALUES('$Nama', '$JenisKelamin', '$Alamat', '$Agama', '$NoHP', '$Email')");
        if ($query)
        {
            echo "Simpan Data Berhasil";
        }
        else
        {
            echo "Simpan Data Gagal :" . mysqli_error($koneksi);
        }
    break;

    case 'edit':

        $IdMhsw = $_POST['IdMhsw'];
        $Nama = $_POST['Nama'];
        $JenisKelamin = $_POST['JenisKelamin'];
        $Alamat = $_POST['Alamat'];
        $Agama = $_POST['Agama'];
        $NoHP = $_POST['NoHP'];
        $Email = $_POST['Email'];

        $query = mysqli_query($koneksi, "UPDATE Mahasiswa SET Nama='$Nama', JenisKelamin='$JenisKelamin', Alamat='$Alamat', Agama='$Agama', NoHp='$NoHP', Email='$Email' WHERE IdMhsw='$IdMhsw'");
        if ($query)
        {
            echo "Edit Data Berhasil";
        }
        else
        {
            echo "Edit Data Gagal :" . mysqli_error($koneksi);
        }
    break;

    case 'delete':

        $IdMhsw = $_POST['IdMhsw'];
        $query = mysqli_query($koneksi, "DELETE FROM Mahasiswa WHERE IdMhsw='$IdMhsw'");
        if ($query)
        {
            echo "Hapus Data Berhasil";
        }
        else
        {
            echo "Hapus Data Gagal :" . mysqli_error($koneksi);
        }
    break;
}
?>

Letakkan file index.php, jquery-3.4.1.min.js, dan file-file lainnya dalam satu folder seperti gambar dibawah ini.

Baca juga Upload Gambar dengan AJAX PHP dan MySQL

Tutorial membuat aplikasi web crud PHP dengan Ajax sederhana telah selesai, sekian.

Upload dan Compress/Resize File Gambar dengan PHP

2020-01-07T18:28:00.000-08:00

Selamat datang di blog Mari belajar coding. Tutorial kali ini kita akan belajar bagaimana cara mengupload gambar kemudian mengurangi(reduce) ukuran file gambar tersebut. Dengan mengurangi ukuran file gambar yang di upload, kita dapat menghemat kapasitas disk space atau web hosting.

Pertama-tama buat form untuk upload gambar seperti dibawah ini.


<form method="POST" enctype='multipart/form-data'>
    <input type="file" name="filename">
    <br>
    <input type="submit" name="submit" value="Submit">
</form>

Buat fungsi compress image, fungsi ini akan me resize ukuran file gambar berdasarkan quality yang telah di tentukan.


function compress($source, $destination, $quality) {
    $info = getimagesize($source);
    if ($info['mime'] == 'image/jpeg') 
        $image = imagecreatefromjpeg($source);
    elseif ($info['mime'] == 'image/gif') 
        $image = imagecreatefromgif($source);
    elseif ($info['mime'] == 'image/png') 
        $image = imagecreatefrompng($source);
    imagejpeg($image, $destination, $quality);
    return $destination;
}

terakhir buat fungsi aksi upload gambar.


if (isset($_POST['submit'])) {

 //create folder upload
 $tempdir = "upload/"; 
    if (!file_exists($tempdir))
    mkdir($tempdir,0755); 

 //target file
    $target_path = $tempdir . basename($_FILES['filename']['name']);

  $source_img = $_FILES['filename']['tmp_name'];
  
  $destination_img = $target_path;

  //panggil fungsi compress, 
  compress($source_img, $destination_img, 65);
}

Keterangan:
mkdir merupakan fungsi php untuk create folder, disini kita akan membuat folder bernama upload untuk menyimpan file gambar.
$target_path merupakan file hasil compress yang akan di simpan di folder upload.
Untuk menentukan qualitas gambar saat di rezise, teman-teman bisa mengubah nilai 65 pada baris yang di beri highlight diatas. Jika memberikan nilai terlalu rendah, maka gambar hasil resize akan pecah-pecah.

Baca juga Upload Gambar dengan AJAX PHP dan MySQL

Kode lengkap seperti dibawah ini.


<!DOCTYPE html>
<html>
<head>
 <title>Upload dan Resize File Gambar dengan PHP - maribelajarcoding.com</title>
</head>
<body>
 <form method="POST" enctype='multipart/form-data'>
  <input type="file" name="filename"><br>
  <input type="submit" name="submit" value="Submit">
 </form>

 <?php
 function compress($source, $destination, $quality)
 {
     $info = getimagesize($source);
     if ($info['mime'] == 'image/jpeg') $image = imagecreatefromjpeg($source);
     elseif ($info['mime'] == 'image/gif') $image = imagecreatefromgif($source);
     elseif ($info['mime'] == 'image/png') $image = imagecreatefrompng($source);
     imagejpeg($image, $destination, $quality);
     return $destination;
 }

 if (isset($_POST['submit']))
 {

     //create folder upload
     $tempdir = "upload/";
     if (!file_exists($tempdir)) mkdir($tempdir, 0755);

     //target file
     $target_path = $tempdir . basename($_FILES['filename']['name']);

     $source_img = $_FILES['filename']['tmp_name'];

     $destination_img = $target_path;

     //panggil fungsi compress,
     compress($source_img, $destination_img, 65);
 }
 ?>
</body>
</html>

Menampilkan Data XML dengan Javascript

2020-01-06T07:58:00.000-08:00

Selamat datang di blog Mari belajar coding. Jika tutorial sebelumnya kita pernah belajar membuat file xml dan menampilkan datanya dengan PHP. Tutorial kali ini kita akan belajar bagaimana cara menampilkan data xml menggunakan javascript. Seperti halnya tutorial untuk menampilkan data json, cara menampilkan data xml dengan javascript bisa menggunakan beberapa cara. Dalam tutorial ini kita akan menggunakan dua cara, yaitu menggunakan javascript XMLHttpRequest dan jquery.

Menampilkan Data XML dengan Javascript

Pertama-tama kita siapkan data xml terlebih dahulu. Dalam tutorial ini kita gunakan data mahasiswa.xml sebagai contoh data yang akan kita tampilkan.


<?xml version="1.0" encoding="UTF-8"?>
<Akademik>
     <mahasiswa nim="1234">
         <nama>Dian Syahputra</nama>
         <alamat>Semarang</alamat>
         <jurusan>Teknik Informatika</jurusan>
     </mahasiswa>
     <mahasiswa nim="1236">
         <nama>Jojo</nama>
         <alamat>Surabaya</alamat>
         <jurusan>Sastra Inggris</jurusan>
     </mahasiswa>
</Akademik>

File mahasiswa.xml jika kita jalankan melalui browser.

Untuk cara pertama kita menggunakan XMLHttpRequest, buat file latihan1.html seperti dibawah ini.


<!DOCTYPE html>
<html>
<head>
 <title>Mari Belajar Coding</title>
 <script type="text/javascript">
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {         
         
         xmlDoc = xhttp.responseXML;
         var mahasiswa= xmlDoc.getElementsByTagName("mahasiswa");
          var data="";
          
         for(i=0;i<mahasiswa.length;i++){
            var mhsw = mahasiswa[i];
            if (mhsw.nodeType == Node.ELEMENT_NODE) {
              var nim=mhsw.getAttribute("nim");
              var nama=mhsw.getElementsByTagName("nama")[0].childNodes[0].data;
              var alamat=mhsw.getElementsByTagName("alamat")[0].childNodes[0].data;
              var jurusan=mhsw.getElementsByTagName("jurusan")[0].childNodes[0].data;
              
              data +="<tr><td>"+nim+"</td><td>"+nama+"</td><td>"+alamat+"</td><td>"+jurusan+"</td></tr>";
            }            
         }
         //tampilkan di tabel id TabelDataMahasiswa;
         document.getElementById("TabelDataMahasiswa").innerHTML=data;
      }
  };
  xhttp.open("GET", "mahasiswa.xml", true);

  xhttp.send();

 </script>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>Nim</th>
        <th>Nama</th>
        <th>Alamat</th>
        <th>Jurusan</th>
      </tr>
    </thead>
    <tbody id="TabelDataMahasiswa"></tbody>
  </table>
</body>
</html>

Tampilan file latihan1.html jika di jalankan di browser.

Cara yang kedua kita akan menggunakan jquery untuk menampilkan data xml. Tambahkan jquery.js didalam tag head untuk menggunakan fungsinya. Salin kode dibawah ini kemudian simpan file dengan nama latihan2.html.


<!DOCTYPE html>
<html>
<head>
    <title>Mari Belajar Coding</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.get('mahasiswa.xml', function(data) {
                var datatabel = "";
                $(data).find('mahasiswa').each(function() {
                    var $mahasiswa = $(this);
                    var nim = $mahasiswa.attr("nim");
                    var nama = $mahasiswa.find('nama').text();
                    var alamat = $mahasiswa.find('alamat').text();
                    var jurusan = $mahasiswa.find('jurusan').text();
                    datatabel += "<tr><td>" + nim + "</td><td>" + nama + "</td><td>" + alamat + "</td><td>" + jurusan + "</td></tr>";
                });
                document.getElementById("TabelDataMahasiswa").innerHTML = datatabel;
            });
        });
    </script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Nim</th>
                <th>Nama</th>
                <th>Alamat</th>
                <th>Jurusan</th>
            </tr>
        </thead>
        <tbody id="TabelDataMahasiswa"></tbody>
    </table>
</body>
</html>

Kita juga bisa menampilkan data xml menggunakan ajax jquery seperti dibawah ini. Simpan dengan nama latihan3.html.


<!DOCTYPE html>
<html>
<head>
    <title>Mari Belajar Coding</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var datatabel = "";
            $.ajax({
              method: "GET",
              url: "mahasiswa.xml",
              dataType: "xml",
              }).done(function( msg ) {
                 $(msg).find("mahasiswa").each(function () {
                    var $mahasiswa = $(this);
                    var nim = $mahasiswa.attr("nim");
                    var nama = $mahasiswa.find('nama').text();
                    var alamat = $mahasiswa.find('alamat').text();
                    var jurusan = $mahasiswa.find('jurusan').text();
                    datatabel += "<tr><td>" + nim + "</td><td>" + nama + "</td><td>" + alamat + "</td><td>" + jurusan + "</td></tr>";
                });
                 document.getElementById("TabelDataMahasiswa").innerHTML = datatabel;
              });
            
        });
    </script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>Nim</th>
                <th>Nama</th>
                <th>Alamat</th>
                <th>Jurusan</th>
            </tr>
        </thead>
        <tbody id="TabelDataMahasiswa"></tbody>
    </table>
</body>
</html>

Related Search:
Menampilkan data XML dengan Javascript
Menampilkan data XML dengan Jquery
Menampilkan data XML dengan Ajax
Parsing data XML dengan Javascript

Membuat Aplikasi CRUD Sederhana Menggunakan Java Netbeans

2020-01-05T04:49:00.000-08:00

Selamat datang di blog Mari belajar coding. Kali ini kita kembali lagi belajar pemrograman java menggunakan NetBeans IDE. Jika tutorial sebelumnya kita pernah belajar membuat koneksi database antara mysql dengan java, tutorial ini kita akan belajar bagaimana membuat sebuah aplikasi desktop menggunakan java NetBeans untuk menyimpan mengubah menghapus dan menampilkan data ke tabel dari database mysql ke GUI NetBeans.

Pertama-tama buat database mysql. Dalam tutorial membuat aplikasi Crud java Netbeans, kita akan menggunakan database bernama penjualan dengan satu tabel bernama produk.


CREATE DATABASE `penjualan`;
USE `penjualan`;

CREATE TABLE `produk` (
`IDProduk` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`KodeProduk` varchar(32) UNIQUE KEY,
`NamaProduk` varchar(255),
`Satuan` varchar(255),
`Harga` int(11),
`Stok` int(11) ,
`CreateDate` datetime 
);

Setelah database dibuat, selanjutnya buka aplikasi NetBeans IDE kemudian buat projek baru bernama Penjualan.
File->New Project->Java Application

Klik kanan pada Package Penjualan, buat file java class bernama koneksi untuk menghubungkan aplikasi yang akan kita buat dengan database penjualan.

File koneksi.java seperti dibawah ini.


/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package penjualan;
import java.sql.*;
import javax.swing.JOptionPane;
/**
 *
 * @author Hp
 */
public class koneksi {
    private static Connection KoneksiDatabse;
    public static Connection koneksiDB() throws SQLException {
        try {
            String DB ="jdbc:mysql://localhost/penjualan";
            String user="root";
            String pass="";
            DriverManager.registerDriver(new com.mysql.jdbc.Driver());
            KoneksiDatabse = (Connection) DriverManager.getConnection(DB,user,pass);
        } catch (Exception e) {
            JOptionPane.showMessageDialog(null,"Tidak ada koneksi","Error",
            JOptionPane.INFORMATION_MESSAGE);
            System.err.println(e.getMessage());
            System.exit(0);
        }
         return KoneksiDatabse;
    }
}

Tambahkan library MySQL JDBC Driver, klik kanan pada folder libraries kemudian pilih add library.

Buat Interface GUI untuk menampilkan form produk dan tabel produk dengan cara klik kanan pada package Penjualan->New->JFrame Form.

Simpan dengan nama class produk. Kemudian buat layout seperti gambar dibawah ini.

Keterangan:
Untuk membuat header dan keterangan inputan form, pilih Label pada bagian Pallete di sisi kanan layout.
Untuk membuat inputan form, pilih textfield kecuali pada inputan Satuan pilih yang combobox.
Untuk menambah item select pada combobox, klik kanan kemudian pilih properties->model
Ganti variabel name setiap textfield, combobox, button, dan tabel dengan cara klik kanan pilih Change Variabel Name.

File produk.java seperti dibawah ini.


/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package penjualan;
import java.sql.*;
import javax.swing.JOptionPane;
import javax.swing.table.DefaultTableModel;
import java.util.Scanner;
import java.awt.*;
/**
 *
 * @author Hp
 */
public class produk extends javax.swing.JFrame {
    DefaultTableModel tabModel;
    ResultSet RsProduk=null;
    /**
     * Creates new form produk
     */
    public produk() {
        initComponents();
        
        Dimension screenSize=Toolkit.getDefaultToolkit().getScreenSize();
        Dimension frameSize=this.getSize();
        if(frameSize.height > screenSize.height){
        frameSize.height=screenSize.height;
        }
        if(frameSize.width > screenSize.width){
        frameSize.width=screenSize.width;
        }
        this.setLocation((screenSize.width - frameSize.width) / 2,
        (screenSize.height = screenSize.height) / 20); 
        
        //fungsi Tampil data dan set edit off dijalankan saat aplikasi di run
        tampilData();
        SetEditOff();
    }
    
    //fungsi untuk menampilkan data produk ke dalam tabel
    private void tampilData(){
        try{
            Object[] judul_kolom = {"Kode Barang", "Nama Barang", "Satuan", "Harga", "Stok", "Create Date"};
            tabModel=new DefaultTableModel(null,judul_kolom);
            TabelProduk.setModel(tabModel);
            
            Connection conn=(Connection)koneksi.koneksiDB();
            Statement stt=conn.createStatement();
            tabModel.getDataVector().removeAllElements();
            
            RsProduk=stt.executeQuery("SELECT * from produk ");  
            while(RsProduk.next()){
                Object[] data={
                    RsProduk.getString("KodeProduk"),
                    RsProduk.getString("NamaProduk"),
                    RsProduk.getString("Satuan"),
                    RsProduk.getString("Harga"),
                    RsProduk.getString("Stok"),
                    RsProduk.getString("CreateDate")         
                };
               tabModel.addRow(data);
            }                
        } catch (Exception ex) {
        System.err.println(ex.getMessage());
        }
        // disable button
        jButtonSave.setEnabled(false);
        jButtonUpdate.setEnabled(false);
        jButtonDelete.setEnabled(false);
        jButtonCancel.setEnabled(false);
    }
   
    //menampilkan data ke form saat data pada tabel di klik 
   void tblKeForm(){
        jTextKodeProduk.setText(tabModel.getValueAt(TabelProduk.getSelectedRow(),0)+"");
        jTextNama.setText(tabModel.getValueAt(TabelProduk.getSelectedRow(),1)+"");
        jComboBoxSatuan.setSelectedItem(tabModel.getValueAt(TabelProduk.getSelectedRow(),2)+"");
        jTextHarga.setText(tabModel.getValueAt(TabelProduk.getSelectedRow(),3)+"");
        jTextStok.setText(tabModel.getValueAt(TabelProduk.getSelectedRow(),4)+"");
        
        jButtonUpdate.setEnabled(true);
        jButtonDelete.setEnabled(true);
        jButtonCancel.setEnabled(true);
        jButtonSave.setEnabled(false);
    }
   
   //membersihkan form
   private void BersihData(){
        jTextKodeProduk.setText("");
        jTextNama.setText("");
        jComboBoxSatuan.setSelectedIndex(0);
        jTextHarga.setText(""); 
        jTextStok.setText("");
    } 
   
   //disable form
   private void SetEditOff(){
        jTextKodeProduk.setEnabled(false);
        jTextNama.setEnabled(false);
        jComboBoxSatuan.setEnabled(false);
        jTextHarga.setEnabled(false);
        jTextStok.setEnabled(false);
   }
   
   
   private void seteditOn(){
        jTextKodeProduk.setEnabled(true);
        jTextNama.setEnabled(true);
        jComboBoxSatuan.setEnabled(true);
        jTextHarga.setEnabled(true);
        jTextStok.setEnabled(true);
   }

    /**
     * This method is called from within the constructor to initialize the form.
     * WARNING: Do NOT modify this code. The content of this method is always
     * regenerated by the Form Editor.
     */
    @SuppressWarnings("unchecked")
    // <editor-fold defaultstate="collapsed" desc="Generated Code">                          
    private void initComponents() {

        jLabelHeader = new javax.swing.JLabel();
        jLabelKodeProduk = new javax.swing.JLabel();
        jTextKodeProduk = new javax.swing.JTextField();
        jLabelNama = new javax.swing.JLabel();
        jTextNama = new javax.swing.JTextField();
        jLabelSatuan = new javax.swing.JLabel();
        jComboBoxSatuan = new javax.swing.JComboBox();
        jLabelHarga = new javax.swing.JLabel();
        jTextHarga = new javax.swing.JTextField();
        jLabelStok = new javax.swing.JLabel();
        jTextStok = new javax.swing.JTextField();
        jButtonAdd = new javax.swing.JButton();
        jButtonSave = new javax.swing.JButton();
        jButtonUpdate = new javax.swing.JButton();
        jButtonDelete = new javax.swing.JButton();
        jButtonCancel = new javax.swing.JButton();
        jScrollPane1 = new javax.swing.JScrollPane();
        TabelProduk = new javax.swing.JTable();

        setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);

        jLabelHeader.setBackground(new java.awt.Color(0, 0, 51));
        jLabelHeader.setFont(new java.awt.Font("Tahoma", 1, 18)); // NOI18N
        jLabelHeader.setForeground(new java.awt.Color(255, 255, 255));
        jLabelHeader.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
        jLabelHeader.setText("Data Produk");
        jLabelHeader.setOpaque(true);

        jLabelKodeProduk.setText("Kode Produk");

        jLabelNama.setText("Nama");

        jLabelSatuan.setText("Satuan");

        jComboBoxSatuan.setModel(new javax.swing.DefaultComboBoxModel(new String[] { "Pcs", "Dus", "Kg" }));

        jLabelHarga.setText("Harga");

        jLabelStok.setText("Stok");

        jButtonAdd.setText("AddNew");
        jButtonAdd.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButtonAddActionPerformed(evt);
            }
        });

        jButtonSave.setText("Save");
        jButtonSave.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButtonSaveActionPerformed(evt);
            }
        });

        jButtonUpdate.setText("Update");
        jButtonUpdate.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButtonUpdateActionPerformed(evt);
            }
        });

        jButtonDelete.setText("Delete");
        jButtonDelete.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButtonDeleteActionPerformed(evt);
            }
        });

        jButtonCancel.setText("Cancel");
        jButtonCancel.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                jButtonCancelActionPerformed(evt);
            }
        });

        TabelProduk.setModel(new javax.swing.table.DefaultTableModel(
            new Object [][] {
                {null, null, null, null},
                {null, null, null, null},
                {null, null, null, null},
                {null, null, null, null}
            },
            new String [] {
                "Title 1", "Title 2", "Title 3", "Title 4"
            }
        ));
        TabelProduk.addMouseListener(new java.awt.event.MouseAdapter() {
            public void mouseClicked(java.awt.event.MouseEvent evt) {
                TabelProdukMouseClicked(evt);
            }
        });
        jScrollPane1.setViewportView(TabelProduk);

        javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
        getContentPane().setLayout(layout);
        layout.setHorizontalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addComponent(jLabelHeader, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
            .addGroup(layout.createSequentialGroup()
                .addContainerGap()
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addComponent(jLabelNama)
                    .addComponent(jLabelSatuan)
                    .addComponent(jLabelHarga)
                    .addComponent(jLabelStok)
                    .addComponent(jLabelKodeProduk))
                .addGap(14, 14, 14)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addGroup(layout.createSequentialGroup()
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                            .addGroup(layout.createSequentialGroup()
                                .addGap(5, 5, 5)
                                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.TRAILING, false)
                                    .addComponent(jTextHarga)
                                    .addComponent(jTextNama, javax.swing.GroupLayout.Alignment.LEADING, javax.swing.GroupLayout.PREFERRED_SIZE, 257, javax.swing.GroupLayout.PREFERRED_SIZE)
                                    .addComponent(jComboBoxSatuan, 0, 259, Short.MAX_VALUE)
                                    .addComponent(jTextKodeProduk, javax.swing.GroupLayout.Alignment.LEADING, javax.swing.GroupLayout.PREFERRED_SIZE, 258, javax.swing.GroupLayout.PREFERRED_SIZE)
                                    .addComponent(jTextStok)))
                            .addComponent(jButtonAdd))
                        .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED)
                        .addComponent(jScrollPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 388, javax.swing.GroupLayout.PREFERRED_SIZE))
                    .addGroup(layout.createSequentialGroup()
                        .addComponent(jButtonSave)
                        .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                        .addComponent(jButtonUpdate)
                        .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED)
                        .addComponent(jButtonDelete)
                        .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                        .addComponent(jButtonCancel)))
                .addContainerGap(javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE))
        );
        layout.setVerticalGroup(
            layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
            .addGroup(layout.createSequentialGroup()
                .addComponent(jLabelHeader, javax.swing.GroupLayout.PREFERRED_SIZE, 37, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                    .addComponent(jScrollPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 180, javax.swing.GroupLayout.PREFERRED_SIZE)
                    .addGroup(layout.createSequentialGroup()
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                            .addComponent(jTextKodeProduk, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
                            .addComponent(jLabelKodeProduk))
                        .addGap(18, 18, 18)
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                            .addComponent(jTextNama, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
                            .addComponent(jLabelNama))
                        .addGap(18, 18, 18)
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                            .addComponent(jComboBoxSatuan, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
                            .addComponent(jLabelSatuan))
                        .addGap(18, 18, 18)
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                            .addComponent(jTextHarga, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
                            .addComponent(jLabelHarga))
                        .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED)
                        .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                            .addComponent(jTextStok, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
                            .addComponent(jLabelStok))
                        .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED)
                        .addComponent(jButtonAdd)))
                .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
                .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
                    .addComponent(jButtonSave)
                    .addComponent(jButtonUpdate)
                    .addComponent(jButtonDelete)
                    .addComponent(jButtonCancel))
                .addGap(21, 21, 21))
        );

        pack();
    }// </editor-fold>                        
    //menangani proses saat button add di klik
    private void jButtonAddActionPerformed(java.awt.event.ActionEvent evt) {                                           
        // TODO add your handling code here:
        BersihData();
        jTextKodeProduk.requestFocus();
        jButtonSave.setEnabled(true);
        jButtonUpdate.setEnabled(false);
        jButtonDelete.setEnabled(false);
        seteditOn();
    }                                          

    //menangani proses saat button save di klik
    private void jButtonSaveActionPerformed(java.awt.event.ActionEvent evt) {                                            
        // TODO add your handling code here:
        String KodeProduk=jTextKodeProduk.getText();
        String NamaProduk=jTextNama.getText();
        String Satuan=jComboBoxSatuan.getSelectedItem().toString();
        String Harga=jTextHarga.getText();
        String Stok=jTextStok.getText();

        java.util.Date tanggal = new java.util.Date();
        java.text.SimpleDateFormat TanggalFormat= new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String CreateDate=TanggalFormat.format(tanggal);

        if (KodeProduk.isEmpty() ) {
            JOptionPane.showMessageDialog(null,"Kode produk tidak boleh kosong");
            jTextKodeProduk.requestFocus();
        }else if (NamaProduk.isEmpty()) {
            JOptionPane.showMessageDialog(null,"Nama produk tidak boleh kosong");
            jTextNama.requestFocus();
        }else if (Satuan.isEmpty()) {
            JOptionPane.showMessageDialog(null,"Satuan produk tidak boleh kosong");
            jComboBoxSatuan.requestFocus();
        }else if (Harga.isEmpty()) {
            JOptionPane.showMessageDialog(null,"Harga produk tidak boleh kosong");
            jTextHarga.requestFocus();
        }else if (Stok.isEmpty()) {
            JOptionPane.showMessageDialog(null,"Stok produk tidak boleh kosong");
            jTextStok.requestFocus();
        }
        else if (!(new Scanner(Harga).hasNextInt())) {
            JOptionPane.showMessageDialog(null,"Harga produk harus angka");
            jTextHarga.requestFocus();
        }else if (!(new Scanner(Stok).hasNextInt())) {
            JOptionPane.showMessageDialog(null,"Stok produk harus angka");
            jTextStok.requestFocus();
        }else{
            try{
                Connection conn=(Connection)koneksi.koneksiDB();
                Statement stt=conn.createStatement();
                stt.executeUpdate("insert into produk(KodeProduk,NamaProduk,Satuan,Harga,Stok,CreateDate)"+
                    "VALUES('"+KodeProduk+"','"+NamaProduk+"','"+Satuan+"','"+Harga+"','"+Stok+"','"+CreateDate+"')");
                BersihData();
                tampilData();
                SetEditOff();
                JOptionPane.showMessageDialog(this,"Data berhasil disimpan","Success",JOptionPane.INFORMATION_MESSAGE);
            } catch(SQLException e){
                JOptionPane.showMessageDialog(this,"Simpan data gagal\n"+e.getMessage(),"Error",JOptionPane.ERROR_MESSAGE);
            }
        }

    }                                           

    //menangani proses saat button Update di klik
    private void jButtonUpdateActionPerformed(java.awt.event.ActionEvent evt) {                                              
        // TODO add your handling code here:
        String KodeProduk=jTextKodeProduk.getText();
        String NamaProduk=jTextNama.getText();
        String Satuan=jComboBoxSatuan.getSelectedItem().toString();
        String Harga=jTextHarga.getText();
        String Stok=jTextStok.getText();

        java.util.Date tanggal = new java.util.Date();
        java.text.SimpleDateFormat TanggalFormat= new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        String CreateDate=TanggalFormat.format(tanggal);

        if (KodeProduk.isEmpty() ) {
            JOptionPane.showMessageDialog(null,"Kode produk tidak boleh kosong");
            jTextKodeProduk.requestFocus();
        }else if (NamaProduk.isEmpty()) {
            JOptionPane.showMessageDialog(null,"Nama produk tidak boleh kosong");
            jTextNama.requestFocus();
        }else if (Satuan.isEmpty()) {
            JOptionPane.showMessageDialog(null,"Satuan produk tidak boleh kosong");
            jComboBoxSatuan.requestFocus();
        }else if (Harga.isEmpty()) {
            JOptionPane.showMessageDialog(null,"Harga produk tidak boleh kosong");
            jTextHarga.requestFocus();
        }else if (Stok.isEmpty()) {
            JOptionPane.showMessageDialog(null,"Stok produk tidak boleh kosong");
            jTextStok.requestFocus();
        }
        else if (!(new Scanner(Harga).hasNextInt())) {
            JOptionPane.showMessageDialog(null,"Harga produk harus angka");
            jTextHarga.requestFocus();
        }else if (!(new Scanner(Stok).hasNextInt())) {
            JOptionPane.showMessageDialog(null,"Stok produk harus angka");
            jTextStok.requestFocus();
        }else{
            try{
                Connection conn=(Connection)koneksi.koneksiDB();
                Statement stt=conn.createStatement();
                stt.executeUpdate("UPDATE produk SET NamaProduk='"+NamaProduk+"', Satuan='"+Satuan+"', Harga='"+Harga+"',"+
                    "Stok='"+Stok+"' WHERE KodeProduk='"+KodeProduk+"'");
                BersihData();
                tampilData();
                SetEditOff();
                JOptionPane.showMessageDialog(this,"Data berhasil diubah","Success",JOptionPane.INFORMATION_MESSAGE);
            } catch(SQLException e){
                JOptionPane.showMessageDialog(this,"Ubah data gagal\n"+e.getMessage(),"Error",JOptionPane.ERROR_MESSAGE);
            }
        }

    }                                             

    //menangani proses saat button delete di klik
    private void jButtonDeleteActionPerformed(java.awt.event.ActionEvent evt) {                                              
        // TODO add your handling code here:
        String KodeProduk=jTextKodeProduk.getText();

        if (KodeProduk.isEmpty() ) {
            JOptionPane.showMessageDialog(null,"Kode produk tidak boleh kosong");
            jTextKodeProduk.requestFocus();
        }else if(JOptionPane.showConfirmDialog(null,"Apakah anda yakin akan menghapus data ini?",
            "Informasi",JOptionPane.OK_CANCEL_OPTION,JOptionPane.INFORMATION_MESSAGE)==JOptionPane.OK_OPTION){
        try{
            Connection conn=(Connection)koneksi.koneksiDB();
            Statement stt=conn.createStatement();
            stt.executeUpdate("DELETE FROM produk WHERE KodeProduk='"+KodeProduk+"'");
            BersihData();
            tampilData();
            SetEditOff();
            JOptionPane.showMessageDialog(this,"Data berhasil di hapus","Success",JOptionPane.INFORMATION_MESSAGE);
        } catch(SQLException e){
            JOptionPane.showMessageDialog(this,"Delete data gagal\n"+e.getMessage(),"Error",JOptionPane.ERROR_MESSAGE);
        }
        }
    }                                             

    //menangani proses saat button cancel di klik
    private void jButtonCancelActionPerformed(java.awt.event.ActionEvent evt) {                                              
        // TODO add your handling code here:
        BersihData();
        jButtonSave.setEnabled(false);
        jButtonUpdate.setEnabled(false);
        jButtonDelete.setEnabled(false);
        SetEditOff();
    }                                             

    //menangani proses saat tabel produk di klik
    private void TabelProdukMouseClicked(java.awt.event.MouseEvent evt) {                                         
        // TODO add your handling code here:
        seteditOn();
        jTextKodeProduk.setEnabled(false);
        tblKeForm();
    }                                        

    /**
     * @param args the command line arguments
     */
    public static void main(String args[]) {
        /* Set the Nimbus look and feel */
        //<editor-fold defaultstate="collapsed" desc=" Look and feel setting code (optional) ">
        /* If Nimbus (introduced in Java SE 6) is not available, stay with the default look and feel.
         * For details see http://download.oracle.com/javase/tutorial/uiswing/lookandfeel/plaf.html 
         */
        try {
            for (javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels()) {
                if ("Nimbus".equals(info.getName())) {
                    javax.swing.UIManager.setLookAndFeel(info.getClassName());
                    break;
                }
            }
        } catch (ClassNotFoundException ex) {
            java.util.logging.Logger.getLogger(produk.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
        } catch (InstantiationException ex) {
            java.util.logging.Logger.getLogger(produk.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
        } catch (IllegalAccessException ex) {
            java.util.logging.Logger.getLogger(produk.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
        } catch (javax.swing.UnsupportedLookAndFeelException ex) {
            java.util.logging.Logger.getLogger(produk.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
        }
        //</editor-fold>

        /* Create and display the form */
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                new produk().setVisible(true);
            }
        });
    }

    // Variables declaration - do not modify                     
    private javax.swing.JTable TabelProduk;
    private javax.swing.JButton jButtonAdd;
    private javax.swing.JButton jButtonCancel;
    private javax.swing.JButton jButtonDelete;
    private javax.swing.JButton jButtonSave;
    private javax.swing.JButton jButtonUpdate;
    private javax.swing.JComboBox jComboBoxSatuan;
    private javax.swing.JLabel jLabelHarga;
    private javax.swing.JLabel jLabelHeader;
    private javax.swing.JLabel jLabelKodeProduk;
    private javax.swing.JLabel jLabelNama;
    private javax.swing.JLabel jLabelSatuan;
    private javax.swing.JLabel jLabelStok;
    private javax.swing.JScrollPane jScrollPane1;
    private javax.swing.JTextField jTextHarga;
    private javax.swing.JTextField jTextKodeProduk;
    private javax.swing.JTextField jTextNama;
    private javax.swing.JTextField jTextStok;
    // End of variables declaration                   
}

Untuk menjalankan class produk pertama kali, klik kanan pada project penjualan->Properties->run->Main Class

Source Code:

Java Netbeans-Penjualan.zip

Menambahkan Ongkos Kirim di Wordpress

2020-01-04T13:35:00.000-08:00

Selamat datang di blog Mari belajar coding. Jika tutorial sebelumnya kita pernah belajar membuat aplikasi web untuk cek ongkos kirim menggunakan api RajaOngkir dengan PHP. Tutorial kali ini kita akan belajar mengintegrasikan Api RajaOngkir dengan CMS Wordpress.

Saat kita membangun sebuah website ecommerce atau web toko online, tentu kita perlu menambahkan sebuah layanan shipping untuk mengirim produk yang kita jual. Pada Wordpress sendiri kita dapat menambahkan plugin WooCommerce untuk membuat web ecommerce dengan fitur yang mendukung fungsi toko online. Akan tetapi, secara default WooCommerce tidak menyediakan ongkos kirim untuk Indonesia.

Kita dapat menginstall plugin Woongkir untuk menambahkan ongkos kirim untuk pengiriman domestik dan internasional Indonesia seperti JNE, POS Indonesia, TIKI dan lain sebagainya dengan bantuan Api RajaOngkir. Silahkan kunjungi situs https://rajaongkir.com/.Pilih menu daftar kemudian isi form pendaftaran, pastikan alamat email yang teman-teman gunakan valid. Sistem RajaOngkir akan mengirimkan email aktivasi ke email yang digunakan untuk pendaftaran. Buka menu panel untuk mendapatkan api RajaOngkir.

Silahkan login pada akun wordpress teman-teman kemudian pilih menu plugin. Install plugin Woongkir seperti dibawah ini.

Setelah plugin Woongkir di install, buka menu WooCommerce pada bagian setting. Pilih tab shipping kemudian pilih Add shipping zone.

Pilih Add shipping method untuk menambahkan plugin Woongkir pada shipping method WooCommerce.

Selanjutnya kita akan setting Woongkir seperti dibawah ini.

Keterangan:

Shipping Origin Province merupakan alamat provinsi toko teman-teman berada.
Shipping Origin City merupakan alamat kota toko teman-teman.

Shipping Origin Subdistrict merupakan alamat kecamatan toko teman-teman.

Tax status merupakan status pajak, pilih none jika tidak.

Show ETA menampilkan perkiraan kedatangan produk.

Base Cart Contents Weight (gram) berat produk dasar yang akan di hitung. Jika teman-teman tidak menambahkan berat pada produk yang dijual, maka berat ini yang akan di hitung.

RajaOngkir API Key diisi dengan api key yang di dapat dari RajaOngkir.com

RajaOngkir Account Type merupakan tipe akun pada RajaOngkir.

Domestic Shipping merupakan jenis kurir yang akan digunakan, silahkan sesuaikan dengan tipe akun RajaOngkir.

Teman-teman bisa mencoba untuk order produk kemudian checkout produk yang di beli. Setelah menginputkan alamat pengiriman maka pilihan Shipping akan seperti gambar dibawah ini.

Operasi dan Operator pada Java

2020-01-03T05:46:00.000-08:00

Operasi pada pemrograman Java merupakan suatu perhitungan matematis dari minimal dua buah bilangan atau lebih. Dalam proses pengolahan atau manipulasi data pada Java, kita bisa menggunakan proses aritmatika, proses relational, proses logika, proses concatenation dan proses increment decrement.

Operator Aritmatika

Operator aritmatika merupakan proses operasi aritmatika untuk perhitungan seperti tambah, kurang, kali dan sebagainya. Operator kali dan bagi punya level tingkat yang sama, sehingga yang ditulis terlebih dulu maka yang dioperasikan terlebih dulu. Dua operator ini adalah level tingkat pertama, sehingga yang paling didahulukan. Operator tambah dan kurang, juga berada pada level tingkat yang sama, sehingga yang ditulis terlebih dulu maka yang dioperasikan terlebih dulu. Operator ini adalah level tingkat kedua, setelah tingkatkan operator kali dan bagi. Operator aritmatika yang sering digunakan yaitu untuk bilangan bulat dan bilangan riil.

Operator aritmatika pada bilangan bulat.

+ (tambah)
- (kurang)
* (kali)
/ (bagi)
% (sisa bagi)

Contoh operasi aritmatika bilangan bulat(integer).


public class Operator_Aritmatika_Bulat {

    public static void main(String[] args) {
     
     System.out.println("Operasi aritmetika " + "pada tipe integer");
  int a = 2 + 5;
  int b = 25 - 3;
  int c = 7 * 4;
  int d = 9 / 3;
  int e = 20 % 5;
  
  System.out.println("Nilai a: " + a);
  System.out.println("Nilai b: " + b);
  System.out.println("Nilai c: " + c);
  System.out.println("Nilai d: " + d);  
  System.out.println("Nilai e: " + e);
  System.out.println();
    }
    
}

Gambar Output

Operasi Aritmatika pada bilangan Riil.

+ (tambah)
- (kurang)
* (kali)
/ (bagi)

Contoh operasi aritmatika bilangan riil.


public class Operator_Aritmatika_Rill {

    public static void main(String[] args) {
     
     System.out.println("Operasi aritmetika " + "pada tipe floating-point");
  double a = 2.3 + 4.5;
  double b = 11.8 - 5.9;
  double c = 3.1 * 7.5;
  double d = 28.8 / 3.2;
  
  System.out.println("Nilai a: " + a);
  System.out.println("Nilai b: " + b);
  System.out.println("Nilai c: " + c);
  System.out.println("Nilai d: " + d);
  System.out.println();
    }
    
}

Gambar Output

Operasi Relasional
Operasi Relasional merupakan Operasi yang menyatakan hubungan antara satu operand dengan operand lainnya. Hasil yang diberikan dari operasi ini bernilai boolean (true/false).
Operator Relasional untuk Operasi Perbandingan.

< (lebih kecil)
<= (lebih kecil sama dengan)
> (lebih besar)
>= (lebih besar sama dengan)
== (sama dengan)
!= (tidak sama dengan)

Contoh operasi relasional.


public class Operator_Relasional {

    public static void main(String[] args) {
     
     System.out.println("Operasi Relasional ");
     boolean a, b, c, d, e, f;
   a = (5 < 10);
   b = (14 <= 14);
   c = (25 > 34);
   d = (28 >= 23);
   e = (19 == 19);
   f = (33 != 33);
  
  System.out.println("Nilai a: " + a);
  System.out.println("Nilai b: " + b);
  System.out.println("Nilai c: " + c);
  System.out.println("Nilai d: " + d);
  System.out.println("Nilai e: " + e);
  System.out.println("Nilai f: " + f);
  System.out.println();
    }
    
}

Gambar Output

Operasi Penyambungan (Concatenation)
Operasi Concatenation merupakan operasi untuk menyambungkan string satu dengan string yang lainnya. Operasi concatenation menggunakan operator + untuk menyambungkan data string, data numerik maupun karakter.
Contoh program operasi concatenation.


public class Operator_Concatenation {

   public static void main(String[] args) {
     
     System.out.println("Operasi Concatenation ");
     String a, b, c;
   a = "Teknik";
   b = " Informatika";
   c = a + b;
  System.out.println("Nilai c: " + c);
  System.out.println();
    }
}

Operasi Logika

Operasi logika merupakan operasi terhadap dua operand yang bertipe boolean.

Operator logika untuk operasi logika.

Contoh program operasi logika.


public class Operator_Logika {

    public static void main(String[] args) {
     
     System.out.println("Operasi Logika ");
     
     int a, b, c, d;     
  a = 1; 
  b = 2;
  c = 3;
  d = 4;
  Boolean w, x, y, z;
  
  System.out.println("Operasi AND");
  w = ((a!=1) && (a>=b)); System.out.println("w = " + w);
  x = ((a>b) && (a<=b)); System.out.println("x = " + x);
  y = ((b>=2) && (b>=c)); System.out.println("y = " + y);
  z = ((d<=4) && (c<=d)); System.out.println("z = " + z);
  System.out.println("\nOperasi OR");
  w = (a!=1) || (a>=b); System.out.println("w = " + w);
  x = (a>b) || (a<=b); System.out.println("x = " + x);
  y = (b>=2) || (b>=c); System.out.println("y = " + y);
  z = (d<=4) || (c<=d); System.out.println("z = " + z);
  System.out.println("\nOperasi XOR");
  w = (a!=1) ^ (a>=b); System.out.println("w = " + w);
  x = (a>b) ^ (a<=b); System.out.println("x = " + x);
  y = (b>=2) ^ (b>=c); System.out.println("y = " + y);
  z = (d<=4) ^ (c<=d); System.out.println("z = " + z);
  System.out.println("\nOperasi NOT");
  w = (!((a!=1) && (a>=b))); System.out.println("w = " + w);
  z = (!((d<=4) || (c<=d))); System.out.println("z = " + z);
    }    
    
}

Operator Increment dan Decrement
Operasi Increment dan Decrement adalah operator yang berguna untuk menaikkan satu nilai (increment) dan menurunkan 1 nilai (decrement). Berdasarkan urutan eksekusi penaikan dan penurunan nilainya, incrementdecrement operator ini dapat diklasifikasikan menjadi dua macam, yaitu pre-increment/decrement dan postincrement/decrement.
Contoh program operator increment dan decrement.


public class Inc_Dec {

     public static void main(String[] args) {
     
     System.out.println("Operasi Logika ");
     
     int a=15;
  System.out.println("Pre-increment");
  System.out.println("a : " + a);
  System.out.println("++a : " + ++a);
  System.out.println("a : " + a);
  
  int b=15;
  System.out.println("\nPost-increment");
  System.out.println("b : " + b);
  System.out.println("b++ : " + b++);
  System.out.println("b : " + b);
  
  int x=9;
  System.out.println("\nPre-decrement");
  System.out.println("x : " + x);
  System.out.println("--x : " + --x);
  System.out.println("x : " + x);
  
  int y=8;
  System.out.println("\nPost-deccrement");
  System.out.println("y : " + y);
  System.out.println("y-- : " + y--);
  System.out.println("y : " + y);
    }     
    
}

Menghapus Broken Link pada Artikel Blog

2020-01-02T02:23:00.000-08:00

Broken links merupakan istilah untuk link tautan yang rusak atau sudah tidak tersedia. Ini bisa di sebabkan oleh beberapa faktor, seperti halnya salah dalam penulisan tautan, pemilik situs tautan yang kita pasang tidak memperpanjang atau lupa untuk memperpanjang domain maupun hostingnya, mengganti domain, server down, profil komentar blog dan sebagainya.

Dalam membangun sebuah situs website maupun blog tentu kita akan menghindari adanya broken links ini karena dapat mempengaruhi kinerja maupun ranking website itu sendiri. Contohnya dalam blog Mari Belajar Coding yang saya bangun untuk membahas berbagai tutorial pemrograman ini, banyak link tautan yang mengarah ke situs download plugin framework dan dokumentasi yang mendukung lainnya.

Untuk mencari apakah situs website terdapat broken link kita bisa menggunakan bantuan broken link checker. Silahkan kunjugi situs www.brokenlinkcheck.com kemudian masukan alamat url website yang akan kita cari broken link nya.

Setelah memasukan alamat website dan menekan button Find broken links, kita akan di arahkan ke halaman seperti dibawah ini.

Masukan Security code kemudian pilih Find broken links now. Situs broken link check akan memproses situs kita. Jika terdapat link yang rusak akan menampilkan detail seperti gambar dibawah ini.

Teman-teman dapat menelusuri dimana letak broken links dengan memilih url pada kolom Page where found diatas. Edit postingan yang terdapat link broken kemudian ganti atau hapus link url tersebut.

Sekian tutorial untuk mencari dan memperbaiki broken link pada artikel blog. Semoga bermanfaat.

Related Search:
Memperbaiki broken link
Mencari dan memperbaiki broken link

Statement Kondisi Percabangan pada Java

2020-01-01T03:18:00.000-08:00

Statement Kondisi Percabangan pada Java. Percabangan merupakan suatu pemilihan statement(pernyataan) yang akan dieksekusi di mana pemilihan tersebut didasarkan atas kondisi tertentu. Dalam pemrograman Java kita dapat menggunakan if else dan switch case untuk menulis statement percabangan.

Penerapan percabangan menggunakan IF terdapat beberapa bentuk, seperti percabangan tunggal, percabangan ganda dan percabangan jamak.

IF Tunggal
Bentuk umum untuk percabangan IF tunggal seperti gambar dibawah ini.


IF (Kondisi)
{
Statement1;
Statement2;

}

Contoh Penerapan dalam program.


public class LatihanIFTunggal {

    public static void main(String[] args){
  int a=7, b=9;
  if (a < b){
   System.out.println("Pernyataan ini bernilai benar");
   System.out.println("Sehingga akan menampilkan");
   System.out.println("Nilai a lebih kecil dari b");
  }
 }
}

Keterangan:
Program diatas menjelaskan bahwa jika kondisi bernilai benar (memenuhi persyaratan) maka statement-statement dalam kurung kurawal akan di kerjakan.

IF Ganda
Bentuk umum untuk percabangan IF ganda seperti gambar dibawah ini.


IF (Kondisi)
{
 Statement1;
}
else
{
 Statement2;
}

Contoh Penerapan dalam program.


public class LatihanIFGanda {

    public static void main(String[] args){
  int a=9, b=7;
  if (a < b){
   System.out.println("Jika bernilai benar");
   System.out.println("Sehingga akan menampilkan");
   System.out.println("Nilai a lebih kecil dari b");
  }else{
   System.out.println("Jika bernilai salah");
   System.out.println("Sehingga akan menampilkan");
   System.out.println("Nilai a lebih besar dari b");   
  }
 }
}

Keterangan:
Program diatas menjelaskan bahwa jika kondisi bernilai benar makan statement setelah kurung kurawal IF akan dikerjakan, sedangkan bila kondisi bernilai salah maka statement setelah kurung kurawal else yang akan di kerjakan.

IF Jamak
Bentuk umum percabangan IF Jamak.


IF (Kondisi1)
{
Statement1;
}
else if (Kondisi2)
{
Statement2;
} 
......
else if (Kondisi ke-n)
{
    Statement ke-n;
}
else
{
    Statement ke-n;
}

Contoh Penerapan dalam program.


public class LatihanIFJamak {

   public static void main(String[]args)
    {
     char nilaiIndeks;
     double nilaiUTS,nilaiUAS,nilaiAkhir;
     
     //contoh data yang dimasukkan
     nilaiUTS=75.0;
     nilaiUAS=60.0;
     
     //menghitung nilai akhir menggunakan rumus di atas
     nilaiAkhir=(0.4*nilaiUTS)+(0.6*nilaiUAS);
     
     if(nilaiAkhir>=80)
     {
      nilaiIndeks='A';
     }
     else if(nilaiAkhir>=70)
     {
      nilaiIndeks='B';
     }
     else if(nilaiAkhir>=50)
     {
      nilaiIndeks='C';
     }
     else if(nilaiAkhir>=30)
     {
      nilaiIndeks='D';
     }
     else
     { 
      nilaiIndeks='E';
     }
     System.out.println("Nilai Akhir\t:" + nilaiAkhir);
     System.out.println("Nilai Indeks\t:" + nilaiIndeks);
    }
}

Keterangan:
Jika kondisi 1 bernilai benar maka statement dalam kurung kurawal if pertama akan di kerjakan. Sedangkan jika kondisi 1 bernilai salah maka akan mengerjakan statement kondisi yang lain setelah else. Namun bila sudah tidak ada statement kondisi lain yang di kerjakan maka akan mengerjakan statement yang berada pada kurung kurawal else terkahir.

Percabangan Switch Case
Bentuk umum percabangan dengan switch case.


Switch (ekspresi)
{
 case nilai_konstan1 : 
  Statement_statement;
 break;

 case nilai_konstan2 : 
  Statement_statement;
 break;

 default
 Statement_statement_alternatif;
}

Dalam bentuk percabangan menggunakan switch case, nilai dari ekspresi dengan nilai konstan akan di bandingkan. Jika nilai ekspresi sama dengan nilai konstan1, maka statement yang berada dalam case pertama(konstan1) akan di kerjakan begitu juga seteruskan nilai akan di bandingkan apakah sama atau tidak.

Contoh penerapan program percabangan menggunakan switch case.


public class LatihanSwitchCase {

    public static void main(String[]args){
        
        int noHari=3;
        
        switch(noHari){
            case 1:
                System.out.println("Hari ke-" +noHari+" adalah Senin");
            break;
            
            case 2:
                System.out.println("Hari ke-" +noHari+" adalah Selasa");
            break;
            
            case 3:
                System.out.println("Hari ke-" +noHari+" adalah Rabu");
            break;
            
            case 4:
                System.out.println("Hari ke-" +noHari+" adalah Kamis");
            break;
            
            case 5:
                System.out.println("Hari ke-" +noHari+" adalah Jum'at");
            break;
            
            case 6:
                System.out.println("Hari ke-" +noHari+" adalah Sabtu");
            break;
            
            case 7:
                System.out.println("Hari ke-" +noHari+" adalah Minggu");
            break;
            
            default:
                System.out.println("Tidak ada hari ke-"+noHari);   
         }
    }
}

Keterangan:
Nilai No hari akan di bandingan dengan nilai dalam case, jika sama maka akan menjalankan statement sesuai dengan nilai no hari.

Contoh program lainnya menggunakan switch case.


import java.io.*;
public class LatihanSwitchCase {

    public static void main(String[]args) throws IOException{
     BufferedReader in=new BufferedReader (new InputStreamReader(System.in));
     
     String Hari;
     int KodeHari;
     
     System.out.println("Masukkan angka hari");KodeHari=Integer.parseInt(in.readLine());
     
     switch (KodeHari)
     {
      case 1:
       Hari="Senin";
      break;
      
      case 2:
       Hari="Selasa";
      break;
      
      case 3:
       Hari="Rabu";
      break;
      
      case 4:
       Hari="Kamis";
      break;
      
      case 5:
       Hari="Jum'at";
      break;
      
      case 6:
       Hari="Sabtu";
      break;
      
      case 7:
       Hari="Minggu";
      break;
      
      default:
       Hari="Kode Tidak Dikenal";
     }
     System.out.println("Hari :"+Hari);
    }
}

Membuat Nomor Acak dengan PHP

2019-12-31T01:20:00.000-08:00

Nomor acak atau random number merupakan sebuah fungsi untuk membuat nomor acak secara otomatis. Dalam pembuatan sebuah aplikasi tentu fungsi random ini sangat berguna seperti pembuatan captcha password, otp sms, generate token, kode qrcode dan sebagainya.

PHP sendiri sudah menyediakan fungsi untuk generate random number secara otomatis menggunakan rand dan mt_rand. Fungsi ini bisa dijalankan di PHP 4, 5 dan 7.

Random Integer
Penggunaan fungsi rand sangat mudah, kita hanya menentukan nilai minimal dan maksimal sesuai kebutuhan berapa nomor yang akan kita acak. Bentuk umum fungsi rand seperti dibawah ini.


rand ( int $min , int $max )

Contoh:


<?php

$rand = rand(10, 50);

echo $rand;

?>

hasil dari program diatas jika dijalankan maka akan mengacak nomor dari nilai 10 hingga 50. Jika teman-teman tidak mengisi nilai min dan maks maka akan menampikan nomor acak dari 0 hingga getrandmax().

Contoh penggunaan mt_rand.


<?php

$mt_rand = mt_rand(1000, 9999);

echo $mt_rand;

?>

Program diatas akan mengacak nomor dari nilai 1000 hingga 9999. Fungsi mt_rand() ini lebih cepat daripada rand().

Shuffle String
Kita juga bisa mengacak gabungan angka dan string karakter dengan fungsi shuffle.


<?php

$karakter = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789';
$shuffle  = str_shuffle($karakter);
echo $shuffle;

?>

Hasil program diatas jika dijalankan seperti gambar dibawah ini.

Untuk menentukan jumlah karakter yang akan kita buat tambahkan fungsi substr. Contoh dibawah ini kita akan menampilkan 5 karakter dari hasil pengacakan.


<?php

$karakter = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789';
$shuffle  = substr(str_shuffle($karakter), 0, 5);
echo $shuffle;

?>

Random Integer & String
Penerapan fungsi acak integer dan string karakter bisa menggunakan fungsi dibawah ini.


<?php


function randomString($length)
{
    $str        = "";
    $characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789';
    $max        = strlen($characters) - 1;
    for ($i = 0; $i < $length; $i++) {
        $rand = mt_rand(0, $max);
        $str .= $characters[$rand];
    }
    return $str;
}


echo randomString(5); //hasil: 5bxqw
echo "<br>";
echo randomString(10); //hasil: U8YjlmXRFJ
echo "<br>";
echo randomString(15); //hasil: yGei7kH3LMHvxaq
echo "<br>";

?>

Membuat Barcode dengan PHP

2019-12-30T01:40:00.000-08:00

Membuat barcode dengan PHP. Barcode merupakan sebuah kode berbentuk batang atau garis yang ketebalan masing-masing garis sesuai dengan isi kodenya. Untuk membaca isi data dalam barcode kita perlu alat pembaca atau barcode scanner.

Penggunaan barcode ini sering kita jumpai di kemasan produk/barang pada swalayan atau minimarket untuk meningkatkan pelayanan dan kecepatan dalam bertransaksi antara kasir dengan customer. Proses input data yang di lakukan oleh kasir akan lebih cepat, tepat dan lebih akurat dengan sekali scan barcode. Pemanfaatan barcode tidak hanya pada kemasan produk saja, akan tetapi sudah banyak penggunaannya untuk hal lain.

Dalam tutorial kali ini kita akan belajar membuat sebuah barcode dengan PHP untuk kebutuhan aplikasi yang akan di buat.

Download library php-barcode untuk mempermudah dalam pembuatan barcode.

Setelah library php barcode selesai di download. ekstrak file tersebut kemudian pindahkan ke dalam folder xampp/htdocs/latihan-barcode.

Untuk mencoba menampilkan barcode, buat file latihan1.php seperti dibawah ini.


<img alt="testing" src="php-barcode-master/barcode.php?text=testing" />

Penggunaan library php barcode ini sangat mudah sekali, kita hanya menambahkan parameter sesuai kebutuhan. Parameter yang bisa di kerjakan oleh library php barcode ini.
text. Merupakan isi dari kode barcode jika di scan.
size. Merupakan ukuran file image barcode, secara default ukuran file image barcode adalah 20.
codetype. Merupakan type barcode secara default tipe barcode yang akan ditampilkan yaitu tipe code 128. Kita bisa merubah menjadi tipe Code 39, Code 2of5, atau Codabar.
orientation, secara default barcode yang akan ditampilkan yaitu horizontal. teman-teman bisa mengganti menjadi vertikal dengan menambah parameter orientation=vertical.
print. akan menampilkan isi kode barcode tepat dibawah gambar. secara default false untuk menampilkan isi kode dibawah gambar gunakan parameter print=true.

Struktur file di dalam folder latihan-barcode seperti gambar dibawah ini.

Baca juga Membuat QR Code dengan PHP

Contoh penggunaan parameter print dan size seperti dibawah ini.


<img src="php-barcode-master/barcode.php?text=12345678&print=true&size=45" />

Hasil:

Buat file baru bernama latihan2.php untuk membuat sebuah form generator barcode.


<!DOCTYPE html>
<html>
<head>
 <title>maribelajarcoding</title>
</head>
<body>
 <div align="center">
  <h2>Membuat Barcode dengan PHP</h2>
  <h4>www.maribelajarcoding.com</h4>

  <form id="formgenerator" method="POST">
   <input type="text" name="kodeBarcode">
   <input type="submit" name="generate" value="Generate">
  </form>
  <br>
  <?php
   if (isset($_POST['generate'])) {
       //cek jika kodebarcode kosong maka baris selanjutnya tidak akan dikerjakan
       if (empty($_POST['kodeBarcode']))
           exit;
       
       //menampilkan file image barcode
       echo '<img src="php-barcode-master/barcode.php?text=' . $_POST['kodeBarcode'] . '&print=true&size=65" />';
       
       //buat folder untuk simpan file image
       $tempdir = "imagebarcode/";
       if (!file_exists($tempdir))
           mkdir($tempdir, 0755);
       
       
       $target_path = $tempdir . $_POST['kodeBarcode'] . ".png";
       
       //cek apakah server menggunakan http atau https
       $protocol = stripos($_SERVER['SERVER_PROTOCOL'], 'https') === 0 ? 'https://' : 'http://';
       
       //url file image barcode 
       $fileImage = $protocol . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . "/php-barcode-master/barcode.php?text=" . $_POST['kodeBarcode'] . "&print=true&size=65";
       
       //ambil gambar barcode dari url diatas
       $content = file_get_contents($fileImage);
       
       //simpan gambar
       file_put_contents($target_path, $content);
   }
   ?>
 </div>
</body>
</html>

Tampilan program:

Membuat Toko Online dengan Wordpress Part 2

2019-12-29T11:10:00.000-08:00

Membuat Toko Online dengan Wordpress

Dalam postingan kali ini kita hendak melanjutkan bimbingan tadinya tentang membuat toko online dengan wordpress. Sehabis sahabat sukses menginstall cms Wordpress serta menginstall tema shop Isle, berikutnya kita hendak menginstall plugin WooCommerce. Plugin Woocomerce sendiri ialah suatu plugin buat menunjang fitur website toko online di wordpress semacam shop, cart, checkout serta sebagainya.

Membuat Toko Online dengan Wordpress Part 2

Silahkan sahabat login admin wordpress( wp- admin) pada web web yang tadinya telah di buat. Seleksi menu plugin di sebelah kiri sidemenu. Sahabat dapat mencari plugin woocomerce dengan mengetikkan pada kolom cari plugin ataupun dapat upload sediri lewat button unggah plugin.

Pasang saat ini setelah itu aktifkan plugin WooCommerce.

Membuat Toko Online dengan Wordpress

Sahabat hendak ditunjukan ke taman wizard setting WooCommerce semacam foto dibawah ini. Isikan alamat toko terletak, mata duit yang hendak digunakan serta tipe produk apa yang sahabat jual, apakah berbentuk raga ataupun digital. Contoh:

Membuat Toko Online dengan Wordpress

Berikutnya Setting Payment yang hendak di pakai, dalam bimbingan ini aku cuma mengaktifkan 2 tata cara payment.

Membuat Toko Online dengan Wordpress

Sehabis setting Payment sahabat hendak ditunjukan pada settingan shipping( pengiriman). Disini ada 2 opsi zona pengiriman, Indonesia serta segala dunia. Sahabat dapat memilah flate rate( harga senantiasa) ataupun gratis shipping. Buat flate rate sendiri kita dapat menonaktifkan kolom harga senantiasa. Isikan kolom satuan berat serta dimensi panjang.

Membuat Toko Online dengan Wordpress

Buat wizard recommended serta activate kamu dapat dapat memilah skip, setelah itu seleksi Create a Product.

Dalam posting suatu product terdapat sebagian settingan semacam judul, deskripsi, product informasi, product image, category serta sebagainya. silahkan isi cocok kebutuhan. Terbitkan product hingga tampilan pada beranda home semacam di dasar ini.

Membuat Toko Online dengan Wordpress

Baca juga

Meningkatkan Ongkos Kirim Indonesia di Wordpress

Membuat Toko Online dengan Wordpress Part 1

2019-12-28T10:46:00.000-08:00

Tidak sedikit perusahaan maupun perorangan yang memanfaatkan teknologi berbasis website untuk menawarkan produk yang mereka jual kepada konsumen. Toko online merupakan sebuah media yang tepat untuk sarana promosi produk tanpa terbatas ruang dan waktu.

Pembuatan website untuk toko online bisa di lakukan dengan berbagai cara seperti memahami bahasa pemrograman kemudian ngoding sendiri, menggunakan bantuan CMS(Sistem manajemen konten) dan sebagainya.

Bagi orang awam di dunia pemrograman tentu akan menyusahkan jika membangun sebuah toko online dengan menulis koding sendiri. Wordpress merupakan CMS yang powerfull untuk membuat sebuah website dengan plugin WooCommerce yang mendukung fitur toko online untuk mempermudah pekerjaan kita.

Pada tutorial kali ini kita akan belajar bagaimana cara membuat sebuah web toko online menggunakan Wordpress dan plugin WooCommerce.

Persiapan
CMS Wordpress
Plugin WooCommerce
thema ShopIsle

Instalasi Wordpress
Dalam instalasi wordpress pada tutorial ini kita akan menggunakan server lokal komputer dengan Xampp control panel dan penyedia hosting gratisan 000webhost untuk kebutuhan pembelajaran. Bagi teman-teman yang sudah menginstall wordpress di hosting silahkan ikuti tutorial selanjutnya.

Install di xampp control panel
Sebelum memulai instalasi wordpress buat database bernama tokoonline di komputer teman-teman.
Silahkan download wordpress melalui link tautan diatas, kemudian ekstrak file hasil download dan pindahkan kedalam directory xampp/htdocs/. Rename folder wordpress dengan nama toko-online. Buka localhost:/toko-online melalui browser kemudian ikuti langkah-langkah instalasinya.
Pilih bahasa yang akan kita digunakan.

Konfigurasi database, isikan nama basis data dengan tokoonline yang sudah di buat tadi kemudian sesuaikan settingan database komputer teman-teman untuk nama pengguna dan kata sandi.

Isikan judul situs nama pengguna dan kata sandi untuk login pada akun wordpress dan terakhir isikan alamat email.

Instalasi wordpress di server lokal telah selesai, teman-teman akan diarahkan pada halaman dasbor wordpress seperti gambar dibawah ini.

Install Wordpress di 000webhost
Silahkan teman-teman kunjungi situs id.000webhost.com kemudian daftarkan akun baru atau bisa login menggunakan akun facebook dan google.
Setelah login di dasbor 000webhost teman-teman bisa pilih create new site. Masukan alamat domain kemudian buat site baru.
Pilih Manage Website, Kemudian pilih install WordPress.

Install Tema ShopIsle
Pilih menu Tampilan pada sisi kiri menu Wordpress, kemudian tambahkan tema baru. Upload file shop-isle.1.1.58.zip tunggu hingga pemasangan tema selesai. Terakhir Aktifkan tema shop ishle.
Tampilan tema shop ishle.

Baca juga Membuat Toko Online dengan Wordpress Part 2

Simpan Data SQL Server dengan PHP

2019-10-14T09:21:00.000-07:00

Selamat datang di blog Mari belajar coding. Jika tutorial sebelumnya kita belajar membuat koneksi database antara SQL Server dengan PHP, tutorial kali ini kita akan belajar membuat aplikasi CRUD sederhana (simpan, edit, hapus dan menampilkan data) menggunakan PHP dan SQL Server.

Simpan Data SQL Server dengan PHP

Pertama-tama silahkan teman-teman buat database terlebih dahulu menggunakan SQL Server dengan nama database akademik dan satu tabel Mhsw.

Setelah database dibuat, kita akan membuat koneksi database dengan PHP seperti dibawah ini. Silahkan sesuaikan servername, uid, dan password yang teman-teman gunakan. Simpan dengan nama koneksi.php.

<?php
$serverName = "HP-PC\SQLEXPRESS"; 
$connectionInfo = array( "Database"=>"akademik", "UID"=>"username", "PWD"=>"password");
$conn = sqlsrv_connect( $serverName, $connectionInfo);

// if( $conn ) {
//      echo "Connection established.<br />";
// }else{
//      echo "Connection could not be established.<br />";
//      die( print_r( sqlsrv_errors(), true));
// }

?>

Buat file index.php untuk menampilkan data dari database ke tabel.

<!DOCTYPE html>
<html>
<head>
 <title>Maribelajarcoding.com</title>
</head>
<body>
 <div align="center">
  <h3>Simpan Data SQL Server dengan PHP<br>maribelajarcoding.com</h3>
  <a href="tambah.php">Tambah Data</a>
  <table border="1" width="700px">
   <thead>
    <tr>
     <th>No</th>
     <th>Nama</th>
     <th>Prodi</th>
     <th>Alamat</th>
     <th>Aksi</th>
    </tr>
   </thead>
   <tbody>
    <?php
     // panggil file koneksi
     include "koneksi.php";
     $sql="SELECT * FROM Mhsw";
     $no=1;
     //eksekusi query menampilkan data dari tabel Mhsw
     $query=sqlsrv_query($conn,$sql) or die(sqlsrv_errors());;
     //mengembalikan data row menjadi array dan looping data menggunakan while
     while ($data=sqlsrv_fetch_array($query)) {
    ?>
     <tr>
      <td><?php echo $no++; ?></td>
      <td><?php echo $data['Nama']; ?></td>
      <td><?php echo $data['Prodi']; ?></td>
      <td><?php echo $data['Alamat']; ?></td>
      <td>
       <a href="edit.php?id=<?php echo $data['IDMhsw']; ?>">Edit</a> |
       <a href="hapus.php?id=<?php echo $data['IDMhsw']; ?>"  onClick="javascript: return confirm('Apakah anda yakin?');">Hapus</a> 
      </td>
     </tr>
    <?php } ?>
   </tbody>
  </table>
 </div>
</body>
</html>

Selanjutnya buat form tambah data. Simpan dengan nama tambah.php.

<!DOCTYPE html>
<html>
<head>
 <title>Maribelajarcoding.com</title>
</head>
<body>
 <div align="center">
  <h3>Simpan Data SQL Server dengan PHP<br>Form Tambah Data</h3>
  <?php
   // panggil file koneksi
   include "koneksi.php";
  ?>
  <table >
   <form method="POST" >
    <tr>
     <td>Nama</td>
     <td><input type="text" name="Nama" id="Nama"></td>
    </tr>
    <tr>
     <td>Prodi</td>
     <td>
      <select name="Prodi" id="Prodi">
       <option disabled="" selected="">-Pilih-</option>
       <option value="Teknik Informatika">Teknik Informatika</option>
       <option value="Manajemen Informatika">Manajemen Informatika</option>
       <option value="Sistem Informasi">Sistem Informasi</option>
      </select>
     </td>
    </tr>
    <tr>
     <td>Alamat</td>
     <td><textarea rows="3" name="Alamat" id="Alamat"></textarea></td>
    </tr>
    <tr>
     <td></td>
     <td>
      <input type="submit" name="simpan" value="Simpan">
      <a href="index.php">Kembali</a>
     </td>
    </tr>
   </form>
  </table>
  <?php
   //eksekusi simpan data
   if (isset($_POST['simpan'])) {
    # code...
    $Nama=$_POST['Nama'];
    $Prodi=$_POST['Prodi'];
    $Alamat=$_POST['Alamat'];
    $sql="INSERT INTO Mhsw(Nama,Prodi,Alamat) VALUES('$Nama','$Prodi','$Alamat')";
    $query=sqlsrv_query($conn,$sql) or die(sqlsrv_errors());
    if ($query) {
     //redirect ke halaman index
     header("Location:index.php");
    }
   }
  ?>
 </div>
</body>
</html>

Kemudian buat form untuk menangani proses saat edit data berdasarkan id mahasiswa. simpan kode dibawah ini dengan nama edit.php.

<!DOCTYPE html>
<html>
<head>
 <title>Maribelajarcoding.com</title>
</head>
<body>
 <div align="center">
  <h3>Simpan Data SQL Server dengan PHP<br>Form Edit Data</h3>
  <?php
   // panggil file koneksi
   include "koneksi.php";

   //ambil data id dari parameter
   $id=$_GET['id'];
   //select data dari tabel Mhsw berdasarkan id
   $sql="SELECT * FROM Mhsw WHERE IDMhsw='$id'";
   
   $query=sqlsrv_query($conn,$sql) or die(sqlsrv_errors());
   $data=sqlsrv_fetch_array($query);
  ?>
  <table >
   <form method="POST" >
    <tr>
     <td>Nama</td>
     <td><input type="text" name="Nama" id="Nama" value="<?php echo $data['Nama'] ?>"></td>
    </tr>
    <tr>
     <td>Prodi</td>
     <td>

      <select name="Prodi" id="Prodi">
       <option disabled="" selected="">-Pilih-</option>
       <!-- cek apakah data dari database sama dengan value option, jika sama maka tambah atribute selected -->
       <option <?php if($data['Prodi']=="Teknik Informatika") echo "selected"; ?> value="Teknik Informatika">Teknik Informatika</option>
       <option <?php if($data['Prodi']=="Manajemen Informatika") echo "selected"; ?> value="Manajemen Informatika">Manajemen Informatika</option>
       <option <?php if($data['Prodi']=="Sistem Informasi") echo "selected"; ?> value="Sistem Informasi">Sistem Informasi</option>
      </select>
     </td>
    </tr>
    <tr>
     <td>Alamat</td>
     <td><textarea rows="3" name="Alamat" id="Alamat"><?php echo $data['Alamat']; ?></textarea></td>
    </tr>
    <tr>
     <td></td>
     <td>
      <input type="submit" name="edit" value="Edit">
      <a href="index.php">Kembali</a>
     </td>
    </tr>
   </form>
  </table>
  <?php
   //eksekusi simpan data
   if (isset($_POST['edit'])) {
    # code...
    //data IDMhsw berasal dari select berdasarkan id
    $IDMhsw=$data['IDMhsw'];

    //data dari form
    $Nama=$_POST['Nama'];
    $Prodi=$_POST['Prodi'];
    $Alamat=$_POST['Alamat'];

    $sql="UPDATE Mhsw SET Nama='$Nama', Prodi='$Prodi', Alamat='$Alamat' WHERE IDMhsw='$IDMhsw'";
    $query=sqlsrv_query($conn,$sql) or die(sqlsrv_errors());
    if ($query) {
     //redirect ke halaman index
     header("Location:index.php");
    }
   }
  ?>
 </div>
</body>
</html>

Terakhir buat file untuk menangani proses hapus data berdasarkan id mahasiswa. hapus.php.

<?php
 // panggil file koneksi
 include "koneksi.php";
 
 //ambil data id dari parameter
 $IDMhsw=$_GET['id'];

 $sql="DELETE FROM Mhsw WHERE IDMhsw='$IDMhsw'";
 $query=sqlsrv_query($conn,$sql) or die(sqlsrv_errors());
 if ($query) {
  //redirect ke halaman index
  header("Location:index.php");
 }
 
?>

Source Code:

crud sqlserver php.zip

Related Search:
Membuat koneksi SQL Server dengan PHP
Simpan data SQL Server dengan PHP
CRUD SQL Server dengan PHP