See all tutorials

Tutorials » A simple SVG bar chart

How to use jQuery or Bootstrap in a web application managed with Webpagebytes CMS

Many times a web application will have to use 3rd party libraries like jQuery and/or Bootstrap. This tutorial is generic and uses these two frameworks examples, furthermore the Webpagebytes CMS functionality applies equally to any similar frameworks.

As a note, a web application can use a 3rd party Content Delivery Network (CDN) to integrate these frameworks in the application, this tutorial covers the aspects of this integration without any 3rd party dependency.

To use jQuery and Bootstrap in a web application managed with Webpagebytes CMS take the following tasks

  1. Upload the framework files as Webpagebytes CMS Files
  2. Create site urls and link the urls with the uploaded files
  3. Start using jQuery and Bootstrap in application content

Estimated task duration, 10 minutes.

Upload the framework files as Webpagebytes CMS Files

Step 1

Download jQuery and download Bootstrap on the local disk. After download the following folders and files are on disk, bootstrap-3.3.2-dist folder and jquery-2.1.3.min file.

Step 2

In Webpagebytes CMS administration interface navigate to Files section.

Step 3

In Webpagebytes CMS administration interface on Files section, click Upload folder and select the bootstrap-3.3.2-dist disk folder.
Once the folder is uploaded, click Upload file and select the jquery-2.1.3.min.js disk file.

Create site urls and link the urls with the uploaded files

Step 4

On Webpagebytes CMS administration interface navigate to Site urls section.

Step 5

Create a new site url by clicking on New site url to link the url to the uploaded bootstrap-3.3.2-dist folder.
Field Description
Site url Type /bootstrap-3.3.2-dist/{**} . The {**} means the url will go recursive to any url that starts with /bootstrap-3.3.2-dist/
Is the url live Choose YES . If NO is selected then the HTTP request will return 404 status code
HTTP operation Choose GET . This is the HTTP verb that will be used to get the site page
Resource type Choose File
Resource External Key Type the name of the folder, 'bootstrap-3.3.2-dist' and select from the drop down list the External Key

Step 6

Create a new site url by clicking on New site url to link the url to the uploaded jquery-2.1.3.min.js file.
Field Description
Site url Type /jquery-2.1.3.min.js . This is the uri on which jQuery will be available
Is the url live Choose YES . If NO is selected then the HTTP request will return 404 status code
HTTP operation Choose GET . This is the HTTP verb that will be used to get the site page
Resource type Choose File
Resource External Key Type the name of the file, 'jquery-2.1.3.min.js' and select from the drop down list the External Key

Start using jQuery and Bootstrap in application content

Step 7

The tutorial will create a simple web page that will use jQuery and Bootstrap.
Webpagebytes CMS web page using jQuery and Bootstrap

Create a site url /test and link it to a site page that has the HTML content specified below.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="./bootstrap-3.3.2-dist/css/bootstrap.min.css">
    <script src="./bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1> jQuery & Bootstrap example </h1>
    <div class="alert alert-success" role="alert">Well done!</div>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip example">Trigger tooltip</button>
</div>
<script>
    $('.btn').tooltip('show');
</script>
</body>
</html>

See the HTML references to files located in bootstrap-3.3.2-dist folder and also the use of jquery-2.1.3.min.js.

  • ./bootstrap-3.3.2-dist/css/bootstrap.min.css
  • ./bootstrap-3.3.2-dist/js/bootstrap.min.js
  • ./jquery-2.1.3.min.js

Fork me on GitHub