1. PHP API Lab v2
  2. External Scripts

External Scripts

We’re going to use quite a few external/third-party packages in this lab. These packages manage, amongst other things, how our application looks.

Because there’s no need for us to write these packages ourselves, we can grab them from their original sources and simply copy them into our app.

Checking directory structure

  1. Create the following directories. Windows users can create new folders using Windows Explorer.

    • public/css
    • public/css/fonts
    • public/css/vendor
    • public/js
    • public/js/vendor

    Commands to create these folders, if required, are as follows:

    mkdir public/css
    mkdir public/css/fonts
    mkdir public/css/vendor
    mkdir public/js
    mkdir public/js/vendor
    
  2. Create the following files. They can both remain empty for now. Windows users can create new files using Notepad (remember to save the file type as “All Files”).

    • public/css/ntnx.css
    • public/js/ntnx.js

Adding packages

  1. Download each resources file linked below and extract it into the appropriate directory.

    • CSS - extract to public/css/vendor
    • Javascript - extract to public/js/vendor
    • Fonts - extract to public/css/fonts

    Note

    When extracting the ZIP files, ensure they are extracted directly to the directories above and not into subdirectories.

    Here is how the app’s public directory structure should look at the completion of this step:

    ../../_images/public_structure.png

Further testing

With these files in place, our application is starting to not only come together, but also starting to look a lot better.

The navigation bar and form elements at the top of the screen are now styled properly with both colours and fonts.

../../_images/styled.png

It’s now time to dig deeper into wiring our app into the Nutanix REST APIs.

Back to Top