Báo cáo chuyên đề học phần cơ sở lập trình web đề t i website japanworld 日本

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN CƠ SỞ LẬP TRÌNH WEB ĐỀ T I: WEBSITE JAPANWORLD 日本 Sinh viên thực : Giảng viên hướng dẫn : TRẦN NGỌC CẢNH Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG NGHỆ PHẦN MỀM Lớp : D15CNPM4 Khóa : D15 Hà Nội, tháng năm 2022 PHIẾU CHẤM ĐIỂM ST T Họ tên sinh viên Nội dung thực Điểm -Chương -Chương 2: Bố cục layout website (bố cục layout –> bố cục layout 7) -Chương 3: layout website (layout –> layout 7) - Sản phẩm: Layout khởi đầu layout phát triển từ trang chủ chung -Chương 2: Bố cục layout website (bố cục layout –> bố cục layout 11) - Sản phẩm: Layout phát triển từ trang chủ riêng (trang chủ cửa hàng có địa gần người dùng nhất) Họ tên giảng viên Giảng viên chấm 1: Giảng viên chấm 2: Chữ ký Ghi Chữ ký MỤC LỤC Chương : Giới thiệu toán thực 1.1 Tổng quan toán 1.2 Các hệ thống liên quan/tương tự 1.3 Mục tiêu giải toán 1.3.1 Trang Khởi đầu 1.3.2 Trang chủ 1.3.3 Trang Giới thiệu .5 1.3.4 Trang Đăng nhập 1.3.5 Trang Danh mục sản phẩm .5 1.3.6 Trang Tìm kiếm chi tiết 1.3.7 Trang Chi tiết sản phẩm Chương 2: Thiết kế bố cục 2.1 Bố cục trang khởi đầu 2.2 Bố cục trang trang chủ .8 2.2.1 Bố cục trang chủ .8 2.2.2 Bố cục trang giới thiệu .9 2.2.3 Bố cục trang đăng nhập 10 2.2.4 Bố cục trang danh mục sản phẩm 11 2.2.5 Bố cục trang tìm kiếm chi tiết .12 2.2.6 Bố cục trang chi tiết sản phẩm 13 2.3 Bố cục trang trang chủ phụ 14 2.3.1 Bố cục trang chủ .14 2.3.4 Bố cục trang danh mục sản phẩm 15 2.3.5 Bố cục trang tìm kiếm chi tiết .16 2.3.6 Bố cục trang chi tiết sản phẩm 16 Chương 3: Kết thực 17 Trang Khởi đầu 17 3.2 Các trang trang chủ 18 3.2.1 Trang chủ 18 3.2.2 Trang giới thiệu .18 3.3.3 Trang Đăng nhập 20 3.3.4 Trang Danh mục sản phẩm 20 3.3.5 Trang Tìm kiếm chi tiết 22 3.3.6 Trang Chi tiết sản phẩm 23 3.3 Các trang trang chủ phụ 24 3.4 Một chút chi tiết header 24 3.4.1 Nữ .24 3.4.2 Nam 24 3.4.3 Trẻ em 25 3.4.4 Đẹp 25 3.4.5 Tiêu dùng 26 LIỆT KÊ CHỮ VIẾT TẮT HTM L HyperText Markup Language CSS JS Trang chủ Trang chủ Cascading Style Sheets JavaScript Ngôn ngữ Đánh dấu Siêu văn tập tin định kiểu theo tầng Ngôn ngữ lâ ]p tr^nh JavaScript Trang chủ thức trang chủ cửa hàng có địa điểm gần người dùng DANH MỤC HÌNH ẢNH H^nh 2.1: Bố cục layout 1… (h^nh thứ chương 2) H^nh 2.2: Bố cục layout 2… (h^nh thứ chương 2) H^nh 2.3: Bố cục layout 3… (h^nh thứ chương 2) H^nh 2.4: Bố cục layout 4… (h^nh thứ chương 2) 10 H^nh 2.5: Bố cục layout 5… (h^nh thứ chương 2) 11 H^nh 2.6: Bố cục layout 6… (h^nh thứ chương 2) 12 H^nh 2.7: Bố cục layout 7… (h^nh thứ chương 2) 13 H^nh 2.8: Bố cục layout 8… (h^nh thứ chương 2) 14 H^nh 2.9: Bố cục layout 9… (h^nh thứ chương 2) 15 H^nh 2.10: Bố cục layout 10… (h^nh thứ 10 chương 2) 16 H^nh 2.11: Bố cục layout 11… (h^nh thứ 11 chương 2) 16 H^nh 3.1: layout 1… (h^nh thứ chương 3) 17 H^nh 3.2: layout 2… (h^nh thứ chương 3) 18 H^nh 3.3: layout 3… (h^nh thứ chương 3) 19 H^nh 3.4: layout 4… (h^nh thứ chương 3) 20 H^nh 3.5: layout 5… (h^nh thứ chương 3) 21 H^nh 3.6: layout 6… (h^nh thứ chương 3) 22 H^nh 3.7: layout 7… (h^nh thứ chương 3) 23 H^nh 3.8: Header/Nữ … (h^nh thứ chương 3) 24 H^nh 3.9: Header/Nam… (h^nh thứ chương 3) .24 H^nh 3.10: Header/Trẻ em … (h^nh thứ 10 chương 3) .25 H^nh 3.11: Header/Đẹp… (h^nh thứ 11 chương 3) 25 H^nh 3.12: Header/Tiêu dùng … (h^nh thứ 12 chương 3) 26 LỜI MỞ ĐẦU Với phát triển mạnh mẽ công nghệ thông tin lớn mạnh, rộng khắp mạng máy tính tồn cầu Việc ứng dụng tin học vào lĩnh vực sống ngày quan tâm sử dụng hiệu quả, đem lại lợi lích to lớn mặt Sự lớn mạnh mạng máy tính xóa bỏ ranh giới khơng gian thời gian, giúp đỡ nhiều cho người nhiều lĩnh vực đời sống Hiện thời đại công nghệ phát triển, việc mua sắn trực tuyến qua internet khơng cịn q xa lạ g^ người ta khơng thể phủ nhận lợi ích mà việc bán hàng online mang lại Ví dụ : người Việt Nam mà muốn mua áo cửa hàng Nhật Bản th^ họ nhiều tiền bạc, công sức vào việc di chuyển v^ khoảng cách địa lý xa Do đó, để giải nhu cầu khách hàng th^ cửa hàng thời trang Nhật Bản ngồi việc bán hàng trực tiếp th^ họ cịn sử dụng thêm h^nh thực bán hàng trực tuyến (online) Việc sở hữu website giúp cho việc bán hàng họ tiến triển tốt v^ giải nhiều vấn đề Khách hàng không cịn phải lo lắng khoảng cách, phí di chuyển v^ cần điện thoại hay máy tính có kết nối internet, họ thoải mái xem, lựa chọn, shopping ngơi nhà m^nh mua quần áo ứng ý Dựa ví dụ nhiều v^ dụ khác, chúng em lựa chọn cho m^nh đề tài xây dựng “website JAPANWORLD 日本 ” website bán hàng online Website có chức điển h^nh giống với website bán hàng khác, là: t^m kiếm, lựa chon, xem hàng, mua hàng, đặt hàng, Giống với website khác, để làm tăng cá nhân hóa trải nhiệm th^ “JAPANWORLD 日本 ” có hệ thống tài khoản, đăng nhập, đăng ký Ngồi ra, website cịn có tính chọn lọc sản phẩm theo màu sắc, kích cỡ, h^nh dáng, thể loại, phong cách, nhằm đáp ứng yêu cầu khách hàng Điều đặc biệt thứ mà chúng em hướng đến JAPANWORLD 日 本 phải có giao diện: Đơn giản, đẹp mắt, tinh tế, sáng tạo, dễ thao tác h^nh, phù hợp cho lứa tuổi Với khoảng thời gian không nhiều, vừa phân tích thiết kế, nghiên cứu t^m hiểu khai thác ngơn ngữ mới, vừa thực chương tr^nh khó khăn chúng em Bởi xây dựng “website JAPANWORLD 日本 ” đề tài có nội dung rộng, mặt khác khả am hiểu hệ thống chúng em nhiều hạn chế Tuy nhiên q tr^nh làm cịn có nhiều thiếu xót nên chúng em mong nhận ý kiến đóng góp tập em hồn thiện Chương : Giới thiệu toán thực 1.1 Tổng quan toán Hiện việc bán hàng qua mạng khơng cịn xa lạ g^ người, khơng thể phủ nhận lợi ích mà việc bán hàng online mang lại Mặc dù C C++ có khả làm việc tr^nh biên dịch lại phụ thuộc vào loại CPU Tr^nh biên dịch thường phải tốn nhiều thời gian để xây dựng nên đắt, v^ để loại CPU có tr^nh biên dịch riêng tốn Người mua cần truy cập trang web bán hàng lựa chọn mặt hàng cần thiết mà không cần phải đến tận cửa hàng để mua tiết kiệm nhiều thời gian, việc tốn trực tuyến nhanh chóng khách hàng đặt hàng giao hàng đến tận nơi khoảng thời gian ngắn sau đặt hàng Website JAPANWORLD 日 本 tạo nhằm cung cấp cho nguời yêu thích mua sắm sản phẩm đặc biệt loại mặt hàng thời trang, dụng cụ, mỹ phẩm, người bắt đầu với môn môi trường tương tác t^m hiểu, cập nhật tin tức mặt hàng:  Giao diện: Đơn giản, đẹp mắt, dễ thao tác h^nh, phù hợp cho đối tượng khách hàng  Sản phẩm: Đa dạng mẫu mã sản phẩm, h^nh ảnh sản phẩm chân thực, dễ phân loại để người dùng dễ t^m kiếm lựa chọn 1.2 Các hệ thống liên quan/tương tự “TOKYOLIFE” website mà chúng em dựa để làm đề tài m^nh Vậy trước hết “TOKYOLIFE” g^? TokyoLife cửa hàng bán lẻ đồ gia dụng, hóa mỹ phẩm, phụ kiện hãng thương hiệu Nhật Bản: KAI, Inomata, Ebisu, Lec, Seria, Merries, Glico, Aprica, Kose (Dòng Softymo) , Shiseido (Dòng Senka, Anessa), KAO, Rosette, Naive, Ebisu, Unicharm, Cocopalm, Himawari, Rocket, Gunze-Sabrina, Regart Phụ kiện giày, túi, ví, balo thời trang hiệu TokyoLife, TokyoBasic, In The Now nhiều thương hiệu thời trang, phụ kiện khác sản xuất Việt Nam, Trung Quốc, Thái Lan… 1.3 Mục tiêu giải toán Khi xây dựng website việc phải h^nh dung cần phải thiết kế g^ cho website m^nh? Khơng có chủ định mục tiêu rõ ràng th^ website trở nên sai lầm, lan man cuối tới hướng khó trở lại Thiết kế cẩn thận định hướng rõ ch^a khóa hướng tới thành công việc xây dựng website Vậy nên, mục tiêu chung website mà chúng em xây dựng “bán hàng” Chính v^ giao diện phải bắt mắt, lôi thu hút người dùng từ biến người dùng thành khách hàng Hơn nữa, việc có đa dạng mặt hàng, sản phẩm điều cần thiết, ta cần phải xếp bố cục mặt hàng, sản phẩm cho ưa nh^n đẹp mắt Với việc website JAPANWORLD 日 本 website bán thời trang mang đậm phong cách nhật bản, nên tông màu chủ đạo gồm màu đỏ trắng Chúng em thiết kế layout bao gồm: Khởi đầu, trang chủ, giới thiệu, đăng nhập, danh mục sản phẩm, t^m kiếm chi tiết chi tiết sản phẩm 1.3.1 Trang Khởi đầu Mô tả: Đầu tiên, người dùng muốn truy cập vào website JAPANWORLD日 本 th^ họ truy cập vào website gọi “khởi đầu” website có ảnh logo cửa hàng khay tương tác (bao gồm lựa chọn) Mục đích: Website khởi đầu đưa cho người dùng lựa chọn để truy cập vào trang chủ JAPANWORLD日本 Có hai lựa chọn: Một người dùng mua sắm trực tiếp với trang chủ hai người dùng mua sắm với trang chủ phụ (trang chủ cửa hàng có địa điểm gần người dùng nhất) Việc đưa website “khởi đầu” làm tối ưu hóa tính thỏa mãn mua hàng v^ trang chủ có tất mặt hàng mà JAPANWORLD日本 có Cịn trang chủ có mặt hàng mà cửa hàng địa điểm gần người dùng có 1.3.2 Trang chủ Mơ tả: Cả hai trang chủ trang chủ phụ chứa tất chức mà website có Phần header gồm: danh mục, menu, logo website, thơng báo, tài khoản, giỏ hàng, u thích, hỗ trợ Phần body gồm: ảnh sản phẩm, flashe sale, gợi ý combo, sản phẩm, deal giảm giá, hàng về, hàng bán 2.2.5 Bố cục trang tìm kiếm chi tiết H^nh 2.6: Bố cục layout 6… (h^nh thứ chương 2) 12 2.2.6 Bố cục trang chi tiết sản phẩm H^nh 2.7: Bố cục layout 7… (h^nh thứ chương 2) 13 2.3 Bố cục trang trang chủ phụ 2.3.1 Bố cục trang chủ H^nh 2.8: Bố cục layout 8… (h^nh thứ chương 2) 14 2.3.4 Bố cục trang danh mục sản phẩm H^nh 2.9: Bố cục layout 9… (h^nh thứ chương 2) 15 2.3.5 Bố cục trang tìm kiếm chi tiết H^nh 2.10: Bố cục layout 10… (h^nh thứ 10 chương 2) 2.3.6 Bố cục trang chi tiết sản phẩm H^nh 2.11: Bố cục layout 11… (h^nh thứ 11 chương 2) 16 Chương 3: Kết thực Trang Khởi đầu H^nh 3.1: layout 1… (h^nh thứ chương 3) 17 3.2 Các trang trang chủ 3.2.1 Trang chủ H^nh 3.2: layout 2… (h^nh thứ chương 3) 3.2.2 Trang giới thiệu 18 H^nh 3.3: layout 3… (h^nh thứ chương 3) 19 3.3.3 Trang Đăng nhập H^nh 3.4: layout 4… (h^nh thứ chương 3) 3.3.4 Trang Danh mục sản phẩm 20 H^nh 3.5: layout 5… (h^nh thứ chương 3) 21 3.3.5 Trang Tìm kiếm chi tiết H^nh 3.6: layout 6… (h^nh thứ chương 3) 22 3.3.6 Trang Chi tiết sản phẩm H^nh 3.7: layout 7… (h^nh thứ chương 3) 23 3.3 Các trang trang chủ phụ 3.4 Một chút chi tiết header 3.4.1 Nữ H^nh 3.8: Header/Nữ… (h^nh thứ chương 3) 3.4.2 Nam H^nh 3.9: Header/Nam… (h^nh thứ chương 3) 24 3.4.3 Trẻ em H^nh 3.10: Header/Trẻ em… (h^nh thứ 10 chương 3) 3.4.4 Đẹp H^nh 3.11: Header/Đẹp… (h^nh thứ 11 chương 3) 25 3.4.5 Tiêu dùng H^nh 3.16: Header/Tiêu dùng… (h^nh thứ 16 chương 3) 26