CRUD Rest API Webservice Menggunakan PHP dan MySQL - Part 2
Mengakses API Web Service
Pada project sebelumnya CRUD Rest API Webservice Menggunakan PHP dan MySQL - Part 1 kita telah membuat CRUD API Webservice, sekarang kita akan lanjutkan untuk mengakses webservice tersebut.
Pada artikel ini kita akan membuat file yang ditandai dengan kotak kuning,
semua file berada didalam folder readapi, sebelum dilanjutkan untuk mengakses
API Webservice kita akan membuat style.css yang berada didalam folder
layout/css/style.css untuk tampilan html pada tiap halaman. berikut adalah
coding pada css yang akan kita gunakan :
.wrap {
background: whitesmoke;
width: 900px;
margin: 10px auto;
}
/*bagian header*/
.wrap .header {
background: green;
/*height: 50px;*/
padding: 20px 10px;
}
/*akhir header*/
/*bagian menu*/
.wrap .menu {
background: yellow;
}
.wrap .menu ul {
padding: 0;
margin: 0;
background: yellow;
overflow: hidden;
}
.wrap .menu ul li {
float: left;
list-style-type: none;
padding: 10px;
}
.wrap .menu ul li a {
/* font-size: 1.25px; */
line-height: 1em;
text-decoration: none;
}
.wrap .menu li a:hover {
/* font-size: 1.25px; */
color: #300;
}
/*akhir menu*/
.clear {
clear: both;
}
.badan {
height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar {
background: orange;
float: left;
width: 25%;
height: 100%;
}
.wrap .badan .sidebar ul li {
list-style-type: none;
text-decoration: none;
}
.wrap .badan .sidebar ul li a {
/* font-size: 1.25px; */
line-height: 1em;
text-decoration: none;
}
.wrap .badan .sidebar a:hover {
/* font-size: 1.25px; */
color: #300;
}
/*akhir sidebar*/
.wrap .badan .content {
background: whitesmoke;
float: left;
height: 100%;
width: 72%;
margin-left: 10px;
margin-right: 10px;
}
.wrap .footer {
width: 880px;
padding: 10px;
background: black;
}
.wrap .footer p {
color: wheat;
}
table,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
}
/* form */
.myform {
margin: 0 auto;
background: yellowgreen;
width: 400px;
padding: 14px;
}
#stylish h1 {
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
}
#stylish p {
font-size: 11px;
color: #666666;
border-bottom: solid 1px #b7ddf2;
padding-bottom: 10px;
margin-bottom: 8px;
}
#stylish label {
display: block;
font-weight: bold;
text-align: right;
width: 140px;
float: left;
}
#stylish input {
padding: 4px 2px;
width: 200px;
font-size: 12px;
float: left;
border: solid 1px #aacfe4;
margin: 2px 0 20px 10px;
}
#stylish button {
clear: both;
width: 125px;
color: #666666;
font-weight: bold;
height: 31px;
margin-left: 150px;
font-size: 11px;
}
body {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
font-size: 12px;
}
Menampilkan Data
Untuk menampilkan data buatlah sebuah file tampil.php pada folder readapi/tampil.php berikut adalah coding untuk menampilkan data produk :
<?php
function http_request($url) {
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
return $output;
}
$data = http_request("http://localhost/dbrest/api/api_tampil.php");
$data = json_decode($data, TRUE); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tampil Barang</title>
<link rel="stylesheet" href="layout/css/style.css"> </head>
<body>
<div class="wrap">
<div class="header">
<h1>STTI API</h1> </div>
<div class="menu">
<ul>
<li><a href="">Home</a></li>
</ul>
</div>
<div class="badan">
<div class="sidebar">
<ul>
<li><a href="../readapi/tampil.php">Produk</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="content">
<p>DATA PRODUK</p> <a href="../readapi/tambah.php">Tambah Data</a>
<table style="width:100%">
<tr>
<td>Nama</td>
<td>Tipe Produk</td>
<td>Aksi</td>
</tr>
<?php foreach ($data as $data) { ?>
<tr>
<td>
<?= $data["id"] ?>
</td>
<td>
<?= $data["nama_produk"] ?>
</td>
<td>
<?= $data["tipe_produk"] ?>
</td>
<td colspan="2"> <a href="../readapi/edit.php?id=<?= $data['id'] ?>">Edit</a> <a href="../api/api_hapus.php?id=<?= $data['id'] ?>">Hapus</a> </td>
</tr>
<?php } ?>
</table>
</div>
</div>
<div class="clear"></div>
<div class="footer">
<p> Sekolah Tinggi Teknologi Indonesia</p>
</div>
</div>
</body>
</html>
Menambah Data
Untuk menambah data buatlah sebuah file tambah.php pada folder readapi/tambah.php berikut adalah coding untuk menambahkan data produk
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tambah Produk</title>
<link rel="stylesheet" href="layout/css/style.css"> </head>
<body>
<div class="wrap">
<div class="header">
<h1>STTI API</h1> </div>
<div class="menu">
<ul>
<li><a href="">Home</a></li>
</ul>
</div>
<div class="badan">
<div class="sidebar">
<ul>
<li><a href="../readapi/tampil.php">Produk</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="content">
<p>Tambah Produk</p> <a href="../readapi/tampil.php">Kembali</a>
<div id="stylish" class="myform">
<h1>TAMBAH PRODUK</h1>
<p>form ini digunakan untuk tambah data produk</p>
<form action="../api/api_tambah.php" method="post" id="form">
<div class="form-group">
<label for="">Nama Produk</label>
<input type="text" name="nama_produk" id="nama_produk" placeholder="Nama Produk" aria-describedby="helpId"> </div>
<div class="form-group">
<label for="">Tipe Produk</label>
<input type="text" name="tipe_produk" id="tipe_produk" placeholder="Tipe Produk" aria-describedby="helpId"> </div>
<div class="form-group">
<label for="">Harga</label>
<input type="text" name="harga" id="harga" placeholder="Harga" aria-describedby="helpId"> </div>
<div class="form-group">
<label for="">Stok</label>
<input type="text" name="stok" id="stok" placeholder="Stok" aria-describedby="helpId"> </div>
<div class="form-group">
<button type="submit">Simpan</button>
</div>
</form>
</div>
</div>
</div>
<div class="clear"></div>
<div class="footer">
<p> Sekolah Tinggi Teknologi Indonesia</p>
</div>
</div>
</body>
</html>
Edit Data
Untuk mengubah data buatlah sebuah file edit.php pada folder readapi/edit.php berikut adalah coding untuk halaman edit data produk :<?php
function http_request($url)
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
return $output;
}
$data = http_request("http://localhost/dbrest/api/api_edit.php?id=" . $_GET["id"]);
$data = json_decode($data, TRUE);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="layout/css/style.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>STTI API</h1>
</div>
<div class="menu">
<ul>
<li><a href="">Home</a></li>
</ul>
</div>
<div class="badan">
<div class="sidebar">
<ul>
<li><a href="../readapi/tampil.php">Produk</a></li>
<li><a href="../readapi/about.php">About</a></li>
</ul>
</div>
<div class="content">
<p>
<a href="../readapi/tampil.php">Kembali</a>
</p>
<div id="stylish" class="myform">
<h1>EDIT produk</h1>
<p>form ini digunakan untuk edit produk</p>
<form action="../api/api_ubah.php" method="post" id="form">
<div class="form-group">
<label for="">Kode produk</label>
<input type="text" value="<?= $data["id"] ?>" name="id" id="id" placeholder="Kode Produk">
</div>
<div class="form-group">
<label for="">Nama produk</label>
<input type="text" value="<?= $data["nama_produk"] ?>" name="nama_produk" id="nama_produk" placeholder="Nama Produk">
</div>
<div class="form-group">
<label for="">Tipe produk</label>
<input type="text" value="<?= $data["tipe_produk"] ?>" name="tipe_produk" id="tipe_produk" placeholder="Tipe Produk">
</div>
<div class="form-group">
<label for="">Harga</label>
<input type="text" value="<?= $data["harga"] ?>" name="harga" id="harga" placeholder="Harga">
</div>
<div class="form-group">
<label for="">Stok</label>
<input type="text" value="<?= $data["stok"] ?>" name="stok" id="stok" placeholder="Stok">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="clear"></div>
<div class="footer">
<p> Sekolah Tinggi Teknologi Indonesia</p>
</div>
</div>
</body>
</html>
Baca artikel berikut :
CRUD Rest API Webservice Menggunakan PHP dan MySQL - Part 1
sebelum mengerjakan
Part 2
Selain itu anda juga dapat membaca :
Baca juga :
- 30+ Latihan Soal dan Jawaban PAS Fisika Kelas XI K13 Terbaru
- 30+ Latihan Soal dan Jawaban PAS Kimia Kelas XI K13 Terbaru
- 30+ Latihan Soal dan Jawaban PAS Matematika Kelas XI K13 Terbaru
- 30+ Latihan Soal dan Jawaban PAS Matematika Peminatan Kelas XI K13 Terbaru
- 40 Latihan Soal dan Jawaban Bahasa Indonesia PAS Ganjil Kelas XI K13 Terbaru
- 40 Latihan Soal dan Jawaban PAI PAS Ganjil Kelas XI K13 Terbaru
- 40 Soal dan Jawaban Bahasa Inggris PAS Ganjil Kelas XI K13 Terbaru
hasil jadinya kayak gimana
BalasHapus