Membangun Webiste Wisata Berbasis GIS dan PWA dengan Laravel, React.js dan Mapbox

Membangun Webiste Wisata Berbasis GIS dan PWA dengan Laravel, React.js dan Mapbox

Di dalam kelas ini kita akan belajar bersama-sama bagaimana menjadi seorang Full-Stack Web Developer dengan membangun sebuah website Travel Wisata Berbasis GIS Geographic Information System (Sistem informasi geografis) dan PWA (Progressive Web Apps) dengan Laravel, React.js dan Mapbox dari 0 sampai online.

BEGINNER0 penilaian12 peserta

Tentang Kelas

Di dalam buku ini kita akan belajar bersama-sama bagaimana menjadi seorang Full-Stack Web Developer dengan membangun sebuah website Travel Wisata Berbasis GIS Geographic Information System (Sistem informasi geografis) dan PWA (Progressive Web Apps) dengan Laravel, React.js dan Mapbox dari 0 sampai online.

Pertama, kita akan belajar membangun sebuah web service (backend) atau RESTful API menggunakan Laravel dan mengimplementasikan sistem otentikasi dengan Passport. Tidak hanya itu, kita juga akan belajar banyak hal di dalam Laravel, seperti :

  • Membuat Migration untuk table dan strukturnya.
  • Relationship untuk menghubungkan antara satu table dengan table yang lain.
  • Manipulasi data menggunakan Accessor, Mutator dan Casting.
  • Api Resource untuk membuat standart API yang bagus dan baik.
  • Dan masih banyak lagi.

Kedua, kita akan belajar membuat project baru di React.js dan menampilkan data yang sudah kita buat sebelumnya di Laravel. Di dalam React.js kita juga akan belajar beberapa hal, seperti : Otentikasi menggunakan Passport, membuat navigasi Route secara SPA atau Single Page Application, membuat Private Route untuk halaman admin, Integrasi dengan Mapbox untuk menampilkan informasi data di dalam Maps dan Direction dan masih banyak lagi.

Setelah project di dalam React.js selesai, maka kita akan belajar lagi bagaimana cara implementasi PWA atau Progressive Web Apps. Dengan menggunakan PWA, maka website yang kita bangun akan memiliki performa yang lebih cepat dan mampu memberikan pengalaman layaknya menggunakan aplikasi mobile (Android / iOS).

Ketiga, setelah semua project baik backend maupun frontend selesai dibuat, maka kita akan lanjutkan belajar bagaimana cara melakukan proses deployment di dalam server. Tujuannya agar kita dapat mengakses website tersebut di internet secara global.

Untuk Laravel (backend) akan kita deploy ke dalam Shared Hosting (cPanel). Sedangkan untuk React.js (frontend) akan kita deploy ke Netlify dan mengimplementasikan konsep CI/CD atau biasa disebut dengan Continuous Integration dan Continuous Development.

Demo Project : BackEnd : https://react-travel-gis.netlify.app/admin/login FrontEnd : https://react-travel-gis.netlify.app/

Daftar Materi

Cover00.00
Kata Pengantar00.00
Lisensi Buku00.00
Tentang Buku00.00

Diagram Aplikasi00.00
Struktur dan Relasi Database00.00
Wirefrime UI Desain Website00.00

Persiapan dan Tools00.00
Membuat Project Laravel dengan Composer00.00
Upgrade Versi Laravel00.00

Konfigurasi Koneksi Database di Laravel00.00
Membuat Model dan Migration00.00
Eloquent Relationships00.00
Eloquent Accessor, Mutator dan Casting00.00
Eloquent Accessor, Mutator dan Casting00.00
Membuat Data User dengan Seeder00.00
Membuat Data User dengan Tinker00.00

Apa itu API ?00.00
Installasi dan Konfigurasi Laravel Passport00.00
Membuat RESTful API Login00.00
Membuat RESTful API Logout00.00
Membuat RESTful API Dashboard00.00
Membuat RESTful API CRUD Categories00.00
Membuat RESTful API CRUD Places00.00
Membuat RESTful API CRUD Sliders00.00
Membuat RESTful API CRUD Users00.00

Membuat RESTful API Categories Web00.00
Membuat RESTful API Places Web00.00
Membuat RESTful API Sliders Web00.00

JavaScript ES600.00
Variable di dalam ES600.00
Default Parameter00.00
Template String00.00
Arrow Function00.00
Rest Parameter00.00
Destructuring & Restructuring00.00
Spread Operator00.00
Array.map00.00
Promise00.00
Async Await00.00
Apa itu React.js ?00.00
Komponen dan Props di React.js00.00
JSX di React.js00.00
Lifecycle dan Hooks di React.js00.00
Menampilkan Data Places00.00

Membuat Project Baru di React.js00.00
Installasi dan Konfigurasi Package Pendukung00.00
Konfigurasi Endpoint API di React.js00.00
Integrasi Assets Eksternal (CSS & Images)00.00
Mendapatkan API Key Mapbox00.00

Konfigurasi Route Login00.00
Membuat Proses Login00.00
Membuat Component Sidebar Admin00.00
Membuat Layouts Admin00.00
Konfigurasi Private Route Dashboard00.00
Menampilkan Statistik Data di Halaman Dashboard00.00
Membuat Component Pagination00.00
Konfigurasi Private Route Categories Index00.00
Menampilkan Data Categories00.00
Konfigurasi Private Route Category Create00.00
Membuat Proses Create Data Category00.00
Konfigurasi Private Route Category Edit00.00
Membuat Proses Edit Data Category00.00
Konfigurasi Private Route Places Index00.00
Menampilkan Data Places00.00
Konfigurasi Private Route Place Create00.00
Membuat Proses Create Data Place00.00
Menambahkan Mapbox Geocoder di Proses Create Data Place00.00
Konfigurasi Private Route Place Edit00.00
Membuat Proses Edit Data Place00.00
Menambahkan Mapbox Geocoder di Halaman Edit Data Place00.00
Konfigurasi Private Route Sliders Index00.00
Menampilkan Data Sliders00.00
Konfigurasi Private Route Slider Create00.00
Membuat Proses Create Data Slider00.00
Konfigurasi private Route Users Index00.00
Menampilkan Data Users00.00
Konfigurasi Private Route User Create00.00
Membuat Proses Create Data User00.00
Konfigurasi Private Route User Edit00.00
Membuat Proses Edit Data User00.00

Membuat Component Header Web dan Footer Web00.00
Membuat Component Slider00.00
Membuat Layout Web00.00
Konfigurasi Route untuk Halaman Home00.00
Menampilkan Data Categories di Navbar00.00
Menampilkan Data Sliders di Halaman Home00.00
Menampilkan Data Categories di Halaman Home00.00
Menampilkan User di Navbar00.00
Konfigurasi Route untuk Halaman Category Show00.00
Menampilkan Data Places Berdasarkan Category00.00
Konfigurasi Route untuk Halaman Places00.00
Menampilkan Halaman Places00.00
Konfigurasi Route untuk Halaman Detail Place00.00
Menampilkan Halaman Detail Data Place00.00
Menampilkan Gambar Slider di Halaman Detail Place00.00
Menampilkan Maps di Halaman Detail Data Palce00.00
Konfigurasi Route Maps Directions00.00
Menampilkan Directions dari Lokasi Sekarang ke Titik Lokasi Maps00.00
Konfigurasi Route untuk Halaman Maps00.00
Menampilkan Semua Data Places di Maps00.00
Konfigurasi Route untuk Halaman Search00.00
Membuat Fitur Search Data Places00.00

Apa itu PWA ?00.00
Konfigurasi PWA di React.js00.00

Deployment Project Laravel di cPanel (Shared Hosting)00.00
Deployment Project React.js di Netlify00.00

Souce Code00.00
Penutup00.00
Penyusun Materi

Prev
Next
Fika Ridaul Maulayya
Fika Ridaul Maulayya

Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Article, Screencasts and E-Books at SantriKoding.com

Testimoni Oleh Siswa

  • Semua
  • Bintang 5
  • Bintang 4
  • Bintang 3
  • Bintang 2
  • Bintang 1
0

(0 reviews)

5 Bintang
0%
4 Bintang
0%
3 Bintang
0%
2 Bintang
0%
1 Bintang
0%
...
Rp. 400,000
Beli sekali akses selamanya
Beli Sekarang
Beli lewat Roadmap
Sewa kelas dan akses selama 1 bulan
Sewa Sekarang
Yang akan kamu dapatkan :
108 Modul
8 jam durasi
Forum Diskusi Tanya Jawab
Klaim Sertifikat Digital

Kelas Populer Lainnya

Prev
Next