CakePHP 4 How To Add Javascript Files To Layout

Share this Article
Reading Time: 4 minutes
755 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.

Buy Me a Coffee

Online Web Tutor invites you to try Skillshare free for 1 month! Learn CakePHP 4, Laravel APIs Development, CodeIgniter 4, Node Js, etc into a depth level. Master the Coding Skills to Become an Expert in Web Development. So, Search your favourite course and enroll now. Click here to join.

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.

Was this post helpful?

Learn Web Development Courses Risk Free @ $5 only.
Web Development Courses @ $5