You are on page 1of 36

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

KHOA THƯƠNG MẠI ĐIỆN TỬ

BÀI THẢO LUẬN


THIẾT KẾ VÀ TRIỂN KHAI WEBSITE

LỚP HỌC PHẦN : 2121ECIT0731


GIẢNG VIÊN : TRẦN THỊ NHUNG
Câu 1:
A . I. Tổng quan 2 mô hình TCP/IP và OSI
1. Mô hình OSI
1.1. Quá trình hình thành
Cuối năm 1970, có hai dự án được bắt đầu độc lập, một dự án do ISO
(International Standard Organization) phát triển, dự án còn lại do ITTCC (International
Telegraph and Telephone Consultative Committee) phát triển. Cả hai dự án đều hướng
đến việc xác định tiểu chuẩn cho thiết kế hệ thống mạng.
Vào năm 1983, hai dự án được kết hợp lại và định hình một tiêu chuẩn được gọi là
The Basic Reference Model for Open Systems Interconnection (Mô hình tham chiếu cơ
bản cho kết nối giữa các hệ thống mở) hay còn được gọi là OSI Reference Model.
Năm 1984, OSI hay Open Systems Interconnection chính thức được công bố bởi tổ chức
tiêu chuẩn quốc tế ISO và ITTCC.
1.2. Tổng quan về mô hình OSI
Mô hình OSI hay Open Systems Interconnection có nhiệm vụ thiết lập kết nối giữa
các thiết bị giao tiếp trên toàn cầu. OSI được coi là mã nguồn mở vì khả năng phù hợp
với mọi hệ thống mạng của nó. Mô hình cung cấp một tiêu chuẩn dưới dạng kiến trúc
phân tầng cho phép các hệ thống khác nhau có thể giao tiếp được với nhau, trong đó gồm
có 7 tầng với những cấu trúc và chức năng riêng đã được định nghĩa sẵn.

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.

II. So sánh 2 mô hình TCP/IP và OSI


1. Điểm giống nhau
 OSI và TCP/IP đều có kiến trúc phân lớp.
 OSI và TCP/IP đều có lớp Network và lớp Transport.
 OSI và TCP/IP cùng sử dụng kỹ thuật chuyển Packet.
2. Điểm khác nhau
TCP/IP OSI
(Tranmission Control Protocol / (Open Systems Interconnection)
Internet Protocol)
Bản chất Là giao thức mạng và vận chuyển Là cổng kết nối giữa mạng và người
trên mạng Internet dùng cuối
Kiến trúc tầng 4 lớp 7 lớp

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

B. Các giao thức mạng phổ biến hiện nay

1. Internet Protocol Suite (TCP/IP)


Internet Protocol Suite (bộ giao thức liên mạng) là tập hợp các giao thức thực thi
protocol stack (chồng giao thức) mà Internet chạy trên đó. TCP và IP là những giao thức
quan trọng trong Internet Protocol Suite - Transmission Control Protocol (TCP) và
Internet Protocol (IP). Internet Protocol Suite tương tự như mô hình OSI, nhưng có một
số khác biệt. Ngoài ra không phải tất cả các lớp (layer) đều tương ứng tốt.

2. Transmission Control Protocol (TCP)


Transmission Control Protocol (TCP) là giao thức cốt lõi của Internet Protocol Suite.
Transmission Control Protocol bắt nguồn từ việc thực thi mạng, bổ sung cho Internet
Protocol. Do đó, Internet Protocol Suite thường được gọi là TCP/IP. TCP cung cấp một
phương thức phân phối đáng tin cậy một luồng octet (khối dữ liệu có kích thước 8 bit)
qua mạng IP. Đặc điểm chính của TCP là khả năng đưa ra lệnh và kiểm tra lỗi. Tất cả các
ứng dụng Internet lớn như World Wide Web, email và truyền file đều dựa vào TCP.
3. Internet Protocol (IP)

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.

5. Hypertext Transfer Protocol (HTTP)


HTTP là nền tảng giao tiếp dữ liệu cho World Wide Web. Siêu văn bản (hypertext) là
văn bản có cấu trúc sử dụng các siêu liên kết giữa các node chứa văn bản. HTTP là giao
thức ứng dụng cho hệ thống thông tin hypermedia (siêu phương tiện) phân tán và kết hợp.

Cổng mặc định của HTTP là 80 và 443. Hai cổng này đều được bảo mật.

6. Hypertext Transfer Protocol over SSL/TLS (HTTPS)


HTTPS được sử dụng với HTTP để cung cấp các dịch vụ tương tự, nhưng với kết nối
bảo mật được cung cấp bởi SSL hoặc TLS.
Cổng mặc định của HTTPS là 443.

7. File Transfer Protocol (FTP)


FTP là giao thức phổ biến nhất được sử dụng cho mục đích truyền file trên Internet và
trong các mạng riêng.
Cổng mặc định của FTP là 20/21. SSH là phương thức chính được sử dụng để quản lý
các thiết bị mạng một cách an toàn ở cấp lệnh. SSH thường được sử dụng như sự thay thế
cho Telnet, vì giao thức này không hỗ trợ các kết nối an toàn.
Cổng mặc định của SSH là 22.
8. Telnet
Telnet là phương thức chính được sử dụng để quản lý các thiết bị mạng ở cấp lệnh.
Không giống như SSH, Telnet không cung cấp kết nối an toàn, mà chỉ cung cấp kết nối
không bảo mật cơ bản.
Cổng mặc định của Telnet là 23.

9. Simple Mail Transfer Protocol (SMTP)


SMTP được sử dụng với hai chức năng chính: Chuyển email từ mail server nguồn đến
mail server đích và chuyển email từ người dùng cuối sang hệ thống mail.
Cổng mặc định của SMTP là 25 và cổng SMTP được bảo mật (SMTPS) là 465
(Không phải tiêu chuẩn).
10. Domain name system(DNS0
Domain Name System (DNS) được sử dụng để chuyển đổi tên miền thành địa chỉ IP.
Hệ thống phân cấp DNS bao gồm máy chủ gốc, TLD và máy chủ có thẩm quyền.
Cổng mặc định của DNS là 53.

11. Post Office Protocol phiên bản 3 (POP 3)


Post Office Protocol phiên bản 3 là một trong hai giao thức chính được sử dụng để lấy
mail từ Internet. POP 3 rất đơn giản vì giao thức này cho phép client lấy nội dung hoàn
chỉnh từ hộp thư của server và xóa nội dung khỏi server đó.
Cổng mặc định của POP3 là 110 và cổng được bảo mật là 995.

12. Internet Message Access Protocol (IMAP)


IMAP phiên bản 3 là một giao thức chính khác được sử dụng để lấy thư từ máy chủ.
IMAP không xóa nội dung khỏi hộp thư của máy chủ.
Cổng mặc định của IMAP là 143 và cổng được bảo mật là 993.

13. Simple Network Management Protocol (SNMP)


Simple Network Management Protocol được sử dụng để quản lý mạng. SNMP có khả
năng giám sát, cấu hình và điều khiển các thiết bị mạng. SNMP trap cũng có thể được cấu
hình trên các thiết bị mạng, để thông báo cho máy chủ trung tâm khi xảy ra hành động cụ
thể.
Cổng mặc định của SNMP là 161/162.
C. Các nguyên tắc trong thiết kế và triển khai website
Thiết kế website Triển khai website
 Tổ chức website chặt chẽ và dễ sử  Kiểm tra thật kĩ website trước khi
dụng triển khai
 Sử dụng từ ngữ dễ hiểu  Thuê không gian lưu trữ web đủ
 Dễ dàng khám phá các đường link lớn và nên mua ở các tổ chức đáng
 Thời gian tải về nhanh tin cậy
 Tương thích với đa số trình duyệt  Nên có quá trình thử nghiệm trước
web khi đưa trang web vào hoạt động
chính thức
 Nâng cấp và bảo trì trang web
thường xuyên

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

 Các công cụ tạo lập web: HTML, CSS, PHP


- HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="thế giới xe ô tô" content="vinfast, audi">
    <link rel="stylesheet" type="text/css" href="style1.css">
    <title>Thế giới ô tô</title>
</head>
<body>
    <div class="container">
        <div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">New Car</a></li>
                <li><a href="#">Used Car</a></li>
                <a href="#"><img src="pictures/Screenshot 2021-04-09 000706.png"></a>
                <li><a href="#">Test Drive</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Service</a></li>                
            </ul>
        </div>
        
        <div class="slice">
            <img src="pictures/2.jpg" width="1200px" alt="">
            <div class="left">
                <h2><i>Auto World</i><br/>Thế giới xe hơi</h2>
                <!-- <h2>Thế giới xe hơi</h2> -->
                <p style="size: 22px">Progress is not just felt. It is experienced.</p>
                <button class="btn1">Discover Now</button>
            </div>
            <div class="right">
                <button class="hidden"><</button>
                <button class="hidden">></button>               
            </div>                      
        </div>
        <div class="banner">
                <a class="bannerLeft" href="#">
                    <p class="textL">Progress is not just felt.<br/><strong>It is experienced.</
strong></p>
                    <!-- <p class="view1">View all</p> -->
                </a>
                <a class="bannerRight" href="#">
                    <p class="textR"><i>Interior <strong>Upgrade</strong></i></p>
                    <p class="view2">On all order over $50!</p>
                </a>            
        </div>
        <div class="content">
            <p id="title">Featured <strong>Products</strong></p>
            <div class="layer1">
                <a class="sp" href="#">
                    <img src="pictures/cosySec (1).webp" alt="">
                </a>
                <a class="sp" href="#">
                    <img src="pictures/cosySec (2).webp" alt="">
                </a>
                <a class="sp" href="#">
                    <img width="265", height="175", src="pictures/bmw-x3-vermillian-
red.webp" alt="">
                </a>
                <a class="sp" href="#">
                    <img src="pictures/cosySec (3).webp" alt="">
                </a>
                
            </div>
            <div class="layer2">
                <div class="ten">
                    <p>BMW X1</p>
                    <p>Xăng</p>
                </div>
                <div class="ten">
                    <p>BMW X2</p>
                    <p>Xăng</p>
                    
                </div>
                <div class="ten">
                    <p>BMW X3</p>
                    <p>Xăng</p>
                </div>
                <div class="ten">
                    <p>BMW X4</p>
                    <p>Xăng</p>
                </div>
            </div>
            <div class="layer3">
                <p class="gia">Giá từ 1.859.000.000 VNĐ</p>
                <p class="gia">Giá từ 2.999.000.000 VNĐ</p>
                <p class="gia">Giá từ 3.999.000.000 VNĐ</p>
                <p class="gia">Giá từ 4.999.000.000 VNĐ</p>
            </div>
            <div class="layer4" >
                <div class="mua">
                    <button class="btn">Show more</button>
                </div>
                <div class="mua">
                    <button class="btn">Show more</button>
                </div>
                <div class="mua">
                    <button class="btn">Show more</button>
                </div>
                <div class="mua">
                    <button class="btn">Show more</button>
                </div>
            </div>
            <div class="layer5">
                <a class="sp" href="#">
                    <img src="pictures/cosySec (1).webp" alt="">
                </a>
                <a class="sp" href="#">
                    <img src="pictures/cosySec (2).webp" alt="">
                </a>
                <a class="sp" href="#">
                    <img width="265", height="175", src="pictures/bmw-x3-vermillian-
red.webp" alt="">
                </a>
                <a class="sp" href="#">
                    <img src="pictures/cosySec (3).webp" alt="">
                </a>                
            </div>
            <div class="layer6">
                <div class="ten">
                    <p>BMW X5</p>
                    <p>Xăng</p>
                </div>
                <div class="ten">
                    <p>BMW X6</p>
                    <p>Xăng</p>
                    
                </div>
                <div class="ten">
                    <p>Audi A4</p>
                    <p>Xăng</p>
                </div>
                <div class="ten">
                    <p>Audi A6 Sedan</p>
                    <p>Xăng</p>
                </div>
            </div>
            <div class="layer7">
                <p class="gia">Giá từ 5.859.000.000 VNĐ</p>
                <p class="gia">Giá từ 6.999.000.000 VNĐ</p>
                <p class="gia">Giá từ 7.999.000.000 VNĐ</p>
                <p class="gia">Giá từ 8.999.000.000 VNĐ</p>
            </div>
            <div class="layer8" >
                <div class="mua">
                    <button class="btn">Show more</button>
                </div>
                <div class="mua">
                    <button class="btn">Show more</button>
                </div>
                <div class="mua">
                    <button class="btn">Show more</button>
                </div>
                <div class="mua">
                    <button class="btn">Show more</button>
                </div>
            </div>
        </div>
        <div class="banner">
            <a  id="baner1" href="#">
                <p class="textL2"><i>Best <strong>Choice</strong></i></p>
                <p class="view3">view all</p>
            </a>
            <a id="baner2"  href="#">
                <p class="textR2">BMW <br/> <strong>X5</strong></p>
                <p class="view4">Request for Test Drive</p>
                <p align="center"><button  class="btn2">Discover Now</button></p>
            </a>
        </div>

        <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&copy; 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");

// Dùng isset để kiểm tra Form


if(isset($_POST['dangky'])){
$firstName = trim($_POST['firstName']);
$lastName = trim($_POST['lastName']);
$phone = trim($_POST['phone']);
$email = trim($_POST['email']);
$address = trim($_POST['address']);
$dayOfBirth = trim($_POST['dayOfBirth']);
$whatCar = trim($_POST['whatCar']);
$howLong = trim($_POST['howLong']);
$whenCar = trim($_POST['whenCar']);
$whatCarTest = trim($_POST['whatCarTest']);
}

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'";

// Thực thi câu truy vấn


$result = mysqli_query($conn, $sql);

// 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')";
}

echo '<script language="javascript">alert("Đăng ký thành công!");


window.location="formlt.php";</script>';

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);
?>

 Kiến trúc của web:


Header:

Trung tâm:

- Banner:
- Content:
- Banner
Footer:

You might also like