Tampilan Home: Nama: Riska Anggreni BR Ginting Nim:217510150 Kelas: 7 Ti B

Nama : Riska anggreni br Ginting
Nim :217510150
Kelas : 7 TI B
1. Tampilan Home
2. Tampilan perhitungan diskon

3. Tampilan crud anggota
4. Tampilan Ubah data

5. Tampilan Tambah Data
6. Database
7. Index.html
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-
scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="theme-color" content="#2196f3">

<title>Tugas</title>

<link rel="stylesheet" href="css/framework7.bundle.min.css">
<link rel="stylesheet" href="css/framework7-icons.css">
</head>
<body>

<div id="app">


<div class="view view-main">


<div data-name="home" class="page">


<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#">
<i class="icon f7-icons">chevron_left</i>Back
</a>
</div>
<div class="title text-align-center">Aplikasi Kuis</div>
<div class="right">
<a href="#" class="panel-open" data-panel=".panel-left">
<i class="icon f7-icons color-blue">menu</i>
</a>
</div>
</div>
</div>

<div class="page-content">
<h4 class="text-align-center">217510150</h4>
<div class="block">
<a href="/page1/">
<button class="button button-fill color-red">KASUS PERHITUNGAN</button>
</a>
<br>
<a href="/page2/">
<button class="button button-fill color-green">KASUS DATABASE</button>
</a>
<br>
</div>
</div>
</div>



<div data-name="page1" class="page stacked">

<div class="left">
<a href="#" class="back">
</a>
</div>
<div class="title text-align-center">MENENTUKAN DISKON BELANJA</div>
<div class="right">
</a>
</div>
</div>
</div>
<h4 class="text-align-center">Menentukan diskon belanja</h4>
<div class="block">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Banyak belanja</div>
<div class="item-input-wrap">
<input type="text" placeholder="Banyak belanja" id="byk_belanja">
<span class="input-clear-button"></span>
</div>
</div>
</li>

<div class="item-title item-label">Harga Satuan</div>
<input type="text" placeholder="Harga Satuan" id="hrg_satuan">
</div>
</div>
</li>

<div class="item-title item-label">Kode Voucher</div>
<div class="item-input-wrap input-dropdown-wrap">
<div class="item-input-wrap input-dropdown-wrap">
<select id="kode_voucher">
<option value="">Tidak ada</option>
<option value="JANUARI20">JANUARI20</option>
<option value="MDN2020">MEDAN 2020</option>
<option value="THN2020">TAHUN 2020</option>
</select>
</div>
</div>
</div>
</li>
</ul>
<br>
<button class="button button-fill color-green" id="hitung">Hitung</button>
<p id="diskon"></p>
<p id="total_belanja"></p>
<p id="total_bayar"></p>
</div>
</div>
</div>
</div>



<div data-name="page2" class="page stacked">

<div class="left">
</a>
</div>
<div class="title text-align-center">Database Kuis</div>
<div class="right">
</a>
</div>
</div>
</div>
<h4 class="text-align-center">Database Kuis</h4>
<div class="block">
<div class="data-table">
<table>
<thead>
<tr>
<th class="label-cell">No.</th>
<th class="label-cell">Nama</th>
<th class="label-cell">Jenis Kelamin</th>
<th class="label-cell">Telepon</th>
<th class="label-cell">Alamat</th>
<th class="label-cell">Kota</th>
<th class="label-cell">Email</th>
</tr>
</thead>
<tbody id="tampil">
</tbody>
</table>
</div>
<a href="/tambah/" class="button button-fill color-blue">Tambah</a>
</div>
</div>
</div>



<div data-name="tambah" class="page stacked">
<div class="left">
</a>
</div>
<div class="title text-align-center">Database Buku</div>
<div class="right">
</a>
</div>
</div>
</div>
<div class="block">
<div class="list">
<ul>
<input type="text" id="nama" placeholder="Masukkan Nama">
</div>
</div>
</li>
<br>
<li>
<div class="item-content item-input">
<div class="item-title item-label">Jenis Kelamin</div>
<select name="jenkel" id="jenkel">
<option value="laki-
laki" selected="selected">Laki - Laki</option>
<option value="perempuan">Perempuan</option>
</select>
</div>
</div>
</div>
</li>
<br>
<input type="number" id="tlp" placeholder="Masukkan Nomor Telepon">
</div>
</div>
</li>
<br>
<textarea name="alamat" id="alamat" cols="30" rows="10" placeholder="
Masukkan Alamat"></textarea>
</div>
</div>
</li>
<br>
<input type="text" id="kota" placeholder="Masukkan Kota">
</div>
</div>
</li>
<br>
<input type="text" id="email" placeholder="Masukkan Email">
</div>
</div>
</li>
</ul>
</div>
<a href="" class="button button-fill color-red" id="simpan">Simpan</a>
</div>
</div>
</div>
<div data-name="ubah" class="page stacked">
<div class="left">
</a>
</div>
<div class="title text-align-center">Database Buku</div>
<div class="right">
</a>
</div>
</div>
</div>
<h3 style="text-align: center">Ubah Data</h3>
<div class="block">
<div class="list">
<input type="hidden" id="kode">
<ul>
<input type="text" id="unama" placeholder="Masukkan Nama">
</div>
</div>
</li>
<br>
<li>
<div class="item-content item-input">
<div class="item-title item-label">Jenis Kelamin</div>
<select name="jenkel" id="ujenkel">
<option value="laki-
laki" selected="selected">Laki - Laki</option>
<option value="perempuan">Perempuan</option>
</select>
</div>
</div>
</div>
</li>
<br>
<input type="number" id="utlp" placeholder="Masukkan Nomor Telepon">
</div>
</div>
</li>
<br>
<textarea name="alamat" id="ualamat" cols="30" rows="10" placeholder=
"Masukkan Alamat"></textarea>
</div>
</div>
</li>
<br>
<input type="text" id="ukota" placeholder="Masukkan Kota">
</div>
</div>
</li>
<br>
<input type="text" id="uemail" placeholder="Masukkan Email">
</div>
</div>
</li>
</ul>
</div>
<a href="" class="button button-fill color-red" id="subah">Ubah</a>
</div>
</div>
</div>



<div class="panel panel-left panel-cover panel-init">
<div class="block">

<p><a href="#" class="panel-close">x</a></p>

<p><a href="/home/">Home</a></p>
<p><a href="/page1/">Soal 1</a></p>
<p><a href="/page2/">Soal 2</a></p>
</div>
</div>

</div>
</div>

<script type="text/javascript" src="js/framework7.bundle.min.js"></script>

<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>
8. My-app.js
var app = new Framework7({

// App root element
root: '#app',
// App Name
name: 'My App',
// App id
view: {
stackPages: true
},
id: 'com.myapp.test',
// Enable swipe panel
panel: {
swipe: true,
},
// Add default routes
routes: [{
path: '/page1/',
pageName: 'page1',
},
{
path: '/page2/',
pageName: 'page2',
},
{
path: '/page3/',
pageName: 'page3',
},
{
path: '/home/',
pageName: 'home',
},
{
path: '/tambah/',
pageName: 'tambah'
},
{
path: '/ubah/',
pageName: 'ubah'
}
],
// ... other parameters
});
var mainView = app.views.create('.view-main');

var $$ = Dom7;
$$("#hitung").click(function () {
let banyak = $$("#byk_belanja").val();
let harga = $$("#hrg_satuan").val();
let kode_voucher = $$("#kode_voucher").val();
let diskon = "";
let total = banyak * harga;
if (kode_voucher == "JANUARI20") {
diskon = 0.2 * total;
} else if (kode_voucher == "MDN2020") {
} else if (kode_voucher == "THN2020") {
if (total >= 100000) {
} else {
diskon = 0;
}
} else {
diskon = 0;
}
var bayar = total - diskon;
$$('#total_belanja').html("Total Belanja : " + total);
$$('#diskon').html("Diskon : " + diskon);
$$('#total_bayar').html("Total Bayar : " + bayar);
});
baca();
function baca() {
app.request.json('http://localhost/db_buku/anggota.php', function (data) {
var jlh = data.length;
var i = 0;
console.log(data);
var buatTabel = "";
for (i = 0; i < jlh; i++) {
buatTabel += "<tr>" +
"<td>" + (i + 1) + "</td>" +
"<td>" + data[i].nama_anggota + "</td>" +
"<td>" + data[i].jenkel + "</td>" +
"<td>" + data[i].tlp + "</td>" +
"<td>" + data[i].alamat + "</td>" +
"<td>" + data[i].kota + "</td>" +
"<td>" + data[i].email + "</td>" +
"<td><button class='button' id='hapus' data-
id='" + data[i].id_anggota + "'><i class='f7-icons text-color-
red'>trash_fill</i></button> <button class='button' id='ubah' data-
id='" + data[i].id_anggota + "'><i class='f7-icons text-color-
blue'>pencil</i></button></td>" +
"</tr>";
}
$$('#tampil').html(buatTabel);
});
}
$$('#simpan').click(function () {
var nama = $$('#nama').val();
var jenkel = $$('#jenkel').val();
var tlp = $$('#tlp').val();
var alamat = $$('#alamat').val();
var kota = $$('#kota').val();
var email = $$('#email').val();
app.request({
url: 'http://localhost/db_buku/simpan.php',
type: "POST",
data: {
"nama": nama,
"jenkel": jenkel,
"tlp": tlp,
"alamat": alamat,
"kota": kota,
"email": email
},
dataType: "json",
success: function (data) {
if (data.pesan) {
app.dialog.alert(data.pesan);
$$('#nama').val('');
$$('#tlp').val('');
$$('#alamat').val('');
$$('#kota').val('');
$$('#email').val('');
app.views.main.router.navigate("/page2/");
baca();
}
}
})
})
$$('#tampil').on('click', '#hapus', function () {

var id = $$(this).data('id');
app.request({
url: 'http://localhost/db_buku/hapus.php',
type: 'POST',
data: {
"id": id
},
dataType: 'json',
if (data.pesan == "SUKSES") {
app.dialog.alert("Data Berhasil dihapus!");
app.views.main.router.navigate('/page2/');
baca();
}
}
});
});
$$('#tampil').on('click', '#ubah', function () {

var id = $$(this).data('id');
app.request({
url: 'http://localhost/db_buku/cari.php',
type: 'POST',
data: {
"id": id
},
dataType: 'json',
$$('#unama').val(data[0].nama_anggota);
$$('#ujenkel').val(data[0].jenkel);
$$('#utlp').val(data[0].tlp);
$$('#ualamat').val(data[0].alamat);
$$('#ukota').val(data[0].kota);
$$('#uemail').val(data[0].email);
$$('#kode').val(data[0].id_anggota);
app.views.main.router.navigate('/ubah/');
}
});
});
$$('#subah').click(function () { var nama = $$('#unama').val();

var jenkel = $$('#ujenkel').val(); var tlp = $$('#utlp').val();
var alamat = $$('#ualamat').val(); var kota = $$('#ukota').val(); var email = $$('#uemail').val(); var id = $$
('#kode').val();
app.request({
url: 'http://localhost/db_buku/ubah.php', type: 'POST',
data: {
"nama": nama, "jenkel": jenkel, "tlp": tlp, "alamat": alamat, "kota": kota, "email": email, "id": id,
},
dataType: 'json',
success: function (data) { if (data.pesan) {
app.dialog.alert(data.pesan);
$$('#unama').val("");
$$('#utlp').val("");
$$('#ualamat').val("");
$$('#ukota').val("");
$$('#uemail').val(""); app.views.main.router.navigate('/page2/'); baca();
}
}
});
});
9. Anggota.php
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credential:true");
header("Access-Control-Allow-Methods:POST, GET, PUT, DELETE, OPTION");
header("Access-Control-Max-Age:6048000");
header("Access-Control-Request-Headers:x-requested-with");
header("Access-Control-Allow-Headers:x-requested-with, x-requested-by");
include("koneksi.php");
$data = array();
$cari = mysqli_query($koneksi, "SELECT * FROM anggota");
while ($row = mysqli_fetch_object($cari)) {
$data[] = $row;
}
echo json_encode($data);
10. Simpan.php
<?php
$nama = $_POST['nama'];
$jenkel=$_POST['jenkel'];
$tlp=$_POST['tlp'];
$alamat=$_POST['alamat'];
$kota=$_POST['kota'];
$email=$_POST['email'];
$data = array();
$sql = mysqli_query($koneksi, "INSERT INTO anggota(nama_anggota, jenkel, tlp, alamat, kota,

email) values('$nama', '$jenkel', '$tlp', '$alamat', '$kota', '$email')");
if ($sql) {
$data['pesan']="Berhasil disimpan";
}
11. Koneksi.php
<?php
$koneksi = mysqli_connect("localhost", "root", "", "buku_tamu");
if(mysqli_connect_errno()) {
echo "KONEKSI GAGAL " . mysqli_connect_errno();
}
12. Hapus.php
<?php
$id = $_POST['id'];
$sql = mysqli_query($koneksi, "DELETE FROM anggota WHERE id_anggota='$id'");
$data['pesan']="SUKSES";
13. Cari.php
<?php
$id = $_POST['id'];
$data=array();
$cari = mysqli_query($koneksi, "SELECT * FROM anggota WHERE id_anggota='$id'");
while($row=mysqli_fetch_object($cari)) {
$data[] = $row;
}
14. Ubah.php
<?php
$nama = $_POST['nama'];
$jenkel=$_POST['jenkel'];
$tlp=$_POST['tlp'];
$alamat=$_POST['alamat'];
$kota=$_POST['kota'];
$email=$_POST['email'];
$id=$_POST['id'];
$data = array();
$sql = mysqli_query($koneksi, "UPDATE anggota set nama_anggota='$nama', jenkel='$jenkel', t

lp='$tlp', alamat='$alamat', kota='$kota', email='$email' WHERE id_anggota='$id'");
if ($sql) {
$data['pesan']="Berhasil diubah";
}

Tampilan Home: Nama: Riska Anggreni BR Ginting Nim:217510150 Kelas: 7 Ti B

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tampilan Home: Nama: Riska Anggreni BR Ginting Nim:217510150 Kelas: 7 Ti B

Uploaded by

Copyright:

Available Formats

Nama : Riska anggreni br Ginting

2. Tampilan perhitungan diskon

4. Tampilan Ubah data

<li class="item-content item-input">

<li class="item-content item-input">

<div data-name="ubah" class="page stacked">

var app = new Framework7({

var mainView = app.views.create('.view-main');

$$('#tampil').on('click', '#hapus', function () {

$$('#tampil').on('click', '#ubah', function () {

$$('#subah').click(function () { var nama = $$('#unama').val();

$sql = mysqli_query($koneksi, "INSERT INTO anggota(nama_anggota, jenkel, tlp, alamat, kota,

$sql = mysqli_query($koneksi, "UPDATE anggota set nama_anggota='$nama', jenkel='$jenkel', t

You might also like