Membuat Form Transaksi dari penerapan ERD menggunakan MySQL dan Laravel
Diagram Entity-Relationship Diagram (ERD) yang ditampilkan di bawah ini menggambarkan hubungan many-to-many antara entitas pembelian barang dan entitas suplier dalam perancangan basis data.
ERD adalah alat visual yang digunakan untuk menggambarkan struktur data dan hubungan antara entitas dalam sebuah basis data. Dalam ERD ini, terlihat bahwa banyak pembelian barang dapat berasal dari banyak suplier, dan sebaliknya, banyak suplier dapat memasok barang ke banyak pembelian. Ini adalah hubungan many-to-many yang umum dalam dunia nyata.
Dalam teori perancangan basis data tradisional, seperti yang dijelaskan dalam buku Elmasri tentang basis data, ERD seperti ini memerlukan modifikasi untuk mengimplementasikannya dalam bentuk tabel (record structure) dalam sebuah basis data relasional. Hal ini disebabkan oleh fakta bahwa dalam sebuah record di tabel pembelian, Anda tidak dapat memiliki lebih dari satu nilai (multi-valued).
Tetapi dalam basis data relasional tradisional, Anda biasanya akan memerlukan tabel tambahan untuk mengatasi hubungan many-to-many seperti yang terlihat dalam ERD ini. Ini seringkali menghasilkan polemik antara konsep teori dan implementasi praktis dalam dunia nyata.
Jadi, penting untuk memahami konsep dasar perancangan basis data, seperti ERD dan hubungan many-to-many, serta mempertimbangkan perbedaan antara teori dan praktik dalam mengimplementasikan basis data yang sesuai dengan kebutuhan bisnis atau proyek tertentu.
Komposit Primary Key MySQL
Dalam konteks pengelolaan basis data menggunakan sistem manajemen basis data (DBMS) sederhana seperti MySQL, ERD yang telah diperlihatkan sebelumnya dapat melibatkan konsep yang penting yang dikenal sebagai "komposit primary key" (kunci utama gabungan).
ERD tersebut, yang menggambarkan hubungan many-to-many antara entitas pembelian barang dan entitas suplier, dalam MySQL, akan diimplementasikan sebagai sebuah tabel. Dalam teori perancangan basis data, ketika terdapat hubungan many-to-many seperti ini, kita memerlukan tabel perantara (junction table) untuk menghubungkan entitas yang berhubungan.
Berikut adalah ERD dalam bentuk tabel :
Berikut adalah ERD dalam bentuk tabel :
- Tabel DetilPembelian, primary key ada 2 yaitu, KdPembelian & KdBarang. Komposit primary key mencegah duplikasi kombinasi primary key (misalnya, kode pembelian + kode barang). Ini memastikan jumlah barang yang sama hanya diinput satu kali, misalnya, kode barang "kecap" hanya diinput sekali dengan jumlah 2, bukan dua kali. Namun, dalam praktiknya, seperti di supermarket dengan barcode scanning, ini bisa menjadi masalah. Solusinya adalah mungkin menambahkan kunci baru untuk mengatasi masalah ini dan mencegah penolakan saat mencoba memasukkan barang yang sama yang sudah discan sebelumnya.
- Tabel Pembelian, primary key yaitu KdPembelian.
- Tabel Barang, primary key yaitu KdBarang.
- Tabel Suplier, primary key yaitu KdSuplier.
Berikut tampilan relasi antar tabel pada PhpMyAdmin MySQL :
dengan database sebagai berikut :
Jadi dari pada kasir diminta mengumpulkan jumlah kode barang yang sama kemudian ditotal, kasir bisa langsung menscan barang yang sama tersebut berkali-kali. Tabel transaksinya kira-kira berikut ini:
Tentu saja dengan cara komposit primary key (KdPembelian+KdBarang) tanpa ID sistem akan menolak, tapi dengan cara ini barang yang sama akan diberikan ID yang berbeda.
Membuat Form Transaksi (CRUD) di Laravel dan MySQL
Di tutorial berikutnya, kita akan mengambil ide dari diagram ERD yang sudah kita buat sebelumnya. Ide ini akan kita terapkan dalam membuat sebuah formulir transaksi menggunakan bahasa pemrograman Laravel dan database MySQL.1. CREATE PROJECT
Pada tahap pertama, jalankan Win + R dan ketik cmd kemudian Enter. Setelah itu buatlah project laravel baru bernama FormTransaksi dengan command berikut :
composer create-project laravel/laravel FormTransaksi
tunggu hingga instalasi selesai.
2. BUAT MODEL DAN MIGRATION
Langkah pertama adalah mengatur koneksi pada database Laravel dengan database yang telah kita buat. Kita mengubah database di Laravel melalui file .env
Pada cmd ketik
php artisan make::model DetilPembelian -m
Perintah di atas, digunakan untuk membuat sebuah Model baru dengan nama DetilPembelian dan jika teman-teman perhatikan, di atas kita menambahkan flag -m yang artinya kita akan membuat file Migration-nya sekaligus
Selanjutnya buka file migrations yang telah dibuat di folder database/migrations/tanggal_create_detil_pembelians.php dan masukkan coding seperti dibawah
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('detil_pembelians', function (Blueprint $table) {
$table->id();
$table->string('KdPembelian');
$table->string('KdBarang');
$table->integer('jumlah');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('detil_pembelians');
}
};
Selanjutnya buka file Model yang telah dibuat di app/Models/DetilPembelian.php kemudian tambahkan sebagai berikut
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class DetilPembelian extends Model
{
use HasFactory;
protected $fillable = [
'KdPembelian',
'KdBarang',
'jumlah'
];
}
Buka kembali cmd dan jalankan migration menggunakan command :
php artisan migrate
Setelah di migrate teman-teman bisa cek pada database bahwa Migrations telah berhasil dan tabel baru telah ditambahkan di PhpMyAdmin
3. MEMBUAT CREATE, READ, UPDATE, & DELETE DI LARAVEL
Selanjutnya kita akan membuat CRUD di Laravel menggunakan MVC (Model-View-Controller).
Jadi, di Laravel, ada yang namanya MVC, singkatan dari Model-View-Controller. Ini kayak tiga temen yang bantu kita atur bagaimana aplikasi kita kerja.
- Model itu kayak otaknya. Dia ngurusin data dan aturan bisnis. Misalnya, kalo kita punya data pelanggan, Model nyimpen data pelanggan dan tahu kapan data itu harus diubah atau diambil.
- View ini kayak tampilan depannya. View itu yang nampilin informasi ke user, jadi kalo ada halaman web atau tampilan data, View yang urusin penampilannya.
- Controller ini kayak pengendali. Dia nyambungin Model dan View. Jadi kalo user klik sesuatu di tampilan, Controller yang tangani apa yang harus dilakuin dengan data dari Model dan bagaimana itu ditampilin ke View.
Intinya, MVC ini bantu kita biar aplikasi jadi lebih terstruktur, gampang di-maintain, dan enak buat dikembangin. Jadi, setiap temennya punya peran masing-masing dalam bikin aplikasi Laravel kita jadi oke.
Teman-teman silakan ikuti coding saya berikut, buatlah file DpController.php di app/Http/Controllers/ kemudian isi coding berikut
<?php
namespace App\Http\Controllers;
use App\Models\DetilPembelian;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
class DpController extends Controller
{
public function index(): View
{
$dp = DetilPembelian::latest()->paginate(5);
return view('detil.index', compact('dp'));
}
public function create(): View
{
return view('detil.create');
}
public function store(Request $request): RedirectResponse
{
$this->validate($request, [
'KdPembelian' => 'required',
'KdBarang' => 'required',
'jumlah' => 'required',
]);
DetilPembelian::create([
'KdPembelian' => $request->KdPembelian,
'KdBarang' => $request->KdBarang,
'jumlah' => $request->jumlah,
]);
return redirect()->route('detil.index')->with(['success' => 'Data Transaksi Ditambahkan!']);
}
public function edit(string $id): View
{
$dp = DetilPembelian::findOrFail($id);
return view('detil.edit', compact('dp'));
}
public function update(Request $request, $id): RedirectResponse
{
$this->validate($request, [
'KdPembelian' => 'required',
'KdBarang' => 'required',
'jumlah' => 'required',
]);
$dp = DetilPembelian::findOrFail($id);
$dp->update([
'KdPembelian' => $request->KdPembelian,
'KdBarang' => $request->KdBarang,
'jumlah' => $request->jumlah,
]);
return redirect()->route('detil.index')->with(['success' => 'Data Transaksi Berhasil Diubah, Yay!']);
}
public function destroy($id): RedirectResponse
{
$dp = DetilPembelian::findOrFail($id);
$dp->delete();
return redirect()->route('detil.index')->with(['success' => 'Data Berhasil dihapus!']);
}
}
Selanjutnya pada app/Models/DetilPembelian.php ubah coding menjadi seperti ini
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class DetilPembelian extends Model
{
use HasFactory;
protected $fillable = [
'KdPembelian',
'KdBarang',
'jumlah'
];
}
Langkah selanjutnya adalah membuat folder baru di resources/views bernama detil seperti dibawah ini
Selanjutnya pada create.blade.php isilah coding berikut. File ini berguna untuk melakukan operasi Create atau membuat data yang akan di input kedalam database
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Buat Transaksi</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body style="background: pink">
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<form action="{{ route('detil.store') }}" method="post" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label for="" class="font-weight-bold">Kode Pembelian</label>
<input type="text" class="form-control @error('KdPembelian') is-invalid @enderror" name="KdPembelian" value="{{ old('KdPembelian') }}" placeholder="Masukkan Kode Pembelian">
@error('KdPembelian')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group">
<label for="" class="font-weight-bold">Kode Barang</label>
<input type="text" class="form-control @error('KdBarang') is-invalid @enderror" name="KdBarang" value="{{ old('KdBarang') }}" placeholder="Masukkan Kode Barang">
@error('KdBarang')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group">
<label for="" class="font-weight-bold">Jumlah</label>
<input type="text" class="form-control @error('Jumlah') is-invalid @enderror" name="jumlah" value="{{ old('jumlah') }}" placeholder="Masukkan Jumlah">
@error('jumlah')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<button type="submit" class="btn btn-md btn-primary">BUAT</button>
<button type="reset" class="btn btn-md btn-warning">BATAL</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'content' );
</script>
</body>
</html>
UPDATE DI LARAVEL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Buat Transaksi</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body style="background: pink">
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<form action="{{ route('detil.update', $dp->id) }}" method="post" enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="form-group">
<label for="" class="font-weight-bold">Kode Pembelian</label>
<input type="text" class="form-control @error('KdPembelian') is-invalid @enderror" name="KdPembelian" value="{{ old('KdPembelian', $dp->KdPembelian) }}" placeholder="Masukkan Kode Pembelian">
@error('KdPembelian')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group">
<label for="" class="font-weight-bold">Kode Barang</label>
<input type="text" class="form-control @error('KdBarang') is-invalid @enderror" name="KdBarang" value="{{ old('KdBarang', $dp->KdBarang) }}" placeholder="Masukkan Kode Barang">
@error('KdBarang')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group">
<label for="" class="font-weight-bold">Jumlah</label>
<input type="text" class="form-control @error('Jumlah') is-invalid @enderror" name="jumlah" value="{{ old('jumlah', $dp->jumlah) }}" placeholder="Masukkan Jumlah">
@error('jumlah')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
<button type="submit" class="btn btn-md btn-primary">UBAH DATA</button>
<button type="reset" class="btn btn-md btn-warning">BATAL</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'content' );
</script>
</body>
</html>
TAMPILAN INDEX
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Form Transaksi</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body style="background: pink">
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div>
<h1 class="text-center my-4 text-white">🍮Form Transaksi Cori🍮</h1>
<hr>
</div>
<div class="card border-0 shadow-sm rounded">
<div class="card-body">
<a href="{{route('detil.create')}}" class="btn btn-md btn-success mb-3">➕Buat Transaksi</a>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Kode Pembelian</th>
<th scope="col">Kode Barang</th>
<th scope="col">Jumlah</th>
</tr>
</thead>
<tbody>
@forelse ($dp as $detil)
<tr>
<td>{{ $detil->id }}</td>
<td>{{ $detil->KdPembelian }}</td>
<td>{{ $detil->KdBarang }}</td>
<td>{{ $detil->jumlah }}</td>
<td class="text-center">
<form onsubmit="return confirm('Apakah anda yakin?');" action="{{ route('detil.destroy', $detil->id) }}" method="POST">
<a href="{{ route('detil.edit', $detil->id) }}" class="btn btn-sm btn-warning">✏ EDIT</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-danger">🗑 HAPUS</button>
</form>
</td>
</tr>
@empty
<div class="alert alert-danger">
Data Transaksi Belum Tersedia.
</div>
@endforelse
</tbody>
{{ $dp->links() }}
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
//message with toastr
@if(session()->has('success'))
toastr.success('{{ session('success') }}', 'BERHASIL!');
@elseif(session()->has('error'))
toastr.error('{{ session('error') }}', 'GAGAL!');
@endif
</script>
</body>
</html>
MENGATUR ROUTE DI LARAVEL
Route (rute) dalam Laravel adalah mekanisme yang digunakan untuk menentukan bagaimana permintaan HTTP dari pengguna akan ditangani oleh aplikasi web kita. Secara singkat, rute berfungsi sebagai peta yang menghubungkan URL yang diakses oleh pengguna dengan kode yang akan dijalankan oleh aplikasi.
Contohnya, jika pengguna mengakses URL "https://contoh.com/artikel", rute akan menentukan bahwa permintaan tersebut harus ditangani oleh sebuah controller tertentu yang mungkin akan menampilkan daftar artikel.
Jadi, intinya, route memungkinkan kita untuk mengarahkan permintaan HTTP ke fungsi-fungsi tertentu dalam controller kita, sehingga kita bisa mengontrol bagaimana aplikasi kita merespons berbagai jenis permintaan yang datang dari pengguna. Ini membuat pengembangan web menjadi lebih terstruktur dan mudah dipahami.
silakan buka routes/web.php
kemudian ubah coding menjadi seperti ini
<?php
use Illuminate\Support\Facades\Route;
Route::resource('/detil', \App\Http\Controllers\DpController::class);
// Route::get('/', function () {
// return view('welcome');
// });
Menjalankan Laravel
buka http://localhost:8000/detil dari browser kalian. Hasilnya jika berhasil akan muncul seperti ini :
Menambahkan data dengan menekan tombol Buat Transaksi
Mengubah data yang telah ada menjadi data baru dengan tombol Edit
Menghapus data yang sudah tersedia dengan tombol Hapus
VIDEO DEMONSTRASI CRUD DI LARAVEL :
ABOUT THE AUTHOR
Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible
