Friday, April 3, 2015

Điện toán xã hội - social computing

 

“Tham khảo”

Sự cộng tác người-máy sẽ tạo nên nền tảng siêu việt tập hợp tri thức và nguồn lực tính toán toàn cầu?

Trong chương trình trò chơi truyền hình “Ai là triệu phú?” có một trợ giúp dành cho thí sinh: hỏi khán giả đáp án. Thống kê cho thấy 95% đáp án của khán giả là đúng. 

Giải pháp “nhờ đám đông” không mới, đây chính là nền tảng của phần mềm nguồn mở. Nhưng nó chỉ được biết đến rộng rãi với thuật ngữ “crowdsourcing” (kết hợp từ “crowd” – đám đông và “outsourcing” – thuê ngoài) sau khi được Jeff Howe giới thiệu trong bài báo “The Rise of Crowdsourcing” đăng trên tạp chí Wired vào tháng 6/2006. 

Tuy nhiên phải đến gần đây, nhờ sự phát triển của công nghệ và nền tảng web, việc “nối mạng” trở nên dễ dàng và rộng khắp, ứng dụng crowdsourcing mới trở nên hấp dẫn. Có thể nói hiện nay nhà nhà đua nhau “chạy theo đám đông”, từ thiết kế thời trang (Threadless.com, Fashionstake.com) đến huy động vốn (Kickstarter.com, Marketocracy.com) và cả sản xuất ô-tô (Rockwellautomation.com), … Và có cả “chợ đám đông” - Mechanical Turk (www.mturk.com, thuộc Amazon), nơi đây bạn có thể đưa yêu cầu công việc cùng mức phí, sẽ có “đám đông công nhân trí thức” hoàn tất công việc cho bạn.

Thuật ngữ liên quan - Social computing

Social computing hay điện toán xã hội nói chung bao hàm bất kỳ công nghệ nào có liên quan đến việc giao tiếp và tương tác giữa người với người thông qua máy tính (trực tiếp hay gián tiếp). Theo nghĩa “hẹp”, điện toán xã hội dùng để chỉ các công nghệ hỗ trợ các hoạt động xã hội như blog, email, IM (chat), wiki, v.v… Sâu xa hơn, nó bao hàm bất kỳ công nghệ nào cho phép thực hiện tính toán bởi cộng đồng “thành viên chủ động” – những người không chỉ sử dụng (thụ hưởng) ứng dụng mà còn tạo ra giá trị thông qua đóng góp nội dung, gán thẻ (tag), xếp hạng, liên kết và thậm chí thành phần phần mềm.

Đám đông không chỉ có … đông!

Mạng xã hội – một mô hình ứng dụng crowdsourcing. Cộng đồng người dùng các mạng xã hội như Facebook, Twitter, LinkedIn… không chỉ dùng mà còn tham gia tạo nên giá trị cho các mạng này thông qua việc đóng góp nội dung, phân tích, đánh giá và cả làm việc cộng tác. Thậm chí, cộng đồng mạng còn giúp cho việc ra quyết định hay giải quyết những vấn đề phức tạp.

Câu “chạy theo đám đông” có lẽ phải xét lại. Nếu số liệu thống kê ở trò chơi truyền hình trên không thuyết phục được bạn thì Wikipedia – Bách khoa toàn thư mở – là một minh chứng hùng hồn của trí tuệ đám đông.
Trong cuốn sách “The Wisdom of Crowds”, xuất bản năm 2004, James Surowiecki đưa ra nhiều dẫn chứng cho thấy tập hợp tri thức của số đông có thể cho kết quả tốt hơn tư duy của số ít người, thậm chí là các chuyên gia.

Tuy nhiên, chính Surowiecki và nhiều học giả khác cũng chỉ ra những tình huống trí tuệ đám đông bị gài bẫy. Đặc biệt, nếu một vài cá nhân có ảnh hưởng quá lớn với những người xung quanh, có thể kích hoạt bản năng “bầy đàn". 

Nhưng “chân lý” vẫn thuộc về đám đông! Các nhà nghiên cứu của học viện công nghệ Massachusetts (MIT) đã chứng minh khi đám đông càng mở rộng (số lượng thành viên càng lớn) thì càng có khả năng “hội tụ” được chính xác thông tin rải rác trong cộng đồng, ngay cả khi từng thành viên chỉ quan sát được những gì gần họ (trong phạm vi hẹp). 

Bạn có nhớ câu chuyện bốn thầy mù sờ voi? Nếu được “nối mạng”, tập hợp “tư duy” của cả bốn thầy sẽ cho “cái nhìn” chính xác về con voi. 

Hãy hình dung trí tuệ của “bộ não” nối mạng hàng trăm triệu người hiện nay (mạng xã hội Facebook hiện có trên 500 triệu người dùng). Còn quá sớm để nói đến siêu máy tính tập hợp nhiều “tế bào” tương tự não người, nhưng “trí tuệ tập thể” hay CI (Collective Intelligence) không phải điều xa vời. 

Khái niệm CI đầu tiên được Pierre Lévy giới thiệu trong cuốn sách “Collective Intelligence: Mankind’s Emerging World in Cyberspace” xuất bản năm 1997. Pierre Lévy đi trước thời đại hơi sớm, khi mà Internet chưa phổ biến rộng khắp, chưa có các “công cụ” hữu hiệu để mọi người kết nối và đóng góp trí tuệ của mình. 

Gần đây một số hãng cung cấp giải pháp bảo mật đã nhanh nhạy ứng dụng CI để phát hiện phần mềm mã độc. Nhưng CI được dùng trong các giải pháp này chỉ ở nghĩa hẹp. 

Trong bài thuyết trình “Information Technology in 2020: Building a Collective Intelligence” hồi tháng 7/ 2010, giáo sư Srini Devadas thuộc phòng thí nghiệm khoa học máy tính và trí tuệ nhân tạo của MIT cho cái nhìn rộng hơn: CI dựa trên hai trụ cột là điện toán đám mây (cloud computing) và điện toán đám đông (crowd computing). Điện toán đám mây cung cấp hạ tầng tính toán và thông tin sẵn có cho mọi người truy cập; Điện toán đám đông phân tích và tổng hợp thông tin thành trí tuệ siêu việt.

“Chúng ta đang chìm trong biển thông tin, nhưng lại thiếu sự thông thái. Thế giới sẽ thuộc về những ai có khả năng tổng hợp đúng thông tin và đúng lúc …” (Consilience: The Unity of Knowledge, E.O. Wilson).

Cùng tính trên mây

Công nghệ đã phát triển đến mức dễ dàng cho mọi người khai thác mọi lúc, mọi nơi. Mạng xã hội lan toả toàn cầu, kết nối hàng trăm triệu người, không chỉ cho phép thực hiện các cuộc thảo luận, tranh luận và trao đổi thông tin một cách tức thời; mà còn cho phép người ta đóng góp chất xám thực hiện những dự án phức tạp mà các nhà nghiên cứu đơn lẻ hoặc nhóm nhỏ khó có thể thực hiện. Đây là kết quả của sự hội tụ nhiều tiến bộ công nghệ trong các lĩnh vực như hệ thống mạng, thiết bị thông minh, điện toán đám mây, web và mạng xã hội.

Người ta có thể tham gia trực tiếp bằng các phản hồi, đánh giá, hay tham gia “chợ” crowdsourcing như Amazon Mechanical Turk; hoặc cũng có thể tham gia gián tiếp với việc “lướt web” khi tìm kiếm, đọc tin, mua sắm hoặc chơi game trực tuyến. Với hàng trăm triệu người dùng nối mạng, lượng thông tin trao đổi cực lớn. Làm sao chúng ta (và máy tính) có thể khai thác, phân tích và tổng hợp thông tin tập thể này? Nền tảng Web thế hệ mới cùng với điện toán đám mây có thể cho phép thực hiện điều đó. 

Hình bên là một mô hình minh hoạ “cỗ máy-người” tạo nên điều kỳ diệu - trí tuệ tập thể. Dữ liệu thô đầu vào là nguồn thông tin dồi dào của các mạng xã hội dựa trên nền tảng công nghệ Web 2.0. Các dịch vụ dựa nên công nghệ Web tri thức (3.0) sẽ khai thác hàng tỷ gigabyte dữ liệu thô và tổ chức thành dữ liệu có “chất lượng” phục vụ xử lý và tổng hợp. Tiếp theo dữ liệu “tinh” này sẽ được “bộ lọc” con người xử lý và đánh giá. Kết quả sẽ cho ra các kho thông tin tri thức chuyên biệt.

Nền tảng điện toán mới đưa mối quan hệ người-máy lên một tầm mức mới. Con người không chỉ nhập và tiêu thụ thông tin mà còn đóng vai trò xử lý thông tin (thuật ngữ “bộ xử lý” có lẽ cần được định nghĩa lại). 

Đây là điều thú vị nhất của điện toán đám đông: con người góp phần tạo nên sức mạnh tính toán. Nói cách khác, bộ não con người được xem như bộ xử lý trong hệ thống tính toán phân tán, mỗi người có thể thực hiện một phần (có thể là phần nhỏ, đơn giản) trong tác vụ tính toán phức tạp.

Bạn có nhớ dự án SETI@Home hơn 10 năm trước? Dự án này nhờ hàng triệu người dùng đóng góp nguồn lực tính toán của máy tính cá nhân lúc rảnh rỗi (thông qua phần mềm tiết kiệm màn hình) để thực hiện chương trình tìm kiếm trí tuệ ngoài Trái đất. Một dạng crowdsourcing và crowd computing.

Trí tuệ ngoài Trái đất chưa tìm thấy, nhưng dự báo trong 10 năm tới chúng ta sẽ có … trí tuệ của cả thế giới. 

Với sự phát triển của Internet và điện toán đám mây, một hệ thống xử lý và tổng hợp tri thức của cộng đồng người dùng khắp nơi trên thế giới không phải là điều không tưởng. 

Mở rộng hơn, đừng giới hạn điện toán đám mây chỉ ở máy chủ (server). Hãy nghĩ đến “đám mây tính toán” bao gồm cả đám đông hàng tỷ thiết bị thông minh (năng lực tính toán có khi còn mạnh hơn máy tính lớn trước đây) và tri thức của hàng tỷ “siêu máy tính” (con người) trên toàn cầu. 

Với trí tuệ tập thể, có gì là không thể?

Web mới cho điện toán đám đông

Trước thời đại Web, thập niên cuối cùng của kỷ nguyên máy tính (1980-1990) chủ yếu liên quan với sự đổi mới ở “bề mặt” máy tính cá nhân: máy tính để bàn và giao diện người dùng máy tính. Trọng tâm của giai đoạn này là làm cho máy tính dễ dùng hơn với những cải tiến như Microsoft Windows, Macintosh, giao diện người dùng nhất quán hơn và tích hợp các ứng dụng với nhau.

Thập niên đầu của thời đại Web ("Web 1.0", 1991-2000) tập trung vào hạ tầng: các công nghệ cốt lõi và nền tảng của Web như HTML, HTTP, máy chủ web, công cụ tìm kiếm, công nghệ thương mại và quảng cáo, các kiến trúc cơ bản và mô hình kinh doanh của ứng dụng Web. Phần lớn đầu tư cho Web trong thập niên này chỉ có các nhà phát triển nhìn thấy.

Ngược lại, thập niên thứ hai của Web ("Web 2.0", 2001-2010) chủ yếu tập trung vào “bề nổi”. Nhiều cải tiến không hẳn là công nghệ mà chỉ là các mô hình thiết kế và giao diện người dùng nhằm cải thiện trải nghiệm người dùng về Web. Trong thập niên này người ta chú trọng đến các mô hình như AJAX, đây là tập hợp các công nghệ và phương thức thiết kế để làm cho trang web trực quan, hấp dẫn và có tính tương tác hơn.

Một tiêu điểm của Web 2.0 đó là nội dung do người dùng tạo ra, đặc biệt là việc "gắn thẻ" chủ đề cho nội dung. Việc gắn thẻ đã dẫn đến khái niệm "folksonomies" (biến thể từ “taxonomy”) chỉ việc phân loại và tổ chức dữ liệu nhờ cộng đồng người dùng.

Sự phát triển của Internet và mạng xã hội đã dẫn đến sự bùng nổ thông tin trên Web, chủ yếu là dạng phi cấu trúc. Các công cụ tìm kiếm dựa trên từ khoá cung cấp khả năng tìm kiếm thông tin này, nhưng chỉ là các truy vấn đơn giản. Tìm kiếm trên Web hiện nay không thể sánh với khả năng truy vấn chính xác của cơ sở dữ liệu. Điều này sắp thay đổi.

Hiện người ta nói đến thập niên thứ ba của Web ("Web 3.0", 2011-2020) chuyển trọng tâm trở lại nền tảng bên dưới. Thập niên này sẽ tập trung vào việc nâng cấp hạ tầng kỹ thuật và nội dung của Web, nhằm làm cho Web hoạt động giống như cơ sở dữ liệu. “Web tri thức” - một khái niệm được Nova Spivak đưa ra có khả năng làm cho thông tin trên web trở nên “có nghĩa”, cho phép phần mềm có thể “hiểu” tri thức của con người.

Trích từ:http://www.pcworld.com.vn/articles/cong-nghe/cong-nghe/2011/04/1225046/dien-toan-dam-dong/

Hay bài viết:

https://www.tinhte.vn/threads/dien-toan-xa-hoi-social-computing-khi-su-ket-hop-cua-nhieu-nguoi-lam-nen-suc-manh.2440613/.

Sunday, March 15, 2015

Tài nguyên miễn phí làm game

http://opengameart.org/art-search-advanced?keys=&field_art_type_tid[]=13

một kho tài nguyên miễn phí cho các bạn học làm game

Friday, March 13, 2015

Cấu hình gmail và sử dụng c# để gửi thư trong asp.net

Một trong các chức năng phổ biến hiện nay là liên lạc với người dung qua thư điện tử. Trong asp.net là công nghệ phát triển web rât mạnh nên họ cũng hỗ trợ gởi thử một cách rất đơn giản qua thư viện SmtpClient.

Trong hướng dẫn này chúng ta cùng cấu hình mail server (sử dụng mail miễn phí Gmail) trên website asp.net.

Bước 1: Cấu hình mail server qua web.config. Bổ sung mã nguồn sau và giữa thẻ configuration

[sourcecode language="xml"]
<system.net>
<mailSettings>
<smtp from="ngotuongdan@gmail.com">
<network host="smtp.gmail.com" password="mật khẩu" port="587"
userName="tài khoản" />
</smtp>
</mailSettings>
</system.net>
[/sourcecode]

Bước 2: Sử dụng thư viện smtp để gởi thư


[sourcecode language="csharp"]
public Mailer(string Email, string MatKhau, string TaiKhoan)
{
try
{
var smtpSection = (SmtpSection)ConfigurationManager.GetSection("system.net/mailSettings/smtp");
string strHost = smtpSection.Network.Host;
int port = smtpSection.Network.Port;
string strUserName = smtpSection.Network.UserName;
string strFromPass = smtpSection.Network.Password;
SmtpClient smtp = new SmtpClient(strHost, port);
NetworkCredential cert = new NetworkCredential(strUserName, strFromPass);
smtp.Credentials = cert;
smtp.EnableSsl = true;
MailMessage msg = new MailMessage(smtpSection.From, Email);
msg.Subject = "Thông tin đăng ký !";
msg.IsBodyHtml = true;
msg.Body += "<h1>Trung tâm quản lý người dùng.</h1>";
msg.Body += "<h3> http://" + WebConfigurationManager.AppSettings["domain"].ToString() + "</h3>";
msg.Body += "Bạn vừa đăng ký sử dụng hệ thống web GIS.<br/>";
msg.Body += "<br/>Tên đăng nhập của bạn là: <b>" + TaiKhoan + "</b>";
msg.Body += "<br/><br/>Mật khẩu của bạn là: <b>" + MatKhau + "</b><br/>";
msg.Body += "<hr/>Bạn nên đổi mật khẩu.";
smtp.Send(msg);
HttpContext.Current.Response.Write("<script>alert('Gởi thư thành công.');</script>");
}catch(Exception ex)
{
HttpContext.Current.Response.Write("<script>alert('Không gởi mail được');</script>");
}
}
[/sourcecode]

Như vậy là chúng ta có thể gởi được một email tới địa chỉ của người nhận.

Google code đóng cửa

Google code hôm nay thông báo thời gian tới họ sẽ ngừng cung cấp dịch vụ host project (08/2015).

Họ cũng cung cấp công cụ để chúng ta export sang các hệ thông khác

https://code.google.com/export-to-github/

Thật tiếc cho một dịch vụ mang tính cộng đồng.

Wednesday, February 18, 2015

Chuyển dữ liệu từ SQL server 2008 về 2005

 

Thông thường chúng ta hay upgrade database sql server từ thấp lên phiên bản cao hơn (2005 lên 2008) nhưng một số tình huống chúng ta phải làm ngược lại downgrade từ 2008 về 2005 (không thể backup 2008 và restored lại vào 2005 được). Có một số giải pháp cho vấn đề này.

1. Export dữ liệu trực tiếp từ 2008 về 2005 thông qua công cụ import/export của sqlserver managemnet studio.

2. Generate Script của sqlserver managemnet studio cách này đơn giản và hiệu quả

Trong bài này chúng ta cùng tìm hiểu cách tạo script để chuyển dữ liệu từ 2008 về 2005.

- Nhấn chuột phải lên dữ liệu cần chuyển và chọn như hình

image- Chọn các tùy chon như hình sau

image  - Nhân Next để tiếp tục

image - Chọn tất cả hoặc chọn các đối tượng muốn tại script, Nhấn Next để tiếp tục

image - Chọn nút Advanced để chỉ định phiên bản sql và dữ liệu sẽ mang theo

image - Chú ý:

  1. Script for Server Version
  2. Types of data to script

Nhấn OK để xác nhận tùy chọn

  1. Nhấn 03 lần Next để phát sinh Script
  2. Nhấn Finish để hoàn thành.

Vậy là xong rồi.

Wednesday, December 17, 2014

Responsive web design (RWD) - Thiết kế giao diện web thích ứng với kích thước màn hình thiết bị

Trước đây để có thể hiển thị nội dung website của mình trên các thiết bị di động thi giải pháp được sử dụng là tạo thêm một website phiên bản di động, như giờ thi với phương pháp thiết kế giao diện thích ứng (Responsive web design) chúng ta hoàn toàn có thể sắp xếp nội dung trên trang web của chúng ta tùy theo màn hình thiết bị mà không cần phải viết thêm một website phiên bản di động nữa.
[caption id="attachment_1542" align="aligncenter" width="660"]Giao diện thích ứng với kích thước màn hình Giao diện thích ứng với kích thước màn hình[/caption]

Demo môn học PHP tại CUSC

Responsive web design (RWD) hiểu một cách đơn giản là chúng ta sẽ bố trí lại nội dung của trang web tùy theo kích thước màn hình của thiết bị (hình trên). Nói là bố trí lại vì Responsive web design (RWD) chỉ đơn thuần là ẩn/hiện hay sắp xếp trật tự của nội dung trên trang mà thôi.

Với sự hỗ trợ của CSS3 (Media Queries năm 2012) và HTML5 thì phương pháp thiết kế này trở nên rất dễ thực hiện.
Ví dụ:

[sourcecode language="css"]
@media screen and (min-width:500px) { ... }
[/sourcecode]

Giúp xác định kích thước của màn hình thiết bị và ràng buộc nếu nhỏ hơn 500px thì nội dung ở giữa sẽ được thực hiện. Như vậy chúng ta chỉ việc đặt tên cho các phần tử nội dung (html element) trên trang và xử lý chúng là được.

<html xmlns="http://www.0w3.org/1999/xhtml">
<head>
<!--viewport xac dinh kich thuot dung theo man hinh-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/ico" href="images/favorite.ico">
<title>Salomon shop</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main">
<div id="header">
<h1>SALOMON</h1>
</div>
<div id="Skin_Menu_Ngang">
<ul id="nav">
<li><a href="?home">TRANG CHỦ</a></li>
<li style="border-right: 0px"><a href="?function=dk">ĐĂNG KÝ</a></li>
</ul>
</div>
<div id="noidung">
<div id="cotPhai"> Cot phai </div>
<div id="cotTrai"> cot trai </div>
</div>
<div id="footer"> Footer </div>
</div>
</body>
</html>

Chúng ta có giao diện như sau:
salomon1

Lưu ý dòng

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

Giúp xác định tỉ lệ scale và qui đổi điểm ảnh của màn hình thiết bị về px.
Ví dụ code css cho Demo môn học PHP tại CUSC như sau:

[sourcecode language="css"]
@media screen and (max-width: 800px) {
#main {
width:100%;
}

#header {
width: 100%;
background-image:none;
text-align:center;
vertical-align:middle;
height:70px;
}

#header h1{
visibility:visible;
display:inline-block;
font-family:Arial, Helvetica, sans-serif;
font-size:xx-large;
color:#FFF;
}

#trinhdon {
width: 100%;
}
#footer {
width: 100%;
}
#noidung {
width: 100%;
}
#cotTrai {
width: 100%;
}
#cotPhai {
width: 100%;
}
}

@media screen and (max-width: 600px) {
#main {
width: 100%;
}
#nav
{
display:none;
}
#header {
width: 100%;
background-image:none;
text-align:center;
vertical-align:middle;
height:70px;
}

#header h1{
display:inline-block;
font-family:Arial, Helvetica, sans-serif;
font-size:xx-large;
color:#FFF;
}

#trinhdon {
width: 100%;
}
#footer {
width: 100%;
}
#noidung {
width: 100%;
}
#cotTrai {
width: 100%;
}
#cotPhai {
width: 100%;
}
}
@media screen and (max-width:480px) {
#nav
{
display:none;
}
#main {
width: 100%;
}
#header {
width: 100%;
background-image:none;
text-align:center;
vertical-align:middle;
height:70px;
}

#header h1{
display:inline-block;
font-family:Arial, Helvetica, sans-serif;
font-size:xx-large;
color:#FFF;
}
#trinhdon {
width: 100%;
}
#footer {
width: 100%;
}
#noidung {
width: 100%;
}
#cotTrai {
width: 100%;
}
#cotPhai {
text-align:center;
width: 100%;
display:inline;
}
}
[/sourcecode]

Ở đây tôi qui định nếu màn hình kích thướt lớn hơn 800px thì chúng ta có giao diện web trên máy tính với header và nội dung bố trí mặc định. Nếu lớn hơn 600px và nhỏ hơn 800px thì bố trí lại 02 phần trái phải theo chiều dọc, ...

Gần đây Chrome hỗ trợ chức năng test giao diện trên các thiết bị động.
1. Nhấn F12 để vào chế độ developer
2. Chọn vào hình điện thoại ở của sổ code
3. Thay đôi kích thước màn hình bằng thướt đo hay chọn thiết bị.

Hi vọng là bài viết này có ích cho các bạn sinh viên tìm hiểu một cách căn bản nhất.

Tuesday, December 16, 2014

Sử dụng css đinh dạng trang in + php tạo nội dung (in hóa đơn)

Tạo mẫu in cho những sản phẩn đã chọn từ giỏ hàng như sau:

[caption id="attachment_1533" align="aligncenter" width="596"]Giỏ hàng Giỏ hàng[/caption]

Khi nhấn vào IN HÓA ĐƠN sẽ cho phép in với mẫu như sau

[caption id="attachment_1534" align="aligncenter" width="660"]Biên lai thanh toán Biên lai thanh toán[/caption]

Với mẫu code CSS sau sẽ giúp chúng ta định dạng mẫu giấy in theo mẫu A4.

[sourcecode language="css"]
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tohoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 21cm;
overflow:hidden;
min-height:297mm;
padding: 2.5cm;
margin-left:auto;
margin-right:auto;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 237mm;
outline: 2cm #FFEAEA solid;
}
@page {
size: A4;
margin: 0;
}
button {
width:100px;
height: 24px;
}
.header {
overflow:hidden;
}
.logo {
background-color:#FFFFFF;
text-align:left;
float:left;
}
.company {
padding-top:24px;
text-transform:uppercase;
background-color:#FFFFFF;
text-align:right;
float:right;
font-size:16px;
}
.title {
text-align:center;
position:relative;
color:#0000FF;
font-size: 24px;
top:1px;
}
.footer-left {
text-align:center;
text-transform:uppercase;
padding-top:24px;
position:relative;
height: 150px;
width:50%;
color:#000;
float:left;
font-size: 12px;
bottom:1px;
}
.footer-right {
text-align:center;
text-transform:uppercase;
padding-top:24px;
position:relative;
height: 150px;
width:50%;
color:#000;
font-size: 12px;
float:right;
bottom:1px;
}
.TableData {
background:#ffffff;
font: 11px;
width:100%;
border-collapse:collapse;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
border:thin solid #d3d3d3;
}
.TableData TH {
background: rgba(0,0,255,0.1);
text-align: center;
font-weight: bold;
color: #000;
border: solid 1px #ccc;
height: 24px;
}
.TableData TR {
height: 24px;
border:thin solid #d3d3d3;
}
.TableData TR TD {
padding-right: 2px;
padding-left: 2px;
border:thin solid #d3d3d3;
}
.TableData TR:hover {
background: rgba(0,0,0,0.05);
}
.TableData .cotSTT {
text-align:center;
width: 10%;
}
.TableData .cotTenSanPham {
text-align:left;
width: 40%;
}
.TableData .cotHangSanXuat {
text-align:left;
width: 20%;
}
.TableData .cotGia {
text-align:right;
width: 120px;
}
.TableData .cotSoLuong {
text-align: center;
width: 50px;
}
.TableData .cotSo {
text-align: right;
width: 120px;
}
.TableData .tong {
text-align: right;
font-weight:bold;
text-transform:uppercase;
padding-right: 4px;
}
.TableData .cotSoLuong input {
text-align: center;
}
@media print {
@page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
[/sourcecode]

Và để có thể có được nội dung in chúng ta sẽ sử dụng PHP để phát sinh nội dung như sau:

[sourcecode language="php"]
<body onload="window.print();">
<div id="page" class="page">
<div class="header">
<div class="logo"><img src="../images/logo.jpg"/></div>
<div class="company">C.Ty TNHH Salomon</div>
</div>
<br/>
<div class="title">
HÓA ĐƠN THANH TOÁN
<br/>
-------oOo-------
</div>
<br/>
<br/>
<table class="TableData">
<tr>
<th>STT</th>
<th>Tên</th>
<th>Đơn giá</th>
<th>Số</th>
<th>Thành tiền</th>
</tr>
<?php
session_start();
$tongsotien = 0;
if(isset($_SESSION['giohang'])){
$pos = 1;
$tongsotien = 0;
foreach($_SESSION['giohang'] as $i => $row)
{
$tongsotien += $row['sp_soluong']*$row['sp_dongia'];
echo "<tr>";
echo "<td class=\"cotSTT\">".$pos++."</td>";
echo "<td class=\"cotTenSanPham\">".$row['sp_ten']."</td>";
echo "<td class=\"cotGia\"><div id='giasp".$row['sp_id']."' name='giasp".$row['sp_id']."' value='".$row['sp_dongia']."'>".number_format($row['sp_dongia'],0,",",".")."</div></td>";
echo "<td class=\"cotSoLuong\" align='center'>".$row['sp_soluong']."</td>";
echo "<td class=\"cotSo\">".number_format(($row['sp_soluong']*$row['sp_dongia']),0,",",".")."</td>";
echo "</tr>";
}
}
?>
<tr>
<td colspan="4" class="tong">Tổng cộng</td>
<td class="cotSo"><?php echo number_format(($tongsotien),0,",",".")?></td>
</tr>
</table>
<div class="footer-left"> Cần thơ, ngày 16 tháng 12 năm 2014<br/>
Khách hàng </div>
<div class="footer-right"> Cần thơ, ngày 16 tháng 12 năm 2014<br/>
Nhân viên </div>
</div>
</body>
[/sourcecode]

Chạy thử trang web chúng ta sẽ có hình như bên trên.

Translate