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

5.0 (17 ulasan) 153 members

DISKON 13%
Rp. 350.000 Rp. 400.000

TENTANG

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 RESFTful API menggunakan Laravel dan mengimplementasikan sistem otentikasi dengan Passport. Tidak hanya itu, kita juga akan belajar banyak hal di dalam Laravel, seperti :

  1. Membuat Migration untuk table dan strukturnya.
  2. Relationship untuk menghubungkan antara satu table dengan table yang lain.
  3. Manipulasi data menggunakan Accessor, Mutator dan Casting.
  4. Api Resource untuk membuat standart API yang bagus dan baik.
  5. 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 mengimplementaskan konsep CI/CD atau biasa disebut dengan Continue Integration dan Contrinue Development.


DEMO PROJECT :

DISUSUN OLEH

Fika Ridaul Maulayya

Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

DAFTAR ISI

    Pendahuluan
  • Cover
  • Kata pengantar
  • Lisensi Buku
  • Tentang Buku
    Perancangan
  • Diagram Aplikasi
  • Struktur dan Relasi Database
  • Wirefrim UI Desain Website
    Installasi & Persiapan Backend
  • Persiapan dan Tools
  • Membuat Project Laravel dengan Composer
  • Upgrade Versi Laravel
    Database
  • Konfigurasi Koneksi Database di Laravel
  • Membuat Model dan Migration
  • Eloquent Relationships
  • Eloquent Accessor, Mutator dan Casting
  • Membuat Data User dengan Seeder
  • Membuat Data User dengan Tinker
    Restful API - Admin
  • Apa itu API ?
  • Installasi dan Konfigurasi Laravel Passport
  • Membuat RESTful API Login
  • Membuat RESTful API Logout
  • Membuat RESTful API Dashboard
  • Membuat RESTful API CRUD Categories
  • Membuat RESTful API CRUD Places
  • Membuat RESTful API CRUD Sliders
  • Membuat RESTful API CRUD Users
    Restful API - Web
  • Membuat RESTful API Categories Web
  • Membuat RESTful API Places Web
  • Membuat RESTful API Sliders Web
    Pengenalan JavaScript ES6 & React.js
  • JavaScript ES6
  • Variable di dalam ES6
  • Default Parameter
  • Template String
  • Arrow Function
  • Rest Parameter
  • Destructuring & Restructuring
  • Spread Operator
  • Array.map
  • Promise
  • Async Await
  • Apa itu React.js ?
  • Komponen dan Props di React.js
  • JSX di React.js
  • Lifecycle dan Hooks di React.js
    Installasi & Persiapan Frontend
  • Membuat Project Baru di React.js
  • Installasi dan Konfigurasi Package Pendukung
  • Konfigurasi Endpoint API di React.js
  • Integrasi Assets Eksternal (CSS & Images)
  • Mendapatkan API Key Mapbox
    Halaman Admin
  • Konfigurasi Route Login
  • Membuat Proses Login
  • Membuat Component Sidebar Admin
  • Membuat Layouts Admin
  • Konfigurasi Private Route Dashboard
  • Menampilkan Statistik Data di Halaman Dashboard
  • Membuat Component Pagination
  • Konfigurasi Private Route Categories Index
  • Menampilkan Data Categories
  • Konfigurasi Private Route Category Create
  • Membuat Proses Create Data Category
  • Konfigurasi Private Route Category Edit
  • Membuat Proses Edit Data Category
  • Konfigurasi Private Route Places Index
  • Menampilkan Data Places
  • Konfigurasi Private Route Place Create
  • Membuat Proses Create Data Place
  • Menambahkan Mapbox Geocoder di Proses Create Data Place
  • Konfigurasi Private Route Place Edit
  • Membuat Proses Edit Data Place
  • Menambahkan Mapbox Geocoder di Halaman Edit Data Place
  • Konfigurasi Private Route Sliders Index
  • Menampilkan Data Sliders
  • Konfigurasi Private Route Slider Create
  • Membuat Proses Create Data Slider
  • Konfigurasi private Route Users Index
  • Menampilkan Data Users
  • Konfigurasi Private Route User Create
  • Membuat Proses Create Data User
  • Konfigurasi Private Route User Edit
  • Membuat Proses Edit Data User
    Halaman Web
  • Membuat Component Header Web dan Footer Web
  • Membuat Component Slider
  • Membuat Layout Web
  • Konfigurasi Route untuk Halaman Home
  • Menampilkan Data Categories di Navbar
  • Menampilkan Data Sliders di Halaman Home
  • Menampilkan Data Categories di Halaman Home
  • Menampilkan User di Navbar
  • Konfigurasi Route untuk Halaman Category Show
  • Menampilkan Data Places Berdasarkan Category
  • Konfigurasi Route untuk Halaman Places
  • Menampilkan Halaman Places
  • Konfigurasi Route untuk Halaman Detail Place
  • Menampilkan Halaman Detail Data Place
  • Menampilkan Gambar Slider di Halaman Detail Place
  • Menampilkan Maps di Halaman Detail Data Palce
  • Konfigurasi Route Maps Directions
  • Menampilkan Directions dari Lokasi Sekarang ke Titik Lokasi Maps
  • Konfigurasi Route untuk Halaman Maps
  • Menampilkan Semua Data Places di Maps
  • Konfigurasi Route untuk Halaman Search
  • Membuat Fitur Search Data Places
    Konfigurasi PWA
  • Apa itu PWA ?
  • Konfigurasi PWA di React.js
    Deployment
  • Deployment Project Laravel di cPanel (Shared Hosting)
  • Deploy Project Vue Js di Netlify
    Penutup
  • Source Code
  • Penutup

Dapatkan ebook sekarang untuk dapat mengikuti pembelajaran

TOOLS

Laravel

The PHP Framework for Web Artisans

React.js

A JavaScript library

Mapbox

Online maps for websites and applications

SCREENSHOTS


Homepage

Detail Place

Map Directions

BENEFITS


Ebook

Souce Code

Private Group Member

Konsultasi Belajar

Update Materi

Kupon Diskon Hosting

Sertifikat

Akses Selamanya

Real Studi Kasus

ULASAN MEMBERS

Wawan Indrawan at SantriKoding

Belajarlan karena tidak ada manusia dilahirkan dalam ke...


Materinya sangat bagus dan lengkap, penjelasan sangat jelas.

Yasin Yusuf at SantriKoding

saya adalah aku


Materinya bagus, murah dipelajari, cocok untuk pemula, terimakasih santrikoding

Rafael Nuansa Ramadhon at SantriKoding

I am currently studying at Santri Koding as a step towa...


Modulnya ga pernah gagal, Apa yang kita pelajari disini sangat bermanfaat, salam kurawal

Muhammad Hasan at SantriKoding

Belajar coding karena desakan ekonomi


pas lg dpt tugas bikin web gis ada ebook ini, lgsg beli deh...bagus isinya


Modulnya sangat bermanfaat dalam membantu saya menyelesaikan aplikasi gis untuk projek skripsi, recommended pissan

Kevin at SantriKoding

Severus Snape was born 9 January 1960 to Tobias Snape,...


Beli tutorial disini, sangat membantu dalam pengerjaan projek saya. Ditunggu kelas lainnya mas Fika


Bagus, mudah dimengerti. Mentornya fast respond jika ada kendala

Muhammad Rosyad Syamil at SantriKoding

Turn coffee into codes </>


Mantaaaap mas fika, terima kasih sudah berbagi ilmu. Course nya mudah di pahami dan sangat bermanfaat. Alhamdulillah skripsi ku kelar gara2 course ini. Anyway ini pertama kali belajar react.js, dan ternyata penjelasan dari mas fika juga sangat membantu saya sebagai pemula di react.js. Konsul via telegam nya sangat fast respon, komunitas santrikoding the best lah, solid dan sangat supportive. Terima kasih mas fika dan tim santrikoding.


sangat runut dan penjelasan tiap detailnya bagus sekali

Abdurrahman Ziyad at SantriKoding

Final year student of Informatics Engineering who has a...


Bagus banget, materi nya mudah dipahami dan hasilnya sangat memuaskan


Terimakasih kak Fika dan team, sangat bermanfaat e-booknya dan bisa join grup juga,jadi gak perlu khawatir stuck..


mantab materinya, runut, mudah dimengerti dan gampang dipahami. Recommended !!!

Aldhi Raqiswandri at SantriKoding

Fullstack Developer


sanagat bagus, bagi saya yang sudah memiliki basic tentang crud. dan di impelentasikan melalui project. saya sgt terbantu dengan cara ini karena learning by doing langsung bikin projectnya

Febryan at SantriKoding

I am Febryan, a dedicated Web and Android Developer wit...


Mantaps 👌

Febryan at SantriKoding

I am Febryan, a dedicated Web and Android Developer wit...


Mantaps 👌