-->

AK Studio

Tutorial Programming Bahasa Indonesia

Tutorial CRUD PHP part #2 : Create Input Data PHP dan MySql

Tutorial CRUD PHP part #2: Create Input data Kedalam Database Mysql


Materi ini merupakan materi lanjutan dari Tutorial sebelumnya di Tutorial CRUD PHP Mysql Part #1 : Membuat Koneksi Database Mysql Pada PHP.

Pada Tutorial part #1 kita telah berhasil membuat koneksi ke database Mysql dengan PHP. 

selanjutnya pada tutorial part #2: Create Input data Kedalam Database Mysql ini kita akan coba Mulai masuk ke module CRUD, ya itu Module Crate. Menambahkan dan Menyimpan data Kedalam Data Database MySql. langsung saja Buka project nya. 

pada tutorial sebelumnya kita telah berhasil membuat sebuah menu di php secara dinamis, menu ini akan kitaa terapkan untuk membuat navigasi pada serial CRUD php kita. langsung saja

1. Menambahkan Router Baru
pada tutorial php berpindah halaman part 7 kita telah mempelajari bagaimana cara membuat halaman dinamis. dengan routing sederhana untuk menampilkan halaman yang akan di tampilkan di page index utama. 

buka file router.php, tambahkan route baru add-produk, router ini akan mengerahkan file mana yang akan di load dalam page index nya.  untuk route awal dari tutorial part 7, route halaman about dan profile kita hapus saja. atau bisa di remark pada bagian paling bawah file route.

Coding route.php
if (isset($_GET['pages'])) {
    $view = $_GET['pages'];

    switch ($view) {
        case 'home':
            include('./View/page/Home.php');
            break;
        case 'add-produk':
            include('./View/Add_produk.php');
            break;
        default:
            echo "Maaf... Halaman Tidak DI temukan";
            break;
    }
  } else {
      include('./View/page/Home.php');
  }

2.Menambahkan Menu navigasi
seteleh selesai menambahkan router, lalu buat menu baru untuk mengarahkan router baru, buka file menu.php tambahkan navigasi baru, untuk mengarahkan ke halaman add produk. 

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">MY_tutorial</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="index.php?pages=home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="index.php?pages=add-produk">Tambah produk</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
Penjelsan Coding
line 13 : pada atribut  href . memanggil rout untuk menampilkan halaman add profuk yang sudah kita buat

3. Buat Model add produk
selanjut nya kita akan membuat model untuk perintah insert data.  pada folder Model, buat sebuah file baru dangan nama add_produk.php

jangan lupa buat sebuah folder baru dengan nama img-produk  di dalam project, fungsi dari folder ini untuk menyimpan hasil dari gambar yang di upload, dari from input data produk nantinya. 


selanjutnya dalam file ini kita akan menuliskan perintah logic untuk menyimpan file gambar dan data yang kita kirim dari form input data nya. 

Coding model add_produk.php
  <?php
  /*
  fungsi untuk tambah produk
  */
  require_once './config/database.php'; //pemanggilan file koneksi database

  $target_dir = "./img-produk/";

  if (isset($_POST['add-produk'])) {

      //varibel data post
      $k01cKodebarang_v50 = $_POST['k01cKodebarang_v50'];
      $f01cNamabarang_v50 = $_POST['f01cNamabarang_v50'];
      $f02cSatuan_v50 = $_POST['f02cSatuan_v50'];
      $f03nStock_int = $_POST['f03nStock_int'];
      $f04nHargaBarang_n92 = $_POST['f04nHargaBarang_n92'];

      // proses data gambar 
      $filename = $_FILES["f05cNamaGamabar_v100"]["name"]; //nama file input
      $tempname = $_FILES["f05cNamaGamabar_v100"]["tmp_name"]; // file from pacthnya
      $file_exts = pathinfo($filename, PATHINFO_EXTENSION);
      $endcript_Name = md5(uniqid(rand(), true)) . "." . $file_exts; // encripsi file name. format file
      $folder = $target_dir . $endcript_Name;

      $f05cNamaGamabar_v100 =  $endcript_Name;

      // query insert data
      $query = "insert into tblbarang values('$k01cKodebarang_v50',
                                              '$f01cNamabarang_v50',
                                              '$f02cSatuan_v50',
                                              '$f03nStock_int',
                                              '$f04nHargaBarang_n92',
                                              '$f05cNamaGamabar_v100')";


      // fungsi upload image
      if (move_uploaded_file($tempname, $folder)) {

          // fungsi save data
          $savedata = mysqli_query($koneksi, $query);

          if ($savedata) {
              $status = 'berhasil';
              $msg = "Simpan data Berhasil";
          } else {
              $status = 'error';
              $msg = "data gagal Di Simpan";
          }
      } else {
          $status = 'error';
          $msg = "Gagagl Upload Gambar, Pastikan Gambar telah Di pilih";
      }

      //mengirim data status dan pesan pada URL untuk di tampilkan di component Alert
      header("Location: ./index.php?pages=add-produk&status=$status&pesan=$msg");
  }

penjelsan coding :
  • line 5 : Pemanggilan file koneksi database
  • line 7 : pacth folder gambar untuk menyimpan gambar yang akan di upload
  • line 9 : cek jika post methodnya add-produk
  • line 12-16 : variabel data dari form input / artribut  name dari tag input nya
  • line 19-25 : fungsi untuk get file yang akan di upload
  • line 28-33 : query insert data ke dalam database Mysql
  • line 37 : fungsi upload file gambar
  • line 40 : perintah ekseskui, menjalakan query save data 
  • line 42 : cek apakan data berhasil di simpan atau tidak
  • line 55 : perintah redirect halaman ketika module add_produk ini selesai di jalankan dan mengirim varibael status dan pesan yang nantinya variabel ini akan di gunakan pada component alert.php kita buat pada step no 5

4. Buat form input data produk
seteleh selesai menambahkan route baru kita perlu membuat sebuah file yang akan di tampilkan saat route nya di panggil. 

dan buat file add_produk.php dalam folder view. pastikan nama file yang di buat sesuai denga namadari  router yang telah di buat pada step no 1, untuk coding from input data nya sperti coding berikut ini. 

Coding add_produk.php
 <?php include('./Model/add_produk.php') ?>
  <div class="container">
      <!-- pemanggilan component alert -->
      <?php include 'Alert.php'; ?>
      <div class="card">
          <div class="card-body">
              <h4 class="card-title">Tambah Produk</h4>

              <form method="POST" enctype="multipart/form-data">
                  <div class="row">
                      <div class="col-sm-6">
                          <div class="form-group">
                              <label for="kodebarang">Kode Barang</label>
                              <input type="text" id="k01cKodebarang_v50" name="k01cKodebarang_v50" class="form-control" placeholder="Kode barang">
                          </div>
                          <div class="form-group">
                              <label for="f01cNamabarang_v50">Nama Barang</label>
                              <input type="text" class="form-control" id="f01cNamabarang_v50" name="f01cNamabarang_v50" placeholder="Nama Barang">
                          </div>
                          <div class="form-group">
                              <label for="f02cSatuan_v50">Satuan</label>
                              <input type="text" class="form-control" id="f02cSatuan_v50" name="f02cSatuan_v50" placeholder="Satuan Barang">
                          </div>
                          <div class="form-group">
                              <label for="f03nStock_int">Stock</label>
                              <input type="number" class="form-control" id="f03nStock_int" name="f03nStock_int" placeholder="Stock Barang">
                          </div>
                          <div class="form-group">
                              <label for="f04nHargaBarang_n92">Harga</label>
                              <input type="number" class="form-control" id="f04nHargaBarang_n92" name="f04nHargaBarang_n92" placeholder="Harga Barang">
                          </div>
                      </div>
                      <div class="col-sm-6">
                          <div class="form-group">
                              <label for="f05cNamaGamabar_v100">Gambar produk</label>
                              <div class="input-group">
                                  <div class="custom-file">
                                      <input id="file_img" type="file" name="f05cNamaGamabar_v100">
                                      <img id="img_preview" class="rounded mx-auto d-block" src="./img-produk/img_default.png">
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="form-group">
                      <br>
                      <button type="submit" class="btn btn-primary" name="add-produk">Simpan</button>
                      <a type="button" class="btn btn-warning" href="index.php?pages=list-produk">kemabali</a>
                  </div>
              </form>
          </div>
      </div>
  </div>

  <script type="text/javascript">
      $("#file_img").change(function() {
          readURL(this);
      });

      function readURL(input) {
          if (input.files && input.files[0]) {
              var reader = new FileReader();
              reader.onload = function(e) {
                  $('#img_preview').attr('src', e.target.result);
              }
              reader.readAsDataURL(input.files[0]);
          }
      }
  </script>
penjelesan coding:
  • line 1: pemanggilan module add produk, selain di include pemanggilan file mode add produk juga bisa di tulis pada atribut action="lokasi/Nama model nya" pada tag from nya.
  • line 4 : deklarasi komponen alert
  • line 47 : pada button simpan kita beri type submit, dan atribut name ="add-produk", untuk menjalakan perintah pada model. yang telah kita jelaskan pada step n03.
  • line 55-69 : fungsi javascript untuk menampilkan gambar yang kita pilih sebelum di upload, dan pastikan pada index.php awal, telah memanggil atau menggimport javascript dari cdn nya
lalu save dan jalankan programnya untuk memastikan tidak ada error pada program. 

gambar form input


5.Membuat Component Alert


langkah selanjut nya kita perlu membuat sebuah component alert untuk memberikan notifikasi atau pemberitahuan, ketika kita berhasil atau gagal menyimpan data. dan dengan membuat alert ini menjadi sebuah komponent maka kita dapat menggunakan nya berulang kali. 
buat file baru dalan folder View dan beri nama Alert.php

Coding Komponen Alert.php
  <?php

  $pesan = "";
  $status = "";
  $Alert_type = "";

  if (isset($_GET['status'])) {

      $pesan = $_GET['pesan'];
      //filter status untuk type class alert
      $status = $_GET['status'];
      switch ($status) {
          case 'berhasil':
              $Alert_type = "alert-success";
              break;
          case 'gagal':
              $Alert_type = "alert-danger ";
              break;
          default:
              $Alert_type = "alert-warning";
              break;
      }

      // component alert bootstrap
      $alert = '<div class="alert ' . $Alert_type . ' alert-dismissible fade show" role="alert">
                     <strong>' . $status . '</strong> ' . $pesan . '
                     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>';

      echo $alert;
  }

penjelasan Coding
  • line 3-4 : deklarasi variabel untuk menampung status, pesan, dan type alert
  • line  7 : fungsi GET, variabel status yang kita kirim dari model ad_produk, pada fungsi redirect halaman setelah model add produk selesai di eksekusi.
  • line 12-22 : menentukan jenis alert yang akan di tampilkan dari status yang di dapat
  • line 25-29 : membuat view alert,   bawaan bootstrap, untuk jenis alert pada bostrap bisa di lihat langsung saja pada halam dokumentasi resminya. bootstrap.com

jika aemua step telah selesai, lalu save dan jalakan program nya, jika tidak ada error dan keselahan sesuai dengan step-step di atas maka hasil akhir nya seeprti berikut ini. 

Demo Run Aplikasi

jika semua berjalan dengan benar maka di dalam tabel produk akan terisi satu data baru dan, dalam folder img-produk akan terdapat file gamabar yang kita upload dengan nama yang telah kita encriptsi.

sampi disini kita telah berhasil menyelesaikan  modul Create data dari Modul CRUD php dengan database MySql. pada Tutorial CRUD PHP part #2 : Crate Input Data Php dan MySql, dan membuat fungsi insert data ke database mysql dengan php serta mengupload file dengan php,  

selanjut nya kita akan masuk ke modul Read pada Module CRUD PHP dan database Mysql. 
pada part #3.

Tutorial Part # 3 : Menampilkan data PHP dan Mysql

Jika ada pertanyaan, masukan dan saran mengenai postingan ini bisa berikan di kolom Komentar..
Sekian Dan Terima kasih...

#Happy Coding

Incoming search terms:
  • Belajar PHP dan Mysql
  • Tutorial Bahasa Pemrograman PHP
  • Tutorial PHP dan Mysql Bahasa Indonesia
  • Tutorial Belajar PHP dan Mysql 
  • CRUD PHP MySql
  • CRUD Mysql database dan PHP
  • CRUD PHP dengan database  Mysql
  • Create data Php MySql
  • Input data Php dan MySql
  • Insert data Php dan MySql
  • Upload gambar PHP
  • Upload File PHP


Tags: Belajar PHP dan Mysql,Tutorial Bahasa Pemrograman PHP, trading, Tutorial PHP dan Mysql Bahas Indonesia ,Tutorial Belajar PHP dan Mysql,crypto currentsi, membuat web dinamis di PHP, investasi,CRUD PHP MySql,CRUD Mysql database dan PHP, CRUD PHP dengan database  Mysql,create data php mysql, forex, Upload file php, input data php dan mysql, investasi saham, upload gambar php , creat data in php

0 Response to "Tutorial CRUD PHP part #2 : Create Input Data PHP dan MySql"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel