Integrating a PHP application into a predefined template


I am trying to integrate a PHP application into my own template, without having to use iFrame. I have tried to do it by using <?php include .. ?>, but it does not work.

The template can be seen here: 
And the application can be seen here:

If anybody have some ideas to how this can be done, I would be very interested.
Peter KromanSales ExecutiveAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Olaf DoschkeSoftware DeveloperCommented:
Well, you need to strip off the HTML skeleton the PHP script generates so it only contributes the inner HTML, perhaps all in a single div id=cntent or new HTML5 content tag. Then the include idea can work out.

But you can't have a full HTML output within an HTML, other than an iframe. So change the PHP application with a parameterization to work standalone (with HTML skeleton) or embedded (just outputting a div/content tag). It is harder, than it sounds, as most of the content surely depends on loaded JS, CSS and other header parts you can't have in embedded mode, at least not as simple as referring to a css class. But if that all is static it's easily moved into your outer template.

The next hard problem is links, In the end, it may be easier to turn it around and incorporate your outer template into the application template.

Bye, Olaf.
Peter KromanSales ExecutiveAuthor Commented:
Thanks Olaf,

Sounds difficult :) Could a template engine - like for example twig - be used for something like this?
Olaf DoschkeSoftware DeveloperCommented:
Whatever the application is using now should be easiest to also use and adapt. In the end it might be as simple as adding some meta tags to load further css and js and adding the HTML of your template to the HTML already existing, while putting mainly only its body into a div tag.

It's extremely hard to say whether it's simple or not just by looking at both HTML output, how it's put together is of interest and you have the better insight.

If you don't want to go about this, then iframe is an option. Why avoid it? Because frames are bad? Well, we're in the age of HTML5 and frames got reconsidered for some purposes. Especially in this case, as bringing everything together in one single HTML page/template is hard from both sides, it is a solution.

Bye, Olaf.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Peter KromanSales ExecutiveAuthor Commented:
Well - I don't actually mind using iFrames, but when doing so I miss the permalinks that the application is generating. These links are important tools to navigate in the application it self and to use as links that can be distributed.

Is there a way to display those links in the URL line when using iFrame?
Julian HansenCommented:
To be clear - you want to apply the template to your application?

The usual practice is to take the template and swap out the different areas with your code that generates your content. If you are looking for a magical way for them to merge it is not going to happen.

Let's take a look at the templates navigation contained in the <nav> section you can take the contents of the <nav> section and copy them to the <nav> in the template
You are gong to be bringing across the classes from the application - which may not slot in with the classes of the template. Therefore you are going to have to modify the incoming HTML to match the classes in the template if you want the styling to hold.

From what I can see it is a manual cut, paste, edit process that you need to do to move to the template look and feel.
Peter KromanSales ExecutiveAuthor Commented:
Thanks Julian,

Yes - that's what would like to do. I am not looking for something magical :) I am just asking what is possible.

And I think I have got my answer. I need to merge the application and the template. But I really don't want to mess around too much with the application which comes from a third party. So I think I'll just levae it for now and keep on using iFrame - and if it is not possible to display the applications permalinks using iFrame so be it :)
Julian HansenCommented:
Template merging is a very common practice. Templates are purchased online and then used to style wire-framed (or existing) sites using the process I described above.

You don't end up breaking the existing application - you create a new (test) page using the template as a starting point.
You then bring the sections across from the application one at a time.

It helps to think of your page made up of a number of dedicated components that each perform a specific task. Example
* Navigation component
* Pedigree of Private
* Slide Show
* On This day
* Statistics - Peter Test

Think of each of this as a stand alone entity. This makes moving them about much easier.

Bring the component across to the template page and manually adjust for styles and element generation (for instance if you are using a <ul> in the application but the template uses <div>'s - you would potentially need to change one into the other)

Because it is a test page you can experiment without impacting the live page. When it has all been brought across you can publish the new page being sure to setup a regression script that allows you to revert to the previous version in the event of something going wrong.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter KromanSales ExecutiveAuthor Commented:
OK . That is actually how I do it - and have done it - with all my other pages which works nicely.

I have not tried working moving the entities of the application one by one, but just the whole application.

I'll go to work on your suggestion. Thanks :)
Olaf DoschkeSoftware DeveloperCommented:
I see you got your answer.

Subclassing would be nice, wouldn't it? That's a thing missing in HTML/CSS. In your position I would keep a copy of original templates and merge as sensible as you can do. In the end it looks like you'd like to move the whole HTML of the application into one div of your template and that means putting in the body part of the app HTML into your content section div.

But the head section will have much of the includes of CSS and JS for the application to work, too. In the end merging both UI and functionality. You better adapt your template to use same versions of jQuery or other common things before merging.

Bye, Olaf.
Peter KromanSales ExecutiveAuthor Commented:
Thanks Olaf,

I have worked with it, and I have to admit that his application is too complex for me to get working with my template. So I think I'll just keep it the "iFrame way" for now. Thanks for the answers to Julian and Olaf.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.