Để 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. Mời các bạn cùng tham khảo!
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 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 MỞ ĐẦU Thế giới ngày phát triển, internet trở thành giới riêng người Chúng ta sống thiếu internet Bất kỳ doanh nghiệp muốn kinh doanh hiệu cần phải học cách quảng bá qua internet Bạn không ngoại lệ, bạn kinh doanh lĩnh vực studio – wedding Như đề cập, phần lớn khách hàng tìm kiếm sản phẩm, dịch vụ đó, điều họ làm “hỏi Google” Vì thế, bạn phải thiết kế website studio - wedding cho riêng để đến gần với khách hàng Bạn đừng mong chờ khách hàng chủ động đến với mà bạn khơng có website hay kênh thơng tin online nào.Để thiết kế Studio, bên cạnh yếu tố quan trọng giao diện, hình ảnh, nội dung thiết kế website Studio chụp ảnh cưới bạn cần phải quan tâm đến tốc độ tải trang web, tính Responsive cho phép website tương thích với thiết bị di động trình duyệt nhằm mang đến cho người dùng trải nghiệm tốt cửa hàng bạn Bên cạnh đó, tích hợp đồ website để khách hàng nhanh chóng tìm đến Studio bạn thực tế tận dụng tối đa tính sử dụng từ mạng xã hội để gia tăng niềm tin khách hàng Vì 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” 2 CHƢƠNG CƠ SỞ LÝ THUYẾT 1.1 HTML 1.1.1 Định nghĩa HTML HTML (Hyper Text Markup Language) loại ngôn ngữ dùng để mô tả hiển thị trang web 1.1.2 Thành phần HTML Thẻ HTML bao quanh hai dấu nhỏ < > lớn Những thẻ HTML thường có cặp giống thẻ thứ thẻ mở đầu thẻ thứ hai thẻ kết thúc Dòng chữ hai thẻ bắt đầu kết thúc nội dung Những thẻ HTML không phân biệt in hoa viết thường 1.1.3 Cơ thẻ HTML Những thẻ quan trọng HTML thẻ xác định Heading, đoạn văn xuống dòng Headings Đoạn văn – paragraphs Line Breaks - xuống dòng Lời thích HTML Thẻ Anchor thuộc tính Href Thẻ frameset Bảng thuộc tính đƣờng biên HTML form trƣờng nhập liệu Form Nhập liệu Nút radio Thuộc tính hoạt động cùa form nút Submit Hình ảnh HTML Thẻ Image thuộc tính src Thuộc tính Alt HTML Background 1.1.4 HTML5 HTML5 cho phép bạn xem video mà không cần sử dụng plugin Flash Silverlight Những lợi ích lớn với tính video HTML5 Thứ nhất, miễn phí khơng cần cài plug-in Adobe Flash Player Thứ hai, Flash làm chậm phần máy tính bạn Sau cùng, nhiều phần mềm chạy chiếm tài nguyên hệ thống 1.2 CSS 1.2.1 ĐỊNH NGHĨA CSS (Cascading Style Sheet) kiểu thiết kế sử dụng nhiều lớp định dạng chồng lên CSS tổ chức World Wide Web (W3C) giới thiệu vào năm 1996 Cách đơn giản để hiểu CSS coi phần mở rộng HTML để giúp đơn giản hóa cải tiến việc thiết kế cho trang web Ƣu điểm CSS Các đặc tính 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 lên phần tử (element) Selectors Resize Font 1.3 BOOTSTRAP Bootstrap Front-end framework, sưu tập miễn phí cơng cụ để tạo trang web ứng dụng web Nó chứa HTML CSS dựa mẫu thiết kế cho kiểu chữ, hình thức, nút, chuyển hướng thành phần giao diện khác, mở rộng JavaScript tùy chọn Một số ƣu điểm Boostrap: Tiết kiệm thời gian Tùy biến cao Responsive Web Design 1.4 MYSQL MySQL hệ quản trị sở liệu tự nguồn mở phổ biến giới nhà phát triển ưa chuộng trình phát triển ứng dụng 5 CHƢƠNG 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ê trƣờng hợp sử dụng 2.4.2 Đặc tả trƣờng hợp sử dụng - Xem thông tin website - Xem thông tin thành viên Studio - Xem tin tức, kiện - Xem gói dịch vụ - Xem sƣu tập ảnh - Liên hệ - Tƣơng tác đăng - Thực 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í gói dịch vụ - Quản lí tin tức, kiện - Quản lí sƣu tập 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 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 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 2.5.5.1 Mơ hình hóa tƣơng tác đối tƣợng Biểu đồ trình tự đăng nhập Hình 2.5: Biểu đồ trình tự đăng nhập 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, kiện Hình 2.7: Biểu đồ trình tự thêm Tin tức, kiện 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 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 2.5.6.1 Biểu đồ cộng tác 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 11 2.5.6.3 Biểu đồ cộng tác thêm Tin tức, kiện Hình 2.13: Biểu đồ cộng tác thêm Tin tức, 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 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 2.5.7.1 Biểu đồ hoạt động Biểu đồ hoạt động đăng nhập Nhap username va password K iem tra Co S T iep 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 13 2.5.8 Thiết kế sở liệu Bảng Table_admin Bảng Gallery (Bộ sưu tập) Bảng Table_ads Bảng News Bảng Message_detail Bảng Events Bảng Bảng Bảng Order Excos (Đội ngũ) tbl_about (Thông tin) Bảng Setting (Trang cài đặt) 14 CHƢƠNG 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 mục Tin tức, kiện 15 Hình 3.3: Giao diện mục tin tức, kiện - Giao diện trang Các gói dịch vụ Hình 3.4: Giao diện trang gói dịch vụ - Giao diện gói dịch vụ Hình 3.5: Giao diện gói dịch vụ 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 Hình 3.8: Giao diện gói Chương trình khuyến 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ê 18 - Giao diện Quản lí sưu tập Hình 3.12: Giao diện Quản lí 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, kiện Hình 3.14: Giao diện Quản lí Tin tức, kiện 19 KẾT LUẬN Trong trình thực đề tài này, phạm vi nghiên cứu chuyên đề em cố gắng để tìm hiểu lượng kiến thức thời gian có hạn nên chưa giải vấn đề đặt Hơn nữa, đề tài mẻ, lượng kiến thức tìm hiểu thời gian ngắn nên chưa hoàn thành sản phẩm tốt nên mong nhận thông cảm Thầy (Cô) giáo Em xin chân thành cảm ơn! Kết đạt được: - Củng cố kiến thức sử dụng HTML/CSS - Có kiến thức HTML5/CSS3, BOOTSTRAP - Nắm số kĩ thuật lập trình PHP - Có thêm kinh nghiệm phân tích, thiết kế sỡ liệu Bên cạnh em nhận thấy website cịn số hạn chế cịn chức cho khách truy cập trang web, giao diện đơn giãn, … Hứa hẹn thời gian tới hệ thống phát triển hoàn thiện [1] TÀI LIỆU THAM KHẢO 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] Hồng Hiếu, 01/11/2016, Tạo website php: thiết kế giao diện [3] [4] PHP Tutorial http://tutorial.phpvn.org https://getbootstrap.com/ ... ĐẲ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,. .. Biểu đồ trình tự thêm Ảnh Hình 2.9: Biểu đồ trình tự thêm Ảnh 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 2.5.6.1 Biểu đồ cộng tác Biểu đồ. .. 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 12 2.5.6.6 Biểu đồ cộng tác