This post is the continuation of the Model and API creation, so be sure to check out part 1 of this series first!
Part 2 of the series will be focused on creating a very simple web app that asks for Iris’s petal and sepal width and length. It will then make a call to the Iris Classification Model API to classify the type of Iris flower based on the given user data. The web app will be created in PHP and HTML, where it will be hosted in a local server.
Coding the Web App 🖥️
The web app contains four input fields to accept user data. Once the user clicks submit, it will call the API and return the predicted classification in JSON format.
To do that, we create a file called iris-app.php and enter the following PHP and HTML codes inside:
<?php $form = “ <!DOCTYPE html> <html> <body> <h1>Iris Classification</h1> <form action=’iris-app.php’ method=’GET’> <p>Enter Sepal Length</p> <input type=’text’ name=’slength’/> <br/> <p>Enter Sepal Width</p> <input type=’text’ name=’swidth’/> <br/> <p>Enter Petal Length</p> <input type=’text’ name=’plength’/> <br/> <p>Enter Petal Width</p> <input type=’text’ name=’pwidth’/> <br/> <input type=’submit’ name=’Submit’/> <input type=’hidden’ name=’submitted’ value=’true’/> </form> </body> </html>”; echo $form;
Note the extra input tag below Submit. It will be used to notify the program that the form has been submitted.
It should look like this:
When the user clicks submit, it will redirect back to the same file as this is where we will be doing the API request. We then have to enclose the form in an if-else statement so that the request will only happen if the user clicks submit. If not, then the form will just keep showing itself.
The code will then be:
<?php
if(isset($_GET[‘submitted’])){
//API Request Goes Here
}
else{
$form = “
<!DOCTYPE html>
<html>
<body>
<h1>Iris Classification</h1>
<form action=’home.php’ method=’GET’>
<p>Enter Sepal Length</p>
<input type=’text’ name=’slength’/>
<br/>
<p>Enter Sepal Width</p>
<input type=’text’ name=’swidth’/>
<br/>
<p>Enter Petal Length</p>
<input type=’text’ name=’plength’/>
<br/>
<p>Enter Petal Width</p>
<input type=’text’ name=’pwidth’/>
<br/>
<input type=’submit’ name=’Submit’/>
<input type=’hidden’ name=’submitted’ value=’true’/>
</form>
</body>
</html>”;
echo $form;
}
The cURL library can be used to make HTTP requests in PHP. We use curl_init() to initialize a cURL session first, then only make the API request using curl_setopt() where it takes three parameters:
- cURL_handler — returned when you initialized cURL using `curl_init()`
- Option — the constant value for the setting to be changed. For this program, we use `CURLOPT_URL` as we want to pass a URL as the value in the third parameter
- Value — the value to be used for the setting. In this case, we make a call to the API along with the user’s input as the query.
Once this is set, we send out the request using `curl_exec()` and finally close the cURL session using `curl_close`.
Full code is written below:
$swidth = $_GET[‘swidth’];
$slength = $_GET[‘slength’];
$pwidth = $_GET[‘pwidth’];
$plength = $_GET[‘plength’];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, “https://iris-classification-model.herokuapp.com/classify?swidth=".$swidth."&slength=".$slength."&pwidth=".$pwidth."&plength=".$plength);
$result = curl_exec($ch);
curl_close($ch);
And we’re done! If we run the program with these values:
We get the Iris classification as:
Hurrah! Now we have our Model API and interface 🎉!
Notes & Codes 