ckportfolio.com - Setup for API-driven Mashup Application

Setup for API-driven Mashup Application

Objective

As part of this exercise, we set out to build a simple mashup application that allows the users to:

Instructions for individual API endpoints continue to vary according to security requirements and inherent functions, and it is important to spend some time to research and read the provided documentation prior to work.

Page Setup

We can move onto setting up a page that features three modules using the same approach as the previous tutorial:

index.php

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>
    <body>

        <div class="container">
            <div class="row">

                <div class="col-8 offset-2 my-5">

                    <h1>Flickr-Twilio Demo</h1>

                    <? include "search.php" ?>
                    <? include "gallery.php" ?>
                    <? include "share.php" ?>

                </div>

            </div>
        </div>

    </body>
</html>

Note that we are making a single-column layout, although this column only spans three quarters of the horizontal space (col-8) and is centered to the page.

Each of the three embedded modules is inspired by the above objective:

  • search.php: input field for image search
  • gallery.php: section for displaying retrieved images
  • share.php: input field for submitting recipient phone number

Later, we will also create a server-side script send.php which is responsible for sending the text message to the recipient.

Form Field Elements

HTML offers a series of interactive form field elements that allows the visitor to send information to the web server and retrieve the desired data. Among such elements, <input> and <button> are two of the most common form field elements used in search engines, newsletter sign up forms, and many others.

Inspired by one of the examples offered by Bootstrap, we can build a "combo" where the two elements are placed next to each other:

search.php

<div class="input-group mb-3">
    <input name="search" type="text" class="form-control" placeholder="Enter keyword">
    <div class="input-group-append">
        <button class="btn btn-primary" type="submit">Search</button>
    </div>
</div>

Note that we have given a literal "name" to <input>, as its user-provided value will need to be accessible using PHP upon form submission. In addition, <button> receives a "submit" type, indicating that clicking on the button will trigger form submission.

Finally, we need to wrap these form field elements with the parent <form> element, which defines the page behaviour when the user fills in the box and clicks "Search":

search.php

<form action="index.php" method="GET">

    ...

</form>

Upon submission, we can expect the form to push our search keyword back to the current page (index.php) using GET method: meaning that the keyword is displayed directly in the website URL.

As predicted, the URL now features a new parameter at the end: ?search=, followed by the submitted keyword. This parameter is accessible using PHP, using a global array variable named $_GET:

index.php

...
    <? $s = $_GET["search"]; ?>
    <h1>Flickr-Twilio Demo <small><?= $s ?></small></h1>
...

search.php

...
    <input name="search" type="text" class="form-control" placeholder="Enter keyword" value="<?= $s ?>">
...

By defining the new variable $s based on the reference to $_GET["search"], we can display in different parts of the page as required. This variable will be especially important when requesting the images from Flickr.

Fin