PHP & Silverlight

Tutorial from Codeplex an open source initiative of Microsoft

Project Summary
This tutorial demonstrates how to include existing Silverlight content and streaming Silverlight content
into a PHP web page. The third part contains step by step instructions on how to use Micorosoft's
Expression Web 2 to create PHP pages, embed a Silverlight control and deploy to an existing site. These
examples include a Silverlight control created using Microsoft's Expression Blend.
Architecture


Silverlight content embedded into an HTML or PHP web page is transferred to the client browser and is
then displayed by the Silverlight runtime (plugin) installed on the client computer.
Note that the web server environment can be Linux/Apache, Windows/Apache or Windows/IIS.
Download either the tutorial page or the Silverlight control using the following link.
http://silverlightphp.codeplex.com/
Copy the HelloPHPDevelopers.xap file to the same directory within your web site where you plan to host
the Silverlight content.
Open and edit the page which will host the Silverlight control by adding the following code:
<div id="SilverlightControlHost">
<object type="application/x-silverlight-2" data="data:application/x-silverlight-2," width="500"
height="300">
<param name="source" value="HelloPHPDevelopers.xap" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkID=108181" alt="Get Microsoft Silverlight"
style="border-style:none;" />
</a>
</object>
</div>
When you view you page in the browser, the Silverlight control is displayed like below:

It's that simple! To use a different Silverlight control, just specify the *.xap filename as the value of the
source parameter (and path if necessary) and set the appropriate numbers for the width and height
values of the object tag. Note that if a user does not have the Silverlight plugin installed they will be
presented with a 'Get Microsoft Silverlight' image and a link to install the plugin.
Creating a function to generate the HTML to embed a Silverlight control may be useful to you if you have
multiple places in your web site where you woule like to display Silverlight content. THe following
function demonstrates how this can be accomplished:
<?php
function renderSilverlightControl($height, $width, $source)
{
echo "<object type='application/x-silverlight-2' data='data:application/x-silverlight-2,' width='$width'
height='$height'>";
echo "<param name='source' value='$source' />";
echo "<param name='minRuntimeVersion' value='2.0.31005.0' />";
echo "<param name='autoUpgrade' value='true' />";
echo "<a href='http://go.microsoft.com/fwlink/?LinkID=124807' style='text-decoration: none;'>";
echo "<img src='http://go.microsoft.com/fwlink/?LinkID=108181' alt='Get Microsoft Silverlight'
style='border-style:none;' /></a>";
echo "</object>";
}

// call the function
renderSilverlightControl("300", "500", "HelloPHPDevelopers.xap"); ?>

If you want to specify custom configuration settings for the embedded object, refer to the end of this
document that describe how to add Silverlight to a Web Page using HTML
Silverlight & PHP: Streaming
Adding streaming Silverlight content to your page is a trivial matter. It can be accomplished with one line of
code:
<iframe src="http://silverlight.services.live.com/invoke/acount_number/
application_name/iframe.html" frameborder="0" width="258" height="100" scrolling="no"></iframe>
After entering the account number and application name to the source URL, this is how it will show up on
your page:

Alternatively, you could create a method to generate the HTML and specify the account number and
application name dynamically. The method could then be used throughout your site:
function displaySilverlightVideo($accountName, $applicationName, $height, $width)
{
echo "<iframe src='http://silverlight.services.live.com/invoke/";
echo $accountName;
echo "/";
echo $applicationName;
echo "/iframe.html' frameborder='0' width='$width' height='$height' scrolling='no'></iframe>";
}
Use the following PHP code to display your streaming Silverlight content.
displaySilverlightVideo("94851", "Why so serious", "375", "500");
Or, displaySilverlightVideo("32", "SlLogo", "100", "258");
What if my Silverlight content doesn't show up? Have you installed the Silverlight plugin? If you
haven't, you can get it here. However, if your users also don't have the plugin installed, they too will see
a blank white page. Add the following code between the opening and closing <iframe> tags to provide a
link for users to download the plugin:
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;"
<img src="http://go.microsoft.com/fwlink/?LinkID=108181" alt="Get Microsoft Silverlight"
style="border-style:none" />
How can I stream my own content? Easy. Microsoft hosts streaming Silverlight content at
Silverlight.Microsoft.com. From this site you will need to create an account (it's free) to host your
content. Upload your video and then it is available to be streamed using one of the techniques
described above. Note that your account number and application name will be different!
Silverlight & PHP: Expression Web Step by - step

Note: Before starting this project you must have access to a web server running PHP either on your local
machine or a hosted site. You should be familiar with how to move files to the server and view them in a
browser. Expression Web can allow you to preview PHP files if you install and configure a local copy. See
the Help files for more details.
Let's get started!
First, we will create a simple PHP page.
Open Expression Web 2 and create a new blank site.
From the File menuw, select New > Web Site.
In the dialog choose Empty Web Site. Call it something like PHPSite.

Add a new PHP page by right clicking on the project folder in the Folder List window and select
New > PHP.
Call it default.php

Double click on "default.php" in the Folder List to open the file.
Left click somewhere between the body tags to set an insertion point.
Then go to the PHP menu under the Insert menu and select the echo command.
Note that where you had the cursor in the html view of the document a new tag has been
entered showing <?php echo ?>.

Add "Hello, World!" between the echo statement and end ?>. Make sure to include the quotes.

Now, let's add the Silverlight control from Part 1 of this tutorial.
Go to File > Import > File.
Click on Add File and then browse to the location of the downloaded Silverlight control,
HelloPHPDevelopers.xap.
Then click ok to import the file.

Enter at least one <br/> tag after the echo tag.
Paste the following into your page below the echo tag:
<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%"
height="100%">
<param name="source" value=""/>
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
style="border-style: none"/>
</a>
</object>
Specify the reference to your source Silverlight file.
In the tag <param name="source" value=""/> change it to
<param name="source" value="HelloPHPdevelopers.xap"/>

This is all you need to change for any other *.xap file you want to display on your page.

The final code should look like this:

Move the files to your web site and view in a browser. In this case, we are running a local
version of PHP and have moved the file into the C:\inetpub\wwwroot folder.

Click the button to see Silverlight in action.

Let's make it more dynamic with PHP.
In the Folder List section of Expression Web, right click on default.php and select copy from the
context menu.
Right click again somewhere inside of the Folder List section and select paste from the context
menu.
Rename the file to deafult_dynamic.php.
Double click the file to open it for editing.
Paste the following code into your page:
<?php

function renderSilverlightControl($height, $width, $source)
{

echo "<object type=\"application/x-silverlight-2\" data=\"data:application/x-silverlight-2,\"
width=\"";
echo $width;
echo "\" height=\"";
echo $height;
echo "\">";
echo "<param name=\"source\" value=\"";
echo $source;
echo "\" />";
echo "<param name=\"minRuntimeVersion\" value=\"2.0.31005.0\" />";
echo "<param name=\"autoUpgrade\" value=\"true\" />";
echo "<a href=\"http://go.microsoft.com/fwlink/?LinkID=124807\" style=\"text-decoration:
none;\"><img src=\"http://go.microsoft.com/fwlink/?LinkID=108181\" alt=\"Get Microsoft
Silverlight\" style=\"border-style:none\" /></a>";
echo "</object>";
}
?>
In the body replace the object tag with:
<?php renderSilverlightControl("300", "500", "HelloPHPDevelopers.xap"); ?>

Post your files to the web and view the end result!



Additional Documents
Silverlight
How to: Add Silverlight to a Web Page by Using HTML
Updated: November 2008
The object element enables you to embed and configure the Silverlight plug-in in your HTML in a way that is
compatible with all supported browsers. This topic describes how to accomplish the following common tasks using
the object element:

Embed the Silverlight plug-in and specify the application to host.

Specify alternate HTML to display when Silverlight is not installed.

These tasks correspond to different parts of an HTML page and specifically to different configuration parameters of
the object element. The following procedures describe several tasks in isolation, but build up to a complete cross-
browser HTML example at the end of this topic.
You should use the final example as a template for your projects instead of using the snippets in each procedure.
The final example ensures cross-browser compatibility and is based on the template that Visual Studio and
Expression Blend use to dynamically generate test pages.
You can accomplish additional configuration tasks using the HTML object element. For more information, see
Silverlight Plug-in Object Reference and Property Values of the HTML Object Element. The topics listed in the See
Also section provide additional coverage of specific embedding scenarios.
An alternative to using the object element is to use the JavaScript embedding functions provided by the
Silverlight.js helper file. These functions ultimately generate object elements, and are provided as a convenience
in JavaScript development. For more information, see How to: Add Silverlight to a Web Page by Using JavaScript.
Procedures
To embed the plug-in

Add the object element to your HTML and specify attributes and a child param element as shown in the
following example.
Note:
You will typically specify additional HTML to provide an installation experience and ensure cross-browser
compatibility. For a complete HTML example, see the end of this topic.

Copy Code

<object width="300" height="300"

data="data:application/x-silverlight-2,"

type="application/x-silverlight-2" >

<param name="source" value="SilverlightApplication1.xap"/>

</object>

The width and height attributes are required for cross-browser compatibility. You can specify fixed pixel
values or percentages relative to the width and height of the parent element. If you use relative sizing,
you can respond to plug-in size changes by handling the Content..::.Resized event. For more information,
see Silverlight Plug-in Sizing.

The type attribute and the specific value shown are also required. This value uses the Silverlight MIME
type to identify the plug-in and the required version. For more information, see Silverlight Versioning.

The data attribute and its value are recommended to avoid performance issues on some browsers. Note
the trailing comma in the data value. This indicates a second data parameter that has an empty value.

The param element named

source
is required, and indicates the location and name of your application
file. You typically specify a .xap application package in a location relative to the HTML file. For more
information, see Source (Silverlight Plug-in Object). For more information about application development,
see Application Model.
To specify alternate HTML to display when Silverlight is not installed

Add HTML content to the object element after the child param elements, as shown in the following
example.

Copy Code

<object id="SilverlightPlugin1" width="300" height="300"
data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" >
<param name="source" value="SilverlightApplication1.xap"/>

<!-- Display installation image. -->
<a href="http://go.microsoft.com/fwlink/?LinkID=124807"
style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight"
style="border-style: none"/>
</a>

</object>
This example shows the default install image source and installer URIs. With these URIs, the server
detects the user's browser settings to provide the correct version of the installation image and installer. If
the user's browser is not supported, clicking the image causes the browser to open the Silverlight
Requirements page.
The following illustration shows the default installation image:

You can provide arbitrarily complex alternate HTML in order to integrate the Silverlight install experience
with your Web page. However, in many cases, users will have to restart or refresh their browsers after
installing Silverlight. With Internet Explorer, only a browser refresh is required unless the user has an
older version of Silverlight installed and upgrades through the installation link.
You can refresh the browser automatically or eliminate the refresh requirement by using helper functions
in the Silverlight.js file. You can also use Silverlight.js to perform fine-grained browser requirements
detection. For more information, see Silverlight.js Reference.
Example
Description
The following code example provides a complete HTML page for a Silverlight application that uses the entire
browser window. This example is based on the default HTML used by Visual Studio when you choose to dynamically
generate a test page.
This example uses cascading style sheets (CSS) and a div element to contain the plug-in. This ensures that the
plug-in extends to the edges of the browser window. This and other additions to the HTML help ensure cross-
browser compatibility.
Note:
Because of browser differences, the Silverlight plug-in does not support the cascading style sheets (CSS)
overflow property on the object element or on a parent container element, such as a div element.
The iframe element is also for cross-browser compatibility. The presence of the iframe prevents the Safari
browser from caching the page. Safari caching prevents the Silverlight plug-in from reloading when the user
navigates back to a previously-visited Silverlight page. For more information, see the Safari Developer FAQ.
This example uses a JavaScript function to handle the plug-in's OnError event. A JavaScript error handler is useful
during debugging, but you typically remove it when you deploy your application.
This example also includes minRuntimeVersion and autoUpgrade settings to provide an upgrade experience if
the specified version of Silverlight is not installed. For more information, see Silverlight Versioning.
To view this example in your Web browser window, you must specify a valid Silverlight application package in the
source parameter. For more information, see How to: Create a New Silverlight Project.
Code

Copy Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<!-- saved from url=(0014)about:internet -->
<head>
<title>SilverlightApplication1</title>

<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
}
</style>

<script type="text/javascript">
function onSilverlightError(sender, args) {

var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;

var errMsg = "Unhandled Error in Silverlight 2 Application " +
appSource + "\n";

errMsg += "Code: " + iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";

if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}

throw new Error(errMsg);
}
</script>
</head>

<body>
<div id="silverlightControlHost">
<object width="100%" height="100%"
type="application/x-silverlight-2"
data="data:application/x-silverlight-2," >
<param name="source" value="SilverlightApplication1.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807"
style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight"
style="border-style: none"/>
</a>
</object>
<iframe
style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
</body>
</html>

SQL CRUD Application Wizard
Last Revised On: 24/04/2009
Project Overview
The SQL CRUD Wizard for PHP is a sample .NET application that can be used to generate a simple "Create,
Read, Update, Delete" PHP application from a Microsoft SQL Server database table. The generated PHP
application supports paging, sorting and simple CSS customization.

Architecture


The generated PHP Application Code, generated by the PHP to SQL CRUD Wizard, includes logic for CRUD
functionality between the PHP application and a SQL Server database instance on the web server.
Note that the web server environment can be Linux/Apache, Windows/Apache or Windows/IIS.

Screenshots

Enter your database credentials:


Select Database, Table and Fields:


Set styles for generated PHP files



Requirements
Windows XP, Windows Vista
Microsoft SQL Server Express 2005 or 2008
A PHP installation