CRUD Rest API Webservice Menggunakan PHP dan MySQL - Part 2

Oleh theasgard29 Oktober 16, 2019 1 komentar

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 :

Membangun Rest API Client Dengan Codeigniter 3

Membangun Rest API Server Dengan Codeigniter 3

Aplikasi Penjualan Sederhana Menggunakan Web Service

Baca juga :