Copy the Punkode folder inside the root folder of your php project
Inside the punkode folder open the file “setup” ad set database credentials
and the URL of the app’s root folder
// default connection mysql
public string $db = "name_database"; // Your database name
public string $host = "host"; // Your database host
public string $user = "name_user"; // Your database username
public string $password = "password"; // Your database password
public static $url_dir_main = 'http://localhost/main_directory/'; //the URL of the app's root folder
In files where you intend to use punkode features
Enable Punkode features
/* ACTIVATE PUNKODE */
use Punkode\TABLE_PK;
require_once 'punkode/setup.php'; //path setup punkode
Connect asynchronous functions
<script src=<?php echo PKURLMAIN.'punkode/assets/js/function-builder.js' ?> ></script>
Add Bootstrap
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
This is what your initial document should look like
<?php
/* ACTIVE PUNKODE */
use Punkode\TABLE_PK;
require_once 'punkode/setup.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src=<?php echo PKURLMAIN.'punkode/assets/js/function-builder.js' ?> ></script>
</body>
</html>