In this tutorial, we are going to learn how to intergrade Srilankan University, Faculty, Degreee PHP package to our Laravel application. You can see the working demo of this application form here. When we need to take the extract Degree programme based on the University and Faculty, you can use this package:

  • Contain all the Government Universities in Srilanka
  • Contain all the Faculties related to particular Unversity
  • Contain all the Degree programmes related to particular Faculty

    • Prerequisites

  • Laravel
    • To Continue with this tutorial, you should have installed Laravel 8 in your pc. If you are still not installed Laravel in your machine you can configure it from here.

    Setting up the Project

    First you need to create a new laravel project by running below command in your terminal
    1
    composer create-project laravel/laravel srilankan-universities

    Then navigate to your project directory by using below command in your terminal

    1
    cd srilankan-universities

    In this demostration,we don’t need to connect our application to Database because we work with the front-end but depend on your project you have to set up your Database.

    Install Srilankan Universities package

    Now we need to install Srilankan Universitiespackage to our application.To install Srilankan Universities package, you need to run below command in your terminal:

    1
    composer require dinushchathurya/srilankan-universities

    Create Controller

    Now we need to create a controller to handle our functions. To create a new controller in your application run below command in your terminal:

    1
    php artisan make:controller HomeController

    Then naviagate to your newly created Controller and paste below code on it:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <?php

    namespace App\Http\Controllers;

    use Illuminate\Http\Request;
    use Devninja\University\University; /* Import package to our application */

    class HomeController extends Controller
    {
        public function index()
        {
            $universities = University::getUniversities();
            return view('welcome')->with([
                'universities' => $universities
            ]);
        }

        public function getFaculties($name)
        {
            $faculty = University::getFaculties($name);
            return response()->json($faculty);
        }

        public function getDegrees($name)
        {
            $degree = University::getDegrees($name);
            return response()->json($degree);
        }
    }

    Now we have finished our coding part with our controller. Next, we need to create our views.

    Create Views

    Inside resources -> views folder create, folder called layouts. Then create an app.blade.php file inside i and add the following code. 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Meta -->
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">

        @if (isset($title))
        <title>{{ $title }}</title>
        @else
        <title>Srilankan Universities</title>
        @endif

        <link href="{{ asset('assets/lib/font-awesome/css/font-awesome.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/lib/Ionicons/css/ionicons.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/lib/perfect-scrollbar/css/perfect-scrollbar.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/lib/jquery-switchbutton/jquery.switchButton.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/lib/rickshaw/rickshaw.min.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/lib/chartist/chartist.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/lib/highlightjs/github.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/lib/datatables/jquery.dataTables.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/lib/select2/css/select2.min.css') }}" rel="stylesheet">
        <link href="{{ asset('assets/css/zoom.css') }}" rel="stylesheet">

        <link rel="stylesheet" href="{{ asset('assets/css/bracket.css') }}">

        @yield('css')

    </head>

    <body>

        @include('layouts.inc.left_nav')

        @include('layouts.inc.top_navbar')


        <div class="br-mainpanel">

            @yield('content')

        </div>


        <script src="{{ asset('assets/lib/jquery/jquery.js') }}"></script>
        <script src="{{ asset('assets/lib/popper.js/popper.js') }}"></script>
        <script src="{{ asset('assets/lib/bootstrap/bootstrap.js') }}"></script>
        <script src="{{ asset('assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.js') }}"></script>
        <script src="{{ asset('assets/lib/moment/moment.js') }}"></script>
        <script src="{{ asset('assets/lib/jquery-ui/jquery-ui.js') }}"></script>
        <script src="{{ asset('assets/lib/jquery-switchbutton/jquery.switchButton.js') }}"></script>
        <script src="{{ asset('assets/lib/peity/jquery.peity.js') }}"></script>
        <script src="{{ asset('assets/lib/chartist/chartist.js') }}"></script>
        <script src="{{ asset('assets/lib/jquery.sparkline.bower/jquery.sparkline.min.js') }}"></script>
        <script src="{{ asset('assets/lib/d3/d3.js') }}"></script>
        <script src="{{ asset('assets/lib/rickshaw/rickshaw.min.js') }}"></script>

        <script src="{{ asset('assets/lib/highlightjs/highlight.pack.js') }}"></script>
        <script src="{{ asset('assets/lib/datatables/jquery.dataTables.js') }}"></script>
        <script src="{{ asset('assets/lib/datatables-responsive/dataTables.responsive.js') }}"></script>
        <script src="{{ asset('assets/lib/select2/js/select2.min.js') }}"></script>


        <script src="{{ asset('assets/js/bracket.js') }}"></script>
        <script src="{{ asset('assets/js/ResizeSensor.js') }}"></script>
        <script src="{{ asset('assets/js/dashboard.js') }}"></script>

        @yield('js')

        <script>
            $(function() {
                'use strict'
                $(window).resize(function() {
                    minimizeMenu();
                });

                minimizeMenu();

                function minimizeMenu() {
                    if (window.matchMedia('(min-width: 992px)').matches && window.matchMedia('(max-width: 1299px)')
                        .matches) {
                        // show only the icons and hide left menu label by default
                        $('.menu-item-label,.menu-item-arrow').addClass('op-lg-0-force d-lg-none');
                        $('body').addClass('collapsed-menu');
                        $('.show-sub + .br-menu-sub').slideUp();
                    } else if (window.matchMedia('(min-width: 1300px)').matches && !$('body').hasClass(
                            'collapsed-menu')) {
                        $('.menu-item-label,.menu-item-arrow').removeClass('op-lg-0-force d-lg-none');
                        $('body').removeClass('collapsed-menu');
                        $('.show-sub + .br-menu-sub').slideDown();
                    }
                }
            });

        </script>
    </body>
    </html>

    Note: Here I have used a premium and licensed template to get a better and interactive output from our application. If you need to use this template you need to purchase it from it's respective owners.

    Next, you need to create a folder called inc in layouts directory and create two seperate file called left_nav.blade.php and top_navbar.blade.php and paste below codes:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!-- left_nav.blade.php -->

    <div class="br-logo"><a href=""><span>[</span>CodingtrickS<span>]</span></a></div>
    <div class="br-sideleft overflow-y-auto">
        <label class="sidebar-label pd-x-15 mg-t-20">Navigation</label>
        <div class="br-sideleft-menu">
            <a href="{{ url('/') }}" class="br-menu-link">
                <div class="br-menu-item">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    <span class="menu-item-label">Dashbaord</span>
                    <i class="menu-item-arrow fa fa-angle-down"></i>
                </div>
            </a>
        </div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!-- top_nav.blade.php -->

    <div class="br-header">
        <div class="br-header-left">
            <div class="navicon-left hidden-md-down"><a id="btnLeftMenu" href=""><i class="icon ion-navicon-round"></i></a></div>
            <div class="navicon-left hidden-lg-up"><a id="btnLeftMenuMobile" href=""><i class="icon ion-navicon-round"></i></a></div>
            <div class="input-group hidden-xs-down wd-170 transition">
                <input id="searchbox" type="text" class="form-control" placeholder="Search">
                <span class="input-group-btn">
                    <button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
                </span>
            </div>
        </div>
        <div class="br-header-right">
            <nav class="nav">
            </nav>
            <div class="navicon-right">
                <a id="btnRightMenu" href="" class="pos-relative">
                    <i class="icon ion-ios-chatboxes-outline"></i>
                    <span class="square-8 bg-danger pos-absolute t-10 r--5 rounded-circle"></span>
                </a>
            </div>
        </div>
    </div>

    Finally, in your welcome.blade.php and paste below codes:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    @extends('layouts.app')

    @section('content')

    <div class="br-pageheader pd-y-15 pd-l-20">
        <nav class="breadcrumb pd-0 mg-0 tx-12">
            <a class="breadcrumb-item" href="https:codingtricks.io">Codingtricks</a>
            <span class="breadcrumb-item active">Demo</span>
        </nav>
    </div>

    <div class="pd-x-20 pd-sm-x-30 pd-t-20 pd-sm-t-30">
        <h4 class="tx-gray-800 mg-b-5">All Government Universities</h4>
        <p class="mg-b-0">Get all Government Universities, their faculties & degress</p>
    </div>

    <div class="br-pagebody">

         <div class="row pd-t-20">
            <div class="col-lg-4">
                <div class="form-group has-success mg-b-0">
                    <select class="form-control select2" data-placeholder="Choose your University" name="university" id="university">
                    <option value="">Choose University</option>
                    @foreach ($universities as $university )
                        <option value="{{ $university }}">{{ $university}}</option>
                    @endforeach
                    </select>
                </div>
            </div>

            <div class="col-lg-4 mg-t-20 mg-lg-t-0">
                <div class="form-group has-warning mg-b-0">
                    <select class="form-control select2" data-placeholder="Choose your Faculty" name="faculty" id="faculty">
                    </select>
                </div>
            </div>

            <div class="col-lg-4 mg-t-20 mg-lg-t-0">
                <div class="form-group has-warning mg-b-0">
                    <select class="form-control select2" data-placeholder="Choose your Degree" name="degree" id="degree">
                    </select>
                </div>
            </div>
         </div>

    </div>

    @endsection

    @section('js')
     <script type="text/javascript">
        $('select[name="university"]').on('change', function() {
            var university = $(this).val();
            if (university) {
                $.ajax({
                url: "{{ config('app.url') }}/get/faculty/university/" + university, 
                type: "GET", 
                dataType: "json", 
                beforeSend: function() {
                    $('#loader').css('visibility', 'visible');
                },
                success: function(data) {
                    $('select[name="faculty"]').empty();
                    $('select[name="faculty"]').append('<option value="">Select a Faculty</option>');
                    $.each(data, function(key, value) {
                        $('select[name="faculty"]').append('<option value="' + value + '">' + value + '</option>');
                    });
                },
                complete: function() {
                    $('#loader').css('visibility', 'hidden');
                    }
                });
            }
        });
        $('select[name="faculty"]').on('change', function() {
            var faculty = $(this).val();
            if (faculty) {
                $.ajax({
                url: "{{ config('app.url') }}/get/degree/faculty/" + faculty, 
                type: "GET", 
                dataType: "json", 
                beforeSend: function() {
                    $('#loader').css('visibility', 'visible');
                },
                success: function(data) {
                    $('select[name="degree"]').empty();
                    $('select[name="degree"]').append('<option value="">Select a Degree</option>');
                    $.each(data, function(key, value) {
                        $('select[name="degree"]').append('<option value="' + value + '">' + value + '</option>');
                    });
                },
                complete: function() {
                    $('#loader').css('visibility', 'hidden');
                    }
                });
            }
        });

     </script>

    @endsection

    Now, we have finished with our view section, ou can find all the assets files need for this application from my Github repo and next we have to setup our routes paths.

    Set up routes

    Finally, in your routes/web.php file paste below code:

    1
    2
    3
    4
    5
    6
    7
    8
    <?php

    use Illuminate\Support\Facades\Route;
    use App\Http\Controllers\HomeController;

    Route::get('/', [HomeController::class, 'index']);
    Route::get('/get/faculty/university/{name}' , [HomeController::class, 'getFaculties']);
    Route::get('/get/degree/faculty/{name}' , [HomeController::class, 'getDegrees']);

    Run our application

    Now we have already finished our application. Now we can run your application using below command:

    1
    php artisan serve

    Now, navigate to http://localhost:8000 in your browser.

    Note:

    You can see the final application I have hosted on Heroku from here.

    Conclusion

    In this tutorial, we implemented Ajax depend University drop down system in Laravel. If you have any issue regarding this tutorial, mention your issue in comment section or reach me through my E-mail. You can obtain complete source code and asset files for this tutorial from this GitHub repository.