Facebook
RSS

Belajar JQUERY Bagian 2, Simple Slide Panel

Kali ini saya mendokumentasikan latihan saya belajar JQUERY dengan effect Toogle. Saya mencoba membuat Simple Slide Panel.
Jquery Toggle() Effect adalah gabungan dari fungsi Hide dan Show.
Sintaknya:  $(selector).toggle(speed, callback, switch)
Keterangan parameter:
-       Speed : menentukan kecepatan slide. Dapat diisi dengan miliseconds(misal:1500), “slow”, “normal”, “fast”.
-       Callback : Suatu fungsi yang akan dijalankan apabila efek show selesai dijalankan.
-       Switch : bernilai boolean. True-menampilkan elemen, False-menyembunyikan elemen. Jika parameter ini diset, parameter speed dan callback tidak dapat digunakan.
Saya mencoba menggunakan CSS juga untuk mengatur tiap elemen.
Berikut sintaknya:




























Dan berikut ini adalah sintak JQuery-nya









Dan aplikasi keduanya:








Referensi:

[ Read More ]

Belajar JQUERY bagian 1

Memulai JQUERY


JQuery merupakan sebuah file dalam bentuk .js. Kita dapat men-download dari situs resminya,. Simpan Jquery.js tersebut pada directory yang kita tentukan. JQuery siap digunakan.

Sebagai langkah awal, kita ucapkan salam kepada JQuery, dengan membuat web (html) dengan menggunakan JQuery. Hello JQuery…. ;D

Penggunaan JQuery pada HTML harus diawali dengan penulisan kode
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
src="jquery-1.7.2.js – mengacu pada file JQuery yang kita simpan pada directory. Tentu saja jika kita menyimpan file html dan JQuery secara terpisah, kita juga harus mencantumkan nama folder/directory di sana.

Sekilas tentang Syntax JQuery:
Misal : $(this).hide()

·  $ : tanda untuk mendefiniskan jQuery
·  (this) : kode di dalamnya adalah selector yang menunjukkan elemen yang dipilih atau dituju.
·  action (): adalah action dari JQuery untuk diterapkan pada elemen. Contoh: .hide, .show, dll.

Berikut ini adalah script Aplikasi “Hello World”:
*klik pada gambar untuk memperjelas



Ketika aku mulai debug code ini, rasanya, Wuaw… Thanx to www.desrizal.com  ^^…
Ini merupakan langkah awal belajar Jquery yang mengesankan.
[ Read More ]

Belajar Membuat Menu Navigasi Bagian 1


*klik pada gambar untuk memperjelas tampilan.

Sekarang saya akan mendokumentasi  tentang bagaimana membuat kotak menu navigasi.  Pada bagian 1 ini, pemahaman saya adalah, menu navigasi kotak dibentuk oleh ‘block’.
Pertama, saya buat external stylesheet bernama “nav.css”.














Saya aplikasikan css di atas pada tampilan html, ‘MyNav.html’.










Maka, tampilan navigasi akan seperti berikut.



[ Read More ]

Membuat Template dengan CodeIgniter Bagian 1

Kali ini saya belajar mengatur template dengan framework CodeIgniter.
Untuk bagian pertama ini, saya belajar bagaimana menyusun template dengan Controller dan View pada CodeIgniter. Sekilas sebagai pelengkap dokumentasi ini, pemahaman sederhana saya tentang Controller adalah suatu class dalam konsep OOP. Sedangkan View adalah sebagai sarana untuk menampilkan perintah-perintah dan nilai dari Controller situs judi bola

Saya mencoba merancang template secara umum, yakni memiliki header, topmenu, content, dan footer.

*Klik pada gambar untuk memperjelas





















Dalam menyusun template di CodeIgniter, antara elemen satu dengan yang lain dipisahkan. Maksudnya antara Header, Menu, dll tidak berada pada file yang sama. Oleh karena itu kita harus membuat elemen-elemen tersebut.

Berikut ini adalah pohon directory saya. Saya menggunakan CI 1.7.2.






















Oleh karena itu BASE URL pada system/application/config/config.base_url, saya ubah sebagai berikut:






Sehingga jika saya ketikkan pada browser, http://localhost/Mytemplates/index.php, akan muncul welcome_message dari CodeIgniter. Ini adalah tampilan dari class Welcome pada controller default-welcome.













Berikutnya adalah membuat masing-masing elemen. Saya simpan pada folder –layout-pada root directory tadi.
1.) header.php








2.) topmenu.php








3.) content.php









4.) footer.php








Kita siapkan Controller untuk menampikan elemen-elemen tersebut, C:\xampp\htdocs\MyTemplates\system\application\controllers\Home.php

Home.php ini akan menampilkan template.php pada view, yang menampung header.php, topmenu.php, dll. Sebenarnya dapat juga kita dapat menampilkan elemen-elemen ini dari Home.php. Tapi saya gunakan template.php untuk latihan berikutnya dan agar file lebih rapi.

Home.php












Sedangkan template.php ditempatkan pada Views. à C:\xampp\htdocs\MyTemplates\system\application\views\layout\template.php.








Berikutnya debugging.

http://localhost/Mytemplates/index.php/home








Kesimpulan:
Pemakaian framework pada penyusunan layout/template adalah agar programmer lebih mudah dalam proses modifikasi pada tiap elemen. Kerangka dari apa yang kita tulis sebelumnya secara mudah dapat digambar sbb:

[ Read More ]

VB.NET Form Tutorial - Font Pad


Font Pad merupakan aplikasi seperti notepad pada Windows. Kali ini kita akan mencoba membuatnya sendiri dengan VB.NET.
Tutorialnya dapat kalian download pada link
FontPad_Tutorial.pdf
berikut ini project yang dapat di download:
FontPad_project_part_1
[ Read More ]