Tải bản đầy đủ (.docx) (22 trang)
  1. Trang chủ
    2. >>
  2. Công Nghệ Thông Tin
    3. >>
  3. Kỹ thuật lập trình

Thiết kế web về quản lý hàng

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.72 MB, 22 trang )

TRƯỜNG ĐẠI HỌC THƯƠNG MẠI
HỌC KỲ II NĂM HỌC 2020 – 2021
(Phần dành cho sinh viên/ học viên)
Bài thi học phần: Thiết kế và triển khai web
Số báo danh: 30
Mã số đề thi: 2

Lớp: 2176ECIT0731

Ngày thi: 29/10/2021 Số trang: 21

Họ và tên: Nguyễn Thị Quyên

Điểm kết luận:
GV chấm thi 1: …….………………………......
GV chấm thi 2: …….………………………......

Câu 1:
a.

Vai trò của CSS trong thiết kế website? Trình bày các cách chèn mã nguồn CSS vào tệp HTML.

b.

Vẽ sơ đồ và giải thích nguyên lý hoạt động của trang web trên mạng Internet?

Câu 2: Cho bảng HANG(Mã hàng, Tên hàng, Đơn giá, Loại) trong cơ sở dữ liệu QL_HANG(quản lý
hàng) trên máy chủ cơ sở dữ liệu My SQL (với tên đăng nhập là roof mật khẩu là 123456) đặt tại máy
có tên máy là MAY4.
Hãy tạo một trang web như hình dưới đây, trong đó:
a) Yêu cầu cơ bản:


 Tạo Form nhập gồm các ơ TextBox: Mã hàng, Tên hàng, Đơn giá. Ơ Select Loại gồm có các loại:
Telephone, Desktop, Laptop.
 Khi người dùng nhập dữ liệu vào các ô điều khiển và click vào nút lệnh “Thêm mới” thì tồn bộ dữ
liệu trên Form được đưa vào bảng HANG.
 Phần bảng chứa toàn bộ nội dung của bảng HANG.

b) Yêu cầu nâng cao:
Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 1/21


 Khi người dùng chọn một mặt hàng cần sửa bằng cách click chuột vào “edit”, tất cả các thông tin
của mặt hàng cần sửa sẽ hiện trên form. Sau khi thay đổi thông tin và click vào nút lệnh “Sửa” thì
tồn bộ dữ liệu trên form được cập nhật lại cho mặt hàng hiện hành.
 Sử dụng thêm CSS để định dạng cho các phần tử của Form. Sử dụng thêm Javascript để kiểm tra
tính hợp lệ của dữ liệu Form.
BÀI LÀM:
Câu 1:
a.

Vai trò của CSS trong thiết kế Website:

** CSS là chữ viết tắt của Cascading Style Sheets là một loại ngôn ngữ StyleSheet để miêu tả sự thể
hiện của một tài liệu HTML hoặc XML. Và CSS có vai trị vơ cùng quan trọng đối với website:


Nhờ CSS mà mã nguồn của trang Web sẽ được tổ chức gọn gàng hơn, trật tự hơn, nội dung trang
web sẽ được tách bạch hơn trong việc định dạng hiển thị. Từ đó, q trình cập nhập nội dung sẽ dễ
dàng hơn và có thể hạn chế tối thiểu làm rối cho mã HTML.




CSS tạo ra nhiều kiểu dáng nên có thể được áp dụng với nhiều trang web, từ đó giảm tránh việc lặp
lại các định dạng của các trang web giống nhau.



CSS giúp các thẻ html hiển thị màu sắc sặc sỡ hơn, định dạng lại khung, các media



CSS giúp chúng ta tiết kiệm rất nhiều công sức trong việc xây dựng giao diện, chỉ một đoạn mã nhỏ
nó sẽ làm cho ứng dụng của chúng ta lung linh, chuyên nghiệp.



CSS sẽ được lưu cùng chung với thẻ html hoặc sẽ lưu ra một file riêng giúp chúng ta quản lý,
Maintaince đơn giản hơn.

Ví dụ dưới đây là hình ảnh tơi tự tạo khi chưa CSS:

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 2/21


Trong phần này tôi nêu ra gồm 4 hoạt động, nhưng khi chưa được CSS thì 4 hình ảnh biểu tượng cho 4
hoạt động của tơi bị lệch và kích cỡ khơng được cân xứng và background chưa có thêm màu gì cả.
Và đây là hình ảnh sau khi tơi đã CSS:


Qua đó ta thấy được nhờ có CSS nên những hình ảnh biểu trưng cho các hoạt động của tơi được sắp xếp
một cách hài hịa và cân đối, màu sắc của background cũng đã chuyển sang màu khác.

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 3/21


** Cách chèn mã nguồn CSS vào tệp HTML:
Có 3 cách chèn mã nguồn CSS vào tệp HTML:

§

Inline: viết trực tiếp trên thẻ thơng qua thuộc tính style

Trong thẻ HTML chúng ta tạo một thuộc tính style=“code.css”. Đặt trong phần <body>.
Ví dụ:
<div style=“background:green; color black”> Chào mừng bạn tới chương trình học Web</div>
Kết quả:

§

Internal: viết lại file html hiện tại và nằm trong thẻ style

Sẽ viết code bên trong thẻ
<style type= “text/css”> Code CSS</style>
Ví dụ:
<style type =“text/css”>
div{

background:green;
Color:black;
}
</style>
<div> Chào mừng bạn tới chương trình học Web</div>
Kết quả:

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 4/21


§

External: viết riêng một thẻ có phần đi .css rồi sau đó import vào bằng thẻ link

Bước 1: Tạo file style.css
div{
background:green;
Color:black;
}
Bước 2: Tạo một file index.html cùng cấp với file style.css
<link href=“style.css” rel=“stylesheet”/>
<div> Chào mừng bạn tới chương trình học Web</div>
Lưu ý:
Trong thẻ link có một thẻ href, bạn sẽ truyền đường dẫn đến file CSS
rel=“stylesheet” báo cho trình duyệt đây là file CSS.
b.

Sơ đồ và nguyên lý hoạt động của trang web trên mạng Internet


**Sơ đồ của trang web trên mạng Internet:

** Nguyên lý hoạt động:
Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 5/21


Trang web hoạt động trên mạng Internet dựa trên cơ chế tương tác của người dùng trên trình duyệt web
(web browser) với websever (trình chủ web) như sau:
1. Yêu cầu trang web bằng cách nhập URL của nó trong trình duyệt hoặc click vào 1 liên kết. URL
chứa tất cả các thông tin cần thiết để xác định một hồ sơ cụ thể trên mạng Internet hoặc trong
mạng máy tính.
2. Trình duyệt gửi yêu cầu đến máy chủ DNS
3. Hệ thống DNS trả kết quả phân tích tên miền trong đường dẫn đã gửi
4. Sau khi nhận được địa chỉ IP - nơi lấy dữ liệu, trình duyệt sẽ tìm đến địa chỉ IP đã nhận - tức máy
chủ chứa nội dung website.
5. Máy chủ web nhận được yêu cầu truy xuất nội dung website và nó gửi một tập hợp các file bao
gồm HTML, CSS, các tập tin đa phương tiện khác như âm thanh, hình ảnh cho trình duyệt
6. Trình duyệt “dịch” các file mà máy chủ đã gửi thành trang web mà chúng ta nhận thấy trên màn
hình.
Nếu trang web có những phần từ âm thanh, hình ảnh hay những thành phần đa phương tiện thì trình
duyệt dựa vào những nội dung được thiết kế của trang web để yêu cầu máy chủ gửi xuống các tập tin
tương ứng, các tập tin này sẽ được lắp ghép theo cách thiết kế của trang web.
Câu 2:
 CODE:

$host = 'localhost';

$username = 'root';
$password = '123456';
$dbname = 'ql_hang';
$connect = new mysqli($host,$username,$password,$dbname);

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 6/21


if($connect->connect_error){
echo('lỗi kết nối: '.$connect->connect_error);
}
$sql_all = "SELECT * FROM hang";
$result = $connect->query($sql_all);
$row = $result->fetch_all(MYSQLI_ASSOC);
if (isset($_GET['action'])){
if ($_GET['action'] == 'update'){
$edit_id = $_GET['edit_id'];
$mahang = $_GET['mahang'];
$tenhang = $_GET['tenhang'];
$dongia = $_GET['dongia'];
$loai = $_GET['loai'];
$sql = "UPDATE hang SET
`mahang`='$mahang',`tenhang`='$tenhang',`dongia`='$dongia',`loai`='$loai' WHERE `hang`.`mahang` =
'$edit_id'";

$result = $connect->query($sql);
if ($result){
header("location:index.php");

}

} else if ($_GET['action'] == 'create'){

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 7/21


$mahang = $_GET['mahang'];
$tenhang = $_GET['tenhang'];
$dongia = $_GET['dongia'];
$loai = $_GET['loai'];
$sql = "INSERT INTO `hang`(`mahang`, `tenhang`, `dongia`, `loai`) VALUES
('$mahang','$tenhang','$dongia','$loai')";
$result = $connect->query($sql);
if ($result){
header("location:index.php");
}
}
}
if (isset($_GET['edit_id'])){
$sql = "SELECT * FROM hang WHERE mahang = '{$_GET['edit_id']}'";
$result = $connect->query($sql);
$hang = $result->fetch_assoc();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 8/21


<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QUẢN LÝ HÀNG "QUYN"</title>
<style>
.container {
width: 28%;
margin: auto;
}
form {
margin: auto;
border-radius: 5px;
}
form input{
margin-top: 10px;
width: 100%;
padding: 10px;
border-radius: 4px;
box-sizing: border-box;
margin: 10px 0px;
}
form select {
margin-top: 10px;


Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 9/21


width: 100%;
padding: 10px;
border-radius: 4px;
box-sizing: border-box;
margin: 10px 0px;
}
button[type=button] {
margin-top: 10px;
background-color: wheat;
color: black;
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.table_result {
padding: 10px;
margin: auto;
text-align: center;
}
table {
border-collapse: collapse;

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731


Trang 10/21


width: 50%;
margin: auto;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="container">
<form id="form" method="GET">
<input type="hidden" name="action" id="action">
<label for="mahang"> Mã hàng </label>





<label for="tenhang"> Tên hàng </label>





<label for="dongia"> Đơn giá</label>



Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 11/21






<label for="loai"> Loại </label>


<select name="loai">
<option value="Laptop">Laptop</option>
<option value="Desktop">Desktop</option>
<option value="Telephone">Telephone</option>
</select>


<button type="button" id="createbutton">Thêm mới</button>
<button type="button" id="updatebutton">Sửa</button>
</form>
</div>
<div>
<table border="1">
<thead>
<tr>
<th> STT </th>
<th> Mã hàng </th>
<th> Tên hàng </th>

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 12/21



<th> Đơn giá </th>
<th> Loại hàng </th>
<th>Sửa</th>
</tr>
</thead>
<tbody>
<?php $count = 0; foreach($row as $row){ $count+=1; ?>
<tr>
<td>
<?php echo($count) ?>
</td>
<td>
<?php echo($row['mahang']) ?>
</td>
<td>
<?php echo($row['tenhang']) ?>
</td>
<td>
<?php echo($row['dongia']) ?>
</td>
<td>
<?php echo($row['loai']) ?>

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 13/21


</td>
<td>


if (mahang.value == "" || tenhang.value == "" || dongia.value == ""){
alert('Vui lòng không để trống');
} else {

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 14/21


action.value = 'create';
let form = document.getElementById('form');
form.submit();
}

})
updatebutton.addEventListener("click",function(){

if (mahang.value == "" || tenhang.value == "" || dongia.value == ""){
alert('Vui lịng khơng để trống');
} else {
action.value = 'update';
let form = document.getElementById('form');
form.submit();
}
})
</script>
</body>
</html>

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 15/21


 Bảng dữ liệu thu được trong MySQL



Cơ sở dữ liệu “ql_hang”:



Bảng “hang”:


Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 16/21




Cơ sở dữ liệu bảng “hang”:

** Đây là cơ sở dữ liệu khi chưa thêm mới giá trị

**Đây là cơ sở dữ liệu khi đã thêm mới giá trị
Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 17/21


 GIAO DIỆN
Đây là giao diện khi chưa thêm mới sản phẩm HP Desktop P4 3.2 và trong form chưa điền bất kỳ sản
phẩm nào.

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 18/21


Thì khi bấm vào ơ “Thêm mới” sẽ hiện ra “localhost cho biết ‘Vui lịng khơng để trống’” thì lúc này ta
sẽ bấm vào “OK” để có thể thực hiện lại.

Và đây là giao diện khi đã nhập đầy đủ thông tin vào “form” ta nhấn “Thêm mới” sẽ hiện thị ra như sau:


Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 19/21


Như vậy, ta đã tạo ra được một trang web:



Sửa

Khi ta bấm vào “edit” thì thơng tin của hàng sẽ được hiển thị trên form như sau:
Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 20/21


Ở đây, tôi đã chọn sửa giá lên “5000000” và sau đó bấm vào ơ “Sửa” và kết quả trả về như sau:

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 21/21


---Hết---

Họ tên SV/HV: Nguyễn Thị Quyên - Mã LHP: 2176ECIT0731

Trang 22/21




Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay
×