PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Wed Jun 03, 2020 2:33 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 1 post ] 
Author Message
PostPosted: Thu Dec 19, 2013 1:47 am 
Offline
Forum Newbie
User avatar

Joined: Tue Dec 03, 2013 1:33 am
Posts: 23
Location: Cyber World
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

Syntax: [ Download ] [ Hide ]
<!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

Syntax: [ Download ] [ Hide ]
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

Syntax: [ Download ] [ Hide ]
<!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

Syntax: [ Download ] [ Hide ]
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 1 post ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group