Kursus Kode Indonesia

Kamis, 08 Oktober 2015

KursusKode - Menulis merupakan kegiatan sehari-hari bagi setiap individu yang memperlukannya. Pelajar memperlukan menulis untuk keperluan belajarnya, Pegawai kantor perlu menulis untuk menulis Draft penting sebagai catatan pekerjaanya,dll. Ketika menulis maka kita akan menggunakan tangan kita untuk memasukkan huruf satu per-satu ke setiap tulisan kata yang kita buat. Inilah yang menjadi landasan atau ide saya dalam membuat tutorial kali ini. Saya akan membahas tentang cara memasukkan kata yang kita sudah buat sebelumnya menjadi animasi yang secara otomatis memasukkan huruf satu-persatu sendiri ke dalam komponen HTML yang sudah kita buat sehingga menimbulkan efek animasi layaknya orang yang sedang mengetik.

jQuery akan memudahkan kita dalam membuat aplikasi pengetikan otomatis pada tutorial kali ini, jadi buat anda yang belum mempunyai jQuery harap sangat anda mendownloadnya terlebih dahulu di situsnya jQuery (jQuery.com).

Berikut demo aplikasi yang sudah jadi.

Sebelum membuat aplikasinya, siapkan dahulu komponen HTML yang akan anda buat. Buatlah sebuah file HTML dengan nama terserah anda, disini saya kasih contoh misal ketikOtomatis.html lalu simpan.


<!DOCTYPE html>
<html>
   <head>
      <title>ketikOtomatis jQuery [KursusKode]</title>
   </head>
   <body>
  
    </body>
</html>

Komponen HTML anda sudah siap. Langkah selanjutnya adalah anda memasukkan file jQuery tadi yang sudah anda download ke project ketikOtomatis.html anda. dengan menambahkan script berikut sebelum tag </body> .
Dan buat juga sekaligus file script.js dan masukkan ke folder yang sama tempat anda menyimpan project anda.


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

Anda hanya perlu memasukkan file jQuery anda ke dalam satu folder dimana anda menyimpan file ketikOtomatis tadi yang sudah anda siap agar anda tidak perlu lagi mengedit bagian src= pada script diatas. Nah, sekarang saatnya anda menambahkan sebuah tag element div dengan id nya adalah "target". ID dengan nama target disini kita buat untuk penampung text yang akan kita buat menjadi auto ketik (otomatis mengetik).

Masukkan script dibawah ini sesudah tag <body>


   <div id="target"></div>

Langkah selanjutnya adalah masukkan script javascript dibawah ini kedalam komponen file script.js anda.


var kata = "Hai sobat KursusKode apa kabarmu hari ini?"; //Kata yang akan muncul
var inkata = 0; // Index kata
var kecepatanKataMuncul = 200; //Kecepatan huruf yang akan kita munculkan

   setInterval(function(){
      var target = $("#target"); //Inisialisasi div id target      
         target.append(kata[inkata]); //Memasukkan kata satu persatu ke html
      inkata++; //index kata selalu bertambah
   }, kecepatanKataMuncul); //Timing 200 ms perhuruf yang dimasukkan

Untuk mengganti kata yang akan muncul nanti, anda hanya perlu mengedit pada bagian var kata, sementara untuk mengatur kecepatan per-huruf yang muncul anda hanya perlu mengedit pada bagian var kecepatanKataMuncul.
Sekarang anda simpan.

Atau anda bisa melihat full source kode-nya dibawah ini.

File ketikOtomatis.html


<!DOCTYPE html>
<html>
   <head>
      <title>Hai sobat KursusKode</title>
   </head>
   <body>
      <div id="target"></div>


      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="script.js"></script>
   </body>
</html>

File script.js


var kata = "Hai sobat KursusKode apa kabarmu hari ini?"; //Kata yang akan muncul
var inkata = 0; // Index kata
var kecepatanKataMuncul = 200; //Kecepatan huruf yang akan kita munculkan

setInterval(function(){
      var target = $("#target"); //Inisialisasi div id target
      target.append(kata[inkata]); //Memasukkan kata satu persatu ke html
      inkata++; //index kata selalu bertambah
   }, kecepatanKataMuncul); //Timing 200 ms perhuruf yang dimasukkan

Selamat mencoba.

Rohman Masyhar

02.26

2 response

Senin, 05 Oktober 2015

KursusKode - CSS3 membuat sebuah inovasi yang sangat menakjubkan sehingga kita bisa menggabungkan komponen HTML dann CSS menjadi beberapa bangun yang bagus.
Beberapa bangun dasar itu bisa anda buat hanya menggunakan kode CSS dan HTML yang ada di dalamnya, dan semakin rumit bangun tersebut berarti anda siap untuk lebih keras bertarung dengan kode-kode di dalamnya. Dan bersiaplah untuk sakit kepala.

Kali ini Kursus Kode akan mengajarkan bagaimana cara membuat sebuah gambar Hati atau Love menggunakan tatanan kode CSS3 digabungkan dengan HTML.

Love Hati Menggunakan CSS3 dan HTML5

Untuk langkah awal membuat gambar Hati atau Love kali ini anda perlu membuat sebuah bangun persegi. Anda bebas mewarnai-nya sesuai selera anda disini sebagai bahan pembelajaran, Kursus Kode menggunakan warna merah saja karena melambangkan warna Hati atau Love itu sendiri.


.hati {
   background-color: red;
   width: 100px;
   height: 100px;
}


<!DOCTYPE html>
<html>
   <head>
      <title>Hati/Love dengan CSS3 [KursusKode]</title>
   </head>
   <body>
      <div class="hati"></div>
   </body>
</html>

Maka jika anda buka di browser, maka outputnya akan sama kaya gambar dibawah ini.

Membuat Hati atau Love dengan CSS3 | Preview Percobaan 1

Langkah selanjutnya adalah membuat bangun setengah lingkaran pada class="hati". Saya akan memberi warna PINK pada pembelajaran kali ini agar terlihat jelas (Tidak tubrukan dengan warna merah).

Anda cukup mengganti atau mengedit CSS dari class .hati menjadi seperti di bawah ini.


.hati {
   background-color: red;
   width: 100px;
   height: 100px;
   border-top : 50px solid PINK; /* Warna PINK pada setengah lingkaran */
   border-radius: 50px 50px 0 0;
}

Hasilnya akan seperti ini

Membuat Hati atau Love dengan CSS3 | Preview Percobaan 2

Nah, sudah mulai kelihatan kan bangun-nya.

Sekarang kita akan mencoba membuat dua buah element class .hati, disini saya akan mengedit element dari HTML menjadi seperti ini.


<!DOCTYPE html>
<html>
   <head>
      <title>Hati/Love dengan CSS3 [KursusKode]</title>
   </head>
   <body>
      <div class="hati kiri"></div>
      <div class="hati kanan"></div>
   </body>
</html>

Perlu anda perhatikan, pada kode diatas saya menambah 1 element hati lagi. 1 element hati dengan class kiri, dan satu lagi dengan class kanan.
Setelah anda mengedit file HTML anda, sekarang anda coba memberi jarak antara class="hati kiri" dengan class="hati kanan" dengan menggunakan margin.

Tambahkan di CSS anda script ini.


.hati.kanan {
   margin-left:35px;
}

Maka outputnya akan seperti dibawah ini.

Dan ubah CSS class hati anda menjadi. Menambah posisi Absolute agar sejajar.


.hati {
   background-color: red;
   width: 100px;
   height: 100px;
   border-top : 50px solid PINK;
   border-radius: 50px 50px 0 0;
   position: absolute; /* Penambahan */
}

Membuat Hati atau Love dengan CSS3 | Preview Percobaan 3

Sekarang kita akan merotasi kedua class hati. untuk class="hati kiri" saya akan merotasi menjadi -45 Derajat, sementara untuk class="hati kanan" saya akan merotasi menjadi 45 Derajat.
Untuk melakukannya tambahkan Script CSS dibawah ini di kode CSS anda.


.hati.kiri {
   transform:rotate(-45deg);
   -webkit-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
   -ms-transform:rotate(-45deg);
   -o-transform:rotate(-45deg);
}
.hati.kanan {
   margin-left: 35px;
   transform:rotate(45deg);
   -webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
   -ms-transform:rotate(45deg);
   -o-transform:rotate(45deg);
}

Sekarang coba anda preview di browser anda.
Maka penampakannya akan seperti dibawah ini.

Membuat Hati atau Love dengan CSS3 | Preview Percobaan 4

Untuk mengubah warna PINK dari gambar tersebut, anda hanya perlu mengedit CSS ini.


.hati {
   background-color: red;
   width: 100px;
   height: 100px;
   border-top : 50px solid RED; /* GANTI WARNA INI */
   border-radius: 50px 50px 0 0;
   position: absolute; 
}

Dan hasil akhirnya adalah seperti ini.