How to Build Simple Web App Using CockroachDB and PHP Part 2

Introduction

This is part two of the series “How to Create Web App Using PHP and CockroachDB.” Part One of the series demonstrated how to set up the database and the project structure. This second part of the tutorial will explain how to set up the web pages for the project to be able to handle the navigation process of the web app. Part One of this tutorial must be completed before proceeding with this section of the tutorial.

Prerequisites

  • Be sure to read and executed the examples shown in the Part One of this series on how to set up the database and the project structure.

How to Set Up the Web-App Functions

This section will discuss how to set up web pages so the system will be able to locate the correct URL and file path to function properly.

How to set up the page assets reusability via file path

Open the initialize.php file then use the following code to aid the web app in the navigation process :

// __FILE__ will return the current path to the file  
// once initialize.php is called it will give instruction to find  
// the private files directory, this is equivalent with the private  
// directory that we have set in PART 1.  
define("PRIVATE_PATH", dirname(__FILE__));  
// The project path is one directory above, it tells  
// php to go back one directory then it will give us  
// crdb_php directory  
define("PROJECT_PATH", dirname(PRIVATE_PATH));  
// the public directory is simply the PROJECT_PATH + /public  
define("PUBLIC_PATH", PROJECT_PATH . '/public');  
// the shared directory is simply the PROJECT_PATH + /shared  
define("SHARED_PATH", PRIVATE_PATH . '/shared');

The above code will aid PHP in finding the necessary files and directories.

How to set up a page using a URL path

// This will setup and find everything in URL up to  
// "/public" dynamically  
$public_end = strpos($_SERVER['SCRIPT_NAME'], '/public') + 7;  
$doc_root = substr($_SERVER['SCRIPT_NAME'], 0, $public_end);  
define("WWW_ROOT", $doc_root);

This command will cause the system to search for the word /public in the URL and will discover any documents located therein.

NOTE: It is important to set the “WWW_ROOT” to an absolute value that can be used in the web pages.

To expand on this, put this part of the code into a function that can be called up whenever needed. To execute this function, open up the “functions.php” file that was created in Part One of this tutorial. Type in the following code:

function the_url($script_path){  
// This function will handle the url that will be passed in  
// and it will check if there is a forward slash (/) or not  
// add the leading '/' if it is not there  
// finally appends to the WWW_ROOT and returns the value  
if($script_path[0] != '/'){  
$script_path = "/" . $script_path;  
}  
return WWW_ROOT . $script_path;  
}

The above code will calculate the value, but it still must be echoed to work.

How to encode URL parameters

This section will explain how to handle data that will be included in the URL parameters as used from one page to another that may potentially include special characters that require attention for security-related issues.

URL encoding converts the following special characters so the characters will not interfere with the URL:

Table1

![|]@!#$%&
%21%5B%5D%40%21%23%24%25%26

Table2

()*+/:?=;
%27%28%29%2A%2B%2F%3A%3F%3D%3B

Table1 and Table2, above, shows the special characters with their equivalent characters.

To employ this function, open up the functions.php and add the following codes:

// This function will simply accepts the string parameter and  
// return the urlencoded value of the string  
function u($string="){  
return urlencode($string);  
}

How to encode HTML

The previous section demonstrated how to encode URLs. This section will explain how to encode HTML. Normally, static website don’t require this level of encoding as the programmer has total control over what is written. However, this is not the case for dynamic pages that deal with dynamic data from the user, the database and other resources.

&
\”&

The above table displays the special characters in HTML. Care must be taken on the way these characters are treated, especially when dealing with dynamic data as entering these characters incorrectly can interfere with the intended purpose of the data being processed.

Using PHP function htmlspecialchars($string) will avoid this issue as it converts the HTML special characters into their harmless HTML entity equivalent.

This process will also address security concerns, like “cross-site scripting”.

Use this function, as shown below, to specifically handle dynamic data:

echo htmlspecialchars($id);

However, as this command is used very frequently, it would become very laborious to have to continually enter the data manually. Instead, create a function for this task as follows:

Open the functions.php and add the following code:

function h($string="){  
return htmlspecialchars($string);  
}

The PHP Code

The following section will show examples of the PHP files with the corresponding code as explained in the above sections of this tutorial.

How to set the initialize.php

The following code will set up the path and URL location and will load both accordingly whenever the data is called within a PHP file:

define("PRIVATE_PATH", dirname(__FILE__));  
define("PROJECT_PATH", dirname(PRIVATE_PATH));  
define("PUBLIC_PATH", PROJECT_PATH . '/public');  
define("SHARED_PATH", PRIVATE_PATH . '/shared');  
$public_end = strpos($_SERVER['SCRIPT_NAME'], '/public') + 7;  
$doc_root = substr($_SERVER['SCRIPT_NAME'], 0, $public_end);  
define("WWW_ROOT", $doc_root);

The functions.php

A normal footer file

function the_url($script_path){  
if($script_path[0] != '/'){  
$script_path = "/" . $script_path;  
}  
return WWW_ROOT . $script_path;  
}  
function u($string="){  
return urlencode($string);  
}  
function h($string="
){  
return htmlspecialchars($string);  
}

The staff_header.php

A normal header file.

<?php
if(!isset($page_title)){ $page_title = 'Staff Area';}

?>

 <!DOCTYPE html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Team Solo — <?php echo  h($page_title); ?></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>
<div class="container-fluid">

<body>

<header>

<h2>Admin Area</h2>
</header>
<nav class="nav nav-pills nav-justified">
<a class="nav-item nav-link active" href="<?php echo the_url('/staff/index.php'); ?>">Menu</a>

</nav>

Conclusion

Part Two of this tutorial, How to Create Web App Using PHP and CockroachDB demonstrated how to define an absolute point for all the URLs in the simple web app and created a function that will ensure users have the correct URL, even if it is nested several layers deep. Part Two of this tutorial also discussed how to encode a URL and HTML to convert special characters into their benign equivalents. Part Three of this tutorial will demonstrated precisely how this functions works.

Pilot the ObjectRocket platform free for 30 Days

It's easy to get started. Imagine the time you'll save by not worrying about database management. Let's do this!

PILOT FREE FOR 30 DAYS

Keep in the know!

Subscribe to our emails and we’ll let you know what’s going on at ObjectRocket. We hate spam and make it easy to unsubscribe.