------
Phần 54. Bài tập về câu lệnh điều kiện
Đây là clip số 8: viết chương trình lấy chòm sao dựa vào
ngày tháng sinh
Câu lệnh điều kiện thì đã hiểu, vì nó không quá khó, tuy
nhiên, nên làm các bài tập này để rèn luyện kĩ năng lập trình với HTML, CSS và
PHP.
Để ý là mã nguồn của PHP và HTML nằm lẫn lộn với nhau, nhiều
lúc rất khó đọc và khó hiểu. Mã nguồn của ứng dụng openemr đang viết theo kiểu
này.
Chức năng của hai đoạn mã dưới đây là tương đương, tuy nhiên
cách viết thì khác nhau:
Cách một,
<?php
$result = '<div class="result">
<img src="images/' . $image .
'.jpg" alt="' . $image . '">
<p>' .
$name . '<span>(' . $image . ' : ' . $time . ')</span></p>
</div>';
echo $result;
?>
Cách hai,
<div class="result">
<img
src="images/<?php echo $image; ?>.jpg" alt="<?php echo
$image; ?>">
<p><?php
echo $name; ?><span>(<?php echo $image; ?> : <?php echo
$time; ?>)</span></p>
</div>
Do vậy, có thể lựa chọn cách viết cho phù hợp với bản thân.
Hiện tại, thấy cách viết nào cũng rắc rối, cách một thì quá nhiều dấu nháy,
nháy đơn, nháy kép lồng nhau, rất dễ nhầm lẫn, cách hai thì nhiều cặp thẻ
<?php ?> quá, đọc cũng thấy rối.
Đây là clip số 9: viết chương trình lấy chòm sao dựa vào
ngày tháng sinh – tiếp
Hàm ucfirst() sẽ viết hoa chữ cái đầu tiên của một chuỗi, ví
dụ: ucfirst($image).
Lưu lại mã nguồn để tham khảo,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 600px;
height: 350px;
margin: 20px auto;
border: 1px solid green;
}
h1 {
text-align: center;
padding: 10px 0;
color: red;
}
label {
display: inline-block;
width: 100px;
text-align: right;
}
label,
input {
padding: 5px;
margin: 10px 0;
font-size: 16px;
font-weight: bold;
}
.result {
width: 400px;
height: 100px;
margin: 0 auto;
}
.image {
margin-left: 20px;
margin-top: 20px;
border-radius: 100%;
width: 50px;
height: 50px;
overflow: hidden;
display: inline-block;
float: left;
}
.text {
padding-top: 40px;
margin-left: 80px;
width: 300px;
height: 100%;
font-size: 20px;
font-weight: bold;
color: red;
font-style: italic;
display: block;
height: 100px;
box-sizing: border-box;
}
</style>
</head>
<body>
<?php
$day = '';
$month = '';
$image = '';
$name = '';
$time = '';
$flagShow = true;
$result = '';
// nếu submit không là
nút Xóa
if (isset($_POST['typeSubmit']) &&
$_POST['typeSubmit'] != 'Xóa') {
// nếu các ô nhập có dữ
liệu
if
(isset($_POST['day']) && isset($_POST['month'])) {
$day = $_POST['day'];
$month =
$_POST['month'];
// hai ô ngày tháng là
hai số
if (is_numeric($day) &&
is_numeric($month)) {
$flagShow = true;
switch($month) {
case '1':
if($day < 1
|| $day > 31) { $flagShow = false; break;}
if($day <=
19) { $image = 'capricorn'; $name = 'Ma
kết'; $time = '23/12 - 19/01'; }
if($day >=
20) { $image = 'aquarius'; $name = 'Bảo bình'; $time = '20/01 - 19/02'; }
break;
case '2':
if($day < 1
|| $day > 29) { $flagShow = false; break;}
if($day <=
19) { $image = 'aquarius'; $name = 'Bảo bình'; $time = '20/01 - 19/02'; }
if($day >=
20) { $image = 'pisces'; $name = 'Song
ngư'; $time = '20/02 - 21/03'; }
break;
// viết tiếp
cho các trường hợp còn lại
default:
$flagShow =
false;
break;
}
} else {
$flagShow = false;
}
}
if($flagShow) {
$result = '<div
class="result">
<div
class="image">
<img
src="images/' . $image . '.jpg" alt="' . $image . '">
</div>
<div
class="text">
<span>' . $name . ' (' . ucfirst($image) . ' : ' . $time .
')</span>
</div>
</div>';
}else { $result =
'<div class="text">Dữ liệu không hợp lệ </div>'; }
}
?>
<div
class="content">
<h1>Lấy chòm
sao</h1>
<form
action="#" method="post">
<label>Ngày
sinh</label>
<input
type="text" name="day" value="<?php echo $day;
?>"><br>
<label>Tháng
sinh</label>
<input
type="text" name="month" value="<?php echo $month;
?>"><br>
<label></label>
<input
type="submit" name="typeSubmit" value="Lấy chòm
sao">
<input
type="submit" name="typeSubmit" value="Xóa">
</form>
<?php echo $result;
?>
</div>
</body>
</html>
-----------
Cập nhật [7/9/2020]
-----------