View on GitHub

Tutorial Part Two

Adding and displaying some data.

Data and icons

To keep things simple, we will use the world countries data. First, we simply downloaded the flag icons from the wonderful famfamfam library. The nice thing about it is that the icon names match the ISO 3166-1 norm. All icons are placed into the img/flags folder which now contains a bunch of PNGs.

Now we need to provide some data into our database. Using Get Countries, we can generate a nice SQL script to populate our MySQL database:

We end up with a nice create-countries.sql SQL script that we can apply to our database.

Displaying our Data


We added a query and display a checkbox in our form for each country

<!DOCTYPE html>
<html lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MagicSuggest Tutorial</title>
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <div class="container">
        <h1>Hello, world!</h1>
        <form action="subscribe.php" method="post">
            <div class="form-group">
                <label>First name</label>
                <input class="form-control" name="firstname"/>
            <div class="form-group">
                <label>Last name</label>
                <input class="form-control" name="lastname"/>
                $mysql = new mysqli('localhost','root','root','magicsuggest', 8889);
                $result = $mysql->query("select * from countries");
                while($row = $result->fetch_array(MYSQL_ASSOC)) { ?>
                    <div class="checkbox">
                            <input type="checkbox" name="countries[]" value="<?php echo $row['idCountry']?>">
                            <img src="<?php echo 'img/flags/' . strtolower($row['countryCode']) . '.png' ?>" />
                            <?php echo $row['countryName'] .' ' . $row['population'] . ' ' . $row['capital'] . ' ' . $row['continentName']; ?>
            <input type="submit" class="btn btn-success pull-right" value="Submit"/>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="lib/jquery/jquery-1.11.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>


We added the results from the selected countries


$firstname = $_POST['firstname'] || '';
$lastname = $_POST['lastname'] || '';
$countries = isset($_POST['countries']) ? $_POST['countries'] : array();

$data = array('firstname' => $_POST['firstname'], 'lastname' => $_POST['lastname']);

    <p>Hello <?php echo $data['firstname']; ?> <?php echo $data['lastname'] ?>! <br/>
        You have selected: <?php print_r($countries) ?></p>