#13-Laravel Add CSS & JS

Pada tutorial laravel ini kita akan belajar tentang cara menghubungkan file CSS dan JS dengan project laravel kita.

Kita akan membuat beberapa contoh cara menghubungkan project laravel dengan file CSS atau JS.

File CSS, JS, gambar dan assets lainnya bisa teman-teman letakkan di dalam folder public dalam project laravel. letaknya ada di belajar_laravel/public.

Jika kita buka folder public, sudah ada folder css, js dan svg yang menyimpan masing-masing file css, js dan gambar default dari project laravel.

Sebagai contoh kita akan mencoba menghubungkan bootstrap dengan project laravel kita.

Menghubungkan Bootstrap Dengan Laravel

Sebenarnya pada project laravel, sudah ada file css bootstrap secara default pada pertama kali kita menginstall laravel.

Letaknya ada pada file app.css dalam folder css.

Disini saya akan mencoba menghubungkan app.css dengan view index.blade.php. dimana pada view index.blade ini sebelumnya kita buat untuk halaman yang menampilkan data user.

mari kita tambahkan css dan javascript pada file learning_laravel/resources/views/user.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>{{$title}}</title>
    <link rel="stylesheet" type="text/css" href="{{ asset('/css/app.css') }}">
</head>
    <style type="text/css">
		.pagination li{
			float: left;
			list-style-type: none;
			margin:5px;
		}
	</style>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
            <h2>{{config('app.name')}}</h2>
            <h3>{{$title}}</h3>
        
            <a class="btn btn-success" href="/user/create"> + Tambah User Baru</a>
            
            <br/>
            <br/>
        
            <p>Cari Data User :</p>
            <form class="form-inline" action="/user/search" method="GET">
                <label class="sr-only" for="inlineFormInputName2">Name</label>
                <input name="search" type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Cari User" value="{{ old('search') }}">
                <button type="submit" class="btn btn-primary mb-2">Submit</button>
            </form>
            <table class="table">
                <thead
                    <tr>
                        <th>Fullname</th>
                        <th>Email</th>
                        <th>Last Login</th>
                        <th>Last Update</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($user as $list)
                    <tr>
                        <td>{{ $list->fullname }}</td>
                        <td>{{ $list->email }}</td>
                        <td>{{ $list->last_login }}</td>
                        <td>{{ $list->last_update }}</td>
                        <td>
                            <a class="btn btn-primary" href="/user/update/{{ $list->uid }}">Edit</a>
                            &nbsp;
                            <a class="btn btn-danger" href="/user/delete/{{ $list->uid }}">Hapus</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <br/>
            Halaman : {{ $user->currentPage() }} <br/>
            Jumlah Data : {{ $user->total() }} <br/>
            Data Per Halaman : {{ $user->perPage() }} <br/>
        
        
            {{ $user->links() }}
            </div>
        </div>
    </div>
</body>
</html>

Tampilan

User With CSS Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>