Jumat, 14 Agustus 2015
Belajar Jquery Ajax Dasar ajaxStart
Tidak ada komentar
:
Label:
Ajax
,
Jquery
Belajar Jquery Ajax Dasar ajaxStart
Jaka Prima Maulana
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<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>
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>
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
Kamis, 13 Agustus 2015
Belajar Jquery Ajax Dasar AjaxSend Memberikan Perintah Ketika Request Ajax Dikirim
Tidak ada komentar
:
Label:
Ajax
,
Jquery
Belajar Jquery Ajax AjaxSend Memberikan Perintah Ketika Request Ajax Dikirim
Jaka Prima Maulana
selamat 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.
Belajar Jquery Ajax Dasar .ajaxError
Tidak ada komentar
:
Label:
Ajax
,
Jquery
Belajar Jquery Ajax API .ajaxError
Jaka Prima Maulana
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<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>
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
Rabu, 12 Agustus 2015
Belajar Jquery Ajax Dasar .ajaxComplete
Tidak ada komentar
:
Label:
Ajax
,
Jquery
Belajar Jquery Ajax API .ajaxComplete
Jaka Prima MaulanaSelamat datang pengunjung primasaja.com,
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<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>
- 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 :<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>
<?php echo "<div style = 'background-color:rgba(97, 226, 248, 1); width:20%;'>ini adalah isi dari data yang di panggil</div>";
?>
Selasa, 11 Agustus 2015
Jquery Ajax API .Load Tutorial Meload Data Server Ke Element Tujuan
Tidak ada komentar
:
Label:
CodeIgniter
,
Javascript
,
Jquery
,
Php
Jquery Ajax API .Load Tutorial Meload Data Server Ke Element Tujuan
Jaka Prima MaulanaSelamat datang pengunjung primasaja.com,
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');
}
}
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 berikutclass 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>";
<?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
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/
localhost/tutorialjquery/data2/
<div id='Dasar2'>
// isi data dari url lain <div id=dasar3></div>
</div>
// 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 :)
Sabtu, 08 Agustus 2015
Apa Itu Javascript Void(0) Dan Fungsinya
11 komentar
:
Label:
Javascript
Apa Itu Javascript Void(0)
Jaka Prima Maulana
selamat datang pengunjung primasaja.com,
kali ini website primasaja.com akan membahas mengenai " Apa Itu Javascript Void(0) Dan Fungsinya ".
Ketika anda menelusuri sebuah web dengan penggunaan script kode yang menggunakan javascript pernahkan anda melihat tentang javascript:void(0) seperti ini ketika di link :
pembuat web memanggil javascript tersebut untuk membuat fungsi tambahan pada sebuah link. pada dasarnya ketika anda mengklik sebuah link browser anda akan menuju ketempat link itu berada dengan refresh page halaman / loading halaman.
ada suatu kondisi dimana anda ingin merubah suatu aksi tapi tidak sesuai dengan sifat aslinya dan tidak menampilkan perubahan apapun pada url pada browser untuk keperluan proses selanjutnya.
sebagai contoh sebuah link yang seharusnya menuju ke suatu tempat redirect href ke suatu alamat url tertentu tetapi adakalanya ingin tidak menuju ke url tertentu tapi dikaitkan ke onClick="fungsiKaloDiClick()" dan diikuti dengan href="#" untuk tidak menuju ke url manapun tapi menjalankan fungsi ketika di klik
contoh :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#" onClick="fungsiKlik()" >klik saya</a>
</body>
<script >
function fungsiKlik(){
window.location.assign('urlkedua')
}
</script>
</html>
contoh dengan javascript:void(0):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#" onClick="fungsiKlik()" >klik saya</a>
</body>
<script >
function fungsiKlik(){
window.location.assign('urlkedua')
}
</script>
</html>
gunanya void(0) untuk membuat url lebih cantik tanpa perlu adanya penambahan /# dibagian paling akhir url.
Tetapi bukan hanya untuk agar url lebih cantik tetapi juga berfungsi kembali ke suatu url agar tidak error untuk mencegah meload halaman tanpa URL tambahan, disana fungsi Javascript:void(0) dipergunakan dan melewati parameter 0 (nol) bisa juga untuk menambahkan url baru. nah disini pointnya.
kalo pakai href="#" dia akan menuju ke url yang dituju seperti ini
file:///var/www/html/programming-basic/javascript-basic-minimalist/window/urlkedua
lalu jika pakai tombol back
file:///var/www/html/programming-basic/javascript-basic-minimalist/window/index.html#
akan ada hash di urlnya
tetapi jika memakai javascript:void(0) akan kembali tanpa hash (#)
file:///var/www/html/programming-basic/javascript-basic-minimalist/window/index.html
 |
| gambar 1 |
 |
| gambar 2 |
lalu ketika anda akan mengklik menu lain tanpa refresh dan merubah URL anda dapat gunakan javascript:void(0) ini pada href seperti contoh gambar 2 tersebut
 |
| gambar 3 |
maka akan pindah url tanpa refresh dan merubah tampilan menuju URL tujuan tanpa merubah URL pada browser seperti saya gambarkan pada gambar 3 tersebut.
Mengapa perlu untuk agar URL tidak menggunakan # yaitu untuk pengembalian. Pengembalian maksudnya?
Maksud dari pengembalian disini dijelaskan seperti gambar berikut
 |
| gambar 4 |
ada beberapa hal atau maksud contoh url awal admin/ bla bla bla seperti gambar 4 ingin menuju kembali ke URL otomatis tanpa refresh tersebut maka diperlukan hal ini
 |
| gambar 5 |
untuk keperluan URL #blabla yang menuju suatu halaman tertentu kembali yang menggunakan sistem URL tanpa refresh
 |
| gambar 6 |
dan menuju halaman yang sebelumnya menggunakan javascript:void(0) untuk menggunakan javacript:void(0) kembali
contoh code :
<a href="JavaScript:void(0);" id="primasajatest" >klik saya</a>
praktek :
klik saya
Sabtu, 01 Agustus 2015
Cara Instal Dan Setting Permission Codeigniter di Linux
Cara Instal Dan Setting Permission Codeigniter di Linux
Jaka Prima Maulanaselamat datang pengunjung primasaja.com,
admin primasaja.com kali ini akan menshare bagaimana cara melakukan penginstalan Codeigniter dan melakukan setting permission agar dapat di akses keseluruhan file codeigniter.
Untuk penginstalannya sendiri sama saja dengan framework codeigniter di sistem operasi windows yaitu dengan cara berikut :
1. Install Codeigniter di linux
Untuk install codeigniter berikut tahap demi tahap untuk melakukannya :
1. Download CodeIgniter3
2. Ekstrak file rar CodeIgniter dan taruh file hasil ekstrak dalam htdocs lampp di /opt/lampp/htdocs
jika anda membuka localhost/codeigniter3 anda nanti akan ada status error seperti ini :
maka error : You don't have permission to access the requested directory. There is either no index document or the directory is read-protected. tersebut dikarenakan pengaksesan directory di tolak atau directory dalam keadaan pemproteksian dari pembacaan
maka untuk mengatasi error tersebut berikut langkah selanjutnya
2. Setting Permission Codeigniter
untuk melihat pengaturan dari file htdocs yang sudah di ekstrak tadi dapat anda lihat dengan cara
: buka terminal dan ketikkan cd /opt/lampp/htdocs
lalu untuk melihat settingan permission dengan cara mengetikkan ls -l
Codeigniter yang sudah di ekstrak tadi saya masukkan dalam folder codeigniterb dan dapat dilihat di tabel kolom pertama mengenai permission dari folder tersebut yaitu drw-r--r--r berbeda dengan file dashboard drwxrwxrwx
pengertian dari d, r, w, x, - ini adalah
d = Directory
r = perizinan untuk read
w = perizinan untuk write
x = perizinan untuk execute
- = tidak ada perizinan
setelah mengetahui permission secara detail bahwa folder yang akan dibuka di localhost tadi tidak dapat perizinan yang penuh maka selanjutnya akan dilanjutkan untuk setting permissionnya dengan cara :
di terminal ketikkan chmod 755 codeigniterb lalu lihat hasilnya.
sekian tutorial primasaja.com kali ini tentang " Cara Instal Dan Setting Permission Codeigniter di Linux "
jika ada kekurangan, kelebihan, atau pertanyaan silahkan ekspresikan dalam kotak komentar dibawah.
Langganan:
Postingan
(
Atom
)
