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

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ê

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

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 http://tutorial.phpvn.org [4]. https://getbootstrap.com/