เพิ่มคำสั่งที่ routes.php แล้วก็เรียกใช้ผ่าน url http://<domain>/migrate

//Clear route cache:
Route::get('/migrate', function() {
    $exitCode = Artisan::call('migrate');
    return 'migration';
});

วิธีนี้ผมจะใช่กับ Server หรือ Host ที่ไม่ยอมให้่ ssh เข้าไป หรือใช้ php artisan migrate ไม่ได้

ผมใช้ php:7.4 และ Laravel:7 ในการสาธิต เพื่อสาธิตให้เข้าใจง่าย ผมจะสร้างเว็บ Blog อย่างง่าย คือ สามารถ Post ข้อความและรูปได้ เริ่มจาก สร้าง migration Posts Table

// class CreatePostsTable
Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->text('content');
    $table->timestamps();
});

ติดตั้ง laravel-medialibrary

composer require "spatie/laravel-medialibrary:^8.0.0"
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="migrations"
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="config"
php artisan migrate

การทำงานของ **Laravel-medialibrary** ทำงานเริ่มต้น public path จึงทำให้มันไม่พบ file เมื่อเรา addMedia สามารถแก้ได้ดังนี้

// config/filesystems.php

'links' => [
    public_path('storage') => storage_path('app/public'),
    public_path('media') => storage_path('app/media'),
],

จากนั้น php artisan storage:link เพื่อสร้าง Link directory ให้เข้าถึงไฟล์ได้ผ่าน public

// config/media-library.php

'disk_name' => env('MEDIA_DISK', 'media'),

การใช้งาน

เพิ่มความสามารถในการเก็บรูปใน Post Model ด้วย implements Spatie\MediaLibrary\HasMedia และ use Spatie\MediaLibrary\InteractsWithMedia

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;

class Post extends Model implements HasMedia
{
    use InteractsWithMedia;
}

สร้าง UI สร้างสำหรับ เขียน Post และ Upload รูป สำคัญเลยต้องมี enctype="multipart/form-data" เพราะผมลืมบ่อยมาก

<!-- resources/views/post/index.blade.php -->
....
<form enctype="multipart/form-data" action="{{ route('posts.store') }}" method="POST">
    @csrf
    <div class="card-body">
        <div class="form-group">
            <textarea class="form-control" name="content"></textarea>
        </div>
        <div class="form-group">
            <input type="file" name="images" >
        </div>
        <button class="btn btn-primary">submit</button>
    </div>
</form>
...

ผลที่ได้

แล้วส่งรูปและข้อความไปยัง function store ใน PostController

// app/Http/Controllers/PostController.php

public function store(Request $request)
{
    $path = $request->file('images')->store('media');

    $post = new Post;
    $post->content = $request->content;
    $post->save();

    $post->addMedia($path)->toMediaCollection();

    return back();
}

toMediaCollection ตรงนี้สามารถกำหนดได้หลายรูปแบบ เช่น

$post->addMedia($path)->toMediaCollection('cover');
$post->addMedia($path)->toMediaCollection('banners');
$post->addMedia($path)->toMediaCollection('attach-image');

ทำให้ระบุได้เลยว่า รูปชุดนี้ใช้ทำอะไร รูปชุดนั้นใช้ทำอะไร

การแสดงผล

ทำได้งานๆ โดย $item->getMedia()->first() ได้เลยตามนี้ หรือ วิธีอื่นๆ

<!-- resources/views/post/index.blade.php -->
...
@foreach ($posts as $item)
    <div class="card mb-3">
        <div class="card-body pb-1">
            <p>
                {!! $item->content !!}
            </p>
        </div>
        <picture>
            {{ $item->getMedia()->first() }}
        </picture>
    </div>
@endforeach
...

ผลที่ได้

นอกจากนี้ยังมีการ Resize Image อยู่ก็สามาทำง่ายเพียงแค่เพิ่ม function ลงใน Model

...
use Spatie\MediaLibrary\MediaCollections\Models\Media;
...
public function registerMediaConversions(Media $media = null): void
{
    $this->addMediaConversion('thumb')
            ->width(368)
            ->height(232)
            ->sharpen(10);
}
...

จากนั้นเมื่อ addMedia ทุกครั้งมันก็จะ Resize Image ให้ทั้งที และนำไปใช้ด้วย

$media->getPath();  // the path to the where the original image is stored
$media->getPath('thumb'); // the path to the converted image with dimensions 368x232

$media->getUrl();  // the url to the where the original image is stored
$media->getUrl('thumb'); // the url to the converted image with dimensions 368x232

เท่านี้ ครับไปลองใช้กันได้

REF

• Laravel filesystem
• Install laravel-medialibrary

วิธีที่ผมใช้นี้มีแค่ Docker ก็เพียงพอแล้ว สำหรับการเริ่มต้นโปรเจค

1. ติดตั้ง Laravel ด้วย $ docker run --rm --interactive --tty \\ --volume $PWD:/app \\ composer create-project --prefer-dist laravel/laravel laravel-blog

2. เข้า https://phpdocker.io/generator เพื่อสร้างไฟล์ docker-compose.yml ตั้งชื่อโปรเจค laravel-blog

    Global configuration
        — Project name : laravel-blog
        — Base port: 8080
    PHP configuration
        — PHP Version: 7.2.x
        — Extensions (PHP 7.2.x): MySQL, Bcmath, GD
    MySQL
        — Enable MySQL
        — Version: 5.7
            — Root Password: toor
            — Database Name: admin_laravel_blog
            — Database Username: admin_laravel_blog
            — Database Password: 123456
   

   แล้วกด “Generate project archive” จะได้รับ “laravel-blog.zip”

3. แตกไฟล์ laravel-blog.zip unzip laravel-blog.zip && mv laravel-blog/* /<project_path>/aravel-blog
4. แก้ไข้ .env

    DB_CONNECTION=mysql
    DB_HOST=msql
    DB_PORT=3306
    DB_DATABASE=admin_laravel_blog
    DB_USERNAME=admin_laravel_blog
    DB_PASSWORD=1234
   

5. เปิด server project ด้วยคำสั่ง $ docker-compose up
6. รันคำสั่ง $ docker-compose exec php-fpm php artisan migate
7. เปิด Browser “http:/127.0.0.1:8080”

1. Download Sequel Pro
2. Installation cviebrock/sequel-pro-laravel-export
3. ใช้ Sequel Pro Export ตารางออกมา - Export from Sequel Pro to a Laravel Migration

1. Download Sequel Pro
2. Installation cviebrock/sequel-pro-laravel-export
3. ใช้ Sequel Pro Export ตารางออกมา - Export from Sequel Pro to a Laravel Migration

Kiosk คือเครื่องให้บริการแบบเป็นตู้ๆ วางไว้ตามที่ต่างๆ ที่ำกันสิทธิของ User ให้ทำได้แค่ไม่กี่อย่าง

1. สร้าง shortcut ของ Chrome
2. คลิกขวาเปิด Properties
3. ที่ช่อง Target: เพิ่ม ...chrome.exe" --kiosk --kiosk-print --overscroll-history-navigation=0 "https://gist.github.com/" อาจจะแก้เป็นเว็บที่เราต้องการ
   • --kiosk - เปิดโหมด kiosk
   • --kiosk-print - เพิ่มซ่อน dialog print จาก User
   • --disable-pinch - เพื่อให้จอ kiosk ของ Zoom ไม่ได้ Lock การ Zoom นั้นเอง
   • --overscroll-history-navigation=0 - Lock ไม่ให้ปัดน่าจอเพื่อย้อนกลับ
4. คลิก Apply
5. เปิด shortcut chrome สร้างเอาไว้

วิธีที่ผมใช้นี้มีแค่ Docker ก็เพียงพอแล้ว สำหรับการเริ่มต้นโปรเจค

1. ติดตั้ง Laravel ด้วย $ docker run --rm --interactive --tty \\ --volume $PWD:/app \\ composer create-project --prefer-dist laravel/laravel laravel-blog

2. เข้า https://phpdocker.io/generator เพื่อสร้างไฟล์ docker-compose.yml ตั้งชื่อโปรเจค laravel-blog

    Global configuration
        — Project name : laravel-blog
        — Base port: 8080
    PHP configuration
        — PHP Version: 7.2.x
        — Extensions (PHP 7.2.x): MySQL, Bcmath, GD
    MySQL
        — Enable MySQL
        — Version: 5.7
            — Root Password: toor
            — Database Name: admin_laravel_blog
            — Database Username: admin_laravel_blog
            — Database Password: 123456
   

   แล้วกด “Generate project archive” จะได้รับ “laravel-blog.zip”

3. แตกไฟล์ laravel-blog.zip unzip laravel-blog.zip && mv laravel-blog/* /<project_path>/aravel-blog
4. แก้ไข้ .env

    DB_CONNECTION=mysql
    DB_HOST=msql
    DB_PORT=3306
    DB_DATABASE=admin_laravel_blog
    DB_USERNAME=admin_laravel_blog
    DB_PASSWORD=1234
   

5. เปิด server project ด้วยคำสั่ง $ docker-compose up
6. รันคำสั่ง $ docker-compose exec php-fpm php artisan migate
7. เปิด Browser “http:/127.0.0.1:8080”

การกำหนดขนาดหน้าจอ Responsive 5 ขนาดในแบบ Botstrap ประกอบด้วย xl lg md sm และ xs จากหัวข้อ Responsive breakpoints สิ่งที่นำมาใช่อย่างได้ผลมีดังนี้

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

1. เพิ่ม gem 'jekyll-titles-from-headings' ลงใน Gemfile
2. รันคำสั่ง bundle update เพื่อติดตั้งมัน
3. เพิ่ม jekyll-titles-from-headings ลงใน plugins array ใน _config.yml

4. เพิ่มคำสั่งตั้งค่าใน _config.yml:

    titles_from_headings:
        enabled:     true
        strip_title: true
        collections: true
   

5. ทดสอบด้วยการสร้าง Post ใหม่ _posts/2018-04-10-title-strip.md

    ---
    title: "Title Strip Test Post"
    ---
   
    # Title Override
   

ค่า page.title ที่ได้จะเป็น Title Override ตาม Header ใน .md

Ref:

• Jekyll Titles from Headings
• How to use Jekyll Titles from Headings