Aller au contenu

Programmation PHP/Exemples/MiniCMS/Déploiement de la vue

Un livre de Wikilivres.


Le frontOffice

[modifier | modifier le wikicode]

Le front office est orienté ajax.

<?xml version="1.0" encoding="UTF-8"?>
<!-- templateChunk model -->
<template id="nested" number="" topic="" links="">
    
    <!-- HEADER CONTENT -->
    <header>
        
        <assert>
            
            <![CDATA[
                
                :: HERE COMES SERVER/CLIENT SIDE SNIPPETS ::
                
            ]]>
            
        </assert>
        
        <!--  -->
        <content>
                
                <style id="" />
                
                <style id="standard">
                    
                    body
                        {
                            /* background-color:red; */
                            font-family:verdana;
                            font-size:10px;
                            margin:0px 0px 0px 0px;
                            padding:0px;
                        }
                        
                    .click
                        {
                            cursor:pointer;
                        }
                        
                    .style_01
                        {
                            /* some style in */
                        }
                    
                    .encoder
                        {
                            font-size:11px;
                            font-family:verdana;
                            width:95%;
                        }
                     
                     .title td
                         {
                             font-weight:bold;
                         }
                     
                     .specButton
                        {
                            font-weight:bold;
                            cursor:pointer;
                            font-size:10px;
                            font-family:verdana;
                        }
                        
                    div
                        {
                            /* border: grey 1px solid ; */
                           
                        }
                    
                    .dirPath
                        {
                            background-color:yellow;
                        }
                    
                    .red
                        {
                            color:red;
                        }
                    
                    .green
                        {
                            color:green;
                        }
                    
                    .dark
                        {
                            padding:2px;
                            background:#bbb;
                            /* font-weight:bold; */
                            color:white;
                        }
                    
                    .panel 
                        {
                            position: fixed;
                            background:#eee;
                            top: 1em;
                            right: 2%;
                            border: 1px solid #000000;
                            padding: 1em;
                            z-index: 10;
                            width: 200;
                        }
                        
                    .adminMenu 
                        {
                            position: fixed;
                            background:#eee;
                            top: 1em;
                            left: 2%;
                            border: 1px solid #000000;
                            padding: 1em;
                            z-index: 10;
                            width: 200;
                        }
                    
                    .bottomTool 
                        {
                            position: fixed;
                            background:#eee;
                            bottom: 1em;
                            left: 2%;
                            border: 1px solid #000000;
                            padding: 1em;
                            z-index: 10;
                            /* width: 75%; */
                            overflow:auto;
                        }
                    
                    /* */
                    input
                        {
                            width:80%;
                        }
                    
                </style>
               
                <script id="prototype" number="" >
                    
                    <![CDATA[
                    
                        <script src="./Cms/Objects/prototype.js"></script> 
                    
                    ]]>
                    
                </script>
                
            <script id="editor" number="">
                
                <![CDATA[
                
                // inject special tags in the textPad as bold, strike...
                // input	target place, start position, end position
                // output	nonde
                function txtInject(trg,repdeb, repfin)
                {//
                	document.all('txt#content').focus();
                	/* pour l'Explorer Internet */
                	if(typeof document.selection != 'undefined')
                	{
                		/* Insertion du code de formatage */
                		var range = document.selection.createRange();
                		var insText = range.text;
                		range.text = repdeb + insText + repfin;
                		/* Ajustement de la position du curseur */
                		range = document.selection.createRange();
                		if (insText.length == 0)
                		{
                			range.move('character', -repfin.length);
                		} else {
                			range.moveStart('character', repdeb.length + insText.length + repfin.length);
                		}
                		range.select();
                	}
                	/* pour navigateurs plus récents basés sur Gecko*/
                	else if(typeof input.selectionStart != 'undefined')
                	{
                		/* Insertion du code de formatage */
                		var start = input.selectionStart;
                		var end = input.selectionEnd;
                		var insText = input.value.substring(start, end);
                		input.value = input.value.substr(0, start) + repdeb + insText + repfin + input.value.substr(end);
                		/* Ajustement de la position du curseur */
                		var pos;
                		if (insText.length == 0)
                		{
                			pos = start + repdeb.length;
                		} else {
                			pos = start + repdeb.length + insText.length + repfin.length;
                		}
                		input.selectionStart = pos;
                		input.selectionEnd = pos;
                	} else {
                		/* requête de la position d'insertion */
                		var pos;
                		var re = new RegExp('^[0-9]{0,3}$');
                		while(!re.test(pos))
                		{
                			pos = prompt("Insertion à la position (0.." + input.value.length + "):", "0");
                		}
                		if(pos > input.value.length)
                		{
                			pos = input.value.length;
                		}
                		/* Insertion du code de formatage */
                		var insText = prompt("Veuillez entrer le texte à formater:");
                		input.value = input.value.substr(0, pos) + repdeb + insText + repfin + input.value.substr(pos);
                	}
                }//
                                
                // sort a text pad in the main gui if double clicked on the content zone
                // input	content string, text container id
                // output	reformated string
                function tinyTextPad(str,txt_id)
                {// text editor
                
                	// set the utilities images on the content zone of the container
                	str= "<div id='txtPad' align='left'><img src='./Cms/Images/bold.gif' style='cursor:pointer;' onclick='trg=parentNode.nextSibling;txtInject(trg,\"<b>\",\"</b>\");' /><img src='./Cms/Images/italic.gif' onclick='trg=parentNode.nextSibling;txtInject(trg,\"<i>\",\"</i>\");' /><img src='./Cms/Images/underline.gif' style='cursor:pointer;' onclick='trg=parentNode.nextSibling;txtInject(trg,\"<u>\",\"</u>\");' /><img src='./Cms/Images/stroke.gif' style='cursor:pointer;' onclick='trg=parentNode.nextSibling;txtInject(trg,\"<s>\",\"</s>\");' /><img src='./Cms/Images/p.gif' style='cursor:pointer;' onclick='trg=parentNode.nextSibling;txtInject(trg,\"<p>\",\"</p>\");' /> | <img src='./Cms/Images/ul.gif' style='cursor:pointer;' onclick='trg=parentNode.nextSibling;txtInject(trg,\"<ul>\",\"</ul>\");' /><img src='./Cms/Images/li.gif' style='cursor:pointer;' onclick='trg=parentNode.nextSibling;txtInject(trg,\"<li>\",\"</li>\");' /></div><textarea id='"+txt_id+"' rows='15'>"+str+"</textarea>";
                
                return str;
                }//
                ]]>
                
            </script>
                
                <script id="topScript" number="">
                
                <![CDATA[
                    
                    function reformat( pContent )
                        {
                            return pContent.replace(/=/gi,'``i').replace(/\"/gi,'``o').replace(/\?/g,'``q').replace(/&/g,'``e').replace(/%/g,'``u').replace(/#/g,'``a');
                        }
                    
                    function trim( content )
                        {
                        	return content.replace(/^\s+|\s+$/g,"");
                        }
                  
                    function collapse(pDom)
                      {
                           switch(pDom.innerHTML)
                               {
                                  case "[_]":
                                      pDom.innerHTML = "[+]";
                                      break;
                                  case "[+]":
                                      pDom.innerHTML = "[_]";
                                      break;
                              }
                      }
                  
                    function showHide(pDom,pFlg)
                        {
                          if(pDom.style.display=='none')
                                  pDom.style.display='' ;
                          else
                                  pDom.style.display='none' ;
                         }
                  
                   function doHtml( content )
                       {
                          content = content.replace(/&lt;/g, "<").replace(/&gt;/g,">");
                          
                       return content ;
                       }
                   
                    function feedContainer( pDom )
                        /* 
                            
                        */
                        {
                            var ctc = pDom.innerHTML ;
                            cpt = document.getElementById('iCounter') ;
                            var nbr = Number((cpt.value)) ;
                            if(trim(ctc).substring(0,4) != "<tex" && trim(ctc).substring(0,4) != "<TEX" )
                                {
                                    cpt.value = nbr +1 ;
                                    pDom.innerHTML = "<textarea id='t_"+nbr+"' style='width:99%' rows='10' cols='20'>" + trim(ctc) + "</textarea>" ; 
                                }
                            else 
                                {
                                    cpt.value = nbr -1 ;
                                    placeContent( pDom.firstChild.value, pDom.id ) ;
                                }
                        }
                    
                    var _ = function() {} ;
                    
                    // object access
                    _.prototype.oa = {
                        
                        tab:new Array(),
                        
                        getNodesById:function(pDom, pId)
                            /**
                                getNodes by id function
                            */
                            {
                                 if(pDom.getElementsByTagName)
                                     {
                                         all = pDom.getElementsByTagName("*") ;
                                             for(g=0; g<all.length; g++)
                                             {
                                                 if( all[g].getAttribute && all[g].getAttribute("id") == pId )
                                                     {
                                                         this.tab.push(all[g]) ;
                                                     }
                                             }
                                             
                                     return this.tab ;
                                     }
                            },
                        
                        getNodesWithId:function(pDom, pId)
                            /**
                                getNodes by id function
                            */
                            {
                                 if(pDom.getElementsByTagName)
                                     {
                                         var reg=new RegExp("("+pId+")","g") ;
                                         all = pDom.getElementsByTagName("*") ;
                                         for(g=0; g<all.length; g++)
                                             {
                                                 if( all[g].getAttribute && reg.test(all[g].getAttribute("id")) )
                                                     {
                                                         this.tab.push(all[g]) ;
                                                     }
                                             }
                                         
                                     return this.tab ? this.tab : false ;
                                     }
                            },
                        
                        each:function() // pAction
                            /**
                            
                            */
                            {
                                for(var i=0;i<this.tab.length;i++)
                                    {
                                        // 
                                    }
                            }
                    }
                    
                    _.prototype.Remote = {

                    	getConnector: function() 
                        	{
                        		var connectionObject = null ;
                        		if (window.XMLHttpRequest)
                            		{
                            			connectionObject = new XMLHttpRequest() ;
                            		} 
                        		else if (window.ActiveXObject) 
                            		{
                            			connectionObject = new ActiveXObject('Microsoft.XMLHTTP') ;
                            		}
                        		return connectionObject ;
                        	},
                    
                    	configureConnector: function(connector, callback) 
                        	{
                        		connector.onreadystatechange = function() 
                            		{
                            			if (connector.readyState == 4) 
                                			{
                                				if (connector.status == 200) 
                                    				{
                                    					callback.call(connector, {
                                        					text: connector.responseText,
                                        					xml: connector.responseXML
                                    					});
                                    				}
                                			}
                            		}
                        	},
                    	
                    	load: function(request) 
                        	{
                        		var url = request.url || "" ;
                        		var callback = request.callback || function() {} ;
                                
                        		var connector = this.getConnector() ;
                        		if (connector) 
                            		{
                            			this.configureConnector(connector, callback) ;
                            			connector.open("GET", url, true) ;
                            			connector.send("") ;
                            		}
                        	},
                    	
                    	save: function(request) 
                        	{
                        		var url = request.url || "" ;
                        		var callback = request.callback || function() {} ;
                        		var data = request.data || "" ;
                        		var connector = this.getConnector() ;
                        		if (connector) 
                            		{
                            			this.configureConnector(connector, callback);
                            			connector.
                            			    open("POST", url, true);
                            			connector.
                            			    setRequestHeader("Content-type", "application/x-www-form-urlencoded") ;
                            			connector.
                            				setRequestHeader("Content-length", data.length) ;
                            			connector.
                            				setRequestHeader("Connection", "close") ;
                            			connector.
                            				send(data);
                            		}
                        	}
                    }
                    
                    function placeContent ( pContent, pIdTarget )
                        /**
                               set the content to targetted container 
                        */
                        {
                             _.Remote.save(
                                 {
                                    url: "./main.php",
                                    data: "qry=2&id=" + pIdTarget + "&content=" + reformat(pContent),
                                    callback: function(response)
                                        {
                                           var nfo = segment( response.text ) ;
                                           var node = document.getElementById( nfo[0] ) ;

                                           node.innerHTML = nfo[2] ;
                                           
                                           if($('contentKey').value==1)
                                           {
                                                setNodes(node);   
                                           }
                                           
                                           _.oa.tab = new Array() ;
                                           feedContent() ;
                                        }
                                  }
                             );
                        }
                    
                ]]>
               
                </script>
                
                <script id="endScript" number="">
                    
                    <![CDATA[
                    
                        _ = new _() ;
                        
                        function segment(pStr)
                            /**
                            
                            */
                            {
                                var reg=new RegExp("~~", "g") ;
                                
                            return pStr.split(reg) ;
                            }
                        
                        function isToFeed()
                            /**
                                check is still to feed
                            */
                            {
                                return  (set = _.oa.getNodesWithId(document.body,"lay") )?set:false  ;
                            }
                        
                        function feedLayout()
                            /**
                                feed the layout
                            */
                            {
                                    var ctc = _.oa.getNodesWithId(document.body,"lay") ;
                                    if(ctc[0])
                                       _.Remote.save({
                                            url: "./main.php",
                                            data: "qry=1&id="+ctc[0].id+"&owner=" + document.getElementById("customerName").value,
                                            callback: function(response)
                                            {
                                               var nfo = segment( response.text ) ;
                                               var node = document.getElementById( nfo[0] ) ;
                                               node.innerHTML = nfo[2] ;
                                               node.id = nfo[1] ;
                                               
                                               _.oa.tab = new Array() ;
                                               feedContent() ;
                                            }
                                        });
                                }
                        
                        function feedData()
                            /**
                                feed the data
                            */
                            {
                                var ctc = _.oa.getNodesWithId(document.body,"data") ;
                                if(ctc[0])
                                   _.Remote.save({
                                        url: "./main.php",
                                        data: "qry=1&id="+ctc[0].id+"&request=1&owner=" + document.getElementById("customerName").value,
                                        callback: function(response)
                                        {
                                           var nfo = segment( response.text ) ;
                                           var node = document.getElementById( nfo[0] ) ;
                                           node.innerHTML = nfo[2] ;
                                           node.id = nfo[1] ;
                                           
                                           _.oa.tab = new Array() ;
                                           feedContent() ;
                                        }
                                   });
                            }
                        
                        function feedContent()
                            /**
                                feed the content of the page by tag expr and Id
                            */
                            {
                                feedLayout() ;
                                feedData() ;

                              if($('contentKey').value!=0)
                                {
                                    if($('mainContent'))
                                    {
                                       $('mainContent').ondblclick = function (e) {feedContainer(this);};
                                    }
                                }
                            }

                    ]]>
                    
                </script>
                
            <script id="pagerScript" number="">
                
              <![CDATA[
              
                  function cropPage()
                  /*
                      get the crop page
                      
                      */
                      {
                             _.Remote.save(
                                 {
                                    url: "./main.php",
                                    data: "qry=7",
                                    callback: function(response)
                                        {
                                           var nfo = segment( response.text ) ;
                                           document.getElementById("mainContent").innerHTML = nfo[2];
                                        }
                                  });
                      }
                      
                  function itemPage()
                  /*
                      get the item page
                      
                      */
                      {
                             _.Remote.save(
                                 {
                                    url: "./main.php",
                                    data: "qry=8",
                                    callback: function(response)
                                        {
                                           var nfo = segment( response.text ) ;
                                           document.getElementById("mainContent").innerHTML = nfo[2];
                                        }
                                  });
                      }
                      
                  function pagePage()
                  /*
                      get the page page
                      
                      */
                      {
                             _.Remote.save(
                                 {
                                    url: "./main.php",
                                    data: "qry=9",
                                    callback: function(response)
                                        {
                                           var nfo = segment( response.text ) ;
                                           document.getElementById("mainContent").innerHTML = nfo[2];
                                        }
                                  });
                      }
              
              ]]>
                
            </script>
                
            <script id="adminScript" number="">
                
               <![CDATA[
                   
                 // $('mainContent').onDblClick = "feedContainer(this);";
                   
               ]]>
                
            </script>
                
        </content>
        
    </header>
    
    <!-- HEADER CONTENT -->
    <main>
        
        <assert>
            
            <![CDATA[
                
                :: HERE COMES SERVER/CLIENT SIDE SNIPPETS ::
                
            ]]>
            
        </assert>
        
        <!--  -->
        <content>
            
            <page id="standard">
                
                <![CDATA[
                
                    <input type="hidden" id="iCounter" name="nCounter" value="0" />
                    <div id="lay:frameContent" class="toFeed" >> mainEntry container</div>
                 
                ]]>
                
            </page>
            
            <page id="frameContent">
                
                <![CDATA[
                        
                        <div id="lay:topContent"></div>
                        <div id="lay:mainContent"></div>
                        <div  id="lay:bottomContent"></div>
                        
                ]]>
                
            </page>
            
            <page id="topContent">
                
                <![CDATA[
                
                   <div> > My Tiny CMS | TOP CONTENT</div>
                
                ]]>
                
            </page>
            <page id="loginPane">
                
                <![CDATA[
                        
                        <div>
                            
                            <input id="iUsr" type="text" value=" " style="width:96%;" /><br/>
                            <input id="iButton" type="button" value="log on"  style="width:100%;" />
                            
                       </div>
                        
                ]]>
                
            </page>
            
            <page id="menuPane">
                
                <![CDATA[
                    
                    <div class="panel">
                        <span onclick="showHide($('cMenu'),1);collapse(this);">[+]</span>
                        <span id="cMenu">  !.crop | !.item | !.page
                            <p />
                            <span onclick="showHide($('loginPane'),2);">:: Login Pane ::</span>
                            <span><div id="lay:loginPane"></div></span>

                        </span>
                    </div>
                    
                ]]>
                
            </page>
            
            <page id="mainContent">
                
                <![CDATA[

                    <div id="mainContent">
                        
                        <div id="data:1|1|rootEntry"></div>
                        
                    </div>
                ]]>
                
            </page>
            
            <!-- 
            
                The bottom tool may contain all the moderator and admin utilities
            
            -->
            <page id="bottomTool">
                
                <![CDATA[
                
                    <!--
                    <div class="bottomTool">
                        <span onclick="showHide($('cBottom'),1);collapse(this);">[+]</span>
                        <span id="cBottom">:: Bottom Tool ::
                        <div id="cBottomPane"></div>
                        </span>
                    </div>
                    -->
                    
                ]]>
                
            </page>
            
            <page id="bottomContent">
                
                <![CDATA[
                    
                    <div> myTinyCS @ | version 1.0 </div>
                    
                ]]>
                
            </page>
            
            <page id="lay_01" />
            <page id="lay_02" />  
            <page id="lay_03" />

<!-- 

!.crop | !.item | !.page

-->

        </content>
        
    </main>
    
    <!-- PAGE CONTENT -->
    <frameset>
        
        <assert>
            
            <code type="text/javascript" id="scr_01">
                
                <![CDATA[
 
                    function lastScript()
                    {
                        return "this is last script";
                    }
 
                ]]>
                
            </code>

        </assert>
        
        <content><!--  -->
            
            <![CDATA[
            
                <?xml version="1.0" encoding="UTF-8" ?>
                {{inc:token[xhtmlTransitional]}}
                <html>
                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                    <head>
                        
                        <style>{{inc:style[standard]}}</style>
                        
                        <script>{{inc:script[topScript]}}</script>
                        <script>{{inc:script[pagerScript]}}</script>
                        
                        {{inc:script[prototype]}}
                        
                    </head>
                    
                    <body onload="feedContent()">
                    
                        {{inc:customer}}
                        
                        {{inc:menuPane}}
                        {{inc:bottomPane}}
                        
                        <!-- Page entry -->
                        <div id='mainContent'>
                        
                            {{inc:page[standard]}}
                        
                        </div>
                        
                    </body>
                    
                    <script>
                    
                         {{inc:script[endScript]}}
                         
                    </script>
                    
                </html>
             
            ]]>
            
        </content>
        
    </frameset>
    
    <tokens>
	
		<token id="xhtmlTransitional">
		
			<![CDATA[
			
				<!DOCTYPE html PUBLIC 
					"-//W3C//DTD XHTML 1.0 Transitional//EN" 
					"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
			
			]]>
		
		</token>
		
        <token id="HTML4">
            
            <![CDATA[
                 
                    <!DOCTYPE HTML PUBLIC 
                        "-//W3C//DTD HTML 4.01 Transitional//EN" 
                        "http://www.w3.org/TR/html4/loose.dtd">
                 
           ]]>
           
        </token>
        
        <token id="xhtmlstrict">
            
            <![CDATA[
                 
                 <!DOCTYPE html PUBLIC
                     "-//W3C//DTD XHTML 1.0 Strict//EN" 
                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                     
           ]]>
           
        </token>
        
        <token id="xhtml_xmlns">
            
            <![CDATA[
                
                http://www.w3.org/1999/xhtml
                
            ]]>
            
        </token>
        
    </tokens>
    
</template>
  • Config.inc.php
<?php 

/**
 * 	configure my tiny CMS
 */

define("ROOT","") ;

define("CMS"	,ROOT."/Cms") ;
define("OWN"	,ROOT."/Owners") ;

define("CLA"	,CMS . "/Classes") ;
define("FUN"	,CMS . "/Functions") ;

// 
define("OBJ"	,CMS . "/Objects") ;

	define("BCK"	,OBJ . "/Backend") ;
	define("FNT"	,OBJ . "/Frontend") ;

?>


  • main.php
point d'entrée back&front end
un switch distingue les appels entrants avec et sans paramètres
<?php

require_once "./config.inc.php" ;

if( !@$_REQUEST['qry'] )
/*
 *   output type switch for ajax layer
 */
	{ 
		include_once FNT."/entry.inc.php" ;
	}
else
	{
		include_once BCK."/responder.inc.php" ;
	}

?>


  • responder.inc.php
appels entrant avec interrogation
<?php 
	
     # TESTING 1.0
	echo $_REQUEST["id"] . "~@~" . $_REQUEST['id'] . " / " . $_REQUEST["name"] . " " . $_REQUEST["surname"] ;
	
?>


  • entry.inc.php
appels entrant sans interrogation
<?php

//
//require_once CLA . "/dataManager.class.php" ;
require_once CLA . "/utilities.class.php" ;
require_once CLA . "/templateControler.class.php" ;

//
$tmp = new templateControler(array("path"=>"./Owners/Root/Templates/default.xml"));

# STATE
	$tmp->initFrame(
		$tmp
			->getNode("//template/frameset/content")
		 ) ;
	
	$tmp->getAnchors( $tmp->data['feed'][0]->nodeValue ) ;
	$tmp->anchorContentReplacer() ;
	
	$tmp->setFrame() ;

# OUTPUT
	echo $tmp->data['frameset'] ;

?>