Dalam tutorial ini lacodeid akan belajar cara menambah beberapa data kotak ke tabel mysql dengan menggunakan Ajax Jquery dengan PHP. Pada postingan ini kita akan membuat pilihan multi select box dengan mudah menggunakan user interface, jadi untuk ini kita sudah menggunakan Jquery plugin, dengan menggunakan Plugin jquery ringan ini kita bisa mengubah multi pilih box menjadi dua pilihan kotak yang berbeda, kapan kita telah klik pada pilihan tertentu dari kotak pilih kiri maka nilai itu akan ditambahkan ke dalam kotak pilih yang tepat dan misalkan kita ingin menghapus nilai dari kotak pilih kanan maka kita cukup mengklik opsi tertentu yang nilainya akan dihapus dari kotak kanan ke kiri. Jenis antarmuka pengguna yang harus kita gunakan jika kita memiliki banyak pilihan pilih dan dari antarmuka ini kita dapat dengan mudah memahami pilihan mana yang kita pilih dan yang tersisa untuk dipilih.
Kami akan membuat kotak daftar dropdown dinamis sederhana untuk memasukkan negara dan beberapa data kota ke dalam tabel, dari negara dan negara drop down box kita bisa memilih satu data tapi dari kota multi pilih kita bisa memilih beberapa kota sekaligus. Dan terakhir semua data kotak pilih telah tergantung pada kotak pilih orang tua itu. Itu berarti data kota tergantung pada seleksi negara dan data negara tergantung pada seleksi negara. Singkatnya semua daftar dropdown bersifat dinamis. Jika kita ingin memilih dengan beberapa item dari satu kotak pilih dan plugin ini ringan dan mudah digunakan. Jika kita sudah masuk ke user interface bijaksana maka mudah untuk mengerti pilihan user yang telah dia pilih dari pilih box, namun plugin ini memiliki satu draw back yaitu tidak responsif. Jadi disini kita sudah membahas bagaimana cara memasukkan data multi select box dengan menggunakan plugin jquery ringan dengan plugin Ajax dan PHP.
sebelum masuk script kodingnya silakan anda buat tabel databasenya seperti dibawah ini :
-- phpMyAdmin SQL Dump
-- version 4.3.11
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Oct 09, 2017 at 06:47 AM
-- Server version: 5.6.24
-- PHP Version: 5.6.8
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
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 utf8 */;
--
-- Database: `testing`
--
-- --------------------------------------------------------
--
-- Table structure for table `country_state_city`
--
CREATE TABLE IF NOT EXISTS `country_state_city` (
`id` int(11) NOT NULL,
`country` varchar(250) NOT NULL,
`state` varchar(250) NOT NULL,
`city` varchar(250) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=latin1;
--
-- Dumping data for table `country_state_city`
--
INSERT INTO `country_state_city` (`id`, `country`, `state`, `city`) VALUES
(1, 'USA', 'New York', 'New York city'),
(2, 'USA', 'New York', 'Buffalo'),
(3, 'USA', 'New York', 'Albany'),
(4, 'USA', 'Alabama', 'Birmingham'),
(5, 'USA', 'Alabama', 'Montgomery'),
(6, 'USA', 'Alabama', 'Huntsville'),
(7, 'USA', 'California', 'Los Angeles'),
(8, 'USA', 'California', 'San Francisco'),
(9, 'USA', 'California', 'San Diego'),
(10, 'Canada', 'Ontario', 'Toronto'),
(11, 'Canada', 'Ontario', 'Ottawa'),
(12, 'Canada', 'British Columbia', 'Vancouver'),
(13, 'Canada', 'British Columbia', 'Victoria'),
(14, 'Australia', 'New South Wales', 'Sydney'),
(15, 'Australia', 'New South Wales', 'Newcastle'),
(16, 'Australia', 'Queensland', 'City of Brisbane'),
(17, 'Australia', 'Queensland', 'Gold Coast\r\n'),
(18, 'USA', 'New York', 'Rochester'),
(19, 'USA', 'New York', 'Yonkers'),
(20, 'USA', 'New York', 'Syracuse'),
(21, 'USA', 'New York', 'New Rochelle');
-- --------------------------------------------------------
--
-- Table structure for table `country_state_city_form_data`
--
CREATE TABLE IF NOT EXISTS `country_state_city_form_data` (
`id` int(11) NOT NULL,
`country` varchar(250) NOT NULL,
`state` varchar(250) NOT NULL,
`city` text NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=latin1;
--
-- Dumping data for table `country_state_city_form_data`
--
INSERT INTO `country_state_city_form_data` (`id`, `country`, `state`, `city`) VALUES
(1, 'USA', 'New York', 'New York city,Rochester,New Rochelle'),
(2, 'USA', 'New York', 'New York city,Albany,New Rochelle'),
(3, 'USA', 'New York', 'Buffalo,Albany,Yonkers'),
(4, 'USA', 'New York', 'New York city,Buffalo,Rochester,New Rochelle'),
(5, 'Canada', 'Ontario', 'Toronto,Ottawa');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `country_state_city`
--
ALTER TABLE `country_state_city`
ADD PRIMARY KEY (`id`);
--
-- Indexes for table `country_state_city_form_data`
--
ALTER TABLE `country_state_city_form_data`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `country_state_city`
--
ALTER TABLE `country_state_city`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=22;
--
-- AUTO_INCREMENT for table `country_state_city_form_data`
--
ALTER TABLE `country_state_city_form_data`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=6;
/*!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 */;
lalu anda download library css dan js jQueryLightWeightMultiSelect setelah selesai di download letakan ke dalam folder latihan anda. Pertama buat file koneksi database_connection.php koneksi database disini menggunakan PDO untuk koneksi database ada 3 cara umum yang sering digunakan disini kami memilih PDO (PHP Data Object) untuk scriptnya seperti dibawah ini :<?php
//database_connection.php
$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");<?php
//fetch.php
if(isset($_POST['action']))
{
include('database_connection.php');
$output = '';
if($_POST["action"] == 'country')
{
$query = "
SELECT state FROM country_state_city
WHERE country = :country
GROUP BY state
";
$statement = $connect->prepare($query);
$statement->execute(
array(
':country' => $_POST["query"]
)
);
$result = $statement->fetchAll();
$output .= '<option value="">Select State</option>';
foreach($result as $row)
{
$output .= '<option value="'.$row["state"].'">'.$row["state"].'</option>';
}
}
if($_POST["action"] == 'state')
{
$query = "
SELECT city FROM country_state_city
WHERE state = :state
";
$statement = $connect->prepare($query);
$statement->execute(
array(
':state' => $_POST["query"]
)
);
$result = $statement->fetchAll();
foreach($result as $row)
{
$output .= '<option value="'.$row["city"].'">'.$row["city"].'</option>';
}
}
echo $output;
}
?><?php
//insert.php
if(isset($_POST['country']))
{
include('database_connection.php');
$query = "
INSERT INTO country_state_city_form_data (country, state, city)
VALUES(:country, :state, :city)
";
$statement = $connect->prepare($query);
$statement->execute(
array(
':country' => $_POST['country'],
':state' => $_POST['state'],
':city' => $_POST['hidden_city']
)
);
$result = $statement->fetchAll();
if(isset($result))
{
echo 'done';
}
}
?><?php //index.php include('database_connection.php'); $country = ''; $query = " SELECT country FROM country_state_city GROUP BY country ORDER BY country ASC "; $statement = $connect->prepare($query); $statement->execute(); $result = $statement->fetchAll(); foreach($result as $row) { $country .= '<option value="'.$row["country"].'">'.$row["country"].'</option>'; } ?> <!DOCTYPE html> <html> <head> <title>Latihan Insert Dynamic Multi Select Box</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="jquery.lwMultiSelect.js"></script> <link rel="stylesheet" href="jquery.lwMultiSelect.css" /> </head> <body> <br /><br /> <div class="container" style="width:600px;"> <h2 align="center">Latihan Insert Dynamic Multi Select Box</h2><br /><br /> <form method="post" id="insert_data"> <select name="country" id="country" class="form-control action"> <option value="">Select Country</option> <?php echo $country; ?> </select> <br /> <select name="state" id="state" class="form-control action"> <option value="">Select State</option> </select> <br /> <select name="city" id="city" multiple class="form-control"> </select> <br /> <input type="hidden" name="hidden_city" id="hidden_city" /> <input type="submit" name="insert" id="action" class="btn btn-info" value="Insert" /> </form> </div> <!-- script --> <script> $(document).ready(function(){ $('#city').lwMultiSelect(); $('.action').change(function(){ if($(this).val() != '') { var action = $(this).attr("id"); var query = $(this).val(); var result = ''; if(action == 'country') { result = 'state'; } else { result = 'city'; } $.ajax({ url:'fetch.php', method:"POST", data:{action:action, query:query}, success:function(data) { $('#'+result).html(data); if(result == 'city') { $('#city').data('plugin_lwMultiSelect').updateList(); } } }) } }); $('#insert_data').on('submit', function(event){ event.preventDefault(); if($('#country').val() == '') { alert("Please Select Country"); return false; } else if($('#state').val() == '') { alert("Please Select State"); return false; } else if($('#city').val() == '') { alert("Please Select City"); return false; } else { $('#hidden_city').val($('#city').val()); $('#action').attr('disabled', 'disabled'); var form_data = $(this).serialize(); $.ajax({ url:"insert.php", method:"POST", data:form_data, success:function(data) { $('#action').attr("disabled", "disabled"); if(data == 'done') { $('#city').html(''); $('#city').data('plugin_lwMultiSelect').updateList(); $('#city').data('plugin_lwMultiSelect').removeAll(); $('#insert_data')[0].reset(); alert('Data Inserted'); } } }); } }); }); </script> </body> </html>silakan dipelajari dan dicoba, bila ada kesalahan dalam koding silakan kirim komentar...
Posting Komentar
Posting Komentar