1) Create migration
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.
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:
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
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
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