>
primasaja.com : solusi komputer prima
Email: jakaprima123@gmail.com
Phone: 081311086653
Fax: -
Url:
cash, credit card
Perum Griya Rajeg Lestari Blok C No 24
Tangerang, indonesia 15540
Artikel Pilihan

Gerakan Donasi / Kerjasama

Segala penulisan yang dibuat dalam website primasaja.com ini dilakukan secara gratis tanpa dipungut biaya
namun untuk keinginan perkembangan lebih lanjut dari website ini dan keberadaan website ini untuk memberikan konstribusi kepada semua pembaca
kami merencanakan kegiatan donasi ini, dengan kategori sebagai berikut:
Donasi Penulisan
Bagi Anda yang ingin menjadi penulis pada website primasaja.com secara sukarela ataupun untuk tujuan pekerjaan silahkan hubungi admin melalui email jaka@primasaja.com untuk info lebih lanjut.
Donasi keuangan
Bagi Anda yang ingin memberikan suntikan dana kepada kami secara sukarela maupun keperluan kerjasama, Kami sangat terbuka untuk kegiatan ini. Silahkan hubungi kami melalui nomor kontak 0813-9807-9895 ataupun melalui email jaka@primasaja.com. Bagi pengirim donasi ke rekening mandiri dengan No Rekening yang saya kirim via email atas nama jaka prima maulana
Donasi Kritik dan Saran
Kami terbuka luas, kritik dan saran anda mengenai pengembangan website kami baik ide, gagasan mengenai website kami. silahkan beri komentar pada email maupun setiap postingan artikel kami

Senin, 24 Agustus 2015

Belajar Jquery Dasar Penggunaan Select Pada Form Event

3 komentar : Diposting oleh prima di 22.58 Label:

Belajar Jquery Dasar Penggunaan Select Pada Form Event

  Jaka Prima Maulana


Belajar Jquery Dasar Penggunaan Select Pada Form Event
hasil belajar jquery .select


Selamat Datang Pengunjung primasaja.com,

Tutorial kali ini akan membahas tentang penggunaan .select pada jquery yaitu mengikatkan sebuah event javascript ketika melakukan select
Contoh

HTML : Penggunaan Jquery .select


  • pertama - tama buat dahulu script seperti berikut :


<html>
<head>
<title>Belajar Jquery Dasar Penggunaan Select Pada Form Event</title>


</head>


<body>

    <center><h1><p>Belajar Jquery Dasar Penggunaan Select Pada Form Event</p></h1></center>

       <p>Klik tekan terus dan ambil kata dibawah ini lalu lepaskan mouse </p>
<input id="primasaja_diklik" type ="text" value=" klik dan drag saya ya "/>
<div id="hasil"></div>

</body>
</html>
 


  •  jika sudah lalu masukkan library jquery anda dapat mendapatkannya disini  

  • lalu taruh diantara head


<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>

  • lalu buat javascript seperti berikut tepat diatas </body> atau dibawah </body>



<script type="text/javascript">
$(":input").select(function(){
$("#hasil").text("anda memilih teks").show().fadeOut(2000);
});
</script>


  • itu adalah akhirnya baik silahkan test tutorial jquery tersebut.
Selengkapnya..

Belajar Jquery Dasar Focusin Dan Focusout Mudah Dimengerti

Tidak ada komentar : Diposting oleh prima di 11.11 Label:

Belajar Jquery Dasar Focusin Dan Focusout Mudah Dimengerti

  Jaka Prima Maulana

hasil Belajar Jquery Dasar Focusin Dan Focusout Mudah Dimengerti
gambar hasil tutorial jquery focusin dan focusout


Selamat Datang Pengunjung primasaja.com,

Tutorial kali ini akan membahas tentang penggunaan jquery focusin dan focusout yaitu penanganan yang memanggil fungsi atau event data ketika focus in atau fokus out di jalankan

Contoh

HTML : .focusin dan .focusout


  • pertama - tama buat dahulu script seperti berikut :



<html>
<head>
<title>Tutorial Jquery .focusin dan .focusout PrimaSaja.com</title>


<style>
.info{
display: none;
}

.klik{
background-color: #E5ECEC;
}
</style>
</head>


<body>

    <center><h1><p>Tutorial Jquery .focusin dan .focusout PrimaSaja.com</p></h1></center>

       <p><input class="klik" type="text"> <span class="info"> silahkan masukkan nama </span></p>
       <p><input class="klik" type="password"> <span class="info">silahkan masukkan password</span></p>

       <div id="focusout"></div>


</body>
</html>



  •  jika sudah lalu masukkan library jquery anda dapat mendapatkannya disini  

  • lalu taruh diantara head


<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>


  • lalu buat javascript seperti berikut tepat diatas </body> atau dibawah </body>



<script type="text/javascript">
$( "p" ).focusin(function(){
$(this).find(".info").css("display", "inline").fadeOut(1500);
});

fokusout_primasaja = 0;

$("p").focusout(function(){
fokusout_primasaja++;
$("#focusout").text("anda keluar dari fokus sebanyak" + fokusout_primasaja + " X ");
});
</script>


  • itu adalah akhirnya baik silahkan test tutorial jquery tersebut.
Selengkapnya..

Jumat, 21 Agustus 2015

Belajar Jquery Dasar Form Event Merubah Data Dengan .Change

Tidak ada komentar : Diposting oleh prima di 10.57 Label: ,

Belajar Jquery Dasar Form Event Merubah Data Dengan .Change

Jaka Prima Maulana


Gambar Hasil Tutorial Jquery Form Event Merubah Data Dengan .Change
Gambar Hasil Tutorial


Selamat datang Pengunjung Primasaja.com,


Hari ini kita akan membahas mengenai " Belajar Jquery Form Event Merubah Data Dengan .Change " tutorial kali ini kita akan mencoba penggunaan event change yang berfungsi untuk mengirim ke element ketika value atau nilainya berubah, untuk lebih jelasnya langsung saja kita praktekkan.

HTML

  • pertama - tama buat dahulu script seperti berikut :


<html>
<head>
<title>Tutorial Jquery Form .Change PrimaSaja.com</title>

</head>


<body>


<select class="menu" multiple>
<option selected>Nasi Goreng</option>
<option >Nasi Bebek</option>
<option selected>Sate</option>
<option>Mie Ayam</option>
<option >Baso</option>

</select>
<br>
tekan ctrl dan pilih untuk memilih lebih dari satu
<br>
pilihan menu anda adalah <div class="berubah"> </div>

</body>

</html>

  •  jika sudah lalu masukkan library jquery anda dapat mendapatkannya disini  

  • lalu taruh diantara head


<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>



  • lalu buat javascript seperti berikut tepat diatas </body>




<script type="text/javascript>

$(".menu").change(function(){
    var a = "";
$(".menu option:selected").each(function(){
    a += $(this).text() + " ";
});
$(".berubah").text(a);
})
.change();

</script>


  • itu adalah akhirnya baik silahkan test tutorial jquery tersebut.



Selengkapnya..

Senin, 17 Agustus 2015

Belajar Jquery Dasar Form .Focus dan .Blur

Tidak ada komentar : Diposting oleh prima di 23.58 Label: ,

Belajar Jquery Form .Focus dan .Blur

  Jaka Prima Maulana


Gambar Jquery form .focus dan .blur Tutorial primasaja


selamat datang pengunjung primasaja.com,
pembahasan kali ini akan membahas mengenai " Belajar Jquery Dasar Form .Focus dan .Blur " didalam jquery form anda sering melihat sebuah kotak pengisian yang berubah warna atau diberi event - event lain seperti bantuan dan sebagainya, apa yang kita pelajari kali ini bisa saja dengan fungsi sesederhana ini, Mari kita buat sesuai dengan tahap - tahap seperti ini

HTML

buat file bernama blur.php / blur.html lalu ketik code berikut


<html>
<head>
<title>Tutorial Jquery Form .focus dan .blur PrimaSaja.com</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>


</head>


<body>
<form>
<input id="kotakprimasaja" type="text" value="klik untuk mengetik">
</form>
<div id="penjelasan">
klik kotak diatas
</div>

<script>
$("#kotakprimasaja").focus(function(){
$(this).css({"background-color":"aqua","border-radius":"20%"});


});

$( "#kotakprimasaja" ).blur(function() {
    $(this).css({"background-color":"red","border-radius":"0%"});
});
</script>

</body>

</html>  

Selesai silahkan anda jalankan...

Framework codeigniter


  • buat controller baru dengan nama Form.php dan isikan seperti berikut :
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Form extends CI_controller {

    function index(){
        $this->load->view('Blur');
    }
    function test1(){
        echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
    }
}


lalu buat file baru di dalam view sesuai dengan view yang di definisikan di controller
yaitu blur.php dan isi kan kode seperti berikut

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>

<html>
<head>
<title>Tutorial Jquery Form .focus dan .blur PrimaSaja.com</title>
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>


</head>


<body>
<form>
<input id="kotakprimasaja" type="text" value="klik untuk mengetik">
</form>
<div id="penjelasan">
klik kotak diatas
</div>

<script>
$("#kotakprimasaja").focus(function(){
$(this).css({"background-color":"aqua","border-radius":"20%"});


});

$( "#kotakprimasaja" ).blur(function() {
    $(this).css({"background-color":"red","border-radius":"0%"});
});
</script>

</body>

</html>   


Selengkapnya..

Minggu, 16 Agustus 2015

Belajar Jquery Ajax Dasar .ajaxSuccess Menambahkan Fungsi Saat Ajax Complete

Tidak ada komentar : Diposting oleh prima di 17.23 Label: ,

Belajar Jquery Ajax .ajaxSuccess Menambahkan Fungsi Saat Ajax Complete

  Jaka Prima Maulana


Gambar hasil tutorial jquery ajax .ajax success


selamat datang pengunjung primasaja.com,
pada tutorial sebelumnya kita telah membahas mengenai cara penggunaan dan fungsi dari .ajaxStop yaitu perintah - perintah yang akan dijalankan ketika ajax pertama kali dijalankan dan tutorial kali ini akan membahas mengenai " Belajar Jquery Ajax Dasar .ajaxSuccess Menambahkan Fungsi Saat Ajax Complete " tutorial jquery ajax .ajaxSuccess ini sendiri adalah daftar - daftar atau perintah - perintah fungsi yang dipanggil atau dijalankan ketika request dari seluruh ajax telah berhasil di request.

Tutorial ini akan dibagi menjadi dua yaitu php / HTML dan framework codeigniter

1. framework codeigniter


  • buat controller baru untuk membuat code ajaxstop ini atau dengan memakai tutorial sebelumnya dan ganti .ajaxStop menjadi .ajaxSuccess pada view
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxevent extends CI_controller {

    function index(){
        $this->load->view('Ajaxsuccess');
    }
    function test1(){
        echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
    }
}
setelah itu buat view sesuai dengan view yang dibuat dalam code $this->load->view('Ajaxsuccess'); yaitu buat file Ajaxsuccess.php pada folder view dan buat script berikut
<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>

<html>
<head>
<title>Tutorial Jquery ajax .AjaxSuccess PrimaSaja.com</title>
<!-- file jquery yang tadi didownload-->
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>
<style>
.primasaja{
    margin-left: 50%;
margin-right: 50%;
background-color: #51A3EC;
}
</style>

</head>


<body>
    <center><h1>Tutorial Jquery Ajax .ajaxSuccess PrimaSaja.com</h1></center>

       <button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="lagiproses">tunggu bentarrrr</div>
<div class="hasil_data"></div>

<div class="pemberitahuan_aktifitas_lengkap"></div>


<script>

$(document).ready(function(){
$(".lagiproses").hide();
});



$(document).ajaxStart(function(){
    $(".pemberitahuan_aktifitas").text("data mulai Direquest");
});

$(document).ajaxStart(function(){
$(".lagiproses").show();
});

$(document).ajaxSend(function(){
    $(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("<?php echo base_url()?>ajaxevent/test1");
});


$(document).ajaxStop(function(){
$(".pemberitahuan_aktifitas").text("ajax stop dijalankan")
});

$(document).ajaxStop(function(){
$(".lagiproses").hide();
});


$( document ).ajaxSuccess(function( event, request, settings ) {
$( ".pemberitahuan_aktifitas_lengkap" ).append( "<div style='background-color:pink; width:50%;'>berhasil direquest</div>" );
});

</script>     

</body>

</html>  




selesai silahkan coba jalankan penjelasan akan saya berikan pada akhir postingan ini, lalu untuk php native buat seperti berikut :

2. php / HTML

buat file dengan nama ajaxsuccess.php dan isikan code berikut ini :



<html>
<head>
<title>Tutorial Jquery ajax .AjaxSuccess PrimaSaja.com</title>
<!-- file jquery yang tadi didownload-->
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>
<style>
.primasaja{
    margin-left: 50%;
margin-right: 50%;
background-color: #51A3EC;
}
</style>

</head>


<body>
    <center><h1>Tutorial Jquery Ajax .ajaxSuccess PrimaSaja.com</h1></center>

       <button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="lagiproses">tunggu bentarrrr</div>
<div class="hasil_data"></div>

<div class="pemberitahuan_aktifitas_lengkap"></div>


<script>

$(document).ready(function(){
$(".lagiproses").hide();
});



$(document).ajaxStart(function(){
    $(".pemberitahuan_aktifitas").text("data mulai Direquest");
});

$(document).ajaxStart(function(){
$(".lagiproses").show();
});

$(document).ajaxSend(function(){
    $(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("ajaxevent/test1");
});


$(document).ajaxStop(function(){
$(".pemberitahuan_aktifitas").text("ajax stop dijalankan")
});

$(document).ajaxStop(function(){
$(".lagiproses").hide();
});


$( document ).ajaxSuccess(function( event, request, settings ) {
$( ".pemberitahuan_aktifitas_lengkap" ).append( "<div style='background-color:pink; width:50%;'>Berhasil Direquest!</div>" );
});

</script>     

</body>

</html>  

lalu buat file baru dengan nama test1.php dan isikan code berikut

<?php echo "terserah anda";?>

Catatan : download jquery.js di sini

silahkan jalankan

Penjelasan : 

$( document ).ajaxSuccess(function( event, request, settings ) {
$( ".pemberitahuan_aktifitas_lengkap" ).append( "<div style='background-color:pink; width:50%;'>Berhasil Direquest!</div>" );
});

dari skrip tersebut ajaxSuccess akan terpanggil setelah data dari request

$(".hasil_data").load("<?php echo base_url()?>ajaxevent/test1");
berhasil di request

terimakasih telah mengikuti tutorial saya dari awal sampai anda membaca ini jika ada pertanyaan, kritik dan saran silahkan berkomentar dibawah ini. :)

Selengkapnya..

Sabtu, 15 Agustus 2015

Belajar Jquery Ajax Dasar .ajaxStop

Tidak ada komentar : Diposting oleh prima di 06.14 Label: ,

Belajar Jquery Ajax .ajaxStop

  Jaka Prima Maulana


Tutorial jquery ajax .ajaxStop


selamat datang pengunjung primasaja.com,
pada tutorial sebelumnya kita telah membahas mengenai cara penggunaan dan fungsi dari .ajaxStart yaitu perintah - perintah yang akan dijalankan ketika ajax pertama kali dijalankan dan tutorial kali ini akan membahas mengenai " Belajar Jquery Ajax Dasar .ajaxStop " tutorial jquery ajax .ajaxStop ini sendiri adalah daftar - daftar atau perintah - perintah fungsi yang dipanggil atau dijalankan ketika request dari seluruh ajax telah berhasil di request.

Tutorial ini akan dibagi menjadi dua yaitu php / HTML dan framework codeigniter

1. framework codeigniter


buat controller baru untuk membuat code ajaxstop ini atau dengan memakai tutorial sebelumnya dan ganti .ajaxStart menjadi .ajaxStop pada view
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxevent extends CI_controller {

    function index(){
        $this->load->view('Ajaxstop');
    }
    function test1(){
        echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
    }
}

setelah itu buat view sesuai dengan view yang dibuat dalam code $this->load->view('Ajaxstop'); yaitu buat file Ajaxstop.php pada folder view dan buat script berikut
<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>

<html>
<head>
<title>Tutorial Jquery ajax .AjaxStop PrimaSaja.com</title>
<!-- file jquery yang tadi didownload-->
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>


</head>


<body>
    <center><h1>Tutorial Jquery Ajax .ajaxStop PrimaSaja.com</h1></center>

       <button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="lagiproses">tunggu bentarrrr</div>
<div class="hasil_data"></div>

<div class="pemberitahuan_aktifitas_lengkap"></div>


<script>

$(document).ajaxStop(function(){
$(".pemberitahuan_aktifitas").text("ajax stop dijalankan")
});

$(document).ajaxStart(function(){
    $(".pemberitahuan_aktifitas").text("data mulai Direquest");
});



$(document).ajaxSend(function(){
    $(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("<?php echo base_url()?>ajaxevent/test1");
});


$(document).ready(function(){
$(".lagiproses").hide();
});

$(document).ajaxStart(function(){
$(".lagiproses").show();
});

$(document).ajaxStop(function(){
$(".lagiproses").hide();
});
</script>      

</body>

</html>   


selesai silahkan coba jalankan penjelasan akan saya berikan pada akhir postingan ini, lalu untuk php native buat seperti berikut :

2. php/ HTML


<html>
<head>
<title>Tutorial Jquery ajax .AjaxStop PrimaSaja.com</title>
<!-- file jquery yang tadi didownload-->
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>


</head>


<body>
    <center><h1>Tutorial Jquery Ajax .ajaxStop PrimaSaja.com</h1></center>

       <button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="lagiproses">tunggu bentarrrr</div>
<div class="hasil_data"></div>

<div class="pemberitahuan_aktifitas_lengkap"></div>


<script>

$(document).ajaxStop(function(){
$(".pemberitahuan_aktifitas").text("ajax stop dijalankan")
});

$(document).ajaxStart(function(){
    $(".pemberitahuan_aktifitas").text("data mulai Direquest");
});



$(document).ajaxSend(function(){
    $(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("ajaxevent/test1");
});


$(document).ready(function(){
$(".lagiproses").hide();
});

$(document).ajaxStart(function(){
$(".lagiproses").show();
});

$(document).ajaxStop(function(){
$(".lagiproses").hide();
});
</script>      

</body>

</html>   


lalu buat file baru dengan nama test1.php dan isikan code berikut

<?php echo "terserah anda";?>

Catatan : download jquery.js di sini

silahkan jalankan

Penjelasan :  sesuai dengan script diatas maksudnya adalah ketika button tombol css .primasaja di klik maka document ready yang awalnya menyembunyikan css .lagiproses maka akan tampil .show() karena .ajaxStart dijalankan dan ketika ajax success memanggil data yang di request maka .ajaxStop akan dijalankan dan .lagiproses akan tersembunyi kembali.

terimakasih telah mengikuti tutorial saya dari awal sampai anda membaca ini jika ada pertanyaan, kritik dan saran silahkan berkomentar dibawah ini. :)

Selengkapnya..

Jumat, 14 Agustus 2015

Belajar Jquery Ajax Dasar ajaxStart

Tidak ada komentar : Diposting oleh prima di 22.54 Label: ,

Belajar Jquery Ajax Dasar ajaxStart

  Jaka Prima Maulana

Tutorial jquery ajaxStart


selamat datang pengunjung primasaja.com,
tutorial kali ini sesuai judul yang kita akan bahas yaitu mengenai " Belajar Jquery Ajax Dasar ajaxStart ". Sesuai dengan nama .ajaxStart yaitu perintah - perintah yang akan dijalankan ketika ajax pertama kali dijalankan

langsung saja untuk mempraktekkan nya tutorial ini akan di bagi menjadi 2 yaitu dengan menggunakan framework codeigniter dan php / HTML.

1. Framework Codeigniter


pada tutorial ini kita akan membuat website dengan fungsi jquery ajaxStart dengan menggunakan framework codeigniter.

  • buat controller dengan nama ajaxEvent.php lalu buat kode seperti berikut :

<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxevent extends CI_controller {

    function index(){
        $this->load->view('Ajaxstart');
    }
    function test1(){
        echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
    }
}
  • sesuai dengan apa yang telah kita buat dalam script kontroller tadi yaitu $this->load->view('Ajaxstart'); maka selanjutnya kita buat view dengan nama Ajaxstart.php lalu buat script seperti berikut :
<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>

<html>
<head>
<title>Tutorial Jquery ajax .AjaxStart PrimaSaja.com</title>
<!-- file jquery yang tadi didownload-->
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>


</head>


<body>
    <center><h1>Tutorial Jquery Ajax .ajaxStart PrimaSaja.com</h1></center>

       <button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="lagiproses">tunggu bentarrrr</div>
<div class="hasil_data"></div>

<div class="pemberitahuan_aktifitas_lengkap"></div>


<script>

$(document).ajaxStart(function(){
    $(".pemberitahuan_aktifitas").text("data mulai Direquest");
});



$(document).ajaxSend(function(){
    $(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("<?php echo base_url()?>ajaxevent/test1");
});


$(document).ready(function(){
$(".lagiproses").hide();
});

$(document).ajaxStart(function(){
$(".lagiproses").show();
});
</script>      

</body>

</html>   

seperti biasa buat anda yang belum ada jquerynya bisa di download disini lalu silahkan jalankan maka anda akan mendapatkan hasil seperti foto yang saya buat di awal postingan ini

2. PHP/ HTML


untuk php nativ buat file didalam satu folder lalu buat code seperti berikut


<html>
<head>
<title>Tutorial Jquery ajax .AjaxStart PrimaSaja.com</title>
<!-- file jquery yang tadi didownload-->
<script type="text/javascript" src="<?php echo base_url();?>jquery-1.11.1.min.js"></script>


</head>


<body>
    <center><h1>Tutorial Jquery Ajax .ajaxStart PrimaSaja.com</h1></center>

       <button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="lagiproses">tunggu bentarrrr</div>
<div class="hasil_data"></div>

<div class="pemberitahuan_aktifitas_lengkap"></div>


<script>

$(document).ajaxStart(function(){
    $(".pemberitahuan_aktifitas").text("data mulai Direquest");
});



$(document).ajaxSend(function(){
    $(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("ajaxevent/test1");
});


$(document).ready(function(){
$(".lagiproses").hide();
});

$(document).ajaxStart(function(){
$(".lagiproses").show();
});
</script>      

</body>

</html>   
selesai silahkan jalankan.. :)

Penjelasan : ketika ajax memulai merequest maka script start ini akan jalan, seperti isi code diatas dimana bahwa telah di spesifikasikan default saat web terbuka maka document tersebut akan menyembunyikan css .lagiproses $(document).ready(function(){
$(".lagiproses").hide();


lalu ketika button di klik maka ajaxStart dan ajaxSend akan dijalankan

Selengkapnya..

Kamis, 13 Agustus 2015

Belajar Jquery Ajax Dasar AjaxSend Memberikan Perintah Ketika Request Ajax Dikirim

Tidak ada komentar : Diposting oleh prima di 15.07 Label: ,

Belajar Jquery Ajax AjaxSend Memberikan Perintah Ketika Request Ajax Dikirim

  Jaka Prima Maulana

Gambar hasil tutorial jquery ajax ajaxsendselamat datang pengunjung primasaja.com,

tutorial kali ini akan masih membahas mengenai tutorial jquery ajax event kali ini yaitu tentang " Belajar Jquery Ajax Dasar AjaxSend Memberikan Perintah Ketika Request Ajax Dikirim "

tutorial ini masih sama seperti tutorial sebelumnya jika sebelumnya kita membuat perintah ketika ajax error ketika anda merequest data dari url lain kali ini akan dibahas bagaimana jika url tersebut akan baru akan direquest ajax.

untuk lebih jelasnya langsung saja untuk mempraktekkannya, tutorial ini akan dibagi menjadi 2 bagian yaitu php / html dan framework

framework codeigniter

pada tutorial sebelumnya kita telah membuat controller ajaxevent.php rubah saja view nya ke ajaxsend.php seperti berikut :



<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxevent extends CI_controller {

    function index(){
        $this->load->view('Ajaxsend');
    }
    function test1(){
        echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
    }
}

lalu buat view baru dengan nama ajaxsend.php lalu buat kode seperti berikut :

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>

<html>
<head>
<title>Tutorial Jquery ajax .AjaxSend PrimaSaja.com</title>
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>


</head>


<body>
    <center><h1>Tutorial Jquery Ajax .ajaxSend PrimaSaja.com</h1></center>

       <button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas_send"></div>

<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>

<div class="pemberitahuan_aktifitas_lengkap"></div>


<script>

$(document).ajaxComplete(function(){
    $(".pemberitahuan_aktifitas").text("data berhasil Direquest");
});



$(document).ajaxSend(function(){
    $(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("<?php echo base_url()?>ajaxevent/test1");
});

$(document).ajaxSend(function(event, request, settings){
$(".pemberitahuan_aktifitas_lengkap").append("</br><div style='background-color:yellow;'>anda sedang merequest link : " + settings.url +"</div>");
});

$(document).ajaxComplete(function(event, request, settings){
$(".pemberitahuan_aktifitas_lengkap").append("<div style='background-color:red;'>data dengan url :"+ settings.url +"  yang anda minta berhasil di request</div>")
});
</script>      

</body>

</html>   



 untuk php / HTML

buat file seperti ini 



pertama - tama buat file dengan nama ajaxsend.php dan download file jquery jquery-1.11.1.min.js disini masukkan dalam 1 folder isikan script berikut pada ajaxsend


<html>
<head>
<title>Tutorial Jquery ajax .AjaxSend PrimaSaja.com</title>
<!-- file jquery yang tadi didownload-->
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>


</head>


<body>
    <center><h1>Tutorial Jquery Ajax .ajaxSend PrimaSaja.com</h1></center>

       <button class="primasaja">klik disini untuk mengambil data ajaxevent/test1</button>
<div class="pemberitahuan_aktifitas_send"></div>

<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>

<div class="pemberitahuan_aktifitas_lengkap"></div>


<script>

$(document).ajaxComplete(function(){
    $(".pemberitahuan_aktifitas").text("data berhasil Direquest");
});



$(document).ajaxSend(function(){
    $(".pemberitahuan_aktifitas_send").text("Harap Tunggu Permintaan sedang Direquest");
});
$(".primaSaja").click(function(){
$(".hasil_data").load("ajaxevent/test1");
});

$(document).ajaxSend(function(event, request, settings){
$(".pemberitahuan_aktifitas_lengkap").append("</br><div style='background-color:yellow;'>anda sedang merequest link : " + settings.url +"</div>");
});

$(document).ajaxComplete(function(event, request, settings){
$(".pemberitahuan_aktifitas_lengkap").append("<div style='background-color:red;'>data dengan url :"+ settings.url +"  yang anda minta berhasil di request</div>")
});
</script>      

</body>

</html>  




lalu buat file baru dengan nama test1.php isikan terserah anda
 contoh :
<?php echo "ini isi datanya"?>

setelah selesai silahkan jalankan selamat anda berhasil membuat ajax event ketika send data.





Selengkapnya..

Belajar Jquery Ajax Dasar .ajaxError

Tidak ada komentar : Diposting oleh prima di 14.09 Label: ,

Belajar Jquery Ajax API .ajaxError

  Jaka Prima Maulana


Gambar hasil tutorial jquery ajax .ajaxError


Selamat datang pengunjung primasaja.com,
tutorial kali ini saya akan membahas mengenai " Belajar Jquery Ajax Dasar .ajaxError " ajax error ini adalah jquery yang akan ditampilkan ketika request ajax telah complete tetapi data yang diminta dari server itu tidak ada misalnya didalam localhost/tutorialjquery/ajaxevent kita memanggil data dari localhost/tutorialjquery/ajaxevent/test2 padahal data yang anda punya adalah data localhost/tutorialjquery/ajaxevent/test1 maka ajax error ini perintah - perintah yang muncul ketika data tersebut tidak ada

langsung saja seperti biasa tutorial ini akan dibagi menjadi 2 yaitu php / html dan framework codeigniter

framework codeigniter

1. buat controller Ajaxevent.php dan isikan seperti berikut


<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxevent extends CI_controller {

    function index(){
        $this->load->view('Ajaxerror');
    }
    function test1(){
        echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
    }
}


2. buat view sesuai view yang sudah kita buat di script kontroller tadi yaitu Ajaxerror.php lalu isikan seperti berikut ini


<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>

<html>
<head>
<title>Tutorial Jquery ajax .Ajaxerror PrimaSaja.com</title>
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>


</head>


<body>
    <center><h1>Tutorial Jquery Ajax .ajaxError PrimaSaja.com</h1></center>

       <button class="primasaja">klik disini untuk mengambil data ajaxevent/urlyangandatidakpunya</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>


<script>
$(document).ajaxError(function(){
$(".pemberitahuan_aktifitas").text("maaf data yang anda cari tidak ada");
});

$(".primasaja").on("click", function(){
$(".hasil_data").load("<?php echo base_url()?>ajaxevent/isi_terserah_lu_yang_penting_yang_lu_ga_punya");
});

$( document ).ajaxError(function( event, request, settings ) {
$( ".pemberitahuan_aktifitas" ).append( "</br>ketika anda request link ini data tidak ada " + settings.url);
});
</script>      

</body>

</html>

selesai silahkan jalankan kode tersebut






Untuk php Nativ

buat file php / html dengan nama ajaxerror.php lalu buat script seperti ini :

<html>
<head>
<title>Tutorial Jquery ajax .Ajaxerror PrimaSaja.com</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>


</head>


<body>
    <center><h1>Tutorial Jquery Ajax .ajaxError PrimaSaja.com</h1></center>

       <button class="primasaja">klik disini untuk mengambil data ajaxevent/urlyangandatidakpunya</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>


<script>
$(document).ajaxError(function(){
$(".pemberitahuan_aktifitas").text("maaf data yang anda cari tidak ada");
});

$(".primasaja").on("click", function(){
$(".hasil_data").load("ajaxevent/isi_terserah_lu_yang_penting_yang_lu_ga_punya");
});

$( document ).ajaxError(function( event, request, settings ) {
$( ".pemberitahuan_aktifitas" ).append( "</br>ketika anda request link ini data tidak ada " + settings.url);
});
</script>      

</body>

</html>

lalu download sesuai dengan script ini
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
download file jquery-1.11.1.min.js disini lalu taruh bersamaan dalam satu folder
silahkan jalankan

penjelasan :

ketika anda mengklik button primasaja maka seperti yang telah di spesifikasikan di dalam javascript diatas $(".primasaja").on("click", function(){
maka hasil_data akan terisi dengan data dari url  ajaxevent/isi_terserah_lu_yang_penting_yang_lu_ga_punya
karena url itu tidak ada maka $( document ).ajaxError disinilah bekerja dan menampilkan text atau fungsi lainnya

terimakasih telah melihat tutorial saya silahkan kirim email ke saya untuk mendapatkan data tutorial ini ke jaka@primasaja.com






Selengkapnya..

Rabu, 12 Agustus 2015

Belajar Jquery Ajax Dasar .ajaxComplete

Tidak ada komentar : Diposting oleh prima di 18.03 Label: ,

Belajar Jquery Ajax API .ajaxComplete

  Jaka Prima Maulana

Selamat datang pengunjung primasaja.com,

Gambar hasil tutorial jquery ajax .ajaxComplete


tutorial kali ini akan membahas mengenai " Belajar Jquery Ajax Dasar .ajaxComplete ". ajax complete ini digunakan untuk daftar apa - apa saja ketika data Ajax berhasil di request.

Tutorial ini akan dibagi menjadi 2 yaitu nativ php dan framework codeigniter

Framework codeigniter

  • buat controller dengan nama Ajaxcomplete dan buat script seperti berikut :


<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Ajaxcomplete extends CI_controller {

    function index(){
        $this->load->view('Ajaxcomplete');
    }
    function test1(){
        echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
    }
}


lalu buat view sesuai dengan $this->load->view('Ajaxcomplete'); yaitu berarti buat view Ajaxcomplete.php buat code seperti berikut



<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>

<html>
<head>
<title>Tutorial Jquery ajax .Ajaxcomplete PrimaSaja.com</title>
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>


</head>


<body >

    <center><h1>Tutorial Jquery .ajaxComplete PrimaSaja.com</h1></center>

       <button class="primasaja">klik saya untuk mengambil data</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>


<script>
$( document ).ajaxComplete(function() {
$( ".pemberitahuan_aktifitas" ).text( "Pemberitahuan bahwa Ajax telah Complete." );
});

$( ".primasaja" ).click(function() {
$( ".hasil_data" ).load( "<?php echo base_url()?>Ajaxcomplete/test1" );
});

}
});
</script>      

</body>

</html>   

selesai silahkan anda coba jalankan dengan mengklik button primasaja dan lihat hasilnya



  • untuk php / html buat ajaxcomplete.php dan isikan seperti berikut :
<html>
<head>
<title>Tutorial Jquery ajax .Ajaxcomplete PrimaSaja.com</title>
<script type="text/javascript" src="asset/js/jquery-1.11.1.min.js"></script>


</head>


<body onload='formpengisian()'> <!-- tambahkan on load function -->

    <center><h1>Tutorial Jquery .ajaxComplete PrimaSaja.com</h1></center>

       <button class="primasaja">klik saya untuk mengambil data</button>
<div class="pemberitahuan_aktifitas"></div>
<div class="hasil_data"></div>


<script>
$( document ).ajaxComplete(function() {
$( ".pemberitahuan_aktifitas" ).text( "Pemberitahuan bahwa Ajax telah Complete." );
});

$( ".primasaja" ).click(function() {
$( ".hasil_data" ).load( "Ajaxcomplete/test1" );
});

}
});
</script>      

</body>

</html>   
lalu buat file lagi dengan nama test1.php dan isikan code seperti berikut :


 <?php echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>"; 
?>
silahkan jalankan sekarang :)
Selengkapnya..

Selasa, 11 Agustus 2015

Jquery Ajax API .Load Tutorial Meload Data Server Ke Element Tujuan

Tidak ada komentar : Diposting oleh prima di 11.41 Label: , , ,

Jquery Ajax API .Load Tutorial Meload Data Server Ke Element Tujuan

Jaka Prima Maulana

Selamat datang pengunjung primasaja.com,

Gambar hasil belajar Tutorial jquery ajax .load


tutorial primasaja.com kali ini admin akan membagikan bagaimana cara untuk " Meload Data Server Ke Element Tujuan ", sebagai gambaran sederhana apa yang akan kita lakukan adalah anda akan dapat menempatkan localhost/jqueryajaxapi/data1 dari url lain ke dalam localhost/jqueryajaxapi pada spesifikasi element css yang anda tuju

struktur dasar pembuatan API .load ini adalah
.load (url [,data] [,complete])

apa yang akan kita lakukan sekarang adalah cara yang paling simple untuk mengambil data dari server sama saja seperti .get (url , data , sukses) kecuali jika dengan method global.


1. Jquery Ajax API .Load URL

mari mulai membuat .load dan mengambil data dari server dari hal yang paling simple berikut ini :

catatan buat folder baru di dalam htdocs adalah tutorialjqueryprimasaja


untuk framework
1. buat controller


<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Inti extends CI_controller {

    function index(){
        $this->load->view('index');
    }
}

2. lalu buat view seperti berikut :
untuk yang bukan framework langsung aja yang bawah dan hapus yang saya hitamkan : 

script :

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed'); ?>
<html>
<head>
<title>Tutorial Jquery ajax .load PrimaSaja.com</title>
<script type="text/javascript" src="<?php echo base_url();?>asset/js/jquery-1.11.1.min.js"></script>

<script type="text/javascript">
var site = "<?php echo site_url()?>"; //ganti sama localhost/tutorialjqueryprimasaja/

function fungsibody(){
    $('#Dasar').load('<?php echo base_url();?>data1/', function(){alert("proses pengiriman data dari server berhasil");});
}
</script>

<style>
#dasar{background-color: rgba(255, 197, 78, 1);
margin-bottom: 100px;
width: 800px;
height: auto;

}

#dasar2{background-color: blue;
margin-bottom: 300px;
width: 800px;
height: auto;

}
#dasar3{background-color: red;
margin-bottom: 500px;
width: 800px;
height: auto;

}

</style>

</head>


<body onload='fungsibody()'>

    <center><h1>Tutorial Jquery ajax .load PrimaSaja.com</h1></center>

        <div id='Dasar'>

        </div>

        <div id='Dasar2'>

        </div>
 <script>
        $('#Dasar2').load('<?php echo base_url();?>data2 #Dasar3');
        </script>


</body>

</html>


lalu buat controller baru dengan nama Data1 seperti dibawah ini


<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Data1 extends CI_controller {

    function index(){
        echo "halo anda sedang melihat data dari http://localhost/tutorialjqueryprimasaja/data1 </br>  di http://localhost/tutorialjqueryprimasaja/";
}

untuk php buat file data1.php dan isikan seperti berikut
<?php echo "halo anda sedang melihat data dari http://localhost/tutorialjqueryprimasaja/data1 </br>  di http://localhost/tutorialjqueryprimasaja/"?>

lalu buat lagi controller baru dengan nama Data2 seperti dibawah ini
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Data2 extends CI_controller {

    function index(){
        echo "halo anda sedang melihat data dari http://localhost/tutorialjqueryprimasaja/data2 </br>  di http://localhost/tutorialjqueryprimasaja/";
        echo "<div id='Dasar3'>
halo anda sedang melihat data dari http://localhost/tutorialjqueryprimasaja/data2 yang hanya mengambil dari div Dasar3
        </div>";
untuk php buat file data2.php dan isikan seperti berikut
<?php echo "halo anda sedang melihat data dari http://localhost/tutorialjqueryprimasaja/data2 </br>  di http://localhost/tutorialjqueryprimasaja/"?>

catatan : taruh jquery script di C:\xampp\htdocs\namafolderanda\asset\js\jquery-1.11.1.min.js.
script jquery bisa di dapat dari sini klik disini
silahkan cek hasilnya penjelasan hasil tersebut adalah ketika body onload mengambil fungsi dari script fungsibody() yang berisi :
$('#Dasar').load('<?php echo base_url();?>data1/', function(){alert("proses pengiriman data dari server berhasil");});

maka :

<div id='Dasar'>
//isi datanya akan masuk kesini
        </div>

akan berisi data dari url yang anda tuju yaitu localhost/tutorialjquery/data1/ dan fungsi yang dibuat juga dapat dipanggil yaitu pemberitahuan function(){alert("proses pengiriman data dari server berhasil");
lalu pada script css kita mencoba menaruh data dari url lain yang lebih spesifik yaitu data yang berada pada div dasar3 sesuai dengan script
localhost/tutorialjquery/data2/ 
  <div id='Dasar2'>
// isi data dari url lain <div id=dasar3></div>
        </div>       
 jika masih bingung silahkan kirim email anda ke jaka@primasaja.com untuk mendapatkan link download hasil belajar sekian :)
Selengkapnya..
Langganan: Postingan ( Atom )

twitter tumblr linkedin pinterest google+

© Primasaja.com : PRIme Management Software Architecture with JAka 2014 . Powered by Design Template Primasaja and BD Black Design Primasaja.com