Standard Flags Value
Standard Flags Value
|
|
Post-it Assorted Color Standard Flags Value Pack., 1″, 1/2″ Sign Here Flags, $15.55 |
|
|
Post-it Assorted Color Standard Flags Value Pack., 1″ Flags 1″ Tabs, $15.65 |
Ajax-based Login Control Without Any Standard Database
Introduction: In this tutorial, I will present a simple Login control based on AJAX. Any login control requires a database which stores all the user profiles like passwords. Server-sided script uses that database to compare against user given strings and matches, shows errors or redirects to appropriate pages, etc. However, the proposed technique does not require any standard database like access, sql, etc. It just requires a native xml flat/text database which has the minimal complexity to implement in practice.
I was looking for this type of simple login approach and finally came up this idea while going though the asynchronous javascript and xml technique (in short AJAX). In many occasions, setting up an external database is cumbersome and not worthy in terms of minimal usages. The proposed login control however will help you to remove all the burden, compatibility issues and time. To make it clear, conventional and standard database implementation requires a database server, authentication and authorization before creating a database, database-string to be used in your script which is platform specific and to me always clumsy. To get rid of all the cost and efforts, the proposed approach uses a simple flat database and read the database using (AJAX) to make a nice-looking login control.
Keep reading!
Big Picture: The following figure shows the AJAX-based login control view. User can give his password in the text box. For simplicity I used all the states name of USA as passwords. If the user-given string matches with any of the passwords, the ‘submit query’ button appears. In other words, the user will be forwarded to his desired page by clicking on that button.
In case, the user’s input string does not match with any of the pre-fix of the passwords, the colour of the text box will be automatically yellow. It says the user not to try towards that direction and delete some of the characters to try again.
Necessary files: We need 4 files for this login control:
i) script.html
ii) script.css
iii) script.js
iv) script.xml
The html and CSS file represents the contents and design mainly to show different components. Note that the ‘submit query’ button is kept hidden from visibility. It will only appear when the user-string matches with any of the passwords stored in the xml file.
The javascript file controls the AJAX connectivity and read the password on the fly. As soon as user presses a letter on the textbox, the corresponding function works to check for any match or mismatch and behave accordingly.
While pressing a single character, the function populates all the passwords in a hidden ‘popoups’ (which actually does not popup!) html component. The function then matches those strings with the user-given string. If, the popups component is empty, it indicates the user-string is not a prefix of any of the passwords and makes the text box yellow.
However, in case of matching between those two strings, the submit button appears. User now can click and go directly to his desired page.
// —————————- script.html —————————————-
<html>
<head>
<title>Auto-fill states</title>
<link rel=”stylesheet” rev=”stylesheet” href=”script.css” />
<script src=”script.js” type=”text/javascript”>
</script>
</head>
<body>
<form action=”#”>
Please enter your Password:
<input type=”text” id=”searchField” autocomplete=”off” /><br />
<div id=”popups”> </div>
<input type=”submit” id=”submitme” style=”visibility:hidden”>
</form>
</body>
</html>
// —————————- script.css —————————————-
#popups {
position: absolute;
visibility:hidden;
}
#searchField.error {
background-color: #FC0;
}
// —————————- script.js —————————————-
window.onload = initAll;
var xhr = false;
var statesArray = new Array();
var passArray = new Array();
function initAll() {
document.getElementById(“searchField”).onkeyup = searchSuggest;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e) { }
}
}
if (xhr) {
xhr.onreadystatechange = setStatesArray;
xhr.open(“GET”, “us-states.xml”, true);
xhr.send(null);
}
else {
alert(“Sorry, but I couldn’t create an XMLHttpRequest”);
}
}
function setStatesArray() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseXML) {
var allStates = xhr.responseXML.getElementsByTagName(“item”);
for (var i=0; i<allStates.length; i++) {
statesArray[i] = allStates[i].getElementsByTagName(“label”)[0].firstChild;
}
}
}
else {
alert(“There was a problem with the request ” + xhr.status);
}
}
}
function searchSuggest() {
var str = document.getElementById(“searchField”).value;
document.getElementById(“searchField”).className = “”;
if (str != “”) {
document.getElementById(“popups”).innerHTML = “”;
var flag = 0;
for (var i=0; i<statesArray.length; i++) {
var thisState = statesArray[i].nodeValue;
if (str == thisState) {
flag = 1;
}
if (thisState.toLowerCase().indexOf(str.toLowerCase()) == 0) {
var tempDiv = document.createElement(“div”);
tempDiv.innerHTML = thisState;
//tempDiv.onclick = makeChoice;
tempDiv.className = “suggestions”;
document.getElementById(“popups”).appendChild(tempDiv);
}
}
var foundCt = document.getElementById(“popups”).childNodes.length;
if (foundCt == 0) {
document.getElementById(“searchField”).className = “error”;
document.getElementById(“submitme”).style.visibility=”hidden”;
}
if (foundCt > 0) {
if (flag == 1) {
document.getElementById(“submitme”).style.visibility=”visible”;
}
}
}
}
Javascript: Using window.XMLHttpRequest object, the AJAX connectivity starts. The client reads from an XML file, parse required data from it and use that information in the client end.
Then the value is compared against the given string. If it matches with the stored passwords, the ‘submit button’ appears (case B in the figure). However, any mismatch of both strings will keep the submit button hidden from viewing. Also the mismatch is shown by the yellow colour (case C in the figure). Note that case C indicates that the user-given string cannot be prefix of any stored passwords. Therefore user should delete and enter again.
// —————————- states.xml (passwords) —————————————-
<?xml version=”1.0″?>
<choices xml:lang=”EN”>
<item>
<label>Alabama</label>
<value>AL</value>
</item>
<item>
<label>Alaska</label>
<value>AK</value>
</item>
<item>
<label>Arizona</label>
<value>AZ</value>
</item>
………………………………….
…………………………………..
</choices>
Conclusion: The advantage of this code is that you do not need to use any sort of standard database (access, sql database, etc). You simple put these four files in your server, change or populate the xml script with your passwords (of clients) and run the html. Now call from the server (e.g. using http://localhost/path..). Its working, isn’t it? You see all the complexity regarding standard database connectivity in the server sided script is not required. In many occasions, this simple script will remove your burden to setup and external database and sql coding within your script.
Happy simpler coding!
Manzur Ashraf
About the Author
Manzur Ashraf is with Adtrans Ltd, Adelaide, Australia working as a Developer and SEO analyst. He can be reasched at manzur_bd@yahoo.com, manzurashraf@adtransgroup.com.au.
I am almost 27 weeks pregnant and had a CBC blood test done. I have not been able to reach my doctor yet?
but I am trying to see if anyone knows what these results mean? I was just emailed the results from Kaiser and have not spoken to my actual doctor yet. Although many of my results came back high or low. What do you think?
CBC WITHOUT DIFFERENTIAL
If “A” (for abnormal, reactive, or positive), “H” (for high), or “L” (for low) is displayed in the “Flag” column, the test result is outside the usual range. Minor abnormalities of test results are not unusual and are subject to the interpretation of your health care practitioner.
Occasionally you may see a test with no results, which is not a cause for concern and may be due to a duplicate order.
Component Results
Component Your Value Standard Range Flag
WBC’S AUTO 11.3 4.0-11.0 thou/mm3 H
RBC, AUTO 3.61 4.2-5.4 mil/mm3 L
HGB 11.0 12.0-16.0 g/dL L
HCT, AUTO 32.2 37-47 % L
RDW, BLOOD 15.9 11.5-14.5 % H
I am an ob nurse and these all look fine. You expect to see things a little low or a little high due to pregnancy and increased blood volume
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
