Justin has posted 7 posts at DZone. You can read more from them at their website. View Full User Profile

Silverlighting Your PHP, Part 3: Bringing PHP Into Visual Studio

12.09.2010
| 17453 views |
  • submit to reddit

Blending PHP with Silverlight may seem like an unholy union. First of all, Visual Studio still doesn’t support PHP development without an add-in. Second, you need a Windows box in order to run .NET code. But if you’re willing to set aside your trepidation, you’ll find that Silverlight development in Visual Studio has a lot to offer the PHP developer.

The first two articles in this series explored using PHP to create XAML and using Expression Blend to create more complex XAML for your PHP. The goal in both of those demonstrations was to show what you could do without any .NET assemblies. In other words, using XAML and JavaScript, you could create a Silverlight app that could run on any platform.

Read the other parts in this series:

 

But as much as you can do with those tools, Visual Studio Web Developer 2010 Express, a free download, gives you even more building blocks for a full-featured, data-driven Silverlight app that leverages rather than replaces your existing PHP code.

To demonstrate this, here’s a walkthrough that will Silverlight your PHP in a different way. Rather than generating XAML, you’re going to start with a PHP app that creates as its end product a simple XML data file. Then you’ll build a very basic Silverlight app that makes use of one of the many pre-rolled Silverlight controls that comes with Visual Studio, the DataGrid Control. With a little C# madness, you’ll bind the DataGrid control to your PHP-generated XML file, giving you a very cool PHP-driven data display. Last, you’ll also practice a simple technique for incorporating your PHP code into the Visual Studio project in a way that allows you to deploy the entire app at one time.

Note that since this is a Visual Studio app and will be using .NET assemblies, you’ll need to deploy this to IIS on a Windows box with .NET Framework 3.5 installed.

 

Member Registration Form in PHP

Start with a basic PHP member enrollment form. Member of what – who knows. But the goal of the page will be to save typical registration data to an external XML file.

Create a folder called “MemberGrid” in your webroot, for example C:/inetput/wwwroot/MemberGrid. Under that, create a subfolder called “xmldata”. As sample data to start with, save the following to a file called members.xml within your xmldata folder:

<?xml version="1.0"?>
<members>
<member>
<memberName>Apollo</memberName>
<memberFunction>God of Music</memberFunction>
<memberStatus>God</memberStatus>
<memberDescription>Rides a chariot all day, dances all night.</memberDescription>
</member>
<member>
<memberName>Athena</memberName>
<memberFunction>Goddess of Wisdom</memberFunction>
<memberStatus>God</memberStatus>
<memberDescription>Currently living as Tina Fey.</memberDescription>
</member>
</members>

 

Next, save the following PHP code to memberForm.php within MembersGrid. This form simply collects member data and appends it to members.xml. PHP provides multiple techniques for reading and writing XML data to an external file. This form reads the file into a DOMDocument and creates new elements from the form data.

<html>
<head>
<title>PHP Entry Form</title>
</head>
<body>

<?php

if (!isset($_POST['memberName'])) {

?>

<form action="index.php" method="post">
<p>Member Name: <input type="text" name="memberName" /></p>
<p>Member Function: <input type="text" name="memberFunction" /></p>

<p>Member Status
<input type="radio" name="memberStatus" value="Titan" /> Titan
<input type="radio" name="memberStatus" value="God" checked="checked" /> God
<input type="radio" name="memberStatus" value="Demigod" /> Demigod
<input type="radio" name="memberStatus" value="Hero" /> Hero</p>

<p>Member Description::<br />
<textarea rows="5" cols="50" name="memberDescription" ></textarea></p>

<p><input type="submit" value="Add Member"></p>

</form>

<?php

}
else {

$memberFile = new DOMDocument;
$memberFile->Load('xmldata/members.xml');

$memberList = $memberFile->getElementsByTagName('members')->item(0);

$newMember = $memberFile->createElement('member');

$memberName = $memberFile->createElement('memberName');
$textNode = $memberFile->createTextNode($_POST['memberName']);
$memberName->appendChild($textNode);

$memberFunction = $memberFile->createElement('memberFunction');
$textNode = $memberFile->createTextNode($_POST['memberFunction']);
$memberFunction->appendChild($textNode);

$memberStatus = $memberFile->createElement('memberStatus');
$textNode = $memberFile->createTextNode($_POST['memberStatus']);
$memberStatus->appendChild($textNode);


$memberDescription = $memberFile->createElement('memberDescription');
$textNode = $memberFile->createTextNode($_POST['memberDescription']);
$memberDescription->appendChild($textNode);

$newMember->appendChild($memberName);
$newMember->appendChild($memberFunction);
$newMember->appendChild($memberStatus);
$newMember->appendChild($memberDescription);

$memberList->appendChild($newMember);

unlink('xmldata/members.xml');
$appended = $memberFile->save('xmldata/members.xml');

echo('<p>New data added (return code: ' . $appended . ')</p>');

}

?>

</body>
</head>

 

Since this code writes to an external file, you’ll need to open up Write permissions on the xmldata folder, as in Figure 1.

 

Take a moment to look over the code. As mentioned, this is a basic form handler, i.e it either presents the form or processes the data. In this case, “process” means add it to an aggregate file. Nothing fancy happening here – no edits, no deletes, no form validation.

But if you’ve read the first two articles in this series, you’ll also notice no XAML. No formatting of any kind. When silverlighting your app, this would present one of the first and biggest opportunities to give your users a richer experience. One easy change to make, for example, would be to separate the form UI from its handling and use a Silverlight form to collect the data.

Before moving on, test your PHP app. Submit some new data and check the resulting XML file. You should see your results added as a new <member> node within the <members> root.

 

Silverlight Project in Visual Studio

As mentioned, Microsoft provides the Express version of Visual Studio as a free download. Fortunately for web developers, it’s all you need to build your Silverlight app.  In fact, if you’re new to this end of the web, you can use Microsoft’s Web Platform Installer to download Visual Studio, Silverlight, SQL Server Express,  and a PHP engine. Check out Silverlight’s Get Started page for more info. Or you can download Visual Studio 2010 Express for the Web at http://www.microsoft.com/express/Web/. This also includes the Silverlight SDK preinstalled.

Once you’re set up and ready to go, fire off a new Silverlight project and call it MemberGrid.

 (Click for larger image)

 

Check the option to “Host the Silverlight application in a new Web site.”

 (Click for larger image)

 

When your new blank project first opens up, all you get is a blank canvas. Technically speaking, this is actually an empty Grid control, not a Canvas control. You’ll see in the toolbox on the left a list of other controls. Similar to Expression Blend, Visual Studio offers a tremendous amount of prebaked functionality that you can drop into your app, things like form controls, a date picker, a calendar, and media controls.

It also includes a set of data controls for hooking up an external dataset. That’s what you’re going to use here. Drag the DataGrid control onto the canvas and resize it to fill the entire box.

 (Click for larger image)

 

 

The DataGrid does just what it sounds like – pulls data into a preformatted grid. This grid presents the data in resizable columns of fixed or variable width, which, as of Silverlight 4, can be sorted in ascending or descending order. All you have to do to enable this functionality is hook it up to the data source, typically a SQL Server database.

In this case, you’re going to hook it up to an external XML file. Yes, the file you just created in your PHP app.

In your Solution Explorer on the right, under MemberGrid.Web, create a new folder called xmldata. Within that folder, add an existing file: members.xml.

 

Again, you may need to navigate to this folder in Windows Explorer and add security permissions to Write to the folder, which you’ll need later on. Also, you may notice in the Properties pane that your members.xml file was added to the deployed project as “Content”. This is a good thing. Usually, items in the solution are bundled in the application’s .xap file on deployment, which makes it easy to deploy the project but difficult to edit with an external script. But since your members.xml file was added with the Build Action set to “Content”, that means it will be copied to your deployment destination but not bundled into the .xap. The only other property you have to change is setting Copy to Output Directory to “Copy if newer”. This should keep Visual Studio from overwriting your data if you deploy changes after your app has been in operation for awhile.

AttachmentSize
Figure 1.png48.19 KB
Figure 2.png65.93 KB
Figure 3.png31.17 KB
Figure 4.png183.6 KB
Figure 5.png4 KB
Figure 6.png19.1 KB
Figure 7.png37.69 KB
Figure 8.png10.78 KB
Figure 9.png43.42 KB
Figure 10.png20.47 KB
Figure 11.png19.28 KB
Figure 12.png81.8 KB
Figure 13.png4.98 KB
Figure 14.png28.83 KB
Figure 15.png33.79 KB
Figure 16.png44.99 KB
Published at DZone with permission of its author, Justin Whitney.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)