Materi 2

Bab II
Membuat tampilan awal MahasiswaApp
Langkah pertama kita buka terlebih dahulu MahasiswaApp melalui text editor dan tampilan nya
kurang lebih jika memakai vs code akan seperti ini
Diatas adalah struktur Laravel terbaru dari versi Laravel
Pertama boleh kalian buka folder resources/views dan klik pada file welcome.blade.php dan copy
code di bawah ini dan paste di welcomed.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
" rel="stylesheet">
<style>
/* Custom CSS for additional styling */
/* Navbar styling */
.navbar {
background-color: #007ea8;
/* Dark color for navbar */
}
.navbar-brand,
.navbar-nav .nav-link {
color: white;
/* White color for navbar text */
}
.navbar-brand:hover,
.navbar-nav .nav-link:hover {
color: white;
/* Light blue color on hover */
}
.foto {
width: 100%;
height: 590px;
background-image: url('{{ asset("foto/univ.jpg") }}');
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
flex-direction: column;
}
.id-feature {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
color: white;
margin-top: 20px;
}
.thick-outline {
border-width: 2px;
/* Mengatur ketebalan garis tepi menjadi 2px */
}
/* Footer styling */
footer {
margin-top: 50px;
/* Dark color for footer */
color: #ffffff;
/* White color for footer text */
padding: 20px 0;
/* Padding for footer content */
text-align: center;
/* Center-align footer content */
}
/* Main content styling */

.main-content {
padding: 40px 20px;
/* Padding for main content */
text-align: center;
/* Center-align main content */
}
/* Animation for main content */

.animate-in {
animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#feature">Features</a>
</li>
<a class="nav-link" href="#">About</a>
</li>
<a class="nav-link" href="#">Contact</a>
</li>
<a class="nav-link btn btn-outline-light rounded-pill
thick-outline" href="/login" style="width: 100px; color:white">Login</a>
</li>
</ul>
</div>
</div>
</nav>


<div class="main-content" style="padding:0">
<div class="foto">
<h1 class="animate-in">Welcome to Your Dashboard</h1>
<p class="animate-in">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam sit amet ullamcorper justo. In ultricies, tortor ut
gravida posuere.</p>
</div>
</div>
<div class="id-feature" id="feature">
<h1>Features</h1>
</div>
<div class="container" style="display: flex; gap:20px; justify-
content:space-between; padding-top:20px">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="{{asset('foto/1.jpg')}}" alt="Card
image cap">
<div class="card-body">
<h5 class="card-title">S1 IT</h5>
<p class="card-text">Some quick example text to build on the
card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
image cap">
<h5 class="card-title">S1 Manajement</h5>
</div>
</div>
image cap">
<h5 class="card-title">S1 Akuntansi</h5>
</div>
</div>
</div>


<footer>
<p>© 2024 Dashboard. All rights reserved.</p>
</div>
</footer>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"><
/script>
</body>
</html>
Setelah kita copy kode di atas buka folder public dan dan buat folder baru dengan nama foto seperti di
bawah ini
dan download foto foto di link dibawah:
https://drive.google.com/drive/folders/10Z0VL3J-
5DHpChoYj3e7WYZur63qeJwA?usp=sharing
jika sudah terdonwload copy foto yang telah di

download dan paste ke folder public/foto.
jika sudah lakukan php artisan serve pada terminal dan lihat hasilnya, jika benar maka
hasilnya akan seperti dibawah ini
Dan setelah itu buka file web.php pada directori routes seperti gambar dibawah ini
dan tambahkan code ini pada web.php
Route::get('/login', function () {
return view('login');
});
Dan untuk full code pada web.php adalah seperti dibawah ini
Dan setelah itu kita buat tampilan baru pada direktori resouces/view kita buat file baru
dengan nama login.blade.php, seperti pada gambar dibwah ini
Setelah kita membuat file login, masukan kode dibawh ini kedalam file login.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
" rel="stylesheet">
<style>
/* Custom CSS for additional styling */
body {
background-image: url('{{ asset("foto/univ.jpg") }}');
/* Path to your background image */
background-size: cover;
/* Ensure the background image covers the entire viewport */
background-position: center;
/* Center the background image */
height: 100vh;
/* Ensure the background image fills the entire viewport height */
margin: 0;
/* Remove default margin */
padding: 0;
/* Remove default padding */
display: flex;
flex-direction: column;
/* Use flexbox for centering content */
}
.back {
width: 98%;
height: 150px;
padding-top: 10px;
}
.login-container {
background-color: rgba(255, 255, 255, 0.8);
/* White background with slight transparency */
padding: 40px;
/* Padding for the login container */
border-radius: 10px;
/* Rounded corners for the login container */
}
</style>
</head>
<body>
<div class="back">
<a class="btn btn-success" href="/">Kembali</a>
</div>
<div class="row justify-content-center">
<div class="col-md-4">
<div class="login-container">
<h2 class="text-center mb-4">Login</h2>
<form action="{{ route('login-post') }}" method="post">
{{ csrf_field() }}
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control"
name="email" id="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control"
name="password" id="password" placeholder="Enter password">
</div>
<button type="submit" class="btn btn-primary btn-
block">Login</button>
</form>
</div>
</div>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"><
/script>
</body>
</html>
Jika sudah maka lihat hasilnya dengan php artisan serve, dan tampilan seharusnya seperti
dibawah
Dari cara di atas kita belajar bagaimana cara menggunakan link menggunakan url pada
property background image, dan kita belajar bagaimana pengimplementasikan dari cara
menggunakan bootsrap dengan memanggil cdn ata api nya, dan pada pertemuan selanjutnya
kita akan membuat system tampilan yang kita buat,

Materi 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Materi 2

Uploaded by

Copyright:

Available Formats

Bab II

Membuat tampilan awal MahasiswaApp

Diatas adalah struktur Laravel terbaru dari versi Laravel

/* Main content styling */

/* Animation for main content */

dan download foto foto di link dibawah:

jika sudah terdonwload copy foto yang telah di

dan tambahkan code ini pada web.php

You might also like