Membuat Auto Scroll Follow Sidebar

Cara membuat auto scroll follow sidebar, tutorial ini menjelaskan cara membuat sidebar dalam posisi fixed artinya saat kita melakukan scroll (gulir) browser maka sidebar itu akan mengikuti juga jadi tidak bersifat static, hal ini memudahkan kita yang membuat program one page crud atau menu sidebar yang mengikuti kemana arah scroll (gulir) apakah keatas atau kebawah. Sebenarnya kita bisa menambahkan sintaks css yang sedikit aja (position:fixed) namun sintaks ini tidak berjalan sempurna artinya ia hanya fixed browser aja tanpa ada efek animasi berjalan.

Pada tutorial ini kita akan membuat sidebar akan mengikut kemana guliran atau scroller yang kita lakukan pada browser apakah keatas atau kebawah dan tidak mengubah posisi lebar (bukan tinggi), jika menggunakan sintaks dasar position fixed css maka letak posisi tidak sejajar dengan desain kolom layout kita berbeda dengan halnya yang akan kita bahas pada artikel ini.

Penggunaan Dasar CSS

Cara yang paling mudah adalah dengan menggunakan css seperti yang telah saya jelaskan diatas namun kekurangannya tata letaknya harus kita desain ulang seperti mengatur ukuran margin atau kanan/kiri untuk menyesuaikan dengan konten/artikel, sintaks sederhana seperti dibawah ini.

#content { 
  width: 700px; 
  margin: 15px auto; 
  position: relative; 
}

#sidebar { 
  width: 300px; 
  position: fixed; 
  margin-left: 510px; 
}

Dengan teknik ini sidebar tetap pada posisinya pada saat scroll lagi bergulir keatas atau kebawah seperti sudah menempel pada jendela browser

Efek Animasi jQuery

Jika kita menggunakan jquery/javascript maka sidebar akan berjalan/beranimasi saat kita lagi mengulir scroll baik keatas maupun kebawah mulain dari posisi dasar sampai pada batasan akhir sidebar tersebut, selain itu kita bisa mengukur seberapa jauh guliran scrollnya beserta dengan juga mengatur sesuka hati kita.

$(function() {

    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
    
});

Metode ini lebih ditekankan pada pemberian efek animasi berjalan saat jendela sidebar lagi bergulir scroll keatas atau kebawah. Sekian

Membuat Interaksi Database Mudah Dengan NotORM

NotORM adalah sebuah singkatan dari Not Object Relational Mappers (ORMs). Itu sangat membantu Anda untuk secara cepat membuat aplikasi Anda tanpa khawatir tentang menulis query SQL baku. Idenya adalah untuk menyederhanakan interaksi database dan menghindari kemungkinan kesalahan dalam menulis query yang kompleks. Bahkan, ORMs modern dapat menghasilkan Model/Entitas dari database, dan sebaliknya.

Sebenarnya semua ORM itu sangat sederhana untuk menggunakannya jika Anda sudah memiliki pengalaman menggunakannya. Untuk membuat sebagian besar dari itu, Anda harus memiliki pemahaman yang mendalam tentang konsep-konsep. Dan ada tempat belajar yang bagus terkait dengan ORM manapun.

Jika Anda sedang mengembangkan sebuah aplikasi sederhana dengan beberapa tabel, menggunakan ORM penuh mungkin berlebihan. Dalam hal ini, Anda mungkin ingin mempertimbangkan untuk menggunakan NotORM. NotORM mudah dipelajari dan mudah digunakan karena menyediakan API intuitif untuk berinteraksi dengan database. Dalam artikel ini saya akan mengajar Anda bagaimana menggunakan NotORM.

Sebelum kita memulai, inilah tata letak basis data yang saya gunakan diseluruh artikel.

CREATE TABLE penulis (
   id INT(6) AUTO_INCREMENT PRIMARY KEY,
   nama VARCHAR(50) NOT NULL
);

CREATE TABLE buku (
   id INT(6) AUTO_INCREMENT PRIMARY KEY,
   judul VARCHAR(70) NOT NULL,
   penulis_id INT(6) NOT NULL
);

CREATE TABLE kategori (
   id INT(6) AUTO_INCREMENT PRIMARY KEY,
   kategori VARCHAR(30) NOT NULL
);

CREATE TABLE kategori_buku (
   id INT(6) AUTO_INCREMENT PRIMARY KEY,
   buku_id INT(6) NOT NULL,
   kategori_id INT(6) NOT NULL
);

Koneksi ke Database

Langkah pertama untuk menggunakan NotORM adalah untuk menciptakan sebuah contoh dari objek NotORM yang menggunakan koneksi PDO aktif untuk antarmuka dengan database.

<?php
$mydsn = "mysql:dbname=library;host=127.0.0.1";
$mypdo = new PDO($mydsn, "dbuser", "dbpassword");
$db = new NotORM($mypdo);

Data Source Name (DSN) adalah cara yang umum untuk menggambarkan koneksi database. Ini berisi nama database menggunakan driver, nama database, dan alamat host. PDO konstruktor menerima DSN dan basis data username dan password untuk menghubungkan. Setelah terhubung, objek PDO akan diteruskan ke NotORM. Kami akan menggunakan contoh NotORM ini seluruh artikel ini.

Penggunaan Dasar

Sekarang kita terhubung melalui NotORM, mari kita daftar semua buku dalam database.

<?php
$mybuku = $db->buku();
foreach ($mybuku as $buku) {
  echo $buku["id"] . " " . $buku["judul"] . "<br>";
}

Ini sangat sesederhana! $db adalah objek NotORM dan buku adalah nama tabel dimana informasi buku kami disimpan. buku() metode mengembalikan array multi-dimensi dengan kolom kunci utama tabel sebagai indeks tingkat pertama. Dalam foreach, $buku merupakan representasi dari data buku, sebuah array dengan kunci dinamai nama kolom tabel. $buku[“judul”] mengembalikan nilai dari kolom judul untuk data itu.

Dalam kebanyakan kasus, Anda tidak akan tertarik untuk mengambil semua kolom dari tabel. Anda dapat menentukan hanya kolom Anda tertarik melalui metode select(). Misalnya, jika Anda hanya ingin judul, Anda bisa menulis ulang contoh sebagai:

<?php
$mybuku = $db->buku()->select("judul");
foreach ($mybuku as $buku) {
  echo $buku["judul"] . "<br>";
}

Mengambil kolom tertentu terutama yang diinginkan pada tabel yang memiliki sejumlah besar kolom, cara ini Anda tidak perlu membuang waktu dan memakan memori serta penyimpanan nilai-nilai yang tidak digunakan.

Untuk mengambil satu data dari tabel menggunakan kunci utama, kami referensi kunci utama dalam query ini klausa WHERE saat menulis SQL. Dalam NotORM, Ada banyak cara kita dapat menyelesaikan tugas, cara termudah adalah dengan menggunakan kunci utama sebagai indeks ke properti tabel.

<?php
$buku = $db->buku[1]; 
echo $buku["judul"];

Ini hanya akan mengambil mendapatkan rincian buku dari data dengan ID 1.

Memfilter Nilai Kolom

NotORM memungkinkan untuk hasil penyaringan pada kondisi yang akan ditentukan dalam klausa WHERE query ini menggunakan metode where(). Untuk menggambarkan, mari kita cari nilai tabel untuk buku dengan judul yang mengandung “Anak-Anak” (pastikan sudah ada data Anak-Anak dalam tabel buku database).

<?php
$mybuku = $db->buku->where("judul LIKE ?", "%Anak-Anak%");
foreach ($mybuku as $buku) {
  echo $buku["id"] . " " . $buku["judul"] . "<br>";
}

Jika Anda tidak akrab dengan prepared statements, Anda mungkin bertanya-tanya apa yang berarti bahwa tanda tanya. Ini adalah cara dalam mengikat paremeters untuk query yang dieksekusi oleh PDO sehingga Anda dapat mengeksekusi query yang sama berkali-kali hanya dengan mengubah nilai-nilai. Sebuah tanda tanya, atau variabel seperti :judul, bertindak seperti pemegang nilai tempat. Anda dapat membaca lebih lanjut tentang prepared statements PDO dalam manual PHP.

NotORM juga memungkinkan Anda untuk rantai metode where() untuk menerapkan lebih dari satu kondisi.

<?php
$mybuku = $db->buku->where("judul LIKE ?", "%The%")
           ->where("id < ?", 5);
foreach ($mybuku as $buku) {
  echo $buku["id"] . " " . $buku["judul"] . "<br>";
}

Pernyataan yang dikeluarkan oleh NotORM untuk contoh di atas adalah setara dengan query SQL berikut:

SELECT * FROM buku WHERE judul LIKE "%The%" AND id < 5

Pengurutan Hasil

Kemungkinan penggunaaan pengurutan sangat jarang dilakukan karena memang bisa diatur dengan javascript/jquery diseluruh seluruh aplikasi Anda. Dalam aplikasi kehidupan nyata, Anda harus bergabung dengan banyak tabel, memanggil data berdasarkan nilai-nilai dalam kolom yang berbeda, membatasi jumlah record diambil, dan sebagainya.

Anda dapat memesan hasil berdasarkan satu atau lebih kolom, naik atau menurun. Contoh yang diberikan di bawah ini akan kembali menggunakan buku berdasarkan urutan ID buku.

<?php
$mybuku = $db->buku->order("id desc");
foreach ($mybuku as $id => $buku) {
  echo $id . " " . $buku["judul"] . "<br>";
}

Jika Anda ingin mengurutkan hasil berdasarkan lebih dari satu kolom, Anda dapat menentukannya, dipisahkan dengan koma.

<?php
$mybuku = $db->buku->order("id desc, judul asc");
foreach ($mybuku as $id => $buku) {
  echo $id . " " . $buku["judul"] . "<br>";
}

Data yang dihasilkan akan dikembalikan dalam urutan ID mereka dan jika ada lebih dari satu data dengan ID yang sama, itu akan berada di urutan judul.

NotORM mendukung membatasi hasil juga. Mari kita membatasi hasil set ke dua data, mulai dari offset 0:

<?php
$mybuku = $db->buku->limit(2, 0);
foreach ($mybuku as $id => $buku) {
  echo $id . " " . $buku["judul"] . "<br>";
}

Tabel Join

Sejauh ini kita sedang membahas tentang daftar buku dalam menggunakan NotORM dengan hanya satu tabel. Sekarang kita ingin bergerak lebih jauh, seperti mencari tahu siapa penulis buku dan sebagainya.

Mari kita mencoba untuk daftar buku bersama dengan penulisnya. Dalam database perpustakaan kami, tabel buku memiliki penulis_id sebagai foreign key yang referensi  dari tabel penulis (masing-masing buku hanya dapat memiliki satu penulis dalam set-upnya).

<table>
 <tr><th>Buku</th><th>Penulis</th></tr>
<?php
$mybuku = $db->buku();
foreach ($mybuku as $buku) {
    echo "<tr>";
    echo "<td>" . $buku["judul"] . "</td>";
    echo "<td>" . $buku->penulis["nama"] . "</td>";
    echo "</tr>";
}
?>
</table>

Bila Anda memanggil $buku->penulis [“nama”], NotORM otomatis menghubungkan tabel buku dengan tabel penulis menggunakan kolom penulis_id dan mengambil rincian penulis untuk data buku. Ini adalah kasus hubungan satu-ke-satu (data di tabel induk akan dikaitkan dengan hanya satu record dalam tabel anak) hubungan.

Dalam kasus hubungan satu-ke-banyak, tabel sekunder akan memiliki lebih dari satu record sesuai dengan satu baris dalam tabel utama. Sebagai contoh, mari kita asumsikan kita dapat menulis ulasan buku, sehingga untuk setiap buku akan ada nol atau lebih ulasan yang yang disimpan dalam tabel lain. Untuk setiap setiap buku maka Anda akan perlu loop lain untuk menampilkan ulasan, jika ada.

Untuk hubungan banyak-ke-banyak, akan ada tabel ketiga yang menghubungkan tabel primer dan sekunder. Kami memiliki table kategori untuk menjaga kategori buku, dan buku dapat memiliki nol atau lebih kategori yang terkait dengan itu. link dipertahankan menggunakan tabel kategori_buku.

<table>
 <tr><th>Buku</th><th>Penulis</th><th>Categories</th></tr>
<?php
$mybuku = $db->buku();
foreach ($mybuku as $buku) {
    echo "<tr>";
    echo "<td>" . $buku["judul"] . "</td>";
    echo "<td>" . $buku->penulis["nama"] . "</td>";
    $categories = array();
    foreach ($buku->kategori_buku() as $kategori_buku) {
        $categories[] = $kategori_buku->kategori["kategori"];
    }
    echo "<td>" . join(", ", $categories) . "</td>";
    echo "</tr>";
}
?>
</table>

Ketika Anda memanggil metode kategori_buku(), itu akan mendapatkan data dari tabel kategori_buku, yang pada gilirannya akan terhubung ke tabel kategori menggunakan $kategori_buku->kategori[“kategori”].

Ada beberapa konvensi default untuk nama tabel dan kolom, jika Anda mengikuti, dapat membuat hubungan tabel lebih mudah dalam NotORM.

  • Nama tabel harus tunggal, yaitu menggunakan buku untuk nama tabel untuk menyimpan rincian buku.
  • Gunakan id sebagai kunci utama untuk tabel Anda. Ini tidak perlu memiliki kunci utama untuk semua tabel, tapi itu ide yang baik.
  • kunci asing dalam sebuah tabel harus dinamai sebagai tabel_id.

Seperti saya katakan, ini hanya konvensi default. Anda dapat mengikuti konvensi yang berbeda jika Anda ingin, tapi kemudian Anda perlu menginformasikan NotORM dari konvensi itu harus mengikuti. librari memiliki kelas, NotORM_Structure_Convention untuk mendefinisikan konvensi penamaan. Berikut adalah contoh sederhana bagaimana menggunakan, yang saya salin dari website NotORM.

<?php
$structure = new NotORM_Structure_Convention(
    $primary = "id_%s", // id_$tabel
    $foreign = "id_%s", // id_$tabel
    $table = "%ss", // {$tabel}s
    $prefix = "wp_" // wp_$tabel
);
$db = new NotORM($pdo, $structure);

Contoh perubahan semua nama tabel untuk plural dan diawali dengan “wp_”. primary key dan foreign keys telah diubah untuk id_tabel.

Pemrosesan Data

Sampai sekarang kita bahas mengambil data yang sudah dalam database. Selanjutnya kita perlu melihat menyimpan dan memperbarui data juga.

Inserts dan updates cukup sederhana dan mudah penggunaannya. Anda hanya perlu membuat sebuah array asosiatif dengan nama kolom sebagai kunci dan value/nilai sebagai argumen untuk tabel metode insert() atau update().

<?php
$buku = $db->buku();
$data = array(
    "judul" => "Beginning PHP 5.3",
    "penulis_id" => 88
);
$hasil = $buku->insert($data);

insert() akan mengembalikan data jika insert berhasil atau false jika gagal. Dari sana, Anda bisa mendapatkan ID dari data yang disisipkan menggunakan $hasil[“id”].

Untuk memperbarui buku, mengambil data buku dari database menggunakan kunci utama (primary key) dan kemudian nilai-nilai didalamnya harus diperbarui sebagai array untuk update().

<?php
$buku = $db->buku[1];
if ($buku) {
    $data = array(
        "judul" => "Pro PHP Patterns, Frameworks, Testing and More"
    );
    $hasil = $buku->update($data);
}

update() akan menghasilkan true jika berhasil atau false jika update gagal.

Demikian pula, Anda bisa menghapus sebuah buku dengan memanggil delete() pada objek buku.

<?php
$buku = $db->buku[10];
if ($buku && $buku->delete()) {
    echo "Buku telah dihapus.";
}

Sangat penting untuk diingat ketika Anda memperbarui atau menghapus baris yang pertama Anda pastikan ada dalam database, jika tidak akan terjadi error.

Ringkasan

Melalui artikel ini Anda sudah menjadi akrab dengan librari sederhana untuk berinteraksi dengan database Anda. Kenyataannya adalah bahwa aplikasi Anda tumbuh besar dengan kode yang menggunakan NotORM akan menjadi mudah dikelola dan sehingga Anda harus memutuskan apakah NotORM cocok berdasarkan ukuran yang Anda harapkan dari aplikasi Anda dan faktor lainnya. Tapi ketika menggunakan NotORM, Anda tidak perlu khawatir tentang menulis query SQL mentah atau menciptakan kelas entitas dengan hubungan yang kompleks. Sebaliknya, Anda dapat menggunakan notasi berorientasi objek yang akrab berurusan dengan tabel dan kolom langsung.

 

Sistem Pendukung Keputusan

Sistem Pendukung Keputusan
Sistem Pendukung Keputusan
Gambar 1. SPK

Sistem pendukung keputusan yang biasanya disingkat dan sering disebut sebagai SPK, nama lain sistem ini adalah decision support systems disingkat dengan DSS. Sistem pendukung keputusan merupakan sebuah sistem yang mendukung seorang pengambilan keputusan dengan kriteria-kriteria yang diambil oleh seorang pengambil keputusan untuk dilakukan perbandingan terhadap alternatif-alternatif yang akan diputuskan yang terbaik. Sistem pendukung keputusan digunakan untuk menganalisa atau memutuskan sebuah kasus yang terbaik dalam pemilihan suatu barang, benda, sifat, orang dan lain-lain yang biasanya disebut sebagai alternatif, kasus yang diputuskan berdasarkan kriteria yang ditentukan oleh seorang yang akan mengambil sebuah keputusan begitu juga dengan alternatifnya.

Pengertian Sistem Pendukung Keputusan

Sistem pendukung keputusan (spk) adalah sistem yang dapat memecahkah masalah ataupun menyelesaikan masalah yang bersifat tak terstruktur atau semi terstruktur, sistem ini digunakan jika masalah yang diatasi sedikit bermasalah seperti sulitnya memberikan keputusan yang adil atau susah memberikan keputusan yang terbaik. Sistem pendukung keputusan hanyalah sebuah sistem pendukung saja sedangkan semua keputusan berada pada seorang pengambil keputusan. Sistem pendukung keputusan biasanya berbasis pada sebuah komputer atau dibuatkan sebuah aplikasi untuk menghasilkan sebuah keputusan yang terbaik.

Dalam sistem pendukung keputusan haruslah ada kriteria-kriteria (disebut juga atribut) dan alternatif, kriteria adalah sebuah pernilaian atau juga diartikan penetapan sesuatu namun dalam sistem keputusan adalah sebuah pernilaian yang digunakan untuk perbandingan untuk mencapai hasil yang diinginkan, sedangkan alternatif adalah sebuah objek yang akan diperbandingkan seperti benda, orang, barang dan lain-lain atau dengan pengertian lainnya seperti memilih pilihan diantara beberapa pilihan atau pilihan lainnya atau beberapa kemungkinan.

Sistem pendukung keputusan mampu memberikan keputusan dalam hitungan detik sehingga sangat bagus untuk digunakan dibandingan menggunakan cara manual yang menghitung satu per satu keputusan seperti menentukan nilai maksimum, minimum atau optimum yang kemudian dijumlahkan, bayangkan betapa capeknya jika harus menghitung satu per satu berbeda halnya dengan sistem pendukung keputusan, cukup dengan adanya sebuah komputer seperti PC, tablet, smartphone, PDA dan lain-lain kemudian jalankan sebuah aplikasi sistem yang telah dibuat sebelumnya, selain sebuah aplikasi sistem, aplikasi office juga bisa digunakan seperti Excel atau Calc.

Aplikasi sistem pendukung keputusan umumnya berbasis web, desktop ataupun mobile, spk berbasis web biasanya dibuat dengan menggunakan bahasa pemrograman PHP, JSP, ASP.NET, Perl, Python, Ruby atau JavaScript MV*, sedangkan spk berbasis desktop biasanya dibuat dengan menggunakan Visual Studio, Java SE (Eclipse, Netbeans, atau JetBrains IntelliJ IDEA), atau C/C++, sedangkan spk berbasis mobile biasa dibuat menggunakan Androin Studio, Xcode, Java ME (biasanya digunakan untuk HP symbian seperti nokia jadul), HTML5 app mobile atau PhoneGap/Cordova.

Komponen Sistem Pendukung Keputusan

Sistem pendukung keputusan memiliki tiga komponen yaitu Sistem Manajemen Database, Basis Model dan Antarmuka Pengguna, ketiga komponen tersebut sangat dibutuhkan untuk menghasilkan sebuah sistem pendukung keputusan dan juga ketiga komponen tersebut saling membutuhkan satu sama lainnya untuk menjalankan sebuah sistem.

1. Sistem Manajemen Database

Sistem manajemen database (Database Management System) adalah sistem data yang terorganisir dalam basis data, data yang digunakan untuk sistem pendukung keputusan bisa berasal dari mana saja, bisa dari dalam lingkungan kita atau dari luar kemudian disimpan dalam suatu basis data atau database kemudian diolah atau dikelola untuk keperluan pengambilan keputusan.

2. Basis Model

Basis model (Model Base) adalah sebuah metode yang digunakan dalam sistem pendukung keputusan, biasanya metode ini berbentuk matematika yang biasanya menggunakan rumus khusus sehingga menghasilkan keputusan tepat sasaran, metode-metode yang digunakan biasanya metode SAW, metode WP, metode AHP, metode SMART atau metode TOPSIS, sebenarnya sangat banyak metode-metode lainnya yang menjamur di internet yang bisa anda pelajari.

3. Antarmuka Pengguna

Antarmuka pengguna (User Interfase) adalah sebuah disain aplikasi sistem yang bisa berjalan pada sebuah komputer baik dalam bentuk web, aplikasi desktop ataupun aplikasi mobile (tablet atau smartphone), antarmuka tersebut bisa dibuat dengan bahasa pemrograman yang telah dijelaskan pada pengertian diatas seperti HTML/CSS, JavaScript, PHP/JSP/ASP.Net (Untuk Web), Java/Swift (Untuk Mobile), C/C++, Java, VB.net, C# (Untuk Desktop).

Kelebihan Sistem Pendukung Keputusan

Kelebihan dari sistem pendukung keputusan yang bisa dijelaskan secara mendetail dan menyeluruh adalah sebagai berikut:

  1. Dapat memecahkan dan menyelesaikan permasalahan yang bersifat tak terstruktur atau semi terstruktur.
  2. Membantu mempersingkat waktu pengambilan keputusan bisa dibilang dalam waktu hitungan detik keputusan langsung bisa diambil.
  3. Hasil keputusan dari sistem pendukung keputusan sangatlah akurat dan tepat sehingga bisa langsung digunakan sebuah keputusan tersebut.
  4. Memudahkan seorang pengambilan keputusan dalam memahami sebuah persoalan yang dihadapinya.
  5. Menghasilkan sebuah laporan keputusan sehingga memperkuat keputusan yang telah diambil.

Kekurangan Sistem Pendukung Keputusan

Kelebihan spk (sistem pendukung keputusan) telah dijelaskan diatas kemudian penjelasan kekurangan dari sistem pendukung keputusan adalah sebagai berikut:

  1. Keputusan yang dihasilkan tidak dapat menggantikan seorang pengambil keputusan, atau bisa dibilang keputusan berada pada tangan pengambil keputusan.
  2. Keputusan yang dihasilkan hanya sebatas bantuan keputusan untuk pengambil keputusan.
  3. Untuk menentukan keputusan diharuskan terlebih dahulu menyimpan data-data kemudian baru dilakukan perbandingan.
  4. Masih membutuhkan manusia dalam pengoperasian sistem pendukung keputusan

Metode Sistem Pendukung Keputusan

Metode sistem pendukung keputusan telah dijelaskan pada basis model diatas namun akan dijelaskan secara mendetail seperti berikut dibawah ini:

  1. Metode Simple Additive Weighting (SAW) adalah metode yang bersifat penjumlahan untuk menghasilkan keputusan.
  2. Metode Weighted Product (WP) adalah metode yang berbasis perkalian untuk menghasilkan keputusan.
  3. Metode Analytical Hierarchy Process (AHP) adalah metode penganalisa masalah sehingga dari hasilnya tersebut menjadi sebuah keputusan.
  4. Banyak Metode lainnya seperti SMART, TOPSIS, Fuzzy dan lain-lain.

Karakteristik Sistem Pendukung Keputusan

Adapun karakteristik dari sebuah aplikasi atau program sistem pendukung keputusan adalah seperti berikut dibawah ini.

  1. Interaktif yaitu dengan adanya antarmuka pengguna dapat leluasa mengolah atau mengakses informasi di dalamnya.
  2. Fleksibel yaitu pengolahan yang serba cepat serta menyajikan nilai-nilai perbandingan sehingga dapat dilihat mana alternatif yang terpilih.
  3. Data Berkualitas yaitu data yang tersimpan sangat akurat sehingga tidak ada keraguan akan hasil keputusan yang akan diambil.
  4. Prosedur Pakar yaitu sistem pendukung keputusan sangat cerdas dalam menghasilkan keputusan, itu dikarenakan penentuan rumus-rumus metode yang telah ter-embbed dalam sistem

Sistem pendukung keputusan sangat diminati untuk masalah yang bersifat pemilihan berbagai kasus, namun yang paling umum adalah pemilihan seseorang dalam jabatan atau tugas sehingga membutuhkan perbandingan orang yang tepat dan profesional.

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