Laravel 12 E-Commerce Project Tutorial

Creating the Contact Us Page and Admin Message Listing

Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. This video focuses on setting up the Contact Us page for users and creating the administrative section to view the submitted messages.

Create Model and Migration for `Contact`

Run the following command to create the `Contact` model and its corresponding migration:
```
php artisan make:model Contact –m
```

Define the `contacts` Table Schema

Open the `create_contacts_table` migration and add the following columns for storing user inquiries:

Schema::create("contacts", function (Blueprint $table) {
    $table->id();
    $table->string("name");
    $table->string("email");
    $table->string("phone");
    $table->text("comment");
    $table->timestamps();
});

Run the Migration

Execute the migration to create the `contacts` table:
```
php artisan migrate
```
Create the Frontend `contact` Function

In `HomeController.php`, create the function to simply return the contact view:
```
public function contact()
{
    return view("contact");
}
```
Define the Frontend Route

Define the route for the user-facing contact page in `web.php`:
```
Route::get("/contact-us",[HomeController::class,"contact"])->name("home.contact");
```

Create the Frontend View (`contact.blade.php`)

Create the view file `contact.blade.php` in `resources/views`. This view will contain the contact form (template details are omitted but assume `` is used to extend the main layout).

Create the Admin `contacts` Function

In `AdminController.php`, create a function to fetch and display all customer messages for the admin panel:

public function contacts()
{
    // Fetch all contacts, ordered by most recent first, paginated
    $contacts = Contact::OrderBy("created_at","DESC")->paginate(12);
    return view("admin.contacts",compact("contacts"));
}

Define the Admin Route

Define the route for the admin'scontact messages list:

Route::get("/admin/contacts",[AdminController::class,"contacts"])->name("admin.contacts");

Create the Admin Contact View (`contacts.blade.php`)

Create `contacts.blade.php` in `resources/views/admin`. This view lists the messages using the `$contacts` collection.

<div class="table-responsive m-b-30">
    <table class="table table-striped table-bordered">
        <thead>
            <!-- Table Headers for Name, Email, Phone, Comment, Date, Action -->
        </thead>
        <tbody>
            @foreach ($contacts as $contact)
            <tr>
                <td>{{ $contact->id }}</td>
                <td>{{ $contact->name }}</td>
                <td>{{ $contact->email }}</td>
                <td>{{ $contact->phone }}</td>
                <td>{{ $contact->comment }}</td>
                <td>{{ $contact->created_at }}</td>
                <td>
                    <div class="list-icon-function">
                        <form action="##" method="POST">
                            <!-- Delete button/icon placeholder -->
                            <div class="item text-danger delete">
                                <i class="fa fa-trash"></i>
                            </div>
                        </form>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    <!-- Pagination Link -->
    {{$contacts->links("pagination::bootstrap-5")}}
</div>

Update Admin Layout

Add the link to the new Contact Messages page in the admin navigation menu using `{{ route("admin.contacts") }}`.

Verification and Next Steps 📧

1. Navigate to the Contact Us page in the frontend to see the form.
2. Log into the admin panel and click the new Contact Messages link. This page will display all messages submitted by users (once the submission logic is implemented, likely in the next part).