Sáng kiến kinh nghiệm NV Tưởng 2011

Vì với Jomla 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ã

MỞ ĐẦU

1 LÝ DO CHỌN ĐỀ TÀI:

- Trong những năm gần đây sự bùng nổ của công nghệ thông tin là rất nhanh chóng, tin học được ứng dụng rất rộng rãi trong tất cả các lĩnh vực từ thương mại, cơ khí, du lịch, giáo dục, … Một trong những yếu tố giúp công nghệ thông tin phát triển vượt bậc là Internet, mà Website là một trong những công cụ giúp Internet đến với mọi người, mọi nhà, mọi lĩnh vực Các công ty, doanh nghiệp, cơ sở sản xuất lớn nhỏ hay nhà nông muốn mọi người biết đến sản phẩm, lĩnh vực của mình thì đều cần phải có trang web Trong sự bùng nổ

đó các trường học củng không thể đứng ngoài cuộc, trường cần thông báo tuyển sinh, Thời khóa biểu, điểm học sinh,…giới thiệu với mọi người về cơ

sở vật chất của trường mình thì củng cần phải có trang web

Nhưng đối với những doanh nghiệp lớn việc bỏ ra khoảng hơn 10 triệu đồng để thuê các công ty thiết kế Web viết trọn gói thì rất dễ dàng, còn với trường học việc có trang web chỉ mang mục đích giới thiệu mà bỏ ra từng đó tiền là tương đối khó khăn Mặt khác, đa số giáo viên tin học ở các trường là những người không chuyên về viết Web Vậy thì có giải pháp nào cho việc vừa tiết kiệm tiền vừa có được trang web chuyên nghiệp để nhà trường giới thiệu trường mình trên Internet Xin giới thiệu giải pháp “Mã nguồn mỡ Jomla – Giải pháp cho Website trường học”

Vì sao chọn giải pháp này? Vì với Jomla 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ò Design(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 trường 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ẽ

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.

2. LỊCH SỬ VẤN ĐỀ NGHIÊN CỨU:

- Trong khoảng thời gian từ năm 2009 đến nay, từ khi mới ra trường tôi luôn quan tâm đến Website Và luôn trăn trở tìm hiểu, học hỏi làm sao để có một Website vừa chuyên nghiệp, 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 trường Sau nhiều lần lang thang trên mạng tôi phát hiện

mã nguồn mở Jomla 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 Jomla

để làm trang web cho trường, các bạn có thể xem trang web của trường tôi với

mã nguồn mở Jomla tại địa chỉ: web.kontum.edu.vn/dtntkontum (Đang trong quá trình ngày càng hoàn thiện hơn)

Jomla 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 tin 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ở Jomla

NỘI DUNG

- “Mã nguồn mở - Giải pháp cho Website trường học” 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 rồi

đó 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, người nào không kiên nhẫn và chịu khó thì nữa đường đứt gánh là chuyện bình thường

- Chúng ta chỉ cần quan tâm đến những vấn đề cần thiết để có thể thiết

kế được một Website, các công cụ hổ trợ, các bước cài đặt, và bố cục của một Website giáo dục là như thế nào? Mà chủ yếu ở đây chính là thao tác với mã nguồn mở Jomla

Thời gian nghiên cứu sẽ phụ thuộc vào người nghiên cứu, với tôi thì đã nghiên cứu về Jomla từ năm 2010, và cho upload website chạy được 1 năm

Để có thể lập trình được một Website chuyên nghiệp thì cần có nhiểu người(mỗi người làm một công đoạn), ở đây chúng ta muốn một mình làm nên tất cả thì cần sử dụng mã nguồn mở, vì mã nguồn mở có nhiều người cùng phát triển, nên có rất nhiều lợi thế nhưng củng có rất nhiều nhược điểm cần phải khắc phục Sau đây xin phân tích một số ưu và nhược điểm của mã nguồn mở Jomla

 Ư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 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

 Nhược điểm:

+ Mã nguồn mở nên có nhiều người biết thì dễ bị phát hiện lỗ hỏng

+ 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 bao giờ dùng tới

- Việt hóa mã nguồn mở Jomla và thiết kế theo cấu trúc của một

Website giáo dục là những đối tượng cần nghiên

cứu 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 Jomla trên máy, chúng cần chuẩn bị một số thứ sau:

 Chuẩn bị:

+ Wamp5 là chương trình tạo máy dịch vụ Web(Web Sever) trên máy cá nhân Địa chỉ Dowload như sau: http://www.wampserver.com/en/

+ Gói mã nguồn mở Jomla phiên bản chính thức mới nhất tại địa chỉ:

http://www.joomla.org/ hoặc http://www.joomla.org/download.html

+ Gói việt hóa Dowload tại địa chỉ: http://joomlaviet.org/

Click vào đây để Download

+ Một số Modul cần thiết tại địa chỉ: http://extensions.joomla.org/

+ Một số template joomla(giao diện cho Jomla) tại địa chỉ:

http://www.joomla24.com/

4 NHIỆM VỤ NGHIÊN CỨU:

- Cài đặt Jomla trên máy cá nhân, việt hóa, chỉnh sửa cho phù hợp là nhiệm vụ của chúng ta Để cài đặt thành công chúng ta cần chuẩn bị đầy đủ các phần mềm cần thiết như nói ở trên

 Cài đặt máy chủ dịch vụ:

Wamp5 là chương trình tạo máy dịch vụ Web (Web Server) trên máy tính cá nhân (Localhost) được tích hợp sẵn Apache, PHP, MySQL và các công cụ như PHPmyadmin, SQLitemanager Ưu điểm của Wamp5 là đơn giản, dễ sử dụng

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 Jomla Nếu chưa

rõ bạn có thể xem thêm phần phụ lục bài 1

 Tạo cơ sở dữ liệu cho Website:

- 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

* Các bước tạo Database cho Jomla:

 Vào Internet Explore gõ

localhost-> Enter

 Click vào phpmyadmin

 Gõ tên cơ sở dữ liệu(ví dụ:

truongchinh_database)

 Click nút Create

- 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 Jomla và có thể bắt đầu chỉnh sửa thiết kế Website được rồi

Có thể tham khảo thêm bài 2 ở phần phụ lục

5 PHƯƠNG PHÁP NGHIÊN CỨU:

- Phương pháp hiệu quả nhất để tìm

là tự thực hành và trải nghiệm Hãy tự mình thực hành và tự mày mò để tự tìm ra chân lí Đây là một phương pháp hiệu quả nhất để nghiên cứu đề tài này

Tiếp theo chúng ta sẽ cài đặt Jomla lên máy chủ vừa cài và bắt đầu trải nghiệm với Jomla 1.5.22

5 1 Cài đặt Jomla 1.5.22 trên máy cá nhân:

- Để cài đặt Jomla chúng ta vào nơi download về tìm phiên bản jomla cần cài đặt Ở đây ta chọn phiên bản 1.5.22, copy vào thư mục jomla của đĩa D:\Wamp\www và giải nén Xong mới tiến hành cài đặt jomla Hoặc có thể tạo thư mục Jomla trong www và giải nén tất các tập tin vào trong thư mục Jomla

 Vào Internet Explore gõ localhost-> Enter

 Click vào Next

 Click vào Next

 Click vào Next

 Gõ các thông tin như

hình bên

 Click vào Next

 Click vào Next.

 Điền các thông tin như tên Website, địa chỉ email người quản trị Website, tên tài khoản và mật khẩu người quản trị

Click nút Install Defaul Sample Data

Tới đây chúng ta đã hoàn thành cài đặt jomla vào thư mục chứa Website xóa thư mục installation đi và chạy lại trang web để xem thử, lúc này một trang web mặc định sẽ chạy lên Chúng ta cần vào phần quản trị(phần Admin) để chỉnh sửa lại Có thể tham khảo thêm bài 3 ở phần phục lục

5 2 Việt hóa Website:

- Sau khi cài đặt xong vào trình duyệt web gõ http://localhost/jomla 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: VN_front-end.zip và joomla-1.5_vi-VN_back-end.zip download trên mạng về

joomla-1.5_vi 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

 Vào trình duyệt web gõ http://localhost/jomla/administrator

 Gõ tài khoản là: admin và mật khẩu khi cài đặt là abc123

 Click vào Extension->Install/Uninstall.

 Click vào nút Browse… Chọn nơi lưu trữ các tập tin 1.5_vi-VN_front-end.zip và joomla-1.5_vi-VN_back-end.zip

joomla- Click nút Upload File & Install.

 Click vào Extension->Language Manager

 Bấm chọn vào Viet Nam

 Click nút Default và kiểm tra kết quả

5 3 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ế

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 ý)

Trước khi tạo các menu chính thì hãy tạo các chủ đề(Section) và chủ đề con(Category) trước, cách tạo như tạo cây thư mục vậy Ví dụ(tham khảo chi tiết ở bài 4 phần phụ lục):

Chủ đề Chủ đề con

* Tạo chủ đề như sau:

 Đăng nhập vào quản trị chọn Section Manager

 Bấm nút New và gõ tên chủ đề như hình sau

 Bấm nút Save

* Tạo chủ đề con như sau:

 Đăng nhập vào quản trị chọn Category Manager

 Bấm nút New và gõ tên chủ đề con như hình sau

SÁNG KIẾN KINH NGHIỆM

SKKN

SKKN-TIN HỌC

SKKN-TOÁN HỌC

SKKN-HÓA HỌC

 Bấm nút Save

* Tạo danh mục chính(Main menu):

- Sau khi đã tạo đầy đủ các chủ đề và chủ đề con phù hợp với đặc thù của trường mình ta sẽ tiến hành tạo các danh mục chính cho website

Menu Item là những mục Menu cho phép người sử dụng truy cập vào các chuyên mục của trang web Joomla! cho phép tạo ra nhiều Menu Item giống hoặc khác nhau với các kiểu hiển thị có các chức năng đa dạng Sau đây

là cách tạo một số Menu Item cơ bản(tham khảo chi tiết ở bài 5 phụ lục)

* Tạo Menu Item hiển thị nội dung - Article:

 Đăng nhập vào quản trị chọn Menus->main menu*

 Bấm nút New sẽ hiện ra hình sau:

 Chọn một loại Menu trong danh mục hiện ra.

 Điền thông tin cho đây đủ tùy theo từng loại menu

 Bấm save để hoàn thành tạoMenu

* Thiết lập thông số căn bản cho menu

Category: Chọn một category để hiển thị tất cả bài viết trong category đó

Tên chọn lúc này có dạng ten_section/Ten_category

Description: Hiển thị mô tả của category đó Giá trị Hide là ẩn, và show là

hiển thị Mô tả được lấy ra khi tạo category

Hiển thị danh sách các nội dung-Article có thuộc tính lưu trữ Hiển thị toàn bộ nội dung của một bài viết-Article

Hiển thị khung soạn thảo để viết bài viết mới-Article Hiển thị nội dung của một chủ đề con dưới dạng tóm tắt-Blog Hiển thị nội dung của một chủ đề con dưới dạng danh sách Hiển thị các nội dung được chọn hiển thị trên Front Page Hiển thị nội dung của một chủ đề dưới dạng tóm tắt-Blog Hiển thị nội dung của một chủ đề dưới dạng danh sách

Description Image: Hiển thị ảnh đại diện của category Ảnh đại diện được

lấy ra khi tạo category

#Leading: Số lượng bài viết mở đầu Nếu menu được qui định nhiều cột thì

bài viết mở đầu sẽ chạy ngang qua tất cả các cột ở dưới và luôn luôn nằm ở trên cùng của phần hiển thị nội dung các bài viết

#Intro: Số lượng bài viết giới thiệu trên 1 trang Số lượng này sẽ được phân

bố theo kiểu 1 cột hay nhiều

Colums: Số cột hiển thị nội dung Nếu số cột lớn hơn 1, số lượng các bài viết

trong #Intro sẽ được phân chia thành nhiều cột khi chọn tham số Columns

#Links: Số lượng bài viết liên quan Hiển thị danh sách liên kết những bài

viết khác nếu số lượng bài viết nhiều hơn số lượng khai báo trong #intro

* Một số loại menu khác:

 Menu Item hiển thị phần liên hệ - Contact:

 Menu Item cấp tin News Feeds:

Hiển thị tất cả các liên hệ trong chủ đề con Hiển thị phần liên hệ

• Một số thiết lập cho Menu:

• ID: Đây là mã số danh định của Menu Item, được đánh số tự động

• Title: Tên của Menu Item, tên này sẽ xuất hiện trên Menu của trang Web

• Alias: Tên dành cho Joomla! quản lý, có thể tự đặt còn nếu để trống thì Joomla! sẽ tự đặt theo Title nhưng không có dấu và khoảng cách Tên này thường dùng trong chức năng SEO/SEF

• Link: Địa chỉ liên kết của Menu Item này

• Display in: Chọn hiển thị trong Menu nào

• Parent Item: Chọn cấp độ cho Menu Item, Top là cao nhất còn nếu chọn tên Menu Item nào thì Menu Item này sẽ là Menu Item phụ (Sub) của Menu Item được chọn

• Published: Trạng thái hiển thị để sử dụng, No là không hiển thị và Yes

là hiển thị

• Order: Sắp xếp thứ tự vị trí cho Menu Item, thứ tự này có thể thay đổi được trong Menu Item Manager.

• Access Level: Chọn mức độ truy cập, Publish: bất cứ ai cũng truy cập được Menu Item này, Registered: Những thành viên sau khi đăng nhập mới truy cập được, Special: Chỉ có các thành viên được cấp quyền đặc biệt mới truy cập được

• On Click, Open in: Chọn các trạng thái mở của trình duyệt khi nhấn vào Meu Item này

* Tạo bài viết mới:

- Các bài viết(Content) trong joomla được tổ chức vào các Nhóm tin(Session hay Chủ đề) và các Chủ đề con(category) Việc bố trí và sắp xếp các bài viết vào các đơn vị trên phụ thuộc vào cấu trúc nội dung của từng website Chúng

ta nên tổ chức thông tin theo dạng cây từ Session -> category -> Content và định hình cấu trúc trước khi bắt tay vào tạo các đơn vị thông tin trên website Khi đã định hình được cấu trúc thông tin của website thì chúng ta tạo lần lượt

từ trên xuống Tạo các Session trước rồi đến các category trong Session đó Sau khi hoàn thiện các Session và category rồi mới tiến hành viết bài viết vào các đơn vị thông tin này

Để viết bài mới hoặc đưa lại tin trên một số báo mạng về hình thức là như nhau thay vì gõ từng chữ thì chúng ta sẽ copy các nội dung từ báo mạng

về để đưa tin trên website của mình Lưu ý khi đưa tin thì đề nguồn gốc của bài là được Bây giờ chúng ta cùng trãi nghiệm việc lấy tin trên báo mạng

 Đăng nhập vào quản trị và chọn Add New Article

 Copy tiêu đề bài viết dán vào dòng Tile

 Chọn chủ đề ở dòng Section

 Chọn Yes ở dòng Pulished để bài viết được hiện thị

 Chọn Yes ở dòng Front Page để bài viết hiện thị ở trang chủ, No là trang con