DEV Community: Chabba Saad

How to Save Terminal Commands in Windows Using PowerShell Transcript

Chabba Saad — Mon, 02 Feb 2026 09:31:53 +0000

Have you ever finished a complex series of terminal commands and wished you had recorded them? Maybe you need to document your workflow, create a tutorial, or simply remember the exact steps you took. Good news - Windows PowerShell has a built-in feature that does exactly this!

The Problem

As developers, we often run multiple commands in sequence:

Setting up new projects
Installing dependencies
Running build scripts
Deploying applications

Remembering or recreating these exact commands later can be frustrating. Screenshots don't capture everything, and manually copying commands is tedious and error-prone.

The Solution: PowerShell Transcript

PowerShell Transcript is a built-in feature that records everything that happens in your PowerShell session - both the commands you type and their output. It's like a flight recorder for your terminal!
How to Use PowerShell Transcript

Step 1: Start Recording

Before you begin your work, start the transcript with this command:

Start-Transcript -Path "C:\path\to\commands.txt"

Replace C:\path\to\commands.txt with your desired file location. For example:

powershell

Start-Transcript -Path "C:\Users\YourName\Desktop\my-session.txt"

You'll see a confirmation message:

Transcript started, output file is C:\Users\YourName\Desktop\my-session.txt

Step 2:

Now perform all your tasks normally.

Every command and its output will be recorded:

powershell example :

git status

Step 3: Stop Recording

When you're finished, stop the transcript:

go back to powershell

Stop-Transcript

You'll see:

Transcript stopped, output file is C:\Users\YourName\Desktop\my-session.txt

What Gets Saved?

The transcript file includes:

Timestamp of when recording started
All commands you typed
All output from those commands
Error messages if any occurred
Timestamp of when recording ended

Example output:

Pro Tips

Automatic File Naming

Use timestamps in your filename to organize multiple sessions:

powershell$date = Get-Date -Format "yyyyMMdd_HHmmss"

Start-Transcript -Path "C:\logs\session_$date.txt"

Append to Existing File

Continue recording to the same file across sessions:

powershellStart-Transcript -Path "C:\path\to\commands.txt" -Append

deploy application with Kubernetes k8s in Azure

Chabba Saad — Fri, 24 Oct 2025 19:13:17 +0000

Kubernetes (K8s) Cluster Setup Scripts

This project provides a set of bash scripts to automate the setup and initialization of a multi-node Kubernetes cluster (one master, two workers) on Debian-based Linux distributions like Ubuntu.

The scripts handle prerequisite installation, node-specific configuration, and control-plane bootstrapping.

Link : https://github.com/chabbasaad/K8S_deb

check out the full setup video for more details!

https://www.youtube.com/watch?v=W9KXnBbYq4A

Simple To-Do List Application in Vue.js 3: Step-by-Step Guide 2025

Chabba Saad — Wed, 04 Sep 2024 11:46:34 +0000

This guide will walk you through building a basic To-Do List application using Vue.js 3. By the end of this tutorial, you'll understand how to handle data binding, event handling, and dynamic rendering in Vue.js.

Prerequisites

Basic knowledge of HTML, CSS, and JavaScript.
Node.js and npm installed on your computer.
Vue CLI installed. If not, you can install it by running npm install -g @vue/cli.

Step 1: Setting Up the Project

Create a New Vue.js Project: Open your terminal and run the following command to create a new Vue.js 3 project:

vue create todo-app

Navigate into the project directory:

cd todo-app

Run the Development Server: Start the Vue development server:

npm run serve

This will open the default Vue.js starter template in your browser at http://localhost:8080.

Step 2: Structuring the Application

Clean Up the Default Template: Open src/App.vue and remove the default template, script, and style contents. Replace them with the following code:

<template>
  <div id="app">
    <h1>Vue.js To-Do List</h1>
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <button @click="addTask">Add Task</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <input type="checkbox" v-model="task.completed" />
        <span :class="{ 'completed-task': task.completed }">{{ task.text }}</span>
        <button @click="removeTask(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ text: this.newTask, completed: false });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.completed-task {
  text-decoration: line-through;
  color: grey;
}
input {
  margin-bottom: 10px;
  padding: 5px;
}
button {
  margin-left: 5px;
  padding: 5px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}
</style>

Step 3: Understanding the Code

Template Section:

<input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
: This input field is bound to the newTask data property using v-model, enabling two-way data binding. The @keyup.enter="addTask" listens for the Enter key to trigger the addTask method.

<button @click="addTask">Add Task</button>
: This button triggers the addTask method when clicked.

<ul>: This unordered list uses v-for to loop through the tasks array and render each task. The :key="index" is a unique identifier for each item, required by Vue to track list items efficiently.

<input type="checkbox" v-model="task.completed" />: A checkbox that toggles the completed status of a task.

<span :class="{ 'completed-task': task.completed }">{{ task.text }}</span> : The span element displays the task text. The :class directive conditionally applies the completed-task CSS class based on whether the task is completed.

<button @click="removeTask(index)">Delete</button> : A button to remove the task from the list

Script Section:

data() Method:
newTask: A string that holds the value of the new task to be added.
tasks: An array that holds all tasks, each represented as an object with text and completed properties.

methods Object:
addTask(): This method adds the newTask to the tasks array and then clears the newTask input field.
removeTask(index): This method removes a task from the tasks array based on its index.

Style Section:

Basic CSS to style the to-do list, with a .completed-task class to strike through completed tasks.

Persist Tasks in Local Storage: You can enhance the app by saving tasks in the browser's local storage, so they persist across page reloads.

mounted() {
  this.tasks = JSON.parse(localStorage.getItem('tasks')) || [];
},
methods: {
  addTask() {
    if (this.newTask.trim() !== '') {
      this.tasks.push({ text: this.newTask, completed: false });
      this.newTask = '';
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }
  },
  removeTask(index) {
    this.tasks.splice(index, 1);
    localStorage.setItem('tasks', JSON.stringify(this.tasks));
  }
}

Editing Tasks:

<template>
  <div id="app">
    <h1>Vue.js To-Do List</h1>
    <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <button @click="addTask">Add Task</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <input type="checkbox" v-model="task.completed" />

        <span v-if="!task.isEditing" :class="{ 'completed-task': task.completed }">{{ task.text }}</span>
        <input v-else v-model="task.text" @keyup.enter="saveTask(task)" @blur="saveTask(task)" />

        <button v-if="!task.isEditing" @click="editTask(task)">Edit</button>
        <button @click="removeTask(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ text: this.newTask, completed: false, isEditing: false });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    },
    editTask(task) {
      task.isEditing = true;
    },
    saveTask(task) {
      task.isEditing = false;
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.completed-task {
  text-decoration: line-through;
  color: grey;
}
input {
  margin-bottom: 10px;
  padding: 5px;
}
button {
  margin-left: 5px;
  padding: 5px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}
</style>

Install Font Awesome

First, include Font Awesome in your project. If you're using a CDN, you can add this link in your HTML file or directly in the

section of your index.html.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

** Update the Template with Icons
**

Now, let's add some Font Awesome icons for editing, deleting, and completing tasks.

<template>
  <div id="app" class="container">
    <h1>Vue.js To-Do List</h1>
    <div class="input-container">
      <input v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
      <button @click="addTask" class="btn btn-add"><i class="fas fa-plus"></i></button>
    </div>
    <ul>
      <li v-for="(task, index) in tasks" :key="index" :class="{ completed: task.completed }">
        <input type="checkbox" v-model="task.completed" id="checkbox" />

        <span v-if="!task.isEditing" class="task-text">{{ task.text }}</span>
        <input v-else v-model="task.text" @keyup.enter="saveTask(task)" @blur="saveTask(task)" class="edit-input" />

        <div class="actions">
          <button v-if="!task.isEditing" @click="editTask(task)" class="btn btn-edit"><i class="fas fa-edit"></i></button>
          <button @click="removeTask(index)" class="btn btn-delete"><i class="fas fa-trash-alt"></i></button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({ text: this.newTask, completed: false, isEditing: false });
        this.newTask = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    },
    editTask(task) {
      task.isEditing = true;
    },
    saveTask(task) {
      task.isEditing = false;
    }
  }
};
</script>

<style>
body {
  background-color: #f4f7f6;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  padding: 20px;
  max-width: 400px;
  width: 100%;
}

h1 {
  color: #333;
  margin-bottom: 20px;
}

.input-container {
  display: flex;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 5px;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #45a049;
}

.btn-add {
  background-color: #28a745;
}

.btn-edit {
  background-color: #ffc107;
}

.btn-delete {
  background-color: #dc3545;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f8f9fa;
}

li.completed .task-text {
  text-decoration: line-through;
  color: #888;
}

li:hover {
  background-color: #e9ecef;
}

.actions {
  display: flex;
}

.actions .btn {
  margin-left: 5px;
}

.edit-input {
  flex: 1;
  margin-right: 10px;
}
</style>

Part 2 : Mastering Laravel From Fundamentals to Advanced Web Development

Chabba Saad — Mon, 29 Jul 2024 15:23:14 +0000

Mastering Laravel : From Fundamentals to Advanced Web Development

Eloquent Relationship: One To One

Creating a one-to-one relationship between an author and a profile in Laravel using Eloquent involves several steps, including creating migrations, models, and defining the relationship.

Create Migrations and model

php artisan make:model Author --migration

php artisan make:model Profil --migration

Define Migrations

Edit the migrations to define the structure of your tables.

authors migration may look something like this:

Schema::create('authors', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->timestamps();
});

profiles migration should include a foreign key referencing the authors table:

Schema::create('profiles', function (Blueprint $table) {
    $table->id();
    $table->unsignedBigInteger('author_id');
    $table->string('bio');
    $table->timestamps();

    $table->foreign('author_id')->references('id')->on('authors')->onDelete('cascade');
});

Let's break down what each part of this statement does:

$table->foreign('author_id'): This part of the statement is declaring that the author_id column in the profiles table is a foreign key. A foreign key is a field in one table, which is a primary key in another table. In this case, author_id in the profiles table will correspond to the id in the authors table.
>references('id'): This specifies which column in the foreign table (authors) the author_id column is related to. Here, it's saying that author_id references the id column of the authors table. This creates a direct link between the two tables, where each author_id in the profiles table points to an id in the authors table.
>on('authors'): This part specifies the name of the foreign table that the foreign key relates to. In this case, it's the authors table.
>onDelete('cascade'): This is a referential action related to the foreign key. When a record in the parent table (authors) is deleted, the onDelete('cascade') action specifies that all records in the current table (profiles) that reference the deleted record should also be deleted. This helps in maintaining the integrity of your data. For example, if an author is deleted, their associated profile in the profiles table will also be automatically deleted, preventing orphaned records.

Define Eloquent Models

In your Eloquent models, define the one-to-one relationship.

In the Author model:

public function profile()
    {
        return $this->hasOne(Profil::class);
    }

In the Profil model:

public function author()
    {
        return $this->belongsTo(Author::class);
    }

Using the Relationship

With the relationships defined, you can now easily access the profile of an author and

do the opposite ;

To access the profile of an author:

$author = Author::find(1);
$profile = $author->profile;

To access the author of a profile:

$profile = Profile::find(1);
$author = $profile->author;

using tinker to associate an author with a profile

$author = new Author();

$author->save();

$profile = new Profile();

$author->profile()->save($profile);

//

$authors = Author::get();

// return list of authors with their profile

$authors = Author::with('profile')->get();

// return only one author
$author = Author::with('profile')->whereId(1)->first();

// list of profiles :

$profiles = Profile::get();

// list of profiles with authors :

$profiles = Profile::with('author')->get();

Eloquent Relationship: One To Many

Creating a one-to-Many relationship between an post and a comment in Laravel using Eloquent involves several steps, including creating migrations, models, and defining the relationship.

Create Migrations and Models

php artisan make:model Comment --migration

Comments Migration

The comments migration should include a foreign key referencing the posts table:

Schema::create('comments', function (Blueprint $table) {
    $table->id();
    $table->unsignedBigInteger('post_id');
    $table->text('comment');
    $table->timestamps();

    $table->foreign('post_id')->references('id')->on('posts')->onDelete('cascade');
});

Define Eloquent Models

Now, define the relationships in the Eloquent models.

Post Model

In the Post model, define a relationship to access its comments:

public function comments()
    {
        return $this->hasMany(Comment::class);
    }

Comment Model

In the Comment model, define a relationship to access its parent post:

public function post()
    {
        return $this->belongsTo(Post::class);
    }

Associating Comments with a Post

Using Tinker or in your application logic, you can associate a comment with a post as follows:

$comment = new Comment();

$comment->comment= "first comment";

$post = new Post();

$post->comments()->save($comment);

// method 1
$comment = new Comment();

$comment->comment= "first comment";

$comment->post_id = x ;

$comment->save();

// method 2 : associate two comment to one post

$comment = new Comment();

$comment->comment= "first comment";

$comment1 = new Comment();

$comment1->comment= "second comment ";

$post = Post::find(3);

$post->comments()->saveMany([$comment,$comment1]);

Eloquent Relationship: Many To Many

create a many-to-many relationship in Laravel, let's use an example involving posts, comments, and introduce a new entity, tags, to demonstrate a many-to-many relationship, since a comment typically belongs to one post directly, making it a one-to-many relationship. Tags can be applied to posts and posts can have multiple tags, perfectly illustrating a many-to-many relationship.

Step 1: Create Migrations and Models for Tags

First, create a model for Tag with a migration, and also create a pivot table migration for the many-to-many relationship between posts and tags.

bashCopy code
php artisan make:model Tag --migration
php artisan make:migration create_post_tag_table --create=post_tag

Step 2: Migration for Tags

Edit the migration for tags to add the necessary fields.

phpCopy code
Schema::create('tags', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->timestamps();
});

Step 3: Migration for the Pivot Table

Define the pivot table post_tag to store the relationships between posts and tags.

phpCopy code
Schema::create('post_tag', function (Blueprint $table) {
    $table->id();
    $table->unsignedBigInteger('post_id');
    $table->unsignedBigInteger('tag_id');
    $table->timestamps();

    $table->foreign('post_id')->references('id')->on('posts')->onDelete('cascade');
    $table->foreign('tag_id')->references('id')->on('tags')->onDelete('cascade');
});

Step 4: Define Eloquent Models Relationships

Post Model

In the Post model, define a relationship to access its tags.


public function tags()
{
    return $this->belongsToMany(Tag::class);
}

Tag Model

In the Tag model, define a relationship to access its posts.


public function posts()
{
    return $this->belongsToMany(Post::class);
}

Step 5: Associating Tags with Posts

You can associate tags with a post using Tinker or within your application logic. Here's an example of how to attach a tag to a post:

phpCopy code
$post = Post::find(1); 
$tag = Tag::find(1); 

// Attach the tag to the post
$post->tags()->attach($tag->id);

// Alternatively, if you have multiple tags to attach at once
$post->tags()->attach([$tagId1, $tagId2]);

To detach tags from a post:


// Detach a single tag from the post
$post->tags()->detach($tagId);

// Detach multiple tags from the post
$post->tags()->detach([$tagId1, $tagId2]);

// Detach all tags from the post
$post->tags()->detach();

This setup allows you to have a many-to-many relationship between posts and tags, where a post can have multiple tags and a tag can be associated with multiple posts.

lazy loading and Eager Loading

In the provided code snippets, we demonstrate two different approaches to retrieving a Comment model in Laravel, showcasing the difference between lazy and eager loading.

Lazy Loading Example:

$comment = comment::find(2);

In this line, we are retrieving the comment with ID 2 using the find method. This is an example of lazy loading, where the associated Post model is not loaded at the same time as the Comment. The Post data will only be loaded when explicitly accessed, for example, $comment->post, which would trigger an additional query to the database at that point.

Eager Loading Example:

$comment = comment::with('post')->find(2);

Here, we use the with('post') method to eagerly load the related Post model at the same time as the Comment. This means when the comment with ID 2 is fetched, the related Post is also retrieved in the same query operation. Eager loading is beneficial for performance when you know you will need the related model immediately, as it reduces the total number of queries made to the database.

In summary, the choice between lazy and eager loading in Laravel depends on the specific requirements of your application and when you need access to related models. Eager loading is generally used to optimize performance by reducing the number of database queries.

Example with our Project :

// mode lazy

public function index()
    {

        DB::connection()->enableQueryLog();

        $posts = Post::all();

        foreach ($posts as $post) {
            foreach ($post->comments as $comment) {
               dump($comment);
            }
        }

        return view('posts.index', [
            'posts' => $posts]);
    }

// mode eager

public function index()
    {

        DB::connection()->enableQueryLog();

        $posts = Post::with('comments')->get();

        foreach ($posts as $post) {
            foreach ($post->comments as $comment) {
               dump($comment);
            }
        }

        return view('posts.index', [
            'posts' => $posts]);
    }

Summary

Response Time: Eager loading can improve response times by reducing the number of database queries, especially in data-intensive scenarios.
Performance Optimization: Developers should choose between eager and lazy loading based on the specific use case, balancing the need for immediate data access against the potential cost of extra database queries.
Best Practice: In Laravel, it's generally a good practice to use eager loading for data that will definitely be used, especially when dealing with 'hasMany' relationships or when iterating over collections that access related models.

Model Factories

Model Factories in Laravel are a powerful feature for testing and seeding your database with dummy data. They allow you to easily generate fake data for your Eloquent models, which is extremely useful for automated testing and during development when you need to work with sample data. Here's a detailed description suitable for a course module:

Introduction to Model Factories

Purpose: Model Factories in Laravel are used to define a blueprint for how to generate fake data for a given model. This can be used to seed databases or for testing purposes.
Benefits: They promote DRY (Don't Repeat Yourself) principles by centralizing the logic for creating models with test data, making tests and seeders cleaner and more maintainable.

Creating a Model Factory

Command: Use the Artisan command php artisan make:factory [FactoryName] --model=[ModelName] to create a new factory.
Location: Factories are typically stored in the database/factories directory.
Structure: A factory file contains a definition method that returns an array of attribute values for the associated model.

Defining Factory States

Factories can have multiple "states", which are variations of the base factory. This is useful when you need different sets of data for the same model.
States are defined using the state method within the factory class.

Using Factories

Seeding: Factories can be used in database seeders to populate tables with fake data for development or testing.
Testing: In automated tests, factories can create models with predictable data, making it easier to test various scenarios.

Example

php artisan make:factory PostFactory

<?php

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Post>
 */
class PostFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {
        $title = fake()->sentence();
        return [
            'title' => fake()->sentence(),
            'content' => fake()->text(2000), 
            'slug' => \Illuminate\Support\Str::slug($title), 
            'active' => fake()->boolean(), 
        ];
    }
}

Execute factory in the Tinker :

php artisan tinker 

Post::factory()->create();

php artisan make:migration add_userid_to_posts_table

The $table->foreignId('user_id')->constrained(); line in a Laravel migration represents the definition of a foreign key constraint within your database schema. Here's a breakdown of what each part means:

$table->foreignId('user_id'): This part creates a new column on the table named user_id that is intended to store unsigned big integers (BigInteger equivalent). This is commonly used for foreign keys that reference an id field in another table. The foreignId method is a shorthand in Laravel for creating such an integer column specifically designed to link to the id of another table, assuming that id is an unsigned big integer.
>constrained(): This method adds a foreign key constraint to the user_id column, linking it to the id column of another table. By default, without specifying a table name as a parameter to constrained(), Laravel assumes that the foreign key references the id column of a table whose name is the singular form of the column name before _id, following Laravel's naming conventions. In this case, user_id implies a reference to the id column of the users table.

This line effectively does two things:

Creates a user_id column meant to hold references to the id of the users table.
Establishes a foreign key constraint that enforces the integrity of this relationship, ensuring that each value in the user_id column corresponds to an existing id in the users table.

Database Seeding

Definition: Database seeding is the method of automatically populating a database with data. This data can be static, meant for configuration or initial state setup, or dynamically generated to simulate a database filled with user-generated content. Seeding is especially useful for developers and testers by providing a quick way to insert test data into a database without manually entering it.

Purpose:

To initialize a database with the data it needs to perform correctly upon startup.
To assist in automated testing by providing a consistent data state.
To aid in development by giving developers a set of data to work with.

How It Works:

Preparation: Define the data that needs to be inserted into the database. This can include users, posts, settings, or any other entities relevant to the application.
Implementation: Use the seeding capabilities provided by the development framework or database management tools. For example, Laravel provides a seeding system that allows the definition of seed classes, each responsible for seeding specific tables.
Execution: Run the seeding process through the framework's CLI or a custom script. This process executes the seed classes, inserting the predefined data into the database.

Best Practices:

Idempotency: Make sure that running the seeding process multiple times does not create unwanted duplicates or errors. Achieve this by checking for existing data before seeding or by clearing relevant tables at the beginning of the seeding process.
Use Realistic Data: Especially for development and testing, using data that mimics real user input can help uncover issues and better understand how the application behaves.
Environment Awareness: Differentiate between the data needed for development, testing, and production. Sensitive data should not be used in development or testing databases.

      \App\Models\User::factory(10)->create();

        //\App\Models\User::factory()->create([
        //     'name' => 'Test User',
        //     'email' => 'test@example.com',
        // ]);

       \App\Models\Post::factory(10)->create();

Model relations inside seeder

When working with database seeders in a Laravel application, it's often necessary to create not just standalone records, but also to establish relationships between them. This is crucial for reflecting the real-world connections between different entities in your application, such as users having posts, or orders being linked to customers. Here's how you can handle model relationships inside a database seeder in Laravel.

Creating Related Models

When seeding data, you typically start by creating instances of your root model. For related models, you can utilize Laravel's relationship methods to create and associate them seamlessly.

One-to-Many Relationship Example

Suppose you have two models, User and Post, with a one-to-many relationship (a user can have many posts). Here's how you could seed this relationship:

//Model relations inside seeder

        $users = \App\Models\User::factory(10)->create();

        \App\Models\Post::factory(10)->make()->each(function ($post) use ($users) {
            $post->user_id = $users->random()->id;
            $post->save();
        });

Individual seeder classes

In Laravel, using individual seeder classes for each model can help organize your database seeds, making them more maintainable and readable, especially in larger applications. This approach allows you to separate the seeding logic for different parts of your application into distinct classes. Here's a guide on how to use individual seeder classes effectively.

Step 1: Creating Seeder Classes

To create a new seeder class, you can use the Artisan command provided by Laravel. For example, to create a seeder for the User model, you would run:

php artisan make:seeder UsersTableSeeder

php artisan make:seeder PostsTableSeeder

User seeder

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {

         \App\Models\User::factory(10)->create();
    }
}

Post Seeder

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class PostsTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        //

        $users = \App\Models\User::all();

        \App\Models\Post::factory(10)->make()->each(function ($post) use ($users) {
            $post->user_id = $users->random()->id;
            $post->save();
        });
    }
}

Linking Seeder Classes in DatabaseSeeder

The DatabaseSeeder class is the root seeder class that's called when you run the database seed command. To use your individual seeder classes, you need to call them from the run method of the DatabaseSeeder class:

$this->call([
            UsersTableSeeder::class,
            PostsTableSeeder::class,
        ]);

Making seeder interactive

Making a Laravel seeder interactive allows you to dynamically specify aspects of the seeding process at runtime, such as how many records to create. This approach can be particularly useful during development or when running seeders in different environments, providing flexibility without the need to modify the seeder code for each run. Here's how you can make a Laravel seeder interactive:

Step 1: Use the Command Line Interface (CLI)

Laravel seeders can interact with the user through the CLI by using the ask method available in the seeder class. This method is part of the Illuminate\Console\Command class, which seeders have access to via the command property.

Example: Interactive User Seeder

Let's create an interactive seeder that asks how many users to create.

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {

        $count = $this->command->ask('How many users do you want to create?', 10);

        // Create the specified number of users using the User factory
        \App\Models\User::factory((int)$count)->create();

        $this->command->info("Successfully created {$count} users.");

       //  \App\Models\User::factory(10)->create();
    }
}

refresh database before creating new seeders


if($this->command->confirm('Do you want to refresh the database?', true)) {
            $this->command->call('migrate:refresh');
            $this->command->info('Database was refreshed.');
        }

$this->call([
            UsersTableSeeder::class,
            PostsTableSeeder::class,
        ]);

check if users exist

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class PostsTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        //

        $users = \App\Models\User::all();

        if($users->count() == 0) {
            $this->command->info('Please create some users first.');
            return;
        }

        \App\Models\Post::factory(10)->make()->each(function ($post) use ($users) {
            $post->user_id = $users->random()->id;
            $post->save();
        });
    }
}

php artisan db:seed --class=PostsTableSeeder

Unit Testing

Creating a comprehensive tutorial on testing user and post functionality in a Laravel application involves several steps, including setting up the environment, writing tests for both models and their relationships, and ensuring that all functionalities work as expected. This tutorial will cover the basics of setting up Laravel for testing, creating unit tests for models, and feature tests for user interactions with posts.

Step 1: Setting Up the Testing Environment

First, ensure your Laravel application is set up for testing. Laravel uses PHPUnit for testing, configured out of the box. Check that the phpunit.xml file exists in your project root; this file configures your testing environment. You might want to configure your database for testing by setting the DB_CONNECTION environment variable in phpunit.xml to use a different database, like SQLite, for faster tests.

<!-- phpunit.xml -->
<env name="DB_CONNECTION" value="sqlite"/>
<env name="DB_DATABASE" value=":memory:"/>

php artisan test

php artisan make:test HomeTest

<?php

namespace Tests\Feature;

use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\WithFaker;
use Tests\TestCase;

class HomeTest extends TestCase
{
    /**
     * A basic feature test example.
     */
    public function test_example(): void
    {
        $response = $this->get('/home');

        $response->assertStatus(200);
    }

    public function test_home_page_contains_text(): void
    {
        $response = $this->get('/home');

        $response->assertSeeText('Home pge');
    }
}

Step 2: Writing Unit Tests for Models

Before writing feature tests, it's a good practice to start with unit tests for your models to ensure your basic relationships and business logic are correct.

Testing User Model

Create a test file for the User model:

php artisan make:test UserTest --unit

Write tests in tests/Unit/UserTest.php to verify the User-Post relationship:

<?php

namespace Tests\Unit;

use App\Models\User;
use App\Models\Post;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

class UserTest extends TestCase
{
    use RefreshDatabase;

  /**
     * A basic unit test example.
     */
    public function test_example(): void
    {
        $this->assertTrue(true);
    }

    /** @test */
    public function user_can_have_posts()
    {
        $user = User::factory()->create();
        $post = Post::factory()->create(['user_id' => $user->id]);

        // Use the load method to refresh the posts relationship
        $user->load('posts');

        $this->assertTrue($user->posts->contains($post));
    }
}

This test checks that a user can have associated posts.

In the context of Laravel's testing utilities, the assertDatabaseHas and assertDatabaseMissing methods are used to inspect the application's database and assert whether it contains or lacks certain data, respectively. These assertions are particularly useful for feature tests where you're testing the application's behavior as it interacts with the database. Here's a closer look at both methods:

`assertDatabaseHas`

The assertDatabaseHas method asserts that data exists in the database. This method is helpful when you want to ensure that a database operation, such as creating or updating a record, was successful.

Example:

Suppose you have a test that creates a post. To verify that the post was successfully created and exists in the posts table, you might use assertDatabaseHas like this:

$this->assertDatabaseHas('posts', [
    'title' => 'Example Post Title',
    'content' => 'The content of the example post.',
]);

`assertDatabaseMissing`

Conversely, the assertDatabaseMissing method asserts that specific data does not exist in the database. This method is useful for testing deletions or ensuring that a record was not created due to validation or authorization failures.

Example:

If you have a test that deletes a post, you can use assertDatabaseMissing to ensure that the post no longer exists in the posts table:

$this->assertDatabaseMissing('posts', [
    'id' => $postId,
]);

Step 3: Writing Feature Tests for User Interactions with Posts

Feature tests simulate real user interactions with your application. Here, we'll write a test to ensure users can create and view posts.

Testing Post Creation and Viewing

Generate a test file for post interactions:

php artisan make:test PostTest

Write tests in tests/Feature/PostTest.php to simulate creating and viewing posts:

<?php

namespace Tests\Feature;

use App\Models\User;
use App\Models\Post;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;

class PostTest extends TestCase
{
    use RefreshDatabase;

    /** @test */
    public function a_user_can_create_a_post()
    {
        $this->actingAs(User::factory()->create());

        $postData = [
            'title' => 'Sample Post Title',
            'content' => 'This is the content of the post.',
        ];

        $this->post('/posts', $postData)->assertStatus(302); // Assuming redirection after creation

        $this->assertDatabaseHas('posts', $postData);
    }

    /** @test */
    public function a_user_can_view_a_post()
    {
        $post = Post::factory()->create();

        $this->get("/posts/{$post->id}")
             ->assertStatus(200)
             ->assertSee($post->title)
             ->assertSee($post->content);
    }
}

// adjust our controller store post method : 
// method 1 
        $post = new Post();
        $post->title = $request->input('title');
        $post->content = $request->input('content');
        $post->slug= Str::slug($post->title, '-');
        $post->active = false;
        $post->user_id = auth()->id(); // or $request->user()->id;  
        $post->save();

Running the Tests

To run your tests, use the PHPUnit command:

php artisan test

Testing update and Delete

public function a_user_can_update_a_post()
{
    $user = User::factory()->create();
    $this->actingAs($user);

    $post = Post::factory()->create(['user_id' => $user->id]);

    $updatedData = [
        'title' => 'Updated Post Title',
        'content' => 'Updated content of the post.',
    ];

    $response = $this->put("/posts/{$post->id}", $updatedData);

    $response->assertStatus(302); // Assuming a redirect occurs after update

    $this->assertDatabaseHas('posts', [
        'id' => $post->id,
        'title' => 'Updated Post Title',
        'content' => 'Updated content of the post.',
    ]);
}

// Delete

public function a_user_can_view_a_post()
{
    $user = User::factory()->create();
    $this->actingAs($user);

    $post = Post::factory()->create(['user_id' => $user->id]);

    $response = $this->get("/posts/{$post->id}");

    $response->assertStatus(200);
    $response->assertSee($post->title);
    $response->assertSee($post->content);
}

Telescope

Laravel Telescope is an elegant debug assistant for Laravel applications. It provides insight into the requests coming into your application, exceptions, database queries, queued jobs, mail, notifications, cache operations, scheduled tasks, variable dumps, and more. Telescope is designed to make the development process easier by providing a convenient and powerful user interface to monitor your application's operations in real time.

Key Features of Laravel Telescope:

Requests: Tracks incoming requests, including response times, payload, and status codes, helping you identify performance bottlenecks or problematic requests.
Exceptions: Logs exceptions thrown within your application, providing stack traces and context to help with debugging.
Database Queries: Shows all database queries executed during a request, including execution time and the ability to detect duplicate queries that could affect performance.
Mail: Records all outgoing emails sent by the application, allowing you to inspect mail content, headers, and recipients.
Notifications: Monitors notifications dispatched by your application, useful for debugging notification delivery issues.
Jobs: Provides details on queued jobs, including their payload, status (pending, completed, failed), and execution time.
Cache: Displays cache operations, making it easier to understand how your cache is being utilized and identify unnecessary cache hits or misses.
Scheduled Tasks: Keeps track of scheduled tasks, showing when tasks are executed and how long they take, helping ensure your task scheduling is working as expected.
Dumps: Telescope includes a dump watcher, which captures data dumped using the dump() method, making it available in the Telescope interface instead of your application's output.
Redis Commands: If your application uses Redis, Telescope can track Redis commands to give you insight into how Redis is being used.

Installation and Setup:

To install Telescope, you typically run the following Composer command in your Laravel project:

composer require laravel/telescope

After installation, publish its assets and run the migrations:

php artisan telescope:install
php artisan migrate

Accessing Telescope:

Once installed, Telescope can be accessed via your web browser at the /telescope path of your application (e.g., http://127.0.0.1:8000/telescope). Access to Telescope can and should be restricted in production environments to prevent unauthorized access to sensitive application data.

Use Cases:

Development: During development, Telescope can be used to debug and optimize your application by providing real-time insights into its operations.
Staging: In a staging environment, Telescope helps in performing final checks before going live, ensuring that no unexpected issues or performance bottlenecks have been introduced.
Production: While it's less common to have Telescope enabled in production due to performance considerations and the sensitivity of the data it exposes, it can be configured to only keep a limited set of data or to be accessible only by certain IP addresses or users.

Conclusion:

Laravel Telescope is an invaluable tool for Laravel developers, offering a rich set of features to improve application development, debugging, and performance optimization. Its user-friendly interface and comprehensive monitoring capabilities make it a must-have for serious Laravel projects.

Authentication

Step 1: Installing Laravel UI

First, you install the Laravel UI package using Composer:


composer require laravel/ui

This command adds the Laravel UI package to your project, allowing you to generate the basic scaffolding for authentication, as well as frontend presets for Vue.js, Bootstrap, or React.

Step 2: Generating the Auth Scaffolding

Once Laravel UI is installed, you can generate the authentication scaffolding. If you're interested in using Vue.js along with the authentication system, you can do so with the following command:


php artisan ui vue --auth

This command does two main things:

Vue.js Scaffolding: It sets up Vue.js in your Laravel application by generating example components and setting up webpack.mix.js for compiling your assets.
Authentication Scaffolding: It generates the necessary views, routes, and controllers for a basic authentication system. This includes login, registration, password reset, and email verification views, along with the routes and controllers needed to handle these functionalities.

Step 3: Compiling the Assets

After running the ui vue --auth command, you'll need to compile your assets (JavaScript and CSS) to reflect the changes in your application. You can do this with Laravel Mix by running:


npm install && npm run dev

php artisan migrate

now let adjust our redirect page after login and register in RouteServiceProvider :

public const HOME = '/home'; 

//to 

public const HOME = '/posts';

Retrieving the Currently Authenticated User

Laravel provides several methods through its Auth facade to access the currently authenticated user. Understanding these methods helps in managing user-specific data and enforcing access controls. Here are some examples:

Get the ID of the Authenticated User:
```
$userId = Auth::id();
```
This method returns the identifier of the authenticated user without loading the user model. It's useful when you only need the user's ID for database queries or logging.
Retrieve the Authenticated User Instance:
```
$user = Auth::user();
```
This method loads and returns the entire user model instance. It's helpful when you need more than just the user's ID, such as the user's name, email, or other attributes stored in the user table.
Accessing Specific Attributes of the Authenticated User:
```
$userEmail = Auth::user()->email;
```
After retrieving the user model instance, you can access any of its attributes. This example demonstrates how to get the email of the authenticated user.
Check If a User is Authenticated:
```
$isAuthenticated = Auth::check();
```
This method checks if the current visitor is authenticated. It returns true if the user is logged in and false otherwise. This is particularly useful for conditionally showing content or redirecting users.

Protecting Routes (Requiring Authentication)

Protecting routes is crucial to prevent unauthorized access to certain parts of your application. Laravel makes it straightforward to require authentication for specific routes using middleware.

Example of Protecting Routes:


use App\Http\Controllers\HomeController;
use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Auth;

// Public routes
Route::get('/', function () {
    return view('welcome');
});

// Authentication Routes
Auth::routes();

// Protected routes
Route::middleware(['auth'])->group(function () {
    Route::get('/home', [HomeController::class, 'index'])->name('home');
    Route::get('/about', [HomeController::class, 'about'])->name('about');
    Route::resource('posts', PostController::class);
});

Controller-based Middleware Protection:

use App\Http\Controllers\HomeController;
use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;
use Illuminate\Support\Facades\Auth;

// Public routes
Route::get('/', function () {
    return view('welcome');
});

// Authentication Routes
Auth::routes();

// Protected routes
Route::middleware(['auth'])->group(function () {
    Route::get('/home', [HomeController::class, 'index'])->name('home');
    Route::get('/about', [HomeController::class, 'about'])->name('about');

});

 Route::resource('posts', PostController::class);

the constructor method of the PostController class is using $this->middleware('auth')->only(['create', 'edit', 'update', 'destroy']); to specify that only authenticated users are allowed to access the create, edit, update, and destroy actions. Here's a breakdown of what this does:

$this->middleware('auth'): This applies the auth middleware, ensuring that only authenticated users can proceed.
>only(['create', 'edit', 'update', 'destroy']): This limits the middleware application only to the specified methods. Other methods in this controller, such as index or show, would not require authentication, making them accessible to unauthenticated users.

public function __construct()
    {
        $this->middleware('auth')->only(['create', 'edit', 'update', 'destroy']);
    }

If you want to apply middleware to all controller actions except for a selected few, you can use the except method instead of only. This is useful when most of your controller's actions require middleware, but a few public actions should remain accessible without it.

Here's how you can modify your constructor to use except:


public function __construct()
{
    $this->middleware('auth')->except(['index', 'show']);
}

Soft Deletes & Hard Deletes

To implement Soft Deletes and Hard Deletes in Laravel models like User and Post, you first need to understand what each type of deletion entails and then see how to apply them to these models.

Soft Deletes

Soft deleting is a way to "delete" a model without actually removing it from the database. Instead, a deleted_at timestamp is set on the model. This approach lets you recover the "deleted" models later if needed.

How to Implement Soft Deletes:

Create a New Migration

First, you need to create a new migration file for the table you wish to add soft deletes to. If you're modifying an existing table, you'll still create a migration but structure it to alter the table rather than create a new one. Use the Artisan CLI to create this migration:

php artisan make:migration add_soft_deletes_to_posts_table --table=posts

Modify the Migration File

Open the newly created migration file in your editor. It will be named with a timestamp and the description you provided, something like 2024_01_01_000000_add_soft_deletes_to_posts_table.php.

Modify the up method to add a deleted_at column to the table. This column is used by Laravel to mark when a record was "deleted":

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddSoftDeletesToPostsTable extends Migration
{
    public function up()
    {
        Schema::table('posts', function (Blueprint $table) {
            $table->softDeletes(); // Adds the deleted_at column
        });
    }

    public function down()
    {
        Schema::table('posts', function (Blueprint $table) {
            $table->dropSoftDeletes(); // Removes the deleted_at column
        });
    }
}

Run the Migration

Apply the migration to your database to alter the posts table by adding the deleted_at column:


php artisan migrate

Update Your Model

To enable soft deletes in your Eloquent model, you must use the Illuminate\Database\Eloquent\SoftDeletes trait in the model that corresponds to the table you've just modified. Open or create the model file in app/Models/Post.php and update it as follows:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

class Post extends Model
{
    use HasFactory,SoftDeletes;

    protected $fillable = ['title', 'content', 'slug','user_id', 'active'];

    public function user()
    {
        return $this->belongsTo(User::class);
    }

        public function comments()
        {
        return $this->HasMany(Comment::class);
        }


}

$post = Post::find($postId);
$post->delete();

To retrieve soft-deleted models, you can use the withTrashed() method on your model query:

$posts = Post::withTrashed()->get();

This approach ensures that when a Post model is deleted, all of its associated Comment models are also deleted, mimicking the behavior of a database-level ON DELETE CASCADE constraint.

// example without on cascade
        public static function boot(){
        parent::boot();

        static::deleting(function(Post $post){
        $post->comments()->delete();
        });

        }

Hard Deletes

Hard deleting is the conventional way of deleting records from the database. Once a model is hard deleted, it's permanently removed from the database.

Implementing Hard Deletes:

Hard deletes don't require any special setup in Laravel; they are the default behavior when you call the delete method on a model instance without using the SoftDeletes trait.

Example of Force Delete (Hard Delete):


$post = Post::withTrashed()->find($postId);
$post->forceDelete();

implements new logic to our Posts Controller :

// Existing soft delete method
public function destroy(Request $request, string $id)
{
    $post = Post::findOrFail($id);
    $post->delete(); // Soft delete

    $request->session()->flash('status', 'Post was deleted!');
    return redirect()->route('posts.index');
}

// Add this method for hard (force) delete
public function forceDestroy(Request $request, string $id)
{
    $post = Post::withTrashed()->findOrFail($id);
    $post->forceDelete(); // Permanently deletes the post

    $request->session()->flash('status', 'Post was permanently deleted!');
    return redirect()->route('posts.index');
}

index.blade.php

@extends('layouts.app')

@section('content')
    <h1>list of Post</h1>
    <ul>

        @if(session()->has('status'))
        <p style="color: green">
            {{session()->get('status')}}
        </p>
        @endif

        @forelse($posts as $post)
        <li>
<h2><a href="{{route('posts.show',['post'=>$post->id])}}">{{$post->title}}</a></h2>
<b><a href="{{route('posts.edit',['post'=>$post->id])}}">Edit</a> </b>


   <!-- Soft Delete Form -->
   <form action="{{ route('posts.destroy', ['post' => $post->id]) }}" method="POST" style="display: inline;">
    @csrf
    @method('DELETE')
    <button type="submit">Delete Post</button>
</form>

<!-- Hard Delete Form -->
<form action="{{ route('posts.forceDestroy', ['id' => $post->id]) }}" method="POST" style="display: inline;">
    @csrf
    @method('DELETE')
    <button type="submit">Permanently Delete Post</button>
</form>
<p>{{$post->content}}</p>
<em>{{$post->created_at}}</em>
        </li>
        @empty
        <p>No blog post yet!</p>
        @endforelse

    </ul>
@endsection

ADD NEW ROUTE :

Route::delete('/posts/{id}/force', [PostController::class, 'forceDestroy'])->name('posts.forceDestroy');

Mastering Laravel : From Fundamentals to Advanced Web Development

Chabba Saad — Mon, 29 Jul 2024 14:57:32 +0000

Introduction

Environment & Tools

Editeur VS Code - Extensions

Editeur VS Code - Extensions

Mastering Laravel : From Fundamentals to Advanced Web Development

what is Laravel

Laravel is a web application framework with expressive, elegant syntax. It simplifies tasks in web development by easing common tasks, such as routing, sessions, caching, and authentication. Laravel aims to make the development process a pleasing one for the developer without sacrificing application functionality. It's accessible, yet powerful, providing tools needed for large, robust applications.

Why Laravel

Laravel is considered the best choice for many developers due to its elegant syntax, robust features, and extensive ecosystem. It offers a powerful ORM (Eloquent), efficient routing, an intuitive queue system, and simple authentication, which speeds up the web development process. Laravel's extensive libraries and MVC architecture make it ideal for building scalable applications. Moreover, its strong community support, comprehensive documentation, and built-in tools for testing and debugging enhance its appeal. This combination of ease of use, scalability, and functionality makes Laravel a top choice in modern web development.

💡 documentation. For further details on Laravel commands, in-depth explanations, and advanced usage, you can refer to the Laravel documentation at Laravel Official Documentation. This resource is highly recommended for staying updated with the latest Laravel features and best practices.

Environment & Tools

Laragon

Laragon is a portable, isolated, fast, and powerful universal development environment for PHP, Node.js, Python, Java, Go, Ruby. It is designed to provide developers with a quick and easy way to set up a local development environment. The interface displayed in your screenshot is user-friendly and typically includes options to manage services like Apache, MySQL, and others, with the ability to start, stop, and reload these services. It also integrates a terminal and other tools like root access and database management to streamline development workflows. Laragon is often favored for its simplicity and the convenience of having multiple development utilities in one place.

download link

XAMPP

Download XAMPP

XAMPP is a free and open-source cross-platform web server solution stack package. It simplifies the process of installing and configuring Apache server, MySQL, PHP, and Perl. XAMPP is widely used by developers to build and test web applications locally before deploying them. Its user-friendly interface and straightforward setup make it ideal for beginners and professionals alike, providing a reliable and consistent development environment.

Composer

Download Composer

Composer is a dependency manager for PHP, facilitating the management of libraries and packages in PHP projects. It allows developers to declare the libraries their project depends on and manages them for you. Composer streamlines the process of installing and updating libraries, ensuring compatibility and reducing conflicts. It's an essential tool for modern PHP development, promoting efficient and effective management of project dependencies.

Git

Download Git

Git is a distributed version control system used for tracking changes in source code during software development. It enables multiple developers to work collaboratively on the same project, allowing them to branch, merge, and track their work independently. Git is known for its speed, data integrity, and support for distributed, non-linear workflows, making it a staple in the toolkit of developers for managing and maintaining codebases efficiently.

HeidiSQL

Download HeidiSQL

HeidiSQL is a powerful, easy-to-use interface for managing MySQL, MariaDB, SQL Server, PostgreSQL, and SQLite databases. It allows users to browse and edit data, create and modify tables, views, procedures, triggers, and scheduled events. Additionally, HeidiSQL provides a user-friendly interface for importing and exporting data, making database management more accessible and manageable for developers and database administrators.

VS Code

Download Visual Studio Code

Visual Studio Code (VS Code) is a free, open-source code editor developed by Microsoft. It supports a variety of programming languages and includes features like syntax highlighting, intelligent code completion, snippets, and code refactoring. VS Code also has a vast extension library, which allows developers to customize their environment to suit their needs. Its lightweight design, powerful features, and ease of customization make it a popular choice among developers for writing and editing code.

Editeur VS Code - Extensions

In our course, we are installing several useful extensions for Visual Studio Code that greatly enhance our coding experience. These include:

PHP IntelliSense: Provides smart code completion and navigation for PHP.
PHP Intelephense: An efficient and feature-rich PHP language server.
PHP DocBlocker: Assists in generating and maintaining PHP DocBlocks.
PHP Namespace Resolver: Streamlines the management and resolution of namespaces.
Laravel Blade Snippets: Offers handy snippets for Laravel Blade templates.
Laravel Artisan: Integrates Laravel's Artisan commands into VS Code.
Laravel Goto View: Simplifies navigation to Laravel views from controllers.

These extensions collectively improve our PHP and Laravel development workflow within Visual Studio Code

Mastering Laravel: From Fundamentals to Advanced Web Development

Installation & setup

now let start by installing our first laravel project with those command :

composer create-project laravel/laravel example-app

The MVC (Model-View-Controller) architecture is a software design pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components is represented in the Laravel directory structure shown in your image:

Model: The Models directory contains the application's business logic and is responsible for retrieving, inserting, and updating information in the database. In your screenshot, the User.php file inside the Models directory represents a model.
View: The views directory inside the resources folder contains the presentation layer of the application. It's where the application's user interface is stored. Views are responsible for displaying data provided by the controller in a format that the user can interact with.
Controller: The Controllers directory inside the Http folder contains the controllers. Controllers handle user requests, process them (often with the help of models), and return a response, usually by rendering a view.

cd example-app

php artisan serve

Routes, Vues & Layouts

creating first route and views in our project :

Home

<!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">
    <title>Home</title>
</head>
<body>
    <h1>Home Pge</h1>
    <p>Learn Laravel</p>
</body>
</html>

About

<!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">
    <title>About</title>
</head>
<body>
    <h1>About Page</h1>
</body>
</html>

routes :

Route::get('/', function () {
    return view('home');
});

Route::get('/about', function () {
    return view('about');
});

instead of duplicating the same HTML structure across different pages, you use a layout, often referred to as a "master page". This layout serves as a template for other views and contains common HTML structures such as the header, footer, and main navigation elements.

To implement a layout in Laravel, you create a master blade file, typically named layout.blade.php or master.blade.php, which includes placeholders for content (@yield directives) that can be filled by individual views. Here's a basic example of how you might structure a master layout:

let try to add only @extends('layout')

layout.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">
    <title>Document</title>
</head>
<body>
    {{-- @yield('content') --}}

</body>
</html>

home.blade.php

@extends('layout')

    <h1>Home Pge</h1>
    <p>Learn Laravel</p>

When you use @extends('layout') in a Blade template with Laravel, it's typically used for inheriting a master layout. However, this current implementation is not optimal for search engine optimization (SEO) because it not respecting the Content Placement

home.blade.php

@extends('layout')

@section('content')
    <h1>Home Pge</h1>
    <p>Learn Laravel</p>
@endsection

Comparing Route Definitions in Laravel: Closures vs. Route::view for Static Pages

Route::get('/', function () {
    return view('home');
});

Route::get('/about', function () {
    return view('about');
});

Route::view('/','home');
Route::view('/about','about');

The primary difference is in their simplicity and potential for expansion. The first method (using closures) is slightly more verbose but allows for added complexity, such as passing data to views, condition checks, or other operations before returning the view.
The second method (Route::view) is more succinct and is ideal for static pages where you're only returning a view without needing any additional logic or data passed to the view.

Handling Dynamic Route Parameters in Laravel

In this section, we explore how to define routes with dynamic parameters in Laravel. This is particularly useful when you want to fetch or manipulate data based on a variable part of the URL, like an ID from a database.

Example: Fetching a Post by ID

Consider a scenario where you need to display a specific post based on its ID. The ID is dynamically provided in the URL. Here's how you can define such a route:

Route::get('/posts/{id}', function ($id) {
    return $id;
});

testing this dynamic Route :

http://127.0.0.1:8000/posts/4

Dynamic Routes with Multiple Parameters in Laravel

This example demonstrates how to use multiple dynamic parameters in Laravel routes and pass data to a view. We'll use a route with two dynamic parameters (id and author) and then pass the data to a Blade template.

Example 1 :

Route::get('/posts/{id}/{author}', function ($id,$author) {
    return $id. " author: $author ";
});

Example 2:

show.blade.php

@extends('layout')

@section('content')
    <p>{{ $post['title'] }}</p>
@endsection

Explanation:

@extends('layout'): Indicates that this Blade file extends a master layout named layout.
@section('content'): Starts a section named content. This is where you define the content that will be injected into the layout.
{{ $post['title'] }}: Blade syntax for outputting the title of the post. This data is passed from the route.

Route::get('/posts/{id}/{author}', function ($id,$author) {
    $posts = [
        1 => ['title' => 'Intro to Laravel'],
        2 => ['title' => 'Intro to PHP'],
    ];
    return view('posts.show', [
        'post' => $posts[$id] 
    ]);
});

Explanation:

Route::get('/posts/{id}/{author}', ...): Defines a GET route with two dynamic segments, {id} and {author}. Laravel will pass these as parameters to the provided closure.
$posts = [...];: An associative array simulating a data source (like database records).
return view('posts.show', ['post' => $posts[$id]]);: The function returns a view named posts.show, passing along the post data retrieved from the $posts array using the provided $id.

result expected :

Example: Optional Route Parameters in Laravel

Route::get('/posts/{id}/{author?}', function ($id,$author = "default name") {
    $posts = [
        1 => ['title' => 'Intro to Laravel'],
        2 => ['title' => 'Intro to PHP'],
    ];
    return view('posts.show', [
        'post' => $posts[$id] ,
        'author' => $author
    ]);
});

Explanation:

Route::get('/posts/{id}/{author?}', ...): Defines a GET route where {id} is a required parameter, and {author} is optional (indicated by the ? after the parameter name).
$author = "default name": Sets a default value for the $author parameter. If author is not provided in the URL, it will default to "default name".
The route closure returns the posts.show view, passing the post data (based on $id) and the author name.

Use Case:

This approach is valuable for creating more flexible web routes, where certain parts of the URL might be optional. It's particularly useful in scenarios where you want to provide additional context or filters for a page, but those filters are not mandatory.

Rendering HTML Content in Laravel Blade Templates

Background:

Laravel Blade templates escape output by default. This means that any HTML tags included in variables will not be rendered as HTML but will be displayed as plain text. This is a security feature to prevent Cross-Site Scripting (XSS) attacks, where malicious scripts are injected into web pages.

Example: Route with HTML Content in Data Array

Route::get('/posts/{id}/{author?}', function ($id,$author = "default name") {
    $posts = [
        1 => ['title' => '<a> Intro to Laravel </a>'],
        2 => ['title' => 'Intro to PHP'],
    ];
    return view('posts.show', [
        'post' => $posts[$id] ,
        'author' => $author
    ]);
});

Explanation:

The $posts array includes HTML content (<a> Intro to Laravel </a>) for the title of the first post.
By default, Blade will escape this HTML content, meaning it will be displayed as plain text in the view, not as an actual link.

Blade Template with Unescaped Content

To render the HTML content as actual HTML rather than escaped text, you use the {!! !!} syntax in Blade:

@extends('layout')

@section('content')
    <h1>{!! $post['title'] !!}</h1>
    <p>Author: {{ $author }}</p>
@endsection

Controller basics

Controllers in Laravel are used to organize the logic of handling HTTP requests. They serve as an intermediary between the models (which interact with the database) and views (which present data to the user). Controllers help in keeping the code clean and separating the logic from the routing layer.

Key Concepts:

Creation and Structure: Controllers are typically stored in the app/Http/Controllers directory. They can be generated using the Artisan command php artisan make:controller <ControllerName>. A controller class usually extends the base controller class provided by Laravel.
Methods and Routes: Each public method in a controller can be linked to a route. These methods handle requests and return responses. For example, a method can return a view, a redirect, or a JSON response.
Passing Data: Data can be passed to controller methods via route parameters or request data. Controllers can then pass this data to views or use it to interact with models.
Resource Controllers: For standard CRUD operations, Laravel provides resource controllers with methods like index, create, store, show, edit, update, and destroy. These can be automatically set up with a single route declaration.
Dependency Injection: Controllers support dependency injection, allowing you to type-hint dependencies in the constructor or method signatures. Laravel's service container automatically injects these dependencies.

Let Create our first Controller

php artisan make:controller HomeController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    //

    public function home()
    {
        return view('home');
    }

    public function about()
    {
        return view('about');
    }

    public function blog($id,$author = "default name")
    {

        $posts = [
            1 => ['title' => '<a> Intro to Laravel </a>'],
            2 => ['title' => 'Intro to PHP'],
        ];
        return view('posts.show', [
            'post' => $posts[$id] ,
            'author' => $author
        ]);

    }

}

replace welcome blade code with this :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

        <!-- Styles -->

    </head>
    <body class="antialiased">
        <a href="{{ route('home') }}">Home</a>
        <a href="{{ route('about') }}">About</a>
        <a href="{{ route('blog-posts', ['id' => 1]) }}">Show Post</a>

    </body>

</html>

let change our olds route with newest ones :


Route::get('/posts/{id}/{author?}', [HomeController::class, 'blog'])->name('blog-posts');
Route::get('/home', [HomeController::class, 'home'])->name('home');
Route::get('/about', [HomeController::class, 'about'])->name('about');

Models and Migrations

after this phase we need to connect our application with a Database in mysql

For this, Laravel provides a robust and flexible database layer that integrates seamlessly with various database engines. The configuration settings for databases are primarily located in the config/database.php file, along with the .env file for environment-specific settings.

Configuring the Database Connection:

Environment File (.env): Laravel uses the .env file to manage environment-specific configurations. To connect to a MySQL database, you need to set the appropriate values in your .env file for your database connection, like DB_CONNECTION, DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, and DB_PASSWORD. This is an example of how you might configure these:
Database Configuration File (config/database.php): This file holds the configuration for all your database connections. Laravel supports several database drivers out of the box: MySQL, PostgreSQL, SQLite, and SQL Server. You can define settings for each of these and switch between them as needed. The configurations read the values from the .env file, ensuring security and ease of deployment across different environments.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Creating a MySQL Database

When you click on the database icon in Laragon, it opens an interface for HeidiSQL, which is included with the Laragon installation. Laragon is an all-in-one development environment that simplifies database management and other development tasks

i called my Database : first

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=first
DB_USERNAME=root
DB_PASSWORD=

After creating your database named "first", you need to update your Laravel .env file to reflect the correct database settings, including the database name (DB_DATABASE=first). Then, you can use the Artisan migrate command to set up your database tables:

php artisan migrate

**php artisan migrate:rollback**

Key Aspects of `php artisan migrate:rollback`

Undo Last Migrations: The command undoes the last batch of migrations that were run. In Laravel, migrations are batched each time you run the php artisan migrate command. migrate:rollback targets the migrations from the latest batch.
Rollback to a Specific Point: You can specify how many steps of migrations you want to rollback using the -step option. For example, php artisan migrate:rollback --step=1 will rollback the last migration only.
Invoking the down Method: Each migration file has two methods: up() and down(). The up() method is used to add new tables, columns, or indexes to your database, while the down() method should reverse the operations performed by the up() method. The migrate:rollback command calls the down() method for each migration in the last batch.

Creating a New Migration File in Laravel

Introduction:

In Laravel, migrations are essential for managing your application's database schema. They allow you to define and modify your database tables and columns in a programmatic and version-controlled manner. Let's walk through the process of creating a new migration file.

Step-by-Step Process:

 **Using Artisan Command:**

Laravel provides an Artisan command-line tool to simplify the creation of migration files. To create a new migration, use the make:migration command followed by a name that describes the purpose of the migration. The naming convention typically involves a description of the action followed by the name of the table. For example:

php artisan make:migration create_posts_table

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title',120);
            $table->text('content');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('posts');
    }
};

Migration File Structure:

The new migration file will be placed in the database/migrations directory. The file name includes a timestamp to ensure migrations are executed in the order they were created. Inside the migration file, you will find two methods: up() and down().

up() Method: Defines the database operations to be executed when the migration is run (e.g., creating a table, adding columns).
down() Method: Defines the operations to revert the actions of the up() method (e.g., dropping a table).

Steps to Create a Migration for Adding a New Column to table Post

Generate the Migration File:

First, you need to create a new migration file. The name of the migration should describe the action it performs. Use the Artisan command:
```
php artisan make:migration add_slug_and_active_to_posts_table
```

<?php

    use Illuminate\Database\Migrations\Migration;
    use Illuminate\Database\Schema\Blueprint;
    use Illuminate\Support\Facades\Schema;

    return new class extends Migration
    {
        /**
         * Run the migrations.
         */
        public function up(): void
        {
            Schema::table('posts', function (Blueprint $table) {
                //
                $table->string('slug')->unique();
                $table->boolean('active')->default(false);
            });
        }

        /**
         * Reverse the migrations.
         */
        public function down(): void
        {
            Schema::table('posts', function (Blueprint $table) {
            $table->dropColumn('slug');
            $table->dropColumn('active');
            // or this  $table->dropColumn(['slug','active']);
            });
        }
    };

### Introduction to Laravel Models

**Overview:**

In Laravel, a model is a fundamental part of the Eloquent ORM (Object-Relational Mapping) and represents a single database table. Models provide a simple and elegant way to interact with your database. They allow you to query the database tables and perform various operations on the database records in an object-oriented manner.

**Naming Conventions:**

- **Singular and Capitalized**: By convention, model names in Laravel are singular and use "StudlyCaps" (also known as PascalCase). This means the first letter of each word is capitalized, and there are no underscores between words.
- **Correspondence with Database Tables**: The model name should be the singular form of the table name. For instance, if you have a table named **`posts`**, the corresponding model should be named **`Post`**.

### **Generating a Model**

To generate a model in Laravel, you use the Artisan command-line tool. Here's how you can create a model for a **`posts`** table:

```makefile
php artisan make:model Post
```

This command creates a **`Post`** model in the **`app/Models`** directory.

**Example of a Basic Post Model:**

```php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    // Model content goes here
}
```

**Key Features of Models:**

1. **Eloquent ORM**: Laravel's Eloquent ORM provides an active record implementation, making it easier to interact with your database. Each model you create corresponds to a database table, and each instance of the model represents a row in the table.
2. **Property Mapping**: The columns in the database table are automatically mapped to properties of the model. So, you can access and set these properties directly to interact with the corresponding database columns.
3. **Timestamps**: By default, Eloquent expects **`created_at`** and **`updated_at`** columns to be present in your table. It will automatically set these values when models are created or updated.
4. **Mass Assignment Protection**: You can specify either a **`fillable`** or **`guarded`** property on your model to protect against mass-assignment vulnerabilities.
5. **Relationships**: Models can define relationships (like one-to-many, many-to-many) with other models. These relationships are methods that return instances of the relationship.

However, if you want your model to use a different table name that doesn't follow this convention, you can explicitly define the table name in your model. To do this, you can set the **`$table`** property within your model class. Here's an example of how to do this:

```php
protected $table = 'my_custom_posts';
```

In Laravel, **`-mcr`** is a combination of options used with the **`artisan make:model`** command. This command is used to generate a new model, and the options specify additional files that should be created alongside the model. Here's what each letter in **`-mcr`** stands for:

- **`m`**: This option tells Artisan to also create a migration file for the model. Migrations are used to define the database schema. For example, if you're creating a **`Post`** model, using **`m`** will create a corresponding migration file for creating the **`posts`** table in the database.
- **`c`**: This option is for creating a controller. When used, Artisan will generate a new controller file in the **`app/Http/Controllers`** directory. The controller will be named after the model. For a **`Post`** model, this would create a **`PostController`**.
- **`r`**: This indicates that the generated controller should be a resource controller. A resource controller includes methods for the standard set of create, read, update, and delete operations (CRUD). This is useful for quickly scaffolding the basic CRUD functionality.

```php
php artisan make:model Category -mcr
```

---

### Tinker in Laravel

Tinker, included in Laravel, is an interactive shell that integrates with your Laravel application, providing a convenient way to interact with your app's data and functionalities directly from the command line. It leverages the PsySH package to offer an interactive PHP REPL (Read-Eval-Print Loop) for running PHP code in real-time.

Here's a brief overview of what Tinker allows you to do:

1. **Interact with Eloquent Models**: You can create, retrieve, update, and delete database records using Eloquent models directly from the command line.
2. **Run Application Code**: Tinker lets you execute any PHP code or Laravel-specific code in the context of your application. This is particularly useful for testing and debugging.
3. **Event and Job Testing**: You can dispatch events and jobs to test their behavior without needing to trigger them through the application's UI or API.
4. **Experimentation and Prototyping**: It provides a playground for experimenting with new ideas and code snippets, making it easier to prototype without the need to create routes or controllers.
5. **Database Queries**: Apart from Eloquent, you can also run raw database queries or use the query builder for more complex operations.

To use Tinker, you simply run **`php artisan tinker`** in your terminal. This command opens a shell where you can type in your PHP code, and it will be executed within the context of your Laravel application. This immediate feedback loop makes Tinker an invaluable tool for Laravel developers for quick testing and debugging.

let try to isnert first row in our table post :

```php
php artisan tinker

> $post = new Post();

> $post->title = "learn laravel";
= "learn laravel"

> $post->slug = "learn-laravel";
= "learn-laravel"

> $post->content = "laravel is a php framwork";
= "laravel is a php framwork"

> $post->active = true;
= true

> $post->save();
= true

$post->title = "learn angular";
= "learn angular"

> $post->content = "angular is a js framwork";
= "angular is a js framwork"

> $post->slug = "learn-angular";
= "learn-angular"

> $post->active = false;
= false

> $post->save();
```

```php

// get all the posts 
> Post::all();
= Illuminate\Database\Eloquent\Collection {#5019
    all: [
      App\Models\Post {#6025
        id: 1,
        title: "learn laravel",
        content: "laravel is a php framwork",
        created_at: "2024-01-13 21:06:26",
        updated_at: "2024-01-13 21:06:26",
        slug: "learn-laravel",
        active: 1,
      },
      App\Models\Post {#5016
        id: 2,
        title: "learn angular",
        content: "angular is a js framwork",
        created_at: "2024-01-13 21:10:34",
        updated_at: "2024-01-13 21:10:34",
        slug: "learn-angular",
        active: 0,
      },
    ],
  }
// get the First post 
> Post::first();
= App\Models\Post {#6026
    id: 1,
    title: "learn laravel",
    content: "laravel is a php framwork",
    created_at: "2024-01-13 21:06:26",
    updated_at: "2024-01-13 21:06:26",
    slug: "learn-laravel",
    active: 1,
  }

// get the last post 
> Post::get()->last();
= App\Models\Post {#6039
    id: 2,
    title: "learn angular",
    content: "angular is a js framwork",
    created_at: "2024-01-13 21:10:34",
    updated_at: "2024-01-13 21:10:34",
    slug: "learn-angular",
    active: 0,
  }
```

Lazy Collection in laravel

Lazy Collections in Laravel are an efficient way to handle large datasets with minimal memory usage. When you use Post::cursor(), Laravel returns an instance of Illuminate\Support\LazyCollection. This collection leverages PHP's generators to keep memory usage low by only fetching one item at a time from the database as it's being iterated over.

Key points for Lazy Collections:

Efficient Memory Usage: Ideal for processing large datasets without consuming a lot of memory. Only the current item in the iteration is loaded into memory.
Seamless Iteration: Works like regular collections but under the hood, it fetches items one by one, which is great for large datasets.
Useful for Data Export: Perfect for exporting or processing large amounts of data, like generating large CSV files or reports.
Easy to Implement: Just replace get() with cursor() in your Eloquent query. The rest of the code remains the same.

Example Usage:

Post::cursor();
= Illuminate\Support\LazyCollection {#5813
    +source: Closure() {#6028 …4},
  }

> $posts = Post::cursor();
= Illuminate\Support\LazyCollection {#6038
    +source: Closure() {#5011 …4},
  }

> foreach ($posts as $post) { echo "{$post->title} \n"; }
learn laravel
learn angular

This code fetches posts one by one from the database, echoing the title of each post. It's highly efficient for large tables where loading all records at once would be impractical due to memory constraints.

Creating, Updating and Reading data

php artisan make:controller PostController --resource

Creating the Controller:
- The make:controller Artisan command is used to create a new controller file in your Laravel application.
- PostController is the name of the controller. Laravel will place this controller in the app/Http/Controllers directory.
Resource Controller:
- The -resource flag generates a controller with methods for each of the available resource operations. These include index, create, store, show, edit, update, and destroy.
- Each method corresponds to a specific CRUD operation and is pre-defined with a method signature.

and for creating route for each method exist in the post Controller , Laravel provides a very convenient and concise way to define routes for all the CRUD operations in a resource controller using the Route::resource method. When you use Route::resource('posts', PostController::class); in your routes/web.php file, it automatically creates routes for each method in the PostController.

Route::resource('posts', PostController::class);

you can check all the Routes exist in your web.php with this command line :

php artisan route:list

use in different case :

Route::resource('posts', PostController::class)->only(['create']);

This line of code will register only the create route for the PostController. It means that Laravel will only set up the route that shows the form to create a new post (/posts/create with the GET method, mapped to the create method in PostController), and all other resource routes (like index, store, show, edit, update, destroy) will not be registered.

PostController (`PostController.php`)

Now, let's complete each method in the PostController:

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        $posts = Post::all(); // or [] for forelse test in the blade
        return view('posts.index', [
            'posts' => $posts]);
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     */
    public function show(string $id)
    {
        $post = Post::findOrFail($id);
        return view('posts.show', [
            'post' => $post
        ]);
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit(string $id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(Request $request, string $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(string $id)
    {
        //
    }
}

Explanation

index: Lists all posts.
create: Shows a form to create a new post.
store: Saves a new post to the database.
show: Displays a specific post.
edit: Shows a form to edit an existing post.
update: Updates an existing post in the database.
destroy: Deletes a post from the database.

Each method interacts with the Post model to perform CRUD (Create, Read, Update, Delete) operations. The views

(posts.index, posts.create, posts.show, posts.edit) referenced in these methods need to be created within the resources/views/posts directory. These Blade templates will form the user interface for interacting with the posts.

Blade directives @if, @foreach, dates

index.blade.php

@extends('layout')

@section('content')
    <h1>list of Post</h1>
    <ul>
        @foreach($posts as $post)


        <li>
<h2><a href="{{route('posts.show',['post'=>$post->id])}}">{{$post->title}}</a></h2>
<p>{{$post->content}}</p>
<em>{{$post->created_at}}</em>
        </li>
        @endforeach
    </ul>
@endsection

show.blade.php

@extends('layout')

@section('content')

    <h2>{{$post->title}}</h2>
    <p>{{$post->content}}</p>
    <em>{{$post->created_at}}</em>

    @if ($post->active)
        <p>status : Active</p>

    @else
    <p>status : Desactivated</p>
    @endif
@endsection

Displaying a List of Posts with forelse

Example :

@extends('layout')

@section('content')
    <h1>list of Post</h1>
    <ul>
        @forelse($posts as $post)


        <li>
<h2><a href="{{route('posts.show',['post'=>$post->id])}}">{{$post->title}}</a></h2>
<p>{{$post->content}}</p>
<em>{{$post->created_at}}</em>
        </li>
        @empty
        <p>No blog post yet!</p>
        @endforelse
    </ul>
@endsection

@forelse is a Blade directive that functions like a foreach loop, but it also handles the case where the array ($posts in this case) is empty.
It iterates over each Post object within the $posts collection.
Post Details
This section displays the title, content, and creation date of each post.
The title is wrapped in a hyperlink (<a> tag) generated by the route() function, which creates a URL to the route named posts.show, passing the post's ID as a parameter.
{{ }} is used to display the data, and it automatically escapes HTML entities to prevent XSS attacks.
Handling No Posts
The @empty directive is part of the @forelse loop. It specifies the content to show when the $posts collection is empty.
In this case, it displays a simple message: "No blog post yet!"

Understanding `diffForHumans()`

The diffForHumans() method in Carbon provides a human-readable difference between two dates. It's particularly useful when you want to display the time elapsed in a way that is easy for users to understand. For example, instead of showing a date like "2021-03-31 08:30:00", you could display "5 hours ago", "2 days ago", or "a month ago".

Basic Usage

When you retrieve a timestamp from the database in Laravel, Eloquent automatically casts it to a Carbon instance (if you're using standard timestamp fields like created_at, updated_at). This allows you to directly use Carbon methods on these fields. Here’s a basic example:

<em>{{$post->created_at->diffForHumans()}}</em>

Other Features

Comparison with Other Dates: You can compare any two Carbon instances, not just the current time.
Localization: Carbon supports localization, so you can display time differences in different languages.
Precision: You can control the precision of the difference (like seconds, minutes, hours, etc.).

Forms and CSRF token

let create a blade to test our first senario for forms ;

@extends('layout')

@section('content')

<form action="{{route('posts.store')}}" method="POST">
    <div><label for="title">your title</label><input name="title" id="title" type="text" name="" id=""></div>
    <div><label for="content"></label><input name="content" id="content" type="text" name="" id=""></div>
<button type="submit">Create Post</button>
</form>

@endsection

update the layout page :

<!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">
    <title>Document</title>
</head>
<body>
    <a href="{{ route('home') }}">Home</a>
    <a href="{{ route('about') }}">About</a>
    <a href="{{ route('posts.create') }}">new Post</a> // adding link for create new post
    @yield('content')

</body>
</html>

testing senario :

after clicking on create button we got this page :

The 419 error page (indicating a "Page Expired" issue) that you encounter when submitting a form in Laravel is due to the absence of a CSRF token in the form. CSRF stands for Cross-Site Request Forgery, which is a type of malicious exploit where unauthorized commands are transmitted from a user that the web application trusts.

Laravel includes CSRF protection as a default feature for all POST, PUT, PATCH, and DELETE requests to protect your application from such attacks. When you submit a form without a CSRF token, Laravel's security feature kicks in and rejects the request, resulting in a 419 error.

now let insert our first Post with from the Blade page

/**
     * Store a newly created resource in storage.
     */
    public function store(Request $request)
    {
        dd($request->all());

        $request->validate([
            'title' => 'required|min:3',
            'content' => 'required|min:10'
        ]);

    }


use Illuminate\Support\Str;   // add this line 
/**
     * Store a newly created resource in storage.
     */
    public function store(Request $request)
    {
       // dd($request->all());

    $title = $request->input('title');
    $content = $request->input('content');
    $slug = \Str::slug($title);
    $post = new Post();
    $post->title = $title;
    $post->content = $content;
    $post->slug = $slug;
    $post->save();
    return redirect()->route('posts.index');


    }

Working Session flash messages

Here's a typical use case for setting a flash message in a controller and displaying it in a view:

$request->session()->flash('status', 'Post was created!');

Displaying the Message in a View

To display this message, you would typically have something like the following in your Blade template (e.g., in resources/views/layout.blade.php or a similar layout file):

<!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">
    <title>Document</title>
</head>
<body>

    @if(session()->has('status'))
    <h3 style="color: green">
        {{session()->get('status')}}
    </h3>
    @endif

    <a href="{{ route('home') }}">Home</a>
    <a href="{{ route('about') }}">About</a>
    <a href="{{ route('posts.create') }}">new Post</a>
    @yield('content')

</body>
</html>

Validation basics

In Laravel, when you use the $request->validate() method in a controller action, it performs form validation based on the rules you have specified. If the validation fails (meaning the user input does not meet the validation criteria), Laravel automatically redirects the user back to the previous page, which is typically the form submission page. This redirection is a HTTP 302 (Found) response, which is a standard way of performing a redirection on the web.

Here's a breakdown of what happens:

Form Submission: The user submits the form, sending a POST request to the server.
Validation in Controller: In the store method of your controller, you validate the request using $request->validate().
Validation Rules: The title and content fields have specific rules ('required|min:3' and 'required|min:10', respectively). If the user input doesn't meet these criteria, the validation fails.
Automatic Redirection on Failure: If validation fails, Laravel automatically generates a session error bag containing the validation errors and then redirects the user back to the form page with a 302 HTTP status code.
Displaying Errors: On the form page, you can display these validation errors to inform the user what they need to correct. Laravel's Blade templates make it easy to display these errors by accessing the session error bag.

$request->validate([
            'title' => 'required|min:3',
            'content' => 'required|min:10'
        ]);

Displaying validation errors

Customize the Error message in the Front end

@extends('layout')

@section('content')

<form action="{{route('posts.store')}}" method="POST">
    @csrf  <!-- CSRF Token -->
    <div><label for="title">your title</label><input name="title" id="title" type="text" name="" id=""></div>
    <div><label for="content"></label><input name="content" id="content" type="text" name="" id=""></div>

    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<button type="submit">Create Post</button>
</form>

@endsection

Form Requests

Customize the Form Request

php artisan make:request StorePost

First, open the generated StorePost.php file. You'll see two main methods: authorize() and rules().

authorize(): This method determines if the user is authorized to make this request. You return true to allow or false to deny the request. You can also include more complex logic using Laravel's authentication and authorization features.
rules(): Here, you define the validation rules for your form data.

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StorePost extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     */
    public function authorize(): bool
    {
        return false; // return this to true
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
     */
    public function rules(): array
    {
        return [
            'title' => 'required|min:3|max:255',
            'content' => 'required|min:10',
        ];
    }
}

Use the Form Request in a Controller

Next, modify the corresponding controller method to type-hint the StorePost request. This automatically triggers validation when the method is called.

Example:

/**
     * Store a newly created resource in storage.
     */
    public function store(StorePost $request)
    {
       // dd($request->all());
      // Get validated data
    $validated = $request->validated();

    $title = $request->input('title');
    $content = $request->input('content');
    $slug = Str::slug($title);
    $post = new Post();
    $post->title = $title;
    $post->content = $content;
    $post->slug = $slug;
    $post->save();

    $request->session()->flash('status', 'Post was created!');

    return redirect()->route('posts.index');
   // return redirect()->route('posts.show', ['post' => $post->id]');    

    }

now let try to save our post with more concise way ;

To simplify your store method and use the Post::create method, you can take advantage of Laravel's Mass Assignment feature. This allows you to create a new Post model and save it to the database

for this to work, you need to ensure that the fields you are trying to mass assign are listed in the $fillable attribute of your Post model.

First, update your Post model to include the $fillable property:

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['title', 'content', 'slug'];

    // Other model properties and methods...
}

Now, in your controller's store method, you can use the Post::create method. You will still need to manually create the slug before calling create:

$data = $request->only(['title', 'content']);
    $data['slug'] = Str::slug($data['title']);
    $data['active'] = false;

    $post = Post::create($data);

old() helper in forms

The old() helper function in Laravel is a convenient tool used in forms to repopulate form fields with their previous values. This is particularly useful when a form submission fails (e.g., due to validation errors) and the page is reloaded. The old() function ensures that the user doesn't have to re-enter all the form data again.

Usage in Blade Templates

Here's how you might use the old() helper in a Blade template:

<input type="text" name="title" value="{{ old('title') }}">

Handling Select, Checkbox, and Radio Inputs

For select, checkbox, and radio inputs, the old() helper can be used to determine which option should be selected or checked.

Select:

<select name="category">
    <option value="1" {{ old('category') == 1 ? 'selected' : '' }}>Category 1</option>
    <option value="2" {{ old('category') == 2 ? 'selected' : '' }}>Category 2</option>
</select>

Checkbox

<input type="checkbox" name="agree" {{ old('agree') ? 'checked' : '' }}>

Radio:

<input type="radio" name="gender" value="male" {{ old('gender') == 'male' ? 'checked' : '' }}>
<input type="radio" name="gender" value="female" {{ old('gender') == 'female' ? 'checked' : '' }}>.

Edit & Update & Delete Method

edit method

/**
 * Show the form for editing the specified resource.
 */
public function edit(string $id)
{
    $post = Post::findOrFail($id);
    return view('posts.edit', [
        'post' => $post
    ]);
}

Blade : edit.blade.php

@extends('layout')

@section('content')

<form action="{{route('posts.update',['post'=>$post->id])}}" method="POST">
    @csrf  <!-- CSRF Token -->
    @method('PUT')
    <div><label for="title">your title</label><input name="title" id="title" type="text" value="{{old('title',$post->title)}}"></div>
    <div><label for="content"></label><input name="content" id="content" type="text" value="{{old('content',$post->content)}}""></div>

    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<button type="submit">Update Post</button>
</form>

@endsection

adding this to the index.blade.php

<a href="{{route('posts.edit',['post'=>$post->id])}}">Edit</a>

update method

/**
     * Update the specified resource in storage.
     */
    public function update(Request $request, string $id)
{
    $request->validate([
        'title' => 'required|min:3|max:255',
        'content' => 'required|min:10',
    ]);

    $post = Post::findOrFail($id);
    $post->title = $request->input('title');
    $post->content = $request->input('content');
    $post->slug = Str::slug($request->input('title'));
    $post->save();

    $request->session()->flash('status', 'Post was updated!');

    return redirect()->route('posts.show', ['post' => $post->id]);
}

Additional Points

The findOrFail method is used to retrieve the post by its ID. If the post is not found, it throws a ModelNotFoundException, which Laravel will automatically convert into a 404 response.

testing senario with find and findOrfail :

if we use findorFail :

if we use only find :

delete method

/**
     * Remove the specified resource from storage.
     */
    public function destroy(string $id)
{
    $post = Post::findOrFail($id);
    $post->delete();

    session()->flash('status', 'Post was deleted!');
    return redirect()->route('posts.index');
}

blade :

<form action="{{route('posts.destroy',['post'=>$post->id])}}" method="POST">
    @csrf  <!-- CSRF Token -->
    @method('DELETE')
    <button type="submit">Delete</button>
    </form>

Our first CRUD View achevied :

Laravel Dusk Tutorial: Browser Testing Made Easy

Chabba Saad — Mon, 29 Jul 2024 14:45:33 +0000

Introduction

Testing your application in the browser is one of the best ways to ensure that your entire application works as intended, not just individual pieces. Historically, setting up browser testing has been complicated, but Laravel Dusk simplifies the process. Dusk is a first-party package provided by the Laravel team that offers a user-friendly way to interact with a browser, usually headless but not necessarily. It does not require a Selenium server or any complicated setup and uses Facebook's Remote WebDriver, making it lightweight compared to traditional browser testing setups.

Setting Up Laravel Dusk

Step 1: Install Laravel Dusk

First, ensure you have a standard Laravel application set up. Then, require Laravel Dusk:

composer require --dev laravel/dusk

Passing the --dev flag ensures that Dusk is only included in the development environment, which is important for security reasons.

Step 2: Install Dusk

Run the following Artisan command to install Dusk:

php artisan dusk:install

This command sets up the necessary configuration for Dusk and downloads the ChromeDriver binaries for your system.

Step 3: Check the ChromeDriver

Dusk automatically downloads the appropriate ChromeDriver for your system. You can check the vendor/laravel/dusk/bin directory to see the downloaded ChromeDriver.

Step 4: Configure .env File

By default, Dusk runs in headless mode. To disable headless mode for debugging purposes, you can add the following line to your .env file:

DUSK_HEADLESS_DISABLED=true

Writing Your First Dusk Test

Step 1: Create a New Dusk Test

Generate a new Dusk test using the Artisan command:

php artisan dusk:make RegistrationTest

This command creates a new test file in the tests/Browser directory.

Step 2: Write the Test

Open the generated test file and modify it to automate the registration process. Here’s an example:


<?php

namespace Tests\Browser;

use Laravel\Dusk\Browser;
use Tests\DuskTestCase;

class RegistrationTest extends DuskTestCase
{
    /**
     * A basic browser test example.
     *
     * @return void
     */
    public function testRegistration()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/register')
                    ->type('name', 'Test User')
                    ->type('email', 'test@example.com')
                    ->type('password', 'password')
                    ->type('password_confirmation', 'password')
                    ->press('Register')
                    ->assertPathIs('/home');
        });
    }
}

Step 3: Run the Test

Run the test using the following Artisan command:

php artisan dusk

php artisan dusk --filter= [name of test ]

This command will open a browser, perform the registration steps, and verify that the user is redirected to the /home page upon successful registration.

Advanced Dusk Features

Interacting with Elements

Dusk provides several methods to interact with elements on the page:

Type into an input field:


$browser->type('name', 'Test User');

Click a button:

$browser->press('Register');

Select an option from a dropdown:

$browser->select('country', 'US');

Check a checkbox:

$browser->check('terms');

Assertions

Dusk allows you to make various assertions to verify the state of the application:

Assert URL path:

$browser->assertPathIs('/home');

Assert see text:

$browser->assertSee('Welcome');

Assert input value:

$browser->assertInputValue('email', 'test@example.com');

Handling Modals

Dusk can handle JavaScript modals and alerts:

Accept a JavaScript alert:

$browser->acceptDialog();

Dismiss a JavaScript alert:

$browser->dismissDialog();

Taking Screenshots

Dusk can take screenshots of the browser at any point during the test:

$browser->screenshot('registration-page');

Using Dusk Selectors

Dusk selectors provide a robust way to target elements:

Add a dusk attribute to your HTML elements:


<input dusk="email" type="email" name="email">

Target the element in your Dusk test:

$browser->type('@email', 'test@example.com');

Conclusion

Laravel Dusk simplifies browser testing by providing a clean and expressive API to interact with your application. It automates the setup process, making it easier to ensure that your entire application works as expected. With features like element interaction, assertions, modal handling, screenshots, and Dusk selectors, you can write comprehensive browser tests to validate your application's functionality.

A Comprehensive Guide to Testing in Laravel with PHPUnit

Chabba Saad — Sun, 28 Jul 2024 15:00:32 +0000

Introduction to Testing in Laravel

Testing is a critical aspect of software development that ensures your application works as intended. Laravel provides a robust testing suite out of the box with PHPUnit, a popular testing framework for PHP. This guide will walk you through setting up and running tests in Laravel, explaining the differences between unit and feature tests, and providing examples for various testing scenarios.

Folder Structure: Unit vs. Feature Tests

In Laravel, tests are typically organized into two main directories: Unit and Feature.

Unit Tests: These tests are designed to test small, isolated parts of your application, such as individual methods or classes. They are usually located in the tests/Unit directory. Each test function should start with the word test.

Example:

public function testExampleFunction() {
    $this->assertTrue(true);
}

Feature Tests: These tests handle more complex interactions and typically test several components working together. They are located in the tests/Feature directory. Feature tests often involve making HTTP requests and checking responses.

Running Tests in Laravel

To run all tests in your Laravel application, use the following command:

./vendor/bin/phpunit

Configuring the Testing Environment

Before running tests, it's important to configure your testing environment. Modify your phpunit.xml file to set environment variables for testing. For example, to use an SQLite in-memory database for faster tests:

<php>
    <env name="APP_ENV" value="testing"/>
    <env name="APP_MAINTENANCE_DRIVER" value="file"/>
    <env name="BCRYPT_ROUNDS" value="4"/>
    <env name="CACHE_STORE" value="array"/>
    <env name="DB_CONNECTION" value="sqlite"/>
    <env name="DB_DATABASE" value=":memory:"/>
    <env name="MAIL_MAILER" value="array"/>
    <env name="PULSE_ENABLED" value="false"/>
    <env name="QUEUE_CONNECTION" value="sync"/>
    <env name="SESSION_DRIVER" value="array"/>
    <env name="TELESCOPE_ENABLED" value="false"/>
</php>

After enabling SQLite as your testing environment, clear the configuration cache:

php artisan config:clear

*Example: Testing if Profile Route Exists and Works Correctly
*

Create a test for the profile route:

php artisan make:test ProfileTest

Add a test method to check if the profile page displays specific text:

public function testProfilePage(){
    $response = $this->get('/profile');
    $response->assertSeeText('Your Profile');
}

Testing Database Interactions

Setting Up a Testing Database

Before testing database interactions, create a testing database configuration in config/database.php:

'mysqltesting' => [
    'driver' => 'mysql',
    'url' => env('DB_URL'),
    'host' => env('DB_HOST', '127.0.0.1'),
    'port' => env('DB_PORT', '3306'),
    'database' => 'laravel_testing',
    'username' => env('DB_USERNAME', 'root'),
    'password' => env('DB_PASSWORD', ''),
    'unix_socket' => env('DB_SOCKET', ''),
    'charset' => 'utf8mb4',
    'collation' => 'utf8mb4_unicode_ci',
    'prefix' => '',
    'prefix_indexes' => true,
    'strict' => true,
    'engine' => null,
    'options' => extension_loaded('pdo_mysql') ? array_filter([
        PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
    ]) : [],
],

Running Database Tests

Run the PHPUnit command to ensure the test database is created and working:

./vendor/bin/phpunit

Example: Testing User Registration

Create a test for user registration:

php artisan make:test UserTest

Add a test method to verify a user can be created and saved to the database:

public function test_registration(): void
{
    $user = new User();
    $user->name = 'Test User';
    $user->email = 'email@example.com';
    $user->password = bcrypt('password');

    $user->save();

    $this->assertDatabaseHas('users', ['email' => 'email@example.com']);
}

Testing Store Action

Create a test for the store action in the PostTest class:

public function testPostStoreValid()
{
    $data = [
        'title'=> 'Test Post',
        'slug' => 'test-post',
        'content' => 'Content of the post',
        'active' => true,
    ];

    $this->post('/posts', $data)
         ->assertStatus(302)
         ->assertSessionHas('status');

    $this->assertEquals(session('status'), 'Post was created!');
}

Testing for Failure

Add a test method to check for validation errors:

public function testPostFail()
{
    $data = [
        'title'=> '',
        'content' => '',
    ];

    $this->post('/posts', $data)
         ->assertStatus(302)
         ->assertSessionHas('errors');

    $messages = session('errors')->getMessages();

    $this->assertEquals($messages['title'][0], 'The title must be at least 4 characters.');
    $this->assertEquals($messages['title'][1], 'The title field is required.');
    $this->assertEquals($messages['content'][0], 'The content field is required.');
}

*Testing Update Action
*

Add a test method for updating a post:

public function testPostUpdate()
{
    $post = new Post();

    $post->title = "Initial Title";
    $post->slug = Str::slug($post->title, '-');
    $post->content = "Initial content";
    $post->active = true;

    $post->save();

    $this->assertDatabaseHas('posts', $post->toArray());

    $data = [
        'title' => 'Updated Title',
        'slug' => 'updated-title',
        'content' => 'Updated content',
        'active' => false,
    ];

    $this->put("/posts/{$post->id}", $data)
         ->assertStatus(302)
         ->assertSessionHas('status');

    $this->assertDatabaseHas('posts', ['title' => $data['title']]);
    $this->assertDatabaseMissing('posts', ['title' => $post->title]);
}

Testing Delete Action

Add a test method for deleting a post:

public function testPostDelete()
{
    $post = new Post();

    $post->title = "Title to delete";
    $post->slug = Str::slug($post->title, '-');
    $post->content = "Content to delete";
    $post->active = true;

    $post->save();

    $this->assertDatabaseHas('posts', $post->toArray());

    $this->delete("/posts/{$post->id}")
         ->assertStatus(302)
         ->assertSessionHas('status');

    $this->assertDatabaseMissing('posts', $post->toArray());
}

Running Specific Tests with PHPUnit

To run a specific test method or class, use the --filter option with PHPUnit. Here are some examples:

Run a Specific Test Method

./vendor/bin/phpunit --filter PostTest::testPostDelete

Run All Tests in a Specific Class

./vendor/bin/phpunit --filter PostTest

Run Tests in a Specific File

./vendor/bin/phpunit tests/Feature/PostTest.php

Verbose Output

For more detailed output, add the -v option:

./vendor/bin/phpunit --filter PostTest::testPostDelete -v

Running Laravel Development Server and NPM in One Command

Chabba Saad — Sun, 21 Jul 2024 19:09:13 +0000

Managing a modern Laravel project often involves running multiple commands to start the development environment. Typically, you need to run php artisan serve to start the Laravel development server and npm run dev to compile your frontend assets. To streamline this process, you can create a custom Artisan command that runs both commands simultaneously. In this article, we'll walk through the steps to create this command in Laravel.

Creating the ServeAndDev Command

First, let's create a new Artisan command called ServeAndDev. This command will start both the Laravel development server and the NPM build process in separate processes.

php artisan make:command ServeAndDev

Step 1: Define the Command

In your Laravel application, navigate to the app/Console/Commands directory and create a new file named ServeAndDev.php. Add the following code to this file:

<?php
namespace App\Console\Commands;

use Illuminate\Console\Command;

class ServeAndDev extends Command
{
    // Define the command signature and description
    protected $signature = 'serve:dev';
    protected $description = 'Run php artisan serve and npm run dev';

    public function __construct()
    {
        parent::__construct();
    }

    public function handle()
    {
        // Run php artisan serve in a separate process
        $this->info('Starting Laravel development server...');
        $serveProcess = popen('php artisan serve', 'r');

        if ($serveProcess) {
            $this->info('Laravel development server started.');

            // Run npm run dev in a separate process
            $this->info('Starting npm run dev...');
            $npmProcess = popen('npm run dev', 'r');

            if ($npmProcess) {
                $this->info('npm run dev started.');
            } else {
                $this->error('Failed to start npm run dev.');
            }
        } else {
            $this->error('Failed to start Laravel development server.');
        }

        // Keep the command running
        while (!feof($serveProcess) && !feof($npmProcess)) {
            echo fgets($serveProcess);
            echo fgets($npmProcess);
        }

        pclose($serveProcess);
        pclose($npmProcess);
    }
}

in laravel 11 no need to register the command

Step 3: Running the Command
With the command defined and registered, you can now run it using Artisan. In your terminal, simply execute:

php artisan serve:dev

Building a Dynamic Contact Form with Firebase Realtime Database

Chabba Saad — Thu, 09 May 2024 13:36:40 +0000

Building a Dynamic Contact Form with Firebase Realtime Database
In this tutorial, we'll walk through the process of creating a dynamic contact form using Firebase Realtime Database. This form not only captures user inputs but also allows you to view, edit, and delete messages directly from a web interface. This is particularly useful for managing user feedback or queries efficiently.

*Note *: Before we start our tutorial dont forget to allow permission read and write in our realtime Database

Prerequisites

To follow along, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you'll need access to Firebase and a project set up with Firebase Realtime Database enabled.

Step 1: Setting Up Your HTML Structure

First, we define the HTML structure. This includes a simple form for user inputs and a table to display the stored messages.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Messages | Firebase</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <div class="container">
        <table id="messagesList"></table>
    </div>

    <div class="container">
        <form action="" id="contactForm">
            <div class="alert">Your message sent</div>
            <div class="inputBox">
                <input type="text" id="name" placeholder="Your name...." />
                <input type="email" id="emailid" placeholder="Your Email....." />
                <textarea id="msgContent" cols="30" rows="10" placeholder="Message"></textarea>
                <input id="date" type="date" ></input>
                <button type="submit" id="submit-button">Submit</button>
            </div>
        </form>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/firebase/7.14.1-0/firebase.js"></script>
    <script src="./mail.js"></script>
</body>
</html>

Step 2: Firebase Configuration and Initialization

Before interacting with Firebase, we need to configure and initialize it within our application. This involves setting up the Firebase connection and referencing the specific database path.

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Reference your database
var contactFormDB = firebase.database().ref("contactForm");

Step 3: Fetching and Displaying Messages

We use the fetchMessages function to listen for real-time updates from Firebase. Any changes in the database will automatically update the HTML table.

// Fetch and display messages
function fetchMessages() {
    contactFormDB.on('value', function(snapshot) {
        document.getElementById('messagesList').innerHTML = '<tr><th>Name</th><th>Email</th><th>Message</th><th>Date</th><th>Actions</th></tr>';
        snapshot.forEach(function(childSnapshot) {
            var childKey = childSnapshot.key;
            var childData = childSnapshot.val();
            document.getElementById('messagesList').innerHTML += `<tr id="${childKey}">
                <td>${childData.name}</td>
                <td>${childData.emailid}</td>
                <td>${childData.msgContent}</td>
                <td>${childData.date}</td>
                <td>
                    <button onclick="deleteMessage('${childKey}')">Delete</button>
                    <button onclick="editMessage('${childKey}', '${childData.name}', '${childData.emailid}', '${childData.msgContent}')">Edit</button>
                </td>
            </tr>`;
        });
    });
}

Step 4: Editing and Deleting Messages

Editing and deleting functionality is crucial for managing the entries. The editMessage function populates the form with existing data, while deleteMessage removes the entry from Firebase.

// Delete a message from Firebase
function deleteMessage(id) {
    contactFormDB.child(id).remove();
}

// Populate form with message data for editing
function editMessage(id, name, email, message) {
    document.getElementById('name').value = name;
    document.getElementById('emailid').value = email;
    document.getElementById('msgContent').value = message;
// Set current editing ID to enable 
    currentEditingId = id; 
}


// Update an existing message in Firebase
function updateMessage(id) {
    var updatedName = document.getElementById('name').value;
    var updatedEmail = document.getElementById('emailid').value;
    var updatedMessage = document.getElementById('msgContent').value;
 var updatedDate= document.getElementById('date').value;
    contactFormDB.child(id).update({
        name: updatedName,
        emailid: updatedEmail,
        msgContent: updatedMessage
 date: updatedDate
    });
// Clear form after update
    clearForm(); 
}

// Clear form fields and reset editing state
function clearForm() {
    document.getElementById("name").value = '';
    document.getElementById("emailid").value = '';
    document.getElementById("msgContent").value = '';
    document.getElementById("date").value = '';
// Reset to "add new" mode
    currentEditingId = null; 
}

Step 5: Handling Form Submissions

To handle form submissions, we distinguish between adding a new message and updating an existing one based on whether an ID is set in currentEditingId.

// Handle form submission for new or updated messages


document.getElementById("contactForm").addEventListener("submit", submitForm);
function submitForm(e) {
    e.preventDefault(); // Prevent default form submission

    var name = document.getElementById("name").value;
    var emailid = document.getElementById("emailid").value;
    var msgContent = document.getElementById("msgContent").value;
    var date = document.getElementById("date").value;

    // Check if we're updating an existing message or adding a new one
    if (currentEditingId) {
        updateMessage(currentEditingId, name, emailid, msgContent, date);
    } else {
        saveMessages(name, emailid, msgContent, date);
    }
}

// Save a new message to Firebase
function saveMessages(name, emailid, msgContent, date) {
    var newContactForm = contactFormDB.push();
    newContactForm.set({
        name: name,
        emailid: emailid,
        msgContent: msgContent,
        date: date
    });
}

Fetch messages initially

fetchMessages();

Conclusion

This tutorial provides a comprehensive guide on creating a dynamic web-based contact form using Firebase Realtime Database. With real-time data syncing, editing, and deletion capabilities, managing contact form submissions becomes streamlined and efficient. Remember to replace the placeholder values in the Firebase configuration with your actual Firebase project settings.

L'importance du balisage HTML pour le référencement sur Google et le SEO

Chabba Saad — Tue, 23 Apr 2024 13:16:12 +0000

Dans l'univers complexe du référencement sur Google, chaque détail compte. L'un des aspects cruciaux mais souvent négligés est le balisage HTML. En effet, la manière dont vous structurez votre contenu à l'aide de balises HTML peut avoir un impact significatif sur votre classement dans les résultats de recherche. Dans cet article, nous explorerons l'importance du balisage HTML et fournirons des exemples explicatifs pour illustrer son impact sur le référencement.

Balises de titre (Title Tags)

Les balises de titre title sont essentielles pour indiquer à Google de quoi traite votre page. Elles doivent être descriptives, pertinentes et contenir des mots-clés pertinents pour votre contenu. Par exemple :

<title> Guide complet du référencement SEO - Conseils et bonnes pratiques</title>

Balises de description (Meta Description Tags)

Bien que les balises de description ne soient pas directement liées au classement, elles influencent le taux de clics. Elles doivent résumer le contenu de la page de manière concise et attrayante. Voici un exemple :

<meta name="description" content="Découvrez les meilleures pratiques pour optimiser votre site web et améliorer votre référencement sur Google.">

Balises de structure (Heading Tags)

Les balises de structure, telles que h1, h2, etc., aident à organiser hiérarchiquement votre contenu. Elles fournissent des indices précieux à Google sur la structure et le sujet de votre page. Voici comment les utiliser :

Comment améliorer votre référencement sur Google

1. Choisissez des mots-clés pertinents

Votre contenu doit être centré autour de mots-clés pertinents pour votre niche.

2. Optez pour une structure claire

Utilisez des balises de structure pour organiser votre contenu en sections logiques.

Balises d'URL canoniques (Canonical URL Tags)

Les balises d'URL canoniques aident à résoudre les problèmes de contenu en double en indiquant à Google quelle version de la page est la principale. Cela garantit que votre contenu est correctement indexé. Exemple :

<link rel="canonical" href="https://www.mon-site.com/article-seo">

Balises Alt pour les images

Les balises alt img alt="..." fournissent une description textuelle des images pour les utilisateurs ayant un handicap visuel et aident les moteurs de recherche à comprendre le contenu de l'image. Voici comment les utiliser :

<img src="illustration.jpg" alt="Illustration d'une stratégie SEO réussie">

L’optimisation des images et médias
Le poids et la dimension de vos images doivent être optimisés pour limiter le temps de chargement de vos pages. Les moteurs de recherche prennent en compte la vitesse de votre site internet web, les images trop grandes ou trop lourdes mettront plus de temps à charger ce qui aura des répercussions sur le temps de chargement global du site.

On considère qu’une image à plus de 60 Ko pourra être allégé. Pour compresser vos images, vous pouvez utiliser Photoshop ou ILoveIMG.

Les règles essentielles du SEO pour bien positionner son site web

Le référencement naturel (SEO) est un pilier incontournable pour améliorer la visibilité de votre site web sur les moteurs de recherche tels que Google. Pour bien positionner votre site et attirer un trafic qualifié, il est crucial de suivre ces règles essentielles du SEO :

1. Faire un audit SEO

Avant de commencer toute optimisation, effectuez un audit SEO complet de votre site. Cela vous permettra d'identifier les aspects à améliorer, de résoudre les problèmes techniques, et d'évaluer votre visibilité en ligne. L'accompagnement par un expert SEO peut grandement faciliter cette étape.

2. Déterminer sa cible

Identifiez précisément votre public cible pour mieux répondre à ses besoins. Analysez les comportements en ligne de votre audience et utilisez des outils comme Google Analytics pour comprendre leurs intentions de recherche. Créez ensuite un contenu adapté à leurs attentes pour les attirer sur votre site.

**3. Rechercher et prioriser les mots-clés stratégiques

Effectuez une recherche approfondie des mots-clés pertinents pour votre secteur d'activité. Utilisez des outils comme Semrush, Ahrefs ou Yooda Insight pour identifier les mots-clés concurrentiels et organiser vos listes par clusters thématiques. Suivez également le positionnement de votre site sur ces mots-clés pour évaluer vos performances.

4. Définir ses objectifs SEO

Fixez des objectifs SEO clairs et mesurables pour évaluer l'efficacité de votre stratégie. Ces objectifs peuvent inclure l'augmentation du trafic organique, des positions dans les résultats de recherche, ou encore la génération de leads. Assurez-vous que vos objectifs sont SMART (Spécifiques, Mesurables, Acceptables, Réalistes et Temporels).

Exemple d'objectif SEO : "Augmenter le trafic organique de mon site de 50K à 100K visiteurs mensuels d'ici 12 mois."

5. Établir sa stratégie SEO

Enfin, élaborez une stratégie SEO complète en répondant à ces questions cruciales :

Netlinking : Déterminez combien de domaines référents vous souhaitez obtenir et quel type de liens est le plus bénéfique pour votre site.
SEO de Contenu : Identifiez les contenus à optimiser, ceux à créer, et les améliorations sémantiques à apporter. Analysez les signaux utilisateurs pour améliorer l'engagement.
SEO Technique : Repérez et corrigez les éventuelles failles techniques de votre site pour garantir une meilleure indexation par les moteurs de recherche.
En parallèle, n'oubliez pas l'importance de l'ergonomie et de l'expérience utilisateur (UX) dans votre stratégie SEO. Un site web bien conçu, intuitif et facile à naviguer améliore non seulement la satisfaction des utilisateurs, mais aussi son positionnement dans les résultats de recherche.

En appliquant ces règles essentielles du SEO et en restant attentif aux évolutions de l'algorithme de Google, vous pouvez mettre en place une stratégie efficace pour positionner votre site web en tête des résultats de recherche et augmenter son trafic organique de manière durable.

Conclusion

En conclusion, le balisage HTML est un élément fondamental du référencement sur Google. En respectant les bonnes pratiques de balisage, vous fournissez à Google les informations nécessaires pour comprendre et classer votre contenu de manière efficace. En intégrant ces éléments dans votre stratégie de référencement, vous augmentez vos chances d'améliorer votre positionnement dans les résultats de recherche.

Tools & Extensions for Vue JS for VS CODE IDE

Chabba Saad — Mon, 22 Apr 2024 10:32:59 +0000

Vue.js 3, with its enhanced performance and features, has become a top choice for building modern web applications. To streamline your development workflow and boost productivity, leveraging the right tools and extensions is key. In this article, we'll explore some indispensable tools and extensions tailored for Vue.js 3 development.

1. Vue 3 Snippets

Speed up your Vue.js 3 development with Vue 3 Snippets. This extension provides a collection of snippets for Vue 3 syntax, making it effortless to write Vue components, directives, and more. With its comprehensive library of shortcuts, you can save time and focus on crafting your application logic.

2. npm Intellisense

Managing dependencies is a breeze with npm Intellisense. This extension offers intelligent autocompletion for npm modules in import statements, package.json, and require() calls. Say goodbye to typos and manual searching – npm Intellisense ensures smooth integration of third-party libraries into your Vue.js 3 projects.

3. Path Intellisense

Easily navigate through your project's file structure with Path Intellisense. This extension provides autocomplete suggestions for filenames and paths, significantly reducing the likelihood of errors when referencing files. Whether importing components, assets, or modules, Path Intellisense enhances code clarity and minimizes development friction.

4. Auto Close Tag

Keep your HTML markup tidy and efficient with Auto Close Tag. This handy extension automatically inserts closing tags as you type, eliminating the need for manual tag completion. When working with Vue.js 3 templates, Auto Close Tag ensures consistent formatting and helps maintain clean, well-structured code.

5. Auto Rename Tag

Maintain synchronization between opening and closing tags effortlessly with Auto Rename Tag. This extension updates matching tags simultaneously when you rename one, saving you the hassle of manually adjusting tag names throughout your Vue.js 3 templates. Enjoy seamless tag management and improved code consistency with Auto Rename Tag.

6. Bracket Pair Colorizer

Enhance code readability and navigation with Bracket Pair Colorizer. This extension colorizes matching brackets, parentheses, and braces in your code, making it easier to distinguish nested structures at a glance. With Bracket Pair Colorizer, understanding the hierarchy of Vue.js 3 components and expressions is intuitive and efficient.

7. Highlight Matching Tag

Stay organized and focused while editing Vue.js 3 templates with Highlight Matching Tag. This extension highlights the opening and closing tags of HTML elements, providing visual cues for better context awareness. By quickly identifying matching tags, you can streamline your development workflow and minimize errors when working with complex markup.

8. Live Server

Experience real-time feedback and rapid prototyping with Live Server. This extension launches a local development server that automatically refreshes your Vue.js 3 application upon saving changes. With Live Server, you can preview updates instantly in the browser, accelerating the iteration process and facilitating seamless collaboration with team members.

In conclusion, these tools and extensions are indispensable companions for Vue.js 3 developers, empowering them to write cleaner code, navigate projects with ease, and boost productivity throughout the development lifecycle. By incorporating these resources into your workflow, you can maximize the potential of Vue.js 3 and deliver exceptional web experiences with confidence.

Deploy Laravel in Linux Server (Contabo centos 7) with Script shell files and Github With SSL Encrypt

Chabba Saad — Thu, 13 Jul 2023 15:42:02 +0000

Install Node js In Server:

curl -sL https://rpm.nodesource.com/setup_16.x | sudo bash -

cd /etc/yum.repos.d/

yum install -y nodejs

node --version

npm --version

Install GitHub In Server:

yum update

yum install git

you go to this link for generating ssh key :

https://github.com/settings/keys

now for accessing our private project in our server online we should generate an ssh key :

now we loged-in in our server :

ssh-keygen -t rsa -b 4096 -C "email@example.com"
in my case i replace it with my email

now we get our ssh key generated in our server for generating ssh key in github :

now our ssh key is generated and ready to use :

cd /var/www

git clone git@github.com{OwnerOfRepository}/{nameofrepository}.git

Open a terminal on your CentOS 7 server.

Navigate to the directory where you want to create the config file. For example, you can use the following command to navigate to the /etc directory:

cd /etc

Create a new config file using a text editor such as Nano or Vi. For example, to create a file named custom-config.sh using Nano, run the following command:

vi custom-config.sh

In the text editor, add the commands you want to run automatically. In this case, you can add the following commands:

vi mysql.sh

sudo yum -y  install mariadb-server

sudo systemctl start mariadb
sudo systemctl enable mariadb

sudo mysql_secure_installation <<EOF

y
yourpassword
yourpassword
y
y
y
y
EOF

echo "now loggin to mysql"

mysql -u root -p"yourpassword" <<EOF
CREATE DATABASE stayFit;
EOF

vi custom-config.sh

sudo yum update

sudo yum -y install yum-utils

sudo yum -y install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
sudo yum -y install http://rpms.remirepo.net/enterprise/remi-release-7.rpm
sudo yum-config-manager --enable remi-php82
sudo yum -y install php-xml
sudo yum update
sudo yum -y install php
sudo yum -y install zip unzip

sudo yum install -y epel-release
sudo yum install -y http://rpms.remirepo.net/enterprise/remi-release-7.rpm
sudo yum install php-pdo php-mysql
sudo yum-config-manager --enable remi-php80
sudo yum update
sudo yum install -y php

sudo  yum -y install wget
sudo wget https://getcomposer.org/installer -O composer-setup.php
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer


cd /var/www/StayFit-backend

#Set Permissions
#Set the appropriate ownership and permissions for the Laravel #project directory:

sudo chown -R apache:apache /var/www/StayFit-backend
sudo chmod -R 755 /var/www/StayFit-backend

#Configure Environment Variables
#Copy the .env.example file to create a new .env file:

cp .env.example .env

Make the script executable by running the following command:

sudo chmod +x custom-config.sh
sudo chmod +x mysql.sh

Now, you can run the script by executing the following command:

sudo ./mysql.sh
sudo ./custom-config.sh

cd /var/www/StayFit-backend

cp .env.example .env

you should change your database and root password in .env

composer update

npm update

php artisan migrate

php artisan db:seed

Set Up Symbolic Link (if necessary)

php artisan storage:link

composer dump-autoload

and for testing your project run :

php artisan serve --host=0.0.0.0 --port=8100

Now let install Apache and Let's Encrypt SSL

update your DNS Config in your hosting Provider

sudo yum install httpd

after installing httpd you will find a folder in /etc/httpd/conf
contain all your Config Files

now for having main-le-ssl.conf let run the command below :

yum install certbot python2-certbot-apache mod_ssl

certbot --apache -d stayfit.ma -d www.stayfit.ma

main.conf

<VirtualHost *:80>
    ServerName stayfit.ma
    ServerAlias www.stayfit.ma
    RewriteEngine on
    RewriteRule (.*) https://%{SERVER_NAME}$1 [R=301,L]
</VirtualHost>

<VirtualHost *:443>
    ServerName stayfit.ma
    ServerAlias www.stayfit.ma
    ServerAdmin support@stayfit.ma
    DocumentRoot /var/www/html/public

    SSLEngine on
    SSLCertificateFile /etc/letsencrypt/live/stayfit.ma/cert.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/stayfit.ma/privkey.pem
    SSLCertificateChainFile /etc/letsencrypt/live/stayfit.ma/chain.pem
    <Directory "/var/www/html/public">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

httpd.conf

#
# This is the main Apache HTTP server configuration file.  It contains the
# configuration directives that give the server its instructions.
# See <URL:http://httpd.apache.org/docs/2.4/> for detailed information.
# In particular, see 
# <URL:http://httpd.apache.org/docs/2.4/mod/directives.html>
# for a discussion of each configuration directive.
#
# Do NOT simply read the instructions in here without understanding
# what they do.  They're here only as hints or reminders.  If you are unsure
# consult the online docs. You have been warned.  
#
# Configuration and logfile names: If the filenames you specify for many
# of the server's control files begin with "/" (or "drive:/" for Win32), the
# server will use that explicit path.  If the filenames do *not* begin
# with "/", the value of ServerRoot is prepended -- so 'log/access_log'
# with ServerRoot set to '/www' will be interpreted by the
# server as '/www/log/access_log', where as '/log/access_log' will be
# interpreted as '/log/access_log'.

#
# ServerRoot: The top of the directory tree under which the server's
# configuration, error, and log files are kept.
#
# Do not add a slash at the end of the directory path.  If you point
# ServerRoot at a non-local disk, be sure to specify a local disk on the
# Mutex directive, if file-based mutexes are used.  If you wish to share the
# same ServerRoot for multiple httpd daemons, you will need to change at
# least PidFile.
#
ServerRoot "/etc/httpd"

#
# Listen: Allows you to bind Apache to specific IP addresses and/or
# ports, instead of the default. See also the <VirtualHost>
# directive.
#
# Change this to Listen on specific IP addresses as shown below to 
# prevent Apache from glomming onto all bound IP addresses.
#
#Listen 12.34.56.78:80
Listen 80

#
# Dynamic Shared Object (DSO) Support
#
# To be able to use the functionality of a module which was built as a DSO you
# have to place corresponding `LoadModule' lines at this location so the
# directives contained in it are actually available _before_ they are used.
# Statically compiled modules (those listed by `httpd -l') do not need
# to be loaded here.
#
# Example:
# LoadModule foo_module modules/mod_foo.so
#
Include conf.modules.d/*.conf

#
# If you wish httpd to run as a different user or group, you must run
# httpd as root initially and it will switch.  
#
# User/Group: The name (or #number) of the user/group to run httpd as.
# It is usually good practice to create a dedicated user and group for
# running httpd, as with most system services.
#
User apache
Group apache

# 'Main' server configuration
#
# The directives in this section set up the values used by the 'main'
# server, which responds to any requests that aren't handled by a
# <VirtualHost> definition.  These values also provide defaults for
# any <VirtualHost> containers you may define later in the file.
#
# All of these directives may appear inside <VirtualHost> containers,
# in which case these default settings will be overridden for the
# virtual host being defined.
#

#
# ServerAdmin: Your address, where problems with the server should be
# e-mailed.  This address appears on some server-generated pages, such
# as error documents.  e.g. admin@your-domain.com
#
ServerAdmin root@localhost

#
# ServerName gives the name and port that the server uses to identify itself.
# This can often be determined automatically, but we recommend you specify
# it explicitly to prevent problems during startup.
#
# If your host doesn't have a registered DNS name, enter its IP address here.
#
#ServerName www.example.com:80

#
# Deny access to the entirety of your server's filesystem. You must
# explicitly permit access to web content directories in other 
# <Directory> blocks below.
#
<Directory />
    AllowOverride none
    Require all denied
</Directory>

#
# Note that from this point forward you must specifically allow
# particular features to be enabled - so if something's not working as
# you might expect, make sure that you have specifically enabled it
# below.
#

#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "/var/www/html/public"

#
# Relax access to content within /var/www.
#
<Directory "/var/www">
    AllowOverride None
    # Allow open access:
    Require all granted
</Directory>

# Further relax access to the default document root:
<Directory "/var/www/html/public">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options Indexes FollowSymLinks

    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   Options FileInfo AuthConfig Limit
    #
    AllowOverride None

    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>

#
# DirectoryIndex: sets the file that Apache will serve if a directory
# is requested.
#
<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

#
# The following lines prevent .htaccess and .htpasswd files from being 
# viewed by Web clients. 
#
<Files ".ht*">
    Require all denied
</Files>

#
# ErrorLog: The location of the error log file.
# If you do not specify an ErrorLog directive within a <VirtualHost>
# container, error messages relating to that virtual host will be
# logged here.  If you *do* define an error logfile for a <VirtualHost>
# container, that host's errors will be logged there and not here.
#
ErrorLog "logs/error_log"

#
# LogLevel: Control the number of messages logged to the error_log.
# Possible values include: debug, info, notice, warn, error, crit,
# alert, emerg.
#
LogLevel warn

<IfModule log_config_module>
    #
    # The following directives define some format nicknames for use with
    # a CustomLog directive (see below).
    #
    LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
    LogFormat "%h %l %u %t \"%r\" %>s %b" common

    <IfModule logio_module>
      # You need to enable mod_logio.c to use %I and %O
      LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio
    </IfModule>

    #
    # The location and format of the access logfile (Common Logfile Format).
    # If you do not define any access logfiles within a <VirtualHost>
    # container, they will be logged here.  Contrariwise, if you *do*
    # define per-<VirtualHost> access logfiles, transactions will be
    # logged therein and *not* in this file.
    #
    #CustomLog "logs/access_log" common

    #
    # If you prefer a logfile with access, agent, and referer information
    # (Combined Logfile Format) you can use the following directive.
    #
    CustomLog "logs/access_log" combined
</IfModule>

<IfModule alias_module>
    #
    # Redirect: Allows you to tell clients about documents that used to 
    # exist in your server's namespace, but do not anymore. The client 
    # will make a new request for the document at its new location.
    # Example:
    # Redirect permanent /foo http://www.example.com/bar

    #
    # Alias: Maps web paths into filesystem paths and is used to
    # access content that does not live under the DocumentRoot.
    # Example:
    # Alias /webpath /full/filesystem/path
    #
    # If you include a trailing / on /webpath then the server will
    # require it to be present in the URL.  You will also likely
    # need to provide a <Directory> section to allow access to
    # the filesystem path.

    #
    # ScriptAlias: This controls which directories contain server scripts. 
    # ScriptAliases are essentially the same as Aliases, except that
    # documents in the target directory are treated as applications and
    # run by the server when requested rather than as documents sent to the
    # client.  The same rules about trailing "/" apply to ScriptAlias
    # directives as to Alias.
    #
    ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"

</IfModule>

#
# "/var/www/cgi-bin" should be changed to whatever your ScriptAliased
# CGI directory exists, if you have that configured.
#
<Directory "/var/www/cgi-bin">
    AllowOverride None
    Options None
    Require all granted
</Directory>

<IfModule mime_module>
    #
    # TypesConfig points to the file containing the list of mappings from
    # filename extension to MIME-type.
    #
    TypesConfig /etc/mime.types

    #
    # AddType allows you to add to or override the MIME configuration
    # file specified in TypesConfig for specific file types.
    #
    #AddType application/x-gzip .tgz
    #
    # AddEncoding allows you to have certain browsers uncompress
    # information on the fly. Note: Not all browsers support this.
    #
    #AddEncoding x-compress .Z
    #AddEncoding x-gzip .gz .tgz
    #
    # If the AddEncoding directives above are commented-out, then you
    # probably should define those extensions to indicate media types:
    #
    AddType application/x-compress .Z
    AddType application/x-gzip .gz .tgz

    #
    # AddHandler allows you to map certain file extensions to "handlers":
    # actions unrelated to filetype. These can be either built into the server
    # or added with the Action directive (see below)
    #
    # To use CGI scripts outside of ScriptAliased directories:
    # (You will also need to add "ExecCGI" to the "Options" directive.)
    #
    #AddHandler cgi-script .cgi

    # For type maps (negotiated resources):
    #AddHandler type-map var

    #
    # Filters allow you to process content before it is sent to the client.
    #
    # To parse .shtml files for server-side includes (SSI):
    # (You will also need to add "Includes" to the "Options" directive.)
    #
    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml
</IfModule>

#
# Specify a default charset for all content served; this enables
# interpretation of all content as UTF-8 by default.  To use the 
# default browser choice (ISO-8859-1), or to allow the META tags
# in HTML content to override this choice, comment out this
# directive:
#
AddDefaultCharset UTF-8

<IfModule mime_magic_module>
    #
    # The mod_mime_magic module allows the server to use various hints from the
    # contents of the file itself to determine its type.  The MIMEMagicFile
    # directive tells the module where the hint definitions are located.
    #
    MIMEMagicFile conf/magic
</IfModule>

#
# Customizable error responses come in three flavors:
# 1) plain text 2) local redirects 3) external redirects
#
# Some examples:
#ErrorDocument 500 "The server made a boo boo."
#ErrorDocument 404 /missing.html
#ErrorDocument 404 "/cgi-bin/missing_handler.pl"
#ErrorDocument 402 http://www.example.com/subscription_info.html
#

#
# EnableMMAP and EnableSendfile: On systems that support it, 
# memory-mapping or the sendfile syscall may be used to deliver
# files.  This usually improves server performance, but must
# be turned off when serving from networked-mounted 
# filesystems or if support for these functions is otherwise
# broken on your system.
# Defaults if commented: EnableMMAP On, EnableSendfile Off
#
#EnableMMAP off
EnableSendfile on

# Supplemental configuration
#
# Load config files in the "/etc/httpd/conf.d" directory, if any.
IncludeOptional conf.d/*.conf
IncludeOptional /etc/httpd/conf/main.conf

npm run build

apachectl configtest

this apachectl configtest should return syntax ok if not that mean somthing wrong in your config

systemctl restart httpd

Use the nohup command followed by the php artisan serve command to start the Laravel development server in the background:

nohup php artisan serve --host=0.0.0.0 --port=8100 >/dev/null 2>&1 &