Professional Documents
Culture Documents
BÀI THẢO LUẬN THIẾT KẾ VÀ TRIỂN KHAI WEBSITE
BÀI THẢO LUẬN THIẾT KẾ VÀ TRIỂN KHAI WEBSITE
Mỗi tầng có một chức năng riêng và chỉ giao tiếp với các tầng tiếp giáp với nó,
mọi sự thay đổi về vị trí các tầng trong kiến trúc trên đều không được chấp nhận.
Tầng ứng dụng (Application Layer): là tầng duy nhất tương tác trực tiếp
với tiến trình ứng dụng, có trách nhiệm cung cấp giao diện cũng như các
thao tác dữ liệu giúp người dùng và phần mềm ứng dụng tương tác với
nhau. Một số giao thức có trong tầng ứng dụng như: HTTP, FTP, POP,
DHCP,…
Tầng trình diễn (Presentation Layer): là tầng ngay dưới tầng ứng dụng,
đáp ứng các nhu cầu của tầng ứng dụng: phiên dịch, mã hóa, giải mã, nén
dữ liệu. Phiên dịch dữ liệu theo cú pháp mà ứng dụng có thể hiểu, mã hóa
dữ liệu gửi đi cũng như giải mã dữ liệu nhận, nén dữ liệu trước khi truyền
xuống tầng phiên.
Tầng phiên (Session Layer): là tầng ngay dưới tầng trình diễn, cung cấp
các nhu cầu dịch vụ cho tầng trình diễn, chịu trách nhiệm đóng và mở luồng
giao tiếp giữa hai thiết bị, thời gian giữa mở và đóng được gọi là phiên, nó
đảm bảo phiên mở đủ lâu để dữ liệu có thể gửi đi và đóng đủ nhanh để
tránh lãng phí tài nguyên.
Tầng giao vận (Transport Layer): là tầng ngay dưới tầng phiên, đáp ứng
các nhu cầu của tầng phiên, chịu trách nhiệm thiết lập kết nối giữa hai thiết
bị, nó nhận dữ liệu từ tầng phiên rồi xử lý để gửi xuống tầng dưới cũng như
nhận dữ liệu từ tầng dưới xử lý để chuyển lên tầng phiên.
Tầng giao vận có thể cung cấp dịch vụ kiểm soát luồng và kiểm soát lỗi để
đảm bảo dữ liệu được chuyển đi được chính xác và không quá tải bên nhận.
Tầng mạng (Network Layer): đáp ứng các nhu cầu của tầng giao vận,
chịu trách nhiệm giúp dữ liệu có thể truyền giữa các thiết bị ở các mạng
khác nhau. Tầng mạng còn cung cấp các thuật toán dò đường cho các bộ
định tuyến để xác định đường truyền vật lý tốt nhất cho dữ liệu.
Tầng liên kết dữ liệu (Data Link Layer): đáp ứng các nhu cầu của tầng
mạng, hỗ trợ dữ liệu có thể được tuyền đi giữa các thiết bị trong cùng một
mạng.
Tầng vật lý (Physical Layer): bao gồm các thiết bị phần cứng giúp truyển
tải dữ liệu như cáp, bộ định tuyến,…. Ở tầng này dữ kiệu được truyền tải
dưới dạng bit 0 và 1.
1.3. Ưu điểm và nhược điểm
Ưu điểm:
Mỗi tầng có 1 cấu trúc và chức năng riêng nên dễ dàng xây dựng và sửa chữa.
Có thể tích hợp trong nhiều mạng lưới khác nhau.
Hỗ trợ kết nối có liên kết và kết nối phi liên kết.
Nhược điểm:
Tầng phiên và tầng trình diễn thường không được sử dụng nhiều so với các
tầng khác vì chức năng hạn hẹp của nó.
Không hỗ trợ các giao thức, không định nghĩa bất kì giao thức nào.
Nhiều dịch vụ trùng lặp tại các tầng, ví dụ tầng mạng và tầng liên kết dữ liệu.
Các tầng không thể hoạt động song song, tầng dưới phải chờ dữ liệu từ tầng
trên.
2. Mô hình TCP/IP
2.1 Lịch sử
Năm 1974, Vin Cert và Robert Kahn công bố bài báo “A Protocol for Packet
Network Interconnection” hay còn gọi là giao thức kết nối mạng gói, nó miêu tả về giao
thức TCP (Transmission Control Protocol).
Đến năm 1978, giao thức trên sau khi được phát triển đã đổi tên thành
Transnission Control Protocol/Internet Protocol và chính thức thay thế cho giao thức
NCP (Network Control Protocol) của mạng lưới ARPAnet thời đó.
ARPAnet không còn tồn tại kể từ năm 1990 nhưng từ đó TCP/IP vẫn được phát
triển để đáp ứng các yêu cầu thay đổi của Internet.
2.2 Tổng quan về mô hình TCP/IP
Giống với OSI, mô hình TCP/IP cũng có kiến trúc phân tầng cho phép dữ liệu
được truyền tải thông qua các giao thức được tích hợp sẵn. TCP/IP chỉ có 4 tầng so với 7
tầng của OSI, thực chất 4 tầng đó là sự kết hợp của các tầng trong mô hình OSI nhưng
chức năng cũng như tính chất của các tầng trong TCP/IP có sự thay đổi so với OSI.
Trong mô hình TCP/IP mỗi tầng được phân một chức năng riêng và có thể giao
tiếp với các tầng kề bên nó, việc thay đổi vị trí các tầng cũng không được chấp nhận
trong mô hình này.
Tầng ứng dụng: có nhiệm vụ tương tác trực tiếp với tiến trình ứng dụng,
cung cấp giao diện giữa người dùng và ứng dụng. Đôi khi tầng ứng dụng
của TCP/IP bao gồm các chức năng của tầng phiên, tầng trình diễn bên mô
hình OSI.
Tầng giao vận: đáp ứng nhu cầu của tầng ứng dụng, cung cấp các giao
thức giúp dữ liệu được vận chuyển từ tiến trình ứng dụng ở hệ thống nguồn
đến tiến trình ứng dụng ở hệ thống đích. Ngoài ra, còn cung cấp các dịch vụ
kiểm soát luồng, kiểm tra lỗi gói tin, gửi xác nhận khi vận chuyển thành
công. Một vài giao thức thông dụng nhất hiện nay trong tầng giao vận là
TCP và UDP.
Tầng mạng: đáp ứng nhu cầu của tầng giao vận, có nhiệm vụ dẫn đường
cho dữ liệu có thể được vận chuyển từ điểm đầu đến điểm đích an toàn, nó
tìm kiếm đường truyền dữ liệu tốt nhất thông qua các giao thức cũng như
các thuật toán dò đường được tích hợp trên các bộ định tuyến (Routing).
Một vài giao thức có trong tầng mạng: IP, ICMP, IGMP,…
Tầng liên kết (Network Access Layer): đáp ứng nhu cầu của tầng mạng,
nó đóng vai trò như tầng liên kết dữ liệu và tầng vật lý của mô hình OSI.
Tầng liên kết nhận dữ liệu dưới dạng bit sau đó đưa dữ liệu vào trong 1 gói
dữ liệu rồi gửi lên mạng lưới máy tính để truyền đến điểm đích.
2.3 Ưu điểm và nhược điểm
Ưu điểm:
Hỗ trợ nhiều giao thức định tuyến.
Hoạt động độc lập với hệ điều hành.
Thiết lập kết nối giữa các loại máy tính khác nhau.
Có kiến trúc phân tầng.
Hỗ trợ kết nối có liên kết và kết nối phi liên kết.
Nhược điểm:
Khó khăn trong việc thay thế các giao thức mới.
Một tầng có nhiều chức năng nên phức tạp hơn so với mô hình OSI.
Không có sự phân biệt dõ dàng giữa dịch vụ, giao diện và giao thức.
Liên kết chức Tầng trình diễn và tầng phiên kết Mỗi tầng khác nhau sẽ thực hiện
năng tầng hợp với nhau trong tầng ứng dụng một nhiệm vụ khác nhau, không có
sự kết hợp giữa bất cứ tầng nào
Phương pháp Theo chiều ngang Theo chiều dọc
tiếp cận
Thiết kế Các giao thức được thiết kế trước Phát triển mô hình trước sau đó sẽ
sau đó phát triển mô hình phát triển giao thức
Truyền thông Hỗ trợ truyền thông không kết nối Hỗ trợ cả kết nối định tuyến và
từ tầng mạng không dây
Tính phụ Phụ thuộc vào giao thức Giao thức độc lập
thuộc
Độ tin cậy và Biết đến như một mô hình cũ, Được chuẩn hóa, độ tin cậy cao, sử
độ phổ biến lượng sử dụng hạn chế dụng phố biến trên toàn cầu
Internet Protocol là giao thức chính trong Internet protocol suite để chuyển tiếp dữ
liệu qua mạng. Chức năng định tuyến của Internet Protocol về cơ bản giúp thiết lập
Internet. Trước đây, giao thức này là datagram service không kết nối trong Transmission
Control Program (TCP) ban đầu. Do đó, Internet protocol suite còn được gọi là TCP/IP.
4. Protocol Stack
Protocol Stack là tập hợp đầy đủ các lớp giao thức, hoạt động cùng nhau để cung cấp
khả năng kết nối mạng.
Cổng mặc định của HTTP là 80 và 443. Hai cổng này đều được bảo mật.
Câu 2:
Đề tài: Website về giới thiệu và mua bán ô tô
Nêu mục đích trang web:
- Tăng cơ sở khách hàng hiện có, tiếp cận khách hàng mới và tăng chuyển đổi thành
khách hàng tiềm năng
- Nơi giao tiếp hiệu quả với khách hàng
- Cung cấp thông tin, cũng như các sản phẩm, dịch vụ đang cung cấp.
- Xây dựng hình ảnh doanh nghiệp
<div class="footer">
<div class="about">
<h2>About Us</h2>
<a id="trai" href="#"><img src="pictures/Screenshot 2021-04-09 000706.png"
width="70px" alt=""></a>
<p id="phai">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi,
similique.</p>
</div>
<div class="contact">
<h2>Contacts</h2>
<p><span>Email:</span> autoworld@gmail.com</p>
<p><span>Tel:</span> 1 800 123 4567</p>
</div>
<div class="link">
<p>buibichphuong© All Right Reserved</p>
</div>
</div>
</div>
</body>
</html>
- CSS:
*{
margin: 0;
padding: 0;
/*font-family: tahoma, arial, sans-serif, 'lucida grande';*/
}
a{
text-decoration: none;
color: #696969;
}
a:hover, a:hover p{
color: #c1e1ec;
}
p{
font-size: 18px;
}
.container{
width: 1200px;
margin: auto;
}
.menu{
margin-top: 30px;
margin-bottom: 20px;
text-align: center;
}
.menu ul li{
display: inline-block;
padding: 10px 20px;
text-transform: uppercase;
}
.menu img{
margin: 0px 15px -20px;
}
.menu img:hover{
opacity: 0;
}
.slice{
margin-top: 30px;
position: relative;
}
.slice .left{
width: 510px;
position: absolute;
left: 75px;
/*top: 180px;*/
top: 190px;
}
.slice .left h2{
font-size: 75px;
color: #050505;
margin-top: -50px;
}
.left p{
margin-top: 10px;
}
.btn{
padding: 15px 55px;
background-color: #758dba;
border-radius: 30px;
color: #fff;
font-size: 18px;
text-transform: uppercase;
cursor: pointer;
border: none;
margin-top: 10px;
}
.btn1{
padding: 15px 55px;
background-color: none;
/*border-radius: 30px;*/
color: black;
font-size: 18px;
text-transform: uppercase;
cursor: pointer;
border: none;
margin-top: 40px;
}
.btn2{
padding: 15px 55px;
background-color: none;
color: black;
font-size: 18px;
text-transform: uppercase;
cursor: pointer;
border: none;
margin-top: 500px;
}
.btn:hover{
background-color: grey;
}
.slice .right {
position: absolute;
bottom: 20px;
right: 20px;
}
.hidden{
background-color: rgba(0, 0, 0, 0);
color: #fff;
margin-right: 20px;
border: none;
font-size: 40px;
cursor: pointer;
}
.hidden:hover{
color: lightblue;
}
/*BANNER*/
.banner{
margin-top: 20px;
}
.bannerLeft{
width: 680px;
height: 590px;
margin-right: 20px;
float: left;
background-image:
url('pictures/cq5dam.resized.img.890.medium.time1526634697085.jpg');
background-size: cover;
position: relative;
}
.bannerRight{
width: 500px;
height: 700px;
float: left;
background-image: url('pictures/Screenshot 2021-04-16 123334.png');
background-size: cover;
position: relative;
}
.textL{
position: absolute;
left: 30px;
bottom: 30px;
font-size: 60px;
color: #050505;
}
.view1{
position: absolute;
bottom: 50px;
left: 440px;
text-transform: uppercase;
}
.textR{
position: absolute;
left: 30px;
top: 80px;
font-size: 60px;
color: #050505;
}
.view2{
position: absolute;
left: 140px;
bottom: 20px;
text-transform: uppercase;
}
/* CONTENT */
#title{
margin-top: 50px;
margin-bottom: 30px;
font-size: 50px;
}
.sp, .ten, .gia, .mua{
width: 285px;
margin-left: 20px;
float: left;
}
.sp:first-child, .ten:first-child, .gia:first-child, .mua:first-child{
margin-left: 0;
}
.sp{
overflow: hidden;
margin-bottom: 20px;
}
.sp img:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
.sp img{
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-ms-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0);
}
.ten p{
color: #464444;
text-align: center;
margin-bottom: 20px;
font-size: 25px;
}
.gia{
text-align: center;
font-size: 40px;
font-weight: bold;
color: #818753;
margin-bottom: 20px;
}
.gia span{
font-size: 25px;
}
.mua{
text-align: center;
margin-top: 10px;
}
.layer4{
margin-bottom: 18px;
}
/* Banner 2 */
#baner1{
width: 680px;
height: 550px;
margin-right: 20px;
float: left;
position: relative;
background-image: url('pictures/Picture4.jpg');
background-repeat: no-repeat;
margin-top: 30px;
}
#baner2{
width: 450px;
height: 630px;
float: left;
background-image: url('pictures/Picture1.jpg');
background-repeat: no-repeat;
position: relative;
margin-top: 30px;
}
.textL2{
position: absolute;
top: 65px;
left: 50px;
font-size: 60px;
color: #050505;
}
.view3{
position: absolute;
top: 130px;
left: 55px;
text-transform: uppercase;
}
.textR2{
position: absolute;
left: 70px;
top: 60px;
font-size: 60px;
color: #050505;
}
.view4{
position: absolute;
top: 200px;
left: 70px;
text-transform: uppercase;
}
/* FOOTER */
.about{
margin-top: 80px;
width: 400px;
float: left;
margin-bottom: 80px;
}
.about #trai{
margin-top: 80px;
width: 70px;
height: 38px;
margin-top: 15px;
margin-right: 20px;
float: left;
}
.about #phai{
margin-top: 18px;
font-size: 15px;
width: 245px;
color: #6C6666;
float: left;
}
.contact{
margin-top: 80px;
width: 300px;
float: left;
}
.contact p{
margin-top: 80px;
font-size: 16px;
margin-top: 10px;
color: #6C6666;
}
.contact span{
font-size: 20px;
font-weight: bold;
}
.link{
margin-top: 80px;
width: 500px;
float: left;
}
.link p{
font-size: 16px;
margin-top: 45px;
color: #6C6666;
}
.form {
width: 300px;
border: 1px solid green;
padding: 20px;
margin: 0 auto;
font-weight: 700px;
}
.form input {
width: 100%;
padding: 10px 0;
}
- PHP:
<!-- <!-- <!-- <?php
header('Content-Type: text/html; charset=utf-8');
// Kết nối cơ sở dữ liệu
$conn = mysqli_connect('localhost', 'root', '', 'data1') or die ('Lỗi kết nối');
mysqli_set_charset($conn, "utf8");
if (empty($firstName)) {
array_push($errors, "First Name is required");
}
if (empty($lastName)) {
array_push($errors, "Last Name is required");
}
if (empty($phone)) {
array_push($errors, "Phone Number is required");
}
if (empty($email)) {
array_push($errors, "Email is required");
}
if (empty($address)) {
array_push($errors, "Address is required");
}
if (empty($dayOfBirth)) {
array_push($errors, "Day of Birth is required");
}
if (empty($whatCar)) {
array_push($errors, "Current vehicle is required");
}
if (empty($howLong)) {
array_push($errors, "Current vehicle is required");
}
if (empty($whenCar)) {
array_push($errors, "Current vehicle is required");
}
if (empty($whatCarTest)) {
array_push($errors, "Current vehicle is required");
}
// Kiểm tra username hoặc email có bị trùng hay không
$sql = "SELECT * FROM member WHERE firstName = '$firstName' OR email =
'$email'";
// Nếu kết quả trả về lớn hơn 1 thì nghĩa là username hoặc email đã tồn tại trong CSDL
if (mysqli_num_rows($result) > 0)
{
echo '<script language="javascript">alert("Bị trùng tên hoặc chưa nhập tên!");
window.location="formlt.php";</script>';
// Dừng chương trình
die ();
else {
$sql = "INSERT INTO member (firstName, lastName, phone, email, address,
dayOfBirth, whatCar, howLong, whenCar, whatCarTest ) VALUES
('$firstName','$lastName','$phone','$email', '$address', '$dayOfBirth', '$whatCar',
'$howLong', '$whenCar', '$whatCarTest')";
}
if (mysqli_query($conn, $sql)){
echo "First Name: ".$_POST['firstName']."<br/>";
echo "Last Name: ".$_POST['lastName']."<br/>";
echo "Phone Number: ".$_POST['phone']."<br/>";
echo "Email: ".$_POST['email']."<br/>";
echo "Address: " .$_POST['address']."<br/>";
echo "Birthday: " .$_POST['birthday']."<br/>";
echo "Current vehicle: " .$_POST['whatCar']."<br/>";
echo "How long have you owned the vehicle?: " .$_POST['howLong']."<br/>";
echo "When do you intend to buy a car?: " .$_POST['whenCar']."<br/>";
echo "Which car do you want to try ?: " .$_POST['whatCarTest']."<br/>";
}
else {
echo '<script language="javascript">alert("Có lỗi trong quá trình xử lý");
window.location="formlt.php";</script>';
}
?> --> --> -->
<?php
$servername = "localhost";
$database = "root";
$password = "";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $database);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully";
mysqli_close($conn);
<?php
$servername = "localhost";
$database = "data1";
$username = "root";
$password = "";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $database);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// echo "Connected successfully";
mysqli_close($conn);
?>
Trung tâm:
- Banner:
- Content:
- Banner
Footer: