Category Archives: HTML

File index sebagai default website

Posted on by

Biasanya pada kebanyakan website / situs, halaman pertama kali yang diakses adalah index.php atau kadang juga index.html / index.htm. Nah, pada pembahasan ini adalah bagaimana caranya agar saat suatu website di load / dibuka pertama kali yang muncul adalah halaman selain index.php.

Cara ini bisa saja kita pakai header untuk PHP atau metode jumping pakai Javascript dan sebagainya. Cuman yang ini kita tanpa memasukkan script yang mengalihkan ke halaman lain dari suatu file index. Cara kali ini adalah memberikan satu baris kode pada file .htaccess pada website kita. Continue reading →

Membuat Force Download

Posted on by

Force Download ? apa maksud dari kata tersebut aku juga agak susah mendefinisikannya, intinya Force Download adalah di saat kita menemui satu link suatu situs yang mengarah ke satu file itu akan secara langsung di download.

Misalnya gini, pernahkah kalian mencari suatu gambar melalui Google Image ? Saat kita pilih salah satu gambar yang pas dengan pilihan kita, terkadang gambarnya bisa langsung di download dengan muncul window save as tanpa memperlihatkan previewnya di browser. Dan sering juga saat kita ke satu link gambar bukan download ke hard disk kita, melainkan ditampilkan dulu di browser, baru bisa di download dan disimpan di komputer kita. Gimana, udah ngerti belum maksudku ? 🙂 Untuk lebih jelasnya apa yang aku maksud dengan window save as tadi bisa kalian lihat pada gambar di bawah ini

Save Window

Untuk sourcecode PHP nya silahkan lihat di bawah ini : Continue reading →

Autosuggest Javascript

Posted on by

Dengan judul tersebut pasti para master udah bilang, ” ah udah biasa “, tapi blog ku ini adalah catatanku, jadi buat jaga – jaga. Males soalnya nulis di buku :p

Kali ini aku coba buat Autosuggest menggunakan Javascript, autosuggest di sini adalah suatu sistem yang memberikan kita rekomendasi pilihan dari data yang kita inputkan. Contohnya seperti di google kalo kita ketik sesuatu pasti muncul beberapa pilihan di bawah form input data.

Autosuggest Javascript

Autosuggest Javascript

google suggest

Autosuggest Google

Seperti gambar di ataslah contoh autosuggest, untuk contoh livenya silahkan kunjungi http://fastprint.co.id/daftar.html di bagian Kota. Algoritma dari sistem kali ini adalah :

  1. Input Data pada database
  2. Pemanggilan dan pengelompokan data dan ditampung pada satu variabel array
  3. Setelah dikelompokkan dalam satu array, kemudian kita akan mencari string yang sesuai dengan yang kita input
  4. Menampilkan hasil kata – kata dari array yang mirip dengan apa yang kita ketik
  5. Pilih yang sesuai dan selesai

Oke,,, untuk lebih jelasnya silahkan download source secara lengkap di Download Autosuggest Javascript PHP. Oke, Selamat Mencoba 🙂

Custom Image Yahoo Messenger Status

Posted on by

Yaph yaph,,, sesuai dengan judulnya, postingan ini bukan menunjukkan bagaimana cara mengganti gambar / image status YM Anda sedang online ataukah sedang offline dengan gambar yang telah disediakan oleh Yahoo sendiri, tapi kita membuat gambar kita sendiri sebagai parameter atau indikator yang menunjukkan apakah kita YM kita sedang online atau offline.

Kalau memanffatkan gambar yang sudah disediakan oleh Yahoo pastinya kita kurang puas, nah postingan kali ini adalah memberitahu Anda bagaimana caranya gambar yang kita buat sendiri sebagai parameter status online / offline dari status YM kita. Tentunya script ini menggunakan bahasa pemrograman PHP.

Logikanya untuk bisa membuat menampilkan status yang sesuai dengan status YM Anda adalah, bagaimana kita bisa mendapatkan nilai 0 dan 1 yang dikeluarkan dari link yahoo saat statusnya aktif. Jika nilainya 1 maka sedang online, jika selain itu maka offline. Ok silahkan lihat sourcenya di bawah ini : Continue reading →

Virtual Host di AppServ localhost

Posted on by

Virtual Host adalah cara untuk mengatur banyak website atau URL di dalam satu mesin atau satu IP. Misalkan kita mempunyai banyak domain tapi hanya mempunyai 1 IP public atau 1 server. Cara untuk mengatasi masalah itu adalah dengan cara membuat virtualhost yang ada di settingan apachenya. Virtual Host bisa anda gunakan setelah anda menginstall package-package apache dan sudah pasti web server anda sudah berjalan dengan baik.

Intinya, virtual host ini adalah bagaimana caranya membuat URL dari http://localhost/contoh menjadi http://contoh.com jadi seakan – akan kita punya alamat website seperti yang ada sesungguhnya.

Langkah – langkahnya adalah :

  1. Edit ( tambahkan beberapa baris sesuai host yang Anda inginkan ) file host yang terletak di C:\WINDOWS\system32\drivers\etc\host
    127.0.0.1        contoh.com
  2. Setelah itu tambahkan script dibawah ini di file httpd.conf yang terletak didalam folder webserver. Jika pakai AppServ filenya terletak di AppServ/Apache2.2/conf
    NameVirtualHost 127.0.0.1
    <VirtualHost 127.0.0.1:80>
    DocumentRoot “C:\AppServ\www\contoh”
    ServerName contoh.com
    <Directory />
    Options FollowSymLinks
    AllowOverride All
    </Directory>
    ErrorLog logs/contoh.com-error_log
    CustomLog logs/contoh.com-access_log common
    </VirtualHost>

Setelah itu silahkan restart service apache Anda, lalu coba buka http://contoh.com di browser. Selamat mencoba !!!

Shortcut pada halaman Web Site

Posted on by

Alhamdulillah,,, akhirnya punya bahan juga untuk posting …
Dilihat dan dipahami dari judulnya, mungkin ada yang mengira bahwa postingan ini adalah memberitahu kita bagaimana cara membuat suatu shortcut di desktop yang nantinya menuju ke website kita pada saat di klik. Tentu perkiraan tersebut salah !!!
Maksud dari judul tersebut adalah bagaimana cara membuat suatu shortcut key pada halaman website, contohnya,,, jika kita punya wordpress dan ingin posting sesuatu melalui halaman Admin, nah dibagian textarea-nya jika kita ingin menebalkan huruf kan kita tekan Ctrl+B otomatis huruf yang kita blok tadi menjadi tebal. Nah seperti itulah nantinya tutorial kali ini. Jadi bisa aja nanti kita pasang script dimana saat kita tekan Ctrl+B tiba – tiba muncul alert “Hallooo”.

Ok, sekian kata pengantarnya, langsung saja. Kita ini pakai javascript keyboard event handling. Whwhehe,,, intinya kita pake javascript. Continue reading →

Tooltip Just With CSS

Posted on by
CSS Tooltip

CSS Tooltip

span.tool {
  position: relative;   /* this is key */
  cursor: help;
}

span.tool span.tip {
  display: none;        /* so is this */
}

span.tool:hover span.tip {
  display: block;
  z-index: 100;
  position: absolute;
  top: 1.6em;
  left: 0;
  width: auto;
  padding: 3px 7px 4px 6px;
  border: 1px solid #336;
  background-color: #f7f7ee;
  font: normal 0.9em/1.2em arial, helvetica, sans-serif;
  text-align: left;
  color: #000;
}

#content span.tool::after {
  padding-left: 2px;            /* eye candy */
  content: url(/img/bubble.gif);
}

Implementasinya seperti berikut : <a href=”http://www.wikipedia.org/wiki/Wiki“><span class=”tool”>Wikipedia!<span class=”tip”><q>Wikipedia! on Wiki</q><br />http://www.wikipedia.org/wiki/Wiki</span></span></a>

Get Size Of Image With PHP

Posted on by

Terkadang saat kita buat suatu fitur dalam satu website, lalu kita lupa belum memberikan validasi otomatis untuk upload gambar / image sesuai ukuran yang seharusnya. Nah itu bisa diakali dengan meresize saat image tersebut di load dengan menggunakan tag HTML atau CSS. Namun kita perlu mengetahui terlebih dahulu lebar dan panjang dari image tersebut yang kita load. Kita bisa memnggunakan sintaks PHP untuk mendapatkan semua itu. Source nya ada di bawah ini :

<?php
list($width, $height) = getimagesize("source gambar");
print "<img src=\"source gambar\" width=\"$width\">";
?>

Nah,,, sekian source nya, cukup simple bukan ? Semoga bisa membantu ya :mrgreen:

Simple Dropdown Menu

Posted on by

Di internet pastinya sudah banyak source – source mengenai Dropdown Menu, ada yang menggunakan jQuery, mooTools dan sebagainya. Namun kali ini aku coba buat dropdown sesimple mungkin, namun dropdown ini tanpa delay waktu saat mouse mejauh. Jadi jika kita jauhkan mouse, maka langsung aja dropdownnya hilang tanpa selang waktu berap detik. Aku berharap bisa membantu bagi semua pembaca artikel ini. 😉

Ini sintaks Javascript nya, silahkan kamu taruh ini di antara element <head> dan </head>

<script>
function tampilMenu(){
document.getElementById(‘menuPopup’).style.display = ‘block’;
}

function tutupMenu(){
document.getElementById(‘menuPopup’).style.display = ‘none’;
}
</script>

Lalu, di bawah ini untuk stylenya pake CSS taruh diantara element <head> juga. Continue reading →

Input Numeric Only

Posted on by

Untuk validasi ketika ngetik di suatu textbox jadi hanya numerik saja yang bisa diinputkan. Ni buat jaga – jaga, kan biasanya di form telepon di suatu pendaftaran online, kadang user yang ngawur di isi aja pake abjad.

function isNumeric ( evt ) {
    var charCode = ( evt.which ) ? evt.which : event.keyCode;
    if ( charCode > 31 && (charCode < 48 || charCode > 57) ) return false;
    return true;
}

<input type=”text” name=”phone” onkeypress=”return isNumeric(event)”>

if ( charCode > 31 && (charCode < 48 || charCode > 57) )

Untuk charCode > 31 dan lainnya itu adalah range suatu karakter entah apa namanya, aku juga lupa :p . Pokonya di antara range itu adalah range untuk tipe data numerik. Kalo masih penasaran coba aja googling tentang hal ini.

onkeypress=”return isNumeric(event)”

Onkeypress menandakan saat kita sedang ngetik di suatu form. Nah pas sedang ngetik, si fungsi isNumeric itu tadi juga sekalian ngecek apakah yang kita input itu numerik atau buka. Kalo bukan ya ndak akan tampil apa – apa, tapi kalo numerik akan muncul sesuai angka yang kita inputkan.

Ya semoga bermanfaat. Terima Kasih.