Angular 8 - เรียกข้อมูลแบบ JSON ผ่าน HTTPClient

เตรียมข้อมูล JSON ชื่อ shipping.json ใน Folder assets แล้วทดสอบเรียกผ่าน URL : "http://localhost:4200/assets/shipping.json"

[
    {
        "type": "Overnight",
        "price": "25.99"
    },{
        "type": "2-Day",
        "price": "9.99"
    },{
        "type": "Postal",
        "price": "2.99"
    }
]

Angular 8 - บริการเก็บข้อมูลด้วย Service

การสร้าง Service ที่ใช้ในการจัดการข้อมูลต่าง ๆ ใน App ของเราใช้ Tutorial Guide จาก https://angular.io/start/data
ใน App ของเรานั้นจำเป็นต้องมี Service เอาไว้ใช้งาน เราสามารถใช้ในการจัดการข้อมูล และดึงข้อมูลจากแหล่งข้อมูลอื่น ๆ ผ่านทาง Service ได้ สำคัญมาก

สร้าง Service ชื่อ CartService ไว้เก็บข้อมูลการสั่งซื้อมือถือ ให้ใช้คำสั่ง "ng generate service cart" เสร็จแล้วเราจะได้ไฟล์มา 2 ไฟล์
1. "src/app/cart.service.spec.ts" และ 2. "src/app/cart.service.ts" เราจะเข้ามาแก้ไฟล์ที่ 2. นี่กัน

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class CartService {

  constructor() { }
}

ให้เราเพิ่ม Function 3 ตัวคือ addItem() ใช้เพิ่ม Item ลงตะกร้า , getItems() เรียกดูค่า Item ในตะกร้า และ clearItems() ลบ Item ออกจากตะกร้าทั้งหมด

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class CartService {

  items = [];

  addItem(product) {
    this.items.push(product);
  }

  getItems() {
    return this.items;
  }

  clearItems() {
    this.items = [];
  }

  constructor() { }

}

Angular 8 - แบ่ง Component เป็นหน้า ๆ กับ Router Module

ความเดิมจากตอนที่แล้วเราได้ทำการ Follow Guide หัวข้อ Your First App เสร็จแล้ว https://angular.io/start
ให้หัวข้อต่อมาเรื่องของ Routing https://angular.io/start/routing จะเริ่มสร้างหน้าย่อ ๆ กัน

ใช้ Code ต่อจากตอนที่แล้วเราจะทำการเพิ่ม RouterModule อย่างเดียวแล้วทำความเข้าใจกันก่อนว่ามันเป็นส่วนไหน
ให้เราทำการ Import Module ชื่อ "RouterModule" และทำการ Import และใส่ข้อมูล Path ด้วยใน "RouterModule.forRoot([])"
ส่วนของ path ใช่เป็น ' ' หมายถึง Root และแสดง Component ProductListComponent

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { RouterModule } from '@angular/router';

import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';


@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent,
    ProductListComponent,
    ProductAlertsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot([
      { path: '', component: ProductListComponent }
    ]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

<app-top-bar></app-top-bar>
<app-product-list></app-product-list>

<router-outlet></router-outlet>

Angular 8 - สร้าง Component ใน Component ไปอีก

สร้างปุ่ม Notify Me เป็นแล้วเรียกใช้ใน Product List โดยจะสร้างเป็น Component และมีการรับค่าด้วย

เริ่มด้วยการสร้าง Component ชื่อ product-alerts อย่าลืมใช้คำสั่ง ng generate component product-alerts
แล้วเพิ่มปุ่ม Notify Me ใน Template

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

<p>
    <button>Notify Me</button>
</p>

Angular 8 - สร้าง Event กับ Component และ เงื่อนไขในการแสดงผล

หัวข้อที่แล้วเราได้รู้จักกับ *ngFor, Interpolation {{ }} และ Property Binding [ ] ไปแล้ว
ในส่วนที่เราจะมาทำความรู้จักกับอีก 2 ตัวคือ *ngIf และ Event Binding ( ) กัน

พาทนี้ยังอยู่กับ https://angular.io/start ครับ โดยจากภาพแล้วเราจะทำการแสดง Description ออกมา
ส่วน Product ไหนไม่มี Description เราก็จะไม่แสดง

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}} ก็จะดึงค่ามาแสดง

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() {
  }

}

<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]

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

# 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

# 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

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

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

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'),
            ]) : [],
        ],

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

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 โดยคำสั่ง

# แสดง 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

# แสดง Version ของ npm
npm -v 

# Upgrade npm เป็น Version ล่าสุด
npm install -g npm@latest 

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

# แสดง Version ของ node.js
node -v 

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