body{ user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; }
Home Profil Keluarga nabi Al Qur'an Download Chat
Blogger Panda

Rabu, 22 Juni 2016

Aplikasi AJAX Sederhana


Aplikasi AJAX Sederhana

Posted on by
Selamat datang, kali ini saya akan membawa teman – teman pembaca untuk mempelajari dan membangun aplikasi sederhana dengan Asynchronous Javascript and XML (AJAX) dan Personal Homepage HyperText Preprocessor (PHP). Sebelumnya AJAX digunakan untuk meningkatkan performa aplikasi web yang dibuat. Kita tidak perlu meload halaman seutuhnya, cukup bagian – bagian tertentu saja yang akan kita tampilkan informasi sesuai request dari user. Aplikasi yang akan kita buat ini membutuhkan database engine MySQL dengan model – model data seperti berikut :
Kode Sumber : dbajax.sql
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
--
-- Database: `dbajax`
--
 
-- --------------------------------------------------------
 
--
-- Struktur dari tabel `biodata`
--
 
CREATE TABLE IF NOT EXISTS `biodata` (
  `id_biodata` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(60) NOT NULL,
  `email` varchar(60) NOT NULL,
  `fakultas` varchar(60) NOT NULL,
  `prodi` varchar(60) NOT NULL,
  PRIMARY KEY (`id_biodata`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;
 
--
-- Dumping data untuk tabel `biodata`
--
 
INSERT INTO `biodata` (`id_biodata`, `nama`, `email`, `fakultas`, `prodi`) VALUES
(1, 'ridwan', 'ridwanbejo@gmail.com', '1', '3'),
(2, 'fajar', 'email', '2', '10'),
(3, 'hahah', 'hahaha', '2', '10'),
(4, 'septian', 'septian@gmail.com', '1', '8'),
(5, 'dadang', 'dadang@gmail.com', '1', '3'),
(6, 'afghan', 'afghan@gmail.com', '1', '5'),
(7, 'taufik', 'taufik@gmail.com', '2', '11');
 
-- --------------------------------------------------------
 
--
-- Struktur dari tabel `fakultas`
--
 
CREATE TABLE IF NOT EXISTS `fakultas` (
  `id_fakultas` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(200) NOT NULL,
  PRIMARY KEY (`id_fakultas`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
 
--
-- Dumping data untuk tabel `fakultas`
--
 
INSERT INTO `fakultas` (`id_fakultas`, `nama`) VALUES
(1, 'FPMIPA'),
(2, 'FPOK');
 
-- --------------------------------------------------------
 
--
-- Struktur dari tabel `prodi`
--
 
CREATE TABLE IF NOT EXISTS `prodi` (
  `id_prodi` int(11) NOT NULL AUTO_INCREMENT,
  `fakultas_id` int(11) NOT NULL,
  `nama` varchar(60) NOT NULL,
  PRIMARY KEY (`id_prodi`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ;
 
--
-- Dumping data untuk tabel `prodi`
--
 
INSERT INTO `prodi` (`id_prodi`, `fakultas_id`, `nama`) VALUES
(3, 1, 'Ilmu Komputer'),
(4, 1, 'Kimia'),
(5, 1, 'Matematika'),
(6, 1, 'Biologi'),
(7, 1, 'Fisika'),
(8, 1, 'Pendidikan Ilmu Komputer'),
(9, 2, 'PJKR'),
(10, 2, 'IKOR'),
(11, 2, 'PKO');
Pada model diatas database kita akan menampung data fakultas. Kemudian fakultas tersebut akan mempunyai prodi dan jurusan. Selanjutnya kita akan memasukkan biodata mahasiswa yang terdiri dari nama, email, fakultas, dan prodi. Kemudian pastikan teman – teman membuat database dbajax dan import file sql diatas kedalam dbajax.
Setelah kita mempunyai database yang akan digunakan untuk aplikasi kita, sekarang kita akan membuat file utama index.php yang didalamnya terdapat form untuk memasukkan biodata mahasiswa dan script ajax yang mengelola cara kerja aplikasi ajax sederhana yang akan kita bangun
Kode Sumber : index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html>
    <head>
        <title>Demo AJAX</title>
        <script type='text/javascript'>
 
            function getXMLHttp() {
              var XMLHttp = null;
              if (window.XMLHttpRequest) {
                try {
                  XMLHttp = new XMLHttpRequest();
                } catch (e) { }
              } else if (window.ActiveXObject) {
                try {
                  XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                  try {
                    XMLHttp = new ActiveXObject(
                      "Microsoft.XMLHTTP");
                  } catch (e) { }
                }
              }
              return XMLHttp;
            }
 
            function submitFormAjax(){
                var XMLHttp = getXMLHttp();
 
                XMLHttp.open("POST", "insert-biodata.php");
                XMLHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 
                XMLHttp.onreadystatechange = function () {
                  if (XMLHttp.readyState == 0){
                    window.alert("AJAX is unitialized ..");
                  }
                  if (XMLHttp.readyState == 4) {
                    document.getElementById("hasil-ajax-tabel").innerHTML =  XMLHttp.responseText;
                  }
                }
                var name = document.getElementById('nama').value;
                var email = document.getElementById('email').value;
                var fakultas = document.getElementById('fakultas').value;
                var prodi = document.getElementById('prodi').value;
                alert("name="+name+"&email="+email+"&fakultas="+fakultas+"&prodi="+prodi);
                XMLHttp.send("name="+name+"&email="+email+"&fakultas_id="+fakultas+"&prodi_id="+prodi);
            }
 
            function initFakultas(){
                var XMLHttp = getXMLHttp();
 
                XMLHttp.open("GET", "select-fakultas.php");
 
                XMLHttp.onreadystatechange = function () {
                  if (XMLHttp.readyState == 0){
                    window.alert("AJAX is unitialized ..");
                  }
                  if (XMLHttp.readyState == 4) {
                    document.getElementById("fakultas").innerHTML =  XMLHttp.responseText;
                  }
                }
 
                XMLHttp.send(null);
            }
 
            function selectProdi(){
                var fakultas_id = document.getElementById("fakultas").value;
 
                var XMLHttp = getXMLHttp();
 
                XMLHttp.open("GET", "select-prodi.php?fakultas_id="+fakultas_id);
 
                XMLHttp.onreadystatechange = function () {
                  if (XMLHttp.readyState == 0){
                    window.alert("AJAX is unitialized ..");
                  }
                  if (XMLHttp.readyState == 4) {
                    document.getElementById("prodi").innerHTML =  XMLHttp.responseText;
                  }
                }
 
                XMLHttp.send(null);
            }
 
            function initBiodata (){
                var XMLHttp = getXMLHttp();
 
                XMLHttp.open("GET", "select-biodata.php");
 
                XMLHttp.onreadystatechange = function () {
                  if (XMLHttp.readyState == 0){
                    window.alert("AJAX is unitialized ..");
                  }
                  if (XMLHttp.readyState == 4) {
                    document.getElementById("hasil-ajax-tabel").innerHTML =  XMLHttp.responseText;
                  }
                }
 
                XMLHttp.send(null);
            }
        </script>
    </head>
    <body onload="initFakultas();initBiodata()">
        <fieldset>
            <form method="POST" action='' onsubmit="submitFormAjax()"/>
                Nama : <input id="nama" name="nama" type="text" value="" /> <br />
                Email : <input id="email" name="email" type="text" value="" /> <br />
                Fakultas : <br/>
                <select id="fakultas" name="fakultas" onchange="selectProdi()">
                </select> <br /> <br />
 
                Prodi : <br />
                <select id="prodi" name="prodi">
                </select> <br /><br />
                <input type="submit" value="Submit"/>
            </form>
        </fieldset>
        <fieldset>
            <div id="hasil-ajax-tabel">
            </div>
        </fieldset>
    </body>
</html>
Kode index.php diatas terdiri dari beberapa bagian seperti berikut :
  1. function getXMLHttp(), function ini digunakan untuk membuat object AJAX. Function ini akan mendeteksi browser apakah internet explorer atau bukan. Jika internet explorer maka object AJAX akan dibuat dengan menggunakan ActiveXObject. Jika bukan internet explorer maka object AJAX akan dibuat dengan menggunakan XMLHttpRequest
  2. function submitFormAjax(), function ini digunakan untuk mensubmit data yang diisikan user dari form. Form ini mengirimkan data dengan AJAX menggunakan metode POST. Kemudian data – data tersebut akan diterima oleh file insert-biodata.php. Function ini akan dipanggil oleh form saat event onsubmit
  3. function initFakultas(), function ini digunakan untuk mengambil data dari tabel fakultas pada dbajax, dan hasil query tersebut akan diload ke combobox “fakultas” di form biodata. Data diambil dengan memanggil file select-fakultas.php. Function ini akan dipanggil oleh body saat event onload dengan menggunakan metode GET
  4. function selectProdi(), function ini digunakan untuk mengambil data dari tabel prodi dan data tersebut akan difilter berdasarkan fakultas dari prodi. Function ini akan dipanggil oleh combobx “fakultas” saat event onchange dengan menggunakan metode GET. Data hasil request akan diload ke combobox “Prodi”
  5. function initBiodata(), function ini digunakan untuk mengambil data dari biodata dan hasilnya akan diload ke div “hasil-ajax-tabel”. Function ini dpanggil oleh body saat event onload dengan menggunakan metode GET
File index.php diatas merupakan file utama yang akan menampilkan biodata dan menambah biodata. Tapi file diatas tidak akan berfungsi sebelum membuat file backend yang akan dibuat selanjutnya. File – file tersebut antara lain koneksi.php, select-fakultas.php, select-prodi.php, select-biodata.php, dan insert-biodata.php.
File koneksi.php ini merupakan file penting yang akan digunakan untuk mengakses database dbajax di MySQL kita. Konfigurasi pada file ini bisa disesuaikan dengan lingkungan database yang teman – teman miliki. File ini akan digunakan di select-fakultas.php, select-prodi.php, select-biodata.php, dan insert-biodata.php
Kode Sumber : koneksi.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
 
    // Mendeklarasikan variable untuk mengakses database engine
    // variable yang menyimpan nama host
    $host = "localhost";
 
    // variable yang menyimpan nama user
    $user = "root";
 
    // variable yang menyimpan password
    $password = "";
 
    // memilih database yang akan digunakan
    $db = "dbajax";
 
    // mengecek koneksi ke database engine
    mysql_connect("$host","$user","$password");
 
    // memilih database
    mysql_select_db("$db");
?>
File select-fakultas.php ini digunakan untuk mengambil data dari tabel fakultas pada database dbajax. File ini dipanggil oleh function initFakultas() di index.php :
Kode Sumber : select-fakultas.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
include "koneksi.php";
 
$query = "SELECT * FROM fakultas";
$result = mysql_query($query);
if (!$result) {
    die('Invalid query: ' . mysql_error());
    echo "Data cannot be displayed..";
}
else {
    while($row = mysql_fetch_array($result)){
 
    ?>
        <option value='<?php echo $row['id_fakultas']; ?>'><?php echo $row['nama']?></option>
 
    <?php
    }
}
 
?>
File select-prodi.php ini digunakan untuk mengambil data dari tabel prodi pada database dbajax dan data prodi tersebut akan difilter berdasarkan fakultas. File ini dipanggil oleh function selectProdi() di index.php :
Kode Sumber : select-prodi.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
include "koneksi.php";
 
if (isset($_GET['fakultas_id'])){
    $fakultas_id=$_GET['fakultas_id'];
 
$query = "SELECT * FROM prodi where fakultas_id=".$fakultas_id;
$result = mysql_query($query);
if (!$result) {
    die('Invalid query: ' . mysql_error());
    echo "Data cannot be displayed..";
}
else {
    while($row = mysql_fetch_array($result)){
 
    ?>
        <option value='<?php echo $row['id_prodi']; ?>'><?php echo $row['nama']?></option>
 
    <?php
    }
}
 
}
else {
    ?>
        <option value='x'>Tidak ada data</option>
    <?php
}
?>
File insert-biodata.php ini digunakan untuk mengisi data dari form biodata ke tabel biodata pada database dbajax . File ini dipanggil oleh function submitFormAjax() di index.php :
Kode Sumber : insert-biodata.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
 
        $name = $_POST['name'];
        $email = $_POST['email'];
        $fakultas = $_POST['fakultas_id'];
        $prodi = $_POST['prodi_id'];
 
        include "koneksi.php";
 
        $query = "INSERT INTO biodata (nama, email, fakultas, prodi )VALUES('".$name."', '".$email."', ".$fakultas.", ".$prodi.")";
        $result = mysql_query($query);
 
        echo "Saving data is success...";
 
?>
File select-biodata.php ini digunakan untuk mengambil data dari form biodata dari tabel biodata pada database dbajax. File ini dipanggil oleh function initBiodata() di index.php :
Kode Sumber : select-biodata.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
    include "koneksi.php";
 
    $query = "SELECT b.nama, b.email, f.nama, p.nama FROM biodata as b, fakultas as f, prodi as p where b.fakultas = f.id_fakultas and b.prodi = p.id_prodi";
    $result = mysql_query($query);
    if (!$result) {
        die('Invalid query: ' . mysql_error());
        echo "Data cannot be displayed..";
    }
    else {
 
        echo "<h3>Data Successfully Retrieved..</h3>";
 
        while($row = mysql_fetch_array($result)){
        ?>
            <?php echo $row[0];?> | <?php echo $row[1];?>  | <?php echo $row[2];?>  | <?php echo $row[3];?>  <br />
        <?php
        }
    }
 
?>
Demikian sharing tentang AJAX dan PHP dalam membuat Aplikasi AJAX Sederhana. Semoga bisa bermanfaat bagi teman – teman dalam mengembangkan aplikasi yang berbasis AJAX.
Ikuti juga artikel berikut :


Next

Prev
Posted By:

0 komentar:

Posting Komentar

 Blogger Panda