------
Phần 56.
Bài tập “Mô phỏng máy ATM”
Đây là clip số 16: mô phỏng máy ATM
Làm bài tập này để ôn lại kiến thức về HTML, CSS và vòng lặp
trong PHP. Thử tự thiết kế giao diện của ứng dụng này. Kĩ năng do rèn luyện,
làm việc nhiều mà có.
Phần mềm để đo kích thước của hình ảnh, và các đối tượng
khác trên màn hình, JR Screen Ruler (có thể tải ở đây: https://drive.google.com/open?id=0B4FOelgeetqJNDRYZ0hwR0d1WEk).
Muốn đổi thước ngang – dọc: bấm chuột phải vào giao diện JR Screen Ruler, chọn
Flip).
Sử dụng hàm number_format() của PHP để định dạng số (ví dụ:
120,000). Tuy nhiên, khi gửi lại Form về Server có thể bị lỗi:
<br /><b>Notice</b>: A non well formed numeric value encountered
in…
Sửa lỗi trên bằng cách lọc giá trị của input để chỉ giữ lại
các giá trị số bằng hàm filter_var(), ví dụ:
<?php
$money = 0;
if(isset($_GET['money'])) {
$money =
filter_var($_GET['money'], FILTER_SANITIZE_NUMBER_INT); }
?>
Lưu lại đoạn mã để tham khảo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>ATM</title>
<style>
.content {
width: 700px;
height: 400px;
border: 2px solid
#9A9A9A;
background: #E6E6E6;
margin: 20px auto;
}
.content .info {
height: 150px;
padding: 0px;
}
.content .info img {
margin: 10px;
float: left;
border-radius: 5px;
}
.content .info h1 {
color: red;
margin: 0px;
padding-left: 275px;
}
.content .info p {
font-size: 18px;
}
.content .info input {
height: 30px;
}
.content .info input[type='text'] {
width: 300px;
font-size: 18px;
}
.content .info
input[type='submit'] {
width: 100px;
font-size: 18px;
border-radius: 5px;
height: 34px;
}
.clr {
clear:both;
}
.result div p {
display:
inline-table;
font-size: 18px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 5px;
}
.result div p.col1{
width: 200px;
text-align: left;
}
.result div p.col2{
width: 200px;
text-align: center;
}
.result div p.col3{
width: 200px;
text-align: right;
}
.result {
padding: 10px;
}
.result p.total {
text-align: right;
font-size: 20px;
font-weight: bold;
color: #3879D9;
}
</style>
</head>
<body>
<div
class="content">
<?php
$money = 0;
if(isset($_GET['money'])) {
$money =
filter_var($_GET['money'], FILTER_SANITIZE_NUMBER_INT); }
?>
<div
class="info">
<img
src="images/atm.jpg" alt="atm">
<h1>Mô phỏng
máy ATM</h1>
<form
action="#" method="get">
<p>Vui lòng
nhập vào số tiền mà quý khách muốn thực hiện giao dịch</p>
<input
type="text" name="money" value="<?php echo number_format($money);
?>">
<input
type="submit" value="Rút tiền">
</form>
</div>
<div
class="clr"></div>
<div
class="result">
<div
class="normal">
<p
class="col1">Mệnh giá</p>
<p
class="col2">Số lượng</p>
<p
class="col3">Thành tiền</p>
</div>
<div
class="clr"></div>
<?php
define("FIVE_0", 50000);
define("ONE_00", 100000);
define("TWO_00", 200000);
define("FIVE_00", 500000);
$five00 = 0;
$two00 = 0;
$one00 = 0;
$five0 = 0;
$flagShow = false;
if(is_numeric($money) && $money > 50000) {
$flagShow = true;
while ($money
>= FIVE_00) { $five00++; $money = $money - FIVE_00; }
while ($money
>= TWO_00) { $two00++; $money = $money - TWO_00; }
while ($money
>= ONE_00) { $one00++; $money = $money - ONE_00; }
while ($money
>= FIVE_0) { $five0++; $money = $money - FIVE_0; }
$total =
FIVE_00*$five00 + TWO_00*$two00 + ONE_00*$one00 + FIVE_0*$five0;
}
?>
<?php
if($five00 > 0)
{
echo '<div
class="normal">
<p
class="col1">' . number_format(FIVE_00) . '</p>
<p
class="col2">' . $five00 . '</p>
<p
class="col3">' . number_format($five00 * FIVE_00) . '</p>
</div>';
}
if($two00 > 0) {
echo '<div
class="normal">
<p
class="col1">' . number_format(TWO_00) . '</p>
<p class="col2">'
. $two00 . '</p>
<p
class="col3">' . number_format($two00 * TWO_00) . '</p>
</div>';
}
if($one00 > 0) {
echo '<div
class="normal">
<p
class="col1">' . number_format(ONE_00) . '</p>
<p
class="col2">' . $one00 . '</p>
<p
class="col3">' . number_format($one00 * ONE_00) . '</p>
</div>';
}
if($five0 > 0) {
echo '<div
class="normal">
<p
class="col1">' . number_format(FIVE_0) . '</p>
<p
class="col2">' . $five0 . '</p>
<p
class="col3">' . number_format($five0 * FIVE_0) . '</p>
</div>';
}
echo '<hr>';
if ($flagShow) {
echo '<p
class="total">Tổng tiền: ' . number_format($total) . '</p>';
}
?>
</div><!--
.result -->
</div>
</body>
</html>
-----------
Cập nhật [7/9/2020]
-----------