Tóm tắt đồ án Xây dựng website studio áo cưới với BOOTSTRAP. HTML5/CSS3

Nội dung text: Tóm tắt đồ án Xây dựng website studio áo cưới với BOOTSTRAP. HTML5/CSS3

1. TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN HỮU NGHỊ VIỆT - HÀN KHOA CÔNG NGHỆ THÔNG TIN  TÓM TẮT ĐỒ ÁN TỐT NGHIỆP NGÀNH: CÔNG NGHỆ THÔNG TIN Đề tài: XÂY DỰNG WEBSITE STUDIO ÁO CƢỚI VỚI BOOTSTRAP. HTML5/CSS3 SVTH : Nguyễn Thanh Tùng Lớp : CCCT15A Niên khóa : 2015 - 2018 CBHD : TS. Hồ Văn Phi Đà Nẵng, tháng 06 năm 2018
2. TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THÔNG TIN HỮU NGHỊ VIỆT - HÀN KHOA CÔNG NGHỆ THÔNG TIN  TÓM TẮT ĐỒ ÁN TỐT NGHIỆP NGÀNH: CÔNG NGHỆ THÔNG TIN Đề tài: XÂY DỰNG ỨNG DỤNG WEBSITE STUDIO ẢNH CƢỚI DỰA TRÊN HTML5/CSS3, BOOTSTRAP SVTH : Nguyễn Thanh Tùng Lớp : CCCT15A Niên khóa : 2015 - 2018 CBHD : TS. Hồ Văn Phi Đà Nẵng, tháng 06 năm 2018
3. 1 MỞ ĐẦU Thế giới hiện nay ngày càng phát triển, internet đã trở thành một thế giới riêng của con người. Chúng ta không thể sống thiếu internet. Bất kỳ một doanh nghiệp nào muốn kinh doanh hiệu quả thì đều cần phải học cách quảng bá qua internet. Bạn cũng không là ngoại lệ, nhất là khi bạn đang kinh doanh lĩnh vực studio – wedding. Như đã đề cập, phần lớn khách hàng hiện nay khi tìm kiếm một sản phẩm, dịch vụ nào đó, điều đầu tiên họ làm là “hỏi Google”. Vì thế, bạn phải thiết kế website studio - wedding cho riêng mình để có thể đến gần hơn với khách hàng. Bạn đừng mong chờ rằng khách hàng sẽ chủ động đến với mình khi mà bạn không có bất kỳ website hay kênh thông tin online nào.Để thiết kế một Studio, bên cạnh 3 yếu tố quan trọng về giao diện, hình ảnh, nội dung khi thiết kế website Studio chụp ảnh cưới bạn cũng cần phải quan tâm đến tốc độ tải trang web, tính năng Responsive cho phép website tương thích với mọi thiết bị di động và trình duyệt nhằm mang đến cho người dùng trải nghiệm tốt nhất như đang ở chính cửa hàng của bạn vậy. Bên cạnh đó, hãy tích hợp bản đồ trên website để khách hàng có thể nhanh chóng tìm đến Studio của bạn trên thực tế và tận dụng tối đa những tính năng có thể sử dụng từ mạng xã hội để gia tăng niềm tin của khách hàng. Vì vậy tôi đã lựa chọn đề tài nghiên cứu “XÂY DỰNG WEBSITE STUDIO ÁO CƯỚI VỚI BOOTSTRAP, HTML5/CSS3”.
4. 2 CHƢƠNG 1. CƠ SỞ LÝ THUYẾT 1.1. HTML 1.1.1. Định nghĩa về HTML HTML (Hyper Text Markup Language) là một loại ngôn ngữ dùng để mô tả hiển thị các trang web. 1.1.2. Thành phần của HTML Thẻ HTML được bao quanh bởi hai dấu nhỏ hơn lớn hơn. Những thẻ HTML thường có một cặp giống như và thẻ thứ nhất là thẻ mở đầu và thẻ thứ hai là thẻ kết thúc. Dòng chữ ở giữa hai thẻ bắt đầu và kết thúc là nội dung. Những thẻ HTML không phân biệt in hoa và viết thường 1.1.3. Cơ bản về các thẻ HTML Những thẻ quan trọng nhất trong HTML là những thẻ xác định Heading, đoạn văn và xuống dòng. Headings Đoạn văn – paragraphs Line Breaks - xuống dòng Lời chú thích trong HTML Thẻ Anchor và thuộc tính Href Thẻ frameset Bảng và thuộc tính đƣờng biên HTML form và trƣờng nhập liệu. Form Nhập liệu Nút radio Thuộc tính hoạt động cùa form và nút Submit. Hình ảnh trong HTML
5. 3 Thẻ Image và thuộc tính src Thuộc tính Alt HTML Background 1.1.4. HTML5 HTML5 sẽ cho phép bạn xem video mà không cần sử dụng một plugin như Flash hoặc Silverlight. Những lợi ích lớn với tính năng video của HTML5  Thứ nhất, nó là miễn phí và không cần cài plug-in Adobe Flash Player.  Thứ hai, Flash có thể làm chậm 1 phần máy tính của bạn.  Sau cùng, nó chỉ là một trong nhiều phần mềm đang chạy và chiếm tài nguyên hệ thống. 1.2. CSS 1.2.1. ĐỊNH NGHĨA CSS (Cascading Style Sheet) là kiểu thiết kế sử dụng nhiều lớp định dạng chồng lên nhau. CSS được tổ chức World Wide Web (W3C) giới thiệu vào năm 1996. Cách đơn giản nhất để hiểu CSS là hãy coi nó như một phần mở rộng của HTML để giúp đơn giản hóa và cải tiến việc thiết kế cho các trang web.  Ƣu điểm của CSS  Các đặc tính cơ bản của CSS  Thứ tự xếp lớp  Tính kế thừa  Tính kết hợp 1.2.2. CSS3 CSS3 cho phép bạn áp dụng nhiều hình nền lên một phần tử (element). Selectors
6. 4 Resize Font 1.3. BOOTSTRAP Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web. Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ, hình thức, các nút, chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn. Một số ƣu điểm chính của Boostrap:  Tiết kiệm thời gian  Tùy biến cao  Responsive Web Design 1.4. MYSQL MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng.
7. 5 CHƢƠNG 2. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2.1. YÊU CẦU CHỨC NĂNG CỦA HỆ THỐNG 2.2. YÊU CẦU PHI CHỨC NĂNG 2.3. XÁC ĐỊNH CÁC TÁC NHÂN 2.4. TRƢỜNG HỢP SỬ DỤNG 2.4.1. Liệt kê các trƣờng hợp sử dụng 2.4.2. Đặc tả các trƣờng hợp sử dụng - Xem thông tin của website - Xem thông tin các thành viên trong Studio - Xem tin tức, sự kiện - Xem các gói dịch vụ - Xem bộ sƣu tập ảnh - Liên hệ - Tƣơng tác bài đăng - Thực hiện việc đặt gói dịch vụ - Tài khoản (dành cho Quản trị viên) - Thống kê - Quản lí tài khoản - Quản lí các gói dịch vụ - Quản lí tin tức, sự kiện - Quản lí bộ sƣu tập
8. 6 2.4.3. Biểu đồ trƣờng hợp sử dụng Hình 2.1: Biểu đồ trường hợp sử dụng 2.5. MÔ HÌNH KHÁI NIỆM 2.5.1. Xác định các lớp đối tƣợng 2.5.2. Các lớp biên Hình 2.2: Các lớp biên 2.5.3. Các lớp điều khiển Hình 2.3: Các lớp điều khiển
9. 7 2.5.4. Biểu đồ lớp mức phân tích Hinh 2.4: Biểu đồ lớp mức phân tích 2.5.5. Mô hình hóa tƣơng tác đối tƣợng 2.5.5.1. Biểu đồ trình tự đăng nhập Hình 2.5: Biểu đồ trình tự đăng nhập
10. 8 2.5.5.2. Biểu đồ trình tự gửi message Hình 2.6: Biểu đồ trình tự gửi message 2.5.5.3. Biểu đồ trình tự thêm Tin tức, sự kiện Hình 2.7: Biểu đồ trình tự thêm Tin tức, sự kiện
11. 9 2.5.5.4. Biểu đồ trình tự thêm Các gói dịch vụ Hình 2.8: Biểu đồ trình tự thêm Các gói dịch vụ 2.5.5.5. Biểu đồ trình tự thêm Ảnh Hình 2.9: Biểu đồ trình tự thêm Ảnh
12. 10 2.5.5.6. Biểu đồ trình tự thêm Quản trị viên Hình 2.10: Biểu đồ trình tự thêm Quản trị viên 2.5.6. Biểu đồ cộng tác 2.5.6.1. Biểu đồ cộng tác đăng nhập Hình 2.11: Biểu đồ cộng tác đăng nhập 2.5.6.2. Biểu đồ cộng tác gửi message Hình 2.12: Biểu đồ cộng tác gửi message
13. 11 2.5.6.3. Biểu đồ cộng tác thêm Tin tức, sự kiện Hình 2.13: Biểu đồ cộng tác thêm Tin tức, sự kiện 2.5.6.4. Biểu đồ cộng tác thêm Các gói dịch vụ Hình 2.14: Biểu đồ cộng tác thêm Các gói dịch vụ 2.5.6.5. Biểu đồ cộng tác thêm Ảnh Hình 2.15: Biểu đồ cộng tác thêm Ảnh
14. 12 2.5.6.6. Biểu đồ cộng tác thêm Quản trị viên Hình 2.16: Biểu đồ cộng tác thêm Quản trị viên 2.5.7. Biểu đồ hoạt động 2.5.7.1. Biểu đồ hoạt động đăng nhập Nhap username va password Co K iem tra Sai Tiep tuc ? Dung Dang nhap vao he thong Khong Hình 2.17: Biểu đồ hoạt động đăng nhập 2.5.7.2. Biểu đồ hoạt động quản lí admin Hình 2.18: Biểu đồ hoạt động quản lí admin
15. 13 2.5.8. Thiết kế cơ sở dữ liệu Bảng Table_admin Bảng Gallery (Bộ sưu tập) Bảng Table_ads Bảng Order Bảng News Bảng Excos (Đội ngũ) Bảng Message_detail Bảng tbl_about (Thông tin) Bảng Events Bảng Setting (Trang cài đặt)
16. 14 CHƢƠNG 3. DEMO WEBSITE STUDIO ÁO CƢỚI 3.1. CÁC CHỨC NĂNG CỦA HỆ THỐNG 3.2. GIAO DIỆN CỦA HỆ THỐNG - Giao diện trang chủ Hình 3.1: Giao diện trang chủ - Giao diện thông tin đội ngũ nhân viên Hình 3.2: Giao diện thông tin đội ngũ nhân viên - Giao diện 1 mục Tin tức, sự kiện
17. 15 Hình 3.3: Giao diện 1 mục tin tức, sự kiện - Giao diện trang Các gói dịch vụ Hình 3.4: Giao diện trang các gói dịch vụ - Giao diện 1 gói dịch vụ Hình 3.5: Giao diện 1 gói dịch vụ
18. 16 - Giao diện trang Bộ sưu tập Hình 3.6: Giao diện trang Bộ sưu tập - Giao diện trang Liên hệ Hình 3.7: Giao diện trang Liên hệ - Giao diện gói Chương trình khuyến mãi Hình 3.8: Giao diện gói Chương trình khuyến mãi
19. 17 - Giao diện form Đặt hàng Hình 3.9: Giao diện forrm đặt hàng - Giao diện Form Đăng nhập (dành cho Quản trị viên) Hình 3.10: Giao diện form đăng nhập - Giao diện trang Thống kê Hình 3.11: Giao diện trang thống kê
20. 18 - Giao diện Quản lí bộ sưu tập Hình 3.12: Giao diện Quản lí bộ sưu tập - Giao diện Quản lí Các gói dịch vụ Hình 3.13: Giao diện Các gói dịch vụ - Giao diện Quản lí Tin tức, sự kiện Hình 3.14: Giao diện Quản lí Tin tức, sự kiện
21. 19 KẾT LUẬN Trong quá trình thực hiện đề tài này, dưới phạm vi nghiên cứu về một chuyên đề em đã cố gắng để tìm hiểu nhưng vì lượng kiến thức và thời gian có hạn nên có thể chưa giải quyết được các vấn đề đặt ra. Hơn nữa, đây là một đề tài khá mới mẻ, và đây là lượng kiến thức mới tìm hiểu trong thời gian ngắn nên chưa hoàn thành được sản phẩm tốt nên rất mong nhận được sự thông cảm của Thầy (Cô) giáo. Em xin chân thành cảm ơn! Kết quả đạt được: - Củng cố kiến thức và sử dụng HTML/CSS. - Có kiến thức mới về HTML5/CSS3, BOOTSTRAP. - Nắm được một số kĩ thuật về lập trình PHP. - Có thêm kinh nghiệm khi phân tích, thiết kế cơ sỡ dữ liệu Bên cạnh đó em nhận thấy website vẫn còn một số hạn chế như vẫn còn ít chức năng cho khách truy cập trang web, giao diện còn khá đơn giãn, Hứa hẹn trong thời gian sắp tới hệ thống sẽ được phát triển và hoàn thiện hơn. TÀI LIỆU THAM KHẢO [1]. TS. Nguyễn Quang Vũ, Bài giảng Lập trình Web, Trường Cao đẳng Công nghệ thông tin Hữu nghị Việt - Hàn. [2]. Hoàng Hiếu, 01/11/2016, Tạo website bằng php: thiết kế giao diện [3]. PHP Tutorial [4].