Scribd
Unggah
184 tayangan7 halaman

Modul Praktikum Jquery Mobile - Database

Modul ini membahas tentang membuat aplikasi database CRUD (Create, Read, Update, Delete) menggunakan jQuery Mobile untuk menambah, melihat, memperbarui, dan mencari data mahasiswa yang disimpan dalam database."

Diunggah oleh

Robby Setyawan
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
184 tayangan7 halaman

Modul Praktikum Jquery Mobile - Database

Modul ini membahas tentang membuat aplikasi database CRUD (Create, Read, Update, Delete) menggunakan jQuery Mobile untuk menambah, melihat, memperbarui, dan mencari data mahasiswa yang disimpan dalam database."

Diunggah oleh

Robby Setyawan
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 7

Modul Praktikum Jquery Mobile

Database CRUD (Create Read Update Delete)

1. Membuat Database untuk menyimpan data mahasiswa.


Buatlah sebuah database mhs_db, selanjutnya buatlah table dengan nama mhs dengan field seperti gambar
dibawah ini,

2. Buatlah folder project baru di webroot, dengan nama folder jquery_mbl_mhs, copikan keperluan framework
jquery folder ini (js,css)
3. Membuat Tampilan awal aplikasi (index.html)
Buatlah file .html dengan nama index.html dengan listing code nya seperti dibawah ini:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.2.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.1.2.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Info Mahasiswa</h1>
</div> <!--/HEADER -->
<div data-role="content">
<div class="choice_list">
<h2 align="center"> Belajar Database JQuery Mobile </h2>
<ul data-role="listview" data-inset="true" >
<li><a href="tambah_data.php?id=add" data-transition="slidedown"> <h3>Tambah Data</h3></a></li>
<li><a href="lihat_data.php" data-transition="slidedown"> <h3>Lihat Data</h3></a></li>
<li><a href="cari_data.php" data-transition="slidedown"> <h3>Cari Data</h3></a></li>
</ul>
</div>
</div> <!--/CONTENT-->
</div> <!-- /PAGE -->
</body>
</html>
Jalakan aplikasi dengan mengakses url pada browser

aplikasi akan berjalan seperti tampilan dibawah ini.

http://localhost/jquery_mbl_mhs/ jika tidak ada error

4. Membuat koneksi ke database


Agar aplikasi yang di develope bisa mengakses database buat lah file php db.php dan
mhs_db.php. Berikut isi kode nya.
db.php

<?php
//diinclude di model
class Db{
protected static $dbh = false;
protected $db_host = 'localhost';
protected $db_user = 'root';
protected $db_pass = '';
protected $db_name = 'mhswali';
//versi mysqli
function connect() {
self::$dbh = new mysqli($this->db_host, $this->db_user, $this->db_pass, $this->db_name);
if (self::$dbh->connect_errno) {
echo "Koneksi Database Gagal" . self::$dbh->connect_error;
}
}
}
?>

mhs_db.php (Fungsi Untuk Memanipulasi Database)


<?php
//diinclude di controller
//koneksi ke db
include 'db.php';
class MhsDb extends Db {
//Fungsi untuk menambah data
function insert($item) {
if(!self::$dbh) $this->connect();
$nim = $item['nim'];
$nama = $item['nama'];
if (empty($item['nim'])) {
echo "Nim tidak Boleh Kosong";

}
else if (!(self::$dbh->query("INSERT INTO mhs(nim,nama) VALUES ('$nim','$nama')"))) {
printf("Error: %s\n", self::$dbh->error);
exit();
}
}
//Fungsi untuk melihat data
function getAllData() {
if(!self::$dbh) $this->connect();
$res = self::$dbh->query("SELECT id,nim,nama FROM mhs");
return $res;
//cara memproses $res : while($row = $res->fetch_assoc()) {
}
//Fungsi untuk menampilkan detail data
function getRec($id) {
if(!self::$dbh) $this->connect();
$res = self::$dbh->query("SELECT id,nim,nama FROM mhs where id=$id");
return $res;
}
//Fungsi untuk mencari data
function getSearchData($nama) {
if(!self::$dbh) $this->connect();
$res = self::$dbh->query("SELECT id,nim,nama FROM mhs where nama like
('%{$nama}%')");
return $res;
}
}
?>

5. Menambah Data
Agar aplikasi bisa menginputkan data maka langkah berikutnya kita membuat file
tambah_data_controller.php dan tambah_data.php
tambah_data.php

<?php
include 'ui.php';
include 'tambah_data_controller.php';
head('tambahdata');
if ($status=='tambah_sukses') {
echo "Penambahan/Update berhasil <a href=\"index.html\"> kembali </a>";
}
else {
//Kondisi awal, edit atau error. Tampilkan form, nantinya bisa ditambahkan notif jika error
echo <<<EOB
<form action="tambah_data.php" method="post" data-ajax="false">
<input type="hidden" name="id" value="{$rec['id']}">
<label for="nama">Nama: </label>
<input type="text" name="nama" id="nama" value="{$rec['nama']}" />
<label for="nim">NIM: </label>
<input type="text" name="nim" id="nim" value="{$rec['nim']}" />
<button type="submit" name="submit" >Submit</button>
</form>
EOB;
}
foot();
?>

tambah_data_controller.php

<?php
//diinclude di tambah_data.php
include 'mhsdb.php';
$status="null";
if($_SERVER['REQUEST_METHOD']=='POST') {

//user menekan submit

$item['id']
= $_POST['id'];
$item['nim'] = $_POST['nim'];
$item['nama'] = $_POST['nama'];
if ($item['id']==-1) {
//-1 artinya data baru insert data ke database
$mhsdb = new MhsDb();
$mhsdb->insert($item);
} else {
//update
$mhsdb = new MhsDb();
$mhsdb->update($item);
}
$status='tambah_sukses';
} else
if ($_SERVER['REQUEST_METHOD']=='GET') { //persiapan insert atau update
if ($_GET['id']=="add") {
//insert
$rec['id']
= -1; //kode untuk insert
$rec['nim'] = "";
$rec['nama'] = "";
}
else {
//proses edit/update
$mhsdb = new MhsDb();
$res = $mhsdb->getRec($_GET['id']);
if($row = $res->fetch_assoc()) {
$rec['id']
= $row['id'];
$rec['nim'] = $row['nim'];
$rec['nama'] = $row['nama'];
}
}
}
?>

Jika coding tidak menemui error aplikasi akan berjalan seperti pada gambar berikut ini:

Saat kita menekan tombol submit maka informasi yang kita inputkan akan terlihat pada database.

6. Menampilkan Data
Setelah kita berhasil menginputkan data ke database maka langkah selanjutnya membuat agar aplikasi yang
kita buat dapat menampilkan isi dari tabel database yang kita inputkan tadi. Untuk dapat menampilkan
informasi langkah yang harus dilakukan adalah membuat file php, lihat_data.php dan lihat_data_mhs.php.
lihat_data.php
<?php
include 'ui.php';
include 'mhsdb.php';
head('lihatdata');
$mhsdb = new MhsDb();
if ($_SERVER['REQUEST_METHOD']=='GET') {
if (isset($_GET['namacari'])) {
$namacari = $_GET['namacari'];
$res = $mhsdb->getSearchData($namacari);
} else {
$res = $mhsdb->getAllData();
}
}
//Html Safe Container
echo <<<EOB
<div class="choice_list">
<ul data-role="listview" data-inset="true" >
EOB;
//mysqli
while($row = $res->fetch_assoc()) {
//PDO: foreach ($res as $row) {
echo
"<li>
<a
href=\"lihat_data_mhs.php?id={$row['id']}\"
<h3>{$row["nama"]}({$row["nim"]}) </h3></a></li>";
//lihat_data_mhs.php belum dibuat
}
echo <<<EOB
</ul>
</div>
EOB;
foot();
?>

data-transition=\"slidedown\">

Jika aplikasi berhasil dijalankan maka akan tampil list data pada aplikasi seperti gambar
berikut.

lihat_data_mhs.php (Melihat Detail Data)


<?php
include 'ui.php';
include 'mhsdb.php';
head('lihatdatamhs');
$mhsdb = new MhsDb();
$res = $mhsdb->getRec($_GET['id']);
//mysqli
if($row = $res->fetch_assoc()) {
echo "NIM: {$row["nim"]} <br>";
echo "Nama: {$row["nama"]}";
}
foot();
?>

Jika aplikasi berhasil dijalankan maka akan tampil list data pada aplikasi seperti gambar
berikut.

7. Mencari Data
cari_data.php
<?php
include 'ui.php';
head('caridatamhs');
echo <<<EOB
<form action="lihat_data.php" method="get" data-ajax="false">
<label for="nama">Nama yg dicari: </label>
<input type="text" name="namacari" id="namacari" value="" />
<button type="submit">Cari!</button>
</form>
EOB;
foot();
?>

Anda mungkin juga menyukai