Context Navigation

customers.html

Visit:

Revision 11266, 8.2 kB (checked in by alex, 8 months ago)
EOL fixes
Property svn:eol-style set to `native`

Line
1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2
3	<html>
4	<head>
5	<script type="text/javascript"
6	src="../../../../dojo/dojo.js" djConfig="isDebug: false"></script>
7	<script type="text/javascript" src="../../../../dojox/off/offline.js"></script>
8
9	<style type="text/css">
10	body{
11	padding: 2em;
12	}
13
14	#dataTable{
15	margin-top: 2em;
16	}
17
18	button{
19	margin-left: 1em;
20	}
21
22	th, tr, td{
23	text-align: left;
24	}
25
26	table{
27	text-align: center;
28	clear: both;
29	}
30
31	#cryptoContainer{
32	float: left;
33	width: 60%;
34	}
35
36	#numRowsContainer{
37	float: right;
38	width: 40%;
39	}
40
41	#numRowsContainer input{
42	margin-left: 1.5em;
43	width: 5em;
44	}
45
46	.table-columns{
47	font-weight: bold;
48	}
49	</style>
50
51	<script>
52	dojo.require("dojox.sql");
53
54	dojo.connect(window, "onload", function(){
55	// draw our customer table on the screen
56	createTable();
57
58	// create our customer table in the database
59	dojox.sql("DROP TABLE IF EXISTS CUSTOMERS");
60	dojox.sql("CREATE TABLE CUSTOMERS ("
61	+ "last_name TEXT, "
62	+ "first_name TEXT, "
63	+ "social_security TEXT"
64	+ ")"
65	);
66	});
67
68	function createTable(){
69	// get number of rows to create
70	var NUM_ROWS = document.getElementById("numRows").value;
71	if(!NUM_ROWS){
72	alert("Please enter the number of "
73	+ "customer rows the table should have");
74	return;
75	}
76
77	var table = document.getElementById("dataTable");
78	if(table){
79	table.parentNode.removeChild(table);
80	}
81
82	table = document.createElement("table");
83	table.setAttribute("id", "dataTable");
84	table.setAttribute("border", 1);
85
86	// if we don't use IE's craptacular proprietary table methods
87	// we get strange display glitches
88	var tr = (dojo.isIE) ? table.insertRow() : document.createElement("tr");
89	tr.className = "table-columns";
90	var th = (dojo.isIE) ? tr.insertCell() : document.createElement("th");
91	th.appendChild(document.createTextNode("Last Name"));
92	if(!dojo.isIE){
93	tr.appendChild(th);
94	}
95	th = (dojo.isIE) ? tr.insertCell() : document.createElement("th");
96	th.appendChild(document.createTextNode("First Name"));
97	if(!dojo.isIE){
98	tr.appendChild(th);
99	}
100	th = (dojo.isIE) ? tr.insertCell() : document.createElement("th");
101	th.appendChild(document.createTextNode("Social Security"));
102	if(!dojo.isIE){
103	tr.appendChild(th);
104
105	table.appendChild(tr);
106	}
107
108	for(var i = 1; i <= NUM_ROWS; i++){
109	tr = (dojo.isIE) ? table.insertRow() : document.createElement("tr");
110	tr.className = "data-item";
111
112	var elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td");
113	elem.className = "last-name";
114	var lastName = "Doe" + i;
115	elem.appendChild(document.createTextNode(lastName));
116	if(!dojo.isIE){
117	tr.appendChild(elem);
118	}
119
120	elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td");
121	elem.className = "first-name";
122	var firstName = "John" + i;
123	elem.appendChild(document.createTextNode(firstName));
124	if(!dojo.isIE){
125	tr.appendChild(elem);
126	}
127
128	elem = elem = (dojo.isIE) ? tr.insertCell() : document.createElement("td");
129	elem.className = "social-security";
130	var ss = 513121500 + i;
131	ss = new String(ss);
132	ss = ss.slice(0, 3) + "-" + ss.slice(3, 5) + "-" + ss.slice(5);
133	elem.appendChild(document.createTextNode(ss));
134	if(!dojo.isIE){
135	tr.appendChild(elem);
136
137	table.appendChild(tr);
138	}
139	}
140
141	document.body.appendChild(table);
142
143	// reset button state
144	dojo.byId("encrypt").disabled = false;
145	dojo.byId("decrypt").disabled = true;
146	}
147
148	function readTable(){
149	var data = [];
150	var rows = dojo.query(".data-item");
151	dojo.forEach(rows, function(row){
152	var td = row.getElementsByTagName("td");
153
154	var lastName = td[0].childNodes[0].nodeValue;
155	var firstName = td[1].childNodes[0].nodeValue;
156	var ssNumber = td[2].childNodes[0].nodeValue;
157
158	data.push({lastName: lastName, firstName: firstName, ssNumber: ssNumber,
159	toString: function(){
160	return "{lastName: " + lastName
161	+ ", firstName: " + firstName
162	+ ", ssNumber: " + ssNumber
163	+ "}";
164	}});
165	});
166
167	return data;
168	}
169
170	function setData(data){
171	var rows = document.getElementsByTagName("tr");
172	for(var i = 1; i < rows.length; i++){
173	var customer = data[i - 1];
174	var td = rows[i].getElementsByTagName("td");
175	td[2].childNodes[0].nodeValue = customer.social_security;
176	}
177	}
178
179	function encrypt(){
180	// disable our buttons
181	dojo.byId("encrypt").disabled = true;
182	dojo.byId("decrypt").disabled = true;
183
184	var data = readTable();
185
186	var password = document.getElementById("password").value;
187
188	// delete any old data
189	dojox.sql("DELETE FROM CUSTOMERS");
190
191	// insert new data
192	insertCustomers(data, 0, password);
193	}
194
195	function insertCustomers(data, i, password){
196	var nextIndex = i + 1;
197
198	if(i >= data.length){
199	var savedRows = dojox.sql(*"SELECT FROM CUSTOMERS"**);
200	setData(savedRows);
201	return;
202	}
203	dojox.sql("INSERT INTO CUSTOMERS VALUES (?, ?, ENCRYPT(?))",
204	data[i].lastName, data[i].firstName,
205	data[i].ssNumber,
206	password,
207	function(results, error, errorMsg){
208	// enable our buttons
209	dojo.byId("encrypt").disabled = true;
210	dojo.byId("decrypt").disabled = false;
211
212	if(error == true){
213	alert(errorMsg);
214	return;
215	}
216
217	insertCustomers(data, nextIndex, password);
218	}
219	);
220	}
221
222	function decrypt(){
223	// disable our buttons
224	dojo.byId("encrypt").disabled = true;
225	dojo.byId("decrypt").disabled = true;
226
227	var password = document.getElementById("password").value;
228
229	dojox.sql("SELECT last_name, first_name, DECRYPT(social_security) FROM CUSTOMERS",
230	password,
231	function(results, error, errorMsg){
232	// enable our buttons
233	dojo.byId("encrypt").disabled = false;
234	dojo.byId("decrypt").disabled = true;
235
236	if(error == true){
237	alert(errorMsg);
238	return;
239	}
240
241	setData(results);
242	}
243	);
244	}
245	</script>
246	</head>
247
248	<body>
249	<h1>Dojo SQL Cryptography</h1>
250
251	<h2>Instructions</h2>
252
253	<p>This demo shows Dojo Offline's SQL encryption technologies. In the table below, we have a
254	sample SQL table that has three columns of data: a last name, a first name, and
255	a social security number. We don't want to store the social security numbers
256	in the clear, just in case they are downloaded for offline use to a laptop and the
257	laptop is stolen.</p>
258
259	<p>To use this demo, enter a password and press the ENCRYPT button to see the Social Security column encrypt. Enter
260	the same password and press DECRYPT to see it decrypt. If you enter an incorrect password and
261	press DECRYPT, the Social Security column will remain encrypted and only show gibberish.</p>
262
263	<p>Under the covers we use 256-bit AES encryption and your password to derive the crypto key; we use
264	a facility in Google Gears to do the cryptography in such a way that the browser does not lock up
265	during processing. Dojo Offline ties this cryptography into Dojo SQL, providing convenient ENCRYPT()
266	and DECRYPT() SQL keywords you can use to easily have this functionality in your
267	own offline applications. To learn how you can use this feature
268	<a href="http://docs.google.com/View?docid=dhkhksk4_8gdp9gr#crypto" target="_blank">see here</a>.</p>
269
270	<div id="cryptoContainer">
271	<label for="password">
272	Password:
273	</label>
274
275	<input type="input" name="password" id="password" value="sample_password">
276
277	<button id="encrypt" onclick="window.setTimeout(encrypt, 1)">Encrypt</button>
278
279	<button id="decrypt" onclick="window.setTimeout(decrypt, 1)" disabled="true">Decrypt</button>
280	</div>
281
282	<div id="numRowsContainer">
283	<label for="numRows">
284	Number of Customer Rows in Table:
285	</label>
286
287	<input id="numRows" type="input" value="30">
288
289	<button onclick="createTable()">Update</button>
290	</div>
291	</body>
292	</html>

Note: See TracBrowser for help on using the browser.

Context Navigation

root / dojox / trunk / _sql / demos / customers / customers.html

Download in other formats: