Tutorial CRUD Flutter PHP dan MySQL Part Pertama Membuat Back-end

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar membuat aplikasi catatan(note app) sederhana dan dengan cara yang sederhana dengan menggunakan flutter, php dan mysql. Tutorial ini saya bagi menjadi 2 bagian. Bagian pertama pembuatan back-end dan bagian kedua pembuatan aplikasi mobile. Ikuti pembahasannya di bawah ini.

Studi Kasus

Kita akan membuat aplikasi catatan sederhana yang dapat melakukan operasi CRUD. Tampilan aplikasi ini cukup sederhana, dimana kita menggunakan masonry grid view untuk membuat tampilan card yang bertumpuk di setiap baris dengan 2 ukuran yang berbeda. Di bawah ini adalah tampilan akhir dari apliaksi yang akan dibuat.

Hasil Akhir Aplikasi

Pada tutorial ini, kita belum menggunakan konsep model dan state management. Hal ini ditujukan agar tutorial menjadi sederhana dan para pemula dapat lebih mengerti tentang konsep CRUD pada aplikasi berbasis flutter.

Membuat Back-end Aplikasi Catatan

Ini adalah bagian pertama, dimana kita akan mempersiapkan back-end dengan menggunakan bahasa php dan database mysql.

1. Buatlah sebuah database baru dengan nama latihan, lalu buatlah sebuah tabel baru di dalamnya dengan nama note_app. Struktur tabelnya dapat dilihat seperti gambar di bawah ini. Dan jangan lupa mengisi beberapa data ke dalam tabel.

Struktur Tabel note_app

2. Buatlah sebuah folder baru dengan nama latihan lalu buatlah sebuah sub folder di dalamnya dengan nama note_app di dalam folder htdocs. Lalu buatlah sebuah file baru dengan nama list.php seperti script di bawah ini.

    

<?php 

    $connection = new mysqli("localhost","root","","latihan");
    $data       = mysqli_query($connection, "select * from note_app");
    $data       = mysqli_fetch_all($data, MYSQLI_ASSOC);

    echo json_encode($data);

3. Buatlah sebuah file baru dengan nama create.php, lalu ikuti scriptnya seperti di bawah ini

        
        
<?php

    $connection = new mysqli("localhost", "root", "", "latihan");
    $title      = $_POST['title']; 
    $content    = $_POST['content'];
    $date       = date('Y-m-d');
    
    $result = mysqli_query($connection, "insert into note_app set title='$title', content='$content', date='$date'");
    
    if($result){
        echo json_encode([
            'message' => 'Data input successfully'
        ]);
    }else{
        echo json_encode([
            'message' => 'Data Failed to input'
        ]);
    }

4. Buatlah sebuah file baru dengan nama update.php, lalu ikuti scriptnya seperti di bawah ini

            

<?php

    $connection = new mysqli("localhost", "root", "", "latihan");
    $title      = $_POST['title']; 
    $content    = $_POST['content'];
    $id         = $_POST['id'];
        
    $result = mysqli_query($connection, "update note_app set title='$title', content='$content' where id='$id'");
        
    if($result){
        echo json_encode([
            'message' => 'Data edit successfully'
        ]);
    }else{
        echo json_encode([
            'message' => 'Data Failed to update'
        ]);
    }

5. Buatlah sebuah file baru dengan nama delete.php, lalu ikuti scriptnya seperti di bawah ini

    

<?php

    $connection = new mysqli("localhost", "root", "", "latihan");

    $id = $_POST['id'];

    $result = mysqli_query($connection, "delete from note_app where id=".$id);

    if($result){
        echo json_encode([
            'message' => 'Data delete successfully'
        ]);
    }else{
        echo json_encode([
            'message' => 'Data Failed to delete'
        ]);
    }

6. Buatlah sebuah file baru dengan nama detail.php, lalu ikuti scriptnya seperti gambar di bawah ini

<?php 

    $connection = new mysqli("localhost","root","","latihan");
    $data       = mysqli_query($connection, "select * from note_app where id=".$_GET['id']);
    $data       = mysqli_fetch_array($data, MYSQLI_ASSOC);

    echo json_encode($data);

7. Semua step sudah kita jalankan, sekarang saatnya kita lakukan uji coba. Untuk melakukan uji coba kita bisa menggunakan aplikasi postman. Bagi yang belum memiliki aplikasi postman silahkan download terlebih dahulu. Untuk cara melakukan uji coba, silahkan ikuti gambar di bawah ini satu-persatu.



8. Uji coba menjalankan list.php

Hasil get list data

9. Uji coba menjalankan create.php

Hasil Kirim data

10. Uji coba menjalankan detail.php

Hasil Menampilkan Detail data

Jika proses testing menampilkan, memasukan, meng-update, dan mengahpus data seudah berhasil dilakukan. Maka artinya kalian sudah siap untuk mengikuti tutorial berikutnya, yaitu mengimplementasikan back-end ke dalam aplikasi flutter. Part 2: https://www.sahretech.com/2022/03/crud-flutter-php-mysql-kedua.html

Ok, sekian tutorial kita kali ini tentang Tutorial CRUD Flutter PHP dan MySQL Part Pertama. Semoga bermanfaat, jika ada kendala silahkan tanya langsung di kolom komentar atau bertanya langsung di fanspage sahretech. Sekian dan terima kasih.