Powered by Blogger.
Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

Wednesday, 15 April 2015

Validasi merupakan hal yang harus perlu dimiliki oleh sebuah Aplikasi yang baik, namun terkadang seorang developer kesuiltan dalam membuat validasi sebuah inputan dalam form. Dalam tutorial kali ini penulis akan memberikan "jurus" mudah untuk memvalidasi sebuah form hanya menggunakan plugin dari jQuery.
contoh source code :

<!--  load file jquery  -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<!-- load file plugin jquery validation -->
<script type='text/javascript' src='validasi.js'></script>

<form id="formku">

    Nama : <input name="username" class="required"><br>

    Umur : <input name="umur" class="required number"><br>

<input type="submit" value="Simpan">

</form>

<script>
// code jquery unutk validasi form berdasarkan id
$('#formku').validate();
</script>






Penjelasan :
 $('#formku').validate(); adalah code jQuery unutk memvalidasi form berdasarkan id formnya, jadi from harus diberi id ataupun class juga bisa namun code untuk validasinya tinggal mengganti #(pagar) menjadi .(titik)
selanjutnya yang harus diperhatikan adalah pemberian atribut class pada inputan dengan asumsi sbb :
  1. class = "required" adalah inputan harus diisi.
  2. class = "number" adalah inputan harus berupa angka.
  3. class = "email" adalah inputan harus berupa email yang valid.
Untuk lainnya silahkan googling karena bisa dijadikan banyak fungsi validasi.
tambahkan script css untuk mempercantik pesan kesalahan :
form label.error{
display:inline;font:10px Tahoma,sans-serif;color:#ED7476;margin-left:5px
}
form input.error,form input.error:hover,form input.error:focus,form select.error,form textarea.error{
border:1px solid #ED7476;background:#FFEDED
}

untuk file lengkapnya bisa di download disini
Jquery

Validasi Form mudah dengan jQuery

Posted by Creative Recipes  |  No comments

Validasi merupakan hal yang harus perlu dimiliki oleh sebuah Aplikasi yang baik, namun terkadang seorang developer kesuiltan dalam membuat validasi sebuah inputan dalam form. Dalam tutorial kali ini penulis akan memberikan "jurus" mudah untuk memvalidasi sebuah form hanya menggunakan plugin dari jQuery.
contoh source code :

<!--  load file jquery  -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<!-- load file plugin jquery validation -->
<script type='text/javascript' src='validasi.js'></script>

<form id="formku">

    Nama : <input name="username" class="required"><br>

    Umur : <input name="umur" class="required number"><br>

<input type="submit" value="Simpan">

</form>

<script>
// code jquery unutk validasi form berdasarkan id
$('#formku').validate();
</script>






Penjelasan :
 $('#formku').validate(); adalah code jQuery unutk memvalidasi form berdasarkan id formnya, jadi from harus diberi id ataupun class juga bisa namun code untuk validasinya tinggal mengganti #(pagar) menjadi .(titik)
selanjutnya yang harus diperhatikan adalah pemberian atribut class pada inputan dengan asumsi sbb :
  1. class = "required" adalah inputan harus diisi.
  2. class = "number" adalah inputan harus berupa angka.
  3. class = "email" adalah inputan harus berupa email yang valid.
Untuk lainnya silahkan googling karena bisa dijadikan banyak fungsi validasi.
tambahkan script css untuk mempercantik pesan kesalahan :
form label.error{
display:inline;font:10px Tahoma,sans-serif;color:#ED7476;margin-left:5px
}
form input.error,form input.error:hover,form input.error:focus,form select.error,form textarea.error{
border:1px solid #ED7476;background:#FFEDED
}

untuk file lengkapnya bisa di download disini

09:41 Share:
Menampilkan data dari database merupakan hal dasar yang harus dikuasai oleh para Developer atau Programmer sebuah aplikasi. Jika hanya sekedar mnampilkan data dalam bentuk tabel, penulis yakin akan sangat mudah dilakukan walaupun seorang programmer pemula. Akan tetapi "persoalan" bertambah jika sebuah aplikasi membutuhkan program yang dapat melakukan searching ( pencarian data ), paging ( membagi data yang ditampilkan ), serta shorting ( pengurutan data ) jika dilakukan dengan script PHP sangatlah bisa namun cukup menyulitkan. Dalam artikel kali ini penulis akan memberitahukan "jurus" yang sangat mudah untuk menampilkan, searching, paging serta shorting data dengan menggunakan jQuery DataTables.

source code :

<html>
    <head>
        <link rel="stylesheet" media="screen" href="css/jquery.dataTables.css"/>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.dataTables.js"></script>
   
    </head>
   
    <body>
   
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nim Mahasiswa</th>
                    <th>Nama Mahasiswa</th>
                    <th>Alamat Mahasiswa</th>
                </tr>
            </thead>
            <tbody>
        <?php
            include "koneksi.php";
           
            /// variabel untuk nomor
            $i=1;
           
            $select="select * from mahasiswa";
            $q=mysql_query($select);
            while($data=mysql_fetch_array($q)){
        ?>       
                <tr>
                    <td align="center"><?php echo $i; ?></td>
                    <td align="center"><?php echo $data["nim_mahasiswa"] ?></td>
                    <td><?php echo $data["nm_mahasiswa"] ?></td>
                    <td><?php echo $data["alamat_mahasiswa"] ?></td>
                </tr>
        <?php
            //// looping variabel untuk nomor
            $i++;
            }
        ?>
            </tbody>
        </table>
       
       
        <script>
            /// jquery untuk dataTable
            $(document).ready(function() {
                $('#example').dataTable();
            });
        </script>
    </body>
</html>

tampilan Datatables adalah sebagai berikut :


 

Untuk file lengkapnya download disini , jika ingin melihat dokumentasi lengkap dari DataTables silahkan klik disini.

Data mahasiswa jika ingin mencoba tutorial ini

CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `id_mahasiswa` int(11) NOT NULL AUTO_INCREMENT,
  `nim_mahasiswa` int(6) NOT NULL,
  `nm_mahasiswa` varchar(50) NOT NULL,
  `alamat_mahasiswa` varchar(250) NOT NULL,
  PRIMARY KEY (`id_mahasiswa`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;

--
-- Dumping data for table `mahasiswa`
--

INSERT INTO `mahasiswa` (`id_mahasiswa`, `nim_mahasiswa`, `nm_mahasiswa`, `alamat_mahasiswa`) VALUES
(1, 123456, 'ADI SANTOSO', 'JL. KEBRAON NO.23'),
(2, 123457, 'ANDIKA ', 'JL. SURABAYA-MADIUN NO.12'),
(3, 123458, 'YUSUH ACHMADI', 'JL. KANAL TIMUR NO.23'),
(4, 123459, 'ARIS', 'JL. KALIANAK'),
(5, 123460, 'CAHYO NUGROHO', 'JL. MAULINAKAN NO.43'),
(6, 123461, 'ARIF', 'JL. KEDURUS NO.344'),
(7, 123462, 'ACHMAD', 'JL. DIPONEGORO NO.11'),
(8, 123463, 'FAUZI', 'JL KALI RUNGKUT NO.98'),
(9, 123464, 'RIMA INAYATI', 'JL. WARUGUNUNG NO.65'),
(10, 123465, 'BAGUS', 'JL. KEDURUS'),
(11, 123466, 'HAMZAH', 'JL. BENGAWAN SOLO NO.IX'),
(12, 123467, 'RARUK', 'JL. KANAL BARAT NO.45');

Disamping kemudahan dan kelebihan menggunakan DataTables yang penulis sebutkan diawal artikel, ada kekurangan juga tentunya jika menggunakan DataTables dalam menampilkan sebuah data dalam bentuk tabel yaitu jika data yang dtampilkan mencapai puluhan ribu record maka web browser akan lama meload halaman bahkan bisa sampai dengan crash. Sekali lagi semua ada kelebihan dan kekuragan tergantung cerdiknya sang developer menutupi kekurangan tersebut.
PHP

Menampilkan data mySql dengan PHP dan Plugin jQuery Datatables

Posted by Creative Recipes  |  31 comments

Menampilkan data dari database merupakan hal dasar yang harus dikuasai oleh para Developer atau Programmer sebuah aplikasi. Jika hanya sekedar mnampilkan data dalam bentuk tabel, penulis yakin akan sangat mudah dilakukan walaupun seorang programmer pemula. Akan tetapi "persoalan" bertambah jika sebuah aplikasi membutuhkan program yang dapat melakukan searching ( pencarian data ), paging ( membagi data yang ditampilkan ), serta shorting ( pengurutan data ) jika dilakukan dengan script PHP sangatlah bisa namun cukup menyulitkan. Dalam artikel kali ini penulis akan memberitahukan "jurus" yang sangat mudah untuk menampilkan, searching, paging serta shorting data dengan menggunakan jQuery DataTables.

source code :

<html>
    <head>
        <link rel="stylesheet" media="screen" href="css/jquery.dataTables.css"/>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.dataTables.js"></script>
   
    </head>
   
    <body>
   
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Nim Mahasiswa</th>
                    <th>Nama Mahasiswa</th>
                    <th>Alamat Mahasiswa</th>
                </tr>
            </thead>
            <tbody>
        <?php
            include "koneksi.php";
           
            /// variabel untuk nomor
            $i=1;
           
            $select="select * from mahasiswa";
            $q=mysql_query($select);
            while($data=mysql_fetch_array($q)){
        ?>       
                <tr>
                    <td align="center"><?php echo $i; ?></td>
                    <td align="center"><?php echo $data["nim_mahasiswa"] ?></td>
                    <td><?php echo $data["nm_mahasiswa"] ?></td>
                    <td><?php echo $data["alamat_mahasiswa"] ?></td>
                </tr>
        <?php
            //// looping variabel untuk nomor
            $i++;
            }
        ?>
            </tbody>
        </table>
       
       
        <script>
            /// jquery untuk dataTable
            $(document).ready(function() {
                $('#example').dataTable();
            });
        </script>
    </body>
</html>

tampilan Datatables adalah sebagai berikut :


 

Untuk file lengkapnya download disini , jika ingin melihat dokumentasi lengkap dari DataTables silahkan klik disini.

Data mahasiswa jika ingin mencoba tutorial ini

CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `id_mahasiswa` int(11) NOT NULL AUTO_INCREMENT,
  `nim_mahasiswa` int(6) NOT NULL,
  `nm_mahasiswa` varchar(50) NOT NULL,
  `alamat_mahasiswa` varchar(250) NOT NULL,
  PRIMARY KEY (`id_mahasiswa`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;

--
-- Dumping data for table `mahasiswa`
--

INSERT INTO `mahasiswa` (`id_mahasiswa`, `nim_mahasiswa`, `nm_mahasiswa`, `alamat_mahasiswa`) VALUES
(1, 123456, 'ADI SANTOSO', 'JL. KEBRAON NO.23'),
(2, 123457, 'ANDIKA ', 'JL. SURABAYA-MADIUN NO.12'),
(3, 123458, 'YUSUH ACHMADI', 'JL. KANAL TIMUR NO.23'),
(4, 123459, 'ARIS', 'JL. KALIANAK'),
(5, 123460, 'CAHYO NUGROHO', 'JL. MAULINAKAN NO.43'),
(6, 123461, 'ARIF', 'JL. KEDURUS NO.344'),
(7, 123462, 'ACHMAD', 'JL. DIPONEGORO NO.11'),
(8, 123463, 'FAUZI', 'JL KALI RUNGKUT NO.98'),
(9, 123464, 'RIMA INAYATI', 'JL. WARUGUNUNG NO.65'),
(10, 123465, 'BAGUS', 'JL. KEDURUS'),
(11, 123466, 'HAMZAH', 'JL. BENGAWAN SOLO NO.IX'),
(12, 123467, 'RARUK', 'JL. KANAL BARAT NO.45');

Disamping kemudahan dan kelebihan menggunakan DataTables yang penulis sebutkan diawal artikel, ada kekurangan juga tentunya jika menggunakan DataTables dalam menampilkan sebuah data dalam bentuk tabel yaitu jika data yang dtampilkan mencapai puluhan ribu record maka web browser akan lama meload halaman bahkan bisa sampai dengan crash. Sekali lagi semua ada kelebihan dan kekuragan tergantung cerdiknya sang developer menutupi kekurangan tersebut.

09:39 Share:
Combo Box atau Select Option bertingkat adalah dua atau lebih combo box yang dimana data yang ditampilkan dalam combo box tersebut berdasarkan pilihan combo box yang sebelumnya.contohnya adalah dalam tutorial kali ini penulis membuat dua buah combo box dimana combo box pertama berisikan data Provinsi sedangkan combo box kedua adalah data Kota, dimana saat User memilih combo box provinsi maka kota yang akan ditampilkan dalam combo box kota adalah kota yang terdapat di Provinsi tersebut.Untuk membuat combo box bertingkat ini "bahan-bahan" yang dibutuhkan antara lain :
  1. database combo_box dengan tabel provinsi dan kota
  2. file jQuery ( versi berapapun)
1. Database
  •  tabel provinsi

    CREATE TABLE IF NOT EXISTS `provinsi` (
      `id_prov` int(11) NOT NULL AUTO_INCREMENT,
      `nm_prov` varchar(25) NOT NULL,
      PRIMARY KEY (`id_prov`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

    --
    -- Dumping data for table `provinsi`
    --

    INSERT INTO `provinsi` (`id_prov`, `nm_prov`) VALUES
    (1, 'JAWA TIMUR'),
    (2, 'JAWA BARAT'),
    (3, 'JAWA TENGAH');
  • tabel kota

    CREATE TABLE IF NOT EXISTS `kota` (
      `id_kota` int(11) NOT NULL AUTO_INCREMENT,
      `id_prov` int(11) NOT NULL,
      `nm_kota` varchar(25) NOT NULL,
      PRIMARY KEY (`id_kota`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

    --
    -- Dumping data for table `kota`
    --

    INSERT INTO `kota` (`id_kota`, `id_prov`, `nm_kota`) VALUES
    (1, 1, 'SURABAYA'),
    (2, 1, 'SIDOARJO'),
    (3, 1, 'MOJOKERTO'),
    (4, 1, 'MALANG'),
    (6, 3, 'SOLO'),
    (7, 3, 'SEMARANG'),
    (8, 3, 'PEKALONGAN'),
    (9, 3, 'SURAKARTA'),
    (11, 2, 'BANDUNG'),
    (12, 2, 'BEKASI'),
    (13, 2, 'BOGOR'),
    (14, 2, 'CIREBON');
2. File jQuery download disini 

Tutorial

1. file koneksi database mysql

<?php 
/// edit sesuai dengan settingan database
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "combo_box";


$conn = mysql_connect("$dbhost","$dbuser","$dbpass");

if (!$conn) die ('Gagal Melakukan Koneksi');

mysql_select_db($dbname,$conn) or die ('Database Tidak Diketemukan di Server');
?>

2. file index.php atau file utama

<?php
    include "conn.php";
?>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
Provinsi : <select name="provinsi" id="provinsi">
    <option value="">- Pilih Tempat -</option>
   
    <!-- looping data provinsi -->
    <?php
    $sel_prov="select * from provinsi";
    $q=mysql_query($sel_prov);
    while($data_prov=mysql_fetch_array($q)){
   
    ?>
        <option value="<?php echo $data_prov["id_prov"] ?>"><?php echo $data_prov["nm_prov"] ?></option>
   
    <?php
    }
    ?>
</select>

    &nbsp;&nbsp;&nbsp;<img src="loader.gif" width="10px" height="10px" id="imgLoad" style="display:none">
    <br>
    <br>
Kota : <select name="kota" id="kota">
    <!-- hasil data dari cari_kota.php akan ditampilkan disini -->
</select>

<script>
   
    $("#provinsi").change(function(){
   
        // variabel dari nilai combo box provinsi
        var id_provinsi = $("#provinsi").val();
       
        // tampilkan image load
        $("#imgLoad").show("");
       
        // mengirim dan mengambil data
        $.ajax({
            type: "POST",
            dataType: "html",
            url: "cari_kota.php",
            data: "prov="+id_provinsi,
            success: function(msg){
               
                // jika tidak ada data
                if(msg == ''){
                    alert('Tidak ada data Kota');
                }
               
                // jika dapat mengambil data,, tampilkan di combo box kota
                else{
                    $("#kota").html(msg);                                                     
                }
               
                // hilangkan image load
                $("#imgLoad").hide();
            }
        });    
    });
</script>

3. File cari_kota.php


<?php
    include "conn.php";
   
    $sel_prov="select * from kota where id_prov='".$_POST["prov"]."'";
    $q=mysql_query($sel_prov);
    while($data_prov=mysql_fetch_array($q)){
   
    ?>
        <option value="<?php echo $data_prov["id_kota"] ?>"><?php echo $data_prov["nm_kota"] ?></option><br>
   
    <?php
    }
    ?>

 Penjelasan :

saat combo box provinsi dengan atribut id="provinsi" berubah maka akan menjalankan code    $("#provinsi").change(function() dimana dalam function ini akan mengirimkan data id_provinsi dengan ajax (dibalik layar background) ke file cari_kota.php .dalam file cari_kota.php sendiri akan manampilkan option yang data kota berdasarkan id_provinsi yang dikirimkan dari file index.php. Jika file cari_kota.php berhasil menampilkan option, maka dalam file option tersebut akan ditampilkan pada combo box dengan atribut id="kota" dengan code  $("#kota").html(msg): . jika ingin Download file secara lengkap disini


Tampilan sebelum memilih provinsi

Tampilan setelah memilih provinsi Jawa Tengah , maka kota yang ditampilkan adalah kota yang terdapat di jawa tengah


PHP

Combo Box / Select Option bertingkat dengan PHP, MySql dan jQuery

Posted by Creative Recipes  |  5 comments

Combo Box atau Select Option bertingkat adalah dua atau lebih combo box yang dimana data yang ditampilkan dalam combo box tersebut berdasarkan pilihan combo box yang sebelumnya.contohnya adalah dalam tutorial kali ini penulis membuat dua buah combo box dimana combo box pertama berisikan data Provinsi sedangkan combo box kedua adalah data Kota, dimana saat User memilih combo box provinsi maka kota yang akan ditampilkan dalam combo box kota adalah kota yang terdapat di Provinsi tersebut.Untuk membuat combo box bertingkat ini "bahan-bahan" yang dibutuhkan antara lain :
  1. database combo_box dengan tabel provinsi dan kota
  2. file jQuery ( versi berapapun)
1. Database
  •  tabel provinsi

    CREATE TABLE IF NOT EXISTS `provinsi` (
      `id_prov` int(11) NOT NULL AUTO_INCREMENT,
      `nm_prov` varchar(25) NOT NULL,
      PRIMARY KEY (`id_prov`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

    --
    -- Dumping data for table `provinsi`
    --

    INSERT INTO `provinsi` (`id_prov`, `nm_prov`) VALUES
    (1, 'JAWA TIMUR'),
    (2, 'JAWA BARAT'),
    (3, 'JAWA TENGAH');
  • tabel kota

    CREATE TABLE IF NOT EXISTS `kota` (
      `id_kota` int(11) NOT NULL AUTO_INCREMENT,
      `id_prov` int(11) NOT NULL,
      `nm_kota` varchar(25) NOT NULL,
      PRIMARY KEY (`id_kota`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

    --
    -- Dumping data for table `kota`
    --

    INSERT INTO `kota` (`id_kota`, `id_prov`, `nm_kota`) VALUES
    (1, 1, 'SURABAYA'),
    (2, 1, 'SIDOARJO'),
    (3, 1, 'MOJOKERTO'),
    (4, 1, 'MALANG'),
    (6, 3, 'SOLO'),
    (7, 3, 'SEMARANG'),
    (8, 3, 'PEKALONGAN'),
    (9, 3, 'SURAKARTA'),
    (11, 2, 'BANDUNG'),
    (12, 2, 'BEKASI'),
    (13, 2, 'BOGOR'),
    (14, 2, 'CIREBON');
2. File jQuery download disini 

Tutorial

1. file koneksi database mysql

<?php 
/// edit sesuai dengan settingan database
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "combo_box";


$conn = mysql_connect("$dbhost","$dbuser","$dbpass");

if (!$conn) die ('Gagal Melakukan Koneksi');

mysql_select_db($dbname,$conn) or die ('Database Tidak Diketemukan di Server');
?>

2. file index.php atau file utama

<?php
    include "conn.php";
?>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
Provinsi : <select name="provinsi" id="provinsi">
    <option value="">- Pilih Tempat -</option>
   
    <!-- looping data provinsi -->
    <?php
    $sel_prov="select * from provinsi";
    $q=mysql_query($sel_prov);
    while($data_prov=mysql_fetch_array($q)){
   
    ?>
        <option value="<?php echo $data_prov["id_prov"] ?>"><?php echo $data_prov["nm_prov"] ?></option>
   
    <?php
    }
    ?>
</select>

    &nbsp;&nbsp;&nbsp;<img src="loader.gif" width="10px" height="10px" id="imgLoad" style="display:none">
    <br>
    <br>
Kota : <select name="kota" id="kota">
    <!-- hasil data dari cari_kota.php akan ditampilkan disini -->
</select>

<script>
   
    $("#provinsi").change(function(){
   
        // variabel dari nilai combo box provinsi
        var id_provinsi = $("#provinsi").val();
       
        // tampilkan image load
        $("#imgLoad").show("");
       
        // mengirim dan mengambil data
        $.ajax({
            type: "POST",
            dataType: "html",
            url: "cari_kota.php",
            data: "prov="+id_provinsi,
            success: function(msg){
               
                // jika tidak ada data
                if(msg == ''){
                    alert('Tidak ada data Kota');
                }
               
                // jika dapat mengambil data,, tampilkan di combo box kota
                else{
                    $("#kota").html(msg);                                                     
                }
               
                // hilangkan image load
                $("#imgLoad").hide();
            }
        });    
    });
</script>

3. File cari_kota.php


<?php
    include "conn.php";
   
    $sel_prov="select * from kota where id_prov='".$_POST["prov"]."'";
    $q=mysql_query($sel_prov);
    while($data_prov=mysql_fetch_array($q)){
   
    ?>
        <option value="<?php echo $data_prov["id_kota"] ?>"><?php echo $data_prov["nm_kota"] ?></option><br>
   
    <?php
    }
    ?>

 Penjelasan :

saat combo box provinsi dengan atribut id="provinsi" berubah maka akan menjalankan code    $("#provinsi").change(function() dimana dalam function ini akan mengirimkan data id_provinsi dengan ajax (dibalik layar background) ke file cari_kota.php .dalam file cari_kota.php sendiri akan manampilkan option yang data kota berdasarkan id_provinsi yang dikirimkan dari file index.php. Jika file cari_kota.php berhasil menampilkan option, maka dalam file option tersebut akan ditampilkan pada combo box dengan atribut id="kota" dengan code  $("#kota").html(msg): . jika ingin Download file secara lengkap disini


Tampilan sebelum memilih provinsi

Tampilan setelah memilih provinsi Jawa Tengah , maka kota yang ditampilkan adalah kota yang terdapat di jawa tengah


09:36 Share:
Pengenalan JQuery Mobile
Kali ini kita akan membahas mengenai dasar-dasar sebuah pemrograman framework yang disebut dengan JQuery Mobile. Saat ini, bahasa pemrgograman ini banyak digunakan karena kemudahan dalam penggunaannya. Sebenarnya saya juga mau tidak mau baru harus mempelajarinya karena ada project yang berhubungan dengan JQuery Mobile beberapa waktu yang lalu.


Pengenalan JQuery Mobile
image:codeforest.net
JQuery Mobile merupakan framework yang digunakan untuk membangun aplikasi web mobile, dioptimalkan untuk perangkat layar sentuh. Seperti yang kita ketahui saat ini merupakan era peralihan dari perangkat desktop ke perangkat mobile seperti smartphone dan tablet. JQuery Mobile dapat dijalankan hampir di semua perangkat smartphone seperti Android, Windows Phone, iOS, Blackberry, Symbian, dan lain-lain, jadi kita tidak perlu terpacu pada salah satu merek atau model. Kita dapat mengembangkan satu aplikasi yang dapat didistribusikan ke semua perangkat. Pada dasarnya JQuery Mobile merupakan pengembangan ke arah mobile dari JQuery, yaitu dengan berdasarkan pada HTML5 dan CSS3, serta ditambah dengan JavaScript dan Ajax.
Pengenalan JQuery Mobile

Dengan JQuery Mobile akan membuat tampilan aplikasi semakin menarik dan atraktif, serta sangat interaktif.
Untuk dapat menggunakannya, ada dua cara memanggil JQuery Mobile pada halaman web kita, yaitu dengan cara online dan offline. Metode online yaitu dengan memanggil langsung dari CDN (Content Delivery Network) yang sudah disediakan, sedangkan metode offline dengan cara mendownload file JQuery Mobile dan menempatkannya di komputer lokal atau hosting kita sendiri. Jika kita berada pada tahap pengembangan ada baiknya kita menggunakan metode offline karena tidak perlu terkoneksi dengan internet. Berikut perbedaan kedua script metode di atas:
Online:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>

Offline:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.2.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.2.js"></script>
</head>
Pada metode offline, tempatkan file-file JQuery Mobile pada folder yang sama dengan aplikasi kita.
Berikut ini adalah sebuah file sederhana standar JQuery Mobile yang sudah dapat dijalankan:
<body>
<div data-role="page">
  <div data-role="header">
    <h1>Judul header</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Isi ditampilkan di sini</p>
  </div>
  <div data-role="footer">
    <h1>Footer di sini</h1>
  </div>
</div>
</body>
Pada contoh di atas menggunakan atribut data-role yang berfungsi memberikan keterangan tentang fungsi masing-masing bagian, seperti data-role="page" menandakan bahwa bagian tersebut adalah page/halaman. Anda dapat menggunakan banyak tag yang dapat digunakan untuk membuat halaman web mobile Anda semakin aplikatif dan menarik seperti Transitions, Buttons, Icons, Popups, Toolbars, Navbars dan masih banyak lagi. Untuk mempelajarinya Anda dapat mengunjungi w3schools. Di sana Anda dapat mencobanya sendiri.
Semoga bermanfaat.
PHP

Pengenalan JQuery Mobile

Posted by Creative Recipes  |  No comments

Pengenalan JQuery Mobile
Kali ini kita akan membahas mengenai dasar-dasar sebuah pemrograman framework yang disebut dengan JQuery Mobile. Saat ini, bahasa pemrgograman ini banyak digunakan karena kemudahan dalam penggunaannya. Sebenarnya saya juga mau tidak mau baru harus mempelajarinya karena ada project yang berhubungan dengan JQuery Mobile beberapa waktu yang lalu.


Pengenalan JQuery Mobile
image:codeforest.net
JQuery Mobile merupakan framework yang digunakan untuk membangun aplikasi web mobile, dioptimalkan untuk perangkat layar sentuh. Seperti yang kita ketahui saat ini merupakan era peralihan dari perangkat desktop ke perangkat mobile seperti smartphone dan tablet. JQuery Mobile dapat dijalankan hampir di semua perangkat smartphone seperti Android, Windows Phone, iOS, Blackberry, Symbian, dan lain-lain, jadi kita tidak perlu terpacu pada salah satu merek atau model. Kita dapat mengembangkan satu aplikasi yang dapat didistribusikan ke semua perangkat. Pada dasarnya JQuery Mobile merupakan pengembangan ke arah mobile dari JQuery, yaitu dengan berdasarkan pada HTML5 dan CSS3, serta ditambah dengan JavaScript dan Ajax.
Pengenalan JQuery Mobile

Dengan JQuery Mobile akan membuat tampilan aplikasi semakin menarik dan atraktif, serta sangat interaktif.
Untuk dapat menggunakannya, ada dua cara memanggil JQuery Mobile pada halaman web kita, yaitu dengan cara online dan offline. Metode online yaitu dengan memanggil langsung dari CDN (Content Delivery Network) yang sudah disediakan, sedangkan metode offline dengan cara mendownload file JQuery Mobile dan menempatkannya di komputer lokal atau hosting kita sendiri. Jika kita berada pada tahap pengembangan ada baiknya kita menggunakan metode offline karena tidak perlu terkoneksi dengan internet. Berikut perbedaan kedua script metode di atas:
Online:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>

Offline:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.2.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.4.2.js"></script>
</head>
Pada metode offline, tempatkan file-file JQuery Mobile pada folder yang sama dengan aplikasi kita.
Berikut ini adalah sebuah file sederhana standar JQuery Mobile yang sudah dapat dijalankan:
<body>
<div data-role="page">
  <div data-role="header">
    <h1>Judul header</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Isi ditampilkan di sini</p>
  </div>
  <div data-role="footer">
    <h1>Footer di sini</h1>
  </div>
</div>
</body>
Pada contoh di atas menggunakan atribut data-role yang berfungsi memberikan keterangan tentang fungsi masing-masing bagian, seperti data-role="page" menandakan bahwa bagian tersebut adalah page/halaman. Anda dapat menggunakan banyak tag yang dapat digunakan untuk membuat halaman web mobile Anda semakin aplikatif dan menarik seperti Transitions, Buttons, Icons, Popups, Toolbars, Navbars dan masih banyak lagi. Untuk mempelajarinya Anda dapat mengunjungi w3schools. Di sana Anda dapat mencobanya sendiri.
Semoga bermanfaat.

07:11 Share:
Get updates in your email box
Complete the form below, and we'll send you the best coupons.

Deliver via FeedBurner

Text Widget

About Us

© 2014 .Programmer Mania. Shared by WpCoderX
Proudly Powered by Blogger.
back to top