CodeTells: May 2015

Wednesday, May 20

Passing Values From JavaScript to PHP and Back

1. PHP to JavaScript

    <?php
        echo "Just wanted to say $hello";
    ?>

2. JavaScript to PHP

    <script>
        function sayHelloWorld() {
            var hello = "hello";
            var world = "world";

            window.location.href = "somepage.php?w1=" + hello + "&w2=" + world;
        }
    </script>

3. PHP Receiving and Processing The Variables

    <?php
    function sayHiBack() {
       // Check if we have parameters w1 and w2 being passed to the script through the URL
       if (isset($_GET["w1"]) && isset($_GET["w2"])) {

          // Put the two words together with a space in the middle to form "hello world"
          $hello = $_GET["w1"] . " " . $_GET["w2"];

          // Print out some JavaScript with $hello stuck in there which will put "hello world" into the javascript.
          echo "<script language='text/javascript'>function sayHiFromPHP() { alert('Just wanted to say $hello!'); }</script>";
       }
    }
    ?>

Post Multiple JavaScript Values to PHP Using jQuery AJAX

Step 1. To Package Up data for Sending

    <script>
        // Create an object using an object literal.
        var ourObj = {};

        // Create a string member called "data" and give it a string.
        // Also create an array of simple object literals for our object.
        ourObj.data = "Some Data Points";
        ourObj.arPoints = [{'x':1, 'y': 2},{'x': 2.3, 'y': 3.3},{'x': -1, 'y': -4}];

    </script>

Step 2: Transmitting This Data in jQuery AJAX

    <script>
        $.ajax({
           url: 'process-data.php',
           type: 'post',
           data: {"points" : JSON.stringify(ourObj)},
           success: function(data) {
                // Do something with data that came back.
           }
        });
    </script>

Step 3: Package Sent, Package Received

    <?php
    // Test if our data came through
    if (isset($_POST["points"])) {
        // Decode our JSON into PHP objects we can use
        $points = json_decode($_POST["points"]);

        // Access our object's data and array values.
        echo "Data is: " . $points->data . "<br>";
        echo "Point 1: " . $points->arPoints[0]->x . ", " . $points->arPoints[0]->y;
    }
    ?>

Monday, May 11

Multiple File Extensions validate using PHP.

<?php
    $valid_file_extensions = array(".jpg", ".jpeg", ".gif", ".png");

    $file_extension = strrchr($_FILES["file"]["name"], ".");

    // Check that the uploaded file is actually an image
    // and move it to the right folder if is.
    if (in_array($file_extension, $valid_file_extensions)) {
        $destination = "uploads/" . $_FILES["file"]["name"];
        move_uploaded_file($_FILES["file"]["tmp_name"], $destination);
    }
?>

Saturday, May 9

Tabbed Navigation with CSS

Navigation on web pages is a form of list, and tabbed navigation is like a horizontal list. It's fairly easy to create horizontal tabbed navigation with CSS, but CSS 3 gives us a few more tools to make them look even nicer.

This code tutorial will take you through the HTML and CSS needed to create a CSS tabbed menu.

<!DOCTYPE html>
<html>
<head>
<style>
    .tablist {
      list-style:none;
      height:2em;
      padding:0;
      margin:0;
      border: none;
    }
    .tablist li {
      float:left;
      margin-right:0.13em;
    }
    .tablist li a {
      display:block;
      padding:0 1em;
      text-decoration:none;
      border:0.06em solid #000;
      border-bottom:0;
      font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
      color:#000;
      background-color:#ccc;

      /* CSS 3 elements */
      webkit-border-top-right-radius:0.50em;
      -webkit-border-top-left-radius:0.50em;
      -moz-border-radius-topright:0.50em;
      -moz-border-radius-topleft:0.50em;
      border-top-right-radius:0.50em;
      border-top-left-radius:0.50em;
    }

    .tablist li a:hover {
      background:#3cf;
      color:#fff;
      text-decoration:none;
    }
    .tablist li#current a {
      background-color: #777;
      color: #fff;
    }
    .tablist li#current a:hover {
      background: #39C;
    }
</style>
</head>
<body>
    <nav>
      <ul class="tablist">
        <li><a href="#">CSS 3</a></li>
        <li id="current"><a href="#">Tabs</a></li>
        <li><a href="#">For</a></li>
        <li><a href="#">Menus</a></li>
      </ul>
    </nav>
</body>
</html>