Create your first Laravel app : views on Laravel

Photo by Salman Hossain Saif on Unsplash
Default view from Laravel
Laravel views directory
<title>Laravel</title> // From this
<title>My App</title> // to this
Route::get('/', function () {
return view('welcome'); // From this
return view('home'); // to this, 'home' is your blade views name
});
public directory
body {
margin: 0;
}
.nav {
overflow: hidden;
background-color: #333;
}
.nav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: rgb(1, 217, 255);
color: black;
}
.nav a.active {
background-color: #0099ff;
color: white;
}
<!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">
<!-- Call the style css from public folder -->
<link rel="stylesheet" href="{{ asset(‘css/style.css’) }}">
<title>Home</title>
</head>
<body>
<body>
<div class="nav">
<a href="#Home" class="active">Home</a>
<a href="#Blog">Blog</a>
<a href="#About">About</a>
</div>
<h2>This is Home</h2>
</body>
</html>
Result
Route::get('/', function () {
return view('home');
});
// Insert code below
Route::get('/blog', function () {
return view('blog');
});
Route::get('/about', function () {
return view('about');
});
Blog and About views
Route::get('/blog', function....
<div class="nav">
<a href="{{ url('/') }}" class="active">Home</a>
<a href="{{ url('/blog') }}">Blog</a>
<a href="{{ url('/about') }}">About</a>
</div>
// Remove
<div class="nav">
<a href="{{ url('/') }}" class="active">Home</a>
<a href="{{ url('/blog') }}">Blog</a>
<a href="{{ url('/about') }}">About</a>
</div>
// Add
@include('navbar')
<!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">
<!-- Call the style css from public folder -->
<link rel="stylesheet" href="{{ asset(‘css/style.css’) }}">
<title>Home</title>
</head>
<body>
@include('navbar')
<h2>This is Home</h2>
</body>
</html>
<title>@yield('title')</title>
<h2>@yield('content')</h2>
// title and content are name of the section, you can named it whatever you want
@extends('layout')
@section('title', 'Home')
@section('content')
<h2>This is Home</h2>
@endsection
@extends('layout')
@section('title', 'Post')
@section('content')
<h2>This is Post</h2>
@endsection
<div class="nav">
<a href="{{ url('/') }}" class="active">Home</a>
<a href="{{ url('/blog') }}">Blog</a>
<a href="{{ url('/about') }}">About</a>
<a href="{{ url('/post') }}">Post</a>
</div>
Route::get('/post', function () {
return view('post');
});

--

--

--

Web Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The dev.to project with GatsbyJS-13

Basics of state in react

ReScript an awsome Option dismissed!

All about array methods-Java Script

Hi all I am fresher in reactjs,i am doing medical project how to display .svs

JavaScript Loops: How they can save time!

Functional JS #7: Point-free style

Teach kids to code by making games

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Awang Trisakti

Awang Trisakti

Web Developer

More from Medium

Laravel Mailtrap Setup

What’s new in Laravel 8

Getting started with PHP Laravel and basic React.js

Password and Confirm Password Validation in Laravel