Ngu ngơ học làm web (54) - Bài tập về câu lệnh điều kiện

Tiếp theo của: Ngu ngơ học làm web (53) - Câu lệnh điều kiện trong PHP
------

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]
-----------
Xem thêm: