Cara Upload gambar di Flutter & Menyimpannya di Database MySQL

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara upload gambar di Flutter dan menyimpannya ke database MySQL. Penasaran?, ayo ikuti selengkapnya di bawah ini.

Pada tutorial sebelumnya, saya sudah membahas cara membuat fitur upload gambar di flutter di link berikut ini https://www.sahretech.com/2022/04/cara-upload-gambar-dan-menampilkannya.html. Dan pada kesempatan kali ini, kita akan melanjutkan dan menyempurnakan pembahasan sebelumnya yaitu membuat fitur upload gambar dan menyimpannya ke dalam database. Pada tutorial kali ini kita akan belajar, http request, image picker, grid view builder, snackbar, membuat back-end, dan belajar implementasi widget lainnya.l

Baca Artikel Lain ✨

📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more

📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more

📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more

Cara Upload dan Menyimpan Gambar di Flutter + MySQL dan Php

1. Pertama kita akan membuat bagian back-endnya terlebih dahulu. Jadi silahkan buat database dengan nama latihan dan buat tabel di dalamnya dengan nama flutter_upload_images. Lalu ikuti struktur tabelnya seperti gambar di bawah ini.

Struktur Tabel flutter_upload_images

2. Selanjutnya, buatlah sebuah folder baru di dalam folder htdocs dengan nama flutter_upload_image atau dengan nama bebas. Lalu buat sebuah file baru di dalamnya dengan nama create.php. Ikuti scriptnya seperti di bawah ini.

    

<?php

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

    //get image name
    $image = $_FILES['image']['name']; 

    //create date now
    $date = date('Y-m-d');

    //make image path
    $imagePath = 'images/'.$image; 

    $tmp_name = $_FILES['image']['tmp_name']; 

    //move image to images folder
    move_uploaded_file($tmp_name, $imagePath);

    $result = mysqli_query($connection, "insert into flutter_upload_images set image='$image', date='$date'");
    
    if($result){
        echo json_encode([
            'message' => 'Data input successfully'
        ]);
    }else{
        echo json_encode([
            'message' => 'Data Failed to input'
        ]);
    }
?>

3. Buatlah sebuah file baru di dalam folder flutter_upload_image dengan nama list.php. Lalu ikuri scriptnya seperti di bawah ini. 

   

<?php 

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

    echo json_encode($data);

4. Jangan lupa membuat folder images di dalam folder flutter_upload_image. Folder ini berfungsi untuk menampung semua gambar nantinya. Sehingga isi di dalam folder flutter_upload_image adalah file create.php, file list.php, dan folder images

5. Selanjutnya, buatlah sebuah project flutter baru dengan nama flutter_upload_image. Dan pada tutorial kali saya menggunakan flutter versi null safety.

6. Setelah membuat project flutter baru, selanjutnya buka file pubspec.yaml. Lalu tambahkan package image_picker: dan package   http: (tidak perlu menambahkan versi package) Jangan lupa tekan CTRL + S atau simpan file untuk mengunduh package yang dibutuhkan. Lihat gambar di bawah ini untuk lengkapnya, (tidak perlu menambahkan versi package).

Menambahkan Library

7, Selanjutnya buka file main.dart. Lalu ganti isinya dengan script di bawah ini. Dan jangan lupa juga untuk mengganti setiap http://192.168.1.4/flutter_upload_image/ dengan endpoint yang sesuai dengan milik kalian masing-masing.

    

    // ignore_for_file: unused_import, use_key_in_widget_constructors, unused_local_variable, prefer_const_literals_to_create_immutables, prefer_const_constructors, deprecated_member_use, sized_box_for_whitespace, avoid_print, unused_field, prefer_is_empty

    import 'dart:convert';
    import 'dart:io';
    import 'package:flutter/material.dart';
    import 'package:image_picker/image_picker.dart';
    import 'package:http/http.dart' as http;
    
    void main() => runApp(MaterialApp(
          home: Home(),
          debugShowCheckedModeBanner: false,
        ));
    
    class Home extends StatefulWidget {
      @override
      _HomeState createState() => _HomeState();
    }
    
    class _HomeState extends State<Home> {
    
      XFile? image;
    
      List _images = [];
    
      final ImagePicker picker = ImagePicker();
    
      //we can upload image from camera or from gallery based on parameter
      Future sendImage(ImageSource media) async {
    
        var img = await picker.pickImage(source: media);
    
        var uri = "http://192.168.1.4/latihan/flutter_upload_image/create.php";
    
        var request = http.MultipartRequest('POST', Uri.parse(uri));
    
        if(img != null){
    
          var pic = await http.MultipartFile.fromPath("image", img.path);
    
          request.files.add(pic);
    
          await request.send().then((result) {
    
            http.Response.fromStream(result).then((response) {
    
              var message = jsonDecode(response.body);
    
              // show snackbar if input data successfully
              final snackBar = SnackBar(content: Text(message['message']));
              ScaffoldMessenger.of(context).showSnackBar(snackBar);
    
              //get new list images 
              getImageServer();
            });
    
          }).catchError((e) {
    
            print(e);
    
          });
        }
    
      }
    
      Future getImageServer() async {
        try{
    
          final response = await http.get(Uri.parse('http://192.168.1.4/latihan/flutter_upload_image/list.php'));
    
          if(response.statusCode == 200){
            final data = jsonDecode(response.body);
    
            setState(() {
              _images = data;
            });
          }
    
        }catch(e){
    
          print(e);
          
        }
      }
    
      @override
      void initState() {
        // ignore: todo
        // TODO: implement initState
        super.initState();
        getImageServer();
      }
    
      //show popup dialog
      void myAlert() {
        showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                shape:
                    RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
                title: Text('Please choose media to select'),
                content: Container(
                  height: MediaQuery.of(context).size.height / 6,
                  child: Column(
                    children: [
                      ElevatedButton(
                        //if user click this button, user can upload image from gallery
                        onPressed: () {
                          Navigator.pop(context);
                          sendImage(ImageSource.gallery);
                        },
                        child: Row(
                          children: [
                            Icon(Icons.image),
                            Text('From Gallery'),
                          ],
                        ),
                      ),
                      ElevatedButton(
                        //if user click this button. user can upload image from camera
                        onPressed: () {
                          Navigator.pop(context);
                          sendImage(ImageSource.camera);
                        },
                        child: Row(
                          children: [
                            Icon(Icons.camera),
                            Text('From Camera'),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              );
            });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Upload Image'),
            actions: [
              IconButton(
                onPressed: () => myAlert(), 
                icon: Icon(Icons.upload),
              )
            ],
          ),
          body: _images.length != 0 ? 
          GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2
            ),
            itemCount: _images.length,
            itemBuilder: (_, index){
              return Padding(
                padding: EdgeInsets.all(10),
                child: Image(
                  image: NetworkImage('http://192.168.1.4/latihan/flutter_upload_image/images/'+_images[index]['image']),
                  fit: BoxFit.cover,
                ),
              );
            }
          ) : Center(child: Text("No Image"),)
        );
      }
    }

8. Ok, semua step sudah kita lalui, saatnya melakukan uji coba. Silahkan jalankan emulator dan jalankan project yang baru selesai kita buat. Jika berhasil, maka tampilannya akan tampak seperti gambar di bawah ini.

Hasil Akhir

Ok mantap!, sekarang kalian sudah bisa membuat fitur upload gambar ke dalam database di flutter + mysql + Php. Semoga bermanfaat, jika ada yang kurang jelas atau kesulitan silahkan tanya langsung di kolom komentar, atau tanya langsung di fanspage sahretech. sekian dan terima kasih.