Pertemuan 1: Persiapan

Diagram merupakan langkah awal bagi para software developer sebelum membangun sebuah aplikasi, dengan menggunakan sebuah diagram maka kita bisa lebih mudah dalam mengetahui alur sebuah aplikasi dan data yang berjalan.

Dengan memetakan fitur-fitur menggunakan diagaram, maka para software developer akan lebih mudah dan cepat dalam pengembangan aplikasi, karena alur dan data yang akan dibuat sudah ada gambarannya. Apalagi jika kita ingin mengembangkan aplikasi dengan sekala yang sangat besar.

Di dalam studi kasus yang akan kita buat di dalam buku ini akan kita pisahkan menjadi 2 diagram, yaitu untuk admin dan web.

Diagram Admin

Dari gambar diagram admin di atas kita akan membuat sebuah RESTful API / endpoint yang mengimplementasikan otentikasi menggunakan Passport. Dimana sebelum kita mengakses beberapa module, kita perlu melakukan proses otentikasi terlebih dahulu. Artinya endpoint tersebut akan bersifat private / hanya bisa diakses oleh pengguna tertentu.

Di atas, jika sudah berhasil melewati proses otentikasi, maka kita bisa mengakses beberapa module yang ada, seperti :

1. /dashboard - endpoint ini nantinya akan kita gunakan untuk menampilkan statistik dari jumlah data yang ada di beberapa table.
2. /categories - endpoint ini akan digunakan untuk membuat master data categories dan disini kita bisa melakukan operasi CRUD atau biasa disebut dengan Create, Read, Update dan Delete.
3. /places - endpoint ini akan digunakan untuk membuat master data places dan kita juga akan melakukan operasi CRUD di dalam endpoint ini.
4. /sliders - endpoint ini akan kita gunakan untuk membuat master data sliders dan kita akan menggunakan operasi Create, Read dan Delete saja.
5. /users - endpoint ini akan digunakan untuk membuat master data users, dimana user ini yang nantinya digunakan untuk melakukan proses otentikasi ke dalam sistem dan kita juga akan melakukan oprasi CRUD di dalam endpoint ini.

Diagram Web

Dari gambar diagram web di atas, kita akan membuat sebuah RESTful API atau endpoint yang bersifat public, artinya semua pengguna bisa mengakses endpoint tersebut dengan bebas. Dimana di dalam RESTful API di atas kita akan membuat beberapa module yang nantinya akan kita gunakan untuk menampilkan data di halaman frontend, yaitu :

1. /categories - endpoint ini akan kita gunakan untuk menampilkan 2 jenis data, yang pertama adalah index, dimana akan digunakan untuk menampilkan semua list data categories. Dan untuk yang kedua adalah show, dimana akan digunakan untuk meampilkan detail data dari category, dimana di dalam detail category tersebut kita juga akan menampilkan semua list data places yang memiliki hubungan dengan category tersebut.
2. /places - endpoint ini juga akan digunakan untuk menampilkan 2 jenis data, yaitu index dan show. Dimana untuk endpoint index akan digunakan untuk menampilkan semua list data places yang ada, sedangkan untuk endpoint show akan digunakan untuk menampilkan detail data place.
3. /sliders - endpoint ini digunakan untuk menampilkan list data sliders.

Dengan membuat diagram seperti di atas, harapannya kita akan memiliki gambaran tentang aplikasi atau website yang akan dibuat nantinya.

Pembuatan sebuah struktur database beserta relasi merupakan hal wajib yang perlu dilakukan oleh seorang software developer atau programmer sebelum melakukan proses development atau koding.

Permasalahan yang sering terjadi adalah para software developer atau programmer yang baru belajar melakukan koding secara langsung. Dan membuat database berserta relasinya dengan berjalannya waktu, dan tentu saja hal ini tidak dibenarkan, karena bisa membuat aplikasi yang dikerjakan sangat lama dan bisa berubah-ubah sewaktu-waktu.

Untuk struktur table dan relasi database dari website yang akan kita buat nanti kurang lebih seperti berikut ini :

Dengan membuat struktur table dan relasi seperti gambar di atas, maka akan mempermudah kita dalam mengimplementasikannya.

Karena menggunakan Laravel, maka untuk struktur table dan relasi kita tidak perlu membuatnya secara manual di dalam database. Karena kita akan membuat table di dalam Laravel menggunakan Migration dan untuk relasi antar table kita akan menggunakan fitur Eloquent Relationships.

Dari gambar di atas, kita akan memiliki beberapa relasi antar table, diantaranya yaitu :

1. ONE TO MANY - antara table users dengan table sliders. Artinya 1 user bisa memliki banyak data sliders.
2. ONE TO MANY - antara table users dengan table categories. Artinya 1 user bisa memiliki banyak data categories.
3. ONE TO MANY (Inverse / Belongs To) - antara table users dengan table places. Artinya 1 user bisa memiliki banyak data places. Dan kita atur menjadi Inverse / Belongs To, yang artinya kita juga bisa memanggil data induk user dari data place (dua arah).
4. ONE TO MANY (Inverse / Belongs To) - antara table categories dengan table places. Artinya 1 category bisa memiliki banyak data places. Dan kita atur menjadi Inverse / Belongs To, artinya kita juga bisa memanggil data induk category dari data place (dua arah).
5. ONE TO MANY - antara table places dengan table place_images. Artinya 1 place bisa memiliki banyak data place_image.

Dengan membuat gambar struktur table beserta relasinya, maka akan mempermudah kita dalam mengembangkan sebuah aplikasi / website dan memperkecil terjadinya bug atau kesalahan.

Wirefrime adalah salah satu tahap yang sangat penting ketika kita mengembangkan sebuah aplikasi maupun website, dengan adanya wirefrime kita bisa membuat rancangan desain dan user exprience atau biasanya disebut UI/UX sebelum masuk ke tahap development atau pengembangan.

Wirefrime merupakan sebuah kerangkan yang berfungsi untuk membuat tata letak suatu desain aplikasi atau website agar sesuai dengan apa yang akan di kerjakan, umumnya tugas ini di kerjakan oleh seorang UI/UX desainer. Umunya wirefrime berupa beberapa komponen seperti Header, Sidebar, Content dan Footer.

Disini kita akan melihat wirefrime dari aplikasi atau website Travel Wisata yang akan kita buat nantinya, ini hanya sebuah gambaran dari website yang akan kita buat nanti. berikut ini beberapa wirefrime yang akan kita implementasikan ke dalam website nanti.

Homepage

Di dalam halaman homepage kita akan membuat beberapa component, diantara seperti navbar, slider, search, content dan footer. Kurang lebih seperti berikut ini:

Detail Category

Halaman detail category akan kita gunakan untuk menampilkan list data places yang berhubungan dengan category yang sedang dibuka tersebut. Kurang lebih seperti berikut ini :

Detail Place

Halaman Detail Place akan digunakan untuk menampilkan informasi lokasi wisata, dimana di dalamnya kita akan menampilkan beberapa component, seperti :

1. Galeri Foto
2. Informasi Wisata
3. Maps
4. Dan Kontak

Dan kita jugaa menambahkan 1 button yang bernama OPEN DIRECTION, dimana ketika button tersebut di klik akan menuju ke halaman baru yang berisi navigasi dari lokasi kita ke titik tempat wisata tersebut berada (direction).

Kurang lebih seperti berikut ini :

Direction

Halaman direction akan berisi navigasi dari titik lokasi kita berada ke lokasi tempat wisata berada. Halaman ini akan akan dijalankan ketika kita klik button OPEN DIRECTION yang ada di halaman detail place. Kurang lebih seperti berikut ini :

Login

Halaman login digunakan untuk masuk ke dalam halaman admin yang ada di dalam website. Kurang lebih seperti berikut ini :

Dengan membuat beberapa wirefrime seperti di atas, maka saat proses development kita tidak perlu memikirkan lagi tampilan yang akan dibuat seperti apa, dengan begitu maka proses development akan menjadi lebih cepat dan terstruktur dengan baik.

Sekarang kita akan mempersiapkan tools dan software apa saja yang akan kita gunakan sebelum memulai praktek membuat website travel wisata. Beberapa tools tersebut seperti Text Editor, Web Server, PHP, Node.js, Database, Composer dan lain-lain.

Langkah 1 - Installasi Text Editor

Untuk Text Editor disini akan direkomendasikan menggunakan Visual Studi Code, teman-teman bisa mengunduhnya melalui link berikut ini : https://code.visualstudio.com/, silahkan disesuaikan dengan sistem operasi yang digunakan.

Setelah Visual Studi Code berhasil terinsall, sekarang saya akan rekomendasikan beberapa plugin yang akan kita gunakan dalam pengembangan aplikasi menggunakan Laravel dan React.js

Plugin Visual Studi Code untuk PHP

• https://marketplace.visualstudio.com/items?itemName=hakcorp.php-awesome-snippets
• https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client
• https://marketplace.visualstudio.com/items?itemName=MehediDracula.php-namespace-resolver
• https://marketplace.visualstudio.com/items?itemName=rexshi.phpdoc-comment-vscode-plugin
• https://marketplace.visualstudio.com/items?itemName=ronvanderheijden.phpdoc-generator

Plugin Visual Studio Code untuk Laravel

• https://marketplace.visualstudio.com/items?itemName=amirmarmul.laravel-blade-vscode
• https://marketplace.visualstudio.com/items?itemName=austenc.laravel-blade-spacer
• https://marketplace.visualstudio.com/items?itemName=codingyu.laravel-goto-view
• https://marketplace.visualstudio.com/items?itemName=stef-k.laravel-goto-controller
• https://marketplace.visualstudio.com/items?itemName=amiralizadeh9480.laravel-extra-intellisense

Plugin Visual Studio Code untuk JavaScript dan React.js

• https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel
• https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
• https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html
• https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
• https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• https://marketplace.visualstudio.com/items?itemName=skyran.js-jsx-snippets
• https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

Langkah 2 - Installasi Web Server

Untuk Web Server, PHP dan Database disini kita bisa menggunakan tools yang sudah di bundle menjadi 1, seperti XAMPP atau Laragon.

Disini kita bisa memilih menggunakan XAMPP atau Laragon, sesuai dengan selera masing-masing, kelebihan menggunakan Laragon dibandingkan XAMPP adalah dapat berganti-ganti versi PHP dengan lebih mudah dan hal tersebut belum bisa dilakukan oleh XAMPP untuk saat ini.

Dan kekurangan Laragon sendiri belum memiliki Database Manager seperti phpMyAdmin, tapi kita kita bisa menginstallnya sendiri dengan mudah.

Disini disarakan menggunakan PHP versi 8.3 di dalam XAMPP ataupun Laragon. Berikut ini link yang bisa teman-teman pakai untuk mengunduh aplikasi-nya.

Link Unduh XAMPP

• https://www.apachefriends.org/download.html

Link Unduh Laragon

• https://laragon.org/download/

Langkah 3 - Installasi Node.js

Untuk installasi Node.js sangat mudah sekali, kita bisa mengunduh binary file dari situs resminya atau bisa menggunakan command line. Untuk installasi silahkan bisa membukanya di link berikut ini : https://nodejs.org/en/download/

Silahkan pilih versi Node.js yang paling terbaru atau menggunakan versi LTS atau Long Time Support. Untuk mengetahui apakah Node.js sudah terinstall di komputer kita, silahkan jalankan perintah di bawah ini di terminal/CMD:

node --version

npm --version

Langkah 4 - Installasi Composer

Jika menggunakan XAMPP, maka untuk Composer kita harus melakukan installasi manual, karena tidak ikut di dalam aplikasi XAMPP tersebut, akan tetapi jika menggunakan Homestead maka kita tidak perlu melakukan installasi Composer, karena secara default, paket Composer sudah tersedia di dalamnya. Berikut ini link untuk melakukan installasi Composer dan silahkan di sesuaikan dengan sistem operasi yang digunakan.

• Installation - Linux / Unix / macOS : https://getcomposer.org/doc/00-intro.md#installation-linux-unix-macos
• Installation - Windows : https://getcomposer.org/doc/00-intro.md#installation-windows

Untuk memverifikasi apakah Composer sudah berhasil terinstall di dalam komputer, kita bisa menjalankan perintah berikut ini di dalam CMD/terminal :

     composer

Langkah 5 - Installasi Postman

Postman merupakan salah satu tool yang wajib dimiliki oleh seorang software developer. Postman sendiri merupakan sebuah tool yang digunakan untuk melakukan API testing. Postman memiliki fitur yang dapat digunakan secara personal maupun bersamaan (teamwork).

Enaknya lagi, Postman juga dapat melakukan generate sebuah dokumentasi Api dari proses testing API yang pernah dilakukan. Karena di dalam buku ini kita akan membuat dan menguji sebuah Rest API, maka kita perlu melakukan installasi Postman terlebih dahulu.

Untuk installasi Postman bisa disesuaikan dengan sistem operasi yang digunakan dan untuk mendapatkan tool tersebut kita bisa masuk di link berikut ini : https://www.postman.com/downloads/

Silahkan di install dan sesuaikan dengan sistem operasi yang digunakan, jika berhasil maka kurang lebih tampilannya seperti berikut ini :

Di dalam Laravel ada beberapa cara yang bisa kita gunakan untuk memulai membuat project baru. Jika kita lihat di dokumentasi resmi Laravel, maka kita bisa menemukan beberapa opsi yang bisa kita gunakan, seperti :

1. Sails Service (Docker Based).
2. Laravel Installer.
3. Composer Create project.

Di dalam buku ini kita akan belajar membuat project Laravel menggunakan Composer Create Project. Karena kita sudah memiliki PHP dan Composer yang sudah terinstall di dalam komputer. Setelah project berhasil dibuat, maka kita akan lakukan pengembangan di lokal menggunakan perintah CLI dari artisan.

Langkah 1 - Membuat Project Laravel

Sekarang kita akan belajar membuat project baru di dalam Laravel. Sebelum itu, pastikan teman-teman harus terhubung dengan internet, karena semua paket akan diunduh secara online menggunakan Composer.

Silahkan masuk ke dalam folder dimana teman-teman akan menyimpan projectnya. Jika menggunakan XAMPP, biasanya dibuat di dalam folder htdocs. Setelah itu, jalankan perintah berikut ini di dalam terminal/CMD :

composer create-project --prefer-dist laravel/laravel:^12.0 laravel-travel

Jika perintah di atas dijalankan, maka akan membuat sebuah project Laravel baru dengan versi 12.x.x dan untuk nama project-nya adalah laravel-travel.

Langkah 2 - Menjalankan Project Laravel

Setelah berhasil menginstall project Laravel, maka kita akan lanjutkan belajar bagaimana cara menjalankan project Laravel tersebut menggunakan perintah artisan. Silahkan jalankan perintah berikut ini di dalam terminal/CMD :

cd laravel-travel

Perintah cd di atas, digunakan untuk melakukan navigasi ke dalam sebuah folder. Dan folder tersebut adalah laravel-travel. Jika kita sudah berada di dalam folder tersebut, maka kita bisa menjalankan project-nya menggunakan perintah artisan. Silahkan jalankan perintah berikut ini di dalam terminal/CMD :

php artisan serve

Jika perintah artisan di atas berhasil dijalankan, maka project kita akan dijalankan di dalam localhost menggunakan port 8000. Kita bisa membukanya menggunakan browser dengan mengetikkan http://localhost:8000 dan jika berhasil maka kurang lebih hasilnya seperti berikut ini :

Jika teman-teman mendapatkan hasil seperti di atas, maka artinya project Laravel kita sudah berhasil dijalankan dan kita bisa lanjutkan ke tahap pengembangan selanjutnya.

Langkah 3 - Menjalankan Storage Link

Laravel akan menyimpan file-file yang di upload ke dalam folder yang bernama storage. Akan tetepai Laravel secara default hanya bisa membaca file yang berada di dalam folder public.

Dengan menjalankan perintah artisan storage:link, maka kita akan membuatkan sebuah link atau shortcut dari folder storage ke dalam folder public. Dengan begini maka Laravel bisa membaca semua file-file yang ada di dalam folder storage melalui folder public.

Silahkan jalanakn perintah berikut ini di dalam terminal/CMD :

php artisan storage:link

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan sebuah output dengan pesan seperti berikut ini :

The [public/storage] link has been connected to [storage/app/public]

Dan kita bisa periksa di dalam folder public akan muncul file/folder baru dengan nama storage. File/folder tersebut akan mereferensikan ke dalam folder storage/app/public.