Membuat Dropdown Dengan HTML5 dan CSS3

Dropdown bisa dibilang sebagai sub menu atau sub item yang berguna untuk memperpendek menu navbar atau menampilkan menu dengan klik tombol, dropdown bisa dibuat pada navbar, button, tabs, select, conteks menu dan lain-lain, Dropdown yang lebih sering digunakan pada navbar.

Cara membuat dropdown adalah sebagai berikut: pertama buatkan file html dengan nama index.html dan simpan dimana saja kemudian copy pastekan kode dibawah ini kedalam index.html, untuk kode seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Simple Dropdown</title>
  <link href="style.css" rel="stylesheet"/>
</head>
<body>

<div class="container">
  <div class="dropdown left">
    <button class="btndown">Left</button>
    <div class="wrapdown wrapleft">
      <a href="#">Item Link 1</a>
      <a href="#">Item Link 2</a>
      <a href="#">Item Link 3</a>
      <a href="#">Item Link 4</a>
      <a href="#">Item Link 5</a>
    </div>
  </div>
  <div class="dropdown right">
    <button class="btndown">Right</button>
    <div class="wrapdown wrapright">
      <a href="#">Item Link 1</a>
      <a href="#">Item Link 2</a>
      <a href="#">Item Link 3</a>
      <a href="#">Item Link 4</a>
      <a href="#">Item Link 5</a>
    </div>
  </div>
</div>

</body>
</html>

Selanjutnya adalah pengaturan desain pengayaan dengan menggunakan css dengan cara buatkanlah file css baru dengan nama style.css dan gunakan kode dibawah ini serta simpan file css bersamaan dengan index.html, untuk kode seperti dibawah ini.

body{
  font-family:helvetica,sans-serif,arial;
}
.btndown{
  background-color: #3bb09f;
  color: #fff;
  padding: 16px;
  font-size: 14pt;
  border:none;
  cursor: pointer;
}
.dropdown{
  position: relative;
  display: inline-block;
}
.wrapdown{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 124px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.wrapdown a{
  color: #000;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.wrapdown a:hover{
  background-color: #f1f1f1;
}
.dropdown:hover .wrapdown{
  display: block;
}
.dropdown:hover .btndown{
  background-color: #4cbf50;
}
.left{
  float: left;
}
.right{
  float:right;
}
.wrapleft{
  left:0;
}
.wrapright{
  right:0;
}
.container{
  width:400px;
  margin:20px auto;
}

Selesai, jalankan file html dengan cara klik dua kali pada file html atau klik kanan pada index.html kemudian pilih open with > firefox/browser.

Cara Membuat Galeri Foto Dengan HTML5 dan CSS3

Jika anda sedang atau akan membangun web atau cuma template yang kontennya cuma foto dengan sedikit penjelasan maka anda wajib membuat web yang memiliki galeri yang biasanya dalam galeri tersebut terdapat banyak foto atau gambar beserta biasanya dilengkapi dengan preview gambar, dropdown atau slider/slideshow gambar.

Kali ini kita hanya membuat galeri foto dengan menggunakan html5 dan css5 secara sederhana, cara pembuatannya, buatkanlah sebuah file baru dengan nama index.html dan gunakan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Gallery Images</title>
  <link href="style.css" rel="stylesheet"/>
</head>
<body>

  <div class="responsive">
    <div class="gallery">
      <a href="images/1.jpg" target="_blank">
        <img src="images/1.jpg" alt="1"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/2.jpg" target="_blank">
        <img src="images/2.jpg" alt="2"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/3.jpg" target="_blank">
        <img src="images/3.jpg" alt="3"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/4.jpg" target="_blank">
        <img src="images/4.jpg" alt="4"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/5.jpg" target="_blank">
        <img src="images/5.jpg" alt="5"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/6.jpg" target="_blank">
        <img src="images/6.jpg" alt="6"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/1.jpg" target="_blank">
        <img src="images/1.jpg" alt="1"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>
  <div class="responsive">
    <div class="gallery">
      <a href="images/2.jpg" target="_blank">
        <img src="images/2.jpg" alt="2"/>
      </a>
      <div class="desc">This Description Here</div>
    </div>
  </div>

  <div class="clearfix"></div>
<p><br/></p>


  <div class="imgdropdown">
    <img src="images/1.jpg" width="200"/>
    <div class="wrapimg">
      <img src="images/1.jpg" class="imgdown">
      <div class="descdown">This Description Here</div>
    </div>
  </div>
  <div class="imgdropdown">
    <img src="images/2.jpg" width="200"/>
    <div class="wrapimg">
      <img src="images/2.jpg" class="imgdown">
      <div class="descdown">This Description Here</div>
    </div>
  </div>

  <p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></p>

</body>
</html>

Selanjutnya buatkanlah sebuah file css dan beri nama style.css dan simpan bersamaan dengan index.html, file css merupakan pengayaan dan gunakan kode dibawah ini.

body{
  font-family:helvetica, sans-serif, arial;
  font-size: 12pt;
}
*{
  box-sizing:border-box;
}
.gallery{
  border:1px solid #ccc;
}
.gallery:hover{
  border:1px solid #999;
}
.gallery img{
  width: 100%;
  height: 200px;
}
.gallery .desc{
  text-align: center;
  padding: 15px;
}
.responsive{
  padding: 6px;
  float: left;
  width: 24.99999%;
}
@media screen and (max-width:800px){
  .responsive{
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media screen and (max-width:485px){
  .responsive{
    width: 100%;
  }
}
.clearfix:after{
  content: " ";
  display: table;
  clear: both;
}
.imgdropdown{
  position: relative;
  display: inline-block;
}
.wrapimg{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 400px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.imgdropdown:hover .wrapimg{
  display: block;
}
.imgdown{
  width: 600px;
  height: 400px;
}
.descdown{
  padding: 15px;
  text-align: center;
}

 

Membuat Grid Kolom Layout Dengan HTML5 dan CSS3

Dalam membangun sebuah layout web maka sangat dibutuhkan kolom-kolom dalam sebuah disain dan kolom-kolom tersebut akan diisi komponen seperti sidebar, main artikel, kolom-kolom footer dan header dan lain-lain, kolom-kolom tersebut disebut dengan grid yang sangat umum dijumpai pada css framework seperti bootstrap, uikit, metro ui css, materialize css, semantic ui dan lain-lain.

Untuk membuat grid atau kolom-kolom untuk desain sebuah web maka buatkanlah sebuah dokumen html dengan nama index.html dan gunakan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Grid Web Column</title>
  <link href="style.css" rel="stylesheet"/>
</head>
<body>

<div class="container">

  <div class="row">
    <div class="col-12"><div class="panel"> Col 12</div></div>
  </div>
  <div class="row">
    <div class="col-6"><div class="panel"> Col 6</div></div>
    <div class="col-6"><div class="panel"> Col 6</div></div>
  </div>
  <div class="row">
    <div class="col-4"><div class="panel"> Col 4</div></div>
    <div class="col-4"><div class="panel"> Col 4</div></div>
    <div class="col-4"><div class="panel"> Col 4</div></div>
  </div>
  <div class="row">
    <div class="col-3"><div class="panel"> Col 3</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
  </div>
  <div class="row">
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
  </div>
  <div class="row">
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
  </div>
  <div class="row">
    <div class="col-11"><div class="panel"> Col 11</div></div>
    <div class="col-1"><div class="panel"> Col 1</div></div>
  </div>
  <div class="row">
    <div class="col-10"><div class="panel"> Col 10</div></div>
    <div class="col-2"><div class="panel"> Col 2</div></div>
  </div>
  <div class="row">
    <div class="col-9"><div class="panel"> Col 9</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
  </div>
  <div class="row">
    <div class="col-8"><div class="panel"> Col 8</div></div>
    <div class="col-4"><div class="panel"> Col 4</div></div>
  </div>
  <div class="row">
    <div class="col-7"><div class="panel"> Col 7</div></div>
    <div class="col-5"><div class="panel"> Col 5</div></div>
  </div>
  <div class="row">
    <div class="col-6"><div class="panel"> Col 6</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
    <div class="col-3"><div class="panel"> Col 3</div></div>
  </div>

</div>

</body>
</html>

Selanjutnya disain tampilan menggunakan css, buatkanlah sebuah file css dengan nama style.css kemudian simpan file tersebut bersamaan dengan file index.html dan gunakan kode dibawah ini.

*{
  box-sizing:border-box;
}
body{
  font-family:helvetica,sans-serif,arial;
}
.container{
  width: 800px;
  margin: auto;
}
.container-fluid{
  padding: 20px;
  margin:0;
}
.row:after{
  content: " ";
  display: block;
  clear: both;
}
[class*="col-"]{
  float: left;
  padding-right: 15px;
}
[class*="col-"]:last-of-type{
  padding-right: 0;
}
.col-1{width: 8.33%}
.col-2{width: 16.66%}
.col-3{width: 25%}
.col-4{width: 33.33%}
.col-5{width: 41.66%}
.col-6{width: 50%}
.col-7{width: 58.33%}
.col-8{width: 66.66%}
.col-9{width: 75%}
.col-10{width: 83.33%}
.col-11{width: 91.66%}
.col-12{width: 100%}
.panel{
  padding: 10px;
  margin-top:10px;
  background-color: #ddd;
  border:1px solid #ccc;
}
@media screen and (max-width: 485px){
  .container, .container-fluid{
    width: 100%;
  }
  [class*="col-"]{
    width: 100%;
    padding-right: 0;
    float: none;
  }
}
@media screen and (max-width: 800px){
  .container, .container-fluid{
    width: 100%;
  }
}

 

Cara Menampilkan Ikon Image Sprites Dengan HTML5 dan CSS3

Menampilkan ikon pada konten web tidak hanya dengan menggunakan ikon dari font-awesome atau roboto saja akan tetapi alangkah lebih mudah menggunakan image sprites saja, apa itu image sprites? image sprites adalah sebuah gambar yang berisi ikon atau ikon-ikon yang didesain khusus dan dikumpulkan menjadi satu gambar, biasanya ikon tersebut dibuat dengan software vektor seperti Inkscape, Illustrator, CorelDraw dan lain-lain, biasanya dalam satu gambar tersebut terdapat ratusan ikon, tergantung dari sipembuatnya bisa minimal 4 ikon dalam satu gambar, agar lebih jelas gunakan satu gambar ikon-ikon dibawah ini.

image-icon

Untuk membuat tampilan ikon kedalam konten web dengan tool image sprites yang ditulis menggunakan html5 dan css3, berikut dibawah ini adalah sintaks html yang bisa disimpan dengan nama index.html.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Icon Image Sprites</title>
  <link rel="stylesheet" href="style.css"/>
  <link rel="icon" href="image-icon.png"/>
</head>
<body>

<span class="icon-1"></span>
<span class="icon-2"></span>
<span class="icon-3"></span>
<span class="icon-4"></span>
<span class="icon-5"></span>
<span class="icon-6"></span>
<span class="icon-7"></span>
<span class="icon-8"></span>
<span class="icon-9"></span>
<span class="icon-10"></span>
<span class="icon-11"></span>
<span class="icon-12"></span>

</body>
</html>

Selanjutnya desain pengayaan dengan mengunakan css, buatkan sebuah file yang bernama style.css yang disimpan bersamaan dengan index.html dan sintaks css-nya dibawah ini.

body{
  margin: 100px auto;
}
[class*="icon-"]{
  width: 140px;
  height: 140px;
  display: inline-block;
}
.icon-1{
  background: url('image-icon.png') 0 0;
}
.icon-2{
  background: url('image-icon.png') -120px 0;
}
.icon-3{
  background: url('image-icon.png') -240px 0;
}
.icon-4{
  background: url('image-icon.png') -380px 0;
}
.icon-5{
  background: url('image-icon.png') 0 -120px;
}
.icon-6{
  background: url('image-icon.png') -120px -120px;
}
.icon-7{
  background: url('image-icon.png') -240px -120px;
}
.icon-8{
  background: url('image-icon.png') -380px -120px;
}
.icon-9{
  background: url('image-icon.png') 0 -245px;
}
.icon-10{
  background: url('image-icon.png') -120px -245px;
}
.icon-11{
  background: url('image-icon.png') -240px -245px;
}
.icon-12{
  background: url('image-icon.png') -380px -245px;
}

 

Cara Membuat Tooltip Dengan HTML5 dan CSS3

Tooltip umumnya dibuat dengan jquery atau javascript, akan tetapi alangkah lebih mudah lagi membuat tooltip hanya dengan menggunakan css saja, tooltip adalah sebuah info yang tampil saat kursor diatas tujuan biasanya secara default pembawaan browser juga ada tooltipnya walau berbentuk umum dengan hanya menggunakan atribut title pada tag html yang dituju sebagai contoh <p title=”tooltip”></p> atau tag yang lainnya seperti <img title=”judul gambar”/>, namun tooltip pembawaan tidak bagus.

tooltip

Selain itu tooltip juga bisa berfungsi sebagai alert atau confirm, tetapi pada tutorial ini saya tidak membahas alert atau confirm yang mengharuskan penggunaan jquery atau javascript, untuk membuat tooltip menggunakan html5 dan css3 maka buatkan file html dengan nama index.html dan simpan disebuah folder baru, gunakan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Tooltip Text</title>
  <link href="style.css" rel="stylesheet"/>
</head>
<body>

<div class="container">
  <div class="tooltip">
    Left
    <span class="tooltipleft">Tooltip left</span>
  </div>
  <div class="tooltip">
    Top
    <span class="tooltiptop">Tooltip Top</span>
  </div>
  <div class="tooltip">
    Bottom
    <span class="tooltipbottom">Tooltip Bottom</span>
  </div>
  <div class="tooltip">
    Right
    <span class="tooltipright">Tooltip Right</span>
  </div>
</div>

</body>
</html>

Selanjutnya adalah desain pengayaan dengan menggunakan css, buatkan file css baru dengan nama style.css dan simpan bersamaan dengan index.html, gunakan kode dibawah ini.

body{
  font-family:helvetica, sans-serif, arial;
}
.container{
  width: 800px;
  margin:70px auto;
}
.tooltip{
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  margin: 20px;
  padding:5px;
}
.tooltip .tooltiptop{
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;

  /* make fade in */
  opacity: 0;
  transition:opacity 1s;
}
.tooltip:hover .tooltiptop{
  visibility: visible;
  opacity: 1;
}
/* make marker */
.tooltip .tooltiptop::after{
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.tooltip .tooltipbottom{
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;

  /* make fade in */
  opacity: 0;
  transition:opacity 1s;
}
.tooltip:hover .tooltipbottom{
  visibility: visible;
  opacity: 1;
}
/* make marker */
.tooltip .tooltipbottom::after{
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.tooltip .tooltipleft{
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;;
  z-index: 1;
  top: -2px;
  right: 105%;

  /* make fade in */
  opacity: 0;
  transition:opacity 1s;
}
.tooltip:hover .tooltipleft{
  visibility: visible;
  opacity: 1;
}
/* make marker */
.tooltip .tooltipleft::after{
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip .tooltipright{
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;;
  z-index: 1;
  top: -2px;
  left: 105%;

  /* make fade in */
  opacity: 0;
  transition:opacity 1s;
}
.tooltip:hover .tooltipright{
  visibility: visible;
  opacity: 1;
}
/* make marker */
.tooltip .tooltipright::after{
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

 

Cara Membuat (Build) APK Pada Android Studio Lengkap Dengan Gambar

Membuat atau Build file apk melalui android studio memiliki dua cara yaitu melalui build apk biasa yang nantinya cuma akan menghasilkan file debug saja dan yang kedua adalah generate signed apk yang mengharuskan kita untuk membuat file keystore beserta dengan mengisi nama dan password yang nantinya akan menghasilkan apk release.

Cara membuat apk pada android studio sangatlah mudah melalui build apk namun sedikit ribet pada generate signed apk, jika anda hanya ujicoba aplikasi saja maka build apk pilihan anda namun jika anda berniat mempublikasikan di play store, mobomarket dll maka wajib membuat apk dengan generate signed apk, berikut dibawah ini adalah cara membuat build apk pada android studio.

1 Pastikan anda telah membuat project baru atau lama, kemudian pilih menu Build dan klik sub menu Build APK

android-1

2 Kemudian tunggu beberapa menit akan muncul Show in Explorer dan klik

android-2

3 Setelah klik Show in Explorer maka akan muncul file apk debug seperti dibawah ini

android-3

Sedangkan cara membuat build apk menggunakan generate signed apk pada android studio untuk merelease aplikasi kita ke publik seperti cara dibawah ini

1 Pilih menu Build dan klik sub menu Generate Signed APK kemudian akan muncul dialog

android-4

2 Pada dialog munculan klik Create new… dan muncul dialog key store, klik tombol di pojok kanan atas kemudian pilih folder yang anda tuju untuk menyimpan file keystore dan klik Ok

android-5

3 Isi password (usahakan 4 input password sama), beri nama anda/aplikasi pada alias, biarkan validity 25, dan yang paling wajib beri nama pada first and last name dan klik Ok

android-6

4 klik Next

android-7

5 Isi ulang password tadi dan klik Ok

android-8

6 klik Finish untuk mencetak apk

android-9

7 klik Show in Explorer untuk menampilkan apk release

android-10

8 Ini hasil cetakan file apk release dan selesai

android-11

Sekian tutorial kali ini semoga bermanfaat dan lancar dalam belajar membuat aplikasi android melalui android studio atau menggunakan IDE lainnya seperti eclipse atau netbeans.

Membuat Aplikasi MDI Dengan Java Netbeans

Program yang dibuat dengan bentuk mdi memang tidak asing lagi bagi kita, lihat saja aplikasi office milik microsoft yaitu microsoft office word, excel atau power point. Dengan aplikasi mdi akan memudahkan kita dalam hal pembuatan aplikasi yang mengharuskan user untuk login terlebih dahulu untuk menikmati program.

Namun disini membangun aplikasi mdi dengan java netbeans, kenapa memilih java? java bisa dijalankan di banyak platform, kenapa pilih netbeans kan ada eclipse ? netbeans merupakan ide yang menerapkan GUI form jadi akan memudahkan dalam mendesain sedangkan eclipse adalah ide java yang populer tetapi mengharuskan kita untuk menghafal seluruh kode hanya untuk mendesain form dan sangat susah dalam menentukan letak yang ideal suatu input form.

Untuk membuat form buka netbeans ide pada windows atau ubuntu di dektopnya kalau ada, buatlah project baru dan beri nama AplikasiMDI atau terserah anda kemudian buatlah sebuah jframeform dan berinama MainMenu (MainMenu.java) kemudian drag drop menubar ke form dan pada menu file drag drop menuitem dan beri nama exit, pada menu edit ganti nama dengan nama view dan drag drop 3 menuitem beri nama sesuai jinternalframe misalkan Input, Setting dan Laporan, drag drop jdesktoppane dibawah menubar sampai penuh form, lihat gambar dibawah ini
aframefrom-mainmenu-mdi-2016-05-04
Kemudian klik kanan pada package -> pilih new -> pilih other -> pilih swing gui form -> pilih jinternalframe form dan klik next isi nama dengan nama input (input.java) dan buat lagi yang baru isi dengan nama setting (setting.java) dan Laporan (Laporan.java), untuk contoh seperti dibawah ini.
setting-mdi-2016-05-04

laporan-mdi-2016-05-04

input-mdi-2016-05-04
Setelah itu buka kembali MainMenu.java dan klik pada menuitem -> pilih events -> pilih action -> klik actionperformed dan isikan syntax java dibawah ini

Menu item exit

private void jMenuItem1ActionPerformed(java.awt.event.ActionEvent evt) {                                           
        // TODO add your handling code here:
        System.exit(0);
    }

Menu item input

private void jMenuItem2ActionPerformed(java.awt.event.ActionEvent evt) {                                           
        // TODO add your handling code here:
        jDesktopPane1.removeAll();
        repaint();
        input in = new input();
        //in.setSize(jDesktopPane1.getSize().width, jDesktopPane1.getSize().height);
        in.show();
        jDesktopPane1.add(in);
    }

Menu item setting

private void laporanActionPerformed(java.awt.event.ActionEvent evt) {                                        
        // TODO add your handling code here:
        jDesktopPane1.removeAll();
        repaint();
        setting set = new setting();
        set.setSize(jDesktopPane1.getSize().width, jDesktopPane1.getSize().height);
        set.show();
        jDesktopPane1.add(set);
    }

Menu item Laporan

private void jMenuItem4ActionPerformed(java.awt.event.ActionEvent evt) {                                           
        // TODO add your handling code here:
        jDesktopPane1.removeAll();
        repaint();
        Laporan lap = new Laporan();
        lap.setSize(jDesktopPane1.getSize().width, jDesktopPane1.getSize().height);
        lap.show();
        jDesktopPane1.add(lap);
    }

Lihat hasil program aplikasi mdi dibawah ini, sekian tutorial kali ini semoga bermanfaat dan hasilnya seperti gambar dibawah ini.

aplikasimdi-2016-05-04

Download Source Code

Cara Membuat Aplikasi CRUD (Create, Read, Update, Delete) Dengan Java (Netbeans) dan SQLite

Aplikasi crud atau istilah panjangnya create, read, update, dan delete adalah sebuah aplikasi yang biasanya dibuat untuk pekerjaan pengisian formulir yang digunakan untuk mendata object atau orang ataupun digunakan untuk sebuah manajemen dari perusahaan tertentu.

Aplikasi create, read, update, dan delete kali ini akan dibuat dengan java yang menggunakan software development yaitu netbeans dan database sebagai penyimpanan datanya menggunakan sqlite, sqlite adalah database manajemen yang portabel, jadi bisa di copy paste ke berbagai sistem operasi.

SQLite disini adalah menggunakan source kode sqlite langsung, bukan hanya databasenya saja tapi semua tool tool sqlite akan digunakan, jadi aplikasi yang akan dibuat menggunakan sqlite embeded.

sqliteembeded-2016-05-04
Buatlah jframe form baru dengan nama terserah anda. namun saya mengunakan nama passwordsimpan.java dengan nama project Password Simpan. Buatlah rancangan form seperti gambar dibawah ini.
passwordsimpanform-2016-05-04
Kemudian buat variabel dan letakkan dibawah public class passwordsimpan extends javax.swing.JFrame.

private DefaultTableModel model;
private Connection conn;
private Statement stat;
private PreparedStatement prep;
private ResultSet rs;

Buatlah method koneksi ke database sqlite (database akan dibuat sendiri pada syntax ini)

public void koneksiDatabase() {
        try {
            Class.forName("org.sqlite.JDBC");
            conn = DriverManager.getConnection("jdbc:sqlite:passwordsimpan"); // nama file SQLite = mahasiswa
            stat = conn.createStatement();
            // stat.executeUpdate("drop table if exists tMahasiswa;");   // Untuk menghapus database jika database sudah ada.
            stat.executeUpdate("create table IF NOT EXISTS tpassim (id integer primary key autoincrement, alamat text, pengguna text, password text);"); // membuat data base
        } catch (Exception ex1) {
            System.out.println(ex1.toString());
        }
    }

Buat tampilan data dalam tabel dengan method loaddata

public void loadData(){
        // menghapus seluruh data
        model.getDataVector().removeAllElements();
        // memberi tahu bahwa data telah kosong
        model.fireTableDataChanged();
        try {
            rs = stat.executeQuery("select * from tpassim");
        
            while(rs.next()){
                // lakukan penelusuran baris
                Object[] o = new Object[4];
                o[0] = rs.getString("id");
                o[1] = rs.getString("alamat");
                o[2] = rs.getString("pengguna");
                o[3] = rs.getString("password");
                model.addRow(o);
            }
                    rs.close();
            stat.close();           
        }catch(SQLException e){
            System.out.println("Terjadi Error load data");
        }
    }

Tempel syntax ke dalam konstruktor seperti dibawah ini (public passwordsimpan() ) dan penambahan pada konstruktor ( throws SQLException )

public passwordsimpan() throws SQLException {
        initComponents();
        koneksiDatabase();
        
        // membuat tabel
        model = new DefaultTableModel();
        
        jTable1.setModel(model);
        
        model.addColumn("ID");
        model.addColumn("Alamat");
        model.addColumn("Pengguna");
        model.addColumn("Password");
        
        // memanggil fungsi load data
        loadData();
    }

Baru akan membuat event actionproformed dengan klik kanan pada button yang telah dibuat – pilih events – pilih action – pilih actionproformed. Untuk button hapus syntaxnya seperti dibawah ini.

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        int i = jTable1.getSelectedRow();
        if(i == -2){
            // tidak ada baris terseleksi
            return;
        }

        String nim = (String) model.getValueAt(i, 0);

        try {
            String sql = "DELETE FROM tpassim WHERE id = ?";

            prep = conn.prepareStatement(sql);

            prep.setString(1, nim);

            prep.executeUpdate();
            prep.close();
        }catch(SQLException e){
            System.err.println("Terjadi Error button hapus");
        }finally{
            loadData();
        }
    }

Untuk button update syntaxnya dibawah ini

private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        int i = jTable1.getSelectedRow();
        if(i == -1){
            // tidak ada baris terseleksi
            return;
        }

        // ambil nim yang terseleksi
        String nim = (String) model.getValueAt(i, 0);
        String nima = jTextField1.getText();
        String nama = jTextField2.getText();
        String jurusan = jTextField3.getText();

        try{
            String sql = "UPDATE tpassim SET alamat = ?, pengguna = ?, password = ? WHERE id = ?";

            prep = conn.prepareStatement(sql);

            prep.setString(1, nima);
            prep.setString(2, nama);
            prep.setString(3, jurusan);
            prep.setString(4, nim);

            prep.executeUpdate();
            prep.close();
        }catch(SQLException e){
            System.err.println("Terjadi Error button ubah");
        }finally{
            loadData();
        }
    }

Untuk button simpan syntaxnya dibawah ini

private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        String nima = jTextField1.getText();
        String nama = jTextField2.getText();
        String jurusan = jTextField3.getText();

        try{
            prep = conn.prepareStatement("insert into tpassim values (?, ?, ?, ?);");

            prep.setString (1, null);
            prep.setString (2, nima);
            prep.setString (3, nama);
            prep.setString (4, jurusan);

            prep.executeUpdate();
            prep.close();
        } catch (SQLException e) {
            System.err.println("Terjadi Error button tambah");
        } finally {
            loadData();
        }
    }

Untuk button bersih yaitu menghapus atau mereset data aktif dari form, syntaxnya dibawah ini

private void jButton4ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        jTextField1.setText(null);
        jTextField2.setText(null);
        jTextField3.setText(null);
        jTextField1.requestFocus();
    }

Untuk menapilkan data untuk proses update dan delete dari tabel atau database adalah dengan menggunakan mouse klik pilih tabel yang dibuat kemudian klik kanan – pilih events – pilih mouse – pilih mouseClicked. syntaxnya dibawah ini

private void jTable1MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        int i = jTable1.getSelectedRow();
        if (i == -1){
            // tak ada baris terseleksi
            return;
        }

        String nim = (String) model.getValueAt(i, 1);
        jTextField1.setText(nim);

        String nama = (String) model.getValueAt(i, 2);
        jTextField2.setText(nama);

        String jurusan = (String) model.getValueAt(i, 3);
        jTextField3.setText(jurusan);
    }

Hasilnya adalah seperti yang terlihat dibawah ini.

apppassim-2016-05-04

Download Source Code

Aplikasi CRUD (Create, Read, Update, Delete) dengan Java Netbeans dan MySQL

Aplikasi crud merupakan dasar pemgraman atau dasar sebuah aplikasi yang digunakan dalam aplikasi proses input dan output dalam hal pengisian formulir dan kemudian akan muncul sebuah laporan. Dengan menguasai aplikasi crud ini maka akan memudahkan dalam hal pembuatan aplikasi lainnya misalkan membuat aplikasi perkantoran sudah tentu didalamnya terkumpul kumpulan crud yang menjadi beberapa inputan.

Pada pembahasan kali ini kita akan membahas cara membuat aplikasi crud dengan menggunakan java beserta software idenya yaitu netbeans dan program database untuk menyimpan data yaitu mysql. untuk aplikasi netbeans bisa didapatkan di Netbeans selanjutnya aplikasi mysql bisa didapatkan di MySQL selanjutnya anda perlu membuat database pada mysql console dengan nama database basisdata dan nama tabelnya crud beserta fieldnya yaitu: kode, nama, tgl, jk dan alamat.

CREATE DATABASE IF NOT EXISTS `basisdata` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `basisdata`;

CREATE TABLE IF NOT EXISTS `crud` (
  `kode` int(5) NOT NULL,
  `nama` varchar(45) NOT NULL,
  `tgl` varchar(30) NOT NULL,
  `jk` varchar(20) NOT NULL,
  `alamat` text NOT NULL,
  PRIMARY KEY (`kode`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `crud` (`kode`, `nama`, `tgl`, `jk`, `alamat`) VALUES
(677, 'As', 'Tue Jan 07 14:43:06 WIT 2014', 'Perempuan', 'jenewa'),
(3423, 'Ghazali', 'Thu Jan 09 19:53:58 WIT 2014', 'Laki-laki', 'baroh'),
(6577, 'Annisa', 'Tue Jan 11 14:27:07 WIT 2000', 'Perempuan', 'Padang Tiji');

Kemudian buatlah sebuah project baru pada netbeans dengan klik new project -> pilih java aplication -> klik next -> buat nama aplikasi dengan nama AplikasiCRUD hilangkan conteng pada create main class. kemudian buahlah file koneksinya untuk koneksi dari database mysql kepada aplikasi java dengan klik pada package kemudian klik kanan -> pilih new -> pilih java class berinama koneksi makan jadi dengan nama koneksi.php.

public class koneksi {
    private Connection koneksi;
    public Connection connect(){
        try {
            Class.forName("com.mysql.jdbc.Driver");
            System.out.println("Berhasil Koneksi");
        } catch (ClassNotFoundException ex) {
            System.out.println("Gagal Koneksi "+ex);
        }
        String url = "jdbc:mysql://localhost:3306/basisdata";
        try {
            koneksi = DriverManager.getConnection(url, "root", "kodokijo");
            System.out.println("Berhasil Koneksi Database");
        } catch (SQLException ex) {
            System.out.println("Gagal Koneksi Database "+ex);
        }
        return koneksi;
    }
    
}

Buatlah file baru dengan klik kanan pada package -> pilih new -> pilih jframeform kemudian berinama sesuka hati atau disini penulis menggunakan nama jframeform dengan nama formcrud akan menjadi formcrud.java dan desain seperti gambar dibawah ini.

formcrud-452016
Selanjutnya klik source dan isi didalam public class formcrud extends javax.swing.JFrame dengan deklarasi class untuk memanggil koneksi database yang dibawah ini.

private Connection conn = new koneksi().connect();
private DefaultTableModel tabmode;

Buatlah class untuk form yang mana akan digunakan untuk pengaktifan, non_aktifkan dan kosongkan pada form agar tidak langsung terbuka demi menjaga data agar tidak dihapus sembarangan.

protected void non_aktif(){
        jTextArea1.setEnabled(false);
        jTextField1.setEnabled(false);
        jTextField2.setEnabled(false);
        jRadioButton1.setEnabled(false);
        jRadioButton2.setEnabled(false);
        jDateChooser1.setEnabled(false);
    }
    protected void aktif(){
        jTextArea1.setEnabled(true);
        jTextField1.setEnabled(true);
        jTextField2.setEnabled(true);
        jRadioButton1.setEnabled(true);
        jRadioButton2.setEnabled(true);
        jDateChooser1.setEnabled(true);
        jTextField1.requestFocus();
    }
    protected void kosong(){
        jTextArea1.setText("");
        jTextField1.setText("");
        jTextField2.setText("");
    }

Untuk menampilkan data dari database mysql server kedalam tabel yang kita desain pada form maka kopas syntax javanya ada dibawah ini.

protected void datatabel(){
        Object[] Baris ={"Kode","Nama","Lahir","Kelamin","Alamat"};
        tabmode = new DefaultTableModel(null, Baris);
        jTable1.setModel(tabmode);
        String sql = "select * from crud";
        try {
            Statement stat = conn.createStatement();
            ResultSet hasil = stat.executeQuery(sql);
            while(hasil.next()){
                String kode = hasil.getString("kode");
                String nama = hasil.getString("nama");
                String tgl = hasil.getString("tgl");
                String jk = hasil.getString("jk");
                String alamat = hasil.getString("alamat");
                String[] data={kode,nama,tgl,jk,alamat};
                tabmode.addRow(data);
            }
        } catch (Exception e) {
        }
    }

Setelah itu baru untuk bisa dijalankan class class yang ada diatas maka yang diperlukan memanggil class dalam konstruktor java formcruid tadi.

public formcrud() {
        initComponents();
        non_aktif();
        datatabel();
}

Selanjutnya kita akan buat button button untuk berfungsi mulai button simpan, update, hapus dan bersih dengan klik kanan pada button -> pilih event -> pilih actions -> pilih actionperformated seperti dibawah ini.

button simpan

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        String resa;
        if(jRadioButton1.isSelected()){
            resa = jRadioButton1.getText();
        } else{
            resa = jRadioButton2.getText();
        }
        String sql = "insert into crud values(?,?,?,?,?)";
        try {
            PreparedStatement stat = conn.prepareStatement(sql);
            stat.setString(1, jTextField1.getText());
            stat.setString(2, jTextField2.getText());
            stat.setString(3, jDateChooser1.getDate().toString());
            stat.setString(4, resa);
            stat.setString(5, jTextArea1.getText());
            stat.executeUpdate();
            JOptionPane.showMessageDialog(null, "Data Berhasil Disimpan");
            kosong();
            jTextField1.requestFocus();
            datatabel();
        } catch (SQLException e) {
            JOptionPane.showMessageDialog(null, "Data Gagal Disimpan "+e);
        }
    }

klik tabel dengan klik kanan pada tabel pilih event -> pilih mouse -> pilih mouseclicked

private void jTable1MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        int bar = jTable1.getSelectedRow();
        String a = tabmode.getValueAt(bar, 0).toString();
        String b = tabmode.getValueAt(bar, 1).toString();
        String c = tabmode.getValueAt(bar, 2).toString();
        String d = tabmode.getValueAt(bar, 3).toString();
        String e = tabmode.getValueAt(bar, 4).toString();
        jTextField1.setText(a);
        jTextField2.setText(b);
        jTextArea1.setText(e);
    }

button update

private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        String resa;
        if(jRadioButton1.isSelected()){
            resa = jRadioButton1.getText();
        } else{
            resa = jRadioButton2.getText();
        }
        String sql = "update crud set nama=?, tgl=?, jk=?, alamat=? where kode='"+jTextField1.getText()+"'";
        try {
            PreparedStatement stat = conn.prepareStatement(sql);
            stat.setString(1, jTextField2.getText());
            stat.setString(2, jDateChooser1.getDate().toString());
            stat.setString(3, resa);
            stat.setString(4, jTextArea1.getText());
            stat.executeUpdate();
            JOptionPane.showMessageDialog(null, "Data Berhasil Diupdate");
            kosong();
            jTextField1.requestFocus();
            datatabel();
        } catch (SQLException e) {
            JOptionPane.showMessageDialog(null, "Data Gagal Diupdate "+e);
        }
    }

button hapus

private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        int ok = JOptionPane.showConfirmDialog(null, "Apakah anda yakin ingin menghapus data", "Konfirmasi Dialog", JOptionPane.YES_NO_OPTION);
        if(ok==0){
        String sql = "delete from crud where kode='"+jTextField1.getText()+"'";
        try {
            PreparedStatement stat = conn.prepareStatement(sql);
            stat.executeUpdate();
            JOptionPane.showMessageDialog(null, "Data Berhasil Dihapus");
            kosong();
            jTextField1.requestFocus();
            datatabel();
        } catch (SQLException e) {
            JOptionPane.showMessageDialog(null, "Data Gagal Dihapus "+e);
        }
        }
    }

Sekian yang dapat saya sampaikan kalau ada kekurangan tolong diberitahukan agar penulis dapat memperbaiki kekurangan tersebut. hasilnya seperti dibawah ini.

aplikasicrud-452016

Menampilkan Data dalam Listbox (jList) dan Combobox (jCombobox) dengan Java Netbeans dan MySQL

Pada tutorial kali ini penulis ingin membahas cara menampilkan data dari database yang ada di mysql pada program yang ada Listbox dan Combobox dengan menggunakan bahasa pemrograman java dan menggunakan ide netbeans sebagai aplikasi developmentnya.

Untuk membuat aplikasi listbox dan combobox dengan java pertama-tama buka aplikasi netbeans kalau belum ada ya download di situ resmi mereka yaitu Netbeans dan untuk program database kalau belum ada silahkan download disitusnya MySQL kemudian install setelah itu buatlah database dengan nama basisdata atau terserah anda dan buatlah tabel dengan nama listcombo atau terserah anda.

CREATE DATABASE IF NOT EXISTS `basisdata` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `basisdata`;

CREATE TABLE IF NOT EXISTS `listcombo` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;

INSERT INTO `listcombo` (`id`, `nama`) VALUES
(1, 'Web Developer'),
(2, 'Programmer'),
(3, 'Web Programmer'),
(4, 'System Analys'),
(5, 'Database Manager'),
(6, 'Cloud Manager'),
(7, 'Java Programmer'),
(8, 'Net Programmer');

Buatlah sebuah project dengan klik file new project -> pilih java application -> berikan nama project dengan nama listCombo atau terserah anda dan hilangkan contengan create main class setelah itu klik file -> pilih new file -> pilih swing gui form -> pilih jframe form berinama menutama atau terserah untuk desainnya 1 jlist dan 1 jcombobox atau seperti gambar dibawah ini

formlistcombo-2016-05-04
Kemudian klik source buat public class dalam file menutama tadi dengan nama public void combo dan public void list atau terserah anda yang penting dibuat. yang pertama tama buat file java class dengan nama koneksi (koneksi.java) seperti dibawah ini.

public class koneksi {
    private Connection koneksi;
    public Connection connect(){
        try {
            Class.forName("com.mysql.jdbc.Driver");
            System.out.println("Berhasil Koneksi");
        } catch (ClassNotFoundException ex) {
            System.out.println("Gagal Koneksi "+ex);
        }
        String url = "jdbc:mysql://localhost:3306/basisdata";
        try {
            koneksi = DriverManager.getConnection(url, "root", "");
            System.out.println("Berhasil Koneksi Database");
        } catch (SQLException ex) {
            System.out.println("Gagal Koneksi Database "+ex);
        }
        return koneksi;
    }
    
}

Ingat saya untuk file koneksi butuh file mysql jdbc connector namun kali ini penulis menggunakan ide netbeans, netbeans secara default sedang menyediakan file konektor dengan klik kanan pada folder libraries project pilih libraries dan cari mysql jdbc connector kemudian klik next. Sekarang kembali lagi ke menutama buat file public class.

combo()

public void combo(){
        Connection conn = new koneksi().connect();
        String sql = "select * from listcombo";
        try {
            Statement stat = conn.createStatement();
            ResultSet rs = stat.executeQuery(sql);
            while(rs.next()){
                jComboBox1.addItem(rs.getString("nama"));
            }
        } catch (Exception e) {
            JOptionPane.showMessageDialog(null,"Terjadi Kesalahan" +e);
        }
    }


list()

public void list(){
        DefaultListModel model = new DefaultListModel();
        String sql = "select * from listcombo";
        try {
            Statement stat = conn.createStatement();
            ResultSet rs = stat.executeQuery(sql);
            while(rs.next()){
                String ItemList2 = rs.getString("nama"); //get the element in column "item_code"
                model.addElement(ItemList2);
            }
            jList1.setModel(model);
        } catch (Exception e) {
            JOptionPane.showMessageDialog(null,"Terjadi Kesalahan" +e);
        }
    }

Public kontruktornya (public menutama())

public menutama() {
        initComponents();
        combo();
        setLocationRelativeTo(this);
        list();
    }

Untuk hasilnya bisa dilihat pada gambar yang ada dibawah ini. sekian tutorial saya kalau mau komentar silahkan saya tunggu komentar anda semoga bermaanfaat.

listbox-combobox-2016-05-04

Download Source Code

Membuat Event (cut, copy, paste dan select all) pada Popup Menu dengan Java Netbeans

Event cut, copy, paste dan select all sudah biasa digunakan pada sebuah program yang dibuat dengan menggunakan java maupun dengan menggunakan .net atau c/c++. Popup menu adalah menu yang tampil apabila diklik kanan dan menu ini biasanya berisi event yang sudah dijelaskan diatas.

Pada tutorial kali ini penulis cuma membahas cara membuat popup menu dan menampilkan event mouse yaitu waktu diklik copy atau lainya maka akan berjalan seperti program pada umumnya. Buatlah sebuah project dengan nama terserah anda dan hilangkan contengan create main class kemudian buatlah sebuah jframe form dengan nama terserah, kira kira desainnya seperti dibawah ini.

Membuat Event (cut, copy, paste dan select all) pada Popup Menu dengan Java Netbeans 1
Setelah itu desain fieldnya dengan menambah menubar dan popupmenu dengan cara drag dan drop pada palette kemudian buka tool navigator kemudian pilih jpopupmenu kemudian tambahkan menu item dengan cara klik kanan pada jpopupmenu kemudian klik add from palette pilih menu item dan ubah nama serta tambahkan lagi menjadi 4 menu item (cut, copy, paste dan select all) kira kira seperti gambar dibawah ini.

Membuat Event (cut, copy, paste dan select all) pada Popup Menu dengan Java Netbeans 2
Pastikan anda telah mendesain minimal 1 jtextfield atau 1 jtextarea. pada jtextarea pilih properties pada tool atau dengan klik kanan, kemudian cari componentPopupmenu dan pilih jpopupmenu, kalau bingung selahkan lihat gambar dibawah ini.

Membuat Event (cut, copy, paste dan select all) pada Popup Menu dengan Java Netbeans 3
Klik lagi pada navigator dan pada menu itemnya (jpopupmenu) kemudian klik kanan -> pilih event -> pilih mouse -> klik mouseReleased dan isikan seperti syntax java dibawah ini.

private void jMenuItem3MouseReleased(java.awt.event.MouseEvent evt) {                                         
        // TODO add your handling code here:
        jTextArea1.cut();
}                                        

private void jMenuItem4MouseReleased(java.awt.event.MouseEvent evt) {                                         
        // TODO add your handling code here:
        jTextArea1.copy();
}                                        

private void jMenuItem5MouseReleased(java.awt.event.MouseEvent evt) {                                         
        // TODO add your handling code here:
        jTextArea1.paste();
}                                        

private void jMenuItem6MouseReleased(java.awt.event.MouseEvent evt) {                                         
        // TODO add your handling code here:
        jTextArea1.selectAll();
}

Semoga bermanfaat tutorial diatas, kalau ada kekurangan saya sebagai penulis mohon komentarnya. hasil dari program diatas adalah sebagai berikut.

4-hasil-evenpopup-642016

Download Source Code

Membuat Aplikasi Laporan (iReport) dengan Java Netbeans dan MySQL

Aplikasi laporan adalah sebuah aplikasi yang wajib ada dalam sebuah aplikasi perkantoran, kenapa wajib ? karena dengan adanya laporan maka akan memudahkan dalam hal print dokumen yang nantinya akan dilakukan oleh seorang pegawai memberikan hasil kerjanya kepada atasannya.

Aplikasi laporan yang mendukung java yang lebih bagus yaitu iReport atau jasperReport yang sangat banyak digunakan untuk menampilkan laporan. pada tutorial kali ini penulis cuma membahas cara membuat dan menampilkan laporan saja, namun bukan mendesain laporan, untuk membuat laporan anda hanya memilih new dengan klik kanan -> pilih other -> pilih report -> pilih report wizard dengan begitu anda akan sangat terbantu dalam mendesain laporan seperti gambar dibawah ini.

menubar-ireport-442016

pertama tama yang harus dilakukan adalah membuat koneksi antara laporan dengan mysql untuk databasenya sendiri akan penulis jelaskan dibawah, pada tabbar pilih ikon yang bulat tersusun itu atau ikon database kemudian pilih database jdbc connection klik next -> isikan field koneksinya -> klik save.

datasource-ireport-442016

ireport-connection-442016

Kemudian buatlah laporan dengan penjelasan seperti diatas yaitu klik kanan -> pilih new -> pilih report wizard atau other cari pada report -> klik report wizard.

ireport-format-dokumen-442016

ireport-nama-dokumen-442016

ireport-query-ambil-442016

Klik design query kalau muncul password isikan password mysql dan drag drop tabel yang ada pada gambar dibawah ini atau juga bisa pada gambar diatas diketik menual syntax sql mysqlnya untuk menampilkan data misalkan menggunakan select * from tabel.

ireport-query-select-442016

ireport-field-select-442016

ireport-group

ireport-finish-442016

Yang diatas anda pilih dan klik next saja. selanjutnya desainnya seperti dibawah ini. untuk desain anda lakukan sendiri terserah anda pada gambar dibawah ini adalah laporan yang telah saya desain.

ireport-desain-awal-442016

ireport-form-desain-442016

Setelah laporan berhasil didesain maka yang anda perlukan adalah database, sebenarnya database dari awal wajib dibuat kalau tidak dibuat maka yang telah dipraktekkan diatas tidak berjalan.

CREATE DATABASE IF NOT EXISTS `basisdata` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `basisdata`;

CREATE TABLE IF NOT EXISTS `biodata` (
  `kode` varchar(5) NOT NULL,
  `nama` varchar(45) NOT NULL,
  `kelamin` varchar(20) NOT NULL,
  `alamat` varchar(100) NOT NULL,
  `ortu` varchar(45) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `biodata` (`kode`, `nama`, `kelamin`, `alamat`, `ortu`) VALUES
('11111', 'Ghazali', 'Laki-laki', 'Sigli', 'Zulkifli'),
('11112', 'Julinda', 'Perempuan', 'Ulim', 'Yusuf'),
('11113', 'Monicha', 'Perempuan', 'Bambi', 'Rahman'),
('11113', 'Andrian', 'Laki-laki', 'Bambi', 'Ramli'),
('11115', 'Andrian', 'Laki-laki', 'Krung', 'Ramli'),
('12345', 'Reza', 'Laki-laki', 'Desa', 'Kure');

Setelah itu desainlah formnya seperti dibawah ini dan berikan nama sesuka hati anda disinilah nantinya waktu yang dijalankan tampil formnya dan klik cetak langsung tampil laporannya.

ireport-myform-java-442016

Setelah itu klik kanan pada jbutton yang telah dibuat dan pilih event -> pilih action -> klik actionperformed, ini berguna nantinya untuk menambah data dan menampilkan laporan, untuk sintaxnya seperti dibawah ini

class koneksi

    Connection konek;
    Statement stat;
    
    public void koneksi(){
        try {
            Class.forName("com.mysql.jdbc.Driver");
            System.out.println("Berhasil Koneksi");
        } catch (ClassNotFoundException ex) {
            System.out.println("Gagal Koneksi "+ex);
        }
        String url="jdbc:mysql://localhost:3306/basisdata";
        try {
            konek = DriverManager.getConnection(url, "root", "kodokijo");
            stat = konek.createStatement();
            System.out.println("Ada Database");
        } catch (SQLException se) {
            System.out.println("Tidak ada database "+se);
        }
    }

button simpan

    private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        String sql = "insert into biodata values('"+textkode.getText()+"','"+textnama.getText()+"','"+textkelamin.getText()+"','"+textalamat.getText()+"','"+textfamily.getText()+"')";
        try {
            stat.executeUpdate(sql);
            textkode.setText("");
            textnama.setText("");
            textkelamin.setText("");
            textalamat.setText("");
            textfamily.setText("");
            textkode.requestFocus();
            JOptionPane.showMessageDialog(null, "Berhasil tambah data");
        } catch (SQLException ez) {
            JOptionPane.showMessageDialog(null, "Gagal total "+ez);
        }
    }

button cetak

     private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        String sql = "SELECT biodata.`kode` AS biodata_kode, biodata.`nama` AS biodata_nama, biodata.`kelamin` AS biodata_kelamin, biodata.`alamat` AS biodata_alamat, biodata.`ortu` AS biodata_ortu FROM `biodata` biodata";
        try {
            ResultSet rs = stat.executeQuery(sql);
            JasperPrint jasperPrint;       
            JRResultSetDataSource jrRS = new JRResultSetDataSource (rs);            
            JasperReport jasperReport = JasperCompileManager.compileReport("./src/laporan.jrxml");          
            jasperPrint = JasperFillManager.fillReport(jasperReport, null, jrRS);
            JRViewer aViewer = new JRViewer(jasperPrint);                  
            JDialog viewer = new JDialog();  
            viewer.setTitle(".: Jasper Report :.");             
            viewer.setAlwaysOnTop(true);
            viewer.getContentPane().add(aViewer);                  
            Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();     
            viewer.setBounds(0,0,screenSize.width, screenSize.height);
            viewer.setVisible(true);              

            stat.close();
            konek.close();
        } catch (Exception e) {
            JOptionPane.showMessageDialog(null, "Laporan gak ada "+e);
        }
    }

Kira kira hasil dari program diatas seperti pada gambar yang ada dibawah ini, semoga dapat terbantu dengan adanya tutorial diatas.

ireport-hasil1-442016

ireport-hasil-myform-442016

ireport-hasil-laporan-442016

Download Source Code

Membuat Aplikasi Search Data (Cari Data) dengan Java (Netbeans) dan MySQL

Aplikasi search pada java memang tidak terlalu dibutuhkan jika data yang akan diinput tidak banyak. Kalau data yang diinput banyak dalam program yang dibuat dengan java tentunya akan kewalahan dalam mencari data yang diinginkan dan akan menghabiskan banyak waktu yang semestinya digunakan untuk hal yang lain malah terbuang karena hal ini.

Untuk membuat search data atau pencarian data maka yang pertama sekali dipersiapkan adalah sebuah database dan tabelnya disini penulis menggunakan nama database dengan nama scripting_mysql dan nama tabel dengan nama address. Untuk syntax sqlnya bisa dilihat seperti dibawah ini.

CREATE DATABASE IF NOT EXISTS `scripting_mysql` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `scripting_mysql`;

CREATE TABLE IF NOT EXISTS `address` (
  `serial` int(4) NOT NULL AUTO_INCREMENT,
  `name_first` varchar(30) NOT NULL,
  `name_last` varchar(30) NOT NULL,
  `address_01` varchar(40) NOT NULL,
  `address_02` varchar(40) NOT NULL,
  `address_city` varchar(30) NOT NULL,
  `address_state` varchar(2) NOT NULL,
  `address_postal_code` varchar(10) NOT NULL,
  PRIMARY KEY (`serial`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

INSERT INTO `address` (`serial`, `name_first`, `name_last`, `address_01`, `address_02`, `address_city`, `address_state`, `address_postal_code`) VALUES
(1, 'Clark', 'Kent', '344 Clinton St', 'Apt. #3B', 'Metropolis', 'NY', '10001'),
(2, 'Dave', 'Jones', '500 Second Avenue', 'Suite 100', 'Atlanta', 'GA', '30303'),
(3, 'Tom', 'Watson', '123 Golf Course Lane', 'Suite A', 'Macon', 'GA', '31066'),
(4, 'Jack', 'Nicklaus', '400 Laurel Oak Dr', 'Suite 49', 'Suwanee', 'GA', '31044'),
(5, 'Betty', 'Smith', '100 Main Street', 'Suite 500', 'Buffalo', 'NY', '14201'),
(6, 'Bruce', 'Wayne', '1007 Mountain Drive', '', 'Gotham City', 'NY', '10000'),
(7, 'Ghazali', 'Samudra', 'Grong-grong', 'Sigli', 'Pidie', 'Ac', '24152');

Selanjutnya buatlah sebuah jframe form dengan nama apa saja terserah anda namun disini penulis mengunakan nama MainMenu (MainMenu.java) dan desain lah formnya seperti gambar yang ada dibawah ini, kemudian isikan syntax seperti dibawah ini.

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import javax.swing.JOptionPane;
import javax.swing.UIManager;
import javax.swing.table.DefaultTableModel;

public class MainMenu extends javax.swing.JFrame {

    Connection conn;
    Statement stat;
    ResultSet hasil;
    /**
     * Creates new form MainMenu
     */
    public MainMenu() {
        initComponents();
        koneksi();
        datatabel();
    }
    
    public void koneksi(){
        try {
            Class.forName("com.mysql.jdbc.Driver");
            conn=DriverManager.getConnection("jdbc:mysql://localhost/scripting_mysql","root","kodokijo");
            stat=conn.createStatement();
        } catch (Exception e) {
            JOptionPane.showMessageDialog(null, e);
        }
    }
    
    public void datatabel(){
        Object[] Baris={"Nama","Family","Alamat 1","Alamat 2","Kota","Provinsi","Kode Pos"};
        DefaultTableModel tabmode = new DefaultTableModel(null, Baris);
        jTable1.setModel(tabmode);
        String sql = "select * from address where name_first like '%"+jTextField1.getText()+"%' or name_last like '%"+jTextField1.getText()+"%' or address_01 like '%"+jTextField1.getText()+"%' or address_02 like '%"+jTextField1.getText()+"%' or address_city like '%"+jTextField1.getText()+"%' or address_state like '%"+jTextField1.getText()+"%' or address_postal_code like '%"+jTextField1.getText()+"%'";
        try {
            hasil=stat.executeQuery(sql);
            while(hasil.next()){
                String a = hasil.getString("name_first");
                String b = hasil.getString("name_last");
                String c = hasil.getString("address_01");
                String d = hasil.getString("address_02");
                String e = hasil.getString("address_city");
                String f = hasil.getString("address_state");
                String g = hasil.getString("address_postal_code");
                String[] data = {a,b,c,d,e,f,g};
                tabmode.addRow(data);
            }
        } catch (Exception e) {
        }
    }
}

Sekian tutorial sedikit ini kalau ada kekurangan saya sendiri mohon maaf kalau bisa sih dikomentari pada kotak komentar yang ada dibawah ini. Untuk hasil dan tool-tool lainnya bisa dilihat pada gambar yang ada dibawah ini.

Membuat Aplikasi Search Data (Cari Data) dengan Java (Netbeans) dan MySQL

Download Source Code

Membuat Splash Screen dan ProgressBar dengan Java (Netbeans)

Splash Screen dan ProgressBar adalah sebuah tool yang digunakan pada sebuah program yang membutuhkan loading libraries, dengan adanya Splash Screen dan ProgressBar maka akan memudahkan dalam menampilkan sebuah program karena libraries atau ketergantungannya sudah lengkap.

Splash Screen adalah bentuk jframe atau jpanel yang digunakan untuk menampilkan pada awal hidup aplikasi, walaupun splash screen tidak banyak yang memerlukan tetapi splash screen dapat menjadi style tersendiri dari sebuah program

ProgressBar adalah bentuk progress yang berjalan berdasarkan waktu atau kelengkapan libraries atau ketergantungan biasanya muncul juga persentasenya yang berbentuk % yang akan dijalankan maksimal 100%.

Pada pembuatan aplikasi ini maka diharapkan bagi anda sudah mempunyai java dan netbeans ide, jika belum ada maka download pada link http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html dan https://netbeans.org/downloads/ selanjutnya instal dan jalankan sekaligus buat project baru berinama apa saja, kemudian buat jframe baru dengan nama main.java atau terserah selanjutnya desain jframenya dengan menaruh progressbar, kalau bisa desainnya seperti gambar dibawah ini.

Membuat Splash Screen dan ProgressBar dengan Java (Netbeans) 1

Selanjutnya buat jframe baru lagi beri nama home dan berikan atau desain sesuka hati anda, kemudian tempel script dibawah ini pada main.java tadi pada source seperti dibawah ini.

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.Timer;

/*
 * 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.
 */

/**
 *
 * @author ghazali
 */
public class main extends javax.swing.JFrame {
    Timer timer;
    ActionListener action;
    home hm;
    /**
     * Creates new form main
     */
    public main() {
        initComponents();
        setLocationRelativeTo(this);
        jLabel1.setText(null);
        aksipo();
        timer = new Timer(100, action);
        timer.start();
    }
    
    public void aksipo(){
        action = new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent e) {
                progressBar.setValue(progressBar.getValue() + 5); //persen progress bar bertambah setiap 5 kali
                progressBar.setStringPainted(true);
                if (progressBar.getPercentComplete() == 1.0) {
                    timer.stop();
                    hm = new home();
                    hm.setVisible(true);
                }
            }
        };
        this.dispose();
    }
}

Untuk hasilnya bisa dilihat seperti pada gambar dibawah ini, terima kasih telah berkunjung semoga bermanfaat.

Membuat Splash Screen dan ProgressBar dengan Java (Netbeans) 2

Download Source Code

Membuat Link ke Internet Browser (Tautan) dengan Java (Netbeans)

Link merupakan sebuah alamat yang digunakan pada website namun bisa juga digunakan pada program java. Cara kerja link ini pada java adalah dengan mengklik jlabel maka akan terbuka browser baik firefox atau chrome maka akan terbuka pada tab baru link yang kita masukkan pada script java.

Untuk membuat aplikasi ini maka anda buatlah sebuah project baru pada netbeans ide kemudian buatlah file jframe berinama apa saja kemudian desain jframe dengan menaruh beberapa jlabel dan beri nama sesuai nama link yang akan dibuat dan buat event mouseclicked, kemudian letakkan scriptnya seperti dibawah ini.

import java.awt.Desktop;
import java.io.IOException;
import java.net.URI;
import java.net.URISyntaxException;
import java.util.logging.Level;
import java.util.logging.Logger;

/**
 *
 * @author ghazali
 */
public class main extends javax.swing.JFrame {

    /**
     * Creates new form main
     */
    public main() {
        initComponents();
    }
    
    private void jLabel1MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        try {
            Desktop desktop = Desktop.getDesktop();
            URI url = new URI("http://localhost/owncloud");
            if (Desktop.isDesktopSupported()) {
                try {
                    desktop.browse(url);
                } catch (IOException ex) {
                    Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        } catch (URISyntaxException ex) {
            Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
        }
    }                                    

    private void jLabel2MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        try {
            Desktop desktop = Desktop.getDesktop();
            URI url = new URI("http://localhost/ftp");
            if (Desktop.isDesktopSupported()) {
                try {
                    desktop.browse(url);
                } catch (IOException ex) {
                    Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        } catch (URISyntaxException ex) {
            Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
        }
    }                                    

    private void jLabel3MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        try {
            Desktop desktop = Desktop.getDesktop();
            URI url = new URI("http://localhost/phpmyadmin");
            if (Desktop.isDesktopSupported()) {
                try {
                    desktop.browse(url);
                } catch (IOException ex) {
                    Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        } catch (URISyntaxException ex) {
            Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
        }
    }                                    

    private void jLabel4MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        try {
            Desktop desktop = Desktop.getDesktop();
            URI url = new URI("http://extria.blogspot.com");
            if (Desktop.isDesktopSupported()) {
                try {
                    desktop.browse(url);
                } catch (IOException ex) {
                    Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        } catch (URISyntaxException ex) {
            Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
        }
    }                                    

    private void jLabel5MouseClicked(java.awt.event.MouseEvent evt) {                                     
        // TODO add your handling code here:
        try {
            Desktop desktop = Desktop.getDesktop();
            URI url = new URI("http://www.google.co.id");
            if (Desktop.isDesktopSupported()) {
                try {
                    desktop.browse(url);
                } catch (IOException ex) {
                    Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
                }
            }
        } catch (URISyntaxException ex) {
            Logger.getLogger(main.class.getName()).log(Level.SEVERE, null, ex);
        }
    } 

}

Untuk hasilnya bisa dilihat seperti gambar dibawah ini, semoga bermanfaat, terima kasih telah berkunjung pada blog pemrograman saya.

Membuat Link ke Internet Browser (Tautan) dengan Java (Netbeans)

Download Source Code

Membuat Search Data (Pencarian Data) dengan JSP dan MySQL

Kali ini penulis menggunakan syntax jsp sebagai scripting server languange dalam mencari data alias membuat sebuah aplikasi search engine atau mesin pencarian seperti om google, om yahoo, atau om bing. Seperti halnya search engine yang lain, sebenarnya cara kerjanya sama dan bahkan tidak ada bedanya. Pada artikel saya yang sebelumnya saya sudah membahas pembuatan search engine dengan php dan mysql.

Untuk membuat search engine atau mesin pencarian, bukalah ide java yaitu netbeans atau yang lainnya dan buatlah project baru dengan nama WebSearch atau terserah anda pastikan anda membuat project dengan java web -> web application. kemudian buatlah package dengan nama anda sepertihalnya penulis juga membuat dengan nama ghazali atau terserah anda pada source packages kemudian pada package tersebut buatlah file java class dengan nama koneksi (koneksi.java), Syntax database mysql seperti dibawah ini dan syntax java seperti dibawah syntax sql.

CREATE DATABASE IF NOT EXISTS `datasaya` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `datasaya`;

CREATE TABLE IF NOT EXISTS `situs` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `judul` varchar(100) NOT NULL,
  `deskripsi` text NOT NULL,
  `keyword` varchar(200) NOT NULL,
  `url` varchar(225) NOT NULL,
  `pemilik` varchar(45) NOT NULL,
  `tgl` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

koneksi.java

/*
 * 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 ghazali;

import java.sql.Connection;
import java.sql.DriverManager;

/**
 *
 * @author ghazali
 */
public class koneksi {
    private Connection conn;
    public Connection getConnection(){
        try {
            if(conn==null){
                Class.forName("com.mysql.jdbc.Driver");
                conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/datasaya", "root", "kodokijo");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return conn;
    }
}

Selanjutnya pada web pages terdapat dua file jsp yaitu index.jsp dan search.jsp kalau belum ada silahkan dibuat terlebih dahulu, untuk syntax jspnya adan dibawah ini tinggal dikopi pastekan kedalam project anda.

index.jsp

<%-- 
    Document   : index
    Created on : Feb 25, 2014, 8:14:51 AM
    Author     : ghazali
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Search Engine</title>
        <style type="text/css">
 *{margin:auto;padding:0;}
 body{font-family:helvetica;}
 .con{width:500px;margin-top:200px;}
 label{display:block;font-weight:bolder;font-size:24pt;}
 input[type='search']{height:30px;width:400px;}
 button{padding:5px;width:80px;}
 i{color:#050;}
 </style>
    </head>
    <body>
        <div class="con">
 <form action="search.jsp" method="get">
  <p>
   <label>Mesin<i>Cari</i></label>
   <input type="search" name="cari"/>
   <button>Cari</button>
  </p>
 </form>
 </div>
    </body>
</html>

search.jsp

<%-- 
    Document   : search
    Created on : Feb 25, 2014, 8:17:33 AM
    Author     : ghazali
--%>

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="ghazali.koneksi"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
 *{margin:auto;padding:0;}
 body{font-family:helvetica;}
 .con{width:1024px;margin-top:10px;}
 label{width:300px;display:inline-block;font-weight:bolder;font-size:24pt;}
 input[type='search']{height:30px;width:400px;}
 button{padding:5px;width:80px;}
 i{color:#050;}
 .src{width:600px;margin-top:50px;}
 h3{color:#030;margin-top:10px;}
 section{}
 p a{text-decoration:none;color:#060;margin-bottom:10px;}
 </style>
    </head>
    <body>
        <div class="con">
 <form action="" method="get">
  <p>
   <label>Mesin<i>Cari</i></label>
                        <input type="search" name="cari" value="<% String s=request.getParameter("cari");out.print(s); %>"/>
   <button>Cari</button>
  </p>
 </form>
 </div>
 <div class="src">
 <%
            Connection conn= new koneksi().getConnection();
            Statement stat=conn.createStatement();
            String cari = request.getParameter("cari");
            String data = "Select * from situs where id like '%"+cari+"%' or judul like '%"+cari+"%' or deskripsi like '%"+cari+"%' or url like '%"+cari+"%' or pemilik like '%"+cari+"%' or tgl like '%"+cari+"%' or keyword like '%"+cari+"%'";
            ResultSet res= stat.executeQuery(data);
            while(res.next()){
 %>
            <h3><%= res.getString("judul")%></h3>
            <section><%= res.getString("deskripsi") %></section>
            <p><a href='<%= res.getString("url") %>'><%= res.getString("url") %></a></p>
 <%
            }
 %>
 </div>
    </body>
</html>

Sekian yang dapat saya sampaikan kalau ada kekurangan anda tinggal komentari aja sesuai keinginan anda, bebas komentar apa itu pedas atau enak. Untuk hasilnya bisa dilihat seperti dibawah ini.

search1-jsp-2042016

search2-jsp-2042016

search3-jsp-2042016

Download Source Code

Membuat Include File header, artikel, sidebar dan footer dengan JSP

Include merupakan suatu pemanggilan yang digunakan untuk memanggil file lainnya kedalam file tersebut, dengan include maka akan memudahkan dalam mengontrol data, karena file yang ditampilkan sangat sedikit dan mempunyai beberapa file fixed jadi sewaktu ingin mengedit syntax maka tidak perlu dilakuan pengeditan satu per satu pada halaman tetapi cuma edit file yang bersangkutan misalnya mengedit header.jsp nya saja maka otomatis halaman yang mempunyai include header.jsp akan terubah sendiri.

file-include-jsp-2042016

Buatlah sebuah project pada ide jsp atau yang lebih mudah gunakan saja netbeans atau eclipse tetapi disini penulis menggunakan netbeans, dengan nama project terserah anda namun disini penulis menggunakan nama IncludeJSP dan buatlah folder-folder pada Web Pages yaitu images, scripts dan styles. Untuk folder images maka isikan gambar dibawah ini.

bg-include-jsp-2042016

header-include-jsp-2042016

Selanjutnya buka folder styles dan buatlah sebuah file dengan klik new file -> pilih other -> pilih cascading style sheet dan berinama style (style.css), untuk syntaxnya seperti dibawah ini.

*{
margin: auto;
padding: 0;
}
body{
font-family: helvetica;
background: url(../images/bg.png);
}
#con{
width: 1024px;
padding: 10px;
background: #ffffff;
}
header{
background: url(../images/header.png);
width: 1024px;
height: 250px;
}
nav{
background: -linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
background: -moz-linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
background: -webkit-linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
-svg-background: -linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
width: 1024px;
height: 40px;
margin-top: 10px;
}
nav ul{
list-style-image: none;
padding-left: 10px;
}
nav ul li{
display: inline-block;
padding: 10px;
}
nav ul li a{
text-decoration: none;
color: #fff;
}
nav ul li a:hover{
color: #ff0;
}
nav ul li a:active{
color: #f00;
}
.row{
display: table-row;
}
.cell{
display: table-cell;
}
.artikel{
width:744px;
min-height: 400px;
padding: 10px;
}
.sidebar{
width:250px;
min-height: 400px;
padding-right: 10px;
padding-top: 10px;
padding-left: 10px;
}
footer{
text-align: center;
font-size: 10pt;
color: #00b800;
}
#aside{
width: 250px;
}
.titside{
width: 240px;
background: -linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
background: -moz-linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
background: -webkit-linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
-svg-background: -linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
padding: 10px;
text-align: center;
color: #ffff00;
margin-bottom: 10px;
}
#aside ul{
list-style-image: none;
padding-left: 30px;
}
#aside ul li{
padding-left: 5px;
}
#aside ul li a{
text-decoration: none;
color: #008800;
}
.formulir{
width: 500px;
}
.formulir label{
display: inline-block;
width: 150px;
}
.formulir input[type=text]{
width: 300px;
margin-bottom: 10px;
}
table{
border: 1px solid #009900;
}
tr td{
border: 1px solid #009900;
}
tr th{
background: -linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
background: -moz-linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
background: -webkit-linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
-svg-background: -linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
color: #ffff00;
}

Selanjutnya kembali kepada Web Pages dan buatlah file-file baru seperti nama file yang dibawah ini beserta syntaxnya sekaligus tinggal di kopi pastekan kedalam project anda.

header.jsp

<head>
<title>judul</title>
<link href="styles/style.css" rel="stylesheet"/>
</head>
<body>
<div id="con">
 <header>
 </header>
 <nav>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Feature</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Documentation</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Help</a></li>
 </ul>
 </nav>
 <div class="row">
 <div class="cell artikel">

artikel.jsp

<h1>Title Heading</h1>
 <h6>Post by Ghazali</h6>
 <p>Membuat artikel baru dengan template biasa</p><br/>
 <form method="post" action="">
 <p class="formulir">
 <label>Input Pertama</label>
 <input type="text"/>
 </p>
 <p class="formulir">
 <label>Input Kedua</label>
 <input type="text"/>
 </p>
 <p class="formulir">
 <label>Input Ketiga</label>
 <input type="text"/>
 </p>
 <p class="formulir">
 <label></label>
 <input type="submit" value="Masuk"/>
 <input type="reset" value="Bersih"/>
 </p>
 </form>
 <br/>
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <th>ID</th>
   <th>Nama</th>
   <th>Alamat</th>
   <th>Jenis Kelamin</th>
   <th>Keterangan</th>
  </tr>
  <tr>
   <td>145</td>
   <td>Ghazali</td>
   <td>Pidie</td>
   <td>Laki-laki</td>
   <td>Programmer</td>
  </tr>
  <tr>
   <td>145</td>
   <td>Ghazali</td>
   <td>Pidie</td>
   <td>Laki-laki</td>
   <td>Programmer</td>
  </tr>
  <tr>
   <td>145</td>
   <td>Ghazali</td>
   <td>Pidie</td>
   <td>Laki-laki</td>
   <td>Programmer</td>
  </tr>
  <tr>
   <td>145</td>
   <td>Ghazali</td>
   <td>Pidie</td>
   <td>Laki-laki</td>
   <td>Programmer</td>
  </tr>
  <tr>
   <td>145</td>
   <td>Ghazali</td>
   <td>Pidie</td>
   <td>Laki-laki</td>
   <td>Programmer</td>
  </tr>
 </table>
 <br/>

sidebar.jsp

</div>
 <div class="cell sidebar">
 <div id="aside">
  <div class="titside">Vertical Menu</div>
  <ul>
  <li><a href="#">Home Page</a></li>
  <li><a href="#">Tautan Halaman</a></li>
  <li><a href="#">Artikel Bayak</a></li>
  <li><a href="#">Petunjuk</a></li>
  <li><a href="#">Contact</a></li>
  </ul>
 </div>
 </div>
 </div>

footer.jsp

<footer>Copyright © by Ghazali Pidie</footer>
</div>
</body>

index.jsp

<%-- 
    Document   : index
    Created on : Feb 23, 2014, 8:50:24 PM
    Author     : ghazali
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <%@ include file="header.jsp" %>
    <%@ include file="artikel.jsp" %>
    <h1>Artikel Pendek</h1>
    <jsp:include page="teks.txt" /> 
    <h6>Posting by Teuku Ghazali Pidie</h6>
    <%@ include file="sidebar.jsp" %>
    <%@ include file="footer.jsp" %>
</html>

teks.txt

untuk text buatlah artikel sesuka hati anda

Sekian tutorial kali ini untuk selanjutnya silahkan anda kotak katik, untuk hasilnya bisa dilihat pada gambar yang ada dibawah ini, semoga bermanfaat.

hasil-include-jsp-2042016

Download Source Code

Membuat Aplikasi CRUD (Create, Read, Update, Delete) dengan JSP dan MySQL

Pada tutorial kali ini penulis akan membahas cara membuat sebuah aplikasi dasar dari semua aplikasi yang memerlukan database sebagai penyimpanan datanya, sebenarnya aplikasi yang menggunakan database datanya dapat dinamis karena gak cuma hanya digunakan pada suatu platform saja tapi bisa digunakan untuk data berbagai aplikasi asal bertujuan sama tetapi program dan bahasa pemrogramannya berbeda.

Untuk bisa membuat aplikasi dasar ini yaitu membuat aplikasi crud maka dibutuhkan aplikasi ide dan aplikasi database, untuk mendapatkan semuanya silahkan download disitus resmi mereka. Program ide yang akan digunakan adalah netbeans (java) dan mysql (database).

Pertama tama yang harus dibuat adalah database, buka aplikasi mysql atau bisa menggunakan tool-tool DBMS seperti phpmyadmin atau mysql workbench, untuk syntaxnya lihat dibawah ini.

CREATE DATABASE IF NOT EXISTS `basisdata` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `basisdata`;

CREATE TABLE IF NOT EXISTS `biodata` (
  `kode` varchar(5) NOT NULL,
  `nama` varchar(45) NOT NULL,
  `kelamin` varchar(20) NOT NULL,
  `alamat` varchar(100) NOT NULL,
  `ortu` varchar(45) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `biodata` (`kode`, `nama`, `kelamin`, `alamat`, `ortu`) VALUES
('11111', 'Ghazali', 'Laki-laki', 'Sigli', 'Zulkifli'),
('11112', 'Julinda', 'Perempuan', 'Ulim', 'Yusuf'),
('11113', 'Monicha', 'Perempuan', 'Bambi', 'Rahman'),
('11113', 'Andrian', 'Laki-laki', 'Bambi', 'Ramli'),
('11115', 'Andrian', 'Laki-laki', 'Krung', 'Ramli'),
('12345', 'Reza', 'Laki-laki', 'Desa', 'Kure');

Buatlah sebuah project dengan nama apa saja terserah anda namun disini penulis menggunakan nama WebCrud dan buatlah file jspnya seperti syntax dan filenya dibawah ini.

index.jsp

<%-- 
    Document   : index
    Created on : Feb 13, 2014, 7:44:48 PM
    Author     : ghazali
--%>

<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <div id="con">
            <h3 align="center">Aplikasi Crud JSP dan MySQL</h3>
            <a href="tambah.jsp">Tambah</a>
            <p></p>
            <%
            try {
                String Host = "jdbc:mysql://localhost:3306/basisdata";
                Connection connection = null;
                Statement statement = null;
                ResultSet rs = null;
                Class.forName("com.mysql.jdbc.Driver");
                connection = DriverManager.getConnection(Host, "root", "kodokijo");
                statement = connection.createStatement();
                String Data = "select * from crud";
                rs = statement.executeQuery(Data);
            %>
            <table border="1" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                    <th>Kode</th>
                    <th>Nama</th>
                    <th>Tanggal Lahir</th>
                    <th>Jenis Kelamin</th>
                    <th>Alamat</th>
                    <th>Aksi</th>
                </tr>
                <%
                while (rs.next()) {
                %>
                <tr>
                    <td><%=rs.getString("kode")%></td>
                    <td><%=rs.getString("nama")%></td>
                    <td><%=rs.getString("tgl")%></td>
                    <td><%=rs.getString("jk")%></td>
                    <td><%=rs.getString("alamat")%></td>
                    <td><a href="update.jsp?u=<%=rs.getString("kode")%>" >edit</a> / <a href="delete.jsp?d=<%=rs.getString("kode")%>" > hapus</a></td>
                </tr>
                <%   }    %>
            </table>
            <%
                rs.close();
                statement.close();
                connection.close();
            } catch (Exception ex) {
                out.println("Can't connect to database.");
            }
            %>
        </div>
    </body>
</html>

crudjsp-352016
tambah.jsp

<%-- 
    Document   : tambah
    Created on : Feb 13, 2014, 8:05:40 PM
    Author     : ghazali
--%>

<%@page import="javax.swing.JOptionPane"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <style type="text/css">
            *{margin:auto;padding:0;}
            #con2{width:500px;padding:30px;}
            p{margin-bottom:10px;}
            label{display:inline-block;width:150px;}
        </style>
    </head>
    <body>
        <div id="con2">
            <h3 align="center">Tambah Data</h3><p></p>
            <form action="" method="post">
                <p>
                    <label>Kode</label><input type="text" name="kode"/>
                </p>
                <p>
                    <label>Nama</label><input type="text" name="nama"/>
                </p>
                <p>
                    <label>Tanggal Lahir</label><input type="text" name="tgl" placeholder="YYYY-MM-DD"/>
                </p>
                <p>
                    <label>Jenis Kelamin</label>
                    <input type="radio" name="jk" value="Laki-laki"/> Laki-laki
                    <input type="radio" name="jk" value="Perempuan"/> Perempuan
                </p>
                <p>
                    <label>Alamat</label><input type="text" name="alamat"/>
                </p>
                <p>
                    <label></label><input type="submit" name="submit" value="Simpan"/>
                    <a href="index.jsp">Kembali</a>
                </p>
            </form>
        </div>
    </body>
</html>
<%


String a=request.getParameter("kode");
String b=request.getParameter("nama");
String c=request.getParameter("tgl");
String d=request.getParameter("jk");
String e=request.getParameter("alamat");

//membuat variabel untuk nampung alamat untuk akses database nantinya.

String url="jdbc:mysql://localhost:3306/basisdata";

//membuat koneksi ke database dengan jdbc

Connection conn=null;
PreparedStatement ps=null;

Class.forName("com.mysql.jdbc.Driver").newInstance();

int updateQuery=0;


//untuk mengecek textbox name, city, dan phone tidak kosong

if(a!=null && b!=null && c!=null && d!=null && e!=null){


    if(a!="" && b!="" && c!="" && d!="" && e!=""){
         try{
        conn=DriverManager.getConnection(url,"root","kodokijo");
        String query="Insert into crud(kode,nama,tgl,jk,alamat) values(?,?,?,?,?)";
        ps=conn.prepareStatement(query);
        ps.setString(1,a);
        ps.setString(2,b);
        ps.setString(3,c);
        ps.setString(4,d);
        ps.setString(5,e);
        updateQuery=ps.executeUpdate();
        if(updateQuery!=0){
            JOptionPane.showMessageDialog(null, "Berhasil Tambah Data");
            response.sendRedirect("index.jsp");
        }

    }catch(Exception ex){
        out.println("Koneksi bermasalah");
        
 
    }finally{
        ps.close();
        conn.close();
    }


    }
}
%>

tambahjsp-352016
update.jsp

<%-- 
    Document   : update
    Created on : Feb 13, 2014, 8:29:16 PM
    Author     : ghazali
--%>

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="javax.swing.JOptionPane"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <style type="text/css">
            *{margin:auto;padding:0;}
            #con2{width:500px;padding:30px;}
            p{margin-bottom:10px;}
            label{display:inline-block;width:150px;}
        </style>
    </head>
    <body>
        <div id="con2">
            <h3 align="center">Update Data</h3><p></p>
            <form action="" method="post">
                 <%
                try {
                    String Host = "jdbc:mysql://localhost:3306/basisdata";
                    Connection connection = null;
                    Statement statement = null;
                    ResultSet rs = null;
                    Class.forName("com.mysql.jdbc.Driver");
                    connection = DriverManager.getConnection(Host, "root", "kodokijo");
                    statement = connection.createStatement();
                    String u=request.getParameter("u");
                    int num=Integer.parseInt(u);
                    String Data = "select * from crud where kode='"+num+"'";
                    rs = statement.executeQuery(Data);
                    while (rs.next()) {
                %>   
                <p>
                    <label></label><input type="hidden" name="kode" value='<%=rs.getString("kode")%>'/>
                </p>
                <p>
                    <label>Nama</label><input type="text" name="nama" value='<%=rs.getString("nama")%>'/>
                </p>
                <p>
                    <label>Tanggal Lahir</label><input type="text" name="tgl"  value='<%=rs.getString("tgl")%>'/>
                </p>
                <p>
                    <label>Jenis Kelamin</label>
                    <input type="radio" name="jk" value="Laki-laki"/> Laki-laki
                    <input type="radio" name="jk" value="Perempuan"/> Perempuan
                </p>
                <p>
                    <label>Alamat</label><input type="text" name="alamat" value='<%=rs.getString("alamat")%>'/>
                </p>
                <p>
                    <label></label><input type="submit" name="submit" value="Update"/>
                    <a href="index.jsp">Kembali</a>
                </p>
                <%   }
                    rs.close();
                    statement.close();
                    connection.close();
                } catch (Exception ex) {
                    out.println("Can't connect to database.");
                }
                %>
            </form>
        </div>
    </body>
</html>
<%


String a=request.getParameter("kode");
String b=request.getParameter("nama");
String c=request.getParameter("tgl");
String d=request.getParameter("jk");
String e=request.getParameter("alamat");

//membuat variabel untuk nampung alamat untuk akses database nantinya.

String url="jdbc:mysql://localhost:3306/basisdata";

//membuat koneksi ke database dengan jdbc

Connection conn=null;
PreparedStatement ps=null;

Class.forName("com.mysql.jdbc.Driver").newInstance();

int updateQuery=0;


//untuk mengecek textbox name, city, dan phone tidak kosong

if(a!=null && b!=null && c!=null && d!=null && e!=null){


    if(a!="" && b!="" && c!="" && d!="" && e!=""){
         try{
        conn=DriverManager.getConnection(url,"root","kodokijo");
        String query="update crud set nama=?,tgl=?,jk=?,alamat=? where kode='"+a+"'";
        ps=conn.prepareStatement(query);
        ps.setString(1,b);
        ps.setString(2,c);
        ps.setString(3,d);
        ps.setString(4,e);
        updateQuery=ps.executeUpdate();
        if(updateQuery!=0){
            JOptionPane.showMessageDialog(null, "Berhasil Update Data");
            response.sendRedirect("index.jsp");
        }

    }catch(Exception ex){
        out.println("Koneksi bermasalah");
        
 
    }finally{
        ps.close();
        conn.close();
    }


    }
}
%>

updatejsp-352016
delete.jsp

<%-- 
    Document   : delete
    Created on : Feb 13, 2014, 8:47:02 PM
    Author     : ghazali
--%>

<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
         <%
        String id=request.getParameter("d");
        int no=Integer.parseInt(id);
        try {
            Class.forName("com.mysql.jdbc.Driver").newInstance();
            Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/basisdata", "root", "kodokijo");
            Statement st = conn.createStatement();
            st.executeUpdate("DELETE FROM crud WHERE kode = '"+no+"'");
            response.sendRedirect("index.jsp");
        } catch(Exception e){}
        %>
    </body>
</html>

Download Source Code

Membuat File Upload dan Download dengan JSP dan MySQL

Pada tutorial jsp kali ini penulis akan membahas tentang bagaimana cara membuat file upload ke database tanpa harus meng-upload ke direktori harddisk, jadi file disimpan dalam database dalam bentuk blob. Dengan begini akan memudahkan kita dalam mengendalikan file tanpa harus pusing kehilangan data dari direktori harddisk, begitu data kita hapus dalam database maka akan terhapus juga filenya.

Setelah cara meng-upload penulis juga membahas cara untuk mendownload file yang tersimpan dalam database dan dapat anda kembangkan lagi misalkan anda ingin meng-upload foto dan ingin menampilkan bisa foto tersebut.

Buatlah sebuah project baru pada netbeans dengan nama terserah namun disini penulis membuat nama project dengan nama DocUpload. Setelah project tercipta maka selanjutnya pada folder source packages buatlah sebuah nama package, disini penulis menggunakan nama package dengan nama ghazali, dalam package ghazali nantinya berisi file koneksi ke database, Selanjutnya buat database baru pada mysql atau bisa memakai program database mysql seperti phpmyadmin atau mysql workbench, untuk sintaxnya seperti dibawah ini.

CREATE DATABASE IF NOT EXISTS `Jsp_Upload` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
USE `Jsp_Upload`;

CREATE TABLE IF NOT EXISTS `documents` (
  `Doc_id` int(11) NOT NULL AUTO_INCREMENT,
  `FileName` varchar(100) NOT NULL,
  `type` varchar(20) NOT NULL,
  `upload_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `content` mediumblob NOT NULL,
  `upload_by` varchar(50) NOT NULL,
  PRIMARY KEY (`Doc_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

Selanjutnya buat file java class yang nantinya akan dibuat sebagai koneksi ke database mysql server, dengan file yang bernama terserah anda namun disini penulis menggunakan nama koneksi (koneksi.java). Untuk sintaxnya seperti dibawah ini.

package ghazali;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;

public class koneksi {
    static Connection con;
    public static Connection getConnection()
    {
        try
        {            
            if(con==null)
            {
                Class.forName("com.mysql.jdbc.Driver");                    
                con= DriverManager.getConnection("jdbc:mysql://localhost:3306/Jsp_Upload?user=root&password=");          
            }
        }
        catch (Exception ex)
        {
            ex.printStackTrace();
        }        
        return con;
    }
    
    public static void CloseConnection()
    {
        if(con!=null)
        {
            try
            {
                con.close();
                con = null;
            }
            catch (SQLException ex)
            {
                ex.printStackTrace();
            }            
        }
        
    }
    
    public static ResultSet getResultFromSqlQuery(String SqlQueryString)
    {
        System.out.println("in funcation");
        ResultSet rs=null;
        if(con==null)
        {
            getConnection();
        }
        try
        {
            rs = con.createStatement().executeQuery(SqlQueryString);
        }
        catch (SQLException ex)
        {
            ex.printStackTrace();
        }             
        return rs;
    }
            
    
    public static void main(String args[])
    {
        getResultFromSqlQuery("select * from documents");
        CloseConnection();
        System.out.println("con done" + (con==null));                
    }
    
}

Buka file index.jsp dan isikan syntax dibawah ini. file index.jsp ini nantinya akan digunakan untuk meng-upload file atau tempat dimana terletak form upload atau data download file.

<%-- 
    Document   : index
    Created on : Feb 18, 2014, 5:30:38 PM
    Author     : ghazali
--%>

<%@page import="ghazali.koneksi"%>
<%@page import="java.sql.ResultSet"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script>
            function verify()
            {
                if(document.getElementById('filename').value=="")
                {
                    alert('Please select the file');
                    return false;                
                }
                else
                {
                    return true;
                }
            }
        </script>
    </head>
    <body>
        <h2>Unggah File Dokumen</h2>
        <form enctype="multipart/form-data" action="unggah.jsp" onsubmit="return verify()" method="post">
            Pilih File <input type="file" name="filename" id="filename" accept=".txt, application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/msword" />
            <input type="submit" value="Upload"/>
        </form>
        <br/>
        <table border="1" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <tr><th>File Name</th><th>Uploaded By</th><th>File Type</th><th>Upload Time</th><th>Action</th></tr>
            <%
                ResultSet rs = koneksi.getResultFromSqlQuery("select doc_id,filename,type, upload_time, upload_by from documents");
                int count =0;
                while(rs.next())
                {
                   out.println("<tr>"
                           + "<td>"+rs.getString(2)+"</td>"
                           + "<td>"+rs.getString(5)+"</td>"
                           + "<td>"+rs.getString(3)+"</td>"
                           + "<td>"+rs.getString(4)+"</td>"
                           + "<td><a href='unduh.jsp?Doc_id="+rs.getInt(1) +"'> Download </a></td>"                                                      
                           + "</tr>");
                   count++;
                }
                rs.close();
                koneksi.CloseConnection();
                if(count==0)
                {
                    out.println("<tr><td colspan='4'> No File Found..!! </td></tr>");
                }
            %>        
            </tr>
        </table>
    </body>
</html>

Selanjutnya buatlah file dengan nama unggah.jsp (upload file) dan unduh.jsp (download file) untuk proses upload dan proses dimana akan digunakan untuk memproses data baik dari sisi upload dan download, dan file file ini juga bertindak apakah file berhasil di upload atau tidak, untuk syntaxnya seperti dibawah ini.

unggah.jsp

<%-- 
    Document   : unggah
    Created on : Feb 18, 2014, 5:42:39 PM
    Author     : ghazali
--%>

<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@page import="java.util.Enumeration"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.io.File"%>
<%@page import="java.io.FileInputStream"%>
<%@page import="java.io.InputStream"%>
<%@page import="ghazali.koneksi"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        upload file page...!!!
        <%
            String rtempfile = File.createTempFile("temp","1").getParent();            
            MultipartRequest multi = new MultipartRequest(request,rtempfile, 15*1024*1024);     // maximum size 15 MB
            
            Enumeration files = multi.getFileNames();
            

            String st="insert into documents(filename, type,content, upload_by) values (?,?,?,?)";
            PreparedStatement psmt=koneksi.getConnection().prepareStatement(st);
            
                        
            String name="";
            String fileExtesion="";
            File ff =null;
            FileInputStream fin =null;
            
            while (files.hasMoreElements())
            {
                    name=(String)files.nextElement();                                        
                    ff = multi.getFile(name);
                    fileExtesion = ff.getName().substring(ff.getName().lastIndexOf("."));
                    
                    boolean fileAllowed = fileExtesion.equalsIgnoreCase(".txt")||
                                          fileExtesion.equalsIgnoreCase(".pdf")||
                                          fileExtesion.equalsIgnoreCase(".doc")||
                                          fileExtesion.equalsIgnoreCase(".docx")||
                                          fileExtesion.equalsIgnoreCase(".xls")||
                                          fileExtesion.equalsIgnoreCase(".xlsx");
                    
                    if((ff!=null)&&fileAllowed)
                    {

                            try
                            {
                                    fin=new FileInputStream(ff);
                                    psmt.setString(1, ff.getName());
                                    psmt.setString(2, fileExtesion);
                                    psmt.setBinaryStream(3,(InputStream)fin, (int)(ff.length()));
                                    psmt.setString(4, "Logged User name or ID");        // pass the user name or id 
                                    boolean sss = psmt.execute();
                                    
                                    out.print("uploaded successfully..");
                                    out.print("<br/> Go to page");
                            }

                            catch(Exception e)
                            {
                                    out.print("Failed due to " + e);
                            }

                            finally
                            {
                            // next statement is must otherwise file will not be deleted from the temp as fin using f.
                             // its necessary to put outside otherwise at the time of exception file will not be closed.
                                    fin.close();
                                    ff.delete();
                            }
                    }
                    else
                    {
                           out.print("Please select the correct file...");
                    }// end of if and else
            }// end of while
                                   
            koneksi.CloseConnection();            
        %>
        <a href="index.jsp">Home Page</a>
    </body>
</html>

unduh.jsp

<%-- 
    Document   : unduh
    Created on : Feb 18, 2014, 5:45:12 PM
    Author     : ghazali
--%>

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Blob"%>
<%@page import="java.io.OutputStream"%>
<%@page import="ghazali.koneksi"%>
<%
    String doc_id = request.getParameter("Doc_id");     
    ResultSet rs = koneksi.getResultFromSqlQuery("select FileName, type, content from documents where Doc_id = " + doc_id);
    rs.next();
    
    response.reset();
                             
    if(rs.getString(2)==".txt")
    {
        response.setContentType("application/octet-stream");
    }
    else if(rs.getString(2)==".pdf")
    {
        response.setContentType("application/pdf");
    }
    else if((rs.getString(2)==".doc")||rs.getString(2)==".docx")
    {
        response.setContentType("application/msword");
    }
    else if((rs.getString(2)==".xls")||(rs.getString(2)==".xlsx"))
    {
        response.setContentType("application/vnd.ms-excel");
    }
    response.addHeader("Content-Disposition","attachment; filename="+rs.getString(1));
    Blob blb = rs.getBlob(3);
    byte[] bdata = blb.getBytes(1, (int) blb.length());
    
    OutputStream output =  response.getOutputStream();
    output.write(bdata);
    output.close();
              
    rs.close();
    koneksi.CloseConnection(); 
%>

Sekian tutorial kali ini kalau ada kesalahan penulis minta pengunjung untuk mengkritik pedas, untuk hasil akhirnya anda bisa lihat gambar yang dibawah ini.

uploadjsp

Download Source Code

Cara Membuat Navigasi Menubar Dengan HTML5 dan CSS3

Cara membuat menu, navbar, navigation/navigasi, menubar, menu sidebar/sidemenu, menu topbar dengan html dan css. Navigasi menu umumnya merupakan menu topbar atau menu atas yang wajib ada disetiap website, biasanya dalam menu navigasi navbar ini berisi menu yang sangat penting untuk pengunjung website tersebut. Selain dari menu navbar penulis juga akan membahas tentang menu sidebar, untuk lebih jelas lihat dibawah ini.

Baca juga: Cara belajar menggunakan html paling dasar pertama kali

Menu Sidebar (Vertical Navigation Bar)

css-navigation-menu-1Vertical navigation bar merupakan menu yang terletak disamping kanan atau kiri dan biasanya disebut menu sidebar yang ada disetiap website seperti popular post, recent post, comment post dan lain-lain yang berisi judul artikel disetiap item menu sidebar tersebut. Untuk pembuatan menu sidebar atau vertical navigation bar adalah seperti dibawah ini.

Baca juga: Cara belajar menggunakan css paling dasar pertama kali

<ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
</ul>

Simpan kode diatas dengan nama sidebar.html dan juga buatkan file css dengan nama style1.css atau terserah anda saja, untuk sintak css seperti dibawah ini.

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  width:200px;
  background-color:#f1f1f1;
  font-family:sans-serif;
  border:1px solid #ccc;
}
li{
  border-bottom:1px solid #ccc;
}
li a{
  display:block;
  text-decoration:none;
  color:#000;
  padding:8px 16px;
}
li a:hover{
  background-color:#555;
  color:#fff;
}
li.active a{
  background:#4169e1;
  color:#fff;
}
li:last-child{
  border-bottom:none;
}

Menu Topnav/Navbar (Horizontal Navigation Bar)

css-navigation-menu-2Horizontal navigation bar merupakan menu navbar atau topnav yang biasa disebut sebagai menu primery yang memang wajib ada disetiap website dan umum berisi menu item yang paling penting untuk penggunanya/pengunjungnya seperti berisi kategori terpenting. Untuk lebih jelas silahkan lihat dibawah ini.

<ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
  <li class="right"><a href="#">Sign Up</a></li>
  <li class="right active"><a href="#">Sign In</a></li>
</ul>

Simpan file tersebut dengan nama index2.html dan buatkan file css dengan nama style2.css dan gunakan sintak css dibawah ini.

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  width:100%;
  background-color:#f1f1f1;
  font-family:sans-serif;
  border:1px solid #ccc;
  overflow:hidden;
}
li{
  float:left;
}
li a{
  display:block;
  text-decoration:none;
  color:#000;
  padding:14px 16px;
  text-align:center;
}
li a:hover{
  background-color:#555;
  color:#fff;
}
li.active a{
  background:#4169e1;
  color:#fff;
}
li.right{
  float:right;
}
ul.fixed-top{
    position: fixed;
    top: 0;
}
ul.fixed-bottom{
    position: fixed;
    bottom: 0;
}

Menu Dropdown (Dropdown Navigation Bar)

css-navigation-menu-3Dropdown navigation bar adalah menu item yang ada sub item-nya atau dropdown menu yang berisi sub item, untuk lebih jelas silahkan lihat kode pemrograman dibawah ini.

<ul class="navbar">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
  <li class="dropdown">
    <a href="#" class="btndown">Dropdown</a>
    <ul class="itemdown">
      <li><a href="#">Item #1</a></li>
      <li><a href="#">Item #2</a></li>
      <li><a href="#">Item #3</a></li>
      <li><a href="#">Item #4</a></li>
    </ul>
  </li>
  <li class="right"><a href="#">Sign Up</a></li>
  <li class="right active"><a href="#">Sign In</a></li>
</ul>

Simpan file tersebut kedalam index3.html dan buatkan file css baru dengan nama style3.css dan gunakan kode css dibawah ini.

ul.navbar{
  list-style-type:none;
  margin:0;
  padding:0;
  width:100%;
  background-color:#f1f1f1;
  font-family:sans-serif;
  border:1px solid #ccc;
  overflow:hidden;
}
ul.navbar li{
  float:left;
}
ul.navbar li a, .btndown{
  display:inline-block;
  text-decoration:none;
  color:#000;
  padding:14px 16px;
  text-align:center;
}
ul.navbar li a:hover, .dropdown:hover .btndown{
  background-color:#555;
  color:#fff;
}
ul.navbar li.active a{
  background:#4169e1;
  color:#fff;
}
ul.navbar li.right{
  float:right;
}
ul.navbar li.dropdown{
  display:inline-block;
}
.itemdown{
  display:none;
  position:absolute;
  bacground-color:#f9f9f9;
  margin:0;
  padding:0;
  box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
  list-style-type:none;
}
.itemdown li{
  clear:both;
  float:none;
}
.itemdown li a{
  color:black;
  padding:12px 86px;
  display:inline-block;
  min-width: 100px;
  text-decoration:none;
}
.itemdown li a:hover{
  background-color:#f1f1f1;
}
.dropdown:hover .itemdown{
  display:block;
}

Responsif Navbar (Responsive Menu Topnav)

css-navigation-menu-4Responsif navbar merupakan responsive menu navigasi topbar yang membuat navbar dapat berjalan pada sisi desktop, tablet dan mobile phone dengan bentuk yang berbeda walau satu kerangka diantara perangkat desktop dengan perangkat mobile.

<ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li class="right"><a href="#">Help</a></li>
</ul>

Simpan file tersebut dengan nama index4.html dan buatkanlah file css baru dengan nama style4.css dan gunakan kode css dibawah ini.

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  background-color:#333;
}
ul li{
  float: left;
}
ul li a{
  display:block;
  color:#fff;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
}
ul li:not(.active) a:hover{
  background-color:#111;
}
ul li.active a{
  background-color:#4169e1;
}
ul li.right{
  float:right;
}
@media screen and (max-width: 600px){
  ul li.right, ul li{
    float:none;
  }
}

Responsif Menu Sidebar (Responsive Sidenav)

css-navigation-menu-5Responsif menu sidebar merupakan menu pada perangkan desktop berbentuk menu sidenav/sidebar sedangkan pada perangkat tablet dan netbook berbentuk menu topnav/navbar sedangkan pada perangkat mobile berbentuk list menu. Untuk lebih jelas lihat kode dibawah ini.

<ul>
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Demos</a></li>
  <li><a href="#">Help</a></li>
</ul>
<div class="content">
  <h1>Side Navigation</h1>
  <p>...</p>
</div>

Simpan file tersebut dengan nama index5.html dan buatkanlah file css baru dengan nama style5.css dan gunakan kode dibawah ini.

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  width:25%;
  background-color:#f1f1f1;
  position:fixed;
  overflow:auto;
}
ul li a{
  display:block;
  color:#000;
  padding:8px 16px;
  text-decoration:none;
}
ul li.active a{
  background-color:#4169e1;
}
ul li:not(.active) a:hover{
  background:#555;
  color:#fff;
}
div.content{
  margin-left:25%;
  padding: 1px 16px;
  height:1000px;
}
@media screen and (max-width:1024px){
  ul{
    width:100%;
    height:auto;
    position:relative;
  }
  ul li a{
    float:left;
    padding:15px;
  }
  div.content{
    margin-left:0;
  }
}
@media screen and (max-width:485px){
  ul li a{
    float:none;
    text-align:center;
  }
}

Sekian tutorial kali ini semoga bermanfaat, untuk belajar kode diatas bisa anda gunakan codepen.io dan jsfiddle untuk belajar cepat dan mudah tanpa menggunakan software komputer anda.

Membuat Media Responsive Dengan CSS

Media adalah sebuah alat atau perangkat untuk menampilkan sebuah informasi baik dalam bentuk digital atau dalam kenyataan, namun yang dimaksud disini adalah media layar yang berbentuk apa saja baik smartphone, tablet, laptop atau komputer yang ada layarnya untuk menampilkan sebuah informasi, responsive (responsif) adalah bentuk media yang bisa berpindah-pindah bentuk saat dibuka pada perangkat yang berbeda.

Media responsive cuma bisa diatur meggunakan CSS3 atau dengan kata lain media rule, selain itu pengaturan perintah css untuk media responsif ini juga dikatakan media query atau media type yang bisa dibuat css embeded atau css external, berikut ini adalah langkah-langkah pembuatan media responsif yang bisa anda lakukan dan ikuti.

Untuk pertama-tama yang perlu anda buat adalah sebuah html dan css atau juga bisa anda gabungkan keduanya, html yang kita gunakan adalah versi 5, selain itu juga Anda perlu membuat dokumen html bisa berjalan pada perangkat mobile, jika browser anda tidak mendukung html5 maka Anda bisa menggunakan framework untuk mengatasi browser anda seperti html5shiv.min.js dan respond.js juga jika browser Anda tidak mendukung css maka Anda bisa menggunakan framework normalize.css atau yang lebih jelas seperti dibawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Media Responsive</title>
 	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 
  </head>
  <body>
 
  </body>
</html>

Setelah itu kita bisa membuat ukuran yang biasa digunakan pada berbaga perangkat seperti umumnya smartphone menggunakan ukuran 320, 480 dan 485, untuk tablet biasa mengunakan ukuran 768, 1024, untuk komputer dan laptop biasanya ukuran yang digunakan adalah 1024, 1300, atau 1600 bahkan lebih besar dari itu, semua ukuran itu digunakan pada lebar layar atau width, cara menggunakan pada css seperti perintah dibawah ini.

@media only screen and (max-width: 767px) {
	body {
		background-color: firebrick;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	body {
		background-color: lightgreen;
	}
}
@media only screen and (min-width: 992px) and (max-width: 1119px) {
	body {
		background-color: royalblue;
	}
}
@media only screen and (min-width: 1200px) {
	body {
		background-color: darkorange;
	}
}

Pada sintaks diatas saya membuat bentuk saat dibuka lewat perangkat yang ukuran layar dibawah 767 maka akan muncul warna body merah, jika ukuran layar minimal 768 dan maksimal 991 maka akan muncul warna body hijau cerah, jika ukuran layar minimal 992 dan maksimal 1119 maka akan muncul warna biru muda, dan jika ukuran layar lebih besar sama dengan dari 1200 maka akan muncul warna body orange gelap. berikut ini adalah kode penuhnya

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Media Responsive</title>
 	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <style type="text/css">
    @media only screen and (max-width: 767px) {
		body {
		    background-color: firebrick;
		}
	}
	@media only screen and (min-width: 768px) and (max-width: 991px) {
		body {
		    background-color: lightgreen;
		}
	}
	@media only screen and (min-width: 992px) and (max-width: 1119px) {
		body {
		    background-color: royalblue;
		}
	}
	@media only screen and (min-width: 1200px) {
		body {
		    background-color: darkorange;
		}
	}
    </style>
    
  </head>
  <body>
 
  </body>
</html>

Sekian semoga bermanfaat untuk anda yang berkunjung, jika ada pertanyaan bisa anda tanyakan pada forum dalam website ini.

Upload File dan Hapus File dengan PHP dan MySQL

Upload file sangat dibutuhkan jika kita membuat sebuah aplikasi web yang mengharuskan upload file, umumnya upload file yang biasa digunakan adalah upload file dalam bentuk foto, selain upload file kita juga akan membahas cara menghapus file yang telah kita upload, namun disini saya akan membahas cara upload file berbentuk foto dengan format image/jpg (atau png, jpeg, gif), untuk project upload file ini kita akan menggunakan tool dari bootstrap atau seperti kode dibawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Upload File Using PHP</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

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

	<p><br/></p>
	<div class="container">
    
	...


	</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

Selain itu kita juga menggunakan database dari mysql dan juga menggunakan php dan pdo, untuk kode database ada dibawah ini tinggal Anda copy pastekan kedalam menu sql untuk dieksekusi atau diimport file .sql kedalam phpmyadmin atau mysql workbench, untuk kode sqlnya seperti dibawah ini.

CREATE DATABASE IF NOT EXISTS `alupload` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;

USE `alupload`;


CREATE TABLE IF NOT EXISTS `foto` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `foto` text NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=latin1;


INSERT INTO `foto` (`id`, `foto`) VALUES
(4, '5-video-editor-maker.png'),
(5, 'listbox-combobox-2016-05-04.png'),
(6, 'cloud-formation-hd-wallpaper-for-widescreen-desktop-background.jpeg'),
(7, 'colorful-triangles-background_yB0qTG6.jpg');

Selanjutnya buatlah file baru bernama index.php dan folder baru bernama images kedalam file baru dalam folder web server, jika menggunakan XAMPP maka folder root web server adalah C:/xampp/htdocs, kemudian isikan kode bootstrap diatas dan hapus … kemudian gantikan dengan kode dibawah ini.

<form method="post" enctype="multipart/form-data">
	<div class="form-group">
		<label for="foto">Pilih Foto</label>
		<input type="file" id="foto" name="foto">
		<p class="help-block">Only JPG, PNG, GIF</p>
	</div>
	<button type="submit" name="upload" class="btn btn-primary">Upload</button>
</form>

Selanjutnya membuat aksi untuk mengupload file kedalam folder images dan kedalam database menggunakaan kode php dibawah ini, sedikit penjelasan pada setiap form upload wajib ber atribut enctype=”multipart/form-data”, karena jika tidak ada atribut itu maka file tidak akan diupload dan juga pada php wajib ada move_uploaded_file untuk pengunggah file kedalam direktori folder images, untuk kodenya seperti dibawah ini.

<?php
		$db = new PDO('mysql:host=localhost;dbname=alupload', 'root', '');
		if(isset($_POST['upload'])){
			$file = $_FILES['foto']['name'];
			$size = $_FILES["foto"]["size"];
			$type = $_FILES["foto"]["type"];
			$tmp = $_FILES['foto']['tmp_name'];
			$target = "images/".$file;
			if (!file_exists($target)) {
				if ($size <= 50000000) {
					if($type == "image/jpg" || $type == "image/png" || $type == "image/jpeg" || $type == "image/gif" ) {
						if (move_uploaded_file($tmp, $target)) {
							$stmt = $db->prepare("INSERT INTO foto (foto) VALUES (?)");
							$stmt->bindParam(1, $file);
							if($stmt->execute()){
								?>
								<div class="alert alert-success alert-dismissible" role="alert">
								  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								  Berhasil Diupload dan Disimpan dalam database (<?php echo $file ?>);
								</div>
								<?php
							} else{
								?>
								<div class="alert alert-warning alert-dismissible" role="alert">
								  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								  File belum disimpan kedalam database
								</div>
								<?php
							}
						} else {
							?>
							<div class="alert alert-danger alert-dismissible" role="alert">
							  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							  Sorry, there was an error uploading your file.
							</div>
							<?php
						}
					} else{
						?>
						<div class="alert alert-danger alert-dismissible" role="alert">
							<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							Sorry, only JPG, JPEG, PNG & GIF files are allowed.
						</div>
						<?php
					}
				} else{
					?>
					<div class="alert alert-danger alert-dismissible" role="alert">
						<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						Sorry, your file is too large.
					</div>
					<?php
				}
			} else{
				?>
				<div class="alert alert-danger alert-dismissible" role="alert">
					<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					Sorry, file already exists.
				</div>
				<?php
			}
		}
?>

Penjelasan, kita disini menggunakan pdo untuk koneksi antara php dan mysql selanjutnya !file_exists merupakan tidak boleh upload file telah ada, type file cuma jpg, jpeg, png, gif jika menggunakan type file lain seperti pdf, xps, dan lain-lain Anda bisa gantikan image/png ke application/pdf, application/vnd.ms-xpsdocument, audio/ogg, video/mp4, dan lain-lain.

Selanjutnya adalah membuat atau menampilkan file atau foto kedalam browser dengan menggunakan sintak <img/> beserta dengan membuat link button untuk lihat ukuran penuh pada dialog dan link button untuk hapus foto atau file, untuk kode seperti dibawah ini.

<p></p>
		<div class="row">
		
		<?php
		$stmt2 = $db->prepare("SELECT * FROM foto");
		if ($stmt2->execute()) {
		  while ($row = $stmt2->fetch()) {
		?>
		  <div class="col-sm-6 col-md-3">
			<div class="thumbnail">
			  <img src="images/<?php echo $row['foto'] ?>" alt="<?php echo $row['foto'] ?>" style="height:120px;">
			  <div class="caption">
				<p><a href="#" data-toggle="modal" data-target="#myModal-<?php echo $row['id'] ?>" class="btn btn-primary" role="button">View</a> <a href="?id=<?php echo $row['id'] ?>&foto=<?php echo $row['foto'] ?>" onclick="return confirm('Kamu yakin!')" class="btn btn-danger" role="button">Delete</a></p>
				<!-- Modal -->
				<div class="modal fade" id="myModal-<?php echo $row['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-<?php echo $row['id'] ?>">
				  <div class="modal-dialog" role="document">
					<div class="modal-content">
					  <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel-<?php echo $row['id'] ?>"><?php echo $row['id'] ?> <?php echo $row['foto'] ?></h4>
					  </div>
					  <div class="modal-body">
						<img src="images/<?php echo $row['foto'] ?>" style="width:100%"/>
					  </div>
					  <div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					  </div>
					</div>
				  </div>
				</div>
				
			  </div>
			</div>
		  </div>
		<?php
		  }
		}
		?>
		</div>

Untuk eksekusi saat link button hapus diklik dengan menggunakan php seperti kode dibawah ini.

<?php
if(isset($_GET['id'])){
			$id = $_GET['id'];
			$foto = $_GET['foto'];
			if(unlink('images/'.$foto)){
				$stmt3 = $db->prepare("DELETE FROM foto where id = ?");
				if ($stmt3->execute(array($id))) {
					?>
					<script>location.href='index.php'</script>
					<?php
					//header('location: index.php');
				}
			}
		}
		?>

Untuk kode penuh cara membuat upload file, lihat file dan hapus file menggunakan php dan mysql seperti dibawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Upload File Using PHP</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
	<p><br/></p>
	<div class="container">
		
		<?php
		$db = new PDO('mysql:host=localhost;dbname=alupload', 'root', '');
		if(isset($_POST['upload'])){
			$file = $_FILES['foto']['name'];
			$size = $_FILES["foto"]["size"];
			$type = $_FILES["foto"]["type"];
			$tmp = $_FILES['foto']['tmp_name'];
			$target = "images/".$file;
			if (!file_exists($target)) {
				if ($size <= 50000000) {
					if($type == "image/jpg" || $type == "image/png" || $type == "image/jpeg" || $type == "image/gif" ) {
						if (move_uploaded_file($tmp, $target)) {
							$stmt = $db->prepare("INSERT INTO foto (foto) VALUES (?)");
							$stmt->bindParam(1, $file);
							if($stmt->execute()){
								?>
								<div class="alert alert-success alert-dismissible" role="alert">
								  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								  Berhasil Diupload dan Disimpan dalam database (<?php echo $file ?>);
								</div>
								<?php
							} else{
								?>
								<div class="alert alert-warning alert-dismissible" role="alert">
								  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								  File belum disimpan kedalam database
								</div>
								<?php
							}
						} else {
							?>
							<div class="alert alert-danger alert-dismissible" role="alert">
							  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							  Sorry, there was an error uploading your file.
							</div>
							<?php
						}
					} else{
						?>
						<div class="alert alert-danger alert-dismissible" role="alert">
							<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							Sorry, only JPG, JPEG, PNG & GIF files are allowed.
						</div>
						<?php
					}
				} else{
					?>
					<div class="alert alert-danger alert-dismissible" role="alert">
						<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						Sorry, your file is too large.
					</div>
					<?php
				}
			} else{
				?>
				<div class="alert alert-danger alert-dismissible" role="alert">
					<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					Sorry, file already exists.
				</div>
				<?php
			}
		}
		if(isset($_GET['id'])){
			$id = $_GET['id'];
			$foto = $_GET['foto'];
			if(unlink('images/'.$foto)){
				$stmt3 = $db->prepare("DELETE FROM foto where id = ?");
				if ($stmt3->execute(array($id))) {
					?>
					<script>location.href='index.php'</script>
					<?php
					//header('location: index.php');
				}
			}
		}
		?>
		<form method="post" enctype="multipart/form-data">
		  <div class="form-group">
			<label for="foto">Pilih Foto</label>
			<input type="file" id="foto" name="foto">
			<p class="help-block">Only JPG, PNG, GIF</p>
		  </div>
		  <button type="submit" name="upload" class="btn btn-primary">Upload</button>
		</form>
		
		<p></p>
		<div class="row">
		
		<?php
		$stmt2 = $db->prepare("SELECT * FROM foto");
		if ($stmt2->execute()) {
		  while ($row = $stmt2->fetch()) {
		?>
		  <div class="col-sm-6 col-md-3">
			<div class="thumbnail">
			  <img src="images/<?php echo $row['foto'] ?>" alt="<?php echo $row['foto'] ?>" style="height:120px;">
			  <div class="caption">
				<p><a href="#" data-toggle="modal" data-target="#myModal-<?php echo $row['id'] ?>" class="btn btn-primary" role="button">View</a> <a href="?id=<?php echo $row['id'] ?>&foto=<?php echo $row['foto'] ?>" onclick="return confirm('Kamu yakin!')" class="btn btn-danger" role="button">Delete</a></p>
				<!-- Modal -->
				<div class="modal fade" id="myModal-<?php echo $row['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-<?php echo $row['id'] ?>">
				  <div class="modal-dialog" role="document">
					<div class="modal-content">
					  <div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel-<?php echo $row['id'] ?>"><?php echo $row['id'] ?> <?php echo $row['foto'] ?></h4>
					  </div>
					  <div class="modal-body">
						<img src="images/<?php echo $row['foto'] ?>" style="width:100%"/>
					  </div>
					  <div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					  </div>
					</div>
				  </div>
				</div>
				
			  </div>
			</div>
		  </div>
		<?php
		  }
		}
		?>
		</div>
		
	</div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

Untuk screenshot hasil dari file upload seperti gambar dibawah ini.

upload-file-php-652016

Download Source Code