Web Developer - Code and Info

JQUERY CODE EXAMPLE: Site with Non-Scrollable Scoreboard as Header

added on Oct 29, 2013

JQUERY CODE EXAMPLE: Basic code for flashcards using jquery widgets

added on Sep 8, 2013

REDBEAN CODE EXAMPLE: Basic code for SQLite access with Redbean

added on Sep 5, 2013

Basic code for SQLite access with Redbean

Uncomment out the following lines to see how you can read and write to an SQLite database.

//test_createBean();
//echo test_getSingleBean();
//echo test_getCountRecords();
//echo test_getMultipleBeansByIdList();
//test_executeQuery();
//echo test_getMultipleRecords();
//echo test_getMultipleRecordsWithParameterBindings();
//echo test_getSingleRecord();
//echo test_getSingleColumn();
//test_setColumnWithVariables();
test_createMultipleBeans();

R..close();

function test_createBean() {
    $comparisonBean = R.dispense('comparisons');
    $comparisonBean->categories = 'member,backbone';
    $comparisonBean->whenCreated = '2013-05-31 04:30:06';
    $comparisonBean->score = 23;
    $comparisonBean->body = "Ember's sweet spot is applications where the user will keep the application open for long periods of time, perhaps all day, and interactions with the application's views or underlying data trigger deep changes in the view hierarchy. Ember is larger than Backbone, but thanks to Expires, Cache-Control this only matters on the the first load. After two days of daily use that extra 30k will be overshadowed by data transfers, sooner if your content involves images. Backbone apps focus more on brief or casual interactions, that are often just small sections of a larger static page: airbnb, Khan Academy, Foursquare's map and lists.";
    R@@DOUBLE_SEMICOLONstore($comparisonBean);
}

function test_getSingleBean() {
    $comparisonBean = R@@DOUBLE_SEMICOLONload('comparisons', 1);
    echo $comparisonBean->body;
}

function test_getCountRecords() {
    $r = '';
    $r .= R@@DOUBLE_SEMICOLONcount('comparisons');
    return $r;
}

function test_getMultipleBeansByIdList() {
    $r = '';
    $comparisons = R@@DOUBLE_SEMICOLONbatch('comparisons', [1, 2]);
    if (count($comparisons) > 0) {
        $r .= '<ul>';
        foreach ($comparisons as $comparison) {
            $r .= '<li>' . $comparison->body . '</li>';
        }
        $r .= '</ul>';
    }
    return $r;
}

function test_executeQuery() {
    R@@DOUBLE_SEMICOLONexec('UPDATE comparisons SET categories="changed" WHERE id=2');
}

function test_getMultipleRecords() {
    $r = '';
    //$comparisonRecords = R@@DOUBLE_SEMICOLONgetAll('SELECT * FROM comparisons WHERE id>2');
    $comparisonRecords = R@@DOUBLE_SEMICOLONgetAll('SELECT * FROM comparisons WHERE body LIKE "%javascript%"');
    if (count($comparisonRecords) > 0) {
        foreach ($comparisonRecords as $comparisonRecord) {
            $r .= '<li><b>'. $comparisonRecord['id'] . '</b>: '. $comparisonRecord['body'] . '</li>';
        }
    }
    return $r;
}

function test_getMultipleRecordsWithParameterBindings() {
    $r = '';
    $searchText = 'also';
    $comparisonRecords = R@@DOUBLE_SEMICOLONgetAll('SELECT * FROM comparisons WHERE body LIKE :body', [':body'=>'%'.$searchText.'%']);
    if (count($comparisonRecords) > 0) {
        foreach ($comparisonRecords as $comparisonRecord) {
            $r .= '<li><b>'. $comparisonRecord['id'] . '</b>: '. $comparisonRecord['body'] . '</li>';
        }
    }
    return $r;
}

function test_getSingleRecord() {
    $r = '';
    $comparisonRecord = R@@DOUBLE_SEMICOLONgetRow('SELECT * FROM comparisons WHERE id=6');
    $r .= '<b>'. $comparisonRecord['id'] . '</b>: '. $comparisonRecord['body'];
    return $r;
}

function test_getSingleColumn() {
    $r = '';
    $ids = R@@DOUBLE_SEMICOLONgetCol('SELECT id FROM comparisons WHERE id > 3');
    $r .= join($ids,',');
    return $r;
}

function test_setColumnWithVariables() {
    $id = 2;
    $fieldName = 'body';
    $fieldValue = 'the body was changed for record with id='.$id;
    $comparisonBean = R@@DOUBLE_SEMICOLONload('comparisons', $id);
    $comparisonBean->setAttr($fieldName, $fieldValue);
    $idAffected = R@@DOUBLE_SEMICOLONstore($comparisonBean);
    echo 'record with id '.$idAffected. ' changed';
}

function test_createMultipleBeans() {

    $comparisonBeans = R@@DOUBLE_SEMICOLONdispense('comparisons',2);
    if (count($comparisonBeans) > 0) {
        foreach ($comparisonBeans as $comparisonBean) {
            $comparisonBean->setAttr('categories', 'newone');
        }
    }
    R@@DOUBLE_SEMICOLONstoreAll($comparisonBeans);
    echo 'created';
}

JQUERY CODE EXAMPLE: Site with JQuery Page Switching and URL Rewriting

added on Jun 14, 2013

Site with JQuery Page Switching and URL Rewriting

This site contains everything you need to create a menu and "page area" with links which switch the page and also update the URL and page title.

index.php

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/jquery.history.js"></script>
        <script src="js/jquery.getUrlParam.js"></script>
        <script src="js/site.js"></script>
        <link href="css/main.css" rel="stylesheet"/>
        <script>
            var CONFIG = {
                pageIdCodes: [
                    'pageNews',
                    'pageEvents',
                    'pageInfo',
                    'pageCourses',
                    'pageHelp'],
                pageTitles: [
                    'News',
                    'Events',
                    'Info',
                    'Courses',
                    'Help'
                ],
                defaultPageIdCode: 'pageEvents'
            };

            $(document).ready(function() {
                SITE.initialize();
            });

            function displayText(text) {
                text = text === undefined ? 'defaultValue' : text;
                console.log(text);
            }
        </script>
    </head>
    <body>
        <ul id="nav">
        </ul>
        <div id="pageNews" class="pageArea">
            <p>This is the news page which will have lots of news. This is the news page which will have lots of news. This is the news page which will have lots of news.</p>
            <ul>
                <li>one</li>
                <li>two</li>
                <li>three</li>
            </ul>
            <p>And more text.</p>
        </div>
        <div id="pageEvents" class="pageArea">
            <p>This is the news page about all the events.</p>
            <ul>
                <li>Event #1</li>
                <li>Event #2</li>
                <li>Event #3</li>
            </ul>
            And here is a <a href="?page=pageNews">link to the news page</a>, which shows you that you can have both kinds of links: javascript and browser reload.
        </div>
        <div id="pageInfo" class="pageArea">This is the info page.</div>
        <div id="pageCourses" class="pageArea">
            <p>This is a page with all the list of courses on it.</p>
        </div>
        <div id="pageHelp" class="pageArea">This is the help page with lots of help.</div>

    </body>
</html>

site.js

PHP CODE EXAMPLE: How to roll your own PHP routing

added on Jun 12, 2013

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

SQL CODE EXAMPLE: How to find doubles in SQL

added on Jul 7, 2012

show all items (58 more)