Tutorial part 1: Membuat News Website dengan Framework Laravel API dan Flutter

November 03, 2019 Posting Komentar

Assalamualaikum wr.wb

Pada Kesempatan kali ini Saya akan membagikan bagaimana cara membuat News website pada Laravel API dan Flutter. Maksudnya adalah kita akan membuat aplikasi website yang dapat terhubung dengan android dan ios.

Disini kita mempunyai kewajiban untuk mengamalkan ilmu karena jika ilmu tidak diamalkan seperti halnya pohon yang tidak berbuah atau dapat dikatakan ilmu itu akan sia-sia

Silahkan teman-teman simak pembahasan dibawah ini.

Instalasi Framework Laravel

Langkah pertama silahkan teman-teman lakukan instalasi Framework Laravel pada sisi server
dengan cara masuk pada direktori htdocs dengan menggunakan command prompt lalu ketikan perintah dibawah ini:

composer create-project laravel/laravel --prefer-dist news_website

lalu tekan enter untuk melanjutkan installasi, jangan lupa teman-teman untuk terhubung dengan internet saat instalasi frameworknya. Jika kurang jelas dengan penjelasan diatas silahkan teman-teman kunjungi Instalasi dan Konfigurasi server web . Tunggu hingga proses instalasi selesai.

Persiapan Framework Laravel

Berikut adalah langkah-langkah persiapan framewor laravel untuk membuat project News Website:

Silahkan teman-teman masuk pada direktori instalasi Framework Laravel.
Lalu selanjutnya buka folder instalasi pada text Editor.
Jangan lupa untuk mengupdate composer terlebih dahulu dengan mengetikan composer update pada command prompt.
Untuk menginstall bootstrap pada laravel silahkan ketikan perintah php artisan preset bootstrap
Selanjutnya akan menginstall node.js pada framework laravel silahkan teman-teman download dan install terlebih dahulu nodejs.exe
Setelah itu ketikan perintah npm install pada command prompt dan tunggu sampai instalasi selesai

Pembuatan Tabel User

Silahkan teman-teman buka text editornya lalu buku file migration users pada direkori News_website->database->migration.

Lalu tambahkan fieldnya seperti dibawah ini:

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('first_name');
$table->string('last_name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->string('api_token', 60)->unique();
$table->string('user_type')->default('user');
$table->string('liked_posts')->nullable();
$table->string('disliked_posts')->nullable();
$table->string('favourites')->nullable();
$table->string('favourites_categories')->nullable();
$table->string('preferences')->nullable();
$table->string('avatar')->nullable();
$table->rememberToken();
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}

Lalu pada file Model User.php pada protected $fillable tambahkan script seperti dibawah ini:

use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements MustVerifyEmail
{
use Notifiable;

/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'first_name', 'last_name', 'email', 'password', 'api_token', 'email_verified_at',
'user_type', 'liked_posts', 'disliked_posts', 'favourites',
'favourites_categories', 'preferences', 'avatar',
];

Langkah selanjutnya ketikan perintah php artisan make:auth untuk membuat fungsi login dan register pada Framework Laravel, setelah itu teman-teman buka file web.php pada folder routes dan tambahkan script dibawah ini.

Auth::routes(['verify' => true]);

Verify Email pada Mailtrap.oi, untuk verifikasinya silahkan teman-teman login untuk masuk ke mailtrap.io lalu klik demo inbox lalu akan tampil seperti gambar dibawah ini:

Pada gambar diatas terdapat username dan password yang akan digunakan untuk menghubungkan aplikasi website yang akan kita buat dengan mailtrap.oi, caranya cukup mudah teman-teman, silahkan buka file env lalu ubah seperti script dibawah ini pada tempat Mail:

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=a5086ec6eb5d44
MAIL_PASSWORD=402cf366cd4ac5
MAIL_ENCRYPTION=null

jangan lupa teman-teman untuk membuat database kosong dengan nama news_website, untuk menghubungkan project dengan databasenya silahkan ubah pada file env pada db_connection. seperti dibawah ini:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=news_website
DB_USERNAME=root
DB_PASSWORD=

Lalu Ketikan Perintah php artisan migrate untuk membuat tabel users pada phpmyadmin nya,
Untuk tahap selanjutnya silahkan teman-teman buka file RegisterController.php Pada function validator dan creat ubah seperti dibawah ini:

protected function validator(array $data)
{
return Validator::make($data, [
'first_name' => ['required', 'string', 'max:255'],
'last_name' => ['required', 'string', 'max:255'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
'password' => ['required', 'string', 'min:8', 'confirmed'],
]);
}

/**
* Create a new user instance after a valid registration.
*
* @param array $data
* @return \App\User
*/
protected function create(array $data)
{
return User::create([
'first_name' => $data['first_name'],
'last_name' => $data['last_name'],
'email' => $data['email'],
'password' => Hash::make($data['password']),
]);
}

Lalu selanjutnya silahkan buka file Register.blade.php lalu tambahkan kolom seperti first_name, last_name serta beri name dan id nya. Tahap selanjutnya membuat Defining Observers silahkan teman-teman simak pembahasan dibawah ini.

Defining Observers

Maksud dari Defining Observers adalah Mendefinisikan Pengamat

Jika teman-teman mendengarkan banyak perintah pada model tertentu, teman-teman dapat menggunakan pengamat ini untuk mengelompokkan semua perintah teman-teman ke dalam satu kelas. Kelas pengamat memiliki nama metode yang mencerminkan peristiwa Eloquent (Relasi) yang ingin teman-teman dengarkan. Masing-masing metode menerima model sebagai satu-satunya argumen mereka. Perintah make: observer Artisan adalah cara termudah untuk membuat kelas observer baru:

php artisan make:observer UserObserver --model=User

Perintah ini akan menempatkan pengamat baru di direktori Aplikasi / Pengamat Teman-teman. Jika direktori ini tidak ada, Artisan akan membuatnya secara otomatis. Selanjutnya silahkan teman-teman buka file Observer yang telah dibuat menggunakan command prompt dan tambahkan function seperti dibawah ini:

Baca Juga

public function creating(User $user)
{
$user->api_token = bin2hex( openssl_random_pseudo_bytes(30));
}

Selanjutnya kita buka file AppServiceProvider.php pada direktori app<provider<AppServiceProvider.php lalu ubah scriptnya seperti dibawah ini:

<?php

namespace App\Providers;

use App\User;
use App\Observers\UserObserver;
use Illuminate\Support\ServiceProvider;

//use Illuminate\Support\Facades\Schema;

class AppServiceProvider extends ServiceProvider
{
/**
* Register any application services.
*
* @return void
*/
public function register()
{
//
}

/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
User::observe( UserObserver::class );
}
}

Selanjutnya silahkan teman-teman jalankan aplikasinya dan melakukan register seperti dibawah ini:

Jika berhasil melakukan register maka secara otomatis akan meminta verifikasi dari mailtrap.io untuk lebih jelasnya silahkan perhatikan gambar dibawah ini:

Jika teman-teman sudah melakukan verify maka pada field dari tabel users akan terisi seperti ini untuk email_verified_at, password dan api_token nya:

Tahap selanjutnya silahkan teman-teman buka file UserFactory.php pada direktori database->factory->UserFactory.php lalu pada $factory->define ubah scriptnya seperti dibawah ini:

$factory->define(User::class, function (Faker $faker) {
return [
'first_name' => $faker->firstname,
'last_name' => $faker->lastname,
'email' => $faker->unique()->safeEmail,
'email_verified_at' => now(),
'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
'remember_token' => Str::random(10),
'api_token' => bin2hex( openssl_random_pseudo_bytes(30)),
'avatar' => $faker->imageUrl(100, 100),
];
});

Untuk dapat mengisikan data pada tabel users secara otomatis maka langkahnya cukup dengan menggunakan DatabaseSeeder.php pada direktori database->seeds->DatabseSeeder.php dan ubah scriptnya seperti dibawah ini:

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
// $this->call(UsersTableSeeder::class);
factory( \App\User::class, 100 )->create();
}
}

Nah setelah scriptnya diubah maka langkah selanjutnya adalah mengetikan perintah pada command prompt seperti dibawah ini:

php artisan db:seed

Maka secara otomatis kita akan mempunya record sebanya 100 baris, karena kita menuliskan perintahnya sebanyak 100 pada DatabaseSeeders.php. Untuk lebih jelasnya silahkan perhatikan gambar dibawah ini:

Silahkan teman-teman coba untuk login dengan menggunakan salah satu email yang tertera untuk passwordnya adalah "password". secara default Framework Laravel membuatnya seperti itu.

Untuk Tutorial part 1: Membuat News Website dengan Framework Laravel API dan Flutter Kali ini saya cukupkan, silahkan teman-teman ikuti terus totorial selanjutnya.
Semoga bermanfaat. Salam Sukses