Build a Website

The Enterstarts platforms offers special support for developers, admins, users that wish to build the simple, sofisticated, SEO-enabled fast websites, portals and platforms we've grown used to.

At the end of this tutorial, we will build this nice looking listing of our favorite pets.

Overview

Enterstarts Website Systems allows building powerful web applications (website, portals, customer facing systems) to process, display and collect information from static sources, dynamic api's, ecommerce venues with special support for SSR (Server Side Rendering) and client side rendering.

Funcionalities

• Build complex, and intensive blade components
• Manage any-scale website by assembling components into pages
• Scale your application with caching and at the edge
• Render ReactJS inside php
• Stream html, ajax and requests with laravel livewire
• Customize 100% your application layout

Audience

The target audience of this tutorial is for frontend and backend developers. The Website System also offers low-code amenities for adequate circustances. This tutorial is to highlight to core developers the full spectre of possibilities.

Architecture

Everything starts by creating an application launching the builder and adding or removing components to a page.

All Websites Applications consists simply of:

• Components & Layouts
• Pages
• Applications

Example (Pet Store)

To quickstart, lets create an example application named PetStore. where we'll list images of pets. Inside the backoffice, open the menu and head to Developer Cloud - Launch Application.

Then launch the application by filling the name, version and environment. For the template please choose etx-website

After creating the application, please choose open console, to open the website details page.

Afterwards you're greet with details of the website, its pages, template details, etc.

Deploy Application Template

Start by deploying the application structure on the website-engine, this generates the application configuration, deploys laravel app structure and prepares all the folders necessary to host the pages and the components

After this is done, we're ready to deploy pages, and components. Move a little bit higher and create a page (index).

Open the builder on the index page

This will open the builder

Component Template Modules

The page is empty and contains no content, lets start by creating and adding a component that lists pets. In order to create a component, you need a component module first, if you have no modules yet in your organization or wish to create a separate module, please head to Developer Cloud - System Modules to create this module. Dont forget to specify the module type as Component Module. Then head to Developer Cloud - Component System to open the module to create the component.

In this case, we're creating the module pet_store:

Dont forget to check the 'Show on search?', it will allow the module to be found on the builder modules. Afterwards head to Developer Cloud - Component System and open the pet_store or another module. Module names should be valid identifiers.

Create Component Template

Then just create the petstore listing component template. It is called a component template because it is just that, a template for the component. In this case, we want to create a component for the website, so it will be a BLADE component template.

Click the 'New Template' button and type the name 'petstore_listing'.

caution

Component template names should be valid identifiers and in the case of blade templates should be in lowercase and separated by underscore. ex: wb_my_component, wb_new_layout, petstore_my_comp rather than wbMyComponent or wbNewLayout

After creating the template, you can see the details and the component main file (component.blade.php)

Click the builder button, which will take you to the component builder console. As you can see bellow, the website-system already generates a boiler plate component code.

The component editor is very simple. you can create as many files as needed, and after editing the code of your component, click the 'Deploy Component' button on the preview.

info

Always click 'Deploy Component' after making changes to your component, after that click the 'Reload' button to refresh the preview-code. If any error occurs during render, debug your component, edit, Deploy again and hit refresh.

Add Component Template To PetStore Application

Lets add this template to our application just to see how it looks on the builder and on the final website.

Head again to the builder and refresh the list of modules on the left column of the builder. The new petstore module should be visible with the sole component.

Click on the petstore_listing component and it will be add to the page. The builder should look like the above, according to the component code.

Now, click the Save and Preview buttons to see how the raw page looks

info

Always click 'Save Page' after adding, removing or updating the page components.

And voilla heres the page. You can Click here to view it yourself.

Update the component

Now lets update the component with listing of the pets. Back to component editor, open the component.blade.php file and add the following contents:

component.blade.php

<div class="row rs-margin">
    <div class="col-lg-4 col-sm-12 col-xs-12 col-md-4">
        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="https://images.pexels.com/photos/3361739/pexels-photo-3361739.jpeg?auto=compress&cs=tinysrgb&w=750&h=750&dpr=1" alt="Card image cap">
          <div class="card-body">
            <h4 class="card-title">Doggie</h4>
            <p class="card-text">My best Friend</p>
            <a href="#" class="btn btn-primary">Addopt</a>
          </div>
        </div>
    </div>

    <div class="col-lg-4 col-sm-12 col-xs-12 col-md-4">
        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="https://images.pexels.com/photos/1404819/pexels-photo-1404819.jpeg?auto=compress&cs=tinysrgb&w=750&h=750&dpr=1" alt="Card image cap">
          <div class="card-body">
            <h4 class="card-title">Ferrel</h4>
            <p class="card-text">Not so friendly, but a good company</p>
            <a href="#" class="btn btn-primary">Addopt</a>
          </div>
        </div>
    </div>

    <div class="col-lg-4 col-sm-12 col-xs-12 col-md-4">
        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="https://images.pexels.com/photos/5256708/pexels-photo-5256708.jpeg?auto=compress&cs=tinysrgb&w=750" alt="Card image cap">
          <div class="card-body">
            <h4 class="card-title">D. Swag</h4>
            <p class="card-text">This doggo is not easy on swag, he got it all</p>
            <a href="#" class="btn btn-primary">Addopt</a>
          </div>
        </div>
    </div>
    
    <div class="col-12">
        <p>
            <a href="Photo by Cong H from Pexels: https://www.pexels.com/photo/calico-cat-on-focus-photo-1404819/">
                Photo by Cong H from Pexels
            </a>
        </p>
    </div>

</div>

Click the 'Save' button or Ctrl+S to save the contents, after click Ctrl+q to go to preview mode and then hit a Deploy Component action. Then refresh the component. This should appear:

Update Site

Now lets update the PetStore website to receive the changes made to the component.

info

After adding a component to a page, you have to explicitly install it on the application everytime there's a change in the component.

Click on the top menu 'Actions' > 'Install on Application' then search for Pet Store and just install.

Now back at the builder, perform a refresh on top left button and you should get the new component updated.

Now perform Save and Preview again, the Petstore website should look like this:

The End

That's it for now. But this is just the beginning, next tutorials will feature fragment components, reusing other components, SSR, Http Request inside components, embeeding react and much more, stay tuned.

Enterstarts.com