BÀI TẬP LỚN Môn học Mô đun Lập trình ứng dụng Đề tài Thiết kế trang web bán máy tính

BÀI TẬP LỚN Mơn học/Mơ đun: Lập trình ứng dụng Đề tài: Thiết kế trang web bán máy tính Ngành: Công nghệ thông tin SINH VIÊN THỰC HIỆN: STT MSSV Họ Tên Lớp 20012030025 Nguyễn Văn Nhâm K20-IT01 20012030043 Nguyễn Ngọc Trung K20-IT01 GV hướng dẫn: Thầy Quảng BÀI TẬP LỚN Mơn học/Mơ đun: Lập trình ứng dụng Đề tài: Thiết kế trang web bán máy tính Ngành: Cơng nghệ thơng tin SINH VIÊN THỰC HIỆN: STT MSSV Họ Tên Lớp 20012030025 Nguyễn Văn Nhâm K20-IT01 20012030043 Nguyễn Ngọc Trung K20-IT01 GV hướng dẫn: Thầy Quảng NHẬN XÉT Nhận xét giảng viên hướng dẫn: ……………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… ………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… ………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… …… …………………………………………………………………………………………… …………………………………………………………………………………………… …………………………………………………………………………………………… ………………………………………………………………………………………… GIẢNG VIÊN HƯỚNG DẪN Th.S LỜI CAM ĐOAN Chúng em xin cam đoan tập lớn “Trang website bán máy tính” Là kết thực chúng em hướng dẫn thầy Việt Những phần sử dụng tài liệu tham khảo tập lớn nêu rõ phần tài liệu tham khảo Các kết trình bày tập lớn chương trình xây dựng hồn tồn kết chúng em thực Nếu vi phạm lời cam đoan này, chúng em xin chịu hoàn toàn trách nhiệm trước khoa nhà trường Những tài liệu, thông tin, hình ảnh tham khảo trích dẫn rõ ràng, pháp luật Em xin chịu trách nhiệm trước pháp luật lời cam đoan LỜI CẢM ƠN Sau khoảng thời gian học tập rèn luyện Trường Công Cao đẳng Công nghệ Bách Khoa Hà Nội đến chúng em kết thúc mơn học Để hồn thành tập lớn , chúng em xin phép gửi lời cảm ơn tới mơn Lập trình ứng dụng , Khoa Cơng nghệ thông tin – Trường Cao đẳng Công nghệ Bách Khoa Hà Nội tạo điều kiện thuận lợi cho chúng em thực tập lớn môn học Đặc biệt chúng em xin chân thành cảm ơn thầy mơn tận tình hướng dẫn bảo chúng em suốt thời gian thực tập lớn vừa qua.Cảm ơn thầy giáo, cô giáo bạn Trường giúp đỡ chúng em thời gian qua, tạo điều kiện tốt để chúng em hồn thành tập lớn Nhưng thời gian có hạn, kinh nghiệm kiến thức thực tế cịn hạn chế, nên q trình thực đề tài chắn không tránh khỏi thiếu sót Chúng em mong nhận góp ý bảo nhiệt tình từ phía thầy bạn để nâng cao khả chuyên môn hoàn thiện kiến thức Em xin trân trọng cảm ơn! MỤC LỤC NHẬN XÉT LỜI CAM ĐOAN MỤC LỤC DANH SÁCH TỪ VIẾT TẮT CHƯƠNG 1: MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Mục tiêu đề tài 1.2.1 Mục tiêu tổng quát .9 1.2.2 Mục tiêu cụ thể 1.3 Giới hạn phạm vi đề tài .10 1.3.1 Đối tượng nghiên cứu .10 1.3.2 Phạm vi nghiên cứu 10 1.4 Nội dung thực 10 1.5 Phương pháp tiếp cận .11 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 12 2.1 Giới thiệu học máy 12 2.2 Một số thư viện .13 2.3 Thuật tốn/ cơng cụ / thư viện .13 CHƯƠNG 3: 3.1 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 16 Mô tả chức .16 3.1.1 Trang chủ 16 3.1.2 Thêm sản phẩm 16 3.1.3 Xử lý đơn hàng 16 3.1.4 Tổng hợp 16 3.2 Dữ liệu 17 3.3 Thiết kế giao diện 17 CHƯƠNG 4: 4.1 4.1.1 XÂY DỰNG ỨNG DỤNG 18 Xây dựng sở liệu 18 Trang chủ trang web 18 4.2 Các thông tin khác trang web .18 4.2.1 Trang giới thiệu sản phẩm .18 4.2.2 Trang laptop gaming 19 4.2.3 Trang laptop văn phòng 19 4.2.4 Trang laptop đồ hoạ kĩ thuật 19 4.2.5 Trang Laptop linh kiện .20 4.3 Hỏi đáp 20 4.4 Trang đăng nhập 20 4.5 Trang đăng ký 21 4.6 Cài đặt chức cho ứng dụng 21 KẾT LUẬN: 23 TÀI LIỆU THAM KHẢO .24 DANH SÁCH TỪ VIẾT TẮT Từ viết tắt Từ đầy đủ Giải thích CMS Content Management System Hệ quản trị nội dung CPU Central Processing Unit RAM Random Access Memory Bộ nhớ truy cập ngẫu nhiên ROM Read Only Memory Bộ nhớ đọc HTML Hypertext Markup Language Ngôn ngữ Đánh dấu Siêu văn CSS Cascading Style Sheets Ngơn ngữ tìm định dạng văn CHƯƠNG 1:MỞ ĐẦU 1.1 Lý chọn đề tài Như thấy thị trường việc cạnh tranh ngày trở nên liệt hầu hết nhà kinh doanh, nhũng công ty lớn tâm đến việc thỏa mãn khách hàng cách tốt Hiện nhiều doanh nghiệp phát triển hệ thống bán hàng theo loại thương mại điện tử So với kinh doanh truyền thống thương mại điện tử chi phí thấp hơn, hiệu đạt cao Hơn nữa, với lợi công nghệ internet nên việc truyền tải thông tin sản phẩm nhanh chóng, thuận tiện Kết hợp với phận giao hàng tận nơi, tăng thêm lợi nhuận để loại hình phát triển Và thời đại 4.0 ngày phát triển giúp cho máy tính thiết bị phổ biến sống Do nhu cầu sử dụng máy tính tăng cao nên số lượng shop bán máy tính phát triển cách nhanh Nhu cầu mua sắm online người tăng cách chóng mặt, bên cạnh dịch COVID-19 làm hạn chế di chuyển người đến tận shop để trải nghiệm sản phẩm nên chúng em lựa chọn làm website bán máy tính để khách hàng trải nghiệm hiểu thêm sản phẩm qua website chúng em Biết nhu cầu chương trình “Thiết kế trang web Bán Máy Tính” xây dựng nhằm để đáp ứng cho người tiêu dùng tồn quốc thơng qua hệ thống website họ đặt mua mặt hàng hay sản phẩm cần thiết 1.2 Mục tiêu đề tài 1.2.1 Mục tiêu tổng quát - Thiết kế trang web Bán Máy Tính - Nghiên cứu công nghệ phát triển Website - Giải tối ưu hóa q trình QL bán hàng - Đưa báo cáo, TK tổng hợp 1.2.2 Mục tiêu cụ thể -Khiến cho việc mua hàng trở nên dễ dàng mùa dịch hay kể hết dịch 10  Email marketing biết đến nhiều việc tiếp cận khách hàng có sẵn Thế kênh tìm kiếm khách hàng tiềm online tuyệt vời để thu hút khách hàng mà doanh nghiệp thường dùng Dưới cách sử dụng email marketing mà bạn áp dụng: Chiến dịch Opt-in ( mời khách hàng đăng ký nhận email ) gửi email có giá trị 1.5 Phương pháp tiếp cận Các trang mạng xã hội hot mà bạn bỏ qua Facebook, instagram, youtube,… Facebook không trang mạng xã hội đứng đầu sử dụng rộng rãi maf tập trung phát triển với vai trò kênh kết nối hiệu doanh nghiệp người dùng, công cụ giúp doanh nghiệp tương tác với khách hàng mục tiêu dễ dàng dễ dàng tìm thấy khách hàng tiềm Nếu sản phẩm, dịch vụ bạn hướng tới người trẻ tuổi Instagram lại trang mạng tuyệt vời để bạn tìm kiếm khách hàng tiềm online ứng dụng sở hữu lượng người dùng có độ tuổi từ 35 đổ xuống Muốn tiếp cận nhiều khách hàng Điều bạn cần thấu hiểu sản phẩm, dịch vụ mà cung cấp Ngồi bạn cịn cần nắm rõ ngân sách, dịng tiền tài kiến thức sâu ngành với góc nhìn khách hàng sản phẩm, dịch vụ để có chiến lược marketing hiệu 12 CHƯƠNG 2:CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu học máy - Học máy lĩnh vực Trí tuệ nhân tạo Mục tiêu học máy hiểu cấu trúc liệu chúng tơi điều chỉnh liệu vào mơ hình chúng tơi để chúng tơi hiểu sử dụng Học máy không giống cách tiếp cận tính tốn truyền thống cách tiếp cận tính tốn truyền thống, vấn đề giải cách sử dụng hướng dẫn lập trình rõ ràng (dài chi tiết) Nhưng mơ hình Machine Learning xây dựng cách đào tạo đầu vào liệu sử dụng phân tích thống kê để tìm giá trị đầu nằm phạm vi cụ thể Các mơ hình xây dựng cách sử dụng liệu mẫu từ đầu vào để tự động hóa q trình định - Các kiến thức học máy là:  Máy vi tính: cơng cụ xử lý thơng tin cách tự động theo trình lập sẵn từ trước  Máy tính gồm phận như: bàn phím, chuột, Microphone, hình, loa, đĩa cứng, đĩa mềm, đĩa CD, CPU, chipset…  Phầm mềm: tập hợp tất câu lệnh nhà lập trình viết để hướng mt làm số việc cụ thể  Case mt: phận bên ngồi có tác dụng bao bọc cho thành phần bên mt, tránh tác động không mong muốn từ bên ngồi  Mainboard: mạch liên kết tất linh kiện thiết bị ngoại vi thành máy tính thống  Chipset: kết nối thành phần Mainboard thiết bị ngoại vi lại với  Bộ nhớ cache: nhớ đệm nằm nhớ RAM CPU nhằm rút ngắn thời gian lấy liệu lúc CPU xử lý  CPU: linh kiện quan trọng, tồn q trình xử lý, tính tồn điều khiển thực Là linh kiện định đến tốc độ mt, tốc độ xử lý tính CPU tính MHz GHz  Bộ nhớ: thành phần quan trọng thứ hệ thống mt Dùng để lưu trữ liệu mt hoạt động 13  Có loại nhớ: + Bộ nhớ RAM (Random Access Memory) nhớ truy cập ngẫu nhiên + Bộ nhớ ROM (Read Only Memory) nhớ đọc  Ổ cứng: thiết bị lưu trữ có dung lượng lớn dùng để lưu tồn phần mềm máy tính 2.2 Một số thư viện Các ứng dụng ngôn ngữ :  Phần mềm Visual Studio Code: hỗ trợ việc viết code cách dễ dàng tiện lợi  Github: giúp làm việc nhóm cách hiệu tốt  HTML (HyperText Markup Language) : ngôn ngữ đánh dấu thiết kế để tạo nên trang web, nghĩa mẩu thơng tin trình bày World Wide Web  CSS (Cascading Style Sheets): ngơn ngữ trình bày dùng để tạo kiểu cho xuất nội dung sử dụng, ví dụ phơng chữ màu sắc  Hai ngôn ngữ HTML CSS độc lập với giữ nguyên CSS không nên viết bên tài liệu HTML ngược lại Theo quy định, HTML đại diện cho nội dung CSS thể xuất nội dung  Chức năng: HTML sử dụng để xác định cấu trúc trang web, khơng dùng với mục đích trình bày hiển thị CSS sử dụng để tạo kiểu cho trang web thông qua đặc điểm phong cách khác nhau, dùng với mục đích trình bày hiển thị Thành phần: Cấu trúc HTML gồm thẻ nội dung 2.3 Thuật tốn/ cơng cụ / thư viện - Thuật toán danh sách hướng dẫn quy tắc mà máy tính cần thực để hồn thành tác vụ Về chất, thuật toán loạt chi dẫn tuân theo bước để làm hữu ích giải vấn đề - Giới thiệu Visual Studio Code 14 + Là trình biên tập lập trình code miễn phí dành cho Windows, Linux macOS, Visual Studio Code phát triển Microsoft Nó xem kết hợp hoàn hảo IDE Code Editor + Visual Studio Code hỗ trợ chức debug, kèm với Git, có syntax highlighting, tự hồn thành mã thơng minh, snippets, cải tiến mã nguồn Nhờ tính tùy chỉnh, Visual Studio Code cho phép người dùng thay đổi theme, phím tắt, tùy chọn khác - Một số tính : + Hỗ trợ nhiều ngơn ngữ lập trình  Visual Studio Code hỗ trợ nhiều ngơn ngữ lập trình C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, … Vì vậy, dễ dàng phát đưa thông báo chương chương trình có lỗi + Hỗ trợ đa tảng  Các trình viết code thơng thường sử dụng cho Windows Linux Mac Systems Nhưng Visual Studio Code hoạt động tốt ba tảng + Cung cấp kho tiện ích mở rộng  Trong trường hợp lập trình viên muốn sử dụng ngơn ngữ lập trình khơng nằm số ngơn ngữ Visual Studio hỗ trợ, họ tải xuống tiện ích mở rộng Điều không làm giảm hiệu phần mềm, phần mở rộng hoạt động chương trình độc lập + Kho lưu trữ an tồn  Đi kèm với phát triển lập trình nhu cầu lưu trữ an toàn Với Visual Studio Code, người dùng hồn tồn n tâm dễ dàng kết nối với Git kho lưu trữ có 15 + Hỗ trợ web  Visual Studio Code hỗ trợ nhiều ứng dụng web Ngồi ra, có trình soạn thảo thiết kế website + Lưu trữ liệu dạng phân cấp  Phần lớn tệp lưu trữ đoạn mã đặt thư mục tương tự Ngồi ra, Visual Studio Code cịn cung cấp thư mục cho số tệp đặc biệt quan trọng + Hỗ trợ viết Code  Một số đoạn code thay đổi chút để thuận tiện cho người dùng Visual Studio Code đề xuất cho lập trình viên tùy chọn thay có 16 CHƯƠNG 3:PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 3.1 Mơ tả chức 3.1.1 Trang chủ - Mục đích: Giúp người dùng trở trang chủ cách dễ dàng - Người dùng: Tất người dùng truy cập vào trang web 3.1.2 Thêm sản phẩm - Mục đích: Thêm sản phẩm vào gian hàng - Người dùng: Nhân viên chủ trang web - Điều kiện: Người dùng phải đăng nhập tài khoản Administrator - Đầu vào: Giá sản phẩm, thông tin chi tiết sản phẩm, thông số kĩ thuật sản phẩm,… - Đầu ra: Lưu thông tin vào sở liệu người dùng 3.1.3 Xử lý đơn hàng - Mục đích: Xử lý đơn hàng đặt - Điều kiện: người dùng đăng nhập tài khoản admin - Nhân viên, chủ cửa hàng kiểm tra thông tin khách hàng , xác nhận thông tin cách gọi trực tiếp cho khách hàng để đối chiếu thông tin - xem xác hay chưa Sau xác nhận thơng tin thành cơng kiểm tra khách hàng tốn chưa ( trường hợp khách chọn toàn online ) 3.1.4 Tổng hợp - Mục đích: Tổng hợp , phân tích liệu - Người sử dụng: nhân viên, chủ cửa hàng - Điều kiện: Đăng nhập vào web tài khoản admin - Nhân viên, chủ cửa hàng thống kê lại số liệu như: số sản phẩm bán, số lượng sản phẩm tồn kho, tổng tiền lời… 17 3.2 Dữ liệu Dữ liệu gồm có file Word, file PowerPoint file chứa Website 3.3 Thiết kế giao diện - Gồm phần Banner Trong banner gồm nhiều nhánh nhỏ như: “Trang chủ, LapTop, PC - Case, Bảo Hành, Liên Hệ ” - Thứ body Website mục máy tính kèm với tên sản phẩm giá thành sản phẩm… - header: phần đầu trang web, chứa chức như: qr code, kết nỗi với facebook, Instagram, thông báo, chợ giúp, form đăng ký, đăng nhập, giỏ hang, tìm kiếm, phần menu chưa phần: trang chủ, giới thiệu, nike, adidas, Jordan, sale - Phần thân trang web, gơm phần :  Phần danh mục “menu phụ”, chứa chức như: sản phẩm, dịch vụ khuyến mại, nơi bán  Phần lọc xếp sản phẩm chứa chức năng: phổ biến, bán chạy, giá  Phần chứa sản phâm gồm có : ảnh sản phẩm, tên sản phẩm, giá, số lượng bán chương trình khuyến kèm theo sản phẩm … - Phần cuối trang web: chứa phân chức như:Chăm sóc khách hàng, Giới thiệu shop bán Máy tính PTKH, Liên Hệ, Địa Chỉ, truy cập cửa hàng ứng dụng Email liên hệ, logo, slide sản phẩm 18 CHƯƠNG 4:XÂY DỰNG ỨNG DỤNG 4.1 Xây dựng sở liệu 4.1.1 Trang chủ trang web 4.2 Các thông tin khác trang web 4.2.1 Trang giới thiệu sản phẩm 19 4.2.2 Trang laptop gaming 4.2.3 Trang laptop văn phòng 4.2.4 Trang laptop đồ hoạ kĩ thuật 20 4.2.5 Trang Laptop linh kiện 4.3 Hỏi đáp 4.4 Trang đăng nhập 21 4.5 Trang đăng ký 4.6 Cài đặt chức cho ứng dụng - Giải thích code thư mục HTML : baitaplon + Trong link web bán máy tính (Dịng 133 → 158) Banner Trong có thơng tin “Trang chủ”, “LapTop”, “PC - Case”, “Bảo Hành”, “Liên Hệ” thư mục lại có thư mục con… + Link Web bán Máy Tính (Dịng 160 → 232) hiển thị SlideShow hãng LapTop bán chạy hãng khác phù hợp với người + Link hãng máy dùng để hiển thị thư mục sản phẩm Trong có thư mục để hiển thị ảnh sản phẩm, tên sản phẩm giá thành sản phẩm … + Link liên hệ để hiển thị bảng điền thơng tin người dùng để bình luận sản phẩm sản phẩm lỗi điền vào thông tin form để hỗ trợ + Và dùng ngôn ngữ JavaScript giúp cho SlideShow chạy mượt mà tốt  Trong có dùng thẻ như: - Div: thẻ dùng để nhóm nhiều phần tử HTML lại với - Class: thuộc tính dùng để xác định nhiều tên lớp cho phần tử HTML Tên lớp dùng CSS JavaScript để thực số tác vụ định cho phần tử có tên lớp - Img: thẻ dùng để chèn hình ảnh vào trang web 22 - Marquee: thẻ dùng để di chuyển chữ hình ảnh theo chiều ngang dọc cách tự động - A: thẻ dùng để tạo liên kết đến tài liệu - P: thẻ giúp cho trình duyệt nhận dạng văn HMTL - Span: thẻ đặc biệt HTML, theo mặc định đoạn văn thẻ span k bị thay đổi điều gì, cịn gọi thẻ trung tính - Script: dùng để xác định mã JavaScript cần chạy trang web 23 KẾT LUẬN: - Kiến thức đạt được: · Hiểu tự cách làm giao diện website bán hàng; · Biết thư viện, công cụ làm việc với ngơn ngữ lập trình HTML5, CSS, Javasvript; · Nắm kiến thức làm việc với web Sản phẩm có được: Xây dựng tương đối hồn thiện website với giao diện dễ nhìn , thao tác đặt hàng dễ dàng, tìm kiếm sản phẩm nhanh chóng thuận tiện cho người sử dụng - Những hạn chế đề tài: · Chưa xây dựng sở liệu, chưa thể chèn xuất liệu file riêng; · Website hoàn thiện gần hết mặt giao diện chức đặt hàng toán online , thêm sản phẩm , thống kê chưa hoàn thiện - Hướng phát triển đề tài: · Tiếp tục xây dựng giao diện web, bổ xung phần cịn thiếu website · Nâng cấp chức thể sử dụng cách tiện lợi · Bổ xung sở liệu Trong trình làm tập lớn, nhóm em cố gắng tìm hiểu cài đặt chương trình thời gian lực nhóm em cịn hạn chế nên nhóm em chưa giải dược vấn đề đặt Nhóm em mong nhận thông cảm Thầy giáo, Cơ giáo nhà trường Nhóm em xin chân thành cảm ơn ! 24 TÀI LIỆU THAM KHẢO 1.1 Sách tham khảo [1] Jon Duckett (2011), HTML and CSS: Design and Build Websites [2] Andu Budd, Cameron Moll Collison (2006) : Advanced Web Standards Solutions 1.2 Các trang web tham khảo - Hanoicomputer.vn - FptShop.vn - Tuhocdohoa.com - Phuccanh.vn 1.3 Website tham khảo kiến thức lập trình - Howkteam.vn - W3school.com Hà Nội, ngày tháng 01 năm 2021 THÔNG QUA KHOA 25