Bài giảng Joomla

Nội dung text: Bài giảng Joomla

1. WHAT IS JOOMLA? See how easy it is! Author: Luong Khiem 11/9/2010
2. See how easy it is! 1 WHAT IS JOOMLA? WHAT IS JOOMLA? See how easy it is! I) What is Joomla? 1. Giới thiệu Joomla 2. Ứng dụng Joomla 3. Cài đặt Joomla II) Administrator Overview 1. Tổng quan trang quản trị 2. Cấu hình chung 3. Quản lý ngôn ngữ 4. Quản lý giao diện 5. Quản trị nội dung 6. Quản lý menu 7. Quản lý Module, Component III) Advance Joomla 1. Template Joomla 2. Component 3. SEO 4. Bảo mật Website Joomla Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 1
3. See how easy it is! 2 WHAT IS JOOMLA? Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 2
4. See how easy it is! 3 WHAT IS JOOMLA? I) What is Joomla? 1. Giới thiệu Joomla - Joomla được phát âm theo tiếng Swahili như là 'jumla' nghĩa là "đồng tâm hiệp lực". - Joomla! là một hệ quản trị nội dung mã nguồn mở (tiếng Anh: Open Source Content Management Systems). Joomla! được viết bằng ngôn ngữ PHP và kết nối tới cơ sở dữ liệu MySQL , cho phép người sử dụng có thể dễ dàng xuất bản các nội dung của họ lên Internet hoặc Intranet. - Joomla có các đặc tính cơ bản là: bộ đệm trang (page caching) để tăng tốc độ hiển thị, lập chỉ mục, đọc tin RSS (RSS feeds), trang dùng để in, bản tin nhanh, blog, diễn đàn, bình chọn, lịch biểu, tìm kiếm trong Site và hỗ trợ đa ngôn ngữ. - Joomla! được sử dụng ở khắp mọi nơi trên thế giới, từ những website cá nhân cho tới những hệ thống website doanh nghiệp có tính phức tạp cao, cung cấp nhiều dịch vụ và ứng dụng. Joomla có thể dễ dàng cài đặt, dễ dàng quản lý và có độ tin cậy cao. - Joomla có mã nguồn mở do đó việc sử dụng Joomla là hoàn toàn miễn phí cho tất cả mọi người trên thế giới. 2. Ứng dụng Joomla - Các cổng thông tin điện tử hoặc các website doanh nghiệp: - Thương mại điện tử trực tuyến - Báo điện tử, tạp chí điện tử - Website của các doanh nghiệp vừa và nhỏ - Website của các cơ quan, tổ chức phi chính phủ - Website các trường học Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 3
5. See how easy it is! 4 WHAT IS JOOMLA? - Website của gia đình hay cá nhân - 3. Cài đặt Joomla 3.1 Cài đặt Home Server - Joomla! Là một hệ quản trị nội dung mã nguồn mở được viết trên ngôn ngữ PHP kết nối với cơ sở dữ liệu MySQL do đó để một website Joomla có thể chạy được chúng ta cần có một server được cài đặt PHP và MySQL và một số module khác. - Thông thường thì chúng ta sẽ thuê Hosting từ các nhà cung cấp dịch vụ Domain Hosting. Để phục vụ cho việc học tập và nghiên cứu chúng ta cũng có thể tự minh xây dựng một Home Server để chạy website Joomla ngay tại máy mình. - Để xây dựng Home Server ta có thể sử dụng nhiều ứng dụng khác nhau như: Apache, XAMPP, Uniform Server, Với ưu điểm nổi bật về các plugin cũng như sự tiện dụng dễ sử dụng thì Uniform Server là một lựa chọn - Cài đặt Uniform Server: . Download Uniform Server tại: . Sau khi download ta chạy để giải nén Uniform Server: . Sau khi giải nén ta chạy file Start.exe để khởi động server Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 4
6. See how easy it is! 5 WHAT IS JOOMLA? . Start Server: . Như vậy bạn đã cài đặt xong Home Server Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 5
7. See how easy it is! 6 WHAT IS JOOMLA? 3.2 Cài đặt Joomla Bước 1:Tạo cơ sở dữ liệu (CSDL) - Truy cập phpMyadmin để tạo CSDL cho website theo link: Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 6
8. See how easy it is! 7 WHAT IS JOOMLA? - Tạo CSDL cho website, ở đây ta đặt tên CSDL là joomla Bước 2: Cài đặt Joomla . Dowload source Joomla tại: . Giải nén source joomla vào thư mục WWW của server Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 7
9. See how easy it is! 8 WHAT IS JOOMLA? . Để tiến hành cài đặt website ta chạy đường dẫn: Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 8
10. See how easy it is! 9 WHAT IS JOOMLA? . Bấm next để qua bước 2: Pre-installation Check. Bước này để kiểm tra cấu hình Server. . Bấm Next để qua bước 3: Licence. Bước này để giới thiệu về bản quyền Joomla, nhưng Joomla là mã nguồn mở nên chúng ta có thể không cần quan tâm bước này và nhấn Next để qua bước 4. . Ở bước tiếp theo này chúng ta khai báo thông tin CSDL cho website joomla Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 9
11. See how easy it is! 10 WHAT IS JOOMLA? Note:Chúng ta cần đổi tên Prefix mặc định của joomla là “jos_” thành một tên khác ví dụ như: “lk_” để bảo mật cho website, điều này sẽ được nói rõ hơn trong phần “Bảo Mật Joomla” . Ở bước tiếp theo FTP Configurationchúng ta có thể cấu hình tài khoản FTP cho site ngay tại đây, thông thường chúng ta không cấu hình FTP nên chọn Next . Bước Main Configuration để cấu hình thông tin website: . Site name: Đặt tên cho website . Your Email: cấu hình email của administrator . Admin password: cấu hình password cho user: admin . Install Sample Data: cài đặt dữ liệu mẫu cho website để bạn dễ dàng làm việc với một website mới bắt đầu xây dựng Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 10
12. See how easy it is! 11 WHAT IS JOOMLA? . Ở bước cuối cùng hoàn tất việc cài đặt bạn cần phải xóa thư mục “Installation” trong source cài đặt của bạn Như vậy bạn đã hoàn tất việc cài đặt một website joomla. Bạn có thể xem website vừa cài đặt: Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 11
13. See how easy it is! 12 WHAT IS JOOMLA? II) Administrator Overview - Trang quản trị administrator của Joomla để điều hành toàn bộ website Joomla. Với giao diện được thiết kế tao nhã dễ sử dụng người dùng có thể xây dựng cấu trúc website, biên tập và xuất bản nội dung trang web. - Cấu trúc một trang quản trị Administrator của Joomla thường gồm 4 vùng: Menubar – thanh menu, Toolbar – thanh công cụ, Infobar – thanh thông tin, Workspace – vùng làm việc. - Để đăng nhập vào trang quản trị ta đăng nhập với đường dẫn “/administrator”. Ở đây ta đăng nhập với đường dẫn sau: - Tài khoản đăng nhập ta đăng nhập với: o Tên đăng nhập: admin o Mật khẩu: (là mật khẩu mà bạn tạo trong quá trình cài đặt joomla) Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 12
14. See how easy it is! 13 WHAT IS JOOMLA? 1. Tổng quan trang quản trị Trang quản trị được bố thanh những các vùng giúp người dùng dễ dàn quản trị trang web của mình . Vùng 1: Thanh menu chứa menu tất cả các chức năng, ứng dụng, quản trị nội dung của website . Vùng 2:Thanh thông tin, giúp người quản trị (admin) có thể biết về tình trạng website như: Phiên bản joomla đang xài ( Phiên bản 1.5.20) Nút “Xem trước”, email, user đang đăng nhập, Nút “Thoát”. . Vùng 3:Vùng làm việc, giúp admin có thể dễ dàng di chuyển đến các mục cần làm một cách dễ dàng và nhanh chóng như: Viết bài mới, quản lý chủ đề, quản lý ngôn ngữ, quản lý thành viên, . Thêm bài viết mới: biên soạn thêm một bài viết mới . Quản lý bài viết: quản lý tất cả các bài viết . Quản lý nhóm tin:quản lý, chỉnh sửa các nhóm tin . Quản lý chủ đề:quản lý, chỉnh sửa chủ đề của các nhóm tin . Quản lý đa phương tiện: Cho phép quản lý các hình ảnh, flash, tài liệu, của website . Quản lý menu: Chỉnh sửa, thêm xóa các menu . Quản lý ngôn ngữ:cho phép chọn ngôn ngữ mặc định cho website cũng như trang quản trị. . Quản lý thành viên: quản trị các thành viên của website . Cấu hình chung:cho phép cấu hình hệ thống cho server, hệ thống cũng như tổng thể trang web. Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 13
15. See how easy it is! 14 WHAT IS JOOMLA? . Vùng 4:Các Công cụ ( Module) hiển thị trong trang quản trị giúp admin dễ dàng thống kê tình trạng website như: số lượng user đang đăng nhập, bài viết mới nhất, bài viết đọc nhiều nhất, 2. Cấu hình chung Là trung tâm cấu hình chính của một website Joomla, tất cả cấu hình quan trọng đều được cấu hình ở đây, tất cả những chỉnh sửa trong “Cấu hình chung” đều được lưu xuống file “configuration.php” 2.1. Trang Web . Cấu hình Site: . Cho phép admin tùy chọn cho website ngừng hoạt động hay không. . Cấu hình tên website . Chọn trình soạn thảo nội dung bài viết . Email website . Cấu hình máy tìm kiếm:Nơi để Google hiểu tổng thể về website của bạn thông qua các từ khoa “Meta” và mô tả về website của bạn (Keyword descriptions) . Thiết lập SEO: Admin có thể chỉnh đường dẫn thân thiện với Google (Google friendly). Phần này chúng ta sẽ đi chi tiết trong phần SEO. Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 14
16. See how easy it is! 15 WHAT IS JOOMLA? 2.2. Hệ thống Là trung tâm cấu hình toàn bộ hệ thống website từ thiết lập hệ thống, cấu hình thành viên, cache cũng như quản lý đa phương tiện. Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 15
17. See how easy it is! 16 WHAT IS JOOMLA? 2.3. Máy chủ . Cấu hình máy chủ: admin cấu hình thư mục chứa file tạm (Temp). “Nén trang dạng GZIP”: cho phép nén website ở dạng gzip để tối ưu tốc độ website . Cấu hình múi giờ:Cài đặt múi giờ cho website . Cấu hình FTP:Bước này giúp cấu hình, chỉnh sửa FTP trong quá trình cài đặt chúng ta bỏ qua. Thông thường admin không cấu hình FTP ở đây để đảm bảo về vấn đề bảo mật . Cấu hình CSDL:cấu hình chỉnh sửa thông tin về CSDL của website . Cấu hình mail:Cấu hình email cho website 3. Quản lý ngôn ngữ Admin quản lý ngôn ngữ website thông qua trang này, admin có thể cài đặt các gói ngôn ngữ cho website. Để cài đặt gói ngôn ngữ chúng ta làm như sau: . Download gói ngôn ngữ tại: joomla Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 16
18. See how easy it is! 17 WHAT IS JOOMLA? . Sau khi download về máy bạn tiến hành cài đặt : Phần mở rộng Cài đặt/Tháo gỡ Chọn tệp tin Tải lên & Cài đặt Một website có thể nhiều ngôn ngữ bạn có thể chọn ngôn ngữ mặc định cho website như sau: . Trên thanh menu bạn chọn: Phần mở rộng Quản lý ngôn ngữ . Chọn ngôn ngữ mặc định cho website Tương tự như vậy chúng ta cũng có thể cài đặt và chọn ngôn ngữ mặc định cho trang Admin Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 17
19. See how easy it is! 18 WHAT IS JOOMLA? 4. Quản lý giao diện o Trang “Quản lý giao diện” giúp admin chọn template mặc định cho site cũng như là có thể chỉnh sửa hoặc xem trước template đó. o Chọn: “Phần mở rộng Quản lý giao diện” để vào trang quản trị . Để chọn giao diện mặc định cho website bạn chỉ cần chọn “Template” sau đó chọn “Mặc định” . Muốn sửa template nào bạn chỉ cần chọn template đó và chọn “Sửa” Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 18
20. See how easy it is! 19 WHAT IS JOOMLA? 5. Quản trị nội dung Nội dung của một trang Joomla được quản lý thông qua cấu trúc 3 tầng: Nhóm Tin Chủ đề con Bài viết Một website sẽ bao gồm một hoặc nhiều “Nhóm tin”, trong mỗi “Nhóm tin” sẽ bao gồm một hoặc nhiều “Chủ đề con”, và các “Bài viết” được đặt trong từng “Chủ đề con” . Để quản lý “Nhóm tin” trên thanh menu chọn: Nội dung Quản lý nhóm tin . Để quản lý “Chủ đề con” trên thanh menu chọn: Nội dung Quản lý chủ đề con . Để quản lý “Bài viết” trên thanh menu chọn: Nội dung Quản lý bài viết Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 19
21. See how easy it is! 20 WHAT IS JOOMLA? Trong trang “Quản lý bài viết” admin có thể quản lý toàn bộ các bài viết của website. Admin có thể chỉnh sửa một bài viết, thêm mới một bài viết hay cũng có thể di chuyển bài viết từ “Chủ đề con” này sang “Chủ đề con” khác, Thêm một bài viết mới: Để thêm một bài viết mới thì trong trang “Quản lý bài viết” ta chọn “Thêm mới” Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 20
22. See how easy it is! 21 WHAT IS JOOMLA? 6. Quản lý menu Quản lý các menu của website. Admin có thể thêm, xóa, sửa các menu. Chúng ta sẽ tạo ra các “Danh mục menu”, admin có thể cho “Danh mục menu” hiện ra trang chủ ở các vị trí tùy ý theo Layout của website 7. Quản lý Module, Component 7.1. Quản lý Module . Module Joomla thường được cài đặt để biểu diễn nội dung trang web hoặc là các media lên trang chủ website hoặc các trang trong của website. . Để vào “Quản lý Module” trên thanh menu admistrator ta chọn: Phần mở rộng Quản lý Module Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 21
23. See how easy it is! 22 WHAT IS JOOMLA? . Admin có thể dễ dàng thêm, xóa, sửa các module, cấu hình hiển thị vị trí của module ra ngoài website 7.2. Quản lý Component Cho phép admin cấu hình, tinh chỉnh các chức năng của các Component được cài đặt vào website Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 22
24. See how easy it is! 23 WHAT IS JOOMLA? . Bảng quảng cáo: Component “Bảng quảng cáo” để tạo ra các banner quảng cáo đăng trên site, hỗ trợ khi người dùng click vào banner sẽ trỏ đến một url nào đó. Ngoài ra component này còn hỗ trợ đếm số lượt click vào banner quảng cáo giúp admin quản lý được độ hiệu quả của banner . Liên hệ: Component “Liên Hệ” cho phép bạn tạo thông tin liên hệ của website, bạn có thể thêm tên, địa chỉ, số điện thoại, fax, . News Feed: Cho phép bạn thêm những feed lấy từ website khác về trên website của bạn . Thăm dò: Cho phép bạn tạo những bản thăm dò cho người dùng website bình chọn . Tìm kiếm: Chức năng tìm kiếm cho website của bạn . Liên kết web: Cho phép bạn thêm những link của các website khác lên trang của bạn Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 23
25. See how easy it is! 24 WHAT IS JOOMLA? III) Advance Joomla 1. HTML, CSS, Javascript 1.1. HTML Trong thực tế trang Web thường có 2 loại là web tĩnh và web động. Trang web tĩnh là trang HTML không kết nối cơ sở dữ liệu(csdl) , ngược lại trang web động là trang có kết nối csdl như trang PHP, ASP, JSP, . Nhưng mà nó chung 1 trang web dù tĩnh hay động nếu bạn muốn biểu diễn dữ liệu thì bạn cần phải dùng đến các thẻ HTLM trong đó . Như vậy các thẻ HTML rất quan trọng trong một trang web của bạn . Cấu trúc một trang HTML cơ bản Như đã nói trên HTML để biểu diễn dữ liệu trang web và được trình bày trên các Web Browser, và một trang HTML được lưu với phần mở rộng là .htm hay .html . Cấu trúc trang web HTML được bắt đầu bởi thẻ mở và kết thúc bằng thẻ đóng . Bạn muốn làm chủ được HTML thì bạn cần phải nắm vững được các thẻ của HTML , các thẻ trong HTML thường có 2 loại thẻ là : - Loại thẻ mở có kèm theo thẻ đóng . Ex: , , . - Loại thẻ mở mà không có thẻ đóng . Ex: , , , Nói chung là HTML rất dễ dàng để các bạn tiếp cận với nó , mình sẽ đưa ra cho các bạn một cấu trúc của 1 trang HTML cơ bản //cấu trúc một trang HTML cơ bản Wellcome to Website //title của một trang web cơ bản //thẻ này dung để đưa thông tin trang web dzo bộ máy tịm kiếm Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 24
26. See how easy it is! 25 WHAT IS JOOMLA? HTML và các thẻ cơ bản Note: Các thẻ trong HTML đều không phân biệt chữ hoa ,chững thường. Các thẻ HTML thông dụng 1) Thẻ Định nghĩa các mô tả về trang HTML.Tất cả các thông tin tong thẻ này đều không xuất hiện trên trang web . Các bạn có thể chẹn thêm các thẻ bên trong thẻ head như , , , Ex: Wellcome to www.thegioimang.org //title của một trang web cơ bản //thẻ này dung để đưa thông tin trang web dzo bộ máy tịm kiếm 2) Thẻ . Title cho phép bạn trình bày chuỗi thông tin của trang web lên trên thanh tiêu đề của trang web mỗi khi web chạy . Ex: Wellcome to website 3) Thẻ Trong HTML thì tất cả các thông tin trong thanh đều được biểu thị lên trên trang web để người sử dụng nhìn thấy . Trong thẻ này bạn cần kết hợp thật nhuần Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 25
27. See how easy it is! 26 WHAT IS JOOMLA? nhuyễn các thẻ với nhau để tạ nên một trang web hoàn thiện 4) Các thẻ định dạng Trong phần nà thì mình chỉ giới thiệu đến các bạn các thẻ thông dụng dùng để hỗ trợ trong việc định dạng văn bản trên web HTML. Một số thẻ đặc biệt các bạn nghiên cứu thêm nha . 4.1. Thẻ Cho phép bạn định dạng một đoạn văn bản bằng các thuộc tính của nó . Ví dụ như bạn muốn canh giữa một đoạn văn bản thì bạn dùng thuộc tính algin=”center”: Chào mừng bạn đến với website. 4.2. Thẻ Thẻ này cũng tương tự như thẻ nhưng mà khi kết thúc thẻ thì dữn liệu trình bày sẽ tự động xuống hàng . Nếu như bạn sử dụng 2 thẻ liên tiếp thì sau khi kết thúc thẻ thứ nhất sẽ cách thẻ thứ 2 một khoảng nhất định. Ngoài ra ta có thể sử dụng thẻ dùng để xuống hàng . là thẻ không có thẻ đóng và khi xuống hàng nó sẽ không cách 1 đoạn giống như thẻ mà nó sẽ hiển thị ở hàng tiếp theo. 4.3. Thẻ Thẻ dùng để các bạn định dạng font chữ của đoạn văn bản nằm trong tag này bằng các thuộc tính của nó như : - Color: định dạng màu chữ cho đoạn văn bản. Màu sắc thì các bạn có thể biểu diễn bằng cách dùng tên màu bằng tiếng anh như: red,blue,green, hoặc các bạn cũng có thể lấy mã màu chèn dzo như color=”#66CCFF”. Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 26
28. See how easy it is! 27 WHAT IS JOOMLA? - Size: định dạng cỡ chữ - Face: định dạng kiểu chữ cho văn bản như: arial,time new romal,tohoma, 4.4. Một số thẻ đị dạng văn bản thông thường: : Headers (H1 to H6) (TIÊU ĐỀ - 6 cấp từ 1 đến 6) : Paragraphs (Xác định một đọan văn bản) : Un order List (danh sách - Bullet ) :Order List (danh sách - Numbering) : Horizontal Rules. (chèn đường kẻ ngang). : line breaks ( ngắt dòng) : underline (gạch chân văn bản) : Italic (Văn bản Nghiêng) :Bold (gạch chân in đậm) • Khoảng trống (trong trường hợp muốn có nhiều hơn 1 ký tự trống):   • Dấu nhỏ hơn ( ): < > • Dấu ngoặc kép (“): " • Ký hiệu : © • 5) Thẻ định dạng bảng Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 27
29. See how easy it is! 28 WHAT IS JOOMLA? Khi bạn muốn trình bày một bảng dữ liệu lên web chẳng hạn như trình bày bảng điểm của sinh viên hay là danh sách các sinh viên thì bạn cần phải dùng đến thẻ này . Sau khi khai bào thẻ thì bạn cần quan tâm đến các thẻ hàng và thẻ cột Và bạn cần quan tâm đến các thuộc tính của nó . Đây là một số thuộc tính của thẻ : – BORDER=“x” : kích thước viền – BGCOLOR: màu nền, ALIGN: canh chỉnh – WIDTH,HEIGHT : kích thước cao, rộng – CELLPADDING, CELLSPACING : khoảng cách giũa các hàng và cột – ROWSPAN, COLSPAN: trộn các dòng hoặc cột – : dòng, cột, : heading – : tiêu đề mô tả bảng – bgcolor=“màu”: màu nền của bảng – background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho bảng. Nên sử dụng đường dẫn tương đối nếu có thể Note: Khi thiết kế table các bạn chỉ cần quan tâm đến chiều rộng chứ không cần quan tâm đến chiều cao của vì chiều cao của nó phụ thuộc vào độ dài sữ liệu của ta. Tương tự thì thẻ hàng thì ta chỉ quan tâm đến chiều cao ,còn thẻ cột thì ta chỉ quan tâm đến thẻ rộng. Ex: Để các bạn hình dung rõ hơn về table ta đưa ra một ví dụ để các bạn làm thì các bạn sẽ hiểu được table. Các bạn hãy xây dựng trang web giống như hình dưới: Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 28
30. See how easy it is! 29 WHAT IS JOOMLA? Code: HTML và các thẻ cơ bản STT Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 29
31. See how easy it is! 30 WHAT IS JOOMLA? Họ & Tên profile MSSV Quê Quán 001 Nguyen Van A 0511125 Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 30
32. See how easy it is! 31 WHAT IS JOOMLA? Sài Gòn 002 Nguyen Van B 0511126 Hà Nội 003 Nguyen Van C Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 31
33. See how easy it is! 32 WHAT IS JOOMLA? 0511127 Hà Nội 5) Thẻ Hình Ảnh Thẻ này dùng để chèn hình ảnh vào trong trang web , các bạn có thể thêm các thuộc tính chiều cao ,độ rộng cho hình ảnh chú thích cho hình ảnh(alt). Thẻ là thẻ không có thẻ đóng. Ex: 6) Thẻ Liên Kết Khi mà bạn cần lien kết đến mộ trang web hay một địa chỉ email thị bạn có thể dùng thẻ này để liên kết . Để cho người dùng có thể chọn đường liên kết thì bạn có thể sử dụng tên lien kết hay cũng có thể dùng hình ảnh để biểu diễn cho liên kết . 7) Thẻ Input Thẻ là thẻ không có thẻ đóng . ,nó cho phép người dùng nhập dữ liệu hay chỉ thực thi một nhiệm vụ nào đó . Trong thẻ input bao gồm các thuộc tính : text , Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 32
34. See how easy it is! 33 WHAT IS JOOMLA? password,submit,button,reset,checkbox,radio,hidden,image.Sau đây ta trình bày cho các bạn về các thuộc tính trên của thẻ 7.1. Thẻ input dạng text Thẻ này cho phép người dùng nhập dữ kiệu dạng text. Ta có thể giới hạn số lượng chữ bằng option “maxlenght” ,giới hạn chiều dài theo kích thước của table bằng option “size” hay có thể gán giá trị mặc định bằng option “value”. Ex: 7.2. Thẻ input dạng password Cái này cũng tương tự như dạng text , nó cho phép người dùng nhập Password đăng nhập.Và các giá trị mà người dùng nhìn thấy chỉ ở dưới 2 dạng * hay . tùy thuộc vào trình duyệt web của bạn Ex: 7.3. Thẻ input dạng checkbox  Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra.  Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này.  Thẻ: : Mỗi ô cần 1 thẻ  Thuộc tính: – name=“tên_đt”: quan trọng. Các đối tượng cùng tên thì thuộc cùng nhóm. – type=“radio” – value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ô này. – checked: nếu có thì nút này mặc định được chọn Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 33
35. See how easy it is! 34 WHAT IS JOOMLA? 7.4. Thẻ input dạng radio  Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra.  Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này.  Thẻ: : Mỗi ô cần 1 thẻ  Thuộc tính: – name=“tên_đt”: quan trọng. Các đối tượng cùng tên thì thuộc cùng nhóm. – type=“radio” – value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ô này. – checked: nếu có thì nút này mặc định được chọn 7.5. Thẻ input dạng submit Thẻ này cho phép bạn chấp nhận dữ liệu nhập trong các thẻ input ở trang Web. Có nghĩa là khi các bạn đồng ý chuyển dữ liệu lên bằng phương thức post (trong form) hay get (trong query string) Ex: 7.6. Thẻ dạng Button  Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra.  Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này.  Thẻ: : Mỗi ô cần 1 thẻ  Thuộc tính: – name=“tên_đt”: quan trọng. Các đối tượng cùng tên thì thuộc cùng nhóm. – type=“radio” Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 34
36. See how easy it is! 35 WHAT IS JOOMLA? – value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ô này. – checked: nếu có thì nút này mặc định được chọn 7.7. Thẻ input dạng Reset Thẻ reset cho phép bạn phục hồi những dữ liệu nhập hay chọn trong thẻ input ,select ,textarea để trở về trạng thái ban đầu. Ex: 7.8. Thẻ input dạng Combo Box (Drop-down menu)  Bao gồm một danh sách có nhiều phần tử. Tại một thời điểm chỉ có 1 phần tử được chọn  NSD có thể chọn 1 phần tử trong danh sách xổ xuống bằng cách kích vào mũi tên bên phải hộp danh sách.  Thẻ tạo hộp danh sách: Danh sách phần tử  Thuộc tính: name=“tên_ĐT”: quan trọng  Thẻ tạo 1 phần tử trong danh sách: Tiêu đề phần tử  Thuộc tính: – value=“giá trị”: giá trị chương trình nhận được nếu phần tử được chọn – selected: nếu có thì phần tử này mặc định được chọn 7.9. Thẻ input dạng ListBox Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 35
37. See how easy it is! 36 WHAT IS JOOMLA?  Tương tự như Combo box, tuy nhiên có thể nhìn thấy nhiều phần tử cùng lúc, có thể lựa chọn nhiều phần tử  Thẻ:  Thuộc tính: tương tự của combo tuy nhiên có 2 thuộc tính khác: – size=“số dòng” – multiple: cho phép lựa chọn nhiều phần tử cùng lúc  Thẻ tương tự của combo box 7.10. The input dạng Hộp nhập văn bản nhiều dòng (TextArea)  Cho phép nhập văn bản dài trên nhiều dòng.  Thẻ: Nội dung mặc định  Thuộc tính: – name=“tên_ĐT”: quan trọng – rows=“số dòng” – cols=“số cột” rows tính theo số dòng văn bản, cols tính theo số ký tự chuẩn trên dòng. 7.11. Thẻ input dạng Hidden Là một dạng thẻ dạng text nhưng không cho người dùng thấy dữ liệu. Với thẻ này thì các bạn cần phải định nghĩa trước một giá trị cụ thể trong trong thẻ này . Với thẻ này thì bạn sẽ làm Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 36
38. See how easy it is! 37 WHAT IS JOOMLA? những cái tiềm ẩn như : nếu như bạn đăng nhập quá 5 lần thì sẽ khóa đăng nhập 15 phút rùi mới tiếp tục cho bạn đăng nhầp Ex: 8) Thẻ Form Ở phia trên chúng ta đã được giới thiệu các thẻ input nhưng chắc hẳn các bạn chưa biết rằng các thẻ input này sẽ được nhập ở đâu? Câu trả lời ở đây chính là thẻ . Khi các bạn submit dữ liệu nhập từ các Web Browser lên server bằng 2 phương thức Post và Get trong thẻ form . Một số chú ý đối với thẻ form:  Sử dụng để chứa mọi đối tượng khác  Không nhìn thấy khi trang web được hiển thị  Quy định một số thuộc tính quan trọng như method, action.  Thẻ tạo form:  Các thuộc tính: – name=“tên_form”: Không quan trọng lắm – action=“địa chỉ nhận dữ liệu”: Nên sử dụng đường dẫn tương đối nếu nằm trong cùng 1 web – method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị: • GET (mặc định) • POST Ex; Một ví dụ cho thẻ form dùng để upload tập tin lên server. Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 37
39. See how easy it is! 38 WHAT IS JOOMLA? Lời kết : HTML có thể nói là ngọn nguồn của mọi trang web , tất cả các trang web dù bằng ngôn ngữ nào cũng phải đều sử dụng đến HTML. 1.2. CSS 1.2.1. CSS là gì CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc ) cho một tài liệu Web 1.2.2. Một số đặc tính cơ bản của CSS 1. CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính của thẻ vào trong một file riêng có phần mở rộng là ".css" CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ cần một file CSS có thể cho phép bạn quản lí định dạng và layout trên nhiều trang khác nhau. Các nhà phát triển Web có thể định nghĩa sẵn thuộc tính của một số thẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác. 2. Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt đoạn CSS của bạn phía trong thẻ , hoặc ghi nó ra file riêng với phần mở rộng ".css", ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng biệt Tuy nhiên tùy từng cách đặt khác nhau mà độ ưu tiên của nó cũng khác nhau. Mức độ ưu tiên của CSS sẽ theo thứ tự sau. 1. Style đặt trong từng thẻ HTML riêng biệt 2. Style đặt trong phần 3. Style đặt trong file mở rộng .css 4. Style mặc định của trình duyệt Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới. 3. CSS có tính kế thừa: giả sử rằng bạn có một thẻ đã được khai báo ở đầu file css với các thuộc tính như sau: #vidu { width: 200px; height: 300px; } Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 38
40. See how easy it is! 39 WHAT IS JOOMLA? Ở một chỗ nào đó trong file css bạn lại khai báo một lần nữa thẻ với các thuộc tính. #vidu { width: 400px; background-color: #CC0000; } Sau đoạn khai báo này thì thẻ sẽ có thuộc tính: #vidu { width: 400px; /* Đè lên khai báo cũ */ height: 300px; background-color: #CC0000; } 2. Template Joomla 2.1. Tổng quan về template Joomla Hệ thống Template Joomla là một hệ thống khá dễ trong họ Content Managerment System (CMS). Dưới đây là một cấu trúc cơ bản của một template Joomla: /templates /basic_template /css template_css.css /images index.php template_thumbnail.png templateDetails.xml Trong đó: . index.php Đây là file giàn trang template. . template_css.css Css stylesheet cho template (trang định kiểu). . templateDetails.xml File siêu dữ liệu (metadata) theo định dạng XML. . template_thumbnail.png Một mặt màn hình (screenshot) thu nhỏ của template, thường khoảng rộng 140 pixel và cao 90 pixel. Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 39
41. See how easy it is! 40 WHAT IS JOOMLA? 2.2. Cài đặt template Joomla Để cài đặt template Joomla bạn chọn: Phần mở rộng Cài đặt/ Tháo gỡ Chọn template Tải lên và cài đặt Sau khi cài đặt template xong bạn cần chọn template đó làm mặc định để chạy template đó Bạn chọn: Phần mở rộng Quản lý giao diện Chọn giao diện Chọn mặc định Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 40
42. See how easy it is! 41 WHAT IS JOOMLA? 2.3. Quản lý Template Với chức năng quản lý Template, Admin có thể chỉnh sửa, cấu hình chức năng giao diện toàn bộ trang web theo ý của mình. Để chỉnh sửa template thì trong trang “Quản lý giao diện” bạn click vào giao diện cần chỉnh sửa sẽ được như sau: . Chi tiết: Thông tin về tên của template và mô tả về template của bạn . Chỉ định menu: Chức năng này giúp ta xây dựng một trang website đa giao diện, chúng ta có thể chọn giao diện này sẽ được sử dụng ở những menu nào thì giao diện đó chỉ chạy trên menu đó. . Các tham số: Khu vực để bản cấu hình giao diện của mình, tùy theo mỗi giao diện sẽ được cấu hình khác nhau . Xem trước: Chức năng xem trước giao diện để dễ dàng chỉnh sửa trước khi lưu lại giao diện . Sửa HTML: Admin có thể chỉnh sửa html của template trực tiếp trong trang quản trị . Sửa CSS: Chỉnh sửa CSS của giao diện . Lưu lại: Sau khi chỉnh sửa xong giao diện ta có thể nhấn “Lưu lại” để hoàn tất Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 41
43. See how easy it is! 42 WHAT IS JOOMLA? . Áp dụng: Bạn muốn lưu lại cấu hình và muốn tiếp tục chỉnh sửa thì bạn chọn chức năng này 3. Component 3.1. Cài đặt Component Cài đặt Component cũng tương tự như việc cài đặt các module, trên thanh menu ta chọn: Phần mở rộng Cài đặt/Tháo gỡ Chọn component cần cài đặt Tải lên và cài đặt 3.2. Một số Component thông dụng 3.2.1. Component Gallery . Các “component gallery” của Joomla giúp các bạn có thể xây dựng cho mình một website biểu diễn hình ảnh như các website về nội thất, thời trang, các shop, . Joomla có một cộng đồng phát triển các component khá lớn, để download các “component gallery” tại: images/photo-gallery . Joomla có rất nhiều “component gallery” nhưng có một số component khá phổ biến và thông dụng như: Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 42
44. See how easy it is! 43 WHAT IS JOOMLA? Automicon Gallery, sigPlus, Phoca Gallery, Jphoto, Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 43
45. See how easy it is! 44 WHAT IS JOOMLA? 3.2.2. Component Docman . Bạn muốn xây dựng một trang web chia sẻ tài liệu, bạn muốn xây dựng một website giáo dục với các bài giảng được chia sẻ trên website hay là bạn muốn chia sẻ những tài liệu hướng dẫn sử dụng của sản phẩm trong công ty, . . Component Docman là một Component của Joomla giúp chúng ta có thể chia sẻ các tài liệu trực tuyến. Component này hỗ trợ chia sẻ các loại file, thống kê file, số lượt download, . Bạn có thể download component này tại: 3.2.3. Component Joomfish . Ngày nay website đã dần trở thành bộ mặt của một doanh nghiệp, mọi thông tin đến người dùng đều Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 44
46. See how easy it is! 45 WHAT IS JOOMLA? được truyền tải nhanh nhất thông qua kênh website. Cũng như là xu thế hội nhập thì một website không chỉ là một ngôn ngữ mà đòi hỏi cần thêm một vài ngôn ngữ nữa. . Joomfish được xây dựng phục vụ cho việc xây dựng một website đa ngôn ngữ, ngoài ngôn ngữ mặc định của website Joomfish hỗ trợ cho bạn dịch ra các ngôn ngữ khác . Bạn muốn website mình chạy bao nhiêu ngôn ngữ thì trước tiên các bạn cần phải cài đặt các gói ngôn ngữ đó trong “Quản lý ngôn ngữ”. Joomfish sẽ có chức năng giúp bạn dịch từ ngôn ngữ mặc định sang các ngôn ngữ khác . Bạn download Joomfish tại: 3.2.4. Component Virtual Mart . Joomla không chỉ dừng lại ở CMS mà còn phát triển website giới thiệu sản phẩm và hơn nữa là website thương mại điện tử Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 45
47. See how easy it is! 46 WHAT IS JOOMLA? . Virtual Mart là component có thể nói là đứng đầu trong mảng component sản phẩm và thương mại điện tử cho Joomla. . Virtual Mart hỗ trợ đầy đủ các tính năng giới thiệu sản phẩm, bán hàng trực tuyến, quản lý đơn hàng, phiếu giảm giá, . Các bạn download Virtual Mart tại: Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 46
48. See how easy it is! 47 WHAT IS JOOMLA? 4. SEO 4.1. Giới thiệu về SEO . SEO hay tối ưu hóa Website cho máy tìm kiếm nằm trong chiến dịch quảng bá Website là từ viết tắt của "Search Engine Optimization" hoặc "Search Engine Optimizers". Mục đích của SEO là nhằm cải thiện lượng truy cập về cả chất lẫn lượng cho Website, trực tiếp đến từ trang kết quả của các máy tìm kiếm (Google, Yahoo, Microsoft) với một số từ khóa nhất định. . Phương pháp tối ưu SEO: Google, Yahoo hay Bing là các bộ máy tìm kiếm vì thế nó xây dựng các tiêu chuẩn để đánh giá, xếp hạng website. Một website càng đáp ứng được nhiều các tiêu chuẩn của máy tìm kiếm thì càng được đánh giá tốt, cơ hội lên trên TOP sẽ cao hơn. Hiện nay, có một số cách thức quan trọng sau để thực hiện SEO: . Title - Tiêu đề trang: khai báo thẻ Page Title của website ngắn gọn, súc tích, duy nhất trong từng webpage. Các máy tìm kiếm đánh giá rất cao thẻ Page Title do nó là những gì xúc tích, hàm chứa nhất của website. . Description- Thẻ mô tả: Nó giống như một đoạn tóm tắt nội dung của website. Khi khai báo Description cũng phải viết ngắn gọn, xúc tích. Desciption thông thường là đoạn text màu đen hiện ra bên trên đường link, bên dưới tiêu đề trang trong phần kết quả tìm kiếm. . Từ khoá: Sử dụng thẻ meta keyword để thông báo các từ khóa chính của website tối các công cụ tìm kiếm. Là một cách giúp công cụ tìm kiếm nhanh chóng hiểu được nội dung chính của website. . URL: Phải xây dựng một URL tĩnh - hay URL thân thiện với người dùng và máy tìm kiếm. Trong URL thân thiện không nên có các ký tự đặc biệt (%, $, ~, ) mà phải giống như đường dẫn thư mục trong window. Việc này làm các công cụ tìm kiếm dễ dàng hơn trong việc tìm và thu thập nội dung trong website. Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 47
49. See how easy it is! 48 WHAT IS JOOMLA? . Dung lượng website: Máy tìm kiếm lưu trữ nội dung website trong Server riêng của nó. Nên website càng nhẹ (dưới 100KB) sẽ tốt hơn cho việc lưu trữ thông tin và quét thông tin của máy tìm kiếm. . Xây dựng Backlink: Là việc trao đổi link, xây dựng liên kết tới các website khác. Việc trao đổi này dựa trên trao đổi với các website có cùng nội dung chủ đề và chất lượng tốt thì sẽ có hiệu quả cao hơn. . Submit Website vào danh bạ web: danh bạ website nổi tiếng và cần thiết nhất là của Google, Yahoo. Hiện nay Google đã không còn đánh giá cao việc khai báo vào các danh bạ web do càng về sau chất lượng các danh bạ web càng giảm, một số danh bạ web bắt người đăng ký phải trả tiền. . Phát triển, xây dựng nội dung hướng tới Khách hàng: Content is King. Máy tìm kiếm sinh ra là để phục vụ người tìm kiếm trên Internet nên nội dung là cái nó quan tâm nhất. Những Website có được nội dung phong phú luôn nằm ở trong TOP đầu. . Chọn lựa từ khóa: Là cách chọn cách từ khóa phù hợp với nội dung website, phù hợp với việc Search của người dùng. Từ khóa là đề hỗ trợ máy tìm kiếm nên chọn lựa từ khóa đúng, chính xác là bước vô cùng quan trọng, nó quyết định sự thành công của chiến dịch SEO. 4.2. Tối ưu website Joomla và cài đặt các mod SEO 4.2.1. Tối ưu website Joomla . Tạo đường dẫn thân thiện với các công cụ tìm kiếm: cấu hình trong “Cấu hình chung” Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 48
50. See how easy it is! 49 WHAT IS JOOMLA? . Bật tính năng nén website bằng Gzip trong cấu hình chung . Bật Cache website . Việc tối ưu một website quan trọng nhất là phần tối ưu giao diện website, chúng ta làm sao cho giao diện càng nhẹ càng tốt, xóa bỏ tất cả các lỗi CSS, Javascript . Tối ưu hình ảnh flash của website Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 49
51. See how easy it is! 50 WHAT IS JOOMLA? 4.2.2. Cài đặt các mod SEO . Plugin Jacompress: Plugin này giúp nén tất cả các CSS, Javascript của website, giúp tối ưu về tốc độ website, giảm dung lượng website Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 50
52. See how easy it is! 51 WHAT IS JOOMLA? . Component sh404SEF: Component này giúp tạo ra đường link thân thiện với các công cụ tìm kiếm, việc sử dụng và cấu hình rất dễ dàng 5. Bảo mật Website Joomla - Thường xuyên cập nhật các phiên bản update mới nhất cho website Joomla của bạn - Nên download source Joomla tại - Trong quá trình xây dựng hoặc chỉnh sửa website chúng ta cần kiểm tra kỹ source của các module, component, plugin, template trước khi tiến hành cài đặt sử dụng. - Xóa tất cả các template, module, component, plugin không sử dụng - Bảo vệ kỹ chức trang quản trị administrator để tránh các truy cập trái phép - Tăng cường bảo vệ file “configuration.php” - Chmod quyền đối với thư mục là 755 và file là 644 - Chọn một server an toàn để đặt website mình trên đó hoặc có thể thuê một server riêng để đặt website mình. Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 51
53. See how easy it is! 52 WHAT IS JOOMLA? - Cài đặt một số module, component security cho website joomla như: Jdefender, Ksecure, The End! Trung tâm đào tạo an ninh mạng Tường Lửa | Luong Khiem 52