Straight Tips: PHP\JavaScript - 1 Layout for Several Pages (Basic)

"index.html" contains the layout! (Download All Files)

- Url "Folder-Path/index.html" loads "Home.html"

- Url "Folder-Path/index.html?Page=About.html" loads "About.html"

- Url "Folder-Path/index.html?Page=Contact.html" loads "Contact.html"

- Url "Folder-Path/index.html?Page=DontExist.html" returns "Page does not exist or could not be loaded!"

Everything works great, the only problem is that:

- The website will depend on JavaScript (JavaScript must be enabled!)
- If JavaScript is not enabled, the website warns user that JavaScript must be enabled!

- Deprecated "Synchronous XMLHttpRequest" is in use (Script only continues after server response)

index.html = layout (JavaScript Ajax Get + Url parameters Values)

<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
</head>
<body>

<script>

//If JavaScript from the user Browser is disabled, "JavaScriptWarn" element will not be hidden!
document.write("<style> #JavaScriptWarn {display: none;} </style>");

//Without "g" option, only the First occurrence and its subpatterns will be matched!
//.*, means, find 0 or more characters - ?, means, until next & or end of line ($) is found!
Page = document.URL.match(/\?Page=(.*?)(&|$)/i);

if (Page === null) {Page = "Home.html"} else {Page = Page[1]};  //[1], returns first subpattern only

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {PageMainContent = this.responseText}
else {PageMainContent = "<p>Page does not exist or could not be loaded!</p>"}};
xhttp.open("GET", Page, false); //false = halt code execution (wait for server response)
xhttp.send();

</script>

<h1>Testing 1 Layout for all Pages</h1>

<a style=" margin-right: 30px;" href="index.html">Home</a>
<a style=" margin-right: 30px;" href="index.html?Page=About.html">About</a>
<a style=" margin-right: 30px;" href="index.html?Page=Contact.html">Contact</a>
<a style=" margin-right: 30px;" href="index.html?Page=DontExist.html">Don't Exist Page</a>
<a style=" margin-right: 30px;" href="index.html?Page=About.html&test=xxx&down=no">1</a>
<a style=" margin-right: 30px;" href="index.html?test=xxx&Page=About.html&down=no">2</a>

<script> document.write(PageMainContent); </script>

<!-- The warning bellow only shows up if JavaScript from user Browser is disabled! -->
<p id="JavaScriptWarn">This website requires JavaScript in your Browser to be enabled (Please, enable JavaScript!)!</p>

<footer><strong>Copyright © blah blah blah blah</strong></footer>

</body>
</html>

Home.html

<h3> Home Page  </h3>

<pre>
Home Home Home Home Home Home Home Home Home 
Home Home Home Home Home Home Home Home Home 
Home Home Home Home Home Home Home Home Home 
Home Home Home Home Home Home Home Home Home 
</pre>

About.html

<script> document.title += " - About"; </script>

<h3> About Page </h3>

<pre>
About   About  About  About  About  About  About  
About   About  About  About  About  About  About      
About   About  About  About  About  About  About      
</pre>

Contact.html

<script> document.title += " - Contact"; </script>

<h3> Contact Page </h3>

<pre>
Contact  Contact   Contact  Contact   Contact  Contact   Contact  Contact   
Contact  Contact   Contact  Contact   Contact  Contact   Contact  Contact    
Contact  Contact   Contact  Contact   Contact  Contact   Contact  Contact   
</pre>

________________ Old approach below ________________

(PHP - Notes): Your server or web hosting provider must support PHP scripts in order to work!

layout.html

<!DOCTYPE html>
<html>
<head>
<title>Windows Portable Apps</title>
</head>
<body>

<h1>Start ...!</h1>

<!-- @@@Content1@@@ -->

<!-- @@@Content2@@@ -->

<!-- @@@Content3@@@ -->

<p>End ...!</p>

<!-- @@@Content4@@@ -->

</body>
</html>

index.php (PHP + JavaScript)

<script>

layout = `<?php echo file_get_contents("layout.html"); ?>`;

layout = layout.replace("<title>Windows Portable Apps</title>", "<title>Home - PHP + Javascript</title>");

AddContent = `
<div>This is PHP + Javascript</div>
<div>This is PHP + Javascript 2</div>
<div>This is PHP + Javascript 3</div>
`; 
layout = layout.replace("<!-- @@@Content1@@@ -->", AddContent);

window.onload = function() {
//window.onload forces this function to be called after page load (DOM)

document.write(layout); //Since this line will be executed after page load (DOM), all the document will be re-written

document.close();   //prevents infinite load time (see notes bellow)
//Some browsers take a guess and seem to call document.close() at some later time (IE?)
//others (Firefox, Safari) will keep the document open, which might cause some unusual behaviour.
};

</script>

index.php (PHP only)

<?php

$layout = file_get_contents("layout.html");

$layout = str_replace("<title>Windows Portable Apps</title>","<title>Home</title>",$layout);

$content1 = '
<div>This is Home Page </div>
<div> Home page Content </div>
';
$layout = str_replace("<!-- @@@Content1@@@ -->",$content1,$layout);

echo $layout;

?>

index.html (JavaScript only - Ajax Get)

<script>

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

layout = this.responseText;

layout = layout.replace("<title>Windows Portable Apps</title>", "<title>Home - PHP + Javascript</title>");

AddContent = `
<div>This is PHP + Javascript</div>
<div>This is PHP + Javascript 2</div>
<div>This is PHP + Javascript 3</div>
`; 
layout = layout.replace("<!-- @@@Content1@@@ -->", AddContent);

document.write(layout); //Since this line will be executed after page load (DOM), all the document will be re-written

document.close();   //prevents infinite load time (see notes bellow)
//Some browsers take a guess and seem to call document.close() at some later time (IE?)
//others (Firefox, Safari) will keep the document open, which might cause some unusual behaviour.
    
}};
xhttp.open("GET", "layout.html", true); //true = keep code execution (don't wait for server response)
xhttp.send();

</script>

index.html (JavaScript only - jQuery)

<!-- If you don't have jQuery on your website, load jQuery hosted by Google using the code below -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>

$.get( "layout.html", function( data ) {
//jQuery library (Required)
//Since this is a jQuery Shorthand Method, everything inside will be executed after page load (DOM)

data = data.replace("<title>Windows Portable Apps</title>", "<title>Home - Javascript</title>");

AddContent = `
<div>This is javascript</div>
<div>This is javascript 2</div>
<div>This is javascript 3</div>
`; 
data = data.replace("<!-- @@@Content1@@@ -->", AddContent);

document.write(data);   //Since this line will be executed after page load (DOM), all the document will be re-written

document.close();   //prevents infinite load time (see notes bellow)
//Some browsers take a guess and seem to call document.close() at some later time (IE?)
//others (Firefox, Safari) will keep the document open, which might cause some unusual behaviour.
});

</script>

Keywords:
PHP\JavaScript - 1 Layout for Several Pages (Basic)

Straight Tips

jQuery

elevateZoom (Requires jQuery)

Facebook Messenger (Donation)

Activation Code - Donation (Multiple Options)

Request Web\PHP\JavaScript\HTML Project !

Advertise On This Blog!

ADS - Multi One Password

Ads (Reserved)

Thursday, February 15, 2018

PHP\JavaScript - 1 Layout for Several Pages (Basic)

No comments:

Post a Comment

ADS - Multi Share Calculator