BÁO cáo LUẬN văn tốt NGHIỆP ỨNG DỤNG CÔNG NGHỆ WEB xây DỰNG WEBSITE KINH DOANH điện THOẠI

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN TP.HCM KHOA CÔNG NGHỆ THÔNG TIN  BÁO CÁO LUẬN VĂN TỐT NGHIỆP ỨNG DỤNG CÔNG NGHỆ WEB XÂY DỰNG WEBSITE KINH DOANH ĐIỆN THOẠI Giảng viên hướng dẫn : THS DƯƠNG THÀNH PHẾT Sinh viên thực : GỊP KỲ KHỐN 11100704 PHẠM BẢO TRÍ 11100638 Ngành : CƠNG NGHỆ THƠNG TIN Khóa : 2011 – 2014 Tp Hồ Chí Minh, tháng 02 năm 2014 LỜI CẢM ƠN  Qua trình làm đề tài luận văn tốt nghiệp, hướng dẫn tận tình chu đáo quý Thầy, Cô, với giúp đỡ bạn học chung, kết hợp với vốn kiến thức có sau năm học trường, trình tìm hiểu, nghiên cứu tài liệu, chúng em hoàn thành đề tài luận văn tốt nghiệp Chúng em xin chân thành cảm ơn Thầy Dương Thành Phết tận tình hướng dẫn, giúp đỡ chúng em việc hoàn thành đề tài luận văn tốt nghiệp Chúng em cảm ơn đến nhà trường tạo điều kiện thuận lợi cho chúng em có hội học tập làm đề tài trường, điều giúp cho chúng em nhiều hỗ trợ vật chất, kỹ thuật suốt trình thời gian làm đề tài Vì thời gian kiến thức có hạn nên bênh cạnh kết đạt được, đề tài luận văn tốt nghiệp khó tránh khỏi thiếu sót Chúng em mong nhận ý kiến đóng góp dẫn quý Thầy, Cơ để luận văn tốt nghiệp hồn thiện giúp chúng em bổ sung thêm kinh nghiệm trình làm việc sau Sau cùng, em xin kính chúc q Thầy Cơ Khoa Cơng Nghệ Thông Tin Khoa khác Thầy Hiệu Trưởng – PGS TS Nguyễn Tác Anh thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp truyền đạt kiến thức cho hệ mai sau Em xin chân thành cảm ơn Nhóm sinh viên thực Gịp Kỳ Khốn Phạm Bảo Trí NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN  Điểm TP.HCM, ngày … tháng … năm 2014 Giáo viên hướng dẫn Th.S Dương Thành Phết NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN  TP.HCM, ngày … tháng … năm 2014 Giáo viên phản biện MỞ ĐẦU Ngày nay, với phát triển vượt bậc ngành khoa học kỹ thuật, đặc biệt Công nghệ thông tin giúp cho nhân loại tiến bước dài q trình phát triển Cơng nghệ thơng tin có mặt nơi, lĩnh vực, từ giải trí, làm việc, học tập, tìm kiếm thông tin,… Các công nghệ cập nhật, để thay cũ, làm cho thứ trở nên dễ dàng hơn, thân thiện với người dùng Việc ln cải tiến, tìm hiểu, nắm bắt công nghệ giúp không trở nên lạc hậu, khơng bị bỏ lại phía sau phát triển thời đại Những công nghệ mang lại nhiều hiệu vượt trội để tìm hiểu cơng nghệ khơng thực đơn giản, phải bao gồm nhiều yếu tố Vì lý đó, với kiến thức học tập trường, nghiên cứu tài liệu, chúng em có trải nghiệm thật công nghệ sử dụng website Điều thực bổ ích có lợi cho chúng em, cho công việc sau Trong đề tài này, chúng em ứng dụng học được, tìm hiểu để thực đề tài “ỨNG DỤNG CÔNG NGHỆ WEB VÀO XÂY DỰNG WEBSITE BÁN ĐIỆN THOẠI TRỰC TUYẾN KT - PHONE” Xin chân thành cám ơn BẢNG CÁC HÌNH, BẢNG BIỂU VÀ SƠ ĐỒ Trang Bảng 2.1 : Bảng so sánh HTML HTML 4.01 XHTML .6 Bảng 2.2 : Bảng so sánh CSS với phiên CSS cũ Bảng 2.3 : Kiến trúc LinQ Bảng 3.1 : Mơ hình quan hệ sản phẩm .13 Bảng 3.2 : Mơ hình quan hệ mục khác .14 Bảng 3.3: Mơ hình SQL mục sản phẩm 27 Bảng 3.4: Mô hình SQL mục khác 28 Bảng 3.5: Bảng SANPHAM (sản phẩm) 30 Bảng 3.6: Bảng MATHANG (Mặt hàng) .30 Bảng 3.7: Bảng HANGSANXUAT (Hãng sản xuất) .30 Bảng 3.8: Bảng HEDIEUHANH (Hệ điều hành) 30 Bảng 3.9: Bảng KICHTHUOCMH (Kích thước mh) .31 Bảng 3.10: Bảng TINHNANG (Tính năng) 31 Bảng 3.11: Bảng MAU (Màu) 31 Bảng 3.12: Bảng TRANGTHAI (Trạng thái) 31 Bảng 3.13: Bảng TINHNANGSANPHAM (Tính sản phẩm) 32 Bảng 3.14: Bảng HINHANHCHITIET (Hình ảnh chi tiết) 32 Bảng 3.15: Bảng MAUSANPHAM (Màu sản phẩm) 32 Bảng 3.16: Bảng KHUYENMAI (Khuyến mại) .32 Bảng 3.17: Bảng KHACHHANG (Khách hàng) 33 Bảng 3.18: Bảng TINHTRANG (Tình trạng) 33 Bảng 3.19: Bảng DONDATHANG (Đơn đặt hàng) .34 Bảng 3.20: Bảng CHITIETDATHANG (Chi tiết đặt hàng) 34 Bảng 3.20: Bảng NDGUI (Nội dung gửi) .35 Bảng 3.22: Bảng MENU (menu) 35 Bảng 3.23: Bảng MENUHEADER (Menu header) 36 Bảng 3.24: Bảng MENUFOOTER (Menu footer) 36 Bảng 3.25: Bảng QUANLYWEB (Quản lý web) 36 Bảng 3.26: Bảng DANHMUCTRANG (Danh mục trang) .37 Bảng 3.27: Bảng PHANQUYENQUANLY (Phân quyền quản lý) .37 Bảng 3.28: Bảng PDQUANGCAO (Phần đặt quảng cáo) 37 Bảng 3.29: Bảng QUANGCAO (Quảng cáo) 38 Bảng 3.30: Bảng LIENHE (Liên hệ) 39 Bảng 3.31: Bảng CHITIETLIENHE (Chi tiết liên hệ) 39 Bảng 3.32: Bảng TUYENDUNG (Tuyển dụng) .39 Bảng 3.33: Bảng CHITIETTUYENDUNG (Chi tiết tuyển dụng) 40 Bảng 3.34: Bảng TINTUC (Tin tức) .40 Bảng 3.35: Bảng HOTRO (Hỗ trợ) 41 Bảng 4.1: Sơ đồ giao diện .45 Bảng 4.2: Giao diện trang chủ 46 Bảng 4.3: Giao diện sản phẩm 47 Bảng 4.4: Giao diện chi tiết sản phẩm 48 Bảng 4.5: Giao diện đặt hàng 49 Bảng 4.6: Giao diện đăng nhập đăng ký 50 Bảng 4.7: Giao diện tin tức .51 Bảng 4.8: Giao diện trang quản lý thành viên hệ thống 52 Bảng 4.9: Giao diện trang quản lý danh mục sản phẩm 53 Bảng 4.10: Giao diện trang quản lý tin tức .54 Bảng 4.11: Giao diện trang quản lý khách hàng .55 Bảng 4.12: Giao diện trang quản lý quảng cáo .56 Bảng 4.13: Giao diện trang quản lý đơn đặt hàng 57 Bảng 4.14: Giao diện trang quản lý menu 58 Bảng 4.15: Kết Seo onpage 60 Bảng 4.16: Từ khóa ktphone google 61 Bảng 4.17: Từ khóa shop dien thoai ktphone google 62 Bảng 4.18: Từ khóa iphone5s ktphone google 63 Bảng 4.19: Thông kê truy cập dạng người dùng .63 Bảng 4.20: Thông kê truy cập dạng quốc gia 64 DANH MỤC CÁC TỪ VIẾT TẮT CNTT: Công nghệ thông tin (Chương 1/ phần 1.1) TMĐT: Thương mại điện tử (Chương 1/ phần 1.1) HTML: The Hypertext Markup Language (Chương 2/ phần 2.1) W3C: World Wide Web Consortium (Chương 2/ phần 2.1) WHATWG: Web Hypertext Application (Chương 2/ phần 2.1) SEO: Search Engine Optimization (Chương 2/ phần 2.4) MỤC LỤC Trang Chương 1: MỞ ĐẦU .1 1.1 GIỚI THIỆU 1.1.1 Giới thiệu chung 1.1.2 Giới thiệu Thương Mại Điện Tử 1.2 MỤC TIÊU ĐỀ TÀI Chương : GIỚI THIỆU CÁC CÔNG NGHỆ PHÁT TRIỂN WEBSITE .5 2.1 HTML 2.1.1 Lý mà HTML đời .5 2.1.2 Ưu nhược điểm HTML 2.1.3 So sánh HTML HTML 4.01 XHTML 2.2 CSS .6 2.2.1 Sự xuất CSS .6 2.2.3 So sánh CSS với phiên cũ 2.3 LinQ 2.3.1 LinQ ? 2.3.2 LinQ to SQL 2.3.3 Ưu nhược điểm LinQ .8 2.4 Một số công nghệ khác 2.4.1 Bootstrap 2.4.1 SEO Chương : PHÂN TÍCH THIẾT KẾ HỆ THỐNG 13 3.1 MƠ HÌNH THỰC THỂ KẾT HỢP (ERD) .13 3.1.1 Mục sản phẩm 13 3.1.2 Các mục khác 14 3.2 MƠ HÌNH QUAN HỆ 14 3.2.1 Ràng buộc toàn vẹn 14 3.3 MƠ HÌNH MỨC VẬT LÝ 27 3.3.1 Mơ hình vật lý dạng SQL .27 3.3.2 Mô tả chi tiết bảng mơ hình .29 Chương : CÀI ĐẶT VÀ THỬ NGHIỆM 42 4.1 SƠ LƯỢC VỀ WEBSITE KT - PHONE 42 4.2 CẤU TRÚC WEBSITE .43 4.3 SƠ ĐỒ GIAO DIỆN 44 4.4 MỘT SỐ GIAO DIỆN CHÍNH CỦA WEBSITE .46 4.4.1 Trang người dùng 46 4.4.2 Trang quản trị - admin .52 4.5 Quy trình kết SEO 59 4.5.1 Cơng cụ quy trình SEO .59 4.5.2 Kết SEO 60 Chương 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 65 5.1 KẾT LUẬN 65 5.2 HƯỚNG PHÁT TRIỂN 67 TÀI LIỆU THAM KHẢO 68 4.4.2.4 Trang quản lý khách hàng Bảng 4.11: Giao diện trang quản lý khách hàng Chức :  Cho phép người quản trị xem thông tin khách hàng (họ tên/ thư điện tử, ngày tạo, ngày truy cập, trạng thái)  Cho phép người quản trị thêm, chỉnh sửa xóa khách hàng  Cho phép người quản trị thay đổi mật khách hàng, sửa thông tin khách hàng SVTH: GỊP KỲ KHỐN & PHẠM BẢO TRÍ Trang: 55 4.4.2.5 Trang quản lý quảng cáo Bảng 4.12: Giao diện trang quản lý quảng cáo Chức :  Cho phép người quản trị xem thơng tin quảng cáo (hình ảnh, tiêu đề/ liên kết, thứ tự, trạng thái)  Cho phép người quản trị thêm, chỉnh sửa xóa quảng cáo SVTH: GỊP KỲ KHỐN & PHẠM BẢO TRÍ Trang: 56 4.4.2.6 Trang quản lý đơn đặt hàng Bảng 4.13: Giao diện trang quản lý đơn đặt hàng Chức :  Cho phép người quản trị xem thông tin đơn đặt hàng (khách hàng, giá trị đơn hàng, ngày gửi)  Cho phép người quản trị thêm, chỉnh sửa xóa đơn đặt hàng  Cho phép người quản trị quyền xuất hóa đơn mà khách hàng đặt hàng SVTH: GỊP KỲ KHỐN & PHẠM BẢO TRÍ Trang: 57 4.4.2.7 Trang quản lý menu Bảng 4.14: Giao diện trang quản lý menu Chức :  Cho phép người quản trị xem thông tin menu ( tiêu đề, thứ tự, trạng thái)  Cho phép người quản trị thêm, chỉnh sửa xóa menu SVTH: GỊP KỲ KHỐN & PHẠM BẢO TRÍ Trang: 58 4.5 Quy trình kết SEO 4.5.1 Cơng cụ quy trình SEO  Công cụ SEO: sử dụng công cụ iSEO  Quy trình SEO: - Bước 1: Khai báo website với cơng cụ tìm kiếm google (https://www.google.com/webmasters/tools) - Bước 2: Tạo Sitemap.xml Robots.txt - Bước 3: Tối ưu hóa code thêm thuộc tính vào thiếu (title, description, keywords, h1, h2, in đậm, in nghiêng, thích alt cho thể title cho thể ) - Bước 4: Tạo Geo Meta Tags icon Favicon - Bước 5: Tạo Gzip tăng tốc độ cho website - Bước 6: kết nối với google Analytics để báo cáo thống kê số lượng truy cập website theo ngày, tháng năm - Bước 7: Đăng tin quảng cáo website trang rao vặt, đăng video clip, đăng diễn đàn tham gia trang web tăng lượng truy cập SVTH: GỊP KỲ KHOÁN & PHẠM BẢO TRÍ Trang: 59 4.5.2 Kết SEO 4.5.2.1 Kiểm tra chuẩn SEO Bảng 4.15: Kết Seo onpage SVTH: GỊP KỲ KHỐN & PHẠM BẢO TRÍ Trang: 60 4.5.2.2 Vị trí google 1) Từ khóa: ktphone - Đứng vị trí thứ Bảng 4.16: Từ khóa ktphone google SVTH: GỊP KỲ KHỐN & PHẠM BẢO TRÍ Trang: 61 2) Từ khóa: Shop dien thoai ktphone – Đứng vị trí thứ Bảng 4.17: Từ khóa shop dien thoai ktphone google SVTH: GỊP KỲ KHOÁN & PHẠM BẢO TRÍ Trang: 62 3) Từ khóa: Iphone5s ktphone – Đứng vị trí thứ Bảng 4.18: Từ khóa iphone5s ktphone google 4.5.2.2 Thống kê truy cập với Google Analytics 1) Chế độ người dùng Bảng 4.19: Thông kê truy cập dạng người dùng SVTH: GỊP KỲ KHOÁN & PHẠM BẢO TRÍ Trang: 63 2) Chế độ quốc gia Bảng 4.20: Thông kê truy cập dạng quốc gia SVTH: GỊP KỲ KHỐN & PHẠM BẢO TRÍ Trang: 64 Chương 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 5.1 KẾT LUẬN Qua trình học tập trao dồi kiến thức bạn bè, kết hợp với tham khảo tài liệu liên quan, đặc biệt với hướng dẫn chu đáo, tận tình giáo viên hướng dẫn Ths Dương Thành Phết, giúp cho chúng em nhiều việc hoàn thành báo cáo này, chúng em trang bị thêm cho kiến thức việc xây dựng website thương mại điện tử Và phần ứng dụng kiến thực vào xây dựng website bán điện thoại trực tuyến KT - Phone với chức sau: a) Đối với người quản trị viên : cho phép thực chức quản lý website  Quản lý thành viên hệ thống : o Cho phép thêm, xóa, sửa thành viên hệ thống o Quản lý thông tin thành viên hệ thống phần quyền cho thành viên quản lý trang web  Quản lý sản phẩm : o Hỗ trợ nhiều hình thức thị sản phẩm tìm kiếm thơng tin o Cho phép thêm, xóa, sửa sản phẩm o Quản lý thêm, xóa, sửa nhiều thông tin khác liên quan tới sản phẩm : Mặt hàng, tính năng, hệ điều hành, hãng sản xuất, kích thước MH, màu o Quản lý thêm, xóa, sửa nhiều thơng tin khác liên quan tới chi tiết sản phẩm : Tính sản phẩm, màu sản phẩm, hình ảnh sản phẩm  Quản lý tin tức : o Cho phép thêm, xóa, sửa tin tức o Quản lý danh sách tin tức chưa cập nhật SVTH: GỊP KỲ KHOÁN & PHẠM BẢO TRÍ Trang: 65  Quản lý khách hàng : o Hỗ trợ nhiều hình thức thị khách hàng o Cho phép thêm, xóa, sửa khách hàng o Quản lý thông tin khách hàng cập nhật lại mật khách hàng o Cho phép quản lý thêm nội dung kích hoạt tài khoản email  Quản lý quảng cáo : o Hỗ trợ nhiều hình thức thị quảng cáo tìm kiếm thơng tin o Cho phép thêm, xóa, sửa quảng cáo o Quản lý danh sách quảng cáo chưa cập nhật o Quản lý thêm phần vị trí đặt quảng cáo website  Đơn đặt hàng : o Hỗ trợ tiềm kiếm thông tin đơn hàng o Cho phép thêm, xóa, sửa đơn đặt hàng o Quản lý tình trạng đơn hàng : Chưa xử lý, hoàn thành, giao, giao thành cơng, đơn hàng hủy, hồn tiền hủy giao hàng o Quản lý danh sách đơn đặt hàng theo tình trạng đơn hàng  Menu : o Hỗ trợ nhiều hình thức thị menu tìm kiếm thơng tin o Cho phép thêm, xóa sửa menu o Quản lý danh sách menu b) Đối với người dùng :  Cho phép thực chức năng: đăng ký, đăng nhập, chỉnh sửa thông tin cá nhân, đổi mật kích hoạt tài khoản  Xem sản phẩm theo menu : Hãng sản xuất, hệ điều hành, tính năng, giá tiền, kích thước mh, khuyến mại  Xem chi tiết sản phẩm bình luận sản phẩm  Xem thông tin giỏ hàng, đơn đặt hàng toán đơn hàng  Xem trang khác : Tin tức, liên hệ, tuyển dụng  Tìm kiếm thơng tin sản phẩm SVTH: GỊP KỲ KHỐN & PHẠM BẢO TRÍ Trang: 66 5.2 HƯỚNG PHÁT TRIỂN Khi website hoàn chỉnh chạy thời gian, chúng em nhận thấy số chức chưa thật tốt, chưa xử lý tốt nội dung báo cáo có tao tác với bảng phù hợp với bố cục trang web, số giao diện hiển thị số mục biểu tượng, nút bấm chưa thật hài lòng, thiếu số chức khác như: quản lý xem mặt hàng sản phẩm dạng RSS, quản lý thêm vị trí quảng cáo ( cho phép khách hàng thêm vị trí quảng cáo mới) Do đó, chúng em tiếp tục tìm hiểu sâu công nghệ này, nhằm mục đích xây dựng website:  Giao diện đẹp, thân thiện với người dùng, có nhiều chức tương tác tốt với người dùng  Tăng tốc độ load liệu  Tối ưu code mã hóa trang web, liệu tăng tính bảo mật cao  Xây dựng, bổ sung tính cịn thiếu hay chưa thật hồn chỉnh q trình sử dụng SVTH: GỊP KỲ KHỐN & PHẠM BẢO TRÍ Trang: 67 TÀI LIỆU THAM KHẢO TÀI LIỆU TIẾNG VIỆT Ths Dương Thành Phết, khoa công nghệ thơng tin, Trường cao đẳng CNTT TP.HCM, “Giáo trình giảng mơn Cơng Nghệ WEB”, “Giáo trình giảng mơn Công Nghệ WEB nâng cao”, “Bài tập thực hành Công Nghệ WEB” (2013) Ths Lê Thị Minh Nguyện, khoa công nghệ thông tin, Trường cao đẳng CNTT TP.HCM, “Giáo trình giảng mơn Cơ Sở Dữ Liệu” (2011), “Giáo trình giảng chuyên đề SQL Server” (2013) TÀI LIỆU INTERNET Thayphet.net, “Công nghệ Web nâng cao”, http://thayphet.net/product-cat/138-cong-nghe-web-nang-cao-.html hhsc.com.vn, “Thương mại điện tử ?”, http://www.hhsc.com.vn/TinTuc/Tin_khoa_hoc_cong_nghe/tabid/98/cati d/5/id/77/Thuong-mai-dien-tu-la-gi/Default.aspx idoc.vn, “Thương mại điện tử việt nam ?”, http://idoc.vn/tai-lieu/thuong-mai-dien-tu-va-thuc-trang-giai-phap-o-vietnam.html Itool.vn, “HTML gì”, http://itool.vn/HTML5/HTML5-la-gi 634.aspx w3schools.com, “HTML Tutorial”, http://www.w3schools.com/html/default.asp Hoangvi.com, “CSS gì”, http://www.hoangvi.com/tin-tuc/thiet-ke-web/html5-va-css3-la-gi-n.html w3schools.com, “CSS Tutorial”, http://www.w3schools.com/css/default.asp K53H online, trankieu90.0fees.net, “Chuẩn hóa sở liệu” http://www.trankieu90.0fees.net/forum/viewtopic.php?f=27&t=772 msdn.microsoft.com, “LinQ Tutorial”, http://msdn.microsoft.com/en-us/library/bb397926.aspx SVTH: GỊP KỲ KHOÁN & PHẠM BẢO TRÍ Trang: 68 10.ntuts.com, “bootstrap gì”, http://ntuts.com/mien-phi/twitter-bootstrap-bo-cong-cu-css-tutwitter 11 getbootstrap.com, “bootstrap”, http://getbootstrap.com/ 12 hoccungdoanhnghiep.vn, “bootstrap tutorial” http://hoccungdoanhnghiep.vn/noi-dung/gioi-thieu-va-huong-dan-cachsu-dung-bootstrap/ SVTH: GỊP KỲ KHỐN & PHẠM BẢO TRÍ Trang: 69 ... thật công nghệ sử dụng website Điều thực bổ ích có lợi cho chúng em, cho công việc sau Trong đề tài này, chúng em ứng dụng học được, tìm hiểu để thực đề tài ? ?ỨNG DỤNG CÔNG NGHỆ WEB VÀO XÂY DỰNG WEBSITE. .. chóng, ngơn ngữ Web tương lai gần HTML5 chuẩn mạnh hơn, sử dụng để xây dựng ứng dụng web mà khơng cịn phụ thuộc cần thiết nhiều công nghệ ứng dụng Internet độc quyền Adobe Flash, Microsoft Silverlight... Việc ứng dụng CNTT hoạt động sản xuất kinh doanh khơng nằm ngồi xu hướng Khái niệm ứng dụng CNTT hoạt động thương mại gọi Thương mại điện tử(TMĐT) đời trở thành xu thay dần phương thức kinh doanh