cdsaenz/endpoint.php

## endpoint.php
<?php
/**
 * Dummy Endpoint
 */

$post     = JSONPost();
$quantity = isset($post['quantity']) ? intval($post['quantity']) : 10;
$strings  = generateRandomStrings($quantity);

// Set the content type to JSON
header('Content-Type: application/json');

// Return the response
$response = array(
    'strings'       => $strings,
    'parameters'    => $post
);
echo json_encode($response);

/** eom */

/**
 * Get $_POST as json
 */
function JSONPost() {
    $input = file_get_contents('php://input');
    return json_decode($input, true);
}

/**
 * Generate random strings
 * @param mixed $quantity
 * @return array
 */
function generateRandomStrings($quantity){
    $strings    = [];
    $characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    for ($i = 0; $i < $quantity; $i++) {
        $randomString = '';
        $length = random_int(5, 15); // Random string length between 5 and 15 characters

        for ($j = 0; $j < $length; $j++) {
            $randomString .= $characters[random_int(0, strlen($characters) - 1)];
        }

        $strings[] = $randomString;
    }

    return $strings;
}
?>

## index.php
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ALPINE TEST</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="//unpkg.com/alpinejs" defer></script>
    <style>
        body {
            background-color: #d3d3d387;
        }

        [x-cloak] {
            display: none !important;
        }
    </style>
</head>

<body>
    <div x-cloak x-data="alpineInstance" class="container mt-4">
        <h1>Alpine Prototype</h1>
        <section id="form">
            <form @submit.prevent="remoteFetch">
                <div class="row align-items-center justify-content-center">
                    <div class="col-12 col-xxl-4">
                        <div class="row justify-content-center">
                            <div class="col-4">
                                <input type="number" max="50" class="form-control" x-model="quantity" id="quantity" autofocus="on">
                            </div>
                            <div class="col-auto">
                                <button type="submit" id="submitButton" class="btn btn-primary">
                                    Fetch
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </section>
        <section id="results" x-show="isReady">
            <h2>Random Strings From Endpoint (<span x-text="randomValues.length"></span>)</h2>
            <div id="randomValues" class="card">
                <div class="card-body">
                    <template x-for="value in randomValues">
                        <p x-text="value"></p>
                    </template>
                </div>
            </div>
        </section>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script>
        function alpineInstance() {
            const url = 'endpoint.php';
            return {
                randomValues: [],
                isReady: false,
                quantity: null,
                init() {
                    this.quantity = 10;
                },
                processRemoteData(data) {
                    console.log(data);
                    this.randomValues = data.strings;
                },
                remoteFetch() {
                    // Define the data to be sent in the request body
                    const requestData = {
                        quantity: this.quantity
                    };

                    this.isReady = false;

                    fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify(requestData)
                        })
                        .then(response => response.json())
                        .then(data => {
                            this.isReady = true;
                            this.processRemoteData(data);
                        })
                        .catch(error => {
                            console.error('Error '.error);
                        })
                }
            }
        }
    </script>

</body>

</html>
	<?php
	/**
	* Dummy Endpoint
	*/

	$post = JSONPost();
	$quantity = isset($post['quantity']) ? intval($post['quantity']) : 10;
	$strings = generateRandomStrings($quantity);

	// Set the content type to JSON
	header('Content-Type: application/json');

	// Return the response
	$response = array(
	'strings' => $strings,
	'parameters' => $post
	);
	echo json_encode($response);

	/** eom */

	/**
	* Get $_POST as json
	*/
	function JSONPost() {
	$input = file_get_contents('php://input');
	return json_decode($input, true);
	}

	/**
	* Generate random strings
	* @param mixed $quantity
	* @return array
	*/
	function generateRandomStrings($quantity){
	$strings = [];
	$characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

	for ($i = 0; $i < $quantity; $i++) {
	$randomString = '';
	$length = random_int(5, 15); // Random string length between 5 and 15 characters

	for ($j = 0; $j < $length; $j++) {
	$randomString .= $characters[random_int(0, strlen($characters) - 1)];
	}

	$strings[] = $randomString;
	}

	return $strings;
	}
	?>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ALPINE TEST</title>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
	<script src="//unpkg.com/alpinejs" defer></script>
	<style>
	body {
	background-color: #d3d3d387;
	}

	[x-cloak] {
	display: none !important;
	}
	</style>
	</head>

	<body>
	<div x-cloak x-data="alpineInstance" class="container mt-4">
	<h1>Alpine Prototype</h1>
	<section id="form">
	<form @submit.prevent="remoteFetch">
	<div class="row align-items-center justify-content-center">
	<div class="col-12 col-xxl-4">
	<div class="row justify-content-center">
	<div class="col-4">
	<input type="number" max="50" class="form-control" x-model="quantity" id="quantity" autofocus="on">
	</div>
	<div class="col-auto">
	<button type="submit" id="submitButton" class="btn btn-primary">
	Fetch
	</button>
	</div>
	</div>
	</div>
	</div>
	</form>
	</section>
	<section id="results" x-show="isReady">
	<h2>Random Strings From Endpoint (<span x-text="randomValues.length"></span>)</h2>
	<div id="randomValues" class="card">
	<div class="card-body">
	<template x-for="value in randomValues">
	<p x-text="value"></p>
	</template>
	</div>
	</div>
	</section>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
	<script>
	function alpineInstance() {
	const url = 'endpoint.php';
	return {
	randomValues: [],
	isReady: false,
	quantity: null,
	init() {
	this.quantity = 10;
	},
	processRemoteData(data) {
	console.log(data);
	this.randomValues = data.strings;
	},
	remoteFetch() {
	// Define the data to be sent in the request body
	const requestData = {
	quantity: this.quantity
	};

	this.isReady = false;

	fetch(url, {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify(requestData)
	})
	.then(response => response.json())
	.then(data => {
	this.isReady = true;
	this.processRemoteData(data);
	})
	.catch(error => {
	console.error('Error '.error);
	})
	}
	}
	}
	</script>

	</body>

	</html>