Báo Cáo Bài Tập Lớn 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.docx

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 Ngu[.]

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ậntì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ệnDương Văn Môn Trần Trường PhướcPhan 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

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>

<title> Tiêu đê cua trang

web </title> </head>

 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

 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ươngthứ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ẽ ápdụ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 htmlkhô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.

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ộtdò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

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

– 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: 12 px ;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 >

– 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 trongmôi trường máy chủ lưu trữ (ví dụ: trình duyệt web), JavaScript có thể đượckế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 choJavaScript bao gồm các hộp xác nhận, kêu gọi hành động và thêm các danhtí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

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ư:

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:

IV Bootstrap

1 Giới thiệu về Bootstrap

Bootstrap là framework HTML, CSS, và JavaScript phổ biến nhất để phát triểncá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 baogồ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àyhoặ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úpcho 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ủamì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ínhcủ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êntop

4 Những file chính của Bootstrap được nhiều người sử dụ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:

một cách linh hoạt

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í

Ở 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ácnhau như Flaticon, GlyphSearch và Icons8 Hãy lựa chọn và sử dụng icons phù hợp nhấtvới trang web bạn cần

<meta charset="utf-8">

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

initial-scale=1">

<title>Cam ơn bạn đã quan tầm đêGn Vietnix</title>

<link rel="stylesheet"

h

ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/boot strap.min.css"/>

</head>

<body>

</body>

<meta charset="utf-8">

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

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>