Cara Membuat Multiple Input Data Dengan AngularJs

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.

23 Januari 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat