Đang tải... (xem toàn văn)
Mục tiêu của đề tài Trình bày được các vấn đề liên quan đến ngôn ngữ HTML, CSS. Triển khai và cài đặt chương trình.1.2 Giới hạn và phạm vi đề tài Xây dựng chương trình dựa vào ngôn ng
TRƯỜNG ĐẠI HỌC SƯ PHẠM TP HỒ CHÍ MINH KHOA CÔNG NGHỆ THÔNG TIN -□□ - ĐỒ ÁN MÔN HỌC THIẾT KẾ WEB WEB BÁN SMARTPHONE Giáo viên hướng dẫn : ThS Nguyễn Đỗ Thái Nguyên Nhóm SV thực : 49.01.104.035 – Huỳnh Mỹ Đức : 49.01.104.068 – Lê Văn Khánh : 49.01.104.044 – Nguyễn Doãn Hiếu Mã lớp học phần: : COMP180203 TP.HCM, ngày tháng 12 năm 2023 Lời Cảm Ơn Chúng xin gửi lời cảm ơn chân thành đến quý vị việc đọc đánh giá báo cáo Chúng trân trọng quan tâm thời gian quý báu mà quý vị dành cho báo cáo Đồng thời, chúng tơi xin bày tỏ lịng biết ơn sâu sắc đến người đóng góp vào q trình thu thập thơng tin thực báo cáo Sự hỗ trợ đóng góp thành viên nhóm điều khơng thể thiếu để hồn thành cơng việc Bài báo cáo cung cấp cho hội để tổng kết phân tích kết thu hoạch, từ đánh giá hiệu rút học q giá Qua q trình này, chúng tơi nhận thức giá trị ý nghĩa công việc mà làm cải tiến cần thiết để tăng cường hiệu tương lai Một lần nữa, chúng tơi muốn bày tỏ lịng biết ơn chân thành đến tất người đóng góp, hỗ trợ đồng hành chúng tơi q trình Sự ủng hộ đóng góp quý vị góp phần quan trọng vào thành công báo cáo Xin chân thành cảm ơn mong nhận tiếp tục quan tâm hỗ trợ từ quý vị Trân trọng ii NHẬN XÉT VÀ ĐÁNH GIÁ CỦA GIẢNG VIÊN Điểm số: Điểm chữ: Thành phố Hồ Chí Minh, ngày tháng năm 2023 Giảng viên i DANH MỤC TỪ VIẾT TẮT ii DANH MỤC THUẬT NGỮ ANH – VIỆT iii DANH MỤC BẢNG BIỂU iv DANH MỤC HÌNH ẢNH v MỤC LỤC CHƯƠNG 1: TỔNG QUAN 1.1 Giới thiệu 1.2 Giới hạn phạm vi đề tài .1 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Ngôn ngữ HTML .1 2.2 Ngôn ngữ CSS 10 2.3 Khác HTML CSS 13 2.4 Ngôn ngữ kịch JavaScript .13 CHƯƠNG 3: THIẾT KẾ CHỨC NĂNG 15 3.1 Đặt tả hệ thống 15 3.2 Sơ đồ usecase 16 CHƯƠNG 4: GIAO DIỆN CỦA WEBSITE .17 4.1 Trang chủ .17 4.2 Giao diện thông tin sản phẩm 17 4.3 Giao diện đăng nhập .18 4.4 Giao diện đăng ký 18 4.5 Giao diện tìm kiếm sản phẩm 19 4.6 Giao diện quản lý giỏ hàng 19 4.7 Giao diện liên hệ 20 4.8 Giao diện quản lý sản phẩm 20 4.9 Giao diện quản lý đơn hàng 21 4.10 Giao diện quản lý khách hàng 21 vi WEB BÁN SMART PHONE – HUỲNH MỸ ĐỨC – LÊ VĂN KHÁNH -NGUYỄN DOÃN HIẾU CHƯƠNG 1: TỔNG QUAN 1.1 Giới thiệu a Lý chọn đề tài Sự phát triển công nghệ thông tin thúc đẩy phát triển hầu hết lĩnh vực, có kinh doanh Với đời internet vươn lên cơng nghệ dẫn đến hình thức kinh doanh online Hình thức kinh doanh online nhiều cửa hàng lựa chọn để tăng doanh thu cửa hàng để giới thiệu sản phẩm đến người tiêu dùng cách nhanh chóng Với phát triển nhanh chóng cơng nghệ độ phủ sóng rộng khắp smartphone, lĩnh vực kinh doanh sản phẩm điện thoại Việt Nam ngày quan tâm nhiều Tuy nhiên, với lĩnh vực kinh doanh nhiều tiềm có hàng trăm, hàng ngàn đơn vị, doanh nghiệm tham gia khiến cho cạnh tranh vơ gay gắt Mỗi cửa hàng có nhiều mức giá chương trình ưu đãi khác dẫn đến khó khăn cho người dùng việc tìm kiếm giá sản phẩm cửa hàng Với mục đích giúp người dùng tiếp cận nhiều chương trình sản phẩm điện thoại ,em định chọn đề tài “Xây dựng webste bán điện thoại ” b Mục tiêu đề tài Trình bày vấn đề liên quan đến ngôn ngữ HTML, CSS Triển khai cài đặt chương trình 1.2 Giới hạn phạm vi đề tài Xây dựng chương trình dựa vào ngơn ngữ HTML, CSS, JS Chương trình tập trung chức nghiệp vụ từ khảo sát thực tế CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Ngôn ngữ HTML 2.1.1 Định nghĩa HTML HTML biết đến loại ngôn ngữ dùng để mô tả hiển thị trang web Hyper Text Markup Langue HTML Nhiều người nhầm tưởng HTML ngơn ngữ lập trình thực khơng phải vậy, ngơn ngữ đánh dấu Một ngôn ngữ đánh dấu thẻ đánh dấu Để miêu tả trang web ta cần đánh dấu thẻ HTML 2.1.2 Thành phần ngôn ngữ HTML - Các dạng thẻ HTML : Thẻ HTML dùng để viết lên thành tố HTML Thẻ HTML bao quanh hai dấu lớn < > nhỏ Những thẻ HTML thường có cặp giống WEB BÁN SMART PHONE – HUỲNH MỸ ĐỨC – LÊ VĂN KHÁNH -NGUYỄN DOÃN HIẾU Thẻ thứ thẻ mở đầu thẻ thứ hai thẻ kết thúc Dòng chữ hai thẻ bắt đầu kết thúc nội dung Những thẻ HTML khơng phân biệt in hoa viết thường, ví dụ dạng - Thành phần HTML : Thành phần HTML bắt đầu với thẻ: Nội dung là: web design resources Thành phần HTML kết thúc với thẻ: Mục đích thẻ để xác định thành phần HTML phải thể dạng in đậm Phần bắt đầu thẻ bắt đầu kết thúc thẻ kết thúc Mục đích thẻ xác định thành phần HTML bao gồm nội dung tài liệu - Các thuộc tính thẻ HTML: Những thẻ HTML có thuộc tính riêng Những thuộc tính cung cấp thơng tin thành phần HTML trang web Tag xác định thành phần thân trang HTML: Với thuộc tính thêm vào bgcolor, báo cho trình duyệt biết màu trang màu đỏ, giống sau: (#E6E6E6 giá trị hex màu) Thẻ xác định dạng bảng HTML: với thuộc tính đường viền (border), báo cho trình duyệt biết bảng khơng có đường viền: Thuộc tính ln ln kèm cặp name/value: name="value"(tên="giá trị") thuộc tính ln thêm vào thẻ mở đầu thành phần HTML Dấu ngoặc kép, "red" 'red' Giá trị thuộc tính nên đặt dấu trích dẫn " " Kiểu ngoặc kép phổ biến hơn, nhiên kiểu đơn ' ' dùng Ví dụ vài trường hợp đặc biệt hiếm, ví dụ giá trị thuộc tính mang dấu ngoặc kép rồi, việc sử dụng ngoặc đơn cần thiết Ví dụ: name='ban"tay"den' 2.1.3 Cơ HTML Những thẻ quan trọng HTML thẻ xác định Heading, đoạn văn xuống dòng Headings Headings định dạng với hai thẻ đến xác định heading lớn xác định heading nhỏ WEB BÁN SMART PHONE – HUỲNH MỸ ĐỨC – LÊ VĂN KHÁNH -NGUYỄN DOÃN HIẾU Thuộc tính Alt Thuộc tính alt sử dụng để xác định chữ thay cho hình Bởi hình khơng dòng chữ xuất để báo cho người đọc biết Giá trị thuộc tính alt dịng chữ sau: Thuộc tính alt báo cho người đọc biết họ không xem hình mà trình duyệt khơng load hình Trình duyệt sau hiển thị dịng chữ thay hình ảnh Nên tạo thói quen thêm thuộc tính "alt" vào hình trang, để tăng khả hiển thị giúp người lướt web mà khơng dùng hình ảnh HTML Background Một background đẹp làm cho trang nhìn đẹp mắt Backgrounds Thẻ có hai thuộc tính chọn loại background cho Background màu hình Bgcolor Thuộc tính bgcolor thiết lập hình màu Giá trị thuộc tính hệ số hexadecimal, giá trị màu RGB tên màu Dòng code thiết lập hình thành màu đen Background Thuộc tính background thiết lập hình làm hình Giá trị thuộc tính địa URL hình muốn sử dụng Nếu hình nhở so với cửa sổ trình duyệt, hình tự nhân lên đến che phủ hết cửa sổ trình duyệt Địa URL tương đối dịng code thứ tuyệt đối dòng thứ 2.2 Ngôn ngữ CSS CSS chữ viết tắt cụm từ tiếng Anh “Cascading Style Sheet”, kiểu thiết kế sử dụng nhiều lớp định dạng chồng lên CSS tổ chức World Wide Web giới thiệu vào năm 1996 Cách đơn giản để hiểu CSS coi phần mở rộng HTML để giúp đơn giản hóa cải tiến việc thiết kế cho trang web 10 WEB BÁN SMART PHONE – HUỲNH MỸ ĐỨC – LÊ VĂN KHÁNH -NGUYỄN DOÃN HIẾU Khi bắt đầu Style Sheets, bắt buộc mở kết thúc sau khai báo kết thúc và sau bước nhìn thấy ngun đoạn code sau : thêm vào sau Cấu trúc CSS: Tag {definition1; definition2; ; definition n} Ví dụ sau về dịng lệnh CSS: H2 {font-size: 16pt; font-style: italic; font-family: arial} 2.2.1 Ưu điểm CSS - CSS tách riêng phần định dạng khỏi nội dung trang web, thuận tiện muốn thay đổi giao diện trang web - CSS sợi xuyên suốt trình thiết kế website cho phép nhà thiết kế kiểm sốt tồn giao diện, kiểu cách đặt nhiều trang hay nhiều đối lần định nghĩa Để thay đổi tổng thể hay nhiều đối tượng có Style, cần thay đổi Style tất thành phần áp dụng Style thay đổi theo Nó tiết kiệm cơng sức nhiều - Do định nghĩa Style tách riêng khỏi nội dung trang web, chúng trình duyệt load lần sử dụng cho nhiều lần, giúp trang web nhẹ chạy nhanh 2.2.2 Các đặt tính CSS - CSS quy định cách hiển thị thẻ HTML cách quy định thuộc tính thẻ (font chữ, màu sắc) Để cho thuận tiện đặt tồn thuộc tính thẻ vào file riêng có phần mở rộng “.css”, thường người ta hay đặt tên stylesheet.css - CSS phá vỡ giới hạn thiết kế Web, cần file CSS cho phép quản lí định dạng layout nhiều trang khác Các nhà phát triển Web định nghĩa sẵn thuộc tính số thẻ HTML sau dùng lại nhiều trang khác - Có thể khai báo CSS nhiều cách khác Có thể đặt đoạn CSS phía thẻ …, ghi file riêng với phần mở rộng “.css”, ngồi cịn đặt chúng thẻ HTML riêng biệt 11 WEB BÁN SMART PHONE – HUỲNH MỸ ĐỨC – LÊ VĂN KHÁNH -NGUYỄN DOÃN HIẾU - Thứ tự xếp lớp Style áp dụng có nhiều style định cho thành phần HTML Tùy vào cách đặt khác mà mức độ ưu tiên cho khác Mức độ ưu tiên tuân theo thứ tự sau: Style nội tuyến – Style đặt thẻ HTML riêng biệt Stylet bên – Style đặt bên cặp thẻ … Style bên – Style đặt file riêng có “.css” Style theo mặc định trình duyệt - CSS có tính kế thừa tính kết hợp + Tính kế thừa: Giả sử đầu file styleshet.css khai báo cho Body có thuộc tính sau: Body { Font: Arial, Verdana; Background: # FF6600; } Nhưng trường hợp muốn khai báo cho đối tượng nhỏ nằm Sidebar: #sidebar { with: 300px; padding: 10px; font: Tahoma, Verdana; } Sau đoạn khai báo Sidebar có thuộc tính: #sidebar{ Backgroud: FF6600; with: 300px; padding:10px; font: Tahoma, Verdana; } Như vậy, Sidebar kế thừa thuộc tính background Body, thuộc tính font Tahoma đè lên thuộc tính font Arial lần khai báo trước 12