xây dựng framework tạo website đám cưới cá nhân

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.. MySQL có thể quản lý tới hàng Terabyte dữ liệu, hàng triệu bản ghi, chạy trênnhiều môi

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ựccủ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âydư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ễnLươ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 sinhviên khoa Công Nghệ Thông tin và em những kiến thức, kinh nghiệm quý báu, niềmsay 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épnhư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ếpcủ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êncô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àntoàn chịu trách nhiệm

MỤC LỤC

MỤC LỤC iv

Bảng các từ viết tắt: vii

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 4

1.1: Tổng Quan Về Database Server 4

1.1.1 Database Server là gì? 4

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

1.1.3 Sơ lược MySQL 5

1.2: Giới thiệu PHP 6

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

1.4 Công nghệ template 8

1.4.1 PHP Template là gì 8

1.5 Twitter Bootstrap Framework 19

1.5.1 Giới thiệu Twitter Bootstrap Framework 19

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

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

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

2.1 Giới thiệu 23

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

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

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

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

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

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

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

2.4 Xây dựng Activity Diagram: 36

2.4.1 Đăng nhập: 36

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

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

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

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

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

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

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

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

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

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

4.1 Kết luận: 64

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

TÀI LIỆU THAM KHẢO 66

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ũngmuốn chia sẻ niềm vui này với bạn bè và người thân của họ Hiện nay internetphát triển với tốc độ nhanh chóng Số lượng người sử dụng internet tại ViệtNam rất nhiều đặc biệt là các bạn trẻ Không phải ai cũng có đủ tình độ chuyênmôn để tạo ra được một website để chia sẻ những khoảng khắc những sự kiệntrọ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ùybiế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âncủ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ạowebsite đám cưới cá nhân và được khá nhiều sử dụng Tuy nhiên hiện nay tạiViệt Nam vẫn còn quá ít đơn vị cung cấp dịch vụ này Và độ chuyên nghiệpcũ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ạowebsite đám cưới cá nhân tại Việt Nam mới chỉ có trang web traucau.vn thựchiện Tuy nhiên độ tùy biến giao diện và các tính năng của trang web này cungcấp còn quá sơ sài Người dùng không thể tự tùy biến được nhiều trong giaodiệ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ềnchia sẻ riêng tư với 1 nhóm người của chủ website

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ộthạ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ễnphí Có độ tùy biến và tính riêng tư cao Đồng thời đề tài cũng hướng tới việctạ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ệuMySQL 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ìnhthự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 để websitemang 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âydự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ứcnă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ấtmạ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ó truycập CSDL trên internet MySQL server điều khiển truy cập dữ liệu đa người dùng cùngmộ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ấnSQL (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ệuhiệ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ớinhữ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 đượcyê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ụngphả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àncho 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ênnhiề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ệuthô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 baonhiê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ậpnhậ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

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ể địnhnghĩ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ậpcá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ủamì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ộtlượ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à hostcủ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 rakhỏ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

PHP được nhận dạng dưới 4 dạng phiên bản:

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

đá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úcmodule 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ý giaodiệ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ênnhư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 websitenhư: 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ênwebsite 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ủaTemplate 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 đổimộ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 canthiệ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ộtthờ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à designersau 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ầnmề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ấtnhanh

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áchviết truyền thống, code PHP và HTML chung với nhau, làm được gì thì viết bằngXTemplate cũng sẽ làm được, còn FastTemplate và PHPLib có hạn chế ở một số chứcnăng)

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:

$xtpl->parse('main.block1.block2.block3');

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

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

Ví dụ: Template

<! BEGIN: form >

<form action="#">

<input type="text" size="20" name="fullname" value="{FULLNAME}" /><br />

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

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

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 parsechúng:

Gán giá trị cho 1 block

set_null_block(giá trị cần gán,[tên block cần gán]);

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:{FILE "file cần chèn"}

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áchnhanh chóng, dễ dàng và đẹp Nó là 1 trong số các CSS-Framework sử dụng dễ nhấtthế 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,

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à thanhlị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ợ Responsivedesign 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 racò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àydù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

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

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

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…

Đâ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

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

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ệucủ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

- 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ể

Có tương tác với hệ thống:

- Chức năng bình luận: Khách xem website bình luận cho tin tức hoặc album ảnh

- Đố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ý menuGiả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