Ứng dụng gói mã nguồn mở để thiết kế website album ảnh khoa công nghệ thông tin trường đại học vinh

Tr-ờng đại học vinh ứng dụng gói mã nguồn mở để thiết kế Website album ảnh Khoa Công nghệ thông tin Tr-ờng đại học vinh... Đề tài “ứng dụng gói mã nguồn mở để thiết kế Website Album ản

Tr-ờng đại học vinh

ứng dụng gói mã nguồn mở

để thiết kế Website album ảnh Khoa Công nghệ thông tin

Tr-ờng đại học vinh

Đề tài “ứng dụng gói mã nguồn mở để thiết kế Website Album ảnh khoa Công nghệ thông tin tr-ờng Đại học Vinh” thực hiện trong kỳ bảo vệ

đồ án là đề tài mà em rất quan tâm vì Website này sẽ là nơi chia sẻ các hình

ảnh về các hoạt động giảng dạy, học tập, rèn luyện của giảng viên, sinh viên, học sinh Tr-ờng Đại học Vinh cũng nh- khoa Công nghệ thông tin Tuy đã rất

cố gắng trong việc tìm hiểu, nghiên cứu, phân tích và thiết kế trang web nh-ng chắc chắn sẽ không tránh khỏi những thiếu sót Rất mong nhận đ-ợc sự đóng góp ý kiến của các thầy cô giáo và các bạn để website ngày càng hoàn thiện hơn

Qua đây, em xin đ-ợc gửi lời cảm ơn chân thành nhất tới Ban chủ nhiệm khoa CNTT, Đoàn tr-ờng – Hội sinh viên tr-ờng Đại học Vinh, các thầy giáo, cô giáo đã tạo cho em những điều kiện thuận lợi nhất để em có thể hoàn thành

đồ án tốt nghiệp của mình Đặc biệt là sự tận tình quan tâm dìu dắt của thầy

giáo - Thạc sỹ Trần Văn Cảnh đã giúp em rất nhiều trong suốt quá trình

hoàn thành đồ án

Cuối cùng em xin cảm ơn gia đình, bạn bè và tập thể lớp 45K - CNTT - những ng-ời luôn bên cạnh động viên, ủng hộ em trong suốt quá trình học tập, rèn luyện và thực hiện đồ án

Em xin chân thành cảm ơn!

Lời nói đầu

Hiện nay, việc quảng bá thông tin, xây dựng hình ảnh của các tổ chức, doanh nghiệp cũng nh- cá nhân trên mạng Internet là một việc làm rất quan trọng Và trong thời đại kĩ thuật số hiện nay, việc chụp ảnh và l-u giữ lại là nhu cầu thiết yếu của mỗi ng-ời, là một việc làm hết sức quan trọng, nó góp phần l-u giữ lại các khoảnh khắc đáng nhớ Việc l-u trữ ảnh đ-ợc dùng nhiều nhất hiện nay là l-u giữ trên mạng internet thông qua các website, nó giúp cho việc chia sẻ ảnh một cách dễ dàng hơn, an toàn hơn Nh-ng có một thực tế là

có rất nhiều website của các tổ chức, cơ quan nhà n-ớc, doanh nghiệp vẫn còn

đang thiếu phần album ảnh của mình Hạn chế đó sẽ đ-ợc khắc phục bởi các gói phần mềm mã mở giúp cho việc thiết kế website album ảnh ngày càng dễ dàng và thuận tiện hơn

Qua quá trình học tập, tham gia các hoạt động Đoàn – Hội tại Tr-ờng Đại học Vinh, em đã nhận thấy đ-ợc những hạn chế của việc l-u trữ các ảnh tại tr-ờng hiện nay; sự cần thiết của việc sử dụng các hình ảnh trong các hoạt

động giảng dạy, học tập cũng nh- việc quảng bá hình ảnh của tr-ờng trong quá trình xây dựng và phát triển Vì vậy trong đồ án tốt nghiệp này em muốn giới thiệu tới thầy cô và các bạn các gói mã nguồn mở thiết kế website album

ảnh Đồng thời áp dụng gói mã nguồn mở s.Gallery để xây dựng Website

Album ảnh khoa Công nghệ thông tin tr-ờng Đại học Vinh minh họa cho

những tính năng nổi bật, tầm quan trọng của một webstie album ảnh

Ngoài phần mở đầu và phần kết luận, đồ án đ-ợc chia làm 4 ch-ơng chính: Ch-ơng I: Tổng quan về phần mềm nguồn mở

Ch-ơng II: Giới thiệu về gói mã nguồn mở S.Gallery

Ch-ơng III: Thiết kế và xây dựng Website album ảnh khoa Công nghệ thông tin, tr-ờng Đại học Vinh

Ch-ơng IV: Một số màn hình giao diện của Website

Ch-ơng I Tổng quan về phần mềm nguồn mở I.1 Giới thiệu phần mềm nguồn mở trên thế giới

Phần mềm nguồn mở (OSS – Open Source Sofware) có lịch sử phát triển qua hàng chục năm Lợi ích của phần mềm nguồn mở có thể thấy rõ qua sự hình thành của các cộng đồng nguồn mở với các sản phẩm có giá trị cao trong thực tế và cả giá trị trong đào tạo

Hơn 2 thập kỉ tr-ớc, khi máy tính lần đầu tiên v-ơn tới mã nguồn của các tr-ờng đại học và đ-ợc truyền đi miễn phí, các nhà lập trình cho rằng, sẽ đ-ợc trả tiền cho việc lập ra ch-ơng trình chứ không phải bản thân các ch-ơng trình

đó Sự việc thay đổi khi máy tính tiến đến thế giới th-ơng mại và các công ty bắt đầu phát triển, cấp phép cho phần mềm dựa trên nền tảng th-ơng mại, hạn chế sự truy cập mã nguồn

Các phần mềm mở thông dụng nhất hiện nay:

- Các hệ điều hành nguồn mở: Red Hat, OpenLinux, Debian, ManDrake, SuSE, TurboLinux, Nirvana, Slackware, FreeBSD, NetBSD, OpenBSD

- Hệ quản trị cơ sử dữ liệu nguồn mở: MySQL, PostgreSQL

- Các phần mềm nguồn mở dùng cho cá nhân:

+ Văn phòng: MS Office, Sun StartOffice, OpenOffice, Unikey… + Mail Cline: Netscape Messenger, MS Outlook, MS Internet Mail, + Trình duyệt Web: MS IE, Netscape Navigator, Mozila, Opera,… + Mô phỏng Windows: Conntectix Virtual PC, Lindows, Wine,…

- Các phần mềm nguồn mở phục vụ cho server:

+ Web: Apache, MS IIS, Sun Iplanet…

+ Th- điện tử: Cyrus IMAP, Sendmail, Quickmail, Fetchmail,…

- Các công cụ lập trình nguồn mở: Borland Kylix (C++), GNU C++, Sun JDK (Java), PHP, Sun J2EE, Microsoft Visual Studio.Net, Webalizel…

I.2 Hệ phần mềm mở Apache, PHP & MySQL

I.2.1 Apache

Apache là một kiểu mẫu web server rất phổ biến Giống nh- Linux, PHP, MySQL nó là một dự án nguồn mở Đây là nguồn mở nên bất kỳ ai có khả năng đều có thể viết ch-ơng trình mở rộng tính năng của Apache PHP hoạt

động với t- cách là một phần mở rộng của Apache, là một module của Apache Apache có tính ổn định và tốc độ cao Tuy nhiên Apache không hỗ trợ công cụ đồ hoạ trực quan Apache chỉ làm việc tốt trên Unix, nh-ng cũng

có những phiên bản chạy tốt trên hệ Windows Apache đ-ợc phát triển và duy trì bởi một cộng đồng mã nguồn mở d-ới sự bảo trợ của Apache Software Foundation Apache đ-ợc phát hành là một phần mềm tự do và miễn phí

http://www.apache.org/dist/httpd/binaries/win32

I.2.2 PHP

PHP (Personal Home Page) đ-ợc phát triển từ một

sản phẩm có tên là PHP/FI do Rasmus Lerdorf tạo ra năm 1995, ban đầu đ-ợc xem nh- là một tập con đơn giản của các mã kịch bản Perl để theo dõi tình hình truy cập đến bản sơ yếu lý lịch của ông trên mạng Ông đã đặt tên cho bộ mã kịch bản này là 'Personal Home Page Tools' Khi cần đến các chức năng rộng hơn, ông đã viết ra một bộ thực thi bằng C lớn hơn để có thể truy vấn tới các cơ sở dữ liệu và giúp cho ng-ời sử dụng phát triển các ứng dụng web đơn giản ông đã quyết định công

bố mã nguồn của PHP/FI cho mọi ng-ời xem, sử dụng cũng nh- sửa các lỗi có

trong nó đồng thời cải tiến mã nguồn

PHP/FI, viết tắt từ "Personal Home Page/Forms Interpreter", bao gồm một số các chức năng cơ bản cho PHP Nó có các biến kiểu nh- Perl, thông

Phiên bản PHP dùng phổ biến nhất hiện nay là PHP 5 PHP 5 phiên bản

đ-ợc công bố ngày 29/06/2003 để cộng đồng kiểm nghiệm Phiên bản Beta 2 sau đó đã ra mắt vào tháng 10/2003 Đến ngày 21/12/2003 PHP 5 Beta 3 đã

đ-ợc công bố, bỏ hỗ trợ Windows 95, sửa chữa nhiều lỗi và thêm đ-ợc nhiều hàm mới Ngày 13/07/2004 bản PHP 5 chính thức đã ra mắt Các phiên bản mới nhất của PHP 5 ng-ời dùng có thể download tại địa chỉ

http://www.php.net/downloads.php

Hiện nay phiên bản tiếp theo của PHP là PHP 6 đang đ-ợc phát triển,

PHP 6 bản sử dụng thử đ-ợc download tại địa chỉ http://snaps.php.net Phiên

bản PHP 6 đ-ợc kỳ vọng sẽ sửa đ-ợc những thiếu sót của PHP ở phiên bản hiện tại nh- hỗ trợ namespace, Unicode

I.2.3 MySQL

Cơ sở dữ liệu MySQL đã trở thành cơ sở dữ liệu mã nguồn mở phổ biến nhất trên thế giới vì tốc độ xử lý nhanh, ổn định và dễ sử dụng Nó

đ-ợc sử dụng mọi nơi ở nhiều tổ chức lớn trên thế giới để tiết kiệm thời gian

và kinh phí cho những website có dung l-ợng lớn, phần mềm đóng gói nh-

Yahoo, Google, Nokia,…

Địa chỉ download các phiên bản của MySQL:

http://dev.mysql.com/download

MySQL không chỉ là cơ sở dữ liệu mã nguồn mở phổ biến nhất trên thế giới hiện nay mà nó là cơ sở dữ liệu đ-ợc chọn cho thế hệ mới của các ứng dụng xây dựng trên nền Linux, Apache, MySQL, PHP

MySQL chạy đ-ợc trên các hệ điều hành khác nhau nh-: Linux, Windows, OS/X…

MySQL có những đặc tính cơ bản sau:

- Tính linh hoạt

- Tính thực thi cao

- Hỗ trợ giao dịch mạnh

- Là nơi l-u trữ Web và Data

- Chế độ bảo mật dữ liệu cao

MySQL ra đời đã giúp cho giới công nghệ thông tin trên thế giới không

bị quá phụ thuộc vào các phần mềm nguồn đóng, cụ thể là SQL của hãng Microsoft

Ch-ơng II Giới thiệu về gói mã nguồn mở

S.Gallery II.1 Giới thiệu về các gói mã nguồn mở tạo Website Album ảnh II.1.1 Website Album ảnh

Trong thời đại kĩ thuật số hiện nay, việc chụp ảnh và l-u giữ lại là nhu cầu thiết yếu của mỗi ng-ời, là một việc làm hết sức quan trọng, nó góp phần l-u giữ lại các khoảnh khắc đáng nhớ Việc l-u trữ ảnh đ-ợc dùng nhiều nhất hiện nay là l-u giữ trên mạng internet, nó giúp cho việc chia sẻ ảnh một cách

dễ dàng hơn, và cũng an toàn hơn Từ đó khái niệm Website Album ảnh đã ra

đời

Website Album ảnh là một trang web chỉ dùng để l-u trữ các bức ảnh d-ới dạng ảnh số và đ-ợc sắp xếp theo tên, danh mục, tác giả hoặc nội dung…nó cho phép ng-ời dùng truy cập để xem và tải về máy tính của mình

Hiện nay, trên mạng Internet có rất nhiều website chia sẻ ảnh trực tuyến

lớn nh-: Picasa, Anhso.net, anhsovn.com, vnphoto.net…là để mọi ng-ời nơi

chia sẻ, cung cấp các bức ảnh số mới, độc đáo và đẹp

Nh-ng có một thực tế là có rất nhiều website của các tổ chức, cơ quan nhà n-ớc, doanh nghiệp, cá nhân…vẫn còn đang thiếu phần album ảnh của mình

Hạn chế đó đã đ-ợc khắc phục bởi các phần mềm thiết kế website

album chuyên nghiệp nh-: AAA Web Album, Web Album Maker… và đặc biệt

là các gói phần mềm mã mở đã giúp cho việc thiết kế website album ảnh ngày càng dễ dàng, thuận tiện và tiết kiệm chi phí, công sức hơn

II.1.2 Các gói mã nguồn mở hỗ trợ thiết kế website album ảnh

Hiện nay có rất nhiều gói mã nguồn mở hỗ trợ việc thiết kế một website album ảnh của các tác giả ng-ời Việt Nam cũng nh- n-ớc ngoài, nổi bật lên

trong đó là các gói: Vgallery, 4images, s.Gallery…

* Vgallery

Vgallery là gói phần mềm của tác giả VietPHP, phiên bản mới nhất hiện nay là phiên bản Vgallery Lite v1.0

Các -u điểm của Vgallery:

- Tự tạo album mới từ những th- mục có sẵn trên host: VGallery có thể quét toàn bộ th- mục PIXDIR (th- mục gốc chứa ảnh), tìm những th- mục có tên bắt đầu bằng từ khoá th- mục (mặc định là 'GDIR') và thêm vào CSDL nếu

nó ch-a tồn tại Đây là cách nhanh nhất thêm 1 loạt album mới Chỉ cần tạo th- mục mới trong th- mục ảnh gốc với tên bắt đầu bằng từ khoá của th- mục

ảnh, VGallery sẽ tạo ngay một album mới

- Tự động làm mới Album: VGallery có thể quét toàn bộ các th- mục chứa ảnh và tìm những ảnh mới (ch-a đ-ợc đ-a vào CSDL) rồi thêm chúng vào CSDL Tính năng này giúp tiết kiệm đ-ợc khá nhiều thời gian Chỉ cần upload ảnh lên host bằng 1 ch-ơng trình truyền tải file, rồi sau đó vào VGallery, ảnh mới sẽ đ-ợc tự động thêm vào trong cơ sở dữ liệu

Chức năng tự động làm mới Album còn giúp xoá đi những bản ghi bị lỗi Những bản ghi mà ảnh không còn tồn tại nữa sẽ bị VGallery tự động xoá

đi

- Tự động tạo Thumbnails (ảnh đại diện): Khi một album đ-ợc mở, chức năng tự động tạo Thumbnails sẽ xác định xem thumbnail của 1 ảnh đã tồn tại hay ch-a và tạo thumbnail cho ảnh đó một cách tự động nếu cần

* 4images

4images đ-ợc cung cấp tại địa chỉ http://www.4homepages.de, đây là

hiện nay, hỗ trợ khá nhiều ngôn ngữ, nh-ng không có Tiếng Việt 4images cũng đã đ-ợc một số lập trình viên Việt Nam tiến hành Việt hóa và đ-a ra cho cộng đồng sử dụng (phiên bản 1.7.6)

4images có diễn đàn hỗ trợ tại địa chỉ

http://www.4homepages.de/forum

Phiên bản mới nhất là phiên bản 1.7.7 (1,6MB)

4images có phần quản lý ảnh khá đầy đủ với các tính năng nh-: tạo thumnails tự động, công cụ resize ảnh, quản lý các tài khoản ng-ời dùng, chỉnh sửa danh mục, tìm kiếm ảnh…

Nh-ợc điểm của 4images là ch-a đ-ợc nhiều ng-ời Việt Nam sử dụng nên không đ-ợc hỗ trợ về tiếng Việt, gây khó khăn cho những ng-ời dùng không có nhiều kiến thức về tiếng Anh Phần hiện thị ảnh của 4images ch-a thực sự đẹp, còn khá đơn điệu nên không thu hút đ-ợc ng-ời dùng

II.2 Giới thiệu về S.Gallery

là một gói mã mở thiết kế website album ảnh đ-ợc xây dựng và phát triển bởi tác giả Lê Bằng, đ-ợc chia sẻ và

hỗ trợ tại địa chỉ http://sgallery.giaidap.info S.Gallery là một gói phần mềm

đ-ợc đông đảo ng-ời quản trị website hiện nay sử dụng để xây dựng phần album ảnh cho website của mình

Phiên bản s.Gallery ra đời đầu tiên là bản v1.0 beta vào ngày 10/6/2008 Hiện nay s.Gallery gồm có các phiên bản 1.0, 1.1, 1.2, 1.3 và 1.3.1

Hình 6: Các phiên bản của s.Gallery

II.2.1 Cấu trúc cơ sở dữ liệu của S.Gallery

Cơ sở dữ liệu của S.Gallery có mặc định gồm ba bảng:

Hình 6: Bảng cơ sở dữ liệu của s.Gallery

- Bảng app_gallery_cat gồm có tám tr-ờng: chịu trách nhiệm l-u thông tin của các danh mục ảnh:

Hình 6: Bảng cơ sở dữ liệu app_gallery_cat

- Bảng app_gallery_pic gồm có năm tr-ờng: chịu trách nhiệm l-u thông tin của ảnh:

H×nh 6: B¶ng c¬ së d÷ liÖu app_gallery_pic

- B¶ng sys_user gåm cã m-êi hai tr-êng: chÞu tr¸ch nhiÖm l-u th«ng tin cña c¸c tµi kho¶n sö dông:

H×nh 6: B¶ng c¬ së d÷ liÖu sys_user

II.2.2 Đánh giá về Sgallery

Hình ảnh giới thiệu tại Trang chủ của s.Gallery tại địa chỉ

http://sgallery.giaidap.info:

Hình 6: Hình ảnh giới thiệu của s.Gallery tại trang chủ Qua quá trình tìm hiểu, cài đặt và dùng thử các gói phần mềm mở để thiết kế website album ảnh, em đã quyết định chọn s.Gallery để phát triển và

xây dựng Website Album ảnh khoa Công nghệ thông tin vì s.Gallery có các -u

điểm so với các mã mở gallery khác nh-:

+ nhẹ: phiên bản cài đặt chỉ nặng ch-a đến 2MB

+ đẹp: trình bày, hiển thị ảnh theo phong cách mới Có tính năng tự

động tạo thumbnails cho ảnh hoàn thiện, ít xảy ra lỗi

+ dễ sử dụng: sắp xếp ảnh, danh mục một cách khoa học, tạo điều kiện cho khách truy cập dễ dàng trong việc xem, tìm kiếm ảnh

+ nhanh: tốc độ load, xử lý ảnh nhanh

+ có phần Administrator quản lý ảnh và danh mục rõ ràng, dễ sử dụng + dễ dàng cài đặt trên localhost và không kén host

Nh-ng vì s.Gallery là một gói mã nguồn mở mới xây dựng (từ tháng 6 năm 2008) và đang đ-ợc phát triển nên còn có những thiếu sót cần đ-ợc khắc phục để có thể thiết kế một website album ảnh hoàn thiện

*) Những thiếu sót của S.Gallery:

+ Ch-a có phần nhập và hiển thị nội dung của ảnh (thông tin về nội dung ảnh, ngày chụp, người chụp, địa điểm…)

+ Phần Administrator còn ch-a hiển thị đ-ợc ảnh thumnails của các ảnh trong phần Chỉnh sửa ảnh

+ Một số phần trên trang chủ và trang administrator ch-a đ-ợc Việt hóa hết, nhiều lúc còn gây khó khăn cho ng-ời sử dụng

+ ở trang Administrator và trang chủ ch-a có đ-ờng link liên kết đến nhau nên gây ra khó khăn trong việc chuyển đổi giữa hai trang

+ Phần tích hợp thêm các loại trình diễn ảnh theo dạng Flash (Flash verison) còn đang gặp lỗi, chỉ phù hợp với Flash player 9 nên không thể hiển thị ở các máy tính có cài phiên bản Flash player mới nhất là Flash player 10

Ch-ơng Iii Thiết kế và xây dựng Website album ảnh khoa Công nghệ thông tin - tr-ờng Đại học Vinh III.1 Đặt vấn đề

Trong Nửa thế kỷ xây dựng và tr-ởng thành của Tr-ờng Đại học Vinh

và 10 năm phát triển của Khoa Công nghệ thông tin, việc l-u giữ lại các hình

ảnh về hoạt động của cán bộ, giảng viên và học sinh sinh viên trong Tr-ờng, Khoa là một việc làm hết sức quan trọng Nh-ng hiện nay, chủ yếu các hình

ảnh về quá trình lịch sử phát triển của Tr-ờng vẫn đang l-u trữ ở dạng ảnh in

và đ-ợc tr-ng bày tại Phòng truyền thống của Tr-ờng và các khoa

Vấn đề l-u trữ ảnh hiện nay ở Tr-ờng Đại học Vinh và Khoa Công nghệ thông tin còn có một số nh-ợc điểm nh- sau:

- Việc l-u trữ theo thời gian gặp nhiều khó khăn: ảnh in dễ thất lạc và bị hỏng, nhòe hình do ảnh h-ởng của thời tiết; ảnh số dễ bị xóa do quá trình l-u trữ trên máy tính, máy ảnh và các thiết bị khác

- Việc sử dụng và khai thác không đạt hiệu quả cao: vấn đề sao chép, in

ảnh và sử dụng ảnh vào các tập san, tạp chí, báo cáo, tài liệu, bài giảng gặp khó khăn Nhiều lúc cán bộ, giảng viên, sinh viên cần một số ảnh về các hoạt

động của Tr-ờng theo từng nội dung sẽ gặp nhiều trở ngại, ví dụ nh-: không biết về nơi l-u trữ ảnh, không thể tìm ảnh theo nội dung, việc quét, sao chép

ảnh mất nhiều thời gian và tốn kém về tiền bạc

Qua quá trình học tập, tham gia các hoạt động Đoàn – Hội tại Tr-ờng

Đại học Vinh, em đã rút ra đ-ợc những hạn chế của việc l-u trữ các hình ảnh

Và em đã quyết định tìm hiểu, nghiên cứu về các hình thức, công cụ l-u trữ

ảnh hiện nay, đi đến rút ra đ-ợc một kết luận là: Ngoài việc l-u trữ bằng ảnh

in thì hình thức l-u trữ ảnh tốt nhất hiện nay là chuyển tất cả các ảnh in thành

ảnh số, sau đó tiến hành đ-a lên mạng internet, l-u trữ d-ới hình thức Website Album ảnh Nh- vậy thì việc l-u trữ, sử dụng sẽ dễ dàng hơn, khi cần xem

Để giải quyết vấn đề trên, em nhận thấy cần thiết phải xây dựng một website album ảnh cho Khoa Công nghệ thông tin Website album này sẽ tập hợp các hình ảnh về quá trình xây dựng và phát triển của Tr-ờng Đại học Vinh, đặc biệt là về Khoa Công nghệ thông tin Các hình ảnh sẽ đ-ợc sắp xếp theo từng danh mục để tạo sự thuận lợi khi truy cập

III.2 Cài đặt và khai thác

III.2.1 Cài đặt website

Để cài đặt Website Album ảnh tr-ớc hết cần cài đặt công cụ trên máy tính cá nhân, bao gồm: công cụ giả lập máy tính thành máy chủ web Xampp

và gói phần mềm S.Gallery

a) Cài đặt công cụ XAMPP

Xampp dùng để giả lập máy tính thành một máy chủ web (máy tính của bạn khi đ-ợc giả lập máy chủ web sẽ đ-ợc gọi là: localhost, để phân biệt với các máy chủ đang hoạt động trên web là host server), Xampp đ-ợc tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ nh- PHPmyadmin

Các thành phần trong XAMPP 1.6.6a gồm:

+ Webalizer 2.01-10

+ Zend Optimizer 3.3.0

+ eAccelerator 0.9.5.1 for PHP 5.2.3

Vào địa chỉ: http://www.apachefriends.org để tải bản các bản cài đặt

Chạy ch-ơng trình cài đặt XAMPP Installer, khi xuất hiện bảng chọn ngôn ngữ, chọn English và nhấn Ok

Khi xuất hiện bảng Welcome to the Xampp Setup Wizard, nhấn Next Trong License Agrement chọn I accept the Agreement, nhấn Next

Trong Select Destination Location, chọn nơi cài đặt Xampp Chọn đ-ờng

dẫn là C:\xampp, nhấn Next

Hình 1: Màn hình b-ớc đầu cài đặt Xampp Chọn Next để tiếp tục

Hình 2: Các b-ớc tiếp theo của quá trình cài đặt Xampp

Đánh dấu vào 3 ô Install Apache…./MySQL…./Filezilla…./ và chọn Install để tiếp tục Sau khi cài đặt thành công sẽ xuất hiện th- mục xampp trong ổ đĩa C

Hình 3: Th- mục Xampp xuất hiện trong ổ C

Mở bảng điều khiển của ch-ơng trình Xampp bằng cách nhấn đúp

chuột vào Icon XAMPP Control Panel nằm trên Desktop

Trong bảng điều khiển Xampp, chọn Start để khởi động Apache và MySQL Nhấn vào nút X (góc trên bên phải) để tắt bảng điều khiển hoặc nhấn chuột và biểu t-ợng của Xampp nằm ở khay hệ thống (góc d-ới bên phải màn hình)

Hình 4: Màn hình XAMPP Control Panel

b) Cài đặt S.Gallery

- Sau khi tải bản S.Gallery (dung l-ợng 1,85MB) tại địa chỉ

http://sgallery.giaidap.info/download, tiến hành giải nén tại th- mục

C:\xampp\htdocs và đặt lại tên là FitAlbum

- B-ớc tiếp theo là tạo cơ sở dữ liệu cho Website

Gõ địa chỉ http://localhost/xampp vào trình duyệt trên máy, sẽ xuất hiện

trang quản lý chính của Xampp

Hình 5: Màn hình trang quản lý của Xampp Vào mục phpMyAdmin phía bên menu trái, hoặc gõ địa chỉ

http://localhost/phpmyadmin để tạo cơ sở dữ liệu cho Website

Hình 6: Màn hình trang quản lý của phpMyAdmin

Gõ tên cơ sở dữ liệu vào ô Create new database và chọn utf8_general_ci trong mục Collation Sau đó click vào nút Create để hoàn tất

Khi hiện thông báo: Database fitalbum has been created thì cơ sở dữ liệu đã

đ-ợc tạo thành công

- Vào trình duyệt và gõ địa chỉ: http://localhost/fitalbum/install để vào

trang cài đặt chính của S.Gallery

Hình 7: Màn hình giao diện cài đặt s.Gallery Tiến hành điền các thông số cần thiết cho Website trong các mục sau:

+) Mục SITE

+ Site title: nhan đề của Website, ở đây là Faculty of Information

Technology Album

+ Server name: localhost

+)Mục MYSQL DATABASE

+ Database name: cơ sở dữ liệu đã tạo của website, ở đây là fitalbum + User Name: root

+ Password: để trống

Click vào nút Install để cài đặt

Khi cài đặt thành công sẽ xuất hiện trang chủ ban đầu của website:

Hình 8: Màn hình trang Home ban đầu của FIT Album

Việc cài đặt S.Gallery đến b-ớc này đã hoàn thành, b-ớc tiếp theo là

đến phần cấu hình cho Website

c) Cấu hình cho website

Gõ địa chỉ http://localhost/fitalbum/?/admin để vào màn hình đăng nhập Control Panel của S.Gallery

Các thông số mặc định ban đầu:

Username: administrator Password: 123456

Hình 9: Màn hình trang Login Control Panel ban đầu của FIT Album

Sau khi đăng nhập sẽ xuất hiện màn hình chính của Administrator

Hình 10: Màn hình trang Administrator ban đầu của FIT Album

Trong Administrator gồm có các mục

- Quản lý toàn bộ ảnh trong album

- Upload ảnh lên album

- Dùng để upload ảnh từ th- mục fitalbum/upload/ftp thông

qua công cụ FTP ( File Transfer Protocol - Giao thức truyền tập tin)

- Upload ảnh theo link

- Quản lý các danh mục

- Tạo danh mục mới

- Quản lý và tạo mới các tài khoản có quyền vào trang

Administrator để chỉnh sửa và upload ảnh

Màn hình Upload media :

Hình 11: Màn hình trang Upload Media ban đầu của FIT Album

d) Các chỉnh sửa trong code của s.Gallery

*) Sửa lỗi không hiện thumbnails trong mục Chỉnh sửa ảnh

Lỗi của S.Gallery là không hiện đ-ợc thumbnail (ảnh đại diện) của ảnh khi vào chỉnh sửa từng ảnh

Hình 12: Màn hình trang Chỉnh sửa ảnh ban đầu của FIT Album

Vào file admin_gallery_edit_form.php trong th- mục

hành sửa đoạn code:

Thành

Khi đó sẽ hiển thị đ-ợc thumbnail của ảnh khi vào Chỉnh sửa ảnh:

<td>

<? if(in_array(end($arr), array('jpg', 'png', 'gif'))): ?>

<img src="<?=base_url();?> gallery/media/thumbnails <?=

$app_ gallery_cat_model->getPath($row->cat_id).'/'.$row-> file_name.$extThumb; ?>" /> <br />

<? endif; ?>

<?=$row->file_name;?>

</td>

<td>

<? if(in_array(end($arr), array('jpg', 'png', 'gif'))): ?>

<img src="<?=base_url();?>upload/thumbnails<?= $app_

H×nh 13: Mµn h×nh trang ChØnh söa ¶nh sau khi söa lçi

*) C¸c chØnh söa trong file user_gallerry_ajax_home.php t¹i th- môc C:/xampp/htdocs/fitalbum/system/application/modules/gallery\views

+) Söa th«ng b¸o khi load ¶nh:

ChØnh söa code:

style="font-<br> Loading style="font-<br> Press <font color="red"> <b> F5 </b> </font>

style="font-§ang load ¶nh <br> NhÊn <font color="red"> <b> F5 </b> </font>

<b> </b> nÕu kh«ng thùc hiÖn ®-îc !

</td>

</tr>

</tbody>

+) Söa hiÖn title khi rª chuét vµo banner chÝnh

"return searchEnter(event);" /> <img src="<?=base_url(); ?> images/gallery_ajax/search.png" title= "search" alt= "search" align =

"absmiddle" onclick = "searchClick( )" />

</div>

T×m kiÕm: <input type= "text" id= "keyword" onkeydown=

"return searchEnter(event);" /> <img src="<?=base_url(); ?>

images/gallery_ajax/search.png" title= "Gâ tõ cÇn t×m kiÕm vµ Ên phÝm

Enter " alt= "search" align = "absmiddle" onclick = "searchClick( )" />

</div>

"http://sgallery.giaidap.info"> s.Gallery </a> 1.2 Powered by <a class =

"version" href="#"> s.Code </a> Written by <a class="author" href=

"sincos.net@gmail.com" > Lª B»ng </a>

</div>

"http://sgallery.giaidap.info"> s.Gallery </a> 1.2 Powered by <a class =

"version" href="admin"> s.Code </a> ReWritten by <a class="author" href= "http://fit.vinhuni.edu.vn" > NguyÔn Kú Thanh </a>

</div>

*) C¸c chØnh söa trong file user_gallery_ajax_mod.php t¹i th- môc

$linkMap = '<a onclick = "loadList(0, 0) " href = "#home" title =

"Home" > Home </a>';

$linkMap = '<a onclick = "loadList(0, 0) " href = "#home" title =

"Home" > Album </a>';