Membuat Form Dinamis Menggunakan JQuery

kiki July 29, 2017
thumbnail
Selamat datang di blog arsipbertuah. Pada posting ini ane akan membahas Bagaimana cara membuat kolom input di form html bisa ditambah dan dihapus sesuai dengan kebutuhan. inilah yang dinamakan dengan form dinamis, yang mana form tersebut kolom input tidak di tetapkan jumlahnya dalam satu halaman tersebut melainkan bisa berubah-ubah sesuai kebutuhan. agar bisa membuat form dinamis di halaman html ini tentunya kita bisa menipulasi halaman html menggunakan javascript, tapi pada artikel ini ane menggunakan JQuery karena scriptnya lebih simple dan mudah.

jQuery adalah salah satu framework javascript atau javascript library yang telah dirancang untuk mempermudah mendesain halaman web di bagian user interface. untuk menjalankan script dibawah ini, ane asumsikan agan sudah paham untuk menggunakan jquery. jika belum bisa instal jquery bisa baca di artikel ane tentang instalasi jquery . berikut ini adalah script jquery serta form htmlnya untuk praktek membuat form dinamis.
<html>
<head>
<title>Form Dinamis</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script language="javascript">
   function tambahPemain() {
     var id = document.getElementById("id").value;
     var inputbaru;
     inputbaru="<p id='kolombaru" + id + "'><input type='text' size='40' name='namapemain[]' placeholder='Masukkan nama pemain' /> <a href='#' onclick='hapusPemain("#kolombaru" + id + ""); return false;'>Hapus</a></p>";
     $("#pemain").append(inputbaru);
     idf = (idf-1) + 2;
     document.getElementById("id").value = id;
   }
   function hapusPemain(id) {
     $(id).remove();
   }
</script>
</head>
<body>
<div id="container">
  <center>
<h1>Contoh Form Dinamis menggunakan Jquery</h1>
<form method="post" action="simpan.php">
   <input id="id" value="1" type="hidden" />
   <p> Nama Club: <input name="nama" type="text" id="namaklub" size="40"> </p>
   <button type="button" onclick="tambahPemain(); return false;">Tambah Pemain</button>
   <div id="pemain"></div>
   <button type="submit">Simpan</button>
  </form>
  </center>
</div>
</body>
</html>
script diatas adalah contoh dasar membuat form dinamis. agan bisa memodifikasi sesuai dengan kebutuhan projek agan dengan tampilan yang lebih menarik contohnya seperti projek ane pada gamabar dibawah ini.
contoh form dinamis menggunakan jquery
gambar form dinamis

selanjutnya kita bahas bagaimana untuk menyimpannya ?. nah berikutnya kita buat lagi sebuah file dengan nama Simpan.php namun sebelumnya buat dulu database nya dengan nama db klubfutsal  dan nama tabel pemain dengan struktur tabel nya contohnya satu fieldsaja (pemain). sorce code php simpan.php nya seperti berikut ini;


<?php
$host = "localhost";
$user = "root";
$pass = "";
$dbnm = "futsal";

$koneksi = mysql_connect ($host, $user, $pass);
if ($conn) {
$buka = mysql_select_db ($dbnm);
}

$player = $_POST['namapemain'];
foreach ($player as $pemain) {
   $query=" INSERT into pemain (player)values ('$pemain');";
}

?>


seperti itulah contoh sederhana menggunakan dinamis form menggunakan jquery dan cara menyimpannya. semoga dapat membantu menambah referensi. salam developer
arsipbertuah
arsipbertuah Updated at: July 29, 2017

memulai belajar pemrograman web dan internet

kiki February 28, 2017
thumbnail
Pada artikel ini akan membahas tentang bagaimana untuk memulai langkah awal untuk menjadi seorang programmer. bahasa pemograman apa saja yang perlu dikuasai dalam pemograman web dan pemograman internet.

Definisi pemograman web

World Wide Web ("WWW", atau singkatnya "Web") adalah suatu ruang informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI). WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripadanya. Hiperteks dilihat dengan sebuah program bernama browser web yang mengambil informasi (disebut "dokumen" atau “halaman web") dari server web dan menampilkannya, biasanya di sebuah monitor. Kita lalu dapat mengikuti pranala di setiap halaman untuk pindah ke dokumen lain atau bahkan mengirim informasi kembali kepada server untuk berinteraksi dengannya. Ini disebut "surfing" atau "berselancar" dalam bahasa Indonesia. Halaman web biasanya diatur dalam koleksi material yang berkaitan yang disebut “situs web".

Definisi Internet

Menurut Budhi Irawan (2005 : 69), Internet adalah suatu jaringan komputer global yang terbentuk dari jaringan-jaringan lokal dan regional yang memungkinkan komunikasi data antar komputer yang terhubung ke jaringan tersebut. Internet merupakan hubungan antar berbagai jenis komputer dan jaringan di dunia yang berbeda sistem operasi maupun aplikasinya, dimana hubungan tersebut memanfaatkan kemajuan media komunikasi (telepon dan satelit) yang menggunakan protokol standar dalam berkomunikasi yaitu protokol TCP/IP. Untuk dapat menggunakan fasilitas internet, komputer kita harus terhubung ke salah satu ISP (Internet Service Provider). ISP adalah perusahaan yang menyediakan layanan untuk menghubungkan komputer kita ke internet atau disebut juga sebagai pintu gerbang ke internet. Untuk itu, kita perlu mendaftarkan diri ke ISP untuk mendapatkan nama dan alamat di internet

Bahasa Pemograman yang perlu dikuasai dalam pemrograman web dan internet

1.HTML

HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML, HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan standar Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C). Versi terakhir dari HTML adalah HTML 5, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.
HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

2.CSS

Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yg ada di situs kita sekaligus memformat ulang situs kita. CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser.
Keuntungan dari CSS yaitu Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturanaturan CSS tersebut untuk diterapakan pada seluruh dokumendokumen HTML pada halaman situs kita. User yang berbeda dapat mempunyai style-sheet yg berbeda pula. Ukuran dan kompleksitas document code dapat diperkecil.
pada saat ini sudah banyak framework css instant yang sangat mudah digunakan dan cepat dan sesainnya sudah kren. seperti salah satunya twitter Bootsrap

3.Javascript

Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukanmasukan pada formulir sebelum formulir dikirimkan ke server. Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.
Jquery adalah salah satu framework js . yang sudah dirancang dengan baik untuk penggunaan js lebih mudah dan simple.slah satunya membuat animasi loader dengan ajax akan lebih mudah megunakan jquery.

4.PHP

Menurut Didik Dwi Presetyo (2004 : 76), PHP merupakan bahasa scripting server-side, dimana pemrosesan datanya dilakukan pada sisi server. Sederhananya, serverlah yang akan menerjemahkan skrip program, baru kemudian hasilnya akan dikirim kepada client yang melakukan permintaan.
dengan php kita dapat menghubungkan dengan database. agar dapat melakukan proses dasar pada database sepert insert, update dan delete data.

apa itu web server ?

Web server adalah software yang menjadi tulang belakang dari world wide web (www). Web server menunggu permintaan dari client yang menggunakan br owser seperti Netscape Navigator, Internet Explorer, Modzilla, dan program browser lainnya. Jika ada permintaan dari browser, maka web server akan memproses permintaan itu kemudian memberikan hasil prosesnya berupa data yang diinginkan kembali ke browser. Data ini mempunyai format yang standar, disebut dengan format SGML ( standar general markup language). Data yang berupa format ini kemudian akan ditampilkan oleh browser sesuai dengan kemampuan browser tersebut. Contohnya, bila data yang dikirim berupa gambar, browser yang hanya mampu menampilkan teks (misalnya lynx) tidak akan mampu menampilkan gambar tersebut, dan jika ada akan menampilkan alternatifnya saja. Web server, untuk berkomunikasi dengan client -nya (web browser) mempunyai protokol sendiri, yaitu HTTP (hypertext transfer protocol ). Dengan protokol ini, komunikasi antar web server dengan client-nya dapat saling dimengerti dan lebih mudah. Seperti telah dijelaskan diatas, format data pada world wide web adalah SGML. Tapi para pengguna internet saat i ni lebih banyak menggunakan format HTML (hypertext markup language) karena penggunaannya lebih sederhana dan mudah dipelajari. Kata HyperText mempunyai arti bahwa seorang pengguna internet dengan web browsernya dapat membuka dan membaca dokumen -dokumen yang ada dalam komputernya atau bahkan jauh tempatnya sekalipun. Hal ini memberikan cita rasa dari suatu proses yang tridimensional, artinya pengguna internet dapat membaca dari satu dokumen ke dokumen yang lain hanya dengan mengklik beberapa bagian dari ha laman-halaman dokumen (web) itu. Proses yang dimulai dari permintaan webclient (browser), diterima web server, diproses, dan dikembalikan hasil prosesnya oleh web server ke web client lagi dilakukan secara transparan. Setiap orang dapat dengan mudah menget ahui apa yang terjadi pada tiap - tiap proses. Secara garis besarnya web server hanya memproses semua masukan yang diperolehnya dari web clientnya.

5.MySQL

Menurut Didik Dwi Prasetyo (2004 :18) MySQL merupakan salah satu database server yang berkembang di lingkungan open source dan didistribusikan secara free (gratis) dibawah lisensi GPL. MySQL merupakan RDBMS (Relational Database Management System) server. RDBMS adalah program yang memungkinkan pengguna database untuk membuat, mengelola, dan menggunakan data pada suatu model relational. Dengan demikian, tabel-tabel yang ada pada database memiliki relasi antara satu tabel dengan tabel lainnya.

dari penjelasan diatas dapat kita simpulkan bahwa semua bahasa pemograman baik itu termasuk dalam kategori client side maupun server side yang ada diatas. wajib di kuasai untuk menjadi seorang programmer berbasis web.
arsipbertuah
arsipbertuah Updated at: February 28, 2017

Belajar Jquery Ajax : menampilkan animasi loader

kiki November 21, 2016
thumbnail

Memasang Loader mengunakan jQuery ajax


selamat datang di blog arsipbertuah.pada posting ane kali ini ane mau mengajak agan untuk belajar Ajax JQuery membuat animasi loader pada web.animasi ini menggunakan gambar dengan format gif yang akan ditampilkan pada web ketika web melakukan loading saat request data .animasi loader akan disembunyikan lagi ketika proses load data telah selesai dan hasil request akan di tampilkan di elemen HTML.untuk membuat gambar animasi agan bisa download di ajaxloader.com di situ agan bisa pilih gambar loader yang diinginkan dan bisa agan modifikasi warna dan ukurannya sesuai dengan kebutuhan web agan.

loader ajax
belajar loader jquery ajax
yuk, lansung saja kita praktek contohnya:
pertama agan sudah punya gambar animasinya seperti yang ane sarankan diatas.
contoh gambar loader ane seperti ini.

contoh gambar loader 


berikutnya buat dokumen html dan dan koding Jquery seperti dibawah ini

contoh koding html dan jquery

<html>
<head>
 <title>belajar jquery membuat loader ajax</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="jquery-1.11.3.js"></script>
</head>
<style type="text/css">
.spinner {
    position: ;
    margin-left: 0px; 
    margin-right: 0px;
    text-align:center;
    overflow: auto;
    padding: 10px 10px 10px 10px;
}
#img-spinner{
 width: 45px;
 height: 45px;
}
</style>

<body>
<div>
<button id="load">klik load page</button>
</div>
<div class="spinner" style="display:none">
<img id="img-spinner" src="img/loader.gif" >
</div>
<div class="konten"></div>
</body>
</html>

 <script type="text/javascript">
$("#load").click(function(){
$.ajax({url:"uji_load.php",
beforeSend:function(){$(".spinner").css("display","block");},
success:function(result){$(".spinner").css("display","none");$(".konten").html(result);}
          });
                                           });
 </script>
ganti nama gambar  kode bewarna merah yang sesuai dengan gambar animasi dan url pada komputer agan karena pada posting ini menggunakan php maka bua folder baru di C:/xampp/htdocs simpan dokumennya di file yang baru agan buat.jangan lupa gambar animasinya juga disimpan di folder yang sama. setelah itu kita buat dokumen php yang ke dua untuk kita proses buat praktek ajax loadernya seperti di bawah ini.pada koding php berikutnya ane menggunakan sleep untuk memberi delay proses eksekusi koding php.nah, pada saat delay tersebut animasi loader akan di tampilkan. kita buat namanya uji_load.php

pengujian loader ajax pada php

<?php 
sleep("5");
echo "ini adalah hasil loader menggunakan jquery ajax. <br>
text ini berasal dari dokumen php uji_load.php";
 ?>
simpan di folder yang sama.
berikutnya silahkan buka browser buat testing nya .seperti biasa untuk buka dokumen php menggunakan localhost
begitulah cara buat animasi loader menggunakan jquery ajax .silahkan komen dibawah ini jika ada pertanyaan.semoga sukses.
arsipbertuah
arsipbertuah Updated at: November 21, 2016

Belajar Jquery : memperbesar gambar ketika disentuh mouse

kiki November 21, 2016
thumbnail

Belajar mouse event pada jQuery

selamat datang di arsipbertuah blog,pada belajar jquery kali ini ane menuliskan tentang 
bagaimana membuat gambar berubah ukurannya menjadi besar ketika di lalui oleh pointer mouse.
untuk mengubah ukuran gambar tersebut bisa menggunakan Javascript.tapi bisa lebih mudah kita gunakan javascript library yaitu JQuery. JavaScript sangat powerfull untuk memanipulasi element HTML, tapi penggunaannya juga tidak mudah dan sedikit ribet. oleh karena itu dengan jQuerylah yang dapat mempermudah memanipulasi HTML.

Pengertian Jquery

jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuerydirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. dengan jquery kita tinggal memanggil fungsi yang ada tentunya sesuai dengan dengan kasus kita untuk membuat gambar menjadi zoom .tujuannya menggunakan jquery adalah untuk mempercantik tampilan dan membuat web kita lebih interaktif.lansung saja kita terjun ke praktek. beriku ini adalah koding html untuk menampilkan gambar dan jquery sebagai aksi mempebesar gambar ketika disentuh mouse:

Contoh implementasi mouse event pada jquery

<html>
<head>
 <title>belajar jquery mempebesar gambar kita dilalui mouse</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="jquery-1.11.3.js"></script>
</head>
<body>
<script>
$(function(){

  $('img').mouseenter(function(){
  $('img').css('width','100%');
 });
 $('img').mouseleave(function(){
  $('img').css('width','50');
});});
</script>
<div>
<img src="1.jpg" width="50px">
</div>
</body>
</html>

Contoh hasil mouse event jQuery

nah,hasilnya begini gan.jika agan buka lewat desktop silahkan letak penunjuk mouse agan di atas gambar dibawah ini .

seperti ini lah hasil dari fungsi mouse event jquery. dan masih banyak lagi yang bisa di kembangkan dari fungsi - fungsi yang ada pada jquery. buat agan yang tertarik menggunakan jquery alangkah baiknya agan instalasi  jquery dengan mendownload jquery di website resminya, agar mudah mempelajari secara ofline.sekian penjelasan sederhana dari saya semoga dapat menambah wawasan tentang jquery.
arsipbertuah
arsipbertuah Updated at: November 21, 2016

Belajar jQuery : menyembunyikan dan menampilkan elemen

kiki November 15, 2016
thumbnail
selamat datang di arsip bertuah blog .pada post ane kali ini, ane mau membagikan koding jquery untuk menyembunyikan dan menampilkan elemen html pada web.

Penjelasan Jquery

jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuerydirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. dengan jquery kita tinggal memanggil fungsi yang ada tentunya sesuai dengan dengan kasus kita untuk membuat gambar menjadi zoom .tujuannya menggunakan jquery adalah untuk mempercantik tampilan dan membuat web kita lebih interaktif .jQuery adalah pustaka/library javascript yang memudahkan kita agar tidak perlu menulis script JavaScript yang panjang.nah,pada post ane adalah salah satu contoh penggunaan jQuery  effects. yang mana ada efek yang terjadi jika kita klik pada selektor yang kita buat misalkan tombol,link dll.contohnya pada posting ini yaitu membuat fungsi jquery untuk menyembunyikan dan menampilkan elemen dengan efek Slide Toggle.

fungsinya adalah kalo ane sih untuk buat menyembunyikan source code agar tampilan posting blog lebih ramping bisa juga dikembangkan  untuk membuat web kita lebih cantik dll. nih, ane praktek lansung koding nya tersedia sesuai dengan apa yang agan lihat pada contoh dibawah ini:


Contoh implementasi jquery togel



Contoh koding jquery hide/show togel

<html>
<head>
 <title>belajar jquery</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$('#koding').hide();
$('#btnhide').click(function(){
 $('#koding').slideToggle();
 });
});
</script>

<button id="btnhide">klik untuk menampilkan/menyembunyikan koding jQuery</button>

<div style="background-color: whitesmoke; border: 1px solid orange; padding: 10px; text-align: left;">
<div id="koding">
#isi div koding
</div>
</div>
</body>
</html>

ini adalah salah satu contoh sederhanya saja gan. dengan jquery banyak yang bisa di kembangkan untuk membuat website kita tampik menarik dan interaktif. sekian informasi dari saya tentang menyembunyikan dan menampilkan elemen menggunakan fungsi jquery toggle.

arsipbertuah
arsipbertuah Updated at: November 15, 2016

Belajar web : load page dengan Jquery Ajax

kiki November 04, 2016
thumbnail

selamat datang di arsipbertuah pada posting satu ini saya akan membahas tentang cara membuat load halaman menggunakan jquery ajax. dengan tujuan untuk mempercepat proses loading karena semua element web tidak di load semua.

Pengertian Jquery

jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuerydirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. dengan jquery kita tinggal memanggil fungsi yang ada tentunya sesuai dengan dengan kasus kita untuk membuat gambar menjadi zoom .tujuannya menggunakan jquery adalah untuk mempercantik tampilan dan membuat web kita lebih interaktif

pengertian Ajax

AJAX(Asynchoronous Javascript and XML) adalah sebuah teknik pemograman yang memungkinkan kita melakukan pertukaran data dengan server di belakang layar,sehingga halaman web tidak perlu di reload lagi hanya untuk menganti sebagian kecil dari isi halaman.dan jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah.
dengan adanya Jquery proses development ajax bisa menjadi lebih mudah.
basic dari jquery ajax sepert berikut.

load(url, params, callback);

load page dengan Jquery Ajax
belajar Jquery


 keterangan
  • url(string): url dari file html yang akan di load
  • params(object): data yang akan dikirim ke server
  • callback(function): fungsi yang akan dijalan ketika data berhasil di load

contoh implementasi Juery ajax

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("contoh.php");
    });
});
</script>
</head>
<body>
<div id="div1"><h2>div ini akan diisi dengan hasil load jquery ajax</h2></div>
<button>load ajax</button>
</body>
</html>

silahkan dicoba gan ganti contoh.php dengan url php agan . dan pastikan pc dalam keadaan online untuk menjalankan kode diatas. karena instalasi jquerynya menggunakan CDN.
dan ketika dijalankan dibrowser. div1 akan diisi dengan hasil load php tanpa ada proses loading di browser. itulah kelebihan dari jquery ajax. dengan jquery sangat mudah untuk membuat proses ajax karena sintak yang digunakan lebih simple dari pada ajax yang menggunakan javascript lansung.



referensi:Buku Pintar WEBMASTER

arsipbertuah
arsipbertuah Updated at: November 04, 2016