Using Stencil Components in PHP

Why integrate Stencil With PHP?

Stencil is a new way to create web Components that can work practically anywhere once compiled, while php is the most used server-side language to create websites, as well as being widely used in creating web apps, used together they can improve each other.

We use just plain php here, I assume you already have a working php environment, as well as have already installed node.

What we will build

A simple web app that look loke this

We have just one stencil component, the container with the photo of the pizza, the name and the price, while the buttons we see at top that allow us to select the pizza are plain html in a php file.

Everytime we click on a button, we call a php function that renders a new pizza, passing pizza’s data to the stencil component.

Let’s start

First of all, install Stencil

npm install @stencil/core@latest — save-exact

then init a stencil project

npm init stencil

Now you can select what type of project is, choose component

? Pick a starter › — Use arrow-keys. Return to submit.
 ionic-pwa Everything you need to build fast, production ready...
 app Minimal starter for building a Stencil app or website
 ❯ component Collection of web components that can be used anywhere

When the initialization process is completed, in the root of the project create a folder with name php, then inside this folder create the file index.php.

The Stencil Component

First we create the stencil component with the cli

stencil generate restaurant-menu-item

this is a simple component to which we pass the data coming from php

export class RestaurantMenuItem {
  @Prop() price: number;
  @Prop() name: string;
  @Prop() imageUrl: string;

  render() {
    return (
      <div>
        <img height="250" width="400" class="menu-item-image" src={this.imageUrl} alt="alternatetext" />
        <p class="menu-item-text">Name: {this.name}</p>
        <p class="menu-item-text">Price: {this.price} €</p>
      </div>
    );
  }
}

now inside the src folder create the assets folder, and inside the assets folder create the image folder, inside this folder put the images of pizzas.

Now in index.html file inside src put the component we just created

<restaurant-menu-item name="margherita" price="10"
                      image-url="/assets/images/pizza-1.jpg">
</restaurant-menu-item>

To test if everything went well and to build the component run

npm run start

Go to http://localhost:3333/, you should see the component that contains pizzas.

In the www folder you will find the compiled project, in the build folder there are javascript files that represents compiled components, while in the assets / images folder there are the images.

The PHP File

To use stencil components in the php file, we need just to import two javascript files, so place this in head tag

<script type="module" src="../www/build/stencil-php-1.esm.js" data-stencil></script>
<script nomodule="" src="../www/build/stencil-php-1.js"></script>

now let’s move on to php, create the function that passes data to the component

function getComponent($name, $imgUrl, $price) 
{
    echo '<restaurant-menu-item name="'.$name.'" price="'.$price.'"
                      image-url="'.$imgUrl.'">
          </restaurant-menu-item>';
}

then the three buttons

<form method="post">
    <label>Select Pizza: </label>
    <input type="submit" name="button1" value="Pizza 1" />
    <input type="submit" name="button2" value="Pizza 2" />
    <input type="submit" name="button3" value="Pizza 3" />
</form>

and in the end we implement the php code that allows the component that contains the pizzas to render pizzas based on the button you press

<?php
if(array_key_exists('button1', $_POST)) {
    button1();
}
else if(array_key_exists('button2', $_POST)) {
    button2();
}
else if(array_key_exists('button3', $_POST)) {
    button3();
}

function button1() 
{
    getComponent("Pizza 1", "../www/assets/images/pizza-1.jpg", 5);
}
function button2() 
{
    getComponent("Pizza 2", "../www/assets/images/pizza-2.jpg", 7);
}
function button3() 
{
    getComponent("Pizza 3", "../www/assets/images/pizza-3.jpg", 10);
}
?>

Final Notes

As you can see, stencil and php are an interesting combination, obviously in order to apply it correctly you have to pay particular attention to the division of skills, i.e. what the stencil components must do and what php must do, which may not be very simple, as php is so well integrated with web technologies (which is also its strong point).

The project code is here: GitHub — CertosinoLab/mediumarticles at stencil-php-1

Source: Medium - CertosinoLab

The Tech Platform

www.thetechplatform.com