TUGAS INDIVIDU 2

“Membuat Website Personal Profil Dengan Konsep Route Dan Views”

PEMROGRAMAN WEB LANJUT

OLEH :
I Kadek Chrisna Bimantara Jelantik Bukian
1915051007
PTI 5D

PRODI PENDIDIKAN TEKNIK INFORMATIKA

JURUSAN TEKNIK INFORMATIKA
FAKULTASTEKNIK DAN KEJURUAN
UNIVERSITAS PENDIDIKAN GANESHA
SINGARAJA
2021 / 2022
1. Jelaskan dan Berikan Screenshoot fitur blade apa saja yang anda gunakan dalam
membuat website ini
Jawaban :
Untuk web profil yang saya buat pada kali ini, saya memanfaatkan beberapa blade
template engine yaitu “@yield”, “@extends” dan “@section”, untuk memudahkan saya
dalam menggunakan template, dimana dengan menggunakan blade ini, saya tidak perlu
memcopy pastekan code html dan css template saya ke beberapa page yang saya gunakan.
@yield sendiri berfungsi untuk menandai daerah yang akan kita ubah atau yang sifatnya
tidak permanent. Jadi di dalam @yield ini kita bisa mengisikan content kita yang sifatnya
berubah – ubah. Selanjutnya untuk mengambil code template saya menggunakan
@extends di childpage dan untuk mengisi content saya menggunakan @section yang
namanya sesuai dengan nama pada @yield.
a. Penggunaan @yield
b. Penggunaan @extends dan @section

c. Halaman Home
d. Halaman Portofolio
 \
2. Jelaskan dan Berikan Screenshoot cara anda dalam mengelola Assets yang ada dan
digunakan dalam template
Jawaban :
Pada web ini saya tidak terlalu banyak menggunakan assets dan template yang saya
gunakan adala template basic dari booststrap yang saya modifikasi lagi. Untuk assets
gambar saya taruh pada folder public dan saya buatkan folder bernama img. Laravel
sendiri untuk link memanggil image sudah langsung terintegrasi dengan folder public jadi
untuk link pemanggilannya kalau kita menaruh gambar pada public tidak perlu menuliskan
public/ lagi. Begitu juga dengan assets lainnya seperti css yang saya gunakan adalah
bootstrap. Jadi untuk css nya juga saya taruh pada folder public dan pemanggilannya juga
sudah terintegrasi dengan folder public
a. Assets Image
 b. Assets CSS Bootstrap

3. Jelaskan dan Berikan Screenshoot cara anda dalam mengimplementasikan

Inheritance Template pada website
Jawaban :
Karena ini template dasar, jadi inheritance nya tidak lah terlalu banyak sekali. Lebih
tepatnya template ini hanya membawa struktur html dengan include link css bootstrap dan
link java script. Namun pada website ini juga, saya tidak memanfaatkan java scriptnya jadi
website ini murni html dan css. Untuk menggunakan template ini, saya lebih banyak
menggunakan code untuk membuat navbar, jumbotron atau content di dalamnya
menggunakan code yang sudah ada pada documentasi di website bootstrap dan
memodifikasinya. Berikut struktur template Started Templates dari booststrap :
4. Jelaskan dan Berikan Screenshoot cara anda dalam mengelola alur website mulai
dari Route hingga Views
Jawaban :
Untuk membuat alur pada website ini. Pertama untuk persiapan view, saya membuat
beberapa page yang saya butuhkan nanti. Yaitu home.blade.php, layout.blade.php,
portofolio.blade.php dan about.blade.php. Nah karena saya juga menggunakan fitur blade,
jadi penamaan page nya ditambahkan blade setelah nama page agar fitur blade bisa
digunakan. Semua file page tersebut saya simpan pada folder resources di dalam folder
view.
 Selanjutnya, saya membuat alur route pada web.php di dalam folder resources/routes.
Nah karena disini saya menggunakan laravel valet. Jadi nanti pada perview di browser
tidak lagi menggunakan alamat server ataupun harus mengaktifkan php artisan serve.
Cukup menuliskan nama folder project.test/nama file page. Contoh web_profil-
laravel.test/home. Nah nama file page ini lah yang akan kita atur di dalam web.php agar
nantinya bisa muncul di preview browser. Untuk code nya sendiri seperti ini :

Sebenarnya code default route sudah disediakan oleh laravel dalam file web.php.
tinggal kita modikasi pada bagian get(“/home”, yang artinya ketika /home ini dipanggila
maka akan menjalankan “function ()” perintah di dalamnya yaitu “return view(‘home’)”
 yang artinya semua yang ada di dalam file page bernama home akan di tampilkan. Kalau
kita panggil di browser dengan alamat seperti contoh di atas maka hasilnya :

Begitu juga dengan halaman portofolio dan juga about juga menggunakan cara yang sama.
Jadi di dalam web.php saya membuat 3 route.

5. Kendala dan Solusi

Jawaban :
Untuk kendala yang saya alami lebih banyak pada pengaturan tampilannya atau
pemanfaatan framework css nya, untuk penggunaan route dan view serte fitur blade tidak
terlalu terkendala. Contoh kendala yang saya alami adalah konfigurasi default dari
framework booststrap yang bagi saya kurang pas untuk website ini, jadi solusinya saya
mengkonfigurasinya secara manual dengan membuatkan file css yang saya taruh juga di
dalam folder public/css bernama “style.css”. jadi saya menggunakan 2 file css yaitu
pertama booststrap.min.css dan style .css.

Saya juga menggunakan css inline untuk mengatur code css yang memiliki nama class
yang sama, namun konfigurasi yang berbeda, contohnya seperti ini :
6. Tampilan Seluruh web
a. Home
b. Portofolio
c. About
Sumber Belajar
Bootstrap. (2021, may 5). Documentation. Retrieved from Get Bootstrap:
https://getbootstrap.com/docs/5.1/getting-started/introduction/

UNPAS, W. P. (Director). (2021). Belajar Laravel 8 [Motion Picture].