Sharing Tugas

Jumat, 21 Maret 2014

JQuery UI on ASP.NET

Jika sebelumnya kita sudah tidak asing dengan Javascript Framework seperti jQuery, Mootools, ExtJS atau yang lainnya, pada artikel ini kita akan membahas tentang jQuery UI. jQuery UI merupakan pengembangan dari jQuery yang memudahkan kita untuk membuat UI (User Interface) web yang interaktif dengan berbagai fitur dan theme.
Untuk menggunakan jQuery UI anda dapat mendownload library-nya di http://jqueryui.com. jQuery UI mendukung beberapa fitur menarik diantaranya :

Interactions	Widget	Effect
Draggable	Accordion	Blind	Highlight
Droppable	Dialog	Bounce	Pulsate
Resizable	Slider	Clip	Scale
Selectable	Tab	Drop	Shake
Sortable	DatePicker	Explode	Slide
	ProgressBar	Fold	Transfer

Sekarang kita akan membahas penggunaan salah satu widget jQuery UI DatePicker pada ASP.NET.
1. Tambahkan library jQuery yang telah disediakan ketika kita membuat project baru.

   1: <head runat="server">

   2:     <title>Menggunakan jQuery UI DatePicker pada ASP.NET</title>

   3:     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

   4:     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

   5: </head>

2. Tambahkan library jQuery UI + CSS + Image yang telah anda download dengan melakukan Add Existing Item.

   1: <link href="Style/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />

   2: <script src="Scripts/jquery.ui.core.js" type="text/javascript"></script>

   3: <script src="Scripts/jquery.ui.datepicker.js" type="text/javascript"></script>

Make sure solution project anda sebagai berikut.

3. Berikutnya kita dapat menggunakan textbox Html control maupun server control. Pada contoh ini kita menggunakan textbox server control.

   1: <asp:TextBox ID="txtDatePicker" CssClass="datepicker" runat="server"></asp:TextBox>

4. Tambahkan kode berikut pada <head>, kemudian Run(F5).

   1: <script type="text/javascript">

   2:         $(function () {

   3:             $(".datepicker").datepicker();

   4:         });

   5:     </script>

Kita juga dapat mengkostumasinya dengan animasi, mengganti format tanggalnya, interaksinya, dll. Anda dapat menyimak dokumentasinya lebih lanjut pada http://jqueryui.com/demos/datepicker/

   1: <script type="text/javascript">

   2:         $(function () {

   3:             $(".datepicker").datepicker({

   4:                 dateFormat: 'dd-MM-yy',

   5:                 showOn: 'button',

   6:                 buttonImage: 'images/calendar.png',

   7:                 buttonImageOnly: true,

   8:                 showAnim: 'slideDown'

   9:             });

  10:         });

  11:     </script>

Summary
Dengan penggunaan jQuery UI menyediakan berbagai interaksi, widget, animasi yang memudahkan kita untuk membuat UI yang interaktif. Microsoft juga menyediakan Microsoft Ajax Content Delivery Network (CDN) yang dapat digunakan secara gratis, jadi anda tidak perlu repot-repot untuk mengupload library code jQuery UI, anda dapat menyimaknya disini.

Sumber :
http://mugi.or.id/blogs/danzgreyta/archive/2010/09/23/jquery-ui-on-asp-net.aspx

Mengenal JQuery

JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web menggunakannya. JQuery memiliki slogan “Write less, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
JQuery merupakan library open source dengan lisensi GNU General Public License dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 20 KB dan hanya terdiri dari satu file. Namun demikian, bagi yang menginginkan fungsi lebih, JQuery memungkinkan penambahan fungsionalitas dalam bentuk plugin. Saat ini tersedia ribuan plugin yang dapat diperoleh secara gratis di internet.

Apa yang bisa dilakukan dengan JQuery?

1. Mengakses bagian halaman tertentu dengan mudah.
Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML. JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.
2. Mengubah tampilan bagian halaman tertentu.
CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam mengatur dan mempercantik halaman web. Namun terkadang CSS punya kelemahan yang cukup mengganggu, yaitu beberapa perintah CSS tidak didukung oleh semua browser. Cukup merepotkan jika kita harus mendesign halaman web dengan beberapa CSS sekaligus. Sekali lagi JQuery menawarkan solusi untuk mengatasi hal tersebut. Dengan JQuery, “kesenjangan” yang terjadi antara browser dalam urusan CSS akan tertutup dengan baik.
3. Mengubah isi dari halaman.
Jaman dulu (baca:sebelum JQuery lahir) cukup sulit jika kita akan mengubah sebagian isi dari halaman. Mengubah disini dapat berarti mengganti teks, menambahkan teks atau gambar, mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut dapat dilakukan dengan hanya beberapa baris perintah.
4. Merespond interaksi user dalam halaman.
Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang dipakai dalam menangani event-handling. Javascript sendiri memiliki beberapa event-handling seperti onclick untuk menangani event saat terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah.
5. Menambahkan animasi ke halaman.
Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikannya. Saat ini animasi masih cukup digemari oleh para peselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya. Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing. JQuery sendiri menawarkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan.
6. Mengambil informasi dari server tanpa me-refresh seluruh halaman.
Mengambil informasi dari server tanpa refresh halaman merupakan salah satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Pada penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX, saat ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya.
7. Menyederhanakan penulisan Javascript biasa.
Semboyan JQuery adalah “Write less, do more” atau dengan kata lain kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery.

Download JQuery

Situs resmi JQuery dapat diakses di http://jquery.com/. Dan library JQuery dapat didownload di alamat http://docs.jquery.com/Downloading_jQuery. Tersedia library jQuery dalam 2 (dua) jenis yaitu minified dan uncompressed. Minified jika kita ingin menggunakannya saja dalam website kita (ukuran 18 KB), sedangkan uncompressed jika kita berkeinginan turut serta mengembangkan code jQuery.

Contoh Sederhana JQuery

Penjelasan Program

Pertama, kita harus menyertakan (include) file library JQuery. Pastikan letak dari file library sudah benar.
Perintah-perintah JQuery.
- Baris 8 merupakan perintah inisialisasi dimana saat halaman (dokumen) siap ditampilkan maka jalankan juga perintah yang ada di dalamnya. Hal ini mirip dengan event onLoad yang biasanya diletakkan di tag .
- Baris 9-11 maksudnya adalah mendefinisikan action yang terjadi saat link dengan class=show ( $(‘a.show’) ) diklik (lihat link baris ke-22). Jadi jika link di-klik maka paragraf dengan nama class=jquery ( $(‘p.jquery’) ) akan tampil dengan durasi tampil “slow”. Paragraf yang akan ditampilkan adalah paragraf baris ke-24 sampai 27.
- Baris 13-15 sebaliknya, akan menyembunyikan isi dari paragraf yang mengandung nama class=jquery.
Isi dari halaman. Perhatikan nama class dari masing-masing object.

Referensi :

Jonathan Chaffer, Karl Swedberg, Learning JQuery, Packt Publishing, 2007
http://jquery.com/
http://en.wikipedia.org/wiki/Jquery
http://didats.net/page/belajar-javascript-lebih-lanjut-dengan-jquery-1/
http://bagindokemas.com/2008/12/21/berkenalan-dengan-jquery/

Beberapa contoh yang lebih aplikasi bisa dilihat di :
http://www.99points.info/category/web-development/jquery/
http://webdesignledger.com/tutorials/13-excellent-jquery-animation-techniques

Semoga bermanfaat.......

Satria Multimedia

Sumber :

http://www.satriamultimedia.com/artikel_belajar_dan_mengenal_jquery.html

Minggu, 09 Maret 2014

Software yang dikuasai

Assalamu’allaikum~

Kali ini aku mau share tentang software yang paling aku kuasai didunia ini wkwkwk dunia khayal boleh, dunia alam goib juga boleh lah.. tergantung siapa yang membaca dan bagaimana dia menilainya ahahaha

Sebenernya, bnyak software yang aku biasa pegang. Pasti pada kaget kan ? Ga nyangka kan ? ahahaha sama aku juga. Sakti kalw itu memang terjadi~

Aku bukan tipe orang yang suka ngulik. Aku Cuma pemerhati dosen. Jadi ketika dosen ngajarnya enak dan penyampaiannya bisa ketangkep ama aku, insya Allah pasti aku suka dan kalau aku suka, pasti aku bisa.

Semakin killer, semakin gaul dan semakin akrab dosen itu sama murid-murid nya, aku makin suka ahahaha

Udah an ah curhatnya. Kita lanjut yayyy~

C++ dan Algoritma, Editor menggunakan MinGW atau Visual Studio 2008

Ini salah satu favorit aku. Soal syntak yang satu ini, Insya Allah aku bisa….. kalw ada kasus juga setidaknya aku insya Allah bisa ngegambarin gimana maksud dan gambarannya kaya apa. Tapi ya itu…. Aku ga terlalu exspert karena ga suka ngulik. Apa yang diajarin dosen, itu yang aku bisa.

Ini contoh syntak yang pernah aku buat saat latihan dikelas.

Visual Basic 6

Pemrograman yang satu ini juga lumayan mahir….. penggunaan tools dan syntax ny bisa. Tapi kalau udah masuk connect database ADODC dan kawan-kawan, itu yang mulai bikin enek ahahaha

Ini contoh syntak yang pernah aku buat saat ada tugas matkulnya.

SQL, Editor Ms.Access ? Ahaha Termasuk ga sih ?

Ini juga jadi favorit dan insya Allah aku bisa. Tapi penggunaan syntak didalam Ms.Access…ga beda jauh sih kalau dipake di Database MySQL iya kan ? tapi ya entah lah….. setidaknya masih bisa meraba-raba kemana arah syntak ini akan dibawa. Aselolejoss~ Ahaha

Adobe Photoshop CS

Di program ini juga aku lumayan bisa pake tools-tools nya… tapi ya itu… ga expert karena biasa pake program ini buat edit foto dan bikin pamphlet-pamflet an ahahaha mau liat juga beberapa contohnya ? ahahaha

Trus, apa lagi ya ? Kalau soal ngeledek dan nyanyi termasuk juga gay a ? ahahaha

Udah da Cuma segitu…

Kadang suka ngerasa segala bisa, tapi karna ga mendalami jadi ga pernah bisa fokus dan ga kepake didunia “kerja” nyatanya.

Beda sama mereka yang cuma mahir di 1 keahlian tapi bener-bener bisa dan kepake didunia “kerja” nyatanya. Hufvet~ ya bgtu lah….

Ini ceritaku.. Apa ceritamu ?

Pages

Sharing Tugas

Labels

Blog Archive

Popular Posts