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 :

Tampil Barang

Menambah Data

Untuk menambah data buatlah sebuah file tambah.php pada folder readapi/tambah.php berikut adalah coding untuk menambahkan data produk

Tambah Produk

Edit Data

Untuk mengubah data buatlah sebuah file edit.php pada folder readapi/edit.php berikut adalah coding untuk halaman edit data produk :

Document