> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fydemy.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Conclusion Laravel
## Overview
This is the conclusion and the latest updates of **vibe coding** technologies — Laravel/PHP edition. Enjoy!
The website pages that you have seen actually have **3 different aspects**:
* **Skeleton (HTML):** Imagine blocks when you are writing on Notion
* **Skin (CSS):** Styling
* **Brain (PHP/JavaScript):** Logics
***
# HTML
**Hyper Text Markup Language (HTML)** is a file to define your website blocks and metadata.
This is a **required and main file** that has to exist in order to create a website.
***
## How to Start
In Laravel, HTML is written inside **Blade** template files with the `.blade.php` extension, located in:
```
resources/views/
```
Recommended editors:
* Visual Studio Code
* Cursor
* PhpStorm
A basic Blade file looks like this:
```html theme={null}
Document
@yield('content')
```
***
## Tags
Notice the pattern:
```
<...> ...
```
This is called a **tag**.
Some tags are **paired**, while others are **void** (self-closing).
Examples:
```
```
or
```
```
***
## Head vs Body
### Head Tag
Inside `` you usually place **metadata** such as:
* Title
* Description
* OpenGraph tags
* SEO information
These help when sharing your website or appearing in search engines.
***
### Body Tag
Inside `` is where the **content of your website** goes.
Examples:
```html theme={null}
Hello World
This is a paragraph !
```
Documentation reference:
[https://www.w3schools.com/tags/tag\_comment.asp](https://www.w3schools.com/tags/tag_comment.asp)
***
## Attributes
Tags can contain **attributes**.
Example:
```html theme={null}
Google
```
Attributes:
* `src`
* `href`
* `alt`
Each element may have **different supported attributes**.
***
# CSS
**Cascading Style Sheets (CSS)** is used to style your HTML elements. CSS **cannot run alone**. It must be connected to an HTML file.
***
## Linking CSS
In Laravel, assets are managed via **Vite**. Add this inside your `` using the `@vite` directive:
```html theme={null}
Document
@vite(['resources/css/app.css', 'resources/js/app.js'])
```
Your CSS file lives at: `resources/css/app.css`
***
## Custom Fonts
You can get fonts from: [https://fonts.google.com](https://fonts.google.com). Search a font and copy the **link tag** into your Blade layout's ``.
***
## Base Styling Template
Common CSS reset at `resources/css/app.css`:
```css theme={null}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', Arial, sans-serif;
}
```
Explanation:
* Reset browser default spacing
* Prevent elements exceeding dimensions
***
# CSS Selectors
Selectors target HTML elements.
Types:
* Tag selector
* Class selector
* ID selector
Example HTML:
```html theme={null}
Hello World
```
Example CSS:
```css theme={null}
h1 {
color: red;
font-size: 24px;
}
.title,
#title,
h1.title {
color: blue;
}
body p {
font-weight: bold;
}
```
Notes:
* `.` → class selector
* `#` → id selector
***
# Magic Element: Div
`div` is a container element used to group elements.
Example:
```html theme={null}
Title
Description
```
Commonly used as:
* wrapper
* container
* layout block
***
# Layout Styling Template
### Flexbox
Used for **horizontal or vertical layouts**
```css theme={null}
display: flex;
gap: 16px;
flex-direction: row;
```
Options:
* row
* column
***
### Grid
Used for **card-based layouts**.
Example:
```css theme={null}
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
```
Example use case:
* Google Classroom style cards
***
# PHP
PHP is the **primary programming language** of Laravel. PHP adds **logic and interactivity** on the server side.
***
## PHP in Blade
In Laravel, PHP is written using **Blade directives** — a cleaner syntax compared to raw PHP.
```blade theme={null}
{{-- Display a variable --}}
{{ $title }}
{{-- Conditional --}}
@if ($user)
Welcome, {{ $user->name }}!
@else
Please login.
@endif
{{-- Loop --}}
@foreach ($posts as $post)
{{ $post->title }}
@endforeach
```
***
# Blade Templating
Blade is Laravel's built-in **template engine**.
***
## Layout & Components
Create the main layout at `resources/views/layouts/app.blade.php`:
```blade theme={null}
@yield('title', 'My App')
@vite(['resources/css/app.css', 'resources/js/app.js'])
@yield('content')
```
Use the layout in other pages:
```blade theme={null}
@extends('layouts.app')
@section('title', 'Home')
@section('content')
Hello World
@endsection
```
***
## Blade Components
Components make your UI reusable.
Create a component: `resources/views/components/button.blade.php`
```blade theme={null}
```
Use it in other pages:
```blade theme={null}
Login
```
***
# Laravel
Laravel is the **most popular fullstack PHP framework** today.
Docs: [https://laravel.com/docs](https://laravel.com/docs)
Laravel includes:
* Backend (PHP)
* Frontend (Blade/Vite)
* Routing
* API
* Built-in Authentication
* ORM (Eloquent)
***
# Getting Started
Install Laravel via Composer:
```bash theme={null}
composer create-project laravel/laravel my-project
cd my-project
```
Main folder structure:
```
app/
Http/
Controllers/
Models/
resources/
views/
routes/
web.php
api.php
```
Run the project:
```bash theme={null}
php artisan serve
```
Run Vite (for CSS/JS):
```bash theme={null}
npm install
npm run dev
```
***
# TailwindCSS
TailwindCSS allows styling **without writing CSS files**.
Docs: [https://tailwindcss.com](https://tailwindcss.com)
Install in Laravel:
```bash theme={null}
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
Install the **TailwindCSS IntelliSense** extension for autocomplete.
***
## Basic Syntax
### Colors
```
bg-red-200
text-blue-900
```
Higher number → stronger color.
***
### Size
```
text-lg
shadow-xl
rounded-sm
```
***
### Spacing
```
p-6
m-24
py-20
mx-2
pl-3
```
***
### Layout
```
flex
grid
gap-4
grid-cols-3
flex-col
mx-auto
```
***
# Routing
Routing in Laravel is defined in `routes/web.php` (for pages) and `routes/api.php` (for API).
```php theme={null}
// Simple page
Route::get('/', function () {
return view('welcome');
});
// Using a Controller
Route::get('/user', [UserController::class, 'index']);
Route::post('/user', [UserController::class, 'store']);
```
***
## Dynamic Routes
```php theme={null}
Route::get('/user/{id}', function (string $id) {
return "User ID: " . $id;
});
```
In a Controller:
```php theme={null}
public function show(string $id)
{
$user = User::findOrFail($id);
return view('user.show', compact('user'));
}
```
***
## Route Groups & Middleware
```php theme={null}
Route::middleware(['auth'])->group(function () {
Route::get('/dashboard', [DashboardController::class, 'index']);
Route::get('/profile', [ProfileController::class, 'show']);
});
```
***
# Controllers
Controllers handle the application's business logic.
Create a Controller:
```bash theme={null}
php artisan make:controller UserController
```
Example Controller:
```php theme={null}
validate([
'name' => 'required|string|max:255',
'email' => 'required|email|unique:users',
]);
User::create($request->all());
return redirect()->route('users.index');
}
}
```
***
# Rendering Methods
## Server Side Rendering (SSR)
In Laravel, all rendering is done on the **server side** by default using Blade.
Benefits:
* SEO-friendly
* More secure for sensitive data
* Ideal for pages that require authentication
```php theme={null}
// Controller sends data to the view
return view('dashboard', ['user' => auth()->user()]);
```
***
## Client Side Rendering (CSR)
For browser-side interactivity, use **Alpine.js** (lightweight) or **Livewire** (reactive without writing JavaScript).
Alpine.js:
```html theme={null}
Hello World!
```
***
# Middleware
Middleware is used to protect routes.
Create a Middleware:
```bash theme={null}
php artisan make:middleware CheckAdmin
```
Example Middleware:
```php theme={null}
public function handle(Request $request, Closure $next)
{
if (!auth()->user()?->is_admin) {
abort(403);
}
return $next($request);
}
```
Register and use it in routes:
```php theme={null}
Route::middleware(['auth', 'admin'])->group(function () {
Route::get('/admin', [AdminController::class, 'index']);
});
```
***
# API Routes
Create API endpoints in `routes/api.php`:
```php theme={null}
Route::get('/posts', [PostController::class, 'index']);
Route::post('/posts', [PostController::class, 'store']);
Route::get('/posts/{id}', [PostController::class, 'show']);
```
Controller returns JSON:
```php theme={null}
public function index()
{
return response()->json(Post::all());
}
```
Access via URL:
```
/api/posts
```
***
# Infrastructure
## Laravel Forge / Ploi
[https://forge.laravel.com](https://forge.laravel.com)
A deployment platform built specifically for Laravel.
Features:
* Server provisioning
* GitHub integration
* Automatic deployments
* Automatic SSL
***
## Railway / Render
Cloud platforms that support PHP/Laravel.
Great for:
* Small to medium projects
* Fast deployment from GitHub
***
## Supabase / PlanetScale
Cloud databases that can be integrated with Laravel.
[https://supabase.com](https://supabase.com)
Supports:
* PostgreSQL (Supabase)
* MySQL (PlanetScale)
* File storage
***
## OpenRouter
AI API platform with free credits.
[https://openrouter.ai](https://openrouter.ai)
Can be integrated with Laravel via its built-in HTTP client:
```php theme={null}
$response = Http::withHeaders([
'Authorization' => 'Bearer ' . env('OPENROUTER_API_KEY'),
])->post('https://openrouter.ai/api/v1/chat/completions', [
'model' => 'openai/gpt-4o',
'messages' => [['role' => 'user', 'content' => 'Hello!']],
]);
```
***
# Libraries & Packages
## Eloquent ORM
Laravel's built-in ORM for communicating with the database.
[https://laravel.com/docs/eloquent](https://laravel.com/docs/eloquent)
Benefits:
* Safer queries
* Prevent SQL injection
* Easy data manipulation
Example:
```php theme={null}
// Retrieve all records
$posts = Post::all();
// Filter
$published = Post::where('status', 'published')->get();
// Create a new record
Post::create(['title' => 'Hello', 'body' => 'World']);
```
***
## Laravel Breeze / Jetstream
Laravel's official authentication starter packages.
[https://laravel.com/docs/starter-kits](https://laravel.com/docs/starter-kits)
Supports:
* Email/password
* Google login (via Socialite)
* OAuth
Install Breeze:
```bash theme={null}
composer require laravel/breeze --dev
php artisan breeze:install
npm install && npm run dev
php artisan migrate
```
***
## Laravel Sanctum / Passport
For **API** authentication.
[https://laravel.com/docs/sanctum](https://laravel.com/docs/sanctum)
Sanctum (simple):
```bash theme={null}
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate
```
Use in API routes:
```php theme={null}
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
return $request->user();
});
```
***
## Livewire
A framework for building **reactive** UIs without writing a lot of JavaScript.
[https://livewire.laravel.com](https://livewire.laravel.com)
Install:
```bash theme={null}
composer require livewire/livewire
```
Example Component:
```php theme={null}
// app/Livewire/Counter.php
class Counter extends Component
{
public int $count = 0;
public function increment()
{
$this->count++;
}
public function render()
{
return view('livewire.counter');
}
}
```
```blade theme={null}
{{-- resources/views/livewire/counter.blade.php --}}
{{ $count }}
```
***
# Bonus
Complete Laravel starter kit with:
* Breeze (Auth)
* Livewire
* TailwindCSS
* Eloquent ORM
Official reference:
[https://github.com/laravel/laravel](https://github.com/laravel/laravel)
***
# Community
Questions and contributions:
[https://laravel.io](https://laravel.io) — Official Laravel community forum
[https://discord.gg/laravel](https://discord.gg/laravel) — Laravel Discord
Join the community to discuss and share your projects!
Google
```
Attributes:
* `src`
* `href`
* `alt`
Each element may have **different supported attributes**.
***
# CSS
**Cascading Style Sheets (CSS)** is used to style your HTML elements. CSS **cannot run alone**. It must be connected to an HTML file.
***
## Linking CSS
In Laravel, assets are managed via **Vite**. Add this inside your `` using the `@vite` directive:
```html theme={null}