First steps towards using WebYep

In this tutorial, you'll learn how to build a simple web page and make its text and images editable using WebYep. You'll add three WebYep elements to a web page, plus a WebYep Logon Button. We'll add WebYep 'Init Code' to the top and customise the WebYep elements slightly. Please use a website with WebYep installed for this tutorial (see installation for details).

Creating the page, inserting the WebYep elements

  1. Create a new document called "wy-test.php".
  2. Copy and paste this HTML code in, to create a basic 'boilerplate': 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebYep Test</title>
</head>
<body>

</body>
</html>
  3. Insert the WebYep Init Code at the beginning of your page. (Please see The Init Code for details).
  4. Insert four pairs of empty HTML paragraph (<p> and </p>) tags between the opening <body> and closing </body> tags.
  5. Position the cursor within the first paragraph tags.
  6. Insert the WebYep Short Text Element code snippet. 
    <?php webyep_shortText("Fieldname", false, 550, 240); // WebYepV2 ?>
    This will insert that element into your page at the current cursor position.
  7. Position the cursor within the second paragraph tags.
  8. Insert a WebYep Image Element code snippet 
    <?php webyep_image("Fieldname", false, '', '', '_self', 100, 100, false, 900, 600, 600, 270); // WebYepV2 ?>
  9. Position the cursor within the third paragraph tags.
  10. Insert a WebYep Long Text Element code snippet 
    <?php webyep_longText("Fieldname", false, "", true, 600, 400); // WebYepV2 ?>
  11. Position the cursor within the forth paragraph.
  12. Insert a WebYep Logon Button (code snippet.)
    <?php webyep_logonButton(true); // WebYepV1-2 ?>

You should now see four WebYep elements in your page. If you followed all the steps correctly, your page will look like this: 

<?php session_start(); // WebYep init WebYepV2
/* ><table><tr><td bgcolor=white><h2>WebYep message: Error, PHP inactive</h2>
<font color=red>The PHP code in this page can not be executed!<ul>
<li>Are you launching this page directly form your harddisc <em>(e.g. via a local browser" instead of accessing it via a webserver?)</em></li>
<li>Has this file the correct file extension for PHP scripts? WebYep pages must have the ".php" extension and <b>not</b> ".html" or ".htm"!</li>
</ul></font></td></tr></table><!--
*/
$webyep_sIncludePath = "./";
$iDepth = 0;
while (!file_exists($webyep_sIncludePath . "webyep-system")) {
  $iDepth++;
  if ($iDepth > 10) {
    error_log("webyep-system folder not found!", 0);
    echo "<html><head><title>WebYep</title></head><body><b>WebYep:</b> This page can not be displayed <br>Problem: The webyep-system folder was not found!</body></html>";
    exit;
  }
  $webyep_sIncludePath = ($webyep_sIncludePath == "./") ? ("../"):("$webyep_sIncludePath../");
}
if (file_exists("${webyep_sIncludePath}webyep-system/programm")) $webyep_sIncludePath .= "webyep-system/programm";
else $webyep_sIncludePath .= "webyep-system/program";
include("$webyep_sIncludePath/webyep.php");
// -->?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebYep Test</title>
</head>
<body>
  <p>
    <?php webyep_shortText("Fieldname", false, 550, 240); // WebYepV2 ?>
  </p>
  <p>
    <?php webyep_image("Fieldname", false, '', '', '_self', 100,
    100, false, 900, 600, 600, 270); // WebYepV2 ?>
  </p>
  <p>
    <?php webyep_longText("Fieldname", false, "", true, 600, 400); // WebYepV2 ?>
  </p>
  <p>
    <?php webyep_logonButton(true); // WebYepV1-2 ?>
  </p>
</body>
</html>

Yes, it may look awfully complicated! However over half of this code is the PHP Init Code, for loading WebYep and connecting the page to the system folder. If we ignore the Init Code, the actual HTML code used to build the page is not a far departure from the HTML code one may typically use for building modern web pages.

Configuring the WebYep elements

With our basic web page setup and four WebYep elements added, we are already quite close to having a complete web page ready to login and edit. However it would be wise to update our three editable elements to give them unique fieldnames (to prevent conflicts) and add a little custom CSS for our image.

  1. Looking at the first WebYep element, the Short Text element. Its properties are presently displayed as follows:
    <?php webyep_shortText("Fieldname", false, 550, 240); // WebYepV2 ?>
  2. Enter "Title" as the "Fieldname":
    <?php webyep_shortText("Title", false, 550, 240); // WebYepV2 ?>
  3. Then onto the second WebYep Element, the Image element. Enter "Photo" as the image name. For "HTML-Attributes" enter style="margin-right:20px"
    <?php webyep_image("Photo", false, 'style="margin-right:20px"', '', '_self', 100, 100, false, 900, 600, 600, 270); // WebYepV2 ?>
  4. Finally for the third WebYep element, the Long Text element. Enter "Text" as the fieldname.
    <?php webyep_longText("Text", false, "", true, 600, 400); // WebYepV2 ?>

The complete code for the updated page will look like this:

<?php session_start(); // WebYep init WebYepV2
/* ><table><tr><td bgcolor=white><h2>WebYep message: Error, PHP inactive</h2>
<font color=red>The PHP code in this page can not be executed!<ul>
<li>Are you launching this page directly form your harddisc <em>(e.g. via a local browser" instead of accessing it via a webserver?)</em></li>
<li>Has this file the correct file extension for PHP scripts? WebYep pages must have the ".php" extension and <b>not</b> ".html" or ".htm"!</li>
</ul></font></td></tr></table><!--
*/
$webyep_sIncludePath = "./";
$iDepth = 0;
while (!file_exists($webyep_sIncludePath . "webyep-system")) {
  $iDepth++;
  if ($iDepth > 10) {
    error_log("webyep-system folder not found!", 0);
    echo "<html><head><title>WebYep</title></head><body><b>WebYep:</b> This page can not be displayed <br>Problem: The webyep-system folder was not found!</body></html>";
    exit;
  }
  $webyep_sIncludePath = ($webyep_sIncludePath == "./") ? ("../"):("$webyep_sIncludePath../");
}
if (file_exists("${webyep_sIncludePath}webyep-system/programm")) $webyep_sIncludePath .= "webyep-system/programm";
else $webyep_sIncludePath .= "webyep-system/program";
include("$webyep_sIncludePath/webyep.php");
// -->?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebYep Test</title>
</head>
<body>
  <p>
    <?php webyep_shortText("Title", false, 550, 240); // WebYepV2 ?>
  </p>
  <p>
    <?php webyep_image("Photo", false, 'style="margin-right:20px"', '', '_self', 100, 100, false, 900, 600, 600, 270); // WebYepV2 ?>
  </p>
  <p>
    <?php webyep_longText("Text", false, "", true, 600, 400); // WebYepV2 ?>
  </p>
  <p>
    <?php webyep_logonButton(true); // WebYepV1-2 ?>
  </p>
</body>
</html>

The only WebYep element that wasn't changed here was the Logon element. It requires no fieldname or custom attributes.

Testing the page

  1. Please make sure you have transferred the webyep-system folder to your web server and have prepared WebYep (see installation for details).
  2. Transfer the page (wy-test.php) to your web server (upload via FTP).
  3. Open the page in your web browser by entering the appropriate address (URL), like this:
    https://example.com/wy-test.php
  4. Click the lock icon in the page (the WebYep Logon Button).
  5. When the logon window pops up, enter the username and password you configured when installing WebYep (default is username "admin" and no password).
  6. Three edit icons (with a pen icon) should appear - click them to edit the content of your page.
  7. Click the lock icon to save the changes and switch the page out of edit mode.

Congratulations! You now have a simple web page setup that can have its words and pictures edited using WebYep. The website author does not need to use any complicated code to make website edits. In the case of the image, the website author can easily upload a new image from their computer, without needing to publish an image using FTP or link to an image stored somewhere else.