By GokiSoft.com| 20:37 01/04/2024|

XML

Bài tập -Viết API quản lý khách sạn

Model:

#Hotels.php

<?php
class Hotels {
	public $id;
	public $title;
	public $thumbnail;
	public $content;
	public $address;
	public $createdAt;
	public $updatedAt;

	public function processForm() {
		if(isset($_POST['id'])) {
			$this->id = $_POST['id'];
		}
		if(isset($_POST['title'])) {
			$this->title = $_POST['title'];
		}
		if(isset($_POST['thumbnail'])) {
			$this->thumbnail = $_POST['thumbnail'];
		}
		if(isset($_POST['content'])) {
			$this->content = $_POST['content'];
		}
		if(isset($_POST['address'])) {
			$this->address = $_POST['address'];
		}
		$this->createdAt = date('Y-m-d H:i:s');
		$this->updatedAt = date('Y-m-d H:i:s');
	}

	public function insert() {
		$sql = "insert into hotels(title, thumbnail, content, address, created_at, updated_at) values ('".$this->title."', '".$this->thumbnail."', '".$this->content."', '".$this->address."', '".$this->createdAt."', '".$this->updatedAt."')";
		query($sql);
	}

	public function update() {
		$sql = "update hotels set title='".$this->title."', thumbnail='".$this->thumbnail."', content='".$this->content."', address='".$this->address."', updated_at='".$this->updatedAt."' where id = ".$this->id;
		query($sql);
	}

	public function delete() {
		$sql = "delete from hotels where id = ".$this->id;
		query($sql);
	}

	public function findAll() {
		$sql = "select * from hotels";
		return select($sql);
	}
}

Views:

#add.php

<?php
require_once('../../config.php');
require_once('../../models/Hotels.php');

if(!empty($_POST)) {
	$hotels = new Hotels();
	$hotels->processForm();
	$hotels->insert();
	header('Location: index.php');
	die();
}
?>

<!DOCTYPE html>
<html>
<head>
	<title>Add hotels</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Latest compiled and minified CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Latest compiled JavaScript -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="card">
		<div class="card-header bg-info text-white">
			NHAP THONG TIN KS
		</div>
		<div class="card-body">
			<form method="post">
				<div class="form-group">
					<label>Hinh Anh:</label>
					<input required type="text" name="thumbnail" class="form-control">
				</div>
				<div class="form-group">
					<label>Ten KS:</label>
					<input required type="text" name="title" class="form-control">
				</div>
				<div class="form-group">
					<label>Dia Chi:</label>
					<input required type="text" name="address" class="form-control">
				</div>
				<div class="form-group">
					<label>Noi Dung:</label>
					<textarea rows="5" class="form-control" name="content"></textarea>
				</div>
				<div class="form-group">
					<button class="btn btn-success">Luu</button>
					<button type="reset" class="btn btn-warning">Xoa Form</button>
				</div>
			</form>
			<p>
				<a href="index.php">Quay về danh sách</a>
			</p>
		</div>
	</div>
</div>
</body>
</html>

#index.php

<?php
require_once('../../config.php');
require_once('../../models/Hotels.php');

$hotels = new Hotels();
$dataList = $hotels->findAll();
?>

<!DOCTYPE html>
<html>
<head>
	<title>Hotels Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Latest compiled and minified CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Latest compiled JavaScript -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-12 mt-3">
			<a href="add.php"><button class="btn btn-success" style="float: left;">Them moi</button></a>
			<form method="get">
				<input type="text" name="s" placeholder="Tim kiem ..." class="form-control" style="width: 200px; float: right;">
			</form>
		</div>
		<div class="col-md-12">
			<div class="card mt-3">
				<div class="card-header bg-info text-white">
					DANH SACH HOTELS
				</div>
				<div class="card-body">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th>STT</th>
								<th>Thumbnail</th>
								<th>Ten</th>
								<th>Dia Chi</th>
								<th>Ngay Sua</th>
								<th style="width: 180px;"></th>
							</tr>
						</thead>
						<tbody>
		<?php
		$count = 0;
		foreach ($dataList as $item) {
			echo '<tr>
					<td>'.(++$count).'</td>
					<td>'.$item['thumbnail'].'</td>
					<td>'.$item['title'].'</td>
					<td>'.$item['address'].'</td>
					<td>'.$item['updated_at'].'</td>
					<td>
						<a href="edit.php?id='.$item['id'].'"><button class="btn btn-warning">Sua</button></a>
						<a href="delete.php?id='.$item['id'].'"><button class="btn btn-danger">Xoa</button></a>
					</td>
				</tr>';
		}
		?>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Config:

#readme.txt

Quản lý khách sạn:
 Hotel
 	- title
 	- thumbnail
 	- address
 	- content
 	- created_at
 	- updated_at

create table hotels (
	id int primary key auto_increment,
	title varchar(150),
	thumbnail varchar(500),
	address varchar(250),
	content longtext,
	created_at datetime,
	updated_at datetime
)

Du an:
	- CRUD -> Them/sua/xoa/hien thi danh sach du lieu
	- Trien khai:
		- Cach thuong
		- API
			Hotels
				API: lay danh sach KS
				URL:
					http://localhost/C2037L/lesson03/api/hotels/index.php
				API: Them KS
					URL: http://localhost/C2037L/lesson03/api/hotels/add.php

#config.php

<?php
session_start();

define('HOSTING', 'localhost');
define('USERNAME', 'root');
define('PWD', '');
define('DATABASE', 'c2307l');

ini_set('display_errors', '1');
ini_set('display_startup_errors', '1');
error_reporting(E_ALL);

/**
* Query: insert, update, delete
*/
function query($sql) {
	// $conn = mysqli_connect('localhost:3307', 'gokisoft', 'iv@*NIFyTdKEgh]D', 'c2307l');
	$conn = mysqli_connect(HOSTING, USERNAME, PWD, DATABASE);
	mysqli_set_charset($conn, 'utf8');

	//B2. Thuc hien insert du lieu vao CSDL
	// $sql = "insert into users (fullname, email, phone_number, address, created_at, updated_at) values ('TRAN VAN AAA', 'tranvana@gmail.com', '1234567890', 'Ha Noi', '2023-01-02 09:30:00', '2023-01-02 09:30:00')";
	// $sql = "delete from users where id = ".$id;
	mysqli_query($conn, $sql);

	//B3. Dong ket noi
	mysqli_close($conn);
}

function select($sql) {
	$conn = mysqli_connect(HOSTING, USERNAME, PWD, DATABASE);
	mysqli_set_charset($conn, 'utf8');

	//B2. Thuc hien insert du lieu vao CSDL
	// $sql = "insert into users (fullname, email, phone_number, address, created_at, updated_at) values ('TRAN VAN AAA', 'tranvana@gmail.com', '1234567890', 'Ha Noi', '2023-01-02 09:30:00', '2023-01-02 09:30:00')";
	// $sql = "select * from users";
	$resultset = mysqli_query($conn, $sql);
	$dataList = [];

	while(($row = mysqli_fetch_array($resultset, 1)) !== null) {
		$dataList[] = $row;
	}

	//B3. Dong ket noi
	mysqli_close($conn);

	return $dataList;
}

API:

#add.php

<?php
require_once('../../config.php');
require_once('../../models/Hotels.php');

if(!empty($_POST)) {
	$hotels = new Hotels();
	$hotels->processForm();
	$hotels->insert();
}

#index.php

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");

require_once('../../config.php');
require_once('../../models/Hotels.php');

$hotels = new Hotels();
$dataList = $hotels->findAll();

echo json_encode($dataList);

FE:

#add.html

<!DOCTYPE html>
<html>
<head>
	<title>Add hotels</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Latest compiled and minified CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Latest compiled JavaScript -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="card">
		<div class="card-header bg-info text-white">
			NHAP THONG TIN KS
		</div>
		<div class="card-body">
			<form method="post" onsubmit="return postData();">
				<div class="form-group">
					<label>Hinh Anh:</label>
					<input required type="text" name="thumbnail" class="form-control">
				</div>
				<div class="form-group">
					<label>Ten KS:</label>
					<input required type="text" name="title" class="form-control">
				</div>
				<div class="form-group">
					<label>Dia Chi:</label>
					<input required type="text" name="address" class="form-control">
				</div>
				<div class="form-group">
					<label>Noi Dung:</label>
					<textarea rows="5" class="form-control" name="content"></textarea>
				</div>
				<div class="form-group">
					<button class="btn btn-success">Luu</button>
					<button type="reset" class="btn btn-warning">Xoa Form</button>
				</div>
			</form>
			<p>
				<a href="index.html">Quay về danh sách</a>
			</p>
		</div>
	</div>
</div>
<script type="text/javascript">
	function postData() {
		$.post('http://localhost/C2037L/lesson03/api/hotels/add.php', {
			'thumbnail': $('[name=thumbnail]').val(),
			'title': $('[name=title]').val(),
			'address': $('[name=address]').val(),
			'content': $('[name=content]').val()
		}, function(data) {
			alert('Thanh cong')
		})
	}
</script>
</body>
</html>

#index.html

<!DOCTYPE html>
<html>
<head>
	<title>Hotels Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Latest compiled and minified CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Latest compiled JavaScript -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-12 mt-3">
			<a href="add.html"><button class="btn btn-success" style="float: left;">Them moi</button></a>
			<form method="get">
				<input type="text" name="s" placeholder="Tim kiem ..." class="form-control" style="width: 200px; float: right;">
			</form>
		</div>
		<div class="col-md-12">
			<div class="card mt-3">
				<div class="card-header bg-info text-white">
					DANH SACH HOTELS
				</div>
				<div class="card-body">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th>STT</th>
								<th>Thumbnail</th>
								<th>Ten</th>
								<th>Dia Chi</th>
								<th>Ngay Sua</th>
								<th style="width: 180px;"></th>
							</tr>
						</thead>
						<tbody id="resultList">
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function() {
		$.get('http://localhost/C2037L/lesson03/api/hotels/index.php', function(data) {
			let dataList = JSON.parse(data)
			console.log(dataList)
			for(let item of dataList) {
				$('#resultList').append(`<tr>
					<td></td>
					<td>${item.thumbnail}</td>
					<td>${item.title}</td>
					<td>${item.address}</td>
					<td>${item.updated_at}</td>
					<td>
						<a href="edit.php?id=${item.id}"><button class="btn btn-warning">Sua</button></a>
						<a href="delete.php?id=${item.id}"><button class="btn btn-danger">Xoa</button></a>
					</td>
				</tr>`)
			}
		})
	})
</script>
</body>
</html>

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

GokiSoft.com

2024-04-05 13:43:04

Update Prev Page & Next Page

#index3.html

<!DOCTYPE html>
<html>
<head>
	<title>Hotels Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Latest compiled and minified CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Latest compiled JavaScript -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-12 mt-3">
			<a href="add.html"><button class="btn btn-success" style="float: left;">Them moi</button></a>
			<form method="get" onsubmit="return search()">
				<input type="text" name="s" placeholder="Tim kiem ..." class="form-control" style="width: 200px; float: right;">
			</form>
		</div>
		<div class="col-md-12">
			<div class="card mt-3">
				<div class="card-header bg-info text-white">
					DANH SACH HOTELS
				</div>
				<div class="card-body">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th>STT</th>
								<th>Thumbnail</th>
								<th>Ten</th>
								<th>Dia Chi</th>
								<th>Ngay Sua</th>
								<th style="width: 180px;"></th>
							</tr>
						</thead>
						<tbody id="resultList">
							
						</tbody>
					</table>
					<ul class="pagination">
					  <li class="page-item"><a class="page-link" href="#">&lt;</a></li>
					  <li class="page-item active"><a class="page-link" href="#">1</a></li>
					  <li class="page-item"><a class="page-link" href="#">2</a></li>
					  <li class="page-item"><a class="page-link" href="#">3</a></li>
					  <li class="page-item"><a class="page-link" href="#">&gt;</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	var page = 1;
	var total = 0;

	$(function() {
		$('#resultList').html('')
		requestData()
	})

	function showData(data) {
		let res = JSON.parse(data)
		if(res.dataList.length == 0) {
			$('#page').hide()
		} else {
			$('#page').show()
		}

		console.log(res)
		$('#resultList').html('')
		for(let item of res.dataList) {
			$('#resultList').append(`<tr>
				<td></td>
				<td>${item.thumbnail}</td>
				<td>${item.title}</td>
				<td>${item.address}</td>
				<td>${item.updated_at}</td>
				<td>
					<a href="edit.php?id=${item.id}"><button class="btn btn-warning">Sua</button></a>
					<a href="delete.php?id=${item.id}"><button class="btn btn-danger">Xoa</button></a>
				</td>
			</tr>`)
		}

		total = res.total
		showPagination(res.total)
	}

	function showPagination(total) {
		$('.pagination').html('')
		if(page == 1) {
			$('.pagination').append(`<li onclick="prevPage()" class="page-item disabled"><a class="page-link" href="#">&lt;</a></li>`)
		} else {
			$('.pagination').append(`<li onclick="prevPage()" class="page-item"><a class="page-link" href="#">&lt;</a></li>`)
		}
		for (var i = 0; i < total; i++) {
			if((i+1) == page) {
				$('.pagination').append(`<li onclick="showPage(${i+1})" class="page-item active"><a class="page-link" href="#">${i+1}</a></li>`)
			} else {
				$('.pagination').append(`<li onclick="showPage(${i+1})" class="page-item"><a class="page-link" href="#">${i+1}</a></li>`)
			}
		}
		if(page == total) {
			$('.pagination').append(`<li onclick="nextPage()" class="page-item disabled"><a class="page-link" href="#">&gt;</a></li>`)
		} else {
			$('.pagination').append(`<li onclick="nextPage()" class="page-item"><a class="page-link" href="#">&gt;</a></li>`)
		}
	}

	function prevPage() {
		page--
		if(page < 1) {
			page = 1
		}
		requestData()
	}

	function nextPage() {
		page++
		if(page > total) {
			page = total
		}

		requestData()
	}

	function loadMore() {
		page++
		requestData()
	}

	function showPage(nextPage) {
		page = nextPage
		requestData()
	}

	function search() {
		page = 1
		$('#resultList').html('')
		
		requestData()

		return false;
	}

	function requestData() {
		let s = $('[name=s]').val()
		$.get('http://localhost/C2037L/lesson03/api/hotels/index3.php?page='+page+'&s='+s, function(data) {
			showData(data)
		})
	}
</script>
</body>
</html>

GokiSoft.com

2024-04-05 13:35:05

#Hotels.php

<?php
class Hotels {
	public $id;
	public $title;
	public $thumbnail;
	public $content;
	public $address;
	public $createdAt;
	public $updatedAt;

	public function processForm() {
		if(isset($_POST['id'])) {
			$this->id = $_POST['id'];
		}
		if(isset($_POST['title'])) {
			$this->title = $_POST['title'];
		}
		if(isset($_POST['thumbnail'])) {
			$this->thumbnail = $_POST['thumbnail'];
		}
		if(isset($_POST['content'])) {
			$this->content = $_POST['content'];
		}
		if(isset($_POST['address'])) {
			$this->address = $_POST['address'];
		}
		$this->createdAt = date('Y-m-d H:i:s');
		$this->updatedAt = date('Y-m-d H:i:s');
	}

	public function insert() {
		$sql = "insert into hotels(title, thumbnail, content, address, created_at, updated_at) values ('".$this->title."', '".$this->thumbnail."', '".$this->content."', '".$this->address."', '".$this->createdAt."', '".$this->updatedAt."')";
		query($sql);
	}

	public function update() {
		$sql = "update hotels set title='".$this->title."', thumbnail='".$this->thumbnail."', content='".$this->content."', address='".$this->address."', updated_at='".$this->updatedAt."' where id = ".$this->id;
		query($sql);
	}

	public function delete() {
		$sql = "delete from hotels where id = ".$this->id;
		query($sql);
	}

	public function findAll() {
		$sql = "select * from hotels";
		return select($sql);
	}

	public function search($s) {
		$sql = "select * from hotels where title like '%".$s."%' or address like '%".$s."%'";
		return select($sql);
	}

	public function findAll2() {
		$page = 1;
		if(isset($_GET['page'])) {
			$page = $_GET['page'];
		}
		$total = 3;
		$index = ($page - 1) * $total;

		$sql = "select * from hotels limit $index,$total";
		return select($sql);
	}

	public function countPage2() {
		$sql = "select count(*) as total from hotels";
		$result = select($sql);

		return ceil($result[0]['total'] / 3);
	}

	public function search2($s) {
		$page = 1;
		if(isset($_GET['page'])) {
			$page = $_GET['page'];
		}
		$total = 3;
		$index = ($page - 1) * $total;

		$sql = "select * from hotels where title like '%".$s."%' or address like '%".$s."%'  limit $index,$total";
		return select($sql);
	}
}

GokiSoft.com

2024-04-05 13:33:29

#index3.php

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");

require_once('../../config.php');
require_once('../../models/Hotels.php');

$hotels = new Hotels();

if(isset($_GET['s']) && $_GET['s'] != '') {
	$dataList = $hotels->search2($_GET['s']);
} else {
	$dataList = $hotels->findAll2();
}

$totalPage = $hotels->countPage2();

echo json_encode([
	'dataList' => $dataList,
	'total' => $totalPage
]);

#index2.php

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");

require_once('../../config.php');
require_once('../../models/Hotels.php');

$hotels = new Hotels();

if(isset($_GET['s']) && $_GET['s'] != '') {
	$dataList = $hotels->search2($_GET['s']);
} else {
	$dataList = $hotels->findAll2();
}

echo json_encode($dataList);

#index.php

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");

require_once('../../config.php');
require_once('../../models/Hotels.php');

$hotels = new Hotels();

if(isset($_GET['s']) && $_GET['s'] != '') {
	$dataList = $hotels->search($_GET['s']);
} else {
	$dataList = $hotels->findAll();
}
// echo "13213213";
// $dataList = [
// 	'sdfsdf'=>'sdfdsf',
// 	'sdfdsdsf' => 'sdfsdf'
// ];
echo json_encode($dataList);

#add.php

<?php
require_once('../../config.php');
require_once('../../models/Hotels.php');

if(!empty($_POST)) {
	$hotels = new Hotels();
	$hotels->processForm();
	$hotels->insert();
}

GokiSoft.com

2024-04-05 13:32:57

#index3.html

<!DOCTYPE html>
<html>
<head>
	<title>Hotels Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Latest compiled and minified CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Latest compiled JavaScript -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-12 mt-3">
			<a href="add.html"><button class="btn btn-success" style="float: left;">Them moi</button></a>
			<form method="get" onsubmit="return search()">
				<input type="text" name="s" placeholder="Tim kiem ..." class="form-control" style="width: 200px; float: right;">
			</form>
		</div>
		<div class="col-md-12">
			<div class="card mt-3">
				<div class="card-header bg-info text-white">
					DANH SACH HOTELS
				</div>
				<div class="card-body">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th>STT</th>
								<th>Thumbnail</th>
								<th>Ten</th>
								<th>Dia Chi</th>
								<th>Ngay Sua</th>
								<th style="width: 180px;"></th>
							</tr>
						</thead>
						<tbody id="resultList">
							
						</tbody>
					</table>
					<ul class="pagination">
					  <li class="page-item"><a class="page-link" href="#">&lt;</a></li>
					  <li class="page-item active"><a class="page-link" href="#">1</a></li>
					  <li class="page-item"><a class="page-link" href="#">2</a></li>
					  <li class="page-item"><a class="page-link" href="#">3</a></li>
					  <li class="page-item"><a class="page-link" href="#">&gt;</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	var page = 1;

	$(function() {
		$('#resultList').html('')
		requestData()
	})

	function showData(data) {
		let res = JSON.parse(data)
		if(res.dataList.length == 0) {
			$('#page').hide()
		} else {
			$('#page').show()
		}

		console.log(res)
		$('#resultList').html('')
		for(let item of res.dataList) {
			$('#resultList').append(`<tr>
				<td></td>
				<td>${item.thumbnail}</td>
				<td>${item.title}</td>
				<td>${item.address}</td>
				<td>${item.updated_at}</td>
				<td>
					<a href="edit.php?id=${item.id}"><button class="btn btn-warning">Sua</button></a>
					<a href="delete.php?id=${item.id}"><button class="btn btn-danger">Xoa</button></a>
				</td>
			</tr>`)
		}

		// showPagination(res.total)
	}

	function showPagination(total) {
		$('.pagination').html('')
		for (var i = 0; i < total; i++) {
			if((i+1) == page) {
				$('.pagination').append(`<li onclick="showPage(${i+1})" class="page-item active"><a class="page-link" href="#">${i+1}</a></li>`)
			} else {
				$('.pagination').append(`<li onclick="showPage(${i+1})" class="page-item"><a class="page-link" href="#">${i+1}</a></li>`)
			}
		}
	}

	function loadMore() {
		page++
		requestData()
	}

	function showPage(nextPage) {
		page = nextPage
		requestData()
	}

	function search() {
		page = 1
		$('#resultList').html('')
		
		requestData()

		return false;
	}

	function requestData() {
		let s = $('[name=s]').val()
		$.get('http://localhost/C2037L/lesson03/api/hotels/index3.php?page='+page+'&s='+s, function(data) {
			showData(data)
		})
	}
</script>
</body>
</html>

#index2.html

<!DOCTYPE html>
<html>
<head>
	<title>Hotels Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Latest compiled and minified CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Latest compiled JavaScript -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-12 mt-3">
			<a href="add.html"><button class="btn btn-success" style="float: left;">Them moi</button></a>
			<form method="get" onsubmit="return search()">
				<input type="text" name="s" placeholder="Tim kiem ..." class="form-control" style="width: 200px; float: right;">
			</form>
		</div>
		<div class="col-md-12">
			<div class="card mt-3">
				<div class="card-header bg-info text-white">
					DANH SACH HOTELS
				</div>
				<div class="card-body">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th>STT</th>
								<th>Thumbnail</th>
								<th>Ten</th>
								<th>Dia Chi</th>
								<th>Ngay Sua</th>
								<th style="width: 180px;"></th>
							</tr>
						</thead>
						<tbody id="resultList">
							
						</tbody>
					</table>
					<p id="page">
						<a href="#load-more" onclick="loadMore()">Load More</a>
					</p>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	var page = 1;

	$(function() {
		$('#resultList').html('')
		requestData()
	})

	function showData(data) {
		let dataList = JSON.parse(data)
		if(dataList.length == 0) {
			$('#page').hide()
		} else {
			$('#page').show()
		}

		console.log(dataList)
		for(let item of dataList) {
			$('#resultList').append(`<tr>
				<td></td>
				<td>${item.thumbnail}</td>
				<td>${item.title}</td>
				<td>${item.address}</td>
				<td>${item.updated_at}</td>
				<td>
					<a href="edit.php?id=${item.id}"><button class="btn btn-warning">Sua</button></a>
					<a href="delete.php?id=${item.id}"><button class="btn btn-danger">Xoa</button></a>
				</td>
			</tr>`)
		}
	}

	function loadMore() {
		page++
		requestData()
	}

	function search() {
		page = 1
		$('#resultList').html('')
		
		requestData()

		return false;
	}

	function requestData() {
		let s = $('[name=s]').val()
		$.get('http://localhost/C2037L/lesson03/api/hotels/index2.php?page='+page+'&s='+s, function(data) {
			showData(data)
		})
	}
</script>
</body>
</html>

#index.html

<!DOCTYPE html>
<html>
<head>
	<title>Hotels Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Latest compiled and minified CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Latest compiled JavaScript -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-12 mt-3">
			<a href="add.html"><button class="btn btn-success" style="float: left;">Them moi</button></a>
			<form method="get" onsubmit="return search()">
				<input type="text" name="s" placeholder="Tim kiem ..." class="form-control" style="width: 200px; float: right;">
			</form>
		</div>
		<div class="col-md-12">
			<div class="card mt-3">
				<div class="card-header bg-info text-white">
					DANH SACH HOTELS
				</div>
				<div class="card-body">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th>STT</th>
								<th>Thumbnail</th>
								<th>Ten</th>
								<th>Dia Chi</th>
								<th>Ngay Sua</th>
								<th style="width: 180px;"></th>
							</tr>
						</thead>
						<tbody id="resultList">
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function() {
		$.get('http://localhost/C2037L/lesson03/api/hotels/index.php', function(data) {
			showData(data)
		})
	})

	function showData(data) {
		$('#resultList').html('')

		let dataList = JSON.parse(data)
		console.log(dataList)
		for(let item of dataList) {
			$('#resultList').append(`<tr>
				<td></td>
				<td>${item.thumbnail}</td>
				<td>${item.title}</td>
				<td>${item.address}</td>
				<td>${item.updated_at}</td>
				<td>
					<a href="edit.php?id=${item.id}"><button class="btn btn-warning">Sua</button></a>
					<a href="delete.php?id=${item.id}"><button class="btn btn-danger">Xoa</button></a>
				</td>
			</tr>`)
		}
	}

	function search() {
		let s = $('[name=s]').val()

		console.log(s)

		$.get('http://localhost/C2037L/lesson03/api/hotels/index.php?s='+s, function(data) {
			showData(data)
		})

		return false;
	}
</script>
</body>
</html>

#add.html

<!DOCTYPE html>
<html>
<head>
	<title>Add hotels</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Latest compiled and minified CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Latest compiled JavaScript -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
<div class="container">
	<div class="card">
		<div class="card-header bg-info text-white">
			NHAP THONG TIN KS
		</div>
		<div class="card-body">
			<form method="post" onsubmit="return postData();">
				<div class="form-group">
					<label>Hinh Anh:</label>
					<input required type="text" name="thumbnail" class="form-control">
				</div>
				<div class="form-group">
					<label>Ten KS:</label>
					<input required type="text" name="title" class="form-control">
				</div>
				<div class="form-group">
					<label>Dia Chi:</label>
					<input required type="text" name="address" class="form-control">
				</div>
				<div class="form-group">
					<label>Noi Dung:</label>
					<textarea rows="5" class="form-control" name="content"></textarea>
				</div>
				<div class="form-group">
					<button class="btn btn-success">Luu</button>
					<button type="reset" class="btn btn-warning">Xoa Form</button>
				</div>
			</form>
			<p>
				<a href="index.html">Quay về danh sách</a>
			</p>
		</div>
	</div>
</div>
<script type="text/javascript">
	function postData() {
		$.post('http://localhost/C2037L/lesson03/api/hotels/add.php', {
			'thumbnail': $('[name=thumbnail]').val(),
			'title': $('[name=title]').val(),
			'address': $('[name=address]').val(),
			'content': $('[name=content]').val()
		}, function(data) {
			alert('Thanh cong')
		})
	}
</script>
</body>
</html>

Bài tập -Viết API quản lý khách sạn

#Hotels.php

#add.php

#index.php

#readme.txt

#config.php

#add.php

#index.php

#add.html

#index.html

Tags:

Phản hồi từ học viên

5

GokiSoft.com

#index3.html

GokiSoft.com

#Hotels.php

GokiSoft.com

#index3.php

#index2.php

#index.php

#add.php

GokiSoft.com

#index3.html

#index2.html

#index.html

#add.html