Thiết kế trang web với mã nguồn mở đào văn phương

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh phúc

MÔ TẢ SÁNG KIẾN
Mã số: . . . . . . .
1. Tên sáng kiến: Thiết kế trang web với mã nguồn mở
2. Lĩnh vực áp dụng: Công nghệ thông tin.
3. Mô tả bản chất của sáng kiến
3.1 Tình trạng giải pháp đã biết
Với Joomla người thiết kế web không cần phải có kiến thức sâu về ngôn ngữ lập
trình Web như ASP, PHP, ASP.NET … Mà chỉ cần có những kỹ năng cơ bản về thiết kế
trang web mà thôi, còn mã nguồn đã có sẳn chúng ta chỉ đóng vai trò thiết kế lại theo
đúng tiêu chí của một website giáo dục và phù hợp với điều kiện của đơn vị mình là
được. Với yêu cầu chỉ cần biết thiết kế bố cục trang web, nên với những giáo viên tin
học của các trường có thể làm được một trang web và Upload lên mạng giới thiệu với
cộng đồng mạng về trường của mình. Việc tự thiết kế sẽ giảm được chi phí thuê lập
trình web, mặt khác việc tự thiết kế sẽ giúp chúng ta có thể chọn lựa bố cục và các đề
mục phù hợp với điều kiện thực tế của trường.
Ưu điểm:
- Mã nguồn mở nên miễn phí không phải mua bản quyền.
- Sử dụng ngôn ngữ lập trình Web miễn phí là PHP.
- Sử dụng hệ cơ sở dữ liệu miễn phí là My SQL.
- Có nhiều người cùng phát triển hợp thành cộng đồng rộng lớn trên Internet.
- Dễ dàng tiếp cận và thiết kế, chỉnh sửa mã nguồn.
Khuyết điểm:
Mẫu Website phát triển chung cho nhiều lĩnh vực nên sẽ dư thừa các đoạn code
khi ứng dụng vào một lĩnh vực, cụ thể ở đây là giáo dục thì sẽ có những mục không
dùng.
3.2. Nội dung giải pháp đề nghị công nhận là sáng kiến
a. Mục đích của giải pháp
- Trong khoảng thời gian từ năm gần đây tôi luôn trăn trở tìm hiểu, học hỏi làm

sao để có một Website vừa vừa đẹp, vừa tiện sử dụng và phù hợp với điều kiện thực tế
của Ngành. Sau nhiều lần tìm kiến trên mạng tôi phát hiện mã nguồn mở Joomla
chuyên dùng để thiết kế trang web được cả cộng đồng người dùng trên mạng cùng nhau


phát triển. Nên tôi quyết định sử dụng Joomla để làm trang web cho Ngành, có thể xem
trang web của Phòng Giáo dục và Đào tạo Mỏ Cày Nam với mã nguồn mở Joomla tại
địa chỉ: www.mocaynam.edu.vn.
Joomla là một mã nguồn rất dễ sử dụng và được phát triển rộng rải, nhưng để có
thể làm chủ được nó chúng ta cần phải có thời gian và công sức đầu tư cho nó. Chứ
không phải cứ nói bắt tay vào là làm được ngay, nhưng với tinh thần “không có gì là
không thể” thì tôi tin bất cứ giáo viên tin học nào chịu khó thì có thể làm được Website
với mã nguồn mở Joomla.
- “Thiết kế trang web với mã nguồn mở” xác định mục tiêu là sau khi nghiên cứu
xong thì bất kỳ ai cũng có thể tự mình thiết kế được một Website cho trường học không
kém phần chuyên nghiệp so với bỏ ra một số tiền lớn để thuê các công ty thiết kế web
viết. Phải tự làm trang web hoàn chỉnh trên localhost (máy ở nhà), rồi sau đó Upload
lên Hosting và cấu hình cho website chạy được thì bạn đã đi được nữa chặng đường
vinh quang. Sau đó phải phân quyền và bảo mật cho website là một công việc đòi hỏi
thời gian và công sức rất nhiều.
b. Chuẩn bị
Chúng ta cần hoàn chỉnh về nội dung và giao diện của Website trên localhost
trước khi xuất bản trang Web trên internet. Để có thể cài đặt trên Joomla trên máy,
chúng cần chuẩn bị một số thứ sau:
- Wamp là chương trình tạo máy dịch vụ Web (Web Sever) trên máy cá nhân. Địa
chỉ Download như sau: />WampServer thường xuyên được cập nhật các phiên bản Apache, MySQL, PHP,
PHPMyAdmin, Zend… đồng thời hỗ trợ từ Windows XP cho đến Windows 8.1, và có
bản 32 bit + 64 bit.

Đặc biệt có tính năng Switch online/offline giúp bạn public website của bạn lên
mạng internet để chia sẻ với mọi người.
Các tính năng chính nổi bật


Manage your Apache and MySQL services



Switch online/offline (give access to everyone or only localhost)



Install and switch Apache, MySQL and PHP releases



Manage your servers settings



Access your logs



Access your settings files



Create alias

- Gói mã nguồn mở Joomla phiên bản chính thức mới nhất tại địa chỉ:
hoặc />c. Tạo cơ sở dữ liệu cho Website
Sau khi download về xong chúng ta vào nơi lưu trữ để cài đặt, chạy tập tin
WampServer2.1e-x32.exe và làm theo hướng dẫn là ta đã có một máy cá nhân có thể
chạy được Joomla.
- Database là cơ sở dữ liệu được tạo ra để sử dụng cho các trang web động, nó
chứa các thông tin và nội dung do người sử dụng hoặc do các ứng dụng web tạo ra. Các
Web Site động sẽ truy xuất các dữ liệu trong Database để hiển thị lên trang web khi
được yêu cầu. Đường dẫn tạo database http://localhost/phpmyadmin/
Lưu ý: Khi cài đặt WampServer2.1e-x32.exe chọn ỗ đĩa lưu Wamp. Ở đây là
c:\Wamp.
- Tới đây thì việc chuyển bị cho máy chủ cá nhân đã xong, bây giờ chúng ta chỉ
cần cài đặt Joomla và có thể bắt đầu chỉnh sửa thiết kế Website.
d. Cài đặt Joomla 2.5.4 trên máy cá nhân
- Để cài đặt Joomla chúng ta vào nơi download về tìm phiên bản joomla cần cài
đặt. Ở đây ta chọn phiên bản 2.5.4, copy vào thư mục joomla của đĩa c:\Wamp\www và
giải nén. Xong mới tiến hành cài đặt joomla.
Ví dụ: Giải nén với tên: mocaynam, địa chỉ cài đặt: http://localhost/mocaynam
Các bước cài đặt Joomla trên Localhost.
1 - Bạn mở trình duyệt bất kì, truy cập địa chỉ: localhost/mocaynam. Giao
diện cài đặt joomla hiện lên. Bạn chọn Tiếp theo.


2 – Bước kiểm tra trước khi cài đặt, Joomla sẽ tự động kiểm tra các thành phần
hỗ trợ của webserver cho Joomla. Chọn Tiếp theo.

3 – Bước Giấy phép GNU General Public để tham khảo thêm giấy phép hoạt
động của Joomla. Tiếp theo.

4 – Bước Cấu hình cơ sở dữ liệu.

Database Configuration, các tham số về cơ sở dữ liệu sẽ được yêu cầu.
User này là một MySQL administrator và có thể làm mọi thứ trong hệ thống
MySQL.
Các tham số có thể được nhập như mẫu dưới đây:
Host Name: localhost
User Name: root
Password: để trống
Database Name: Tên mà bạn đã tạo ra trong Localhost/Phpmyadmin
5 - FTP Configuration (cấu hình FTP)

FTP là một giao thức truyền file có thể được sử dụng để upload và quản lí các file
trong Joomla!. Tuy nhiên, chức năng này là không cần thiết nếu Joomla! được cài đặt
tại máy tính các nhân với XAMPP. Nhưng nếu Joomla được cài đặt trên một server từ


một nhà cung cấp, thì ta sẽ có thể nhập vào các dữ liệu mà nhà cung cấp đó gửi cho tại
phần cấu hình FTP này.
Chọn Tiếp theo.
6- Configuration (cấu hình)

Tên trang: có thể điền bất cứ gì, ví dụ: Trường THCS Thi Trấn
Địa chỉ hòm thư điện thử: điền địa chỉ hòm thư quản trị (email), ví
dụ:
Tên đăng nhập quản trị: đặt tên đăng nhập để truy cập trang quản trị joomla,
thông thường nếu website đang trong quá trình xây dựng, các bạn có thể để mặc định là
admin.
Mật khẩu quản trị: chọn mật khẩu để đăng nhập trang quản trị, với website đang

trong quá trình xây dựng, tôi nghĩ các bạn nên đặt những mật khẩu đơn giản. Về sau sau
khi hoàn tất website, các bạn có thể đổi lại mật khẩu phức tạp.
Xác nhận mật khẩu quản trị: xác nhận mật khẩu.
Ở phần dữ liệu mẫu: Nếu bạn chưa biết gì về Joomla bạn nên nhấn vào Cài đặt dữ
liệu mẫu. Và Chọn Tiếp Theo.


7- Completion (hoàn thành)

Đây là bước cài đặt cuối cùng. Click Remove installation folder để tiếp tục để
kết thúc quá trình thực hiện.
d. Việt hóa Website
- Sau khi cài đặt xong vào trình duyệt web gõ http://localhost/mocaynam thì một
trang web xuất hiệu với giao diện tiếng Anh như trên. Việc tiếp theo là chúng ta phải
việt hóa cho trang web. Có hai phần front-end (phần tiền sảnh) và back-end (phần quản
trị) tương ứng với hai tập tin: joomla-1.5_vi-VN_front-end.zip và joomla-1.5_viVN_back-end.zip download trên mạng về.
- Tiến hành việt hóa: Có hai cách việt hóa là tự việt hóa hoặc sử dụng hai tập tin
đã làm sẳn, ở đây ta tiến hành theo cách thứ hai.


- Đăng nhập trang quản trị, sau đó đi tới Extensions ---> Language Manager

- Click vào nút Installed Languages sẽ hiện ra một list các ngôn ngữ ở đây:

- Nhập vài kí tự vào ô Filter (ví dụ: vie) rồi nhấn enter

- Click như hình trên để cài đặt chờ khoảng 7 đến 10 giây để hoàn tất.


Đến đây bạn chỉ việc vào phần quản lý ngôn ngữ, và đặt ngôn ngữ vừa cài đặt

làm mặc định

Mỗi khi có bản cập nhật mới của Ngôn ngữ sẽ có thông báo ngay trong trang
quản trị, các bạn chỉ việc nhấn nút update là quá trình này sẽ xãy ra hoàn toàn tự động
-

e. Chỉnh sửa các menu và nội dung trang web
- Trước khi tiến hành thiết kế Website cho trường mình chúng ta cần hình dung
xem thử trang web của trường cần có những mục gì, cần có menu gì, cần truyền tải
những nội dung gì? Chúng ta có thể tham khảo một số mẫu website sau đây trước khi
tiến hành thiết kế.


Banner
Logo

Menu Top
(Danh mục trên)

Menu chính
(Danh mục chính)
Tin tức mới cập
nhật

Chúng ta hãy quan sát trang chủ Joomla và dễ nhận thấy rằng, các module,
component đã được bố trí như sau:

Tùy vào điều kiện của từng trường mà chúng ta sẽ thiết kế giao diện và các danh
mục cho phù hợp, nhưng vì đều là trường học nên xin đề nghị một mẫu dạng web cho
giáo dục, các danh mục chính này có thể dùng chung cho các trường học (đây chỉ mang

tính chất gợi ý).

f. Quản lý danh danh mục (Các bài viết) 2.5
Chuyên mục (Category) là phần quản lý và phân loại các bài viết trong joomla!
Kể từ phiên bản joomla! 1.6.x Joomla! cho phép tạo chuyên mục nhiều cấp và không


giới hạn, tính năng này giúp cho việc sử dụng và quản lý các bài viết trong Joomla! rất
thuận tiện và dễ dàng.

Tạo danh mục mới trong Joomla! 2.5 (Các bài viết)
Trong phần quản lý danh mục của Joomla! nhấn vào nút Thêm mới trên thanh
công cụ (Toolbar) để tạo một mới.
Các thông tin và thiết lập trong quản lý thể loại

Tiêu đề: Tiêu đề của thể loại, có thể được hiển thị hay không tùy theo thiết lập
của bạn.
Alias: Đây là một tên khác của chuyên mục, dùng để quản lý và sử dụng trong
SEO/SEF. Thông thường bạn hãy để trống mục này, Joomla! sẽ tự động nhập vào.
Lớp cha: Chọn cấp độ cho chuyên mục, nếu chọn No parent thì có nghĩa đây là
chuyên mục chính.


Trạng thái: Chọn đăng hay không đăng chuyên mục này, nếu chọn không đăng
(Unbuplished) thì các bài viết trong chuyên mục này sẽ không được hiển thị..
Truy cập: Chọn cấp độ cho phép truy cập. Có các lựa chọn sau:
- Public: Tất cả mọi người đều truy cập được.
- Registered: Chỉ các thành viên đăng ký và đăng nhập mới truy cập
được.
- Special: Chỉ các thành viên cấp cao mới truy cập được.

Quyền: Thiết lập các quyền hạn cho thành viên đối với chuyên mục này.
Ngôn ngữ: Lựa chọn ngôn ngữ, chỉ dùng khi có thiết lập chế độ đa ngôn ngữ,
mặc định chọn Tất cả.
Mô tả: Phân mô tả, giới thiệu chuyên mục, có thể để trống.
Sau khi thực hiện xong bạn hãy nhấn vào một trong các nút trên thanh công cụ
như sau:
Lưu: Lưu các thông tin và vẫn giữ nguyên màn hình.
Lưu & thoát: Lưu và quay lại màn hình quản lý chuyên mục.
Lưu & thêm mới: lưu và tạo một chuyên mục mới với cùng nội dung hiện có.
Tạo mới một menu: Menu Items.
Click mục Menu Items để hiện danh sách các Menu Item của một nhóm menu.
Rồi click nút Thêm mới để tạo mới một Menu Item.


Nhập các thông tin cho menu item.

Chọn một loại Kiểu của mục Menu Item. Ví dụ: Categopy Blog

g.Tạo bài viết mới trong Joomla! 2.5


Trong phần quản lý của Joomla! (Administrator), bạn hãy truy cập vào phần quản
lý chuyên bài viết (Article Manager) sau đó nhấn vào nút Thêm mới trên thanh công cụ
(Toolbar) để tạo một bài viết mới.
Các thông tin và thiết lập cơ bản của bài viết

Tiêu đề: Têu đề của bài viết, có thể được hiển thị hay không tùy theo thiết lập của
bạn.
Alias: Đây là một tên khác của bài viết, dùng để quản lý và sử dụng trong
SEO/SEF. Thông thường bạn hãy để trống mục này, Joomla! sẽ tự động nhập vào.

Thể loại: Chọn chuyên mục chứa bài viết.
Trạng thái: Chọn đăng hay không đăng bài viết này, nếu chọn không đăng
Quyền: Thiết lập các quyền hạn cho thành viên đối với bài viết này.
Ngôn ngữ: Lựa chọn ngôn ngữ, chỉ dùng khi có thiết lập chế độ đa ngôn ngữ,
mặc định chọn Tất cả.
Soạn thảo nội dung bài viết: Phần nhập nội dung của bài viết. Bài viết có thể chứa
các văn bản thông thường, hình ảnh, phim,... và ngoài ra bạn còn có thể chèn ngôn ngữ
HTML nếu muốn.
Sau khi thực hiện xong bạn hãy nhấn vào một trong các nút trên thanh công cụ
như sau:
Lưu: Lưu các thông tin và vẫn giữ nguyên màn hình.
Lưu & Thoát: Lưu và quay lại màn hình quản lý chuyên mục.
Lưu & thêm mới: lưu và tạo một chuyên mục mới với cùng nội dung hiện có.
3.3. Khả năng áp dụng của giải pháp
- Sáng kiến kinh ngiệm có thể áp dụng trong toàn tỉnh.
- Sáng kiến kinh nghiệm đã và đang triển khai với các trường trực thuộc THCS
đạt chuẩn quốc gia của ngành giáo dục huyện Mỏ Cày Nam.
3.4. Hiệu quả, lợi ích thu được hoặc dự kiến có thể thu được do áp dụng giải
pháp :
Qua năm năm triển khai và sử dụng trang Website của Phòng Giáo dục và Đào
tạo, các văn bản chỉ đạo của Ngành phát hành đều được tải lên mạng Internet. Các đơn
vị trực thuộc nắm được các văn bản chỉ đạo của Ngành, Ủy ban nhân dân huyện, Sở
Giáo dục và Đào tạo và các cơ quan ban Ngành huyện kịp thời. Đồng thời giảm được
thời gian và kinh phí photocopy các loại công văn.
3.5 Tài liệu kèm theo gồm
- Các bài viết về Joomla trên diễn đàn />- Các bài viêt về Joomla trên diễn đàn
Bến Tre, ngày 20 tháng 4 năm 2015