Belajar Pemrograman Framework Codeigniter 4

Artikel seputar pemrgoraman framework Codeigniter 4

Codeigniter 4 : Cara Submit Form dan Upload File Dengan Ajax

08 Nov 2021 10:50
Dipost oleh Admin
1.286
0

Sobatcoding.com - Codeigniter 4 cara submit form dan upload file atau photo menggunakan ajax

Pada kesempatan kali ini admin akan berbagi cara menyimpan data ke database menggunakan ajax dan php tanpa reload halaman menggunakan codeigniter 4. Kita juga akan mencoba untuk upload file atau gambar dan membuat preview gambar sebelum di simpan ke database. Pada tutorial kali ini menggunakan beberapa plugin seperti jquery, bootstrap, font awesome dan jquery validation sebagai validasi form.

Untuk lebih jelasnya perhatikan langkah-langkah berikut ini:

Menyiapkan Database

Kita buat terlebih dahulu sebuah database dan table m_users untuk sebagai contoh untuk digunakan sebagai penyimpan data nantinya. Kalian bisa import script mysql dari kode berikut ini.

CREATE TABLE IF NOT EXISTS `m_users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `address` varchar(150) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `photo` varchar(225) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  `deleted_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Membuat Model

Kita buat sebuah Model bernama Users.php dan masukkan kode seperti berikut.

<?php

namespace App\Models;

use CodeIgniter\Model;

class Users extends Model
{
    protected $table      = 'm_users';
    protected $primaryKey = 'id';

    protected $useAutoIncrement = true;

    protected $returnType     = 'array';
    protected $useSoftDeletes = true;

    protected $allowedFields = ['name', 'address', 'photo'];

    protected $useTimestamps = true;
    protected $createdField  = 'created_at';
    protected $updatedField  = 'updated_at';
    protected $deletedField  = 'deleted_at';

}

Membuat View

Buatlah sebuah view html bernama form.html, kemudian buatlah kode seperti berikut ini.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Submit Form Menggunakan Ajax</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
        
    </head>
    <body>
        
        <section>
            <div class="container">
                <h1>Belajar Submit Data menggunakan Ajax</h1>
                <div class="card card-body">
                    <form id="form-submit" method="POST" action="<?= base_url('upload') ?>" enctype="multipart/form-data" >
                        <div class="form-group">
                            <label>Nama</label>
                            <input type="text" class="form-control" id="name" name="fullname" placeholder="Nama Lengkap" required />
                        </div>
                        <div class="form-group">
                            <label>Alamat</label>
                            <input type="text" class="form-control" id="address" name="address" placeholder="Alamat" required />
                        </div>
                        <div class="form-group">
                            <label class="d-block">Upload Photo</label>
                            <input type="file" id="photo" name="photo" />
                        </div>
                        <div class="form-group">
                            <div id="display-photo" class="border" style="width:150px;height:150px;background:#b5b5b5">

                            </div>
                        </div>
                        <button type="submit" name="save" class="btn btn-primary "> SIMPAN</button>
                    </form>

                    <!-- Modal -->
                    <div class="modal fade" id="modal-loader" tabindex="-1" role="dialog" aria-labelledby="modalLoader" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="modalLoader">Loading...</h5>
                                </div>
                                <div class="modal-body">
                                    <p class="h1 text-center"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js" integrity="sha512-cyAbuGborsD25bhT/uz++wPqrh5cqPh1ULJz4NSpN9ktWcA6Hnh9g+CWKeNx2R0fgQt+ybRXdabSBgYXkQTTmA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>

    </body>
</html>

Membuat Controller

Buatlah sebuah controller bernama Upload.php kemudian buatlah kode seperti berikut ini.

<?php

namespace App\Controllers;

#use CodeIgniter\Controller;
use CodeIgniter\HTTP\Request;
use App\Models\Users;

class Upload extends BaseController
{

    public function index()
    {
        return view('form');
    }

    public function doingUpload()
    {
        $success = false;
        $message = "Gagal simpan data";
        $data    = null;

        $data = [
            'name' => $this->request->getVar('name'),
            'address'  => $this->request->getVar('address'),
        ];

        $user = new Users;
        $res  = $user->insert($data);
        if( $res )
        {
            $success = true;
            $id   = $user->getInsertID();
            $message = "Berhasil simpan data";

            if( $this->request->getFile('photo') )
            {
                $photo = $this->request->getFile('photo');
                $name  = $photo->getName();
                $temp  = $photo->getTempName();
                $ext   = $photo->getClientExtension();
                $newName = $photo->getRandomName();

                if ($photo->isValid() && ! $photo->hasMoved()) {

                    if( in_array($ext, ['jpg', 'jpeg', 'png']) )
                    {
                        $path = FCPATH. 'photos/'. $newName;
                        $photo->move( FCPATH. 'photos', $newName);
    
                        $edit = new Users;
                        $user = $edit->update($id, ['photo'=> str_replace( FCPATH , "", $path) ]);
    
                        $message = "Berhasil simpan data dan upload photo";
                    }else{
                        $message = "Gagal upload photo. File yang boleh diupload adalah tipe image";
                    }
                    

                    $data = $edit->find($id);
                }

            }
        }
        

        return $this->response->setJSON(['success' => $success, 'data' => $data, "message" => $message]);
    }


}

Membuat Javascript

Tambahkan function javascript di dalam file form.html seperti berikut ini.

<script>
            $(document).ready(function() {
                
                $(document).on('change', '#photo', function(e) {
                    var file = $(this)[0].files[0];
                    var exts = ["image/png", "image/jpg", "image/jpeg"];
                    var max  = 1024 * 1024;
                    
                    //validasi image
                    if( !exts.includes(file.type) )
                    {
                        alert("File must be an image. JPG OR PNG");
                        return false;
                    }

                    //validasi image size
                    if( file.size >  max)
                    {
                        alert("File not large than 1 MB");
                        return false;
                    }
                    

                    if (file) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            
                            var image = new Image();
                            image.src = e.target.result;

                            image.onload = function() {
                                
                                $("#display-photo").css("background-image", "url(" + this.src + ")");
                                $("#display-photo").css("background-position", "center");
                                $("#display-photo").css("background-size", "cover"); 
                                $("#display-photo").css("background-repeat", "no-repeat");
                                
                            };

                        }
                        reader.readAsDataURL(file);
                    } else {
                        alert('select a file to see preview');
                        $("#display-photo").css("background", "#b5b5b5");
                    }
                });

                $('#form-submit').validate({
                    errorPlacement: function(label, element) {
                        label.addClass('mt-2 text-danger');
                        label.insertAfter(element);
                    },
                    highlight: function(element, errorClass) {
                        $(element).parent().addClass('has-danger')
                        $(element).addClass('form-control-danger')
                    },
                    submitHandler: function(form) {
                        var formData = new FormData();
                            formData.append('name', $('#name').val());
                            formData.append('address', $('#address').val());
                            formData.append('photo', $('#photo').prop('files')[0]);

                        $.ajax({
                            url: $('#form-submit').attr('action'),
                            type: "POST",
                            data: formData,
                            contentType: false,
                            processData: false,
                            beforeSend: function() {
                                $('#modal-loader').modal({
                                    show: true,
                                    keyboard: false,
                                    backdrop: 'static'
                                });
                            },
                            success: function(response) {
                                $('#modal-loader').modal('hide');
                                alert(response.message);
                            }
                        }).fail(function() {
                            $('#modal-loader').modal('hide');
                            alert('error');
                        })
                        .always(function() {
                            $('#modal-loader').modal('hide');
                        });

                        return false;
                    }
                });
            })
        </script>

Kode di atas berfungsi untuk display image sebelum upload via ajax POST.