Membuat PHP Online Editor Live Update

php online editor

Dalam tutorial ini Kami akan share bagaimana membuat php online editor live update atau membuat Pembaruan Langsung Pada select menggunakan PHP. Script ini akan memungkinkan pengguna untuk memperbarui nilai tag pilih HTML. Kode menggunakan query UPDATE MySQLi untuk mengubah nilai tag pilih saat ini tanpa melakukannya secara manual.

Langsung saja mari kita masuk kedalam pembahasan inti.

1. Buat database denga nama db_select kemudian masukkan struktur database dibawah ini.

-- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 05, 2019 at 04:46 PM
-- Server version: 10.1.37-MariaDB
-- PHP Version: 7.2.12

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: `db_select`
--

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

--
-- Table structure for table `country`
--

CREATE TABLE `country` (
  `country_id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `country`
--

INSERT INTO `country` (`country_id`, `name`) VALUES
(1, 'Argentina'),
(2, 'Philippines'),
(3, 'Brazil'),
(4, 'Japan'),
(5, 'South Korea'),
(6, 'North Korea'),
(7, 'German'),
(8, 'Spain'),
(9, 'USA');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `country`
--
ALTER TABLE `country`
  ADD PRIMARY KEY (`country_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `country`
--
ALTER TABLE `country`
  MODIFY `country_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
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 */;

2. Buat file dengan nama conn.php file ini berfungsi sebagai koneksi kedatabase.

<?php
	$conn = mysqli_connect("localhost", "root", "", "db_select");
	
	if(!$conn){
		die("Error: Failed to connect to database!");
	}
?>

3. Buat file dengan nama index.php file ini sebagai form utama.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://jasawebsite.ooo">Jasawebsite</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">PHP Online Editor Live Update Pada Select</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<form method="POST" action="add.php">
			<div class="form-inline">
				<label>Country</label>
				<input type="text" name="country" class="form-control" required="rqeuired"/>
				<button class="btn btn-success" name="add"><span class="glyphicon glyphicon-plus"></span> Add</button>
			</div>
		</form>
		<br /><br />
		<div class="col-md-8">
			<form method="POST" action="update.php">
				<div class="col-md-6">
					<div class="form-inline">
					<?php
						require'conn.php';
						$query = mysqli_query($conn, "SELECT * FROM `country` ORDER BY `name` ASC") or die(mysqli_error());
						while($fetch = mysqli_fetch_array($query)){
							echo "<input type='hidden' name='id[]' class='form-control' value='".$fetch['country_id']."'/><input type='text' name='country[]' class='form-control' value='".$fetch['name']."' required='required'/>";
						}
					?>
					</div>
				</div>
				<div class="col-md-6">
					<button class="btn btn-warning" name="update"><span class="glyphicon glyphicon-edit"></span> Update</buttpn>
				</div>
			</form>
		</div>
		<div class="col-md-4">
			<div class="form-inline">
				<label>Country</label>
				<select class="form-control" name="country">
					<?php
						require'conn.php';
						$query = mysqli_query($conn, "SELECT * FROM `country` ORDER BY `name` ASC") or die(mysqli_error());
						while($fetch = mysqli_fetch_array($query)){
					?>
					<option value="<?php echo $fetch['country_id']?>"><?php echo $fetch['name']?></option>
					<?php
						}
					?>
				</select>
			</div>
		</div>
	</div>
</body>	
</html>

4. Buat file dengan nama add.php kemudian sourch code dibawah ini. File ini berfungsi menyimpan input data ke server database. 

<?php
	require_once'conn.php';
	
	if(ISSET($_POST['add'])){
		$country = $_POST['country'];
		
		mysqli_query($conn, "INSERT INTO `country` VALUES('', '$country')") or die(mysqli_error());
		header('location: index.php');
	}
?>

5. Buat file dengan nama update.php file ini berfungsi memperbarui daftar opsi pilih ketika button update diklik.

<?php
	require_once 'conn.php';
	
	if(ISSET($_POST['update'])){
		foreach($_POST['id'] as $key => $value){
			$country = $_POST['country'][$key];
			mysqli_query($conn, "UPDATE `country` SET `name` = '$country' WHERE `country_id` = '$value'") or die(mysqli_error());
		}
		
		header("location:index.php");
	}
?>

Kalian bisa mendownload filenya langsung dengan menekan link button download dibawah ini.

Jika kalian belum begitu paham silahkan tinggalkan komentar dan mulai berdiskusi dengan kami.

Leave a Reply

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