# Component

TIP

Zest Framework supports a component system/feature.

# What is a component?

A component is a piece of code that has its own routes, controllers, models, views, middleware and locals.

# The structure of components

The structure of components is as follows. All components should be in App/Components folder

In this example we're going to create helloworld component. The structure is as follow.

Components {main component folder}
helloworld {sub component folder e.g component name}
- Controllers {folder contains controllers of component}
- local {folder contains language files of component}
- Models {folder contains models of component}
- Middleware {folder contains middleware of component}
- Views {folder contains views of component}
- routes.php {file, where the routes are defined}

Let's create a helloworld component.

First, add our route in routes.php

<?php

// namespace is required to define your component so that you can add many routes into one component as well.
$namespace = "App\Components\helloworld\Controllers";

// This creates the url `localhost/blog/helloworld`.
$com->add('helloworld', ['controller' => 'Home', 'action' => 'index', 'namespace'=>$namespace]);

// the helloworld is the component name if you have different component chagne it according to name.

1
2
3
4
5
6
7
8
9
10

Now create our Home.php in controllers folder


<?php

namespace App\Components\hello\Controllers;

use Zest\Component\View\View;

class Home extends \Zest\Component\Controller\Controller
{
    /**
     * Show the index page.
     *
     * @return void
     */
    public function index()
    {
        //prototype View::view('componentName','View files',$args array (optional));
        echo View::view('helloworld', 'Home/index');
        //again the word helloworld is our component name
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Then write index.php in the Views/Home folder

<!doctype html>
<html lang="<?= lang(); ?>">
    <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="shortcut icon" type="image/png" href="<?= site_base_url(); ?>/image/logo.png"/>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
         <link rel="stylesheet" type="text/css" href="<?= site_base_url(); ?>/css/style.css">
        <title><?= printl('title:home'); ?></title>
    </head>

<body>
    <div class='container-fluid'>
        <h1><?= printc('title:home:hello'); ?></h1>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

printc() is a built-in function in Zest framework for printing language strings in components. site_base_url() returns the current URL of the site.

Now lastly, create our language file en.php in the local folder.

<?php
 return [
    'title:home:hello' => 'Hello World',
];

1
2
3
4

TIP

Congratulations! You have successfully created a component.