Đồ án tốt nghiệp - Website mua bán hàng ngành hàng mỹ phẩm

-����� - ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Đề tài: Website mua bán hàng ngành hàng mỹ phẩm Hà Nội, tháng 5/2022 CỘNG HOÀ Xà HỘI CHỦ NGHĨA VIỆT NAM Độc lập - Tự – Hạnh phúc ĐỀ TÀI ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC 1/ Tên đề tài ĐATN: Tìm hiểu xây dựng hệ thống website bán hàng ngành hàng mỹ phẩm 2/ Nội dung chính: 1/ Cơ sở lý luận đề tài 2/ Xây dựng hệ thống 3/ Hệ thống giao diện website 3/ Cơ sở liệu ban đầu Kiến thức mơn Kỹ thuật lập trình ứng dụng 4/ Ngày giao: ……………… 5/ Ngày nộp: ……………… TRƢỞNG KHOA GIÁO VIÊN HƢỚNG DẪN (Ký, ghi rõ họ tên) (Ký, ghi rõ họ tên) NHẬN XÉT CỦA GIÁO VIÊN HƢỚNG DẪN Đề Tài: Tìm hiểu xây dựng hệ thống thông tin bán hàng ngành hàng mỹ phẩm tảng web Giáo viên hƣớng dẫn: ThS.Nguyễn Mạnh Hùng Sinh viên thực hiện: Vũ Nguyễn Minh Chiến ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Hà Nội, ngày tháng năm 2022 GIÁO VIÊN HƢỚNG DẪN LỜI CẢM ƠN Hà Nội, ngày 09 tháng 05 năm 2022 MỞ ĐẦU Trong năm gần đây, thƣơng mại điện tử đƣợc tiếp cận sâu vào doanh nghiệp Việt Nam.Tuy nhiên, việc ứng dụng vào hoạt động sản xuất kinh doanh cịn thời kì sơ khai phải đối mặt với nhiều khó khăn đáng kể Đó sở hạ tầng cơng nghệ thơng tin cịn thấp, khung pháp lý cho thƣơng mại điện tử chƣa đƣợc xây dựng, thói quen mua bán ngƣời dân, thiếu hệ thống tốn điện tử tự động, thiếu an tồn, bảo mật Các doanh nghiệp thận trọng định tham gia thƣơng mại điện tử Ngoài tỷ lệ ngƣời tham gia sử dụng Internet thấp, lƣợng ngƣời sử dụng thẻ tín dụng cản trở cho việc triển khai thƣơng mại điện tử Việt Nam Nói đến cơng nghệ thông tin nƣớc ta, phải thừa nhận vài năm gần hệ thống công nghệ thông tin nƣớc ta đƣợc phát triển mạnh mẽ thành phố lớn nhƣ Hà nội, Hải Phòng, Thành phố Hồ Chí Minh…, loạt trung tâm đào tạo kỹ sƣ công nghệ thông tin nhƣ loạt dịch vụ Internet đời nhằm phục vụ cho nhu cầu phát triển công nghệ thông tin Nhƣng phát triển chƣa đồng đều, chƣa có hệ thống Rất nhiều trung tâm đào tạo khơng có bản, chất lƣợng khơng cao dẫn đến đào tạo kỹ sƣ công nghệ thông tin có trình độ thấp Đi đơi với nó, chất lƣợng dịch vụ mạng Việt Nam không đƣợc tốt cho lắm, thƣờng xuyên xảy tình trạng mạng bị kẹt đƣờng truyền nhà cung cấp dịch vụ không đủ chất lƣợng để đáp ứng nhu cầu cho ngƣời dùng Mặc dù có khó khăn nêu song cần phải khẳng định phát triển thƣơng mại điện tử nƣớc ta khơng nằm ngồi xu chung giới Các doanh nghiệp muốn phát triển tồn môi trƣờng cạnh tranh ngày gay gắt, điều tất yếu phải ứng dụng thƣơng mại điện tử để tiếp cận với khách hàng đối tác toàn giới mà phụ thuộc vào thời gian địa điểm Có thể nói thƣơng mại điện tử trở thành cơng cụ sống cịn doanh nghiệp môi trƣờng cạnh tranh kinh tế Chính lý nên em chọn ―Thƣơng mại điện tử‖ làm đề tài tốt nghiệp em mục đích thực tập em khơng nằm ngồi lý phát triển ―Thƣơng mại điện tử‖ MỤC LỤC CHƢƠNG 1: NHỮNG LÝ LUẬN CƠ BẢN VỀ HỆ THỐNG THANH TOÁN TRỰC TUYẾN 1.1 Một số khái niệm 1.2 Một số lý thuyết hệ thống toán trực tuyến 1.2.1 Đặc điểm hệ thống toán trực tuyến 1.2.2 Các yếu tố cấu thành hệ thống toán trực tuyến 1.3 Vấn đề xác thực 1.3.1 Khái niệm xác thực 1.3.2 Khái niệm xác thực số (điện tử) 1.4.4 ƣu điểm nhƣợc điểm công nghệ tttt CHƢƠNG 2: CÁC ĐIỀU KIỆN THANH TOÁN TẠI WEBSITE 2.1 Các phƣơng pháp toán 13 19 19 2.2 Ảnh hƣởng nhân tố bên ngồi đến quy trình tốn trực tuyến website 19 2.2.2 Tổng quan dịch vụ toán online 20 2.2.3 Ảnh hƣởng hạ tầng công nghệ thông tin, viễn thông 23 2.2.4 Ảnh hƣởng hành lang pháp lý 23 2.2.5 Ảnh hƣởng hệ thống bảo mật thƣơng mại điện tử 24 2.2.6 Ảnh hƣởng công nghệ 25 2.2.7 Ảnh hƣởng đội ngũ nhân 25 2.2.8 Ảnh hƣởng nguồn lực tài 25 2.3 Kết phân tích tổng hợp liệu thứ cấp CHƢƠNG 3: TRIỂN KHAI ỨNG DỤNG 3.1 Yêu cầu kiến thức & kỹ 26 32 32 3.2 Tìm hiểu React JS 33 3.3 Tìm hiểu Redux 35 3.4 Giao diện trang chủ 43 KẾT LUẬN 59 TÀI LIỆU THAM KHẢO 60 CHƢƠNG 1: NHỮNG LÝ LUẬN CƠ BẢN VỀ HỆ THỐNG THANH TOÁN TRỰC TUYẾN 1.1 Một số khái niệm Thanh toán điện tử: TTĐT (electronic payment) phƣơng thức tốn thơng qua ứng dụng cơng nghệ thơng tin mà thơng điệp điện tử, chứng từ điện tử liên quan đƣợc gửi qua máy tính có kết nối Internet, giúp cho q trình tốn trở nên nhanh chóng nhiều so với cách toán truyền thống Nhƣ vậy, TTĐT phƣơng thức tốn thơng điệp điện tử thay cho tiền mặt Thanh toán trực tuyến: TTTT việc trả tiền nhận tiền hàng cho dịch vụ mua bán hàng hóa, dịch vụ đƣợc bán mạng Internet thông qua thông điệp điện tử, chứng từ điện tử thay cho việc trao đổi tiền mặt phƣơng thức truyền thống Mua bán trực tuyến sử dụng PSP IMS PSP (Payment Service Provider) nhà cung cấp dịch vụ toán Trong toán qua mạng internet, sở bán hàng thƣờng khơng sử dụng thiết bị PDQ offline Do PSP làm việc cung cấp phần mềm để mô việc xử lý thẻ toán thu thập chi tiết thẻ sau chuyển tới đơn vị chấp nhận thẻ IMS: (Internet Merchant Service) dịch vụ hỗ trợ bán hàng qua mạng Đây dạng gần giống cách bán hàng offline nhƣng dịch vụ trực tuyến với tính chất riêng Đó là: Khách hàng khơng có mặt để mua mà điền vào thông tin hàng trực tuyến sản phẩm cần mua, sau tốn tới cửa ảo Một PSP thu nhận chi tiết thẻ xác định tổng giá trị đơn hàng Sau đó, ngân hàng chấp nhận tốn thẻ chứng thực giới hạn thẻ tạm thời giảm số tiền lƣợng giá trị import App from "./App"; import { Provider } from "react-redux"; import "bootstrap/dist/css/bootstrap.min.css"; import { persistor, store } from "./redux/store"; import { PersistGate } from "reduxpersist/integration/react"; ReactDOM.render( , document.getElementById("roo t") ); — App.js ( nhận function từ components pages truyền sang file index.js) // import "./App.css"; import { BrowserRouter, Route, Routes } from "react-routerdom"; import AdminHome from "./AdminPages/AdminHome"; import AdminProductEdit from "./AdminPages/AdminProductEdit"; import AdminProductList from "./AdminPages/AdminProductList"; import AdminUserList from "./AdminPages/AdminUserList"; import AdminUserEdit from "./AdminPages/AdminUserEdit"; import AdminUserAdd from "./AdminPages/AdminUserAdd"; import Cart from "./pages/Cart"; import ForgetPassword from "./pages/ForgetPassword"; import Home from "./pages/Home"; import Login from "./pages/Login"; import Order from "./pages/Order"; import Product from "./pages/Product"; import ProductList from "./pages/ProductList"; import Register from "./pages/Register"; import ResetPassword from "./pages/ResetPassword"; import Success from "./pages/Success"; function App() { const user = true; return ( Routes> {/* Admin page Routes*/} ); } export default App; — data.js ( object sản phẩm với cấu trúc key: value; gồm field brand name, search name, description) export const BrandData = [ { id: 1, brandName: "CLINIQUE", searchName: "clinique", description: "Explore Clinique's wide range of skincare, makeup and fragrance Find products that fit your skin and routine Free samples | 10% off on first purchase.", }, { id: 2, brandName: "MAYBELLINE", searchName: "maybelline", description: "Select from the latest range of Maybelline foundations, lipstick, eyeshadows & more cosmetics", }, { id: 3, brandName: "L'OREAL", searchName: "loreal", description: "Offering all women and men worldwide the best of cosmetics, haircare and perfume in terms of quality, efficacy and safety", }, { id: 4, brandName: "COVERGIRL", searchName: "covergirl", description: "Face and eye makeup, lipstick, makeup tools and pro tips Check out our COVERGIRL Collections including TruBlend, Outlast, Blast and more.", }, { id: 5, brandName: "NYX", searchName: "nyx", description: "Discover NYX Professional Makeup & beauty products today on our site and shop all of our new products, best sellers plus much more!", }, { id: 6, brandName: POP", "COLOUR searchName: "colourpop", description: "With single items $8 & under, it's impossible to not want to try them all !", }, ]; export const productsData = [ { id: 1, productName: "LIPSTICK", }, { id: 2, productName: "FOUNDATION", }, { id: 3, productName: "MASCARA", }, { id: 4, productName: "EYELINER", }, { id: 5, productName: "BRONZER", }, { id: 6, productName: "BLUSH", }, ]; export const shades = [ { hex_value: "#000000", colour_name: "Black ", }, { hex_value: "#3E2829", colour_name: "Brown ", }, ]; — responsive.js ( responsive cho dành cho giao diện mobile ) import { css } from "styledcomponents"; export const small = (props) => { return css` @media only screen and (max-width: 500px) { ${props} } `; }; export const medium = (props) => { return css` @media only screen and (max-width: 740px) { ${props} } `; }; export const large = (props) => { return css` @media only screen and (max-width: 920px) { ${props} } `; }; —— Folder Components (gồm components nhỏ, đƣợc sử dụng nhiều lần) ———— Brand.jsx ———— CartItem.jsx ———— Footer.jsx ———— LowerAnnouncement.jsx ———— Navbar.jsx ———— Newletters.jsx ———— PriceSlider.jsx ———— Products.jsx ———— Slider.jsx ———— UpperAnnouncement.jsx —— Redux Folder ( ———— apiCalls.js import { publicRequest } from " /axiosMethod"; export const login = async (dispatch, user) => { dispatch({ type: "loginStart" }); try { const res = await publicRequest.post("/auth/login", user); dispatch({ type: "loginSuccess", payload: res.data }); console.log(res.data); } catch (err) { dispatch({ type: "loginFailure" }); } }; ———— cartReducer.js //initial state let initialState = { products: [], quantity: 0, total: 0, }; export const cartReducer = (state = initialState, action) => { switch (action.type) { case "addProduct": { console.log(action.payload); console.log("Product state:", state); state.products.push(action.payload); return { state, quantity: state.quantity + 1, total: state.total + action.payload.price * action.payload.quantity, }; } case "emptyCart": { return { state, products: [], quantity: 0, total: 0, }; } case "removeItem": { let tempProd = [ state.products]; tempProd.splice(action.itemNo, 1); return { state, products: [ tempProd], quantity: state.quantity 1, total: state.total - action.product.price * action.product.quantity, }; } default: return state; } }; ———— searchReducer.js let initialState = { searchValue: "", }; export const searchReducer = (state = initialState, action) => { switch (action.type) { case "addValue": { state.searchValue = action.value; //assignining search value return state; } default: return state; } ———— store.js ( lữu trữ application state, Giữ application state, Truy cập vào state thông qua getState() Cho phép state update thông qua dispatch(action), Register listenders thông qua subscriber(listener), Xử lý unregister listeners thông qua function unsubscribe(listener) import * as redux from "redux"; import { cartReducer } from "./cartReducer"; import { userReducer } from "./userReducer"; import storage from "reduxpersist/lib/storage"; import { encryptTransform } from "redux-persist-transformencrypt"; import { persistReducer, persistStore } from "reduxpersist"; import { searchReducer } from "./searchReducer"; const persistConfig = { key: "root", storage, tranforms: [ encryptTransform({ secretKey: "muthu@123", onError: function (error) { console.log(error); }, }), ], }; const enhancers = redux.compose( window REDUX_DEVTOOLS_EXTENSION && window REDUX_DEVTOOLS_EXTENSION () ); const rootReducer = redux.combineReducers({ user: userReducer, cart: cartReducer, search: searchReducer, }); const persistedReducer rootReducer); = export redux.createStore(persistedReducer, persistReducer(persistConfig, const enhancers); store export = let persistor = persistStore(store); ———— userReducer.js ( Reducer có nhiệm vụ application state thay đổi response hay nói cách khác Reducers function đảm nhiệm việc lấy trạng thái cũ state, action trả state mới.) let initialState = { currentUser: null, isFetching: false, error: false, }; export const userReducer = (state = initialState, action) => { switch (action.type) { case "loginStart": { return { state, isFetching: true, }; } case "loginSuccess": { return { state, isFetching: false, currentUser: action.payload, error: false, }; } case "loginFailure": { return { state, isFetching: false, currentUser: null, error: true, }; } case "logOut": { return { state, isFetching: false, currentUser: null, error: false, }; } default: return state; } }; KẾT LUẬN Thơng qua q trình thực Đồ án tốt nghiệp với đề tài ―Tìm hiểu ứng dụng thƣơng mại điện tử‖, thân em tự thấy thu đƣợc kết sau: Thêm hiểu biết Thƣơng mại điện tử nói chung giải pháp Thanh tốn điện tử nói riêng Cở sở tốn học an tồn bảo mật thơng tin Các khái niệm ứng dụng an toàn, an ninh bảo mật thông tin Xây dựng đƣợc chƣơng trình mơ sử dụng tiền điện tử toán trực tuyến Internet Thời gian nghiên cứu thực đồ án tốt nghiệp giúp em có hiểu biết lĩnh vực an toàn bảo mật thơng tin, giúp ích cho cơng việc em tƣơng lai Hƣớng phát triển đề tài, phát triển chƣơng trình thành ứng dụng hồn thiện triển khai đƣợc thực tế Bằng nỗ lực thân hƣớng dẫn nhiệt tình Thầy Nguyễn Mạnh Hùng em tổng hợp lại thành đồ án tốt nghiệp Kính mong thầy đóng góp ý kiến để đồ án em đƣợc hoàn thiện Em xin chân thành cảm ơn TÀI LIỆU THAM KHẢO [1]-Brands Stefan, An efficient Off-line electronic cash system based on the representation problem, Technical report [2]-Tổng quan Thƣơng mại điện tử - Trần Hữu Linh – Vụ thƣơng mại điện tử, Bộ Thƣơng mại [3]-Hoàn thiện quy trình tốn trực tuyến qua website cơng ty cổ phần bán lẻ trực tuyến [4]-Giáo trình Lý thuyết mật mã an tồn thơng tin - GS.TS Phan Đình Diệu [5]-Brands Stefan, An efficient Off-line electronic cash system based on the representation problem, Technical report [6]- https://reactjs.org/ [7]- https://www.heroku.com/ [8]- https://axios-http.com/docs/intro ... Ngƣời bán: Có thể bán hàng hóa dịch vụ theo cách: Có thể bán hàng dịch vụ qua website liên kết, bán hàng dịch vụ website Doanh thu bán hàng hóa hai trƣờng hợp khác Nếu bán hàng hóa qua website. .. Nam Vietcombank Ngân hàng Công thƣơng Việt Nam Vietinbank Ngân hàng TMCP Đông Á - DongA Bank Ngân hàng TMCP Quốc tế Việt Nam - VIB Ngân hàng TMCP Kỹ thƣơng Việt Nam – Techcombank Ngân hàng TMCP... nhà TP HCM – HDBank Ngân hàng TMCP Tiên Phong – Tienphongbank Ngân hàng TMCP quân đội – MB Ngân hàng TMCP Việt ? ?- VietA Bank Ngân hàng TMCP Hàng Hải Việt Nam- Maritime Bank Ngân hàng TMCP Xuất