BÁO CÁO ĐỀ TÀI CÔNG NGHỆ WEB

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC BÁCH KHOA KHOA CÔNG NGHỆ THÔNG TIN  BÁO CÁO ĐỀ TÀI CÔNG NGHỆ WEB GVPT: ThS Mai Văn Hà SVTH: Lương Quốc Thiện 14T2 Nhóm HP: 16.10 Đà Nẵng, tháng 12/2018 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà Ý KIẾN ĐÁNH GIÁ CỦA GIẢNG VIÊN …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… SVTH: Lương Quốc Thiện – 14T2 Trang Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà MỤC LỤC GIỚI THIỆU TỔNG QUAN ĐỀ TÀI 1.1 Giới thiệu đề tài 1.2 Ý tưởng 1.3 Các chức 1.4 Kế hoạch CƠ SỞ LÍ THUYẾT 2.1 PHP 2.2 MySql 2.3 Front-End 2.3.1 HTML 2.3.2 CSS 2.3.3 Bootstrap 2.3.4 SASS 2.3.5 Jquery 2.3.6 Ajax PHÂN TÍCH THIẾT KẾ HỆ THỐNG 11 3.1 Thiết kế sở liệu 11 3.2 Danh mục trang 11 3.3 Quy ước 13 CÀI ĐẶT TRIỂN KHAI 13 4.1 Môi trường cài đặt triển khai 13 4.2 Các bước triển khai .1 4.3 Một số hình ảnh sau triển khai 14 SVTH: Lương Quốc Thiện – 14T2 Trang Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà GIỚI THIỆU TỔNG QUAN ĐỀ TÀI 1.1 Giới thiệu đề tài Đề tài số 17 Website quản lý tour du lịch Nhận xét: Đề tài phục vụ mục đích: nắm cách sử dụng ngôn ngữ PHP hiểu quản lý tour du lich Mô tả hoạt động quản lý tour du lịch : - Khi người có nhu cầu du lịch dựa vào trang web để tham khảo tìm kiếm địa điểm du lịch phù hợp với họ - Khi khách hàng muốn tìm kiếm thơng tin địa điểm du lịch theo địa điểm, giá cả… trang web hiển thị hình ảnh thông tin địa điểm du lịch mà khách hàng tìm kiếm - Khi khách hàng muốn xem đến giá tour du lịch hệ thống hiển thị tour du lịch với giá khác cho khách hàng lựa chọn - Vào cuối ngày người quản trị viên có nhiệm vụ cập nhật tạo user đưa tin đưa thêm nhiều thông tin Mục tiêu đề tài: Tạo điều kiện cho khách du lịch nắm rõ thông tin tour du lịch, thông tin tour khuyến đặc biệt để phục vụ tối ưu cho du khách Website cho phép du khách đăng ký tour du lịch trực tuyến trọn gói ,cụ thể : đặt vé tour, xem danh lam thắng cảnh , đặt số lượng người tham gia 1.2 Ý tưởng Sao tham khảo website tour du lich tiếng như: Travel.com.vn, Dulichviet.com.vn, datviettour.com.vn, Mytour.vn… nhóm nhận thấy chúng có số đặc điểm chung ví dụ đăng kí, đăng nhập, đặt tour, tạo chủ đề,… Từ nhóm phân tích số chức người quản lý khác hàng: a Người Quản Lý - Cập nhật thông tin hệ thống - Cập nhật tour du lịch - Đặt Tour - Xử lý đặt tour - Phản hồi b Khách Hàng - Tìm kiếm tour du lịch - Xem thông tin tour du lịch - Đặt tour- toán - Liên hệ 1.3 Các chức Trang chủ: giao diện – cách thể trang chức loại website bắt mắt rộng rãi, chủ yếu sử dụng hình ảnh đẹp, màu sắc sinh động, bố trí hợp lý gợi SVTH: Lương Quốc Thiện- 14T2 Trang Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà cảm giác thoải mái, mong muốn tận hưởng tiện ích dịch vụ cơng ty cung cấp Giới thiệu doanh nghiệp: ln ln cần thiết để gởi tiếng nói doanh nghiệp, nhà cung cấp dịch vụ đến khách hàng Giới thiệu gói nghỉ dưỡng, tour, khách sạn, địa điểm với thông tin đầy đủ tên tour, nội dung hành trình, thời gian, điểm dừng chân, vài đoạn giới thiệu cảnh đẹp mà du khách ghé qua hay dịch vụ sử dụng… giúp khách hàng hình dung chuyến thú vị hay tẻ nhạt Đặt tour, phòng, vé, người phục vụ, loại hình phục vụ theo nhu cầu nghỉ ngơi, túi tiền khách hàng Tin tức: khắp trang website du lịch, resort tích hợp trang chức Tại đây, nhà tổ chức tour giới thiệu cho du khách viết địa điểm du lịch tiếng, thơng dụng hay có cơng ty cung cấp dịch vụ, chế độ khuyến đồng thời giới thiệu cách xác, đầy đủ đa dạng đến khách hàng Phần lớn, thơng tin định cơng ty tour bạn có thu hút du khách hay không, nhiều công ty tổ chức tour có tour du lịch giống nên khó giữ chân du khách không tạo nên khác biệt Đối với website resort thơng tin dịch vụ, lợi ích từ dịch vụ hay loại mỹ phẩm sử dụng… SVTH: Lương Quốc Thiện- 14T2 Trang Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà 1.4 Kế hoạch Thời gian cho phép vòng tuần nên nhóm cần có kế hoạch cụ thể để tránh bị bể tiến độ Theo nhóm quy ước thành viên với nhau:       Hệ quản trị sở liệu: MySQL Máy chủ web: Apache Ngày bắt đầu: 11/10/2018 Ngày dự kiến hoàn thành sơ bộ: 12/12/2018 Phần mềm code mã nguồn: Sublime Text Giao diện: HTML4 / Bootstrap CSS Framework CƠ SỞ LÍ THUYẾT 2.1 PHP PHP viết tắt từ Hypertext Preprocessor ngơn ngữ lập trình kịch hay loại mã lệnh chủ yếu dùng để phát triển ứng dụng viết cho máy chủ, mã nguồn mở, dùng ch mục đích tổng quát PHP miễn phí để tải sử dụng Nó thích hợp với web dễ dàng nhúng vào trang HTML Do tối ưu hóa cho ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C Java, dễ học thời gian xây dựng sản phẩm tương đối ngắn so với ngôn ngữ khác nên PHP nhanh chóng trở thành ngơn ngữ lập trình web phổ biến giới 2.2 MySql MySQL RDBMS nhanh dễ dàng để sử dụng MySQL sử dụng cho nhiều công việc kinh doanh từ lớn tới nhỏ MySQL phát triển, công bố, hỗ trợ MySQL AB, công ty Thụy Điển MySQL trở thành phổ biến nhiều lý do:  MySQL mã ngồn mở Vì thế, để sử dụng nó, bạn xu  MySQL chương trình mạnh mẽ  MySQL sử dụng Form chuẩn ngôn ngữ liệu tiếng SQL SVTH: Lương Quốc Thiện- 14T2 Trang Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà MySQL làm việc nhiều Hệ điều hành với nhiều ngôn ngữ PHP, PERL, C, C++, Java, …  MySQL làm việc nhanh khỏe với tập liệu lớn MySQL thân thiện với PHP, ngơn ngữ đáng giá để tìm hiểu để phát triển Web MySQL hỗ trợ sở liệu lớn, lên tới 50 triệu hàng nhiều bảng Kích cỡ file mặc định giới hạn cho bảng GB, bạn tăng kích cỡ (nếu hệ điều hành bạn xử lý nó) để đạt tới giới hạn lý thuyết TB MySQL điều chỉnh Giấy phép GPL mã nguồn mở cho phép lập trình viên sửa đổi phần mềm MySQL để phù hợp với môi trường cụ thể họ 2.3 Front-End 2.3.1 HTML HTML chữ viết tắt cụm từ HyperText Markup Language (dịch Ngôn ngữ đánh dấu siêu văn bản) sử dụng để tạo trang web, website chứa nhiều trang trang quy tài liệu HTML Cha đẻ HTML Tim BernersLee, người khai sinh World Wide Web chủ tịch World Wide Web Consortium (W3C – tổ chức thiết lập chuẩn môi trường Internet) Một tài liệu HTML hình thành phần tử HTML (HTML Elements) quy định cặp thẻ (tag), cặp thẻ bao bọc dấu ngoặc (ví dụ ) thường khai báo thành cặp, bao gồm thẻ mở thẻ đóng (ví dụ ) Các văn muốn đánh dấu HTML khai báo bên cặp thẻ (ví dụ Đây chữ in đậm) Nhưng số thẻ đặc biệt lại khơng có thẻ đóng liệu khai báo nằm thuộc tính (ví dụ thẻ ) Một tập tin HTML bao gồm phần tử HTML lưu lại đuôi mở rộng html htm Khi tập tin HTML hình thành, việc xử lý trình duyệt web đảm nhận Trình duyệt đóng vai trò đọc hiểu nội dung HTML từ thẻ bên chuyển sang dạng văn đánh dấu để đọc, nghe hiểu 2.3.2 CSS CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngôn ngữ đánh dấu (ví dụ HTML) Có thể hiểu đơn giản rằng, HTML đóng vai trò định dạng phần tử website việc tạo đoạn văn bản, tiêu đề, bảng,… CSS giúp thêm chút “phong cách” vào phần tử HTML đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc,…rất nhiều SVTH: Lương Quốc Thiện- 14T2 Trang Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà Một đoạn CSS bao gồm phần này: Vùng-chọn { thuộc-tính : giá-trị; thuộc-tính: giá-trị; } Nghĩa khai báo vùng chọn, sau thuộc tính giá trị nằm bên cặp dấu ngoặc nhọn {} Mỗi thuộc tính ln có giá trị riêng, giá trị dạng số, tên giá trị danh sách có sẵn CSS Phần giá trị thuộc tính phải cách dấu hai chấm, dòng khai báo thuộc tính ln có dấu chấm phẩy cuối Một vùng chọn sử dụng khơng giới hạn thuộc tính 2.3.3 Bootstrap Những điểm thuận lợi sử dụng bootstrap: Rất dễ để sử dụng: Đơn giản giản lược HTML, CSS Javascript cẩn có kiến thức sử dụng bootstrap tốt  Tính Responsive: Bootstrap xây dựng sẵn reponsive css thiết bị phones, tablets, desktops  Mobile: Trong Bootstrap mobile-first styles phần core framework Tương thích với trình duyệt: Bootstrap tương thích với tất trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) riêng IE khơng hỗ trợ nhiều 2.3.4 Sass SASS CSS Preprocessor cung cấp thêm quy tắc nested rule, variable, mixin, Với SASS bạn viết CSS theo thứ tự rõ ràng, quản lý biến định nghĩa sẵn, tự động nén tập tin CSS SASS ứng dụng viết Ruby nên bạn quen với việc dùng lệnh, cài đặt SASS sử dụng lệnh Ưu Điểm Sass: - Đầu tiên, ngắn dễ dàng đánh máy Không cần dấu ngoặc nhọn chấm phẩy Thậm chí tốt nữa, không cần @mixin @include, cần ký tự đủ: : + - Cú pháp Sass bắt buộc code theo chuẩn dựa thụt đầu dòng Vì sai thụt đầu dòng làm hỏng sass stylesheet, đảm bảo code phải rõ ràng định dạng tốt 2.3.5 Jquery jQuery thư viện kiểu JavaScript, tạo John Resig vào năm 2006 với phương châm tuyệt vời: Write less, more - Viết hơn, làm nhiều SVTH: Lương Quốc Thiện- 14T2 Trang Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà jQuery làm đơn giản hóa việc truyền tải HTML, xử lý kiện, tạo hiệu ứng động tương tác Ajax Với jQuery, khái niệm Rapid Web Development khơng q xa lạ Ưu điểm jquery: - Dễ sử dụng - Là thư viện lớn javascript - Cộng đồng mã nguồn mở mạnh mẽ (một số plugin jquery có sẵn) - Có nhiều tài liệu hướng dẫn chi tiết - Hỗ trợ ajax Nhược điểm cảu jquery: - Làm client trở nên chậm chạp - Chức khơng có 2.3.6 Ajax AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript XML không đồng bộ), công cụ cho phép tăng tốc độ ứng dụng web cách cắt nhỏ liệu hiển thị cần thiết, thay tải tải lại tồn trang web AJAX công nghệ đơn lẻ mà kết hợp nhóm cơng nghệ với Trong đó, HTML CSS đóng vai hiển thị liệu, mơ hình DOM trình bày thơng tin động, đối tượng XMLHttpRequest trao đổi liệu không đồng với máy chủ web, XML định dạng chủ yếu cho liệu truyền Đây cơng nghệ sẵn có Javacript lắp ráp chúng lại để thực “sứ mệnh” đáng khâm phục Từ Ajax ông Jesse James Garrett đưa dùng lần vào tháng nãm 2005 để kỹ thuật này, hỗ trợ cho Ajax có chương trình duyệt từ 10 năm trước Ajax kỹ thuật phát triển web có tính tương tác cao cách kết hợp ngôn ngữ: - HTML (hoặc XHTML) với CSS việc hiển thị thông tin - Mơ hình DOM (Document Object Model), thực thông qua JavaScript, nhằm hiển thị thông tin động tương tác với thông tin hiển thị - JavaScript, nhằm hiển thị thông tin động tương tác với thông tin hiển thị - XML thường định dạng cho liệu truyền, định dạng dùng, bao gồm HTML định dạng trước, văn (plain text), JSON EBML Ứng dụng Ajax: Hiện nhiều website ứng dụng ajax Đơn giản hay đăng ký thành viên diễn đàn, website Ngay sau nhập xong username hay email, hệ thống phản hồi cho biết tài khoản tồn hay chưa, mà không cần nhấn nút Submit truyền thống Đó vơ số ứng dụng AJAX Ưu điểm - Nó giúp việc thiết kế web đa dạng tăng tính tương tác website với người dùng - Nó sử dụng cơng nghệ có sẵn nên dễ học sử dụng Nhờ tính phổ biến nó, khuyến khích việc phát triển khn mẫu mà giúp lập trình viên tránh khỏi vết xe đổ trước Được hỗ trợ trình duyệt phổ biến SVTH: Lương Quốc Thiện- 14T2 Trang Báo cáo đề tài Công nghệ web - GVHD: ThS Mai Văn Hà Hạn chế Bạn khơng thể bookmark vào favourite trinh duyệt hay gởi link đến cho bạn bè, tất q trình thực ngầm khơng hiển thị address Không thể thị nội dung trang tìm kiếm trang tìm kiếm chưa hỗ trợ tìm khó tìm gần khơng thể tìm đc Khơng thể sử dụng nút back back Với số trình duyệt, nhu cầu bảo mật, tắt chức thực javascript nên ajax chạy, hay vài host, không hỗ trợ vào sâu cấu hình server nên hay bị lỗi “Access denied” SVTH: Lương Quốc Thiện- 14T2 Trang 10 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà PHÂN TÍCH THIẾT KẾ HỆ THỐNG 3.1 Thiết kế sở liệu Cơ sở liệu 3.2 Danh mục trang STT Tên trang Mô tả index.php Trang chủ hiển thị Tour giới thiệu, quảng cáo công ty _ About.php Trang giới thiệu công ty Tours.php Show tour có cho khách hang xem click đặt hang Contact.php /images/* SVTH: Lương Quốc Thiện- 14T2 Nơi người dùng viết form đặt tour Nơi chứa ảnh trang web Trang 11 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà _./js/* Nơi chứa file js cấu hình trang web bên khách hàng /styles/* Nới chứa file css trang web bên khách hàng /plugins/* Nơi chứa thư viện js trang web bên khách hang /layouts/* Nơi chứa layout dùng cho trang web khách hang 10 /library/* Nơi chứa file php chứa hàm hay dùng 11 gitignore File cấu hình github 12 gitattributes 13 README.md 14 /scss-admin/* 15 /admin/* File cấu hình github File cấu hình github Chứa file SCSS admin Chứa file php admin, thư mục js, css dùng cho admin Trang 12 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà 3.3 Quy ước Cố gắng đăt tên biến php, thuộc tính html trùng tên trường CSDL để hạn chế nhầm lẫn Code trực tiếp lên file php chèn mã html xen kẽ với php, đánh tab comment đầy đủ để code dễ nhìn Khơng viết tắt biến hình thức CÀI ĐẶT TRIỂN KHAI 4.1 Môi trường cài đặt triển khai  Triển khai Apache GoogleChrome  Hệ quản trị CSDL MySQL 4.2 Các bước triển khai  Tạo thư mục chứa thư mục htdocs Apache Ví dụ “Quanly_Tour_Dulich” Chép toàn mã nguồn bao gồm tệp php, css, js, font, vào thư mục vừa tạo Khởi động MySQL, tạo sở liệu “tour” nạp sở liệu từ file sql đính kèm Nếu đặt tên khác phải cấu hình lại thư mục library chon tệp DB.php Đồng thời cung cấp tài khoản quản trị CSDL cho tệp login.php Khởi động Apache MySQL, cổng 800, gõ lên địa trình duyệt “localhost:800/ Quanly_Tour_Dulich”và trang web tự động chạy  Trong thư mục đính kèm có tệp readme.txt SVTH: Lương Quốc Thiện - 14T2 Trang 13 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà 4.3 Một số hình ảnh sau triển khai Trang chủ SVTH: Lương Quốc Thiện - 14T2 Trang 14 Báo cáo đề tài Công nghệ web SVTH: Lương Quốc Thiện - 14T2 GVHD: ThS Mai Văn Hà Trang 15 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà Thông tin Công ty Thông tin Công ty SVTH: Lương Quốc Thiện - 14T2 Trang 16 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà Tour Đặt Tour SVTH: Lương Quốc Thiện - 14T2 Trang 17 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà Map Khuyến Tour SVTH: Lương Quốc Thiện - 14T2 Trang 18 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà Bài Viết Tour Login SVTH: Lương Quốc Thiện - 14T2 Trang 19 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà Tour chưa duyệt Tour duyệt SVTH: Lương Quốc Thiện - 14T2 Trang 20 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà Quản lý Tour Thêm Tour SVTH: Lương Quốc Thiện - 14T2 Trang 21 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà Xóa Tour SVTH: Lương Quốc Thiện - 14T2 Trang 22 ... Thiện – 14T2 Trang Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà GIỚI THIỆU TỔNG QUAN ĐỀ TÀI 1.1 Giới thiệu đề tài Đề tài số 17 Website quản lý tour du lịch Nhận xét: Đề tài phục vụ mục đích:... Mai Văn Hà Trang 15 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà Thông tin Công ty Thông tin Công ty SVTH: Lương Quốc Thiện - 14T2 Trang 16 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn... - 14T2 Trang 13 Báo cáo đề tài Công nghệ web GVHD: ThS Mai Văn Hà 4.3 Một số hình ảnh sau triển khai Trang chủ SVTH: Lương Quốc Thiện - 14T2 Trang 14 Báo cáo đề tài Công nghệ web SVTH: Lương