Showing posts with label Belajar jQuery. Show all posts
Showing posts with label Belajar jQuery. Show all posts

Thursday, June 9, 2016

jQuery : Accordion

Accordion

Salah satu fungsi dari jQuery adalah membuat Accordion menu dimana Accordion menu ini dapat meringkas tampilan dan juga dapat memperindah tampilan web anda. Pada artikel ini saya akan membuat Accordion sederhana yang kita ciptakan disini membutuhkan sedikit fungsi jQuery tanpa plugin. Oke langsung saja yang pertama kita akan membuat daftar list untuk menu yang akan kita buat.

Ketikkan atau copy listing program berikut :

<html>
<head>
<title></title>
</head>
<body>
<ul class="accordion">
<li>Web Master</li>
<ul>
<li><a href="#">HTML CSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">PHP MYSQL</a></li>
</ul>
<li>Web Desaign</li>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Bootsrap</a></li>
</ul>
</body>
</html>

Berikut syntax css sederhananya yang saya buat :

<style>
.accordion {list-style: none; width: 250px; font-family:calibri}
.accordion li {background-color:#0000FF; color;#FFFFFF; font-weight: bold;
margin:1px; cursor: pointer; padding:8px}
.accordion ul{padding:0; display:none}
.accordion ul li {font-weight: normal; cursor: auto;
background-color:#fff; padding:7px;
color:#333}
.accordion a{text-decoration: none}
.accordion a:hover{text-decoration:underline}
</style>


Selanjutnya untuk membuat efek acordionnya tambahkan ini :

<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(e){
$('.accordion>ul').hide();
$(".accordion>li").click(function(){
if(false==$(this).next().is(':visible')){
$('.accordion>ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
});
</script>

Skrip Lengkapnya

<html>
<head>
<title></title>
</head>
<body>
<ul class="accordion">
<li>Web Master</li>
<ul>
<li><a href="#">HTML CSS</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">PHP MYSQL</a></li>
</ul>
<li>Web Desaign</li>
<ul>
<li><a href="#">jQuery</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Bootsrap</a></li>
</ul>
<style>
.accordion {list-style: none; width: 250px; font-family:calibri}
.accordion li {background-color:#0000FF; color;#FFFFFF; font-weight: bold;
margin:1px; cursor: pointer; padding:8px}
.accordion ul{padding:0; display:none}
.accordion ul li {font-weight: normal; cursor: auto;
background-color:#fff; padding:7px;
color:#333}
.accordion a{text-decoration: none}
.accordion a:hover{text-decoration:underline}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(e){
$('.accordion>ul').hide();
$(".accordion>li").click(function(){
if(false==$(this).next().is(':visible')){
$('.accordion>ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
});
</script>
</body>
</html>

Hasilnya :




Coba anda praktekan dan perhatikan, efek saat satu menu di klik, maka submenu nya akan dimunculkan. Sekarang coba jika salah satu menu yang lainnya di klik, maka submenu sebelumnya akan di sembunyikan lagi dan submenu pada menu yang di klik akan muncul.

Nah sekarang giliran kalian untuk mengembangkannya lagi supaya lebih menarik.



Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)

Reviewer: FajarYusuf.Com
ItemReviewed: jQuery : Accordion

j-Query : Datepicker

Datepicker


Bagi para developer web mesti tidak merasa asing lagi dengan jQuery DatePicker. Ini biasa digunakan dalam pengembangan web yang memerlukan input penanggalan berdasarkan kalender yang dilekatkan pada bidang form input.

Cara kerja yang sederhana, DatePicker ini berfokus pada input (klik, atau menggunakan tombol tab) untuk membuka sebuah kalender interaktif dengan sedikit overlay. Pilih tanggal, klik di tempat lain pada halaman (blur input), atau tekan tombol Esc untuk menutup. Jika tanggal yang dipilih, umpan balik ditampilkan sebagai nilai input.

JQuery UI Datepicker adalah plugin sangat dapat dikonfigurasi yang menambahkan fungsi datepicker ke halaman Anda. Anda dapat menyesuaikan format tanggal dan bahasa, membatasi rentang tanggal yang dipilih dan menambahkan tombol dan pilihan navigasi lainnya dengan mudah.

Secara default, kalender datepicker terbuka dengan sedikit overlay ketika bidang teks terkait mencapai fokus. Untuk kalender inline, cukup melampirkan datepicker dengan div atau span.

Sekarang kita buat form input sederhana sebagai tampilan inputannya.

<h1>jQuery UI DatePicker Sederhana</h1>
<form>
    <label>Tanggal: </label>
    <input type="text" id="datepicker" />
</form>

Beberapa file jQuery dibawah ini perlu ditambahkan untuk menampilkan inputan penanggalan supaya jQuery DatePicker ini bisa berfungsi dengan baik, terdapat dua JavaScript dan satu stylesheet jQuery:

  1. jquery-1.10.2.js
  2. jquery-ui.js
  3. jquery-ui.css
Kita masukan ketiga file di atas setelah elemen <head>
<link rel="stylesheet" href="jquery-ui.css" type="text/css"/>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>

Nah, script ini yang paling penting untuk dimasukan, lihat atribut id yang tertera di dalam form input dengan yang diberi nilai datepicker, sehingga script-nya dibuat:


<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
</script>

Kita tambahkan sedikit style untuk melengkapi tampilan akhir nanti.

<style>
  body {
    background: #f5f5f5;
    margin: 0;
    padding: 20px 0 0 0;
    text-align: center;
    font-size: 16px;
  }
  h1 {
    color: #222;
    font-size: 24px;
  }
</style>

Berikut ini script lengkap cara membuat input tanggal dengan jQuery DatePicker menjadi seperti ini.

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker Sederhana</title>
  <link rel="stylesheet" href="jquery-ui.css" type="text/css"/>
  <script src="jquery-1.12.4.min.js" type="text/javascript"></script>
  <script src="jquery-ui.js" type="text/javascript"></script>
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
  <style>
  body {
    background: #f5f5f5;
    margin: 0;
    padding: 20px 0 0 0;
    text-align: center;
    font-size: 16px;
  }
  h1 {
    color: #222;
    font-size: 24px;
  }
  </style>
</head>
<body>
<h1>jQuery UI DatePicker Sederhana</h1>
<form>
    <label>Tanggal: </label>
    <input type="text" id="datepicker" />
</form>

</body>
</html>

Jika berhasil tampilan akhirnya akan seperti ini:





Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)






Reviewer: FajarYusuf.Com
ItemReviewed: j-Query : Datepicker

Wednesday, June 8, 2016

j-Query : Berkreasi Dengan Plugin Jquery UI

Berkreasi Dengan Plugin Jquery UI

logo j-Query

jQuery UI (user interface merupakan plugin yang paling populer di kalangan programmer jQuery. Karena sampai-sampai dijadikan satu manual dengan manual jQuery di website resminya. jQuery UI dibuat oleh Paul Bakaus yang bekerja sama dengan stefan Petre untuk menciptakan efek-efek yang canggih dan komponen library pelengkap jQuery, diantaranya :
  • Accordion
  • Datepicker
  • Tabs
  • Dialog
  • Progressbar
  • Slider
  • Effect/animasi
  • Drag and Drop
  • Dan lain-lain
Selanjutnya, bagian berikut akan membahas cara penggunaan beberapa komponen library dari jQuery UI.


Instalasi jQuery UI

1.Download jQuery UI di http://jqueryui.com/download/ maka akan tampil halaman downloadnya, Scrol ke bawah sampai ketemu button download, klik download maka file jQuery UI (jquery-ui- 1.11.4.custom.rar) akan tersimpan di komputer anda.

2. Filenya masih berbentuk kompresi (jquery-ui-1.11.4.custom.rar), oleh karena itu gunakan program winzip/winrar untuk mengekstraknya, nanti semua file jquery-ui akan ditemukan pada folder jquery-ui-1.11.4.custom

3. Untuk mencobanya, silahkan klik versi demonya yang ada di folder jquery-ui-1.11.4.custom/, nanti klik 2x file index.html pada folder tersebut, maka akan tampil halaman demo dari jQuery UI, misalnya coba library Tabs pada bagian widget, maka demonya akan tampil dibagian tengah. Silahkan dicoba beberapa demo library jQuery UI lainnya, seperti draggable, accordion, progressbar, Dialog, Effect, dan lain-lain. Keren kan??? 

Sekarang pertanyaannya, bagaimana menerapkan library jQuery UI pada website kita? Ikuti aja pembahasan berikutnya.





Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)






Reviewer: FajarYusuf.Com
ItemReviewed: j-Query : Berkreasi Dengan Plugin Jquery UI

Saturday, May 28, 2016

jQuery : Effect

Effect

Effects adalah sesuatu mengenai menampilkan dan menyembunyikan suatu elemen,menggerakan elemen, dan menganimasikan elemen tersebut.

A. Efek Fade()

Efek fade digunakan untuk menghilangkan atau menampilkan elemen secara perlahanlahan, biasanya digunakan untuk transisi/pergantian suatu objek dengan objek yang lain, sehingga transisinya terlihat lebih halus. Ada 3jenis efek fade, yaitu fadeln,fadeOut,danfadeTo. Untuk lebih jelasnya, lihat contoh sederhana pada skrip berikut :

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$(".fadeout").click(function(){
$("#kotak").fadeOut("slow");
});
$(".fadein").click(function(){
$("#kotak").fadeIn("slow");
});
$(".fadeto3").click(function(){
$("#kotak").fadeTo("slow",0.3);
});
});
</script>
<style type="text/css">
#kotak{
width:250px;
height:180px;
background:yellow;
border:2px solid black;
}
</style>
<title>Efek FadeIn, FadeOut dan FadeTo</title>
</head>
<body>
<div id="kotak"></div><br/>
<button class="fadeout">Fade Out</button>
<button class="fadein">Fade In</button>
<button class="fadeto3">Fade To 0.3</button>
</body>
</html>

Sekarang coba jalankan skrip diatas, maka akan tampil sebuah kotak berwarna kuning dan tiga buah tombol. Coba klik tombol fade out, maka kotak akan menghilang, kemudian coba klik tombol fade in untuk menampilkan kotak kembali. Dan terakhir coba klik tombol fade to 0.3, maka kotak akan terlihat pudar warnanya Kita juga bisa mengatur waktu untuk efek fade dengan menggunakan fungsi set time Out,misalnya dalam waktu3detik, maka elemen teksnyaakan menghilang dari pandangan.

 

B. Efek slide()

Efek slide digunakan untuk menghilangkan atau menampilkan elemen seperti membuka/menutup sesuatu. Ada tiga jenis slide, yaitu SlideUp, SlideDown, dan SlideToggle. Untuk lebih jelasnya, lihat contoh pada skrip berikut:

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$(".flip").click(function(){
$(".pesan").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.pesan {
height:120px;
display:none;
}
div.pesan, p.flip{
margin:0px;
padding:0px;
text-align:center;
background:lightyellow;
border:1px solid black;
}
</style>
<title>efek slide</title>
</head>
<body>
<div class="pesan">
Sukses bukanlah kunci kebahagiaan<br/>
Kebahagiaanlah kunci kesuksesan<<p>
Jika senantiasa melakukan segala sesuatu dengan penuh
cinta, maka anda akan sukses</p>
</div>
<p class="flip"> Tampilkan/sembunyikan pesan</p>
</body>
</html>

Pada Skrip diatas, kita hanya menggunakan sebuah fungsi slide, yaitu slideToggle yang berfungis menberikan efek slide apabila pada eleen belum ada efek slidenya, sedangkan menghilangkan efek slide apabila pada elemen tersebut sudah ada efek slidenya, jadi fungsi slideToggle mencakup dua buah fungsi slide lainnya, yaitu slideUp dan slideDown.

Sekarang, coba jalankan skrip diaas, maka akan tampil teks Tampilkan/Sembunyikan
pesan, coba klik pada teks tersebut, maka akan tampil pesan dengan efek slide.



C. Efek Animate()

Efek animate digunakan untuk menggerakkan/menganimasikan suatu elemen.
Adapun sintaksnya:
$(selector).animate({params},[duration],[easing],[callback])

Keterangan
  • Paramsyang mendefinisikan properti dari elemen yang akan dianimasikan dan banyak properti yang bisa dianimasikan dalam waktu yang sama.
  • Durationyang mendefinisikan berapa waktu yang digunakan untuk menjalankan animasi, contohnya fast, slow, normal, atau bisa juga dalam bentuk milisecond, contohnya 5000=5 detik.
Untuk lebih jelasnya, lihat contoh animasi sederhana pada skrip berikut:

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$(".mulai").click(function(){
$("#kotak").animate({left:"400"},"slow")
.animate({top:"-160",height:"200",width:"200"},"slow")
.animate({left:"0",height:"100",width:"100"},"slow")
.animate({top:"0"},"slow")
.slideUp()
.slideDown("slow");
});
});
</script>
<style type="text/css">
#kotak {
 position:relative;
 width:100px;
 height:100px;
 background:red;
 }
</style>
</head>
<body>
<br/><br/><br/><br/><br/>
<button class="mulai">Jalankan</button>
<br/><br/><br/><br/><br/><br/><br/>
<div id="kotak"></div>
</body>
</html>

Sekarang coba jalankan skrip diatas, maka akan tampil sebuah kota berwarna merah dengan tombol Jalankan diatasnya. Coba klik tombol Jalankan, maka kota akan bergerak dari kiri ke kanan, kemudian membesar dan bergerak atas lalu ke kanan, lalu mengecil lagi ke ukuran semula dan terakhir bergerak ke bawah menuju posisi semula sambil melakukan efek slide.







Jangan Lupa Komen , Share Dan Likenya :)



Reviewer: FajarYusuf.Com
ItemReviewed: jQuery : Effect

jQuery : Events

Events

Sebelumnya kita telah belajar Selector yang mencari elemen-elemen apa saja yang akan dilakukan operasi terhadapnya, maka Event memutuskan kapan dilakukan operasi tersebut, misalnya elemen yang telah dipilih (Selectors) akan dilakukan operasi terhadapnya setelah diklik (click) atau setelah klik 2x (dblclik), setelah mouse berada diatas objek (hover), dan sebagainya.

 A. Event Click()

Event click dijalankan setelah terjadi klik pada suatu elemen yang telah ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$('a').click(function(){
alert("Selamat datang di website Fajar Yusuf")
});
});
</script>
</head>
<body>
<a href="www.fajarmyusuf.blogspot.co.id">Klik disini untuk
menuju halaman web Fajar Yusuf</a>
</body>
</html>



B. Event dblclick()

Event dblclick akan dijalankan setelah terjadi klik 2x pada suatu elemen yang telah ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("div").dblclick(function(){
$(this).css({background:"red"});
});
});
</script>
<style type="text/css">
div {
background:yellow;
width: 60px;
height:60px;
float:left;
margin:10px;
cursor:pointer;
}

</style>
<title>Latihan double klik</title>
</head>
<body>
<p>klik dua kali pada setiap kotak untuk mengubah
warnanya</p>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>


C. Event mouseover()

Event mouseover akan dijalankan ketika kursor mouse melewati elemen yang ditentukan.

 

D. Event mouseleave()

Event mouseleave akan dijalankan ketika kursor mouse meninggalkan elemen yang ditentukan.

Untuk lebih jelasnya penggunaan event mouseover dan mouseleave, perhatikan skrip berikut ini :

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("div").mouseover(function(){
$(this).css({background:"red"});
});

$("div").mouseleave(function(){
$(this).css({background:"yellow"});
});
});
</script>
<style type="text/css">
div {
background:yellow;
width: 60px;
height:60px;
float:left;
margin:10px;
cursor:pointer;
}
</style>
<title>Latihan double klik</title>
</head>
<body>
<p>Letakan Kursor pada setiap kotak untuk mengubah
warnya</p>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>










Reviewer: FajarYusuf.Com
ItemReviewed: jQuery : Events

jQuery : Memahami Selector & Instal, latihan jQuery

Memahami Selector

Selector berfungsi untuk memilih/mengambil elemen-elemen tertentu yang ingin dilakukan operasi terhadap elemen tersebut atau manipulasi terhadap elemen-elemen tersebut.

Adapun elemen-elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut :
1. Nama Tag
2. Id
3. Class

Untuk mengetahui bagaimana cara selector dalam memilih elemen-elemen tersebut, akan
disajikan beberapa contoh sederhana pada bagian berikutnya.

Selector Tag
Cara menggunakan selector tag adalah dengan langsung menyebut nama tag elemennya.

Selector Id
Cara menggunakan Selector id adalah dengan menyertakan tanda pagar(#) sebelum nama
elemennya.

Selector Class
Cara menggunakan Selector class ini adalah dengan menyertakan tanda titik (.) sebelum
nama elemennya. Latihan-latihan berikut untuk menjelaskan teori diatas.


Sekarang untuk penginstalan JQuery silakan kalian copykan code berikut yang ada didalam link kotak listing lalu beri nama jquery-1.12.4.min.js :


Taruh File didalam folder yang sama seperti kalian membuat file latihan yang akan saya berikan, sebagai contoh htdocs/latihanjQuery/jquery-1.12.4.min.js .


Untuk Contoh pertama silakan kalian buka notepad, notepad++, sublime text,atau dream weaver kalian dan masukkan listing berikut :
Latihan1
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
alert ("Selamat datang");
});
</script>
</head>
<body>
</body>
</html>


Latihan2
<html>
<head>
<Script language="javascript" src="jquery-1.12.4.min.js" ></script>
<Script language="javascript">
$(document).ready(function(){
$("input").click(function(){
alert("hello jquery!");
});
});
</script>
</head>
<body>
<input type="submit" value="click me"/>
</body>
</html>



Latihan3
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js">
</script>
<script type="text/javascript">
$("document").ready(function(){
$("#p1").css("color","red");
});
</script>
<title>latihan 3</title>
</head>
<body>
<p id="p1">Ini isi paragraf 1 </p>
<p id="p2">Ini isi paragraf 2 </p>
</body>
</html>


Latihan4
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("#judul").addClass("merahkuning");
$(".sub1").addClass("kuninghitam");
});
</script>
<style type="text/css">
.merahkuning {
color: red;
font-weight: bold;
background-color:yellow;
padding:3px;
}
.kuninghitam {
color:yellow;
background-color:black;
}
</style>
</head>
<body>
<h1>Judul Buku Kuliah Pemrograman Web </h1>
<ol id="judul">
<li class="sub1">Pemrograman PHP</li>
<li>Database mysql</li>
<li class="sub1">Mempercantik web dengan jquery</li>
</ol>
</body>
</html>



Jika ada pertanyaan silakan melalui komentar :)













Reviewer: FajarYusuf.Com
ItemReviewed: jQuery : Memahami Selector & Instal, latihan jQuery

Friday, May 13, 2016

Mengenal Lebih jQuery

Mengenal Lebih jQuery

Apa itu jQuery?
jQuery sendiri adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya jQuery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “Write less, do more”.
Mengapa memilih jQuery?
Ada beberapa alasan mengapa lebih baik menggunakan jQuery daripada library lainnya, antara lain:
  • Kompatibel dengan hampir seluruh browser
  • jQuery telah digunakan oleh website-website raksasa
  • Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)
  • Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di http://jquery.com
  • Didukung oleh banyak komunitas
  • Disupport oleh plugin yang lengkap
  • Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb
  • Open source atau Free
  • jQuery lebih diminati oleh para developer web saat ini
Apa kemampuan yang dimiliki jQuery?
Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita berdecak kagum:
  • Mempermudah akses dan manipulasi elemen tertentu pada dokumen.
  • Mempermudah modifikasi/perubahan tampilan halaman web.
  • Mempersingkat Ajax (Asynchronous Javacsript and XML).
  • Memiliki API (Application Programming Interface).
  • Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.
  • Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.
Bagaimana cara kerja jQuery?
Cara kerja jQuery dapat dijabarkan sebagai berikut, masih menggunakan contoh diatas sebagai penjelasannya.

1. jQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah
ditampilkan semua di halaman web, fungsi yang digunakan adalah:
$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan semua
});
2. Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jQuery menggunakan fungsi Selector.
$("#foto")
$(".sembunyi")
$(".tampil")
3. Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap elemen yang sudah dipilih. Misalnya tombol yang akan menyembunyikan dan memunculkan kembali gambar.
$(".sembunyi").click(function(){
$("#foto").hide("slow");
)};
Dengan memahami cara kerja jQuery, semoga lebih mempermudah untuk mempelajari.







Reviewer: FajarYusuf.Com
ItemReviewed: Mengenal Lebih jQuery

TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.