Tạo bởi Trắc Nghiệm Việt|
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

Tổng 0 đánh giá

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó