Berbicara tentang Web tentu tidak terlepas dari pada konsep Desain atau konsep Interface. Berbicara tentang Desain halaman Web tentuk kita akan menyinggung tentang bahasa pemrograman HTML, CSS, Javascript. Sebab ke 3 bahasa pemrograman tersebut merupakan program utama yang wajib ada di dalam desain sebuah halaman Web.
Tentu pada pembahasan ini kita tidak akan membahas panjang lebar tentang ke 3 konsep pemograman tersebut. Kami asumsikan anda sudah memahami dasar-dasar ke 3 bahasa pemograman tersebut. Kita akan lebih memfokuskan bagaimana sebuah halaman web bisa ditampilkan di ke user. Artinya kita lebih berfokus kepada konsep MVC sebab laravel dibangun diatas konsep MVC.
Oke mari kita bahas...
Pastikan terlebih dahulu anda sudah menginstal laravel sebagaimana telah di jelaskan pada pembahasan sebelumnya. Disini kita sudah memasang laravel dengan nama webSekolah. Silahkan anda buka projek laravel yang telah anda buat sebelumnya. jalankan program tersebut menggunakan terminal.
NB: Anda perlu mengikuti artikel sebelum untuk melanjutkan artikel ini
Materi sebelumnya kita sudah memilik 2 buah file php di dalam folder view. Berikut bentuk susun struktur view yang telah kita miliki sebelumnya.
📁Resource
📂View
🗋 beranda.blade.php
🗋 profil.blade.php
Perhatikan pada masing-masing file. Terdapat format dalam bentuk blade, Ini merupakan teknologi blade yang dimiliki oleh laravel untuk memudahkan anda di dalam menggunakan laravel. Biasanya ini akan berguna saat anda menggunakan php nantinya.
Merancang Halaman (Layout)
Pada prinsipnya, dalam merancang halaman sebuah web terdiri dari 3 komponen:
- Header, Berisikan informasi tentang web yang dibangun
- Main, Berisi konten dan memiliki sifat yang dinamis
- Footer, berisi hak cipta
Berikut bentuk susunan layout secara sederhana:
<body><div class="header"><h1>Ini Header</h1></div><div class="main"><h2>Beranda</h2></div><div class="footer"><label>copyright © {{ date('Y') }} Barintek.blogspot.com</label></div></body>
Tulislah code di atas ke dalam file beranda.blade.php.
Anda dapat menyempurnakannya script ini seperti berikut:
<body><div class="header"><h1>LARAVEL BARINTEK</h1></div><div class="main"><h2>Beranda</h2><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel id nisi vero,sed nemo autem distinctio asperiores perferendis expedita aliquid dictaiste quas. Libero et quod pariatur, beatae quo magni.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel id nisi vero,sed nemo autem distinctio asperiores perferendis expedita aliquid dictaiste quas. Libero et quod pariatur, beatae quo magni.</p></div><div class="footer"><label>copyright © {{ date('Y') }} Barintek.blogspot.com</label></div></body>
Untuk script di profil lakukan hal yang sama. Berikut sciptnya:
<body><div class="header"><h1>LARAVEL BARINTEK</h1></div><div class="main"><h2>Profil</h2><h1>Data Diri Saya</h1><p>Nama : Barintek</p><p>Alamat : Jl. Beringin Indah.No.27 Kec. Padang Panjang Sumatera Barat</p><p>No.Telp : xxxxxxxxxx</p></div><div class="footer"><label>copyright © {{ date('Y') }} Barintek.blogspot.com</label></div></body>
Selanjutnya pada masing-masing file anda tambahkan sintak css. Tulislah sintak ini di bawah tag</head>
<style>body {font-family: sans-serif;margin: 0;padding: 0;display: flex;flex-direction: column;min-height: 100vh;}.header {background-color: rgb(112, 14, 14);padding: 20px;text-align: center;color: white;}.main {padding: 20px;flex-grow: 1;}.footer {background-color: rgb(0, 0, 0);padding: 10px;text-align: center;color: white;}</style>
Berikut hasilnya untuk halaman Beranda:
Hasilnya di halaman Profil
Jika memang dibutuhkan anda dapat menambahkan navbar untuk pilihan menunya. Berikut bentuk scriptnya di beranda
<h2>Beranda</h2><div class="baner"><img src="/assets/images/barintek.png" alt=""></div>............
Tambahkan juga di profil.
Jangan lupa untuk menambahkan css agar navbar terlihat lebih sempurna
...........................* Navbar */.navbar {background-color: #333;overflow: hidden;}.navbar {background-color: #333;text-align: center;}.navbar a {color: white;text-decoration: none;padding: 14px 16px;display: inline-block;}.navbar a:hover {background-color: #ddd;color: black;}
Berikut Hasilnya:
Bagaimana desain halaman anda sudah menari. Anda bisa menyempurnakan untuk membuat kontak dan galery.
