Multiple Input Dinamis ke dalam Database dengan Codeigniter 3

Seringkali ketika membuat aplikasi kita dihadapakan pada permasalahan input data secara bersamaan. Kali ini kita akan membahas bagaimana caranya untuk menginputkan beberapa data yang dapat di tambahkan secara dinamis ke dalam database dan di simpan dalam satu klik penekanan tombol submit. Untuk lebih jelasnya kita lakukan langkah-langkah sebagai berikut.

Membuat Tabel

Buat tabel dengan nama multiple_input sebagai berikut

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for multiple_input
-- ----------------------------
DROP TABLE IF EXISTS `multiple_input`;
CREATE TABLE `multiple_input`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

SET NAMES utf8mb4;

SET FOREIGN_KEY_CHECKS = 0;

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

-- Table structure for multiple_input

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

DROP TABLE IF EXISTS `multiple_input`;

CREATE TABLE `multiple_input` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`nama` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,

PRIMARY KEY (`id`) USING BTREE

) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

Membuat Controller

Buat sebuah controller dengan nama Multipleinput.php, kemudian ketikkan script berikut

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Multipleinput extends CI_Controller
{

    public function __construct()
    {
        parent::__construct();
        $this->load->database();
    }

    public function index()
    {
        $this->load->view('multiple_input');
    }

    public function simpandata()
    {
        if (!empty($this->input->post('addmore'))) {
            foreach ($this->input->post('addmore') as $key => $value) {
                $this->db->insert('multiple_input', $value);
            }
        }
        print_r('Data berhasil disimpan');
    }
}

<?php

defined('BASEPATH') or exit('No direct script access allowed');

class Multipleinput extends CI_Controller

{

public function __construct()

{

parent::__construct();

$this->load->database();

}

public function index()

{

$this->load->view('multiple_input');

}

public function simpandata()

{

if (!empty($this->input->post('addmore'))) {

foreach ($this->input->post('addmore') as $key => $value) {

$this->db->insert('multiple_input', $value);

}

print_r('Data berhasil disimpan');

}

Membuat View

Buat sebuah view dengan nama multiple_input.php, kemudian ketikkan script berikut

<!DOCTYPE html>
<html>

<head>
    <title>Codeigniter - Multiple Input Dinamis dengan JQuery</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://mylitenote.com/codeigniter/join-dalam-satu-tabel-pada-codeigniter-3/" target="_blank" rel="dofollow" class="uc262318bfef1fcbe3079050297d9f405"><!-- INLINE RELATED POSTS 2/3 //--><style> .uc262318bfef1fcbe3079050297d9f405 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); text-decoration:none; } .uc262318bfef1fcbe3079050297d9f405:active, .uc262318bfef1fcbe3079050297d9f405:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .uc262318bfef1fcbe3079050297d9f405 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .uc262318bfef1fcbe3079050297d9f405 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .uc262318bfef1fcbe3079050297d9f405 .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .uc262318bfef1fcbe3079050297d9f405:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">See also</span>  <span class="postTitle">Join Dalam Satu Tabel Pada CodeIgniter 3</span></div></a></div>
</head>

<body>
    <div class="container">
        <h2 class="text-center">Codeigniter - Multiple Input Dinamis dengan JQuery</h2>
        <div class="form-group">
            <form name="add_name" method="POST" action="multipleinput/simpandata">
                <div class="table-responsive">
                    <table class="table" id="multiple_input">
                        <tr>
                            <td><input type="text" name="addmore[][nama]" placeholder="Masukkan Nama" class="form-control name_list" required="" /></td>
                            <td><button type="button" name="add" id="add" class="btn btn-success">Tambah</button></td>
                        </tr>
                    </table>
                    <input type="submit" name="submit" id="submit" class="btn btn-info" value="Simpan" />
                </div>
            </form>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            var i = 1;
            $('#add').click(function() {
                i++;
                $('#multiple_input').append('<tr id="row' + i + '" class="dynamic-added"><td><input type="text" name="addmore[][nama]" placeholder="Masukkan Nama" class="form-control name_list" required /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');
            });
            $(document).on('click', '.btn_remove', function() {
                var button_id = $(this).attr("id");
                $('#row' + button_id + '').remove();
            });
        });
    </script>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Codeigniter - Multiple Input Dinamis dengan JQuery</title>

</head>

<body>

<h2 class="text-center">Codeigniter - Multiple Input Dinamis dengan JQuery</h2>

<tr>

<td><button type="button" name="add" id="add" class="btn btn-success">Tambah</button></td>

</tr>

</table>

</div>

</form>

</div>

$(document).ready(function() {

var i = 1;

$('#add').click(function() {

i++;

$('#multiple_input').append('<tr id="row' + i + '" class="dynamic-added"><td><input type="text" name="addmore[][nama]" placeholder="Masukkan Nama" class="form-control name_list" required /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');

});

$(document).on('click', '.btn_remove', function() {

var button_id = $(this).attr("id");

$('#row' + button_id + '').remove();

});

</script>

</body>

</html>

Jika kita mengikuti langkah-langkah di atas secara benar maka akan di peroleh hasil sebagai berikut.

Demikian tutorial singkat ini, semoga bermanfaat. Silahkan isi komentar jika dirasa ada hal yang kurang jelas. Terimakasih.

Multiple Input Dinamis ke dalam Database dengan Codeigniter 3

1 Comment

Leave a Reply Cancel reply

CATEGORIES

ARCHIVES

Statistik

QUOTES