This content originally appeared on DEV Community and was authored by Ghulam Mujtaba
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.
This content originally appeared on DEV Community and was authored by Ghulam Mujtaba