5. Creating Dynamic Content Using Datasource Binding and Factory
How to create dynamic pages with content fom your backend using the ...

Transcript

Hi and welcome to the fifth episode of AppDrag Academy.  In this episode, we’re going to begin dynamically creating content on our website.  The first method we will learn is called the Cloud Backend Datasource Binding, which is what was used to generate these activities.  Clicking on an activity will open the detail page, which is also generated using the datasource binding.

Setting up the Database
So let's get started.  In our database, we're going to create a table called Activities, and add some columns to it.
The first column will be "name" of type text.
The next will be "location", which is also a text.
A "description" of type HTML.
A "date" which will be, of course, of type date.
A "price" of type integer.
An "image" of type image.
And a "gallery" of type Image Multi.

I'm going to drop a bunch of activities into this table, and if you're following, you can pause and manually enter a few.  So as an example, I have here the details of an activity containing all the columns I created earlier.

Preparing the APIs
Moving along to the APIs, we have a couple of pretty simple VisualSQL Select APIs to create, and the first will be the one that will get for us all of the activities.  So we select the activities table, put the output parameters that we want, which will be the ID, the name, the date, the location, the price, and the image.  Save, give it a try, and here's our JSON.

The second API will be almost the same except it's for a single activity.  So what differs is, first of all, changing the POST method to GET.  Secondly, we're going to add an input parameter of ID with an example of 1, and for the output parameters, I'm going to include this time the description as well.  In the where clause, add the ID to match the ID parameter.  And save.
Let's give it a try, and here's the single activity JSON.

One last API we're going to add is identical to this one, so I'm going to duplicate it, and call it getGallery. All that's different is the response, which will only return the gallery.  Save and try.  And there's my array of images.  And that completes the backend part of this episode.  Moving onto the front.

Frontend Development - Datasource Binding
What we want to do is to display all of these activities on a new page of our project which we have called Events.  And before we do anything to this page, we'll need to add the datasource binding option to this new page.  So click the gear, go to advanced, add Cloud Backend Datasource Binding, and select the APIs we'll need from the dropdown menu.  And the one we want for this page is the getActivities, so we add it, and save.

In order to populate the page, we're first going to need a template for each of our activities. I've already designed this section using the Page Builder tools, but you can pause to grab a few components that'll match these fields.
And our next step is the binding.  So what we want here is for this entire row to be repeated every time there's another activity in my table.  Therefore, I'm going to edit this row and go all the way down to Datasource Binding, enable it, and select the API we added earlier.  Note that AppDrag has assigned this API the datasource code of "DS1", which represents the table received in response.

So now you go to your title tag, and replace the name for - square brackets, and inside them enter DS1, which, again, is the API code, equals "name".  And the same for the location, the date, and the integer part of the price. 

Let's save and preview, and there is our list of activities generated by the Cloud Backend.  

The image is what's left, so let’s open the source code, and find the URL of the image.  Here it is, so let’s  replace that with the DS1=image inside square brackets.  

Save and preview, and now we have our list of activities with their respective images.

Dynamically Creating the Detail Page
Next, we're going to create is a detail page that the visitor can access when clicking on one of the activities.  As before, I'm going to add the datasource binding API to the page, and this time select the singleActivity.
Once again, you can pause to create your template, but these are the sections I designed which will display the activity with all its information.  We replace these temp details for the database details using our binding codes. 
And then visit the source code to plug in the image binding code in the URL.  Save and preview.  

And of course it is empty.  Why?  Because the API we created requires an "id" parameter.  So in the URL right here, I'm going to add at the end: "&", and that’s to include another parameter which is id, equals 1.  Enter, and there's our activity.  (&id=1)

Let's go back to the main activity page now to link each one to the detail page.  I'm going to grab the entire row, edit, go to link, select the detail page, and add in the URL parameter that we manually entered earlier, which was "id".  For the value, we put the DS1 code that is equal to id.  

Click on one of the activities, and here's our dynamically-created page.

Frontend Development - Factory-Based Using jQuery/AJAX
The second method of dynamically creating content is by using the factory option, which is by way of pure code.  We will, however, use the Page Builder to generate for us a cool-looking code block.  So I'm going to grab a gallery from the elements, drop it right below the description, and fix it up.  

Now, if I go into this gallery's source code, copy the entire code, drag in here a source code block, paste it in, and now delete the gallery entirely, let's see what happens.  Refresh, and there it is. 

(Full code block found at the end of this script)

So now we have a good-looking gallery, all in code.  And what we want to do now is replace these images for the ones pertaining to our ID-specific activity.  And this time, we're going to use jQuery and AJAX to manufacture each picture.  Let's analyze this HTML and find at which point the code repeats itself per image.  And there it is.  Once right below the div with a class called AppDrag Gallery Data, and again below the div with a class called AppDrag Gallery View. Which means that each individual image will need both of these code blocks.

The div right above, though, is where they're all stored, so let's give them IDs.  This one will be called galleryData, and the next will be galleryContainer. 

Let's visit the backend for a brief second and open the documentation.  Select the jQuery language, and scroll until we find the getGallery API.  Copy it and go back to the front.

Inside the script tag, and once the jQuery loads, I'm going to paste in my API.  

Pulling the ID Parameter from the URL
If you look at the parameters that this API sends to the backend, you'll see that it's a "1", which is the default example, so we're going to need to replace that for the ID that's passed into our URL.  And to pull that, we're going to add some lines of logic right above.

Let's first pull the URL string, so we create a string URL var that will go to the window's location and read the href. Then we'll create a new actual URL object using this string.  And now that I have a URL object, I can call the searchParams method that will scan the URL and return the parameter called ID.  Now that my ID var contains that ID in the URL, I can pass it into my API.  

In response, I get a JSON, so let's parse that and run a quick scan.  This condition will ensure in all probabilities that my gallery array does not contain at least one image, and when it does, we step inside.  The first step will be to parse the gallery, as it's a nested JSON array. Then we'll create the vars that will contain the gallery's data view.  

Iteration through each Image and HTML Creation
And finally, we iterate through each image, with its URL, which we'll call URL, and create their HTML blocks.  We're going to open some backticks so we can drop in the code.  Let's see what the data's HTML looks like, copy one line of it, empty the container, as it will be replaced by the dynamic HTML that we are creating, and paste the line between the backticks.  

Scan the line for the template's URL, delete it, open close backticks, add the concatenating pluses, and drop the URL parameter inside.  And we do exactly the same for the view.  So copy, clean container, paste, and replace URLs.  

After the loop closes, we call the two containers by their IDs, and append to them the new data and view. Save and close.  Open the activity page, preview.  Click on an activity, and there's our gallery.  Change the ID number, and there's the ID-specific page. 

That wraps up this episode of AppDrag Academy.  In the next episode, we'll create an event reservation that will send the user an HTML-designed confirmation email.  

► 1. Create your first database and API function.

► 2. Create an authentication system

► 3. Create an account form.

► 4. Add a Forgot Password function and an updatable account details page

► 5. List dynamic data from the db and display a detail page for a particular item of the list.

► 6. Event Reservation function, email template with variables, send.