TRƯỜNG ĐẠI HỌC ĐẠI NAM

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO BÀI TẬP LỚN

MÔN THỰC TẬP CNTT3 – Thiết kế, lập trình Front-End
TÊN ĐỀ TÀI
Thiết kế, lập trình Fron-End Website giày

Giảng viên hướng dẫn: ThS Nguyễn Đức Thiện

Sinh viên thực hiện:
1. 1571020179: Dương Văn Môn
2. 1571020226: Phan Văn Sơn
3. 1571020209: Trần Trường Phước
4. 1571020206: Hoàng Minh Phụng

Hà Nội, tháng 12 năm 2022

 TRƯỜNG ĐẠI HỌC ĐẠI NAM
KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO BÀI TẬP LỚN

MÔN THỰC TẬP CNTT3 – Thiết kế, lập trình Front-End
TÊN ĐỀ TÀI
Thiết kế, lập trình Fron-End Website giày

Giảng viên hướng dẫn: ThS Nguyễn Đức Thiện

Sinh viên thực hiện:
1. 1571020179: Dương Văn Môn
2. 1571020226: Phan Văn Sơn
3. 1571020209: Trần Trường Phước
4. 1571020206: Hoàng Minh Phụng

Hà Nội, tháng 12 năm 2022

 MỞ ĐẦU

- Giới thiệu môn học: Lập trình Front end là việc sử dụng các ngôn ngữ HTML,
CSS hay ngôn ngữ lập trình Javascript để các lập trình viên thiết kế ra các giao
diện ứng dụng hoặc trang web cho người dùng. Những gì bạn nhìn thấy, “chạm”,
“lướt”, tương tác trên màn hình chính là kết quả của lập trình Front end

- Lý do chọn đề tài: Trong những năm gần đây, cùng với sự nâng cao của chất
lượng cuộc sống con người, nhu cầu mua sắm trang phục, phụ kiện, đặc biệt là
giày càng được đề cao và coi trọng. Giờ đây, chúng ta không chỉ coi giày là
phương tiện để di chuyển mà còn được coi như một công cụ để thể hiện cá tính
và phong cách thời trang của bản thân. Nhất là lúa tuổi thanh thiếu niên, những
người năng động và mạnh mẽ, họ cần có cho mình những đôi giày thật đẹp để
mang lại sự tự tin và thoải mái khi bước đi. Như chúng ta đã thấy trong thị
trường hiện nay thì việc cạnh tranh về kinh doanh ngày trở nên quyết liệt và hầu
hết những cửa hàng vừa và lớn đều chú tâm đến việc làm khách hàng thỏa mãn
và tiện lợi một cách tốt nhất. Biết được những nhu cầu đó, đề tài “Xây dựng
website bán bán giày thể thao MSP” được xây dựng nhằm đáp ứng cho mọi
người tiêu dùng khắp cả nước và thông qua hệ thống website này họ có thể đặt
mua các mặt hàng hay sản phẩm cần thiết. Không những thế nó còn giúp cửa
hàng có thể quản lý tốt việc mua bán giúp mang lại lợi ích kinh doanh hiệu quả
hơn.

- Nội dung ứng dụng các nội dung đã học vào đề tài: HTML, CSS, JS

- Danh sách thành viên: Dương Văn Môn, Phan Văn Sơn, Trần Trường Phước,
Hoàng Minh Phụng

- Phân công nhiệm vụ: Dương Văn Môn (Trang chủ + Word), Phan Văn Sơn +
Trần Trường Phước (Admin+Sản phẩm) , Hoàng Minh Phụng (Giới thiệu + Liên
hệ)
 LỜI CẢM ƠN

Lời đầu tiên, em xin gởi lời cảm ơn chân thành đến giáo viên hướng dẫn
ThS. Nguyễn Đức Thiện. Trong suốt thời gian học và làm bài tập lớn đã tận
tình hướng dẫn, định hướng và giúp đỡ cho em trong suốt quá trình thực hiện bài
tập lớn này.Đồng thời, em cũng xin cảm ơn các quý thầy cô trong trường Đại
Học Đại Nam đã truyền đạt những kiến thức cần thiết và những kinh nghiệm quý
báu cho em trong thời gian em học tập để em có thể thực hiện tốt bài tập này.
Trong quá trình thực hiện bài tập, do kiến thức và thời gian thực hiện còn hạn
chế nên không thể tránh khỏi những sai sót và thiếu sót. Vì vậy em mong quý
thầy cô thông cảm và góp ý để em có thể hoàn thiện bài tập. Và những lời góp ý
đó là những bước đệm để em có thể phát triển hơn sau này.

Em xin kính chúc toàn thể quý thầy,cô trường Đại Học Đại Nam lời chúc sức
khỏe và thành công trong công tác giảng dạy và học tập.

Em xin chân thành cảm ơn!

Hà Nội, Tháng 12, Năm 2022

Sinh viên thực hiện
Dương Văn Môn
Trần Trường Phước
Phan Văn Sơn
Hoàng Minh Phụng
 Chương 1 : Cơ sở lý thuyết về lập trình web Front-End
I. HTML
1. HTML là gì?
 HTML (HyperText Markup language) là ngôn ngữ đánh dấu siêu văn bản , dung
để tạo ra các trang web .
 HTML bao gồm một số tập hợp các thẻ dùng để :
 Định nghĩa cấu trúc của trang web.
 Định nghĩa nội dung của trang web
 Tạo các siêu liên kết để liên kết đến nhưng trang web khác.
 Chèn âm thanh, hình ảnh, video ,…. vào trang web.

2. Tập tin HTML là gì?

 Tập tin HTML là một loại tin text có chứa các thẻ HTML(tập tin có phần
mở rộng là .html hoặc .htm).
 Tập tin HTML còn được gọi là một trang web.
 Nếu cú pháp có bị sai thì trình duyệt vẫn không báo lỗi , nó chỉ hiển thị
không như ý muốn.

3. Cấu trúc cơ bản của HTML:

 Một tài liệu HTML luôn được gói trong cặp tag <html> và </html>
 Cặp tag <body> và </body> sẽ là nơi mô tả những gì có thể nhìn thấy của trang.
Như vậy, một trang web viết bằng html sẽ có cấu trúc cơ bản như sau:

<html>
   <body>
         Phần trình bày nội dung
   </body>
</html>

Ngoài phần body còn có phần head, được viết bởi cặp tag <head></head>.
Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm một cặp tag nữa, đó
là <title></title>. Giữa <title> và </title> là tên của trang web được hiển thị phía
trên cùng của menubar. Như vậy một trang web với lúc này sẽ có cấu trúc như sau:
 <head>
    <title>Tiêu đề của trang web</title>
</head>
<body>
    Phần trình bày nội dung
</body>
</html>

4. Thẻ trong HTML.

 Mỗi thẻ là một từ khóa được bao quanh bởi ngoặc nhọn (vd: <html>;
<head> ;<body>).
 Mỗi thẻ HTML thường bao gồm 1 cặp :thẻ mở (bắt đầu định dạng), thẻ đóng (kết
thúc định dạng).
 Thẻ đóng giống thẻ mở , nhưng ở thẻ đóng thì có thêm dấu gạch chéo “/”trước tên
thẻ (vd: </html>;</head>;</body>).
 Văn bản cần định dạng được đặt giữa thẻ đóng và thẻ mở:
 Các khoảng trắng dư thừa và ký tự xuống dòng sẽ bị bỏ qua.
 Có 2 loại thẻ :

 Thẻ đơn : Các thẻ chỉ có 1 thẻ mở ( vd: <img>)

 Thẻ kép là một cặp thẻ đóng và mở ( vd: <p></p> ;<i></i> ).
 Các thẻ được lồng vào nhau nhưng không chéo nhau.
Vd đúng : <p> Tôi là <b>sinh</b>viên</p>
Vd sai: <p> Tôi là <b>sinh</p>viên</b>

 Một số thẻ có thêm các thuộc tính.

 Dùng để chỉ định một số thuộc tính khác liên quan đến thẻ .
 Nếu có , sẽ được khai báo trong thẻ mở.
 Vd:<p color =”Red”> (color là một thuộc tính dùng chỉ màu sắc văn bản.)
 II. CSS

1. CSS là gì?
– CSS là viết tắt của cụm từ “Cascading Style Sheet”, nó là một ngôn ngữ quy định
cách trình bày của các thẻ html trên trang web. Là ngôn ngữ đang được sử dụng
rất nhiều trong lập trình web, có thể nói CSS ra đời đã tạo nên một cuộc cách
mạng. Đôi khi các bạn sẽ bối rối khi nhận thấy rằng các đoạn code mình viết hiển
thị không giống nhau trên các trình duyệt khác nhau, CSS sẽ giúp các bạn giải
quyết bài toán này.

– CSS quy định cách hiển thị nội dung của các thẻ HTML trên các trình duyệt gần
như giống nhau, bằng cách quy định các thuộc tính cho thẻ HTML đó. Phương
thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là
tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp
dụng các thuộc tính cần thay đổi lên vùng chọn đó.

Hình 1. Giới thiệu CSS

2. Tại sao phải học CSS?
– Css có thể tùy chỉnh bố cục định dạng hiển thị nội dung,màu sắc căn chỉnh màu
nền,đường viền,đổ bóng... cho các thẻ html . Nếu 1 website mà chỉ làm bằng html
không sử dụng css thì website đó nhìn sẽ rất thô xơ. Bạn có thể tưởng tượng nó
như 1 chiếc xe máy mà bỏ hết lớp sơn và áo bên ngoài chỉ còn lại mỗi bộ khung
và máy.
– CSS cung cấp cho bạn hàng trăm thuộc tính trình bày đành cho các đối tượng với
sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả.
 – Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt khác nhau.

3. Cấu trúc CSS.

Một đoạn CSS bao gồm 4 phần như thế này:

vùng chọn {
thuộc tính: giá trị;
thuộc tính:giá trị;
}

Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị
sẽ nằm bên trong cặp dấu ngoặc nhọn {}. Mỗi thuộc tính sẽ luôn có một giá trị
riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS.
Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một
dòng khai báo thuộc tính sẽ luôn có dấu chấm phẩy ở cuối. Một vùng chọn có thể
sử dụng không giới hạn thuộc tính.

VD:
.product-related-title p {
    font-family: var(--main-text-font);
    font-size: 14px;
    font-weight: bold;
    color: #333333;
}

4. Cách chèn CSS vào HTML.

Trên thực tế thì chúng ta có tới 3 cách hay được sử dụng chèn css vào website:
– Cách 1: Chèn nội dung CSS vào trong cặp thẻ <style></style> trong phần
<head></head> của trang web.

<!DOCTYPE html>
<html lang="en">
 <head>
<title>Cách chèn CSS vào html</title>
<style>
body{background: red;}
h1{ color:blue;font-size:12px;}
</style>
</head>
<body>
<h1>Cách 1</h1>
</body>
</html>

– Cách 2 :Chèn nội dung CSS vào trực tiếp thẻ mở thông qua thuộc tính style:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Cách chèn CSS vào html</title>
</head>
<body>
    <h1 style="color:blue;font-size:12px;">Cách 2</h1>
</body>
</html>

– Cách 3: Lưu nội dung CSS ra 1 file riêng có phần mở rộng là .css và chèn file
này vào website thông tin thẻ <link>, thường file css được chèn trong cặp thẻ
<head></head>

Sau khi tao file có tên style.css vs nội dung như sau:

body { backgroud:red;}
h1{font-size: 12px;color: blue;}

Lúc này chúng ta sẽ chèn file này vào website như sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Cách chèn CSS vào html</title>
    <link rel="stylesheet" href="style.css">
</head>
 <body>
    <h1>Cách2</h1>
</body>
</html>
III. JS

1. JavaScript là gì?

– JS (viết tắt của Javascript) là một nền tảng (cross-platform), ngôn ngữ kịch bản
hướng đối tượng (object-oriented). Nó là một ngôn ngữ nhỏ và nhẹ. Chạy trong
môi trường máy chủ lưu trữ (ví dụ: trình duyệt web), JavaScript có thể được
kết nối với các đối tượng của môi trường để cung cấp kiểm soát chương trình
đối với chúng.

– JavaScript là ngôn ngữ lập trình dựa trên logic. Nó có thể được sử dụng để sửa
đổi nội dung trang web. Và khiến nó hoạt động theo nhiều cách khác nhau để
đáp ứng với hành động của người dùng. Các cách sử dụng phổ biến cho
JavaScript bao gồm các hộp xác nhận, kêu gọi hành động và thêm các danh
tính mới vào thông tin hiện có.

Hình 2. JavaScript là một trong các ngôn ngữ lập trình đa nền tảng
2. Javascript dùng để làm gì:
– JavaScript có thể được ứng dụng trong rất nhiều lĩnh vực:
 Lập trình web
 Xây dựng ứng dụng cho website máy chủ
 Ứng dụng di động, app, trò chơi…

3. Lợi ích khi dùng Javascript:

Là một ngôn ngữ lập trình phổ biến sử dụng trên 92% nền tảng website hiện
nay, JavaScript đã thể hiện vai trò quan trọng với lĩnh vực này. Tầm quan trọng
của nó thể hiện qua các thao tác, công dụng như:
– Triển khai tập lệnh phía máy khách
– Viết mã phía máy chủ
– Thiết kế web responsive
– Google AMP
– Nhiều bộ chuyển đổi

Hình 3. JavaScript được ứng dụng rất nhiều trong việc tạo dựng website

4. Các thư viện Javascript phổ biến:

Hiện nay có rất nhiều thư viện và khung được viết từ Javascript như:
 jQuery: Chuyên về hiệu ứng.
 js: Chuyên xây dựng ứng dụng thời gian thực.
 AngularJS: Chuyên xây dựng ứng dụng trang cá nhân.
  ReactJS: Chuyên viết ứng dụng mobile.
 Một số thư viện khác như ExtJS, Sencha Touch,….

Hình 4. Ngôn ngữ Javascript có thể được viết bởi những lập trình viên tập sự

5. Làm thế nào để thêm JavaScript trên website của bạn?

Để thêm chuỗi code JavaScript vào trang web, bạn sẽ cần gắn tag
<script></script>. Ví dụ như sau:

<script type="text/javascript">
    Your JavaScript code
</script>

Với quy tắc cơ bản, bạn nên gắn JavaScript trong tag <header> cho website
của bạn trừ khi bạn muốn nó thực thi tại một thời điểm nhất định hoặc một yếu tố
nhất định của trang web. Bạn cũng có thể lưu code JavaScript dưới file riêng và
gọi nó lên mỗi khi cần trên website.
IV. Bootstrap
1. Giới thiệu về Bootstrap
 Bootstrap là framework HTML, CSS, và JavaScript phổ biến nhất để phát triển
các trang web có yếu tố tính năng phản hồi và tích hợp trên thiết bị di động. Nếu
 như bạn đang có nhu cầu muốn sở hữu một website chuẩn responsive, có khả
năng tương thích trên mọi trình duyệt và thiết bị di động thì chắc chắn công nghệ
này sẽ là thành phần lý tưởng không thể thiếu để dùng đến.
2. Bootstrap dùng để làm gì?
Bootstrap giúp quá trình phát triển web được nhanh và dễ dàng hơn. Bootstrap bao
gồm các mẫu thiết kế dựa trên HTML và CSS như typography, forms, buttons,
tables, navigation, modals, image carousels… cũng như các plugin JavaScript tùy
chọn
3. Lợi ích khi dùng Bootstrap

Phát triển giao diện nhanh chóng:  Dễ dàng phát triển giao diện website một
cách rất nhanh, nếu một trang bình thường thì có thể cắt xong trong một ngày
hoặc chưa tới một ngày. Chưa kể đến tính tương thích với các trình duyệt và thiết
bị di động

 Dễ học, dễ sử dụng: Cộng đồng đông đúc và tài liệu tham khảo rõ ràng chính là
sức mạnh của Bootstrap.

 Nền tảng tối ưu: Trong bootstrap đã tạo sẵn một thư viện để lưu trữ mà các nhà
thiết kế có thể sử dụng và tuỳ ý chỉnh sửa theo mục đích cá nhân. Điều này giúp
cho việc phát triển website trở nên nhanh chóng bởi vì có thể lựa chọn một mẫu có
sẵn phù hợp và thêm màu sắc, hình ảnh, video... là đã có ngay giao diện đẹp. Hơn
nữa, bootstrap sự tương thích với trình duyệt và thiết bị đã được kiểm tra nhiều
lần nên hoàn toàn có thể yên tâm với kết quả mình làm, thậm chí còn có thể bỏ
qua cả bước kiểm tra lại, và sẽ tiết kiệm được thời gian, tiền bạc cho website của
mình.

Giao diện đầy đủ, sang trọng: Giao diện của bootstrap có màu xám bạc rất sang
trọng và hỗ trợ gần như đầy đủ các thành phần mà một website hiện đại cần có.
Cầu trúc HTML rõ ràng giúp nhanh chóng nắm bắt được cách sử dụng và phát
triển. Không những vậy, bootstrap còn giúp website hiển thị tốt khi chúng ta co
dãn màn hình windows.

 Dễ dàng tuỳ biến: Để phù hợp cho nhiều loại website, bootstrap cũng hỗ trợ
thêm tính năng customizer, bạn có thể thay đổi gần như tất cả những thuộc tính
của nó để phù hợp với chương trình của . Nếu những tuỳ chình này vẫn không đáp
ứng được yêu cầu của mình, thì có thể hoàn toàn có thể chỉnh sửa trực tiếp trên mã
nguồn của bootstrap. Boostrap tương thích rất tốt với HTML5
 Hỗ trợ SEO tốt: Đây là lý do quan trọng nhất bởi vì hiện nay Google đã cập nhật
thuật toán tìm kiếm và Responsive là một yếu tố rất quan trọng để đưa từ khóa lên
top.
4. Những file chính của Bootstrap được nhiều người sử dụng

Bootstrap.css

Bootstrap.css là một framework CSS có chức năng sắp xếp và quản lý bố cục của trang
web. Trong khi HTML có nhiệm vụ quản lý cấu trúc và nội dung của trang web, CSS sẽ
xử lý bố cục của trang web. Vì vậy mà, cả hai cấu trúc này phải tồn tại song song để thực
hiện một hành động cụ thể.

Với những chức năng của nó, CSS cho phép bạn tạo giao diện thống nhất trên nhiều trang
web khác nhau. Giờ thì bạn không phải tốn thời gian với việc phải ngồi hàng giờ để chỉnh
sửa thủ công với những thay đổi độ rộng của đường viền.Với Bootstrap.css, tất cả những
gì bạn cần làm là dẫn các trang web đến file CSS.

Bất kỳ những thay đổi cần thiết có thể được thực hiện trong file đó.Các hàm CSS không
chỉ giới hạn ở kiểu văn bản vì chúng còn được sử dụng để định dạng bảng và bố cục hình
ảnh. Vì CSS có rất nhiều khai báo và bộ chọn, nên bạn cần mất một chút thời gian để
CSS ghi nhớ.

Bootstrap.JS

Bootstrap.JS là phần cốt lõi của Bootstrap bao gồm các file JavaScript đảm nhiệm cho
việc tương tác của website. Để giúp tiết kiệm thời gian viết cú pháp, các nhà phát triển sẽ
sử dụng đến jQuery. Bootstrap.JS có một thư viện JavaScript đa nền tảng với mã nguồn
mở phổ biến cho phép người dùng thêm mới các chức năng khác nhau vào trang
web.Dưới đây là một số chức năng mà jQuery đảm nhiệm:

 Thực hiện các yêu cầu của Ajax như: loại bỏ dữ liệu đến từ một vị trí khác nhau
một cách linh hoạt.
 Giúp tạo các tiện ích đơn giản và nhanh chóng bằng bộ sưu tập Plugin JavaScript.
 jQuery tạo hình động tùy chỉnh bằng các thuộc tính của CSS.
 Thêm các tính năng động cho nội dung các trang Web của bạn.
Tuy Bootstrap chỉ cần các thuộc tính Element HTML và CSS đã có thể hoạt động tốt,
nhưng vẫn cần đến jQuery để tạo thiết kế Responsive. Nếu không, bạn chỉ có thể sử dụng
các phần tĩnh của CSS mà thôi.

Glyphicons

Để tạo nên một giao diện trang web hoàn chỉnh không thể thiếu các icons. Chúng được sử
dụng để tạo liên kết với các hành động và dữ liệu nhất định trong giao diện người dùng.
Và Bootstrap sử dụng Glyphicons để đáp ứng nhu cầu này.Bootstrap bao gồm một bộ
Halflings Glyphicons được mở khóa để sử dụng miễn phí

V. Jquery

Ở phiên bản này, tuy người dùng chỉ có thể lựa chọn giao diện chuẩn nhưng phù hợp với
các chức năng thiết yếu.Nếu bạn muốn muốn sử dụng icon có phong cách hơn, bạn có thể
mua bộ icon premium khác nhau mà Glyphicons có bán, chắc chắn giao diện trang web
của bạn sẽ trông đẹp hơn.

Ngoài ra, bạn cũng có thể tải các biểu tượng riêng biệt  miễn phí trên các trang web khác
nhau như Flaticon, GlyphSearch và Icons8. Hãy lựa chọn và sử dụng icons phù hợp nhất
với trang web bạn cần.

5. Cách nhúng Bootstrap vào HTML

Nhúng từ liên kết của Bootstrap :

!DOCTYPE html>

<html lang="vi">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-

scale=1">

<title>Cảm ơn bạn đã quan tâm đến Vietnix</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/boot
strap.min.css"/>

</head>

<body>

<h1>Cảm ơn bạn đã quan tâm đến Vietnix </h1>

</body>
</html>

Nhúng Bootstrap vào HTML bằng cách tự Host :

<!DOCTYPE html>

<html lang="vi">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-

scale=1">

<title>Welcome to website</title>

<link rel="stylesheet" href="css/bootstrap.min.css"/>

<link rel="stylesheet" href="css/style.css"/>

</head>

<body>

<h1>Welcome to Website</h1>

</body>

</html>

V. Jquery

1. Jquery là gì?
Jquery là một thư viện JavaScript được thiết kế đơn giản hóa thao tác HTML
DOM, cũng như xử lý sự kiện, hoạt ảnh CSS, và Ajax. Nó là phần mềm mã nguồn
mở, miễn phí sử dụng giấy phép MIT License
2. Jquery dùng để làm gì?
Jquery là một thuật ngữ phổ biến trong lập trình web, dùng để chỉ thư viện
javascript nổi bật. Nó giúp xây dựng cách chức năng cho website bằng javascript,
rất dễ dàng, nhanh chóng, đa dạng. jQuery được ứng dụng giúp website có tính
tương tác, hấp dẫn, thêm các animation để tạo cảm giác sinh động, thông minh
 3. Lợi ích khi sử dụng Jquery

Đơn giản, dễ sử dụng: Với cú pháp đơn giản, người dùng chỉ phải viết ít dòng lệnh để
tạo ra các chức năng tương tự, giúp tiết kiệm thời gian hơn cho lập trình viên

Là một thư viện lớn của javaScript: Có khả năng thực thi nhiều chức năng hơn so với
các thư viện javaScript khác

Cộng đồng mã nguồn mở mạnh mẽ (một số plugin jquery có sẵn): JQuery có một
cộng đồng người dùng lớn giúp phát triển các plugin. Nhờ đó mà hàng trăm plugin
được viết sẵn để có thể tải về ngay lập tức, giúp đẩy nhanh quá trình viết code của lập
trình viên. Đồng thời, các script này đều được đảm bảo an toàn và hiệu quả cao.

Có sẵn nhiều tài liệu và hướng dẫn cụ thể: Các trang web JQuery đều có sẵn các bộ tài
liệu và hướng dẫn chi tiết, kể cả người mới làm lập trình cũng có thể tham khảo và áp
dụng trong thực tế.

Hỗ trợ Ajax: JQuery giúp người dùng dễ dàng phát triển các template Ajax. Không
chỉ vậy, Ajax còn giúp giao diện trên website trở nên thu hút hơn, có thể thực hiện các
chức năng ngay trên trang mà không phải tải lại toàn bộ trang.

4. Các module phổ biến của Jquery

Ajax (xử lý Ajax)

Effect (xử lý hiệu ứng)

DOM (xử lý Data Object Model)

Event (xử lý sự kiện)

Form (xử lý sự kiện liên quan đến form)

Attributes (xử lý thuộc tính của các đối tượng HTML)

Selector (xử lý luồng lách giữa các đối tượng HTML)

5. Cách sử dụng Jquery

Cài đặt Jquery nội bộ :

html>

<head>
<title>The jQuery Example</title>

<script type="text/javascript" src="../jquery/jquery-2.1.3.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

document.write("Hello, World!");

});

</script>

</head>

<body>

<h1>Hello</h1>

</body>

</html>

Sử dụng CDN :

<html>

<head>

<title>The jQuery Example</title>

<script type="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

</script>

<script type="text/javascript">

$(document).ready(function(){

document.write("Hello, World!");

});
</script>

</head>

<body>

<h1>Hello</h1>

</body>

</html>
CHƯƠNG 2 : ỨNG DỤNG XÂY DỰNG FRONT-END CHO
WEBSITE GIÀY
 CHƯƠNG 3 : KẾT LUẬN
Trong thời gian thực hiện bài tập lớn, về cơ bản em hiểu được quá trình xây dựng
1 Website bằng ngôn ngữ lập trình mới. Xây dựng được trang Front-End giúp cung cấp
các thông tin cần thiết của 1 trang web về cửa hàng thời trang. Xây dựng trang web hiển
thị nội dung linh hoạt, giúp cửa hàng cập nhật sản phẩm, hình ảnh, bài viết dễ dàng. Thiết
kế giao diện với màu sắc và bố cục hài hòa tạo cho người sử dụng cảm thấy thoải mái
nhất.

Tuy nhiên trong thời gian có hạn nên kết quả thực hiện vẫn còn 1 số hạn chế trong
quá trình thiết kế các ứng dụng cần thiết trong trang Web của em. Trong thời gian tới, em
sẽ nghiên cứu và hoàn thiện trang Web để có thể báo cáo và đưa vào sử dụng hiệu quả.

Nhóm thực hiện

Nhóm 13
 PHỤ LỤC
TÀI LIỆU THAM KHẢO

Tài liệu HTML

Tài liệu CSS
Tài liệu JAVASCRIP
LINK MÃ NGUỒN

MÃ NGUỒN 1 SỐ TRANG CHÍNH