AdityaDees: Frontend

Hot

https://publishers.chitika.com/

Contact us for advertising.
Showing posts with label Frontend. Show all posts
Showing posts with label Frontend. Show all posts

30 January 2022

Memasang Vue Router di Laravel

15:01 0
Memasang Vue Router di Laravel

Bismillah

Melanjutkan postingan sebelumnya mengenai Setup Vue Js di Laravel dalam Satu Project. Dipostingan tersebut kita telah berhasil melakukan konfigurasi awal vue agar bisa bundling dengan project laravel. Nah selanjutnya adalah kita akan menerapkan vue router di project tersebut. Vue router adalah merupakan library dari vue yang khususnya untuk melakukan routing agar aplikasi bisa berjalan layaknya Single Page Application pada umumnya.

Untuk menambahkan router di vue, masukkan perintah di terminal atau command prompt anda dengan perintah :
npm install vue-router
Tunggu hingga proses selesai.

Untuk mempermudah penerapan penggunaan vue router tersebut, kita akan membuat dua buah page/halaman. Halaman pertama adalah halaman dashboard, dan yang satunya lagi adalah halaman profile. Berikut adalah langkah-langkahnya :
  1. Buat dua buah file dengan nama Dashboard.vue dan Profile.vue di direktori `resources\js\componenents`.
  2. Pada masing-masing halaman tersebut buat template vue sederhana. Sebagai contoh :
  3. Dashboard.vue
    <template>
        <h3>Hai, Ini adalah halaman dashboard</h3>
    </template>

    <script>
        export default {
            name:'dashboard'
        }
    </script>

    Profile.vue
    <template>
        <h3>Hai ini adalah halaman profile</h3>
    </template>

    <script>
        export default {
            name:'profile'
        }
    </script>
  4. Kemudian setelah membuat kedua file diatas, buat lagi sebuah file dengan nama Navigation.vue. Di file inilah link/routing akan ditampilkan. Berikut adalah isi dari file Navigation.vue :
  5. <template>
        <div>
            <router-link to="/dashboard">Dashboard</router-link> |
            <router-link to="/profile">Profile</router-link>
        </div>
    </template>

    <script>
        export default{
            name:'navigation'
        }
    </script>
    Seperti terlihat diatas, ada component bernama router-link. Dimana di component inilah kita meletakkan link dari page yang sebelumnya yang sudah dibuat menggunakan props to.
  6. Edit file App.vue menjadi seperti berikut :
  7. <template>
        <div class='container'>
            <Navigation />
            <router-view ></router-view>
        </div>
    </template>

    <script>
    import Navigation from './Navigation.vue'

    export default {
        components : {Navigation}
    }
    </script>
  8. Kemudian edit kembali file app.js, menjadi seperti dibawah ini :
  9. import App from './components/App'
    import { createApp } from 'vue'
    import { createRouter, createWebHistory } from 'vue-router'
    import Dashboard from './components/Dashboard.vue'
    import Profile from './components/Profile.vue'

    const router = createRouter({
      history: createWebHistory(),
      routes: [
        {
          path: '/dashboard',
          component: Dashboard,
          name: 'dashboard',
          meta: {
              title: 'Dashboard'
          },
        },
        {
          path: '/profile',
          component: Profile,
          name: 'profile',
          meta: {
              title: 'Profile'
          },
        },
      ],
    });

    const app = createApp({
        components: {
            App
          }
    });

    app.use(router)
    app.mount('#app');
    Penjelasan :
    • Yang diperlukan untuk membuat router adalah dengan meng-import beberapa method dari vue-router yaitu createRouter dan createWebHistory.
    • Didalam method createRouter, tambahkan parameter history dan routes.
    • Pada parameter history isinya adalah createWebHistory yang mana parameter history ini gunanya adalah agar history dari url dibrowser yang dibuat bisa dibaca oleh vue-router dan di render sebagai SPA.
    • Dibagian parameter routes, disini kita daftarkan seluruh routes yang diperlukan. Sebagai contoh, disini kita memerlukan routing untuk halaman Dashboard dan Profile. Yang perlu diperhatikan pada saat membuat routes adalah di parameter path, component, dan name. Dimana parameter path berisi url path yang merujuk ke component tertentu. Kemudian component merupakan komponen apa yang akan ditampilkan/dirender pada saat berada di path tadi, dan name adalah merupakan nama routes itu sendiri.
  10. Sampai disini routing di vue sudah selesai dibuat. Dan pada saat dijalankan maka tampilannya adalah seperti dibawah ini :
  11. Simple vue router laravel
    Saat di klik salah satu link/url maka akan membuka page tersebut tanpa harus mereload keseluruhan halaman seperti dibawah ini :
    Simple vue router laravel
  12. Terakhir agar tidak muncul pesan Not Found dilaravel pada saat mereload page penuh, maka perlu diubah routing laravel di `routes\web.php` menjadi seperti berikut :
  13. <?php

    use Illuminate\Support\Facades\Route;

    /*
    |--------------------------------------------------------------------------
    | Web Routes
    |--------------------------------------------------------------------------
    |
    | Here is where you can register web routes for your application. These
    | routes are loaded by the RouteServiceProvider within a group which
    | contains the "web" middleware group. Now create something great!
    |
    */

    Route::get('/{any}', function () {
        return view('welcome');
    })->where('any','.*');

Demikian tutorial lanjutan mengenai Memasang Vue Router di Laravel

Read More

31 December 2021

Ask Setup Vue Js di Laravel dalam Satu Project AdityaDees

21:39 0
Langkah-Langkah Setup Vue Js di Laravel dalam 1 Project
Bismillah

Sebagai seorang fullstack developer, terkadang kita merasa kurang nyaman ketika develop sebuah aplikasi yang memiliki dua buah project yang berbeda. Dimana satu project sebagai backend dan satu-nya lagi sebagai frontend.

Sebelum munculnya berbagai framework dan library untuk frontend seperti vue, react, angular dll, biasanya seorang fullstack developer hanya bekerja disatu project saja. Biasanya untuk urusan tampilan, framework yang memakai konsep MVC (Model View Controller) maka letaknya adalah di bagian direktori view. Sebagai contoh, untuk laravel sendiri yang memakai konsep MVC, maka pengaturan tampilan berada di bagian resources/views secara default. Namun setelah kemunculan framework ataupun library frontend tadi, maka untuk frontend biasanya memiliki project tersendiri yang sudah bundling didalamnya node modules.

Dari permasalahan diatas agar proses develop menjadi mudah untuk seorang fullstack, maka solusinya adalah menyatukan backend dan frontend didalam sebuah project. Untuk laravel sendiri, ada sebuah node modules yang berfungsi untuk menyatukan Vue js ataupun library lainnya kedalam project laravel yakni laravel-mix. Mungkin di framework php lain seperti Codeigniter, Yii dan yang lainnya juga memiliki cara tersendiri untuk melakukan hal tersebut.

Baiklah, sebelum melakukan melakukan setup penggabungan library Vue dengan Laravel. Beberapa tools yang harus terinstal di laptop atau pc anda adalah node js dan composer. Jika belum terinstal, maka lakukan proses penginstalan keduanya terlebih dahulu.

Disini saya akan mencontohkan setup mulai dari awal yang dimulai dari pembuatan project laravel terlebih dahulu. Langkah-langkahnya adalah seperti berikut ini :
  • Buka terminal/command line, kemudian buat sebuah project laravel baru dengan cara memasukkan perintah berikut :
  • composer create-project laravel/laravel nama-project-anda
    Disini saya menggunakan composer untuk membuat project laravel. Selain menggunakan composer ada cara lain yang bisa anda lihat langsung di website resminya di https://laravel.com/docs/8.x/installation.
  • Setelah selesai, buka editor favorit anda kemudian tambahkan project yang sudah anda buat tadi kedalam editor tersebut.
  • Edit file package.json dibagian devDependencies, ubah menjadi seperti dibawah ini :
  •    "devDependencies": {
            "laravel-mix": "^6.0.6",
            "axios": "^0.21",
            "lodash": "^4.17.19",
            "postcss": "^8.1.14",
            "vue": "^3.2.26",
            "vue-loader": "^16.8.3",
            "vue-template-compiler": "^2.6.14",
            "vue-router": "^4.0.12"
        }
    Dibagian ini kita memasukkan modules yang dibutuhkan yakni vue, vue-loader, vue-template-compiler dan vue-router.
  • Setelah selesai, di terminal/command line masukkan perintah :
  • npm install
  • Kemudian masukkan lagi perintah dibawah ini :
  • npm run watch
    Perintah diatas gunanya adalah untuk melakukan compile script vue secara otomatis jika ada perubahan pada source code vue yang kita buat. Pastikan proses ini berhasil dan tidak terjadi error.
  • Selanjutnya jika sudah berhasil, buat sebuah direktori baru dengan nama `components` didirektori `resources/js`. Didalam direktori `components` tadi buat sebuah file dengan nama `App.vue`. Selanjutnya isi file tersebut dengan source code sederhana seperti dibawah ini :
  • <template>
        <div class='container'>
            <h1>Selamat Datang</h1>
        </div>
    </template>
  • Setelah itu edit file wellcome.blade.php yang berada didirektori resources/views/wellcome.blade.php sehingga menjadi seperti dibawah ini :
  • <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Laravel | Vue js</title>
            <link href="{{ mix('/css/app.css') }}" rel="stylesheet"/>
        </head>
        <body>
            <div id="app">
                <App/>
            </div>
            <script src="{{ mix('js/app.js') }}"></script>
        </body>
    </html>
  • Kembali ke terminal anda, jalankan server local laravel dengan perintah :
  • php artisan serve
  • Buka browser, kemudian masuk ke url local laravel tadi di http://localhost:8000. Jika berhasil, maka akan muncul halaman index-nya seperti gambar dibawah ini :
  • Localhost laravel with vue frontend
Sampai disini kita sudah berhasil menggabungkan laravel dengan vue js. Di tutorial selanjutnya insyaAllah kita akan membahas bagaimana supaya request dari browser client bisa dibaca oleh router vue js. Jika ada pertanyaan mengenai postingan Setup Vue Js di Laravel dalam Satu Project silahkan ditanyakan dikolom komentar.
Read More

https://payclick.com/

Contact us for advertising.