CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1.1 Giới thiệu đề tài Việc mua sắm trực tuyến không chỉ là một xu hướng mà còn là sự thuận tiện tối đa cho người tiêu dùng trong thời đại công nghệ số. Đèn ngủ, không chỉ là vật trang trí, mà còn là điểm nhấn quan trọng tạo nên không gian sống ấm áp và thoải mái. Oriniqueshop là một trang web chuyên cung cấp các loại đèn ngủ khác nhau được chọn lựa từ những nguồn cung ổn định và kiểm tra chất lượng nghiêm ngặt, đảm bảo rằng bạn sẽ nhận được những sản phẩm và trải nghiệm tốt nhất. Hình trang chủ Index Giao diện trang web được thiết kế để đơn giản, dễ sử dụng và tối ưu hóa cho mọi thiết bị, mang đến trải nghiệm mua sắm trực tuyến linh hoạt và thuận lợi.
Website được chia thành các trang web gồm có: a. Trang chủ: Hiển thị các slogan cửa hàng, sản phẩm nổi bật, các chương trình khuyến mãi lớn, chính sách hậu đãi. Sản phẩm: Gồm trang thể hiện tất cả sản phẩm có trong trang web và trang chi tiết sản phẩm cho từng sản phẩm của cửa hàng.Tin tức: Thể hiện các bài báo liên quan đến việc quan trọng của giấc ngủ, ánh sáng đèn ngủ ảnh hưởng đến tình trạng giấc ngủ …v. Liên hệ: Thể hiện địa chỉ, các phương thức liên hệ đến cửa hàng khi khách hàng có nhu cầu, ngoài ra còn có hộp thư góp ý đến cửa hàng.
Giới thiệu: Câu chào từ cửa hàng thể hiện sự tâm huyết khi lập nên website và cửa hàng để mang lại trải nghiệm tốt nhất cho khách hàng f. Đăng nhập: Cho phép người dùng đăng nhập để nhận ưu đãi khách hàng thân thiết, hội viên, lưu thông tin giao hàng thuận tiện cho việc đặt hàng. Đăng ký: Cho phép người dùng đăng ký thành khách hàng thân thiết, hội viên để hưởng ưu đãi trong những lần mua hàng tiếp theo. Giỏ hàng: Thể hiện danh mục hàng hóa khách hàng đã chọn, giảm giá trên từng sản phẩm, chọn số lượng sản phẩm muốn mua, số tiền phải chi trả và tiến hành thanh toán.
Thanh toán: Cho phép người dùng điền thông tin giao hàng và chọn hình thức thanh toán phù hợp.1 Giao thức HTTP Http (HyperText Transfer Protocol) là giao thức truyền tải siêu văn bản được sử dụng trong www dùng để truyền tải dữ liệu giữa Web server đến các trình duyệt Web và ngược lại. Giao thức này sử dụng cổng 80 (port 80) là chủ yếu. Hay bạn có thể hiểu khi bạn gõ vào 1 địa chỉ vào trình duyệt Web, lúc này trình duyệt Web sẽ gửi 1 yêu cầu qua giao thức Http đến Web server. Web server và sẽ nhận yêu cầu này và trả lại kết quả cho trình duyệt Web.2 Giao thức HTTP 1.2 Thành phần của Website căn bản: Bố cục và giao diện <header>{- Xác định tiêu đề cho một tài liệu hoặc một phần o <header> được phân phối để sắp xếp các hình ảnh, văn bản, điều hướng, hình ảnh phổ biến, vv ở đầu trang Website.
Logo Biểu ngữ Văn bản giới thiệu <nav>{- Xác định một tập hợp các liên kết điều hướng <section>{- Xác định một phần trong tài liệu <article>{- Xác định nội dung độc lập, khép kín <aside>{- Xác định nội dung ngoài nội dung (như thanh bên) <footer>{- Xác định chân trang cho một tài liệu hoặc một phần 3 1.2 Lý do chọn đề tài Với mong muốn mang đến cho khách hàng trải nghiệm mua sắm trực tuyến độc đáo và đầy ấn tượng. Đèn ngủ không chỉ là vật trang trí mà còn đóng vai trò quan trọng trong việc tạo nên môi trường sống thoải mái và ấm áp. Xu hướng mua sắm trực tuyến ngày càng gia tăng, và việc cung cấp một trang web chuyên nghiệp về đèn ngủ là cơ hội tốt để tiếp cận và phục vụ nhu cầu mua sắm trực tuyến của mỗi con người.3 Mục tiêu đề tài Tạo ra một trang web thân thiện với người dùng, có giao diện đẹp, dễ sử dụng và tương thích trên mọi thiết bị. Cung cấp trải nghiệm mua sắm trực tuyến thoải mái và thuận lợi cho khách hàng.
Xây dựng niềm tin và uy tín thông qua việc cung cấp những sản phẩm chất lượng, an toàn và đẹp mắt. HTML HTML{là viết tắt của cụm từ{Hypertext Markup Language{(tạm dịch là Ngôn ngữ đánh dấu{siêu văn bản).{HTML{được sử dụng để tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, titles, blockquotes… và{HTML{không phải là ngôn ngữ lập trình. Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tag và attributes).4 JavaScript JavaScript là một ngôn ngữ kịch bản ( Scripting language) được dùng để tạo các script ở máy client ( client-side script) và máy server (server-side script). Các script ở máy client được thực thi tại trình duyệt, các script ở máy server được thực hiện trên server.
Chương này sẽ giới thiệu cho chúng ta về ngôn ngữ Javascript, và cách chèn một script vào trong tài liệu HTML. HTML lúc đầu được phát triển như là một định dạng của tài liệu có thể chuyển dữ liệu trên Internet Tuy nhiên, không lâu sau đó, trọng tâm của HTML nặng tính hàn lâm và khoa học dần chuyển hướng sang người dùng thường nhật vì ngày nay người dùng xem Internet như là một nguồn thông tin và giải trí. Các trang Web ngày càng mang tính sáng tạo và đẹp mắt hơn nhằm thu hút nhiều người dùng hơn. Nhưng thực chất kiểu dáng và nội dung bên trong vẫn không thay đổi.
Và người dùng hầu như không thể điều khiển trên trang Web mỗi khi nó được hiển thị. Javascript được phát triển như là một giải pháp cho vấn đề nêu trên. Javascript là một ngôn ngữ kịch bản được Sun Microsystems và Netscape phát triển. Nó được dùng để tạo các trang Web động và tương tác trên Internet.
Đối với những người phát triển HTML, Javascript rất hữu ích trong việc xây dựng các hệ thống HTML có thể tương tác với người dùng.5 CSS CSS{là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để{tìm và định dạng{lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu ( HTML). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… CSS được phát triển bởi{W3C{(World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web.4 BOOTSTRAP 5 Bootstrap{là một front-end framework miễn phí 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.
7 Bootstrap cũng cung cấp cho bạn khả năng tạo ra các responsive designs một cách dễ dàng.7 JQUERY jQuery†là một thư viện được viết bằng{JavaScript†đa tính năng, nhanh và nhỏ gọn. jQuery hoạt động theo phương châm{Write less – Do more{(viết ít hơn, làm nhiều hơn). Mục đích của jQuery là làm cho việc sử dụng JavaScript trên trang web trở nên dễ dàng hơn. 8 jQuery thực hiện rất nhiều tác vụ phổ biến đòi hỏi nhiều dòng mã JavaScript để hoàn thành và gói chúng thành các phương thức mà có thể gọi bằng một dòng mã.
jQuery cũng đơn giản hóa rất nhiều thứ phức tạp từ JavaScript, AJAX call và thao tác DOM. jQuery được tích hợp từ nhiều module khác nhau. Các module phổ biến của jQuery bao gồm: Ajax:{Xử lý Ajax. Event:{Xử lý sự kiện.
Atributes:{Xử lý các thuộc tính của đối tượng{HTML. DOM:{Xử lý Data Object Model. Effect:{Xử lý hiệu ứng. Form:{Xử lý sự kiện liên quan tới form.6 FONT AWESOME Font Awesome là một thư viện chứa các Font chữ dạng ký hiệu thư viện dựa trên CSS và LESS.
Được tạo bởi Dave Gandy dùng để sử dụng với Bootstrap, sau đó được tích hợp vào BootstrapCDN.{ Font Awesome 5 được phát hành vào ngày 7/12/2017 với 1. Các Font này cũng chính là icon thường được dùng để đưa vào thiết kế web. Có nhiều định dạng file khác nhau như otf, eot, ttf, woff, svg… 9 Hình 1.8 FontAwesome Dạng Font này có thể hoạt động trên hầu hết mọi trình duyệt như Google Chrome, Firefox, Opera… Tuy nhiên với các phiên bản cũ như IE7 nó không hoạt động. Hơn nữa IE7 đã trở nên lỗi thời và hầu như không còn được sử dụng.9 SCSS 10 SASS/SCSS là một chương trình tiền xử lý CSS (CSS preprocessor).
Nó giúp bạn viết CSS theo cách của một ngôn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát triển và bảo trì code hơn. Ngoài ra nó có rất nhiều các thư viện hỗ trợ kèm theo giúp bạn viết code CSS một cách dễ dàng vào đơn giản hơn. Có rất nhiều loại CSS Preprocessor trong đó bao gồm SASS, Stylus hay LESS. SCSS sử dụng cú pháp giống với Ruby (vì đơn giản nó được thiết kế bởi các lập trình viên Ruby).
Có phần mở rộng là .scss , SCSS ra đời sau SASS và có cú pháp viết tương tự như cách viết CSS. Các tính năng cơ bản của SCSS: Xếp chồng – Nested Rules Biến – Variable Kế thừa – Extends Import Vòng lặp Mệnh đề điều kiện IF 1.10 Metadata Metadata giữ vai trò cực kỳ quan trọng trong quá trình xây dựng website. Theo đó, siêu dữ liệu làm nhiều chức năng chứa mô tả nội dung trang web, cùng với đó là hệ thống key word liên kết chặt chẽ với nội dung. Chính những metadata đó sẽ hiển thị trong kết quả tìm kiếm.
Điều này có nghĩa độ chính xác của chúng ảnh hưởng trực tiếp đến việc người dùng có thể truy cập vào website nào đó hay không. Phần lớn thông tin đều thể hiện theo dạng thẻ meta. Myers - nhà sáng lập của Metadata Information Partners lần đầu sử dụng thuật ngữ metadata từ năm 1969. Đến năm 1986, Myers chính thức đăng ký nhãn hiệu metadata.
Trong thực tế, metadata thường thể hiện theo nhiều định dạng. Chẳng hạn như metadata trong thư viện, metadata trong mạng internet và metadata trong tệp tin.9 LESS CSS Hình 1.11 Less Css LESS{là một trong các CSS preprocessor, hỗ trợ bạn viết mã CSS thể hiện định dạng giao diện website theo hướng: Đơn giản hơn. Dễ quản lý hơn qua việc sử dụng các thành phần hỗ trợ từ LESS như biến, mixins, toán tử và hàm. Mixins cho phép gắn toàn bộ thuộc tính của một class trong CSS vào trong class khác bằng một cách khá đơn giản là thêm tên class này như một thuộc tính của class kia.