MỤC TIÊU CỦA MÔ ĐUN - Kiến thức: + Nêu và ứng dụng các thẻ HTML + Tổ chức thông tin trên trang chủ web + Định hướng được các cách liên kết đến các trang web + Đưa ra được ý tưởng về gia
NGÔN NG Ữ HTML
KHÁI QUÁT V Ề TRANG WEB
Ngôn ngữ đánh dấu siêu văn bản (html) chỉ rõ một trang Web sẽ được hiển thị như thế nào trong một trình duyệt Sử dụng các thẻ và các phần tử html, bạn có thể:
Điều khiển hình thức và nội dung của trang
Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu html
Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch
Chèn các đối tượng như audio clip, video clip, các thành phần ActiveX, Flash và các Java Applet vào tài liệu html
Tài liệu html tạo thành mã nguồn của trang Web Khi được xem trên trình soạn thảo, tài liệu này là một chuỗi các thẻ và các phần tử, mà chúng xác định trang web hiển thị như thế nào Trình duyệt đọc các file có đuôi htm hay html và hiển thị trang web đó theo các lệnh có trong đó.
Ví dụ, theo cú pháp html dưới đây sẽ hiển thị thông điệp “My first html document”
Welcome to html
Trình duyệt thông dịch những lệnh này và hiển thị trang web như hình sau:
Hình 1.1 Trang web cơ bản html
CẤU TRÚC CƠ BẢN CỦA TRANG WEB
Một tài liệu html gồm 3 phần cơ bản:
Phần html: Mọi tài liệu html phải bắt đầu bằng thẻ mở html và kết thúc bằng thẻ đóng html
Thẻ html báo cho trình duyệt biết nội dung giữa hai thẻ này là một tài liệu html
Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ và kết thúc bởi thẻ
Phần này chứa tiêu đề mà được hiển thị trên thanh điều hướng của trang Web Tiêu đề nằm trong thẻ title, bắt đầu bằng thẻ và kết thúc là thẻ
Tiêu đề là phần khá quan trọng Khi người dùng tìm kiếm thông tin, tiêu đề của trang Web cung cấp từ khóa chính yếu cho việc tìm kiếm.
Phần thân: phần này nằm sau phần tiêu đề Phầnthân bao gồm văn bản, hình ảnh và các liên kết mà bạn muốn hiển thị trên trang web của mình Phần thân bắt đầu bằng thẻ và kết thúc bằng thẻ
Welcome to the world of html
Chào mừng các bạn đến với Khoa CNTT
CÁC TH Ẻ HTML CƠ BẢ N
1 Thẻ : trình bày tiêu đề cho phần nội dung hiển thị trên trang web. a Cú pháp:
Nội dung tiêu đề với n: từ 1 đến 6 b Ví dụ:
Thiết kế web với html
2 Thẻ : liên kết đến trang web cục bộ hoặc trang web khác a Cú pháp:
Nội dung tiêu đề b Ví dụ:
Trường cao đẳng nghề An giang
3 Thẻ : hiển thị hình ảnh a Cú pháp:
b Ví dụ:
4 Thẻ , , : in đậm, in nghiêng, gạch chân a Cú pháp:
Quản trị mạng máy tính
Quản trị mạng máy tính
Quản trị mạng máy tính
5 Thẻ : xuống dòng a Cú pháp:
Nội dungvẳn bản b Ví dụ:
Khoa công nghệ thông tin
Quản trị mạng máy tính
6 Thẻ
- ,
- Hà Nội
- TP Hồ Chí Minh
- Đà Nẵng
- Thừa Thiên Huế
- Khánh Hòa
- Quãng Ninh
- Tiền Giang
- Hà Nội
- TP Hồ Chí Minh
- Đà Nẵng
- Thừa Thiên Huế
- Khánh Hòa
- Quãng Ninh
- Tiền Giang
- TP Hồ Chí Minh
- Thừa Thiên Huế
- : tạo danh sáchkhông thứ tự và có thứ tự a Cú pháp:
Danh sách không có thứ tự
Danh sách có thứ tự
7 Thẻ
, : định dạng đoạn văn bản a Cú pháp:
Nội dung
align=” left, right, center” b Ví dụ:Thiết kế web với HTML cơ bản
8 Thẻ : tạo bảng a Cú pháp:
Nội dung dòng 1 cột 1
Nội dung dòng 2 cột 1
Vị trí đặt banner
Nội dung dòng 2 cột 1
9 Thẻ : định dạng font chữ website a Cú pháp:
Nội dung b Ví dụ:
Xin chao cac ban
2/ Trình bày cú pháp của HTML
3/ Kết hợp các thẻ html cơ bản xây dựng một website đơn giản mang tên web cá nhân đơn giản.
CSS CƠ BẢ N
L Ậ P K Ế HO Ạ CH VÀ QU Ả N LÝ, THAO TÁC TRÊN WEBSITE
CSS cho phép bạn định dạng các đối tượng với rất nhiều đặc điểm (thuộc tính) mở rộng mà HTML thông thường không có
Hình 2.1 Bố cục html và css CSS đóng vai trò rất quan trọng khi bạn xây dựng website, bạn không thể định dạng 1 trang web cho đẹp khi không có sự am hiểu về kỹ thuật CSS Thông thường các Developer sẽ sử dụng một chương trình thiết kế như photoshop để tạo giao diện sau đó convert sang file CSS riêng mà không phải ngồi viết từng dòng lệnh.
Hình 2.2 Mô phỏng cách học cssCSS là gì? Cấu trúc CSS trong một website
Các thể loại CSS thông dụng
Background : CSS tùy chỉnh hình nền
Text : CSS tùy chỉnh cách hiển thị đoạn text
Font : CSS tùy chỉnh kích thước, kiểu chữ
List : CSS tùy chỉnh danh sách
Table : CSS tùy chỉnh bảng
Link : CSS tùy chỉnh liên kết
Box model : CSS tùy chỉnh padding, margin, border
CÚ PHÁP CHUNG
Một đoạn CSS bao gồm 4 phần như sau: vùng định dạng {
} Vùng định dạng ở đây là các đoạn text hay các thẻ HTML mà bạn muốn định dạng Tất cả giá trị của vùng định dạng nằm trong cặp dấu ngoặc { } Mỗi thuộc tính sẽ ứng với một giá trị, phần thuộc tính và giá trị cách nhau bởi dấu hai chấm, kết thúc một thuộc tính cách nhau bởi dấu chấm phẩy cuối cùng Một vùng định dạng có thể sử dụng không giới hạn thuộc tính.
CÁC ĐỊ NH D Ạ NG CSS
Chúng ta đã tìm hiểu về cú pháp viết CSS, nhưng còn đặt nó ở đâu trong tài liệu HTML? Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML
+ Cách 1: Nội tuyến (kiểu thuộc tính) Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần selector trong cú pháp.
Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này
Ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau:
^_^ Welcome To Khoa CNTT ^_^
+ Cách 2: Bên trong (thẻ style)
Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách thứnhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style
Ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ thể hiện như sau:
body { background-color:#FFF } p { color:#00FF00 }
Lưu ý: Thẻ style nên đặt trong thẻ head
+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)
Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link. Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu.Ví dụ sau đây sẽ được trình bày theo kiểu này. vidu.html
Sau đó hãy tạo một file style.css với nội dung: body { background-color:#FFF
Hãy đặt 2 file này vào cùng một thư mục, mở file vidu.html trong trình duyệt củabạn và xem thành quả Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng việt.
- Màu nền (thuộc tính background-color):
Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị transparent để tạo nền trong suốt.
Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính background- color để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ, đỏ và cam. body { background-color:cyan
- Ảnh nền (thuộc tính background-image):
Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn Để chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính background-image body { background-image:url(logo.png)
Như các bạn đã thấy chúng ta sẽ phải chỉ định đường dẫn của ảnh trong cặp ngoặc đơn sau url Do ảnh đặt trong cùng thư mục với file style3.css nên chúng ta chỉ cần ghi abc.jpg Nhưng nếu chúng ta tạo thêm một thư mục img trong thư mục thì chúng ta sẽ phải ghi là background-image:url(img/abc.jpg) Đôi khi nếu không chắc lắm bạn có thể dùng đường dẫn tuyệt đối cho ảnh.
- Lặp lại ảnh nền (thuộc tính background-repeat):
Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền Thuộc tính này có 4 giá trị:
+ repeat-x: Chỉ lặp lại ảnh theo phương ngang.
+ repeat-y: Chỉ lặp lại ảnh theo phương dọc.
+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
+ no-repeat: Không lặp lại ảnh.
Bây giờ, chúng ta hãy thêm thuộc tính background-repeat này vào ví dụ trên thử xem sao. body { background-image:url(logo.png); background-repeat:no-repeat;
- Font Chữ: body { font-family:”Times New Roman” } h1, h2, h3 { font-family:arial,verdana,serif } p { font-weight:bold; // in đậm font-style: italic; // in nghiêng font-size:14pt; // tính theo pt hoặc px hoặc cm
Cấu trúc rút gọn cho các thuộc tính nhóm font:
Font : | < font-variant> | | |< font- family> p { font: italic bold 30px arial;
+ Thuộc tính color : body { color:#000
+ Thuộc tính text-indent : p { text-indent:30px ; // thụt vào đầu dòng khoảng cách 30px
} + Thuộc tính text-align : h1, h2 { text-align:right ; // canh lề phải
} p { text-align:justify ; // canh đều
} + Thuộc tính letter-spacing : h1, h2 { letter-spacing:7px ; // khoảng cách giữa các ký tự trong một đoạn văn bản }
+Thuộc tính text-decoration : giúp bạn thêm các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink).
Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành phần h1, gạch đầu thành phần h2 h1 { text-decoration:underline
+ Thuộc tính text-transform : thuộc tính này có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng –mặc định).
Ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1 là in hoa, h2 là in hoa đầu mỗi ký tự. h1 { text-transform:uppercase
+ Liên kết chưa được thăm (a:link),
+ Khi rê chuột lên liên kết (a:hover),
+ Khi liên kết được thăm (a:visited) hay
+ Khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active). a:link { color:#00FF00
Tạo các hiệu ứng tương ứng với trình trạng liên kết: các liên chưa thăm có màu xanh lá, kích cỡ font 14px; liên kết mouse over có màu đỏ tươi, kích cỡ font 1.2em, hiệu ứng nhấp nháy; liên kết đã thăm sẽ có màu xanh da trời, không có đường gạch chân; các liên kết đang kích hoạt có màu tím và font dạng small-caps a:link { color:#00FF00; font-size:14px
} a:hover { color:#FF00FF; font-size:1.2em; text-decoration:blink
} a:visited { color:#FF0000; text-decoration:none
} a:active { color:# 662D91; font-variant:small-caps
+ Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có thể được sử dụng nhiều lần.
+ Id dùng để nhận dạng một đối tượng đặc trưng, id có tính duy nhất.
Danh Sách Các Tỉnh, Thành Phố Của Việt Nam
Với việc dùng class để nhóm các đối tượng như trên thì công việc của chúng ta sẽ trở nên đơn giản hơn nhiều: li tp { color:FF0000
Danh Sách Các Tỉnh, Thành Phố Của Việt Nam
Và đoạn CSS cần dùng sẽ là :
- Nhóm khối phần tử với thẻ :
Cũng như , cũng là một thẻ trung hòa và được thêm vào tài liệu HTML với mục đính nhóm các phần tử lại cho mục đích định dạng bằng CSS Tuy nhiên, điểm khác biệt là dùng để nhóm một khối phần tử trong khi đó
có thể nhóm một hoặc nhiều khối phần tử
* Ví dụ về thẻ :
Danh Sách Các Tỉnh, Thành Phố Việt Nam:
Và đoạn CSS cho mục đích này sẽ là:
CÀI ĐẶ T VÀ S Ử D Ụ NG JOOMLA
CÀI ĐẶ T VÀ C Ấ U HÌNH JOOMLA
- Hướng dẫn cài đặt WampServer 3.0
WampServer là phần mềm dùng để tạo localhost và database trên localhost giúp chạy mã nguồn mở làm web hoặc thiết kế web cục bộ.
+ Bước 1: Vào trang homepage http://www.wampserver.com/ tải phần mềm Wampserver và Microsoft Visual C++ 2015 vào máy tính
+ Bước 2: Setup tập tin vcredist_x64.exe (Microsoft Visual C++ 2015)
Hình 3.1 Cài đặt Microsoft Visual C++2012
+ Bước3: Setup tập tin wampserver3_x64_addon_php7.0.13.exe
Hình 3.2 Chọn ngôn ngữ cài đặt Wampserver +Chọn OK để cài đặt
Hình 3.3 Xác nhận các điều khoản trước khi cài đặt
+ Chọn Next để tiếp tục
Hình 3.4 Nhấn Install để bắt đầu cài đặt
Hình 3.5 Nhấn Next để tiếp tục
Hình 3.6 Hoàn tất việc cài đặt wampserver + Sau khi cài đặt xong, wampserver sẽ yêu cầu chọn trình duyệt mặc định và trình soạn thảo code mặc định ( nên chọn coccoc và notepadd++ là phần mềm thông dụng)
+ Khởi động wampser thành công sẽ thấy biểu tượng màu xanh lá cây có chữ W phía bên phải gốc dưới màn hình
- Hướng dẫn tạo database trên localhost với phpmyadmin:
+ Bước 1: Vào wampserver chọn phpMyAdmin
Hình 3.7 Khởi động phpmyadmin + Bước 2: Nhập user mặc định là root và mật khẩu để trống
Hình 3.8 Đăng nhập vào phpmyadmin + Bước 3: Vào thẻ CSDL, nhập tên vào mục tạo CSDL, bảng mã chọn uft8_vietnamese_ci để hiển thị tiếng việt tốt, sau đó nhấn nút Tạo
Hình 3.9 Tạo csdl mới + CSDL được tạo xong sẽ xuất hiện bên trái của phpMyAdmin
Hình 3.10 CSDL mới được tạo ra
+ Đầu tiên bạn tải joomla từ đường dẫn https://www.joomla.org/download.html
Hình 3.11 Giao diện trang chủ web joomla.org + Chọn phiên bản joomla 3.x để tải về máy tính có dạng Joomla_3.8.5-
+ Trong thư mụcwww ở localhost, tạo thư mục mang tên website như joomla
Hình 3.12 Tạo thư mục chứa bộ source web tại c:/ wamp/www
+ Tiếp theo sao chép tất cả các tập tin joomla vào thư mục joomla vừa tạo
Hình 3.13 Chép bộ source joomla vào thư mục c:/ wamp/www
+ Tiếp theo bạn vào trình duyệt gõ localhost/thư mục của bạn Ví dụ localhost/joomla (lưu ý là phải bật wampserverhoạt động online)
+ Tiếp theo bạn điền thông tin cấu hình vào đó rồi chọn tiếp theo.
Hình 3.12 Nhập thông tin cấu hình joomla + Nhậpthông tin cấu hình joomla
Hình 3.13 Nhập thông tin về csdl + Nhập vào thông tin hệ thống kết nối csdl của joomla với mysql
Tên csdl: cntt3 (csdl đã được tạo trước ởmục tạo csdl trên localhost)
Tài khoản kết nối:root
+ Tiếp theo bạn hoàn thành tổng quan:
Cài đặt dữ liệu mẫu -> Cài đặt
Hình 3.14 Chọn csdl mẫu khi cài đặt với nhiều dạng+ Quá trình cài đặt joomla đang hoàn tất.
Hình 3.15 Quá trình cài đặt joom la đang thực hiện
Hình 3.16 Quá trình cài đặt joomla hoàn tất.
+ Joomla đã được cài đặt Gỡ bỏ thư mục cài đặt.
Vì mình cài trên localhost lên Email sẽ không gửi được.
Thư mục cài đặt đã gỡ bỏ thành công
Hình 3.17 Gở bỏ thư mục Thưmục cài đặt đã được gỡ thành công trong joomla
+ Giao diện người dùng Joomla
Hình 3.18 Giao diện trang web cho người dùng
+ Giao diện đăng nhập trang quản lý: (localhost/joomla/administrator)
Hình 3.19 Giao diện trang web cho người quản trị
Hình 3.20 Bên trong trang quản trị joomla
S Ử D Ụ NG CÁC CH ỨC NĂNG CHÍNH CỦ A JOOMLA
Thành phần quan trọng nhất của mỗi website đó là nội dung Gồm có 3 bước:
1 Chuẩn bị cấu trúc nội dung:
Tạo một nội dung tương tự việc sắp xếp các sản phẩm vào trong một cửa hàng tạp hóa vậy Với Joomla!, các bài viết giống như những sản phẩm, các chuyên mục thì giống như những kệ đựng sản phẩm và danh mục thì giống như lối đi để tìm đến những cái kệ đó
Ví dụ bây giờ bạn có một website bán hàng; cấu trúc của nội dung website có thể hình dung như thế này:
1.About (Giới thiệu) a About my site (Giới thiệu website) b.How to purchase/order products (Mua hàng thế nào) c.How to make payment (Thanh toán)
2.News (Tin tức) a.Latest news (Tin tức mới nhất) b.Arrivals (Hàng mới về) c Sale (Hàng giảm giá) d.Coupons (Phiếu giảm giá) e Promotion (Khuyến mãi)
3.Support (Hỗ trợ) a Hotline information (Hỗ trợ khách hàng qua điện thoại) b.Online customer services (Hỗ trợ khách hàng trực tuyến) c.Contact us (Liên lạc)
2 Tạo các chuyên mục và bài viết:
Sau khi chuẩn bị cấu trúc nội dung của website trên giấy, bạn có thể tiến hành tạo nội dung đó trong Joomla! Hãy bắt đầu với việc tạo các chuyên mục.
Vào “Content” => “Category Manager”và nhấn “Add New Category”
Hình 3.21 Thêm một chuyên mục mới
- Tiếp theo, điền tên chuyên mục là “About” và nhấn “Save & Close” trên thanh công cụ.
Hình 3.22 Nhập thông tin cho chuyên mục
- Sau đó, ban có thể nhìn thấy chuyên mục “About”bạn mới tạo nằm bên trong phần “Category Manager”.
-Bạn có thể tạo tất cả các chuyên mục còn lại theo cách này Sau khi hoàn tất việc tạo các chuyên mục, hãy tạo các bài viết.
Hãy thêm mới một bài viết vào trong chuyên mục “About”
-Vào “Content” => “Article Manager” và nhấn “Add New Article”
Hình 3.24 Thêm bài viết mới
- Tiếp theo, bạn điền thông tin vào các trường sau:
Title: Nhập vào tiêu đề“About my site”.
Category: Chọn chuyên mục“About” trong danh sách.
Article text: Nhập nội dung của bài viết.
- Bây giờ, chúng ta chỉ nhập một bài viết đơn giản với chữ Tiếp đến trong phần “chỉnh sửa bài viết đẹp hơn” chúng ta sẽ biết cách tạo các bài viết phức tạp hơn (với hình ảnh, liên kết, v.v.)
- Nếu bạn muốn một bài viết hiển thị ở ngoài trang đầu, bạn đặt thiết lập giá trị tham số “Featured” là “Yes” Việc này sẽ làm bài viết hiện lên trên trang chủ của website.
Hình 3.25 Chọn “Yes”để hiển thị bài viết hiện lên trên trang chủ
- Sau đó, nhấn nút “Save & Close” trên thanh công cụ để lưu lại bài viết mới tạo.
Hình 3.26 Nhấn nút “Save & Close” để lưu bài viết Bây giờ bạn đã có một bài viết mới trong phần “Article Manager” Để nội dung thêm phong phú chúng ta có thể thêm hình ảnh, videos vào bài viết.
Hình 3.27 Bài viết mới tạo “About my site”
- Làm tương tự với hai bài viết “How to purchase/order products” và “How to make payment”trong chuyên mục “About my site”.
Hình 3.28 Ba bài viết mới tạo
- Bây giờ bạn đã hoàn tất quy trình tạo bài viết, chỉ còn bước cuối cùng là tạo các danh mục menu tương ứng với các liên kết đến các bài viết này.
3 Tạo một danh mục menu:
Trong Joomla!, một danh mục(Menu) là một bộ các liên kết tới các thành phần đã có, như các bài viết bạn vừa tạo chẳng hạn Tất cả các danh mục trong back-end được đặt trong phần “Menus” Theo mặc định, một danh mục“Main
Menu” được cài đặt sẵn trong Joomla!
Hãy tạo mới một danh mục con trong danh mục “Main Menu”
+ Nhấn vào “Main Menu” trong phần “Menus” sổ xuống như hình dưới.
Hình 3.29 Quản lý menu+ Tiếp theo, nhấn vào “New”để tạo mới một danh mục con mới.
Hình 3.31 Tạo menu mới + Sau đó, nhấn “Select” để chọn loại danh mục con.
Hình 3.32 Chọn kiểu menu + Kết quả là môt màn hình pop-up được hiển thị Bạn có thể tạo liên kết đến nhiều thành phần như “Contacts”, “Articles”, “Smart Search”, “Newfeeds”, v.v Trong trường hợp này bạn cần tạo một liên kết tới một bài viết, vì vậy hãy nhấn
Hình 3.33 Chọn loại danh mục là “Single Article”
- Tiếp theo, bạn cần điền thông tin vào trường “Menu Title”, ví dụ“About my site”
Hình 3.34 Nhập tiêu đề danh mục con
- Sau đó, bạn chọn một bài viết mà bạn muốn hiển thị với danh mục đó Trong phần bên phải ở hình dưới, bạn chọn “Select”để chọn một bài viết.
- Một màn hình pop-up sẽ hiển thị Chọn bài viết “About my site”
Hình 3.36 Nhấn vào bài viết mà bạn muốn lựa chọn
Hình 3.36 Nhấn Save & New để lưu và tạo mới
- Nhấn “Save & New” để tạo tiếp hai danh mục nữa cho hai bài viết là “How to purchase/order products” và “How to make a payment”
- Sau khi tạo xong những menus này, bạn đã có 3 danh mục con mới.
Hình 3.37 Danh sách các menu được tạo ra
CÀI ĐẶ T VÀ S Ử D Ụ NG COMPONENT, MODULE, PLUGIN VÀ TEMPLATE
Modules cũng đóng vai trò như những components nhưng ở quy mô nhỏ hơn Modules thực hiện những chức năng đơn giản và hiển thị nội dụng như một khối thông tin (block) nhỏ ở trên website
Một số modules thường thấy là module tìm kiếm (search box), module đăng nhập (login form), module danh mục (menu module), module hiển thị thông tin cuối website (footer copyright), v.v.
Tất cả các modules được quản lý thông qua “Extensions” => “Module Manager”
- Hiển thị lên các modules đã được tạo ra
Hình 3.38 Danh sách các module
* Tạo modules menu hiển thị lên trình duyệt:
- Chọn Newđể tạo modules mới
- Chọ kiểu modules là Menu ( chọn kiểu modules cần tạo )
Hình 3.40 Chọn Module là Menu
- Nhập tên menu hiển thị và chọn thông tin cần thiết gồm có: tiêu đề (Title), vị trí hiển thị (posistion x), trạng thái (Pulished hoặc Unpulished) và các tùy chọn khác
Hình 3.41 Hiệu chỉnh các tham số menu
- Sau đó chọn mục Save& New để tạo tương tự còn lại cho các menu khác
Chúng ta có các menu được tạo ra như hình dưới, menu nào có mục đánh dấu x màu đỏ là chưa được xuất bản.
Hình 3.42 Tắt và mở Module menu
- Kết quả cuối cùng là chúng ta có các menu hiển thị ra ngoài website, khi click chuột vào là có nội dung phía dưới (Menu => Category, Category =>Articles )
Hình 3.43 Bài viết mới đã được hiển thị cùng với menu tương ứng.
Chúng ta đã hoàn tất việc chuẩn bị nội dung Bây giờ là lúc quan tâm đến giao diện của một website.
Như đã đề cập trước đó, một template quản lý việc hiển thị đồ họa website của bạn Nó quyết định bố cục, màu sắc, kiểu chữ, đồ họa cùng nhiều thành phần khác để tạo nên sự khác biệt cho mỗi website Có hai loại templates: “Site template” cho phần hiển thị tại front-end của website và “Administrator template” cho phần hiển thị tại back-end (Phần quản trị) của website.
Site template: quyết định giao diện ở front-end của một website – phần mà khách viếng thăm nhìn thấy được.
Thông thường, bạn sẽ làm việc với các Site templates nhiều hơn các Administrator template, để tạo nên giao diện hợp lý cho website của bạn
Administrator template: quyết định giao diện back-end (Phần Quản trị) của một website.
Hình 3.44 Giao diện quản trị template
Hình 3.35 Truy cập vào Template
- Hiển thị lên danh sách các template đang tồn tại trên hệ thống
Hình 3.36 Danh sách các template mặc định
- Template nào có dấu sao màu vàng là giao diện mặc định sẽ hiển thị cho người dùng ngoài trình duyệt
- Trong trường hợp này tôi chọn template protostar –Default để hiệu chỉnh
- Chọn thẻ Advanced để hiệu chỉnh thông tin cần thiết gồm có: màu chữ, màu nền, logo, tiêu đề website, mô tả website, kiểu khung hiển thị theo dạng vuông hay wide
Hình 3.38 Tùy chỉnh thông số giao diện
* Preview template (Xem trước giao diện ngoài trình duyệt)
- Mặc định thì joomla không cho phép xem trước giao diên, để làm được điều này thì bạn cần bật chức năng xem trước
- Trong mục Preview Module Positons chọn Enabled
Hình 3.40 Cho phép xem trước vị trí template
- Sau đó vào mục Templates sẽ hiển thị lên danh sách các templates đang được cài đặt
Hình 3.41 Quản trị Template quản lý
- Chọn mục Preview để xem các vị trí được bố trí sẳn mặc định theo template
Hình 3.42 Xem trước các vị trí template trên web
- Các position hiển thị phần màu đỏ trên site cho ta biết vị trí từng module
Hình 3.43 Hiển thị các vị trí template
Plug-ins được thiết kế để hiển thị nội dung bên trong các component và module Plugin cũng có thể thực hiện một số công việc “ngầm” (một hành động hay một thao tác) trong những thời điểm nhất định khi tải website Bạn có thể hiểu rằng plug-ins giúp tương tác với hệ thống Joomla! linh hoạt hơn.
Hình 3.44 Hai plugins“Voting” và “Read more” trong front-end
Ví dụ, ở hình trên bạn có thể nhìn thấy plug-in có trong những bài viết Các plug-ins được quản lý qua “Extensions” => “Plug-in Manager” số lần đọc
(“Voting”) và plug-in Đọc thêm (“Read more”)
Hình 3.45 Danh sách các plugin Trong gói cài đặt Joomla! 3.x, plug-ins được chia vào trong 11 chuyên mục là: “authentication”, “captcha”, “content”, “editor”, “editors-xtd”,
“extension”, “finder”, quickicon”, “search”, “system” và “user”
Component là loại extension phức tạp nhất Đây được xem như một ứng dụng thực hiện một số nhiệm vụ nhất định và hiển thị những nội dung đặc biệt trên website của bạn Như đã đề cập ở trên, một bộ sưu tập video là một ví dụ của một component Nó cũng có thểlà một hệ thống mua bán trực tuyến, hệ thống đặt phòng trực tuyến, diễn đàn, v.v.
Hình 3.46 Component “Newsfeeds” tại front-end
Nội dung được tạo ra bởi một component và được hiển thị trong vùng nội dung chính Trong ví dụ ở trên, bạn có thể nhìn thấy một danh sách nguồn cấp dữ liệu (feed) được tạo ra bởi component “Newsfeeds” Tất cả các components nằm trong phần “Components” của Joomla
Hình 3.47 Quản lý Components Mặc định, gói Joomla! cung cấp các components: “Banners”, “Contacts”,
“Messaging”, “News Feeds”, “Redirect”, “Search”, “Smart Search”, “Tags” và
Các thành phần mở rộng của Joomla!(extentions) là những phần mềm đặc biệt được viết để để tích hợp vào Joomla! nhằm tăng cường cũng như mở rộng chức năng cho website Ví dụ nếu bạn muốn có một slideshow hình ảnh, bộ sưu tập Videos hay Form liên hệ với nhiều chức năng nâng cao hơn, thì bạn cần phải cài đặt các extensions cho những mục đích tương ứng
Mặc định thì Joomla! đã được đóng gói kèm khá nhiều extensions đủ để thực hiện những chức năng cơ bản.
Extension này giúp cho việc quản lý và hiển thị các biểu ngữ.
Extension này giúp bạn quản lý liên lạc và hiển thị thông tin liên hệ.
Extension này giúp cho việc quản lý và hiển thị RSS.
Extension này giúp quản lý chuyển hướng các URL.
Extension này giúp quản lý và trình bày các liên kết.
Hãy xem kỹ hơn một chút về một trong các extensions mở rộng của Joomla! để hiểu hơn về cách thức làm việc của nó với Joomla!
Làm việc với thành phần mở rộng (Extensions) mặc định “Contacts”
Trong phần này, chúng ta sẽ học làm thể nào để sử dụng extension
“Contacts” của Joomla! Extension này cho phép bạn tạo các biểu mẫu (form) liên hệ để mọi người (khách, thành viên) có thểgửi email tới bạn.
Tạo chuyên mục liên hệ
Chúng ta cần tạo các danh sách liên hệ trước khi thành viên có thể gửi tới cho chúng ta email thông qua biểu mẫu liên hệ nào đó Nhưng để tổ chức phần liên hệ tốt hơn, chúng ta cần tạo các chuyên mục liên hệ trước.
Hình 3.48 Chọn các chuyên mục liên hệ
- Tiếp theo, chọn “New”trên thanh công cụ để tạo mới một mục liên hệ.
Hình 3.39 Chọn “New” để tạo một mục liên hệ mới
Sau đó, điền tiêu đề cho mục liên hệ của bạn, ví dụ “Website Administrators”, và lưu lại bằng cách nhấn vào “Save & Close”
Các Joomla! extensions mặc định phù hợp cho những người mới bắt đầu, nhưng sau một thời gian làm quen với Joomla!, bạn có thể cảm thấy chúng chưa đủ Trong quá trình phát triển web site, bạn sẽ muốn thêm nhiều chức năng nữa mà những thành phần mở rộng mặc định đã có sẵn không thể mang lại Trong phần này, chúng ta sẽ xem xem những Extensions gì bạn có thể thêm vào website và làm thế nào để thực hiện điều đó.
Sau khi chọn và tải extensions cần thiết cho website của bạn, bạn cần biết làm thế nào để cài đặt chúng và làm cho chúng làm việc trên website của bạn. + Vào “Extensions”=>“ExtensionManager”
+ Tiếp theo, nhấn “Browse” để chọn gói Joomla! extension bạn đã tải về.
Hình 3.40 Chọn Extension để cài đặt+ Sau đó, nhấn “Upload&Install”để tải lên và cài đặt tập tin này vào website
Joomla! sẽ tự động đưa extension này vào đúng chỗ của nó.Ví dụ, nếu extensions là một component, bạn sẽ thấy nó trong danh mục“Components”; nếu extension này là một module, bạn sẽ tìm thấy nó trong “Module Manager”
Nếu bạn thấy một extension không giúp gì cho bạn, bạn nên gỡ bỏ nó:
+ Vào “Extensions”=>“ExtensionManager”và nhấn vào mục “Manage” + Nhập tên đầy đủ hoặc một phần tên của extension vào trường “Filter” và nhấn “Search” icon
+ Chọn extension mà bạn muốn gỡ bỏ và nhấn “Uninstall” trên thanh công cụ.
1 Cài đặt và cấu hình wampserver và joomla
2 Tạo các menu, thể loại, bài viết từ trang tuoitre.vn
3 Tùy chỉnh template, module, plugin, com sao cho phù hợp có thể giống tương tự website tuoitre.vn
S Ử D ỤNG CÁC ĐỐI TƢỢ NG JOOMLA
S Ử D ỤNG CÁC ĐỐI TƢỢ NG H Ỗ TR Ợ L Ậ P TRÌNH JOOMLA
- Joomla Component: là một trong các thành phần mở rộng của Joomla!, thực chấtnó là một ứng dụng trong hệ thống Joomla!
+ Component được sử dụng để thực hiện một chức năng lớn nào đó, chẳng hạn như: Cung cấp tin tức, quảng cáo, rao vặt, đặt phòng khách sạn, bất động sản, download
+ Một component được hiển thị ở phần trung tâm, hay phần chính (mainbody) của website
+ Để download một component thực hiện một chức năng chuyên biệt, hoặc để thay thế cho một component nào đó của Joomla, bạn có thể truy cập vào website Joomla Extensions và tìm kiếm theo danh mục chức năng hoặc theo từkhóa mà bạn chỉ định.
+ Cài đặt một Component Joomla từ trang quản trị: Giống như các thành phần mở rộng khác (module, plugin, template, language ), để cài đặt một Joomla
+ Một model là thành phần của component đóng gói dữ liệu của ứng dụng
Nó thường cung cấp các thủ tục để quản lý và thao tác dữ liệu này theo một cách nào đó, trong đó có bổ sung thêm các thủ tục để lấy dữ liệu từ model.
+ Model sẽ chứa các phương thức như bổ sung, loại bỏ và cập nhật thông tin về những lời chào mừng trong cơ sở dữ liệu Nó còn chứa phương thức để lấy danh sách các lời chào trong CSDL.
+ Nói một cách tổng quát, việc truy cập vào CSDL lớp dưới sẽ được đóng gói trong model Theo cách này, nếu một ứng dụng chuyển đổi sang việc sử dụng một file bình thường để lưu trữ thông tin của nó thay vì sử dụng CSDL, thì chỉ có thành phần model là thay đổi, các thành phần view và controler là không đổi
Là một thành phần của component được sử dụng để trả lại dữ liệu từ model theo cách phù hợp với tương tác Đối với các ứng dụng web, view thông thường là các trang HTML để trả lại dữ liệu
+ View lấy dữ liệu từ model (dữ liệu này được chuyển qua nó để tới controler) Và đưa dữ liệu vào trong template (dữ liệu sẽ hiển thị với người dùng) View không làm thay đổi dữ liệu Nó chỉ hiển thị dữ liệu lấy từ model.
+ Nhiệm vụ của view là rất đơn giản: nó nhận dữ liệu được thể hiện và đặt nó lên template Dữ liệu được đặt lên template sử dụng phương thức:
Controler chịu trách nhiệm phản hồi các hành động của người dùng Trong các ứngdụng web, một hành động của người dùng thông thường là một yêu cầu tải trang
+ Controler sẽ xác định yêu cầu gì được đưa ra bởi người sử dụng và phản hồi thích hợp bằng việc yêu cầu model tính toán dữ liệu phù hợp và chuyển từ model vào view
+ Controler không thể hiện dữ liệu từ model, nó kích hoạt các phương thức trong model để hiệu chỉnh dữliệu và sau đó chuyển từ model sang view để hiển thị dữliệu
- Các bước thực hiện: Đối với component cơ sở của chúng ta, chúng ta chỉ cần 5 file:
+ hello.php - đây là điểm vào cho component của chúng ta (this is the entry point to our component)
+ controller.php – file này có chứa controler cơ bản (this file contains our base controller)
+ views/hello/view.html.php – file này nhận các dữ liệu cần thiết và đặt nó lên template (this file retrieves the necessary data and pushes it into the template) + views/hello/tmpl/default.php – file này là temple cho đầu ra (this is the template for our output)
+ hello.xml – đây là một file XML nói cho Joomla biết cách cài đặt component của chúng ta như thế nào (this is an XML file that tells Joomla! how to install our component)
- Joomla luôn luôn được truy cập thông qua một điểm vào đơn: index.php cho các ứng dụng site và administrator/index.php cho ứng dụng quản trị.
• Sau đó ứng dụng sẽ tải các component cần thiết dựa trên giá trị chọn lựa trong URL hoặc trongdữ liệu POST.
• Đối với component của chúng ta URL sẽ như sau: index.php?option=com_hello&view=hello
• Việc này sẽ tải file chính của chúng ta và có thể được xem như một điểm vào đơncho component của chúng ta: components/com_hello/hello.php
TÌM HIỂU CẤU TRÚC TỔ CHỨC THƢ MỤC JOOMLA
- administrator: quản trị hệ thống
- configuration.php: cấu hình kết nối csdl lên host
- index.php: trang chủ gọi chương trình
- htaccess.txt: cho phép truy cập
Hình 4.1 Nơi lưu trữ tập tin file htaccess Để bắt đầu thực hiện một dự án website hay để thiết kế một website Chúng ta cần có cấu trúc các thư mục để lưu trữ các tệp tin chạy chương trình Dưới đây là một cấu trúc thư mục cơ bản để tiến hành lập trình dự án web.
Hình 4.2Cấu trúc thư mục template
Admin: chức các tập tin tác động đến hệ thống website như thêm sửa xóa, thao tác với cơ sở dữ liệu (phần back end).
Classes: chức các tập tin cấu hình các lớp xử lý cho phần người dùng.
Configs: chức các tập tin cấu hình chung cho website
Elements: hay module chứa các tệp tin thể hiện các chức năng của website
Libraries: chức các tập tin thư viện và các thành phần mở rộng từ bên thứ ba
Media: chứ các tập tin hình ảnh, file,
Templates: chứa các tập tin thể hiện giao diện người dùng.
Index.php: tệptin chính của trang website
Trên đây chỉ là cấu trúc các thư mục đơn giản để tiến hành lập trình web Khi triển khai thêm các ứng dụng mới chúng ta có thể có thêm các thư mục mới.
TÌM HI Ể U C Ấ U TRÚC URI
Cấu trúc URI được khái quát như sau: foo://example.com:8042/over/there?namerret#nose
| | | | | scheme authority path query fragment Đường dẫn: libraries/joomla/environment/uri.php
Hiện tại có 2 cấu trúc phổ biến được ưa dùng: Ưu tiên tính ngắn gọn tối đa, tên-miền/tên-bài-viết, kiểu như: ducanhplus.com/nghien-cuu-tu-khoa
Ngắn gọn nhưng vẫn chú ý đến thư mục, đưa thư mục vào URL, tên- miền/thƣ-mục/tên-bài-viết, kiểu như: ducanhplus.com/seo/nghien-cuu-tu-khoa; trong đó seo (SEO) chính là thư mục
Các cấu trúc trên đều bỏ ngày tháng, trong thực tế một số website vẫn sử dụng cấu trúctháng năm hoặc thậm chíngày tháng nămnhưng con số đó không nhiều, và các website chủ động sử dụng cấu trúc đó có lý do của họ, ví dụ họ có rất nhiều bài đăng hàng ngày, cấu trúc tháng năm giúp họ hạn chế trùng URL.
Với cấu trúc URL siêu ngắn, chỉ có postname, không có thư mục, nó thích hợp nhất cho các trang cónội dung chuyên sâu, hẹp, các trang viết đa dạng các chủ đề sẽ gặp khó khăn (chủ yếu ở khía cạnh mất công sức) nếu muốn thiết lập những chọn lựa dựa trên URL của thư mục, mà ví dụ điển hình nhất là tiếp thị lại (như Remarketing trên Facebook hoặc mạng hiển thị của Google).
LÀM VI Ệ C V ỚI CÁC ĐỐI TƢỢ NG: REQUEST, FACTORY, SESSION,
Là thông tin gửi từ client lên server Khi bạn lên trình duyệt browser gõ một địa chỉ nào đó, ví dụ bạn gõ là zing.vn thì ngay lập tức trình duyệt sẽ dựa vào tên domain đểgửi yêu cầu truy cập đến địa chỉ IP mà domain này đang trỏ tới (bạn đừng quan tâm đến domain này do ai quản lý), lúc này phía server sẽ phân tích yêu cầu và sẽ gửi luồng xử lý tới vị trí vị trí lưu trữ củamã nguồn PHP và nhiệm vụ của các mã nguồn là tiếp nhận yêu cầu, phân tích request đó và trả kết quả lại cho client
Một cách khác quản lý người sử dụng là session Session được hiểu là khoảng thời gian người sử dụng giao tiếp với 1 ứng dụng Một session được bắt đầu khi người sử dụng truy cập vào ứng dụng lần đầu tiên, và kết thúc khi người sử dụng thoát khỏi ứng dụng Mỗi session sẽ có được cấp một định danh (ID) khác nhau và nội dung được lưu trong thư mục thiết lập trong file php.ini (tham số session.save_path) a- Thiếtlập session: Để thiết lập 1 session ta sử dụng cú pháp: session_start() Đoạn code này phải được nằm trên các kịch bản HTML Hoặc những lệnh echo, printf Để thiết lập 1 giá trị session, ngoài việc cho phép bắt đầu thực thi session Chúng ta còn phải đăng ký 1 giá trị session Để tiện cho việc gán giá trị cho session đó.
Ta có cú pháp sau: session_register("Name")
b- Sử dụng giá trịcủa session:
Giống với cookie Để sử dụng giá trị của session ta sử dụng mã lệnh sau:
Với Name là tên mà chúng ta sử dụng hàm session_register("name") để khai báo
1 Trình bày các đối tượng hỗ trợ lập trình Joomla.
2 Nêu cấu trúc tổ chức thư mục Joomla gồm có các thư mục nào
3 Phân biệt giữa Request và Session
QUẢN TRỊ CƠ SỞ DŨ LIỆU TRONG JOOMLA
C Ấ U HÌNH K Ế T N ỐI CƠ SỞ D Ữ LI Ệ U TRONG JOOMLA
Tập tin configuration.php là nơi lưu trữ cấu hình kết nối cơ sở dữ liệu trong joomla