Project management student Laravel 8

  Project management student Laravel 8



step : Install ui

Note:

composer require laravel/ui
php artisan ui vue --auth

 Install Laravel Project

First Install a Laravel project to run the below command

composer create-project --prefer-dist laravel/laravel student_management
Stature project 


cp .env.example .env
php artisan key:generate
php artisan migrate
php artisan db:seed
php artisan serve
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_student
DB_USERNAME=root
DB_PASSWORD=your password

Step 1: template project

 Creating the Welcome Page

Here's the code of our "welcome.blade.php" file, where the user is redirected after successful login.


                                  @extends('layouts.master')
@section('contain')
<div class="pcoded-wrapper">
    @include('sidebar.dashboard')
    <div class="pcoded-content">
        <div class="pcoded-inner-content">
            <div class="main-body">
                <div class="page-wrapper">

                    <div class="page-body">
                    <div class="row">

                            <!-- order-card start -->
                            <div class="col-md-6 col-xl-3">
                                <div class="card bg-c-blue order-card">
                                    <div class="card-block">
                                        <h6 class="m-b-20">Orders Received</h6>
                                        <h2 class="text-right"><i class="ti-shopping-cart f-left"></i><span>486</span></h2>
                                        <p class="m-b-0">Completed Orders<span class="f-right">351</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-xl-3">
                                <div class="card bg-c-green order-card">
                                    <div class="card-block">
                                        <h6 class="m-b-20">Total Sales</h6>
                                        <h2 class="text-right"><i class="ti-tag f-left"></i><span>1641</span></h2>
                                        <p class="m-b-0">This Month<span class="f-right">213</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-xl-3">
                                <div class="card bg-c-yellow order-card">
                                    <div class="card-block">
                                        <h6 class="m-b-20">Revenue</h6>
                                        <h2 class="text-right"><i class="ti-reload f-left"></i><span>$42,562</span></h2>
                                        <p class="m-b-0">This Month<span class="f-right">$5,032</span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-xl-3">
                                <div class="card bg-c-pink order-card">
                                    <div class="card-block">
                                        <h6 class="m-b-20">Total Profit</h6>
                                        <h2 class="text-right"><i class="ti-wallet f-left"></i><span>$9,562</span></h2>
                                        <p class="m-b-0">This Month<span class="f-right">$542</span></p>
                                    </div>
                                </div>
                            </div>
                            <!-- order-card end -->

                            <!-- statustic and process start -->
                            <div class="col-lg-8 col-md-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Statistics</h5>
                                        <div class="card-header-right">
                                            <ul class="list-unstyled card-option">
                                                <li><i class="fa fa-chevron-left"></i></li>
                                                <li><i class="fa fa-window-maximize full-card"></i></li>
                                                <li><i class="fa fa-minus minimize-card"></i></li>
                                                <li><i class="fa fa-refresh reload-card"></i></li>
                                                <li><i class="fa fa-times close-card"></i></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="card-block">
                                        <canvas id="Statistics-chart" height="200"></canvas>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Customer Feedback</h5>
                                    </div>
                                    <div class="card-block">
                                        <span class="d-block text-c-blue f-24 f-w-600 text-center">365247</span>
                                        <canvas id="feedback-chart" height="100"></canvas>
                                        <div class="row justify-content-center m-t-15">
                                            <div class="col-auto b-r-default m-t-5 m-b-5">
                                                <h4>83%</h4>
                                                <p class="text-success m-b-0"><i class="ti-hand-point-up m-r-5"></i>Positive</p>
                                            </div>
                                            <div class="col-auto m-t-5 m-b-5">
                                                <h4>17%</h4>
                                                <p class="text-danger m-b-0"><i class="ti-hand-point-down m-r-5"></i>Negative</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- statustic and process end -->
                            <!-- tabs card start -->
                            <div class="col-sm-12">
                                <div class="card tabs-card">
                                    <div class="card-block p-0">
                                        <!-- Nav tabs -->
                                        <ul class="nav nav-tabs md-tabs" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" data-toggle="tab" href="#home3" role="tab"><i class="fa fa-home"></i>Home</a>
                                                <div class="slide"></div>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#profile3" role="tab"><i class="fa fa-key"></i>Security</a>
                                                <div class="slide"></div>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#messages3" role="tab"><i class="fa fa-play-circle"></i>Entertainment</a>
                                                <div class="slide"></div>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#settings3" role="tab"><i class="fa fa-database"></i>Big Data</a>
                                                <div class="slide"></div>
                                            </li>
                                        </ul>
                                        <!-- Tab panes -->
                                        <div class="tab-content card-block">
                                            <div class="tab-pane active" id="home3" role="tabpanel">

                                                <div class="table-responsive">
                                                    <table class="table">
                                                        <tr>
                                                            <th>Image</th>
                                                            <th>Product Code</th>
                                                            <th>Customer</th>
                                                            <th>Purchased On</th>
                                                            <th>Status</th>
                                                            <th>Transaction ID</th>
                                                        </tr>
                                                        <tr>
                                                            <td><img src="assets/images/product/prod2.jpg" alt="prod img" class="img-fluid"></td>
                                                            <td>PNG002344</td>
                                                            <td>John Deo</td>
                                                            <td>05-01-2017</td>
                                                            <td><span class="label label-danger">Faild</span></td>
                                                            <td>#7234486</td>
                                                        </tr>
                                                        <tr>
                                                            <td><img src="assets/images/product/prod3.jpg" alt="prod img" class="img-fluid"></td>
                                                            <td>PNG002653</td>
                                                            <td>Eugine Turner</td>
                                                            <td>04-01-2017</td>
                                                            <td><span class="label label-success">Delivered</span></td>
                                                            <td>#7234417</td>
                                                        </tr>
                                                        <tr>
                                                            <td><img src="assets/images/product/prod4.jpg" alt="prod img" class="img-fluid"></td>
                                                            <td>PNG002156</td>
                                                            <td>Jacqueline Howell</td>
                                                            <td>03-01-2017</td>
                                                            <td><span class="label label-warning">Pending</span></td>
                                                            <td>#7234454</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <div class="text-center">
                                                    <button class="btn btn-outline-primary btn-round btn-sm">Load More</button>
                                                </div>
                                            </div>
                                            <div class="tab-pane" id="profile3" role="tabpanel">

                                                <div class="table-responsive">
                                                    <table class="table">
                                                        <tr>
                                                            <th>Image</th>
                                                            <th>Product Code</th>
                                                            <th>Customer</th>
                                                            <th>Purchased On</th>
                                                            <th>Status</th>
                                                            <th>Transaction ID</th>
                                                        </tr>
                                                        <tr>
                                                            <td><img src="assets/images/product/prod3.jpg" alt="prod img" class="img-fluid"></td>
                                                            <td>PNG002653</td>
                                                            <td>Eugine Turner</td>
                                                            <td>04-01-2017</td>
                                                            <td><span class="label label-success">Delivered</span></td>
                                                            <td>#7234417</td>
                                                        </tr>
                                                        <tr>
                                                            <td><img src="assets/images/product/prod4.jpg" alt="prod img" class="img-fluid"></td>
                                                            <td>PNG002156</td>
                                                            <td>Jacqueline Howell</td>
                                                            <td>03-01-2017</td>
                                                            <td><span class="label label-warning">Pending</span></td>
                                                            <td>#7234454</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <div class="text-center">
                                                    <button class="btn btn-outline-primary btn-round btn-sm">Load More</button>
                                                </div>
                                            </div>
                                            <div class="tab-pane" id="messages3" role="tabpanel">

                                                <div class="table-responsive">
                                                    <table class="table">
                                                        <tr>
                                                            <th>Image</th>
                                                            <th>Product Code</th>
                                                            <th>Customer</th>
                                                            <th>Purchased On</th>
                                                            <th>Status</th>
                                                            <th>Transaction ID</th>
                                                        </tr>
                                                        <tr>
                                                            <td><img src="assets/images/product/prod1.jpg" alt="prod img" class="img-fluid"></td>
                                                            <td>PNG002413</td>
                                                            <td>Jane Elliott</td>
                                                            <td>06-01-2017</td>
                                                            <td><span class="label label-primary">Shipping</span></td>
                                                            <td>#7234421</td>
                                                        </tr>
                                                        <tr>
                                                            <td><img src="assets/images/product/prod4.jpg" alt="prod img" class="img-fluid"></td>
                                                            <td>PNG002156</td>
                                                            <td>Jacqueline Howell</td>
                                                            <td>03-01-2017</td>
                                                            <td><span class="label label-warning">Pending</span></td>
                                                            <td>#7234454</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <div class="text-center">
                                                    <button class="btn btn-outline-primary btn-round btn-sm">Load More</button>
                                                </div>
                                            </div>
                                            <div class="tab-pane" id="settings3" role="tabpanel">

                                                <div class="table-responsive">
                                                    <table class="table">
                                                        <tr>
                                                            <th>Image</th>
                                                            <th>Product Code</th>
                                                            <th>Customer</th>
                                                            <th>Purchased On</th>
                                                            <th>Status</th>
                                                            <th>Transaction ID</th>
                                                        </tr>
                                                        <tr>
                                                            <td><img src="assets/images/product/prod1.jpg" alt="prod img" class="img-fluid"></td>
                                                            <td>PNG002413</td>
                                                            <td>Jane Elliott</td>
                                                            <td>06-01-2017</td>
                                                            <td><span class="label label-primary">Shipping</span></td>
                                                            <td>#7234421</td>
                                                        </tr>
                                                        <tr>
                                                            <td><img src="assets/images/product/prod2.jpg" alt="prod img" class="img-fluid"></td>
                                                            <td>PNG002344</td>
                                                            <td>John Deo</td>
                                                            <td>05-01-2017</td>
                                                            <td><span class="label label-danger">Faild</span></td>
                                                            <td>#7234486</td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <div class="text-center">
                                                    <button class="btn btn-outline-primary btn-round btn-sm">Load More</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- tabs card end -->

                            <!-- social statustic start -->
                            <div class="col-md-12 col-lg-4">
                                <div class="card">
                                    <div class="card-block text-center">
                                        <i class="fa fa-envelope-open text-c-blue d-block f-40"></i>
                                        <h4 class="m-t-20"><span class="text-c-blue">8.62k</span> Subscribers</h4>
                                        <p class="m-b-20">Your main list is growing</p>
                                        <button class="btn btn-primary btn-sm btn-round">Manage List</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-4">
                                <div class="card">
                                    <div class="card-block text-center">
                                        <i class="fa fa-twitter text-c-green d-block f-40"></i>
                                        <h4 class="m-t-20"><span class="text-c-blgreenue">+40</span> Followers</h4>
                                        <p class="m-b-20">Your main list is growing</p>
                                        <button class="btn btn-success btn-sm btn-round">Check them out</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-4">
                                <div class="card">
                                    <div class="card-block text-center">
                                        <i class="fa fa-puzzle-piece text-c-pink d-block f-40"></i>
                                        <h4 class="m-t-20">Business Plan</h4>
                                        <p class="m-b-20">This is your current active plan</p>
                                        <button class="btn btn-danger btn-sm btn-round">Upgrade to VIP</button>
                                    </div>
                                </div>
                            </div>
                            <!-- social statustic end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Step 2: layouts

 master.blade

<!DOCTYPE html>
<html lang="en">

<head>
    <title>SOENGSOUY.COM </title>

      <!-- Meta -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="description" content="Gradient Able Bootstrap admin template made using Bootstrap 4. The starter version of Gradient Able is completely free for personal project." />
      <meta name="keywords" content="free dashboard template, free admin, free bootstrap template, bootstrap admin template, admin theme, admin dashboard, dashboard template, admin template, responsive" />
      <meta name="author" content="codedthemes">
      <!-- Favicon icon -->
      <link rel="icon" href="{{URL::to('assets/images/favicon.ico')}}" type="image/x-icon">
      <!-- Google font-->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
      <!-- Required Fremwork -->
      <link rel="stylesheet" type="text/css" href="{{URL::to('assets/css/bootstrap/css/bootstrap.min.css')}}">
      <!-- themify-icons line icon -->
      <link rel="stylesheet" type="text/css" href="{{URL::to('assets/icon/themify-icons/themify-icons.css')}}">
	  <link rel="stylesheet" type="text/css" href="{{URL::to('assets/icon/font-awesome/css/font-awesome.min.css')}}">
      <!-- ico font -->
      <link rel="stylesheet" type="text/css" href="{{URL::to('assets/icon/icofont/css/icofont.css')}}">
      <!-- Style.css -->
      <link rel="stylesheet" type="text/css" href="{{URL::to('assets/css/style.css')}}">
      <link rel="stylesheet" type="text/css" href="{{URL::to('assets/css/jquery.mCustomScrollbar.css')}}">
  </head>

  <body>
  <body>
    <!-- Pre-loader start -->
    <div class="theme-loader">
        <div class="loader-track">
            <div class="loader-bar"></div>
        </div>
    </div>
    <!-- Pre-loader end -->
    <div id="pcoded" class="pcoded">
        <div class="pcoded-overlay-box"></div>
        <div class="pcoded-container navbar-wrapper">
            {{-- navbar --}}
            @include('navbar.navbar')
            <div class="pcoded-main-container">
                @yield('contain')
            </div>
        </div>
       
<!-- Warning Section Ends -->
<!-- Required Jquery -->
<script type="text/javascript" src="{{URL::to('assets/js/jquery/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{URL::to('assets/js/jquery-ui/jquery-ui.min.js')}}"></script>
<script type="text/javascript" src="{{URL::to('assets/js/popper.js/popper.min.js')}}"></script>
<script type="text/javascript" src="{{URL::to('assets/js/bootstrap/js/bootstrap.min.js')}}"></script>
<!-- jquery slimscroll js -->
<script type="text/javascript" src="{{URL::to('assets/js/jquery-slimscroll/jquery.slimscroll.js')}}"></script>
<!-- modernizr js -->
<script type="text/javascript" src="{{URL::to('assets/js/modernizr/modernizr.js')}}"></script>
<!-- am chart -->
<script src="{{URL::to('assets/pages/widget/amchart/amcharts.min.js')}}"></script>
<script src="{{URL::to('assets/pages/widget/amchart/serial.min.js')}}"></script>
<!-- Chart js -->
<script type="text/javascript" src="{{URL::to('assets/js/chart.js/Chart.js')}}"></script>
<!-- Todo js -->
<script type="text/javascript " src="{{URL::to('assets/pages/todo/todo.js')}}"></script>
<!-- Custom js -->
<script type="text/javascript" src="{{URL::to('assets/pages/dashboard/custom-dashboard.min.js')}}"></script>
<script type="text/javascript" src="{{URL::to('assets/js/script.js')}}"></script>
<script type="text/javascript " src="{{URL::to('assets/js/SmoothScroll.js')}}"></script>
<script src="{{URL::to('assets/js/pcoded.min.js')}}"></script>
<script src="{{URL::to('assets/js/vartical-demo.js')}}"></script>
<script src="{{URL::to('assets/js/jquery.mCustomScrollbar.concat.min.js')}}"></script>

{{-- validate --}}
<script src="{{URL::to('assets/js/query.validate.js')}}"></script>


@yield('script')

</body>
</html>


Step 3: navbar

 navbar

<nav class="navbar header-navbar pcoded-header">
    <div class="navbar-wrapper">
        <div class="navbar-logo">
            <a class="mobile-menu" id="mobile-collapse" href="#!">
                <i class="ti-menu"></i>
            </a>
            <div class="mobile-search">
                <div class="header-search">
                    <div class="main-search morphsearch-search">
                        <div class="input-group">
                            <span class="input-group-addon search-close"><i class="ti-close"></i></span>
                            <input type="text" class="form-control" placeholder="Enter Keyword">
                            <span class="input-group-addon search-btn"><i class="ti-search"></i></span>
                        </div>
                    </div>
                </div>
            </div>
            <a href="index.html">
                <img class="img-fluid" src="{{URL::to('assets/images/logo.png')}}" alt="Theme-Logo" />
            </a>
            <a class="mobile-options">
                <i class="ti-more"></i>
            </a>
        </div>

        <div class="navbar-container container-fluid">
            <ul class="nav-left">
                <li>
                    <div class="sidebar_toggle"><a href="javascript:void(0)"><i class="ti-menu"></i></a></div>
                </li>
                <li class="header-search">
                    <div class="main-search morphsearch-search">
                        <div class="input-group">
                            <span class="input-group-addon search-close"><i class="ti-close"></i></span>
                            <input type="text" class="form-control">
                            <span class="input-group-addon search-btn"><i class="ti-search"></i></span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#!" onclick="javascript:toggleFullScreen()">
                        <i class="ti-fullscreen"></i>
                    </a>
                </li>
            </ul>
            <ul class="nav-right">
                <li class="header-notification">
                    <a href="#!">
                        <i class="ti-bell"></i>
                        <span class="badge bg-c-pink"></span>
                    </a>
                    <ul class="show-notification">
                        <li>
                            <h6>Notifications</h6>
                            <label class="label label-danger">New</label>
                        </li>
                        <li>
                            <div class="media">
                                <img class="d-flex align-self-center img-radius" src="{{URL::to('assets/images/avatar-2.jpg')}}" alt="Generic placeholder image">
                                <div class="media-body">
                                    <h5 class="notification-user">Soeng Souy</h5>
                                    <p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
                                    <span class="notification-time">30 minutes ago</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="media">
                                <img class="d-flex align-self-center img-radius" src="{{URL::to('assets/images/avatar-4.jpg')}}" alt="Generic placeholder image">
                                <div class="media-body">
                                    <h5 class="notification-user">Joseph William</h5>
                                    <p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
                                    <span class="notification-time">30 minutes ago</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="media">
                                <img class="d-flex align-self-center img-radius" src="{{URL::to('assets/images/avatar-3.jpg')}}" alt="Generic placeholder image">
                                <div class="media-body">
                                    <h5 class="notification-user">Sara Soudein</h5>
                                    <p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
                                    <span class="notification-time">30 minutes ago</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                
                <li class="user-profile header-notification">
                    <a href="#!">
                        <img src="{{URL::to('assets/images/avatar-4.jpg')}}" class="img-radius" alt="User-Profile-Image">
                        <span>Soeng Souy</span>
                        <i class="ti-angle-down"></i>
                    </a>
                    <ul class="show-notification profile-notification">
                        <li>
                            <a href="#!">
                                <i class="ti-settings"></i> Settings
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('user-profile') }}">
                                <i class="ti-user"></i> Profile
                            </a>
                        </li>
                        
                        <li>
                            <a href="auth-lock-screen.html">
                                <i class="ti-lock"></i> Lock Screen
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('logout') }}">
                            <i class="ti-layout-sidebar-left"></i> Logout
                        </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
 </nav>

Step 4: sidebar

 sidebar/dashboard

<nav class="pcoded-navbar">
    <div class="sidebar_toggle"><a href="#"><i class="icon-close icons"></i></a></div>
    <div class="pcoded-inner-navbar main-menu">
        <div class="pcoded-navigatio-lavel" data-i18n="nav.category.navigation">Layout</div>
        <ul class="pcoded-item pcoded-left-item">
            <li class="active">
                <a href="{{ route('home') }}">
                    <span class="pcoded-micon"><i class="ti-home"></i><b>D</b></span>
                    <span class="pcoded-mtext" data-i18n="nav.dash.main">Dashboard</span>
                    <span class="pcoded-mcaret"></span>
                </a>
            </li>
            <li class="pcoded-hasmenu">
                <a href="javascript:void(0)">
                    <span class="pcoded-micon"><i class="ti-layout-grid2-alt"></i></span>
                    <span class="pcoded-mtext"  data-i18n="nav.basic-components.main">Form</span>
                    <span class="pcoded-mcaret"></span>
                </a>
                <ul class="pcoded-submenu">
                    <li class="">
                        <a href="{{ route('form/student/new') }}">
                            <span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
                            <span class="pcoded-mtext" data-i18n="nav.form-components.main">Techer</span>
                            <span class="pcoded-mcaret"></span>
                        </a>
                    </li>
                    <li class="">
                        <a href="{{ route('form/student/new') }}">
                            <span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
                            <span class="pcoded-mtext" data-i18n="nav.form-components.main">Student</span>
                            <span class="pcoded-mcaret"></span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="pcoded-navigatio-lavel" data-i18n="nav.category.forms">Forms &amp; Data</div>
        <ul class="pcoded-item pcoded-left-item">
            <li>
                <a href="{{ route('form/student/new') }}">
                    <span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
                    <span class="pcoded-mtext" data-i18n="nav.form-components.main">Student</span>
                    <span class="pcoded-mcaret"></span>
                </a>
            </li>
        </ul>

        <div class="pcoded-navigatio-lavel" data-i18n="nav.category.forms">Record &amp; Data</div>
        <ul class="pcoded-item pcoded-left-item">
            <li class="pcoded-hasmenu">
                <a href="javascript:void(0)">
                    <span class="pcoded-micon"><i class="ti-layout-grid2-alt"></i></span>
                    <span class="pcoded-mtext"  data-i18n="nav.basic-components.main">Report</span>
                    <span class="pcoded-mcaret"></span>
                </a>
                <ul class="pcoded-submenu">
                    <li class=" ">
                        <a href="auth-normal-sign-in.html">
                            <span class="pcoded-micon"><i class="ti-angle-right"></i></span>
                            <span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Student</span>
                            <span class="pcoded-mcaret"></span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Step 5: form

 Page/form/student

@extends('layouts.master')
@section('contain')
<div class="pcoded-wrapper">
    @include('sidebar.student')
    <div class="pcoded-content">
        <div class="pcoded-inner-content">
            <div class="main-body">
                <div class="page-wrapper">
                    <!-- Page-header start -->
                    <div class="page-header card">
                        <div class="card-block">
                            <h5 class="m-b-10">Form / Student / New</h5>
                            <p class="text-muted m-b-10">for input information</p>
                            <ul class="breadcrumb-title b-t-default p-t-10">
                                <li class="breadcrumb-item">
                                    <a href="index.html"> <i class="fa fa-home"></i> </a>
                                </li>
                                <li class="breadcrumb-item"><a href="#!">form</a></li>
                                <li class="breadcrumb-item"><a href="#!">student</a></li>
                            </ul>Basic Form Inputs
                        </div>
                    </div>
                    <!-- Page-header end -->
                    <!-- Page body start -->
                    <div class="page-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- Basic Form Inputs card start -->
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-block">
                                        <h4 class="sub-title">Infomation Input</h4>
                                        
                                        @if (Session::has('message'))
                                        <div class="alert alert-success">{{ Session::get('message') }}</div>
                                        @endif

                                        <form id="validate" name="form" action="{{ route('form/student/save') }}" method="POST">
                                            @csrf
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">Full Name</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" id="fullName" name="fullName" placeholder="Enter name">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">Sex</label>
                                                <div class="col-sm-10">
                                                    <select class="form-control" id="sex" name="sex">
                                                        <option selected disabled>Please select sex</option>
                                                        <option value="male">Male</option>
                                                        <option value="female">Female</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">Email</label>
                                                <div class="col-sm-10">
                                                    <input type="email" class="form-control text-danger" id="email" name="email" placeholder="Enter email">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">Phone number</label>
                                                <div class="col-sm-10">
                                                    <input type="tel" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="Enter phone number">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">Age</label>
                                                <div class="col-sm-10">
                                                    <input type="number" class="form-control" id="age" name="age" placeholder="Enter age">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">Country</label>
                                                <div class="col-sm-10">
                                                    <select name="select" class="form-control" id="country" name="country">
                                                        <option selected disabled>Please select Country</option>
                                                        <option value="Cambodia">Cambodia</option>
                                                        <option value="Thailand">Thailand</option>
                                                        <option value="Vietnam">Vietnam</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">Province</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" id="province" name="province" placeholder="Enter province">
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">District</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" id="district" name="district" placeholder="Enter district">
                                                </div>
                                            </div>
                                        
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">Subject</label>
                                                <div class="col-sm-10">
                                                    <select class="form-control" name="subject">
                                                        <option selected disabled>Please select Subject</option>
                                                        <option value="IT Infomation">IT Infomation</option>
                                                        <option value="Accounting">Accounting</option>
                                                        <option value="Khmer language">Khmer language</option>
                                                        <option value="English language">English language</option>
                                                        <option value="Thailand language">Thailand language</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label">School year</label>
                                                <div class="col-sm-10">
                                                    <select class="form-control" name="schoolYear">
                                                        <option selected disabled>Please select year</option>
                                                        <option value="year 1">year 1</option>
                                                        <option value="year 2">year 2</option>
                                                        <option value="year 3">year 3</option>
                                                        <option value="year 4">year 4</option>
                                                    </select>
                                                </div>
                                            </div>
                                               
                                            <div class="form-group row">
                                                <label class="col-sm-2 col-form-label"></label>
                                                <div class="col-sm-10">
                                                    <button type="submit" class="btn btn-success"><i class="icofont icofont-check-circled"></i>Save</button>
                                                    <button type= "reset"class="btn btn-danger"><i class="icofont icofont-warning-alt"></i>Reset</button>
                                                </div>
                                            </div>
                                        </form>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    <script>
        $("form#validate").validate({
        rules: {
            fullName: {
                    required: true,
                },
            sex:{
                required: true,
            },
            email:{
                required: true,
            },
            phoneNumber:{
                required: true,
            },
            age:{
                required: true,
            },  
                    
        },
        messages: {
            fullName: {
                    required: "Please enter full name",
                },
            sex:{
                required: "Please select sex",
            },
            email:{
                required: "Please enter email",
            },
            phoneNumber:{
                required: "Please enter phone number",
            },
            age:{
                required: "Please enter phone age",
            },           
        },
        
    });
    </script>
    
@endsection


Reactions

Post a Comment

0 Comments