Aliya H.: Create YouTube Clone with Yii (Part 5): Create 'Video' and 'Create Video' Page

1) Create migration

We want to create a migration named create_video_table with the field name video_id and title of type string, description of type text, created_by of type integer with a user as the foreignKey.


php yii migrate/create create_videos_table
    --fields="video_id:string(16):notNull,title:string(512):notNull,description:text,created_by:integer(11):foreignKey(user)"

2) Run migration

Run php yii migrate and confirm the action.

A table with a name videos is created in phpMyAdmin.

3) Undo migration to add new field or edit the migration file

If we want to undo the migration we just run, run php yii migrate/down to revert. Let's change a few things in the migration file.

Change:

Press CTRL+H -> search for {{%videos}} and replace it with {{%video}}
Add new fields:

        $this->createTable('{{%video}}', [
            'video_id' => $this->string(16)->notNull(),
            'title' => $this->string(512)->notNull(),
            'description' => $this->text(),
            'tags' => $this->string(512),
            'status' => $this->integer(1),
            'has_thumbnail' => $this->boolean(),
            'video_name' => $this->string(512),
            'created_at' => $this->integer(11),
            'updated_at' => $this->integer(11),
            'created_by' => $this->integer(11),
        ]);

        $this->addPrimaryKey('PK_videos_video_id','{{%video}}','video_id');


      console > migrations > m220721_010937_create_videos_table.php

Next, run php yii migrate again. The table in your phpMyAdmin is now named video and has 10 fields.

4) Create new model for Video with Gii

Open http://yourappname.test/gii/ and choose Model Generator. Fill in the form as shown below. It will create 2 files named Video.php and VideoQuery.php

5) Automatically create Controllers and Views with CRUD functionality with Gii

Go to Gii homepage again, and now choose CRUD Generator. Fill in the fields as shown below and click Generate. You may click on Preview. After Generate is clicked, it will create 6 files, VideoController.php, _form.php, create.php, index.php, update.php and view.php

Now, when you open the video tab:

6) Change the validation error style

Right now, the validation error doesn't look pretty because it is using the style from Yii instead of Bootstrap. Let's go ahead and change that.

Change yii\widgets\ActiveForm to yii\bootstrap4\ActiveForm

<?php

use yii\helpers\Html;
use yii\bootstrap4\ActiveForm;

/* @var $this yii\web\View */
/* @var $model common\models\Video */
/* @var $form yii\bootstrap4\ActiveForm */
?>


      backend > views > video > _form.php

7) Change the Views in Create Video page

We want to change the page to look like YouTube's upload video page. So let's edit the view (create.php), custom styling in site.css and insert FontAwesome icon.

<div class="video-create">

    <h1><?= Html::encode($this->title) ?></h1>

    <div class="d-flex flex-column justify-content-center align-items-center">
        <div class="upload-icon">
            <i class="fa-solid fa-upload"></i>
        </div>
        <br>
        
        <p class="m-0">Drag and drop a file you want to upload</p>
        <p class="text-muted">Your video will be private until you publish it.</p>

        <button class="btn btn-primary btn-file">
            Select File
            <input type="file" name="video" id="videoFile">
        </button>
    </div>

</div>


      backend > views > video > create.php

.upload-icon {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
    color: #454545;
}

.btn-file {
    position: relative;
}

.btn-file input {
    position: absolute;
    left:  0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}


      backend > web > css > site.css

<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <?php $this->registerCsrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <?php $this->head() ?>
</head>


      backend > views > layouts > main.php

Fix: Changes does not take effect after editing CSS

Sometimes when we change the CSS, it doesn't automatically reflect in the browser. This is the best practice to solve this problem.

47
48
49

        'assetManager' => [
            'appendTimestamp' => true
        ]


      backend > config > main.php

Before using assetManager	After using assetManager

That's all for this part.

Aliya H.

Posted on Friday, July 22, 2022 by Aliya

Create YouTube Clone with Yii (Part 5): Create 'Video' and 'Create Video' Page