Yii3 - How to start

Tutorials

3.0

(draft - all will be retested laterDon't forget to like and subscribe :-)

# IntroIn Yii3 it is not as easy to start as it was with Yii2. You have to install and configure basic things on your own. Yii3 uses the modern approach based on independent packages and dependency injection, but it makes it harder for newcomers. I am here to show all how I did it.

> ## Git
 
 
All themy code is available in my new [GitHub repositoryies:
 
- [Yii3 API demo](https://github.com/rackycz/yii3api). (yii3api) - May be dropped in the future as `yii3web` offers more)
 
- [Yii3 WEB demo](https://github.com/rackycz/yii3web) (yii3web) - I think I will use this one more
 
 
I will be using it as a boiler-plate for my future projects so it should be always up-to-date and working. ## Docker
 
 
Instead of installing local WAMP- or XAMPP-server I will be using Docker. Do not forget about a modern IDE like PhpStorm, which comes bundled with all you will ever need.## 135 packages by Yii

The Yii team split the functionalities if Yii3 into 135 packages which you should check in advance to know what is available. Theiry are listed [here](https://www.yiiframework.com/status/3.0) or the same is also [here](https://www.yiiframework.com/doc/api/3.0). For example [log in](https://github.com/yiisoft/user) and [RBAC](https://github.com/yiisoft/rbac), which can be stored in [DB](https://github.com/yiisoft/rbac-db) or in [PHP files](https://github.com/yiisoft/rbac-php/). And many more like "active-record" (which is now finished), "form-model" or "boostrap5".

## invoke()Learn what they mean and how they are used by Yii3. To me this is a brand new topic as well.

You need to add special "cycle" dependencies to use the annotations. See composer.json in the deprecated yii3 demo:
 
- https://github.com/yiisoft/demo/blob/master/blog/composer.json
 
- https://cycle-orm.dev/docs/annotated-entity/current/en
 
 

# Yii3 - How to start```

## Disclaimer
 
 
I am just learning Yii3. Its new architecture is not my cup of tea so I am trying my best to reach my goals. (I left world of Java+Spring because of these complex DI configurations and now it's back :-o )
 
 
If you find a better implementation, let me know. I am not an architect, but a real-life developer who solves daily problems in the world of bussines and industry so sometimes I may produce too straightforward or philosophically imperfect solutions.
 
 
## Adding DB into your project

Your project now does not contain any DB. Let's add MariaDB and Adminer (DB browser) into file docker/dev/compose.yml:Next we also need an algorithm that will enforce these tokens in each request, will validate and refresh them and will restrict access only to endpoints that the user can use. This is a bigger topic for later. It may be covered by the package https://github.com/yiisoft/auth/ which offers "HTTP bearer authentication".

## Debugging in xDebug (xdebug.ini)
 
 
It was a little tricky, but it is simple. Make sure your file `docker/dev/.env` contains following. (tested on MacOs + Docker Desktop):
 
 
```
 
XDEBUG_MODE=develop,debug,coverage
 
XDEBUG_CONFIG="client_host=host.docker.internal start_with_request=yes"
 
```
 
 
Method `xdebug_info()` will still show `xdebug.mode=develop`, but `Step Debugger` will be `enabled`.
 
 
>  You can enhance it by appending `idekey`, but IDE setup then may require you to specify "IDE Key (session id)", the host (localhost:80) and set "path mapping" so that your local project-folder is mapped to "/app". All is done via IDE configuration.
 
>
 
>
 
> `XDEBUG_CONFIG="client_host=host.docker.internal start_with_request=yes idekey=yii3debug`
 
>
 
 
If you want to see correct value `xdebug.mode` in `xdebug_info()`, or generally configure xdebug via `xdebug.ini`, do this:
 
 
docker/dev/xdebug.ini:
 
 
```
 
xdebug.mode=develop,debug,coverage
 
xdebug.client_host=host.docker.internal
 
xdebug.start_with_request=yes
 
xdebug.idekey=yii3debug
 
```
 
 
docker/Dockerfile:
 
 
```
 
COPY docker/dev/xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini
 
```
 
 
dockerignore:
 
 
```
 
!/docker/dev/xdebug.ini
 
```
 
 
## php.ini
 
 
You can do the same as above (chapter about xDebug) with `php.ini` for example to set the timezone:
 
 
```
 
[Date]
 
date.timezone = "UTC"
 
```
 
 
docker/Dockerfile:
 
 
```
 
COPY docker/dev/php.ini /usr/local/etc/php/conf.d/custom.ini
 
```
 
 
## Pjax
 
 
Pjax does not exist any more, but you can use [HTMX](https://htmx.org/docs/#introduction) instead:
 
 
```
 
<script src="htmx.min.js"></script>
 
```
 
 
Your action:
 
 
 
```
 
<?php
 
declare(strict_types=1);
 
namespace App\Web\HomePage;
 
use Psr\Http\Message\ResponseFactoryInterface;
 
use Psr\Http\Message\ResponseInterface;
 
final readonly class Htmx
 
{
 
    public function __invoke(
 
        ResponseFactoryInterface $responseFactory
 
    ): ResponseInterface
 
    {
 
        $response = $responseFactory->createResponse();
 
        $response
 
            ->getBody()
 
            ->write('You are at homepage.<div id="id2">Welcome</div>');
 
        return $response;
 
    }
 
}
 
```
 
 
And then a simple HTML
 
 
```
 
<h2>HTMX test</h2>
 
<div id="htmx">
 
    <p>This is the original text</p>
 
</div>
 
<button data-hx-get="/htmx"
 
        data-hx-trigger="click"
 
        data-hx-target="#htmx"
 
        data-hx-select="#id2"
 
        data-hx-swap="innerHTML">
 
    Click me (and watch the traffic in devtools)
 
</button>
 
```
 
 
## GridView + CRUD
 
 
Grid view is in package `yiisoft/yii-dataview`. The source code is extremely verbose and complex to me (compared to how primitive function it should provide), so I am just linking my GitHub demo:
 
 
- [Action](https://github.com/rackycz/yii3web/blob/master/src/User/Action/IndexAction.php)
 
- [method findAll()](https://github.com/rackycz/yii3web/blob/master/src/Entity/QueryBuilder/UserQueryBuilderRepository.php)
 
- [QueryDataReader](https://github.com/rackycz/yii3web/blob/master/src/Entity/QueryBuilder/QueryDataReader.php)
 
- [View](https://github.com/rackycz/yii3web/blob/master/src/User/View/index.php)
 
 
 
## JS client - Installable Vuejs3 PWA If you create a REST API you may be interested in a JS frontend that will communicate with it using Ajax. Below you can peek into my very simple VueJS3 attempt. It is an installable PWA application that works in offline mode (=1 data transfer per day, not on every mouse click) and is meant for situations when customer does not have wifi everywhere. See my [Gitlab](https://gitlab.com/radin.cerny/vuejs3-pwa-demo-plus).