SERI MEMBUAT WEBSITE MENGGUNAKAN LARAVEL 5.5 BAGIAN PERTAMA : MEMBUAT HALAMAN UTAMA

Hallo Teman teman semuanya kali ini kita akan belajar seri laravel yakni pembuatan Website menggunakan laravel 5.5. Sekarang ini Laravel memang telah menjadi idola tersendiri dengan semakin banyaknya para developer web atau pengguna perseorangan dengan keperluan pribadi seperti pembuatan took online , blog sebagai media menyalurkan informasi ataupun publikasi dari instansi swasta maupu pemerintah yang dibuat menggunakan Framework ini.berbagai alasan memang dikembalikan kepada kita yang mau menggunakan ,karena pada dasarnya apa saja kesulitan dalam pembangunan suatu Aplikasi didalamnya terdapat kelebihannya masing-masing dari sekian banyaknya Framework yang ada .

Setelah dilatihan sebelumnya kita telah belajar mehahami apa itu Laravel dan bagaimana implementasi dasar dari pengolahan Model View dan Controller atau yang kita akrab kita mengenal dengan konsep MVC,selanjutnya kita akan benar-benar mengimplementasikannya dalam pembangunan website, tentunya saya akan membagi kedalam beberapa seri agar lebih mudah kita memahaminya langkah demi langkah.

Oke, disini saya anggap Teman-teman sudah mengerti cara menginstal Laravel, jika belum maka bias melihat pada ulasan saya sebelumnya.saya menggunkan Laravel ang baru juga agar secara viewada kesamaan dan mengurangi resiko bentrok code, semisalsebelumnya kita telah belajar mengenaibasic routing, peggunaan middleware dan pembuatan auth, jadi saya lebih memilih mendownload baru daripada menghapus yang sudah ada.

Setelah  sobat semua berhasil membuat Laravel baru yang fresh (belum kita tambahkan konfigurasi atau penambahan file), selanjutnya yang akan kita lakukan adalah menjalankan pembuatan authentikasi untuk proses login dan register pada halaman web kita, disini Laravel pada web server saya namakan website da menggunakan web server laragon.jadi letaknya akan seperti berikut “C:\laragon\www\website” .langsung saja untuk lanhgkah berikutnya adalah kita buka pada perintah pada command line kemudian kita ketikan perintah sebagai berikut  :

“php artisan make:auth”

maka secara otomatis kita telah memiliki folder baru didalam view bernama auth dan layout.

Dan jika kita running pada web browser maka akan tampak tampilan  halaman login dan register seperti pada gambar berikut

namun halaman login dan tersebut belum bias kita gunakan karena belum kita buatkan koneksi dan databasenya .Next, kita akan membuat satu file bernama “head.blade.php “  didalam folder yang akan kita buat baru juga benama include didalam folder view, kemudan isinya kita isikan saja dari file yang bernama app.blade.php yang ada di folder layout agar lebih cepat pembatannya, sehingga akan tampil seperti berikut :

untuk mempercepat pembuatan dan mempermudah dalam proses belajar, teman teman dapat mendownload sourcecodenya disini atau disini.

Setelah teman teman mempunya file yang tadi didownload ,

Didalamnya ada folder bernama public dan didalamnya ada file css dan Javascript , copy file css kedalam public/css dan javasciptnya kedalam public/js .jika benar tampilannya akan seperti berikut

Next, didalam folder yang telah Sobat download ada juga folder bernama Blade yang didalmnya ada file yang  bernama  welcome.blade dan footer.blade , nah silahkan Sobat ganti isi bawaan file welcome.blade bawaan laravel dengan isi yang sobat download  kemudian untuk footer.blade pastekan ke file didalam view yang sudah ada sebelumnya file head.blade , maka jika benar tampilan pada kode editor akan seperti ini

Jangan lupa pastekan juga folder image hasil download tadi pada folder public/view Dan jika kita running pada browser maka akan tampil seperti ini

Kita akan sedikit melakukan perbaikan pada tampilan Css yang tidak sempurna. Pada head.blade.php kita tambahkan pemanggilan seperti berikut

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

dan jika kita running lagi maka akan muncul tampilan seperti berikut

namun disini kita belum melihat penampakan footer , untuk memanggilnya tambahkan kode berikut masih didalam file head.blade.php

        @yield('content')

        @include('includes.footer')

Dan kita coba running di browser lagi untuk melihat bagian footernya

 Namun disini kita melihat pemaggilan yang belum sempurna dari icon social media yang seharusnya muncul, karenanya tambahkan kode berikut masih pada file head.blade.php

“<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />”

Kita juga akan lihat  tampilan grid dan list juga belum berfungsi

Ini karena kita belum melakukan pemanggilan javasciptnya,Karenanya kita akan tambahkan perintah berikut masih di head.blade.php

<script src="{{ asset('js/script.js') }}"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

Setelahnya kita coba akan running kembali di browser, dan kita test mode tampilan grid dan listnya

Tampilan list

Tampilan grid

Sepertinya kita juga masih melewatkan sesuatu yakni pembuatan Navbar pada halaman web kita agar tampilannya mudah kita atur maka kita buatkan view baru untuk mengatur halaman khusus navbar saja yang nantinya kita akan buatkan navigasi halaman,kita buat saja filenya dengan nama navbar.blade.php .dan isinya kita cut navbar dari file head.blade.php , sedang di halaman Head.blade.php kita lakukan pemanggilan navbar dengan penggunaan fungsi @yield 

jadi file headblade.php akan berisi seperti ini

[code hl="1, 4, 7"] <!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <link href="{{ asset('css/style.css') }}" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css </head> <body> <div id="app"> @include('includes.navbar') @yield('content') @include('includes.footer') </div> <!-- Scripts --> <script src="{{ asset('js/app.js') }}"></script> <script src="{{ asset('js/script.js') }}"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> </body> </html> </html> [/code]

dan halaman navbar.blade.php akan berisi seperti ini

[code hl="1, 4, 7"] <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <!-- Collapsed Hamburger --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Branding Image --> <a class="navbar-brand" href="{{ url('/') }}"> {{ config('app.name', 'Laravel') }} </a> </div> <div class="collapse navbar-collapse" id="app-navbar-collapse"> <!-- Left Side Of Navbar --> <ul class="nav navbar-nav"> &nbsp; <li><a href="">HOME</a></li> <li><a href="">PROFILE</a></li> <li><a href="">ABOUT</a></li> <li><a href="">CONTACT</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <!-- Authentication Links --> @guest <li><a href="{{ route('login') }}">Login</a></li> <li><a href="{{ route('register') }}">Register</a></li> @else <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true"> {{ Auth::user()->name }} <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"> Logout </a> <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> {{ csrf_field() }} </form> </li> </ul> </li> @endguest </ul> </div> </div> </nav> </html> [/code]

dan jika kita runing di browser kembali maka  akan tampil halaman dengan penambahan halaman navigasi baru

catatan : saya tadi menambahkan navigasi baru dengan nama HOME,PROFILE,ABOUT DAN CONTACT

Sekian dulu pembahasan kali ini, semoga bias membantu.Jika ada pertanyaan kritik maupun saran silahkan berkomentar pada laman dibawah atau di halaman Chat dipojok kanan bawah,  mohon maaf jika tidak bisa reltime menjawab pertanyaannya karena pengisian blog biasanya disela dan luar rutinitas kerja