Cara Mendapatkan Field Berdasarkan Id Menggunakan AngularJs

28/01/2019    Shelli Ripati    155     Website

Pembahasan kali ini saya akan bahas tentang  Cara Mendapatkan Field Berdasarkan Id Menggunakan AngularJs. Dimana field yang di dapat berdasarkan kode atau id yang kita pilih dalam tag option. Studi kasus ini sering kita jumpai ketika kita akan membuat website jenis e-commerce. Seperti halnya ketika kita ingin melakukan input penjualan dalam sebuah form lalu memilih kode barang maka harga barang akan tercetak otomatis berdasarkan kode barang yang kita pilih.

Langkah pertama Cara Mendapatkan Field Berdasarkan Id Menggunakan AngularJs yaitu kita akan membuat terlebih dahulu struktur htmlnya seperti berikut ini.

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <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" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>

 

    <title>Cara Mendapatkan Field Berdasarkan Id Menggunakan AngularJs</title>

  </head>

  <body ng-app="myApp" ng-controller="myCtrl">

  <div class="container">

      <div class="row">

        <div class="col-12 mb-2">

            <h2>Cara Mendapatkan Field Berdasarkan Id Menggunakan AngularJs</h2>

            <label for="validationCustom04">Produk</label>

            <select name="" id="" class="form-control" ng-model="produk_kode" ng-change="changeProduct()">

                <option value="">-Pilih-</option>

                <option ng-repeat="dp in dataProduk" value="{{dp.id}}" >{{dp.kode_produk}} => {{dp.nama_produk}}</option>

            </select>

        </div>

        <div class="col-12 mb-2">

            <label for="validationCustom04">Harga</label>

            <input type="text" disabled="disabled" class="form-control" id="validationCustom04" ng-model="harga_jual" required>

        </div>

      </div>

  </div>

  </body>

</html>

Dan jika sudah kita tinggal membuat sebuah fungsi didalam controller untuk menampilkan data barang di dalam tag option dan fungsi untuk menampilkan harga.

<script>

    var app = angular.module("myApp",[]);

    app.controller("myCtrl", function($scope, $http){

        $scope.getDataDP = function(){

            $http.get('product_getdata.php').then(function(response){

                $scope.dataProduk = response.data;

            });

        };

        $scope.getDataDP();

        $scope.changeProduct = function(){

            $scope.harga_jual = $scope.dataProduk[$scope.produk_kode-1].harga_jual;

        };

    });

  </script>

 

Jika sudah selesai maka kita tinggal membuat file 'product_getdata.php' yang isinya adalah koneksi database dan request data barang ke database.

<?php

 

$localhost = "localhost";

$user = "dumet";

$pass = "school";

$dbName = "test";

 

$conn = mysqli_connect($localhost, $user, $pass, $dbName);

 

if(!$conn){

               die.("Connection failed : ".mysqli_connect_error());

}

$query = $conn->query("SELECT produk .*,  kategori_produk.nama_kategori, jns_pelanggan.nama_jnspelanggan

                                               FROM ((produk

                                              INNER JOIN kategori_produk ON produk.kategori_kode = kategori_produk.id)

                                              INNER JOIN jns_pelanggan ON produk.jnspelanggan_kode = jns_pelanggan.id)");

$posts = [];

if($query->num_rows > 0) :

               while($row = $query->fetch_assoc()) :

                              extract($row);

                              $data = array(

                                             'id' => $id,

                                             'nama_kategori' => $nama_kategori,

                                             'nama_jnspelanggan' => $nama_jnspelanggan,

                                             'kode_produk' => $kode_produk,

                                             'nama_produk' => $nama_produk,

                                             'harga_jual' => $harga_jual,

                                             'harga_promo' => $harga_promo,

                                             'stok' => $stok,

                                             'ukuran' => $ukuran,

                                             'warna' => $warna,

                                             'bahan' => $bahan,

                                             'gambar' => $gambar

                              );

                              #push data

                              array_push($posts, $data);

               endwhile;

               #output json

               echo json_encode($posts);

else:

               echo json_encode(array(

                              'message' => 'No Posts Found'

               ));

endif;    

?>

 

Nah jika sudah selesai maka akan tampil seperti gambar di bawah ini.

Demikian artikel tentang Cara Mendapatkan Field Berdasarkan Id Menggunakan AngularJs. Semoga bermanfaat.

 

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More