Instalasi Vue Tempalate Hasil Download

Untuk memulai lakukan langkah-langkah berikut:

1. Unduh projek/template 
2. Pastikan node.js sudah terinstal
3. Type in Command Prompt (CMD) npm install in the source folder where package.json is located
4. Type in Command Prompt (CMD) go to project directory and runnpm run dev to start the development server

npm tasks:

• npm run dev - starts a development server

React-JS Web Tutorial

Creating a Vue Application

1. Download dan install Node.js

2. Jalankan CMD

Microsoft Windows [Version 10.0.17134.1304]

(c) 2018 Microsoft Corporation. All rights reserved.

C:\Users\fuad hasan>e:

E:\>mkdir vue-web

E:\>cd vue-web

E:\vue-web>npm create vue@latest

Need to install the following packages:

create-vue@3.8.0

Ok to proceed? (y) y

Laravel CORS Middleware Setting

 What is CORS?

CORS stands for Cross-origin resource sharing. The concept is related to the same origin policy which all browsers implement. In a nutshell, this policy says that a web site may not perform web requests to a different web site, or to be precise, “origin” (scheme, hostname, port number). CORS is a mechanism that can relax such restrictions. While the browser enforces restriction, CORS must be implemented on the server side to let the browser know that it may relax the restrictions.

Install Laravel v10.28.0 (PHP v8.1.4) di Windows

1. Download Composer dan install (Pastikan terkoneksi internet)

2. buka CMD

 Microsoft Windows [Version 10.0.17134.1304]

(c) 2018 Microsoft Corporation. All rights reserved.

C:\Users\fuad hasan>composer

   ______

  / ____/___  ____ ___  ____  ____  ________  _____

 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/

/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /

\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/

                    /_/

Composer version 2.6.5 2023-10-06 10:11:52

3. buat project laravel masuk ke folder XAMPP/HTDOCS

C:\Users\fuad hasan>E:

E:>cd xampp\htdocs

E:\xampp\hdocs>composer create-project --prefer-dist laravel/laravel:^10.0 web-laravel

4. Jalankan Laravel

E:\xampp\hdocs\web-laravel>php artisan serve

Contoh Query pada Laravel

 <?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use DB;

class ProvinceController extends Controller

{

    public function getAllProvince()

    {

        $provinces = DB::table('provinces')->get();

        return response()->json([

            'message' => 'success',

            'data' => $provinces

        ], 200);

    }

    public function filterProvince(Request $request)

    {

        $filter = strtoupper($request->filter);

        $provinces = DB::table('provinces')->where('name', 'like', "%$filter%")->get();

        return response()->json([

            'message' => 'success',

            'data' => $provinces

        ], 200);

    }

}

Routes pada Laravel v10.28.0 (PHP v8.1.4)

 <?php

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Route;

/*

|--------------------------------------------------------------------------

| API Routes

|--------------------------------------------------------------------------

|

| Here is where you can register API routes for your application. These

| routes are loaded by the RouteServiceProvider and all of them will

| be assigned to the "api" middleware group. Make something great!

|

*/

Route::middleware('auth:sanctum')->get('/user', function (Request $request)

{

    return $request->user();

});

Route::group(['middleware' => 'api'], function() {

    Route::get('all', 'App\Http\Controllers\ProvinceController@getAllProvince');

    Route::get('get', 'App\Http\Controllers\ProvinceController@filterProvince');

});