ĐẠI HỌC ĐÀ NẴNG TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT HÀN ĐỒ ÁN CƠ SỞ 2 ĐỀ TÀI WEBSITE BÁN ĐIỆN THOẠI LỜI MỞ ĐẦU Lý do chọn đề tài Hiện nay, các công nghệ tiên tiến phát triển ngày càng mạnh[.]
Trang 1ĐẠI HỌC ĐÀ NẴNG TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT - HÀN
ĐỒ ÁN CƠ SỞ 2
ĐỀ TÀI: WEBSITE BÁN ĐIỆN THOẠI
Trang 2
LỜI MỞ ĐẦU
Lý do chọn đề tài
Hiện nay, các công nghệ tiên tiến phát triển ngày càng mạnh mẽ và được ứng dụng ngày càng nhiều vào các lĩnh vực kinh tế, sản xuất cũng như đời sống thường nhật của con người Một điểm tiêu biểu trong việc phát triển các công nghệ đó phải
kể đến việc ứng dụng công nghệ thông tin vào hầu khắp các hoạt động Nhờ đó, các công việc được thực hiện nhanh, chính xác và đạt kết quả cao hơn rất nhiều Khi xã hội ngày càng phát triển, mức sống của người dân được nâng cao thu nhập kinh tế ngày càng được cải thiện thì chiếc điện thoại di động không còn trở nên xa lạ với mọi người nữa mà ngược lại nó là một vật dụng không thể thiếu đối với người dân hiện nay Hầu hết mỗi người đều trang bị cho mình một chiếc điện thoại phù hợp với nhu cầu và túi tiền của mình Tuy nhiên, với cuộc sống ngày càng bận rộn như hiện nay thìviệc muốn mua một chiếc điện thoại mình ưa thích thì người tiêu dùng phải đến tận cửa hàng để chọn lựa vì thế sẽ mất khá nhiều thời gian và công sức Cùng với các lý
do nêu trên, qua tìm hiểu nhóm đồ án được biết việc ứng dụng bán điện thoại di động trực tuyến sẽ giúp cho khách hàng giảm bớt được thời gian và công sức phải đến tận cửa hàng để mua Muốn lựa chọn cho mình một chiếc điện thoại ưng ý phù hợp với túi tiền thì khách hàng chỉ cần ngồi bên chiếc máy tính có nối mạng internet
là có thế mua được mặt hàng điện thoại mình cần Do đó nhóm đề tài chọn thực hiện
đề tài “ Xây dựng Website bán điện thoại di động trực tuyến cho công ty Nhật Cường Mobile ” Phần mềm được xây dựng với định hướng giúp việc mua sắm điện thoại của khách hàng dễ dàng và nhanh gọn hơn, không mất thời gian và công sức Qua quá trình khảo sát thực tế, tìm hiểu và phân tích thiết kế nhóm đề tài đưa ra bản báo cáo gồm các phần sau để giúp người đọc hiểu rõ về chức năng của Website
Phần I: Mở đầu
Phần II: Nội dung
• Chương 1: Tổng quan về vấn đề nghiên cứu
• Chương 2: Phân tích và thiết kế hệ thống
• Chương 3: Thiết kế giao diện và cài đặt chương trình
• Chương 4: Thử nghiệm và đánh giá phần mềm
• Quản lý các thông tin khách hàng, ban quản trị
• Đưa ra các sản phẩm điện thoại di động đa dạng và hợp túi tiền
• Cung cấp cho khách hàng những cập nhật mới nhất về sản phẩm và giá cả
• Đưa ra được các thống kê, báo cáo, chính xác về số lượng sản phẩm và kháchhàng Nhiệm vụ nghiên cứu
• Tìm hiểu quy trình bán hàng của công ty thông qua thực tế khảo sát tại Nhật Cường Mobile
Trang 3• Tìm hiểu các công cụ xây dựng hệ thống như: Visual Studio 2008, SQL 2005;
• Demo hệ thống trên máy cục bộ Phương pháp nghiên cứu
• Khảo sát thực trạng tại công ty Nhật Cường Mobile
• Thu thập các yêu cầu từ phía người dùng
• Phân tích thiết kế hệ thống theo yêu cầu của người dùng
• Nghiên cứu các công cụ xây dựng hệ thống Ý nghĩa lý luận và thực tiễn của
đề tài
• Giúp nhóm đề tài hiểu rõ quy trình bán điện thoại trực tuyến
• Giúp cho việc quản lý hàng hóa được thuận tiện hơn
• Giúp cho khách hàng mua hàng trên website biết rõ và thực hiện đúng trình
tự khi mua hàng
Trang 4LỜI CẢM ƠN
Lời đầu tiên, em xin gửi lời cảm ơn chân thành đến các thầy cô Khoa Công nghệThông tin & Truyền Thông đã dạy em những kiến thức hay, và các thầy cô trong bộmôn Công nghệ Web đã truyền đạt những kiến thức chuyên ngành bổ ích cũng như các
kỹ năng trong cuộc sống
Đặc biệt, em xin cảm ơn sâu sắc tới giáo viên hướng dẫn ThS.Nguyễn Văn Lợi đãtận tình hướng dẫn, góp ý theo sát giúp em có thể hoàn thành đồ án tốt nhất
Em xin cảm ơn tới gia đình đã luôn động viên tinh thần, tạo động lực cho em trongquá trình thực hiện đồ án Cảm ơn tất cả bạn bè, tập thể lớp đã cùng chia sẻ, góp ýtrong quá trình thực hiện
Vì kiến thức còn hạn chế,trong quá trình hoàn thiện chuyên đề không tránh khỏi những sai sót, kính mong nhận được sự góp ý của quý thầy cô giáo
Xin chân thành cảm ơn!
Trang 5DANH SÁCH BIỂU ĐỒ
Hình 2 1 Sơ đồ phân rã chức năng 4
Hình 2 2 Biểu đồ luông dữ liệu mức khung cảnh 5
Hình 2 3 Biểu đồ luồng dữ liệu mức đỉnh 5
Hình 2 4 Biểu đồ luồng dữ liệu mức 1 của chức năng giao dịch 6
Hình 2 5 Biểu đồ luồng dữ liệu mức 1 của chức năng quản trị 6
Hình 2 6 Biểu đồ luồng dữ liệu mức 1 của chức năng tìm kiếm 7
Trang 6MỤC LỤC
Chương 1 TỔNG QUAN VỀ ĐỀ TÀI 1
1.1 Đặt vấn đề 1
1.2 Hiện trạng chung 1
1.3 Thương mại điện tử và ứng dụng đối với website 2
2 MERN Stack 2
Chương 2 PHÂN TÍCH HỆ THỐNG 4
2.1 Khảo sát hệ thống 4
2.1.1 Mục đích 4
2.1.2 Mô tả hệ thống 4
2.1.3 Nhóm chức năng chính 4
2.2 Phân tích hệ thống 5
2.2.1 Mô hình hóa chức năng nghiệp vụ 5
2.2.2 Xây dựng biểu đồ Use Case 6
2.2.3 Xây dựng các bảng dữ liệu 7
2.2.4 Xây dựng biểu đồ tuần tự 8
2.3 Cơ sở dữ liệu 9
2.4.Đặc tả chương trình 10
Chương 3 THIẾT KẾ GIAO DIỆN 12
3.1 Cài đặt 12
3.1.1 Node Js 12
3.1.2 Visual Studio 12
3.1.3 Mongo DB 13
3.1.4 React(Mode_Modules) 15
3.1.5 App 16
Chương 4 ĐÁNH GIÁ PHẦN MỀM VÀ KẾT LUẬN 20
1 Thành tựu 20
2 Kết luận 21
Trang 8Chương 1 TỔNG QUAN VỀ NGHIÊN CỨU 1.1 Đặt vấn đề
Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử , công
nghệ thông tin cũng được những công nghệ có đẳng cấp cao và lần lượt chinh phục hết đỉnh cao này đến đỉnh cao khác Mạng Internet là một trong những sản phẩm có giá trị hết sức
lớn lao và ngày càng trở nên một công cụ không thể thiếu , là nền tảng chính cho sự truyền tải , trao đổi thông tin trên toàn cầu
Giờ đây , mọi việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng : chỉ cần có một máy tính kết nối internet và một dòng dữ liệu truy tìm thì gần như lập tức
cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra , có đầy đủ thông tin , hình ảnh và
thậm chí đôi lúc có cả những âm thanh nếu bạn cần
Bằng internet , chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn và chi phí thấp hơn nhiều so với cách thức truyền thống Chính điều này , đã thúc đẩy sự khai sinh và phát triển của thương mại điện tử và chính phủ điện tử trên khắp thế giới , làm biến đổi đáng kể bộ mặt văn hóa , nâng cao chất lượng cuộc sống con người
Trong hoạt động sản xuất , kinh doanh giờ đây , thương mại điện tử đã khẳng định
được vai trò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp Đối với một công ty, việc quảng bá và giới thiệu đến khách hàng các thông tin mới, các chương trình ưu đãi do công ty
tổ chức trong từng thời điểm một cách hiệu quả và kịp thời là yếu tố mang tính quyết định cho sự tồn tại và phát triển của công ty Vì vậy , sẽ thật thiếu sót nếu công ty của bạn chưa xây dựng được một website để giới thiệu rộng rãi các dòng máy mới Và một vấn đề được
đặt ra song song cùng với nó , là làm sao để có thể quản lý và điều hành website một cách dễdàng và hiệu quả , có như vậy , thì mới tránh được sự nhàm chán cho những khách hàng
thường xuyên của website , và thu được những kết quả như mong muốn Đây là vấn đề hết sức cấp thiết và luôn là mỗi trăn trở hầu hết các công ty bán điện thoại nói riêng và cả các
doanh nghiệp khác nói chung , nhất là các doanh nghiệp Việt Nam – với họ , thương mại điện
tử còn rất mới
Với đồ án này , em xin được trình bày một cách thức quản lý website giúp cho
những người quản trị dễ dàng trong việc phân quyền quản lý , thay đổi , cập nhật thông tin trang web , cũng như quản lý hiệu quả khách hàng và các đơn đặt hàng trên mạng
Tuy nhiên , một thực tế cần nhìn nhận rằng : đa số các website đều do công ty sở
hữu thuê các nhà thiết kế ( thường là các công ty thiết kế website ) đảm nhận việc thiết kế
Trang 9ban đầu , điều này là hợp lý , bởi vì chỉ với một chi phí ban đầu cho dù có hơi cao - đối với
các trang web động - thì một website được thiết lập mang tính chuyên nghiệp và hoạt động
ổn định là điều hết sức cần thiết ; nhưng để website đó hoạt động thực sự hiệu quả thì
không thể thiếu bàn tay của chính những người chủ , của chính công ty sở hữu nó quản lý và điều hành Thực tế là , ở Việt Nam hiện nay , vai trò của người quản trị website dường như chưa được đánh giá đúng , đa phần người trị trang web của các công ty chỉ đảm đương công việc này sau khi hoàn tất các công việc khác, vấn đề làm mới thông tin website còn bị xem
nhẹ , khiến cho những khách hàng thường xuyên của website cảm thấy nhàm chán và từ từ rời bỏ thói quen vào thăm trang web !
Sự hoạt động hiệu quả của một số trang web nói trên là những minh chứng cho vai trò của người quản trị website doanh nghiệp Các công ty sở hữu các website này đều có
một bộ phận riêng đảm đương việc quản lý thông tin website , nhằm đáp ứng kịp thời và
hiệu quả các yêu cầu của các vị “ thượng đế ” thông qua mạng internet , có như vậy thì mới khai thác hết giá trị của website , và nguồn khách hàng tiềm năng trên mạng Vì thế các
công ty đã , đang và có ý định xây dựng website riêng cho mình thì dù ít , dù nhiều cũng đã quan tâm đến vai trò của công nghệ thông tin và các khách hàng tiềm năng trên mạng , nên
có kế hoạch và cắt đặt người quản trị để website của công ty mình luôn mới mẻ , thu hút
khách hàng đến với website , đến với công ty
1.3 Thương mại điện tử và ứng dụng đối với website bán điện thoại
Nói đến internet , ngày nay , người ta thường nhắc đến chính phủ điện tử, thương
mại điện tử Đây cũng chính là hai trong số những ứng dụng lớn nhất công nghệ thông tin , của xa lộ thông tin Internet vào lĩnh vực tổ chức và thương mại toàn cầu
Chính phủ điện tử : là một cách thức tổ chức và truyền thông dữ liệu của chính phủ ,
sử dụng các công nghệ mới để cung cấp cho các công dân khả năng truy cập hiệu quảvào nguồn tài nguyên thông tin có độ tin cậy cao của chính phủ
Thương mại điện tử : được đề cập đến như là một hình thức mua bán , giao tiếp
hoàn toàn khác so với hình thức giao tiếp thương mại truyền thống Ở đó , người
mua và người bán đôi khi không hề biết mặt nhau , mọi thoả thuận , trao đổi đều
diễn ra trên mạng internet và thông qua một hệ thống thanh toán đặc biệt , chẳng
hạn như thẻ tín dụng ngân hàng
Trang 102.Mern stack
MERN là viết tắt của MongoDB, Express, React, Node, theo tên bốn công nghệ chínhtạo nên ngăn xếp
MongoDB - cơ sở dữ liệu tài liệu
Express (.js) - Khung web Node.js
React (.js) - một khung JavaScript phía máy khách
Node (.js) - máy chủ web JavaScript hàng đầu
MERN là một trong số các biến thể của ngăn xếp MEAN (MongoDB Express AngularNode), nơi khung giao diện người dùng Angular.js truyền thống được thay thế bằng React.js.Các biến thể khác bao gồm MEVN (MongoDB, Express, Vue, Node) và thực sự là bất kỳ khungJavaScript frontend nào cũng có thể hoạt động
Express và Node tạo nên tầng (ứng dụng) giữa Express.js là một khung công tác webphía máy chủ và Node.js là nền tảng máy chủ JavaScript phổ biến và mạnh mẽ Bất kể bạnchọn biến thể nào, ME (RVA) N là cách tiếp cận lý tưởng để làm việc với JavaScript và JSON,mọi lúc mọi nơi
Ngăn xếp MERN hoạt động như thế nào?
Kiến trúc MERN cho phép bạn dễ dàng xây dựng kiến trúc 3 tầng (giao diện ngườidùng, phụ trợ, cơ sở dữ liệu) hoàn toàn bằng JavaScript và JSON
React.js user interface
Tầng trên cùng của ngăn xếp MERN là React.js, khung JavaScript khai báo để tạo cácứng dụng phía máy khách động trong HTML React cho phép bạn xây dựng các giao diệnphức tạp thông qua các Thành phần đơn giản, kết nối chúng với dữ liệu trên máy chủ phụtrợ của bạn và hiển thị chúng dưới dạng HTML
Điểm mạnh của React là xử lý các giao diện theo hướng dữ liệu, trạng thái với mã tốithiểu và ít đau đớn nhất và nó có tất cả các chuông và còi mà bạn mong đợi từ một khuônkhổ web hiện đại: hỗ trợ tuyệt vời cho các biểu mẫu, xử lý lỗi, sự kiện, danh sách, v.v
Trang 11Server level Express.js and Node.js
Cấp tiếp theo là framework phía máy chủ Express.js, chạy bên trong máy chủ Node.js.Express.js tự lập hóa đơn là một “khung web nhanh, không đơn giản, tối giản cho Node.js”
và đó thực sự là chính xác những gì nó là Express.js có các mô hình mạnh mẽ để định tuyếnURL (khớp URL đến với chức năng máy chủ) và xử lý các yêu cầu và phản hồi HTTP
Bằng cách thực hiện các Yêu cầu HTTP XML (XHR) hoặc GET hoặc POST từ giao diệnngười dùng Angular.js, bạn có thể kết nối với các hàm Express.js cung cấp năng lượng choứng dụng của bạn Các chức năng đó lần lượt sử dụng trình điều khiển MongoDB’s Node.js,hoặc thông qua lệnh gọi lại để sử dụng Promises, để truy cập và cập nhật dữ liệu trong cơ sở
dữ liệu MongoDB của bạn
MongoDB database level
Nếu ứng dụng của bạn lưu trữ bất kỳ dữ liệu nào (hồ sơ người dùng, nội dung, nhậnxét, tải lên, sự kiện, v.v.), thì bạn sẽ muốn có một cơ sở dữ liệu dễ làm việc như Angular,Express và Node
Đó là nơi MongoDB xuất hiện: Các tài liệu JSON được tạo trong giao diện người dùngAngular.js của bạn có thể được gửi đến máy chủ Express.js, nơi chúng có thể được xử lý và(giả sử chúng hợp lệ) được lưu trữ trực tiếp trong MongoDB để truy xuất sau này Một lầnnữa, nếu bạn đang xây dựng trên đám mây, bạn sẽ muốn xem Atlas Nếu bạn đang tìm cáchthiết lập ngăn xếp MERN của riêng mình
MERN có phải là một giải pháp full-stack không?
Có, MERN là một full-stack, tuân theo mô hình kiến trúc 3 tầng truyền thống, baogồm tầng hiển thị front-end (React.js), tầng ứng dụng (Express.js và Node.js) và tầng cơ sở
dữ liệu (MongoDB)
Tại sao chọn MERN stack?
Hãy bắt đầu với MongoDB, cơ sở dữ liệu tài liệu ở gốc của ngăn xếp MERN MongoDBđược thiết kế để lưu trữ dữ liệu JSON nguyên bản (về mặt kỹ thuật, nó sử dụng phiên bảnnhị phân của JSON được gọi là BSON) và mọi thứ từ giao diện dòng lệnh đến ngôn ngữ truyvấn của nó (MQL, hoặc MongoDB Query Language) đều được xây dựng trên JSON vàJavaScript
MongoDB hoạt động cực kỳ tốt với Node.js và giúp việc lưu trữ, thao tác và biểu diễn
dữ liệu JSON ở mọi cấp ứng dụng của bạn trở nên vô cùng dễ dàng Đối với các ứng dụng gốctrên đám mây, MongoDB Atlas thậm chí còn làm điều đó dễ dàng hơn, bằng cách cung cấpcho bạn một cụm MongoDB tự động mở rộng quy mô trên nhà cung cấp đám mây mà bạnlựa chọn, dễ dàng chỉ bằng một vài cú nhấp chuột
Express.js (chạy trên Node.js) và React.js làm cho ứng dụng JavaScript / JSON MERNđầy đủ, tốt, đầy đủ Express.js là một khung ứng dụng phía máy chủ bao bọc các yêu cầu vàphản hồi HTTP, đồng thời giúp dễ dàng ánh xạ URL tới các chức năng phía máy chủ React.js
là một khung JavaScript giao diện người dùng để xây dựng giao diện người dùng tương táctrong HTML và giao tiếp với máy chủ từ xa
Trang 12Sự kết hợp này có nghĩa là dữ liệu JSON chảy tự nhiên từ trước ra sau, giúp quá trìnhxây dựng nhanh chóng và gỡ lỗi đơn giản Thêm vào đó, bạn chỉ phải biết một ngôn ngữ lậptrình và cấu trúc tài liệu JSON, để hiểu toàn bộ hệ thống!
MERN là lựa chọn dành cho các nhà phát triển web ngày nay muốn di chuyển nhanhchóng, đặc biệt là đối với những người có kinh nghiệm React.js
Chương 2 PHÂN TÍCH HỆ THỐNG
2.1 Khảo sát hệ thống 2.1.1 Mục đích
Hiện nay các Website về thông tin điện thoại khá nhiều, nhưng chỉ mang tính chất quảngcáo Việc tìm được thông tin chính xác về thông tin, vị trí và những đánh giá khách quan từphía người dùng đều gặp khó khăn Hệ thống hỗ trợ thông tin được xây dựng trên cả nềnweb và ứng dụng di động để khắc phục những nhược điểm đó, ngoài ra còn cung cấp thêmcác tiện ích khác sẽ nói rõ trong mô tả hệ thống
Người dùng có thể dễ dàng thao tác thêm các dòng máy mới, đồng thời cảnh báo sự lừađảo cho những người dùng khác trong hệ thống
- Nhóm quản trị sẽ quản trị các tài khoản người dùng (cấp quyền, sửa, vô hiệu tài khoản),thông tin địa điểm điện thoại, quản lý các bài viết của nhóm người dùng còn lại, quản lýtin tức, quản lý loại hình dịch vụ
2.1.3 Nhóm chức năng chính
2.1.3.1 Chức năng dành cho “Khách hàng”
- Đăng nhập hệ thống với quyền của mình
- Thay đổi thông tin cá nhân và mật khẩu cá nhân
- Xem thông tin điện thoại
- Nhận thông tin dòng máy mới
- Tìm kiếm 2.1 2.1.3.2 Chức năng dành cho “Quản trị viên”
- Đăng nhập hệ thống toàn quyền
Trang 13- Thay đổi thông tin cá nhân và mật khẩu cá nhân
- Quản lý danh sách người dùng ( Khách hàng, thành viên ban quản trị) gồm các hoạt động:
+ Cấp quyền truy cập hệ thống cho người dùng
+ Cấp lại mật khẩu cho người dùng
+ Vô hiệu hóa tài khoản người dùng
- Quản trị gồm hoạt động:
+ Tạo mới, cập nhật thông tin dòng máy mới
+ Sửa thông tin, giá cả
+ Vô hiệu hóa mặt hàng
2.2 Phân tích hệ thống
2.2.1 Mô hình hóa chức năng nghiệp vụ
2.2 1.1 Sơ đồ phân rã chức năng
Hình 2 1 Sơ đồ phân rã chức năng
Biểu đồ luồng dữ liệu
Trang 14Biểu đồ luồng dữ liêu mức khung cảnh
Nhìn từ mức độ tổng quát trên biểu đồ phân cấp chức năng ta không thể nhận thấy rõ được các mối quan hệ giữa các dữ liệu Để cho nhìn thấy chi tiết liên hệ với dữ liệu cần để thực
hiện các công việc của bài toán nhóm sử dụng biểu đồ luồng dữ liệu Biểu đồ mức khung
cảnh cần thể hiện các tác nhân của hệ thống, các luồng dữ liệu tổng quan Khách hàng gửi
các yêu cầu mua hàng tới hệ thống, hệ thống nhận các đơn hàng và gửi lại các thông tin cho khách hàng Sau quá trình kiểm tra và xử lý thì sẽ trả lời khách hàng
Hình 2.2 Bi ểu đồ luồng dữ liệu mức khung cảnh
Trang 15Biểu đồ luồng dữ liệu mức đỉnh
Biểu đồ dữ liệu mức đỉnh thể hiện mối quan hệ của các chức năng chính trong hệ thống với các tác nhân, dữ liệu
Hình 2.3 Biểu đồ luồng dữ liệu mức đỉnh