Laravel-11: Perbedaan antara revisi

Dari Wiki TIK
Loncat ke navigasi Loncat ke pencarian
kTidak ada ringkasan suntingan
kTidak ada ringkasan suntingan
 
(2 revisi perantara oleh pengguna yang sama tidak ditampilkan)
Baris 200: Baris 200:
'''
'''


* untuk menjalankan tailwin : </br>
* untuk menjalankan tailwin dan setiap menjalankan aplikasi : </br>
npm run dev
npm run dev


*
* jalankan new cmd selain npm run dev, dan ketik : </br>
php artisan make:component Navbar ==> krn sebagai kelas maka huruf pertama huruf besar
akan menambahna Navbar.php di folder app/view/component dan Navbar.blade.php di resource/view/component.
 
* pindahkan kode navbar di home ke navbar.blade.php hilangkan div nya, dan gantikan <x-navbar></x-navbar> di home
 
* buatkan headernya juga dengan ketik : </br>
php artisan make:component Header --view, supaya tidak dubuat class karna herader sangat simpel, lalau lakukan hal yang sama seperti navbar
 
* ganti nama homepage dengan variabel menjadi {{ $slot }} di componen header dan ketiknya di <x-header>Homepagess</x-header> masing2 page agar tidak ditulis berulang.
 
* Buatkan layout:</br>
php artisan make:component Layout<br>
setelah itu, pindahkan kode dari halaman home ke layout.blae.php dan gantikan dengan <x-layout></x-layout> di home lalu di isi  <br>
<x-layout>
  <h3 class="text-xl">Ini halaman home</h3>
</x-layout>
</br>
lakukan hal yang sama di halaman yang lainnya
 
* agar judulnya gan Web TIK semua maka buat variabel judul di route : return view('home', ['judulpage' => 'WEb TIK']);// dan buat juga di page lainnya.// tes dengan {{ dd($judulpage) }} // buatkan kodenya seperti ini <br>
<x-layout>
  <x-slot:judulpage>{{ $judulpage }}</x-slot:judulpage> adalah judulpage yang diambil dari routes kemudian
  <h3 class="text-xl">Ini halaman home</h3>
</x-layout>
<br>
buat yang lain dgn cara : Route::get('/blog', function () {
    return view('blog', ['judulpage' => 'Blog TIK']);
}); //
*lalu ini : <x-layout>
    <x-slot:judulpage>{{ $judulpage }}</x-slot:judulpage>
    <h3 class="text-xl">Ini halaman kontak</h3>
  </x-layout>
 
* supaya berubah di tailwin nya maka : php artisan make:component NavLink --view, supaya gak banyak kali kopas. dan buat kode ini di Nav-link
* untuk menghilangkan tampilan properti di link, ganti di nav-link blade, buat fungsi property namanya </br>
@props(['active'=>false]), </br>
props berisi array yang terdiri dari property.
 
*''' cara mengirim data ke view sebagai variabel'''

Revisi terkini sejak 1 Agustus 2024 11.22

  • Instal Laravel
  • confi2 de el el
  • buatkan ini sebagai data awal :

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () { 

   return view('home');

});

Route::get('/about', function () { 

   return view('about', ['nama' => 'TIK']);

});

Route::get('/blog', function () { 

   return view('blog');

});

Route::get('/contact', function () { 

   return view('contact');

});

  • Instal tailwin :
  • buka terminal di projekan laravelnya dan pastekan ini : npm install tailwindcss@latest
  • tarok ini di home.blade.php :

<!DOCTYPE html> <html lang="en"> <head> 

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   @vite('resources/css/app.css')
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
   <title>Document</title>

</head> <body> 

   <nav class="bg-gray-800">

             <img class="h-8 w-8" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company">

           <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" aria-controls="mobile-menu" aria-expanded="false">
             
             Open main menu
             <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
             </svg>
             <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>

         <a href="#" class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white" aria-current="page">Dashboard</a>
         <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Team</a>
         <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Projects</a>
         <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Calendar</a>
         <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Reports</a>

             <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
Tom Cook
[email protected]
           <button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
             
             View notifications
             <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
               <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
             </svg>
           </button>

           <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Your Profile</a>
           <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Settings</a>
           <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Sign out</a>

   </nav>
 
   <header class="bg-white shadow">

Dashboard

   </header>
   <main>

   </main>

</body> </html>

  • tarok ini di resource/css/app.css :

@tailwind base; @tailwind components; @tailwind utilities;

  • tarok ini di tailwin.config.js:

/** @type {import('tailwindcss').Config} */ const defaultTheme = require('tailwindcss/defaultTheme') export default { 

 content: [
   "./resources/**/*.blade.php",
   "./resources/**/*.js",
   "./resources/**/*.vue",
 ],
 theme: {
   extend: {
     fontFamily: {
       sans: ['Inter var', ...defaultTheme.fontFamily.sans],
     },
   },
 },
 plugins: [],

}

  • untuk menjalankan tailwin dan setiap menjalankan aplikasi :

npm run dev

  • jalankan new cmd selain npm run dev, dan ketik :

php artisan make:component Navbar ==> krn sebagai kelas maka huruf pertama huruf besar akan menambahna Navbar.php di folder app/view/component dan Navbar.blade.php di resource/view/component.

  • pindahkan kode navbar di home ke navbar.blade.php hilangkan div nya, dan gantikan <x-navbar></x-navbar> di home
  • buatkan headernya juga dengan ketik :

php artisan make:component Header --view, supaya tidak dubuat class karna herader sangat simpel, lalau lakukan hal yang sama seperti navbar

  • ganti nama homepage dengan variabel menjadi Templat:$slot di componen header dan ketiknya di <x-header>Homepagess</x-header> masing2 page agar tidak ditulis berulang.
  • Buatkan layout:

php artisan make:component Layout

setelah itu, pindahkan kode dari halaman home ke layout.blae.php dan gantikan dengan <x-layout></x-layout> di home lalu di isi

<x-layout>

Ini halaman home

</x-layout>
lakukan hal yang sama di halaman yang lainnya

  • agar judulnya gan Web TIK semua maka buat variabel judul di route : return view('home', ['judulpage' => 'WEb TIK']);// dan buat juga di page lainnya.// tes dengan Templat:Dd($judulpage) // buatkan kodenya seperti ini

<x-layout> 

 <x-slot:judulpage>Templat:$judulpage</x-slot:judulpage> adalah judulpage yang diambil dari routes kemudian

Ini halaman home

</x-layout>
buat yang lain dgn cara : Route::get('/blog', function () { 

   return view('blog', ['judulpage' => 'Blog TIK']);

}); //

  • lalu ini : <x-layout>
   <x-slot:judulpage>Templat:$judulpage</x-slot:judulpage>

Ini halaman kontak

 </x-layout>
  • supaya berubah di tailwin nya maka : php artisan make:component NavLink --view, supaya gak banyak kali kopas. dan buat kode ini di Nav-link
  • untuk menghilangkan tampilan properti di link, ganti di nav-link blade, buat fungsi property namanya

@props(['active'=>false]),
props berisi array yang terdiri dari property.

  • cara mengirim data ke view sebagai variabel
Diperoleh dari "https://tik.polresacehtamiang.com/wiki/index.php?title=Laravel-11&oldid=279"