Cara Menambahkan Data Array dengan PHP dan Mysql

Cara Menambahkan Data Array dengn PHP dan MySQL
0 0
Read Time:8 Minute, 12 Second

Cara Menambahkan Data Array dengan PHP dan Mysql– Hallo semua kembali lagi di tutorial iniilmu, kali ini kita akan membahas mengenai cara menambahkan data array dengan php dan mysql.

pada tutorial sebelumnya kita telah membahas mengenai cara menambahkan text field secara dinamis dengan javascript. apakah kalian sudah membaca dan mencoba nya?, saya harap kalian sudah membaca dan sudah mencoba nya, karena tutorial kali ini berhubungan dengan tutorial tersebut.

Sebelum masuk ke dalam pembahasan nya, alangkah baiknya kita mengetahui terlebih dahulu apa sih array itu?

Menurut Wikipedia, Array atau larik merupakan sebuah tipe data terstruktur yang dapat menyimpan banyak data dengan suatu nama yang sama dan menempati tempat di memori yang berurutan secara kontigu serta bertipe data sama.

Mungkin penjelasan singkat diatas dapat menambah pengetahun kalian mengenai array, langsung saja kita ke tutorial nya, ikuti langkah-langkah berikut ini.

Langka Pertama

Buatlah sebuah database, disini saya membuat database dengan nama barang, kemudian buat lah tabel dengan atribut id_barang dan nama barang, seperti gambar dibawah ini:

Stuktur tabel barang

jika ingin cepat silahkan copy kan query dibawah ini ke phpmyadmin kalian.

-- phpMyAdmin SQL Dump
-- version 4.9.0.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 02 Des 2020 pada 07.55
-- Versi server: 10.3.16-MariaDB
-- Versi PHP: 7.3.6

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `barang`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `barang`
--

CREATE TABLE `barang` (
  `id_barang` int(11) NOT NULL,
  `nama_barang` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `barang`
--

INSERT INTO `barang` (`id_barang`, `nama_barang`) VALUES
(1, 'Buku'),
(2, 'Pensil'),
(3, 'Pulpen'),
(4, 'Penghapus');

--
-- Indexes for dumped tables
--

--
-- Indeks untuk tabel `barang`
--
ALTER TABLE `barang`
  ADD PRIMARY KEY (`id_barang`);

--
-- AUTO_INCREMENT untuk tabel yang dibuang
--

--
-- AUTO_INCREMENT untuk tabel `barang`
--
ALTER TABLE `barang`
  MODIFY `id_barang` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Langkah Kedua

Buat folder di dalam folder htdocs kalian, disini saya membuat foder dengan nama input_array. Kemudia buka folder tersebut ke dalam text editor kalian masing-masing.

Langkah Ketiga

Buat file config.php , kemudian copykan code dibawah ini:

<?php 
$con = mysqli_connect('localhost','root','','barang')or die(mysqli_error($con));
if(!$con){
    echo "Koneksi Gagal";
}
?>

Langkah keempat

Buat file index.php, kemudian copykan code dibawah 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://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Iniilmu.com</title>
</head>

<body>
    <div class="container-fluid">
        <div class="card" style="width: 50%;margin-top:10em;margin-left:20em">
            <div class="card-body">
                <h5 class="card-title text-center">TUTORIAL INPUT ARRAY</h5>
                <a href="tambah_barang.php"><button style="margin-bottom: 2em;" type="button" class="btn btn-success">+ Tambah</button></a>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Nama Barang</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        include "config.php";
                        $no=1;
                        $sql = mysqli_query($con, "SELECT * FROM barang order by nama_barang ASC") or die(mysqli_error($con));
                        while ($dt = mysqli_fetch_array($sql)) {
                        ?>
                            <tr>
                                <th scope="row"><?php echo $no++ ?></th>
                                <td><?php echo $dt['nama_barang'] ?></td>
                            </tr>
                        <?php
                        }
                        ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

</html>

Penjelasan:

<?php
                        include "config.php";
                        $no=1;
                        $sql = mysqli_query($con, "SELECT * FROM barang order by nama_barang ASC") or die(mysqli_error($con));
                        while ($dt = mysqli_fetch_array($sql)) {
                        ?>
                            <tr>
                                <th scope="row"><?php echo $no++ ?></th>
                                <td><?php echo $dt['nama_barang'] ?></td>
                            </tr>
                        <?php
                        }
                        ?>

perintah diatas berfungsi untuk menampilkan data yang ada pada database ketampilan tabel di html. dengan memamnggil file config.php dengan cara include “config.php”.

Kemudian membuat perintah untuk menampilkan data dengan cara menuliskan query “SELECT * FROM barang order by nama_barang ASC” yang akan di eksekusi dengan perintah mysqli_query.

hasil eksekusi query tersebut akan ditampilkan berupa data array dengan perintah “mysqli_fetch_array()”.

Menampilkan data dari database mysql
<a href="tambah_barang.php"><button style="margin-bottom: 2em;" type="button" class="btn btn-success">+ Tambah</button></a>

Button tambah berfungsi ketika button tersebut di klik akan mengarakan user ke halaman tambah_barang.php.

Langkah Kelima

Buatlah file tambah_barang.php, isi dari file ini bisa kalian ambil pada tutorial sebelumnya yaitu pada tutorial Cara Menambah Text Field dengan Javascript. jika kalian mengambil code dari tutorial seblumnya ada beberapa atribut yang pelu kalian tambahkan diantara.

<form method="POST" action="proses_tambah.php">

fungsi dari code diatas adalah untuk mengirim data dari form ke halaman proses tambah dengan method post.

 <input type="text" name="nama_barang[]" class="form-control" id="nama_barang" placeholder="Nama Barang" aria-describedby="nama_barang">

pada text field juga perlu di perhatikan, karena kita akan membuat input array maka disetiap name perlu ditambahkan tanda “[]” seperti contoh diatas “nama_barang[]”, discript javascipt untuk membuat form dinamis nya jangan lupa ditambahkan juga ya.

<button type="submit" name="submit" class="btn btn-primary">Submit</button>

button submit kita berikan name untuk proses validasi dihalaman prosesnya nanti,jadi total keselurahan code di halaman tambah seperti dibawah 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://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Iniilmu.com</title>
</head>

<body>
    <div class="container-fluid">
        <div class="card" style="width: 50%;margin-top:10em;margin-left:20em">
            <div class="card-body">
                <h5 class="card-title text-center">TUTORIAL MENAMBAH TEXT FIELD DENGAN JAVASCRIPT</h5>
                <form method="POST" action="proses_tambah.php">
                    <div class="form-group">
                        <label for="nama_barang">Nama Barang</label>
                        <input type="text" name="nama_barang[]" class="form-control" id="nama_barang" placeholder="Nama Barang" aria-describedby="nama_barang">
                    </div>
                    <button style="margin-bottom: 2em;" onclick="tambah_form(); return false;" type="button" class="btn btn-success">+ Tambah</button>
                    <input type="hidden" id="idf" value="1">
                    <div id="form"></div>
                    <button type="submit" name="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <script language="javascript">
        function tambah_form() {
            var idf = document.getElementById("idf").value;
            var stre;
            stre = "<div id='srow" + idf + "'><button class='btn btn-danger' onclick='hapusElemen(\"#srow" + idf + "\"); return false;'>- Hapus</button><div class='form-group'><label for='nama_barang'>Nama Barang</label><input type='text' class='form-control' id='nama_barang' placeholder='Nama Barang' autocomplete='off' name='nama_barang[]' autocomplete='off'></div></div>";
            $("#form").append(stre);
            idf = (idf - 1) + 2;
            document.getElementById("idf").value = idf;
        }

        function hapusElemen(idf) {
            $(idf).remove();
        }
    </script>
</body>

</html>

coba klik button tambah kalian, maka akan tampil seperti gambar

Text field dinamis dengan javascript

Langkah keenam

buat file proses_tambah.php, kemudian copykan code dibawah ini:

<?php 
include "config.php";
if (isset($_POST['submit'])) {
    $jum = count($_POST['nama_barang']);
    for ($i=0; $i < $jum; $i++) { 
        $nama_barang = $_POST['nama_barang'][$i];
        $sql = mysqli_query($con,"INSERT INTO barang VALUES('','$nama_barang')") or die(mysqli_error($con));
    }

    echo "<script language='javascript'>alert('Data Berhasil Disimpan'); document.location='index.php';</script>";
}
?>

if(isset($_POST[‘submit’])), berfungsi untuk memvalidasi, jika button submit ditekan atau di klik maka akan menjalankan perintah didalamnya.

count($_POST[‘nama_barang’]) berfungsi untuk mencek banyak nya data yang ada didalam array, hasilnya akan disimpan kedalam variabel $jum, yang akan menentukan jumlah perulangan yang akan dilakukan.

$nama_barang = $_POST[‘nama_barang’][$i] setiak name akan diberikan index untuk membedakan data satu dengan data yang lainnya.

 $sql = mysqli_query($con,"INSERT INTO barang VALUES('','$nama_barang')") or die(mysqli_error($con));

merupakan query yang digunakan untuk menambahkan data ke dalam database.

sekian pembahasan tutorial kali ini, selamat mencoba.

jangan lupa untuk memberikan saran kepada blog saya agar bisa memberikan tutorial yang lebih bermanfaat untuk kalian.

kalian bisa download source code nya disini.

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Cara Menambah Text Field dengan Javascript Previous post Cara Menambah Text Field dengan Javascript
Penyeleksian Kondisi Pada C++ Next post Tutorial C++ #05 Perintah Penyeleksian Kondisi Pada C++

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published. Required fields are marked *