Bài tập lớn) thiết kế web shop giới thiệu Đồ chơi, mô hình

Trong khoá học này, chúng ta sẽ tìm hiểu về các nguyên tắc thiết kế web, các công cụ và kỹ thuật cần thiết để tạo ra các trang web hấp dẫn và chất lượng cao.Chúng ta sẽ khám phá cách sử

BO GIAO DUC VA DAO TAO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á

BÀI TẬP LỚN HOC PHAN: THIET KE WEB

MA DE: 47 TÊN (BÀI TẬP LỚN): Thiết kế web shop giới thiệu đồ chơi, mô hình

Giáng viên hướng dẫn: Ths Lé Thuy Dung

Sinh viên thực hiện: Nông Quốc Dũng

BO GIAO DUC VA DAO TAO TRUONG DAI HOC CONG NGHE DONG A

BAI TAP LON HOC PHAN: THIET KE WEB

MA DE: 47 TÊN (BÀI TẬP LỚN): Thiết kế web shop giới thiệu đồ chơi, mô

Giảng viên hướng dẫn: Ths Lé Thuy Dung

Sinh viên thực hiện: Nông Quốc Dũng

LOI NOI DAU

Trang web đã trở thành một phan không thể thiếu của cuộc sông hàng ngày, từ các trang web cá nhân, doanh nghiệp, đến các ứng dụng web phức tạp Trong khoá học này, chúng ta sẽ tìm hiểu về các nguyên tắc thiết kế web, các công cụ và kỹ thuật cần thiết để tạo ra các trang web hấp dẫn và chất lượng cao.Chúng ta sẽ khám phá cách sử dụng ngôn noữ lập trình HTML, C§S va JavaScript dé tao ra giao diện web đẹp và tương tác Hơn nữa, chúng ta sẽ học cách làm việc với các Íframework và thư viện phổ biến như Bootstrap và jQuery để tối ưu hóa quá trình phát triển web Qua khoá học này, chúng ta

sẽ trải qua các bai tập thực tế và dự án thiết kế web để áp dụng kiến thức và kỹ năng của mình Tôi hy vọng rằng bạn sẽ có trải nghiệm học tập thú vị và có thê áp dụng kiến thức này vào tương lai, bất kế bạn muốn trở thành một nhà thiết kế web chuyên nghiệp hay chỉ muon tao ra trang web cá nhân riêng cua minh Dé có thê thỏa sức sáng tạo

LOI CAM ON

Dé hoan thanh bai bao cao nay trước tiên em xin gửi đến các quý thầy, cô giáo trường

Đại học công nghệ Đông Á lời cảm ơn chân thành và sâu sắc nhất

Đặc biệt, em xin sửi đến cô Lê Thu) Dung — người đã tận tình hướng dẫn, giúp đỡ

em hoàn thành bài báo cáo này lời cảm ơn sâu sắc nhật

Vì kiến thức bản thân còn hạn chế, trong quá trinh học tập, hoàn thiện bài báo cáo này

em không tránh khỏi những sai sót, kính mong nhận được những ý kiên đóng góp từ cô

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

Sinh viên

Nông Quốc Dũng

I ki ể gì voi ônnn a 13

CHƯƠNG 2: ỨNG DỤNG XÂY DỰNG GIAO DIỆN WEBSITE - 15

2.1 Chức năng chính của WebsIte L1 012 vn 1H01 1411111111 11111111 tk 15 2.2 Chức năng của hệ thông 2-2 S11 ST E1 5212111112112111111712111 11111121 xre 15

E0 (ái náo AI 25 c1 25 3.3 Hướng phát triển của web 5s scs1 21121111211 1111210121212 122tr 25

V.1900/009-79064.7 0n 26

CHUONG 1: THIET KE WEB 1.1 Giới thiệu đề tài

- Trang web " Shop đồ chơi và mô hình " tạo ra một trang web than thiện, tương tác va

dé sir dung, giúp người dùng dễ dàng tìm kiếm và mua sắm đỗ chơi và mô hình cho trẻ

em Chúng tôi đặt ra mục tiêu tạo ra một không g1an trực tuyến an toàn và thú vị cho cả trẻ em và phụ huynh

- Trang web có những đặc điểm nồi bật như sau:

@ Giao diện Thân thiện và Hấp dẫn:

- Màu sắc tươi sáng và hình ảnh các sản phâm thực tế, mang lại trải nghiệm mua săm thú

VỊ

® Danh Mục Sản Phẩm Da đạng:

- Sắp xếp sản phâm vào các danh mục rõ ràng, giúp người dùng dễ dàng tìm thấy những

đồ chơi và mô hình mà họ quan tâm

@ Trải Nghiệm Mua Săm An Toản:

- Quy trình thanh toán an toàn và thuận tiện, đồng thời hỗ trợ nhiều phương thức thanh toán

@ Responsive Design:

- Dam bao trang web đồ chơi và mô hình của chúng tôi hiện thị mượt mà trên mọi loại

thiết bị

@® Cam Kết:

- Chúng tôi cam kết mang lại trải nehiệm mua sắm trực tuyến tốt nhất, đảm bảo chất lượng và an toàn cho tât cả các sản phâm đồ chơi và mô hình Hãy đồng hành cùng chúng

tôi trong hành trinh này đề làm cho niêm vuI của trẻ trở nên đặc biệt hơn!

1.2 Sử dụng HTML

1.2.1 Giới thiệu về HTML

HTML là viết tắt cua HyperText Markup Language (Ngôn ngữ đánh dẫu siêu văn bản)

do nhà khoa học Mỹ - Tim Berners Lee định nghĩa ra năm 1989

- HyperTet - Văn bản có thể kết nối đến văn bản khác

Sử dụng các “thẻ” đề “đánh dâu” văn bản, ø1úp trình duyệt xác định được cách biêu diễn trang web đên người sử dụng

Một tập tin HTML là một tập tin văn ban trong đó có chứa các thẻ định dạng (các thẻ nay sé giup trình duyệt Web xác định cách trình bày trang Web)

Một tập tin HTML phải có đuôi mở rộng là htm hoặc html

Một tập tin HTML có thể được viết trên một trình soạn thảo văn bản đơn gian

1.2.2 Cau triic cha HTML

<!IDOCTYPE html> ————— _ DOCTYPE declaration

1:<html> dùng đê khai báo 1 tài liệu HTML

Công dụng: thẻ này sẽ cho trình duyệt biết rằng đây là một tài liệu HTML

Cú pháp <html> nội dung </html>

2:<body> dùng đề khai báo phần thân cho tài liệu

5

Công dụng: thé này khai báo phần nội dung của tải liệu

Thuộc tính Gia trị Mô tả thuộc tính

background File_name một hình ảnh dùng làm hình nên và thường

dung style dé thay the bgcolor Rbe(x,x,x) Mau nên của tài liệu và thường dùng style

dé thay thé

#XXXXXX colorname Text Rbe(x,x,x) Màu chữ trong tài liệu và thường dùng style

dé thay thé

#XXXXXX colorname

1:<h1 đến hó> dung dé khai bao header! dén header 6

Công dụng: dùng để định dạng kích thước của chữ.( thẻ này sẽ tự động thêm một dòng trông trước và sau môi dòng co thé heading)

<h1> heading lớn nhất

<h6> heading nhỏ nhất

2:<br> dùng để chèn l ký tự kết thúc dòng

Công dụng: Dùng để ngắt một dòng trong văn bản

Lưu ý: Thẻ <hr> không co thé dong(</hr>)

3:<p> dùng để khai báo một đoạn

Cong dung: Dung để xác định một đoạn van trong tài liệu (HTML sẽ tự động thêm một dong trong trước và sau thé <p>)

4:<hr> dùng để ké 1 đường nằm ngang

Công dụng: Dùng để kẻ 1 đường ngang trong tài liệu.(không có thẻ đóng )

5:<! > dung dé chú thích

Công dụng: Dùng để thực hiện ghi chú mã lệnh trong tài liệu

1.2.5 Tao bang trong HTML

Thuộc tính Gia trị Mô tả thuộc tính

align Left Canh lê trong bảng

Center Right bgcolor Regeb(x,x,x) dinh dang mau nén cho bang

#XXXXXX Colorname border pIxels Quy định độ rộng của đường viễn

cellpadding Pixels Quy định khoảng cách từ thành bảng đến nội

% dung trong bảng

cellspacing Pixels % Quy định khoang cach gitra cac 6

width Pixels Quy dinh bé rộng cua bang

%

2:<th> dùng để khai báo phần header cho bang

3:<tr> dùng để tạo | hang trong bang

Công dụng: Tạo một hàng trong bảng

Các thuộc tính cơ bản

4:<td> dùng để tạo 1 ô trong ban

Công dụng: Tạo một ô trong bản

Quy định khoảng các nội dung trong ô theo chiều dọc

bgcolor Rgb(x,x,x)

#XXXXXX colorname

Quy định màu nên của ô

colspan number chỉ ra số cột mà ô này nên nồi

height pixels Quy định chiêu cao cua 6

rowspan number chi ra so hang nay nén noi

Dinh dang khoang cach gitta cac 6

bgcolor

#XXXXXX colorname Quy định màu nên của ô

valign

Top Middle

Khắc phục: Thêm vào các ô dữ liệu rỗng &nbsp

5:<caption> dùng để tạo 1 tiêu đề cho bảng

6:<colgroup> dùng để tạo nhóm các cột

7:<col> dùng đề khai báo các 1á trị thuộc tính một hay nhiều cột trong bảng

§:<thead> dùng để định nghĩa phần đầu của bảng

9:<tbody> dung dé định nghĩa phần thân của bảng

10:<tfoot> dùng để dịnh dạng phần cuỗi của bảng

1.2.6 Biểu mẫu và thong tin người dùng

Các loại thẻ sử dụng với biêu mau(form)

1:<form> dùng để tạo biểu mẫu để người dùng nhập dữ liệu

Công dụng: Dùng để tạo ra một biểu mẫu cho phép người dùng nhập vào dữ liệu Một biểu mẫu có thế chứa vùng văn bản (textfels), các hộp kiểm (checkbox), các nút radio (radio-button) và các thành phần khác

Form được dùng để truyền đữ liệu của người dùng đến một URL xác định

Thuộc tính | Giá trị Mô tả thuộc tính

method Get Phương thức HTTP để gởi đữ liệu đến đại chỉ URL xác

định Mặc dinh la get

Post

name Form_nam | Khai bao mot tén néng cho form

€

Tarpet _ blank vị trí sẽ mở URL đích URL

_ self _blank: URL sẽ mở trong một cử sô mới

_ parent _self; URL dich sé mo trong chinh frame ma tai do ta

kich chon

_top

_parent:URL dich sé mo trong frame chinh

_top: URL dich sé mo trong toan bé phan than cua ctra

sỐ

2:<input> ding dé tao trường nhập dữ liệu

<input type= text'> dùng để tạo ra một trường nhập dữ liệu mà người dùng có thê đưa thông tin đữ liệu vảo

<input type= radio”> dùng để tạo ra một trường nhập đữ liệu mà người dùng chọn lựa một trong các tuy chọn sắn có

<input type= "checkbox”> đùng để tạo ra một trường nhập đữ liệu mà người dùng được phép lựa chọn một hay nhiều các tuỳ chọn trong các tuy chọn có sắn

3:<textarea> dùng đề tạo một cùng văn bản( cho phép nhập nhiều dòng văn bản) Công dụng: Dùng để tạo ra một vùng văn bản(một điều khiển nhập dữ liệu trên dòng) 4:<label> dùng để tạo một nhãn cho một điều khiến

Công dụng: Dùng để khai báo một nhãn dán cho một điều khiển

5:<fieldset> dung dé tao fieldset

6:<legend> dung để tạo nhãn cho fieldset

7:<select> dung để tạo danh sách các mục chọn (một danh sách x6 xuống) Công dụng: Dùng để tạo ra một danh sách đô xuống, thường dùng chung với thẻ

<option>

8:<optgroup> dung để tạo một nhóm các tuy chọn

Công dụng: Định nghĩa một nhóm các mục chọn trong danh sách đỗ xuống

9:<option> dùng để tạo một tuy chọn trone danh sách các mục chọn

Công dụng: Dùng để định nghĩa một mục chọn trong danh sách đô xuống (nên sử dụng chung với thuộc tính value)

10:<button> dùng để tạo một nút

Công dụng: Dùng để tạo ra một nút bám

11:<isindex> ít dùng đến thườngg sẽ dùng thẻ <input>

1.2.7 các thẻ HIMIL mở rộng

1:<a> dùng để thiết lập kết nối đến một tài liệu khác

2:<img> dùng để chèn hình ảnh trong tài liệu

3:<ol> dùng để tạo đề mục có đánh số thứ tự

10

4:<ul> dung dé tao dé muc không có đánh sô thứ tự

5:<li> dung tao dé muc con

6:<s> dùng để định dạng đường gạch dưới như thẻ <u>

7:<strike> đùng đề định dạng đường gạch bỏ

8:<sub> dùng để định dang chi số dưới

9:<strone> dùng đề định dạng chữ in dam

10:<frame> dung dé tao nhiéu trang web trên một cửa số trình duyệt

11:<marquee> dùng để tạo dòng chữ chạy trên màn hình

1.3 Sir dung CSS

CSS (cascading style sheets): 1a mt phuong pháp dùng đề mô ta lại các thức hiển thi

của các thành phân trên trang WEB nhằm:

+ Xây dựng một dạng TEMPLATE trong quá trình thiết kế

+ Tái sử dụng cho các trang web khac

+ Thay đổi thuộc tính từng trang hoặc cả site nahnh chóng

1.3.1 Cu phap dinh nghia CSS trong m6t Selector

-SelectorName: La tén các tag da duoc dinh nghia truéc trong HTML hoac tén do

người dùng định nghĩa mới

= Porperty: Là tên các thuộc tính do CSS hỗ trợ

- Value: Giá trị ứng với các thuộc tính

Lưu ý: Ghi chú trong CSS dùng /* */

1.3.2 Phuong phap sw dung CSS

1:Inline style

-_ Các thuộc tính style được nhúng trực tiếp trong cac thé tag khi sử dụng

- Ưu điểm: Định nghĩa nhanh, dễ quản lý cho từng tag trong một trang

- Nhược điểm: Khĩ áp dụng đồng bộ cho từng tà trong cùng một trang

2: Embedded style

- Các thuộc tính style cho cac thé tag duge khai bao trudc trong phan tag<Head> cua trang trước khi sử dụng

- Ưu điểm: Định nghĩa nhanh, dễ quản lí cho từng trang

- Nhược điểm: Khĩ áp dụng cho các trang

- CSS Selector là các phương pháp dùng để định dạng các thuộc tính cho một hay nhiều thẻ (tà) HTML đã cĩ hoặc xây dựng các lớp (class) định dạng dùng áp dụng chung cho các thẻ (tap)

Bảng phân loại các CSS Selector thơng dụng:

Loại Mơ tả

element Định dạng được áp dụng cho tất cả cac tag element trong tai

liệu web

#ID Định dạng được áp dụng cho tât cả các tap cĩ thuộc tính ID

trong tải liệu web

Element#ID Dinh dang duoc ap dung cho tat cả các tag element cĩ thuộc

tính ID trong tài liệu web

class Định dạng được áp dụng cho tất cả các tap cĩ thuộc tính

class trong tai liệu web

Element.class DInh dang duoc ap dụng cho tat ca cac tag Element co

thuộc tính class tương ứng

13

lệnh JavaScript lõi có thể được mở rộng cho nhiều mục đích khác nhau bằng cách bỗ sung nó băng các đôi tượng bô sung; Ví dụ: DateMath

JavaScript có ba loại khai báo biến:

® Var: Khai báo một biến, tùy ý khởi tạo nó thành một 214 tri

@ Let: Khai báo một biến cục bộ, có phạm vi khối, tùy ý khởi tạo nó thành một g1á

@ Const: Khai bao mét hang số có tên chỉ đọc, có pham vi khối

1.4.1 Phạm vì biến đồi

Một biến có thê thuộc một trong các phạm vi sau:

@ Phạm vi toàn cầu: Phạm vi mặc định cho tất cả mã chạy ở chế độ tập lệnh

@ Phạm vị mô-đun: Phạm vi mã chạy ở chế độ mô-đun

@ Pham vi ham: Pham vi duoc tạo bang ha

Nang bién:

® Var - các biến được khai báo được hoisted, nghĩa là bạn có thể tham chiếu đến biến đó ở bất kỳ đâu trong phạm vi của nó, ngay cả khi chưa khai báo được biến

đó Bạn có thê thấy varcác khai báo được "nâng" lên đầu chức năng hoặc phạm vi

toàn cục của nó Tuy nhiên, nếu bạn truy cập một biến trước khi nó được khai báo thì giá trị luôn là undefned, vì chỉ có phần khai báo của nó được nâng lên chứ

không phải phần khởi tạo của nó

1.4.2 Cấu trúc và kiểu dữ liệu

Loại đữ liệu:

@ Bay kiểu dữ liệu nguyên thủy:

-) Boolean: True và false

-) V6 214 tri: Một từ khóa đặc biệt biểu thị 21a tri null (Vi JavaScript phân biệt chữ hoa

chữ thường nullnên không giống với Null, NULLhoặc bắt ky biến thể nào khác)

-) Không xác định: Thuộc tính cấp cao nhất có giá trị không được xác định

14