Netflix clone app using Laravel

Netflix clone app in Laravel with Bootstrap. We can make any kind of Project in Laravel.Netflix clone app using Laravel.

Netflix in Laravel

Netflix Clone in Laravel

Netflix Clone project is a web application which is developed in Laravel platform .

Below is our Database table design . ( Database name : You can change db name )

Now Start Laravel Part

I have made three controller in Laravel such as HomeController, MovieController, & TvShowController

HomeController.php ( This is our Main Page Landing Page ) 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class HomeController extends Controller
{
    public function index() {
    }

    public function Home()
    {
        $listMovie = DB::table('movies_list')->get();
        $tvshow = DB::table('tv_shows')->get();
        return view('home', ['listMovie' => $listMovie],['tvshow' => $tvshow]);
    }
    public function searchMovie(Request $request)
    {
        $search_movie = $request['value'];
        $listMovie = DB::table('movies_list')->where('movie_name',$search_movie)->first();
        echo json_encode($listMovie, true);
    }
}

MovieController.php ( This controller will have Movie List )

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class MovieController extends Controller
{
    public function index() {
    }

    public function listMovie()
    {
        $movielist = DB::table('movies_list')->get();
        return view('movie', ['movielist' => $movielist]);
    }
}

Now Our Last Controller is TvShowController

TvShowController.php ( This will have tv shows list )

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class TvShowController extends Controller
{
    public function index() 
    {
    }
    public function listTvShow()
    {
        $tvshowlist = DB::table('tv_shows')->get();
        return view('tvshow', ['tvshowlist' => $tvshowlist]);
    }
    public function searchTvShow(Request $request)
    {
        $search_tvshow = $request['value'];
        $listTvshow = DB::table('tv_shows')->where('tvshow_name',$search_tvshow)->first();
        echo json_encode($listTvshow, true);
    }
}

Now Our Controller part is done……..

I have not made any model for this project because, I am using QUERY BUILDER Feature of Laravel so I dont need any model .

View Part Starts

I have made six view Files such as header.blade.php, movie.blade.php, home.blade.php, tvshow.blade.php and search_movie.blade.php

All Views Files are in resources/views Folder

header.blade.php

<link href="{{ asset('style/style.css') }}" rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<body style="background-color:#232323">
<header>
    <nav class="navbar navbar-expand-lg"   id="navbarNav">
    <a id="logo" href="#home"><img src="https://github.com/carlosavilae/Netflix-Clone/blob/master/img/logo.PNG?raw=true" alt="Logo Image"/></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse ml-5">
      <a href={{url('/')}} class="mr-3">Home</a>
      <a href={{url('movie')}} class=" mr-3">Movies</a>
      <a href={{url('tv-show')}}  class="mr-3">TV Shows</a>
       <div class="ml-4 mt-2">
          <input name="searchName"  type="text" id="search" className="text-white"  placeholder="Search Movies"  style="background:black,borderRadius:22px"/>
          <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}"> 
          <button type="button" id="submit" class="btn btn-dark mb-1" style="color: #fff;
          background-color: #000000;"><i class="fa fa-search" aria-hidden="true"></i></button>
      </div>
     </div>
      <div class="dropdown">
        <span><i class="fas fa-cog  text-white"></i></span>
        <div class="dropdown-content toggle">
          <h6>Theme Color</h6>
          <a href="#" class="mt-4">
            <button id="blackTh" style="background-color: rgb(20, 20, 20); width: 50px; height: 20px"></button>
            <button id="whiteTh" style="background-color: rgb(136, 136, 136); width: 50px; height: 20px"></button>
          </a>
        </div>
      </div>
   
</nav>
</header>
<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script>
    // Code to search Movie Name 
    $(document).ready(function(){
     $('#submit').click(function(){
        var searchValue = $('#search').val();    
        var token = $('#token').val();
        $.ajax({
           type: "POST", 
           url:'/searchMovie',
           data:{value:searchValue,_token: "{{ csrf_token() }}" },
           dataType:'json',
           success:function(response)
           {
            var output = "<h6 style='color:white;margin-left:50px;margint-bottom:20px;'>"+response.movie_name+"</h6><a href='/tvShow'><img src='images/"+response.movie_path+"' style='width:400px;margin-left:50px'></a>";
             $('#homePage').css('display','none');
             $('#tvpage').css('display','none');
             $('.Movie_List').css('display','none');
             $('.tv_list').css('display','none');
             $('#showSearch').html(output);
           }
        });
     });
    });

    // $(document).ready(function(){
    //  $('#tv_show').click(function(){
    //   $(location).attr('href','tvShow');
    //  });
    // });

    // Code to search TV Show 

    $(document).ready(function(){
     $('#submit').click(function(){
        var searchValue = $('#search').val();    
        var token = $('#token').val();

        $.ajax({
           type: "POST", 
           url:'/searchTvShow',
           data:{value:searchValue,_token: "{{ csrf_token() }}" },
           dataType:'json',
           success:function(response)
           {
            var output = "<h6 style='color:white;margin-left:50px'>"+response.movie_name+"</h6><a href='/tvShow'><img src='images/"+response.tvshow_path+"' style='width:400px;margin-left:50px'></a>";
             $('#homePage').css('display','none');
             $('.Movie_List').css('display','none');
             $('.tv_list').css('display','none');
             $('#showSearch').html(output);
           }
        });
     });
    });

    // Theme Color Change 

     $('#blackTh').click(function() {
        $('body').css('background','#232323');
    });
     $('#whiteTh').click(function() {
       $('body').css('background','#a2a2a2');
    });
  </script>

home.blade.php

@include('header')

<div class="container">
   <h4 class="text-white top-head mt-4 Movie_List "><b>Popular Movies On Netflix</b></h4><br/>
   <div class="row" id="homePage">
      @foreach($listMovie as $row)  
       <div class="col-sm-2 mt-5" id="movieList" >
         <div class="Imgbox">  
          <a href="/tvShow"><img src="images/{{ $row->movie_path }}" style="width:170px"></a> 
         </div>
        </div>    
      @endforeach
   </div>    
</div>

<div class="container">
   <h4 class="text-white top-head mt-5 tv_list" ><b>Popular TV Show On Netflix</b></h4><br/>
   <div class="row mt-5 mb-4" id="tvpage">
      @foreach($tvshow as $row)  
       <div class="col-sm-2 mt-5" id="movieList" >
         <div class="Imgbox">  
          <a href="/tvShow"><img src="images/{{ $row->tvshow_path }}" style="width:170px"></a> 
         </div>
        </div>    
      @endforeach
   </div> 
</div>

   <div class="row" >
       <div class="col-sm-2 mt-5 text-white">
         <div class="Imgbox" id="showSearch">  
          
         </div>
        </div>    
   </div>     
</div>
@include('footer')

movie.blade.php

@include('header')

<div class="container">
   <h5 class="text-white top-head mt-4 ">Movies on Netflix</h5><br>
   <div class="row mt-3" id="homePage">
      @foreach($movielist as $row)  
       <div class="col-sm-2 mt-5" id="movieList" >
         <div class="Imgbox">  
          <a href="/tvShow"><img src="images/{{ $row->movie_path }}" style="width:170px"></a> 
         </div>
        </div>    
      @endforeach
   </div>     
   <div class="row" >
       <div class="col-sm-2 mt-5 text-white">
         <div class="Imgbox" id="showSearch">  
          
         </div>
        </div>    
   </div>     
</div>
@include('footer')

tvshows.blade.php

@include('header')

<div class="container">
   <h5 class="text-white top-head mt-4 ">TV Shows on Netflix</h5><br>
   <div class="row mt-3" id="homePage">
      @foreach($tvshowlist as $row)  
       <div class="col-sm-2 mt-5" id="movieList" >
         <div class="Imgbox">  
          <a href="/tvShow"><img src="images/{{ $row->tvshow_path }}" style="width:170px"></a> 
         </div>
        </div>    
      @endforeach
   </div>     
   <div class="row" >
       <div class="col-sm-2 mt-5 text-white">
         <div class="Imgbox" id="showSearch">  
          
         </div>
        </div>    
   </div>     
</div>
@include('footer')

search_movie.blade.php

@include('header')

<div class="container" style="background-color:#232323" id="searchMovie" >
   <h5 class="top-head" style="color:white">Popular On Netflix</h5> 
   <div class="row">
     
       <div class="col-sm-2 mt-5" id="movieList" >
         <div class="" id="searchMovie">  
            <video width="520" height="340" controls>
               <source src="/videos/The_road_trick.mp4" type="video/mp4">
                Your browser does not support the video tag.
           </video>
         </div>
       
        </div>    
    
   </div>     
</div>    
@include('footer')

Now Our CODE Part is finish now run the project on http://localhost:8000/

Subscribe to My Programming YouTube Channel Before Downloading the code :

Download the Source Code : Netflix Project in Laravel

See our More Projects

Building an Image Gallery with Laravel and React

Login Signup with Laravel

Bill Invoice System in Laravel

Laravel Dependent Dropdown Tutorial With Example

Library Management system in Laravel PHP

Comments 2

Leave a Reply

Your email address will not be published. Required fields are marked *

➤