LẬP TRÌNH PHP28 . 03 . 2019Lượt xem: 2164

Lab 1: Cài đặt và cấu hình môi trường phát triển ứng dụng PHP – Viết ứng dụng PHP cơ bản

1. Cài đặt môi trường chạy ứng dụng

– Cài đặt gói đầy đủ XAMPP Apache + MariaDB + PHP + Perl tại website
https://www.apachefriends.org/download.html
– Khởi động môi trường phát triển

– Truy cập tới đường dẫn: http://localhost
– Cài đặt công cụ soạn thảo miễn phí Notpad ++: https://notepad-plus-plus.org/

2. Phát triển ứng dụng PHP đầu tiên:

Viết chương trình xếp loại kết quả tuyển sinh theo 3 môn thi Toán, Lý, Hóa
– Truy cập vào thư mục htdocs, nằm trong thư mục gốc cài đặt Xampp (mặc định là:
C:\xampp\htdocs)
– Tạo Thư mục có tên là LAB1
– Khởi động Notpad ++ / chọn File/ Folder as Workspace, chọn tới thư mục LAB1 đã tạo trước đó

– Vào folder LAP1, click chuột phải tạo 2 file New Text Document.txt, và sửa tên lại thành index.php và style.css. Nếu không thấy đuôi của file trên windows tại folder LAP1 chọn view và click chọn File name extensions.

– Mở file Index.php để viết ứng dụng

<!DOCTYPE html>
<html>
<head>
<title>XẾP LOẠI KẾT QUẢ SINH VIÊN</title>
<!-- Unicode Tiếng Việt -->
<meta charset="UTF-8"> 
<meta name="author" content="HuynhThaiHung.com" />
<!-- Tập tin định nghĩa css -->
<link href="style.css" rel="stylesheet" /> 
</head>
<body>
<div id="wrapper">
<h2>XẾP LOẠI KẾT QUẢ SINH VIÊN</h2>
	<!-- Form gửi kết quả xử lý -->
	<!-- action là trang đích, giá trịnh # là gửi về chính trang hiện tại.
	Phương thức là post-->
    <form action="#" method="post">
        <!-- Môn Toán -->
        <div class="row">
            <div class="lbltitle">
                <label>Điểm môn Toán</label>
            </div>
            <div class="lblinput">
				<!-- name="toan" là tên biến gửi về server,
				isset($_POST['toan']) kiểm tra biến được định nghĩa hay chưa-->
                <input type="number" name="toan" value="<?php echo isset($_POST['toan']) ? $_POST['toan'] : "" ; ?>" />
            </div>
        </div>
        <!-- Môn Lý -->
        <div class="row">
            <div class="lbltitle">
                <label>Điểm môn Lý</label>
            </div>
            <div class="lblinput">
                <input type="number" name="ly" value="<?php echo isset($_POST['ly']) ? $_POST['ly'] : "" ; ?>" />
            </div>
        </div>
        <!-- Môn Hoá -->
        <div class="row">
            <div class="lbltitle">
                <label>Điểm môn Hoá</label>
            </div>
            <div class="lblinput">
                <input type="number" name="hoa" value="<?php echo isset($_POST['hoa']) ? $_POST['hoa'] : "" ; ?>" />
            </div>
        </div>
		<div class="row">
            <div class="lbltitle">
                <label>Chọn khu vực</label>
            </div>
            <div class="lblinput">
                <input type="number" name="hoa" value="<?php echo isset($_POST['hoa']) ? $_POST['hoa'] : "" ; ?>" />
            </div>
        </div>
        <!-- Nút gửi form, nút lệnh gửi kết quả -->
        <div class="row">
            <div class="submit">
                <input type="submit" name="btnsubmit" value="Xếp loại" />
            </div>
        </div>
    </form>
</div>


</body>
</html>

– Tập tin định nghĩa css

html{
    font-family: sans-serif;
}
body{
    margin: 0px;
}
h1,h2,h3,h4,h5,h6{
    margin: 25px 0 15px 0;
}
h2{
    font-size: 17px;
    font-weight: bold;
}
#wrapper{
    width: 80%;
    margin: 0 auto;
}
.row{
    width: 100%;
    display: inline-block;
    margin-bottom: 5px;
}
.lbltitle{
    width: 20%;
    float: left;
}
.lblinput, .lbloutput{
    width: 80%;
    float: left;
}
.submit{
    padding: 10px 0;
    text-align: center;
    width: 50%;
}

– Kết quả đã xây dựng được form tra cứu như hình

– Viết xử lý sau khi form được gửi về server
– Xử lý cho kết quả tính toán Tổng điểm:

– Thêm đoạn code sau khi dưới dưới thẻ đóng kết thúc form </form>

<!-- Hiển thị kết quả -->
    <div class="result">
        <h2>Kết quả xếp loại</h2>
        <div class="row">
            <div class="lbltitle">
				<label>Tổng điểm</label>
			</div>
			<div class="lbloutput">
				<?php echo isset($_POST['btnsubmit']) ? $_POST['toan'] + $_POST['ly'] + $_POST['hoa'] : "" ; ?>
			</div>
        </div>
    </div>

– Sau khi thực hiện viết code xử lý cho ứng dụng ta được kết quả như hình

– Tương tự, thực hiện viết xử lý cho Cột xếp loại

<div class="row">
            <div class="lbltitle">
				<label>Xếp loại</label>
			</div>
			<div class="lbloutput">
				<?php 
					if(isset($_POST['btnsubmit'])){
					$tongdiem = $_POST['toan'] + $_POST['ly'] + $_POST['hoa'];
						if($tongdiem >= 24) echo "Giỏi";
						elseif($tongdiem >= 21) echo "Khá";
						elseif($tongdiem >= 15) echo "Trung bình";
						else echo "Yếu";
					}
				?>
			</div>
        </div>

– Kết quả sẽ được màn hình

Mở rộng: Yêu cầu thiết kế thêm ô tùy chọn “Khu vực” để cộng điểm
ưu tiên trong xét tuyển với mức cộng điểm như sau: Nếu là KV1, 2 thì cộng 5 điểm, nếu là
KV3 thì cộng 3 điểm, ngược lại sẽ không được cộng điểm.

Phần này bạn tự code nha, copy paste hoài chán lắm =))

Các bước thực hiện:

– Bổ sung thêm ô tùy chọn dưới dạng combobox vào form (Thêm dòng này ngay dưới
dòng điểm môn Hóa)