Angular 8 - ข้อมูล Static กับ Component และ การแสดงผล

การเก็บข้อมูล Static เป็น Hard Code และการเอาออกมาแสดงที่ Component
เรายังทำตาม Tutorial Your First App ส่วนนี้จะเป็นเกี่ยวกับข้อมูลที่เก็บไว้ใน App ของเราโดยเป็นแบบ Static
เว็บหน้า Your First App https://angular.io/start

ในไฟล์ Component เวลาที่เราประกาศตัวแปรในการเก็บข้อมูลเราสามารถตั้งชื่อขึ้นมาได้เลยในไฟล์ "product-list.component.ts"

โดยสร้างตัวแปร "title" เก็บคำว่า "Product List" ก็เพิ่มลงไปใน Code เป็น title='Product List'; ตามตัวอย่าง
เมื่อต้องการเรียกออกมาแสดงโดยเรียกใน Template ให้ใช้ {{ }} ในการเรียก เป็น {{title}} ก็จะดึงค่ามาแสดง

?

src/app/product-list/product-list.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import { Component, OnInit } from '@angular/core';   @Component({   selector: 'app-product-list',   templateUrl: './product-list.component.html',   styleUrls: ['./product-list.component.css'] })   export class ProductListComponent implements OnInit {     title = 'Product List';     constructor() { }     ngOnInit() {   }   }

?

src/app/product-list/product-list.component.html

1	<h1>{{title}}</h1>

Angular 8 - Tutorial Your First App กับการสร้าง Component

ตัวอย่าง App แรกของ Tutorial อ่านได้จาก https://angular.io/start
เราจะเริ่มสร้าง Component โดยใช้ Tutorial Your First App เป็น Guide

โดยขั้นแรกเราจะทำ Title แล้วก็ปุ่ม Cart พร้อมกับ Product 1 บรรทัดตามรูป

เริ่มโดยใช้คำสั่ง ng generate component [component-name]

?

cmd

1 2	ng generate component top-bar ng generate component product-list

Angular 8 - ติดตั้ง Node.js และ Angular กับพื้นฐานโครงสร้าง

การใช้ Angular 8 ต้องติดตั้ง Node.js Version 10 อ้างอิงตาม https://angular.io/guide/setup-local
ติดตั้ง Node.js ไปโหลดตามนี่เลย https://nodejs.org/en/

หลังจากติดตั้ง Node.js เรียบร้อยแล้วให้ทำการติดตั้ง Angular

?

cmd

1 2 3 4 5 6

# npm install -g   # In global mode (ie, with -g or --global appended to the command), # it installs the current package context (ie, the current working directory) as a global package.   npm install -g @angular/cli

เมื่อทำการติดตั้งเรียบร้อยแล้วเราจะสามารถใช้คำสั่ง ng ในการสร้าง Project Angular ได้
คำสั่ง ng new สำหรับสร้าง Project และ ng serv เพื่อใช้รัน Angular

?

cmd

1 2 3 4 5 6

# new (n) Creates a new workspace and an initial Angular app. ng new my-app   # serve (s) Builds and serves your app, rebuilding on file changes. cd my-app ng serve --open

เมื่อ Run Server เสร็จแล้วเปิด Browser ไปที่ http://localhost:4200 จะเจอหน้า Welcome แนะนำการเขียนเบื้องต้น

Laravel 5.8 - ระบบ Authentication

สร้าง Project ผ่าน PHP Composer ส่วนนี้ผมใช้ชื่อว่า laravel_authen

?

1	composer create-project --prefer-dist laravel/laravel . "5.8.*"

เสร็จแล้วเข้าไปดูที่ Folder /database/migrations เราจะเห็นไฟล์ที่ มีชื่อท้ายว่า create_users_table.php และ create_password_reset_table.php จะเป็นไฟล์สำหรับใช้สร้าง User Table และ Password Reset Table ให้เราทำการเชื่อต่อ Project ของเราเข้ากับ Database ก่อน โดยไปที่ไฟล์ /config/database.php และไฟล์ .env แล้วทำการแก้ไขค่าการเชื่อมต่อกับ Database

?

.env

1 2 3 4 5 6

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_db DB_USERNAME=root DB_PASSWORD=

'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'laravel_Db'),
            'username' => env('DB_USERNAME', 'root'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

เมื่อทำการ Config ค่าการเชื่อมต่อกับ Database เรียบร้อยแล้ว ทำการสร้างตารางโดยสั่ง Migrate ผ่าน Artisan เมื่อสร้างเรียบร้อยแล้วให้เข้าไปตรวจสอบที่ Database ของเรา จะเห็นว่ามีตารางเพิ่มมา 2 - 3 ตารางคือ migrations, password_resets และ users

?

1	php artisan migrate

Laravel 5.8 - การเชื่อมต่อกับฐานข้อมูล MySQL

โครงสร้างใน Folder Project

- app : เก็บ Model และ Controller
- config : เก็บค่า Config ต่าง ๆ
- database : เก็บ Migration และ Seeding สำหรับสร้าง Table
- public : เก็บ CSS, JS ไฟล์ต่างๆ ที่ให้เข้าถึงได้ และ .htaccess ด้วย
- resource : เก็บส่วนการแสดงผล View
- routes : เก็บไฟล์ที่ใช้กำหนด Url
- storage : เก็บข้อมูล Caches, Session, ไฟล์ Blade Engine ที่ Complied
- tests : เก็บ Automated Test
- *.env : เก็บ Config Laravel กับ ฐานข้อมูล

การ Config ไฟล์

อ่านเพิ่มเติมได้ที่ https://laravel.com/docs/5.8/database
ไฟล์ที่เราต่อกับฐานข้อมูลจะใช้มี 2 จุด
1. project/config/database.php
2. .env

แก้ไขในส่วนของ Host, Port, DBName, Username และ Password ให้ถูกต้อง

'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'laravel_db'),
            'username' => env('DB_USERNAME', 'laravel'),
            'password' => env('DB_PASSWORD', 'laravel'),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

แก้ไขให้ถูกต้องเหมือนกัน

?

1 2 3 4 5 6

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_db DB_USERNAME=root DB_PASSWORD=

Laravel 5.8 - การติดตั้ง Laravel และ MVC

ข้อมูลจาก บทเรียนจาก Kong Ruksiam

ก่อนอื่นให้ทำการติดตั้ง XAMPP
และ Composer

เมื่อทำการติดตั้งเสร็จแล้วตรวจสอบผ่าน Command โดยคำสั่ง

?

cmd

1 2 3 4 5 6 7 8 9

# แสดง Version ของ PHP php -version PHP 7.3.12 (cli) (built: Nov 19 2019 13:58:02) ( ZTS MSVC15 (Visual C++ 2017) x64 ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.3.12, Copyright (c) 1998-2018 Zend Technologies   # แสดง Version ของ Composer composer --version Composer version 1.9.1 2019-11-01 17:20:17

(Shortcut) Update NPM and Node.JS

คำสั่งที่ใช้ในการ Update npm

?

cmd

1 2 3 4 5

# แสดง Version ของ npm npm -v   # Upgrade npm เป็น Version ล่าสุด npm install -g npm@latest

คำสั่งที่ใช้ในการ Update node.js

?

cmd

1 2 3 4 5

# แสดง Version ของ node.js node -v   # Upgrade node.js เป็น Version ล่าสุด npm install -g node