Simple PHP Web App in HTML5 Builder

Categories: Programming, Web
Comments: 4 Comments
Published on: September 11, 2012

The first application I'll create will be similar to sample ones I had tried in RadPHP. They were simple PHP tutorials and they worked–somewhat. I had some issues, but don't remember whether it was getting all the right libraries in the right place or whether it worked from some locations or browsers or what. In any case, I'm hoping HTML5 Builder will make the process a little smoother.

The IDE

Starting up the HTML5 Builder IDE is different from other IDEs in RAD Studio. The default theme is black with white text (no other themes are available yet), there is no menu bar, the toolbar icons change with the context as do the panels. I like it–it looks nice and clean!

Selecting New gives me four options, displayed in the right-hand pane instead of a pop-up modal dialog: 1) Client Mobile, 2) Client Web, 3) Server Mobile, and 4) Server Web. (Interesting how the only carry-over from RadPHP is now in last place.) As you single-click on each application type, the bottom half of the panel gives a description; the two server types also provide links to more information and to Embarcadero's tutorials.

When I double-click on the Server Web Application icon, the PHP engine, the RPCL, and various other things needed to aid in the development of server web apps written in PHP is loaded. If I close that project and create a different PHP server application, that stuff does not need to be reloaded until I restart HTML5 Builder.

Once all the libraries are loaded, the context changes and I'm in design mode. It's interesting to watch things change between contexts, toolbar buttons are visibly removed and added and panels change size and content. The context can easily be changed by clicking on one of the following links, displayed to the right of the toolbar icons: “Home | Code | Design | History | Debug”. The current context link is a different color than the others. Home takes me back to the screen I saw when HTML5 Builder first started, or what you might think of as the Welcome screen in Delphi. The Code and Design links switch between the code editor and the visual component screen, just like Delpi (and F12 is the familiar hot key for that). History will show changes in the code over time. And Debug is setup with debugging panels for watching variables, tracing code execution and so forth. So it's mostly familiar and nicely organized. Good!

Hello World!

It's always best to start with the simplest of projects when learning a new system. Get your feet wet in the new environment before cranking up the complexity of an intricate set of logic and controls. So I'll start with the ubiquitous Hello World. The documentation for HTML5 Builder is an order of magnitude better than it's predecessor (RadPHP). In fact, there's no need to repeat it here. Instead, this is more of my impression or review of the product and, perhaps, some filling in the gaps where I think the documentation may not be clear or complete.

Placing controls on the page is very similar to using Delphi or C++ in design mode. Choose from the tool palette, drag and drop, resize, etc. But since this is PHP, the code is quite a bit different from Delphi, of course. Curly braces replace begin/end pairs, there are no interface/implementation sections, variables start with $, strings are concatenated with periods, and the “this” object is not assumed in classes. But following the tutorial and hitting F9 quickly produces the simple page in my default web browser and typing in a name and hitting the button shows the message.

Cool!

Next up–creating your own RPCL components in HTML5 Builder.

4 Comments
  1. Jamie says:

    Will give a try too

    Hi. Great idea to post about your HTML5 experiences. I haven’t got a break yet to load the new IDE. I am hoping it will all install in parallel with my existing RadPHP XE2 install, which I finally got into a somewhat stable mode a few months back.

    Have you tried the mobile app stuff yet? I am trying to figure out how we can do one app and deploy to different screen sizes? It would seem that a mobile app should use the mobile components right? But swapping out a web button for a mobile button would be no easy task… I am thinking of making my test app all with mobile components and then test its deploy to web browsers verses mobile devices. What do think would work best?

    Jamie

    • David Cornelius says:

      Havn’t tried mobile yet

      I have RadPHP XE installed and it does not seem to have any conflicts with HTML5 Builder. There are no global environment variables concerning RPCL that are product specific and each product’s RPCL is in its own product “program files” folder so I think you’re save installing side-by-side.

      No, I haven’t tried any mobile stuff yet. I was starting with what I considered the most likely part of the product that was stable, PHP web apps, because everything else is new. It’s also the part I’m most familiar with so if there are any problems, I have a better chance at figuring out the cause.

      So I don’t have any advice for you on mobile direction at this point.

      • Jamie Robe says:

        Mobile and web working!

        Hi David,

        Well, I finally sorta got the basic Hello World working for web and as a native app on my Android smart phone!

        What I did was create a fresh project – this one is a server mobile application. That seems to me to be the most flexible to create apps. It lets you make a web browser site/app – with the regular deploy, but also give you the option of making an adroid or iphone app using Deploy to Mobile.

        The key is to check the UseAjax on any MPage object that is going to need to use php (php only avail back on the server). You also must add your domainname/path/filename.php to UseAjaxUri which is pointing to the actual file on the webserver that has the event code that will process this when its run on the mobile device. This is the part that had me messed up for a day or so. When testing on your browseer from the run button in HTML5, you do not check the UseAjax button ANY of those MPage’s. But before you deploy to BOTH the webserver and to the mobile deployment you MUST check that and fill in the UseASjaxUri. Both the web and the mobile app can now function.

        Of course, only the native phone app is going to have a functioning mobile hardware setup, like camera, GPS, etc. But both have to be deployed, for any Ajax calls back to the php on the server anyway. Of course, you can still use local/client code in JS events so no Ajax is needed. The example docs have stuff about making a local mobile device DB – pretty cool! But almost all of my ideas right now are going to need server based, centralized DB type information.

        I thought I would report this back here just in case some person is nearing desperation LOL. The docs are really so much better than RadPHP XE2, but they were not clear to me at all on this server mobile app example… they need to have someone not on the development team work thru those. A hello world program should take no prior knowledge… or 24 hours of trying things out, or posting on forums. I did post something on the forum at E, and I did get a response. So that is good too.

        BTW they just added an HTML5 Builder forum, so that will confuse any RadPHP / Delphi people even more 🙂

        Peace,
        Jamie

        • David Cornelius says:

          Thanks!

          Thanks for the note. I will definitely review this when I get to the Mobile stuff–hopefully soon. But I’ve run into some difficulties I’ll be blogging about.

Leave a Reply

Your email address will not be published. Required fields are marked *

*



Welcome , today is Sunday, October 22, 2017