Assalamu 'alaikum wr wb
Saya akan menyambung postingan sebelumnya membuat proyek simpel dengan Framework Laravel,
Sebelum dimulai mari kita awali dengan Bissmillah,,,,
-
oke langsung aja kita akan merubah tampilan home pada proyek sebelumnya,
tampilan awal home di project sebelumnya.
http://localhost/magerblog/home
-
sekarang kita buka dan rubah home/index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Home Simple Laravel</title>
</head>
<body>
@extends('layouts.app')
@section('content')
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="mg.jpg" alt="MagerBlog" style="width:40px;">
</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Murid</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nilai</a>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" 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
</div>
</li>
</ul>
</nav>
<div class="container-fluid">
<h3>Navbar</h3>
<p>Simple Laravel</p>
</div>
<br/>
<h1>Ini Halaman Home Mager Blog</h1> <br/>
@endsection
</body>
</html>
-<html>
<head>
<title>Home Simple Laravel</title>
</head>
<body>
@extends('layouts.app')
@section('content')
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
<img src="mg.jpg" alt="MagerBlog" style="width:40px;">
</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Murid</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nilai</a>
</li>
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" 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
</div>
</li>
</ul>
</nav>
<div class="container-fluid">
<h3>Navbar</h3>
<p>Simple Laravel</p>
</div>
<br/>
<h1>Ini Halaman Home Mager Blog</h1> <br/>
@endsection
</body>
</html>
reload maka tampilan akan sedikit berubah
http://localhost/magerblog/home
-
nahh sekarang sudah ada Navbarnya
sekarang kita akan menghapus tulisan laravel dan logout diatas karna kita sudah pakai navbar
refisi home/index.blade.php
-
Hapus coding ini pada home/index
@extends('layouts.app')
@section('content')
@endsection
-@section('content')
@endsection
kemudian tambahkan pada <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
-<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
setelah selesai semua reload Home
nahh dipostingan selanjutnya kita akan melanjutkan dengan membuat master-master dalam home,, tunggu yaa :D
ConversionConversion EmoticonEmoticon