Fungsi Captcha untuk Mengamankan Website Anda dari Spammer

Fungsi Captcha untuk Mengamankan Website Anda dari Spammer – Bagi anda yang sering menggunakan internet, terutama yang sering mendaftar di situs – situs tertentu atau mendownload suatu file pasti anda pernah melihat gambar yang bentuknya kacau. Biasanya gambar itu hanya terdiri dari huruf dan angka, disebut apakah gambar itu ? dan apa kegunaannya ?

kode captcha

Pengertian dan Fungsi Captcha

Gambar yang terdiri dari huruf dan angka yang tidak beraturan tersebut di sebut captcha. Captcha merupakan singkatan dari Completely Automated Public Turing test to tell Computers and Humans Apart adalah sebuah metode turing test yang digagas oleh Alan Turing pada tahun 1950. Captcha digunakan untuk memastikan bahwa respon yang dihasilkan itu dibuat oleh manusia bukan robot.
Kenapa begitu ? ya karena captcha memang dirancang supaya sulit dibaca oleh mesin atau robot atau program komputer, dan yang hanya bisa membacanya hanyalah manusia. Captcha terdiri dari huruf dan angka yang bentuknya tidak rapi, ada yang bengkok, ada yang ancur, meliuk – liuk seperti ular, dan masih banyak lagi.
Sebelum captcha ditemukan banyak spammer dan hacker yang membuat program dimana program tersebut bisa melakukan pendaftaran secara berulang – ulang, dan yang pastinya para hacker tersebut menggunakannya untuk disalah gunakan. Contoh untuk polling hanya dengan membuat program spam mereka hanya membutuhkan waktu singkat untuk mendapatkan polling jutaan.
Namun Captcha sering kali membuat pengguna internet malas dan enggan melakukan signup atau pengisian formulir. Jika anda adalah seorang developer maka captcha adalah barang wajib yang harus anda buat supaya tidak ada pihak yang bermain – main dengan website anda.

Perbedaan Web Statis dan Web Dinamis

web statis dan web dinamis

Perbedaan Web Statis dan Web Dinamis – Website merupakan aplikasi yang saat ini paling banyak penggunanya. Tahukah anda, berdasarkan teknologinya web terbagi menjadi dua, yaitu web statis dan web dinamis. Keduanya merupakan aplikasi berbasis web, namun ada point – point yang membedakan antara keduanya, yaitu sebagai berikut :

Web Statis Web Dinamis
Pengguna hanya dapat menikmati atau sekedar melihat – lihat isi dari website, bisa dibilang tidak interaktif. Pengguna dapat mengubah isi atau mengkustomisasi website langsung dari website nya, lebih interaktif.
Kalau mau mengubah harus mengubah sintaknya langsung. Kalau mau mengubah bisa melalui websitenya langsung tanpa harus mengubah syntaknya secara langsung.
Biasanya digunakan untuk website perusahaan yang hanya ingin menampilkan informasi – informasi dari perusahaan tersebut. Digunakan secara fungsional seperti jejaring sosial, e-mail, toko online, dll.
Waktu pembuatan sangat relatif singkat, kecuali sang pembuat ingin membuat banyak halaman. Waktu pembuatan bisa memakan waktu yang lama hingga berbulan – bulan lamanya, dan juga sang pembuat harus mempunyai keahlian khusus terutama logika.
Untuk web statis bahasa pemrograman yang digunakan hanyalah HTML & CSS, jika diperlukan javascript juga dipakai agar website terlihat lebih hidup. Untuk web dinamis banyak bahasa pemrograman yang dipakai yaitu HTML, CSS, PHP, MYSQL, dll.
Isi konten web statis jarang diubah, jika mau mengubah isi konten tersebut harus mengubah syntaknya secara langsung. Isi konten pada web dinamis bisa diubah atau diupdate, karena web dinamis dapat mengisi konten melalui halaman website itu sendiri, contohnya halaman admin.
Web statis tidak perlu menggunakan database karena tidak ada data yang perlu disimpan. Web dinamis memerlukan database karena pada web dinamis data harus bisa diolah.

Itulah perbedaan – perbedaan yang terdapat pada web statis dan web dinamis. Semoga penjelasan singkat ini bisa menambah pengetahuan anda tentang web statis dan dinamis.

Cara Membuat Tooltip Dengan CSS

Cara Membuat Tooltip Dengan CSS – Tooltip adalah komponen user interface, dimana komponen ini dapat muncul ketika ada objek yang disentuh. Tooltip biasa nya berisikan bantuan ataupun informasi.

Cara Membuat Tooltip

Pertama anda buat dulu script html sebagai berikut

Sentuh Ini
   

        Ini Merupakan tooltip yang dibuat menggunakan CSS
       
   

Selanjutnya Script CSS seperti dibawah ini

html {
    font-family:Arial, Helvetica, sans-serif;
}
body {
    background:#0C3;
}
.button {
    width:100px;
    text-align:center;
    color:#fff;
    background:#96F;
    border-radius:5px;
    padding:15px;
    font-weight:bold;
    margin:15% auto;
    position:relative;
}
.tooltip {
    position:absolute;
    top:-90px;
    right:0px;
    background:#fff;
    width:300px;
    padding:15px;
    border-radius:10px;
    color:#000;
    display:none;
}
.tooltip img{
    height:20px;
    position:absolute;
    bottom:-20px;
}
.button:hover .tooltip {
    display:block;
}

Penjelasan

  • tag ini yang akan penulis jadikan objek.
  • Ini bagian tooltip yang akan muncul ketika objek disentuh.
  • Pada .tooltip  terdapat properti display:none; , ini adalah kondisi saat tooltip semula, yang itu tidak tampil.
  • Pada .button:hover .tooltip  terdapat properti display:block; , ini adalah kondisi objek disentuh yang mengubah properti display:none; menjadi  display:block; 

Membuat Jendela Pop Up Sederhana Dengan CSS

jendela popup menggunakan css

Jendela Pop Up adalah bagian dari website yang kedudukannya di atas element – element lain. Pada tutorial kali ini saya akan memberikan contoh jendela popup sederhana menggunakan CSS tanpa javascript. Untuk membuatnya ikuti langkah – langkah berikut.

Pertama buat script html seperti di bawah ini

Setelah itu kita buat style nya

html {
    font-family:calibri;
}
h1 {
    margin:0px;
}
#popup {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);
}
.jelndela-popup {
    position:relative;
    padding:15px;
    background:#fff;
    width:500px;
    margin:15% auto 0;
    border-top:5px solid #96C;
}  
.close {
    position:absolute;
    right:15px;
    top:10px;
    color:#96c;
    text-decoration:none;
    font-size:20px;
    font-family:Tahoma, Geneva, sans-serif;
    padding:5px 10px;
    background:#eee;
}
.tombol-popup{
    width:200px;
    text-align:center;
    margin:15% auto 0;
    border-radius:5px;
    color:#fff;
    text-decoration:none;
    background:#96C;
    overflow:hidden;
    box-shadow:0px 0px 5px #000;
}
.tombol-popup a{
    padding:20px;
    display:block;
    font-size:20px;
    color:#fff;
    text-decoration:none;
}
#popup:target {
    display:block;
}

Penjelasan

  • #popup:target yang akan digunakan untuk memunculkan jendela popup, karena link dari tombol popup mengarah ke #popup. 
  • Karena div#popup yang akan menjadi target maka kita tambahkan #popup:target pada script css dan memberi style display:block, agar div#popup bereaksi pada saat kita mengklik tombol popup yang memiliki link #popup.

Penjelasannya agak ribet, kalau belum jelas silahkan berikan komentar….
Selamat Mencoba

    [ Desain Web ] Pengenalan CSS, Selektor, dan Penempatan Code CSS

    Cascading Style Sheets (CSS)

    Cascading Style Sheet (CSS)

    CSS dirancang untuk mengatur tampilan (style dan layout) halaman web. Banyak hal yang bisa dibuat oleh css, dari mengatur bingkai element, pewarnaan latar belakang (background) yang bergradiasi, pembuatan bayangan (shadow) pada element HTML, pengaturan teks, bahkan bisa membuat menu. Akan tetapi halaman web yang menarik bukan sepenuhnya peran dari CSS, namu dipadukan juga dengan Javascript/Jquery untuk mendapatkan efek – efek yang luar biasa.
    Hampir semua halaman turut web melibatkan CSS, oleh karena itu pemahaman terhadap CSS sangat dibutuhkan.

    Selektor Pada CSS

    Pelajaran dasar yang perlu kamu ketahui adalah selektor. Selektor berguna untuk memilih element – element yang menjadi target untuk kamu atur dengan efek tertentu. Sebagai Contoh,
    div{background:#000};
    diatas adalah contoh selektor yang menyatakan “elemen div akan diberikan background hitam (#000)”.
    Berikut adalah beberapa selektor pada CSS

    Selektor Keterangan
    #namaID Memilih Elemen yang nilai atribut yang ID-nya berupa “namaID”, contoh lain “#menu” untuk memilih elemen yang ID-nya “menu”
    .namaClass Memilih Elemen yang nilai atribut yang Class-nya berupa “namaClass”, contoh lain “.box” untuk memilih elemen yang memilik Class “box”
    namaElement Memilih Elemen yang nama elementnya adalah “namaElement”, contoh lain “table” untuk memilih element “table”
    namaElement namaKeturunannya Memilih Elemen “elementKeturunan” yang merupakan keturunan dari “namaElement”, contoh lain “table tr” untuk memilih element “tr” yang berada dalam element “table”
    namaElement > elementAnak Memilih Elemen “elementAnak” yang merupakan anak dari element “namaElement”, contoh lain “table > tr” untuk memilih “tr” yang merupakan anak dari “table”
    elementA + elementB Memilih Elemen “elementB” yang terletak tepat setelah “elemenA”
    selektorA, selektorB Memilih “selektorA” dan “selektorB”, contoh lain “#menu, .#submenu, .list” artinya memilih “#menu”, “#submenu”, dan “.list” sekaligus
    selektorA:first-child Memilih elemen dengan selektor “selektorA” yang merupakan anak pertama, contoh lain “tr td:first-child” artinya memilih elemen “td” yang pertama didalam elemen “tr”
    selektorA:last-child Memilih elemen dengan selektor “selektorA” yang merupakan anak terakhir, contoh lain “tr td:first-child” artinya memilih elemen “td” yang terakhir didalam elemen “tr”
    selektorA:nth-child(x) Memilih elemen dengan selektor “selektorA” yang merupakan anak ke-X, contoh lain “tr td:nth-child(2)” artinya memilih elemen “td” yang ke-2 didalam elemen “tr”, nilai didalam kurung dapat di ganti [even=untuk nilai genap][odd=untuk nilai ganjil][angka = untuk nilai yang ditentukan]
    namaElement[atrib] Memilih “namaElement” yang memiliki atribut “atrib”, contoh lain “input[type]” artinya memilih element “input” yang memiliki atribut “type”
    namaElement[atrib=”x”] Memilih “namaElement” yang memiliki atribut “atrib” dengan nilai “x”, contoh lain ‘input[type=”text”]’ artinya memilih element “input” yang memiliki atribut “type” dengan nilai “text”
    namaElement[atrib^=”x”] Memilih “namaElement” yang memiliki atribut “atrib” dengan nilai diawali oleh “x”, contoh lain ‘input[type=”te”]’ artinya memilih element “input” yang memiliki atribut “type” dengan nilai diawali oleh “te”
    namaElement[atrib$=”x”] Memilih “namaElement” yang memiliki atribut “atrib” dengan nilai diakhiri”x”, contoh lain ‘input[type=”xt”]’ artinya memilih element “input” yang memiliki atribut “type” dengan nilai diakhiri dengan “xt”

    Cara Penulisan Script  CSS (Cascading Style Sheets)

    Akan penulis jelaskan tata cara penulsan scrip CSS, sebagai contoh :
    .box {
    background:#000;
    color:#fff;
    }

    Script diatas menyatakan bahwa semua elemen yang ber-kelas “box” akan memilik background (latar belakang) hitam “#000” dan “color” diwarnai dengan putih “#FFF”. Untuk penjelasan secara visual lihat gambar berikut,

    Meletakkan Script CSS

    Untuk meletakkan script css ini bisa dimana saja, ada 3 opsi yaitu, langsung di dalam element/tag html, di dalam tag , bahkan bisa di file yang terpisah.

    1. Peletakkan Script CSS di dalam Tag HTML

    Script CSS bisa langsung ditulis di tag html, sebagai contoh

    Contoh Memasukkan CSS di dalam tag html

     

    2. Peletakkan Script CSS di dalam Tag Head

    Script CSS juga bisa ditulis di tag head, sebagai contoh

    .contoh {
    background:#333;
    color:#fff; 
    padding:10px; 
    width:200px;
    }

    Contoh menulis script css di tag head

     

    3. Penulisan Script CSS di File Terpisah

    Untuk membuat file terpisah antara HTML dan CSS kita harus membuat file .css setelah itu dimasukkan ke dalam file html, sebagai contoh
    file style.css
    background:#333;
    color:#fff; 
    padding:10px; 
    width:200px;  s

    file contoh.html

    Contoh menulis script css dalam file yang terpisah