Web Developer - Code and Info

PHP CODE EXAMPLE: How to roll your own PHP routing

added 7 days ago

JQUERY CODE EXAMPLE: Simple and Smart Popups with PowerTip

added on Jun 7, 2013

JQUERY CODE EXAMPLE: JQueryUI Radio Buttons

added on Jun 4, 2013

BOOSTRAP CODE EXAMPLE: Basic, Interactive Bootstrap Site

added on May 30, 2013

Basic, Interactive Bootstrap Site

This is a site that is based on bootstrap (CSS file) and had jQuery added to it so that the menus are interactive.

html

<!DOCTYPE html>
<head>
    <title>btest</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/site.js"></script>
    <script src="js/main.js"></script>

</head>
<body>
    <div class="container">
        <h1>The Title</h1>
        <div class='navbar navbar-inverse'>
            <div class='navbar-inner nav-collapse' style="height: auto;">
                <ul class="nav">
                    <li id="linkHome" class="active"><a href="#">Home</a></li>
                    <li id="linkInfo"><a href="#">Info</a></li>
                    <li id="linkAbout"><a href="#">About</a></li>
                </ul>
            </div>
        </div>

        <div id='content' class='row-fluid'>
            <div class='span9 main'>
                <div class="sitePage" id="pageHome">
                    <h2>Home</h2>
                    <p>...</p>
                </div>
                <div class="sitePage" id="pageInfo">
                    <h2>Info</h2>
                    <p>N...</p>
                </div>
                <div class="sitePage" id="pageAbout">
                    <h2>About</h2>
                    <p>...</p>
                </div>
                <div class="sitePage" id="pageSection1">
                    <h2>Nation States at the End of the 19th Century</h2>
                    <p>...</p>
                </div>
                <div class="sitePage" id="pageSection2">
                    <h2>1880-1910: Technological Inventions</h2>
                    <p>...</p>
                </div>
                <div class="sitePage" id="pageSection3">
                    <h2>Late 19th Century Japan</h2>
                    <p>...</p>
                </div>
            </div>
            <div class='span3 sidebar'>
                <ul class="nav nav-tabs nav-stacked">
                    <li><a id="linkSection1" class="sideLink" href='#'>Nation States at the End of the 19th Century</a></li>
                    <li><a id="linkSection2" class="sideLink" href='#'>1880-1910: Technological Inventions</a></li>
                    <li><a id="linkSection3" class="sideLink" href='#'>Late 19th Century Japan</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

site.js

KNOCKOUT CODE EXAMPLE: Knockout list adding

added on May 27, 2013

JQUERY CODE EXAMPLE: Nice, cascading fade-in of multiple items

added on May 23, 2013

JQUERY CODE EXAMPLE: Flashcard example with clicks

added on May 23, 2013

KNOCKOUTJS CODE EXAMPLE: Knockout.js Button Click and Counter

added on May 21, 2013

KNOCKOUTJS CODE EXAMPLE: Hello World knockout.js

added on May 21, 2013

PHP CODE EXAMPLE: A PHP script that observes another and kills is process if it hangs

added on Feb 5, 2013

A PHP script that observes another and kills is process if it hangs

If you have a PHP script running on a linux server which hangs now and then, this is an example of a script that can observe that script and when it hangs, kills it, so the cronjob can restart it.

test.ThatHangs.php

class TestThatHangs {

    protected $keepalive_file_name = 'test_keepalive_info.txt';
    protected $test_phase = self:nnn:TESTPHASE_HANG;
    protected $number_of_seconds_to_run_before_hang = 10;

    const TESTPHASE_HANG = 1;
    const TESTPHASE_EXITCORRECTLY = 2;

    public function process() {
        $this->_createKeepAliveFile();
        $this->_display('started script');

        for ($index = 0; $index < $this->number_of_seconds_to_run_before_hang; $index++) {
            $this->_display('test output');
            sleep(1);
            $this->_touchKeepAliveFile();
        }
        if ($this->test_phase == self:nnn:TESTPHASE_HANG) {
            $this->_emulateHang();
        } else {
            $this->_exitCorrectly();
        }
    }

    protected function _exitCorrectly() {
        $this->_cleanUpKeepAliveFile();
        $this->_display('exited correctly');
        exit;
    }

    protected function _emulateHang() {
        $this->_display('emulating hang...');
        sleep(10000);
    }

    protected function _display($text) {
        echo $text . PHP_EOL;
    }

    protected function _touchKeepAliveFile() {
        touch($this->keepalive_file_name);
    }

    protected function _getKeepAliveFileLastTouchedAbsoluteSeconds() {
        clearstatcache();
        return filemtime($this->keepalive_file_name);
    }

    protected function _createKeepAliveFile() {
        file_put_contents($this->keepalive_file_name, getmypid());
    }

    protected function _cleanUpKeepAliveFile() {
        unlink($this->keepalive_file_name);
    }

    protected function _getCurrentAbsoluteSeconds() {
        return strtotime(date("Y-m-d H:i:s"));
    }

}

$testThatHangs = new TestThatHangs();
$testThatHangs->process();

testKeepAlive.php

class TestKeepAlive {

    protected $seconds_of_nonactivity_to_kill_script = 10;
    protected $keepalive_file_name = 'test_keepalive_info.txt';

    public function process() {
        $this->_display('keep alive script is observing keepalive file...');
        while (true) {
            sleep(1);
            $keepAliveFileLastTouchedAbsoluteSeconds = $this->_getKeepAliveFileLastTouchedAbsoluteSeconds();
            if ($keepAliveFileLastTouchedAbsoluteSeconds == 0) {
                $this->_display('the script is not running');
            } else {
                $currentAbsoluteSeconds = $this->_getCurrentAbsoluteSeconds();
                $touchedAgoSeconds = $currentAbsoluteSeconds - $keepAliveFileLastTouchedAbsoluteSeconds;
                $this->_display('script is running and keep alive file was touched ' . $touchedAgoSeconds . ' seconds ago');
                if($touchedAgoSeconds >= $this->seconds_of_nonactivity_to_kill_script) {
                    $this->_killProcess();
                }
            }
        }
    }

    protected function _display($text) {
        echo $text . PHP_EOL;
    }

    protected function _getKeepAliveFileLastTouchedAbsoluteSeconds() {
        if (!file_exists($this->keepalive_file_name)) {
            return 0;
        } else {
            clearstatcache();
            return filemtime($this->keepalive_file_name);
        }
    }

    protected function _getCurrentAbsoluteSeconds() {
        return strtotime(date("Y-m-d H:i:s"));
    }

    protected function _cleanUpKeepAliveFile() {
        unlink($this->keepalive_file_name);
    }

    protected function _getProcessId() {
        $lines = file($this->keepalive_file_name);
        if(count($lines) > 0) {
            return intval($lines[0]);
        } else {
            return 0;
        }
    }

    protected function _killProcess() {
        $processId = $this->_getProcessId();
        $this->_display('killing process ' . $processId);
        exec("kill $processId");
        $this->_cleanUpKeepAliveFile();
    }

}

$testKeepAlive = new TestKeepAlive();
$testKeepAlive->process();

run.sh

DIR=$( cd "$( dirname "$0" )" && pwd )
cd $DIR
if ps ax | grep "$1" | grep -v grep | grep -v "/bin/sh" > /dev/null
then
echo ""
else
php $1 $2 $3 $4 $5 $6
fi

cronjobs (crontab -e)

MAILTO="test@company.com"
#* * * * * ~/work/testing/run.sh testThatHangs.php >> /var/log/cronjobs/log_testThatHangs
#* * * * * ~/work/testing/run.sh testKeepAlive.php >> /var/log/cronjobs/log_testKeepAlive

(replace :nnn: with two colons)

JQUERY CODE EXAMPLE: List of elements with similar functionality

added on Jan 30, 2013

List of elements with similar functionality

Shows how to create a list of elements, each with a unique id, each element with similar funtionality.

<html>
    <head>
        <script type="text/javascript" src="systemJavascript/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <div id="infoItem_123" class="infoItem">
            <div class="menu">
                <span class="menuOne">one</span>
                <span class="menuTwo">two</span>
            </div>
            <div class="content">intro message</div>
            <div class="contentOne">you clicked one</div>
            <div class="contentTwo">you clicked two</div>
        </div>
        <div id="infoItem_456" class="infoItem">
            <div class="menu">
                <span class="menuOne">eins</span>
                <span class="menuTwo">zwei</span>
            </div>
            <div class="content">Introtext</div>
            <div class="contentOne">du hast auf eins geklickt</div>
            <div class="contentTwo">du hast auf zwei geklickt</div>
        </div>
    </body>

</html>
<script type="text/javascript">

    var INFOITEM = INFOITEM || {};

    INFOITEM.initialize = function(infoItem) {
        var elemMenuOne;
        var elemMenuTwo;
        var elemContent;
        var elemContentOne;
        var elemContentTwo;
        var itemId;

        this.defineVariables = function() {
            elemMenuOne = infoItem.find('.menuOne');
            elemMenuTwo = infoItem.find('.menuTwo');
            elemContent = infoItem.find('.content');
            elemContentOne = infoItem.find('.contentOne');
            elemContentTwo = infoItem.find('.contentTwo');
            itemId = infoItem.attr('id');
        }

        this.decorateElements = function() {
            elemMenuOne.css('background-color', 'beige');
            this.decorateAsLink(elemMenuOne);
            elemMenuTwo.css('background-color', 'beige');
            this.decorateAsLink(elemMenuTwo);
            elemContentOne.hide();
            elemContentTwo.hide();
        }

        this.functionalizeElements = function() {
            that = this;
            elemMenuOne.click(function(e) {
                that.displayText($('#'+itemId), elemContentOne.html());
            });
            elemMenuTwo.click(function(e) {
                that.displayText($('#'+itemId), elemContentTwo.html());
            });
        }

        this.displayText = function(clickedInfoItem, text) {
            clickedInfoItem.find('.content').html(text);
        }

        this.decorateAsLink = function(elem) {
            elem.css({
                'cursor' :'pointer',
                'text-decoration' : 'underline',
                'font-weight' : 'normal'
            });
        }

        this.defineVariables();
        this.decorateElements();
        this.functionalizeElements();
    }


    $('.infoItem').each(function(){
        INFOITEM.initialize($(this));
    });

</script>

UBUNTU BOOK NOTES: Ubuntu Unleased 2012 | 4.2

added on Jan 8, 2013

JQUERY CODE EXAMPLE: Base code to simply attach jQuery code to numberous like elements on page

added on Jan 8, 2013

JQUERY CODE EXAMPLE: A simple JQuery/AJAX form with PHP processing page

added on Nov 16, 2012

A simple JQuery/AJAX form with PHP processing page

This is a simple HTML/JQuery/AJAX form that sends data via AJAX to a PHP page and displays the results.

HTML Page:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Testing - Test</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <script type="text/javascript" src="systemJavascript/jquery-1.8.2.min.js"></script>
        <style type="text/css">
            #result {
                margin: 10px;
                background: #eee;
                padding: 10px;
                height: 40px;
                overflow: auto;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                SMARTFORM.initialize($('form#form1'));
                SMARTFORM.initialize($('form#form2'));
            });
            var SMARTFORM = SMARTFORM || {};
            SMARTFORM.initialize = function(form) {
                var id = form.attr('id');
                var elemsTextBoxes = form.find('input[type=text]');
                var elemFirstField = form.find('input[type=text]').filter(':first');
                var elemButton = form.find('#formButton');
                var elemFieldFirstName = form.find('#firstName');
                var elemFieldLastName = form.find('#lastName');
                var elemResultArea = form.find('#resultArea');

                elemsTextBoxes.on('focus', function() {
                    $(this).css('background-color', '#eee');
                });
                elemsTextBoxes.on('blur', function() {
                    $(this).css('background-color', '#fff');
                });
                elemFirstField.focus();

                elemButton.click(function(e) {
                    e.preventDefault();
                    elemButton.blur();
                    elemFirstField.focus();
                    if(elemFieldFirstName.val() != '') {
                        $.post(
                        'testAjaxProcess2.php',
                        {
                            firstName: elemFieldFirstName.val(),
                            lastName: elemFieldLastName.val()
                        },
                        function( jsonString )
                        {
                            var data = $.parseJSON(jsonString);
                            elemResultArea.html(data['message']).hide().fadeIn('slow');
                            elemFieldFirstName.val('');
                            elemFieldLastName.val('');
                            elemButton.hide();
                            elemFieldFirstName.css('background-color', 'white');
                        });

                    } else {
                        elemFieldFirstName.css('background-color', 'red');
                    }
                });
            }

        </script>
    </head>
    <body>
        <form id="form1">
            <h2>Form1</h2>
            <div>First Name:<input type="text" id="firstName"/></div>
            <div>Last Name:<input type="text" id="lastName"/></div>
            <div><button id="formButton">Send</button></div>
            <div id="resultArea">
            </div>
        </form>
        <form id="form2">
            <h2>Form2</h2>
            <div>First Name:<input type="text" id="firstName"/></div>
            <div>Last Name:<input type="text" id="lastName"/></div>
            <div><button id="formButton">Send</button></div>
            <div id="resultArea">
            </div>
        </form>
    </body>
</html>

Processing Page:

<?php
$data = array();
$firstName = filter_input(INPUT_POST, 'firstName', FILTER_SANITIZE_STRING);
$lastName = filter_input(INPUT_POST, 'lastName', FILTER_SANITIZE_STRING);
$data['message'] = 'Thank you, '. strtoupper($firstName) . ' ' . strtoupper($lastName) . ' was processed.';
echo json_encode($data);

PHP CODE EXAMPLE: How to send multiple MySQL commands in one line from PHP

added on Jul 18, 2012