กันยายน 2020

Laravel ใช้งาน views blade template engine EP3

การพัฒนาเว็บไซต์ด้วยชุด framework ต่าง ๆ จะให้ได้รับความนิยมของ framework นั้น ๆ ต้องมีความพร้อมในเรื่องการจัดการ view ก็คือเครื่องมือการพัฒนาในส่วนของงานการแสดงผลของ data ต่าง ๆ การที่ laravel มาพร้อมกับ blade template engine นี้ถือว่าครบเพียบพร้อม เหมาะแก่การใช้งานเป็นอย่างมาก บทความนี้จะพาไปรู้จักการใช้งาน blade template engine นี้กันว่ามีการทำงานร่วมกับ laravel อย่างไรได้บ้าง

การใช้งาน Blade เพื่อ displaying data จาก controller

การที่จะนำค่าที่ผ่านกระบวนการทำงานจาก controller ไปที่ views (*.blade.php) โดยไฟล์ *.blade.php ทั้งหมดจะถูกจัดเก็บไว้ที่ resources/views/*

  • สร้างไฟล์ {viewname}.blade.php ตัวอย่าง views/example/datatype.blade.php
<html>

<body>
  <h1>DataType</h1>
  <h3>String</h3>
  <p>{{$string}}</p>
  <hr />
  <h3>Boolean</h3>
  <p>{{$boolean}}</p>
  <hr />
  <h3>Integer</h3>
  <p>{{$integer}}</p>
  <hr />
  <h3>Object</h3>
  <p>{{$object['content']}}</p>
  <hr />
  <h3>Array</h3>
  <p>
    <ol>
      @foreach($array as $index=> $item)
      <li>{{$item['content']}}</li>
      @endforeach
    </ol>
  </p>
  <hr />
</body>

</html>
  • แก้ไขไฟล์ routes/web.php กำหนด view(‘datatype’,[?]) กำหนด parameter data ที่จะส่งไปที่ view ใน arg ที่ 2 [?]
Route::get('/datatype', function () {
  return view('/example/datatype', [
    'string' => 'Laravel ใช้งาน view (blade template), json ,pdf',
    'boolean' => true,
    'integer' => 9999,
    'object' => [
      'content' => 'Laravel ใช้งาน view (blade template), json ,pdf EP3',
      'author' => 'poolsawat'
    ],
    'array' => [
      ['content' => 'Laravel เริ่มติดตั้งและสร้าง route ง่าย ๆ EP1'],
      ['content' => 'Laravel แนะนำโครงสร้างภายในโปรเจค อธิบายแต่ละส่วนการทำงาน EP2'],
      ['content' => 'Laravel ใช้งาน view (blade template), json ,pdf EP3'],
    ]
  ]);
});

การใช้งาน blade ในกรณีต้องการใช้งาน control structures (IF ,ELSE ,SWITCH ,LOOP (for ,foreach ,while) ต่าง ๆ เหล่านี้ ทำอย่างไร

ในบางครั้ง บางกรณีที่ต้องการตะเช็คเงื่อนไขในการที่จะแสดงผลของ data หรืออยากที่จะแสดงผลค่าที่เป็นในลักษณะชุดข้อมูล (array) ทาง blade ก็มีคำสั่งมาให้พร้อมแล้ว โดยการที่จะเรียกคำสั่งนั้น จะมี tag @ ตามด้วย name เช่น @if ,@for เป็นต้น

  • สร้างไฟล์ views/example/control.blade.php
<!DOCTYPE html>
<html lang="en">

<body>
  <h1>Control Structures</h1>
  <p>IF ,ELSEIF ,ELSE ,LOOP (FOR,FOREACH,WHILE) ,SWITCH</p>
</body>
<h1>IF</h1>
@if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif
<hr />
<h1>SWITCH</h1>
@switch($case)
@case(1)
First case...
@break

@case(2)
Second case...
@break

@default
Default case...
@endswitch
<hr />
<h1>LOOP</h1>
<h3>FOR</h3>
@for ($i = 0; $i
< 4; $i++) <br />The current value is {{ $i }} @endfor
<h3>FOREACH</h3>
@foreach ($records as $rec)
<p>This is record {{ $rec }}</p>
@endforeach
<hr />
<h3>FORELSE</h3>
@forelse ($records as $rec)
<li>{{ $rec }}</li>
@empty
<p>No users</p>
@endforelse
<hr />
<h3>WHILE</h3>
@php
$i = 0
@endphp
@while ($i < 4) <p>I'm looping forever.</p>
  @php
  $i++
  @endphp
  @endwhile

</html>
  • แก้ไขไฟล์ routes/web.php โดยเพิ่ม route “control-structures” เข้าไป
Route::get('/control-structures', function () {
  return view('example/control', [
    'records' => [1, 2, 3, 4],
    'case' => 2
  ]);
});

การใช้งาน blade กับการทำ component แยกส่วน

framework ที่ได้รับความนิยมในปัจจุบัน React , Angular ,Vue มีจุดเด่นเรื่องการทำ Component management โดยทั้งสิ้น Laravel เองก็มี concept นี้ด้วยเช่นกัน (ทีมเดียวกับที่พัฒนา Vue) ถือเป็นข้อดีอีกอย่างที่อยากแนะนำให้ใช้งาน laravel

  • สร้างไฟล์ views/example/component.blade.php , views/components/alert.blade.php ,views/components/message.blade.php ,views/components/message-slot.blade.php ตาลำดับ
<!-- views/example/component.blade.php -->
<!DOCTYPE html>
<html lang="en">

<body>
  <h1>Component</h1>
  <h3>empty data</h3>
  @component('components/message',[])
  @endcomponent
  <hr />
  <h3>has data</h3>
  @component('components/message',['name' => 'poolsawat.com'])
  @endcomponent
  <hr />
  <h3>append slot</h3>
  @component('components/message-slot',[])
  <div>element slot 1</div>
  <div>element slot 2</div>
  @endcomponent
  <hr />
  <x-alert />
</body>

</html>
<!-- views/components/alert.blade.php -->
<h1>x-{component}</h1>
<!-- views/components/message.blade.php -->
<h2>
  @if (empty($name))
  component message ...
  @else
  component message {{$name}}
  @endif
</h2>
<!-- views/components/message-slot.blade.php -->
<h2>
  component message append slot
  {{ $slot }}
</h2>
  • แก้ไขไฟล์ routes/web.php เพิ่ม route “components”
Route::get('/components', function () {
  return view('example/component', []);
});
  • ดูผลลัพธ์ที่
  • components ของ laravel มีรูปแบบการเรียกได้ 2 วิธี
    1. @component(‘components/alert’,[]) @endcomponent สามารถเรียกได้แบบนี้จากหน้า views
    2. <x-alert /> สามารถเรียกได้แต่ต้องมีไฟล์ app/View/Components/Alert.php โดย genarate Component ได้ด้วยคำสั่ง artisan package นี้ php artisan make:component Alert
<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.alert');
    }
}

เหล่านี้คือการเรียกใช้งาน blade template engine ง่าย ๆ ยังมีความสามารถอีกเยอะมาก ศึกษาเพิ่มเติ่มที่นี่

Laravel แนะนำโครงสร้างภายในโปรเจค อธิบายแต่ละส่วนการทำงาน EP2

หลังจากที่ได้ทำการติดตั้งตามบทความนี้แล้ว “Laravel เริ่มติดตั้งและสร้าง route ง่าย ๆ EP1” บทความนี้จะมาอธิบายเพิ่มเติมแต่ละส่วนของโครงสร้างโปรเจคว่ามีหน้าที่ทำอะไร และตัวอย่างการใช้งานอย่างไรได้บ้าง

มาทำความรู้จักโครงสร้างของ Laravel กัน

  • app/Console
  • app/Exceptions จัดการ Error Exception จากการทำงานที่ผิดพลาด
  • app/Http
    • app/Http/Controllers จัดเก็บ Controllers file (*Controller.php) สำหรับเก็บ Logic ,Route ,Repository ,ORM ต่าง ๆ จะเขียนในไฟล์เหล่านี้
    • app/Http/Middleware จัดเก็บไฟล์ middleware เข้าออกจอง Routes ต่าง ๆ เช่น การทำ Basic Authenticate ,Session Handlers เป็นต้น
    • app/Kernel
  • app/Models เก็บ Model จาก databases ต่าง ๆ กำหนด
  • app/Providers เก็บไฟล์ Providers กำหนด เช่น BroadcasProvider ,EventServiceProvider ,RouteServiceProvider เป็นต้น
  • bootstrap
    • bootstrap/cache
    • bootstrap/app.php
  • config
    • config/app.php เก็บค่า config ระดับ app เช่น ชื่อ app ,env (production) ,timezone UTC เป็นต้น
    • config/auth.php
    • config/broadcasting.php
    • config/cache.php
    • config/cors.php
    • config/databases.php เก็บ database driver ต่าง ๆ mysql , pgsql, sqlsrv ,sqlite เป็นต้น
    • config/filesystems.php
    • config/hashing.php
    • config/logging.php
    • config/mail.php
    • config/queue.php
    • config/services.php
    • config/session.php
    • config/view.php
  • database
    • database/factories
    • database/migrations เก็บไฟล์ script create table ของ database
    • database/seeders
  • public หลังจาก compile laravel mix จะถูกมาเก็บในนี้ ไฟล์ที่นี่
    • public/.htaccess
    • public/favicon.ico
    • public/index.php
    • public/rebots.txt
  • resources
    • resources/css เก็บไฟล์ css ( Cascading Style Sheets ) ต่าง ๆ
    • resources/js เก็บไฟล์ js (Javascript ) ต่าง ๆ
    • resources/lang
    • resources/views เก็บไฟล์ view (*.blade) ต่าง ๆ
  • routes
    • routes/api.php จัดการ route RESTApis ต่าง ๆ (laravel –resource )
    • routes/channels.php
    • routes/console.php
    • routes/web.php จัดการ route ทั่วไป แบบปกติจะจัดการที่ไฟล์นี้เป็นส่วนใหญ๋
  • storage
    • storage/app/public
    • storage/framework
    • storage/logs
  • tests เขียน unittest ต่าง ๆ
    • tests/Feature
    • tests/Unit
  • vender จัดการ libraries ต่าง ๆ ที่ได้จากการติดตั้ง laravel ตั้งแต่เริ่มต้น
  • .env เก็บค่า config ต่าง ๆ โดยจะแบ่งเป็น dev , prod
  • artisan
  • composer.json
  • package.json
  • webpack.mix.js จัดการไฟล์ต่าง ๆ ที่เป็น css ,js ก่อนการ compile minify จะได้ output เก็บที่ public/

ในบ้าง directory ,file ไม่ได้เข้าไปยุ่งเกี่ยวในระหว่างการใช้งาน จะขอไม่อธิบาย หากคุณต้องการศึกษาเพิ่มเติม https://laravel.com/docs/7.x/structure

Laravel เริ่มติดตั้งและสร้าง route ง่าย ๆ EP1

Laravel ปัจจุบันเดินทางมาถึงเวอร์ชั่น 8.X แล้ว ตั้งแต่เวอร์ชั่น 5 จนมาถึงปัจจุบันมีออะไรเปลี่ยนไปค่อนข้างเยอะ ที่เห็นได้ชัด ๆ เรื่องเวอร์ชั่นหลักของ PHP ที่เปลี่ยนจาก 5.X ไปเป็น 7.X เพิ่มความสามารถ ปรับปรุงเรื่องความปลอดภัยและ อื่น ๆ อีกมากมาย

เตรียมเครื่องมือ ทำความรู้จักเบื้องต้น

  • Composer เป็น PPM (PHP Packages management) จัดการ package ในภาษา PHP ส่วนของ Laravel จะให้ในการติดตั้ง global laravel/installers ศึกษาเพิ่มเติมที่นี่
    • composer global require laravel/installer
      • laravel new blog
    • composer create-project –prefer-dist laravel/laravel blog
  • VSCode เครื่องมือใช้สำหรับเขียนโค๊ด laravel ที่จะมี extensions ที่ช่วยเรื่องการเขียน Laravel ให้ดียิ่งขึ้น

เริ่มติดตั้งใช้งานเบื้องต้น

  1. ติดตั้ง composer ให้เรียบร้อย (ข้ามไป ไม่พูดถึงขั้นตอนนี้) จากนั้นตรวจสอบเวอร์ชั่น
    $ composer --version
    > Composer version 1.9.2 2020-01-14 16:30:31
    1. การติดตั้งแบบที่ 1 ติดตั้งด้วยการใช้ laravel cmd ที่ได้จากการติดตั้งจากขั้นตอนนี้
      $ composer global require laravel/installer
      $ laravel new blog
    2. การติดตั้งด้วย composer โดยตรง
      $ composer create-project --prefer-dist laravel/laravel blog
  2. ตัวอย่างใช้คำสั่ง
    $ laravel new poolsawat.com
    > Crafting application... Loading composer repositories with package information Installing dependencies (including require-dev) from lock file Package operations: 106 installs, 0 updates, 0 removals - Installing doctrine/inflector (2.0.3): Loading from cache - Installing doctrine/lexer (1.2.1): Loading from cache - Installing dragonmantank/cron-expression (3.0.1): Downloading (100%) - Installing voku/portable-ascii (1.5.3): Loading from cache ... > @php -r "file_exists('.env') || copy('.env.example', '.env');" > @php artisan key:generate --ansi [32mApplication key set successfully.[39m > Illuminate\Foundation\ComposerScripts::postAutoloadDump > @php artisan package:discover --ansi Discovered Package: [32mfacade/ignition[39m Discovered Package: [32mfideloper/proxy[39m Discovered Package: [32mfruitcake/laravel-cors[39m Discovered Package: [32mlaravel/tinker[39m Discovered Package: [32mnesbot/carbon[39m Discovered Package: [32mnunomaduro/collision[39m [32mPackage manifest generated successfully.[39m Application ready! Build something amazing.
  3. ตรวจสอบโครงสร้างไฟล์ จะได้หน้าตาแบบนี้

4. ทำการสร้าง route “hello” ที่ไฟล์ route/web.php

5. รันคำสั่ง start server
$ php artisan serve
> Starting Laravel development server: http://127.0.0.1:8000

6. เช็คผลการสร้าง route “hello” ได้ที่ http://localhost:8000/hello

นี่คือแบบที่ง่ายที่สุด สำหรับมือใหม่ บทความต่อ ๆ ไปจะมาเรียนรู้เรื่องอะไรกัน คอยติดตามด้วยนะครับ

ทำความเข้าใจ Date & Time Function MySQL ถ้ารู้แล้วจะทำให้ชีวิตดีขึ้น 10 เท่า

สำหรับข้อมูล Datatype ประเภท Date ,DateTime ,Time ,Timestamp ,Year เหล่านี้ จะทำให้เรามึนงงและเป็นปัญหา และจะจัดการได้ยาก ยกตัวอย่างเคสต่าง ๆ เหล่านี้ เช่น

  • หาวันเวลา ปัจจุบัน
  • ต้องการเปลี่ยน format ของ column Date ให้ส่วนของค่าที่ Query มาได้
  • ต้องการที่จะหาวัน ที่ต้องการเมื่อในอดีตที่ผ่านมา
  • อยากที่จะคำนวนช่วงเวลา นาที ,ชั่วโมง ,วัน ,เดือน หรือ ปีของ Datetime ทั้ง 2 columns ว่า มีช่วงห่างกันเท่าไหร่
  • ต้องการหาวันสุดท้ายของเดือน เช่น 28 ,29 ,30 ,31
  • และอื่น ๆ อีกมากมาย

*** Function ต่าง ๆ ที่จะยกตัวอย่าง บาง function จะมาใน MySQL 8.0 อาจจะไม่ทำงานบน MySQL ที่ต่ำกว่า 8.0 ***

https://dev.mysql.com/doc/refman/8.0/en/date-and-time-functions.html#function_date

ลองเล่น Function ต่าง ๆ กัน

Function ที่หา Date จากปัจจุบัน

/* แสดงวันที่ เวลา ปัจจุบัน */
SELECT NOW();  /* '2020-09-22 09:15:09' */
SELECT CURRENT_TIMESTAMP(); /* '2020-09-22 09:22:11' */
/* แสดงวันที่ปัจจุบัน เท่านั้น */
SELECT CURRENT_DATE();  /* '2020-09-22' */
SELECT CURRENT_DATE; /* '2020-09-22' */
SELECT CURDATE(); /* '2020-09-22' */
/* แสดงเวลา ปัจจุบัน เท่านั้น */
SELECT CURRENT_TIME();  /* '09:21:30' */
SELECT CURRENT_TIME; /* '09:21:30' */
SELECT CURTIME(); /* '09:21:30' */
/* แสดงวัน ของแต่ละเดือน */ 
SELECT DAY(NOW()); /* 22 */
SELECT DAYOFMONTH(NOW()); /* 22 */
/ * แสดงลำดับวัน ของสัปดาห์ */
SELECT DAYOFWEEK(NOW());  /* 3 (คือวัน วันอังคาร) */
/* แสดงวันที่ ลำดับ ใน 1 ปี ( 0 - 365 ) */
SELECT DAYOFYEAR(NOW()); /* 266 (2020-09-22)*/

แปลง หรือ เปลี่ยน format ของ Date

/* แสดง format ของ Date ต้นทาง */
SET @SOURCE_DATE = DATE('2020-09-22'); 
SELECT @SOURCE_DATE as origin_date; /* '2020-09-22' */
SELECT DATE_FORMAT(@SOURCE_DATE,'%d/%m/%Y') as dmy_date;  /* '22/09/2020' */
SELECT DATE_FORMAT(@SOURCE_DATE,'%d/%m/%Y %H:%i:%s') as dmyhms_date; /* '22/09/2020 00:00:00' */

หาวันก่อนหน้า (วันที่ในอดีต) หรือวันถัดไป (วันที่ในอนาคต)

SET @SOURCE_DATE = TIMESTAMP('2020-09-22 00:00:00');
SELECT DATE_ADD(@SOURCE_DATE , INTERVAL 10 MONTH) as add_10_month; /* '2021-07-22 00:00:00' (เพิ่ม 10 วินาที ) */
SELECT DATE_ADD(@SOURCE_DATE , INTERVAL 10 DAY) as add_10_day; /* '2020-10-02 00:00:00' (เพิ่ม 10 วินาที ) */
SELECT DATE_ADD(@SOURCE_DATE , INTERVAL 10 HOUR) as add_10_hour; /* '2020-09-22 10:00:00' (เพิ่ม 10 วินาที ) */
SELECT DATE_ADD(@SOURCE_DATE , INTERVAL 10 MINUTE) as add_10_minute; /* '2020-09-22 00:10:00' (เพิ่ม 10 วินาที ) */
SELECT DATE_ADD(@SOURCE_DATE , INTERVAL 10 SECOND) as add_10_second; /* '2020-09-22 00:00:10' (เพิ่ม 10 วินาที ) */


SELECT DATE_ADD(@SOURCE_DATE , INTERVAL 10 MONTH) as sub_10_month; /* '2019-11-22 00:00:00' ( ลบ 10  เดือน)  */
SELECT DATE_ADD(@SOURCE_DATE , INTERVAL 10 DAY) as sub_10_day; /* '2020-09-12 00:00:00'  (ลบ10  วัน) */
SELECT DATE_ADD(@SOURCE_DATE , INTERVAL 10 HOUR) as sub_10_hour; /* '2020-09-21 14:00:00' (ลบ 10  ชั่วโมง) */
SELECT DATE_ADD(@SOURCE_DATE , INTERVAL 10 MINUTE) as sub_10_minute; /* '2020-09-21 23:50:00' (ลบ 10  นาที) */
SELECT DATE_ADD(@SOURCE_DATE , INTERVAL 10 SECOND) as sub_10_second; /* '2020-09-21 23:59:50' (ลบ 10  วินาที )*/

คำนวน ปี ,เดือน ,วัน ,ชั่วโมง ,นาที ,วินาที

SET @BEFORE_DATETIME = TIMESTAMP('2020-08-10 10:10:10');
SET @AFTER_DATETIME = TIMESTAMP('2020-09-20 20:20:20');
SELECT  DATEDIFF(@AFTER_DATETIME,@BEFORE_DATETIME) as diff_year;  /* ห่างกัน 41 วัน */

SELECT TIMESTAMPDIFF(YEAR,@BEFORE_DATETIME,@AFTER_DATETIME) as diff_year; /* ห่างกัน 0 ปี */
SELECT TIMESTAMPDIFF(MONTH,@BEFORE_DATETIME,@AFTER_DATETIME) as diff_month; /* ห่างกัน 1 เดือน */
SELECT TIMESTAMPDIFF(DAY,@BEFORE_DATETIME,@AFTER_DATETIME) as diff_day; /* ห่างกัน 41 วัน */
SELECT TIMESTAMPDIFF(HOUR,@BEFORE_DATETIME,@AFTER_DATETIME) as diff_hour; /* ห่างกัน 994 ชั่วโมง */
SELECT TIMESTAMPDIFF(MINUTE,@BEFORE_DATETIME,@AFTER_DATETIME) as diff_minute; /* ห่างกัน 59650 นาที */
SELECT TIMESTAMPDIFF(SECOND,@BEFORE_DATETIME,@AFTER_DATETIME) as diff_second; /* ห่างกัน 3579010 วินาที */

ตัด ปี ,เดือน ,วัน ,ชั่วโมง ,นาที ,วินาที

SET @TARGET_DATETIME = '2020-09-22 10:15:20';
SELECT DATE(@TARGET_DATETIME) as date_date; /* 2020-09-22 */
SELECT YEAR(@TARGET_DATETIME) as year_date; /* 2020 */
SELECT MONTH(@TARGET_DATETIME) as month_date; /* 9 */
SELECT WEEK(@TARGET_DATETIME) as week_date; /* 38 */
SELECT DAY(@TARGET_DATETIME) as day_date; /* 22 */
SELECT HOUR(@TARGET_DATETIME) as hour_date; /* 10 */
SELECT MINUTE(@TARGET_DATETIME) as minute_date; /* 15 */
SELECT SECOND(@TARGET_DATETIME) as second_date; /* 20 */

สำหรับ Function อื่น ๆ ของ Date & Time ของ MySQL Database สามารถเข้าไปศุกษาเพิ่มเติมได้ที่นี่ “Date and Time Functions”