Using Hot Towel SPA Framework for PHP

Discussion for various published PHP frameworks, including Zend Framework, CodeIgniter, Kohana, CakePHP, Yii, Symfony, and others.

Moderator: General Moderators

Post Reply
User avatar
rugved
Forum Newbie
Posts: 23
Joined: Tue Dec 03, 2013 12:33 am
Location: Cyber World

Using Hot Towel SPA Framework for PHP

Post by rugved »

I am currently in the process of building a website for my company. My company has told me to build a single-page web application in PHP. I searched for an existing framework in PHP that helps us develop SPA (single-page applications) but I didn't find any.

Since I was previously an ASP.NET developer, I had a bit of knowledge in the Hot Towel SPA framework which serves the same purpose. Thus, I started replicating the same framework in PHP. I have successfully built the initial SPA navigation functionality for three pages in HTML, using Hot Towel SPA's js files (main.js, shell.js, breeze.js, knockout.js, require.js, shell,html, nav.html, durandal, etc.).

I currently have built three files: index.php, awards.html and awards.js. The source code for these files and the built-in framework files is,

index.php

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
        <!--<link rel="stylesheet" type="text/css" href="Content/durandal.css" />-->
        <link rel="stylesheet" href="Content/app.css" />
        <link rel="stylesheet" type="text/css" href="Content/bootstrap-responsive.css" />
    </head>

    <body>
        <div id="fb-root"></div>

        <div id="applicationHost">
            <div class="navbar navbar-fixed-top navbar-inverse">
                <div class="navbar-inner">
                    <div class="container">
                        <a class="brand">
                            <span>Delaware</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="Scripts/bootstrap.js"></script>
        <script type="text/javascript" src="Scripts/knockout-2.2.1.js"></script>
        <script type="text/javascript" src="Scripts/sammy-0.7.4.js"></script>        
        <script type="text/javascript" src="App/durandal/amd/require.js" data-main="App/main.js"></script>
    </body>
</html>
require.js

Code: Select all

require.config({
    paths: {
        'text': 'durandal/amd/text'
    }
});

define(function (require) {
    var app = require('durandal/app'),
        viewLocator = require('durandal/viewLocator'),
        system = require('durandal/system'),
        router = require('durandal/plugins/router');

    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");

    app.start().then(function () {
        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        //configure routing
        router.useConvention();
		router.mapNav("index");
        router.mapNav("pages/show");
		router.mapNav("pages/awards");
        router.mapNav("pages/add");
        router.mapNav("pages/details/:id");

        app.adaptToDevice();

        //Show the app by setting the root view model for our application with a transition.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});
awards.html

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Awards</title>
<style type="text/css">
body {
    background-color: #333;
}
body,td,th {
    color: #CCC;
    font-family: "Brush Script MT";
    font-size: xx-large;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript" src="../../viewmodels/movies/awards.js"></script>
<script type="text/javascript" src="knockout-2.2.1.js"></script>
</head>

<body onload="MM_preloadImages('Images/AwardsThumb.png')">
<p>Awards
</p>
<table width="899">
  <tr>
    <td width="428"><form id="form1" name="form1" method="post" action="awards.php">
      <label for="AwardName"></label>
      <input name="AwardName" type="text" id="AwardName" size="70" />
    </form></td>
    <td width="169" rowspan="2" align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AwardsThumb','','Images/AwardsThumb.png',1)"><img src="Images/AwardsThumb.png" width="96" height="96" id="AwardsThumb" /></a></td>
    <td width="280">&nbsp;</td>
  </tr>
  <tr>
    <td><form id="form2" name="form2" method="post" action="awards.php">
      <label for="AwardDescription"></label>
      <textarea name="AwardDescription" id="AwardDescription" cols="68" rows="5"></textarea>
    </form></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><input name="IssueOrganization" type="text" id="IssueOrganization" size="100" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><input name="Date" type="text" id="IssueOrganization2" size="40" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><form id="form3" name="form3" method="post" action="awards.php">
      <label for="LinkWith"></label>
      <textarea name="LinkWith" id="LinkWith" cols="100" rows="5"></textarea>
    </form></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td align="right"><form id="form4" name="form4" method="post" action="awards.php">
      <input type="submit" name="Save" id="Save" value="Save" />
    </form></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><form id="form5" name="form5" method="post" action="awards.php">
      <input type="submit" name="Portfolio" id="Portfolio" value="Portfolio" />
    </form></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
awards.js

Code: Select all

define(function (require) {
    var router = require('durandal/plugins/router');
    var moviesRepository = require("repositories/moviesRepository");

    return {
        movieToShow: {
            title: ko.observable(),
            director: ko.observable()
        },

        activate: function (context) {

        }
    };

});
The problem here is that the three pages are in HTML and I want them to be in PHP in order to make Hot Towel SPA compatible with PHP. In other words I want to convert awards.html to awards.php and make the application work.

Can anyone please tell me how do I achieve this? Information on the Hot Towel SPA framework can be found on the following links:

http://www.johnpapa.net/hottowel/ http://www.dotnetcurry.com/showarticle.aspx?ID=903

Thank you in advance.
Post Reply