MagicSuggest
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
index.php
We added a query and display a checkbox in our form for each country
<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>
<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>
<div class="form-group">
<label>Last name</label>
<input class="form-control" name="lastname"/>
</div>
<?php
$mysql = new mysqli('localhost','root','root','magicsuggest', 8889);
$result = $mysql->query("select * from countries");
while($row = $result->fetch_array(MYSQL_ASSOC)) { ?>
<div class="checkbox">
<label>
<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']; ?>
</label>
</div>
<?php
}
$result->close();
$mysql->close();
?>
<input type="submit" class="btn btn-success pull-right" value="Submit"/>
</form>
</div>
<!-- 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>
</body>
</html>subscribe.php
We added the results from the selected countries
<?php
$firstname = $_POST['firstname'] || '';
$lastname = $_POST['lastname'] || '';
$countries = isset($_POST['countries']) ? $_POST['countries'] : array();
$data = array('firstname' => $_POST['firstname'], 'lastname' => $_POST['lastname']);
?>
<html>
<head>
<title></title>
</head>
<body>
<p>Hello <?php echo $data['firstname']; ?> <?php echo $data['lastname'] ?>! <br/>
You have selected: <?php print_r($countries) ?></p>
</body>
</html>