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.

 

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;
}

 

Membuat Search Data (Pencarian Data) dengan JSP dan MySQL

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

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

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

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

koneksi.java

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

package ghazali;

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

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

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

index.jsp

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

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

search.jsp

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

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

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

search1-jsp-2042016

search2-jsp-2042016

search3-jsp-2042016

Download Source Code

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

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

file-include-jsp-2042016

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

bg-include-jsp-2042016

header-include-jsp-2042016

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

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

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

header.jsp

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

artikel.jsp

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

sidebar.jsp

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

footer.jsp

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

index.jsp

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

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

teks.txt

untuk text buatlah artikel sesuka hati anda

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

hasil-include-jsp-2042016

Download Source Code

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

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

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

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

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

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

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

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

index.jsp

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

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

crudjsp-352016
tambah.jsp

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

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


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

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

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

//membuat koneksi ke database dengan jdbc

Connection conn=null;
PreparedStatement ps=null;

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

int updateQuery=0;


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

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


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

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


    }
}
%>

tambahjsp-352016
update.jsp

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

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


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

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

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

//membuat koneksi ke database dengan jdbc

Connection conn=null;
PreparedStatement ps=null;

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

int updateQuery=0;


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

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


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

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


    }
}
%>

updatejsp-352016
delete.jsp

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

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

Download Source Code

Membuat File Upload dan Download dengan JSP dan MySQL

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

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

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

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

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

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

package ghazali;

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

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

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

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

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

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

unggah.jsp

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

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

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

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

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

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

unduh.jsp

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

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

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

uploadjsp

Download Source Code

Cara Membuat Navigasi Menubar Dengan HTML5 dan CSS3

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

Baca juga: Cara belajar menggunakan html paling dasar pertama kali

Menu Sidebar (Vertical Navigation Bar)

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

Baca juga: Cara belajar menggunakan css paling dasar pertama kali

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

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

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

Menu Topnav/Navbar (Horizontal Navigation Bar)

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

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

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

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

Menu Dropdown (Dropdown Navigation Bar)

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

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

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

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

Responsif Navbar (Responsive Menu Topnav)

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

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

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

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

Responsif Menu Sidebar (Responsive Sidenav)

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

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

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

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

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

Membuat Media Responsive Dengan CSS

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

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

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

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

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

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

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

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

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

Upload File dan Hapus File dengan PHP dan MySQL

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

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

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

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

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


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

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

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

USE `alupload`;


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Untuk screenshot hasil dari file upload seperti gambar dibawah ini.

upload-file-php-652016

Download Source Code

Membuat Multimedia Embedded Dengan HTML

Pada HTML5 sudah muncul tag-tag yang dapat memutar multimedia pada browser melalui bahasa html, umumnya penggunaan multimedia berbasis video, audio, flash, java dan lain-lain, namun ada juga tag-tag multimedia yang telah dihapus yang dibuat khusus untuk aplikasi tertentu dan sudah diubah ke penggunaan aplikasi umumnya, Multimedia umumnya membutuhkan ruang penyimpanan untuk menyimpan berkas medianya selain itu pada database sudah didukung untuk menyimpan berkas pada tipe penyimpanan blob. Untuk lebih jelas akan saya jelaskan satu persatu media atau pembuatan playernya seperti dibawah ini.

Video

Video adalah sebuah media yang terkumpul didalamnya frame gambar-gambar yang diputar diatas 25 frame per detik yang akan menampilkan streaming sebuah dokumentasi, realita atau animasi 3D. Selain itu umumnya video yang diputar pada web disebut streaming video atau video player atau video sharing seperti youtube, vimeo atau dailymotion. Pada tag html video dapat diputar menggunakan tag video untuk player dan tag source untuk lokasi berkas video.

...
<video width="400" height="380" autoplay controls>
  <source src="videosaya.mp4" type="video/mp4">
  <source src="videosaya.ogg" type="video/ogg">
  <source src="videosaya.webm" type="video/webm">
  Browser tidak mendukung tag video
</video>
...

Audio

Audio adalah getaran dari sebuah benda yang menghasilkan sebuah bunyi atau suara yang dapat didengar oleh telinga kita, untuk menghasilkan bunyi getaran haruslah diatas 20 kali per detik. Untuk tag pada audio player pada web juga hampir sama dengan tag video yaitu tag audio dan tag source.

...
<audio autoplay controls>
  <source src="audiosaya.ogg" type="audio/ogg">
  <source src="audiosaya.mp3" type="audio/mpeg">
  <source src="audiosaya.wav" type="audio/wav">
  Browser ini tidak mendukung tag audio
</audio> 
...

Embed

Embed adalah sebuah tool yang digunakan untuk menjalankan sebuah aplikasi yang non-html untuk berjalan pada html seperti flash, java dan lain-lain. selain itu terdapat atribut width adalah ukuran lebar, height adalah ukuran tinggi/panjang, type adalah tipe file yang digunakan sesuai format dari IANA media types sedangkan src adalah source tempat berkas atau pemanggilan berkas aplikasi yang akan dijalankan, selain itu untuk menjalankan youtube juga menyediakan embed.

...
<embed src="aplikasiflash.swf" width="400" height="380" type="application/vnd.adobe.flash-movie"> 
...

Iframe

Iframe umumnya digunakan untuk menampilkan website lain kedalam html kita atau html lain kedalam html kita selain itu juga iframe digunakan untuk aplikasi web demo, statistik dan lain-lain.

...
<iframe src="http://www.codeberkas.xyz" width="300" height="240"></iframe> 
...

Gambar

Gambar adalah tiruan suatu benda yang diimplementasikan kedalam kertas atau media elektronik dengan cara dilukis menggunakan atau di rekam menggunakan kamera atau screenshot, pada html ada tag yang dapat menampilkan gambar yaitu tag img sedangkan tag figure dan figcaption adalah border bingkai dan judul sebuah foto/gambar.

...
<figure>
  <img src="fotopribadi.jpg" alt="T Ghazali" width="400" height="380">
  <figcaption>Gambar 1.1 Foto saya</figcaption>
</figure> 
...

Object

Object mempunyai fungsi yang hampir sama dengan embed dan iframe, namun object juga merupakan tag yang menampilkan seluruh media dan aplikasi seperti audio, flash, java applets, video, ActiveX dan PDF.

...
<object data="playerflash.swf" width="400" height="380" type="application/vnd.adobe.flash-movie"></object> 
...

 

Membuat Form Input Dengan HTML

Form adalah sebuah tempat dimana tempat isi data khusus yang biasa disebut dengan bahasa indonesia adalah formulir, formulir biasa diistilahkan pada selembar kertas dan juga bisa dibuat dengan aplikasi pembuat form pada aplikasi office semacam Microsoft Office atau LibreOffice/OpenOffice Draw, namun dalam web, form digunakan untuk menginput data atau juga digunakan untuk login dan edit data, selain itu form diidentikan dengan database dari MySQL, PostgreSQL, SQLite atau Microsoft SQL dan juga bahasa server side untuk mengelola data seperti PHP, JSP, ASP.NET atau Perl. Untuk bisa membuat form kita akan jelaskan secara detail dibawah ini.

1.1 Form

Form adalah tag html yang memiliki atribut action, method dan enctype. Action merupakan aksi dari inputan form ini biasanya dialihkan ke berkas yang dibuat dengan bahasa PHP, JSP, ASP.NET atau Perl untuk mengeksekusi datanya namun seiring dengan perkembangan zaman pengguna keempat bahasa tadi sudah digantikan dengan penggunakan dari framework yang berbasis JavaScript seperti BackboneJS, AngularJS, jQuery Ajax dan lain-lain. Pada tag form juga ada tag fieldset dan legend, fieldset adalah tag untuk membuat border yang sekarang sudah digantikan dengan CSS, sedangkan legend adalah tag label untuk form yang sekarang jarang digunakan dan lebih digunakan tag heading saja. Method adalah bentuk inputan tersebut seperti post atau get namun juga sudah dikembangkan put, delete dan lain-lain, sedangkan enctype digunakan untuk upload file berkas yang memiliki nilai multipart/form-data.

...
<form action="simpan.php" method="post" enctype="multipart/form-data">
   <fieldset>
      <legend>Title Form</legend>
      ...
   </fieldset>
</form>
...

1.2 Input

Input merupakan tag-tag yang dipisahkan oleh atribut type yang terdiri dari text, number, password, search, radio, checkbox, submit, button, reset, color, date, datetime, datetime-local, email, month, range, tel, time, url dan week, pada type-type ini ada yang didukung oleh browser tertentu dan juga ada yang tidak seperti date yang berjalan pada Google Chrome namun tidak berjalan pada Mozilla Firefox. Selain itu input juga disertakan dengan tag label

1.2.1 Text

Text adalah suatu nilai dari atribut type yang dibuat untuk menginput teks, judul atau nama. Selain itu juga menggunakan atribut name untuk nama input, id untuk nama dan identitas input, placeholder untuk menampilkan kata yang samar sebagai label dalam input dan required untuk membuat validasi yang wajib diinput nilai pada inputan ini.

...
<label for="username">Username</label>
<input type="text" name="username" id="username" placeholder="My Username" required/>
...

1.2.2 Number

Number merupakan nilai atribut type menginput nilai 1-xxx yang mempunyai atribut lainnya seperti min (minimal angka) dan max (maksimal angka).

...
<label>Kualitas</label>
<input type="number" name="kualitas" min="1" max="5">
...

1.2.3 Password

Password adalah nilai dari sebuah atribut type yang bergunakan membuat inputan tidak terlihat dan yang terlihat cuma titik tebal saja ditengah form.

<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="My Password" required/>
...

1.2.4 Button (Submit, Button, Reset)

Button juga merupakan nilai atribut dari atribut type dan juga sebagai tag html yang menyatakan button yang memiliki atribut type juga seperti submit, button dan reset.

...
<label>Input Button</label><br/>
<input type="submit" name="submit" value="Submit"> &nbsp;
<input type="button" name="button" value="Button"> &nbsp;
<input type="reset" name="reset" value="Reset"> <br/><br/>

<label>Tombol Button</label><br/>
<button type="submit" name="submit"> Submit </button> &nbsp;
<button type="button" name="button"> Button </button> &nbsp;
<button type="reset" name="reset"> Reset </button> <br/>
...

1.2.5 Radio dan Checkbox

Radio merupakan nilai atribut type yang berfungsi sebagai pemilihan yang boleh dipilih hanya satu diantara semua pilihan yang ada dan memiliki nama yang sama, sedangkan checkbox adalah pemilihan yang boleh dipilih banyak diantara banyak pilihan dan memiliki nama yang berbeda-beda.

...
<label>Radio</label><br/>
<input type="radio" name="rad" value="Laki-laki" checked> Laki-laki <br/>
<input type="radio" name="rad" value="Perempuan"> Perempuan <br/><br/>

<label>Checkbox</label><br/>
<input type="checkbox" name="cek1" value="Sepakbola" checked> Sepakbola <br/>
<input type="checkbox" name="cek2" value="Membaca"> Membaca <br/>
<input type="checkbox" name="cek3" value="Jalan-jalan" checked> Jalan-jalan <br/>
...

1.2.6 File dan Image

File merupakan atribut type file yang berguna untuk upload file berkas sedangkan image sudah jarang dan tidak lagi digunakan pada input form.

...
<input type="file" name="files"/>
...

1.3 Textarea

Textarea adalah input teks dibidang teks yang sangat panjang seperti penginputan artikel, deskripsi dan lain-lain dan juga textarea digunakan untuk pembuatan text editor.

...
<textarea name="editor" cols="25" rows="10">
Disini tempat anda tulis artikel anda
</textarea>
...

1.4 Select

Select adalah pilihan atau biasa dibilang sebagai input combox dan listbox, combobox pilihan berbentuk input sedangkan listbox pilihan berbentuk list yang terdiri dari item dan scrollbar. untuk item sendiri menggunakan tag option yang berarti item dan optgroup yang berarti kumpulan item/opsi.

...
<label>Combobox</label><br/>
<select name="merek">
    <option value="mob-volvo">Mobil Volvo</option>
    <option value="mob-saab" selected>Mobil Saab</option>
    <option value="mob-fiat">Mobil Fiat</option>
    <option value="mob-audi">Mobil Audi</option>
</select><br/><br/>

<label>listbox</label><br/>
<select name="merekjuga" multiple>
    <option value="mob2-volvo">Mobil Volvo</option>
    <option value="mob2-saab">Mobil Saab</option>
    <option value="mob2-fiat">Mobil Fiat</option>
    <option value="mob2-audi">Mobil Audi</option>
</select><br/><br/>
...

1.5 Datalist

Datalist adalah tag html untuk form input yang berfungsi sebagai autocomplete yang datanya sudah ditentukan dari awal.

...
<label>Tags</label><br/>
<input list="browser">
<datalist id="browser">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
...

1.6 Keygen

Keygen adalah tag html untuk form yang lebih ditekankan pada keamanan dengan nama encryption.

...
<label>Username</label><br/>
<input type="text" name="username"><br/>

<label>Encryption</label><br/>
<keygen name="security">
...

1.7 Output

Output adalah hasil dari penginputan yang biasa digunakan bersamaan dengan penggunakan JavaScript sehingga menghasilkan sesuatu pada saat tombol button diklik.

...
<form oninput="z.value=parseInt(x.value)+parseInt(y.value)">
  0 <input type="range" name="x" value="50"> 100 +
  <input type="number" id="y" name="y" value="50">
  = <output name="z" for="x y"></output>
  <br><br>
</form>
...

1.8 Code Penuh

Code penuh adalah sintaks penuh dari sebuah form yang sering digunakan pada dunia maya atau internet seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<form action="" method="post" enctype="multipart/form-data">
<p>
   <label>Text</label>
   <input type="text" name="text">
</p>
<p>
   <label>Email</label>
   <input type="email" name="email">
</p>
<p>
   <label>Website</label>
   <input type="url" name="website">
</p>
<p>
   <textarea name="pesan"></textarea>
</p>
<button type="submit">Publish</button>
</form>

</body>
</html>

 

Membuat Link dan List Dengan HTML

Link adalah sebuah url atau alamat yang dapat diakses atau diklik selain itu juga link dapat disebut dengan penghubung antara satu page dengan page lainnya dalam sebuah halaman web sedangkan list biasa digunakan untuk sebuah penjelasan dengan ada penomoran atau bullet selain itu list juga digunakan untuk membuat menu atau navigasi baik di header atau di sidebar. Berikut dibawah ini penjelasan tentang link dan list serta dengan menu navigasinya.

a

a adalah tag html yang khusus dibuat untuk membuat link atau tautan yang dapat mengakses page/internal atau url/eksternal di sebuah website a harus disertai dengan href yang hampir sama dengan fungsi src yaitu source atau alamatnya.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<a href="page.html"> ... page ...</a>
<a href="http://www.codeberkas.xyz"> ... url ...</a>
<a href="../../www/folder"> ... folder ...</a>

</body>
</html>

ul, ol dan li

ul adalah kependekan dari unordered list yang berarti list yang berisi bullet yaitu bulat, kotak atau bulat bolong. ol adalah kependekan dari ordered list yang berisi penomoran atau angka romawi atau huruf dengan cara ditambah atribut type didepannya dengan nilai 1, A, a, I, i. li adalah list item dari ul dan ol yang digunakan untuk membuat item-item kepada keduannya sebagai contoh buatlah sebuah berkas bernama list.html dan code seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<ul>
  <li>... list 1 ...</li>
  <li>... list 2 ...</li>
  <li>... list 3 ...</li>
</ul>

<ol>
  <li>... list 1 ...</li>
  <li>... list 2 ...</li>
  <li>... list 3 ...</li>
</ol>

</body>
</html>

dl, dt, dd

dl adalah definisi dari deskripsi list (description list), sedangkan dt adalah definisi judul (defines the term), sedangkan dengan dd adalah penjelasan deskripsi (describes each), sebagai contoh buatkan berkas deskripsi.html dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<dl>
  <dt>... judul 1 ...</dt>
  <dd>... penjelasan 1 ...</dd>
  <dt>... judul 2 ...</dt>
  <dd>... penjelasan 2 ...</dd>
  <dt>... judul 3 ...</dt>
  <dd>... penjelasan 3 ...</dd>
</dl>

</body>
</html>

menu dan menuitem

menu dan menuitem umumnya digunakan pada context menu atau bisa dibilang untuk membuat menu klik kanan sedangkan untuk menu navigasi dan sidebar umumnya menggunakan ul dan li, untuk contoh buatkan berkas bernama menu.html seperti code dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<menu type="context">
  <menuitem label="Share" onclick="window.location.href='http://www.codeberkas.xyz';" icon="share.png"></menuitem>
  <menuitem label="About" onclick="window.location.assign('about.html');" icon="ico_reload.png"></menuitem>
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
</menu>

</body>
</html>

 

Membuat Tabel Dengan HTML

Tabel adalah sebuah rangkaian yang berbentuk baris dan kolom yang sejajar yang biasa hampir sama dengan aplikasi office spreadsheet seperti Google Sheets, LibreOffice/OpenOffice Calc, KingSoft Office Spreadsheet atau Microsoft Office Excel, yang memang aplikasi ini memiliki project yang berbentuk garis antara baris dan kolom, didalam tabel juga akan ada data-data yang sesuai satu sama lain, selain itu tabel juga digunakan pada database untuk menyimpan datanya. Untuk membuat tabel akan saya jelaskan secara bertahap dengan menggunakan tag html dibawah ini.

Table

Table adalah tag html yang mendefinisikan bahwa ini adalah tabel, tag table ini adalah tag untuk membuat root dasar dari pembuatan baris dan kolom.

Thead, Tbody dan Tfoot

Thead adalah sebuah tag untuk memisahkan atau baris untuk pembuatah kepala tabel, Tbody adalah tag untuk membuat body dari banyak baris dan banya kolom, sedangkan Tfoot adalah tag untuk kaki dari tabel bisa juga disamakan dengan tag thead.

Tr

Tr adalah tag untuk membuat baris yang digunakan pada semua tempat baik didalam thead, tbody atau tfoot.

Th dan Td

Th dan td adalah tag untuk membuat kolom, th adalah tag yang digunakan untuk membuat kolom pada thead dan tfoot sedangkan tag td digunakan pada tag tbody. Th umumnya lebih tebal dibandingkan dengan td.

Caption

Caption adalah penjelasan tentang tabel yang dibuat atau dengan istilah lain itu sebagai label yang menjelaskan identitas tabel tersebut.

Col dan Colgroup

Col dan colgroup adalah pengaturan dari sebuah kolom seperti ukuran sebuah kolom atau warna sebuah kolom atau yang lainnya dalam pengaturan kolom.

Untuk membuat sebuah dokumen html atau web yang dapat menjalankan tabel seperti code dibawah ini dan simpan dengan nama tabel.html.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<table>
  <caption>Label Tabel</caption>
  <colgroup>
    <col span="2" class="warna">
    <col class="warna">
  </colgroup>
  <thead>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Alamat</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Alamat</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>6753333</td>
      <td>T Ghazali</td>
      <td>Bentayan</td>
    </tr>
    <tr>
      <td>5432289</td>
      <td>Bukhari</td>
      <td>Baroh Beureuleung</td>
    </tr>
  </tbody>
</table>

</body>
</html>

 

Typography Format Text Pada HTML

Typography adalah format teks yang ada pada html, yang umumnya didesain menggunakan css yang akan kita bahas pada artikel lainnya, format teks umumnya ada pada Office Word/Writer namun juga tersedia pada html untuk mengatur teks baik dari segi penebalan atau pemiringan atau yang lainnya, kita akan membahas satu persatu kegunaan dari tag-tag ini yang ditulis kedalam tag body sehingga bisa ditampilkan pada browser bentuknya.

Heading

Heading adalah tag yang dibuat untuk judul yang tampil pada browser baik pada judul web atau judul artikel untuk tag heading terdiri dari h1, h2, h3, h4, h5, h6, mulai dari h1 yang terbesar sampai dengan h6 yang terkecil, untuk dokumen html (heading.html) yang menjelaskan tentang heading seperti dibawah ini yang harus ditulis kedalam <body> … </body> yang telah saya jelaskan pada artikel sebelumnya yaitu Belajar HTML Paling Dasar.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

</body>
</html>

Paragraf

Pada tag pembuatan paragraf cuma terdiri dari tag p, span, div atau istilah dari tag paragraf bisa dibilang sebagai tag body artikel tag p merupakan tag paragraf, span suma seleksi text sedangkan tag div itu tag element yang umum digunakan pada bagian lainnya, sebagai contoh dibawah ini (paragraf.html).

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<div>
    <p>... ini tag paragraf ...</p>
    <span>... ini tag penanda ...</span>
</div>

</body>
</html>

Element

Element yang saya maksud ini adalah tag bagian atau side yang merupakan tag komponen seperti tag header, footer, nav, article, main, content, section, div dan aside yang memiliki fungsi yang sama namun nama yang berbeda serta lebih ditekankan pada penggunaan css dan untuk membuat filenya (element.html) seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<div class="container">
   <header> .... </header>
   <nav> .... </nav>
   <main>
      <section>
         <article> .... </article>
         <article> .... </article>
         <article> .... </article>
      </section>
      <section>
         <aside> .... </aside>
         <aside> .... </aside>
         <aside> .... </aside>
      </section>
   </main>
   <footer> .... </footer>
</div>

</body>
</html>

Inline Text

Inline text adalah text yang ada dalam paragraf atau body artikel yang biasa digunakan pada text editor yang terdiri dari b, i, u, s, strong, em, mark, del, ins, small, sub, sup, br dan abbr, untuk penebalan teks menggunakan tag b dan strong, untuk pemiringan teks menggunakan i dan em, untuk garis bawah teks menggunakan u, ins dan abbr, untuk garis tengah teks menggunakan tag del dan s, untuk menandakan teks menggunakan mark dan span, untuk mengecilkan teks menggunakan small untuk membuat teks diatas dan dibawah menggunakan sup dan sub, untuk baris baru adalah tag br. Untuk lebih jelas buat file inlinetext.html dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<b> .... format teks ... </b><strong> .... format teks ... </strong><br/>
<i> .... format teks ... </i><em> .... format teks ... </em><br/>
<u> .... format teks ... </u><ins> .... format teks ... </ins><br/>
<s> .... format teks ... </s><del> .... format teks ... </del><br/>
<mark> .... format teks ... </mark><span> .... format teks ... </span><br/>
<small> .... format teks ... </small><abbr> .... format teks ... </abbr><br/>

</body>
</html>

Block Text

Block teks terdiri dari quote seperti blockquote, q, pre, code, address, cite, bdo, kbd, var dan samp, untuk pre dan code adalah tag yang digunakan untuk menampilkan kode program atau sintaks ke artikel dengan cara diblock kusus untuk kode sedangkan selain pre dan code adalah block teks biasa yang sering digunakan untuk menandakan suatu teks yang terpenting, untuk cara penulisannya adalah seperti dibawah ini dan disimpan kedalam blocktext.html.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<blockquote cite="http://www.contoh.xyz"> ... teks panjang ... <blockquote>
<abbr title="Organisasi"> ... teks singkat ... </abbr>
<address> ... teks alamat ... </address>
<cite>... judul orang dalam teks ...</cite>
<bdo dir="rtl">... teks dari kanan ke kiri seperti huruf arab ...</bdo>
<kbd><kbd>Shift</kbd> Ctrl <kbd> + </kbd></kbd>
<var>i</var> = <var>z</var><var>x</var> + <var>y</var>
<samp> ... hasil ... <samp>

</body>
</html>

 

Belajar CSS Dasar

CSS3 - Belajar CSS Dasar

CSS adalah singkatan dari Cascading Style Sheets yang merupakan sebuah tata cara dalam mengatur komponen yang ada pada sebuah web sehingga menjadi berbentuk dan berpenampilan baik klasik atau modern. Css adalah sebuah bahasa yang tidak digolongkan sebagai bahasa pemrograman akan tetapi hanya sebatas gaya atau style untuk html, css tidak bisa berdiri sendiri tanpa html/xhtml.

CSS hampir sama fungsinya dengan aplikasi pengolahan kata tingkat tinggi seperti Microsoft Word, LibreOffice Writer, OpenOffice Writer, Kingsoft Office Writer dan Corel WordPerfect yaitu dalam hal membuat style atau gaya sebuah dokumen baik heading, title, text, body text, bab, sub bab, header/footer, gambar dan lain-lain. Satu file css bisa digunakan untuk beberapa atau setiap file html.

Sejarah CSS

CSS merupakan sebuah teknologi baru yang disarankan oleh W3C (World Wide Web Consortium) pada tahun 1996, pada saat css distandarisasikan, Netscape Navigator (Sekarang Mozilla Firefox) dan Internet Explorer membuat browser baru untuk disesuaikan dengan mendukung standar css sehingga bisa berjalan bersamaan dengan html pada suatu browser. ada 3 versi css yaitu CSS1 dikembangkan untuk penekanan hanya pada format dokumen html (seperti word/writer) saja. CSS2 dikembangkan untuk berbagai format seperti menentukan posisi konten, format huruf font, tampilan layout, table, form dan media dan sangat dikhususkan untuk bisa dicetak dengan printer, sedangkan CSS3 adalah pengebangan dari CSS2 yang lebih ditekankan kepada desain website modern seperti mendukung animasi, transisi, 3d serta dengan cross platform yaitu bisa berjalan pada desktop, mobile dan table hanya dengan satu file, fitur baru pada CSS3 adalah media query, box-shadow, css math, border-image, css object model dan lain-lain.

Penulisan CSS

CSS bisa ditulis dengan 3 cara atau 3 tempat yaitu pada internal, inline dan eksternal yang akan kita bahas dibawah ini, sekarang kita akan membahas format penulisan css seperti dibawah ini.

p { color : royalblue ; }

Penjelasan: p adalah tag selector atau panggilan dari tag p pada dokumen html, {} adalah selector untuk tag, color adalah property untuk tag p, sedangkan royalblue adalah value (nilai) untuk property color. : adalah sama dengan atau nilai hasilnya sedangkan ; adalah tutup hasil value atau pemisah antara satu property dengan property lainnya.

Tag Selector tidak mesti harus menggunakan nama tag saja akan tetapi bisa juga dengan memanggil nilai atribut class dan id, untuk class biasanya awalannya adalah titik (.) sedangkan id adalah awalannya tanda pagar (#) sebagai contoh:

Class: .paragraf{color:royalblue;}
ID: #paragraf{color:royalblue;}

Inline Style Sheet

Inline style sheet adalah gaya penulisan css dalam tag html atau bisa dibilang menggunakan atribut style=”color:royalblue;” atau lebih jelas lihat contoh dibawah ini.

<p style="color:royalblue;">Ini adalah teks untuk paragraf</p>

Internal Style Sheet

Internal style sheet adalah gaya penulisan css di antara tag head (<head>… disini …</head>) dengan adanya tag <style> … disini sintaks css … </style> untuk lebih jelas silahkan lihat contoh dibawah ini.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Inline</title>
<style type="text/css">
body{background-color:#f1f1f1;}
h1#title{color:blue;}
p.paragraf{color:royalblue;}
</style>
</head>
<body>
<h1 id="title" class="title">Judul Web</h1>
<p class="paragraf" id="paragraf">Ini adalah artikel</p>
</body>
</html>

Eksternal Style Sheet

Eksternal style sheet adalah gaya penulisan css yang terpisah antara file css dengan file html yang hanya dihubungkan dengan tag <link href=”style.css” rel=”stylesheet”/> pada tag <head>, dengan cara ini bisa dengan hanya 1 file css bisa buat banyak file html sebagai contoh

File style.css

body{background-color:#f1f1f1;}
h1#title{color:blue;}
p.paragraf{color:royalblue;}

File index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Inline</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<h1 id="title">Judul Web</h1>
<p class="paragraf">Ini adalah artikel</p>
</body>
</html>

Sekian tutorial kali ini semoga bermanfaat dan bisa menjadi ilmu baru bagi pelajar baru pemrograman web, terima kasih banyak karena telah mengunjungi blog saya ini.

Belajar HTML Dasar

HTML5 - belajar html dasar

HTML merupakan singkatan dari Hyper Text Markup Language yang berarti sebuah bahasa yang digunakan dalam membangun sebuah web, html adalah kerangka sebuah website jadi tanpa html website tidak akan dapat dibuat, dokumen html mempunyai ekstensi atau akhiran .html, .htm dan .xhtml, namun yang sering digunakan adalah ekstensi .html dengan nama default-nya yaitu index.html, file ini hanya berjalan pada sisi klien atau cuma pada browser web seperti Mozilla Firefox, Google Chrome, Opera Browser, Microsoft Edge/IE, Apple Safari, Maxthon, dan browser lainnya. Html dapat ditulis dengan menggunakan perangkat pengolahan kata biasa seperti Notepad++, Bracket, Atom, Sublime Text, Komodo Edit, dan lain-lain serta disimpan dalam format ASCII normal dengan nama dan format index.html.

Sejarah HTML

Berawal dari sebuah bahasa yang umum digunakan untuk percetakan dan penerbitan yaitu bahasa SGML singkatan dari Standard Generalized Markup Language, Html adalah sebuah bahasa standar Internet yang dikendalikan semua permasalahan oleh W3C (World Wide Web Consortium). Html adalah bahasa yang dibuat oleh kolaborasi antara Caillau TIM dengan Berners-lee Robert ketika waktu mereka masih bekerja di perusahaan CERN (1989). Untuk lebih jelas bisa baca wikipedia.

Penggunaan HTML

Cara menggunakan html sangatlah mudah tinggal anda install dulu perangkat pengolahan kata biasa beserta dengan browser kemudian buka perangkat lunak tersebut kemudian tulis sintaks/tag html yang paling dasar kemudian simpan dengan nama index.html kemudian jalankan index.html dengan browser (bisa double klik atau open with browser) dan lihat hasilnya.

Hasil dari html tidaklah keren karena html merupakan kerangka biasa dan hasilnya seperti kita menulis teks biasa pada perangkat pengolahan kata untuk teks biasa namun jika dipadukan dengan CSS dan JavaScript, hasil html barulah berbentuk keren dan profesional, css merupakan bahasa yang tidak bisa berdiri sendiri karena memiliki ketergantungan permanen kepada html, berbeda halnya dengan javascript walaupun juga memiliki ketergantungan kepada html namun sangatlah kecil presentasinya karena javascript bisa membuat tag html, efek, aksi dan bahkan penyimpanan atau pengolahan data.

Penulisan HTML

Dalam menulis html berbeda dengan menulis teks biasa karena setiap tag memiliki pembuka dan penutup seperti tag pembuka paragraf <p> dan penutupnya </p>, namun ada juga tag yang tidak memiliki pembuka dan penutup seperti <img />, <br />, <hr />, <input />, <link /> dan lain-lain. Bentuk yang paling dasar dan wajib ada dalam setiap dokumen html/web adalah seperti dibawah ini.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Dokumen HTML Pertama</title>
</head>
<body>
    <p>Selamat Datang dunia!</p>
</body>
</html>

Tag HTML

Tag html adalah tag yang merupakan sebagai deklarasi yang menyatakan bahwa dokumen tersebut merupakan dokumen html dengan adanya penanda yang menyatakan bahwa dokumen tersebut adalah dokumen html5 yaitu <!DOCTYPE html>.

Tag Head, Meta, Title

Tag head adalah tag untuk kepala halaman atau dengan kata lain tag untuk mengontrol tampilan baik gaya pewarnaan atau yang lainnya serta juga terdapat style css dan javascriptm, sedangkan tag meta adalah tag yang menyatakan format teks yang digunakan pada dokumen html tersebut beserta dengan meta keyword, description, author dan lain-lain, sedangkan tag title adalah tag untuk menampilkan judul halaman pada tab bar browser dan judul website pada mesin pencarian (Google, Yahoo, Bing, Yandex).

Tag Body, Tag P

Tag body adalah tag yang berisi konten dan bentuk konten yang akan ditampilkan kedalam browser sedangkan tag p adalah tag paragraf yang digunakan untuk menulis teks kedalam dokumen html. Sekian tutorial kali ini semoga bermanfaat.