Skip to content

Instantly share code, notes, and snippets.

@hypesystem

hypesystem/api.php

Created March 9, 2015 14:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hypesystem/be00c5d13b55290ac440 to your computer and use it in GitHub Desktop.
Save hypesystem/be00c5d13b55290ac440 to your computer and use it in GitHub Desktop.
Download ZIP
Static, dynamic and browser-rendered pages
Raw
api.php
<?php
header("Content-Type: application/json");
echo json_encode(array(
"name" => "Wilson",
"gender" => "Ball",
"age" => "13"
));
?>
Raw
browser-render.htm
<!DOCTYPE html>
<html>
<head>
<title>Browser-Rendered page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>User profile</h1>
<div class="user-info">
<div>
<b>Name:</b>
<span class="name-field">&mdash;</span>
</div>
<div>
<b>Age:</b>
<span class="age-field">&mdash;</span>
</div>
<div>
<b>Gender:</b>
<span class="gender-field">&mdash;</span>
</div>
</div>
<script>
var nameField = document.querySelector(".name-field");
var ageField = document.querySelector(".age-field");
var genderField = document.querySelector(".gender-field");
var req = new XMLHttpRequest();
req.open("GET", "api.php");
req.onreadystatechange = function() {
var response = JSON.parse(req.responseText);
nameField.innerHTML = response.name ;
ageField.innerHTML = response.age;
genderField.innerHTML = response.gender;
};
req.send();
</script>
</body>
</html>
Raw
dynamic-render.php
<?php
$rootUrl = "http://prog/pagerendering/"; // <--- replace with your local url
$curlRequest = curl_init();
curl_setopt_array($curlRequest, array(
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL => "{$rootUrl}/api.php"
));
$result = json_decode(curl_exec($curlRequest));
?>
<!DOCTYPE html>
<html>
<head>
<title>Dynamically rendered page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>User profile</h1>
<div class="user-info">
<div>
<b>Name:</b>
<span class="name-field"><?php echo $result->name; ?></span>
</div>
<div>
<b>Age:</b>
<span class="age-field"><?php echo $result->age; ?></span>
</div>
<div>
<b>Gender:</b>
<span class="gender-field"><?php echo $result->gender; ?></span>
</div>
</div>
</body>
</html>
Raw
static-render.htm
<!DOCTYPE html>
<html>
<head>
<title>Dynamically rendered page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>User profile</h1>
<div class="user-info">
<div>
<b>Name:</b>
<span class="name-field">Wilson</span>
</div>
<div>
<b>Age:</b>
<span class="age-field">13</span>
</div>
<div>
<b>Gender:</b>
<span class="gender-field">Ball</span>
</div>
</div>
</body>
</html>
Raw
style.css
html {
text-align: center;
}
body {
text-align: left;
display: inline-block;
font-family: sans-serif;
width: 100%;
max-width: 800px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment