Membuat CSS Komik Chat Box tanpa Image

Haloo.. apa kabar? sudah lama saya tidak ngeblog dan baru bisa posting lagi sekarang, itupun karena kehilangan mood buat nyekripsi :p. Langsung saja kali ini saya coba posting tentang web desain dan CSS yaitu membuat komik chat box seperti di atas tanpa menggunakan gambar (image). Box seperti itu sering digunakan web-web modern seperti facebook, twitter, google, yahoo dll untuk chatting, tool tip dll juga.

Langkah pertama untuk membuatnya adalah dengan membuat elemen div sebanyak 4 buat dengan susunan sebagai berikut, dan beri nama atribut class disesuaikan pada contoh.

<div class="chat-body">	<!-- Kerangka utama -->
<div class="chat-text">	<!-- Tempat teks -->
Ini adalah teks chat 
</div>
<div class="arrow-border"></div> <!-- untuk border panah -->
<div class="arrow-background"></div> <!-- body panah -->
</div>

Kemudian beri CSS sebagai berikut, yang pertama untuk CSS kerangka chat-body, di sini bisa setting lebar dari komik chat box yang diinginkan, untuk tingginya bisa dikosongkan agar bisa otomatis memanjang ke bawah

.chat-body{
width:200px;
position:relative;
}

Kemudian beri CSS untuk div chat-text, setting border, warna background atau warna font dll kalau mau.

.chat-text{
border:1px #aaa solid;
bakground-color:white;
padding:10px;
}

Lanjut, kita buat segitiga panah bawahnya, ini trik rahasia buat segitiga dengan CSS tanpa Image. Rahasianya adalah memakai border pada div yang diset luasnya 0 dengan kelebaran yang berbeda-beda, kemudian beri warna berbeda-beda pula, warna sampingan bisanya diset transparant, untuk menghasilkan efek segitiga, untuk lebih jelasnya baca dari sumbernya langsung di sini.

Trik segitiga diterapkan pada div dengan class arrow-border yang digunakan sebagai segitiga border (yg digunakan sebagai border)

.arrow-border{	
position:absolute;
width:0px;
border-style:solid;

/* warna border dg urutan:  atas kanan bawah kiri */
/* warna atas sesuaikan dg warna border chat-text, disini pakai #aaa */
border-color:#aaa transparent transparent transparent;

/* tebal border dg urutan: atas kanan bawah kiri*/
border-width:10px 10px 0px 10px;	

margin-left:10px; /* posisi segitiga agar sedikit ke tengah */
}

Kemudian div satunya dgn class arrow-background digunakan untuk menimpa segitiga border (setting margin dengan nilai negatif) sehingga dua segitiga dengan warna yang berbeda tampak seperti segitiga ber-border.

CSSnya:

.arrow-background{
position:absolute;
width:0px;
border-style:solid;
/* warna atas sesuaikan dengan warna background chat box disini digunakan white */
border-color:white transparent transparent transparent;
/* ketebalan border sesuaikan dgn arrow-border */
border-width:10px 10px 0px 10px;
margin-left:10px;

/* sesuai ketebalan border */
margin-top:-1px; 
}

Sudah bisa terlihat hasilnya, namun untuk mempercantik bisa menambahkan round corner dan shadow, dengan menambah css pada chat-text menjadi:

.chat-text{
border:1px #aaa solid;
bakground-color:white;
padding:10px;

-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari and Chrome */
-khtml-border-radius: 5px; /* Linux browsers */
border-radius: 5px; /* Opera 10.50, IE and CSS3 */

box-shadow:0px 0px 5px #aaa;
-moz-box-shadow:0px 0px 5px #aaa;
-webkit-box-shadow:0px 0px 5px #aaa;
}

IE6 tidak support warna transparant, sehingga panah akan terlihat jelek pada IE.

untuk mengatasinya ganti warna transparant dengan pink dan set chroma dengan menambah CSS pada arrow-border dan arrow-background sebagai berikut:

.arrow-border{
position:absolute;
width:0px;
border-style:solid;
border-color:#aaa transparent transparent transparent;
border-width:10px 10px 0px 10px;
margin-left:10px;

/* khusus IE IE */
_border-right-color:pink;
_border-left-color:pink;
_filter:chroma(color=pink);
}

Tambahkan sendiri CSSnya juga pada arrow-background.

Sayangnya IE tidak support round corner dan shadow box, jadi terlihat kurang cantik di IE, tapi apa boleh buat ;}

Menggambar Grafis di Java [pakai Netbeans]

Mumpung lagi bosen mengetik skripsi.. mending ngetik blog saja, haha lumayan lah dari pada males2an.
Baiklah tidak usah lama2 langsung saja kita mulai belajar menggambar seperti layaknya anak TK.. hahah.

Yak.. tool yang digunakan untuk membuat program java disini aku pakai Netbeans, jadi mudah2an kamu sudah pernah pakai Netbean2... kalau belum install dulu, caranya lihat post sebelumnya di sini dan juga mudah2an kamu sudah pernah belajar Object Oriented Programming.. opo kui?? mbuh :p..

Silakan bisa buat project baru File -> New Project, pilih kategory Java->Java Application.

Di Java kalau kita mau menggambar grafis bisasanya menggunakan Canvas yang merupakan elemen lightweight (elemen gui yg ringan).
Canvas ini terletak di java.awt.Canvas. Canvas merupakan suatu komponen jadi kita tidak bisa langsung menampilkan penampakan Canvas ini.
Biasanya untuk menampilkan komponen digunakan Container, misal kita pakai JFrame aja yang mudah, JFrame terletak di javax.swing.JFrame, swing merupakan elemen heavyweight.

Jadi sudah ketahuan kita pakai 2 kelas tersebut, Canvas dan JFrame untuk membuat aplikasi dalam tutorial ini. Namun penggunaannya tidak secara langsung kita pakai 2 kelas tersebut,
namun kita buat kelas sendiri dari turunan 2 kelas tersebut. Disini aku membuat kelas CanvasGambar turunan (extends) Canvas dan FormCanvas extend JFrame dan keduanya aku masukkan dalam package main. Lihat susunannya dalam gambar.

Langkah pertama buat package baru bernama "main" tanpa petik, lalu didalam package main buat class baru (java class) dengan nama CanvasGambar.
Mudah2an anda sudah tahu caranya.. kalau belum, coba browsing google dulu aja, hehe. Klik kanan pada nama projectmu maka akan muncul menunya.

Langsung saja tulis CanvasGambar seperti code di bawah dan baca sendiri komentarnya:

package main;

//import class2 bawaan dalam package awt
import java.awt.*;

/**
 *
 * @author ffred
 */
public class CanvasGambar extends Canvas {
    private int w;
    private int h;

    public CanvasGambar(int w, int h){
        this.w = w;
        this.h = h;
        this.setSize(w, h);
    }
    public void paint(Graphics g){
        //cast Graphics ke Graphics2D yg lebih lengkap
        Graphics2D g2d = (Graphics2D)g;

        //set warna putih
        g2d.setColor(Color.white);
        //warnai canvas dari titik (0,0) sampai lebar w dan tinggi h
        g2d.fillRect(0, 0, w, h);

        //set warna hitam
        g2d.setColor(Color.black);
        g2d.drawString("Belajar menggambar dengan canvas", 10, 20);

        //set warna biru
        g2d.setColor(Color.blue);
        g2d.drawLine(10, 25, w-10, 25);
        
        g2d.setColor(Color.green);      //set warna hijau
        g2d.fillRect(10, 40, 100, 50);  //kotak penuh pada (10,40) pxl=100x50

        g2d.setStroke(new BasicStroke(3));  //ketebalan stroke(garis) diset 3pixel
        g2d.setColor(Color.black);
        g2d.drawRoundRect(120, 40, 100, 100, 10, 10);   //gambar garis kotak tumpul

        g2d.setStroke(new BasicStroke(2));
        g2d.setColor(Color.orange);
        g2d.fillOval(230, 40, 50, 50);  //lingkaran penuh
        g2d.setColor(Color.gray);
        g2d.drawOval(230, 40, 50, 50);  //lingkaran garis
    }
}

Itu method2 buat gambar di Graphics2D kalau kamu pakai Netbeans tinggal diakhir nama variable g2d pencet titik (.) pasti keluar sendiri daftar method yang ada (kalo tidak keluar, pencet Ctrl+Spasi).
Nah dari daftar method yang ada silakan bisa dibaca sendiri, kalau mudeng bahasa inggris pasti paham sendiri.

Selanjutnya silakan buat lagi file FormCanvas di package yang sama (package main), liaht contoh kodenya di bawah

package main;

//import semua class bawaan di dalam package swing
import javax.swing.*;


/**
 *
 * @author ffred
 */
public class FormCanvas extends JFrame {
    public FormCanvas(){
        //membuat form baru dari konstruktor parent JFrame
        super("Ini Form Canvas Saya");

        //menambahkan CanvasGambar ukuran 500x500 yg tadi dibuat
        this.add(new CanvasGambar(300,200));

        //agar ukuran form menyesuaikan Canvas
        this.pack();

        //agar form muncul di tengah layar
        this.setLocationRelativeTo(null);

        //agar form bisa diclose
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        //agar form bisa terlihat
        this.setVisible(true);
    }

    //method main untuk menjalankan form, sintaks sudah bawaan java
    public static void main(String arg[]){
        //agar aman dalam menampilkan form gunakan sintaks ini
        java.awt.EventQueue.invokeLater(new Runnable(){
            public void run(){
                new FormCanvas();
            }
        });

    }
}

Kalau sudah selesai dan tidak ada muncul error merah2nya.. silakan bisa di run untuk mencoba menjalakan langsung, maupun di build untuk membuat file jar yang bisa dieksekusi.
Jika berhasil, lihat hasilnya:

Oke deh sekian dulu ya... aku mau ngetik2 buat skripsi lagi. ^v^

Memulai jQuey UI dengan Membuat PesanDialog

Oke posting kali ini mungkin kalau rada susah dicerna karna memang
untuk yang sudah agak mahir/advance, paling tidak agak mengerti html, css, javascript dan jquery. Step by step slow..

Kalau kamu-kamu pingin peralatan buat website dengan tampilan yang bagus dan menarik,
misal dialog pesan (Dialog), kalender, Panel Tabulasi, Slider, Progress Bar yang oke punya (beda dari bisanya), kamu bisa mencoba menggunakan framework jQuery UI ini. JQuery UI berjalan di atas library jQuery jadi kalau mau memakai framework ini
harus di-load/diikut sertakan dahulu library jQuery-nya.

Contoh implementasi jQuery UI

Oke mulai saja mencoba sendiri framework ini, sebelumnya download dulu bundel framework ini di jqueryui.com, yg terbaru versi 1.8.14, cari tombol 'Build Custom Download' biar cepet, hehe.. pilih Theme, terserah.. (di sini saya pakai yg UI lightness), kalau sudah dapat filenya diesktrack dulu, nanti akan dapat susunan folder sebagai berikut:

Sementara abaikan dulu folder yang lain (nanti dibaca2 sendiri foldernya), yang terpenting yang diambil untuk implementasi jquery ui adalah
1. folder js --> 'jquery-1.5.1.min.js' dan 'jquery-ui-1.8.14.custom.min.js'
2. folder css --> ada folder 'ui-lightness' (tergantung tema yang didownload) didalam ada css 'jquery-ui-1.8.14.custom.css' dan folder 'images'
copy dua folder tersebut beserta isinya tempatkan sejajar (sebenarnya terserah) dengan file html/php-mu, contoh yang saya lakukan :

Oke langsung saja load jQuery UI pada file html kamu, contoh :

<html>
<head>
 <title>Ngetes jquery ui</title>
 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
 
 <link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.14.custom.css" />
 

Oke pertama kita coba buat button dan dialog, langkahnya adalah buat dahulu sintaks html button/input untuk button dan div untuk dialog, lalu buat script javascriptnya
Di bawah ini script menampilkan button dengan tampilan jquey ui dan memunculkan dialog ketika diklik

<html>
<head>
 <title>Ngetes jquery ui</title>
 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
 
 <link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.14.custom.css" />
 
 <!-- Style halaman setting agar font tidak terlalu besar -->
 <style type="text/css">
 body, table{
  font-size:11px; 
 }
 </style>
 <!-- -->
</head>
<body>
 <script>
 $(function(){ //cara lain selain pakai $(document).ready()
  //untuk mengubah bentuk button semua tag button
  $("button").button();
  
  $("button").click(function(){
   //memunculkan dialog yang berasal dari elemen dengan id 'dialog-tersembunyi' 
   $( "#dialog-tersembunyi" ).dialog(); //end dialog
   
  }); //end button click
  
 });
 </script>
 <button>Munculkan Dialog</button>

 <!-- Element yg akan ditampilkan sebagai dialog -->
 <div id="dialog-tersembunyi" title="Peringatan" style="display:none;">
  Dialog ini akan muncul jika memencet tombol!!
 </div>

</body>
</html>

dibaca sendiri ya keterangan di script-nya

Kalau sudah, bisa dicoba tampilkan dibrowser

Untuk yang dialog kamu bisa variasi dengan menambah parameter tertentu, misal

Menambahkan button Ok untuk menutup dialog

$( "#dialog-tersembunyi" ).dialog({
    buttons:{
     Ok: function(){
      $(this).dialog("close");
     }
    }
   }); //end dialog

Dialog dengan button OK dan menjadi Modal Dialog (fokus pada dialog dan memburamkan halaman belakang)

$( "#dialog-tersembunyi" ).dialog({
    modal:true,  //modal --> true, false
    buttons:{
     Ok: function(){
      $(this).dialog("close");
     }
    }
   }); //end dialog

Dialog modal muncul dengan animasi

$( "#dialog-tersembunyi" ).dialog({
    show:"bounce",
    hide:"scale",
    modal:true,  //modal --> true, false
    buttons:{
     Ok: function(){
      $(this).dialog("close");
     }
    }
   }); //end dialog

Gambar *lihat sendiri ya.. ^^

Contoh modal.. dapat dilihat di sini

Oke sekian dulu, besok lanjut yang lain yang lebih menarik..

Menempel Event pada DOM dengan jQuery

Ayo kita lanjut posting yang berguna lagi.. kali ini lanjut bahas jQuery lagi.

Langsung saja tanpa basa basi.. Kalau kamu ingin sebuah aksi ketika suatu elemen HTML berhasil dimuat (ready), di klik (click), di masuki mouse(mouseenter), fokus (focus), dan masih banyak lagi. kamu bisa melakukannya dengan mudah lewat jquery... contoh untuk menampilkan pesan alert pada dokumen ketika document berhasil dimuat (ready).

<html>
<head>
 <title>Belajar jQuery</title>
 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head> 
<body>
 <script type="text/javascript">
  $(document).ready(
   //harus berisi suatu function
   function(){
    alert("Dokumen berhasil di load");
   }
  );
 </script>
 isi dokumen isi dokumen
</body>
</html>

Hasilnya halaman akan menampilkan pesan alert ketika selesai dimuat.

Nah biasanya fungsi pada event ready pada document tadi dimanfaatkan untuk menempelkan event2 lain misal kita ingin menganti border css tag <div> ketika mouse mulai masuk elemen (mouseenter) dan mengembalikannya lagi ketika mouse pergi (mouseout/mouseleave). Check this out :

<html>
<head>
 <title>Belajar jQuery</title>
 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head> 
<body>
 <script type="text/javascript">
  $(document).ready(
   //harus berisi suatu function
   function(){
    //tambahkan aksi ketika mouse masuk
    $("div").mouseenter(function(){
     //this mengacu pada elemen div yang sama
     $(this).css("border","3px solid grey");
    });
    $("div").mouseout(function(){
     //this mengacu pada elemen div yang sama
     $(this).css("border","1px solid black");
    });
    
   }
  );
 </script>
 <div style="border:1px solid black; width:200px; height:30px;"> 
  Ini DIV pertama 
 </div>
 <br />
 <div style="border:1px solid black; width:200px; height:30px;"> 
  Ini DIV Kedua 
 </div>
</body>
</html>

Dan hasilnya, tada :D

Dan satu penjelasan lagi, mengapa fungsi buat mouseenter dan mouseout pada div harus diletakkan di event ready pada document? Itu karena kalau tidak diletakkan di situ ada kemungkinan, script tempelkan event mouseenter dan mouseout akan dieksekusi sebelum elemen tag <div> dibuat. Jadinya ya.. kaya kita mau nempel stiker di pintu eh pintunya belum dipasang.. pasang dimana ya akhirnya?? dijidat aja biar gak pusing. ;P

Oke sekian aja dulu.. lanjut besok besok lagi.. ^^

Mengenal jQuery

Apa itu jQuery? jQuery adalah semacam library untuk javascript, library ini menyimpan banyak sekali fungsi-fungsi dasar javascript untuk memanipulasi elemen HTML, membuat event, animasi, dan transfer data dengan AJAX. lebih jelasnya lihat di website jquery.com.

Untuk menggunakan library ini, cukup download library berupa file .js nya, download saja di websitenya jquery.com, pilih yang versi minimum-nya. Setelah punya filenya tempatkan file tadi satu folder dengan file html, di contoh nama filenya jquery-1.6.1.min.js dan sisipkan pada tag script di html kamu, lihat contoh

<html>
<head>
 <title>Belajar jQuery</title>
 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head> 
<body>
 
</body>
</html>

Fungsi jquery selalu menggunakan $. Misal untuk element html pada semua tag $lt;P> maka kita dapat meggunakan selektor

$("p");

Untuk mengganti semua isi dalam tag <P> dengan sesuatu dapat kita gunakan.

$("p").html("Semua tag P akan diganti tulisannya dengan ini");

Contoh dibawah ini akan mengubah isi semua tag <P> pada dokument

<html>
<head>
 <title>Belajar jQuery</title>
 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head> 
<body>
 <p>Isi tag P pertama</p>
 <p>Isi tag P kedua</p>
 <p>Isi tag P kedua</p>
 
 <script type="text/javascript">
  $("p").html("Semua tag P akan diganti tulisannya dengan ini");
 </script>
</body>
</html>

Hasilnya :

Untuk yang tanpa script tampilannya adalah

Selektor lain selain tag yaitu untuk elemen dengan id tertentu atau elemen dengan class tertentu, untuk yang dengan id tertentu menggunakan.

$("#nama_id");

dan untuk yang kelas tertentu gunakan

$(".nama_kelas");

Contoh penerapannya:

<html>
<head>
 <title>Belajar jQuery</title>
 <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
</head> 
<body>
 <p>Isi tag P pertama</p>
 <p id="betmen">Isi tag P dengan id=betmen</p>
 <p class="robin">Isi tag P dengan class=robin</p>
 <p>Isi tag P keempat</p>
 <div class="robin">Isi div dengan class=robin</div>
 
 <script type="text/javascript">
  $("#betmen").html("Elemen dengan id='betmen' isinya aku ganti ini");
  $(".robin").html("Semua elemen dengan class='robin' isinya aku ganti ini");
 </script>
</body>
</html>

Hasilnya :

Selain mengubah isi element masih banyak lagi fungsi yang bisa dilakukan.. Lanjut posting selanjutnya saja ^^

Sebelum Membuat Aplikasi Java

Setelah sekian lama buat blog, mari posting sesuatu yang berguna disini. Karena pada dasarnya penulis dari jurusan TI (Teknik Informatika) maka postingannya berbau-bau Teknologi Informasi pastinya.

Pada kesempatan kali ini penulis akan membahas bahasa pemrograman Java, sebelumnya mengapa membahas bahasa Java, kalau ditanya alasan itu, penulis juga kurang paham, pokoknya saya mudenganya bahasa Java, hehehe..

Bagi anak TI pasti sudah banyak mendengar kata algoritma pemrograman dan salah satunya adalah pemrograman berorientasi objek, nah bahasa Java ini menggunakan terminologi Pemrograman Berorientasi Objek (PBO), penjelasan lihat di Wikipedia sini aja.

Langsung saja kita mulai belajar bahasa java, untuk dapat menjalankan program java di komputermu, terlebih dahulu harus diinstal Java Runtime Environment (mesin virtual untuk menjalankan program java) dan kalau mau membuat program dengan bahasa java, terlebih dahulu harus diinstall Java SE Development Kit (JDK) kalau didalam JDK ini sudah sekalian sama Java Runtime Environment, jadi disaranakan installnya yang ini saja.

Kalau sudah punya itu, sebenarnya sudah bisa buat beraksi, tapi agar lebih gampang mari kita pakai editor Netbeans agar lebih mudah, bisa didownload sekalian sama JDKnya di sini.
Langsung install.