Cara menggunakan php app for android

Di sini kita harus tahu dahulu apa sih itu backend ? seperti dalam artikel “Backend website menggunakan CodeIginiter” backend adalah bagian dari website yang digunakan untuk mengolah data dari content / isi dari sebuah website. Dan android disini adalah aplikasi mobile / smartphone. Terus bagaimana aplikasi android bisa terhubung dengan backend ? Yaitu dengan API (Application Programming Interface).

Persiapkan sebuah backend
Bisa dipelajari dalam artikel “Backend website menggunakan CodeIginiter” cara membuat backend secara sederhana.

Persiapkan juga aplikasi android
Bisa dipelajari dalam artikel “Membuat Aplikasi iOS dan Android dengan Flutter“.

Inti dalam artikel ini yaitu menghubungkan nya dengan API (Application Programming Inferface).

Langkah membuat API :

Pastikan sudah membuat backend terlebih dahulu.
Masuk ke folder Backend CI

Masuk folder application/config
– Tambahkan file Idap.php dan rest.php

Masuk folder application/helpers
– Tambahkan file db_helper.php

Masuk folder application/language/english
– Tambahkan file rest_controller_lang.php

Masuk folder application/libraries
– Tambahkan file Format.php dan REST_Controller.php

Update models
Masuk folder application/models
– Edit file Mod_produk.php
– Tambahkan method / fungsi get_all_produk seperti berikut :

public function get_all_produk()
   {
      $this->db->order_by('id_barang', 'DESC');
      $query = $this->db->get("barang");
      if ($query->num_rows() > 0) {
         $response = array();
         $response['error'] = false;
         $response['message'] = 'List Produk';
         foreach ($query->result() as $row) {
            $tempArray = array();
            $tempArray['id_barang'] = $row->id_barang;
            $tempArray['nama_barang'] = $row->nama_barang;
            $tempArray['harga'] = $row->harga;
            $tempArray['stok'] = $row->stok;
            $tempArray['img'] = base_url() . 'uploads/' . $row->img;
            $response['data'][] = $tempArray;
         }
         return $response;
      }
      return false;
   }

Masuk folder application/controller
– Buat file Produk.php
– Ketikkan code seperti berikut :

<?php 
   require (APPPATH.'/libraries/REST_Controller.php'); 
   use Restserver\Libraries\REST_Controller; 

   class Produk extends REST_Controller{ 
      public function __construct(){ 
         parent::__construct(); 
         $this->load->model('Mod_produk');
      }
    
      public function index_get(){
        $response = $this->Mod_produk->get_all_produk();
        $this->response($response);
      }
   } 
?>

Sekarang bisa dicoba di jalankan di browser
Ketik http://127.0.0.1:8080/index.php/produk enter

Langkah selanjutnya menghubungkan API ke aplikasi android nya …
Buat new project
– flutter create toko_online
– buka project yang sudah di buat menggunakan visual studio code
– tambahkan package http 0.12.1 untuk networking nya :

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  http: ^0.12.1

– ubah file lib/main.dart seperti berikut :

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Toko Online',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Toko Online'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<Produk> daftarProduk;

  @override
  void initState() {
    super.initState();
    daftarProduk = fetchProduk();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        child: Column(
          children: <Widget>[
            SizedBox(height: 10),
            FutureBuilder<Produk>(
              future: daftarProduk,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  final produk = snapshot.data.daftarProduk;
                  return GridView.builder(
                    shrinkWrap: true,
                    physics: const BouncingScrollPhysics(),
                    itemCount: produk.length,
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      mainAxisSpacing: 16,
                      crossAxisSpacing: 10,
                      childAspectRatio: 0.7,
                    ),
                    itemBuilder: (BuildContext context, int index) {
                      return Container(
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(8),
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey[300],
                              blurRadius: 5,
                              spreadRadius: 0,
                              offset: Offset(0, 2),
                            ),
                          ],
                        ),
                        child: GestureDetector(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              buildProdukImage(produk, index),
                              buildProdukTitle(produk, index),
                              buildProdukSubtitle(produk, index),
                            ],
                          ),
                          onTap: () {},
                        ),
                      );
                    },
                  );
                } else if (snapshot.hasError) {
                  return Text('${snapshot.error}');
                }
                return Center(child: CircularProgressIndicator());
              },
            ),
            SizedBox(height: 10),
          ],
        ),
      ),
    );
  }

  Padding buildProdukSubtitle(List<DaftarProduk> produk, int index) {
    return Padding(
      padding: const EdgeInsets.only(top: 6, left: 6),
      child: Row(
        children: <Widget>[
          Expanded(
            child: Text(
              'Rp ${produk[index].harga}',
              style: TextStyle(color: Colors.red),
            ),
          ),
        ],
      ),
    );
  }

  Padding buildProdukTitle(List<DaftarProduk> produk, int index) {
    return Padding(
      padding: const EdgeInsets.only(top: 6, left: 6),
      child: Text(
        '${produk[index].namaBarang}',
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
      ),
    );
  }

  GridTile buildProdukImage(List<DaftarProduk> produk, int index) {
    return GridTile(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4.0),
        child: AspectRatio(
          aspectRatio: 1,
          child: Image.network(
            '${produk[index].image}',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

Future<Produk> fetchProduk() async {
  final response = await http
      .get('http://127.0.0.1:8080/index.php/produk');

  if (response.statusCode == 200) {
    return Produk.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load produk');
  }
}

class Produk {
  final bool error;
  final String message;
  final List<DaftarProduk> daftarProduk;

  Produk({
    this.error,
    this.message,
    this.daftarProduk,
  });

  factory Produk.fromJson(Map<String, dynamic> json) {
    final List<DaftarProduk> daftarProduk = [];
    for (final daftar in json['data']) {
      daftarProduk.add(DaftarProduk.fromJson(daftar));
    }
    return Produk(
      error: json['error'],
      message: json['message'],
      daftarProduk: daftarProduk,
    );
  }
}

class DaftarProduk {
  final String idBarang;
  final String namaBarang;
  final String harga;
  final String stok;
  final String image;

  DaftarProduk({
    this.idBarang,
    this.namaBarang,
    this.harga,
    this.stok,
    this.image,
  });

  factory DaftarProduk.fromJson(Map<String, dynamic> json) {
    return DaftarProduk(
      idBarang: json['id_barang'],
      namaBarang: json['nama_barang'],
      harga: json['harga'],
      stok: json['stok'],
      image: json['img'],
    );
  }
}

Jalankan aplikasi dengan build/run project.

Source code lengkap di github Backend CI dan API
Source code lengkap di github Android Flutter

Jika ada pertanyaan silahkan cantumkan pada kolom komentar.
Sekian dan terima kasih.
Happy coding 🙂