Modul Praktikum Jquery Mobile

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> 
<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> 
</div> 
</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() {
$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) {
$res = self::$dbh->query("SELECT id,nim,nama FROM mhs where id=$id");
return $res;
}
//Fungsi untuk mencari data
function getSearchData($nama) {
$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->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
$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';
head('lihatdata');
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';
head('lihatdatamhs');
$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();
?>

Modul Praktikum Jquery Mobile - Database

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Praktikum Jquery Mobile - Database

Diunggah oleh

Hak Cipta:

Format Tersedia

Database CRUD (Create Read Update Delete)

1. Membuat Database untuk menyimpan data mahasiswa.

aplikasi akan berjalan seperti tampilan dibawah ini.

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

4. Membuat koneksi ke database

mhs_db.php (Fungsi Untuk Memanipulasi Database)

//user menekan submit

lihat_data_mhs.php (Melihat Detail Data)

Anda mungkin juga menyukai