Starting the Laravel Project
Let's start our Laravel project by opening the terminal and running the command code . to open the project in VS Code. Make sure the correct directory is selected where the project code is present.
Adding Routes and Views
First, let's add a route and view to our project. Open the web.php file in the routes directory and add the following code:
Route::get('/about', function () {
return "Welcome to About Page";
});
Testing the Route
To test this route, refresh the project in your browser and update the search bar to (http://shops.test/about) and hit Enter. We should see the string "Welcome to About Page" displayed correctly.
Creating a 3-Page Layout
Next, let's create a 3-page layout using layout files. Create three new files:
- welcome.blade.php
- about.blade.php
- contact.blade.php
Add the same code to all three files:
<x-layout>
Welcome to Home Page
</x-layout>
Creating the Layout File
Let's create a new directory resources/components and add a new file layout.blade.php. Add the following basic HTML code and navigation bar:
<!DOCTYPE html>
<html>
<head>
<title>Web Development</title>
</head>
<body>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
<?php echo $slot ?>
</body>
</html>
Note: The <?php echo $slot ?> line is used to inject page-specific content into the layout.
Adding Routes for Pages
Finally, let's add routes for our three pages. Open the web.php file and add the following code:
Route::get('/', function () {
return view('welcome');
});
Route::get('/about', function () {
return view('about');
});
Route::get('/contact', function () {
return view('contact');
});
With these changes, we should now have a basic Laravel project with a navigation bar and three pages: Home, About, and Contact.
I hope that you have understood it clearly.
Top comments (0)