Loading
Showing posts with label Mysql. Show all posts
Showing posts with label Mysql. Show all posts

Sunday, February 10, 2008

Auto-Completing Properly

Now that you have a means to connect to a database, you can start replacing and upgrading some of the placeholder code you used in the previous chapter’s examples. Rather than using static arrays to house information on names within the database, you can get an up-to-date listing of all names in the database on the fly by merely including your database connection script (containing the PHP code to connect to the database) and performing a query to scour the user table for all name instances. Two files are in need of some dire code replacement, autocomp.php and validator.php.

<?php
//autocomp.php
//Add in our database connector.
require_once ("dbconnector.php");
//And open a database connection.
$db = opendatabase();
$foundarr = array ();
//Set up the dynamic query string.
$querystr = "SELECT name FROM user WHERE name LIKE ➥
LOWER('%" . mysql_real_escape_string ($_GET['sstring']) . "%') ORDER BY name ASC";
if ($userquery = mysql_query ($querystr)){
while ($userdata = mysql_fetch_array ($userquery)){
if (!get_magic_quotes_gpc()){
$foundarr[] = stripslashes ($userdata['name']);
} else {
$foundarr[] = $userdata['name'];
}
}
} else {
echo mysql_error();
}
//If we have any matches, then we can go through and display them.
if (count ($foundarr) > 0){
?>
<div style="background: #CCCCCC; border-style: solid; border-width: 1px;➥
border-color: #000000;">
<?php
for ($i = 0; $i < count ($foundarr); $i++){
?><div style="padding: 4px; height: 14px;" onmouseover=➥
"this.style.background = '#EEEEEE'" onmouseout=➥
"this.style.background = '#CCCCCC'" onclick=➥
"setvalue ('<?php echo $foundarr[$i]; ?>')"><?php echo $foundarr[$i]; ?></div><?php
}
?>
</div>
<?php
}
?>

Notice how the preceding code affects your autocomp.php file. Now, rather than referencing an array to check for name matches, the system actually checks within the database for any matches, using the LIKE operator. This works far better by allowing the system to check dynamically for any new names that may be in the database.
Similarly, your validator.php file now does much the same validation checking as your autocomp.php file. This time, however, rather than checking for an exact match against an array of names, the system now checks for an actual database match for the name in question. Again, this is far superior, as you now have a means to properly store information on saved names. Note that the code flow is largely the same, but now it is done properly via a real data storage model, and the result is a nicely validated form

<?php
//validator.php
//Add in our database connector.
require_once ("dbconnector.php");
//And open a database connection.
$db = opendatabase();
//Set up the dynamic query string.
$querystr = "SELECT userid FROM user WHERE name = ➥
LOWER('" . mysql_real_escape_string ( $_GET['sstring']) . "')";
if ($userquery = mysql_query ($querystr)){
if (mysql_num_rows ($userquery) == 0){
//Then return with an error.
?><span style="color: #FF0000;">Name not found...</span>>?php
} else {
//At this point we would go to the processing script.
?><span style="color: #FF0000;">Form would now submit...</span><?php
}
} else {
echo mysql_error();
}
?>




Querying a MySQL Database

In order to make a valid query to a database table, the table must first be there. Let’s create a table called block that has the purpose of storing a random word. The following SQL code (the language that MySQL uses to perform actions) will create the table:

CREATE TABLE block (
blockid INT AUTO_INCREMENT PRIMARY KEY,
content TEXT
);

Now that you have a valid table named block created, you can go ahead and insert some data using SQL once more. Consider the following code to insert eight random words into your block table:

INSERT INTO block (content) VALUES ('frying');
INSERT INTO block (content) VALUES ('awaits');
INSERT INTO block (content) VALUES ('similar');
INSERT INTO block (content) VALUES ('invade');
INSERT INTO block (content) VALUES ('profiles');
INSERT INTO block (content) VALUES ('clothes');
INSERT INTO block (content) VALUES ('riding');
INSERT INTO block (content) VALUES ('postpone');

Now that you have a valid table set up and information stored within that table, it is time to work with Ajax and PHP to perform a query to the database dynamically and without any page refreshing. Ajax functionality can be triggered based on different events. Certainly, a common event (basically, an action that can be “captured” to execute code) to trigger Ajax code can come from the onclick event. The reason this event proves so useful is because many HTML objects allow this event to be fired. By making use of the onclick event, you can achieve some pretty interesting functionality. Consider the following block of code, which will randomly grab a word from your database of random words and populate it into the element that was clicked. When the page first loads, sample4_1.html

Now have a look at the following code for sample4_1.html. You will notice that each block has an onclick event registered for it. This is the action that will trigger your Ajax functionality.





<title>Sample 4_1</title>
<meta equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="functions.js"></script>

<div class="dborder" id="">" onclick="grabword (this.id)"></div>

Now, when any of the boxes are clicked, they fire a function called grabword, which accepts the current object’s id as an argument. This is the function that will run an Ajax request to either populate the box or, if the box is already populated, make the box empty again. The following JavaScript function (contained within functions.js) will perform the functionality for you.

//functions.js
//Create a boolean variable to check for a valid Internet Explorer instance.
var xmlhttp = false;
//Check if we are using IE.
try {
//If the javascript version is greater than 5.
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {
//If not, then use the older active x object.
try {
//If we are using IE.
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
//Else we must be using a non-IE browser.
xmlhttp = false;
}
}
//If we are using a non-IE browser, create a javascript instance of the object.
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
//Function to run a word grabber script.
function grabword (theelement){
//If there is nothing in the box, run Ajax to populate it.
if (document.getElementById(theelement).innerHTML.length == 0){
//Change the background color.
document.getElementById(theelement).style.background = "#CCCCCC";
serverPage = "wordgrabber.php";
var obj = document.getElementById(theelement);
xmlhttp.open("POST", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
} else {
//Change the background color.
document.getElementById(theelement).style.background = "#FFFFFF";
//If the box is already populated, clear it.
document.getElementById(theelement).innerHTML = "";
}
}

You first create an XMLHttpRequest object and then check to see if the box already has content. If the box is already filled with content, the grabword function merely sets the innerHTML property of the object to blank. If it is empty, however, the function makes an Ajax request to populate the box with the results of the output from the wordgrabber.php file. Let’s have a look at the wordgrabber.php file to see how the query is executed:

The PHP script first requires the database connection script built in the previous code block (dbconnector.php), and then calls the opendatabase function to allow a valid connection to the database. From there, you simply build a SQL query to grab the content of a random word from your block table. Last, the content is outputted;
shows the effects of clicking and unclicking the different boxes.

Connecting to MySQL

In order to access and make use of a MySQL database, you first must create a database and then create and manage a set of tables within that database. In order to connect to your database, however, you must also create a user that has permissions to access the database in question, and assign them a password. For the following examples, I have created a database called taskdb. I have also assigned a user called apressauth to the database and given the user a password: tasks. In order to perform this sort of database management, you can go ahead and use the command line interface MySQL provides, or try a more robust solution. I prefer phpMyAdmin (www.phpmyadmin.net) for a web-based solution and SQLyog (www.webyog.com/sqlyog) for remote connections. Both are free solutions and will serve you well.
To connect to a MySQL database using PHP, you must make use of the mysql_connect function. Consider the following code, found within the file dbconnector.php, that will allow you to connect to the database:

//dbconnector.php
//Define the mysql connection variables.
define ("MYSQLHOST", "localhost");
define ("MYSQLUSER", "apressauth");
define ("MYSQLPASS", "tasks");
define ("MYSQLDB", "taskdb");
function opendatabase(){
$db = mysql_connect (MYSQLHOST,MYSQLUSER,MYSQLPASS);
try {
if (!$db){
$exceptionstring = "Error connecting to database:
";
$exceptionstring .= mysql_errno() . ": " . mysql_error();
throw new exception ($exceptionstring);
} else {
mysql_select_db (MYSQLDB,$db);
}
return $db;
} catch (exception $e) {
echo $e->getmessage();
die();
}
}
?>

As you can see, there are two parts to any database connection using MySQL. First, the mysql_connect function must attempt to make a connection to the database and validate the username and password. If a valid connection is made, a connection to the server will be retained. At this point, you must now specify which database you want to be working on. Since there could potentially be many databases assigned to each MySQL user, it is imperative that the script know which database to use. Using the mysql_select_db function, you can do just that. If everything goes properly, you should now have an open connection to the database, and you are ready to move on to the next stop: querying the database.

Database-Driven Ajax

Now that you have a basic understanding of how to use PHP with Ajax to accomplish
some dynamic and functional goals, it’s time to start tying in some of the more complicated
and powerful functionality available to PHP. The advantage to using a robust
server-side language such as PHP with Ajax-sculptured JavaScript is that you can use it
to accomplish tasks that are not easily accomplished (if at all) with JavaScript. One such
set of core functionality is that of database storage and retrieval.
It goes without saying that MySQL combined with PHP is a developer’s dream. They
are both incredibly affordable, robust, and loaded with documentation and functionality.
While MySQL generally has a licensing fee, an exception has been made for working with
MySQL together with PHP, called FLOSS (Free/Libre and Open Source Software). FLOSS
allows for free usage of MySQL (for more information on FLOSS, see the MySQL documentation
at www.mysql.com/company/legal/licensing/foss-exception.html). PHP and
MySQL connect to each other with the greatest of ease and perform quite admirably from
a processing standpoint. With the recent release of MySQL 5.0, you can now accomplish
many things that were previously possible only with expensive database solutions such
as Oracle.

MySQL 5.0 has added a few new features—some of the more powerful ones include
stored procedures, triggers, and views. Stored procedures allow you to create and access
functions executed strictly on the MySQL server. This allows for developers to put a
greater load on the MySQL server and less on the scripting language they are using.
Triggers allow you to perform queries that fire when a certain event is triggered within
the MySQL server. Again, like stored procedures, triggers allow the MySQL server to take
on more of a processing role, which takes some emphasis off of the scripting language.
Views allow you to create custom “reports” that can reference information within the
database. Calling views is a simple and efficient way to “view” certain data within your
database. All of this functionality has been available in more elaborate database systems
(such as Oracle) for years, and MySQL’s inclusion of them really shows that it’s becoming
a key player in the database game.

The ability to harness PHP-, MySQL-, and Ajax-sculpted JavaScript is a very powerful
tool that is readily available to any developer in the know. In fact, entire software applications
have been built using the Ajax architecture to manage a MySQL database. Online
applications such as TurboDbAdmin (www.turboajax.com/turbodbadmin.html)—have come a long way in showing you what is possible when PHP, Ajax, and
MySQL come together. TurboDbAdmin shows off a good portion of the Ajax-based
application gamut. Everything from inserting and maintaining rows, switching tabs,
performing queries, and creating dynamic content is handled by seamless Ajax-based
functionality. All in all, TurboDbAdmin does a very solid job of showing that Ajax is very
capable of handling complex database management.

While TurboDbAdmin does an admirable job working with your MySQL server, and
is very simple to install and implement, I find that the functionality is not quite as
robust as some of the more refined, PHP-based MySQL management systems, such as
phpMyAdmin (more on that later). Still, TurboDbAdmin provides an interesting perspective
on where Ajax can take you and what can be accomplished.

The focus of this post be to show you just how easy it is to create online Ajaxdriven
applications that can connect easily to a MySQL server.