Membuat Custom Button Captcha dengan Font Awesome
|
|
- Hartono Wibowo
- 7 tahun lalu
- Tontonan:
Transkripsi
1
2 Membuat Custom Button Captcha dengan Font Awesome Oleh: Christian Rosandhy Captcha adalah bagian form yang biasa digunakan untuk memvalidasi user sebelum mengirim form. Kalau captcha pada umumnya mewajibkan kita mengetikkan kata seperti gambar yang disediakan, di captcha kali ini kita akan membuat captcha sederhana model tombol untuk membuat validasi form lebih unik. Untuk caranya, yuk disimak.. Salam jagocoding,, udah lama ga bikin tutor lagi nih sejak ah, sudahlah.. Kesempatan kali ini saya mau share lagi tutorial untuk membuat captcha.. Tapi captcha yang akan kita buat kali ini bukan captcha model tulisan standar,, tapi Button Captcha. Untuk membuat Button Captcha kali ini saya akan menggunakan HTML + CSS + PHP dan bantuan Font Awesome untuk mengerjakan semuanya.. Langsung aja ya,, pertama-tama kita bikin dulu desain layout captchanya pake HTML + CSS dulu. Di bagian ini sebenernya terserah kitanya aja mau desain kayak gimana, cuma kalo desain dari ane sih hasil jadinya mau seperti ini : Pertama-tama, untuk resource yang akan saya pakai,, di tutorial ini saya pake Font Awesome sebagai resource icon-iconnya (bisa download di Font Awesome), dan Bootstrap untuk bantu bikin responsive sama tombol-tombolnya biar cepet.. Jangan lupa download file-file itu ya.. Soalnya untuk HTML dan CSSnya nggak akan terlalu saya jelasin begitu detail.. Karena bagian rumit yang lebih saya konsen yaitu di PHPnya.. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>form Captcha</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/font-awesome.min.css">
3 <!--sesuaikan dengan tempat kita meletakkan resource CSS kita--> <style> /*CSS Untuk Captchanya aja~*/ *{margin:0px auto;.captcha-form{background:#f7f7f7; border:1px solid #ededed; padding:10px; border-radius:4px; -moz-border-radius:4px; margin:5px; display:inline-block; vertical-align:top;.captcha-form.big-thumb{background:#fff; display:inline-block; text-align:center; padding:10px 0px; font-size:30px; line-height:50px; width:70px; vertical-align:top;.captcha-form.right{display:inline-block;.captcha-form.helper{display:block;.captcha-form.button-cont{display:inline-block; padding:10px;.captcha-form.button-cont button{float:left; margin:0px 5px;.clear{clear:both; </head> <body> </style> <div class="container"> <form action="" method="post" enctype="multipart/form-data"> <div class="captcha-form"> <!--container captcha utama--!> <div class="big-thumb"> <!--layer penampung icon besar--> "><!--random icon besar akan muncul disini--></span> <div class="right"> <div class="helper">tekan tombol dengan icon yang sama seperti gambar yang sama seperti disamping untuk mengirim. <div class="button-cont"> <!--semua opsi tombol akan muncul dibawah ini secara random--> btn-primary btn-lg"> btn-primary btn-lg"> btn-primary btn-lg">
4 btn-primary btn-lg"> btn-primary btn-lg"> btn-primary btn-lg"> </form> <div class="clear"> </body> </html> Hasilnya sementara seperti ini : Kok masih kosong? Ya wajar.. nama icon font-awesomenya sama sekali belum dipanggil.. Semuanya icon akan kita panggil secara acak dengan PHP nantinya. Karena layout sudah oke,, sekarang kita akan masuk ke bagian script PHPnya ya untuk memasukkan icon-icon ke tempat semestinya.. Pertama-tama kita buat file PHP baru dengan nama file captcha.php. File captcha.php ini akan kita buat dengan model OOP biar lebih enak diaplikasiin.. Strukturnya yang saya gunakan seperti ini : <?php class Captcha{ var $token, $iconlist, $tokenlist; function construct(){ function create(){
5 function draw(){ function get_icon(){ Class Captcha ini akan berisi 3 atribut, yaitu $token, $iconlist, dan $tokenlist. Atribut $token digunakan sebagai kode autentikasi valid yang nantinya akan dicek kesesuaiannya. $iconlist akan digunakan untuk menampung nama-nama icon yang akan muncul di tombol-tombol, $tokenlist akan berisi kode autentikasi acak untuk masing-masing tombol icon. Untuk method-methodnya sendiri akan kita buat terdiri dari create(), draw(), dan get_icon(). Method create() adalah method utama yang akan mengerjakan semuanya, method draw() yang akan menggambar captcha tersebut, dan method get_icon() adalah method yang akan mengacak-acak urutan icon yang ditampilkan. Selanjutnya, di method konstruktor [ construct() ] kita langsung beri nilai atribut $token dengan nilai acak. function construct(){ //Fungsi SHA1 akan memberikan karakter 40 digit acak yang akan digunakan sebagai kode autentikasi captcha kita nantinya. $this->token = sha1(md5(rand(1,10000))); Setelah itu, di method get_icon() yang paling bawah, kita hanya perlu mengisi sebuah array yang berisi nama-nama class icon Font Awesome (nama icon lengkap bisa dilihat di dan ditambah ke method get_icon sesuai kebutuhan) function get_icon(){ $arr = array( "fa-ambulance", "fa-anchor", "fa-android", "fa-automobile", "fa-bed", "fa-bell", "fa-bicycle", "fa-birthday-cake", "fa-bomb", "fa-child",
6 "fa-cloud", "fa-cutlery", "fa-cut", "fa-diamond", "fa-eye", "fa-fighter-jet", "fa-flask", "fa-globe", "fa-home", "fa-leaf", "fa-meh-o", "fa-music", "fa-paper-plane", "fa-paw", "fa-puzzle-piece", "fa-star", "fa-sun-o", "fa-trash", "fa-users", "fa-warning", "fa-wrench", "fa-wifi", "fa-user-secret", "fa-university", "fa-linux", "fa-paint-brush", "fa-money", "fa-thumb-tack", "fa-thumbs-up", "fa-motorcycle", "fa-newspaper-o", "fa-heartbeat", "fa-coffee" ); return $arr; Setelah itu, di method create() kita akan membuat sebuah session dengan nilai sesuai token di konstruktor tadi, lalu memanggil icon di method get_icon() untuk ditampilkan. function create(){ $limit = 6; //jumlah tombol yang akan tampil $_SESSION['token'] = $this->token; //membuat session token berdasarkan atribut token di method konstruktor tadi $iconlist = $this->get_icon(); // mengambil nilai icon yang sudah kita buat tadi shuffle($iconlist); // mengacak urutan icon dari method get_icon()
7 diatas //perulangan dilakukan sebanyak $limit yg ditentukan //atribut iconlist akan diisi sebanyak 6 icon acak //seluruh atribut token akan diisi dengan karakter acak for($i=0;$i<$limit;$i++){ $this->iconlist[$i] = $iconlist[$i]; $this->tokenlist[$i] = sha1(md5(rand(1,10000))); //setelah semuanya siap, method draw() yang akan menampilkannya ke browser $this->draw(); Udah mau selesai.. Beneran.. Sekarang di method draw() ini kita akan mengetik ulang struktur HTML yang kita buat diawal, akan tetapi akan langsung kita isi dengan icon dan nilai token yang sudah diisi di method create() tadi. Icon yang akan muncul nanti akan selalu acak tiap refreshnya, karena fungsi shuffle() di method create() tadi.. function draw(){ $out = ""; //semua tag HTML nantinya akan dimasukkan ke tag $out ini.. #PERLU DIBEDAKAN, DIBAWAH INI SEMUA VARIABEL $out diberi TITIK SAMA DENGAN. $out.=" <input type='hidden' name='form-captcha' value='1'> <div class='captcha-form'> <div class='big-thumb'> <span class='fa ".$this->iconlist[0]."'></span> <div class='right'> <div class='helper'> Tekan tombol dengan icon yang sama seperti icon disamping untuk mengirim <div class='button-cont'> "; #$THIS->ICONLIST[0] di class big-thumb menunjuk ke icon pertama di list icon yang sudah diacak tadi. #Array dibawah ini akan menampung tag <button>2 yang akan muncul, akan tetapi nantinya diacak urutannya sebelum benar-benar
8 ditampilkan. $arr = array(); //push data tombol jawabannya array_push($arr," <button name='".$this->token."' class='btn btn-primary btn-lg'> <span class='fa ".$this->iconlist[0]." fa-fw'></span> "); #array_push() pertama sengaja tidak dimasukkan kedalam perulangan dibawah, karena nama button diambil dari atribut $token, bukan dari $tokenlist. Tombol ini nantinya akan menjadi tombol kirim yang sesungguhnya #perulangan dibawah digunakan untuk membuat tombol-tombol sembarang $num = count($this->iconlist); for($i=1;$i<$num;$i++){ array_push($arr," <button name='".$this->tokenlist[$i]."' class='btn btn-primary btn-lg'> <span class='fa ".$this->iconlist[$i]." fa-fw'></span> "); #fungsi shuffle wajib dilakukan, supaya urutan tombol submit sesungguhnya dengan tombol bohongannya selalu acak. shuffle($arr); //dari semua urutan tombol-tombol yang sudah diacak tadi dimasukkan ke variabel $out lagi. foreach($arr as $o){ $out.= $o; $out.= " <div class='clear'> "; //yang diatas ini hanya tag-tag penutup yang sudah dibuka sebelumnya saja.. diatas echo $out; //menampilkan output sesuai yang sudah dibuat
9 Okee!! Untuk class captchanya sudah selesai semuanya!! Sekarang dari class Captcha tersebut tinggal kita panggil ke dokumen yang ingin kita isi captchanya.. Jadi di form yang ingin kita isikan captcha, cukup kita tambahkan baris ini.. <form action="" method="post" enctype="multipart/form-data"> <!--ANGGEP AJA ADA KOMPONEN FORM LAINNYA DISINI--> kita buat tadi <?php cukup seperti ini saja?> </form> include "captcha.php"; //lokasi class captcha yang $captcha = new Captcha(); $captcha->create(); // untuk menampilkan captcha, Kalau semua urutan dari atas sampai terakhir tadi diikuti dengan benar,, maka hasil jadinya sudah pasti seperti yang diinginkan kayak di halaman demo saya. Dan langkah terakhir yang benar-benar terakhir adalah bagian validasinya.. Perintah validasi berikut ini diletakkan di bagian kita ingin memvalidasi form kita nantinya. Di halaman demo saya, form validasi diletakkan satu halaman dengan index biar nggak ribet.. Tapi bisa disesuaikan dengan kebutuhan kita kedepannya.. <?php session_start(); //KALAU UDAH BUAT DEKLARASI SESSION SEBELUMNYA, BARIS INI BOLEH DIHAPUS //cek if(isset($_post['form-captcha'])){ //nilai variabel bener diambil dari session token jika ada. $bener = isset($_session['token'])? $_SESSION['token'] : ""; //kalau tombol dengan nama sesuai session sudah ada, maka captcha sukses, selain itu gagal. if(isset($_post[$bener])){ echo " <script>
10 ?> else{ alert(\"captcha Benar!!\"); </script> "; echo " <script> alert(\"captcha Salah!!\"); </script> "; Demikian tutorial panjang saya hari ini.. Alangkah baiknya kalau Anda mengerjakan semuanya ini step by step.. Tapi kalau ternyata hasilnya nggak sesuai, atau kebetulan lagi males,, silakan download di sini. Sekian, dan terima kasih.. Tentang Penulis Christian Rosandhy
Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage
Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage Oleh: Christian Rosandhy Siapa bilang bikin galeri gambar yang responsive itu susah? Di tutorial kali ini kita akan belajar membuat
Lebih terperinciTutorial Lengkap Memahami CSS Display
Tutorial Lengkap Memahami CSS Display Oleh: Christian Rosandhy Dalam dunia CSS, property Display adalah salah satu property terpenting yang menentukan hasil akhir sebuah website. Kali ini kita akan banyak
Lebih terperinciMembuat Desain Custom Input (Checkbox + Radio Button) pada Form
Membuat Desain Custom Input (Checkbox + Radio Button) pada Form Oleh: Christian Rosandhy Bosen lah ya liat checkbox dan radio button di HTML yang gitu-gitu aja? Di tutorial kali ini kita akan belajar mendesainnya
Lebih terperinciMembuat Tabel Responsive dengan CSS
Membuat Tabel Responsive dengan CSS Oleh: Christian Rosandhy CSS Layout Responsive udah jadi salah satu kebutuhan wajib ya dalam pembuatan website kita.. Sama seperti layout, Table juga perlu tampilan
Lebih terperinciTutorial Dasar CSS Preprocessor LESS
Tutorial Dasar CSS Preprocessor LESS Oleh: Christian Rosandhy Karena CSS standar udah terlalu mainstream,, nggak ada salahnya kita belajar salah satu CSS Preprocessor yang cukup terkenal, yaitu LESS. Disini
Lebih terperinciMembuat Layout Footer Menempel ke Bawah
Membuat Layout Footer Menempel ke Bawah Oleh: Christian Rosandhy Kali ini saya mau share lagi salah satu layout wajib buat website, yaitu layout footer menempel kebawah. Di tutorial kali ini kita akan
Lebih terperinciMembuat Responsive Layout dengan CSS Media Query
Membuat Responsive Layout dengan CSS Media Query Oleh: Christian Rosandhy Di tutorial kali ini kita akan belajar membuat layout CSS Responsive dengan bantuan CSS Media Query, supaya website yang kita buat
Lebih terperinciResponsive Layout dengan Bootstrap [Part 2]
Responsive Layout dengan Bootstrap [Part 2] Oleh: Christian Rosandhy Salam jaco,, sebagai lanjutan dari tutorial Membuat Layout Responsive dengan Container Bootstrap, kali ini kita akan mencoba membuat
Lebih terperinciMemanfaatkan CSS Animasi [Part 2]
Memanfaatkan CSS Animasi [Part 2] Oleh: Christian Rosandhy Ini adalah tutorial lanjutan dari Part 1,, Kali ini kita akan belajar menggunakan CSS 3 Animation untuk membuat animasi yang jauh lebih dinamis
Lebih terperinciMembuat Tooltip Sendiri dengan CSS
Membuat Tooltip Sendiri dengan CSS Oleh: Christian Rosandhy Terkadang liat tooltip standar bawaan browser itu terlalu membosankan ya,, disini kita belajar membuat tooltip tersebut dengan bantuan CSS supaya
Lebih terperinciMembuat Layout Header Diam di Tempat (Fix Header)
Membuat Layout Header Diam di Tempat (Fix Header) Oleh: Christian Rosandhy Fix Header / Header Diam di Tempat adalah salah satu tren layout yang cukup populer (liat aja header Facebook / Twitter). Layout
Lebih terperinciMembuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap [Part 2]
Membuat Web Chatting dengan Ajax Jquery, PHP, dan Bootstrap 2.3.2 [Part 2] Oleh: d-newbie pada tutorial sebelumnya kita sudah membuat 2 modal, yaitu modal "Masuk" dan modal "Daftar" dan pada tahap ini
Lebih terperinciTutorial Lengkap Memahami CSS Position
Tutorial Lengkap Memahami CSS Position Oleh: Christian Rosandhy Salah satu property CSS yang masih bisa bikin kita bingung dan salah langkah itu adalah POSITION. Kapan kita harus pakai position static,
Lebih terperinciMembuat Top Fixed Responsive Navbar Twitter Bootstrap
Membuat Top Fixed Responsive Navbar Twitter Bootstrap Oleh: ricky orlando napitupulu Salam bro and sis :), selamat datang di tulisan tutorial pertama ane ni, makasi da mau singga disini ye walopun kesasar
Lebih terperinciMendesain Custom Tabel dengan Pseudo Element CSS
Mendesain Custom Tabel dengan Pseudo Element CSS Oleh: Christian Rosandhy Masih dengan CSS, kali ini kita akan belajar mendesain tabel dengan CSS, sekalian belajar 3 pseudo-element yang akan sangat berguna
Lebih terperinciPemrograman Web PRAKTIKUM 6. Query Data 2. TUJUAN BELAJAR Mahasiswa dapat menggunakan PHP dan MySQL untuk mengupdate data
PRAKTIKUM 6 Query Data 2 TUJUAN BELAJAR Mahasiswa dapat menggunakan PHP dan MySQL untuk mengupdate data MATERI Program edit dan hapus TUGAS Menambahkan fitur edit dan hapus untuk semua form input data
Lebih terperinciMEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP
MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP NURLITA nurlita.icha@gmail.com Abstrak Kali ini kita akan membahas cara membuat layout dengan container bootstrap. Bootstrap adalah suatu framework front-end yang
Lebih terperinciPRAKTIKUM PHP 5 VALIDASI FORM DENGAN PHP
PRAKTIKUM PHP 5 VALIDASI FORM DENGAN PHP Inputan pada Form diperlukan validasi data di Aplikasi Web karena ketidakcocokan inputan akan menyebabkan kesalahan yang akan merepotkan pihak administrator atau
Lebih terperinciSImple Pop-Up Modal dengan CSS3 dan Jquery
SImple Pop-Up Modal dengan CSS3 dan Jquery Oleh: d-newbie Assalamualaikum wr.wb. bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up
Lebih terperinciLangkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna
Dalam tutorial cara membuat form login dengan PHP dan MySQL, kita akan belajar membuat halaman login untuk website dengan menggunakan PHP Session. Tutorial ini merupakan tutorial tingkat dasar, sederhana
Lebih terperinciMembuat Display Produk dalam Layout Box 4 Kolom
Membuat Display Produk dalam Layout Box 4 Kolom Oleh: Debrian Ruhut Saragih Selamat pagi Sobat sekalian, saat ini kita banyak menemukan toko online bertebaran di Internet. Saya sering memperhatikan bagaimana
Lebih terperinciImage Slider 3D. Oleh: Anthonius
Image Slider 3D Oleh: Anthonius Kali ini saya akan berbagi cara membuat image slider dengan tampilan 3D. Cara ini sangat efisien karena hanya menggunakan sedikit script. Untuk CSS nya agan bisa copy langsung
Lebih terperinciCara Memasukan Font Baru Ke Dalam Web Menggunakan CSS
Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS Oleh: Rahmat Menghias blog/web boleh saja tetapi tentunya juga harus memperhatikan kenyamanan visitor yang akan berkunjung ke web anda. Oleh sebab
Lebih terperinciMembuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 3]
Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 3] Oleh: Arinadi Nur Rohmad Asalamualaikum, Setelah di part sebelumnya kita sudah membuat design dan
Lebih terperinciGambar 1. Tampilan form karyawan
Tutorial Panada Framework Chapter 4 : Validasi Form SamidCorner(Tegal Pembaca yang budiman. Masih bersama tutorial berseri dari Panada Framework, setelah pada chapter yang ketiga mengenai penggunaan form
Lebih terperinci2014 TUTORIAL PANADA FRAMEWORK BY DIMAS EDU
Tutorial Panada Framework Chapter 3 : Bekerja dengan Form SamidCorner(Tegal) Pembaca yang budiman. Masih dirangkain tutorial berseri Panada Framework, dan pada kesempatan kali ini saya akan membahas mengenai
Lebih terperinciMembuat Duplikasi Form dengan Jquery (Dynamic Form)
Membuat Duplikasi Form dengan Jquery (Dynamic Form) Oleh: Dimas Agung Noviyanto Membuat dynamic field mungkin bukan hal baru bagi seorang web programmer, field inputan yang dapat ditambah maupun di hapus
Lebih terperinciMembuat Themes Wordpress sendiri - Part 1
Membuat Themes Wordpress sendiri - Part 1 Oleh: asep saepulloh Halo sahabat jaco. Kali ini saya akan membahas bagaimana caranya membuat themes sendiri di CMS Wordpress. Terkadang sahabat jaco muak dengan
Lebih terperinciPublish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial
Kumpulan Tutorial dan belajar ilmu website mulai dari hosting dan coding seperti belajar HTML, CSS, Javascript, Javascript, JQuery, ASP.Net hingga SEO dan Desain web dengan Dreamweaver dan Photoshop untuk
Lebih terperinciMembuat dan Menampilkan QR Code secara Dinamis dengan PHP
Membuat dan Menampilkan QR Code secara Dinamis dengan PHP Oleh: Christian Rosandhy QR Code Everywhere!! Mungkin di website / proyek kita juga perlu dibikinin juga tuh biar nggak kalah keren.. Nggak susah
Lebih terperinciTUTORIAL MEMBUAT PROGRAM KALKULATOR DENGAN OOP PHP
TUTORIAL MEMBUAT PROGRAM KALKULATOR DENGAN OOP PHP Oleh: Achmad Sayfudin Selamat Siang bagi pemula yang lagi belajar oop di php,berikut ini ada tutorial dengan pokok bahasan membuat aplikasi kalkulator
Lebih terperinciPemrograman Web PRAKTIKUM 3 CSS. TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml
PRAKTIKUM 3 CSS TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml MATERI Sintaks CSS, cara memakai CSS, jenis-jenis selektor, satuan ukuran, satuan warna, properti
Lebih terperinciSMH2D3 Web Programming. 7 BAB V PHP SESSION & COOKIES. H a l IDENTITAS. Kajian Teknik pemrograman menggunakan PHP
7 BAB V PHP SESSION & COOKIES 71 IDENTITAS Kajian Teknik pemrograman menggunakan PHP Topik Penggunaan Library PHP dan teknik lanjutan Web Dinamis Kompetensi Utama 1 Memahami penggunaan Form dan Validasi
Lebih terperinciPerkenalan Font Awesome untuk Pure CSS dan Bootstap. [Part 1]
Perkenalan Font Awesome untuk Pure CSS dan Bootstap. [Part 1] Oleh: Arinadi Nur Rohmad Font Awesome adalah kumpulan icon yang telah dibuat sedemikian rupa, dan menggunakan system Font Icon yang memungkinkan
Lebih terperinciMembuat Simpel Site HTML Layout Menggunakan Tag div
Membuat Simpel Site HTML Layout Menggunakan Tag div Oleh: Yudhistira Bayu W Ya, setelah saya memberikan Tutorial Tutorial Simpel HTML pada sebelumnya, Kali Ini saya akan memberikan Cara Membuat Simpel
Lebih terperinciAJAX dengan jquery Part 3
AJAX dengan jquery Part 3 Oleh: Cecep Yusuf Pada tutorial ini, kita akan belajar bagaimana mengirim data POST dari sebuah form dan dikirim dengan metode AJAX post dengan menggunakan jquery. Selamat pagi
Lebih terperinciSecara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu,
Lebih terperinciMEMBUAT MASTER BERITA Teknik Informatika Sopingi, M.Kom
MEMBUAT MASTER BERITA Teknik Informatika Sopingi, M.Kom 1. Buatlah File index.php File ini digunakan untuk menampilkan form dan datagrid tabel berita Memanggil koneksi manage BERITA
Lebih terperinci108
LAMPIRAN 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 KODE PROGRAM 1. Script Konsultasi 1.
Lebih terperinciMemanfaatkan CSS Animasi dan Transisi [Part 1]
Memanfaatkan CSS Animasi dan Transisi [Part 1] Oleh: Christian Rosandhy Transition dan Animation itu adalah salah satu perintah wajib di dunia CSS3 sekarang untuk menghasilkan web yang lebih unik. Di part
Lebih terperinciTUTORIAL CSS FRAMEWORK
11/13/2014 TUTORIAL CSS FRAMEWORK NAMA : DUWI PARYANTO NIM : 12141367 MATA KULIAH : PEMROGRAMAN WEB STATIS DOSEN : WAHYU WIDODO CSS FRAMEWORK FONT AWESOME A. Pengertian Framework Sebelum mempelajari bagaimana
Lebih terperinciCara Membuat Security Image Code Dengan PHP
Cara Membuat Security Image Code Dengan PHP Riyan Sindi Saputra ssaputrariyan@gmail.com Abstrak Saya akan coba menjelaskan bagaimana cara membuat Security Code - Security Image - atau Captcha. Apa itu
Lebih terperinciPerkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya
Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya Oleh: Arinadi Nur Rohmad Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna seperti huruf pada umumnya yang berbeda dari
Lebih terperinciPage 1 of 8 Tutorial Font Awesome UTS Stmik El Rahma
Page 1 of 8 Tutorial Font Awesome Nama : Faqum Alf a Dwiyanto NIM : 12141368 Prodi : TI / I Buat tutorial cara penggunaan suatu framework CSS yang diimplementasikan pada layout semantik html. Tulislah
Lebih terperinciPemrograman Web Week 2. Team Teaching
Pemrograman Web Week 2 Team Teaching WEEK 2 HTML IKG2I4 Software Project I Persiapan Instalasi Editor Download dan Install apilkasi editor (mis. Notepad++) Karena membantu dalam pengembangan syntax highlighting
Lebih terperinciDropdown Berhubungan (Sync Dropdown) Dengan CI & MySQL
Dropdown Berhubungan (Sync Dropdown) Dengan CI & MySQL Oleh: Gilang Sonar Amanu Saya mau coba share lagi, tutorial sederhana namun sering bgt digunakan untuk berbagai kasus. Mungkin bisa berguna khususnya
Lebih terperinciMembuat Button Dengan CSS
Membuat Button Dengan CSS Dari sekian banyak pertanyaan yang muncul dari para pemula di CSS adalah pertanyaan bagaimana sih membuat tombol dengan CSS?, hmmm bagi saya ini adalah pertanyaan yang simple
Lebih terperinciForm Mampu membuat form dan dan mengirim data ke halaman lain Pengaturan Validasi dan keamanan form. Sesi 5
Robby Cokro Buwono Badiyanto, S.Kom., M.Kom Sesi 5 Form Tujuan Intruksional Mampu membuat form dan dan mengirim data ke halaman lain Pengaturan Validasi dan keamanan form Kode MK : AK2011T Revisi Terakhir
Lebih terperincibuat Lightbox mu sendiri dengan jquery
buat Lightbox mu sendiri dengan jquery Oleh: putra surya herlambang assalamualikum wr wb. apakah kamu pernah melihat gambar pada website yang ketika kamu klik lalu akan muncul suatu kotak besar yang juga
Lebih terperinciWEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS
WEB STATIS MEMBUAT TUTORIAL PENGGUNAAN FRAMEWORK CSS Oleh : EMA SETYA KARISNA TI. 12141391 A. PENGERTIAN FRAMEWORK CSS Bootswatch.com Bootswatch merupakan penyedia tema berbagai macam bootstrap dengan
Lebih terperinciMembuat Aplikasi CRUD dengan OOP dan PDO MySQL
Membuat Aplikasi CRUD dengan OOP dan PDO MySQL Oleh: Ananda Mukhammad Ikhsan Memang jika dilihat dari judulnya ini seperti tutorial untuk pemula. Tutorial ini sangat cocok untuk orang yang baru belajar
Lebih terperinciKapita Selekta (KBKI82127, 2 sks) Materi : Penanganan Form
Kapita Selekta (KBKI82127, 2 sks) Materi : Penanganan Form Form inputan dibuat dengan tag-tag HTML. Halaman yang mengandung form murni (tidak ada script php) tidak harus disimpan dalam bentuk php, bisa
Lebih terperinciPrak. E-Bussiness & E-Commerce HTML. (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto.wordpress.com
Prak. E-Bussiness & E-Commerce HTML (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto@gmail.com liyantanto.wordpress.com Pendahuluan HTML adalah sebuah bahasa markup yang digunakan untuk membuat
Lebih terperinciTutorial CSS Desain Layout 1 Dengan HTML5 dan CSS
Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Oleh: Ardie Jocong pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layout Website dengan Menggunakan HTML5 dan CSS.. Okeh Langsung
Lebih terperinci[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3
[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3 Oleh: Arinadi Nur Rohmad Oke, Membuat slide show adalah pekerjaan yang sulit untuk yang baru belajar CSS karena pada dasarnya Slide Show dibuat
Lebih terperinciTUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah
TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com Bagian 7. Membuat Data Pagination Menggunakan
Lebih terperinciTutorial Codeigniter : Membuat multiple language dengan Language Class
Tutorial Codeigniter : Membuat multiple language dengan Language Class Pembaca yang budiman. Sering sekali kita melihat website dengan beberapa bahasa. Nah, kira kira bagaimana ya kalo kita membuat sendiri
Lebih terperinciMembuat Sistem Pertemanan Sederhana
Membuat Sistem Pertemanan Sederhana Oleh: Dadan Pada artikel kali ini saya akan menunkukan kepada Anda cara membuat sistem pertemanan seperti pada website jejaring sosial. Contohnya yah seperti pada website
Lebih terperinciCSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa
CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa Pembahasan Pengertian CSS CSS (FONT, TEXT, COLOR) CSS - Image PENGERTIAN CSS Singkatan dari Cascading Style Sheet Digunakan dalam kode HTML untuk menciptakan
Lebih terperinciScript PHP dan MySQL J A M K E E M P A T
J A M K E E M P A T Script PHP dan MySQL l l l l l l Membuat Koneksi ke Server Menyeleksi Database Mengakses Query Menampilkan Hasil Query Latihan Jam Keempat Soal Jam Keempat Membuat Koneksi ke Server
Lebih terperinciPHP dan Framework CodeIgniter
Universitas Negeri Padang PHP dan Framework CodeIgniter Yeni Septiana Pendidikan Teknik Informatika 1102640 2015 Hai All.. Kali ini kita akan membahas tentang membuat Website dengan menggunakan bahasa
Lebih terperinciLaporan Bengkel Web II Modul 6
Laporan Bengkel Web II Modul 6 D I S U S U N Oleh : Muhammad Aly Al-Husaini 1457301050 1 SI C Politeknik Caltex Riau T.A 2014-2015 Modul 6. Fungsi Filter PHP Contoh Program Contoh 1 : Baris 3, membuat
Lebih terperinciMenampilkan user online seperti di obrolan step by step
Menampilkan user online seperti di obrolan step by step Oleh: lukman hakim Salam hangat temen2 Jagocoding.com, Berikut saya akan berbagi tutorial sederhana yakni bagaimana cara menampilkan user online
Lebih terperinciKAJIAN 3 Web Responsive
KAJIAN 3 Web Responsive Modul 10 Pengantar Web Responsive Modul 11 Perancangan Web Responsive 73 KAJIAN 3 Web Responsive MODUL 10 Pengantar Web Responsive 10.1. TUJUAN Mengetahui dan memahami dasar perancangan
Lebih terperinciMahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML
Pengenalan JavaScript Standar Kompetensi Mahasiswa memahami Pengertian, fungsi, aplikasi untuk menjalankan JavaScript, cara menjalankan kode, cara memasukkan kode JavaScript ke dalam HTML Indikator Hasil
Lebih terperinciDOM (Document Object Model) dan Event
DOM (Document Object Model) dan Event Tujuan Praktikum - Praktikan mampu mengakses DOM dalam HTML dan mengatur event pada elemenelemen dalam dokumen HTML Pengantar Ketentuan yang dikembangkan oleh W3C
Lebih terperinciMODUL 8 Insert, Update, & delete
MODUL 8 Insert, Update, & delete Pemograman Web Teknik Informatika Universitas Pasundan Bandung 2016/2017 Konten Mengubah Data dari Array menjadi Database... Error! Bookmark not defined. Mengkoneksikan
Lebih terperinciMODUL PRAKTIKUM PEMROGRAMAN WEB
MODUL PRAKTIKUM PEMROGRAMAN WEB Pengenalan PHP, HTML, CSS dan Javascript LABORATORIUM KOMPUTER UNIVERSITAS UBUDIYAH INDOENSIA MODUL PRAKTIKUM PEMROGRAMAN WEB 1. Review HTML 5 part 1 (Basic Attribute +
Lebih terperinciUpload File dengan Metode AJAX
Upload File dengan Metode AJAX Oleh: Cecep Yusuf Saya akan membahas bagaimana membuat form upload file beserta prosesnya dengan menggunakan teknik AJAX memakai library Ajax File Upload, salah satu library
Lebih terperinciMasih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat
Contoh ke dua layout menggunakan CSS Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat HEADER ISI NAVIGASI
Lebih terperinciMembuat Login Dengan PHP dan MYSQL
Membuat Login Dengan PHP dan MYSQL Ramdhan Indra Bangun dadhan.rpl@gmail.com :: Abstrak Aplikasi login User dalam suatu situs dinamis menggunakan php sudah hamper menjadi kebutuhan wajib. Tanpa adanya
Lebih terperinciTUTORIAL PHP MYSQL Langkah Tepat menjadi Web Developer Handal, menguasai PHP dan MySQL, jalan terbaik membuat website dan aplikasi berbasis web
TUTORIAL PHP MYSQL Langkah Tepat menjadi Web Developer Handal, menguasai PHP dan MySQL, jalan terbaik membuat website dan aplikasi berbasis web www.ilmuwebsite.com Bagian 22. Lebih Jauh Bekerja dengan
Lebih terperinciDasar Dasar Transisi Di CSS3
Dasar Dasar Transisi Di CSS3 Oleh: Irvansyah Jumpa lagi ne sama sobat JagoCoding, tutor saya hari ne tentang transisi di CSS3.. Mungkin diantara teman2 pasti ada yang udah tahu tapi masih bingung ataupun
Lebih terperinciPengenalan Perancangan Web 2017
9. Form dan Input HTML Form adalah elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Form biasa digunakan untuk membuat
Lebih terperinciMembuat Chatbox Sederhana dengan Ajax jquery dan PHP PDO
Membuat Chatbox Sederhana dengan Ajax jquery dan PHP PDO Oleh: Ananda Mukhammad Ikhsan Chatbox adalah fitur yang cukup penting di website berbasis sosial media. Nah, kali ini saya akan memberikan tutorial
Lebih terperinciMembuat Aplikasi Chating Sederhana dengan Jquery, Codeigniter dan Bootsrap
Membuat Aplikasi Chating Sederhana dengan Jquery, Codeigniter dan Bootsrap Oleh: Dadan Jumpa lagi dengan saya disini yang tetap tampil sederhana. Karena sebelumnya saya menuliskan cara membuat sistem keranjang
Lebih terperinci1. Mahasiswa mampu membuat form pada dokumen HTML. 2. Mahasiswa memahami cara penggunaan dari fasilitas Form pada halaman dokumen HTML
Bab 4. Form Overview Salah satu fasilitas yang disediakan oleh dokumen HTML memungkinkan kita untuk melakukan interaksi lebih terhadap halaman dokumen tersebut. Semisal, kemampuan dokumen HTML mampu menyediakan
Lebih terperinciA. Tujuan B. Dasar Teori 1. Pemrosesan Form 2. Konsep Penggunaan Tag <form> pada HTML
Form HTML A. Tujuan Memahami konsep penggunaan tag pada HTML Mampu menangani masukan data dari form HTML Mampu membuat dan memproses beragam elemen kontrol B. Dasar Teori 1. Pemrosesan Form Pemrosesan
Lebih terperinciMembuat Captcha Image menggunakan Codeigniter 2x
Membuat Captcha Image menggunakan Codeigniter 2x Oleh: Yoga C. Pranata Hai semua, disini saya akan menerangkan tentang bagaimana membuat captcha menggunakan Codeigniter. Sebelum memulainya, kalian pasti
Lebih terperinciObjek Bergoyang CSS3
Objek Bergoyang CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Gak terasa nih udah mulai banyak yang mudik... Di sela-sela waktu masih aja nih saya update tutorial buat temen-temen jagocoding sekalian...
Lebih terperinciFacebook App dengan Javascript
Facebook App dengan Javascript Oleh: Dewi Rosalin Hampir semua pengguna internet tidak asing lagi dengan Facebook, bahkan sudah memiliki akun Facebook. Bagi pemilik website hal ini dapat mambantu untuk
Lebih terperinciConditional PRAKTIKUM PHP Conditional, Array & Perulangan di PHP
PRAKTIKUM PHP 4 1. Conditional, Array & Perulangan di PHP Tutorial Conditional, Array & Perulangan di PHP ini akan menjelaskan tentang Conditional atau penggunaan "if" dan "else", dilanjutkan dengan penjelasan
Lebih terperinciMODUL 11 MEMBUAT LOGIN USER
MODUL 11 MEMBUAT LOGIN USER Halaman web adalah suatu halaman rumah di dalam dunia maya, di sini kita dapat menampilkan tentang segala inspirasi, imajinasi, mimpi maupun uneg-uneg sekalipun. Ibarat sebuah
Lebih terperinciAJAX dengan jquery Part 1
AJAX dengan jquery Part 1 Oleh: Cecep Yusuf Kali ini saya akan share tutorial AJAX dengan jquery. Dengan menggunakan jquery, penggunaan AJAX akan jauh menjadi lebih mudah. Penjelasan Kali ini saya akan
Lebih terperinciPOLITEKNIK ELEKTRONIKA NEGERI SURABAYA
WEB DESAIN Pengenalan JavaScript Alfira Rizky Ayuputri 4103141039 3 D3 Multimedia Broadcasting B Dwi Susanto, S.ST, MT. D3 Teknologi Multimedia Broadcasting Departemen Multimedia Kreatif POLITEKNIK ELEKTRONIKA
Lebih terperinciAJAX Tutorial. Contoh AJAX Dasar 1
Contoh AJAX Dasar 1 Setelah Anda mengenal dasar-dasar tentang konsep AJAX, XML dan Javascript, berikut ini akan kita bahas mengenai contoh aplikasi AJAX dasar. Pada contoh ini kita akan membuat aplikasi
Lebih terperinciMODUL PEMOGRAMAN WEB II STMIK IM BANDUNG MODUL PEMOGRAMAN WEB II. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
1 MODUL PEMOGRAMAN WEB II Oleh: CHALIFA CHAZAR 2 MODUL 10 Penanganan Form HTML Tujuan: Mahasiswa memahami cara penanganan permintaan dalam kode PHP yang dikirimkan melalui form HTML untuk menyelesaikan
Lebih terperinciBAB IV PENGUJIAN DAN ANALISIS
BAB IV PENGUJIAN DAN ANALISIS Pada bab ini akan dibahas mengenai pengujian sistem serta analisis dari hasil pengujian. Tujuan dilakukannya pengujian ini adalah mengetahui sejauh mana kinerja dari hasil
Lebih terperinciPHP & MYSQL. Ingat, PC anda tidak memerlukan tambahan khusus atau apapun untuk melihat hasil eksekusi kode PHP anda. Mengapa?
Universitas Muhammadiyah Sukabumi Artikel PHP dan Mysql Oleh : dede sulaeman PHP & MYSQL PHP & MYSQL PHP itu apa sih? Penjelasan sederhananya adalah bahwa PHP merupakan sebuah program tambahan yang ada
Lebih terperinciBAB V DESAIN WEB CSS
BAB V DESAIN WEB CSS A. KOMPETENSI DASAR Memahami konsep dan strategi desain web yang rapi berbasis HTML dan CSS/CSS3. Mampu mengoptimalkan fitur-fitur CSS dalam desain web. Mampu memanfaatkan pendekatan
Lebih terperinciLimitasi Text Input dengan Javascript
Limitasi Text Input dengan Javascript Oleh: d-newbie Assalamualaikum. wr.wb.sampai jumpa kembali pada kesempatan kali ini saya akan menulis tutorial tentang limitasi inputan dengan menggunakan javascript,
Lebih terperinciTag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input, textarea, select dan option.
Form Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web Tag
Lebih terperinciMembuat Login Pop Up Dengan JqueryUI
Membuat Login Pop Up Dengan JqueryUI Oleh: Dadan Berawal dari maraknya tayangan goyang di telivisi. Terinspirasi juga untuk membuat efek goyang pada website saya. Hehe kagak nyambung nih ilustrasi ceritanya
Lebih terperinciLisensi Dokumen: Uraian Kasus :
Uraian Kasus : Pada kasus ini seorang mahasiswa ingin membuat Program sederhana tentang Nomor Handphone teman-temannya untuk mengantisipasi kehilangan HPnya atau HP Error sehingga perlu di Flash ulang
Lebih terperinciTutorial CakePHP Dasar Part IV - Searching
Tutorial CakePHP Dasar Part IV - Searching Oleh: Cecep Yusuf Masuk ke Serial Tutorial CakePHP bagian ke IV, kali ini kita akan belajar membuat searching dengan CakePHP. Level Newbie dan dianjurkan mengikuti
Lebih terperinciBeralih dari Input Submit ke Button dan Cara Mudah Membuat Button Bootstrap
Beralih dari Input Submit ke Button dan Cara Mudah Membuat Button Bootstrap Oleh: Arinadi Nur Rohmad Kenapa beralih dari Input Submit ke Button? Ya, menurut saya button lebih Power Full dari pada Input
Lebih terperinciLampiran 1. Flowchart perancangan sistem
Lampiran 1. Flowchart perancangan sistem Mulai Identifikasi Data Desain Program Desain Basis Data Input Data Desain Layout Programming Diagnosa Program idak Benar idak a Uji ampilan Data Benar idak a Dokumentasi
Lebih terperinciMembuat Scrollspy Dengan Bootstrap
Membuat Scrollspy Dengan Bootstrap Oleh: Hasyemi Rafsanjani Asyari Hai JagoCodingers. Apa kabar? Pernah ngga kalian membuka sebuah website lalu ada menu link navigasi yang akan terupdate atau terlihat
Lebih terperinciMembuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 2]
Membuat Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4 [Part 2] Oleh: Arinadi Nur Rohmad Episode System Sign-Up/Registerasi/Daftar User Asalamualaikum, Setelah di
Lebih terperinciMODUL PEMROGRAMAN WEB
MODUL PEMROGRAMAN WEB SESSION & COOKIE Rajif Agung Yunmar, S.Kom STMIK AMIKOM Yogyakarta 2011 DAFTAR ISI Session & Cookie... 1 1. Session... 2 2. Cookie... 4 3. Program Autentikasi... 5 Daftar Pustaka...
Lebih terperinci