Thursday, October 26, 2017

Membuat Tabel Responsive dengan bootstrap

     1 comment

Hai... Jumpai lagi..
Kali ini saya akan membuat saya membuat tutorial bagaimana cara membuat tabel responsive menggunakan bootstrap pada perangkat yang kecil atau mempunyai ukuran setara atau lebih kecil dari 768px, maka akan terdapat scroll yang secara horizontal.
Dalam pembuatan tabel responsive di bootstrap, ada beberapa class untuk membuat berbagai style atau bentuk pada tabel yang akan dibuat. beberapa perbedaan tabel :

dan dari beberapa class diatas ada juga class untuk mengubah warna setiap kolom dan baris pada tabel. Class ini dapat digunakan sesuai dengan kebutuhan. Untuk dapat lebih memahaminya, anda dapat menerapkan script dibawah ini.


Dalam pembuatan tabel, file bootstrap yang dibutuhkan adalah

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/css/table-responsive.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

script css letakkan setelah <head> dan sebelum </head>
Gimana gan, cukup mudah bukan ?. Semoga bermanfaat !

Cara Show-hide Password menggunakan bootstrap show-password js Plugin

     2 comments


Ingin melihat password yang anda ketik ? Fasilitas ini memastikan anda untuk mengisi password dengan benar. Anda dapat melihat hasil ketikan password pada form login. Bagaimana cara membuat fasilitas ini ? Jangan khawatir, di tutorial ini saya akan membagikan script gratis yang bisa anda gunakan pada form login.
Coba pelajari layout dan kodenya. Untuk melihat hasil priview silahkan anda isi terlebih dahulu username dan password maka akan terlihat simbol mata. Klik dan tahan simbol ini untuk melihat password yang baru saja anda ketik. Selamat Mencoba.

Script < / > :
=========|

css dan js nya letakkan setelah <head> dan sebelum </head>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
dan html nya letakkan setelah <body> dan sebelum </body>

 <div class="container">
<form>
<div class="form-group">
<label>Username:</label>
<input type="text" name="username" class="form-control">
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" id="password" name="password" class="form-control" data-toggle="password">
</div>
<div class="form-group">
<button class="btn btn-success">Submit</button>
</div>
</form>
</div>
<script type="text/javascript">
$("#password").password('toggle');
</script>

 Semoga berhasil !

Wednesday, October 25, 2017

Mengkonversi Waktu menjadi waktu lampau

     No comments
Pada sebuah web sangat tidak menarik jika pada tanggal atau waktu posting sebuah artikel atau apalah namanya masih menggunakan tanggal format dari database. 
Sangat lebih baik lagi jika artikel yang diposting memiliki sebuah tanggal atau waktu tapi lebih baik lagi jika waktu atau tanggal tersebut di konversikan menjadi waktu lampau kapan artikel itu di posting. Misalnya kita posting artikel seperti saat ini dan beberapa detik atau jam atau mungkin hari, bulan, tahun maka akan menjadi sebuah waktu yang lampau saat artikel tersebut di posting ketika dilihat di waktu yang berbeda.

Oke langsung TKP aja biar simpel dan gak membingungkan,


 
<?php
date_default_timezone_set("Asia/Jakarta");

function datediff($tgl1, $tgl2){
$tgl1 = strtotime($tgl1);
$tgl2 = strtotime($tgl2);
$diff_secs = abs($tgl1 - $tgl2);
$base_year = min(date("Y", $tgl1), date("Y", $tgl2));
$diff = mktime(0, 0, $diff_secs, 1, 1, $base_year);
return array( 
 date("Y", $diff) - $base_year, 
 "months_total" => (date("Y", $diff) - $base_year) * 12 + date("n", $diff) - 1, 
 "months" => date("n", $diff) - 1, 
 "days_total" => floor($diff_secs / (3600 * 24)), 
 "days" => date("j", $diff) - 1, 
 "hours_total" => floor($diff_secs / 3600), 
 "hours" => date("G", $diff), 
 "minutes_total" => floor($diff_secs / 60), 
 "minutes" => (int) date("i", $diff), 
 "seconds_total" => $diff_secs, 
 "seconds" => (int) date("s", $diff) 
);
}
$tgl1 = '2017-10-24 23:39:00';
$tgl2 = date("Y-m-d H:i:s");
$a = datediff($tgl1, $tgl2);
echo 'tanggal 1 = '.$tgl1; echo '
';
echo 'tanggal 2 = '.$tgl2; echo '
';
echo 'Selisih = '.$a['years'].' tahun '.$a['months'].' bulan '.$a['days'].' hari '.$a['hours'].' jam '.$a['minutes'].' menit '.$a['seconds'].' detik';
?>

Kurang lebih script nya seperti itu dan silahkan dicopas lalu dicoba !
itu hanya sesimpel-simpelnya aja gan, untuk lebih bagus nya kembangkan lagi biar sama-sama belajar. Hehehehe...
Semoga Bermanfaat !

Saturday, April 29, 2017

Membuat Kotak Galeri

     No comments
HALAMAN khusus galeri, gambar, atau image diperlukan bagi blog toko online untuk menampilkan koleksi produk atau barang jualan.
Web pribadi juga bisa membuat halaman statis berisi galeri atau koleksi gambar pilihan.
Cara membuatnya cukup mudah, dan biasanya masalah yang sering ditemui jika kita memasukkan gambar lebih dari satu, maka posisi gambar tidak akan sejajar horizontal, tapi akan berderet vertikal.
Tutorial kali ini saya akan membagikan solusinya, mau tau ?
copas kode dibawah :





<html>

<head>


<title>Galeri</title>


<style type="text/css">


<!--


* {


margin: 0;


padding: 0;


}




body {


background: #333;


}




div {


width: 900px;


margin: 0 auto;


overflow: auto;


}




ul {


list-style-type: none;


}




li img {


float: left;


margin: 10px;


border: 5px solid #fff;




-webkit-transition: box-shadow 0.5s ease;


-moz-transition: box-shadow 0.5s ease;


-o-transition: box-shadow 0.5s ease;


-ms-transition: box-shadow 0.5s ease;


transition: box-shadow 0.5s ease;


}




li img:hover {


-webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9); 


box-shadow: 0px 0px 7px rgba(255,255,255,0.9);


}


-->


</style>


</head>


<body>


<div>


<ul>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


<li><img src="150x150.gif"></li>


</ul>


</div>


</body>


</html>

Jadinya bakal seperti gambar


Semoga Bermanfaat !

Menu Vertikal Dengan Gambar

     No comments
Dalam membangun sebuah web, menu memiliki peran yang sangat penting, selain mempermudah mencari artikel atau info dari sebuah web yang dituju, menu juga berperan mempercantik halaman web.
Disini saya akan membuat menu navigasi vertikal disertai dengan gambar.
kodenya dibawah, langsung copas aja biar cepat, hehehehee...





<html><head>



<title>Menu Dengan Gambar</title>



<style type="text/css">



<!--



* {margin: 0; padding: 0;}





div {



margin: 20px;



}





ul {



list-style-type: none;



width: 500px;



}





h3 {



font: bold 20px/1.5 Helvetica, Verdana, sans-serif;



}





li img {



float: left;



margin: 0 15px 0 0;



}





li p {



font: 200 12px/1.5 Georgia, Times New Roman, serif;



}





li {



padding: 10px;



overflow: auto;



}





li:hover {



background: #eee;



cursor: pointer;



}



-->



</style>



</head>



<body>



<div>



<ul>



<li>



<img src="1.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>





<li>



<img src="2.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>





<li>



<img src="3.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>





<li>



<img src="4.jpg">



<h3>Headline</h3>



<p>Lorem ipsum dolor sit amet...</p>



</li>



</ul>



</div>



</body>



</html>

kalau copasnya benar gambarnya bakal begini nih

  OKE.........


Membuat Menu Navigasi Vertikal Sederhana

     No comments
Pada sebuah web perlu adanya menu navigasi guna untuk mempermudah user atau pengguna dalam mencari artikel dala halaman web yang dituju, tanpa adanya menu user akan mengalamai kesulitan mendapatkan info atau artikel yang dicari.
Nah, disini saya akan berbagi sedikit tutorial membuat menu navigasi vertikal yang sederhana dan semoga saja bermanfaat bagi agan yang membaca tutorial ini.
kodenya sebagai berikut :





<html><head>



<title>Menu Navigasi Sederhana</title>



<style type="text/css">



<!--



div {



width: 200px;



}





h2 {



font: 400 40px/1.5 Helvetica, Verdana, sans-serif;



margin: 0;



padding: 0;



}





ul {



list-style-type: none;



margin: 0;



padding: 0;



}





li {



font: 200 20px/1.5 Helvetica, Verdana, sans-serif;



border-bottom: 1px solid #ccc;



}





li:last-child {



border: none;



}





li a {



text-decoration: none;



color: #000;



display: block;



width: 200px;





-webkit-transition: font-size 0.3s ease, background-color 0.3s ease;



-moz-transition: font-size 0.3s ease, background-color 0.3s ease;



-o-transition: font-size 0.3s ease, background-color 0.3s ease;



-ms-transition: font-size 0.3s ease, background-color 0.3s ease;



transition: font-size 0.3s ease, background-color 0.3s ease;



}





li a:hover {



font-size: 30px;



background: #f6f6f6;



}





-->



</style>



</head>



<body>



<div>



<h2>Navigasi Vertikal Sederhana</h2>



<ul>



<li><a href="#">Menu 1</a></li>



<li><a href="#">Menu 2</a></li>



<li><a href="#">Menu 3</a></li>



<li><a href="#">Menu 4</a></li>



<li><a href="#">Menu 5</a></li>



</ul>



</div>



</body>



</html>

kalau sudah  dicopas dan disimpan dengan benar maka tampilannya akan seperti gambar dibawah :


Thursday, April 13, 2017

Membuat CardFan Pada Image Dengan CSS

     No comments
Animasi dalam sebuag website itu sangatlah penting untuk membuat content web lebih interaktif , terlebih lagi animasi yang digunakan sangat menarik, misalnya slider, pop up gambar dan juga animasi-animasi lainnya. Tapi, dikesempatan kali ini saya akan berbagi trik membuat cardfan pada gambar, itu seperti membuat latar gambar dibalik gambar. Contoh seperti pada gambar :


Untuk kodingnya tidak terlalu panjang dan ribet, kodingnya dibawah :





<!doctype html>



<html><head>



<title>Cardfan</title>



<style type="text/css">



<!--



#cardfan, #cardfan img { width: 400px; height: 350px; }



#cardfan { margin: 0 auto; }



#cardfan img { border: 32px solid #ffe;



box-shadow: 12px 12px 10px rgba(0, 0, 0, 0.2);



position: absolute;



transform-origin: center 300px;



}



#cardfan:hover img:first-child {



transform: rotate(25deg);



}



#cardfan:hover img:last-child {



transform: rotate(−25deg);



}



-->



</style>



</head>



<body>



<div id="cardfan">



<img src="gambar agan. disini" alt="terserah agan">



<img src="gambara agan disini" alt="terserah agan">



</div>



</body>



</html>

Catatan:
Untuk tulisan berwarna merah ganti dengan nama gambar yang ingin ditampilkan
misalnya, /image/gambar.jpg

Selamat mencoba dan semoga berhasil !

Wednesday, April 12, 2017

Membuat Tabel Keren Dengan Caption

     No comments
Pada tutorial kali ini saya akan membagikan contoh membuat tabel sederhana yang mudah dipahami struktur syntaxnya. Untuk membuat membuat desain tabel ini silahkan ikuti langkah-langkah berikut :



kode CSS :
table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 5px;

        table-layout: auto;

}
caption { background: #444;

          caption-side: top;

          color: #fff;

          font-weight: bold;

          line-height: 1.4;

          margin: 0 5px;

          padding: 15px;

}

caption h2 { font-size: 20px;

             margin: 0 0 10px 0;

}

caption p { font-size: 16px;

            margin: 0;

}

thead th,

tfoot th,

tfoot td { background: #eee;

}

th, td { padding: 10px;

}

thead th:first-child {

  text-align: left;

}

tbody th,

tfoot th { text-align: left;

}

#kuantitas-column { width: 200px;

}

#harga-column { background: #ddd;

}

kode html : 

<body>



<table>

  <caption>

    <h2>Tabel Inventarisasi Barang</h2>

    <p>Anda dapat memanfaatkan tabel ini untuk menginventarisasi

       semua barang kebutuhan Anda.</p>

  </caption>

  <colgroup>

    <col id="produk">

    <col id="kuantitas">

    <col id="harga">

    <col id="total">

  </colgroup>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>
</body>
karena css nya tidak banyak sebaiknya diibuat dalam satu file saja agar tidak terlalu banyak membuat file pada directory

untuk kode lengkapnya :

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>Tabel Keren Dengan Caption</title>

<style type="text/css">

<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 5px;

        table-layout: auto;

}



caption { background: #444;

          caption-side: top;

          color: #fff;

          font-weight: bold;

          line-height: 1.4;

          margin: 0 5px;

          padding: 15px;

}
caption h2 { font-size: 20px;
    margin: 0 0 10px 0;

}
caption p { font-size: 16px;
          margin: 0;

}
thead th,
tfoot th,
tfoot td { background: #eee;
}
th, td { padding: 10px;
}
thead th:first-child {
  text-align: left;
}
tbody th,
tfoot th { text-align: left;
}
#kuantitas-column { width: 200px;
}
#harga-column { background: #ddd;
}
-->

</style>

</head>

<body>

<table>

  <caption>

    <h2>Tabel Inventarisasi Barang</h2>

    <p>Anda dapat memanfaatkan tabel ini untuk menginventarisasi

       semua barang kebutuhan Anda.</p>

  </caption>

  <colgroup>

    <col id="produk">

    <col id="kuantitas">

    <col id="harga">

    <col id="total">

  </colgroup>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

</body>
</html>

setelah semua telah selesai maka akan menghasilkan tampilan seperti pada gambar


Selamat mencoba dan semoga bermanfaat !

Tuesday, April 11, 2017

Menampilkan Value Combobox Dengan Javascript

     No comments
Combobox memiliki banyak manfaat salah satunya untuk menampilkan data saat kita klik,
Langsung saja ke koding, dibawah ini :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
 
<script>
function tampilkan(){
 
  var nama_data=document.getElementById("form1").select1.value;
  var p_kontainer=document.getElementById("container");
 
  if (nama_data=="my web1")
    {
        p_kontainer.innerHTML="Klik untuk melihat <a target='_blank' onclick='new windows' href='http://www.semuaadalahpengetahuan.blogspot.co.id'>My Website</a>";
    }
  else if (nama_data=="my web2")
    {
        p_kontainer.innerHTML="Klik untuk <a target='_blank' href='http://www.semuaadalahpengetahuan.blogspot.co.id'>My Website</a>";
    }
  else if (nama_data=="my web3")
    {
        p_kontainer.innerHTML="Klik disini <a target='_blank' href='http://www.semuaadalahpengetahuan.blogspot.co.id'>My Website</a>";
    }else{
  p_kontainer.innerhtml="";
 }
}
</script>
</head>
<body>
<h2>Menampilkan Hasil Form HTML dengan JavaScript</h2>
 
<form id="form1" name="form1" onsubmit="return false">
  <label for="select1">Pilih : </label>
  <select id="select1" name="select1" onclick="tampilkan()">
 <option value="">Pilih
    <option value="my web1">My Website</option>
    <option value="my web2">My Website</option>
    <option value="my web3">My Website</option>
  </select>
  
</form>
 
<p id="container"></p>
 
</body>
</html>

Membuat Form Login Keren Dengan HTML dan CSS

     No comments
Dalam pemebuatan sebuah web perlu form login untuk membedakan user dengan admin, untuk itu perlu form yang keren dan enak dilihat mata serta simple.
langsung saja ke koding css nya sebagai berikut :

<!--
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #404040;
  background: #2d4259;
}

.register-judul {
  width: 270px;
  line-height: 43px;
  margin: 50px auto 20px;
  font-size: 19px;
  font-weight: 500;
  color: white;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  background: #d7604b;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #dc745e, #d45742);
  background-image: -moz-linear-gradient(top, #dc745e, #d45742);
  background-image: -o-linear-gradient(top, #dc745e, #d45742);
  background-image: linear-gradient(to bottom, #dc745e, #d45742);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}

.register {
  margin: 0 auto;
  width: 230px;
  padding: 20px;
  background: #f4f4f4;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);
}

input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.register-masukan {
  display: block;
  width: 100%;
  height: 38px;
  margin-top: 2px;
  font-weight: 500;
  background: none;
  border: 0;
  border-bottom: 1px solid #d8d8d8;
}
.register-masukan:focus {
  border-color: #1e9ce6;
  outline: 0;
}

.register-tombol {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 25px;
  font-size: 16px;
  font-weight: bold;
  color: #494d59;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  background: #fcfcfc;
  border: 1px solid;
  border-color: #d8d8d8 #d1d1d1 #c3c3c3;
  border-radius: 2px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
  -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);
}

.register-tombol:active {
  background: #eee;
  border-color: #c3c3c3 #d1d1d1 #d8d8d8;
  background-image: -webkit-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: -moz-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: -o-linear-gradient(top, #eeeeee, #fcfcfc);
  background-image: linear-gradient(to bottom, #eeeeee, #fcfcfc);
  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);
}

.register-tombol:focus {
  outline: 0;
}

.register-tukar {
  height: 32px;
  margin-bottom: 15px;
  padding: 4px;
  background: #6db244;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #60a83a, #7dbe52);
  background-image: -moz-linear-gradient(top, #60a83a, #7dbe52);
  background-image: -o-linear-gradient(top, #60a83a, #7dbe52);
  background-image: linear-gradient(to bottom, #60a83a, #7dbe52);
  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);
}

.register-tukar-input {
  display: none;
}

.register-tukar-label {
  float: left;
  width: 50%;
  line-height: 32px;
  color: white;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.register-tukar-input:checked + .register-tukar-label {
  font-weight: 500;
  color: #434248;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
  background: white;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);
  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);
  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

:-moz-placeholder {
  color: #aaa;
  font-weight: 300;
}

::-moz-placeholder {
  color: #aaa;
  font-weight: 300;
  opacity: 1;
}

::-webkit-input-placeholder {
  color: #aaa;
  font-weight: 300;
}

:-ms-input-placeholder {
  color: #aaa;
  font-weight: 300;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

-->


dan untuk koding htmlnya dibawah ini : 

<body>
  <h1 class="register-judul">Selamat Datang</h1>
  <form class="register" action="" method="post">
    <!--div class="register-tukar">
      <input type="radio" name="web" value="GPIB EKKLESIA DUMAI" id="gpib" class="register-tukar-input" checked>
      <label for="gpib" class="register-tukar-label">GPIB</label>
      <input type="radio" name="web" value="APRIL YANTONIUS SIHURA" id="aprilucyanto" class="register-tukar-input">
      <label for="aprilucyanto" class="register-tukar-label">YANTONIUS S.</label>
    </div-->
    <input type="email" class="register-masukan" placeholder="Alamat Email">
    <input type="password" class="register-masukan" placeholder="Password">
    <input type="submit" value="Login" class="register-tombol">
  </form>
</body>


Kalau Untuk kode Lengkapnya :

<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>contoh css 8.1</title>

<style type="text/css">

<!--

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  font: inherit;

  vertical-align: baseline;

}



article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

  display: block;

}



body {

  line-height: 1;

}



ol, ul {

  list-style: none;

}



blockquote, q {

  quotes: none;

}



blockquote:before, blockquote:after,

q:before, q:after {

  content: '';

  content: none;

}



table {

  border-collapse: collapse;

  border-spacing: 0;

}



body {

  font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;

  color: #404040;

  background: #2d4259;

}



.register-judul {

  width: 270px;

  line-height: 43px;

  margin: 50px auto 20px;

  font-size: 19px;

  font-weight: 500;

  color: white;

  color: rgba(255, 255, 255, 0.95);

  text-align: center;

  text-shadow: 0 1px rgba(0, 0, 0, 0.3);

  background: #d7604b;

  border-radius: 3px;

  background-image: -webkit-linear-gradient(top, #dc745e, #d45742);

  background-image: -moz-linear-gradient(top, #dc745e, #d45742);

  background-image: -o-linear-gradient(top, #dc745e, #d45742);

  background-image: linear-gradient(to bottom, #dc745e, #d45742);

  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

}



.register {

  margin: 0 auto;

  width: 230px;

  padding: 20px;

  background: #f4f4f4;

  border-radius: 3px;

  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3);

}



input {

  font-family: inherit;

  font-size: inherit;

  color: inherit;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.register-masukan {

  display: block;

  width: 100%;

  height: 38px;

  margin-top: 2px;

  font-weight: 500;

  background: none;

  border: 0;

  border-bottom: 1px solid #d8d8d8;

}

.register-masukan:focus {

  border-color: #1e9ce6;

  outline: 0;

}



.register-tombol {

  display: block;

  width: 100%;

  height: 42px;

  margin-top: 25px;

  font-size: 16px;

  font-weight: bold;

  color: #494d59;

  text-align: center;

  text-shadow: 0 1px rgba(255, 255, 255, 0.5);

  background: #fcfcfc;

  border: 1px solid;

  border-color: #d8d8d8 #d1d1d1 #c3c3c3;

  border-radius: 2px;

  cursor: pointer;

  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);

  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);

  -webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);

  box-shadow: inset 0 -1px rgba(0, 0, 0, 0.03), 0 1px rgba(0, 0, 0, 0.04);

}



.register-tombol:active {

  background: #eee;

  border-color: #c3c3c3 #d1d1d1 #d8d8d8;

  background-image: -webkit-linear-gradient(top, #eeeeee, #fcfcfc);

  background-image: -moz-linear-gradient(top, #eeeeee, #fcfcfc);

  background-image: -o-linear-gradient(top, #eeeeee, #fcfcfc);

  background-image: linear-gradient(to bottom, #eeeeee, #fcfcfc);

  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);

  box-shadow: inset 0 1px rgba(0, 0, 0, 0.03);

}



.register-tombol:focus {

  outline: 0;

}



.register-tukar {

  height: 32px;

  margin-bottom: 15px;

  padding: 4px;

  background: #6db244;

  border-radius: 2px;

  background-image: -webkit-linear-gradient(top, #60a83a, #7dbe52);

  background-image: -moz-linear-gradient(top, #60a83a, #7dbe52);

  background-image: -o-linear-gradient(top, #60a83a, #7dbe52);

  background-image: linear-gradient(to bottom, #60a83a, #7dbe52);

  -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);

  box-shadow: inset 0 1px rgba(0, 0, 0, 0.05), inset 1px 0 rgba(0, 0, 0, 0.02), inset -1px 0 rgba(0, 0, 0, 0.02);

}



.register-tukar-input {

  display: none;

}



.register-tukar-label {

  float: left;

  width: 50%;

  line-height: 32px;

  color: white;

  text-align: center;

  text-shadow: 0 -1px rgba(0, 0, 0, 0.2);

  cursor: pointer;

}



.register-tukar-input:checked + .register-tukar-label {

  font-weight: 500;

  color: #434248;

  text-shadow: 0 1px rgba(255, 255, 255, 0.5);

  background: white;

  border-radius: 2px;

  background-image: -webkit-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -moz-linear-gradient(top, #fefefe, #eeeeee);

  background-image: -o-linear-gradient(top, #fefefe, #eeeeee);

  background-image: linear-gradient(to bottom, #fefefe, #eeeeee);

  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.1);

}



:-moz-placeholder {

  color: #aaa;

  font-weight: 300;

}



::-moz-placeholder {

  color: #aaa;

  font-weight: 300;

  opacity: 1;

}



::-webkit-input-placeholder {

  color: #aaa;

  font-weight: 300;

}



:-ms-input-placeholder {

  color: #aaa;

  font-weight: 300;

}



::-moz-focus-inner {

  border: 0;

  padding: 0;

}



-->

</style>

</head>

<body>

  <h1 class="register-judul">Selamat Datang</h1>

  <form class="register" action="" method="post">

    <!--div class="register-tukar">

      <input type="radio" name="web" value="GPIB EKKLESIA DUMAI" id="gpib" class="register-tukar-input" checked>

      <label for="gpib" class="register-tukar-label">GPIB</label>

      <input type="radio" name="web" value="APRIL YANTONIUS SIHURA" id="aprilucyanto" class="register-tukar-input">

      <label for="aprilucyanto" class="register-tukar-label">YANTONIUS S.</label>

    </div-->

    <input type="email" class="register-masukan" placeholder="Alamat Email">

    <input type="password" class="register-masukan" placeholder="Password">

    <input type="submit" value="Login" class="register-tombol">

  </form>

</body>

</html>

Tuesday, April 4, 2017

Membuat Tabel Keren dengan HTML dan CSS

     No comments
Pada tutorial kali ini saya akan membuat Tabel pada HTML dengan CSS.

Berikut adalah tampilan gambar dari tutorial ini :


Langsung saja elemen css dibawah ini :
<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 10px 5px;

        table-layout: auto;

        empty-cells: hide;

}

thead th,

tfoot th,

tfoot td { background: #eee;

}

th, td { border: 1px solid #ccc;

         padding: 10px;

}

thead th:first-child {

  text-align: left;

}

tbody th,

tfoot th { text-align: left;

}

tbody tr:nth-child( even ) {

  background: #ddd;

}

-->


dan berikut adalah kode untuk tabel standar :

<table>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

dan untuk kode lengkapnya :

<html>

<head>

<title>Tabel Keren dengan CSS</title>

<style type="text/css">

<!--

table { width: 600px;

        font-size: 14px;

        font-family: helvetica, arial, sans-serif;

        border-collapse: separate;

        border-spacing: 10px 5px;

        table-layout: auto;

        empty-cells: hide;

}



thead th,

tfoot th,

tfoot td { background: #eee;

}



th, td { border: 1px solid #ccc;

         padding: 10px;

}



thead th:first-child {

  text-align: left;

}



tbody th,

tfoot th { text-align: left;

}



tbody tr:nth-child( even ) {

  background: #ddd;

}

-->

</style>

</head>

<body>



<table>

  <thead>

    <tr>

      <th scope="col">Produk</th>

      <th scope="col">Kuantitas</th>

      <th scope="col">Harga</th>

      <th scope="col">Total</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <th scope="row">Barang 1</th>

      <td>9</td>

      <td>Rp. 129.99</td>

      <td>Rp. 1.169.91</td>

    </tr>

    <tr>

      <th scope="row">Barang 2</th>

      <td>27</td>

      <td>Rp. 79.99</td>

      <td>Rp. 2.159.73</td>

    </tr>

    <tr>

      <th scope="row">Barang 3</th>

      <td>623</td>

      <td>Rp. 4.99</td>

      <td>Rp. 3.108.77</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <th scope="row">Total</th>

      <td>659</td>

      <td></td>

      <td>Rp. 6.438.41</td>

    </tr>

  </tfoot>

</table>

</body>

</html>




Saturday, February 18, 2017

Membuat Menu Horizontal

     No comments
Cara yang paling sederhana untuk membuat menu horizontal dengan menggunakan list ialah
mengubah properti display dari elemen li menjadi bernilai inline. Dengan mengubah
properti ini, elemen li yang awalnya merupakan block level element akan berubah menjadi inline
level element, dan dapat saling tersusun secara horizontal.

Begitu mengubah nilai properti display menjadi inline, penanda daftar akan langsung hilang,
dan setiap elemen dalam daftar akan saling bergabung. Idealnya, kita harus memberikan jarak
secara manual menggunakan padding ataupun margin.
Kode HTML di bawah:


Dipadukan dengan script CSS berikut :


akan menghasilkan seperti gambar dibawah
Kita dapat memodifikasi sedikit CSS untuk membuat menu menjadi lebih indah
berikut script CSS:



dengan hasil seperti gambar dibawah


semoga bermanfaat !! 

Cara Membuat Menu Navigasi

     No comments
List sebagia Menu

 Membuat sebuah website yang terdiri dari beberapa atau banyak halaman. Untuk mempermudah pengguna dalam melakukan navigasi pada website kita, tentunya kita harus menyediakan menu yang diakses dan dilihat oleh pengguna.
Karena hal tersebut, elemen navigasi merupakan salah satu yang paling penting  dan hampir selalu ditemukan dalam sebuah website.

Menu Vertikal Menggunakan List
Sebuah menu dikatakan vertikal jika menu tersebut ditampilkan secara menurun kebawah. Misalkan


Kita dapat mengaplikaskan CSS untuk menggantikan warna latar belakang sari setiap li, kemudian menghilangkan penanda daftar, memberikan lebar yang sama dan berbagai pengukuran lainnya sehingga didapatkan kotak penuh yang menyerupai menu, seperti berikut :


Sehingga kita akan mendapatkan tampilan seperti gambar dibawah


Teks dari menu diatas masih belum selesai, kita perlu menambahkan sedikir kode untuk mengubah teks didalam menjadi terlihat dengan jelas, tidak bergaris bawah, serta memnuhi seluruh blok, scriptnya :


Sehingga hasil akhir dari script menu navigasi diatas seperti gamabar dibawah

Oiya, hampir kelupaan
Unutk membuat menu perlu diingat dalam pembuatan menu ialah bahwa kita harus memberitahukan pengguna dengan mudah dimana menu yang dipilihnya, misal kita dapat merubah warna warna latar dan teks serta menebalkan teks ketika pengguna sedang berada dalam satu halaman. Keberadaan pengguna dapat ditandai dengan sebuah class baru, yang diberikan secara dinamis sesuai dengan halamannya.
script css untuk mendapatkan efek tersebut


hasil yang akan kita dapatkan ,

Semoga bermanfaat !

Cara Menghubungkan HTML, PHP dan Database

     No comments
Bingung bagaimana cara menghubungkan database ke html dan php dan database agar web menjadi lebih dinamis. Oke, disini saya akan menuliskan caranya, tapi kalau masih ada yang kurang benar tolong dikoreksi ya, karena saya juga masih belajar hehehehe.....
Berikut langkah-langkahnya :
1. Buat Database dengan nama biodata, nama tabel biodata

2. Buat file baru dengan ekstensi.php. (contoh.php)
3. Isikan kode html pada file yang telah dibuat. Misal


4. Setelah coding html selesai tambahkan script PHP, berikut scriptnya


Silahkan mencoba, semoga bermanfaat ! 

Friday, February 17, 2017

Cara Mudah Mempelajari Konversi Bilangan Binary, Desimal dan Hexadesimal

     No comments
1. Konversi Bilangan Desimal ke Binary
Contoh Soal :
Coba konversikan bilangan desimal ke bilangan binary, dimana angka bilangan desimal yang dikonversikan adalah angka 67.

67 : 2 -> 1
33 : 2 -> 1
16 : 2 -> 0
8 : 2 -> 0
4 : 2 -> 0
2 : 2 -> 0
1
jadi, 67 = 1000011
Penjelasan,
kita akan mengkonversikan angka 67 dari bilangan desimal ke biner, langkah pertama yang harus kita lakukn adalah membagi angka yang akan dikonversikan dengan angka 2, kemudian jika hasil bagi memilki sisa maka sisanya bernilai 1 dan jika hasil bagi tidak memiliki sisa makan nilainya 0. Hasil dari bagi inilah yang merupakan hasil dari kenversi bilangan.

2. Konversi Bilangan Binary ke Desimal
Contoh soal :
Konversikan bilangan binary ke desimal, dimana  angka binary yang akan dikonversikan adalah 1000011

1000011 = (1 x (2-7)) + (0 x (2-6)) + .......
(1 x 26) + ( 0 x 25) +  (0 x 24) + (0 x 23) + (0 x 22) + (1 x 21) + (1 x 20)
= 26 + 0 + 0 + 0 + 0 + 21 + 20 = 67

Penjelasan:
Bilangan biner yang akan dikonversikan dengan 2n-1 seperti contoh diatas, kemudian jumlahkan setiap hasil perkalian, dimana n  adalah jumlah banyaknya atau jumlah angka pada bilangan biner yang akan dikonversikan. Misal bilangan biner diatas 1000011 terdapat 7 buah angka, jadi untuk merubah ke bilangan desimal kita perlu mengalikannya dengan 2n-1.

3. Konversi Bilangan Desimal ke Hexadesimal
Contoh soal :
Konversikan bilangan desimal ke hexadesimal, dimana angka desimal yang akan dikonversikan adalah 30

30 : 16 = 1, sisanya 14(E)
jadi, dec 30 = hex 1E


langkah pertama adalah membagi angka bilangan desimal yang akan dikonversikan dengan angka 16, kemudian tulis hasil bagi, jika tidak habis dibagi 16 tulis sisa pembagian disamping tulisan hasil, kemudian jika hasil bagi lebih besar dari 16 maka hasil bagi itu sendiri dibagi dengan 16.

contoh lain :
160 : 16 = 10(A) sisa 0
jadi, dec 160 = hex A0

4. Konversi Bilangan Hexadesimal ke Desimal
Contoh soal :
Konversikan bilangan hexadseimal ke desimal, dimana angka yang akan dikonversikan adalah 1E dan 188

1E = (1 x 161) (14 x 160) = 30
188 = (1 x 162) (1 x 161) (1 x 160) = 256 + 16 + 8 = 280

langkah yang dilakukan hanya kebalikan dari  konversi bilangan desimal ke hexadesimal, langkah pertama adalah mengalikan angka bilangan hexadesimal yang akan dikonversikan dengan angka 16n-1, kemudian jumlahkan hasil perkalian seperti contoh diatas, dimana n adalah banyaknya atau jumlah angka bilangan hexadesimal yang akan dikonversikan, misal bilangan diatas 188  terdapat 3 buah angka 1,1,8.

Thursday, February 16, 2017

Dasar - dasar Bahasa Pemrograman Java

     No comments
1. Program Hello Word !

 public class Helloworld {
    public static void main (String[] args) {
        System.out.printIn("Hello World");
    }
}
Pada kode diatas, kita telah membuat sebuah program sederhana yang menampilkan tulisan "Hello World" pada console. Terdapat beberapa aturan dalam membuat program java yaitu :

  1. Nama file harus sama dengan nama kelas program, misal pada kode diatas nama kelasnya adalah Hellworld, maka nama files harus Helloworld.java.
  2. Hanya boleh terdapat satu kelas public pada sebuah file.
  3. Kelas yang menjadi program harus memiliki metode public static void main(String[]args)
  4. Terminal pada java menggunakan tanda ; (titik koma)
2. Tipe Data

Terdapat beberapa tipe data primitive yang ada di java yaitu :
String bukanlah merupakan tipe data di java, String merupakan object, namun string memiliki keunikan yaitu string dapat langsung dibuat tanpa harus membuat object.

3. Variabel

Variabel merupaka sesuatu yang digunakan untuk menampung sebuah data. Sebuah variabel harus ada dalam sebuah kelas atau metode. Pembuatan sebuah variabel di java terlihat pda kode dibawah ini,

Tipevariabel namavariabel;

Tipe variabel dapat berupa tipe data atau kelas, misal :

int nilai;
char indexnilai;

untuk menambahkan nilai ke sebuah variabel, maka dapa menggunakan tanda == (sama dengan), misal jika kita akan menambahkan nilai 100 pada variabel nilai dan A pada variabel indexnilai, maka dapat terlihat pada kode dibawah ini,

int nilai;
char indexnilai;

nilai = 100;
indexnilai = 'A';

atau dapat juga langsung saat pembuatan sebuah variabel.

int nilai = 100;
char indexnilai = 'A';

Syarat penamaan variabel adalah :
  1. Harus diawali dengan huruf
  2. Tidak boleh terdapat karakter unik  seperti @,#,% dan lain-lain.
  3. Tidak boleh mengandung karakter putih (spasi,enter,tab)
4. Operator
Operator merupakan sebua karakter khusus yang digunakan untuk menghasilkan suatu nilai,

5. Operator Aritmatika
Contoh

int a = 10;
int b = 3;
int c = a / b;
System.out.printIn(c);

 Hasil dari kode program diatas adalah 3 bukan 3,333. Hal ini dikarenakan dalam java jika kita melakukan operasi pembagian dengan tipe data intenger, maka hasilnyapun akan intenger, dan intenger tidak dapat mengandung nilai koma dalam java, sehingga jika akan melakukan perkalian yang menghasilkan nilai koma, maka harus menggunakan tipe data double atau float.

6. Operator Penugasan
Contoh

int a = 10;
a += 5;
System.out.printIn(a);

 Hasil dari operasi diatas adalah 15. Hal ini dikarenakan a += 5 sama dengan a = a + 5, dikarenakan a sebelumnya adalah 10, maka itu berarti a = 10 + 5.
Jika akan melakukan penambahan atau pengurangan dengan nilai 1, maka dapat dengan mudah menggunakan karakter ++ untuk penambahan atau -- untuk pengurangan, misal:

int  a = 10;
a --;
System.out.printIn(a);

 maka hasilnya adalah 9.

7. Operator Pembanding
Hasil dari operasi pembanding adalah boolean. True jika operasi pembanding tersebut benar, dan false jika operasi pembanding tersebut salah, misal:

boolean a = 10 == 100;
System.out.printIn(a);

 Hasil dari program diatas adalah false, karena memang 10 tidak sama dengan 100.