Laravel - Using Frontend & Rest API
Hai semuanya, di materi study kasus kali ini kita akan membahas menggunakan Frontend / Webapp atau API Resources (Rest API) dengan Laravel, diantaranya yaitu
- Using static Resource API
- Create Sample Frontend
- Deploy Production Mode
- Build & Run Docker images
- Cleanup
Ok langsung aja kita ke pembahasan yang pertama
Using static Resource API
Untuk membuat Resource API di Laravel kita buat controllernya dulu dengan menggunakan perintah:
Kemudian kita edit file app/Http/Controllers/MahasiswaController.php
seperti berikut:
Lalu kita tambahkan juga Endpoint/Route API di routes/api.php
seperti berikut:
Untuk melakukan testing Rest API nya kita buat file Request Http atau menggunakan Postman request seperti berikut:
Dan yang terakhir buat environtment juga supaya memudahkan untuk menjalankan di berbagai environment seperti berikut:
Nah sekarang kita coba jalankan dulu untuk Development mode yaitu menggunakan perintah:
Sekarang kita jalankan Http Requestnya menggunakan env dev
yaitu localhost:8000
untuk get Mahasiswa list
dan get mahasiswa id
maka hasilnya seperti berikut:
-
Get Mahasiswa list
-
Get Mahasiswa id
Create Sample Frontend Apps
Untuk membuat frontend application di Laravel kita bisa include CSS dan JS menggunakan Laravel Mix. Laravel Mix is a package developed by Laracasts creator Jeffrey Way, provides a fluent API for defining webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors.
Sebagai contoh kita akan menginstall package bootstrap
, font-awesome
, jquery
, jquery-datatables
menggunakan perintah berikut:
Kemudian kita bundle js
, css
libraries dari folder node_modules
menggunakan webpack.mix.js
dengan meng-import nya di folder resources/{js,css}
seperti berikut:
-
Import js dengan edit file
resources/js/app.js
seperti berikut: -
Import css file dengan edit file
resources/css/app.css
seperti berikut: -
Kemudian kita edit file
resources/view/welcome.blade.php
seperti berikut:
Setelah itu kita compile file js, css nya dengan menggunakan perintah:
Dan kita coba jalankan PHP development mode menggunakan perintah seperti berikut:
Sekarang kita coba access browsernya, maka hasilnya seperti berikut:
Deploy Production Mode
Ok sekarang kita update deployment ke server production untuk tambahan feature Frontend dan Rest API. Tpi sebelum itu karena kita menggunakan NPM untuk menginstall depedencynya. jadi kita perlu install NodeJS dulu di Server dengan menggunakan perintah berikut:
Kemudian kita upload source-code terbaru dengan menggunakan perintah scp
seperti berikut:
Setelah kita upload, sekarang kita install dependencynya menggunakan perintah seperti berikut:
Sekarang kita coba access menggunakan browser, maka hasilnya seperti berikut:
Build & Run Docker images
Setelah kita memahami manual deploymentnya ke production server, sekarang kita build docker imagenya. Untuk membuild docker image brati kita memiliki 2 environment yaitu php
dan node
nah jadi bagaimana solusinya
- Build custome image (include
node
danphp-apache
) - multiple stage
Klo saya sendiri lebih sering menggunakan multiple stage, karena dari project tersebut tidak membutuhkan dependency node
atau hanya sebagai compiler saja. Ok langsung ja kita edit file Dockerfile
nya seperti berikut:
Kemudian coba build dengan menggunakan perintah:
Jika dijalankan outputnya seperti berikut:
➜ docker-laravel git:(master) docker build -t dimmaryanto93/docker-laravel:2021.07.25.10.30-release .
[+] Building 46.2s (25/25) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 32B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 35B 0.0s
=> [internal] load metadata for docker.io/library/node:14.15-alpine3.13 4.8s
=> [internal] load metadata for docker.io/library/php:8.0-apache 4.7s
=> [auth] library/php:pull token for registry-1.docker.io 0.0s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [php_laravel 1/4] FROM docker.io/library/php:8.0-apache@sha256:bc3bf769aff70e8f8183f087d9d855b492826aa94052c1 0.0s
=> [internal] load build context 0.1s
=> => transferring context: 42.85kB 0.0s
=> [frontend_builder 1/4] FROM docker.io/library/node:14.15-alpine3.13@sha256:03b86ea1f9071a99ee3de468659c9af95c 0.0s
=> CACHED [php_laravel 2/4] RUN apt-get update && apt-get install -y curl git libicu-dev libpq-dev lib 0.0s
=> CACHED [php_laravel 3/4] RUN pecl install mcrypt-1.0.4 && docker-php-ext-install fileinfo exif pcntl bcmath 0.0s
=> CACHED [php_laravel 4/4] RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/bin/ --fi 0.0s
=> CACHED [stage-2 1/9] WORKDIR /var/www/php 0.0s
=> CACHED [stage-2 2/9] RUN sed -i "s|DocumentRoot /var/www/html|DocumentRoot /var/www/php/public|g" /etc/apache 0.0s
=> [stage-2 3/9] COPY . . 0.1s
=> CACHED [frontend_builder 2/4] WORKDIR /var/www/php 0.0s
=> [frontend_builder 3/4] COPY . . 0.1s
=> [frontend_builder 4/4] RUN npm install -q && npm run-script prod 33.9s
=> [stage-2 4/9] COPY --from=frontend_builder /var/www/php/public/css public/css 0.0s
=> [stage-2 5/9] COPY --from=frontend_builder /var/www/php/public/images public/images 0.1s
=> [stage-2 6/9] COPY --from=frontend_builder /var/www/php/public/fonts public/fonts 0.1s
=> [stage-2 7/9] COPY --from=frontend_builder /var/www/php/public/js public/js 0.0s
=> [stage-2 8/9] RUN mkdir -p public/storage && chmod -R 777 storage/* && chmod -R 777 public/storage 0.3s
=> [stage-2 9/9] RUN php -r "file_exists('.env') || copy('.env.example', '.env');" && composer install --no- 6.4s
=> exporting to image 0.5s
=> => exporting layers 0.4s
=> => writing image sha256:495c681e18799790d476208b34c8318a766ca773a81441dbec6a2967adc0b3b4 0.0s
=> => naming to docker.io/dimmaryanto93/docker-laravel:2021.07.25.10.30-release
Selanjutnya kita bisa coba jalankan containernya dengan perintah seperti berikut:
Maka hasilnya seperti berikut:
Cleanup
Seperti biasa setelah kita mencoba schenario studi kasus tersebut. sekarang kita bersih-bersih dulu ya berikut perintahnya:
For Bash script:
For Powershell script:
Yuk simak juga videonya,
Dan jika temen-temen belajar hal baru kali ini jangan lupa buat Like, Subcribe, dan Share ke temen kalian. Terimakasih!!!