ห้องเรียน การพัฒนาเว็บแอพพลิเคชัน

กิจกรรมที่ 8
การสร้าง DataTable + PHP + mysqli

notecyber

DataTable
ขั้นตอนในการสร้าง DataTable
- สร้างฐานข้อมูลชื่อ checkin
- สร้างตารางข้อมูลชื่อ tb_member
ให้นักเรียนสร้าง DataTable ตามข้อมูลตัวอย่างต่อไปนี้

notecyber

ขั้นตอนการสร้าง

1. เลือก New เพื่อสร้างฐานข้อมูล

notecyber

2. ตั้งชื่อฐานข้อมูล

notecyber

3. ตั้งชื่อตารางข้อมูลและจำนวน columns

notecyber

4. ตั้งชื่อฟิลด์และกำหนดรายละเอียด

notecyber

5. เลือกฟิลด์ id เป็น PrimaryKey

notecyber

6. เข้าไปกำหนดฟิลด์ id ให้เป็นการใส่ลำดับอัตโนมัติ Auto_Increment

notecyber

6.1 คลิก A_I

notecyber

7. เสร็จสิ้นการสร้างฐานข้อมูล checkin

notecyber

Code SQL (export มาจาก Appserv 8.6.0 for Windows)

CREATE TABLE `tb_member` (
`id` int(4) NOT NULL,
`title` varchar(30) NOT NULL,
`name` varchar(50) NOT NULL,
`surname` varchar(50) NOT NULL,
`phone` varchar(10) NOT NULL,
`status` varchar(50) NOT NULL,
`remark` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `tb_member`
--

INSERT INTO `tb_member` (`id`, `title`, `name`, `surname`, `phone`, `status`, `remark`) VALUES
(1, 'นาย', 'วรเทพ', 'วันกาล', '0811118900', '', '');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tb_member`
--
ALTER TABLE `tb_member`
ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tb_member`
--
ALTER TABLE `tb_member`
MODIFY `id` int(4) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;


เมื่อสร้าง DataTable เสร็จแล้ว ต่อไปจะเป็นการสร้างการเชื่อมต่อฐานข้อมูล ตั้งชื่อไฟล์่ว่า conn.php root คือ username , password คือ รหัสที่ใช้ในการเชื่อมต่อฐานข้อมูล *password ตามที่เราตั้ง

PHP
ไฟล์ชื่อ conn.php

<?php
$con= mysqli_connect("localhost","root","password","checkin") or die("Error: " . mysqli_error($con));
mysqli_query($con, "SET NAMES 'utf8' ");
?>


ไฟล์แสดงผลจากฐานข้อมูล checklist.php

<html>
<head>
<title>DataTables Nareerat Chana</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<?php
//1. เชื่อมต่อ database:
include('conn.php'); //ไฟล์เชื่อมต่อกับ database ที่เราได้สร้างไว้ก่อนหน้าน้ี
//2. query ข้อมูลจากตาราง tb_member:
$query = "SELECT * FROM tb_member" or die("Error:" . mysqli_error());
//3.เก็บข้อมูลที่ query ออกมาไว้ในตัวแปร result .
$result = mysqli_query($con, $query);

?>
<body>
<div class="container">
<h2>Nareerat Chana</h2>
<h3>โรงเรียนนารีรัตน์จังหวัดแพร่</h3>
<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Phone</th>
</tr>
</thead>
<?php
while($show = mysqli_fetch_array($result))
{
?>
<tbody>
<tr>
<td><? echo $show["id"]?></td>
<td><? echo $show["name"]?></td>
<td><? echo $show["surname"]?></td>
<td><? echo $show["phone"]?></td>
</tr>
</tbody>
<?php
}
?>
</table>
</div>

</body>
</html>
<?
mysqli_close($con);
?>


ผลลัพธ์

notecyber

 

 

 



©Notecyber.Com | ครูวรเทพ วันกาล