[SOLVED] Quick javascript inclusion with PHP

[Ninjakreborn]

I developed a quick system into my personal programmer assistant (my own framework I carry around from project to project), and it works fairly well.

However I have certain javascript libraries I use so far.

Prototype.js

Rico.js (which is dependent on prototype

script.alac.us (which is depending on prototype, and automatically loads all it's other files when you include just this one (unit test, slider, effects) and all the other js files it comes with.)

I am wanting a quick way to just echo the name of the javascript file i want to use, but I also don't want the config file for my framework getting really messy, still trying to keep everything pretty simple.

Right now, with what I currently have, I have the javascript inclusion as 3 different parts.

$config['js']['library'] = "/ppassistant/system/languagelibraries/";
$config['js']['start'] = '<script type="text/javascript" src="';
$config['js']['end'] = '"></script>';

within my config.php file.

This is fine for awhile back, I didn't mind having to go through the trouble.  However everytime I wanted a new js file, I had to put it in the folder (whenever I wanted to play around with other libraries, or needed another library for something specific/temporarily on a project)

I always (everytime I add one) have to go and do this in the config file.

$config['js']['rico'] = $config['js']['start'] . $config['js']['library'] . "rico.js" . $config['js']['end'];

for example, then when I got ready to include it within my files I would have to (since prototype is it's dependent) I would have to go

<?php
echo $config['js'];
echo $config['prototype'];
I was hoping I could have a quicker way to do this, I want a quicker way if it's possible.
Because I am about to start really getting into ajax more, I am using different frameworks here and there, but on the side when I start learning how the inside of these frameworks work, I will start slowly contructing my own list of functions.
CHANCES are though my functions are going to have depents on prototype or something else, so I don't want to have to fight with a gritty inclusion system when the time comes.

[Ninjakreborn]

<?php
//javascript/ajax library folder  (path to your javascript files)
$config['js']['start'] = '<script type="text/javascript" src="' . $config['modifier'] . '/ppassistant/system/languagelibraries/';
$config['js']['end'] = '"></script>';

// Put javascript below here, as shown in this example.  Each javascript file get's attached to it's own variable, making inclusion throughout pages easy (as needed)
// example: $config['js']['example'] = $config['js']['start'] . $config['js']['library'] . "example.js" . $config['js']['end']; it would be c
// setup for just prototype
$config['js']['prototype'] = $config['js']['start'] .
					$config['js']['library'] . "prototype.js" .
					$config['js']['end'] . "/n";

// setup for rico (includes prototype (rico's dependent)
$config['js']['rico']   = $config['js']['start'] .
					  $config['js']['library'] . "prototype.js" .
					  $config['js']['end'] . "/n" .
					  $config['js']['start'] . 
					  $config['js']['library'] . "rico.js" .
					  $config['js']['end'] . "/n";

$config['js']['script'] = $config['js']['start'] .
					  $config['js']['library'] . "prototype.js" .
					  $config['js']['end'] . "/n" .
					  $config['js']['start'] . 
					  $config['js']['library'] . "scriptaculous.js" .
					  $config['js']['end'] . "/n";

$config['js']['all']    = $config['js']['start'] .
					  $config['js']['library'] . "prototype.js" .
					  $config['js']['end'] . "/n" .
					  $config['js']['start'] . 
					  $config['js']['library'] . "rico.js" .
					  $config['js']['end'] . "/n" .
					  $config['js']['start'] . 
					  $config['js']['library'] . "scriptaculous.js" .
					  $config['js']['end'] . "/n";
?>

After playing with it a minute I came up with this.

That way I can just do

$config['js']['all'] if I want all on one page or just

$config['js']['rico'] if I want rico and it's dependent, I think that will make things a lot faster.

If anyone has any simpler/quicker way's then let me know, I am always open to suggestions.

[redbullmarky]

i might be missing something, but why use PHP at all? why not just enter regular Javascript tags?

[Ninjakreborn]

The reason I am even building my own framework is a area for my own personal "style".  In a lot of sense when there is something I can cut down a few minutes on development time by making something more automated, then I take the time in my spare time to try and achieve it.

For example.

<?php

echo $config['js']['rico'];

?>

I have just included prototype and rico both and they are ready to use on that page.

instead of

<script type="text/javascript" src="path/to/prototype.js"></script>

<script type="text/javascript" src="path/to/rico.js"></script>

Seemed a lot shorter the first way.

In case I want to load up all my javascript pages, because I want to use a little of this, and a little of that it's

<?php

echo $config['js']['all'];

?>

Instead of including thema ll manually, it's something that when I am working on something quick, it's quicker to include them and get that part done with, the paths are already set, so I won't have to double check to make sure the path's are correct or anything.

 

[redbullmarky]

personally i think it might be going a bit far into the unnecessary at this stage, especially when you consider that, for the extra few seconds it takes to type < script > tags, you dont have yet more PHP and yet more overhead cluttering up your HTML.

[Ninjakreborn]

Thanks for the feedback.

[obsidian]

I tend to agree with redbullmarky on this one; however, I can see a use for this type of thing if, in your framework or CMS, you are allowing a user to create a new page via a GUI and they can simply select which JS files to include. Then, you could loop through as you're suggesting. I really don't think the automation is necessary, though, when you could just as soon use a template that has the script inclusion tags already in it.

 

Hope this makes sense.

[roopurt18]

All of the pages in the site at my work are built through a CTemplate class.  This class uses Page.php as the basis for all of it's pages:

 

Page.php

<?php
  /**
   * Page.php
   * The basis for every page in the site.
   * Expects Vars:
   *  $PageHeader - Page header
   *  $PageContent - Page content
   *  $PageFooter - Page footer
   */
?>
<!DOCTYPE ...>
<html>
  <head>
    <!-- Stylesheets for every page -->
    <style ...></style>
    <style ...></style>
    <style ...></style>
    <!-- Javascript for every page -->
    <script ...></script>
    <script ...></script>
    <script ...></script>
  </head>

  <body>
    <?=$PageHeader?>
    <?=$PageContent?>
    <?=$PageFooter?>
  </body>
</html>

 

In addition, CTemplate exposes an addJavascript method.  This method takes the name of a JS file and automatically adds the appropriate Javascript tags into the header section of all pages outputted.

 

Using this system, it's very easy to set up Javascript files that are included on every single page in addition to allowing certain pages to include specific JS files particular to that page.

[Ninjakreborn]

Is there anyway I could "see" that templating class.  Not to run off with it specifically and steal it, but to look over it and see if I can learn something from it.

[roopurt18]

CTemplate.php

<?php
  // CTemplate.php
  // Template object.  Wrap up our mechanism for creating and displaying
  // pages in a more simple matter.
  require_once( DIR_MODEL_ROOT . "/CNavMenu.php");

  class CTemplate{
    var $stylesheets = Array(),
        $javascript = Array();

    // constructor
    // Prepare the object for use
    function CTemplate(){
      $this->stylesheets = Array();
      $this->javascript = Array();
      return;
    }

    // AddJavascript
    // $Name - Name of the javascript file.
    //         Will automatically be prefixed with URI_JS_ROOT and ended with
    //         FILE_EXT_JS
    function AddJavascript($Name){
      if(!in_array($Name, $this->javascript)){
        $this->javascript[] = $Name;
      }
      return;
    }

    // AddCSS
    // $Name - Name of the CSS file.
    //         Will automatically be prefixed with URI_CSS_ROOT and ended with
    //         FILE_EXT_CSS
    function AddCSS($Name){
      if(!in_array($Name, $this->stylesheets)){
        $this->stylesheets[] = $Name;
      }
      return;
    }

    // Display
    // $Title - The page title
    // $Content - The page content
    // Display the page to the user
    function Display($Title, $Content){
      global $clientObj, $sessObj;
      $params = Array();
      $Maint = LoadComponent("General/Maintenance");

      $navMenu = &new CNavMenu($clientObj, $sessObj);
      $params = Array();
      $params['Client'] = $clientObj;
      $params['Sess'] = $sessObj;
      $params['Title'] = $Title;
      $params['Javascript'] = $this->makeExtraJavascript();
      $params['CSS'] = $this->makeExtraCSS();
      $params['Content'] = $Content;
      $params['NavMenu'] = $navMenu->getMarkup();
      $params['Maintenance'] = $Maint;
      echo LoadComponent("General/Page", $params);
      return;
    }

    // makeExtraCSS
    // Take the internal css array and create the necessary links out of it.
    // In addition, add any custom styling information added by our clients.
    function makeExtraCSS(){
      $CSS = '';
      if(count($this->stylesheets)){
        foreach($this->stylesheets as $href){
          $CSS .= "<link href=\"" . URI_CSS_ROOT . "/{$href}." . FILE_EXT_CSS
                . "\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />";
        }
      }
      return $CSS;
    }

    // makeExtraJavascript
    // Take the internal javascript array and create the necessary links out
    // of it.
    function makeExtraJavascript(){
      $JS = '';
      if(count($this->javascript)){
        foreach($this->javascript as $src){
          $JS .= "<script src=\"" . URI_JS_ROOT . "/{$src}." . FILE_EXT_JS . "\""
               . " type=\"text/javascript\"></script>";
        }
      }
      return $JS;
    }

  }
?>

 

The function LoadComponent() and an example component follow to provide clarification on what occurs in CTemplate::Display()

 

LoadComponent()

<?php
  // LoadComponent
  // $name - component name
  // $params - associative array holding component parameters
  //           do not have any keys with the following names:
  //           File__
  //           Template
  // RETURN: HTML text to print from the component
  function LoadComponent($name, $params = NULL){
    global $Template;
    $html = NULL;
    $File__ = DIR_COMPONENTS . "/" . $name . ".php";
    if(file_exists($File__)){
      if(is_array($params) && count($params)){
        extract($params);
      }
      ob_start();
      include($File__);
      $html = ob_get_contents();
      ob_end_clean();
    }else{
      $File__ = str_replace(".php", "", $File__);
      $File__ = str_replace(DIR_COMPONENTS . "/", "", $File__);
      $html = "Could not locate component: {$File__}";
      $html = CreateStandardText($html, "left");
    }
    return $html;
  }
?>

 

ExampleComp.php

<?php
/**
* ExampleComp.php
* Expects vars:
*  $Letter - A letter
*  $Num - A number
*/
?>
<p>
  Today's broadcast was brought to you by the
  letter '<?=$Letter?>' and the number <?=$Num?>
</p>

 

This component would be loaded with the following code:

<?php
  $params = Array();
  $params['Letter'] = "B";
  $params['Num'] = "5";
  echo LoadComponent(COMPONENT_DIRECTORY . "/Messages/ExampleComp", $params);
?>

[Ninjakreborn]

          $CSS .= "<link href=\"" . URI_CSS_ROOT . "/{$href}." . FILE_EXT_CSS

                . "\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />";

  I have seen that before

FILE_EXT_CSS

not that same one, but other things like

MASTER_EXT

what are those variables called, and how do I use them, that's one part of that I didn't understand.

[roopurt18]

They're constants.

 

<?php
define("FILE_EXT_CSS", "css");
define("FILE_EXT_JS", "js");
?>

 

Typically, constants are IN_ALL_CAPS.  Using capital letters for constants isn't anything that's forced on us by the interpretor.  Most programmers just adopt the convention of using all capitals for their constant names because it makes them stand out.

 

Thus, when you see all caps in your code where a variable name could have been used instead, you should see that as, "Hey buddy!  I'm a constant!  I'm probably defined elsewhere!"

[Ninjakreborn]

So when I see someone else's config file, I see a bunch of define()

When I do it I do

$config['email'] = "whatever";

$root = $_SERVER['DOCUMENT_ROOT'];

and so forth, when I see them use define.

What is the different in setting the variables like that, and setting constants with the define() function.

[roopurt18]

Constants are just that, constant.  They're not meant to be changed, ever.

 

For instance, a framework or module might use internal constants for it's own purposes that are not meant to be modified by the application that is using the framework or module.

 

For example, a forum module might define it's own internal error constants.

<?php
  define( 'EZFRM_ERR1', 0x01 );
  define( 'EZFRM_ERR2', 0x02 );
  // and so forth
?>

 

When you see something like that, those values are integral to the operation of the forum module.  The authors of the module do not intend for you to change those values.  They are defined in that fashion because when the authors of the forum are maintaining the code

if( $status == EZFRM_ERR2 ){

is easier to read and implies more information than

if( $status == 0x02 )

 

Most modules and frameworks provide a series of settings that can be modified through an array named $config.  There are two things any programmer should notice about this variable right off the bat:

 

1)  config is short for configure or configuration

2)  it is a variable, therefore it can be modified

 

There will always be settings or parameters that are environment dependent that the authors of a framework or module are unable to predict.  I'm sure you've noticed that moving a website from one host to another is not an easy task, invariably certain things break.  The reason is because the operation of your site depends on certain settings of the environment.  The same goes for creating a general-purpose module or framework.  As the author of such a tool, you can not begin to predict what type of environment it will be run in.  Therefore, you provide a means of allowing the user, or client, who is another programmer, of your module / framework a method of configuring it.  You do this through the $config array.

[Ninjakreborn]

There is a wealth of knowledge in this post, I am going to bookmark it, I learnt about 3 new things from reading the posts you have put.  Thanks for the advice, and explanations.