Tutorial CRUD PHP part #2 : Create Input Data PHP dan MySql
 |
| Tutorial CRUD PHP part #2: Create Input data Kedalam Database Mysql |
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