During my first phonegap project i was very confused with what project structure to follow. Since Phonegap is a HTML5 app, all files needs to be .html only, so i was confused a lot of weather to use a single HTML file structure or multiple HTML files. Below in the blog post i will share my experience
Single HTML File
This make a lot of sense to use, because in multiple html files, will have lot of issues like passing variables, copy pasting header/footer multiple times in different files. But the problem with single html file is if we start to code our app in a single html file, the code will become very long and un manageable very soon.
Multiple HTML Files
The problems are very obvious here, how to pass variables between pages. Lot of code duplicate in code html elements like header footer etc.
So in the end i decided to go with Single HTML file itself, but to remove the problem of a very long single html, i used php to help me out. The trick i used is very simple.
Create a index.php file and use ob_start() and ob_end_clean() to generate a index.html which you can use in your phonegap application. So example of .php file would be
<?php
ob_start();
?>
<html>
<head>
<?php require_once 'mods/head.php'; ?>
</head>
<body>
<div id="home_page">
<?php require_once 'page/home.php'; ?>
</div>
....
<div id="contact_page">
<?php require_once 'page/contact.php'; ?>
</div>
<?php require_once 'mods/footer.php'; ?>
</body>
</html>
<?php
$content = ob_get_contents();
ob_end_clean();
$filename = dirname(__FILE__) . '/index.html';
file_put_contents($filename, $content);
echo $content;
?>
Using the above trick, i was able to make the html code module and made the code manageable.
I am not sure if this is the best way, if there is any better way feel free to share!