Cara Menampilkan Data dari Database Menggunakan jQuery

cara menampilkan data dari database

Ketika kita berbicara mengenai system maka tidak lepas dari sebuah database. Pada kesempatan kali ini kami akan mencoba membahas bagaimana cara menampilkan data dari database menggunakan jQuery. Menampilkan data database pada sebuah system apapun itu merupakan hal yang wajib dilakukan.

Langsung saja mari kita masuk kedalam pembahasan inti.

1. Buat database dengan nama db_ret kemudian masukkan struktur database di bawah ini.

-- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Apr 16, 2019 at 04:17 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_ret`
--

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

--
-- Table structure for table `student`
--

CREATE TABLE `student` (
  `stud_id` int(11) NOT NULL,
  `firstname` varchar(50) NOT NULL,
  `lastname` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `student`
--

INSERT INTO `student` (`stud_id`, `firstname`, `lastname`) VALUES
(1, 'Arman', 'Basir'),
(2, 'Aras', 'Rewa');

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

--
-- Table structure for table `teacher`
--

CREATE TABLE `teacher` (
  `teach_id` int(11) NOT NULL,
  `firstname` varchar(50) NOT NULL,
  `lastname` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `teacher`
--

INSERT INTO `teacher` (`teach_id`, `firstname`, `lastname`) VALUES
(1, 'Pak', 'Salang'),
(2, 'Pak', 'Andriadi');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `student`
--
ALTER TABLE `student`
  ADD PRIMARY KEY (`stud_id`);

--
-- Indexes for table `teacher`
--
ALTER TABLE `teacher`
  ADD PRIMARY KEY (`teach_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `student`
--
ALTER TABLE `student`
  MODIFY `stud_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

--
-- AUTO_INCREMENT for table `teacher`
--
ALTER TABLE `teacher`
  MODIFY `teach_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
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 database.

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

3. Buat file dengan nama index.php file ini sebagai form utama dimana data database di tampilkan.

<!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">Cara Menampilkan Data dari Database</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<label>Select a table:</label>
		<button class="btn btn-primary" id="student">Student</button>
		<button class="btn btn-info" id="teacher">Teacher</button>
		<br /><br />
		<div id="result"></div>
	</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/script.js"></script>
</body>	
</html>

4. Buat file dengan nama student.php file berfungsi secara otomatis mengambil array data di server ketika tombol Student di klik.

<table class="table table-bordered">
	<thead class="alert-info">
		<tr>
			<th>Student firstname</th>
			<th>Student lastname</th>
		</tr>
	</thead>
	<tbody>
<?php
	require_once 'conn.php';
	
	$query = mysqli_query($conn, "SELECT * FROM `student`") or die(mysqli_error());
	while($fetch = mysqli_fetch_array($query)){
		echo "<tr>
				<td>".$fetch['firstname']."</td>
				<td>".$fetch['lastname']."</td>
		</tr>";
	}
?>
	</tbody>
</table>

5. Buat file dengan nama teacher.php file berfungsi secara otomatis mengambil array data di server ketika tombol teacher di klik.

<table class="table table-bordered">
	<thead class="alert-info">
		<tr>
			<th>Teacher firstname</th>
			<th>Teacher lastname</th>
		</tr>
	</thead>
	<tbody>
<?php
	require_once 'conn.php';
	
	$query = mysqli_query($conn, "SELECT * FROM `teacher`") or die(mysqli_error());
	while($fetch = mysqli_fetch_array($query)){
		echo "<tr>
				<td>".$fetch['firstname']."</td>
				<td>".$fetch['lastname']."</td>
		</tr>";
	}
?>
	</tbody>
</table>

Kalian bisa mendownload file di atas dengan menekan link button download dibawah ini.

Sekian share kali ini semoga apa yang kami shar bermanfaat bagi anda, Jika masih belum paham sepenuhnya silahkan tinggalkan komentar dan mulai berdiskusi dengan kami.

Leave a Reply

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