Kali ini, Cheyuz bakal ngasi trik buat temen-temen semua Sangat sangat banyak trik buat bikin shadow (bayangan untuk CSS), ada yang memakai image yang dikasi shadow di image editor seperti photoshop, ada yang dibuat image warna hitam transparan dan ditempel di CSS, dan lain-lain…

Sekarang Cheyuz mau ngasi trik buat kalian, khususnya web designer yang sering bergelut dengan styling di CSS, memainkan layout dan style buat tombol, form, notifikasi, dan lain-lain….. OK, kita mulai aja…

Yang kita tahu, kebanyakan teknik untuk membuat shadow/bayangan adalah dengan menggunakan image… atau image yang diedit dengan image editor.. biasanya sih bertipe PNG… tapi kali ini kita akan membuatnya pure elemen html yang dipadu dengna CSS, tanpa image!

Sebenernya sih CSS 3 udah ada properti buat bikin shadow, namanya -moz-box-shadow, tapi berhubung belum support di semua browser, jadi pikir-pikir dulu sebelum menggunakan CSS 3…

.shadow {
  margin-top:30px;
  margin-left:10px;
  width:300px;
  background:#eeeeee;
  color:#444;
  border:1px solid #DEDEDE;
  -moz-box-shadow: 5px 5px 5px #ccc;
  padding: 5px 20px 5px 20px;
}

Hasilnya sangat bagus banget, tetapi ada kekurangannya… berhubung masih baru, maka fitur CSS 3 ini belum support di semua browser (coba sekarang liat blog ini pake IE/FF 3.0, pasti ga bakal ada bayangannya )

Kalo kita ingin membuat shadow box tersebut pake CSS2, pasti harus menggunakan image, soalnya di sana terlihat bahwa ada gradasi, kalo pake CSS2 itu tuh adalah image..

Untuk membuat shadow tanpa image di CSS2, div yang kita gunakan nggak 1, tapi ada div lagi di dalam div tertentu…
Contohnya html berikut, membuat suatu tulisan yang berada di dalam box, kemudian dibikin bayangan (shadow)nya kayak yang di atas…

<div class="shadow2">
<div>ini adalah div dengan class = "shadow2"</div>
</div>

Ini CSSnya:

.shadow2{
    display: table;
    background: #ccc;
}
.shadow2 div{
    padding: 10px;
    display: block;
    border: 1px solid #ccc;
    background: #fff;
    margin: -3px 3px 3px -3px;
}

Maka hasilnya bakal kayak gini…

Kalo dipake buat gambar, misal html kayak gini:

<div class="shadow2">
<div><img src="http://www.cheyuz.com/images/link1.jpg" /></div>
</div>

maka hasilnya adalah kayak gini:

Contoh lain:

Sebenernya masih banyak alternatif lain selain pake teknik ini, tetapi menurutku cara ini yang paling efektif, karena ga pake image dan cara membuatnya sangat sederhana…

Guys, kali ini Cheyuz bakal ngebahas tentang FW (Framework) PHP… Mungkin ini bermanfaat buat temen-temen semua (khususnya ilkom [ilmu komputer] yang sejurusan, bahkan sekelas denganku di kampus… …

Waktu itu kita udah sedikit ngebahas ttg CodeIgniter, walopun blm secara detail dijelasin CodeIgniter (selanjutnya CI) itu apa…

CodeIgniter (CI) adalah salah satu framework PHP yang cukup populer, bahkan bisa sangat populer karena sering dipakai di kalangan perusahaan IT dalam bidang pengembangan Web (Web Development). Tetapi sebelumnya, apa itu PHP Framework? Gampangnya framework adalah kumpulan fungsi-fungsi dan class untuk tujuan tertentu yang sudah siap pakai sehingga bisa lebih mempermudah pekerjaan pemrograman, tanpa harus reinvent wheel. Untuk lebih lengkapnya anda bisa membacanya di wikipedia atau situs lain yang sejenis (googling aja ).

Nah, kenapa kita harus memakai FW??

• Mempercepat dan mempermudah pembangunan sebuah aplikasi PHP
• Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah framework (dengan syarat programmer mengikuti pola standar yang ada)
• Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal (misalnya validasi, ORM, pagination, multiple database, scaffolding, pengaturan session, error handling, dll
• Lebih bebas dalam pengembangan jika dibandingkan CMS

Nah, framework yang populer dan sering dipakai di lapangan salah dua-nya adalah CodeIgniter dan CakePHP. Tetapi kalian tau ga keunggulan dan kelebihan kedua framework ini? ok, kita bahas di sini…

Kalo kalian baca dokumentasi dan bahkan memakai CI, maka terlihat keunggulan CI ini adalah sebagai berikut…\

Kelebihan CI

• Performa sangat cepat : salah satu alasan tidak menggunakan framework adalah karena eksekusinya yang lebih lambat daripada PHP from the scracth, tapi Codeigniter sangat cepat bahkan mungkin bisa dibilang codeigniter merupakan framework yang paling cepat dibanding framework yang lain.
• Mendukung PHP4 dan PHP5
• Konfigurasi yang sangat minim (nearly zero configuration) : tentu saja untuk menyesuaikan dengan database dan keleluasaan routing tetap diizinkan melakukan konfigurasi dengan mengubah beberapa file konfigurasi seperti database.php atau autoload.php, namun untuk menggunakan codeigniter dengan setting standard, anda hanya perlu merubah sedikit saja file pada folder config.
• Dokumentasi yang sangat lengkap : Setiap paket instalasi codeigniter sudah disertai user guide yang sangat bagus dan lengkap untuk dijadikan permulaan, bahasanya pun mudah dipahami bahkan untuk Cheyuz yang bahasa inggrisnya kurang baik, semoga saja kedepan ada yang mau menerjemahkannya ke bahasa Indonesia. Ditambah lagi oficial video tutorial membuat blog dalam 20 menit yang disediakan di situsnya, untuk mengaksesnya anda bisa menggunakan quick time atau bisa juga mendownload video yang sudah diupload pada youtube.com seperti yang pernah Cheyuz jelaskan di tips belajar pemrograman melalui youtube.com.
• Mudah dipelajari : Mungkin pengaruh dokumentasi yang bagus sehingga codeigniter mudah untuk dipelajari, atau memang framework ini benar-benar mudah dipelajari. Sebelumnya Cheyuz pernah mencoba-coba mempelajari Zend, Symfony, dan Prado, tiga framework yang memang lebih powerfull daripada codeigniter, tapi juga lebih sulit untuk dipelajari. Inilah alasan terkuat Cheyuz jatuh cinta pada codeigniter.
• Compatible dengan banyak hosting : tidak seperti kebanyakan framework lain yang hanya bisa berjalan di PHP 5, codeigniter bisa berjalan dengan lancar pada PHP 4, meskipun ini saat ini sudah banyak hosting yang menggunakan PHP 5 tapi Cheyuz pernah mendapati ada beberapa yang masih menggunakan PHP 4. Juga codeigniter tidak menggunakan PEAR atau tool CLI lainnya, sehingga memberi keleluasaan bagi anda yang tidak mempunyai akses ke shell pada hosting anda.

Nah, ini kelebihan dan kekurangan CakePHP:

Kelebihan:

• Dukungan terhadap AJAX, ORM, library AJAX di dalam CakePHP sudah disediakan, kita tinggal memakainya aja…
• Automagic function, seperti adanya validasi input, dll, yang mempercepat coding. Seperti helper untuk form, membuat form dengan menggunakan helper dari CakePHP (yang menurut Cheyuz lebih bagus dari helper CI) sangat berguna buat kita yang sering bekerja dengan banyak form. Banyak contoh lainnya…
• Mendukung PHP4 dan PHP5
• Lebih mencerminkan MVC yang sesungguhnya dibandingkan CI
• Komunitas pengguna yang besar dan forum cukup baik

Kekurangan:

• Manual yang ada tidak selengkap CI. Ini merupakan salah satu kekurangan CakePHP, oleh karena itu CakePHP mungkin bisa dipelajari lebih lama daripada CI.
• Terlalu banyak aturan, dan tidak sefleksibel CI, seperti nama table harus plural, nama controller harus sama dengan nama folder untuk view… nama view harus sama dengan nama action, dan lain2…
• Butuh waktu belajar yang lebih lama untuk menguasai framework ini dibanding CI. Tapi jika sudah benar-benar mengerti, banyak kelebihan dibanding CI. Beberapa situs menyarankan anda untuk belajar dan terbiasa dulu dengan CodeIgniter baru kemudian mempelajari CakePHP
• (http://www.zenperfect.com/2007/07/15/faceoff-codeigniter-vs-cakephp/)

Selebihnya sih terserah temen2 semua mau belajar yang mana aja… tapi saran Cheyuz, pelajarilah CI lebih dulu, yang menurut Cheyuz relatif lebih mudah dan fleksibel dibandingkan CakePHP, hehe… Tapi itu sih tergantung website seperti apa yang akan dibuat…

- Dari berbagai sumber -

Pemahaman di dalam CSS sangat penting diketahui khususnya buat kalian sebagai web designer yang sering bergelut dalam masalah mengatur layout, tata letak, peletakan suatu elemen di halaman web dan lain-lain…

Beberapa properti yang berperan banyak dalam CSS untuk masalah layout antara lain:

• Position
• Float
• Margin
• Padding
• Position
• Top, Left, Right, Bottom
• Display

Mungkin ada beberapa properti lainnya, yaa secara umum seperti yang disebutin di atas lah .

Nah, kali ini Cheyuz mw ngejelasin tentang position pada CSS…
Selain Float, Position juga sangat berperan penting buat layout, terutama layout yang mempunyai banyak embel-embel ga penting (peace ) di dalamnya, misalnya ketika gambar ketika dihover keluar tooltip, gambar berbingkai, membuat taskbar, dan lain-lain…

OK, kita jelasin atu atu ye…

position: static

Position static adalah position default suatu elemen, bisa disebut statis (?) maksudnya dia diam, tata letak normal seperti div biasa, dan pada posisi initop, left, right, dan  bottom tidak mempengaruhi posisi elemen tersebut,  contohnya:

#wrap{
    width:150px;
    background:black;
    height:75px;
}
.pertama {
    width:55px;
    background:gray;
    position:static;
    top:20px;
    left:20px;
}
.kedua{
    width:55px;
    background:red;
    top:100px;
    left:100px;
    clear:both;
}

Penjelasan:

position: relative

Nah, ini dia position yang sering digunakan pada seorang web designer… kalo pake position ini, kamu bisa memanfaatkan left dan top buat ngubah posisi tersebut.. tetapi perlu diingat, sifat position:relative ini adalah dia bakal pindah kalo kita beri nilai top atau left, tetapi relative terhadap dirinya sendiri… (pusing?) kasi contoh daah…

#wrap{
    width:150px;
    background:black;
    height:75px;
}
.pertama{
    width:55px;
    background:gray;
    position:static;
    top:10px;
    left:15px;
    position:relative;
}
.kedua{
    position:relative;
    width:55px;
    background:red;
    top:15px;
    left:5px;
    clear:both;
}

Penjelasan

position: absolute

Kalo kita menggunakan position ini, kita bisa mengatur left, top, right, dan bottom sesuai dengan parent yang mempunyai position relative… jadi elemen yang pake position absolute ini bisa diatur posisinya tergantung parent maupun screen browser.. Contoh CSSnya sperti brikut:

#wrap{
    width:150px;
    background:black;
    height:200px;
    position:relative;
}
.ketiga {
    position:absolute;
    background:red;
    width:100px;
    bottom:0px;
    left:15px;
}

position: absolute (terhadap layar)

Kalo kita pake position absolute terhadap layar, maka parent dari div ini jangan memakai position yang “relative”, tetapi statis.. supaya tidak absolute terhadap parent, tapi terhadap layar… contohnya seperti gambar kotak di sudut kanan atas, coba dilihat, hehe….
CSS nya seperti ini:

.kotak {
    position:absolute;
    background:red;
    width:100px;
    height:100px;
    right:0px;
    top:50px;
}

Penjelasan

position: fixed

Naah klo yang ini baru beda sama yang lain… yaa sebenernya sama sih.. , lebih mirip ke position:absolute.. sama seperti position absolute yang berdasarkan screen browser, tetapi bedanya, state/letak si kotak bakal tetep berada di posisi screen sebelumnya, walaupun browser discroll… contohnya lihat gambar kotak warna hitam di sebelah kanan, dan contoh lain adalah taskbar di bawah

.kotak_fixed {
    position:fixed;
    background:red;
    width:100px;
    height:100px;
    right:0px;
    top:250px;
    color:white;
}

Penjelasan

Nah, paling itu aja temen2 pembahasannya…
teori-teori yang lain tentang CSS juga bakal disampein lagi…

Pokoknya sekarang kita fokus ke web developing.. jadi mulai dari CSS, Javascript, PHP, hingga framework pun bakal dibahas di blog ini…

Mudah-mudahan bermanfaat buat kita sebagai web developing…

Kali ini, Cheyuz bakal ngasi tips buat temen2 semua pengguna Code Igniter (CI), berhubung aku sekarang lagi ngulik Framework ini, hehe… yaa sekedar berbagi pengalaman lah..

Perlu dicatat bahwa kalo qta make Framework CI ini, kita bakal ngeliat kalo-kalo ternyata CI itu memakai tulisan index.php di URLnya, baru diikuti dengan /controller/action… nah ini merepotkan bagi kita yang suka dengan Pretty URL (URL yang cantik, indah, enak untuk dibaca )..

kalo misalnya ada controller Berita, kemudian nama actionnya add, misal nama situsnya http://www.cheyuz.com maka di URL harus seperti ini:

http://www.cheyuz.com/index.php/berita/add

Nah, biar URL itu lebih enak buat dibaca, mending kita hilangkan index.php nya… jadi seperti ini:

http://www.cheyuz.com/berita/add

Caranya sangat sederhana,, bagi pecinta maupun pengembang framework mungkin udah ga asing lagi memakai cara ini, cara yang dipake untuk ngerewrite URL, kita memakai 1 file yang bernama .htaccess.

Kita buat file .htaccess di notepad:

RewriteEngine on
RewriteRule ^$ index.php [L]
RewriteCond $1 !^(index.php)
RewriteRule ^(.*)$ index.php/$1 [L]

kemudian save file tersebut di webroot/base_url kamu…
sekarang kamu bisa memanggil halaman dengan URL seperti ini:

http://www.cheyuz.com/berita/add

yang pada hakikatnya sama dengan:

http://www.cheyuz.com/index.php/berita/add

TAPII,,,,, ada suatu masalah…
sama seperti waktu kemaren aku nge-rombak http://www.cheyuz.com..

Kan aku nge-rombak situs Cheyuz.com dari asalnya yang ga pake framework yang kini udah pake CI.. Nah pas kemaren itu aku ngupload hasil rombakanku ke hosting.. nah tau-tau pas diupload, ternyata aneh, kenapa ketika aku ketik:

http://www.cheyuz.com/diary

ato yang lainnya ternyata ga bisa kebuka, yang keluar tampilan home terus…
Tetapi kalo URL nya seperti ini bisa…

http://www.cheyuz.com/index.php/diary

Nah, kalo temen2 juga ngalamin hal yang sama, ternyata masalahnya ada config CI sendiri, yaitu dengan memodifikasi config.php:

$config['uri_protocol'] = "AUTO";

Diganti dengan

$config['uri_protocol'] = "REQUEST_URI";

Cuman itu aja masalahnya, gila kemaren aku bingung kok kenapa bisa gini,, eh taunya cuman setting itu aja, hahaha

Mudah2an bermanfaat..

Kamu tau form?

Form adalah salah satu tag HTML yang dipakai untuk penempatan input-input yang akan diisikan oleh user untuk dieksekusi selanjutnya. Nah, bagi seorang web developer istilah form pasti udah ga asing lagi, soalnya semua data yang akan dimasukkan ke dalam database, pasti bakal via form ini.

Tapi, apakah kalian tau gimana cara bikin form yang efektif? maksud efektif di sini adalah supaya kita gak kesulitan pas membuat style buat form itu.

Nah, seperti yg udah diketahui, tag form adalah sebagai berikut:

<form action="register.php" method="post">
  ...
</form>

Buat sebagian orang, mengatur form supaya rapi, tata letaknya teratur, mereka menggunakan table sebagai tempat nempatin elemen input yang ada di form, contohnya kayak gini:

<form action="register.php" method="post">
    <table>
        <tr>
            <td><label for="nama_lengkap">Nama Lengkap</label></td>
            <td><input id="nama_lengkap" type="text" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><input id="nama_lengkap" type="text" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><textarea id="nama_lengkap"></textarea</td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="kirim" /></td>
        </tr>
    </table>
</form>

Hmm… sebenernya cara di atas itu tidak salah sih, cuman menurutku cara kayak gitu tuh sangat merepotkan, soalnya kita harus bikin table sebagai pemampang elemen inputnya, dan itu sangat cape menurutku… banyak alasan kalo cara itu ga efektif, contoh lain adalah di saat di mana kita bikin suatu fungsi maupun class (bukan CSS) di PHP dan kita akan merender setiap elemen form secara independen, maksudnya berdiri sendiri, tanpa bantuan tag table sebelum elemen dan di akhir elemen input…

Lagian kan semua tag [input] di html ada berbagai macam, ada buat text, textarea, submit, combobox, dsb… nah berarti kalo kita bikin style CSSnya kita harus memberikan class di setiap elemen, soalnya ga bisa klo kita membuat style untuk semua tag [input], jadi setiap elemen [input] harus dikasih class…

Sekarang kita langsung coba mengimplementasikan struktur html kayak di atas klo qta bikin style buat CSSnya… gimana caranya? pasti bakal kayak gini:

<form action="register.php" method="post">
    <table>
        <tr>
            <td><label for="nama_lengkap">Nama Lengkap</label></td>
            <td><input id="nama_lengkap" type="text" class="textfield" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><input id="nama_lengkap" type="text" class="textfield" /></td>
        </tr>
        <tr>
            <td><label for="nama_panggilan">Nama Panggilan</label></td>
            <td><textarea id="nama_lengkap" class="textarea"></textarea</td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="kirim" class="button" /></td>
        </tr>
    </table>
</form>

Ada cara yang lebih efektif, dan berdiri sendiri, maksudnya kita bakal bikin setiap baris input tanpa menggunakan awalan [table] dan akhiran [/table] dan tidak memberikan class di setiap elemen, juga ga ngeborosin tag (kayak tr td)… di sini kita akan menggunakan div… menurut Cheyuz ini yang paling efektif… (gak tau menurut kalian )

<form action="register.php" method="post">
    <div class="input text">
        <label for="nama_lengkap">Nama Lengkap</label>
        <input id="nama_lengkap" type="text" />
    </div>
    <div class="input text">
        <label for="nama_panggilan">Nama Panggilan</label>
        <input id="nama_panggilan" type="text" />
    </div>
    <div class="input textarea">
        <label for="nama_panggilan">Nama Panggilan</label>
        <textarea id="nama_panggilan"></textarea>
    </div>
    <div class="input submit">
        <input type="submit" value="kirim" />
    </div>
</form>

Sekarang, ayo kita bandingkan hasil keduanya kalo ga pake CSS:

Memakai Form

Memakai Div (efektif)

Gimana gimana??? loh loh kok tampilan form yang kedua (memakai div) malah ancur???

Hehe… tenang, itu adalah murni sebelum dikasi css… sekarang coba kita lihat klo udah pake css…

Ini style yang pake Table

Ini style yang pake Div

Gimana? hasilnya sama kan? hmm sebenernya sama… cuman di sini kita bakal ngeliat pengaruhnya kalo kita bikin pake framework misalnya… dan hasil dari render elemen inputan cakephp juga kayak gini lho… satu elemen input dengan ngerender 1 inputan… kalo contoh hasil render kayak gini lebih efektif:

        <div class="input text">
            <label for="nama_lengkap">Nama Lengkap</label>
            <input id="nama_lengkap" type="text" />
        </div>

dibanding yang ini:

            <tr>
                <td><label for="nama_lengkap">Nama Lengkap</label></td>
                <td><input id="nama_lengkap" type="text" class="textfield" /></td>
            </tr>

Soalnya untuk yang pake table harus diawali dengan [table] dan diakhiri dengan [/table]..

Oia lupa, ni CSS buat form yang tadi di atas, silakan dipelajari, dan lihat mudah yang mana :

CSS untuk form table

        form{
            background: #eee;
            padding: 5px;
        }
        form table{
            border-spacing: 0;
        }
        form tr{
            background: #dfebff;
            padding: 5px;
        }
        form tr:hover{
            background: #eef4ff;
        }
        form td{
            padding: 5px;
        }
        form label{
            font-weight: 900;
            cursor: pointer;
        }
        form .textfield{
            padding: 5px;
            border: 1px solid #ccc;
        }
        form .textfield:hover{
            border: 1px solid #000;
        }
        form .textfield:focus{
            border: 1px solid #f00;
        }
        form .button{
            background: #b0d0ff;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        form .button:hover{
            background: #b7efaa;
        }

CSS untuk form div

        form{
            background: #eee;
            padding: 5px;
        }
        form div.input{
            background: #dfebff;
            padding: 5px;
        }
        form div.input:hover{
            background: #eef4ff;
        }
        form div.text input:hover{
            border: 1px solid #000;
        }
        form div.text input:focus{
            border: 1px solid #f00;
        }
        form div.input label{
            float: left;
            width: 120px;
            font-weight: 900;
            cursor: pointer;
        }
        form div.input label:hover{
            color: #f00;
        }
        form div.text input{
            padding: 5px;
            border: 1px solid #ccc;
        }
        form div.submit input{
            background: #b0d0ff;
            border: 1px solid #ccc;
            cursor: pointer;
            margin-left: 125px;
        }
        form div.submit input:hover{
            background: #b7efaa;
        }

Siapa yang ulang tahun hari ini??

Temen2 biasa ngucapinnya dalam bahasa apa?
Indonesia-kah? Inggris-kah? ato bahkan bahasa Sunda?

Kali ini Cheyuz bakal ngebuat daftar ucapan “selamat ulang tahun” dalam berbagai bahasa, OK kita langsung ke TKP…

Afrikaans : Veels geluk met jou verjaarsdag!
Albanian : Urime ditelindjen!
Alsatian : Gueter geburtsdaa!
Amharic : Melkam lidet!
Arabic : Eid milaad saeed! or Kul sana wa inta/i tayeb/a! (masculine/feminine)
Armenian :Taredartzet shnorhavor! or Tsenund shnorhavor!
Assyrian : Eida D’moladukh Hawee Brikha!
Austrian-Viennese : Ois guade winsch i dia zum Gbuadsdog!
Aymara (Bolivia) : Suma Urupnaya Cchuru Uromankja!
Azerbaijani : Ad gununuz mubarek! for people older than you Ad gunun mubarek! for people younger than you
Basque : Zorionak!
Belauan-Micronesian : Ungil el cherellem!
Bengali (Bangladesh/India) : Shuvo Jonmodin!
Bicol (Philippines) : Maogmang Pagkamundag!
Bislama (Vanuatu) : Hapi betde! or Yumi selebretem de blong bon blong yu!
Brazil : ParabŽns a voc?! ,
ParabŽns a voc?, nesta data querida muitas felicidades e muitos anos de vida.
Breton : Deiz-ha-bloaz laouen deoc’h!
Bulgarian : Chestit Rojden Den!
Cambodian : Som owie nek mein aryouk yrinyu!
Catalan : Per molts anys! or Bon aniversari! or Moltes Felicitats!
Chamorro : Biba Kumplianos!
Chinese-Cantonese : Sun Yat Fai Lok!
Chinese Fuzhou : San Ni Kuai Lo!
Chiness-Hakka : Sang Ngit Fai Lok!
Chinese-Mandarin : qu ni sheng er kuai le
Chinese-Shanghaiese : San ruit kua lok!
Chinese-Tiociu : Se Jit khuai lak!
Chronia Polla : NA ZHSHS
Croatian : Sretan Rodendan!
Czech : Vsechno nejlepsi k Tvym narozeninam!!
Danish : Tillykke med fodselsdagen!
Dutch-Antwerps : Ne gelukkege verjoardach!
Dutch-Bilzers : Ne geleukkege verjoardoag!
Dutch-Drents : Fellisiteert!
Dutch-Flemish : Gelukkige verjaardag! or Prettige verjaardag!
Dutch-Frisian : Fan herte lokwinske!
Dutch-Limburgs : Proficiat! or Perfisia!
Dutch-Spouwers : Ne geleukkege verjeurdoag!
Dutch-Twents : Gefeliciteard met oen’n verjoardag!
Dutch : Hartelijk gefeliciteerd! or Van harte gefeliciteerd met je verjaardag!
English : Happy Birthday!
Esperanto : Felichan Naskightagon!
Estonian : Palju onne sunnipaevaks!
Euskera : Zorionak zure urtebetetze egunean!
Faroes ( Faroe island ) : Tillukku vid fodingardegnum!
Farsi : Tavalodet Mobarak!
Finnish : Hyvaa syntymapaivaa!
French (Canada) : Bonne Fete!
French : Joyeux Anniversaire!
Frisian : Lokkiche jierdei!
Gaelic (Irish) : L‡ breithe mhaith agat!
Gaelic (Scottish) : Co` latha breith sona dhuibh!
Galician (Spain) : Ledicia no teu cumpreanos!
Georgian : Gilotcav dabadebis dges!
German-Badisch : Allis Guedi zu dim Fescht!
German-Bavarian : Ois Guade zu Deim Geburdstog!
German-Berlinisch : Allet Jute ooch zum Jeburtstach! or Ick wuensch da allet Jute zum Jeburtstach!
German-Bernese : Es Muentschi zum Geburri!
German-Camelottisch : Ewllews Gewtew zewm Gewbewrtstewg. Mew!
German-Frankonian : Allmecht! Iich wuensch Dir aan guuadn Gebuardsdooch!
German-Lichtenstein : Haerzliche Glueckwuensche zum Geburtstag!
German-Moselfraenkisch : Haezzlische Glickwunsch zem Gebordsdach!
German-Plattdeutsch : Ick wuensch Di allns Gode ton Geburtsdach!
German-Rhoihessisch :Ich gratelier Dir aach zum Geburtstag!
German-Ruhr : Allet Gute zum Gebuatstach!
German-Saarlaendisch : Alles Gudde for dei Gebordsdaach!
German-Saechsisch : Herzlischen Gliggwunsch zum Geburdsdaach!
German-Schwaebisch : Aelles Guade zom Gebordzdag!
German-Wienerisch : Ois Guade zum Geburdsdog!
German : Alles Gute zum Geburtstag!
Greek : Eytyxismena Genethlia! or Chronia Pola!
Greenlandic : Inuuinni pilluarit!
Gronings (Netherlands): Fielsteerd mit joen verjoardag!
Gujarati (India) : Janma Divas Mubarak!
Gujrati (Pakistan) : Saal Mubarak!
Guarani (Paraguay Indian)] : Vy-Apave Nde Arambotyre!
Hawaiian : Hau`oli la hanau!
Hebrew : Yom Huledet Same’ach!
Hiligaynon (Philippines) : Masadya gid nga adlaw sa imo pagkatawo!
Hindi (India) : Janam Din ki badhai! or Janam Din ki shubkamnaayein!
Hungarian : Boldog szuletesnapot! or Isten eltessen!
Icelandic : Til hamingju med afmaelisdaginn!
Indonesian : Selamat Ulang Tahun!
Irish-gaelic : La-breithe mhaith agat! or Co` latha breith sona dhut! Or Breithla Shona Dhuit!
Italian : Buon Compleanno!
Italian (Piedmont) : Bun Cumpleani!
Italian (Romagna) :At faz tent avguri ad bon cumplean!
Japanese : Otanjou-bi Omedetou Gozaimasu! Javaans-Indonesia : Slamet Ulang Taunmoe!
Jerriais : Bouon Anniversaithe!
Kannada (India) : Huttida Habba Subashayagalu!
Kapangpangan (Philippines) : Mayap a Kebaitan
Kashmiri (India) : Voharvod Mubarak Chuy!
Kazakh (Kazakstan) : Tughan kuninmen!
Klingon : Quchjaj qoSlIj!
Korean : Saeng il chuk ha ham ni da!
Kurdish : Rojbun a te piroz be!
Kyrgyz : Tulgan kunum menen!
Latin : Fortuna dies natalis!
Latvian : Daudz laimes dzimsanas diena!
Lithuanian : Sveikinu su gimtadieniu! or Geriausi linkejimaigimtadienio progal
Luganda : Nkwagaliza amazalibwa go amalungi!
Luxembourgeois : Vill Gleck fir daei Geburtsdaag!
Macedonian : Sreken roden den!
Malayalam (India) : Pirannal Aasamsakal! or Janmadinasamsakal!
Malaysian : Selamat Hari Jadi!
Maltese : Nifrahlek ghal gheluq sninek!
Maori : Kia huritau ki a koe!
Marathi(India) : Wadhdiwasachya Shubhechha!
Mauritian Kreol : mo swet u en bonlaniverser!
Mbula (Umboi Island, Papua New Guinea) : Leleng ambai pa mbeng ku taipet i!
Mongolian : Torson odriin mend hurgee!
Navajo : bil hoozho bi’dizhchi-neeji’ ‘aneilkaah!
Niederdeutsch (North Germany) : Ick gratuleer di scheun!
Nepali : Janma dhin ko Subha kamana!
Norwegian : Gratulerer med dagen!
Oriya (India) : Janmadina Abhinandan!
Papiamento (lower Dutch Antilles) : Masha Pabien I hopi aña mas!
Pashto (Afganistan) : Padayish rawaz day unbaraksha!
Persian : Tavalodet Mobarak!
Pinoy (Philippines) : Maligayang kaarawan sa iyo!
Polish : Wszystkiego Najlepszego! or Wszystkiego najlepszego zokazji urodzin! wszystkiego najlepszego z okazji urodzin
Portuguese (Brazil) : Parabens pelo seu aniversario! or Parabenspara voce! or Parabens e muitas felicidades!
Portuguese : Feliz Aniversario! or Parabens!
Punjabi (India) : Janam din diyan wadhayian!
Rajasthani (India) : Janam ghaanth ri badhai, khoob jeeyo!
Romanian : La Multi Ani!
Rosarino Basico (Argentina) : Feneligiz Cunumplegeanagonos!
Russian : S dniom razhdjenia! or Pazdravliayu s dniom razhdjenia!
Sami/Lappish : Lihkos Riegadanbeaivvis!
Samoan Manuia lou aso fanau!
Sanskrit (India) : Ravihi janmadinam aacharati!
Sardinian (Italy) : Achent’annos! Achent’annos!
Schwyzerduetsch (Swiss German) : Vill Glück zum Geburri!
Serbian : Srecan Rodjendan!
Slovak : Vsetko najlepsie k narodeninam!
Slovene : Vse najboljse za rojstni dan!
Sotho : Masego motsatsing la psalo!
Spanish : Feliz Cumplea–os!
Sri Lankan : Suba Upan dinayak vewa!
Sundanese : Wilujeng Tepang Taun!
Surinamese : Mi fresteri ju!
Swahili : Hongera! or Heri ya Siku kuu!
Swedish : Grattis pŒ fšdelsedagen
Syriac : Tahnyotho or brigo!
Tagalog (Philippines) : Maligayang Bati Sa Iyong Kaarawan!
Taiwanese : San leaz quiet lo!
Tamil (India) : Piranda naal vaazhthukkal!
Telugu (India) : Janmadina subha kankshalu!
Telugu : Puttina Roju Shubakanksalu!
Thai : Suk San Wan Keut!
Tibetan : Droonkher Tashi Delek!
Tulu(Karnataka – India) : Putudina dina saukhya!
Turkish : Dogum gunun kutlu olsun!
Ukrainian : Mnohiya lita! or Z dnem narodjennia!
Urdu (India) : Janam Din Mubarak
Urdu (Pakistan) : Saalgirah Mubarak!
Vietnamese : Chuc Mung Sinh Nhat!
Visayan (Philippines) : Malipayong adlaw nga natawhan!
Welsh : Penblwydd Hapus i Chi!
Xhosa (South Afican) : Imini emandi kuwe!
Yiddish : A Freilekhn Gebortstog!
Yoruba (Nigeria) : Eku Ojobi!
Zulu (South Afican) : Ilanga elimndandi kuwe!

Artikel dari DetikInet:

Beberapa dari kita tentu memiliki kebiasaan untuk bekerja berlama-lama  di depan monitor PC, entah untuk bekerja atau melakukan hal lain seperti bermain game dan browsing. Alhasil efek mata lelah dan kepala pening pun tak dapat dihindari.

Walau banyak yang menganggap fakta ini tidak sepenuhnya benar, namun kenyataannya hal ini tetap mempengaruhi kesehatan mata kita. Efeknya terkadang kita sedikit kesulitan untuk memfokuskan objek pandang, dan sebagainya. Hal ini tentunya diakibatkan pancaran radiasi monitor yang terlalu lama saat kita bekerja.

Seperti dikutip detikINET dari softpedia, Senin (14/9/2009) berikut ini adalah beberapa tips menghindari mata lelah, saat berada di depan monitor:

1. Jaga jarak pandang dari monitor

Berada terlalu dekat dengan monitor memang sedikit membahayakan bagi mata kita. Seharusnya kita menjaga jarak pandang ke monitor kita dengan baik. Jarak yang disarankan adalah sekitar 20-40 inchi (50-100cm) dari mata.

Jika kita masih kesulitan membaca padahal monitor sudah berada pada jarak 20 inchi, cobalah untuk memperbesar font kita hingga kita merasa nyaman.

2. Singkirkan CRT, Beralih ke LCD

Monitor tabung (CRT) memang memberi efek yang lebih buruk dibanding LCD, selain energi yang dibutuhkan juga lebih besar. Cobalah mengganti monitor CRT kita dengan LCD.

Namun harga monitor LCD memang lebih mahal dibanding CRT. Bagi kita yang masih menyeyangi monitor CRT, ada baiknya kita membeli filter anti-radiasi. ini adalah solusi untuk mengurangi rasa nyeri mata akibat duduk berlama-lama di depan monitor, namun dengan harga yang murah.

3. Atur monitor setting

Beberapa monitor yang ada sekarang banyak menyediakan pre-set displaybrightnes yang berbeda, untuk menyesuaikan kondisi penggunaan monitor. Adakalanya manfaatkan hal tersebut.

Mode, untuk memudahkan pengguna mengganti setting layar mereka. Pre-set setting tersebut memberi level. Misal settingan seperti, ‘text’ atau ‘internet’ akan terasa lebih sejuk di mata, saat kita gunakan untuk mengetik ataupun browsing. Setingan ‘game’ atau ‘movie’ akan terlihat lebih terang saat digunakan.

4. Gunakan kacamata anti radiasi

Walau hal ini membutuhkan biaya yang relatif lebih mahal, namun ada baiknya saat memiliki cukup uang kita membeli kacamata anti-radiasi. Selain bisa dibawa kemanapun kita bekerja, kacamata ini tak hanya berguna saat kita bekerja di depan monitor, namuna juga melindungi mata dari cahaya lampu mobil, radiasi TV, dan sebagainya.

Faktanya lapisan anti-radiasi pada kacamata tersebut, sangat berguna bagi mata kita. Karena lapisan tersebut secara otomatis mengurangi efek nyeri di mata akibat radiasi cahaya berlebih.

5. Mengistirahatkan mata sejenak, secara berkala

Cara termudah menghindari mata lelah akibat radiasi monitor adalah mengistirahatkannya secara berkala. Cobalah untuk mengistirahatkan mata sekitar 5 menit tiap jamnya. Kita dapat menggunakan waktu 5 menit tersebut untuk berjalan-jalan, melihat pemandangan, mencuci muka dan sebagainya. Yang penting menjauh dari monitor.

Dikutip dari detikInet

Pada postingan yang lalu, kita udah mengenal JQuery dan mengetahui cara bikin fade in dan fade out pada suatu halaman web dengan menggunakan JQuery..

Jika waktu itu kita menggunakan 2 tombol, yaitu tombol tampilkan dan sembunyikan, maka kali ini kita akan menggunakan tombol toggle, yaitu tombol yang berfungsi untuk menangani 2 fungsi tertentu atau lebih. Dengan menggunakan toggle, kasus yang kemarin bisa ‘dihandle’ dengan menggunakan satu tombol toggle aja…

Jangan lupa untuk memanggil terlebih dahulu script Jquery di bagian header, bisa dilihat di link ini: Mengenal JQuery

Pertama-tama, kita bikin dulu sebuah button dengan class tombol (sebenernya ada 2 buah, tetapi tombol yang satu lagi ga keliatan ato hidden), kode html-nya kayak gini:

<body>
    <button class="tombol">Foto 2</button>
    <button class="tombol" style="display:none">Foto 1</button>
</body>

Seperti yang terlihat di atas, ada 2 tombol… dan mempunyai class yang sama, jadi kedua tombol itu akan dijadikan sebuah tombol toggle, yang artinya klo tombol yang pertama diklik, maka tombol yang kedua akan tampil, sedangkan tombol yang pertama akan hilang (hidden), dan begitu sebaliknya.. itu konsep sederhana toggle..

Dan perlu diperhatikan, tombol lain harus diberi style style untuk display yang bernilai ‘none’ yang artinya tidak bisa terlihat..

OK, untuk membuktikan bahwa tombol tersebut bisa dijadikan toggle, tambahkan script berikut sebelum elemen button. Seperti ini:

<body>
    <script>
    $().ready(function(){
        $(".tombol").click(function(){
            $(".tombol").toggle();
        });
    });
    </script>
 
    <button class="tombol">Foto 2</button>
    <button class="tombol" style="display:none">Foto 1</button>
</body>

Jika tombol yang pertama diklik, maka dia akan hidden, sedangkan tombol yang kedua akan muncul, dan sebaliknya.. bila tombol yang kedua muncul dan diklik, maka tombol satu akan muncul, tombol 2 akan hidden… dan seterusnya.

Dan perlu diingat, klo kita ingin 2 elemen dijadikan 1 toggle button, maka yang berperan di jquery/yg dapat dimanipulasi jquery adalah class, bukan id. Jadi kita memberi class ‘tombol’ di masing-masing button. Dan perlu diperhatikan juga, jangan memakai this di objek yang merupakan isi dari fungsi jquery, misal seperti berikut:

    <script>
    $().ready(function(){
        $(".tombol").click(function(){
            $(this).toggle();
        });
    });
    </script>

Kalo temen2 bikin kayak script tersebut, bisa sih bisa cuman ngga ngerubah elemen menjadi tombol yang kedua, yang ada malah jadi hilang keduanya…

Nah, ceritanya si tombol tersebut akan menghandle sebuah foto menjadi foto lain secara bergantian ketika tombol tersebut diklik..
kita tambahkan sebuah gambar di bawah tombol.

<img class="gambar" src="foto.jpg" />

Karena gambar juga akan tampil bergantian dengan gambar lain kalo diklik, maka tambah lagi 1 gambar di bawah foto.jpg.

<img class="gambar" src="foto.jpg" />
<img class="gambar" src="foto2.jpg" style="display:none" />

Tambahkan juga script jquery yang tadi menjadi seperti ini:

<script>
    $().ready(function(){
        $(".tombol").click(function(){
            $(".gambar").toggle('fast');
            $(".tombol").toggle();
        });
    });
</script>

Di situ terlihat ada parameter di fungsi toggle yaitu bernilai ‘fast’, yang berarti akan di-toggle dengan ditambahkan animasi yang cepat, jika diberi nilai ’slow’, maka animasi akan bergerak lambat.

Jadi, kode html semuanya kira2 seperti ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<body>
    <script>
        $().ready(function(){
            $(".tombol").click(function(){
                $(".gambar").toggle('fast');
                $(".tombol").toggle();
            });
        });
    </script>
    <button class="tombol">Foto 2</button>
    <button class="tombol" style="display:none">Foto 1</button>
    <img class="gambar" src="foto.jpg" />
    <img class="gambar" src="foto2.jpg" style="display: none" />
</body>

Jadi, ketika nanti muncul sebuah button dengan label “foto 2″ dan foto yang muncul adalah foto pertama, maka ketika diklik button tersebut, maka label button akan berubah menjadi “foto 1″ dan foto akan menjadi foto yang kedua, bisa diklik berulang-ulang.
untuk DEMO, silakan klik DI SINI!

OK, sesuai janji… (walopun bilangnya udah beberapa hari yang lalu).. Cheyuz bakal ngebahas tentang JQuery lanjutan…

Waktu di postingan kemaren kan kita udah mengenal JQuery itu apa, dan udah dikasi contoh cara menyembunyikan sebuah gambar di html gimana,,, dan itu pun sangat sangat dasar…

OK, kali ini kita akan mencoba memakai fungsi Jquery untuk menampilkan dan menyembunyikan suatu gambar dengan event tombol yang udah kita set supaya klo tombol itu ditekan, maka fungsi akan dijalankan… dan kita akan mengenal Fade In dan Fade Out, yaitu membuat gambar tampil secara halus (dari transparan hingga opacity) dan Fade Out adalah sebaliknya (dari ada menjadi tiada secara halus)…

Hal pertama yang perlu kita lakukan adalah menambahkan script buat nge-load JQuery, silakan liat postingan sebelumnya untuk meliat gimana caranya ngeload JQuery, klik di sini

Klo udah dipasang, kita tinggal membuat elemen img (gambar) di bagian tag body, misalnya nama gambarnya adalah “foto.jpg” dan beri atribut id=”foto” untuk memberikan ID buat elemen tersebut, maka kode html dibuat seperti berikut..

...
<body>
  <img id="foto" src="foto.jpg" />
</body>

Kemudian buatlah 2 tombol (button) masing-masing dengan label “Sembunyikan”, dan satunya lagi “Munculkan”… ID dari masing-masing tombol berturut-turut adalah “sembunyi” dan “muncul”, jadi kode htmlnya menjadi sebagai berikut:

...
<body>
  <img id="foto" src="foto.jpg" />
  <button id="sembunyi">Sembunyikan</button>
  <button id="muncul">Munculkan</button>
</body>

Nah, kita sekarang udah bikin 3 komponen yang aku rasa udah cukup buat tutorial ini… masing-masing udah punya ID, yaitu foto, sembunyi, dan muncul. Sekarang kita tinggal kasi Jquery..

Pertama, kita akan menyembunyikan gambar tersebut dengan menekan tombol “sembunyi”, jadi kita tinggal menambahkan script berikut di atas gambar (sebelum komponen di buat) seperti ini:

...
<body>
<script>
$().ready(function(){
  $("#sembunyi").click(function(){
    $("#foto").fadeOut("fast");
  });
});
</script>
 
<img id="foto" src="foto.jpg" />
...

di situ ada suatu fungsi dari objek yang mempunyai id=”gambar” yaitu fadeOut, fadeOut adalah suatu fungsi di mana si objek/elemen yang bersangkutan akan disembunyikan dengan berangsur-angsur hilang (dengan menurunkan opacitynya).. temen2 juga bisa berkreasi dengan mengubah parameter “fast” menjadi “slow”, supaya si gambar menghilang dengan pelan dan berangsur-angsur…

Nah, setelah kita menghilangkan si gambar, tentunya temen2 pengen supaya si gambar itu muncul kembali dan dengan berangsur2 pula…
OK, caranya kita tambahkan script yang tadi menjadi kayak gini…

...
<body>
<script>
$().ready(function(){
  $("#sembunyi").click(function(){
    $("#foto").fadeOut("fast");
  });
  $("#muncul").click(function(){
    $("#foto").fadeIn("fast");
  });
});
</script>
 
<img id="foto" src="foto.jpg" />
...

Fade In, berarti kebalikan dari Fade Out, yaitu memunculkan kembali gambar dengan berangsur-angsur (menaikkan opacity), jadi script/kode lengkapnya kayak gini….

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
  <title>Fade In Fade Out</title>
  <script src="jquery.js"></script>
</head>
<body>
  <script>
  $().ready(function(){
    $("#sembunyi").click(function(){
      $("#foto").fadeOut("fast");
    });
    $("#muncul").click(function(){
      $("#foto").fadeIn("fast");
    });
  });
  </script>
 
  <img id="foto" src="foto.jpg" />
  <button id="sembunyi">Sembunyikan</button>
  <button id="muncul">Munculkan</button>
</body>
</html>

Untuk DEMO, silakan klik di sini
OK, selamat mencoba!
nanti kita lanjut ke pemakaian toggle untuk fadein dan fadeout ini…