Mencoba Laravel 5.5 di PHP php-7.2.2


Laravel 5.5 semakin umum digunakan, sehingga dalam waktu dekat pekerjaan-pekerjaan baru akan sangat mungkin untuk menggunakan Laravel versi 5.5.x (LTS), maka untuk memudahkan setiap orang untuk men-setup environtment mereka saya buatlah artikel ini (repo).

Pada artikel ini memberikan opsi untuk menggunakan konfigurasi local environtment yang berbeda-beda supaya bisa dipilih mana yang termudah dan tercepat untuk digunakan, karena bisa saja dibeberapa laptop anggota team dapat install Vagrant dengan mudah tapi bermasalah dengan Docker atau sebaliknya, bermasalah dengan Vagrant tapi jalan dengan baik saat menggunakan Docker, kita butuh team untuk up dengan cepat maka opsi yang bisa digunakan untuk mempersiapkan linkungan kerja dilaptop masing-masing team adalah sebagai berikut:

  1. Setup semua perkakas di System utama (cara paling primitif).
  2. Setup dengan PHP Brew (Akan bermasalah dengan Virtual Host).
  3. Setup dengan Vagrant + Homestead (disarankan)
  4. Setup dengan Docker + Laradock (todo)

Untuk keperluan menambah pengetahuan men-setup dengan semua cara diatas adalah hal baik karena menambah pengetahuan kita tentang berbagai fashion yang ada pada web development, dengan catatatan memang memiliki banyak waktu luang, bila waktu mendesak Docker / Vagrant adalah pilihan bijak supaya team dapat segera beraksi.

Instalasi Perkakas

Tool 1. OS Ubuntu 14+

1.sistem
Terminal menggunakan Terminator

Tool 2. PHPBREW

2.phpbrew

Warning: Terdapat kendala dalam penggunaan PHPBREW, install saja php.7.2 seperti biasa di system utama dengan mengikuti link ini, bedanya hanya tambahkan install “sudo apt-get install php7.2-pgsql” untuk PostressSQL.
Setup virtual host di sini (ini untuk php7.1 sesuaikan saja)

Bila menggunakan apache 2.4 dan ada error permission maka ikuti ini.
Sesuaikan konfigurasi di .env untuk menggunakan nama domain local kita misal: larastart.local

Tool 3. PHP 7.2.2 (Lihat Tool no 2)

phpbrew install php-7.2.2 +default+dbs+openssl (kadaluarsa)

3.phpbrew

Tool 4. Laravel 5.5 (LTS)

composer create-project –prefer-dist laravel/laravel=5.5 Larastarter

Larastarter adalah nama project yang akan kita jadikan bootstrap, project apapun bisa fork dari sini lalu diberi nama baru4.laravel55Setup folder access pada folder ./storage jika menggunakan ./artisan serve:

  • sudo chown -R www-data:www-data ./vendor
  • sudo chown -R www-data:www-data ./storage
  • sudo usermod -a -G www-data yusuf

Tool 5: Git, GitK, GitFlow, Composer, AtomIDE6.lain-lain

Tool 6. Composer dengan PHPBrew

phpbrew app get composer

Tool 7. Install VueJS Devtools

Instalasi VueJS Devtools yang merupakan Chrome extention klik link ini.

Tool 8. Instalasi vue.js bawaan Laravel

Install js dependencies yang diperlukan (lihat package.json bawaan Laravel 5.5 udah ada semua disertakan apa yang kita perlukan tinggal diinstall saja).

npm install && npm install vue-router

Vue.js adalah js framework yang sangat populer dan keren, dan merupakan pilihan yang tepat untuk digunakan diberbagai project web.

Tool 9. Install PostgreSQL

  • Instalasi PostgreSQL klik disini
  • Install PGAdmin dengan perintah ini
  • sudo apt-get install pgadmin3

Tool 10. Install Postman

Tool 11, VirtualBox > 5.2 + VirtualBox > 5.2 + Vagrant > 2.0

Bila anda melakukan upgrade virtualbox dari versi lama maka eksekusi perintah berikut untuk reload (atau restart pc anda):

sudo /sbin/vboxconfig

Ingat, file Homestead.yml itu seperti .env dia tidak disertakan di git pastikan konfigurasinya (path, dll) sesuai dengan kebutuhan anda.

Optimalkan kecepatan Vagrant

  • Optimasi Sharing Folder disini
  • nsf-password.png
    Dengan NSF kita akan diminta password saat provisioning
  • Optimasi macam-macam disini

Tool 12. New Relic

Sedikit Setup dan Penyesuaian

Dari step-step diatas terlihat bagaimana local environtment saya, serta versi dari tools yang saya gunakan.

Saatnya kita running built-in web server untuk melihat tampilan pertama dari Laravel 5.5 kita.

Tahap 1. Running Web

Jalankan ./artisan serve untuk menyalakan built-in web server lalu kunjungi url berikut http://127.0.0.1:8000/

Next kita running pake Vagrant dan Virtual Host.

./artisan serve
7.tampilan-awal.png
./artisan serve

Tahap 2. Setup Postgres Database

createdb Larastarter

Tahap 3. Sesuaikan .env

8 DB_CONNECTION=pgsql
9 DB_HOST=127.0.0.1
10 DB_PORT=5432
11 DB_DATABASE=Larastarter
12 DB_USERNAME=postgres
13 DB_PASSWORD=postgres

Tahap 4. Generate Keperluan Login dan Authentikasi (link)

php artisan make:auth

Tahap 5. Generate Table users dari hasil make:auth diatas (link)

./artisan migrate
8.auth-migrate.png
Tables di generate pada tahap ini
pgadmin3
Gunakan PGAdmin Untuk memantau databases

Tahap 6. Lihat Applikasi Hasil Instalasi Di Browser Lalu Login

9.login
Database tables untuk auth belum di migrate jadi tidak berfungsi

10.register11.logged-in

Tahap 7. Instalasi Laravel Debug Bar (Link)

Perintah instalasi debug-bar:

composer require barryvdh/laravel-debugbar --dev
debugger
Debug-bar terpasang, Debug-bar hanya diinstall dan muncul dimode development

Sampai tahap ini maka kita telah selesai melakukan instalasi Laravel 5.5 di php-7.2 kita.

Selanjutnya adalah instalasi vue.js dan membuat user management sederhana.

Tahap 7. Instalasi Voyager dan Dummy Data(link)

composer require tcg/voyager
php artisan voyager:install
php artisan voyager:install --with-dummy
Laravel-Voyager1
php artisan voyager:install --with-dummy

Mau tahu changes apa saja yang terjadi saat kita install Voyager ? klik disini untuk melihat logs.

Kita dapat menetapkan hak istimewa admin kepada pengguna yang ada.
Hal ini dapat dengan mudah dilakukan dengan menjalankan perintah ini:

php artisan voyager:admin your@email.com

Atau membuat user baru dengan perintah ini:

php artisan voyager:admin your@email.com --create

*Pasword akan diminta kemudian di terminal console.

Jangan lupa seeder harus ditrigger

php artisan migrate:refresh --seed
php artisan db:seed --class=VoyagerDatabaseSeeder

Tahap 7. Instalasi Adminer (link)

Setup akses database di Dalam Vagrant:

Allow remote hosts to connect to PostgreSQL database server on vagrant box

sudo vim /etc/postgresql/9.5/main/pg_hba.conf

# tambahkan/edit Line berikut (Ingat bila duplicate bakal error)

local all all trust

# reload postgres (restart bisa menyebabkan postgres Error)

sudo /etc/init.d/postgresql reload

Akses adminer di http://larastarter.local/adminer.php

Membangun Applikasi Sederhana Dengan Laravel 5.5 dan VueJS (Link)

User CRUD Sederhana

Pada kali ini sebagai kelanjutan dari penjelasan diatas maka saya melanjutkan dengan membuat user management sederhana untuk CRUD users.

Membuat API Dengan Laravel

Step 1. Buat Folder users

mkdir resources/views/users

Step 2. Buat file index

touch resources/views/users/index.blade.php

Step 3. Lengkapi kode untuk file Step 2

Step 4. Membuat Controller

./artisan make:controller Api/V1/UsersController –resource

akan menghasilkan file berikut app/Http/Controllers/Api/V1/UsersController.php, setelah itu jalan lupa sesuaikan routenya di routes/api.php.

Step 5. Lengkapi kode untuk file Step 4

url api hasil pekerjaan diatas adalah sbb: http://localhost:8000/api/v1/users

Sampai sini saya berasumsi bahwa API telah bisa diakses

Step 6. Memberikan Authentikasi dengan Passport (Awal Bisa Skip dulu)

Instalasi Passport dengan perintah composer berikut:

composer require laravel/passport:^4.0

Migrate tables yang dibutuhkan

php artisan migrate

postport-migrate

Lalu jalankan perintah install berikut

php artisan passport:install
php artisan vendor:publish --tag=passport-components
php artisan passport:keys
npm run dev

Detail instalasi ada di sini.

Setup FrontEnd dengan Passport

In order to use the Passport Vue components, you must be using the Vue JavaScript framework. These components also use the Bootstrap CSS framework. However, even if you are not using these tools, the components serve as a valuable reference for your own frontend implementation.

Artikel Tentang API Authentkasi dengan Passport

Codepolitan, Scotch, Official

1.passport
Authentikasi yang dilakukan dengan mengikuti contoh di Codepolitan
personal-token

Setiap login maka personal token kita bertambah (Cara buat tampilan hal diatas link)
Menggunakan Token diatas Untuk Login
AUthenticated
Authenticated / Login berhasil
AUthenticated-failed
Login gagal

Cara diatas memberikan gambaran bagaimana kita menukar email dan password kita dengan token, yang mana kemudia token tersebut digunakan untuk mengathorisasi request berikutnya.

Muncul pertanyaan, “Saat kita login menggunakan browser di halaman login biasa maka yang kita miliki adalah session bukan Passport token, maka bagaimana kita meng-akses API yang drivernya adalah Passport?

Jawab

Dengan session yang kita miliki kita bisa mendapatkan Passport Token atau menggeneratenya bila belum ada dan kemudian diinject ke headersetiap request VueJS.

Menyiapkan Server Side untuk Manage OAuth Client

Applikasi web kita sendiri walau satu project dengan API itu sendiri saat dia akan meng-akses API dia akan berlaku sebagai OAuth Client dari Oauth server yang sebenernya disitu-situ juga.

Generate OAuth Client

artisan passport:client
GenerateOauthClient1.png
Proses membuat OAuth Client
GenerateOauthClient2.png

Lihat… TestOAuthClient sudah berhasi dibuat
GenerateOauthClient3
OAuth Client yang barusan digenerat dapat diedit, rubah Redirect url jadi http://127.0.0.1:8000/oauth_callback (bila belum)

Setelah kredensial Oauth klien berhasil dibuat, maka pengembang dapat menggunakan ID  dan kode secret dari klien   untuk meminta kode otorisasi dan token akses dari aplikasi OAuth server. Pertama, aplikasi  client yang akan menggunakan APIs harus membuat permintaan pengalihan/redirect ke route aplikasi  yang telah ditentukan:

127.0.0.1:8000/oauth_redirect

Bila url diatas diakses maka itu akan lari kehalaman Login (ya halaman login kita yang biasa), namun perbedaannya adalah setelah login kita akan di-redirect ke url callback yang kita set sebelumnya, tapi tentunya setelah melewati authorization berikut:

oauth-permission

Bila di Authorize akan muncul sbb:

oauth_data_in_debugger
Token kita simpan supaya vue bisa menggunakannya saat request

Overide Tampilan Authorization

php artisan vendor:publish --tag=passport-views

Hasilnya (Terminal)

Copied Directory [/vendor/laravel/passport/resources/views] To [/resources/views/vendor/passport]
Publishing complete.

Mulai Bekerja dengan VueJS

Step 6. Setup VueJS

detailnya ikuti contoh ini.

Untuk memulai bekerja dengan Vue.js di Laravel, sebenarnya Anda tidak perlu menginstalnya karena sudah ada di sana, lihat kode file/aset/js/app.js:

 

Wajib Baca Atau (Kecuali Memang Sudah Paham)

  1. Api Design  Microsoft Doc, guidance describes issues that you should consider when designing a web API.
  2. Laravel follows the PSR-2 coding standard and the PSR-4 autoloading standard.
  3. Symfony Coding Standart
  4. Mari Memahami PSR  Mari Memahami PSR oleh Mizan Rizqia.
  5. Vue Laravel Crud Praktek sangat simple membuat CRUD Laravel dan Vue

Rekomendasi Bacaan Tambahan

  1. phptherightway PHP: The Right Way is an easy-to-read, quick reference for PHP popular coding standards,
  2. killerphp This website to teach PRACTICAL PHP to non-nerd web designer types.
  3. Apa itu TDD ?
  4. Laravel 5.5 with TDD mode Satu, Dua
  5. Swagger Article link L5-Swagger
  6. Phpdoc phpDocumentor 2 is a tool with which it is possible to generate documentation from your PHP source code
  7. IDE Favorit saya

Bersambung…

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s