Modul Implementasi API untuk Frontend.

“"Tidak ada yang mudah, tetapi semuanya mungkin."”

A. Pendahuluan
Modul ini merupakan lanjutan dari modul sebelumnya. Jika sebelumnya kita telah
membuat API di backend, sekarang kita akan mengimplementasikannya ke tampilan
frontend website. Silakan ikuti langkah-langkah di bawah ini.

B. Alat yang dibutuhkan

• Akses Internet
• Personal Komputer / Laptop
• Webserver (xampp /laragon) dengan php >= 8.2
• Composer (jika belum ada silahkan download pada url dibawah)
https://getcomposer.org/download/
• Visual Studio (jika belum ada silahklan download pada url dibawah)
https://code.visualstudio.com/download
• Postman (Jika belum ada silahkan download pada url dibawah)
https://www.postman.com/downloads/

C. Langkah kerja
1. Masuk ke projek portfolio sebelumnya menggunakan visual studio code
Note: Pastikan kamu sudah menjalankan server local atau project portofolio

PENTING : DISINI SAYA MENGGUNKAN HOSTNAME DENGAN

portfolio.arg, JIKA KAMU TIDAK MENGGUNKAN HOSTNAME MAKA
SILAHKAN GANTI SAJA NANTI URL DI API MENJADI IP LOCAL SEPERTI
BIASANYA.

Contoh :
http://portofolio.arg/api/login -> ini hostname yang saya gunakan

http://127.0.0.1:8000/api/login -> ip local laptop dengan port 8000

2. Enkripsi ID Riwayat Pendidikan dari model,

Tambahakan function getIdAtribute agar id yang tampil di api langsung ter encrypt.
Hasil Nya :
 Kamu bisa bandingkan dengan hasil di modul sebelumnya.

3. Membuat Frontend Controller

Sekarang buatlah sebuah controller dengan nama FrontendController, yang mana ini
bertujuan nantinya untuk handle halaman frontend.

Note : kamu di persilahkan untuk berkreasi semaksimal mungkin, kamu diperbolehkan

jika ingin membagi setiap halaman dengan controller.

Setelah Membuat Frontend controller, Langkah selanjutnya adalah kamu perlu

Membuat beberapa function seperti dibawah ini.
4. Membuat Route
Setelah kamu Membuat beberapa function di frontend controller, Langkah selanjutnya
adalah kamu perlu membuat route, masuk ke web.php dan buatlah seperti kodingan
dibawah ini.
5. Download Template Untuk Portfolio
Selanjutnya kita akan menggunkan tempalate bootsrap. Silahkan download template
pada url ini https://www.bootstrapdash.com/product/free-bootstrap-resume

Note : Kamu diperbolehkan berkreasi sebagus mungkin, kamu diperbolehkan

menggunakan desain sendiri.

Setelah didownload, ektrak file zip tersebut kemudian buat sebuah folder di folder
public. Dengan nama folder template. Setelah itu pindahakan semua asset template
tersebut ke dalam folder template tersebut, Sehingga strukrutnya jadi seperti dibawah.

6. Layouting
Sekarang kita perlu mengatur tampilan dan main untuk template kita, untuk itu silahkan
buat folder seperti dibawah ini.
Kemudian masuk ke folder layouts. Dan buatlah file :
- Css.blade.php
- Js.blade.php
- Main.blade.php
- Navbar.blade.php

Kemudian Masuk ke folder template yang di ektrak tadi dan ambil source code
index.html nya.

Selanjutnya tempel semuanya di file main.blade.php

Seteleah ditempel. Langkah selanjutnya kita perlu memisah misahnya agar
gampang dan mudah untuk dipahami. Kita perlu memisahkan css, navbar,js. Untuk
itu pindahkan kodenya ke file masing masing yang sudah kita buat tadi.

Kode untuk css.blade.php

Note : {{asset(tempalte/assest)}} -> ini adalah pemanggilan asset local template

yang sudah kita simpan di public/template tadi.
Kode untuk js.blade.php:

Disini kita menambahkan funtion logout agar user bisa keluar dariwebsite kita.

Kode untuk navbar.blade.php

Note : silahkan buat dan modfikasi navbar seperti kodingan diatas.

Langkah selenjutya untuk kode yang masih tersisa di main.blade.php, maka kita
perlu masuk ke folder dashboard. kemudian buatlah file index.blade.php
Dan pindahkan main nya semua ke file tersebut sehingga seperti kodingan dibawah:
Note : silahkan modifikasi kodenya seperti gambar diatas

Setelah memindahkan kodenya ke dashboar->index.blade.php. Kita perlu

memanggil file file yang sudah dipisah tadi di main.blade.php
 Masuk ke layouts.main.blade.php dan buatah seperti gambar dibawah ini.

Sehingga struktur folder views menjadi seperti ini untuk saat ini.

7. Membuat Login dan integrasi dengan API

Untuk langkah awal kita perlu membuat halaman atau tampilan loginnya terlebih
dahulu. Masuk ke folder auth. Kemudian buat login.blade.php dan buatlah kodingan
seperti dibawah.
Note : Jika kamu seorang frontend sejati. Maka silahkan kreasikan desainmu sebaik
mungkin.
 Kita bisa cek hasilnya jadi seperti ini,

8. Membuat function login.

Masuk ke folder api. Kemudian buatlah beberapa file seperti foto dibawah ini.

Setelah membuat beberapa file seperti difoto. Masuk ke js-login, kemudian buatlah
kodingan seperti dibawah ini.
Setelah membuat kodingan di js-login. Sekarang masuklah ke file token.blade.php dan
buatlah seperti dibawah ini.
 Note: file token.blade.php ini berfungsi untuk mengecek user sudah login atau belum.
Jika sudah login maka akan di redirect ke dashboard. Akan tetapi jika kamu punya cara
lebih efektif silahkan diterapkan.

9. Menampilkan data berdasarkan user yang aktif.

Selanjutnya kamu masuk ke file js-profile.blade.php dan buatlah kode seperti dibawah
ini.
Ini berfungsi untuk menampilkan data user pada bagian dashboard, sehingga hasilnya
jadi seperti ini.
10. Menampilkan Riwayat Pendidikan dan CRUD untuk riwayat pendidikan.
Langkah awal silahkan masuk ke folder riwayat-pendidikan kemudian buatlah file
seperti dibawah ini.

Kemudian buat kode di create modal seperti ini.

Delete-modal
Edit-modal

Index.blade.php
11. Implementasi API untuk menampilkan, menambah dan menghapus dan edit riwayat
pendidikan.

Masuk ke folder api>js-pendidikan.blade.php.

Setelah itu buatlah kodinngan seperti dibawah ini.
Jika sudah selesai kamu bisa masuk ke menu Pendidikan dan menambahkan data
pendidikan.

Dashboard
Index pendidikan

Tambah data
Edit Data

Hapus data
Studi Kasus :
1. Jika sebelumnya kita sudah membuat login, Langkah selanjutnya kamu diminta untuk
membuat tampilan register dan melakukan implementasi api register yang sudah dibuat
sebelumnya. Sehingga pengguna lain bisa register.
2. Kamu diminta untuk membuat CRUD Experience (pengalaman). Konsep nya sama seperti
CRUD Riwayat Pendidikan. Yang mana itu data pengalamannya akan disimpan
berdasarkan user_id masing masing.
Alur Kerja :
- Merancang table untuk pengalaman
- Membuat model
- Membuat controller dan api
- Menerima dan implementasi api di frontend

3. Setelah kamu membuat CRUD Experience (pengalaman) kamu diminta untuk membuat 1
halaman public yang berfungsi untu mampilkan semua data user atau data portfolio
berdasarkan username tanpa harus login

Sebagai contoh : http://portfolio.arg/fikry05

Maka jika semua data Pendidikan, atau pengalaman user dengan username fikry05 akan
muncul seperti di dashboard tadi. Tapi perlu di ingat ini tanpa login. Pastikan kamu
menggunakan konsep dengan memisahkan antara backend dan frontend.