Senin, 25 November 2013

JQuery











                                                                              JQuery

                                                           “ Write less, do more



Logo Unnes.jpg

Makalah ini disusun sebagai tugas mata kuliah Teknologi Informasi dan Komunikasi
Dosen pengampu : Septia Lutfi,S.Kom, M.Kom


Oleh
Suko Bintoro
1102409003


JURUSAN KURIKULUM DAN TEKNOLOGI PENDIDIKAN
FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS NEGERI SEMARANG
2013

KATA PENGANTAR

Puji syukur Alhamdulillah penyusun panjatkan kehadirat Allah SWT yang telah memberikan nikmat-NYA, sehingga penyusun mampu menyelesaikan Makalah ini sesuai dengan waktu yang telah ditentukan. Makalah ini dibuat dalam rangka memenuhi salah satu syarat penilaian mata kuliah Teknologi Informasi dan Komunikasi. Yang meliputi nilai tugas dan nilai keaktifan.
Penyusunan makalah ini tidak berniat untuk mengubah materi yang sudah tersusun. Namun, hanya lebih pendekatan pada study banding atau membandingkan beberapa materi yang sama dari berbagai referensi yang semoga bisa memberi tambahan pada hal yang terkait dengan Tekhnologi Informasi dan Komunikasi.
Saya sebagai penyusun pastinya tidak pernah lepas dari kesalahan. Begitu pula dalam penyusunan makalah ini, yang mempunyai banyak kekurangan. Oleh karena itu, saya mohon maaf atas segala kekurangannya. Saya mengucapkan terima kasih kepada Bapak Septia Luthfi, S.Kom, M.Kom sebagai pengajar mata kuliah Teknologi Informasi dan Komunikasi yang telah membimbing dalam penyusunan makalah ini. Tidak lupa pula kepada rekan-rekan yang telah ikut berpartisipasi. Sehingga makalah ini selesai tepat pada waktunya 

Penyusun





BAB I
PENDAHULUAN

1.1.   Latar Belakang

Perkembangan teknologi  semakin pesat dan cepat, khususnya teknologi informasi dan komunikasi. Hal ini membuat manusia bagaikan tak terpisah oleh jarak ruang dan waktu. Dengan perkembangan teknologi yang kian maju, manusia dapat membuat berbagai macam peralatan sebagai alat bantu dalam menjalankan berbagai aktivitas untuk mendukung produktifitas.

1.2.   I.2 Rumusan masalah

1.3.   Rumusan masalah yang dibahas pada karya tulis ini adalah:

  1. Apa yang dapat dilakukan JQuery

1.4.   Tujuan

Berdasarkan rumusan masalah tersebut maka tujuan karya tulis ini adalah:
  1. Mengerti untuk apa JQuery

1.5.   I.4 Manfaat

Manfaat penulisan memiliki mafaat bagi beberapa pihak, yaitu
  1. Bagi pembaca dan masyarakat luas jadi mengerti dan harapannya bisa tertarik untuk menggunakan JQuery.
1 Pengertian JQuery
JQuery adalah javascript library, jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai

HTML, CSS dan Javascript. Library jQuery mempunyai kemampuan :
• Kemudahan mengakses elemen-elemen HTML
• Memanipulasi elemen HTML
• Memanipulasi CSS
• Penanganan event HTML
• Efek-efek javascript dan animasi
• Modifikasi HTML DOM
• AJAX
• Menyederhanakan kode javascript lainnya






2.    Apa yang bisa dilakukan JQuery

2.1.   Membuat action shourtcut ( ctrl-N, ctrl-C dll ) dalam web dengan jquery

Di dalam aplikasi desktop, seringkali kita mendengar istilah shortcut action untuk proses-proses tertentu. Sebagai contohnya adalah CTRL+P untuk proses mencetak halaman, CTRL+N membuat dokumen baru, CTRL+S untuk menyimpan dokumen dsb. Nah… bagaimana dengan aplikasi web??? apakah bisa kita menambahkan shortcut ke dalam aplikasi web kita? Misalkan kita ingin membuat shortcut F6 untuk mencetak halaman dari aplikasi web yang kita buat, atau kita ingin membuat beberapa shortcut untuk membuka beberapa halaman web. Misalkan CTRL+1 untuk membuka situs A, CTRL+2 untuk situs B, dst. Hal ini bisa kita wujudkan dengan mudah, dengan bantuan JQuery.Untuk mewujudkan hal ini, kita membutuhkan script core JQuery nya (jQuery.js) dan plugin JQuery Shortcuts (jquery.shortcuts.min.js).
 Selanjutnya, berikut ini saya berikan contoh halaman web yang di dalamnya ada beberapa tombol short cut untuk action tertentu.
<html>
  <head>
   <title>jQuery Validation</title>
   <script src="jquery.js"></script>
   <script src="jquery.shortcuts.min.js"></script>

   <script>
   $.Shortcuts.add({
    type: 'down',
    mask: 'P',
    handler: function() {
        window.print();
    }
   }).start();
   </script>

   <script>
   $.Shortcuts.add({
    type: 'down',
    mask: 'CTRL+G',
    handler: function() {
        window.open('http://www.google.com', '_self');
    }
    }).start();
   </script>

   <script>
   $.Shortcuts.add({
    type: 'down',
    mask: 'ALT+R',
    handler: function() {
        window.open('http://blog.rosihanari.net', '_blank');
    }
   }).start();
   </script>

   <script>
   $.Shortcuts.add({
    type: 'down',
    mask: 'F8',
    handler: function() {
        document.getElementById('title').innerHTML="Hallo";
    }
   }).start();
   </script>

   <script>
   $.Shortcuts.add({
    type: 'down',
    mask: 'F9',
    handler: function() {
        document.getElementById('title').innerHTML="Contoh Shortcut Action";
    }
   }).start();
   </script>

  </head>
  <body>
    <h1 id="title">Contoh Shortcut Action</h1>
    <ol>
       <li>Cetak Halaman (P)</li>
       <li>Buka Situs Google (CTRL+G)</li>
       <li>Buka Situs Blog.RosihanAri.Net di window baru (ALT+R)</li>
       <li>Ubah title menjadi 'Hallo' (F8)</li>
       <li>Ubah title menjadi 'Contoh Shortcut Action' (F9)</li>
    </ol>
  </body>
</html>

Jika halaman web di atas dibuka di browser, maka hanya dengan menekan tombol P pada keyboard Anda dapat mencetak halaman tersebut. Apabila ditekan tombol CTRL + G maka secara otomatis akan membuka situs Google dst.
 photo jquery-shortcut_zps100c1e06.jpg
Adapun berikut ini penjelasan dari script JQuery nya.
01.<script>
02.$.Shortcuts.add({
03.type: 'down',
04.mask: 'P',
05.handler: function() {
06.window.print();
07.}
08.}).start();
09.</script>
Block script di atas berfungsi untuk membuat short cut pada tombol ‘P’ pada keyboard untuk menjalankan action mencetak halaman. Perintah cetak halaman ini dilakukan melalui perintah javascript window.print(). Dengan demikian, window.print() ini akan diexecute ketika diklik tombol ‘P’.
Sedangkan block berikut ini digunakan untuk membuka situs Google dengan short cut CTRL + G.
01.<script>
02.$.Shortcuts.add({
03.type: 'down',
04.mask: 'CTRL+G',
05.handler: function() {
06.window.open('http://www.google.com', '_self');
07.}
08.}).start();
09.</script>
Untuk membuka situs google tersebut, digunakan perintah window.open().

2.2.   Me-Load Halaman Tanpa Refresh Dengan JQuery

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.
kali ini kita bisa me-load halaman tanpa refresh sehingga browser hanya load pada daerah tertentu saja pada bagian web yang di refresh tanpa harus me-load ulang semua tampilan web sehingga bisa meminimalisir penggunaan bandwidth. Cara ini sama jika dengan jika anda menggunakan Javascript / AJAXkarena JQuery sendiri adalah perkembangan dari Javascript dan AJAX. JQuery sendiri adalah kumpulan AJAX yang digabungkan menjadi sebuah kerangka yang siap digunakan oleh pengembang web newbie tanpa harus mengetahui Javascript secara mendalam.Yang dibutuhkan dalam coding kali ini cuma memasang jquery kemudian sedikit pengetahuan dari javascript. Langsung saja contohkan dalam html. Dalam hal ini kita akan meload sebuah text dalam file text.html dan ditampilkan di fil index.html tanpa harus meload seluruh halaman webnya.
<html>
<head>
<title>Load tanpa refresh</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" >
</script>
<script type="text/javascript">
 $(document).ready(
   function(){
   $("#klikdata").click(function(){
    $("#tampung").load("text.html");
   });
  }
 );
</script>
</head>
<body>
<center>
 <h1>Dibawah sini adalah tempat load data dari file text.html</h1>
 <a href="#" id="klikdata">Tampil Data</a><br />
 <div id="tampung"></div>
</center>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>

            Sedikit penjelasan dari kode diatas, di file index.html haruslah disertakan atau di masukan Jquery.js anda bisa mendownload atau bisa menggakan source online sebagai contoh yaitu di googleapi seperti kode diatas.Selanjutkan pada index.html dibuat script untuk menjalankan jquery disitu dideklarasikan $(document).ready(); untuk menjalankan jquery jika halaman sudah dalam keadaan ready atau sudah di load sepenuhnya.Kemudian dideklarasikan #klikdata maksudnya adalah elemen yang memiliki id klik data, dalam contoh yaitu tag a, maka ketika di klik akan melakukan perintah berikutnya yaitu meload di elemen #tampung atau elemen yang memiliki id tampung sebuah data dari file text.html. Selain dari file html, jquery juga bisa me-load dari file lain seperti php, txt,dll dan yang di load berupa text biasa.


2.3.    Membuat halaman daftar isi

            Daftar Isi Dengan Jquery mempunyai kelebihan dalam meringkas / membuat irit ruang blog, jadi tidak akan memanjang sampai kebawah. Dengan begitu apabila artikel / postingan anda sudah melebihi 1000 artikel, apabila tidak dipasang daftar isi dengan scroll atau daftar isi dengan menggunakan jquery accordion, pasti akan memanjang ke bawah.
http://2.bp.blogspot.com/-CirSPp5BEIY/UbSzrk5tuCI/AAAAAAAAAjM/L1U6-qXhfJQ/s1600/daftar+isi+accordion.jpg
Cara Membuat halaman Daftar Isi Dengan Jquery  :

  • Login ke blogger anda
  • Pada dasbor masuk ke Template => pilih Edit HTML.
  • Backup dulu template anda
  • Centang kotak Expand Widget Template
  • Tekan F3 dan cari kode ]]></b:skin> lalu letakkan kode berikut diatasnya
#dafis-acc { font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:14px; } .dafis-label { background: rgb(125,126,125); background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; color: #A1A1A1; text-transform:uppercase; font-weight: bold; line-height: 2em; margin: 1px 3px; cursor: pointer; outline: medium none; overflow: hidden; padding: 2px 10px; text-decoration: none; text-align: center; } .dafis-label:hover { color: #F2F2F2; } .dafis-daf ol { margin: 0 0 0 30px !important; padding: 0 !important; } .dafis-daf ol li { background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; line-height: 1.3em; margin: 1px 3px !important; text-align: left; white-space: nowrap; } .dafis-daf ol li a { color: #333333 !important; display: block; padding-top:5px; padding-left: 10px; text-decoration: none !important; } .dafis-daf ol li a:hover { color:f2f2f2; padding-left: 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } 
Lalu cari kode </head> dan letakkan kode berikut diatasnya 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
Keterangan : Apabila didalam template anda sudah terpasang kode script jQuery, maka tidak perlu lagi dipasang didalam template.
  • Simpan / Save Template 
  • Selanjutnya anda buat postingan baru dengan judul daftar isi atau sitemap di blog anda dan pasang atau masukkan kode dibawah ini dalam posisi / mode HTML (bukan compose) setelah itu publikasikan.

2.4.    Membuat script login dengan JQUERY AJAX

-          Menyiapkan JQUERY
Untuk menggunakan fungsi AJAX pada JQUERY, terlebih dahulu kita harus menyiapkan JQUERY dengan cara mendownloadnya kemudian kita simpan dalam komputer kita bersebelahan dengan script - script tutorial kita supaya tutorial ini dapat dijalankan pada komputer lokal meskipun tidak terkoneksi ke internet. Pada contoh script dibawah sudah kami siapkan Jquery lengkap dengan contoh project tutorial kita kali ini

-          Membuat form login » index.php
Script ini akan digunakan sebagai sarana untuk memasukkan username dan password ketika hendak login, berikut contoh script index.php sebagai halaman login
<html>
        <head>
               <title>Login dengan Jquery AJAX</title>
               <style type="text/css">
                       #login{
                               font:bold 16px Tahoma,Verdana;
                               display:block;
                               border:#7596c0 1px solid;
                               width:400px;
                               height:280px;
                               margin-left:auto;
                               margin-right:auto;
                               border-radius:5px;
                               background-color:#98c1f3;
                               box-shadow: 5px 5px 5px rgb(150, 149, 149);
                               visibility:visible;
                               color:#e9ecf0;
                       }
                       h3{
                               font:bold 20px Tahoma,Verdana;
                               margin:0 0 0 0;
                               padding:0 0 0 0;
                               color:#2572d2;
                               text-align:center;
                               line-height:50px;
                               border-bottom:#ffffff 1px solid;
                       }
                       #inner{
                               margin:0 20px 0 20px;
                       }
                       input.txt{
                               font:normal 14px Tahoma,Verdana;
                               padding:10px;
                               margin:5px 0 5px 0;
                               width:100td_persen;
                               background-color:#dee9f6;
                       }
                       input.btn{
                               font:bold 14px Tahoma,Verdana;
                               padding:10px;
                               margin:5px 0 10px 0;
                               width:100td_persen;
                               text-align:center;
                       }
               </style>
               <script type="text/javascript" src="jquery-1.6.1.min.js">//memanggil jquery</script>
               <script type="text/javascript" src="login.js">//memanggil script ajax</script>
        </head>
        <body>
               <div id="login">
                       <h3>LOGIN ADMINISTRATOR</h3>
                       <div id="inner">
                                
                               <input type="text" class="txt" placeholder="Username anda" id="txt_username"/>
                                
                               <input type="password" class="txt" placeholder="Password anda" id="txt_password"/>
                               <input type="button" class="btn" name="btn" id="btnLogin" onclick="check_login();" value="Login"/>
                       </div>
               </div>
        </body>
</html>

-          Membuat script AJAX » login.js
Script ini merupakan script Jvascript AJAX yang akan menggunakan fungsi AJAX pada JQUERY dengan susunan script sebagai berikut :
function check_login()
{
        //Mengambil value dari input username & Password
        var username = $('#txt_username').val();
        var password = $('#txt_password').val();
        //Ubah alamat url berikut, sesuaikan dengan alamat script pada komputer anda
        var url_login  = 'http://localhost/tutorial/login.php';
        var url_admin  = 'http://localhost/tutorial/admin.php';
       
        //Ubah tulisan pada button saat click login
        $('#btnLogin').attr('value','Silahkan tunggu ...');
       
        //Gunakan jquery AJAX
        $.ajax({
               url            : url_login,
               //mengirimkan username dan password ke script login.php
               data    : 'var_usn='+username+'&var_pwd='+password,
               //Method pengiriman
               type    : 'POST',
               //Data yang akan diambil dari script pemroses
               dataType: 'html',
               //Respon jika data berhasil dikirim
               success : function(pesan){
                       if(pesan=='ok'){
                               //Arahkan ke halaman admin jika script pemroses mencetak kata ok
                               window.location = url_admin;
                       }
                       else{
                               //Cetak peringatan untuk username & password salah
                               alert(pesan);
                               $('#btnLogin').attr('value','Coba lagi ...');
                       }
               },
        });
}
Dengan penjelasan - penjelasasn seperti pada contoh diatas, kami berharap pembaca sekalian dapat memahami maksud dari masing - masing line script yang kita gunakan
-          Membuat script pemrosesan » login.php
Script login.php merupakan script php sederhana yang kami gunakan untuk melakukan pengecekan kebenaran username dan password pada database, jika username dan password benar, maka script dibawah akan mencetak kata "ok", sedangkan jika username dan password salah maka akan dicetak kata "Username atau Password Salah !"
<?php
session_start();
//koneksi ke database
$conn = mysql_connect('localhost','root','kutukupret');
$db       = mysql_select_db('tutorial',$conn);
if(isset($_POST['var_usn']) AND isset($_POST['var_pwd'])){
        $username = addslashes($_POST['var_usn']);
        $password = addslashes($_POST['var_pwd']);
        $check    = mysql_query('select * from admin where Usn="'.$username.'" AND Pwd="'.$password.'" ');
        if(mysql_num_rows($check)==0){
               echo 'Username atau Password Salah !';
        }
        else{
               $_SESSION['login']['usn'] = $username;
               $_SESSION['login']['pwd'] = $password;
               echo 'ok';
        }
}
?>

Pesan login diatas selanjutnya yang akan diambil oleh script login.js, dimana kalo script diatas mencetak kata "ok", maka user akan langsung diarahkan ke halaman berikutnya, sebaliknya jika script diatas mencetak pesan kesalahan, maka script login.js akan memberikan javascript alert sebagai tanda peringatan kesalahan username dan password
-          Membuat script halaman admin » admin.php
<?php
session_start();
if(isset($_GET['logout']) AND $_GET['logout']=='1'){
        unset($_SESSION['login']);
        session_destroy();
}
if(!isset($_SESSION['login'])){
        header('location: index.php');
}
else{
        echo '<h3>SELAMAT DATANG : '.$_SESSION['login']['usn'].'</h3>';
        echo 'Halaman ini kita asumsikan sebagai halaman Administrator, dimana halaman ini hanya bisa diakses ketika Admin sudah login';
        echo '<br/><a href="?logout=1">LOGOUT</a>';
}
?>
Script diatas kita asumsikan sebagai halaman administrator yang mengharuskan user untuk login terebih dahulu ketika hendak mengakses halaman ini Untuk mencoba script - script diatas tanpa adanya perubahan direktory, sebaiknya kita tempatkan script - script diatas pada folder dengn nama tutorial pada direktory web server komputer anda.

2.5.   Memodifikasi  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.

2.6.   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.7.    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.

2.8.   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.

2.9.   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.
3.1.  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.
                                   










DAFTAR PUSTAKA


http://www.scribd.com/doc/55060328/Makalah-Android-Tugas-Sistem-Operasi