Cara menggunakan menghubungkan json dengan html

Mengakses data JSON Menggunakan Javascript

pada posting Sebelumnya saya sudah sharing cara mengakses JSON dengan php  kali ini saya akan sharing cara mengakses JSON menggunakan javascript, untuk projectnya kita menggunakan project yang sama, kita cuma menambahkan file baru yaitu produk.html

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <title>Javascript - JSON</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


</head>
<body class="container">
  <h2>Daftar Produk</h2><hr>

  <div class="row">
    <div class="input-group mb-3">
      <input type="text" id="produkname" class="form-control" placeholder="Cari Produk">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" id="btn-refresh">Refresh <i class="fa fa-refresh"></i></button>
      </div>
    </div> 
  </div>

  <div class="row" id="daftar-produk">        

  </div>

  <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

  <script src="script.js"></script>
</body>
</html>

dan kita tambahkan javascript seperit dibawah ini dengan nama script.js


this.getAllProduk();

$('#produkname').on('keyup', function(e){
    if(e.keyCode == 13)
    {        
        let namaproduk = $('#produkname').val(); 
        $.getJSON('data.json', function(data){
            let produk = data.produk;
            let content = '';

            $('#daftar-produk').html(content);

            $.each(produk, function(i, data){                
                var S = data.namaproduk.toLowerCase();
                if(S.includes(namaproduk.toLowerCase())){
                    $('#daftar-produk').append('<div class="col-md-4 mb-3"><div class="card" style="width: 18rem;"><img src="img/'+ data.gambar +'" class="card-img-top" height="300px"><div class="card-body"><h5 class="card-title">'+ data.namaproduk +'</h5><p class="card-text">Harga Rp. '+ data.harga +'</p><a href="#" class="btn btn-primary">Beli</a></div></div></div> ');
                }
            });
        });
        $('#produkname').val("");
    }
})


$('#btn-refresh').on('click', function(){
    getAllProduk();
});

function getAllProduk(){
    $('#daftar-produk').html('');
    $.getJSON('data.json', function(data){
        let produk = data.produk;

        $.each(produk, function(i, data){
            $('#daftar-produk').append('<div class="col-md-4 mb-3"><div class="card" style="width: 18rem;"><img src="img/'+ data.gambar +'" class="card-img-top" height="300px"><div class="card-body"><h5 class="card-title">'+ data.namaproduk +'</h5><p class="card-text">Harga Rp. '+ data.harga +'</p><a href="#" class="btn btn-primary">Beli</a></div></div></div> ');
        })
    });
}

dan silahkan di coba dan lihat hasilnya :D, semoga bermanfaat

Membuat Project Baru di Laravel

Setelah membahas mengenal laravel pada postingan  Sebelumnya , pada postingan kali ini saya akan sharing cara membuat project baru di laravel. Sebelum membuat project baru pastikan sudah meng-install composer laravel jika belum bisa di download  Disini . untuk IDE saya sarankan menggunakan Visual Studio Code.  Sebelum membuat project laravel, Pastikan komputer/laptop terhubung internet. Ok lansung saja kita mulai step-step membuat project baru di laravel : Buka command line di folder tempat kita akan meletakkan file project kita dengan cara klik kanan + tombol shift kemudian tuliskan command berikut : contoh disini saya akan membuat project seperti digambar berikut : Setelah command line dijalankan, tuliskan command berikut : composer create - project -- prefer - dist laravel / laravel nama_project nama project yang saya buat adalah Latihan1, setelah itu tekan enter dan tunggu proses instalasi laravel sampai selesai. Setelah proses instalasi

Laravel - Sistem Informasi Perpustakaan Sederhana Laravel

Postingan kali saya akan sharing membuat aplikasi perpustakaan sederhana menggunakan laravel 5.8, dimana terdapan menu Anggota, Kategori Buku, Daftar Buku dan Transaksi (Peminjaman/Pengembalian Buku). ok langsung saja kita buat project laravel dengan nama perpus : composer create-project --prefer-dist laravel/laravel perpus setelah create project laravel-nya selesai kita buat database melalui localhost/phpmyadmin dengan nama db_perpus, lalu kita buka project laravel dengan code editor disini saya menggunakan visual studio code. Setelah project kita buka dengan code editor, pertama kita atur koneksi database yang ada di file .env, kita rubah menjadi seperti berikut : note : untuk db_username dan db_password di sesuiakan dengan configurasi masing-masing. Selanjutnya kita tambahkan 4 buah data migration yaitu : table_anggota, table_kategori, table_buku, table_transaksi, kita buka terminal dan jalankan command berikut :  php artisan make:migration create_t

PHP MySql CRUD Dengan Konsep MVC

Pada postingan kali ini saya akan sharing cara membuat CRUD dengan php menggunakan konsep MVC, ok langsung saja buka code editor (saya menggunakan sublime text) dan buat folder baru dengan nama phpmvc didalam folder htdocs kalian dan tambah folder seperti berikut :  Setelah itu kita siapkan database di mysql, buat database dengan nama phpmvc dan tablenya seperti gambar berikut : tambahkan file config.php didalam folder app/config : <?php define('BASEURL', 'http://localhost:8181/phpmvc/public'); define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PASS', ''); define('DB_NAME', 'phpmvc'); kemudian tambahkan 3 file controller didalam folder app/controllers, yaitu Home, About, dan Mahasiswa : Home.php <?php class Home extends Controller { public function index() { $data['nama'] = $this->model('User_model')->getUser()