Laravel - Memasukkan template bootstrap ~ EAS Article

Haloooo
Assalamu 'alaikum wr wb
postingan kali ini kita akan memasukkan template bootstrap ke project laravel

sebelum dimulai instal dulu laravel
cara instal laravel - disini

oke setelah terinstal mari kita mulaiii

Persiapkan template bootstrap download sb-admin - disini

Buka folder bootstrap yang sudah di download
Copy folder ke dalam project laravel

buat folder bernama assets di dalam folder public
lalu copy folder css bootstrap ke dalam folder assets

Masuk ke project lewat cmd

cd xampp/htdocs/nama_folder/nama_project

buat login
cara membuat login - disini
login terlebih dahulu

Buka project dengan text editor
buat folder includes didalam folder view

buat file:
footer.blade.php
header.blade.php
kodinganhome.blade.php
test.blade.php

{{-- kodingan footer.blade.php --}}
<script src="{{asset('js/jquery.js')}}" ></script>
<script src="{{asset('js/bootstrap.min.js')}}" ></script>

{{-- kodingan test.blade.php --}}
diambil dari file "blank" di bootstrap
copy semua koding blank pastekan ke file test.blade.php

{{-- kodingan header.blade.php --}}
diambil dari kodingan test.blade.php
copy dari atas <!DOCTYPE html> sampai 
dan ubah:

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/sb-admin.css" rel="stylesheet">

<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

Menjadi

<link href="{{('assets/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{('assets/css/sb-admin.css')}}" rel="stylesheet" type="text/css">
<link href="{{('assets/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet" type="text/css">

{{-- kodingan kodinganhome.blade.php --}}
diambil dr home.blade.php dikawatirkan terjadi error bisa membackup kodingan home

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>

                <div class="panel-body">
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif

                    You are logged in!
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

kodingan home.blade.php

@extends('layouts.app')
@section('content')
@include('includes.header')
        <div id="page-wrapper">

            <div class="container-fluid">

                
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            Blank Page
                            <small>Subheading</small>
                        </h1>
                        <ol class="breadcrumb">
                            <li>
                                <i class="fa fa-dashboard"></i> <a href="index.html">Dashboard</a>
                            </li>
                            <li class="active">
                                <i class="fa fa-file"></i> Blank Page
                            </li>
                        </ol>
                    </div>
                </div>
                

            </div>
            

        </div>
        

    </div>

@endsection
@include('includes.footer')

Jalankan....

php artisan serve

selesaiii
tunggu postingan selanjutnyaaa
Assalamu 'alaikum wr wb

EAS Article

Laravel - Memasukkan template bootstrap

1 Comments: