Sebelumnya kita sudah berkenalan dengan inertia js dimana dengan menggunakan inertia js kita dapat membangun sebuah web single page application tanpa harus membangun API di backend sehingga proses develop aplikasi bisa di lakukan dengan cepat
Modul dan ebook belajar membuat website untuk pemula dengan dreamweaver css d...Nepri Anto
Â
Ebook gratissssssss dari kursus komputer naura cara membuat website untuk pemula menggunakan dreamweaver css dan html
LPK Naura Kursus Komputer Pondok gede-Menyelenggarakan kursus bersertifikat, kursus web master,vb.net,ms.office, excel vba, desain grafis,seo dengan harga terjangkau lokasi jakarta-bekasi
www.kursuskomputer.web.id
www.kursuskomputernaura.com
www.kursusweb.net
www.dientrimedia.com
Modul dan ebook kursus web dengan dreamweaver dan phpmysqlNepri Anto
Â
ebook dan modul gratisss dan anget membuat website untuk pemula dari kursus komputer naura
LPK Naura Kursus Komputer Pondok gede-Menyelenggarakan kursus bersertifikat, kursus web master,vb.net,ms.office, excel vba, desain grafis,seo dengan harga terjangkau lokasi jakarta-bekasi
www.kursuskomputer.web.id
www.kursuskomputernaura.com
www.kursusweb.net
www.dientrimedia.com
Modul dan ebook belajar membuat website untuk pemula dengan dreamweaver css d...Nepri Anto
Â
Ebook gratissssssss dari kursus komputer naura cara membuat website untuk pemula menggunakan dreamweaver css dan html
LPK Naura Kursus Komputer Pondok gede-Menyelenggarakan kursus bersertifikat, kursus web master,vb.net,ms.office, excel vba, desain grafis,seo dengan harga terjangkau lokasi jakarta-bekasi
www.kursuskomputer.web.id
www.kursuskomputernaura.com
www.kursusweb.net
www.dientrimedia.com
Modul dan ebook kursus web dengan dreamweaver dan phpmysqlNepri Anto
Â
ebook dan modul gratisss dan anget membuat website untuk pemula dari kursus komputer naura
LPK Naura Kursus Komputer Pondok gede-Menyelenggarakan kursus bersertifikat, kursus web master,vb.net,ms.office, excel vba, desain grafis,seo dengan harga terjangkau lokasi jakarta-bekasi
www.kursuskomputer.web.id
www.kursuskomputernaura.com
www.kursusweb.net
www.dientrimedia.com
Download Video Tiktok Tanpa Watermark.docxAdi Nata
Â
berikut tutorial lengkap cara mudah download video ataupun musik tiktok tanpa watermark semua dapat kita lakukan online tanpa perlu menginstall aplikasi apapun cukup menggunakan website duniatiktok kita sudah dapat mendownload video tiktok tanpa watermark
filter data pada datatables server side 5 menggunakan yajra laravel adminlteAdi Nata
Â
Pada artikel kali ini saya akan membahas bagaimana melakukan filter data pada datatables, fitur filter ini sangat bermanfaat pada aplikasi kita dimana user aplikasi kita ingin menampilkan data yang memiliki kriteria tertentu saja.
server side datatables menggunakan yajra 1 pada laravel admin lteAdi Nata
Â
jika anda mengelola data dalam jumlah banyak seperti 10.000 record atau lebih maka meload data dengan client side bukanlah merupakan sebuah solusi yang tepat maka di perlukan solusi untuk meload data server side
integrasi template admin lte terbaru dengan laravel 7Adi Nata
Â
kali ini saya akan membuat tutorial integrasi template menggunakan template lengkap dengan source code dan live demo projectnya template yang saya gunakan yaitu template open source yaitu AdminLte
cara mudah menampilkan data laravel vue dengan inertia jsAdi Nata
Â
Sebelumnya kita sudah membahas mengenai Request dan implementasi nya
menggunakan Inertia Post bagi anda yang belum membacanya silahkan baca disini
Kali ini kita akan mencoba menampilkan data yang sudah kita insert ke database dan
kita akan tampilkan pada pages views yang akan kita buat
mengenal dan implementasi request menggunakan inertia jsAdi Nata
Â
Request merupakan hal penting dalam membangun aplikasi, bayangkan saja jika aplikasi
yang anda bangun saat ini tidak memiliki request ? tentu aplikasi anda tidak dapat
digunakan sebagaimana mestinya.
Lalu apa saja method request yang ada
pada Inertia Js
cara set maintenance mode laravel 6 di shared hostingAdi Nata
Â
Bagi anda yang menggunakan shared hosting pada umumnya anda tidak bisa
menjalankan perintah di command line seperti :
php artisan down
lalu jika kita ingin setup web kita ke maintenance mode kita harus membuat 1 route
mengenal inertia js solusi membangun web spa tanpa harus membuat apiAdi Nata
Â
Inertia JS ini memungkinkan kita membangun aplikasi SPA ( Single Page Application )
Menggunakan Front End Framwork Modern seperti Vue Dan React tanpa harus
membangun API, Hal yang sangat menarik bagi saya dimana dengan menggunakan
inertia Js ini kita dapat membangun SPA Tanpa Harus membuat API
mass assignment fillable atau guarded baiknya pakai yang mana di laravelAdi Nata
Â
Pada proses pengembangan aplikasi tentu kita akan sering menggunakan atau
melakukan mass Assignment jika aplikasi yang kita bangun merupakan aplikasi yang
statefull salah satu nya yaitu saat melakukan penambahan data ( insert ).
Di Laravel ada 2 cara agar kita dapat melakukan mass assigment antara lain :
menggunakan fillable
menggunakan guarded
Dalam membangun aplikasi tentu kita akan selalu bersinggungan dengan fungsi filter
misal pada saat melakukan query ke database kita ingin menampilkan hanya data
tertentu saja.
Pada Tutorial kali ini kita akan membahas Eloquent Filter Dan Reject pada laravel,
Sebagai contoh pada study case kali ini kita akan melakukan filter pada data Items.
Cara mudah membuat layout,import layout dan render layout pada inertia js
1. Cara mudah membuat layout,import
layout dan render layout Pada Inertia
JsWebsite Flat Desig n . UI Wi ndow. Sampl e Web Page D esign. Illustration
Sebelumnya kita sudah berkenalan dengan inertia js dimana dengan menggunakan
inertia js kita dapat membangun sebuah web single page application tanpa harus
membangun API di backend sehingga proses develop aplikasi bisa di lakukan
dengan cepat.
Bagi anda yang belum tahu Inertia JS silahkan klik baca disini
pada artikel kali ini saya tidak akan membahas bagaima cara melakukan setup
project atau instalasi project lagi dikarenakan sudah saya bahas sebelumnya bagi
anda yang belum paham cara setup & instalasinya silahkan baca disini
Yuk Kita bahas cara membuat menu navigasi dan templating layout di inertia js.
dimana kita sudah mengetahu bahwa laravel memiliki layout yang terdapat pada file
:
Resourcesviewslayoutsapp.blade.php
PHP
Copy
2. kita dapat menggunakan layout tersebut dan kita buat sebuah folder di dalam folder
JS dan kita beri nama Layout.vue seperti ini :
Dan kita modifikasi coding di file Layout.vue menjadi seperti ini :
<template>
<div>
<nav class="navbar navbar-expand-md navbar-light bg-white
shadow-sm">
<div class="container">
<!-- <a class="navbar-brand" href="{{ url('/') }}">
-->
<inertia-link class="navbar-brand"
href="dashboard">Home</inertia-link>
<inertia-link class="navbar-brand"
href="customer">Customer</inertia-link>
<inertia-link class="navbar-brand"
href="item">Items</inertia-link>
<!-- </a> -->
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
4. </script>
JavaScript
Copy
Setelah Layoutsnya jadi maka kita dapat melakukan import layout yang kita buat di
atas pada setiap pages yang membutuhkannnya, sebagi contoh kita membuat
sebuah pages dengan nama Dashboards Seperti di gambar dibawah ini :
buka file Index yang terdapat di dalam folder Dashboard dan modifikasi isinya
menjadi seperti dibawah ini :
<template>
<Layout>
<div>
<h2> Hello ini Dari Dashboard </h2>
</div>
</Layout>
</template>
<script>
import Layout from './../../Shared/Layout' //import layouts
export default {
components: {
Layout,
}
}
</script>
JavaScript
Copy
pada coding diatas kita sudah berhasil membuat pages dashboard dan kita sudah
implpementasikan bagaimana cara melakukan import layouts pada pages berikut
potongan code import layout :
5. import Layout from './../../Shared/Layout' //import layouts
JavaScript
Copy
lalu kita buat sebuah controller yang fungsinya melakukan render ke pages
dashboard
php artisan make:controller DashboardController
PHP
Copy
Dan ketikkan coding sbb :
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use InertiaInertia;
class DashboardController extends Controller
{
public function index () {
$data = [
'firstname' => 'adi',
'lastname' => 'nata',
];
return Inertia::render('Dashboard/Index', $data);
}
}
PHP
Copy
Penjelasan coding diatas kita melakukan import dahulu namespace inertia js :
6. use InertiaInertia;
PHP
Copy
lalu kita melakukan render Inertia dengan menggunakan Inertia Render :
return Inertia::render('Dashboard/Index', $data);
PHP
Copy
setelah selesai maka kita build projectnya dengan cara :
npm run dev
JavaScript
Copy
Dan agar setiap perubahan kita tidak perlu menjalankan run dev maka kita dapat
menjalankan perintah
npm run watch atau dapat juga menjalankan npm run watch-poll
JavaScript
Copy
berikut tampilan halaman dashboard jiika di jalankan di browser :
Kesimpulan :
Pada seri artikel inertia ini kita sudah belajar bagaimana caranya membuat layout,
import layout di pages dan melakukan render di inertia menggunakan Inertia render
dengan memahami hal diatas kita akan sangat terbantu dalam membuat projects
kedepannya dikarenakan pada saat membangun aplikasi kita akan selalu
bersinggungan dengan hal diatas.
7. bagaimana apakah anda tertarik menerapkan inertia js di projects anda selanjutnya
? jawab di kolom komentar ya..!!
Sumber : https://adinata.id/inertia-js/cara-mudah-membuat-layoutimport-layout-dan-render-
layout-pada-inertia-js/
Salam Sukses,
Adinata
# JanganLupaBerkarya