Bài viết sau sẽ trình bày cách tạo module hiển thị thông tin thị trường chứng khoán trong Joomla 1.5.x. Dữ liệu được lấy từ nguồn VnExpress.net. Các bước thực hiện như sau:

1. Đăng nhập vào trang quản trị Joomla
2. Phần mở rộng > Quản lý module > Tạo mới

Extensions > Module > New

3.1 Chọn mod_custom.
Sau đó chèn đoạn mã sau vào phần soạn thảo tùy chỉnh
Mã CSS:

<style type="text/css">

.center{text-align:center;}

.cActive
{
	background-image:url(bg_active.gif);
	font-family:Tahoma, "Times New Roman";
	text-decoration:none;
	font-size:11px;
	color:#9e224d;
	font-weight:bold;
}
.cNoActive
{
	background-image:url(bg_noactive.gif);
	font-family:Tahoma, "Times New Roman";
	text-decoration:none;
	font-size:11px;
	color:#009140;
	font-weight:normal;
}
.tbHeader
{
	border-left: 1px solid #666666;
	border-right: 1px solid #666666;
}
.cHeader
{
	font-family:Tahoma, "Times New Roman";
	font-size:11px;
	background-color:#9e224d;
	color:#FFFFFF;
	font-weight:bold
}
.cHeaderN
{
	font-family:Tahoma, "Times New Roman";
	font-size:11px;
	background-color:#af637d;
	color:#FFFFFF;
	font-weight:bold
}
.Active
{
	font-family:Tahoma, "Times New Roman";
	text-decoration:none;
	font-size:12px;
	color:#9e224d;
	font-weight:bold;
	cursor: pointer;
}
.NoActive
{
	font-family:Tahoma, "Times New Roman";
	text-decoration:none;
	font-size:12px;
	color:#009140;
	font-weight:normal;
	cursor: pointer;
}
</style>

Mã HTML

<table border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td width="200" valign="top">
			<table border="0" cellspacing="0" cellpadding="0" width="200">						
				<tr>
					<td background="bd.gif" width="1" height="20"></td>
					<td id="cHOSE" class="cActive" width="58" height="20" class="center"><a href="http://vnexpress.net/User/ck/hcms/HCMStockSmall.asp" target="ifrmContent" id="aHOSE" class="Active" onClick="switchActive(0);">HOSE</a></td>
					<td background="bd.gif" width="1" height="20"></td>
					<td background="bg_out.gif" width="2" height="20"></td>
					<td background="bd.gif" width="1" height="20"></td>
					<td id="cHaSTC" class="cNoActive" width="58" height="20" class="center"><a href="http://vnexpress.net/User/ck/hns/HNStockSmall.asp" target="ifrmContent" id="aHaSTC" class="NoActive" onClick="switchActive(1);">HaSTC</a></td>
					<td background="bd.gif" width="1" height="20"></td>
				</tr>
			</table>
			<table border="0" cellpadding="1" cellspacing="1" class="tbHeader" width="200">
				<tr class="center">
					<td rowspan="2" class="cHeader" class="center" width="38">Mã CK</td>
					<td rowspan="2" class="cHeader" class="center" width="38">TC</td>
					<td colspan="2" class="cHeader" class="center" width="79" nowrap>Khớp lệnh</td>
					<td rowspan="2" class="cHeader" class="center" width="50">+/-</td>
				</tr>
				<tr>
					<td class="cHeaderN" class="center" width="37">Giá</td>
					<td class="cHeaderN" class="center" width="42">KL</td>
				</tr>
			</table>
			<iframe id="ifrmContent" name="ifrmContent" height="305" width="200"  src="http://vnexpress.net/User/ck/hcms/HCMStockSmall.asp" noresize border=false frameborder=0 scrolling="yes"></iframe>
			<table>
				<tr>
					<td style="FONT-SIZE: 8pt; BACKGROUND: #FFFFFF; COLOR: #000000; FONT-FAMILY: 'Arial'; TEXT-ALIGN: right;">(Bấm vào nội dung bảng để xem chi tiết)</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

Mã javascript

<script type="text/javascript">
	function switchActive(i){
		if(i == 0){
			document.getElementById('cHOSE').className = 'cActive';
			document.getElementById('cHaSTC').className = 'cNoActive';
			document.getElementById('aHOSE').className = 'Active';
			document.getElementById('aHaSTC').className = 'NoActive';
		}
		else{
			document.getElementById('cHOSE').className = 'cNoActive';
			document.getElementById('cHaSTC').className = 'cActive';
			document.getElementById('aHOSE').className = 'NoActive';
			document.getElementById('aHaSTC').className = 'Active';
		}
	}
</script>

3.2. Lưu đoạn mã trên thành file chungkhoan.html. Upload lên host.
Chọn mod_wrapper, nhập địa chỉ URL của file tigia.html để tạo chèn iframe vào module.

Xem thêm Cách tạo module hiển thị tỉ giá ngoại tệ, thông tin thị trường trong Joomla.

Tạo module position mới trong Joomla < Lùi		Tiếp theo > Cách trình bày trang chủ Frontend trong Joomla 1.5

---