HTML5 Lưu trữ dữ liệu web


Bài trước, chúng ta đã tìm hiểu một đặc điểm thú vị của HTML5: hỗ trợ vẽ các đối tượng 2D thông qua thẻ canvas. Hôm nay, chúng ta lại tiếp cận một API mới của HTML5, lưu trữ dữ liệu web ở phía máy khách.

Lưu trữ web là một đặc điểm kỹ thuật được đưa ra bởi W3C, hỗ trợ việc lưu trữ dữ liệu tại phiên làm việc của người dùng hoặc lưu trữ trong thời gian lâu dài. Nó cho phép lưu trữ 5 MB thông tin cho mỗi tên miền.

Có 2 loại:

  • sesionStorage: lưu trữ dữ liệu trong một phiên làm việc (sẽ bị xóa khi đóng cửa sổ trình duyệt)

Ví dụ: xây dựng phiên làm việc của người dùng sau khi đăng nhập, …

  • localStorage: lưu trữ cục bộ (thông tin được lưu trữ lâu dài, không giới hạn thời gian)

Ví dụ: đếm số lần người dùng đã truy cập trang; ghi nhớ thông tin tài khoản, mật khẩu cho lần đăng nhập sau, …

Trước khi sử dụng sessionStorage và localStorage, chúng ta phải kiểm tra trình duyệt hiện tại có hỗ trợ 2 dạng lưu trữ này không?
Code tham khảo kiểm tra trình duyệt:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Kiểm tra lưu trữ phiên</title>
<script>
function checkSupport()
{
	if (('sessionStorage' in window) && window['sessionStorage'] !== null)
    {
    	alert("Trình duyệt hỗ trợ lưu trữ web");
        return;
    }
    alert("Trình duyệt không hỗ trợ lưu trữ web"); 
}
</script>
</head>

<body onLoad="checkSupport()">
</body>
</html>

Để kiểm tra localStorage trong trình duyệt: thay đổi dòng code:

if (('sessionStorage' in window) &amp;amp;&amp;amp; window['sessionStorage'] !== null)

thành

if (('localStorage' in window) &amp;amp;&amp;amp; window['localStorage'] !== null)

1. Cách lưu trữ dữ liệu:

Có 3 cách để lưu trữ:

  • Thông qua các hàm hỗ trợ sẵn: lưu trữ dạng key/value (biến/giá trị)
    + Gán giá trị cho biến: sessionStorage.setItem(“key”) = value (key,value có thể là chuỗi hoặc số)
    sessionStorage.setItem(‘name’, ‘user’)
    + Lấy giá trị của biến: sessionStorage.getItem(“key”)
    sessionStorage.getItem(‘name’)
    + Xóa một giá trị biến đã tạo: sessionStorage.removeItem(“key”)
    sessionStorage.removeItem(‘name’)
    + Xóa tất cả các biến đã tạo: sessionStorage.clear()
  • Thông qua cú pháp mảng: sessionStorage[“key”] = value
    sessionStorage[‘name’] = ‘user’
  • Thông qua toán tử dấu chấm: sessionStorage.key = value
    sessionStorage.name = “user”

Ghi chú: 3 cách lưu trữ này cũng áp dụng cho localStorage

Ví dụ đơn giản để lưu trữ dữ liệu:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Working with Session Storage</title>
<script>
function testStorage()
{
	if(('sessionStorage' in window) && window['sessionStorage'] != null){
		sessionStorage.setItem('name', 'Sarah');
		document.write("The name is:" + sessionStorage.getItem('name') + "
");
		sessionStorage.setItem(6, 'Six');
		document.write("The number 6 is : " + sessionStorage.getItem(6) + "
");
		sessionStorage["age"] = 20;
		document.write("The age is : " + sessionStorage.age);
	}
}
</script>
</head>

<body onLoad="testStorage()">
</body>
</html>

Kết quả:

1

2. Ví dụ: Sử dụng sessionStorage để tạo phiên làm việc khi người dùng đăng nhập:

Kịch bản xử lý như sau:

  • Tạo form đăng nhập.
  • Tạo một trang thanhcong.html để hiển thị thông báo đăng nhập thành công.
  • Nếu người dùng chưa đăng nhập -> hiển thị trang thanhcong.html thì có thông báo “Bạn chưa đăng nhập”
  • Nếu người dùng vào trang đăng nhập rồi tiến hành đăng nhập -> sau khi đăng nhập thành công, qua trang thanhcong.html và hiển thị “Chúc mừng bạn tên đăng nhập đã đăng nhập thành công”.

Code:

Trang đăng nhập (dangnhap.html)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Phiên làm việc người dùng</title>
<script>
function kiemTra()
{
	//kiem tra du lieu
	if(('sessionStorage' in window) && window['sessionStorage'] !== null){
		// bỏ qua bước bắt lỗi tài khoản, mật khẩu
		
		// tạo sessionStorage với key là user lưu tài khoản người dùng
		sessionStorage.setItem('user', document.frm.txtTK.value);
		// tạo sessionStorage với key là pass lưu mật khẩu người dùng
		sessionStorage.setItem('pass', document.frm.txtMK.value);
		return true;
	}else alert("Không hỗ trợ");
}
</script>
</head>
<body >

<form name="frm" onSubmit="return kiemTra()" action="thanhcong.html">

<table>

<tr>

<td>Tài khoản:</td>


<td><input name="txtTK" /></td>

</tr>


<tr>

<td>Mật khẩu:</td>


<td><input name="txtMK" type="password"/></td>

</tr>


<tr align="center">

<td colspan="2"><input type="submit" value="Đăng nhập" /></td>

</tr>

</table>

</form>

</body>
</html>

Trang thông báo thành công (thanhcong.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Thanh cong</title>
<script>
if(sessionStorage.getItem('user') != null)
	document.write("Chúc mừng bạn " 
					+ sessionStorage.getItem('user') 
					+ " đã đăng nhập thành công");
else document.write('Bạn chưa đăng nhập');
/* Xử lý nút thoát : xóa biến lưu trữ user*/
function thoat(){
	sessionStorage.removeItem('user');
	location.href="thanhcong.html";
}
</script>
</head>

<body>

<form>
<input value="Thoát" type="button" onClick="thoat()" />
</form>

</body>
</html>

Video:

3. Ví dụ: Sử dụng localStorage để đếm số lần người dùng truy cập vào trang web:

Mỗi lần người dùng vào trang web:

  • Nếu là lần đầu tiên: khởi tạo biến localStorage[‘truy cập’] là 1.
  • Nếu là lần thứ 2 về sau: cộng thêm 1 vào biến localStorage[‘truy cập’]

Chú ý: Tắt trình duyệt và mở lên lại thì biến localStorage[‘truy cập’] vẫn cập nhật từ giá trị cũ.

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Lưu trữ cực bộ</title>
<script>
function store()
{
	if(('localStorage' in window) && window['localStorage'] != null){
		if(localStorage.getItem('truycap') == null)
			localStorage.setItem('truycap', 1);
		else 
			localStorage.setItem('truycap', parseInt(localStorage.getItem('truycap')) + 1);
		document.write("Số lần đăng nhập = " + localStorage.getItem('truycap'));
		
	}
	else{
		alert("Trình duyệt không hỗ trợ LocalStorage");
	}
}
</script>
</head>
<body onLoad="store()">
</body>
</html>

Kết quả:
Lần chạy đầu tiên:
          Số lần đăng nhập = 1
Reload lại trang:
          Số lần đăng nhập = 2
Các lần chạy tiếp theo -> mỗi lần tăng lên 1.
Tắt trình duyệt và chạy lại trình duyệt vừa rồi:
          Số lần đăng nhập = 3
Các bạn có thể tham khảo thêm:
4. Ví dụ sử dụng localStorage để ghi nhớ thông tin đăng nhập:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Lưu trữ cực bộ</title>
<script>
function loadData(){
	if(('localStorage' in window) 
		&& window['localStorage'] != null 
		&& localStorage.getItem('ghinho')
		 ){
		document.frmDangNhap.txtDN.value = localStorage.getItem('tendangnhap');
		document.frmDangNhap.txtMK.value = localStorage.getItem('matkhau');
	}
}
function store()
{
	var tendangnhap = document.getElementById("txtDN").value;
	var matkhau = document.getElementById("txtMK").value;
	var ghinho = document.getElementById("chkGhiNho");
	if(('localStorage' in window) && window['localStorage'] != null){
		localStorage.setItem('tendangnhap', tendangnhap);
		localStorage.setItem('matkhau', matkhau);
		alert("Tên người dùng : " + localStorage.getItem('tendangnhap') + ", Mật khẩu : " + localStorage.getItem('matkhau'));
	}
	else{
		alert("Trình duyệt không hỗ trợ LocalStorage");
	}
	
	//ghi nho thong tin
	if(ghinho.checked)
	{
		localStorage.setItem('ghinho', 1);
	}
}
</script>
</head>
<body onLoad="loadData()" >

<form method="get" name="frmDangNhap" >

<table width="50%" border="1" align="center">

<tr>

<th colspan="2" scope="col">Đăng nhập </th>

    </tr>


<tr>

<td>Tên đăng nhập: </td>


<td><input type="text" id="txtDN" name="txtDN" /></td>

  </tr>


<tr>

<td>Mật khẩu:</td>


<td><input type="text" id="txtMK" name="txtMK" /></td>

  </tr>


<tr>

<td></td>


<td><input type="button" value="Đăng nhập" onClick="store();"/>
	<input type="checkbox" id="chkGhiNho" />Ghi nhớ thông tin</td>

  </tr>

</table>

</form>

</body>
</html>

Video tham khảo

Chúc các bạn hiểu được cơ bản về lưu trữ web trong HTML5

Advertisements

Load danh sách sản phẩm từ MySQL với hiệu ứng CSS3


Khi các bạn xây dựng một website bán hàng trực tuyến chẳng hạn, phần nội dung trang chủ của các bạn phải thể hiện được danh sách các sản phẩm.

  • Trong danh sách này, về mặt hình thức, các bạn có thể bố trí các sản phẩm sắp xếp theo dạng bảng, sử dụng các định dạng CSS để trông đẹp mắt.
  • Tiếp đến là phần nội dung, các bạn sử dụng ngôn ngữ để load trực tiếp dữ liệu từ cơ sở dữ liệu MySQL.

Vì thế, ở ví dụ này, chúng ta sẽ xây dựng một trang chủ đơn giản với dữ liệu động load từ cơ sở dữ liệu, kết hợp với CSS3 tạo giao diện thân thiện người dùng.

Giao diện sẽ xây dựng:

trangchu

Trước khi thực hiện, yêu cầu:

  • Cài đặt chương trình Xampp để sử dụng ngôn ngữ PHP và MySQL.
  • Tạo một thư mục gốc danhsachsanpham với các thành phần sau:

thumucgoc

Trong thư mục images, copy 4 hình sản phẩm và đặt tên lần lượt là: 1.png, 2.png, 3.png, 4.png.

Khi mọi thứ sẵn sàng, các bạn làm theo các bước sau:

Bước 1: Vào phpmyadmin, tạo cơ sở dữ liệu tên là quanlybanhang với cấu trúc bảng sanpham như sau:

csdl

Sau đó, chèn 4 sản phẩm vào bảng:

dulieu

Bước 2: Tạo các file css để định dạng danh sách và hiển thị hiệu ứng:

  • demo.css

@import url('reset.css');
/* General Demo Style */
body{
 background:#f9f9f9 url(../images/white_texture.jpg) repeat top left;
 color: #333;
 font-family: 'Oswald', Arial, sans-serif;
 font-size: 13px;
}
.container{
 position:relative;
}
a{
 color: #fff;
 text-decoration: none;
}
.clr{
 clear: both;
}
.main{
 position:relative;
 width:680px;
 margin: 0 auto;
}
h1{
 margin:0px;
 padding:20px 20px 10px 20px;
 font-size:34px;
 color:#333;
 text-shadow:1px 1px 1px #fff;
 text-align:left;
 font-weight:400;
 text-align:center;
}
h1 span{
 display:block;
 font-size: 14px;
 font-family: Georgia, serif;
 font-style: italic;
 color:#b2891b;
 padding-top:10px;
}
/* Header Style */
.header{
 font-family:'Arial Narrow', Arial, sans-serif;
 line-height: 24px;
 font-size: 11px;
 background: #000;
 opacity: 0.9;
 text-transform: uppercase;
 z-index: 9999;
 position: relative;
 -moz-box-shadow: 1px 0px 2px #000;
 -webkit-box-shadow: 1px 0px 2px #000;
 box-shadow: 1px 0px 2px #000;
}
.header a{
 padding: 0px 10px;
 letter-spacing: 1px;
 color: #ddd;
 display: block;
 float: left;
}
.header a:hover{
 color: #fff;
}
.header span.right{
 float: right;
}
.header span.right a{
 float: none;
 display: inline;
}

.more{
 position:relative;
 clear:both;
 font-family:'Arial Narrow', Arial, sans-serif;
 text-transform: uppercase;
 font-size: 11px;
 padding: 5px 0px 10px;
 width: 540px;
 margin: 0 auto;
}
.more ul{
 display:block;
 text-align:center;
 height: 30px;
}
.more ul li{
 display: block;
 padding: 4px 2px;
 float:left;
}
.more ul li.selected a,
.more ul li.selected a:hover{
 background:#b2891b;
 color:#fff;
 text-shadow:none;
}
.more ul li a{
 color:#555;
 float:left;
 background:#fff;
 width:40px;
 padding: 2px 5px;
 -moz-box-shadow:1px 1px 2px #aaa;
 -webkit-box-shadow:1px 1px 2px #aaa;
 box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
 background:#000;
 color:#fff;
}
  • style_common.css:
.view {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
  • style1.css
.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(219,127,8, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
				

Bước 3: Tạo file kết nối với cơ sở dữ liệu

  • dbconnect.php
<!--?php $connect = mysql_connect("localhost", "root", "") or die("Không kết nối được với MYSQL"); mysql_select_db("quanlybanhang", $connect) or die ("Không tìm thấy cơ sở dữ liệu"); mysql_query("SET NAMES utf8"); ?-->

Bước 4: Tạo trang index

<!DOCTYPE html>
<html>
 <head>
 <title>Danh sách sản phẩm</title>
 <meta charset="UTF-8" />
 
 <link rel="stylesheet" type="text/css" href="css/demo.css" />
 <link rel="stylesheet" type="text/css" href="css/style_common.css" />
 <link rel="stylesheet" type="text/css" href="css/style1.css" />
 </head>
 <body>

<div class="container"> 

<div class="main">
 <?php include ("dbconnect.php"); $rs = mysql_query("select * from sanpham"); while($row = mysql_fetch_array($rs)){ ?>

<div class="view view-first">
 <img src="images/<?php echo $row['hinhanh']; ?>" />

<div class="mask">

<h2><?php echo $row['tensanpham']; ?></h2>



<?php echo $row['mota']; ?>

 <a href="#" class="info">MUA HÀNG</a>
 </div>

 </div>

 
 <?php } ?> 
 </div>

 </div>

 </body>
</html>

Chúc các bạn thành công.

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.

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

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ụ:

@media screen and (min-width:500px) { ... }

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"&gt;
<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:

@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;
}
}

Ở đâ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.

Sử dụng thư viện PhpMailer để gởi thư


 

Sử dụng thư việc PhpMailer để gởi thư. Chúng ta sử dụng tài khoản gmail để gởi thư.

Thư viện phpmailer download từ website sourceforge.net

1 $mail = new PHPMailer(true); 2 $mail->IsSMTP(); 3 try { 4 $mail->CharSet = "UTF-8"; 5 $mail->Host = "salomon.com"; 6 $mail->SMTPDebug = 1; 7 $mail->SMTPAuth = true; 8 $mail->SMTPSecure = "ssl"; 9 $mail->Host = "smtp.gmail.com"; 10 $mail->Port = 587; 11 $mail->Username = "ngotuongdan04"; 12 $mail->Password = "ngotuongdan"; 13 $mail->AddReplyTo('ntdan@ctu.edu.vn', 'Web master'); 14 $mail->AddAddress($email, "Web master"); 15 $mail->SetFrom('ntdan@ctu.edu.vn', 'Web master'); 16 $mail->AddReplyTo('ntdan@ctu.edu.vn', 'Web master'); 17 $mail->Subject = 'M?t kh?u m?i'; 18 $mail->AltBody = 'S? d?ng tr?nh duy?t tương ?ng!'; 19 $mail->Body = $newpass; 20 $mail->Send(); 21 } catch (phpmailerException $e) { 22 echo $e->errorMessage(); 23 } catch (Exception $e) { 24 echo $e->getMessage(); 25 } 26

Lưu ý thay thế tài khoản và mật khẩu mail của bạn

PHP to JSON – Chuyển dữ liệu sang JSON trong PHP


JSON đang dần thay thế XML trong việc làm định dữ liệu trung gian giữa các hệ thống khác nhau. Đối với PHP phiên bản lớn hơn 5.4.0 cũng đã hỗ trợ thư viện chuyển đối sang JSON và ngược lại.

JsonSerializable::jsonSerialize là thư việc chuyển từ PHP sang JSON với sự hỗ trợ của hàm json_encode

Ví dụ với dữ liệu chuỗi đơn giản

1 <?php 2 // tạo lớp chuyển đối 3 class StringValue implements JsonSerializable { 4 public function __construct($string) { 5 $this->string = (string) $string; 6 } 7 8 public function jsonSerialize() { 9 return $this->string; 10 } 11 } 12 // in ra với client có thể lấy dữ liệu này về 13 echo json_encode(new StringValue('Hello!'), JSON_PRETTY_PRINT); 14 ?>

Ví dụ với số nguyên

1 <?php 2 class IntegerValue implements JsonSerializable { 3 public function __construct($number) { 4 $this->number = (integer) $number; 5 } 6 public function jsonSerialize() { 7 return $this->number; 8 } 9 } 10 echo json_encode(new IntegerValue(1), JSON_PRETTY_PRINT); 11 ?>

Kết quả

1

Với định dạng mảng

1 <?php 2 class ArrayValue implements JsonSerializable { 3 public function __construct(array $array) { 4 $this->array = $array; 5 } 6 7 public function jsonSerialize() { 8 return $this->array; 9 } 10 } 11 $array = [1, 2, 3]; 12 echo json_encode(new ArrayValue($array), JSON_PRETTY_PRINT); 13 ?>

Kết quả

1 [ 2 1, 3 2, 4 3 5 ]

Tương tự như vậy cho mảng chuỗi

1 <?php 2 class ArrayValue implements JsonSerializable { 3 public function __construct(array $array) { 4 $this->array = $array; 5 } 6 7 public function jsonSerialize() { 8 return $this->array; 9 } 10 } 11 12 $array = ['foo' => 'bar', 'quux' => 'baz']; 13 echo json_encode(new ArrayValue($array), JSON_PRETTY_PRINT); 14 ?>

Và kết quả chúng ta có là

1 { 2 "foo": "bar", 3 "quux": "baz" 4 }

Ví dụ chúng ta lấy dữ liệu từ MySQL và chuyển sang JSON

http://www.w3resource.com/JSON/JSON-example.php

Ví dụ chúng ta có bảng

sanpham(id,ten,gia)

id ten gia
1 Nokia 525 3000000
2 Apple Macbook Pro 20000000
1 $sql="select * from sanpham"; 2 $result=mysql_query($sql); 3 $json=array(); 4 while($row=mysql_fetch_array($result)) 5 { 6 $sanpham=array(); 7 $sanpham["id"]=$row["id"]; 8 $sanpham["ten"]=$row["ten"]; 9 $sanpham["gia"]=$row["gia"]; 10 11 array_push($json["sanpham"],$sanpham); 12 } 13 echo json_encode($json);

Và kết quả là

1 "sanpham": 2 [ 3 { 4 "id":"1", 5 "ten":"Nokia 525", 6 "gia":"3000000", 7 }, 8 { 9 "id":"2", 10 "ten":"Apple Macbook Pro", 11 "gia":"20000000" 12 } 13 ]

Cũng hay đó chứ !

Kết hợp với bài này sẽ giúp xử lý JSON trên Android nhẹ nhàng hơn

Tìm hiểu GOOGLE MAP API V3 – xây dựng ứng dụng đánh dấu các điểm trên bản đồ cùng với Google Map API, PHP, Mysql, XML


Một bài tham khảo về sử dụng dữ liệu bản đồ google (tham khảo)

  • Từ xưa tới nay việc thiết lập một bản đồ địa lý cho một vùng luôn luôn được sự quan tâm lớn đối với con người. Nhắc tới bản đồ ta thường hình dung tới nó chỉ phục vụ cho các nhà thám hiểm các nhà địa lý, khảo cổ. Nhưng không hẳn vậy một bản đồ được xây dựng giúp cho nhà nước, cho tất cả các nghiên cứu khoa học, các thương nhân…Mỗi người dùng đều có mục đích riêng của mình.
  • Ngày nay với sự bùng nổ của Internet, có rất nhiều bản đồ số được xây dựng. Nó rất quan trọng cho con người và công việc. Nhu cầu con người ngày càng lớn, ai cũng cần đến bản đồ( bạn thử hình dung khi đầu tiên đến Hà Nội với kiến trúc như bây giờ nếu không có bản đồ trong tay thì sẽ như thế nào? ). Vì vậy ai, đơn vị, tổ chức nào? sẽ cung cấp cho chúng ta?
  • Google Map cung cấp cho chúng ta toàn bộ bản đồ của thế giới. Không những vậy, các API họ cung cấp giúp cho các nhà phát triển xây dựng nên các ứng dụng đáp ứng phần nào đó nhu cầu của con người. Giờ đây Google đã phát triển nên đến phiên bản gọi là :”Google Map API V3″.

Đọc thêm tại đây http://dev.vast.vn/tuananh/Web/C%C4%90077#chuong3

Semantic_Web

Một số bài thực hành php


Trang tim kiem san pham

Trang tai khoan-Lay lai mat khau

Trang san pham – hinh anh

Trang tai khoan-Chung thuc va phan quyen

Trang dang ky tai khoan

Nhung noi dung vao trang chu – menu ngang – menu trai

Nhung noi dung vao trang chu

Thuc hanh php – SQL

Thuc hanh sql

Trang chi tiet san pham – mua

Thuc hanh php