Sabtu, Maret 6, 2021
Home > Contoh Kasus > Multiple Input Form Dengan Ajak di Pemrograman PHP

Multiple Input Form Dengan Ajak di Pemrograman PHP

multi

Membuat multiple input form dengan Jquery di bahasa pemrograman PHP – sering kali kita mendengar permintaan tutorial atau bagaimana cara membuat suatu form input dinamis. Dalam hal ini user mampu menambahkan atau mengurangi proses input pada suatu aplikasi. Sering kita sebut dengan multiple form atau form dinamis. Fungsi dari form dinamis ini adalah menyimpan banyak data dengan satu kali proses. Data yang dimaksud misalnya, hobi, Pengalaman, dll yang membutuhkan lebih dari satu form input pada sebuah aplikasi.

Pada kasus kali ini admin akan membagikan source code multiple form dengan menggunakan 3  file utama, file pertama yaitu index.php yang akan kita gunakan sebagai tampilan utama. Yang kedua yaitu file jquery dan yang ketiga adalah query untuk simpan data ke database dengan nama file simpan.php. langsung saja kita mulai pada step pertama sebagai berikut :

  1. Siapkan database yang akan kita gunakan sebagai media penyimpanan.
  •       a. Buatlah database dengan nama db_multi pada halaman phpmyadmin anda.
  •       b. Buka db_multi yang sudah anda buat tadi dan Jalankan query SQL dibawah ini untuk membuat tabel yang dibutuhkan.
-- phpMyAdmin SQL Dump
-- version 4.7.7
-- https://www.phpmyadmin.net/
--
-- Host: localhost
-- Waktu pembuatan: 11 Bulan Mei 2020 pada 15.08
-- Versi server: 5.6.21
-- Versi PHP: 5.6.3

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

/*!40101 SET @[email protected]@CHARACTER_SET_CLIENT */;
/*!40101 SET @[email protected]@CHARACTER_SET_RESULTS */;
/*!40101 SET @[email protected]@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_multi`
--

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

--
-- Struktur dari tabel `tbl_hoby`
--

CREATE TABLE `tbl_hoby` (
`rincian_hoby` varchar(50) DEFAULT NULL,
`jenis_hoby` varchar(30) DEFAULT NULL,
`id_karyawan` int(10) DEFAULT NULL COMMENT 'FK tbl_karyawan'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `tbl_hoby`
--

INSERT INTO `tbl_hoby` (`rincian_hoby`, `jenis_hoby`, `id_karyawan`) VALUES
('fsdfdsf', 'dfdsf', 1),
('dsfds', 'dsfdsf', 2),
('dsfdsf', 'dsfdsf', 2),
('dsfdsf', 'dsfdsf', 2);

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

--
-- Struktur dari tabel `tbl_karyawan`
--

CREATE TABLE `tbl_karyawan` (
`id_karyawan` int(10) UNSIGNED NOT NULL,
`nama_karyawan` varchar(50) DEFAULT NULL,
`umur_karyawan` int(19) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `tbl_karyawan`
--

INSERT INTO `tbl_karyawan` (`id_karyawan`, `nama_karyawan`, `umur_karyawan`) VALUES
(1, 'eroik,', 12),
(2, 'treyey', 12);

--
-- Indexes for dumped tables
--

--
-- Indeks untuk tabel `tbl_karyawan`
--
ALTER TABLE `tbl_karyawan`
ADD PRIMARY KEY (`id_karyawan`);

--
-- AUTO_INCREMENT untuk tabel yang dibuang
--

--
-- AUTO_INCREMENT untuk tabel `tbl_karyawan`
--
ALTER TABLE `tbl_karyawan`
MODIFY `id_karyawan` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
COMMIT;

/*!40101 SET [email protected]_CHARACTER_SET_CLIENT */;
/*!40101 SET [email protected]_CHARACTER_SET_RESULTS */;
/*!40101 SET [email protected]_COLLATION_CONNECTION */;

 

 

2. Buatlah file dengan nama index.php dan copy paste dengan menggunakan kode dibawah ini :

<?php
    /*===============================================================================
        Membuat Form Input Dinamis dengan PHP
        By: DIPHP.ID
        Website: https://blog.diphp.id
        Source code ini bisa anda gunakan dan modifikasi sesuai kebutuhan
    ===============================================================================*/
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Multi Form Dinamis</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script language="javascript">
    function tambahHobi() {
            var idf = document.getElementById("idf").value;
            var stre;
            stre="<p id='srow" + idf + "'><input type='text' size='40' name='rincian_hoby[]' placeholder='Masukkan Hobi' /> <input type='text' size='30' name='jenis_hoby[]' placeholder='Utama/Sambilan' /> <a href='#' style=\"color:#3399FD;\" onclick='hapusElemen(\"#srow" + idf + "\"); return false;'>Hapus</a></p>";
            $("#divHobi").append(stre); 
            idf = (idf-1) + 2;
            document.getElementById("idf").value = idf;
        }
    function hapusElemen(idf) {
            $(idf).remove();
        }
</script>
</head>
<body>
<div id="container">
<h2>Input Data Karyawan</h2>
<form method="post" action="proses_multi.php">
    <input id="idf" value="1" type="hidden" />
    <p>  Nama : <input name="nama_karyawan" type="text" id="nama" size="40"> </p>
    <p>  Umur : <input name="umur_karyawan" type="text" id="nama" size="8"> </p>
    <button type="button"  onclick="tambahHobi(); return false;">Tambah Rincian Hobi</button>
    <div id="divHobi"></div>
    <button type="submit">Simpan</button>
</form>
</div>
</body>
</html>

3. Tahap terkahir yaitu membuat file simpan.php yang akan berfungsi sebagai query untuk menyimpan ke database. Copy paste kode dibawah ini.

<?php
        mysql_connect("localhost","root","");
        mysql_select_db("db_multi");
        $nama_karyawan=$_POST['nama_karyawan'];
        $umur_karyawan=$_POST['umur_karyawan'];
        function proses_hoby($id_karyawan)
            {
                if(isset($_POST["rincian_hoby"]))
                    {
                        $hoby=$_POST["rincian_hoby"];
                        reset($hoby);
                        while (list($key, $value) = each($hoby)) 
                            {
                                $rincian_hoby   =$_POST["rincian_hoby"][$key];
                                $jenis_hoby     =$_POST["jenis_hoby"][$key];
                                $sql_hoby   ="INSERT INTO tbl_hoby(rincian_hoby,jenis_hoby,id_karyawan)
                                              VALUES('$rincian_hoby','$jenis_hoby','$id_karyawan')";  
                                $hasil_hoby =mysql_query($sql_hoby);    
                            }
                        }       
            }
         
        $sql="INSERT INTO tbl_karyawan(nama_karyawan,umur_karyawan)
                      VALUES('$nama_karyawan','$umur_karyawan')";       
        $hasil=mysql_query($sql);
        $id_karyawan=mysql_insert_id(); 
        if($hasil)
            { 
                proses_hoby($id_karyawan);
                echo "Data berhasil diinput";
            }
        else
            {
                echo "Data Gagal diinput";  
            }   
         
?>

4. Copy paste file jquery dan simpan dengan nama jquery-1.8.2.min.js, silahkan buka link dibawah ini:
KLIK DISINI

Semua tahapan sudah selesai, silahkan jalankan program anda sesuai lokasi folder penyimpanan file anda. pastikan file tersebut dalam satu folder, misalnya anda minyimpan pada folder multi, maka untuk membukanya kunjungi url http://localhost/multi.

 

Selamat mencoba, jika ada yang ingin ditanyakan silahkan berikan komentar anda dibawah ini.