LOAD HALAMAN WEB DENGAN JQUERY

Kita tentunya sudah sering membuka halaman website. Didalamnya terdapat menu dan link yang berfungsi untuk melengkapi halaman website tersebut. Ada beberapa teknologi yang biasa digunakan untuk membuat menu dan link tersebut berfungsi secara baik dan benar. Diantaranya dengan jquery, sebelum berlanjut ke persoalan utama saya akan memaparkan beberapa penjelasan yang berkaitan dengan judul artikel yaitu LOAD HALAMAN WEB DENGAN JQUERY.

Pengertian JQUERY

JQuery adalah perpustakaan Javascript yang diperuntukan untuk mempermudah pembangunan sebuah website yang berjalan disisi client dengan html sebagai pendukung. Pertama di perkenalkan di Barcamp Newyork oleh John Resig. Jquery bukanlah bahasa program yang bisa berdiri sendiri. Jquery harus dibarengi dengan Javascript. Jadi banyak hal yang kita bisa lakukan dengan bahasa pemrograman ini.

Tidaklah mudah menjadi seorang programmer. Ada banyak kode yang harus dibuat dan ditambahkan. Disinilah jquery memainkan perannya. Saya sendiri memposisikan jquery sebagai pelengkap untuk pembuatan website dengan bahasa pemrograman php css html.

Fungsi JQUERY

Jquery berfungsi untuk mempermudah pengaturan dokumen seperti pengaksesan objek dengan DOM atau memcreate aplikasi dengan ajax. Fungsi Jquery yang lain adalah untuk menyederhanakan  berbagai baris kode ke dalam sebuah fungsi sehingga apabila kita membutuhkan fungsi yang akan kita gunakan dalam sebuah aplikasi kita tinggal memanggilnya kembali tanpa harus membuat fungsi itu kembali.

Ada 2 cara menggunakan library jquery yaitu dengan menggunakan jquery online atau dengan jquery offline yang  terlebih dahulu mendownload library jquery tersebut. Untuk keterangan lebih lanjut tentang jquery silakan buka website resminya di jquery.com

Fitur JQUERY

Adapun fitur fitur yang disediakan jquery adalahsebagai berikut

• Event
• Efek dan animasi
• Pemisah json
• Ekstensi melalui plugin
• Berbagai utilitas
• Didukung oleh multi browser
• Penyeleksian element elemnt DOM
• Manipulasi DOM di selektor CSS

Kelebihan JQUERY

• Memisahkan element HTML dan Javascript

Seperti fungsi yang dijelaskan di atas keuntungan menggunakan JQUERY adalah bisa memisahkan kode javascript dan HTML. Apabila kita kita mau menggunakan fungsi dari jquery kita hanya tinggal memanggil fungsi itu sendiri.

• Singkat dan jelas

Karena hanya memanggil fungsinya saja library javascript ini tentunya kode yang dibuat pastilah singkat, jelas dan  gampang dipahami.

• Mengatasi masalah kompatibilitas antar browser

Jquery juga didukung oleh multibrowser. Beberapa browser yang mendukung kode jquery adalah safari,IE,Crome,Mozila,Edge,Android,IOS dan lain lain.

Kekurangan JQUERY

Meskipun jquery mengklaim bahwa penggunaan cpu lebih ringan tetap saja penggunaan web menggunakan HTML dan css lebih ringan daripada penggunaan jquery.  Begitupun disisi server web yang menggunakan jquery menggunakan ruang serverlebih besar dari pada website yang tidak menggunakan javascript.

LOAD HALAMAN WEB DENGAN JQUERY

Sesudah menjelaskan sedikit tentang  jquery saatnya saya memaparkan inti dari artiket ini yaitu tentang LOAD HALAMAN WEB DENGAN JQUERY.

Kita akan membuat sebuah project web yang menerangkan tentang perpindahan halaman website yang tanpa loading. Studi kasusnya adalah pada perpindahan menu pada halaman website.  Apabila kita klik menu maka yang akan reload adalah halaman isi artikel nya saja.

Pada project ini saya akan menggunakan jquery offline yang mengharuskan saya mendownload terlebih dahulu file javascript tersebut.Saya asumsikan anda telah menginstall xampp atau wampp untuk servernya . buat sebuah folder bernama latihan didalam C:\xampp\htdocs.

Buat beberapa file didalam folder seperti dibawah ini :

Buat file css dengan nama style.css dengan isi seperti di bawah ini :

Setelah selesai buat file php dengan nama index.php dengan isi seperti di bawah ini :

Buat file php dengan nama home.php

Buat file php dengan nama menu1.php

Buat file php dengan nama menu2.php

Buat file php dengan nama menu3.php

Setelah selesai silahkan buka browser anda lalu ketikan dalam url : localhost/latihan

Cukup sekian sedikit penjelasan dan tutorial yang saya buat kali ini. tutorial ini terinspirasi dari website malasngoding.
akhir kata terima kasih atas perhatiannya.

Tweet

Postingan terkait:

Ditulis Dailamiahmad.blogspot.com — Tuesday 21 April 2020 — Add Comment — Css, html, jquery, pemrograman, php