Edited for formatting. Wrapped code in three back ticks. 
This is the first post in a series about PHP from a Xojo perspective.
I’ll be showing how I developed different parts in detail of Xanadu which is open source: https://github.com/campsoftware/xanadu
Hello World!
When I first used Xojo I did the same thing you probably did. I dragged out a button and when clicked it showed a message box that just said ‘Hello World’.
Think about what Xojo might be doing to make this work.
- Define the page, even if blank
- Define and place a button
- Add a button onclick event that shows a dialog ‘Hello World’.
Hello World - Without PHP
Interestingly, you don’t need PHP for this but you do need HTML, CSS, and Javascript. However, adding PHP brings in the power of programming. In my head, when I use Xojo I’m dragging buttons and adding code to write the HTML, CSS, and Javascript for me. PHP is what I now use to write HTML, CSS, and Javascript. Xojo tries hard to not expose the details but you can see a bit when folks share Javascript ‘work arounds’. The key with PHP is to understand the details then write PHP code to mange the details.
Define the page
<html><body></body></html>
That’s it. We now have a blank page. The html and body tags are all you need at first. The files should be saved with an html extension like index.html or index.htm.
Define and place a button
<html><body>
<button type="button">Hello</button>
</body></html>
Buttons are just another tag, but have attributes or properties. Note [type=“button”] and a button label [Hello]
Add a button onclick event that shows a dialog ‘Hello World’
<html><body>
<button type="button" onclick="alert('Hello World!');">Hello</button>
</body></html>
Another Button attribute is onclick which runs the Javascript [alert(‘Hello World!’);] The alert function shows a dialog with the text [Hello World!]
Hello World - With PHP
Now we can add some code to manipulate the HTML and Javascript.
PHP Tags
<?php
// This is a comment
?>
<html><body>
<button type="button" onclick="alert('Hello World!');">Hello</button>
</body></html>
Now we have a PHP tag with a comment, but it doesn’t do anything yet. The file extension should be changed to php like index.php.
Add a Variable
<?php
$message = 'Hello World';
?>
<html><body>
<button type="button" onclick="alert('<?= $message ?>');">Hello</button>
</body></html>
Not so bad right? First we define a variable at the top of the page wrapped in a PHP tag. Then in the Javascript alert function we add a special PHP tag that is a shortcut to echo the variable value. another way would be to use the longer PHP tag.
<?php echo $message; ?>
Add a Variable with Javascript
<?php
$buttonLabel = 'Hello';
$buttonJS = "alert('Hello World!');";
?>
<html><body>
<button type="button" onclick="<?= $buttonJS ?>"><?= $buttonLabel ?></button>
</body></html>
Here we create and use a variable for the button label and the button onclick javascript. Notice that we used single quotes for the first variable and double quotes for the second variable. Quoting can get tricky with PHP quotes, HTML quotes and Javascript Quotes.
Lastly…
Next time you’re using Xojo think about how you might do it in PHP. Keep in mind when I say PHP, I really mean using PHP to write HTML, CSS, and Javascript…
Ask Questions
Ask questions below. Some questions might end up being answered in another post.
More
CampSoftware Blog: https://campsoftware.com/blog/
Xanadu Info: https://campsoftware.com/products/xanadu.php
Xanadu Download: https://github.com/campsoftware/xanadu