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_managementStature project
cp .env.example .env
php artisan key:generate
php artisan migrate
php artisan db:seed
php artisan serveDB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_student
DB_USERNAME=root
DB_PASSWORD=your passwordStep 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 & 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 & 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
1 Comments
there is no report
ReplyDeleteCAN FEEDBACK
Emoji