DARK MODE 

Posted on Friday, July 22, 2022 by

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:

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

18
19
20
21
22
23
24
25
26
27
28
29
30
21
        $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

1
2
3
4
5
6
7
8
9
<?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.

12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.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
19
20
21
22
23
24
25
26
<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.

No comments:

Post a Comment