Xây dựng framework tạo website đám cưới cá nhân khóa luận hệ thống thông tin (CN08A)

Các kết quả đạt được của đề tài Xây dựng được một số giao diện mẫu để người dùng có thể lựa chọn.. Nó có thể cung cấp một lượng cơ sở dữ liệu khá đồ sộ gồm cả MySQL, mSQL, dbm, Hyperwav

Trường ĐH Giao Thông Vận Tải Tp.HCM KHOA CÔNG NGHỆ THÔNG TIN

LUẬN VĂN TỐT NGHIỆP

LỜI CẢM ƠN

Luận văn tốt nghiệp là quá trình sinh viên thể hiện năng lực, kỹ năng làm việc, nghiên cứu thực tế của mình trước khi rời khỏi giảng đường đại học Bằng sự nỗ lực của bản thân cùng với sự giúp đỡ của thầy cô, bạn bè, em đã thực hiện đề tài “Xây dưng Framework tạo website đám cưới cá nhân” hoàn thành

Để có được kết quả này, em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Lương Anh Tuấn Cảm ơn Thầy đã dành thời gian và nhiệt huyết tận tình hướng dẫn

em trong suốt thời gian thực hiện đề tài luận văn này

Em cũng xin gửi lời cảm ơn đến các thầy cô trong khoa Công Nghệ Thông Tin, trường Đại Học Giao Thông Vận Tải thành phố Hồ Chí Minh đã truyền dạy cho sinh viên khoa Công Nghệ Thông tin và em những kiến thức, kinh nghiệm quý báu, niềm say mê với những nền tảng công nghệ hiện đại trong suốt những năm trên giảng đường đại học

Xin chúc thầy cô, các bạn lời chúc sức khỏe, luôn đạt được thành công trong sự nghiệp, trong gia đình và ngoài xã hội

Mặc dù em đã cố gắng hoàn thành luận văn trong phạm vi và khả năng cho phép nhưng chắc chắn sẽ không tránh khỏi những thiếu sót Em rất mong nhận được sự thông cảm, góp ý và tận tình chỉ bảo của quý Thầy Cô và các bạn

Một lần nữa em xin chân thành cảm ơn!

Sinh viên thực hiện

Trần Minh Nghĩa

LỜI CAM ĐOAN

Em xin cam đoan:

- Những nội dung trong luận văn này là do em thực hiện dưới sự hướng dẫn trực tiếp của thầy Nguyễn Lương Anh Tuấn

- Mọi tham khảo dùng trong báo cáo này đều được trích dẫn rõ ràng tên tác giả, tên công trình, thời gian, địa điểm công bố

- Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, em xin hoàn toàn chịu trách nhiệm

MỤC LỤC

LỜI MỞ ĐẦU 1

1 Tính cấp thiết của đề tài 1

2 Tình hình nghiêm cứu 1

3 Mục đích nghiêm cứu 2

4 Nhiệm vụ của đề tài 2

5 Phương pháp thực hiện đề tài 2

6 Các kết quả đạt được của đề tài 3

7 Kết cấu của luận văn tốt nghiệp 3

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 5

1.1: Tổng Quan Về Database Server 5

1.1.1 Database Server là gì? 5

1.1.2 Hệ quản trị cơ sở dữ liệu MySQL 5

1.1.3 Sơ lược MySQL 6

1.2: Giới thiệu PHP 7

1.3 Lý Do Lựa Chọn Ngôn Ngữ PHP và MySQL 8

1.4 Công nghệ template 9

1.4.1 PHP Template là gì 9

1.4.2 Tại sao nên dùng PHP Template 10

1.4.3 Giới thiệu Xtemplate 11

1.5 Twitter Bootstrap Framework 20

1.5.1 Giới thiệu Twitter Bootstrap Framework 20

1.5.2 Các thành phần của Twitter Bootstrap Framework 21

1.5.3 Cách sử dụng Twitter Bootstrap Framework cơ bản 22

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 24

2.1 Giới thiệu 24

2.2 Thiết lập yêu cầu chức năng 25

2.2.1 Chức năng hiện thị cho người truy cập web xem 25

2.2.2 Chức năng quản trị cho cô dâu chú rể 26

2.3 Sơ đồ chức năng 28

2.3.1 Sơ đồ chức năng quyền khách 28

2.3.2 Sơ đồ chức năng quyền user 29

2.3.3 Quyền quản trị cấp cao 36

2.4 Xây dựng Activity Diagram 37

2.4.1 Đăng nhập 37

2.4.2 Quản lý các chức năng khác 38

2.5 Phân tích thiết kế cơ sở dữ liệu 38

2.5.1 Giới thiệu thực thể 38

2.5.2 Thiết kế cơ sở dữ liệu 41

2.6 Một số thiết kế mô hình chức năng quan trọng 48

CHƯƠNG 3: XÂY DỰNG FRAMEWORK 50

3.1 Cấu trúc thư mục của framework 50

3.2 Cấu hình và cài đặt hệ thống website trên sever 51

3.3 Xây dựng giao diện cho framework 52

CHƯƠNG 4: TỔNG KẾT 66

4.1: Kết luận 66

4.2: Hướng phát triển 66

TÀI LIỆU THAM KHẢO 68

liệu cho IBM cung cấp

LỜI MỞ ĐẦU

1 Tính cấp thiết của đề tài

Đám cưới là một sự kiện trọng đại của mỗi người Chính vì vậy ai cũng muốn chia sẻ niềm vui này với bạn bè và người thân của họ Hiện nay internet phát triển với tốc độ nhanh chóng Số lượng người sử dụng internet tại Việt Nam rất nhiều đặc biệt là các bạn trẻ Không phải ai cũng có đủ tình độ chuyên môn để tạo ra được một website để chia sẻ những khoảng khắc những sự kiện trọng đại của đám cưới Nhu cầu có một nền tảng dễ dàng sử dụng dễ dàng tùy biến mang đậm tính chất cá nhân để một người không rành về website cũng có thể tạo được một website đám cưới cho chính họ Mang đậm tính chất cá nhân của họ là rất lớn Trên thế giới thì đã có khá nhiều nhà cung cấp dịch vụ tạo website đám cưới cá nhân và được khá nhiều sử dụng Tuy nhiên hiện nay tại Việt Nam vẫn còn quá ít đơn vị cung cấp dịch vụ này Và độ chuyên nghiệp cũng như tính năng của các dịch vụ còn quá sơ sài Đó chính là yêu cầu cấp thiết

để em thực hiện đề tài này

2 Tình hình nghiêm cứu

Theo khảo sát của em thì hiện tại dịch vụ cung cấp nền tảng để tạo website đám cưới cá nhân tại Việt Nam mới chỉ có trang web traucau.vn thực hiện Tuy nhiên độ tùy biến giao diện và các tính năng của trang web này cung cấp còn quá sơ sài Người dùng không thể tự tùy biến được nhiều trong giao diện thiết kế web Họ chỉ chọn được 1 mẫu layout cố định và cập nhật nội dung Nội dung cập nhật lên web còn khá cơ bản Không có tính cá nhân và quyền chia sẻ riêng tư với 1 nhóm người của chủ website

Hiện nay số lượng người dùng điện thoại thông minh để truy cập web là khá nhiều Tuy nhiên dịch vụ cung cấp của traucau.vn lại chưa đáp ứng được

hiện thị tốt nhất trên điện thoại thông minh và máy tính bảng Đó cũng là một hạn chế rất lớn

3 Mục đích nghiêm cứu

Đề tài mà em nghiêm cứu thực hiện sẽ giải quyết được nhu cầu của khá nhiều bạn trẻ muốn có được một nền tảng tạo website đám cưới cá nhân miễn phí Có độ tùy biến và tính riêng tư cao Đồng thời đề tài cũng hướng tới việc tạo một cộng đồng chia sẻ các kinh nghiệm hay về việc chuẩn bị đám cưới Tạo

ra một nơi sinh hoạt lành mạnh cho các bạn trẻ

4 Nhiệm vụ của đề tài

Xây dựng Framework đáp ứng được các yêu cầu sau:

 Kho giao diện đẹp với các chủ đều và bố cục đa dạng

 Giao diện dễ tùy biến để mang màu sắc cá nhân của mỗi website

 Giao diện của website tạo ra phải tương thích với các thiết bị mobile

 Tính năng viết bài tin tức cập nhật lên website

 Hiện thị album ảnh cưới

 Đáp ứng được yêu cầu chia sẻ riêng tư của từng chuyên mục, từng bài viết hoặc từng album ảnh của cô dâu chú rể

 Framework phải dễ dàng sử dụng cho tất cả mọi người

 Có sự tương tác giữa những người sử dụng trong cùng hệ thống

 Mỗi website cá nhân đều được thiết kế để tối ưu cho SEO Nhằm nâng lượng visit cho hệ thống

 Tính năng liên kết với các mạng xã hội

5 Phương pháp thực hiện đề tài

Đề tài được em thực hiện bằng ngôn ngữ lập trình PHP và cơ sở dữ liệu MySQL Phần mềm dùng để thiết kế layout là Adobe PhotoShop CS5

Phần mềm lập trình code là Adobe Dreamweaver CS5 và Notepad ++

Ngoài ra còn có thêm một số phần mềm hỗ trợ khác nữa trong quá trình thực hiện đề tài

6 Các kết quả đạt được của đề tài

Xây dựng được một số giao diện mẫu để người dùng có thể lựa chọn

Các giao diện đều được thiết kế tương thích với các thiết bị di động

Tính năng của Framework tương đối rõ ràng và dễ sử dụng

Người dùng có thể tự tùy chỉnh được một số phần trên giao diện mẫu để website mang nhiều màu sắc cá nhân của họ hơn

Tính năng cập nhật album ảnh khá linh hoạt và dễ sử dụng

Các chuyên muc, bài viết và album ảnh người dùng đều có thể đặt mật khẩu để chia sẻ với 1 số người đảm bảo được tính riêng tư của website đám cưới cá nhân

Các website tạo ra đều được tùy biến để tối ưu cho SEO

7 Kết cấu của luận văn tốt nghiệp

Luận văn tốt nghiệp gồm có 4 chương:

Chương 1: Cơ sở lý thuyết

Phần này sẽ đưa ra những lý thuyết quan trọng sẽ được sử dụng trong xây dựng hệ thống

Chương 2: Phân tích thiết kế hệ thống

Đây là chương quan trọng nhất Tại đây, các vấn đề xảy ra trên thực tế sẽ được đưa vào phân tích, đưa ra giải pháp và thể hiện cụ thể trên các sơ đồ hệ thống và các biểu mẫu Kết quả của chương này ta sẽ có được toàn bộ chức năng cần thiết của hệ thống

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1.1: Tổng Quan Về Database Server

1.1.1 Database Server là gì?

Database server (máy phục vụ Cơ sở dữ liệu): Máy tính mà trên đó có cài đặt phần mềm Hệ quản trị Cơ sở dữ liệu Chúng ta có một số hệ quản trị cơ sở dữ liệu chẳng hạn như: SQL Server, MySQL, Oracle

1.1.2 Hệ quản trị cơ sở dữ liệu MySQL

MySQL là một database server, là hệ thống quản lý cơ sở dữ liệu quan hệ Trong việc lưu trữ, tìm kiếm, sắp xếp và truy vấn dữ liệu, nó tỏ ra rất nhanh và mạnh

mẽ, vì MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet MySQL server điều khiển truy cập dữ liệu đa người dùng cùng một thời điểm, bảo đảm cho người sử dụng được cấp quyền truy cập dữ liệu của hệ thống Do vậy, MySQL là đa ngừơi dùng, đa luồng Nó sử dụng các câu lệnh truy vấn SQL (ngôn ngữ truy vấn có cấu trúc), là một chuẩn ngôn ngữ truy vấn cơ sở dữ liệu hiện nay trên Web MySQL được chính thức sử dụng rộng rãi năm 1996 nhưng nó đã hình thành từ năm 1979 MySQL có mã nguồn mở và sử dụng miễn phí, nhưng với những mục đích thương mại khác thì nó cũng có các bản quyền thương mại nếu được yêu cầu cung cấp bản quyền Một khó khăn cho người lập trình không chuyên là khi sử dụng MySQL, việc tạo cơ sở dữ liệu hoàn toàn bằng lệnh, do đó đòi hỏi người sử dụng phải có tính cẩn thận và sắp xếp quy trình làm việc hợp lý MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trang chủ

MySQL có thể quản lý tới hàng Terabyte dữ liệu, hàng triệu bản ghi, chạy trên nhiều môi trường khác nhau, có giao diện tương đối dễ sử dụng, có thể truy vấn dữ liệu thông qua câu lệnh SQL

MySQL thường được sử dụng chung với PHP trong những trang Web cần sử dụng đến cơ sở dữ liệu

1.1.3 Sơ lược MySQL

Các cơ sở dữ liệu trong MySQL được tạo hoàn toàn bằng lệnh

Các lệnh trong sql đựơc kết thức bởi dấu chấm phẩy (;) (Trừ một số lệnh như

quit là trường hợp đặc biệt)

Khi thực hiện lệnh, mysql chuyển nó đến server và yêu cầu thực hiện lệnh MySQL đưa ra kết qua dưới dạng 1 bảng (table) gồm các cột (column) và hàng (row)

MySQL cũng đưa ra bao nhiêu hàng được trả về (row in set) và trong vòng bao nhiêu giây (sec)

Ngoài ra MySQL cũng thể hiện được những phép tính đơn giản

Các lệnh trong MySQl có thể được viết trên một hàng, hoặc nhiều hàng

SQL là ngôn ngữ thao tác dữ liệu (DML - Data Manipulation Language)

SQL là cú pháp để thực thi các câu truy vấn SQL cũng bao gồm cú pháp để cập nhật - sửa đổi, chèn thêm và xoá các mẩu tin

Sau đây là danh sách các lệnh và truy vấn dạng DML của SQL:

 SELECT - lấy dữ liệu từ một bảng CSDL

 UPDATE - cập nhật/sửa đổi dữ liệu trong bảng

 DELETE - xoá dữ liệu trong bảng

 INSERT INTO - thêm dữ liệu mới vào bảng

SQL là ngôn ngữ định nghĩa dữ liệu (DDL - Data Definition Language)

Phần DDL của SQL cho phép tạo ra hoặc xoá các bảng Chúng ta cũng có thể định nghĩa các khoá (key), chỉ mục (index), chỉ định các liên kết giữa các bảng và thiết lập các quan hệ ràng buộc giữa các bảng trong CSDL

Các lệnh DDL quan trọng nhất của SQL là:

 CREATE TABLE - tạo ra một bảng mới

 ALTER TABLE - thay đổi cấu trúc của bảng

 DROP TABLE - xoá một bảng

 CREATE INDEX - tạo chỉ mục (khoá để tìm kiếm - search key)

 DROP INDEX - xoá chỉ mục đã được tạo

1.2: Giới thiệu PHP

Cùng với Apache, PHP và MySQL đã trở thành chuẩn trên các máy chủ Web Rất nhiều phần mềm Web mạnh sử dụng PHP và MySQL (PHP Nuke, Post Nuke, vBulletin…)

PHP (Personal Home Page hay PHP Hypertext Preprocessor) được giới thiệu

năm 1994 bởi R.Lerdoft PHP là một ngôn ngữ lập trình kiểu script, chạy trên Server

và trả về mã HTML cho trình duyệt Xu hướng sử dụng PHP trong việc thiết kế Web đang ngày càng phát triển trong giai đọan hiện nay và trong tương lai Tới năm 1998, việc công bố phiên bản 3 thì PHP mới chính thức phát triển theo hướng tách riêng của mình Lúc này nó đã là một ngôn ngữ lập trình có cấu trúc và tính năng đa dạng, chính

vì thế đã khuyến khích các nhà thiết kế Web sử dụng PHP Nó có thể cung cấp một lượng cơ sở dữ liệu khá đồ sộ gồm cả MySQL, mSQL, dbm, Hyperwave, Informix, Ocracle, nó cũng có thể làm việc với các hình ảnh, các file dữ liệu, FTP, XML, và host của các kỹ thuật ứng dụng khác

Mã PHP được đặt trong một kiểu tag đặc biệt cho phép ta có thể vào họăc ra khỏi chế độ PHP, cú pháp của PHP cơ bản cũng giống như một số ngôn ngữ lập trình khác, đặc biệt là C và Perl

Tuy nhiên phiên bản đầu tiên vẫn được ưa chuộng và dùng phổ biến hơn

1.3 Lý Do Lựa Chọn Ngôn Ngữ PHP và MySQL

Thứ nhất: Những chương trình tạo bởi PHP và MySQL có tốc độ truy xuất và

xử lý dữ liệu nhanh và mạnh Vì nó được thiết kế đặc biệt cho các ứng dụng Web, nên

nó xây dựng được rất nhiều tính năng để đáp ứng những nhu cầu chung nhất PHP là ngôn ngữ có cú pháp gần giống Perl nhưng tốc độ dịch của nó được các chuyên gia đánh giá là nhanh hơn ASP 5 lần, hỗ trợ kết nối các hệ cơ sở dữ liệu lớn như MySQL, ngoài ra nó còn được Apache hỗ trợ như là một modul cơ bản

Thứ hai Do có mã nguồn mở nên chúng ta có thể tái sử dụng, cải tiến, phát triển

và khắc phục những lỗi của chương trình

Thứ ba: Chúng rất ổn định và tương hợp, vận hành ổn định trên các hệ điều

hành gồm cả Windows và Unix…, và kết nối tốt với các máy chủ như IIS và Apache

Thứ tư: Chúng rất dễ tiếp cận để tìm hiểu và xây dựng các ứng dụng do có cú

pháp và cấu trúc gần giống với những ngôn ngữ truyền thống, cũng như cấu trúc module của các ứng dụng

Thứ năm: PHP hỗ trợ cơ chế kết nối cơ sở dữ liệu ADO, các lệnh của PHP gần

gũi với một số ngôn ngữ lập trình khác như C và Perl

Thứ sáu: PHP và MySQL đang được sự ủng hộ và phát triển mạnh mẽ của

những nhà lập trình Web

Và cuối cùng là sử dụng PHP và MySQL đều miễn phí

1.4 Công nghệ template

1.4.1 PHP Template là gì

Với tốc độ tăng trưởng các ứng dụng website phức tạp, một vấn đề được đưa ra

là làm thế nào để tách biệt ngôn ngữ lập trình web (PHP) ra khỏi ngôn ngữ thiết kế giao diện (HTML), tức là tách biệt lập trình và thiết kế PHP Template Engine đã được

ra đời để giải quyết vấn đề này

Chức năng cơ bản của Tempate Engine được biết đến như là một kỹ thuật xử lý giao diện cuả website bằng cách phân chia công việc giữa thiết kế viên và lập trình viên nhưng vẫn có sự liên kết chặt chẽ

Các designer xây dựng giao diện của website với các hình ảnh, kiểu chữ, bảng… Họ xây dựng các template làm sao để có thể sắp xếp nội dung trong mỗi trang

Công việc của các designer chỉ là thiết kế giao diện cho các thành phần của website như: tin tức, sản phẩm…

Mặt khác, các Lập trình viên sử dụng ngôn ngữ lập trình web (PHP) để thao tác

dữ liệu (business logic) Họ không quan tâm đến việc website được trông như thế nào (màu sắc, hình ảnh, phong cách văn bản), hoặc nơi mà nội dung được trình bày lên website sẽ như thế nào Tất cả những việc họ cần làm là tham chiếu đến nội dung của Template bằng cách sử dụng các biến mà họ thỏa thuận với Thiết kế viên

1.4.2 Tại sao nên dùng PHP Template

Chúng ta xét 1 vài lợi ích của php template enginedưới đây để hiểu thêm về nó:

Mã lập trình và giao diện website sẽ được tách riêng ra để có thể thiết kế và sửa đổi một cách độc lập

Lập trình viên và Thiết kế viên có thể làm việc với nhau mà không phải can thiệp vào công việc của nhau Trách nhiệm có thể được phân chia rõ ràng

Sau khi sản phẩm được hoàn tất, giao diện website có thể được sửa đổi tại một thời điểm sau này, mà không cần dính líu hay phải sửa đổi mã lập trình

Ứng dụng vào việc thiết kế website đa ngôn ngữ một cách dễ dàng

Ưu điểm:

- Tách việc lập trình ra khỏi thiết kế, lập trình viên có thể viết code độc lập và designer sau khi đưa sang lập trình vẫn dễ dàng chỉnh sửa lại bản thiết kế của họ trong các phần mềm thiết kế web như Dreamwaver hay Frontpage

Hạn chế:

- Phải học làm quen với cách dùng engine, các cấu trúc và cú pháp

- Tốc độ xử lý template phụ thuộc vào engine nào bạn sử dụng, nói chung cũng rất nhanh

Thường thì lợi ích nhận được khi dùng template lớn hơn nhiều so với hạn chế của nó, nhất là khi viết ứng dụng web lớn và đòi hỏi việc bảo trì hay thay đổi thiết kế thường xuyên

Một số template engine viết bằng PHP : FastTemplate,PHPLib Template (thư viện hàm PHP với nhiều chức năng khác nhau, trong số đó có template), Xtemplate,Smarty

1.4.3Giới thiệu Xtemplate

1.4.2.1 Uu điểm của Xtemplate

Xtemplate là 1 PHP template với một số ưu điểm khá nổi bật

- Cách dùng dể dàng, cấu trúc và cú pháp đơn giản

- Thư viện đóng gói chỉ trong 1 file php nhỏ (blackbox)

- Chương trình ngắn và chuẩn, cơ chế tìm thay thế dùng regexp nên tốc độ rất nhanh

- Giải quyết tất cả các trường hợp trong viết code PHP thông thường (nghĩa là nếu cách viết truyền thống, code PHP và HTML chung với nhau, làm được gì thì viết bằng XTemplate cũng sẽ làm được, còn FastTemplate và PHPLib có hạn chế ở một số chức năng)

VD:

Code PHP:

Trong PHP Code thì Xtemplate sẽ đƣợc viết nhƣ sau:

Chú ý hàm parse:

Parse phải đƣợc viết theo thứ tự của block và cách nhau bởi dấu chấm

VD ngoài cùng là main, tiếp theo là block1,block2,block3 thì sẽ viết:

Mảng giá trị trong Xtemplate

Hoặc có thể thay đổi biến rồi parse ra.VD:

Đặt giá trị cho toàn bộ block

<input type="text" size="20" name="email" value="{EMAIL}" />

<input type="text" size="20" name="income" value="{INCOME}" />

</form>

<! END: form >

block con và gán giá trị cho block

Trong 1 block ta có thể khai báo các block con

Khi in ra sẽ chỉ có chữ: Block ở đây Nếu muốn các block kia đƣợc in ra bạn phải parse chúng:

Gán giá trị cho 1 block

Template:

Khi chạy subblock1 sẽ đƣợc in ra dòng chữ: Block1

Còn subblock2 và tất cả các sublock trong block sẽ đƣợc in ra dòng chữ: block con

Include 1 file trong Xtemplate

Để chèn 1 file vào template mà không cần thông qua PHP ta sẽ sử dụng hàm sau:

1.5 Twitter Bootstrap Framework

1.5.1 Giới thiệu Twitter Bootstrap Framework

Twitter Bootstrap là 1 front-end framework giúp thiết kế 1 ứng dụng web 1 cách nhanh chóng, dễ dàng và đẹp Nó là 1 trong số các CSS-Framework sử dụng dễ nhất thế giới tại thời điểm hiện tại để dùng cho nghành Công Nghiệp Web hiện nay

Twitter Bootstrap bao gồm các mã CSS + HTML cơ bản cho typography, forms, buttons, tables, grids, navigation, và nhiều thành phần khác của website

Twitter Bootstrap cung cấp lưới cố định (fixed) rộng 940px và 12 cột Tất nhiên

là cũng có giải pháp cho việc dùng layout dạng động (fluid)

Style của các phần tử HTML trong Twitter Bootstrap khá đơn giản và thanh lịch Ví dụ như phần đổ bóng trong input, highlight của bảng biểu, các mã CSS hiển thị cảnh báo, tabs, phân trang…

Twitter Bootstrap giúp chúng ta giảm thiểu thời gian thiết kết html và css.Twitter Bootstrap định nghĩa sẳn các class css công việc của chúng ta chỉ là sử dụng các class đó vào mục đích của mình.Twitter Bootstrap còn hổ trợ Responsive design một cách làm giao diện đa thiết bị rất được ưu chuộng trong thời gian gần đây

1.5.2 Các thành phần của Twitter Bootstrap Framework

Thư mục CSS : chứa các file CSS non-responsive và responsive designs, ngoài ra còn chứa phiên bản rút gọn

Thư mục JS : chứa file bootstrap.js và các phiên bản rút gọn Nội dung các file này dùng chứa các component cho việc thiết kế Web của được chuyên nghiệp hơn

Thư mục img: chứa 2 cái ảnh lớn, ta dùng nó để add các icon vô trang Web thiết kế trong đẹp mắt và thân thiện với người dùng hơn Twitter Bootstrap sử dụng công nghệ sprite-image nên tải về rất nhẹ và nhanh

1.5.3 Cách sử dụng Twitter Bootstrap Framework cơ bản

Đây là 1 cấu trúc mẫu để Twitter Bootstrap hoạt động

Để enable Responsive design thì thêm đoạn này vào file html

Twitter Bootstrap đã viết sẳn rất nhiều components để chúng ta có thể sử dụng.ví dụ nhƣ nava,dropdown,Breadcrumbs…

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Đây là 1 ví dụ top menu hỗ trợ responsive của Twitter Bootstrap

<div class="navbar-inner">

<div class="container">

<! btn-navbar is used as the toggle for collapsed navbar content >

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</a>

<! Be sure to leave the brand out there if you want it shown >

<a class="brand" href="#">Project name</a>

<! Everything you want hidden at 940px or less, place within here >

<div class="nav-collapse collapse">

<! nav, navbar-search, navbar-form, etc >

</div>

</div>

</div>

</div>

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Giới thiệu

Đây là 1 framework cho phép các cặp cô dâu chú rể không biết về thiết kế website cũng có thể tự tạo cho mình được 1 website đám cưới cá nhân để chia sẻ những khoảnh khắc đẹp nhất của cuộc đời mình cho bạn bè và người thân của họ Framework với chức năng dễ sử dụng rõ ràng hỗ trợ các cô dâu chú rể tạo được một website đám cưới cá nhân với các giao diện và tùy chọn riêng tư khác nhau

Với website đám cưới cá nhân của mình Người dùng có thể đăng tải các bài viết chia sẻ về câu chuyện tình yêu của họ Cũng như các album ảnh cưới thiệp mời đám cưới của họ

Các cô dâu chú rể, chủ của website có thể đăng tải hình ảnh nền, hình ảnh silde giới thiệu cũng như có thể tùy chọn ẩn hiện các menu chức năng trên website của họ Đối với người xem website Website được bố cục gọn gàng , rành mạch trong từng chuyên mục giúp người xem dễ dàng xem album ảnh cưới và các tin tức mà cô dâu chú rể đăng tải lên

Ngoài ra framework còn tích hợp hệ thống comment của các website trong cùng

hệ thống và tích hợp comment facebook trên từng ảnh và từng bài viết Tạo sự liên kết chia sẻ kinh nghiệm giữa các thành viên sử dụng website trong cùng hệ thống và giữa website và mạng xã hội Facebook

Framework còn được thiết kế tối ưu cho Google đọc và index Giúp cho việc SEO onpage của website đạt được sự đánh giá cao của các search engine Việc này nhằm quảng bá hệ thống với nhiều người dùng khác khi tìm kiếm trên các search engine các vấn đề liên quan đến đám cưới Đây chính là những người dùng tiềm năng tiếp theo của framework

2.2 Thiết lập yêu cầu chức năng

2.2.1 Chức năng hiện thị cho người truy cập web xem

Trang chủ Hiện thị tên cô dâu chú rể có thể đổi font chữ, màu chữ, Slide gồm 5 hình

ảnh chạy theo 1 hiệu ứng cố định,Lời giới thiệu website

Trước đây - Hiện tại : gồm 1 hình cô dâu và chú rể trước đây và 1 hình hiện tại chụp

chung + nội dung giới thiệu

Album ảnh: Hiện thị danh sách album ảnh cưới gồm ảnh đại diện,tên album, mô tả

cho album

Click vào từng album thì hiện danh sách các ảnh cưới của album đó Có hiệu ứng xem hình ảnh trong album

Nhật ký: Danh sách các bài nhật ký gồm 3 kiểu xem Chỉ mình tôi, cô dâu chú rể xem

được và public click vào từng bài thì ra trang chi tiết tin

Điều ước: hiện thị danh sách các điều ước đăng bởi cô dâu và chú rể

Chuyện tình yêu: hiện thị 3 bài viết kể về câu chuyện tình yêu của 2 người 1 của cô

dâu, 1 của chú rể và 1 bài của chung 2 người, click vào thì ra bài chi tiết

Gia đình và bạn bè: hiện thị danh sách hình ảnh, giới thiệu gia đình và bạn bè của cô dâu chú rể

Kế hoạch đám cưới: Hiện thị các bài đăng của cô dâu và chú rể chia sẻ về kế hoạch

đám cưới Click vào từng bài thì ra trang chi tiết

Sự kiện: hiện thị các sự kiện gồm tiêu đề, thời gian diễn gia, địa điểm và mô tả ngắn gọn Click vào thì ra trang chi tiết của sự kiện đó

Thiệp mời: Hiện thị ra 1 bài viết có hình ảnh thiệp mời của cô dâu chú rể chức năng

tạo thiệp mời online

Tuần trăng mật: hiện thị các bài đăng liên quan đến tuần trăng mật của cô dâu chú rể,

click vào từng bài thì ra trang chi tiết

Thăm dò ý kiến: Danh sách các câu hỏi thăm dò ý kiến và câu trả lời

Lời cảm ơn: Hiện thị danh sách các lời cảm ơn của cô dâu chú rể dành cho bạn bè

người thân Click vào thì ra trang chi tiết của lời cảm ơn

Lưu bút: Danh sách các lưu bút của bạn bè gửi cho cô dâu chú rể

Video : Danh sách các video lấy link từ youtube

Nơi mua sắm: hiện thị danh sách các bài viết chia sẻ về nơi mua sắm của cô dâu chú rể

2.2.2Chức năng quản trị cho cô dâu chú rể

2.2.2.1 Nhóm chức năng về quản lý menu

Chỉnh sửa Menu: ẩn hiện menu, đổi tên mặc định của menu Thay đổi giới thiệu của từng menu Đặt mật khẩu cho menu

Sắp xếp vị trí: Sắp xếp vị trí hiện thị của menu trên website

2.2.2.2 Nhóm chức năng về quản lý nội dung gồm có:

- Cập nhật nội dung trang chủ gồm hình ảnh slide Lời giới thiệu

- Quản lý bài viết nhật ký

- Quản lý bài viết chuyện tình yêu

- Quản lý bài viết gia đình và bạn bè

- Quản lý bài viết kế hoạch đám cưới

- Quản lý bài viết Tuần trăng mật

- Quản lý bài viết nơi mua sắm

- Quản lý các điều ước

- Quản lý các sự kiện đăng lên website

- Quản lý các câu hỏi thăm dò ý kiến

- Quản lý video

2.2.2.3 Nhóm chức năng về album ảnh

- Danh sách album ảnh

- Tạo mới album ảnh ẩn hiện đặt mật khẩu cho từng album ảnh

- Thêm xóa sửa hình ảnh trong album ảnh

2.2.2.4 Nhóm chức năng về giao diện

- Thay đổi giao diện mẫu của website

- Chỉnh sửa header của website

2.2.2.5 Nhóm chức năng về bình luận

- Cấu hình bình luận

- Quản lý các bình luận của album ảnh

- Quản lý các bình luận của bài viết

- Quản lý lưu bút

2.2.2.6 Nhóm chức năng về quản lý tài khoản

- Sửa thông tin tài khoản

- Đổi mật khẩu

2.3 Sơ đồ chức năng:

2.3.1 Sơ đồ chức năng quyền khách

Hình 2.1: Sơ đồ chức năng quyền khách

Giải thích chức năng

Không có tương tác:

- Khách chỉ truy cập web bình thường không có tác động lên hệ thống

- Chỉ đọc tin tức và xem album được chia sẻ bởi cô dâu chú rể

- Đối với các tin tức hoặc album ảnh mà cô dâu chú rể chia sẻ với một nhóm người

và có đặt mật khẩu thì khách xem phải nhập mật khẩu đúng mới xem được

2.3.2 Sơ đồ chức năng quyền user:

2.3.2.1 Sơ đồ Use Case tổng quát

Hình 2.2: Sơ đồ Use Case tổng quát

2.3.2.2 Use Case Diagram chi tiết

Từ mô hình Use Case tổng quát, ta tiến hành phân rã từng Use Case để đưa ra mô hình chi tiết của từng Use Case

Use Case quản lý menu

Hình 2.3: Sơ đồ Use case quản lý menu Giải thích chức năng:

- Sắp xếp vị trí: User sắp xếp trật tự, vị trí hiện thị trước, sau của từng mục menu

- Đổi tên: User đổi tên mặc định của menu thành tên khác cho phù hợp với nội dung

- Đặt mật khẩu: Nếu muốn bài viết trong một menu nào đó không chia sẻ công khai

mà chỉ chia sẻ với một số người thì người dùng sẽ đặt mật khẩu cho danh mục đó

và đưa mật khẩu cho người muốn xem bài viết trong danh mục