LỜI CẢM ƠN Em xin chân thành cảm ơn trường Đại học công nghệ thông tin truyền thông - Đại học Thái Nguyên tạo điều kiện cho em thực Đồ án tốt nghiệp Em xin chân thành cảm ơn cô Lê Thu Trang tận tình hướng dẫn, bảo em suốt thời gian thực đề tài Em xin chân thành cảm ơn thầy cô giáo khoa tận tình giảng dạy, trang bị cho chúng em kiến thức cần thiết suốt trình học tập trường giúp đỡ động viên suốt trình thực Đồ án tốt nghiệp Mặc dù cố gắng hoàn thành Đồ án tốt nghiệp với tất nỗ lực thân, song không tránh khỏi thiếu sót định, kính mong cảm thông tận tình bảo thầy cô giáo, góp ý bạn để Đồ án tốt nghiệp em hoàn thiện Em xin chân thành cảm ơn! Thái nguyên, tháng năm 2016 Sinh viên thực Trần Văn Thượng LỜI CAM ĐOAN Em cam đoan kết nghiên cứu đưa đồ án dựa kết thu trình nghiên cứu riêng em, không chép kết nghiên cứu tác giả khác Nội dung đồ án có tham khảo sử dụng số thông tin, tài liệu từ nguồn sách, tạp chí liệt kê danh mục tài liệu tham khảo Thái nguyên, tháng năm 2016 Sinh viên thực Trần Văn Thượng MỤC LỤC LỜI CẢM ƠN LỜI CAM ĐOAN MỤC LỤC DANH MỤC HÌNH ẢNH LỜI NÓI ĐẦU Chương 1: CƠ SỞ LÝ THUYẾT 1.1 Phân tích thiết kế hướng đối tượng với UML 1.1.1 Tìm hiểu phân tích thiết kế hướng đối tượng 1.1.2 Giới thiệu ngôn ngữ mô hình hóa thống UML 1.2 Thương mại điện tử .11 1.2.1 Khái niệm thương mại điện tử 11 1.2.2 Các đặc trưng thương mại điện tử 11 1.2.3 Các đặc trưng sàn giao dịch TMĐT 12 1.2.4 Lợi ích kinh doanh qua sàn giao dịch TMĐT 13 1.3 Cơ JavaScript .13 1.3.1 Javascript gì? 13 1.3.2 Javascript sử dụng để làm gì? 14 1.3.3 Cách sử dụng Javascript 15 1.4 Cơ CSS 15 1.4.1 CSS gì? 15 1.4.2 Sử dụng CSS trang web 16 1.5 Cơ HTML .19 1.5.1 Khái niệm sở 19 1.5.2 Danh sách bảng HTML 21 1.5.3 Đưa hình ảnh vào tài liệu HTML 22 1.6 Cơ mã nguồn mở WordPress .24 1.6.1 WordPress gì? 24 1.6.2 Một vài nét bật WordPress 24 1.6.3 Tại nên thiết kế website WordPress 26 1.6.4 Cấu trúc Theme WordPress 27 Chương 2: KHẢO SÁT HIỆN TRẠNG VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG 30 2.1 Khảo sát hệ thống 30 2.1.1 Giới thiệu Công ty cổ phần Digitech 30 2.1.2 Năng lực kỹ thuật, kinh nghiệm Digitech 35 2.1.3 Nhược điểm hệ thống yêu cầu phát triển hệ thống 38 2.2 Phân tích hệ thống 40 2.2.1 Biểu đồ Usecase hệ thống: 40 2.2.2 Biểu đồ hoạt động: 42 2.2.3 Biểu đồ trình tự: 45 2.2.4 Biểu đồ lớp: 49 2.3 Thiết kế hệ thống 51 2.3.1 Thiết kế giao diện trang chủ 51 2.3.2 Thiết kế hệ thống giao diện trang cửa hàng 53 2.3.3 Thiết kế giao diện trang chi tiết sản phẩm 54 Chương 3: XÂY DỰNG WEBSITE 55 3.1 Giao diện trang chủ: 55 3.2 Giao diện trang cửa hàng: 56 3.3 Giao diện trang chi tiết sản phẩm: 57 3.4 Giao diện Form hỗ trợ trực tuyến: 58 3.5 Giao diện trang quản trị Admin: 58 3.6 Giao diện trang phpMyAdmin: 59 3.7 Giao diện trang đăng nhập Admin: 60 KẾT LUẬN 61 TÀI LIỆU THAM KHẢO 62 DANH MỤC HÌNH ẢNH Hình 2.1: Đội ngũ chuyên gia Digitech .31 Hình 2.2: Sơ đồ tổ chức công ty Digitech 32 Hình 2.3: Giải Sao Khuê 2006 35 Hình 2.4: Trung tâm dịch vụ bảo hành .36 Hình 2.5: Biểu đồ usecase tổng quát 40 Hình 2.6: Biểu đồ usecase khách hàng .41 Hình 2.7: Biểu đồ usecase quản trị viên .41 Hình 2.8: Biểu đồ hoạt động đăng nhập hệ thống .42 Hình 2.9: Biểu đồ hoạt động quản lý sản phẩm 42 Hình 2.10: Biểu đồ hoạt động xem chi tiết sản phẩm 43 Hình 2.11: Biểu đồ hoạt động xem giỏ hàng 43 Hình 2.12: Biểu đồ hoạt động xem tin tức 44 Hình 2.13: Biểu đồ hoạt động đăng ký thành viên .44 Hình 2.14: Biểu đồ hoạt động tìm kiếm sản phẩm .45 Hình 2.15: Biểu đồ trình tự đăng nhập cho admin 45 Hình 2.16: Biểu đồ trình tự thêm sản phẩm cho admin 46 Hình 2.17: Biểu đồ trình tự sửa sản phẩm cho admin .46 Hình 2.18: Biểu đồ trình tự xóa sản phẩm cho admin 47 Hình 2.19: Biểu đồ trình tự xem chi tiết sản phẩm .47 Hình 2.20: Biểu đồ trình tự đăng ký thành viên 48 Hình 2.21: Biểu đồ trình tự toán .48 Hình 2.22: Biểu đồ lớp quản lý sản phẩm 49 Hình 2.23: Biểu đồ lớp quản lý tin tức .49 Hình 2.24: Mô hình thực thể liên kết 50 Hình 2.25: Mô hình thiết kế tổng quan 51 Hình 2.26: Mô hình thiết kế trang chủ .52 Hình 2.27: Thiết kế giao diện trang cửa hàng 53 Hình 2.28: Thiết kế giao diện trang chi tiết sản phẩm 54 Hình 3.1 Giao diện trang chủ 55 Hình 3.2 Giao diện trang cửa hàng 56 Hình 3.3 Giao diện trang chi tiết sản phẩm .57 Hình 3.4 Giao diện Form hỗ trợ trực tuyến .58 Hình 3.5 Giao diện trang quản trị Admin 58 Hình 3.6 Giao diện trang phpMyAdmin 59 Hình 3.7 Giao diện trang đăng nhập Admin 60 LỜI NÓI ĐẦU Với phát triển nhảy vọt công nghệ thông tin nay, Internet ngày giữ vai trò quan trọng lĩnh vực khoa học kĩ thuật đời sống Internet tập hợp máy tính nối kết với nhau, mạng máy tính toàn cầu mà kết nối máy PC họ Với mạng Internet, tin học thật tạo nên cách mạng trao đổi thông tin lĩnh vực văn hóa, xã hội, trị, kinh tế Với công nghệ Word Wide Web, hay gọi Web giúp đưa thông tin mong muốn lên mạng Internet cho người xem cách dễ dàng với công cụ ngôn ngữ lập trình khác Sự đời phần mềm nguồn mở WordPress cho phép xây dựng trang Web đáp ứng yêu cầu người sử dụng Mã nguồn mở WordPress xây dựng ngôn ngữ PHP hệ quản trị sở liệu MySQL kết hợp tuyệt vời Với nhiều ưu điểm bật mà phần mềm nguồn mở WordPress nhiều người sử dụng Với lí đó, hướng dẫn giúp đỡ cô Ths.Lê Thu Trang, em chọn đề tài: ”Ứng dụng WordPress xây dựng Website thương mại điện tử cho Công ty cổ phần Digitech – Hà Nội” Đề tài gồm nội dung: - Cơ sở lý thuyết - Khảo sát trạng Công ty cổ phần Digitech – Hà Nội - Phân tích thiết kế hệ thống - Xây dựng website Trong trình thực đề tài em nhận giúp đỡ bảo tận tình cô Ths Lê Thu Trang, giáo viên hướng dẫn trình làm đề tài Em xin gửi lời cảm ơn chân thành đến tất Thầy Cô khoa Công Nghệ Thông Tin – trường Đại Học Công Nghệ Thông Tin Truyền Thông giảng dậy em suốt thời gian qua Tuy nhiên, thời gian hạn hẹp, nỗ lực đề tài khó tránh khỏi thiếu sót Em mong nhận thông cảm, lời góp ý bảo tận tình thầy, cô bạn Chương 1: CƠ SỞ LÝ THUYẾT 1.1 Phân tích thiết kế hướng đối tượng với UML 1.1.1 Tìm hiểu phân tích thiết kế hướng đối tượng a, Hướng đối tượng Hướng đối tượng thuật ngữ thông dụng thời ngành công nghiệp phần mềm Lối tiếp cận hướng đối tượng lối tư vấn đề theo lối ánh xạ thành phần toán vào đối tượng đời thực Với lối tiếp cận này, chia ứng dụng thành phần nhỏ, gọi đối tượng, chúng tương đối độc lập với b, Phân tích hướng đối tượng Phân tích hướng đối tượng (Object Oriented Analysis - OOA) giai đoạn phát triển mô hình xác súc tích vấn đề, có thành phần đối tượng khái niệm đời thực, dễ hiểu người sử dụng Trong giai đoạn OOA, vấn đề trình bày thuật ngữ tương ứng với đối tượng có thực Thêm vào đó, hệ thống cần phải định nghĩa cho người không chuyên tin học dễ dàng hiểu Dựa vấn đề có sẵn, nhà phân tích cần ánh xạ đối tượng hay thực thể có thực khách hàng, ô tô, người bán hàng, vào thiết kế để tạo thiết kế gần cận với tình thực Mô hình thiết kế chứa thực thể vấn đề có thực giữ nguyên mẫu hình cấu trúc, quan hệ hành vi chúng Theo cách khác, sử dụng phương phát hướng đối tượng chúng a mô hình hóa thực thể thuộc vấn đề có thực mà giữ cấu trúc, quan hệ hành vi chúng c, Thiết kế hướng đối tượng Thiết kế hướng đối tượng (Object Oriented Programming - OOP) giai đoạn xây dựng ứng dụng thực sử dụng kỹ thuật lập trình hướng đối tượng Đây phương thức thực thiết kế hướng đối tượng qua việc sử dụng ngôn ngữ lập trình có hỗ trợ tính hướng đối tượng Một vài ngôn ngữ hướng đối tượng thường nhắc tới C++ Java, Đồ án tốt nghiệp chủ yếu nhắc đến ngôn ngữ lập trình web PHP Kết cuối giai đoạn thiết kế hướng đối tượng loạt code chạy được, đưa vào sử dụng sau trải qua nhiều vòng quay nhiều bước thử nghiệm khác 1.1.2 Giới thiệu ngôn ngữ mô hình hóa thống UML UML ngôn ngữ mô hình hợp nhất, hiểu ngôn ngữ thống xu hướng hình thái mạng tri thức lĩnh vực công nghệ thông tin Nó phương tiện giúp cho tổ chức nhận thức cách tốt lợi cạnh tranh thông qua việc nắm bắt, truyền đạt, trao đổi nâng cao tri thức lĩnh vực công nghệ phần mềm Chính xác UML ngôn ngữ mô hình hóa chuẩn để thiết kế phần mềm hướng đối tượng, dùng để đặc tả, trực quan hóa, xây dựng làm tài liệu cho hệ thống phần mềm UML ngôn ngữ đồ họa với tập quy tắc ngữ nghĩa Các quy tắc ngữ nghĩa mô hình thể tiếng Anh gọi Ngôn ngữ ràng buộc đối tượng (OLC – Object Constraint Language) OCL ngôn ngữ đặc tả sử dụng logic đơn giản để đặc tả đặc tính hệ thống a, Mục đích UML  Mô hình hóa hệ thống sử dụng khái niệm hướng đối tượng cách thống  Cho phép đặc tả, hỗ trợ đặc tả tường minh mối quan hệ khái niệm hệ thống, đồng thời mô tả trạng thái hoạt động (tĩnh động) hệ thống  Hỗ trợ khả sử dụng lại kế thừa phạm vi rộng để xây dựng hệ thống phức tạp nhạy cảm như: hệ thống tự động, hệ thống thời gian thực  Tạo ngôn ngữ mô hình hóa sử dụng cho người máy tính b, Công dụng UML  UML ngôn ngữ chuẩn để viết kế hoạch chi tiết phần mềm  Vạch cho hệ thống chức sử dụng mô hình tình sử dụng tác nhân  Minh họa Usecase bằng biểu đồ tương tác ( Interaction Diagram)  Mô tả cấu trúc tĩnh hệ thống sử dụng biểu đồ lớp (Class Diagram)  Mô hình hóa trạng thái đối tượng biểu đồ chuyển tiếp trạng thái  Minh họa cấu trúc thi hành vật lý biểu đồ thành phần triển khai c, Các đặc trưng khả UML  UML ngôn ngữ mô hình đồ họa Ngôn ngữ cung cấp bảng từ vựng tập quy tắc để kết hợp từ bảng từ vựng để giao tiếp Ngôn ngữ mô hình ngôn ngữ có từ vựng quy tắc tập trung vào biểu diễn mặt vật lý khái niệm hệ thống UML ngôn ngữ chuẩn công nghiệp để lập kế hoạch chi tiết phần mềm Ngôn ngữ phải cho phép biểu diễn nhiều khung nhìn (views) khác kiến trúc hệ thống suốt trình phát triển phần mềm Từ vựng quy tắc ngôn ngữ UML cho ta cách thức xây dựng mô hình đọc mô hình không cho biết mô hình cần phải lập lập chúng mà phải dựa vào quy trình phát triển phần mềm Các biểu diễn mô hình UML biểu diễn đồ họa  UML ngôn ngữ đặc tả có cấu trúc Đặc tả xây dựng mô hình xác, rõ ràng, không nhập nhằng, hoàn thiện đầy đủ điểm mấu chốt vấn đề UML hướng tới đặc tả thiết kế, phân tích định cài đặt trình phát triển triển khai hệ thống phần mềm  UML ngôn ngữ trực quan Bằng hệ thống ký hiệu đồ họa biểu đồ với giải kèm, UML cho ta hình dung hệ thống cần xây dựng từ nhiều góc độ khác 10 2.2.4 Biểu đồ lớp:  Biểu đồ lớp quản lý sản phẩm Hình 2.22: Biểu đồ lớp quản lý sản phẩm  Biểu đồ lớp quản lý tin tức Hình 2.23: Biểu đồ lớp quản lý tin tức 49  Mô hình thực thể liên kết Hình 2.24: Mô hình thực thể liên kết 50 2.3 Thiết kế hệ thống 2.3.1 Thiết kế giao diện trang chủ Hình 2.25: Mô hình thiết kế tổng quan 51 Hình 2.26: Mô hình thiết kế trang chủ 52 2.3.2 Thiết kế hệ thống giao diện trang cửa hàng Hình 2.27: Thiết kế giao diện trang cửa hàng 53 2.3.3 Thiết kế giao diện trang chi tiết sản phẩm Hình 2.28: Thiết kế giao diện trang chi tiết sản phẩm 54 Chương 3: XÂY DỰNG WEBSITE 3.1 Giao diện trang chủ: Hình 3.1 Giao diện trang chủ 55 3.2 Giao diện trang cửa hàng: Hình 3.2 Giao diện trang cửa hàng 56 3.3 Giao diện trang chi tiết sản phẩm: Hình 3.3 Giao diện trang chi tiết sản phẩm 57 3.4 Giao diện Form hỗ trợ trực tuyến: Hình 3.4 Giao diện Form hỗ trợ trực tuyến 3.5 Giao diện trang quản trị Admin: Hình 3.5 Giao diện trang quản trị Admin 58 3.6 Giao diện trang phpMyAdmin: Hình 3.6 Giao diện trang phpMyAdmin 59 3.7 Giao diện trang đăng nhập Admin: Hình 3.7 Giao diện trang đăng nhập Admin Xin mời quý thầy cô bạn xem thêm hình ảnh website giới thiệu sản phẩm cho Công ty cổ phần Digitech địa chỉ: http://máychấmcôngtựđộng.vn/ 60 KẾT LUẬN Qua Đồ án tốt nghiệp này, giúp em củng cố lại kiến thức học phần mềm mã nguồn mở WordPress kiến thức phát triển ứng dụng web, nắm vững kiến thức xây dựng trang web Các kết đạt: - Cơ sở lý thuyết - Khảo sát trạng cửa Công ty cổ phần Digitech – Hà Nội - Phân tích thiết kế hệ thống - Xây dựng website Một số hạn chế: - Giao diện trang web chưa thực thu hút ý Hướng phát triển đề tài: - Tiếp tục xây dựng phát triển website với giao diện gần gũi với khách hàng, thu hút quan tâm, ý đến sản phẩm Để hoàn thành đề tài này, lần em xin chân thành cảm ơn cô giáo Ths Lê Thu Trang người quan tâm, giúp đỡ em suốt thời gian qua Và cho em bày tỏ lòng biết ơn tới thầy giáo, cô giáo khoa công nghệ thông tin giúp em hoàn thành đề tài chuyên nghành Em xin chân thành cảm ơn ! Thái Nguyên,ngày.12 tháng năm 2016 Sinh viên thực Trần Văn Thượng 61 TÀI LIỆU THAM KHẢO [1] Trương Ninh Thuận, “Bài giảng Phân tích thiết kế hướng đối tượng (UML)”, Trường Đại học Công nghệ - Đại học Quốc gia HN, 2009 [2] Ao Thu Hoài, “ Thương mại điện tử”, Nhà xuất Thông tin truyền thông, 2015 Và số trang web: [1] www.doko.vn [2] www.luanvan.net.vn [3] www.microsofttech.net [4] www.Youtube.com [5] www.google.com.vn 62 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Thái Nguyên, ngày tháng năm 2016 GIÁO VIÊN HƯỚNG DẪN 63 ... khảo sát thực tế Công ty cổ phần Digitech Hà Nội, địa chỉ: Số 15B, Hòa Bình 7, Minh Khai, Hai Bà Trưng, Hà Nội Em thấy Công ty cổ phần Digitech – Hà Nội nhánh Công ty cổ phần Digitech chuyên kinh... người sử dụng Với lí đó, hướng dẫn giúp đỡ cô Ths.Lê Thu Trang, em chọn đề tài: Ứng dụng WordPress xây dựng Website thương mại điện tử cho Công ty cổ phần Digitech – Hà Nội Đề tài gồm nội dung:... thiệu Công ty cổ phần Digitech a) Lịch sử hình thành phát triển - 1991: Công ty điện tử tin học EI thành lập chuyên máy rút tiền ATM, thẻ thiết bị cho ngân hàng - 2003: Công ty Digitech thành