Lompat ke konten Lompat ke sidebar Lompat ke footer

Belajar Laravel Pemula Bagian 1



Belajar Laravel Pemula Bagian 1

Tutorial ini saya kutip dan pelajari dari channel youtube Web Programming Unpas, jangan lupa untuk Subscribe channel Web Programming Unpas karena sangat membantu teman-teman dalam mempelajari web programming.

Adapun video Web Progamming Unpas berikut sebagai acuan dalam tuturial kali ini





1. Instal gitbash

2. Install composer

Instal composer lewat https://getcomposer.org/download/

3. Instal laravel lewat composer


4. Menjalankan projek laravel di brower

a.      Ketik berikut untuk memualai artisan serve

b.      Buka di browser sesuai dengan alamat yang diberikan




5. Buat fitur template engine

     pada views buat folder baru deangn nama layout, dan didalam layout buat file main.blade.php dimana file ini akan menyimpan template layoutnya atau bisa juga disebut base template. Lalu edit seperti brkt

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewportcontent="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheethref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.cssintegrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Skcrossorigin="anonymous">

    <title>@yield('title')</title>

  </head>
  <body>
    
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
        <div class="container">
  <a class="navbar-brandhref="#">Navbar</a>
  <button class="navbar-togglertype="buttondata-toggle="collapsedata-target="#navbarNavAltMarkuparia-controls="navbarNavAltMarkuparia-expanded="falsearia-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button> 
  <div class="collapse navbar-collapseid="navbarNavAltMarkup">
    <div class="navbar-nav">
    <a class="nav-item nav-link activehref="{{ url('/')}}">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-linkhref="{{ url('/about')}}">About</a>
      <a class="nav-item nav-linkhref="{{ url('/mahasiswa')}}">Mahasiswa</a>
    </div>
  </div>
  </div>
</nav>

@yield('container')

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.jsintegrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfjcrossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.jsintegrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAocrossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.jsintegrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKIcrossorigin="anonymous"></script>
  </body>
</html>

6. Buat views baru dengan nama index.blade.php pada projek dan set sbb

        

@extends('layout/main')
@section('title', 'Halaman Awal')
    
@section('container')
<div class="container">
    <div class="row">
        <div class="col-10">
            <h1 class="mt-3"> Web Laravel</h1>
        </div>
    </div>
 </div>
 
 @endsection

7. Buat views baru dengan nama about.blade.php pada projek dan set sbb

 
@extends('layout/main') 
@section('title', 'About')
    
@section('container')
<div class="container">
       <div class="row">         <div class="col-10">              <h1 class="mt-3">Halaman About {{$nama}}</h1>
         </div>
      </div>
 </div>
 
 @endsection

8. Set Route pada routes -> web.php seperti dibawah ini

Yang artinya pada page “/” kita akan menampilakn view index yang akan menampilkan layout indeks.blade.php 

9. Buat routing baru

Edit pada bagian routes -> web.php

10. Tampilan webnya

11. Alur prosesnya

Gambar  HD bisa dilihat di

https://raw.githubusercontent.com/zulkifli-mizini/Project-Cloud/master/alur%20intro%201.jpg


Posting Komentar untuk "Belajar Laravel Pemula Bagian 1"