migrate

Author: tanhongit

app/Http/Controllers/HomeController.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class HomeController extends Controller
+{
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    /**
+     * Show the application dashboard.
+     *
+     * @return \Illuminate\Contracts\Support\Renderable
+     */
+    public function index()
+    {
+        return view('home');
+    }
+}

app/Student.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Student extends Model
+{
+    //
+}

database/migrations/2021_04_01_083154_create_students_table.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateStudentsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('students', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->string('name');
+            $table->string('email');
+            $table->string('phone');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('students');
+    }
+}

package-lock.json

@@ -20,6 +20,7 @@
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.15.2",
         "sass-loader": "^7.1.0",
-        "vue": "^2.5.17"
+        "vue": "^2.5.17",
+        "vue-template-compiler": "^2.6.12"
     }
 }

package.json

@@ -0,0 +1,4 @@
+{
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
+}

public/css/app.css

@@ -0,0 +1,65 @@
+data = state
+vueX = redux
+vue router = router
+
++ roor element: require
+
++ 2 ways binding:
+    +bind du lieu 2 chieu
+
++ phu thuoc vao kieu cua element
+
++lifrcycle: vong doi cua component trong vue
+
++ binding:
+    + value binding: {{ }}
+    property binding:
+    v-bind:[tenthuoctinh]="dgrere" (id, class, style,...)
+        + viet tat (co the viet :[tenthuoctinh] khong can v-bind)
+
++model: lien ket element voi property
+
++event handing:
+    +bat su kien tu cac element
+        +v-on:[ten su kien]="sgtregre"
+            viet tat: v-on:click -> @click
+        +Prevent default event:
+            + huy bo event mac dinh cua element di -> lamf tiep cai gi do theo y thich
+
++ ref:
+    Anh xa den chinh element
+
++Conditional rendering:
+    + v-show: an/hien 1 element theo dieu kien
+    + v-hide
+    + v-if
+    + v-else-if
+        +v-el (else)
+
++list rendering:
+    +v-for
+
++methods:
+    +function cua vue object
+
++watch
+    Thao doi su thay doi cua data
+
++hood:
+    mounted
+
+Props:
+    Dua du lieu day tu component cha sang component con
+    Cach khai bao:
+        +dung mang ten cac prop
+        +dungf object
+
+    Props =data
+
+Event:
+
+filter: 
+    bien doi du lieu truoc khi no dc render
+
+    https://stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-string
+    https://www.youtube.com/watch?v=j97QtHf0CHY&t=882s

public/js/app.js

@@ -0,0 +1,23 @@
+<template>
+    <div class="container">
+        <div class="row justify-content-center">
+            <div class="col-md-8">
+                <div class="card">
+                    <div class="card-header">Example Component</div>
+
+                    <div class="card-body">
+                        I'm an example component.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            console.log('Component mounted.')
+        }
+    }
+</script>