i started writing some code using C# and the ASP.NET framework a little while ago and noticed that running my scripts locally was painfully slow, so after Googling the problem for 5 minutes, i discovered that the issue was firefox-related and not .NET-related.
http://weblogs.asp.net/dwahlin/archive/2007/06/17/fixing-firefox-slowness-with-localhost-on-vista.aspx
The last major component I needed to implement for my project involved adding dynamically generated & interactive Google Maps to my application. For this, I read up on most of the documentation available here: Google Maps API for Flash Developer Guide. The main steps were:
After building the user interface in MXML for my search application, I needed to go to my database and somehow retrieve records to display in the presentation tier. After reading this article, Exchanging Data, I adopted the approach demonstrated in the tutorial and understood how to apply this to my application.
Basically, I needed to trigger my application to call a PHP script that communicated with my MySQL database and returned this data back to my Flex application in XML format.
Here's part of the script I wrote in PHP that formats data from my query into XML:
echo "<events>";
while($row = mysql_fetch_array($qEvents)) {
echo "<event id=\"{$row['event_id']}\">";
echo "<name>{$row['event_name']}</name>";
echo "<description>".str_replace("&", "&", $row['event_description'])."</description>";
echo "<price>{$row['event_price']}</price>";
echo "<venue>{$row['venue_name']}</venue>";
echo "<address>{$row['address_line_1']} {$row['address_line_2']} {$row['city']} {$row['state']}</address>";
echo "<startdate>".date("m/d/Y",$row['dtm_start'])."</startdate>";
echo "<starttime>".date("g:i A",$row['dtm_start'])."</starttime>";
echo "<enddate>".date("m/d/Y",$row['dtm_end'])."</enddate>";
echo "<endtime>".date("g:i A",$row['dtm_end'])."</endtime>";
echo "<weblink>{$row['url_info']}</weblink>";
echo "<ticketlink>{$row['url_tickets']}</ticketlink>";
echo "</event>";
}
echo "</events>";
Unfortunately, the chaos of my job in addition to the amount of work I have to do for this assignment has prevented me from blogging anything at all. But now that I've come to a logical break point, it's probably a good time to note some of the issues I've been having with my final project...
Last weekend, I spent half a day trying to add external links to my Flex application! It was so frustrating because something that ordinarily takes me a second in HTML was causing me so much grief in ActionScript/MXML. I eventually came across this article on the Web, Listening for the link event in a Flex Label control, but even so, I felt that this method was overkill for something so simple. According to this code, I would have to create individual functions to handle each link in my application. NOT HAPPY JAN. So I went through the Flex documentation from Adobe more thoroughly until I discovered navigateToURL(). This allowed me to generate my links dynamically and pass them into this method for a more elegant way to launch external links. Easy!
Below is the way I've implemented this in my application:
<mx:LinkButton label="Buy Tickets" click="navigateToURL(new URLRequest(eventDataGrid.selectedItem.ticketlink));"/>
Last week, for work, I had to design an online form for an invitation to a seminar. One of the requirements of the form was that it had to have a drop-down box with several selections for dietary requirements, but if a user's selection wasn't offered, he or she could select "Other", upon which another form element (text field) magically appeared beside it to allow the user to enter in their custom dietary requirement.
To do this, I used JavaScript as demonstrated below:
<script language="JavaScript">
<!--//
function checkDietRequrements(req) {
if (req == "other") {
document.getElementById('dietReqs').value = '';
document.getElementById('dietReqs').style.display = 'block';
} else {
document.getElementById('dietReqs').value = req;
document.getElementById('dietReqs').style.display = 'none';
}
}
//-->
</script>
<form>
<table>
<tr>
<th>Dietary Requirements:</th>
<td>
<select name="diet_requirements" onchange="javascript:checkDietRequrements(this.value);">
<option value="" selected="selected">---</option>
<option value="ceoliac">Ceoliac</option>
<option value="kosher">Kosher</option>
<option value="lowfat">Low Fat</option>
<option value="vegan">Vegan</option>
<option value="vegetarian">Vegetarian</option>
<option value="other">Other, please specify</option>
</select>
</td>
<td><input id="dietReqs" name="diet_requirements" type="text" style="display:none;" /></td>
</tr>
</table>
</form>
My application is starting to take some shape which is encouraging. And while I'm quite happy with the Administration section of my web site, I have to admit that the Flex side of things is slightly daunting because I'm not altogether sure if I've left myself enough time to complete all the features I initially wanted, but I'm half way there.
As for my System Plan, that's underway and available here: System Plan Draft.
I've made a few finishing touches to my Contacts application by including some functionality to allow users to add new records to the database table.
In a new file I named insert.php, I've added two main sections. Firstly, I've written some code to take user form inputs and store them into my database table, as shown here:
<?php
// If "Insert Contact" form was submitted.
if ($_POST['action'] == 'saveform') {
// Load the user inputs into local variables.
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$phone = $_POST['phone'];
$email = $_POST['email'];
// Insert new record into database.
$sql = "INSERT INTO contacts ( first_name, last_name, phone, email ) VALUES ( '$firstname', '$lastname', '$phone', '$email' );";
mysql_query($sql) or die(mysql_error());
// Return to list of contacts page.
echo "
<script type=\"text/javascript\">
window.location=\"index.php\";
</script>
";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maya's Contact CMS</title>
</head>
<body>
<h3>Insert Contact</h3>
<form name="InsertContact" method="post">
<input type="hidden" name="action" value="saveform" />
<table border="1" cellpadding="3" cellspacing="0">
<tr><th align="left">First Name:</th><td><input type="text" name="firstname" value="" /></td></tr>
<tr><th align="left">Last Name:</th><td><input type="text" name="lastname" value="" /></td></tr>
<tr><th align="left">Phone:</th><td><input type="text" name="phone" value="" /></td></tr>
<tr><th align="left">E-mail:</th><td><input type="text" name="email" value="" /></td></tr>
<tr><td align="center" colspan="2"><input type="submit" name="submit" value="Save" /></td></tr>
</table>
</form>
</body>
</html>
The last part of this series involves the creation of a processing page. That is, a page that handles changes to the database. Below is the code I've written to a new php file called update.php. In the last part, there were 2 links: one to edit a contact record, and the other to delete a contact record. Both of these links pointed to this update.php file.
To begin, we need to access the database once again, like so:
<?php
// Connect to the database.
$host="localhost"; // Host name.
$db_user="root"; // MySQL username.
$db_password="root"; // MySQL password.
$database="mestalil"; // Database name.
mysql_connect($host,$db_user,$db_password);
mysql_select_db($database);
// If the URL includes an "action" parameter and an "id" parameter.
if (isset($_GET['action']) && isset($_GET['id'])) {
if ($_GET['action'] == "edit"){
// Select the data record with the selected id.
$sql = "select * from contacts where contact_id = '{$_GET['id']}'";
$qContacts = mysql_query($sql) or die(mysql_error());
// Load the retrieved record data into page variables.
while($row = mysql_fetch_array($qContacts)) {
$id = $row['contact_id'];
$firstname = $row['first_name'];
$lastname = $row['last_name'];
$phone = $row['phone'];
$email = $row['email'];
}
} elseif ($_GET['action'] == "del") {
// Delete the data record with the selected id.
$sql = "delete from contacts where contact_id = '{$_GET['id']}'";
mysql_query($sql) or die(mysql_error());
// Return to list of contacts page.
echo "
<script type=\"text/javascript\">
window.location=\"index.php\";
</script>
";
}
} elseif (isset($_POST['submit']) && isset($_POST['id'])) { // If this page was called from a Submit button variable.
// Reset posted variables into page variables.
$id = $_POST['id'];
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$phone = $_POST['phone'];
$email = $_POST['email'];
// Update SQL statement
$sql = "update contacts set first_name = '$firstname', last_name = '$lastname', phone = '$phone', email = '$email' WHERE contact_id = '$id'";
mysql_query($sql) or die(mysql_error());
// Return to list of contacts page.
echo "
<script type=\"text/javascript\">
window.location=\"index.php\";
</script>
";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maya's Contact CMS</title>
</head>
<body>
<form name="UpdateContact" action="update.php" method="post">
<input type="hidden" name="id" value="<?php echo $id; ?>" />
<table border="1" cellpadding="3" cellspacing="0">
<tr><th align="left">First Name:</th><td><input type="text" name="firstname" value="<?php echo $firstname; ?>" /></td></tr>
<tr><th align="left">Last Name:</th><td><input type="text" name="lastname" value="<?php echo $lastname; ?>" /></td></tr>
<tr><th align="left">Phone:</th><td><input type="text" name="phone" value="<?php echo $phone; ?>" /></td></tr>
<tr><th align="left">E-mail:</th><td><input type="text" name="email" value="<?php echo $email; ?>" /></td></tr>
<tr><td align="center" colspan="2"><input type="submit" name="submit" value="Update" /></td></tr>
</table>
</form>
</body>
</html>
INSERT INTO contacts (
first_name,
last_name,
phone, email
) VALUES (
'$firstname',
'$lastname',
'$phone',
'$email'
);
Now for the PHP coding part. Firstly, I needed to build a web page called index.php that displayed the records from my data source. The code below demonstrates connecting to the database and querying my contacts table for this data:
<?php
// Connect database.
$host=""; // Host name.
$db_user=""; // MySQL username.
$db_password=""; // MySQL password.
$database=""; // Database name.
mysql_connect($host,$db_user,$db_password);
mysql_select_db($database);
// Select all data records in table "name_list" and put them into $result.
$sql = "select * from contacts order by last_name asc";
$qContacts = mysql_query($sql);
?>
<form name="contacts_form">
<table border="1" cellpadding="3" cellspacing="0">
<tr>
<th> </th>
<th>Last Name</th>
<th>First Name</th>
<th>Phone</th>
<th>E-mail</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<?php
// Create a variable to display row numbers
$row_counter = 1;
// Get all the records returned from the $qContacts database query.
// Loop over each record returned and put all the data into a variable called $row.
while($row=mysql_fetch_array($qContacts)){
?>
<tr>
<td><?php echo $row_counter; ?></td>
<td><?php echo $row['last_name']; ?></td>
<td><?php echo $row['first_name']; ?></td>
<td><?php echo $row['phone']; ?></td>
<td><?php echo $row['email']; ?></td>
<td><a href="update.php?action=edit&id=<?php echo $row['contact_id']; ?>">Edit</a></td>
<td><a href="update.php?action=del&id=<?php echo $row['contact_id']; ?>">Delete</a></td>
</tr>
<?php
// Increment the current value of $row_counter by 1.
$row_counter++;
} // End loop.
?>
</table>
</form>
Before continuing with the PHP portion of my application, I need some dummy data in the database to work with to help me test my code. As such, I've run the SQL statements below to add 3 records to my "contacts" table:
INSERT contacts (
first_name,
last_name,
phone,
email
) VALUES (
'Atticus',
'Finch',
'0291234567',
'atticus@finch.com'
);
INSERT contacts (
first_name,
last_name,
phone,
email
) VALUES (
'Jeremy',
'Finch',
'0291234568',
'jem@finch.com'
);
INSERT contacts (
first_name,
last_name,
phone,
email
) VALUES (
'Jean-Louise',
'Finch',
'0291234569',
'scout@finch.com'
);
I decided to build a simple CMS to help me learn the relationship between PHP & MySQL. This first part involves creating the database table for a Contacts application that will display a list of contacts on a web page, and allow users to add, delete and edit new or existing contacts.
CREATE TABLE contacts (
contact_id int(11) NOT NULL auto_increment,
first_name varchar(50) NOT NULL default '',
last_name varchar(50) NOT NULL default '',
phone varchar(50) NOT NULL default '',
email varchar(50) NOT NULL default '',
PRIMARY KEY (contact_id)
) TYPE=MyISAM AUTO_INCREMENT=1;
according to my project plan, i'm meant to be working on the front-end of my web site, i.e. flex. however, because i successfully installed php on my machine, i've already gotten started on the back-end of things.
in looking for a neat way to structure the content management component of my project, i discovered a way of wrapping up all my php pages within the index template. this way, i don't need to have a whole bunch of duplicated code like headers and footers and css includes, etc.
basically, my index page includes a particular php template in its body section according to a $_GET['value'] in my URL string.
it took me a pretty long time to get this working, so i'm starting to wonder whether or not my project is a tad too ambitious?
okay, so i changed my mind... instead of taking the easy route, i decided to actually learn one of the things i try to avoid at all costs: server installations.
after uninstalling xampp and running installers for apache & php, the only tricky part was configuring apache's config file (httpd.conf) and php's config file (php.ini). but after a little bit of trial and error, i managed to get it working.
i also created a virtual host so that i can make my webroot http://ohfancyclaps/ on my local machine. this is great because, it's closer to the file structure i will eventually create on the remote web server.
NOW i'm ready to start learning PHP.
installing apache, php and mysql was a breeze with xampp. i just ran the installer and presto!
having read some of the installation documentation for the standalone products, i was lost, so thankfully some blessed person has neatly combined each of these into one easy install package. at least i have more time to spend on actual scripting rather than configuration...
I've decided against building an intricate sports pool for my project in favour of something slightly less ambitious, but something that will still allow me to explore the capabilities of Adobe Flex and PHP within our limited time frame.
As such, I'm going to try and build a user-friendly search panel for live music events that allows users to enter simple search parameters and view the search results in more detail.
At the moment, I'm updating my learning proposal to include the following:
- updated project concept
- the interface design
- user workflows
What I'm having some difficulty with is the workflow because I'm used to thinking about web sites in terms of navigation, where as my new project concept doesn't involve multiple screens, but just a single interface. In looking for guidance with this, I found the following article which helped somewhat:
Modeling User Workflows for Rich Internet Applications
FLEX:
Adobe Flex
i've successfully tested an application i built with Adobe Flex here and it confirms my understanding of the Flex application development process. (i handcoded the ActionScript and MXML because it helps me to understand what's going on a lot better than if i were to rely on my trial version of FlexBuilder!)
my next steps are:
1. learn how to code in PHP/MySQL in order to build a search component
2. learn how to connect my PHP/MySQL scripts to a Flex front-end
initially, i wanted to build something entirely with Flex, but since i've gained a better understanding of it in the past 2 weeks, i think i feel comfortable enough to wrap my head around PHP too...
PHP
having built a some relatively simple web applications with ColdFusion, my first reaction to PHP was of the "WTF?" variety. ColdFusion's tags aren't much of a stretch from HTML, and therefore, are less intimidating to me than PHP code, which by comparison, is unintuitive and far from "human readable".
thankfully, PHP is a part of DMT, so this is a great opportunity for me to learn it.
okay, i was starting to get confused by the whole flex-application architecture thing, but i think this section from wikipedia makes things clearer:
Flex Application Development Process
Everything below is directly sourced from the help file in version 2.0 Beta 3:
- Define an application interface using a set of pre-defined components (forms, buttons, and so on)
- Arrange components into a user interface design
- Use styles and themes to define the visual design
- Add dynamic behavior (one part of the application interacting with another, for example)
- Define and connect to data services as needed
- Build the source code into an SWF file that runs in the Flash Player
does this mean that i don't need to have some sort of flex application running on the web server since it's already compiled into a swf before deployment? i'll try and write a simple flex application and see if the compiled swf file runs on charlie then post my results here.
having read a lot of the introductions from the first e-tivity, i noticed that there were a number of students who work in the industry and are interested in DMT to enhance their already existing knowledge of web technologies, as well as a bunch of students who manage web sites but don't know the inner workings.
well, for whatever reason you decided to take this class, i think it's fair to say that making money is a pretty good incentive. if that's true for you, i highly recommend this entertaining presentation that i stumbled on from the bloke who created the Ruby on Rails framework, David Heinemeier Hansson: A Secret to Making Money Online
okay, i quickly skimmed over this article, which was written last year, but confirms my worst fears: technology that falls by the wayside. i've come across Laszlo, Silverlight, and Flex, but i'd never heard of Mozilla's Prism nor Curl. i guess they're already out for the count.
nevertheless, it was an interesting read, and one that makes me lean a little closer towards Flex.
i've only just discovered google trends and it's helping me to decide where i want to go with my learning proposal for my DMT class... not only do i want to learn something completely new, but i want to have some sort of assurance that whatever i choose will be a technology with some legs.
at this stage i'm leaning towards adobe flex for a few reasons: (1) i find the whole web 2.0 thing both incredibly inspiring and utterly daunting; (2) the google trends charts for adobe flash and flex are still promising; (3) i skimmed some online job listings and found a decent amount of demand for flex and a high amount of demand for flash; and (4) after looking at some samples of flex-based websites, i'm interested to learn more about RIAs (or, rich internet applications).
the only thing holding me back is my dislike for Flash that can be traced back to when "flash intros" were all the rage. yuck. i stayed away ever since just hoping that it would crawl into a ball and die. but now, years later, here i am, eating my words and entertaining the idea of jumping on the flash/flex bandwagon...
oh, and one more thing, i have a pretty good idea about what flash is, but flex? notsomuch.
note to self: research how flex relates to flash, and... just what the heck is flex anyway?
how exciting.
(cough. splutter.)
is anybody actually going to read this? hello?
actually, i'm trying to think of some cutting edge web site that has piqued my interest of late, but i can't.
hmm, in fact, allow me to go the other way - as much as i love websites that use AJAX effectively - i want to let everybody know of my love for craigslist. i used to live in new york and this was the web site i visited most. it's how i found work, it's where i bought and sold just about everything. what's interesting is that it contains no fancy multimedia, just plain ol' HTML. so yes, this is a good place to start this blog: a barebones bulletin board that shows just how effective HTML continues to be.
if anyone knows of a similar site that is popular for sydney-siders, do tell...
© 2009. Template by Ourblogtemplates.com.