Lời giải đề 4

TRƯỜNG ĐẠI HỌC THƯƠNG MẠI
HỌC KỲ I NĂM HỌC 2021 – 2022

(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 Website Số báo danh: 19
Mã số đề thi: 04 Lớp: 2176ECIT0731
Ngày thi: 29/10/2021 Số trang: 11 Họ và tên: Nguyễn Thị Thùy Linh
Điểm kết luận:
GV chấm thi 1: …….………………………......
GV chấm thi 2: …….………………………......
Câu 1:
1. Phân biệt các khái niệm Web tĩnh, Web động; Webpage, Website
Web tĩnh Web động
- Nội dung không thay đổi, được trả về - Nội dung thay đổi theo từng yêu cầu của
như nhau đối với tất cả yêu cầu của người dùng
người dùng - Viết bằng HTML và các ngôn ngữ lập
- Được viết bằng HTML, chỉ người xây trình phía server, người dùng có thể thay
dựng web mới thay đổi được đổi được
- Khả năng tương tác yếu - Tương tác mạnh
- Hoạt động như một file server
Ví dụ:
Web tĩnh: http://info.cern.ch/hypertext/WWW/TheProject.html
Họ tên SV/HV: Nguyễn Thị Thùy Linh - Mã LHP: 2176ECIT0731 Trang 1/11
Web động: https://www.facebook.com/
Website Webpage
- Một vùng lớn với một lượng lớn thông - Một phần nhỏ của Website được thu hẹp
tín khác nhau với nội dung cụ thể
- Chức nhiều thông tin dành cho nhiều - Chỉ phục vụ cho một mục đích, nhu cầu
người với nhiều mục đích, nhu cầu khác cụ thể
nhau - Có thể viết bằng nhiều ngôn ngữ nhưng
- Website bao gồm nhiều Webpage kết quả trả về client là HTML
2. Các bước trong xây dựng Website

Bước 1: Thu thập thông tin, xác định yêu cầu
Đây là bước quan trọng nhất quá trình thiết kế Website vì nó quyết định việc Website khi hoàn
thành có đáp ứng được yêu cầu hay không
Trong bước này cần tìm hiểu:
 Mục đích: Xây dựng website này để làm gì? Để cung cấp thông tin, quảng bá dịch vụ hay
buôn bán sản phẩm
 Mục tiêu: Website này mang lại những gì? Kiếm tiền và chia sẻ thông tin là hai trong số
những mục tiêu phổ biến khi thiết kế website
 Đối tượng: Những nhóm đối tượng nào sẽ giúp website đạt được mục tiêu đề ra? Nhóm
người dùng như thế nào sẽ muốn ghé thăm website? Xem xét những yếu tố như độ tuổi, giới
tính, sở thích sẽ giúp xác định được phong cách thiết kế phù hợp với website
 Nội dung: Nhóm đối tượng website hướng đến sẽ mong đợi những loại thông tin gì? Họ có
tìm kiếm những nội dung cụ thể như thông số sản phẩm, dịch vụ, … không?
Bước 2: Phân tích và lên kế hoạch
Dựa vào thông tin thu thập được ở bước trên, người thiết kế phải phân tích yêu cầu để đưa ra
quyết định lựa chọn công nghệ hay kĩ thuật nào để thiết kế website.
Lập sitemap (sơ đồ của website) bao gồm tất cả các mục thông tin, cấu trúc trên website cùng
mô tả ngắn gọn về chúng
Bước 3: Thiết kế giao diện
Giao diện được thiết kế ra ngoài việc đáp ứng đúng yêu cầu còn phải thu hút người truy cập. Đối
tượng sử dụng là yếu tố quan trọng cần được chú trọng khi thiết kế giao diện. Người thiết kế
phải dựa vào đối tượng rồi sau đó lên ý tưởng thiết kế giao diện cho phù hợp
Bước 4: Thiết kế nội dung
Trong bước này người thiết kế sẽ dựa vào sitemap để triển khai bố cục website. Sau khi hoàn
thành khung của website, phần nội dung sẽ được phân bố vào những khu vực phù hợp trên
website. Ví dụ về một website bán hàng, phần nội dung sẽ gồm các tính năng:
(1) Trang chủ
(2) Sản phẩm
(3) Đặt hàng
(4) Thanh toán
(5) Liên hệ với người bán
Bước 5: Kiểm tra và vận hành
Đây là bước thiết kế website cuối cùng.
Các chi tiết còn thiếu sót sẽ được hoàn thiện trước khi chuẩn bị chạy thử website. Việc lập trình
web với những công cụ chuyên dùng trong thiết kế web như HTML và CSS cũng có thể xảy ra
lỗi nhập liệu.
Bên cạnh đó, website cũng cần được kiểm tra chức năng form, script, các vấn đề về tương thích.
Câu 2:
*Cơ sở dữ liệu
Database “QL_HANG”
Bảng “LOAIHANG”
Bảng “Hang”
*Code
<?php
$username = 'root';
$password = '';
$host = 'localhost';
$dbname = 'ql_hang';
$connect = new mysqli($host, $username, $password,
$dbname); if ($connect->connect_error){
die('lỗi kết nối: ');
}
//Tạo câu truy vấn

$sql ="SELECT * FROM `hang` WHERE 1";
$data = $connect -> query($sql);
$data_hang = $data ->fetch_all(MYSQLI_ASSOC);
//Lấy dữ liệu từ bảng loại hàng

$sql ="SELECT * FROM `loaihang` WHERE 1";
$data = $connect -> query($sql);
$data_loaihang = $data ->fetch_all(MYSQLI_ASSOC);
//Thêm dữ liệu vào database

if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$mahang = $_POST['mahang'];
$tenhang = $_POST['tenhang'];
$dongia = $_POST['dongia'];
$loai = $_POST['loai'];
if ($mahang != '' && $tenhang != '' && $dongia != ''){
$sql = "INSERT INTO `hang`(`mahang`, `tenhang`, `dongia`, `loai`)
VALUES ('$mahang','$tenhang','$dongia','$loai')";
$result = $connect->query($sql);
if ($result){
header('Refresh:0');
} else {
echo('Thêm dữ liệu thất bại!');
}
} else {
echo('Vui lòng không để trống thông tin!');
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>


<style>
*{
box-sizing: border-box
}
body{
font-family: Montserrat, sans-serif;
}
h1
{ text-align: center;
color: #F27405;
font-size: 30px;
margin-top: 50px;
}
.input-form{
width: 500px;
height: 300px;
margin-left:
430px;
}
label{
color: #0367A6;
font-weight:
600;
}
input,select{
width: 500px;
height: 30px;
margin: 5px 0 10px
0; border-radius:
5px; border: none;
box-shadow:2px 2px 5px rgba(0,0,0,0.2);
}
button{
margin-left: 180px;
background-color: #F27405;
color: white;
border: none;
width: 150px;
height: 30px;
border-radius:
5px;
box-shadow:2px 2px 5px
rgba(0,0,0,0.2); font-weight: 600;
}
.view{
margin: auto;
font-size:
14px;
}
table{
border-collapse: collapse;
width: 900px;
}
th, td {
border: 2px solid #0367A6;
padding: 7px;
}
</style>
</head>
<body>
<h1>THÔNG TIN SẢN PHẨM</h1>
<div class="input-form">
<form id="form" method="POST">
<label for="mahang">Mã hàng</label><br>
<input type="text" id="mahang" name="mahang" placeholder="Nhập mã sản
phẩm"><br>
<label for="tenhang">Tên hàng</label><br>
<input type="text" id="tenhang" name="tenhang" placeholder="Nhập tên sản
phẩm"><br>
<label for="dongia">Đơn giá</label><br>
<input type="text" id="dongia" name="dongia" placeholder="Nhập giá sản
phẩm"><br>
<label for="loai">Loại hàng</label><br>
<select name="loai" id="loai">
<?php
foreac
h($dat
a_loai
hang
as
$loai)
{ ?>
<option value="<?php echo($loai['maloai']) ?>"><?php
echo($loai['tenloai']) ?></option>
<?php } ?>
</select><br>
<button type="submit" id="submitButton">THÊM MỚI</button>
</form>
</div>
<table class="view">
<thead>
<tr>
<th>STT</th>
<th>Mã hàng</th>
<th>Tên hàng</th>
<th>Đơn giá</th>
<th>Loại</th>
</tr>
</thead>
<tbody>
<?php $count = 0; foreach($data_hang 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
foreach($data_loaihang as $loai){
if ($row['loai'] == $loai['maloai']){
echo($loai['tenloai']);
}
}
?>
</td>
</tr>
<?php } ?>
</tbody>
</table>

<script>
let submitButton = document.getElementById('submitButton');
let mahang = document.getElementById('mahang');
let tenhang =
document.getElementById('tenhang'); let dongia =
document.getElementById('dongia'); let loai =
document.getElementById('loai');
submitButton.addEventListener("click",function(){
if (mahang.value == "" || tenhang.value == "" || dongia.value == ""){
alert('Vui lòng điền đầy đủ thông tin!');
} else {
action.value = 'create';
let form =
document.getElementById('form');
form.submit();
}
})
</script>
</body>
*Giao diện
*Kết quả xử lí
(1) Khi nhập thiếu thông tin
(2) Tiến hành nhập thông tin vào form
(3) Sau khi nhấn nút “THÊM MỚI”
Bảng “Hang” sau khi nhấn nút “THÊM MỚI”
---Hết---

Lời giải đề 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lời giải đề 4

Uploaded by

Copyright:

Available Formats

TRƯỜNG ĐẠI HỌC THƯƠNG MẠI

HỌC KỲ I NĂM HỌC 2021 – 2022

GV chấm thi 2: …….………………………......

2. Các bước trong xây dựng Website

//Tạo câu truy vấn

//Lấy dữ liệu từ bảng loại hàng

//Thêm dữ liệu vào database

(2) Tiến hành nhập thông tin vào form

(3) Sau khi nhấn nút “THÊM MỚI”

You might also like