Now you can provide your feedback to our articles!

Create simple and static website in Laravel

Last updated : Jul 04, 2021

Create simple and static website in Laravel



In this article you will get to know how to create a basic, simple and static website in Laravel. Read this article and code you very first app in Laravel and get started with Laravel programming.

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 more

Setup react and express on sam...

Read more

How neurons in brain function

Read more

How to create custom router in...

Read more

Run C++ as CGI script in web b...

Read more

Real time chat application usi...

Read more

How to setup lemp stack in ubu...

Read more

How to secure phpmyadmin in Ub...

Read more

How to create real time notifi...

Read more

How to create simple api in no...

Read more

Task scheduling with cron job ...

Read more

How to use modules in Javascri...

Read more

Create a multi language(lingua...

Read more

Create food ordering app - Foo...

Read more

Linear Regression in machine l...

Read more

Create simple web application ...

Read more

Why algorithms can drive the i...

Read more

Why Javascript frameworks are ...

Read more

Create authenticated API in La...

Read more

Setup Pusher app

Read more

Laravel Installation and setti...

Read more

Realtime chat application in L...

Read more

Working of neurons (the easy w...

Read more

Progressive web app

Read more

Sign in for comment. Sign in