The Loop

<print>

In this tutorial you will learn the use of the WebYep Loop Element.

Please use a website with WebYep installed for this tutorial (see Installation).

Creating the page, inserting the WebYep Elements

1. Create a new document "wy_loop.php". Please don't work on unnamed/unsaved documents! Create the file and immediately save it under the name "wy_loop.php" before continuing.

2. Insert two empty paragraphs.

3. Position the cursor in the first paragraph.

4. Insert a WebYep Logon Button (left most item in Dreamweaver's object palette, category "WebYep").

5. Position the cursor in the second paragraph.

6. Insert side by side a WebYep Image Element and a WebYep Short Text Element (fourth and second from left in the object palette).

Your page should now look approximately like this – please make sure that you have enabled the display of the "Invisible Elements" (see Tutorials Introduction):

7. Position the cursor in the second paragraph, between the two WebYep Elements.

8. Select the whole paragraph by clicking the <p>-tag in the tag selector:

9. Press the "cursor left" key to position the cursor exactly before the paragraph. (see also "Positioning the cursor" in the tutorial sections introduction)

10. Insert the WebYep Loop Start Element (third from right in the object palette).

11. Position the cursor exactly after the paragraph by using the method described above.

12. Insert the WebYep Loop End Element (second from right in the object palette).

The paragraph is now enclosed in a loop element. Your page should now look approximately like this:


To Top of Page

Configuring the WebYep Elements

1. Select the WebYep Element in the second line (the Loop Start Element).

2. Enter "Offers" as the loop name in the inspector.

3. Select the left WebYep Element in the third line (the Image Element).

4. Enter "Photo" as the image name.

5. Select the right WebYep Element in the third line (the Short Text Element).

6. Enter "Text" as the field name.

Testing the page

Please make sure you have transferred the webyep-system folder to your web server and have prepared WebYep (see Installation).

1. Transfer the page (wy_loop.php) to your web server (upload via FTP).

2. Open the page in your web browser by entering the appropriate address (URL) - e.g.:

http://www.mywebsite.com/wy_loop.php

3. Click the lock icon in the page (the WebYep Logon Button).

4. When the logon window pops up, enter the username and password you configured when installing WebYep (default is username "admin" and no password).

5. Click the edit buttons to upload an image file ("Photo") and enter some text ("Text").

6. Then click the "+" icon to add more loop blocks.

Click the trash icon to remove whole loop blocks, click the "up"/"down" icons to rearrange the blocks.

In this example the loop block contains only WebYep Elements, but it can contain any content: Static HTML code (like text or images) and WebYep Elements.


To Top of Page
© 2009, Objective Development