Assalamu alaikum Wr. Wb
Salam Pinter Bareng Komputer, ...zero bit...
Dalam artikel kali ini saya ini mencontohkan pembuatan halaman View untuk proses Tambah Data Produk Baru. Halaman ini nantinya secara tampilan akan menggunakan Bootstrap 5 Online.
Berikut langkah - langkah untuk membuat halaman Tambah Data Produk Baru :
- Buka projek Laravel kalian menggunakan VSCode.
- Buka halaman index.blade.php kemudian tambahkan script berikut untuk membuat tombol Tambah Data Baru di atas Tampil Data Produk Aktif.
- Buka file View dengan nama add.blade.php dalam subfolder produk yang telah dibuat sebelumnya. Jika file add.blade.php belum kalian dibuat, silakan dibuat dulu mengikuti petunjuk dalam artikel sebelumnya ( Menampilkan Data Produk ).
- Tambahkan script dasar sebuah halaman Bootstrap 5 seperti di bawah ini ( bisa copy - paste dari website resmi Bootstrap 5 ) :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tambah Data Produk Baru</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html> - Di dalam tag Body tambah script berikut untuk membuat tampilan input data produk baru :
- Tambahkan script route di dalam file web.php seperti berikut ini :
Route::get('/produk/create', [ProdukController::class, 'create']); - Buka file ProdukController.php kemudian buat sebuah function baru dengan nama Create seperti di bawah ini :
Catatan://function utk menampilkan jendela input data produk barupublic function create() { return view('produk.add'); }
Script di atas digunakan untuk memanggil/menampilkan halaman view dengan nama add yang berada di dalam folder produk. - Untuk melihat hasilnya silakan buka browser kemudian ketikkan : http://localhost:8000/produk/create
Tampilan Jendela Tambah Produk Baru
<div class="container"> <div class="row"> <div class="col"><a href="{{url('produk/create')}}" class="btn btn-sm btn-primary mt-4 mb-2"> <i class="fa fa-plus" aria-hidden="true"></i> Tambah Data Produk Baru </a><div class="card"> <div class="card-header text-white bg-primary">Data Produk Aktif</div>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tambah Data Produk Baru</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body><form method="post" action="{{ url('produk/save') }}">@csrf<div class="container-fluid"> <div class="row"> <div class="col-12 d-flex justify-content-center"> <div class="card text-bg-light mb-3" style="width: 400px; margin-top:100px;"> <div class="card-header bg-primary text-white">TAMBAH DATA PRODUK</div> <div class="card-body"> <div class="mb-3"> <label for="namaproduk" class="form-label text-primary">Nama Produk</label> <input type="text" class="form-control" id="namaproduk"name="namaproduk"value="Jas Hujan Ponco"> </div> <div class="mb-3"> <label for="deskripsi" class="form-label text-primary">Deskripsi Produk</label> <textarea class="form-control" id="deskripsi"name="deskripsi"rows="3">Dapat digunakan utk melindungi tubuh saat berkendara di bawah hujan</textarea> </div> <div class="mb-3"> <label for="harga" class="form-label text-primary">Harga Produk (Rp)</label> <input type="number" min="0" max="1000000" class="form-control" id="harga"name="harga"value="0"></input> </div> </div> <div class="card-footer text-center"> <button type="submit" class="btn btn-primary btn-sm">Save</button> <button type="reset" class="btn btn-danger btn-sm">Cancel</button> </div> </div> </div> </div> </div> </form><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body> </html>
Semoga artikel ini bermanfaat.
Postingan
