Backend and Flash, Where are all the geeks?
It's my opinion that Flash is not used enough in combination with PHP and/or Perl. I thought I'd show everyone how we created the Ask Leaphy searchable database on http://www.odslinux.com Naturally it can be adapted to any searchable database.
The way it works is quite simple. You insert keyword data into the database in the following format:
keyword question answer
age personal information How old are you? 26
zyx1001 Where can I find information on your zyx10001 product? http://www.yoursite.com/products?id=zyx1001
contact phone information How can we contact you? 555-1212
The PHP and Flash do the rest. The PHP will scan the database for any matches, then return them in a scrollable window on the Flash. Clicking on any of the returned questions will then find the answer on the db.
Prerequisites:
- Database: MySQL, ODBC, MSSQL, PostgreSQL or InterBase (tutorial based on MySQL, but easily adaptable to others)
- PHP: Known to work with PHP versions 3.0.16-2 and 4.0.1.pl2, should work for any version above 3.0.7
- Web Server: Shouldn't matter, as long as PHP and the database can interact with the Web Server.
- Flash: Flash 4
Assumptions:
- Database: You are familiar with creating new databases, creating new tables and inserting data into the database.
- PHP: You're okay if you can copy and paste
- Web Server: You know where the php files exist on your server(ie /home/myserver/webdocs/dgssearch)
- Flash: The Actionscripting isn't too difficult
You will also need to configure a few more scripts, but I will provide instructions on each of those in the next few steps of the tutorial. The easiest way to follow along with this tutorial is to download the zip file included. It has all the relevant files attached.
Final warning: This tutorial isn't for you if you are unfamiliar with scripting or databases. You should be fine however, if you've ever worked with a database before. I'm not going to teach you how to unzip files or upload files to your web server, nor how to install a database on your system.
Database Setup
The first thing you need to do is create the database structure. This can be accomplished using a GUI like phpMyAdmin, WebMin or from the shell account as follows:
CREATE DATABASE mydatabase; USE mydatabase; CREATE TABLE keyword_data ( id int(11) DEFAULT '0' NOT NULL auto_increment, keywords varchar(120), question varchar(240), answer text, PRIMARY KEY (id) );
Now we want to insert some test data, it will come in handy later while testing the Flash. I've provided for a few possibilities with the data below.
INSERT INTO keyword_data (keywords, question, answer) VALUES
('contact reach phone address','How may we contact you?','Smoke signals are the best way to get a hold of us.');
INSERT INTO keyword_data (keywords, question, answer) VALUES
('music mp3','Can I download your mp3s?','Yes, while you will have to sacrifice your first born child though.');
INSERT INTO keyword_data (keywords, question, answer) VALUES
('phone toll free number','Do you have a toll free number?','Yes.');
DGS Search Setup
Once you've added a few database entries, you need to download DGS Search v0.9.5. DGS Search is the set of PHP scripts I used for the database search. I specifically liked it because it is modular, so creating the Flash integration was easy.
DGS Search v0.9.5 (it also comes included in the attached zip)
After you have unzipped it into your web directory, edit the config/config.php file to look like below. (Alternatively, I have included this file in the attached zip as well. It is titled config_flash.php You can make your changes with that file and then overwrite config/config.php with the config_flash.php)
<?
/*
** DGS Search
** config.php used for flash db by James Greenhalgh
** http://www.odslinux.com
** based on config.php written by James M. Sella
** Copyright (c) 2000 Digital Genesis Software, LLC. All Rights Reserved.
** Released under the GPL Version 2 License.
** http://www.digitalgenesis.com
*/
/* Change options below that are in bold */
/* General Options */
$config["installBase"] = "/path/to/dgssearch"; /* Absolute location of the directory of scripts. */
$config["searchModules"] = array("db"); /* Modules to search for results. */
$config["displayModules"] = array("flash"); /* Customized for Flash */
$config["fileSeparator"] = "/"; /* Would be "\\" for Win9x/NT/2000. */
$config["header"] = "config/header.php"; /* The page header. */
$config["footer"] = "config/footer.php"; /* The page footer. */
$config["displayHeader"] = ""; /* Header on the Display Results page. */
$config["headerColor"] = "666699"; /* The color of the header on the Display Results page. */
$config["infoColor"] = "008000"; /* The color of the info sections on the Display Results page. */
$config["fonts"] = "Arial, Sans-Serif, Helvetica"; /* Fonts to be used on the Display Results page. */
$config["dateFormat"] = "M j, Y H:i:s"; /* Date format for Last Modified on Display Results. */
$config["results"] = 10; /* Default results per page. 0 is unlimited. */
$config["boldQuery"] = true; /* Bold the query string in description. */
$config["timed"] = true; /* Displays search time to user. */
$config["translate"] = false; /* Displays a 'Translate' link for each result. */
$config["translateFrom"] = "en_de"; /* Sets the default translation to be preformed. See INSTALL. */
$config["warn"] = true; /* Displays warnings (ie: SAFE MODE warnings). */
$config["debug"] = false; /* Displays a lot of slightly useful or annoying information. */
/* Database Options -- Search module 'db' */
$database[0]["type"] = "mysql"; /* Supports mysql, mssql, odbc, ibase and pgsql. */
$database[0]["server"] = "localhost"; /* The SQL Server. (Ignored by ODBC). */
$database[0]["username"] = "username"; /* Username to connect to database. */
$database[0]["password"] = "password"; /* Password to connect to database. */
$database[0]["database"] = "mydatabase"; /* The database or DSN you will be accessing. */
$database[0]["persistent"] = true; /* Use persistent database connections. */
$database[0]["table"] = array("keyword_data"); /* The table in database to search. */
$database[0]["answertable"] = "keyword_data"; /* The table in database where the answer will come from. */
$database[0]["tableAssoc"] = "answer is not null"; /* A rules for associating the tables. See INSTALL. */
$database[0]["returnField"] = array("id", "keywords", "question"); /* Fields returned from db. Can be used to sub into link, url and desc. */
$database[0]["searchField"] = array("keywords"); /* The fields to search. */
$database[0]["link"] = "@2@"; /* This is the question returned. */
$database[0]["url"] = "@0@"; /* This is the ID returned on a match. */
$database[0]["desc"] = array("@3@"); /* The description to display. */
$database[0]["wildcard"] = "both"; /* Wildcard support: none, left, right or both */
$database[0]["orderByDepth"] = -1; /* OrderBy Depth. Default of -1 is all. See INSTALL. */
$database[0]["forceLower"] = true; /* Forces a case-insensitive search by lowercasing everything. */
/* Generic */
$config["version"] = "v0.9.5";
$config["hideCredits"] = true;
$config["maxResults"] = 65535;
/* FindExt() - utils.php */
$config["extSeparator"] = ".";
$config["thisDir"] = ".";
$config["parentDir"] = "..";
?>
Once your config is setup, you have to go and edit the footer.php and header.php in the config/ directory.
It is imperative that both of these files have no data at all (0 byte file). I've also included those files in the attached zip
The Answer Script
In the attached zip file are different scripts for each db for returning the answer. Select the one for your database, rename the file to answer.php and place it in the root directory of dgssearch (the same location as search.php)<?
/*
** answer_mysql.php
** Quick db query to display the answer of the question
** This is necessary because we dont want all the
** answers loading into the flash on the first query.
** Thats why we execute twice.
*/
require("config/config.php");
/* Get the variables from the config file */
$answertable = $database[0]["answertable"];
$server = $database[0]["server"];
$username = $database[0]["username"];
$password = $database[0]["password"];
$database = $database[0]["database"];
/* Get the variables sent from the Flash*/
$id = $HTTP_POST_VARS["id"];
/* Connect to MySQL */
mysql_pconnect($server, $username, $password);
/* Connect to Specified Database */
@mysql_select_db("$database")or die("&theTruth=DatabaseError&answerloaded=1");
/* Find the answer and display it */
$result = mysql_query("select answer from $answertable where id = $id");
while (list($answer) = mysql_fetch_row($result)) {
print("&theTruth=$answer");
}
print("&answerloaded=1");
?>
This PHP script gets executed when you click on one of the questions that have been returned, it is loaded in the goToLink Call in the Flash movie.
Onto the Flash
Well now that all the scary PHP and db stuff are done, the Flash is a breeze. I'm not going to go too in depth into the Flash, as the functionality is very basic. I will give a brief frame step by step though.
Frame 1:
The Ask Leaphy button gathers the question ('q') and how many results to return ('r') and sends those variables to the PHP.
On (Release, Key:) If (q ne "") Comment: Checks if the Maximum Results is a number, if not it returns 10. If (int(r) = 0) Set Variable: "r" = "10" End If Comment: Loads the variables into the PHP. Load Variables ("http://www.yourwebsite.com/dgssearch/search.php", "", vars=POST) Go to and Play ("Asking") End If End On
Frame 2:
The editable text fields become non editable and I changed the colour for effect. The loop begins waiting for the response from the PHP script. If the PHP has finished executing and a match was recorded, it goes to the 'Possible Answers' frame. If there is no match, then it proceeds to the 'Sorry' frame.
Comment: Check if the query returned any matches. If
((linksloaded eq "yes") and (link1> 0))
Set Variable: "i" = "1"
Set Variable: "links" = ""
Loop While (eval("link"&i) ne "")
Set Variable: "links" = links & eval("word"&i) & Newline
Set Variable: "i" = i+1
End Loop
Go to and Stop ("Possible Answers")
Else If ((linksloaded eq "yes") and (link1 = 0))
Go to and Stop ("Sorry")
End If
Frames 3-7:
This is the first loop to keep our playhead moving while the search.php is executing.
Frame 8:
This is the 'Sorry' frame. It is where the playhead goes to if no matches are made with the DB, it includes an Ask Again button that wipes all the variables and returns you to the first frame.
Frame 9:
This is the 'Possible Answers' frame. After the PHP has returned the variables, a text field is populated with the possible answers. This frame also includes 10 instances of the invisible button. These invisible buttons call the goToLink script, passing the buttonNumber variable that is different for each button.
On (Release)
Set Variable: "buttonNumber" = 1
Call ("goToLink")
End On
Set Variable: "id" = eval("link"&(links.scroll-1+buttonNumber))
If (id ne "")
Begin Tell Target ("/Cache")
Set Variable: "id" = /:id
Load Variables ("http://www.yourserver.com/dgssearch/answer.php", "", vars=POST)
Go to and Play (2)
End Tell Target
Go to and Play ("Answer")
End If
The only really tricky part of this Actionscript is perhaps the first line. To get the id, Flash evaluates what the link## variable is equal to, where ## is the buttonNumber variable sent from the invisible button + the scroll.
Frame 10:
This playhead begins to loop as the PHP seeks out the answer to the question. Once the answer is loaded it moves to the 'Answer Loaded' frame.
Comment: PHP loads the answer from the db
If (Cache:answerloaded)
Set Variable: "theTruth" = Cache:theTruth
Begin Tell Target ("/Cache")
Go to and Stop (1)
End Tell Target
Go to and Stop ("Answer Loaded")
End If
Frames 11-15:
This is the second loop to keep our playhead moving while the answer.php is executing.
Frame 16:
This is the 'Answer Loaded' frame. Simply a display for the answer that gets returned from the database query. It also includes buttons to either go back to the possible questions or GO Back and use a different keyword entirely.
Frame 17:
gotoLink Actionscript (as described earlier) Again, don't forget to change the server address in the Actionscript.
Testing Time
Once you have the swf generated, upload it and an HTML file to your server, you can get on with the testing. If you copied the sample data I used earlier, then entering a keyword query of 'phone' should result in an image like that depicted below:
Upon clicking the question "How may we contact you?" you should get an image like this one:
Finished
Well if everything went smooth then the only thing left for you to do is enter all your keyword data! We have over 800 searchable terms in our database, and that number will triple shortly as we enter all the software descriptions in our Ask Leaphy database as well.
Debugging Tips
- Check your header.php and footer.php, make sure they have no data ZERO BYTE
- Make sure you are calling an html file in your browser, not the swf directly.
- Make sure you use the absolute path to your dgssearch directory for the $config["installBase"]
/home/username/public_html/dgssearch is CORRECT
/dgssearch is INCORRECT - It is easier to debug the php by not using the flash. If your Flash movie loops endlessly, then the backend is probably screwing up. Try actually typing the php address in your browser address to help you debug the scripts. (ie http://www.yourserver.com/dgssearch/search.php?q=phone or http://www.yourserver.com/dgssearch/answer.php?id=1)
- Write me a nice email after trying everything, and I'll help you get it to work if I can.
Well I think that about covers it, if you need help troubleshooting, drop me a note at james@opendoorsoftware.com and I'll see what I can do for you. If anyone would like our database of man files, tutorials and software titles for their websites own use, then send me a mail as well.
| » Level Advanced |
Added: : 2001-02-19 Rating: 7.99 Votes: 45 Hits: 3829 |
| » Author |
| I work for a Canadian software company as a logisitics director. We provide custom configured Linux distributions. In my spare time I sleep. |
| » Download |
| Download the files used in this tutorial. |
| Download (103 kb) |
discuss this topic to forum
