How to create a PHP page for a multi-languge site with Nicepage for HTML

v.piasta
31 Posts
v.piasta posted this 29 August 2022
Ask a Question

The Nicepage WYSIWYG editor offers the insertion of a block of PHP code in a page, but unfortunately, this works directly only for exportation to Joomla and WordPress. There is no native way to create working normal HTML pages with PHP code.
There are several reasons why this does not work.
One is that the double quotes in the code are all translated into their HTML code which makes the PHP parser throw an error immediately when the server processes the page. Another is that the page will not show any output if it is run with the HTML extension. The most obvious solution is to create a separate PHP page and use links to it from other Nicepage pages, but this does not allow you to take advantage of many features that Nicepage offers, like the uniform headers and footer throughout the entire website, the ease to create multilanguage sites, and others.
I will describe here how I integrated a PHP page into the system with the same feeling and look as the other pages.
I will admit that, although not new to programming, I am a newbie to Nicepage and PHP, and have nearly no knowledge of Java. and I am not super efficient in HTML either, as I don't have a good memory anymore and often need to look up commands, tags, and examples for the tasks that I want to accomplish. So bear with me if my methods may not be the most elegant in your eyes, There is always room for improvement and I will be happy to listen to advice. Meanwhile, this method overcomes a dire need for using PHP in Nicepage at a reasonable cost in work time.

A short description of my project to understand the background.
As the owner of a small apartment hotel in Panama, I am creating a multilanguage website in 5 languages in Nicepage, after having created another one with another system that has some advantages, but more disadvantages.
The main tasks of the website are presenting our apartments to future guests, allowing them to know whether there is an apartment available, telling them how much it costs, and letting them book it.
While we can, and do, use OTAs (online travel agencies) and a channel manager to show the availability and let them book an apartment. I was not satisfied with the price calculation. We offer continuously increasing discounts for longer stays, and none of the OTAs can handle this pricing system. Our channel manager can do such a calculation but fails when different seasonal rates have to be considered.

So, I needed a webpage that calculates the correct price for our algorithm. Creating it in PHP was not a big deal, but when I tried to give it the look of my website with its header and footer, I failed. Unless you use the very same code and CSS of the original pages, it is a major PITA to achieve the same look, not even talking about functionality. So, of course, the PHP block was my savior ... or so I hoped. But unfortunately, it does not work if you export a PHP page to HTML. After a couple of days of research, trial, and error, I have found the solution, though. Here is how it goes.

  • Create a Nicepage page with an empty PHP block (let's say the name is "NewForm")
  • Insert your PHP code.
  • Export to HTML. (You cannot test this page in the preview)
  • Rename the exported file "newform.html" to "newform.php". The file will not work with the HTML extension
  • Edit the PHP code, replacing all occurrences of "& quote;" with a double quote character. With an editor like Atom, this takes just a few seconds. PHP will not work if you don't replace the symbol. (I had to add a space here because this editor would otherwise replace the code with a blank)
  • Check the code if there are cases of quoted elements within quoted elements and replace one set of double quotes with single quote characters.
  • Upload the PHP file to the root directory of your website server and tweak the code, as some elements may not show as planned, due to the Nicepage CSS. I used the ATOM editor and the Chrome development tools, which are excellent for this.
  • For multilanguage sites, Nicepage copies the file in the base language to the root, creates language subdirectories and automatically copies your files for other languages there with the extension .html. These files are slightly different for each language because of the different headers, If you add this page to your menu, the link will automatically have the extension .html and point to the various directories where Nicepages deploys your file each time you export it. So, you will need to take care that the menu points to the PHP files instead.

If you need to tweak your PHP code, there are several methods to make sure it works in all languages.
To avoid repeating the same procedure for every little change, you would do this directly in the exported HTML file in the root and test it there, by simply uploading the changed file and watching the effect in the browser, which can be done in mere seconds.

If you have only one language, you are done. Otherwise, extract the PHP part and copy it into the code for the other languages. Unless you use PHP also to adapt the header code automatically to the different languages, just copying the entire file from the root to the subdirectory does not do the job because the header code is slightly different for each language due to the language selector.

If you need to change the header or footer later on, these files will of course not reflect the changes unless you repeat the entire procedure with the optimized PHP code, or you just copy the changed header and footer code, taken from any of your other pages, into your exported files. Remember that for multilanguage sites, the header is different for each language.

Hopefully, the company will introduce the necessary changes someday soon to avoid this additional procedure. IMO, this should not be difficult, and this description could work as a guide.

These are the basic steps. As I have limited time right now, I will edit this post later and add more details, especially about how to handle multilanguage sites. Feel free to post comments or questions which I may consider when completing this post.

The Nicepage WYSIWYG editor offers the insertion of a block of PHP code in a page, but unfortunately, this works directly only for exportation to Joomla and WordPress. There is no native way to create working normal HTML pages with PHP code. There are several reasons why this does not work. One is that the double quotes in the code are all translated into their HTML code which makes the PHP parser throw an error immediately when the server processes the page. Another is that the page will not show any output if it is run with the HTML extension. The most obvious solution is to create a separate PHP page and use links to it from other Nicepage pages, but this does not allow you to take advantage of many features that Nicepage offers, like the uniform headers and footer throughout the entire website, the ease to create multilanguage sites, and others. I will describe here how I integrated a PHP page into the system with the same feeling and look as the other pages. I will admit that, although not new to programming, I am a newbie to Nicepage and PHP, and have nearly no knowledge of Java. and I am not super efficient in HTML either, as I don't have a good memory anymore and often need to look up commands, tags, and examples for the tasks that I want to accomplish. So bear with me if my methods may not be the most elegant in your eyes, There is always room for improvement and I will be happy to listen to advice. Meanwhile, this method overcomes a dire need for using PHP in Nicepage at a reasonable cost in work time. A short description of my project to understand the background. As the owner of a small apartment hotel in Panama, I am creating a multilanguage website in 5 languages in Nicepage, after having created another one with another system that has some advantages, but more disadvantages. The main tasks of the website are presenting our apartments to future guests, allowing them to know whether there is an apartment available, telling them how much it costs, and letting them book it. While we can, and do, use OTAs (online travel agencies) and a channel manager to show the availability and let them book an apartment. I was not satisfied with the price calculation. We offer continuously increasing discounts for longer stays, and none of the OTAs can handle this pricing system. Our channel manager can do such a calculation but fails when different seasonal rates have to be considered. So, I needed a webpage that calculates the correct price for our algorithm. Creating it in PHP was not a big deal, but when I tried to give it the look of my website with its header and footer, I failed. Unless you use the very same code and CSS of the original pages, it is a major PITA to achieve the same look, not even talking about functionality. So, of course, the PHP block was my savior ... or so I hoped. But unfortunately, it does not work if you export a PHP page to HTML. After a couple of days of research, trial, and error, I have found the solution, though. Here is how it goes. - Create a Nicepage page with an empty PHP block (let's say the name is "NewForm") - Insert your PHP code. - Export to HTML. (You cannot test this page in the preview) - Rename the exported file "newform.html" to "newform.php". The file will not work with the HTML extension - Edit the PHP code, replacing all occurrences of "& quote;" with a double quote character. With an editor like Atom, this takes just a few seconds. PHP will not work if you don't replace the symbol. (I had to add a space here because this editor would otherwise replace the code with a blank) - Check the code if there are cases of quoted elements within quoted elements and replace one set of double quotes with single quote characters. - Upload the PHP file to the root directory of your website server and tweak the code, as some elements may not show as planned, due to the Nicepage CSS. I used the ATOM editor and the Chrome development tools, which are excellent for this. - For multilanguage sites, Nicepage copies the file in the base language to the root, creates language subdirectories and automatically copies your files for other languages there with the extension .html. These files are slightly different for each language because of the different headers, If you add this page to your menu, the link will automatically have the extension .html and point to the various directories where Nicepages deploys your file each time you export it. So, you will need to take care that the menu points to the PHP files instead. If you need to tweak your PHP code, there are several methods to make sure it works in all languages. To avoid repeating the same procedure for every little change, you would do this directly in the exported HTML file in the root and test it there, by simply uploading the changed file and watching the effect in the browser, which can be done in mere seconds. If you have only one language, you are done. Otherwise, extract the PHP part and copy it into the code for the other languages. Unless you use PHP also to adapt the header code automatically to the different languages, just copying the entire file from the root to the subdirectory does not do the job because the header code is slightly different for each language due to the language selector. If you need to change the header or footer later on, these files will of course not reflect the changes unless you repeat the entire procedure with the optimized PHP code, or you just copy the changed header and footer code, taken from any of your other pages, into your exported files. Remember that for multilanguage sites, the header is different for each language. Hopefully, the company will introduce the necessary changes someday soon to avoid this additional procedure. IMO, this should not be difficult, and this description could work as a guide. These are the basic steps. As I have limited time right now, I will edit this post later and add more details, especially about how to handle multilanguage sites. Feel free to post comments or questions which I may consider when completing this post.

Last edited 29 August 2022 by v.piasta

Vote to pay developers attention to this features or issue.
2 Replies
Order By: Standard | Newest
Support Team
Support Team posted this 29 August 2022

Hi,

Thanks for sharing your experience with the Nicepage community. I hope that your guide would help other users.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, Thanks for sharing your experience with the Nicepage community. I hope that your guide would help other users. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
v.piasta
31 Posts
v.piasta posted this 29 August 2022

PHP methods description continuing.

As mentioned before, once the PHP code runs to your satisfaction, you can deploy it to the other subdirectories if you have a multilanguage site.
In my case, the script uses price data that may change over time, so they need to be stored in a central place that is easily accessible from the different language subdirectories on the server. One could use a database, but I found it easier to just export the Excel sheet where I have stored these data and use them for the offline calculation of our rates with Excel VBA, to a txt file which I upload to the server without having to learn how to install and use a database on the server. This means that the path to access them from the root and the subdirectories will be different and that my PHP code will have to know if it is stored in the root or in a subdirectory. This can be done quite easily in PHP, and this information can also be used to output your response in different languages.
I am using substr(getcwd(),-3) to get the last 3 letters of the directory name where the code is stored. In case it is in the root directory, the result will either be "com" or "net" or something similar, depending on your website. If the file is in a language subdirectory, the result will be "/en", "/es", "/fr" or any of the other language identifiers.
I will later talk in more detail about another way to have the code work for different languages while having ONLY ONE copy in the root directory and addressing it with query information in the URL to identify the language that should be used, like https://mysite.com?lang=fr. This requires adding some PHP code in the Nicepage header code to make the language menu work correctly.
If you adopt this method, the language information can be taken from the query string in the URL with the GET method.as follows: $get_lang = htmlspecialchars($_GET). The htmlspecialchars function is necessary to avoid the injection of potentially malicious code in the URL. In my example above, the function would return "fr" for French. So this is the code snippet that I use right after the "body" tag, before the start of the "header" section, which combines both methods.
Our base language is Spanish, so Nicepage stores the Spanish version in the root directory, which ends with .com, so without a query string in the URL, the default language in the root directory is "es", but language information in the URL overrides this.

  <?php     //get the current directory and/or the language paramenter in the URL
 $dir =  substr(getcwd(),-3) ; // get directory e.g. "/homepages/.../htdocs/aparthotel-boquete.com/en"
if ($dir == "com") {     // root ends with .com ==> now "", otherwise "/en/" "/es/" ....
  $dir = "";
  $lang = "es";
} else {
  $lang = substr($dir,1,2);
}


$get_lang = htmlspecialchars($_GET['lang']) ;   // URL?lang=xx overrides directory setting
if ($get_lang != "")       // no lang declaration like"?lang=en"?
{
  $lang = $get_lang;
}
switch ($lang) {
  case "es";    //root directory (spanish)
    $language = "Español";
    break;
  case "en" ;
    $language = "English";
    break;
  case "de";
    $language = "Deutsch";
    break;
  case "fr";
    $language = "Français";
    break;
  case "it";
    $language = "Italiano";
    break;
  default:
    die ("Invalid language information");
}

?>
Now that I have the language and directory information, I can modify the language-specific elements in the Nicepage header code that are different for each language. Nicepage creates different headers for each language to reflect that the language selector shows a different language.
For Nicepage pages in HTML, there are also many other differences between the different languages, so a system with different copies in different directories is necessary.
But for PHP files, only the header is different, and thus it is quite easy to have only one file for all languages, where the language-specific parts can be modified automatically with PHP snippets like these:

<img src="../images/languageiconwhiteonblue<?php echo $lang; ?>.png" title = "<?php echo $language; ?>" alt="<?php echo $language; ?>">

Besides modifying the header code appropriately with the language information, you can also modify the language output for the entire page using the "switch" tag to create translations into different languages as shown above. Here are some examples:

              <h2 padding="0px 0px 30px 0px" color = "black" align = "center"><?php echo $h2 . "<p></p>"; ?>  </h2 >

        <form method="post" action='<?php echo htmlspecialchars($_SERVER["PHP_SELF"]) . "?lang=" . $lang;?>'>
             <div align= "center">
                <div>
                      <label > <?php echo $pax1; ?> <input type="radio" id = "pax1" name="pax" value ="1" style=" margin-right:30px " required></label>
                      <label > <?php echo $pax2; ?> <input type="radio" id = "pax2" name="pax" value="2" required></label>
              </div>
                <p></p>
                <div>
                     <label style ="white-space: nowrap; "><?php echo $arr . " "; ?>  <input type="date" id = "arrival" name="arrival"  style=" margin-right:20px " required></label>
                <label style ="white-space: nowrap;"><?php echo $dep . " "; ?> <input type="date" id = "departure" name="departure"  style=" margin-top:30px " required></label>
               </div>
             <p></p>
             <input type="submit" value="<?php echo $subm; ?>" style="font-size : 20px; font-weight: 700; background-color: #0b5406;
                          color: white; padding: 12px 20px; border: none;  border-radius: 10px;  cursor: pointer; " >
          </div>
        </form>

Feel free to post comments or questions.

PHP methods description continuing. As mentioned before, once the PHP code runs to your satisfaction, you can deploy it to the other subdirectories if you have a multilanguage site. In my case, the script uses price data that may change over time, so they need to be stored in a central place that is easily accessible from the different language subdirectories on the server. One could use a database, but I found it easier to just export the Excel sheet where I have stored these data and use them for the offline calculation of our rates with Excel VBA, to a txt file which I upload to the server without having to learn how to install and use a database on the server. This means that the path to access them from the root and the subdirectories will be different and that my PHP code will have to know if it is stored in the root or in a subdirectory. This can be done quite easily in PHP, and this information can also be used to output your response in different languages. I am using *substr(getcwd(),-3)* to get the last 3 letters of the directory name where the code is stored. In case it is in the root directory, the result will either be "com" or "net" or something similar, depending on your website. If the file is in a language subdirectory, the result will be "/en", "/es", "/fr" or any of the other language identifiers. I will later talk in more detail about another way to have the code work for different languages while having ONLY ONE copy in the root directory and addressing it with query information in the URL to identify the language that should be used, like **https://mysite.com?lang=fr**. This requires adding some PHP code in the Nicepage header code to make the language menu work correctly. If you adopt this method, the language information can be taken from the query string in the URL with the GET method.as follows: *$get_lang = htmlspecialchars($_GET)*. The *htmlspecialchars* function is necessary to avoid the injection of potentially malicious code in the URL. In my example above, the function would return "fr" for French. So this is the code snippet that I use right after the "body" tag, before the start of the "header" section, which combines both methods. Our base language is Spanish, so Nicepage stores the Spanish version in the root directory, which ends with .com, so without a query string in the URL, the default language in the root directory is "es", but language information in the URL overrides this. <?php //get the current directory and/or the language paramenter in the URL $dir = substr(getcwd(),-3) ; // get directory e.g. "/homepages/.../htdocs/aparthotel-boquete.com/en" if ($dir == "com") { // root ends with .com ==> now "", otherwise "/en/" "/es/" .... $dir = ""; $lang = "es"; } else { $lang = substr($dir,1,2); } $get_lang = htmlspecialchars($_GET['lang']) ; // URL?lang=xx overrides directory setting if ($get_lang != "") // no lang declaration like"?lang=en"? { $lang = $get_lang; } switch ($lang) { case "es"; //root directory (spanish) $language = "Español"; break; case "en" ; $language = "English"; break; case "de"; $language = "Deutsch"; break; case "fr"; $language = "Français"; break; case "it"; $language = "Italiano"; break; default: die ("Invalid language information"); } ?> Now that I have the language and directory information, I can modify the language-specific elements in the Nicepage header code that are different for each language. Nicepage creates different headers for each language to reflect that the language selector shows a different language. For Nicepage pages in HTML, there are also many other differences between the different languages, so a system with different copies in different directories is necessary. But for PHP files, only the header is different, and thus it is quite easy to have only one file for all languages, where the language-specific parts can be modified automatically with PHP snippets like these: <img src="../images/languageiconwhiteonblue<?php echo $lang; ?>.png" title = "<?php echo $language; ?>" alt="<?php echo $language; ?>"> Besides modifying the header code appropriately with the language information, you can also modify the language output for the entire page using the "switch" tag to create translations into different languages as shown above. Here are some examples: <h2 padding="0px 0px 30px 0px" color = "black" align = "center"><?php echo $h2 . "<p></p>"; ?> </h2 > <form method="post" action='<?php echo htmlspecialchars($_SERVER["PHP_SELF"]) . "?lang=" . $lang;?>'> <div align= "center"> <div> <label > <?php echo $pax1; ?> <input type="radio" id = "pax1" name="pax" value ="1" style=" margin-right:30px " required></label> <label > <?php echo $pax2; ?> <input type="radio" id = "pax2" name="pax" value="2" required></label> </div> <p></p> <div> <label style ="white-space: nowrap; "><?php echo $arr . " "; ?> <input type="date" id = "arrival" name="arrival" style=" margin-right:20px " required></label> <label style ="white-space: nowrap;"><?php echo $dep . " "; ?> <input type="date" id = "departure" name="departure" style=" margin-top:30px " required></label> </div> <p></p> <input type="submit" value="<?php echo $subm; ?>" style="font-size : 20px; font-weight: 700; background-color: #0b5406; color: white; padding: 12px 20px; border: none; border-radius: 10px; cursor: pointer; " > </div> </form> Feel free to post comments or questions.

Last edited 29 August 2022 by v.piasta

You must log in or register to leave comments