ZaiLOG http://zaini.dikti.net Think Better Tue, 16 Sep 2008 12:19:49 +0000 http://wordpress.org/?v=2.5.1 en Xampp For Linux http://zaini.dikti.net/2008/09/13/xampp-for-linux.html http://zaini.dikti.net/2008/09/13/xampp-for-linux.html#comments Sat, 13 Sep 2008 14:25:36 +0000 admin http://zaini.dikti.net/?p=6 PHP, MySQL dan Apache merupakan perangkat yang tidak pernah lepas dari implementasi aplikasi berbasis web. Selain gratis dalam penggunaannya ketiga perangkat ini juga sangat mudah sekali untuk dicari sumber dayanya, karena mayoritas situs - situs di internet menggunakan ketiga perangkat ini. Untuk mempermudah para pengembang dalam menggunakan perangkat ini, banyak sekali disediakan paket installasi yang intinya para pengembang tersebut tidak perlu susah-susah menginstall ketiga perangkat ini secara terpisah.

Salah satu dari paket installasi yang tersedia adalah xampp. Xampp tidak hanya menyediakan PHP, MySQL dan Apache, disamping ketiga perangkat tersebut xampp juga menyertakan file server dan mail server ke dalam paket installasinya. Membantu sekali bukan ?. Keunggulan dari Xampp yang lain adalah tersedia dalam dua paket installasi yaitu windows dan linux. Kali ini saya akan membahas installasi xampp for linux, kebetulan saya menggunakan mandriva one 2007  :

  1. Download paket installasi xamp for linux disini
  2. Buka terminal
  3. pindah ke directory tempat master xampp berada dengan perintah cd [direktori master xampp].
  4. Kita bisa mengecek keberadaan file master xampp dengan perintah ls
  5. Login sebagai super user dengan perintah su
  6. extract master xampp dengan perintah tar, di extract ke directory /opt dengan periintah tar -xvf [nama file master xampp] -C /opt
  7. Secara otomatis akan terdapat direktori baru dengan nama lampp pada direktori /opt. Untuk memulai service gunakan perintah : /opt/lampp/lampp start.
  8. Ganti parameter start dengan stop untuk menghentikan service.
  9. Ganti parameter start dengan restart untuk me-restart service.
]]> http://zaini.dikti.net/2008/09/13/xampp-for-linux.html/feed Yahoo messenger via meebo http://zaini.dikti.net/2008/09/07/yahoo-messenger-via-meebo.html http://zaini.dikti.net/2008/09/07/yahoo-messenger-via-meebo.html#comments Mon, 08 Sep 2008 03:20:28 +0000 admin http://zaini.dikti.net/?p=5 Yahoo menyediakan fasilitas bagi penggunanya untuk bisa melakukan pengiriman pesan secara instant atau yang lebih sering kita kenal dengan instant messaging. Penggunaan instant messaging ini bisa dilakukan melalui media web browser atau aplikasi desktop. Yang paling popular di kalangan pengguna yahoo adalah menggunakan aplikasi desktop Yahoo messenger untuk melalukan instant messaging (chatting). Kali ini kita akan menggunakan yahoo messenger via web browser (Internet explorer), langkah-langkahnya :

  1. Buka Internet Explorer
  2. Buka alamat http://www.meebo.com
  3. Karena kita akan menggunakan account Yahoo untuk chat (berkomunikasi), maka kita akan login pada tab login yahoo.
  4. Masukkan user id dan password mail yahoo, misal : kita punya mail dengan account mtsmifda@yahoo.co.id maka pada text login kita isi dengan “mtsmifda” tanpa diikuti @yahoo.co.id, kemudian masukkan password sesuai dengan accout email yahoo yang sudah ada, kemudian tekan tombol enter
  5. Tunggu sesaat sampai proses login sukses, kemudian akan muncul messenger yahoo yang sesuai dengan account email yahoo kita
  6. Tambahkan kontak teman kita (kontak sesama pengguna email yahoo) agar bisa berkomunikasi dengan cara klik tombol “add buddy”
  7. Isikan kontak teman kita (misal akhmadzaini@ymail.com  sesuai dengan account email di yahoo), pada dialog yang muncul setelah klik tombol “add buddy”
  8. Secara otomatis akan terdapat teman baru pada daftar teman kita, double klik account teman kita dan coba tuliskan sesuatu untuk berkomunikasi
]]> http://zaini.dikti.net/2008/09/07/yahoo-messenger-via-meebo.html/feed Membuat Jendela (Window) Modal Dengan CSS dan Javascript http://zaini.dikti.net/2008/07/13/membuat-jendela-window-modal-dengan-css-dan-javascript.html http://zaini.dikti.net/2008/07/13/membuat-jendela-window-modal-dengan-css-dan-javascript.html#comments Sun, 13 Jul 2008 08:00:37 +0000 admin http://zaini.dikti.net/?p=4 Dalam beberapa hari saya menghabiskan waktu untuk mencari referensi mengenai pembuatan jendela (window) modal. Hasilnya saya menemukan beberapa artikel yang menarik untuk dijadikan sebagai referensi tentang window modal tersebut. Keuntungan dari penerapan window modal adalah untuk membatasi user agar tidak mengakses bagian lain dari suatu aplikasi.
Misalkan pada saat user/pengunjung melakukan input data baru dalam waktu yang bersamaan kita tidak mengijinkan user tersebut untuk mengakses menu aplikasi. Langkah-langkah pembuatan window modal adalah sebagai berikut :
1.    Membuat DIV window modal
DIV window modal merupakan bagian halaman yang akan kita jadikan sebagai window modal :

<div id="window_modal">
<div>
<p>Konten tempat window modal ada disini.<br />
<a href='#' onclick='window_modal()'>Tutup window</a>
</p>
</div>
</div>

2.    Membuat CSS
CSS berfungsi untuk mengatur tata letak dan tampilan dari window modal yang akan kita buat :

#window_modal {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
z-index: 1000;
}
#window_modal div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
}

margin: 100px auto; artinya kita meletakkan window modal tersebut sejauh 100 pixel dari bagian atas konten. Anda bisa mengganti sesuai dengan kebutuhan.

3.    Javascript
Setelah kita membuat tampilan seperti di atas kita akan mendapati sebuah tampilan kosong, meskipun sebelumnya kita telah menyisipkan tulisan “Konten tempat window modal ada di sini”. Lantas bagaimana jika kita ingin menampilkan bagian tersebut ? jawabannya adalah dengan menggunakan javascript dan link untuk menjalankan javascript tersebut. Berikut ini adalah kode javascriptnya :

function window_modal() {
el = document.getElementById("window_modal");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

Setelah itu langkah yang terakhir adalah membuat link (tombol) untuk menampilkan window modal yang kita buat :

<a href='#' onclick='window_modal()'>Tampilkan window modal</a>

Jika semua bagian di atas digabung, akan menjadi :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
#window_modal {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
z-index: 1000;
}
#window_modal div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
}
</style>
<script>
function window_modal() {
el = document.getElementById("window_modal");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>
<body>
<a href='#' onclick='window_modal()'>Tampilkan window modal</a>
<div id="window_modal">
<div>
<p>Konten tempat window modal ada disini.<br />
<a href='#' onclick='window_modal()'>Tutup window</a>
</p>
</div>
</div>
</body>
</html>

Sumber : http://sitening.com/blog/2006/03/29/create-a-modal-dialog-using-css-and-javascript/

]]> http://zaini.dikti.net/2008/07/13/membuat-jendela-window-modal-dengan-css-dan-javascript.html/feed Menyembunyikan dan menampilkan elemen HTML http://zaini.dikti.net/2008/07/07/menyembunyikan-dan-menampilkan-elemen-html.html http://zaini.dikti.net/2008/07/07/menyembunyikan-dan-menampilkan-elemen-html.html#comments Mon, 07 Jul 2008 05:10:05 +0000 admin http://zaini.dikti.net/?p=3 Dengan menggunakan javascript dan css kita bisa menyembunyikan dan menampilkan elemen HTML. Kita asumsikan kita ingin membuat tampilan yang hanya akan muncul ketika pengunjung meng-klik tombol expand dan menyembunyikan tampilan tersebut saat tidak diperlukan.

  1. Langkah pertama adalah dengan membuat elemen div untuk tampilan yang ingin disembunyikan :

    <div id="ElemenTersembunyi" style="display:none;">Ini elemen yang disembunyikan</div><div

  2. Langkah selanjutnya adalah membuat script javascript yang berfungsi untuk menampilkan dan menyembunyikan div “ElemenTersembunyi” :

    function tampilkanElemen(layer){
    var myLayer = document.getElementById(layer);
    if(myLayer.style.display=="none"){
    myLayer.style.display="block";
    myLayer.backgroundPosition="top";
    } else {
    myLayer.style.display="none";
    }
    }

  3. Langkah terakhir adalah dengan menambahkan tombol expand agar user bisa menampilkan atau menyembunyikan div “ElemenTersembunyi” :

    <a onclick="tampilkanElemen('ElemenTersembunyi')" href="javascript:void(null);">Tombol Expand</a>

]]> http://zaini.dikti.net/2008/07/07/menyembunyikan-dan-menampilkan-elemen-html.html/feed