Membuat Aplikasi CRUD Sederhana dengan Ionic 4 dan PHP MySQL PART 1

Mari Belajar Coding    5/23/2019    ionic   

Selamat datang di blog Mari belajar coding. Karena banyaknya request dari teman-teman untuk membuat tutorial crud sederhana dengan Ionic 4. Pada tutorial kali ini kita akan belajar membuat sebuah aplikasi crud sederhana dengan Ionic 4 dan PHP Mysql. Tutorial akan saya bagi menjadi beberapa part agar tidak terlalu panjang.

Membuat Aplikasi CRUD Sederhana dengan Ionic 4 dan PHP MySQL

Pertama kita buat database terlebih dahulu. Buat database penjualan dan satu tabel bernama barang. 

CREATE DATABASE penjualan;
USE penjualan;
CREATE TABLE `barang`(
`id_barang` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
`nama_barang` varchar(255),
`qty` int(11) ,
`harga` int(11)
);

Setelah membuat database dan tabel, selanjutnya kita akan membuat sebuah web service pertukaran data antara clien dan server untuk menangai request data get dan post dari aplikasi ionic yang akan kita buat. Disini kita akan menggunakan slimframework. Teman-teman bisa baca dokumentasi nya untuk lebih jelasnya mengenai slimframework.
Cara instal slimframework menggunakan composer. Buka CMD, pindahkan ke directory xampp/htdocs/webservice-ionic. Kemudian ketikkan kode berikut ini. 

composer require slim/slim "^3.12"

Baca juga Cara Instal dan Menggunakan Composer 

Struktur file slimframework yang telah di install di directory xampp/htdocs/webservice-ionic.

Buat file config.php di directory xampp/htdocs/webservice-ionic untuk menghubuhkan web service dengan database penjualan.

<?php
error_reporting(0);
session_start();

define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'penjualan');
define("SITE_KEY", 'MariBelajarcoding');
function getDB() 
{ $dbhost=DB_SERVER;
 $dbuser=DB_USERNAME;
 $dbpass=DB_PASSWORD;
 $dbname=DB_DATABASE;
 $dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
 $dbConnection->exec("set names utf8");
 $dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 return $dbConnection;
}
/* DATABASE CONFIGURATION END */
/* API key encryption */
function apiToken($session_uid)
{
$key=md5(SITE_KEY.$session_uid);
return hash('sha256', $key);
}
?>

Selanjutnya buat file index.php sebagai web service untuk menangai request data get dan post dari aplikasi ionic yang akan kita buat.

<?php
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');
header('Content-Type: application/json');

require 'vendor/autoload.php';
require 'config.php';
$app = new Slim\App();

$app->get('/Data_Barang','Data_Barang');
$app->post('/Input_Barang','Input_Barang');
$app->post('/Get_Barang_Edit','Get_Barang_Edit');
$app->post('/Edit_Barang','Edit_Barang');
$app->post('/Delete_Barang','Delete_Barang');
$app->run();

//request semua data yang berada pada tabel barang
function Data_Barang($request, $response){
    $data = $request->getParsedBody();
    //$login=$data['login'];
    //$token=$data['token'];   
    //$systemToken=apiToken($login);   
    try {         
        //if($systemToken == $token){
            $Data_Barang = '';
            $db = getDB();            
            $sql = "SELECT * FROM barang order by id_barang desc";
            $stmt = $db->prepare($sql);
            $stmt->execute();
            $Data_Barang = $stmt->fetchAll(PDO::FETCH_OBJ);           
            $db = null;
            if($Data_Barang)
            echo '{"Data_Barang": ' . json_encode($Data_Barang) . '}';
            else
            echo '{"Data_Barang": ""}';
        //} else{
        //    echo '{"error":{"text":"No access"}}';
        //}       
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}

//POST data barang untuk selanjutnya akan di simpan di tabel barang
function Input_Barang($request, $response){

    $data = $request->getParsedBody();
    $nama_barang=$data['nama_barang'];
    $qty=$data['qty'];
    $harga=$data['harga'];
    //$login=$data['login'];
    //$token=$data['token'];   
    //$systemToken=apiToken($login);   
    try {         
        //if($systemToken == $token){
            $db = getDB();            
            $sql = "INSERT INTO barang(nama_barang, qty, harga) VALUES(:nama_barang ,:qty, :harga)";
            $stmt = $db->prepare($sql);
            $stmt->bindParam("nama_barang", $nama_barang, PDO::PARAM_STR);
            $stmt->bindParam("qty", $qty, PDO::PARAM_STR);
            $stmt->bindParam("harga", $harga, PDO::PARAM_STR);
            $stmt->execute();        
            $db = null;
            if($stmt)
            echo '{"Input_Barang": "input success"}';
            else
            echo '{"Input_Barang": "input error"}';
        //} else{
        //    echo '{"error":{"text":"No access"}}';
        //}       
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}

//request data yang berada pada tabel barang berdasarkan id_barang
function Get_Barang_Edit($request, $response){
    $data = $request->getParsedBody();
    $id_barang=$data['id_barang'];
    //$login=$data['login'];
    //$token=$data['token'];   
    //$systemToken=apiToken($login);   
    try {         
        //if($systemToken == $token){
      $Get_Barang_Edit = '';
            $db = getDB();            
            $sql = "SELECT * FROM barang WHERE id_barang=:id_barang";
            $stmt = $db->prepare($sql);
            $stmt->bindParam("id_barang", $id_barang, PDO::PARAM_STR);
            $stmt->execute();  
            $Get_Barang_Edit = $stmt->fetchAll(PDO::FETCH_OBJ);          
            $db = null;
            if($Get_Barang_Edit)
            echo '{"Get_Barang_Edit": ' . json_encode($Get_Barang_Edit) . '}';
            else
            echo '{"Get_Barang_Edit": ""}';
        //} else{
        //    echo '{"error":{"text":"No access"}}';
        //}       
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}

//POST data barang ubah data berdasarkan id_barang
function Edit_Barang($request, $response){
    $data = $request->getParsedBody();
    $id_barang=$data['id_barang'];
    $nama_barang=$data['nama_barang'];
    $qty=$data['qty'];
    $harga=$data['harga'];
    //$login=$data['login'];
    //$token=$data['token'];   
    //$systemToken=apiToken($login);   
    try {         
        //if($systemToken == $token){
            $db = getDB();            
            $sql = "UPDATE barang SET nama_barang=:nama_barang, qty=:qty, harga=:harga WHERE id_barang=:id_barang";
            $stmt = $db->prepare($sql);
            $stmt->bindParam("id_barang", $id_barang, PDO::PARAM_STR);
            $stmt->bindParam("nama_barang", $nama_barang, PDO::PARAM_STR);
            $stmt->bindParam("qty", $qty, PDO::PARAM_STR);
            $stmt->bindParam("harga", $harga, PDO::PARAM_STR);
            $stmt->execute();        
            $db = null;
            if($stmt)
            echo '{"Edit_Barang": "Edit success"}';
            else
            echo '{"Edit_Barang": "Edit error"}';
        //} else{
        //    echo '{"error":{"text":"No access"}}';
        //}       
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}

//Untuk menghapus data barang berdasarkan id_barang
function Delete_Barang($request, $response){
    $data = $request->getParsedBody();
    $id_barang=$data['id_barang'];
    //$login=$data['login'];
    //$token=$data['token'];   
    //$systemToken=apiToken($login);   
    try {         
        //if($systemToken == $token){
            $db = getDB();            
            $sql = "DELETE FROM barang WHERE id_barang=:id_barang";
            $stmt = $db->prepare($sql);
            $stmt->bindParam("id_barang", $id_barang, PDO::PARAM_STR);
            $stmt->execute(); 
            $db = null;
            if($stmt)
            echo '{"Delete_Barang": "Delete success"}';
            else
            echo '{"Delete_Barang": "Delete error"}';
        //} else{
        //    echo '{"error":{"text":"No access"}}';
        //}       
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}

Terakhir buat .htaccess.

# Note: see https://httpd.apache.org/docs/current/howto/htaccess.html:
#
# "You should avoid using .htaccess files completely if you have access to
# httpd main server config file. Using .htaccess files slows down your Apache
# http server. Any directive that you can include in a .htaccess file is
# better set in a Directory block, as it will have the same effect with
# better performance."

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [QSA,L]

Struktur file dan folder di directory xampp/htdocs/webservice-ionic seperti gambar di bawah ini.

Sampai disini kita telah berhasil membuat web service untuk aplikasi ionic. Untuk mencoba menjalankan web servicenya, isikan data pada tabel barang. 
Kemudian ketikkan http://localhost/webservice-ionic/Data_Barang di browser. Pastikan service apache dan mysql dalam keadaan start. Data barang akan di tampilkan seperti gambar di bawah ini.

Tutorial membuat aplikasi crud sederhana dengan ionic 4 php dan mysql part 1 sampai disini, untuk tutorial selanjutnya kita akan membuat app baru menggunakan ionic 4 dan menampilkan data dari database di aplikasi. Sekian, semoga bermanfaat.

Baca juga :
Membuat aplikasi crud Sederhana dengan Ionic 4 dan PHP Mysql part 1 
Membuat aplikasi crud Sederhana dengan Ionic 4 dan PHP Mysql part 2 
Membuat aplikasi crud Sederhana dengan Ionic 4 dan PHP Mysql part 3 
Membuat aplikasi crud Sederhana dengan Ionic 4 dan PHP Mysql part 4



Related search:
Membuat aplikasi crud ionic 4 dan mysql
Crud ionic 4 php mysql