takien, not taken » Uncategorized http://takien.com Webmaster's Information and Resource Wed, 28 Jul 2010 15:45:24 +0000 en hourly 1 http://wordpress.org/?v=3.0 Membuat table multicolumn dengan div dan csshttp://takien.com/290/membuat-table-multicolumn-dengan-div-dan-css.php http://takien.com/290/membuat-table-multicolumn-dengan-div-dan-css.php#comments Wed, 07 May 2008 08:16:58 +0000 dari situskamu.com http://takien.com/?p=133 table css Perlahan namun pasti, penggunaan tag table dalam sebuah website sudah mulai ditinggalkan baik itu dalam membuat layout maupun kontent website itu sendiri. Bahkan pembuatan layout tanpa table sudah sangat lumrah kita jumpai dan menjadi suatu keharusan saat dengan alasan file size menjadi lebih kecil dan tentu saja mempengaruhi waktu load. Apalagi dengan diluncurkannya standard Blueprint CSS Framework oleh google code yang jelas membantu para web designer untuk membuat multicolumn div, div column span dan masih banyak lagi yang dulunya hanya bisa dilakukan jika menggunakan tabel. Namun yang akan aku bahas adalah membuat table untuk isi website menggunakan div. (Untuk membuat tableless layout, lihat referensi di akhir post ini)

.

Beralih ke table dalam kontent website, sebenarnya ada toolsnya yakni "table2css converter" yang bisa langsung mengkonvert table menjadi div hanya dengan beberapa klik. Namun sayangnya tool ini hanya bisa membuat tabel statik dengan ukuran-ukuran absolut. Bagaimana jika table tersebut merupakan table dinamis, multicolumn, multirow seperti daftar harga barang, statistik atau member, dimana data diambil secara loop dari database?

.

Berikut contoh membuat tabel div yang mempunyai 8 kolom (columns) dan 2 baris (rows).

.

Pertama, buat kontainer yang bertidak sebagai <table> </table>.

<div class="kontainer"></div>

Properti css nya adalah:

.kontainer {
width:100%;    /* penuh layar atau fluid/flexible, gunakan ukuran px untuk fixed width */
margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/
               /* bertindak seperti <table align="center">*/
border: 1px solid #000 /* border, opsional */
}

Kedua, tambahkan row/baris di dalam div kontainer tadi, yang bertindak sebagai <tr></tr>.

<div class="kontainer">
   <div class="baris"></div>
</div>

Properti cssnya:

.baris {
width: 100%    /* harus 100% supaya penuh ke area table */
}

Ketiga, tambahkan beberapa kolom (contoh ini 8 kolom) diantara div baris tadi, yang bertindak sebagai <td></td>.

<div class="kontainer">
   <div class="baris">
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
   <div style="clear: both;" /> <!-- tambahkan ini, supaya div kontainer
                                melingkupi semua div yang ada di dalamnya -->
</div>

Properti css nya:

.kolom {
width: 12.2%; /* pembagian 100% dengan 8 kolom, seharusnya 12.5%, */
              /* diberikan kompensasi seperlunya karena penggunaan margin,*/
              /* padding maupun border nantinya akan mempengaruhi lebar kolom */
float: left;  /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */
}

.

Berikut screenshot hasil sementara:

.
css tableless layout, table using div

.

Untuk menambahkan baris lainnya, baris kedua, ketiga dan seterusnya, cukup ulangi div baris beserta div kolom sebanyak baris yang diperlukan. Berikut contoh setelah diatambahkan baris (baris ke 2):

<div class="kontainer">
   <div class="baris">
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
   <div class="baris"> <!-- baris ke dua -->
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
<div style="clear: both;" /> <!-- jangan lupa untuk selalu menempatkan tag ini
                             sebelum penutup div kontainer -->
</div>

.

Kode lengkapnya adalah:

.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contoh Table menggunakan div</title>
<style type="text/css">
.kontainer {
width:100%;    /* penuh layar atau fluid/flexible, gunakan ukuran px untuk fixed width */
margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/
               /* bertindak seperti <table align="center">*/
border: 1px solid #000 /* border, opsional */
}
.baris {
width: 100%    /* harus 100% supaya penuh ke area table */
}
.kolom {
width: 12.2%; /* pembagian 100% dengan 8 kolom, seharusnya 12.5%, */
              /* diberikan kompensasi seperlunya karena penggunaan margin,*/
              /* padding maupun border nantinya akan mempengaruhi lebar kolom */
float: left;  /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */
}
</style>
</head>

<body>
<div class="kontainer">
   <div class="baris">
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
   <div class="baris"> <!-- baris ke dua -->
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
<div style="clear: both;" /> <!-- jangan lupa untuk selalu menempatkan tag ini
                             sebelum penutup div kontainer -->
</div>
</body>
</html>

.

Sesuaikan style tambahan seperti warna background, border, text dan sabagainya. Selanjutnya, untuk pengisian data bisa menggunakan parameter-parameter php sesuai dengan kebutuhan.

.

Dalam contoh ini sengaja menggunakan atribut class bukan id dalam mengidentifikasi css properties karena sesuai dengan standard W3C bahwa id adalah harus unik untuk menamai suatu elemen dalam sebuah halaman web.

.

Demo: Klik di sini
Download: Klik di sini

.

Sementara untuk tutorial membuat layout menggunakan css lihat referensi ini:

http://kusaeni.com/blog/blueprint-css
http://bimoweb.com/layout-web-tanpa-tabel-untuk-ajax.html

Incoming search terms:

]]> http://takien.com/290/membuat-table-multicolumn-dengan-div-dan-css.php/feed 17 HTML 5, Akan Diluncurkan Dengan Elemen dan Atribut Baruhttp://takien.com/233/html-5-akan-diluncurkan-dengan-elemen-dan-atribut-baru.php http://takien.com/233/html-5-akan-diluncurkan-dengan-elemen-dan-atribut-baru.php#comments Thu, 24 Jan 2008 12:37:15 +0000 dari situskamu.com http://takien.com/html-5-akan-diluncurkan-dengan-elemen-dan-atribut-baru/ html, html 5, html logoKode HTML yang selama ini kita pakai dalam membuat website sebentar lagi akan mengalami perubahan dalam syntax-syntax nya. Perubahan tersebut meliputi beberapa penambahan atribut maupun elemen-elemen baru, perubahan atribut atau elemen tertentu serta penghapusan beberapa elemen dan atribut tertentu. Perubahan pada HTML 5 ini dilakukan untuk menyesuaikan dengan perkembangan dunia website sekarang ini, salah satunya adalah kebutuhan akan kompatibilitas yang tinggi.

Dalam draft kerja HTML 5 yang dikembangkan oleh kelompok kerja HTML Working Group ini disebutkan beberapa perubahan atas kode maupun bahasa yang digunakan.

Berikut beberapa elemen baru dalam HTML 5:

  • section digunakan dalam pembentukan struktur dokumen.
  • article menunjukkan isi dokumen seperti blog atau artikel berita.
  • aside menunjukkan penggalan dari isi dokumen yang berhubungan dengan keseluruhan isi.
  • header menunjukkan judul dari sebuah section.
  • footer menunjukkan bagian kaki dokumen yang berisi informasi penulis, hak cipta dan informasi lainnya.
  • nav digunakan untuk membuat navigasi dokumen.
  • dialog digunakan dalam menuliskan format dialog atau percakapan.
  • figure untuk mengasosiasikan dokumen dengan fitur embed video atau kontent multimedia.

Sementara beberapa elemen-elemen yang dibuang sepert frame, frameset dan noframes karena dianggap sering disalahgunakan untuk tujuan negatif.
Daftar lengkapnya bisa dilihat di http://www.w3.org/TR/2008/WD-html5-diff-20080122/

Incoming search terms:

]]> http://takien.com/233/html-5-akan-diluncurkan-dengan-elemen-dan-atribut-baru.php/feed 4 Domain Terpendek atau Domain Terpanjang?http://takien.com/228/domain-terpendek-atau-domain-terpanjang.php http://takien.com/228/domain-terpendek-atau-domain-terpanjang.php#comments Tue, 22 Jan 2008 18:19:51 +0000 dari situskamu.com http://takien.com/domain-terpendek-atau-domain-terpanjang/ domain, domain name, domain logo, dot comNama domain adalah sederetan huruf atau angka tertentu yang digunakan sebagai pengidentifikasi suatu server web atau suatu jaringan komputer supaya lebih mudah diingat dan diakses oleh penggunanya. Ternyata sekarang sebuah nama domain mempunyai nilai tersendiri bagi pemiliknya, yaitu menjadi semacam identitas seseorang di Internet.

Nama domain memang harus unik, artinya tidak boleh ada dua domain dengan nama yang sama sesuai dengan fungsinya untuk mengidentifikasi. Atas dasar keunikan nama domain tersebutlah saat ini orang berusaha membeli domain yang seunik mungkin. Unik di sini bukan hanya berarti 'berbeda' dari yang lain, tapi lebih mengarah ke 'aneh'. Keanehan ini biasanya juga mempunyai nilai tersendiri yang tidak murah kalau diuangkan, seperti contoh domain x.com yang dimiliki oleh paypal, apakah anda berani membelinya?

Contoh nama domain di atas adalah unik karena, hanya terdiri dari satu huruf yaitu huruf x yang mempunyai makna tidak terbatas atau melambangkan sebuah bilangan pengandaian. Tapi tunggu dulu, jangan harap anda bisa memesan domain seperti itu, satu huruf. Karena domain-domain tersebut sudah tidak ada alias not available.

Jangan bersedih dulu, karena masih ada alternatif lain kok, yaitu domain terpanjang. Ya, sepertinya kurang tepat kalau dikatakan 'terpanjang' karena awalan ter- sebelum kata sifat menyatakan paling, yang berarti 'tidak ada tandingannya'. By the way, siapa sih orang pertama di Indonesia yang mempunyai domain terpanjang tersebut? Di sini anda boleh bersedih, karena akulah orangnya. :ngacir:

Gambar diambil dari indoglobal.com

Incoming search terms:

]]> http://takien.com/228/domain-terpendek-atau-domain-terpanjang.php/feed 13 Internet Explorer, Sepertinya Kita Harus Berpisah!http://takien.com/221/internet-explorer-sepertinya-kita-harus-berpisah.php http://takien.com/221/internet-explorer-sepertinya-kita-harus-berpisah.php#comments Sun, 20 Jan 2008 07:02:00 +0000 dari situskamu.com http://takien.com/internet-explorer-sepertinya-kita-harus-berpisah/ Internet ExplorerInternet Explorer sudah hampir berumur 18 tahun sejak kelahirannya pertama kali pada pertengahan tahun 1995 yang lalu. Bayi yang kelak sempat menjadi premier browser tersebut diasuh oleh seorang ibu muda yang enerjik bernama Windows 95 yang pada akhirnya menjadi premier system operasi juga. Ibu muda ini sangat bangga dengan kemunculan sang bayi, sehingga nama Internet Explorer dengan gagahnya dipasang di startup screen Windows 95 tersebut.

Pada tahun ke enam, tepatnya 2001 Internet Explorer telah mencapai versinya yang ke-6, tentu saja ibu asuhnya yang pertama sudah mati dan digantikan oleh Windows XP yang berparas cantik. Namun sayangnya Internet Explorer yang sudah beranjak dewasa tersebut sepertinya tidak mendapat perhatian lagi dari si induk padahal saat itu pasar sedang membutuhkan browser yang cepat dengan kompatibilitas tinggi.

Pada situasi ini lah, Dave Hyat, seorang programmer Amerika Serikat meneruskan project Mozilla dan melahirkan sebuah Mozilla Firefox versi pertama yang kemudian dengan mudah menggoyahkan posisi Internet Explorer. Dengan adanya fitur-fitur baru yang sebelumnya tidak terdapat di Internet Explorer, tingkat kecepatan dan keamanan yang lebih baik, browser ini mampu memikat banyak penggunanya. Bahkan kelahiran Internet Explorer 7 pun sepertinya tidak begitu mempengaruhi ketenaran Firefox.

Posting ini terinspirasi ketika tadi pagi seorang client di warnet menanyakan keberadaan Internet Explorer di komputer yang dia pakai yang kemudian aku menyarankan untuk menggunakan Mozilla Firefox. Sepertinya dia pelanggan baru, karena sudah sejak sekitar 4 bulan yang lalu warnet kami mulai mengurangi penggunaan Internet Explorer dengan menguninstalnya.

Bukan hanya itu sih, tapi yang lebih menggugah aku untuk memposting ini adalah kisah tragisku bersama Internet Explorer selama dua hari belakangan ini. Ya, aku harus menghabiskan extra waktu ketika membuat layout website, dimana Internet Explorer sangat susah diajak kerjasama. :(

< Sialan, posting ini dah ter-overwrite dengan draft yang sebelumnya :( (>

]]> http://takien.com/221/internet-explorer-sepertinya-kita-harus-berpisah.php/feed 15 Mengaktifkan Mod Rewrite di XAMPPhttp://takien.com/216/mengaktifkan-mod-rewrite-di-xampp.php http://takien.com/216/mengaktifkan-mod-rewrite-di-xampp.php#comments Mon, 07 Jan 2008 18:26:33 +0000 dari situskamu.com http://takien.com/mengaktifkan-mod-rewrite-di-xampp/ XAMPP LogoXAMPP adalah webserver opensource yang biasa aku pakai saat ini selain Appserver. Salah satu kelebihan xammpp adalah portabilitasnya alias mudah dibawa kemana-mana tanpa diinstal. Tapi yang akan aku bahas disini adalah mengaktifkan mod rewrite di xampp. Untuk mengaktifkan mod rewrite apache di xampp tidak terlalu sulit, yang perlu dilakukan hanyalah mengedit file httpd.conf

Langkah-langkahnya:

  1. Buka file httpd.conf yang berlokasi di xampp\apache\conf\httpd.conf menggunakan text editor tradisional seperti notepad.
  2. Hilangkan tanda komentar ( # ) sebelum baris berikut:
    #LoadModule rewrite_module modules/mod_rewrite.so

    Sehingga menjadi:

    LoadModule rewrite_module modules/mod_rewrite.so
  3. Edit baris berikut:
    AllowOverride None

    Menjadi:

    AllowOverride All
  4. Restart Apache, Selesai

:)

Incoming search terms:

]]> http://takien.com/216/mengaktifkan-mod-rewrite-di-xampp.php/feed 5 Readme.txthttp://takien.com/9/readmetxt.php http://takien.com/9/readmetxt.php#comments Thu, 22 Nov 2007 14:17:54 +0000 dari situskamu.com http://takien.com/readmetxt/ #Sitename: Situs Kamu Situs Aku Juga
#Site Category: Blog
#URL: http://takien.com
#Date Created: 11/22/2007
#Owner: Takien
#Website: http://www.situskamu.com/
===================

#Introduction

Selamat datang di blog aku yang tidak seberapa pantas ini.
Semoga anda akan cepat-cepat meninggalkan blog ini untuk kemudian mengunjunginya lagi di kemudian hari. Itu akan lebih baik daripada anda berlama-lama disini dan setelah itu tidak akan pernah balik lagi.

#Disclaimer:

Bilamana anda mendapatkan adanya repost (tulisan perulangan) dijumpai di blog ini bukanlah karena kebetulan belaka namun karena unsur kesengajaan.

]]> http://takien.com/9/readmetxt.php/feed 1 Merubah Register Global On dengan .htaccess?http://takien.com/7/merubah-register-global-on-dengan-htaccess.php http://takien.com/7/merubah-register-global-on-dengan-htaccess.php#comments Mon, 12 Nov 2007 04:22:47 +0000 dari situskamu.com http://takien.com/merubah-register-global-on-dengan-htaccess/ Beberapa script CMS ada yang mengharuskan kita mengeset Register Global ke posisi On. Namun, karena alasan security, sebagian besar webhosting telah mengeset register global Off, meskipun kita masih bisa mengeditnya dari file php.ini (pada baris, register_globals=on) tapi ada beberapa hosting yang tidak mengizinkan kita mengedit file tersebut.

Untuk mengatasinya kita bisa memasukkan parameter tertentu di file .htaccess (biasa terdapat di root folder situs). Pada file .htaccess tersebut tambahkan baris berikut:

php_flag register_globals on

Trik ini tidak boleh terapkan di server yang menjalankan phpsuexec kecuali anda mau menerima bonus sebesar Rp. 500,- setiap membuka situs. (Maksudnya 500 Internal Server Error :) )

Incoming search terms:

]]> http://takien.com/7/merubah-register-global-on-dengan-htaccess.php/feed 4 Banner baru buat situs baru…http://takien.com/8/banner-baru-buat-situs-baru.php http://takien.com/8/banner-baru-buat-situs-baru.php#comments Sun, 28 Oct 2007 11:09:07 +0000 dari situskamu.com http://takien.com/banner-baru-buat-situs-baru/ Seperti biasa --walaupun kadang tidak-- begitu buat situs baru, aku juga membuatkan banner untuknya..
Kali ini situsnya agak lain, yaitu situs direktori, web direktori tepatnya.
Sebenernya domain situs ini udah kubeli sejak bulan 6 yang lalu (Juni 2007)... tapi karena sibuk ngurusin sana sini yah jadinya domain ini terlantar tar tar... Lagian juga belom ada ide desain yang cocok sih.. hehehee...

Yah, tiba-tiba beberapa hari yang lalu dapat ide buat kategori dan membuat theme nya, yaps... seperti biasa --walaupun kadang tidak-- pilihan pertama tetep pada warna biru.. hehehhee..
Nah, seperti biasa juga --walaupun kadang tidak-- begitu dapat ide langsung deh kukerjakan buat theme nya, dan seperti biasa juga --walaupun kadang tidak-- kalau lagi hot gitu (maksudnya lagi semangat), buat apappun jadi lebih mudah alias bisa kelar dalam satu malam.. meskipun besoknya badan jadi tambah kurus.. wwkkakwakkwaakka..

Lho, katanya mau cerita tentang banner, kok malah tentang websitenya sih. gimana sih loe..
eh. iya yah.. keterusan, maklum lah gak ada outline, kan kata penulis senior kalau mau buat tulisan kudu bikin outline dulu terutama untuk penulis newbie. Biar arah pembicaraan gak berceceran kemana-mana kayak gini.
Ah, siapa peduli, ini blog pribadi kok, not for publick (kecuali bagi yang udah tau, atau sengaja dikasi tau)... heheh..

Tuh kan, dah ngelantur lagih.. :(
Ya udah deh.. kembali ke masalah banner, kurang lebih dua malam sebelum ini aku ngerjainnya..
sambil chating ama bro rizky yang lagi ngutak-atik indodisain (bukan promosi)...
Jadinya kyk begini neh:

The

Kira2 apa yah arti dari banner tersebut aku sendiri gak tau, yang penting gitu deh...
File tersimpan dengan ukuran 26kb, terlalu besar untuk ukuran banner.
Setelah ku optimize jadi 20kb, :( masih terlalu besar..
Mau di kurangin warnanya lagi malah gambar logo LD nya jadi pecah..
hahaha.. salah tadi yah.. mau nya logo LD nya gak usah terlalu banyak warna gitu...
tapi gpp deh, lain kali kalau buat lagi...

Makasih dah baca, gak maksa kok. :)

Incoming search terms:

]]> http://takien.com/8/banner-baru-buat-situs-baru.php/feed 0 Aha.. situsku udah pagerank 2 ajah neh…http://takien.com/180/aha-situsku-udah-pagerank-2-ajah-neh.php http://takien.com/180/aha-situsku-udah-pagerank-2-ajah-neh.php#comments Sat, 27 Oct 2007 15:30:05 +0000 dari situskamu.com http://takien.com/aha-situsku-udah-pagerank-2-ajah-neh/ Hii.. tadi siang iseng iseng checking page rank situs aku warnetforum.com
Beuh.. ternyata agak kaget.. kok udah pagerank 2 ajah..
padahal kemarin-kemarin 0 pun tidak, alisa N/A. not available...
wih.. barangkali google lupa tuh.. atau emang situsku dah banyak visitornya yah...
gak tau juga sih..

Karena masih penasaran....
akhirnya aku lakukan live chat ym dengan staff google yang ngurusin page rank...
berikut hasil kutipannya:

=====================
imissu 4ever: bro...
google_support: yups..
imissu 4ever: wf ku kok dah pr2 aja neh..
google_support: trus?
imissu 4ever: heran aja, kemarin2 kan gak
google_support: lagi mau buat kezutan khusus buat admin wf..
google_support: karena admin wf kan orang baik ^_^
imissu 4ever: masa sih?
google_support: yoi...
===========================
:D
Huehueheue..
lucu yah.. ternyata googlenya lagi ngerjain....
jadi naikin page rank seenaknya..

iih jadi malu..

]]> http://takien.com/180/aha-situsku-udah-pagerank-2-ajah-neh.php/feed 4 Hard Refreshhttp://takien.com/464/hard-refresh.php http://takien.com/464/hard-refresh.php#comments Wed, 24 Oct 2007 06:53:00 +0000 takien http://takien.com/hard-refresh/ Sometime you have to 'hard refresh' the browser to view new changes in your website contents. Holding Ctrl key at the same time you hit the Refresh button or when pressing F5. Works on all browsers.

Incoming search terms:

]]> http://takien.com/464/hard-refresh.php/feed 2