WORKSHOP WEB FRAMEWORK

”LAPORAN MENAMBAHKAN TEMPLATE BOOTSRAP PADA VIEW

LARAVEL FRAMEWORK”

Dosen Pengampu: Khafidurrohman Agustianto, S.Pd., M.Eng.

Disusun Oleh:

Achmad Dinofaldi Firmansyah / E41191882

PRODI TEKNIK INFORMATIKA KELAS INTERNASIONAL

JURUSAN TEKNOLOGI INFORMASI

POLITEKNIK NEGERI JEMBER

2021
 2

DAFTAR ISI

DAFTAR ISI............................................................................................................2
BAB I PENDAHULUAN........................................................................................3
1.1 Latar belakang..............................................................................................3
1.2 Tujuan..........................................................................................................3
1.3 Manfaat........................................................................................................3
BAB II TINJAUAN PUSTAKA..............................................................................4
2.1 Framework...................................................................................................4
2.2 Laravel..........................................................................................................4
2.3 Bootsrap.......................................................................................................4
BAB III PEMBAHASAN........................................................................................6
3.1 Menambahkan Butterfly template sebagai landing page.............................6
3.2 Menambahkan Nice Admin template sebagai tampilan admin..................10
BAB IV PENUTUP...............................................................................................17
4.1 Kesimpulan................................................................................................17
4.2 Saran...........................................................................................................17
DAFTAR PUSTAKA............................................................................................18
 3

BAB I PENDAHULUAN

1.1 Latar belakang

Pada era informasi seperti pada saat ini, dimana semua kegiatan manusia
dibantu dengan teknologi komputer seperti sistem kasir, inventori, pendaftaran,
pembayaran air, dan lain-lain. Untuk membantu membuat teknologi sistem
informasi tersebut, banyak alat dan teknologi yang sudah ada dan siap digunakan
seperti framework, dependencies dan lainnya. Salah satu teknologi yang akan
dibahas kali ini adalah framework laravel.
Laravel adalah framework bahasa pemrograman hypertext preprocessor
(PHP) yang dibuat oleh Taylor Otwell dan pertama kali dirilis pada 9 Juni 2011.
Laravel memiliki banyak fitur modern yang sangat membantu pengembang
membuat aplikasi. Beberapa fitur ini termasuk perangkat lunak yang dibundel,
ORM yang fasih (Pemetaan Relasional Objek), pembuat kueri, pengontrol sumber
daya, blade, migrasi, middleware, dan paging otomatis. Laravel juga memiliki
beberapa keunggulan yaitu penggunaan antarmuka baris perintah Artisan (CLI),
penggunaan pengelola paket PHP Composer, untuk menulis kode yang lebih
pendek, lebih mudah dipahami dan lebih ekspresif.
Dengan keunggulan Laravel, maka sebelum membuat sistem informasi
menggunakan Laravel, penulis mengambil pembahasan mengenai menambahkan
template bootsrap pada view Laravel sebagai langkah awal untuk membuat sistem
informasi menggunakan Laravel.

1.2 Tujuan
Tujuan dibuatnya laporan ini adalah untuk menjelaskan menambahkan
template bootsrap pada view Laravel Franework.

1.3 Manfaat
Manfaat dibuatnya laporan ini adalah untuk dapat menggunakan dan
membuat aplikasi dengan bantuan Laravel Framework dengan baik.
 4

BAB II TINJAUAN PUSTAKA

2.1 Framework
Framework adalah suatu struktur yang nyata atau konseptual dimaksudkan
untukmelayani sebagai dukungan atau panduan untuk membangun sesuatu yang
memperluasstruktur menjadi sesuatu yang bermanfaat. Pada Perangkat komputer,
Framework biasanyaberstruktur berlapis - lapis yang menunjukkan jenis program
yang dapat dibangun danprogram yang saling berhubungan. Beberapa framework
sistem komputer juga mencakupprogram-program yang sebenarnya, menentukan
antarmuka pemrograman, atau menawarkantool pemrograman untuk
menggunakan kerangka kerja. Sebuah kerangka mungkin berupasatu set fungsi
dalam sistem dan bagaimana mereka saling berhubungan, lapisan sistemoperasi,
lapisan subsistem aplikasi, bagaimana komunikasi harus distandardisasi
padabeberapa tingkat jaringan, dan sebagainya. Sebuah framework umumnya
lebih komprehensifdaripada protokol dan lebih preskriptif daripada struktur.
Framework secara sederhana dapat diartikan kumpulan dari fungsi atau
prosedur danclass-class untuk tujuan tertentu yang sudah siap digunakan sehingga
bisa lebihmempermudah dan mempercepat pekerjaan seorang programmer, tanpa
harus membuatfungsi atau class dari awal.

2.2 Laravel
Laravel adalah sebuah framework PHP yang dirilis dibawah lisensi MIT,
dibangun dengan konsep MVC (model view controller). Laravel adalah
pengembangan website berbasis MVP yang ditulis dalam PHP yang dirancang
untuk meningkatkan kualitas perangkat lunak dengan mengurangi biaya
pengembangan awal dan biaya pemeliharaan, dan untuk meningkatkan
pengalaman bekerja dengan aplikasi dengan menyediakan sintaks yang ekspresif,
jelas dan menghemat waktu.
MVC adalah sebuah pendekatan perangkat lunak yang memisahkan aplikasi
logika dari presentasi. MVC memisahkan aplikasi berdasarkan komponen-
komponen aplikasi, seperti : manipulasi data, controller, dan user interface.

2.3 Bootsrap
Bootstrap Twitter merupakan kerangka front-end yang berfungsi untuk
mengembangkan responsif web layout agar lebih cepat dan mudah digunakan
 5

(Zakir, 2016). Bootstrap kali pertama diperkenalkan oleh dua orang karyawan
Twitter yaitu Mark Otto dan Jacob Thornton, hal ini juga yang membuat
framework CSS Bootstrap lebih cepat dikenal. Dengan menggunakan konsep grid
system, sehingga didalam penggunaannya mudah untuk dipahami.
 6

BAB III PEMBAHASAN

3.1 Menambahkan Butterfly template sebagai landing page
Sebelum menuju kepada prosedur kerja, kita harus mengunduh template pada
link berikut lalu ekstrak file yang telah di unduh.
https://bootstrapmade.com/content/templatefiles/Butterfly/Butterflybootstrap-
4.zip

Pindahkan semua folder yang berada pada folder asset ke folder project
laravel kita

Buka folder project kita lalu masuk ke folder public dan buat folder baru,
pada kasus ini, nama folder adalah “butterfly” dan paste semua folder butterfly
pada folder public/butterfly

Buka teks editor dan pada folder resources/views buat folder baru dengan
nama butterfly dan buat struktur folder dan file seperti gambar berikut
 7

Buka file index.html pada folder butterfly yang telah di ekstrak lalu copy
semua code html ke dalam index.blade.php

Blok kode dari baris 1 sampai baris 98 atau dari syntax <!DOCTYPE html>
sampai syntax <main id="main"> dan pindahkan kode tersebut pada file
butterfly/layouts/app.blade.php
 8

Blok juga pada baris 753 sampai akhir atau pada syntax </main><!-- End
#main --> sampai </html> dan pindahkan kode tersebut pada file
butterfly/layouts/app.blade.php serta tambahkan syntax blade Laravel
“@yield('mainContent')” untuk menandakan bahwa di dalam tag main terdapat
section main content sehingga tampilan file app.blade.php tampak seperti gambar
berikut

Pada file index.blade.php tambahkan syntax blade Laravel

@extends('Butterfly.layouts.app')
@section('mainContent')
Kode html
 9

@endsection
Sehingga tampilan file index.blade.php seperti gambar berikut

Buat controller ButterflyController.php seperti gambar berikut untuk me

redirect ke tampilan landing page
 10

Buat route seperti pada gambar berikut untuk menjalankan fungsi index yang
berada pada ButterflyController.php

Jalankan php artisan serve pada cmd untuk memulai server lalu buka alamat
http://127.0.0.1:8000/ pada browser sehingga tampilan landing page akan seperti
pada gambar berikut yang menggunakan template butterfly

3.2 Menambahkan Nice Admin template sebagai tampilan admin

Sebelum menuju kepada prosedur kerja, kita harus mengunduh template pada
link berikut lalu ekstrak file yang telah di unduh.
https://bootstrapmade.com/content/templatefiles/NiceAdmin/NiceAdmin.zip
 11

Pindahkan folder asset, css, fonts, img dan js ke folder project laravel kita

Buka folder project kita lalu masuk ke folder public dan buat folder baru,
pada kasus ini, nama folder adalah “asset-admin” dan paste semua folder aset
pada folder public/ asset-admin

Buka teks editor dan pada folder resources/views buat folder baru dengan
nama admin dan buat struktur folder dan file seperti gambar berikut
 12

Buka file index.html pada folder nice admin yang telah di ekstrak lalu copy
semua code html ke dalam index.blade.php
 13

Blok kode dari baris 1 sampai baris 313 atau dari syntax <!DOCTYPE html>
sampai syntax <aside> dan pindahkan kode tersebut pada file
admin/layouts/app.blade.php

Blok juga pada baris 390 sampai 394 atau pada syntax </aside> sampai
<section id="main-content"> dan pindahkan kode tersebut pada file
admin/layouts/app.blade.php dan blok juga pada baris 1058 samapi akhir atau
pada syntax </section> sampai </html> serta tambahkan syntax blade Laravel
“@include('admin.layouts.sidebar')” di dalam tag aside dan
 14

“@yield('mainContent')” di dalam tag <section id="main-content"> untuk

menandakan bahwa di dalam tag main terdapat sidebar dan section main content.
Pindahkan juga baris kode 314 sampai 389 atau pada <div id="sidebar"
class="nav-collapse "> sampai tag penutup div itu sendiri ke file
admin/layouts/sidebar.blade.php. Sehingga tampilan file app.blade.php tampak
seperti gambar berikut

Dan tampilan sidebar.blade.php seperti gambar berikut

 15

Pada file index.blade.php tambahkan syntax blade Laravel

@extends(admin.layouts.app')
@section('mainContent')
Kode html
@endsection
Sehingga tampilan file index.blade.php seperti gambar berikut

Buat controller PostController.php seperti gambar berikut untuk me redirect

ke tampilan admin
 16

Buat route seperti pada gambar berikut untuk menjalankan fungsi index yang
berada pada PostController.php

Jalankan php artisan serve pada cmd untuk memulai server lalu buka alamat
http://127.0.0.1:8000/admin pada browser sehingga tampilan admin akan seperti
pada gambar berikut yang menggunakan template Nice Admin
 17

BAB IV PENUTUP
4.1 Kesimpulan
Bootsrap merupakan salah satu Framework CSS yang membantu kita untuk
membuat tampilan website menjadi responsive serta mempunyai ui/ux yang
bagus. Dengan bantuan template yang telah ada seperti butterfly dan nice admin
akan sangat membantu pengembang backend website dalam membuat website.
4.2 Saran
Penulis mengharapkan dengan laporan menambahkan template Bootsrap pada
view Laravel Franework dapat menjadi bahan belajar dan dapat digunakan untuk
penelitian lebih lanjut.
 18

DAFTAR PUSTAKA

Husada, F.R.K., 2019. IMPLEMENTASI FRAMEWORK LARAVEL UNTUK

MEMBANGUN SISTEM ADMINISTRASI PEMBAYARAN AIR PADA PPAB
PERUM DOLOG DENGAN METODE WATERFALL. TUGAS AKHIR Sarjana.
Semarang: UNIVERSITAS SEMARANG UNIVERSITAS SEMARANG.

Khafidurrohman Agustianto, S.P..M.E., 2020. BUKU KERJA PRAKTIK

MAHASISWA WORKSHOP WEB FRAMEWORK. 1st ed. Jember: Polije.

Santoso, M.F., 2019. TEKNIK RESPONSIVE WEB DESIGN (RWD) SERTA

PENERAPANNYA DALAM RANCANG BANGUN LAYOUT WEB. Jurnal
PILAR Nusa Mandiri, XV, pp.61-68.

Setiowati, D.A., R, B.M., Jati, R.H. & Ristanto, A.T., 2017. PEMROGRAMAN
FRAMEWORK "PERSIAPAN LARAVEL". Makalah. Surabaya: UPN VETERAN
JATIM UNIVERSITAS PEMBANGUNAN NASIONAL “VETERAN” JAWA
TIMUR.