Cara Membuat Halaman Dinamis dengan Jquery

Publish Date : 02-01-2017 , dibaca 7725 kali, Hari ini dibaca : 1 kali ,0 comments

Tuturial kali ini kita akan membahas cara membuat Halaman Dinamis dengan Jquery , Untuk membuat halaman berganti pada 1 file saja biasanya dicontent , kita membutuhkan jquery / PHP , karna HTML tidak bisa melakukan hal ini, Nah.. disini kita akan membuat contoh dengan Jquery, Untuk membuat halaman dinamis dengan Jquery disini Kita membutuhkan 3 buah file yang akan kita buat yaitu :

1. Index.html
2. halaman1.html
3. halaman2.html

Note : buat folder dengan nama JS , dan simpan jquery di dalam folder js js/jquery-1.11.2.min.js ( file jquery dapat anda download disini) jika tidak ingin di download silahkan gunakan code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

ok.. langsung saja kita ke script membuat halaman dinamis dengan jquery nya :

Load Halaman Dinamis dengan Jquery

Index.html

<html>
<head>
<title>Ganti Halaman Dinamis Suckittrees.Com</title>
<style>
    .container {
                height:100px;
                width:100%;
    }
    .kolom1 {
                height:100px;
                width:20%;
                background-color:grey;
                float:left;
    }
    .kolom2 {
                height:100px;
                width:80%;
                background-color:red;
                float:right;   
    }
</style>
<script type="text/javascript" language="javascript" src="js/jquery-1.11.2.min.js">
<script>
 $(document).ready(function(){
$(".kolom1 ul li a").click(function(e){
e.preventDefault();
var url=$(this).attr('href');
$.ajax({
    type : 'GET',
    url  : url,
    success: function(data){
        $(".kolom2").fadeOut(300, function(){
        $(".kolom2").html(data).delay(250).fadeIn(300);
        });
    }
});
});
 });
</script>
</head>
<body>
<div class="container">
    <div class="kolom1">
        <ul>
            <li><a href="halaman1.html">Handphone</a></li>
            <li><a href="halaman2.html">Komputer</a></li>
        </ul>
    </div>
    <div class="kolom2">
        Halaman Awal
    </div>
</div>
</body>
</html>

halaman1.html

<html>
<head>
<title>Halaman1.html</title>
</head>
<body>
Ini Halaman 1 Handphone
</body>
</html>

halaman2.html

<html>
<head>
<title>Halaman2.html</title>
</head>
<body>
Ini Halaman 2 Komputer 
</body>
</html>

Membuat Pilihan berdasarkan Kategori Combobox yg Dipilih
Previous Post

Select All Textarea dengan button atau tombol
Next Post

Produk Rekomendasi

Ebook Membuat Website Dinamis PHP MYSQLi + Source Code

Ebook Membuat Website Dinamis PHP V.2 + Source Code

Aplikasi PPDB Berbasis Website Bootstrap PHP MYSQLi + Source Code

Tutorial Blog dan Website PHP MYSQLi

Contact Us

Statistik

Tags

Cara Membuat Halaman Dinamis dengan Jquery

Load Halaman Dinamis dengan Jquery

Produk Rekomendasi

Artikel Terkait

Diskusi

Youtube Tutorial

Random Posts