Last updated : Jul 04, 2021
Let's get started:
1. Firstly, open terminal/command prompt in system and type laravel new simple-website
and
type cd simple-website
.
2. Then open your newly setup app in code editor of your choice.
3. Then we will setup our fresh Bootstrap scaffolding. For this open terminal and
in the simple-website, type composer require laravel/ui
then php artisan ui bootstrap
and then to complete scaffolding type npm i
then npm run prod
.
4. Open public/css directory and create a new file and name it extra_styles.css and type
a,h3,h1,h2,h4,h5{
font-family: Raleway;
}
5. Open resources/views directory and create a new directory and name it common_files and
in that directory create a new file and name it main.blade.php and then type:
<!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>My first simple website</title> <link rel="stylesheet" href="/css/app.css"> <link rel="stylesheet" href="/css/extra_styles.css"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="/">Website Logo here...</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item active"> <a class="nav-link" href="/products">Products</a> </li> <li class="nav-item active"> <a class="nav-link" href="/projects">Projects</a> </li> <li class="nav-item active"> <a class="nav-link" href="/blog">Blog</a> </li> <li class="nav-item active"> <a class="nav-link" href="/contact">Contact</a> </li> </ul> </div> </nav> <div class="container"> @yield('sections') </div> <div style="text-align:center;margin:0;width:100%; height:auto;background-color:rgb(220,220,220);"> <h2>This is footer</h2> <ul> <a href="#"><li style="display: inline-block;margin:10px;">Home</li></a> <a href="#"><li style="display: inline-block;margin:10px;">Products</li></a> <a href="#"><li style="display: inline-block;margin:10px;">Projects</li></a> <a href="#"><li style="display: inline-block;margin:10px;">Blog</li></a> <a href="#"><li style="display: inline-block;margin:10px;">Contact</li></a> </ul> <h5>© Your copyright</h5> </div> <script src="/js/app.js"></script> </body> </html>
6. Go to resources/views directory and create 5 new files and name them
i) blog.blade.php
ii) products.blade.php
iii) projects.blade.php
iv) contact.blade.php
v) home.blade.php
7. Open blog.blade.php and type
@extends('common_files.main') @section('sections') <div style="margin-bottom:350px; margin-left:350px; margin-right:350px; margin-top:350px; text-align:center"> <h3>this is blog section.</h3> </div> @endsection
8. Open products.blade.php and type
@extends('common_files.main') @section('sections') <div style="margin-bottom:350px; margin-left:350px; margin-right:350px; margin-top:350px; text-align:center"> <h3>this is products section.</h3> </div> @endsection
9. Open projects.blade.php and type
@extends('common_files.main') @section('sections') <div style="margin-bottom:350px; margin-left:350px; margin-right:350px; margin-top:350px; text-align:center"> <h3>this is projects section.</h3> </div> @endsection
10. Open contact.blade.php and type
@extends('common_files.main') @section('sections') <div style="margin-bottom:350px; margin-left:350px; margin-right:350px; margin-top:350px; text-align:center"> <h3>this is contact section.</h3> </div> @endsection
11. Open home.blade.php and type
@extends('common_files.main') @section('sections') <div style="margin-bottom:350px; margin-left:350px; margin-right:350px; margin-top:350px; text-align:center"> <h3>this is home section.</h3> </div> @endsection
12. Now open routes\web.php and type
<?php use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('home'); }); Route::get('/products', function () { return view('products'); }); Route::get('/projects', function () { return view('projects'); }); Route::get('/blog', function () { return view('blog'); }); Route::get('/contact', function () { return view('contact'); });
13. And it's done. Now open terminal and then type php artisan serve
14. Now open any browser and type http://localhost:port_no/
Done
How video streaming works on t...
Read moreSetup react and express on sam...
Read moreHow neurons in brain function
Read moreHow to create custom router in...
Read moreRun C++ as CGI script in web b...
Read moreReal time chat application usi...
Read moreHow to setup lemp stack in ubu...
Read moreHow to secure phpmyadmin in Ub...
Read moreHow to create real time notifi...
Read moreHow to create simple api in no...
Read moreTask scheduling with cron job ...
Read moreHow to use modules in Javascri...
Read moreCreate a multi language(lingua...
Read moreCreate food ordering app - Foo...
Read moreLinear Regression in machine l...
Read moreCreate simple web application ...
Read moreWhy algorithms can drive the i...
Read moreWhy Javascript frameworks are ...
Read moreCreate authenticated API in La...
Read moreSetup Pusher app
Read moreLaravel Installation and setti...
Read moreRealtime chat application in L...
Read moreWorking of neurons (the easy w...
Read moreProgressive web app
Read moreSign in for comment. Sign in