- Trang Chủ
- Công nghệ thông tin
- Tóm tắt Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng ứng dụng website studio ảnh cưới dựa trên HTML5/CSS3, BOOTSTRAP
Xem mẫu
- 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
- 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”.
- 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 < và > 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
- 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
- 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.
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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 S ai 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ế 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)
- 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
- 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ụ
- 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
- 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ê
nguon tai.lieu . vn