Cara Membuat Multiple Input Data Dengan AngularJs

23/01/2019    Shelli Ripati    76     Website

Multiple input adalah suatu proses simpan data dengan jumlah data yang banyak dalam satu kali proses. Dan pada kesempatan kali ini saya akan membahas multiple input pada artikel tentang Cara Membuat Multiple Input Data Dengan AngularJs.

Langkah pertama Cara Membuat Multiple Input Data Dengan AngularJs yaitu kita akan membuat desain database eperti pada gambar di bawah ini.

Cara Membuat Multiple Input Data Dengan AngularJs

Dan langkah selanjutnya saya akan membuat struktur html yang berisi form input dan table untuk menampung list data seperti berikut ini dengan menggunakan css dari bootstrap 4.

<!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>AngularJs</title>

  </head>

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

    <div class="container">

      <div class="row">

        <div class="col-md-6 border-right">

          <h1>List Barang</h1>

          <table class="table">

            <thead>

              <tr>

                <th scope="col">#</th>

                <th scope="col">Kode</th>

                <th scope="col">Nama</th>

              </tr>

            </thead>

            <tbody>

              <tr ng-repeat="dn in dataBarang">

                <th scope="row">{{$index+1}}</th>

                <td>{{dn.kode}}</td>

                <td>{{dn.nama}}</td>

              </tr>

              <tr>

                <th scope="row" colspan="3">

                  <button type="submit" class="btn btn-primary" ng-click="saveData()">Simpan</button>

                </th>

              </tr>

            </tbody>

          </table>

        </div>

        <div class="col-md-6">

          <h1>Tambah Barang</h1>

          <form>

          <div class="form-group">

            <label for="">Kode Barang</label>

            <input type="text" class="form-control" ng-model="kode" id="" placeholder="kode Barang">

          </div>

          <div class="form-group">

            <label for="">Nama Barang</label>

            <input type="text" class="form-control" ng-model="nama" id="" placeholder="Nama Barang">

          </div>

          <button type="submit" class="btn btn-success" ng-click="addData()">Tambah</button>

        </form>

        </div>

      </div>

    </div>

  </body>

</html>

Untuk struktur di atas saya sudah memberikan beberapa directif yang diperlukan. Dan dilanjutkan untuk membuat script angularjs seperti di bawah ini.

<script>

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

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

        $scope.dataBarang=[];

        $scope.addData = function(){

          $scope.dataBarang.push({

              kode : $scope.kode,

              nama :$scope.nama

          })

          $scope.kode='';

          $scope.nama='';

        };

        listdata = $scope.dataBarang;

        $scope.saveData = function(){ 

          $http.post('add.php', listdata).then(function(response){

            $scope.pesan = response.data;

            alert($scope.pesan);

            $scope.dataBarang=[];

          });

        };

      })

  </script>

 

Teman-teman perhatikan untuk script di atas. Di dalam controller angularjs saya membuat dua buah fungsi yang nanti akan saya gunakan untuk simpan data. Sebelum melakukan simpan data, kita butuh mengumpulkan data yang akan di simpan dalam satu ruang. Dan disini saya tampung dengan menggunakan array dari variable scope dataBarang yang kemudian akan tampil di dalam table list barang. Barang akan di tambahkan dengan menggunakan metode push yang mana fungsi ini akan di jalankan ketika melakukan klik pada tombol tambah yang sudah diberikan direktif on-click=addData() maka fungsi addData akan di jalankan. Dan kemudian jika data yang ingin di input sudah terkumpul maka ketika melakukan klik pada tombol simpan yang sudah diberika direktif on-click=saveData() maka fungsi tersebut akan di jalankan dengan perintah simpan yang dilakukan di dalam file add.php seperti di bawah ini.

<?php

$localhost = "localhost";

$user = "dumet";

$pass = "school";

$dbName = "webmaster";

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

if(!$conn){

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

}

$data = json_decode(file_get_contents("php://input"));

$sql = "INSERT INTO shelli_barang (kode,nama) VALUES";

$values="";

foreach ($data as $key => $dn) {

               $kode = $dn->kode;

               $nama = $dn->nama;

               $values .= '("'.$kode.'","'.$nama.'"),';

}

$values = rtrim($values, ',');

$query = $sql.$values;

if(mysqli_query($conn, $query)){

               $pesan = "Data Berhasil Di Simpan";

}else{

               $pesan = "Data Gagal Di Simpan";

}

echo $pesan;

?>

 

Jika lihat tampilan di browser maka akan tampak seperti pada gambar di bawah ini.

Cara Membuat Multiple Input Data Dengan AngularJs

Demikian artikel tentang Cara Membuat Multiple Input Data Dengan 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