Reading Time: 4 minutes

3,139 Views

Inside this article we will see CakePHP 4 How to Add Javascript files to layout. Article contains classified information about adding javascript (.js) files. There are very simple ways by the help of which we can add Js files to CakePHP views, layouts and templates.

We will see these ways to add Js to CakePHP layout –

Using Html script Tag
Using URL Helper – build() Method
Using Html Helper – script() Method

Learn More –

Let’s get started.

CakePHP 4 Installation

To create a CakePHP project, run this command into your shell or terminal. Make sure composer should be installed in your system.

$ composer create-project --prefer-dist cakephp/app:~4.0 mycakephp

Above command will creates a project with the name called mycakephp.

Load JS (Javascript) Files

Suppose you have a layout called app.php inside /templates/layout folder. In this layout we will see how to add js files.

Using Html script Tag

Here, we will use script tag of HTML to add Js file links.

<html>

<head>
    <title>Welcome to CakePHP 4 Application</title>
</head>

<body>
  ...  
  
  <script src="/js/jquery.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>
</body>

</html>

Using URL Helper To Create Js Links

This method will create links of Js files with application URL.

<html>

<head>
    <title>Welcome to CakePHP 4 Application</title>
</head>

<body>
  ... 
  
  <script src="<?= $this->Url->build('/js/jquery.min.js', ['fullBase' => true]) ?>"></script>
  <script src="<?= $this->Url->build('/js/bootstrap.min.js', ['fullBase' => true]) ?>"></script>
</body>

</html>

Using HTML helper

We will use script() method of HTML helper to link Js files. We can load either row by row or we can load multiple Js files at once.

You can add .js with file name or not. It is optional to use inside script() method. If you add only file name then method will add .js automatically with it.

Load Js file step by step:

<html>

<head>
    <title>Welcome to CakePHP 4 Application</title>
</head>

<body>
  ... 
  
  <?php echo $this->Html->script("jquery.min.js"); ?>
  <?php echo $this->Html->script("bootstrap.min.js"); ?>
</body>

</html>

script() method picks file from /webroot/js directory. So don’t need to pass folder path here. If you have your js files into some different folder then you need to specify.

Load all Js files at once:

<html>

<head>
  <title>Welcome to CakePHP 4 Application</title>  
</head>

<body>
    ...
  
    <?php echo $this->Html->script([
        "jquery.min.js",
        "bootstrap.min.js"
    ]); ?>
</body>

</html>

We hope this article helped you to learn about CakePHP 4 How To Add Javascript Files To Layout Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.