Results 1 to 1 of 1

Thread: Dynamic external '.js' scripts and '.css' stylesheets with PHP

  1. #1
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default Dynamic external '.js' scripts and '.css' stylesheets with PHP

    This quick tutorial will explain the basics of creating dynamic stylesheet or script files using PHP.

    This will allow for database/user entry/changing scripts or stylesheets without having to manually update anything, but not require that the scripts/stylesheets are embedded in the page.

    You also could potentially not even need your page to have any PHP on it, just html, and call the dynamic style sheet as you want.


    First, PHP by default outputs html/text. You will want to change the content-type header.

    Using PHP this is simple:

    For CSS:
    PHP Code:
    <?php
    header
    ('Content-type: text/css');
    ?>
    Now, you can use on your page:
    <link rel="stylesheet" type="text/css" href="that.php">

    For JS:
    PHP Code:
    <?php
    header
    ('Content-type: text/javascript');
    ?>
    Now, you can use on your page:
    <script type="text/javascript" src="that.php">

    Though these files WILL end in '.php', they will act just like .js or .css.

    Now for what you can do with them:

    For the purposes of this, I will use CSS as the example, but Javascript can be used the same way.

    1. The most basic example would simply be like this:
    PHP Code:
    <?php
    header
    ('Content-type: text/css');
    ?>
    /*your css below*/
    .border {
    border: 0;
    }
    That is just using the header at the top of the page, exiting the php block, then typing your plain text CSS or JS as normal. However, this won't give you much of an advantage if you aren't using PHP to do something you couldn't do with just normal text.

    2. Do the same as above, but use PHP to alter the code based on a condition:

    a) Use a database to grab code:
    PHP Code:
    <?php
    header
    ('Content-type: text/css');
    mysql_connect(****);
    $row mysql_fetch_assoc(mysql_query('SELECT `border` FROM `my_table`'));
    echo 
    '.border {
    border: '
    .$row['border'].';
    }'
    ;
    ?>
    That basic example sets the border based on the border value in the database.

    b) Use a database to grab code:
    PHP Code:
    <?php
    header
    ('Content-type: text/css');
    $hour date('G');
    if (
    $hour 12) { $border='5'; }
    else { 
    $border '3'; }
    echo 
    '.border {
    border: '
    .$border.';
    }'
    ;
    ?>
    This checks if it is before 12 (noon), and will use a border of 5 if so, or, else, use a border of 3.

    c) You could also use GET variables:
    On your html/php page, you can use:
    <link rel="stylesheet" type="text/css" href="yourcss.php?sheet=1">
    This would set the variable $_GET['sheet'] to 1, or you could use any combination of ?variable=value.
    PHP Code:
    <?php
    header
    ('Content-type: text/css');
    switch (
    $_GET['sheet']) {
    case 
    1:
        
    $border 1;
        break;
    case 
    2:
        
    $border 2;
        break;
    default:
        
    $border 0;
    }
    echo 
    '.border {
    border: '
    .$border.';
    }'
    ;
    ?>
    This is overly simplistic, but works as an example. If the value sent is 1 or 2, the border is that width. If not, it defaults to 0.

    The better way to use GET variables, though, is likely using two or more stylesheets actually embedded in the page:
    PHP Code:
    <?php
    header
    ('Content-type: text/css');
    switch (
    $_GET['sheet']) {
    case 
    1:
        
    ?>
    .border {
    border: 6;
    }
        <?php
        
    break;
    case 
    2:
        
    ?>
    .border {
    border: 10;
    }
        <?php
        
    break;
    default:
        
    ?>
    .border {
    border: 3;
    }
        <?php
        
    break;
    }
    ?>
    This uses a switch statement to determine which style to use. You could have much longer styles, of course, since you have exited the PHP code. This allows for very easy use of a single file that can output different styles, for various reasons.
    You could just set this in your html source, or you could use PHP to dynamically set the GET variable in the <link> tag if needed:
    <link rel="stylesheet" type="text/css" href="yourcss.php?sheet=<?php echo $sheet; ?>>">


    There are a lot of options with this, so I hope this helps you get an idea of where to start.
    Last edited by djr33; 07-25-2007 at 08:29 PM.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •