Skip to content

P
Project_Laravel
Commit 3c4974d3 authored by 20194288-huannh's avatar 20194288-huannh
Browse files
Options

update code validation form and input search using ajax

parent fa3cbbbf
Show whitespace changes
Inline Side-by-side
Showing with 133 additions and 114 deletions
app/Http/Controllers/PostController.php
View file @ 3c4974d3
...@@ -16,11 +16,17 @@ public function index(Request $request) { ...@@ -16,11 +16,17 @@ public function index(Request $request) {
return view('post.index', compact('posts', 'categories')); return view('post.index', compact('posts', 'categories'));
} }
public function ajax(Request $request) { public function ajax(Request $request) {
return view('post.ajax'); $query = Post::latest();
if (strlen($request->search_input)) {
$query->where('title', 'like', '%'.$request->search_input.'%');
}
$posts = $query->paginate();
return view('post.ajax', compact('posts'));
} }
public function create(Request $request) { public function create(Request $request) {
$categories = Category::orderBy('title', 'asc')->whereNull('parent_id')->get(); $categories = Category::orderBy('title', 'asc')->whereNull('parent_id')->get();
return view('post.form', compact('categories')); $post = new Post();
return view('post.form', compact('post','categories'));
} }
public function store(Request $request) { public function store(Request $request) {
$request->merge([ $request->merge([
......
resources/views/layouts/app.blade.php
View file @ 3c4974d3
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
@include('partials.head') @include('partials.head')
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head> </head>
<body class="navbar-top"> <body class="navbar-top">
......
resources/views/partials/head.blade.php
View file @ 3c4974d3
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
<!-- /core JS files --> <!-- /core JS files -->
<!-- Theme JS files --> <!-- Theme JS files -->
<script src="/global_assets/js/plugins/forms/validation/validate.min.js"></script>
<script src="/global_assets/js/plugins/forms/selects/select2.min.js"></script> <script src="/global_assets/js/plugins/forms/selects/select2.min.js"></script>
<script src="/global_assets/js/plugins/visualization/d3/d3.min.js"></script> <script src="/global_assets/js/plugins/visualization/d3/d3.min.js"></script>
<script src="/global_assets/js/plugins/visualization/d3/d3_tooltip.js"></script> <script src="/global_assets/js/plugins/visualization/d3/d3_tooltip.js"></script>
......
resources/views/post/ajax.blade.php 0 → 100644
View file @ 3c4974d3
<div class="my-2">
{{ $posts->links() }}
</div>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Ảnh</th>
<th>Tiêu đề</th>
<th>Danh mục</th>
<th>Người tạo</th>
<th>Tác vụ</th>
</tr>
</thead>
<tbody>
@foreach($posts as $post)
<tr>
<td>
<input type="checkbox" class="form-input-styled">
</td>
<td>
<img src="{{ $post->image }}" height="30">
</td>
<td>{{ $post->title }}</td>
<td>{{ $post->categories()->first()->title ?? '' }}</td>
<td>{{ $post->user->name }}</td>
<td>
<div class="list-icons">
<a href="{{ route('posts.edit', $post->id) }}" class="list-icons-item" title="Sửa">
<i class="icon-pencil7"></i>
</a>
<a href="#" class="text-danger list-icons-item" title="Xóa">
<i class="icon-trash"></i>
</a>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="my-2">
{{ $posts->links() }}
</div>
\ No newline at end of file
resources/views/post/form.blade.php
View file @ 3c4974d3
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="page-title d-flex"> <div class="page-title d-flex">
<h4> <h4>
<i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Bài viết</span> - <i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Bài viết</span> -
@if($post->id) @if(isset($post))
Sửa Sửa
@else @else
Thêm mới Thêm mới
...@@ -42,107 +42,59 @@ ...@@ -42,107 +42,59 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<!-- Basic layout--> <!-- Basic layout-->
<div class="card"> <div class="card" >
<div class="card-body"> <form class="card-body" id="form" >
<div class="form-group row"> <div class="form-group row">
<label class="col-lg-3 col-form-label">Tiêu đề</label> <label class="col-lg-3 col-form-label">Tiêu đề</label>
<div class="col-lg-9"> <div class="col-lg-9">
<input type="text" required class="form-control" value="{{ $post->title }}" placeholder="Tiêu đề" name="title"> <input type="text" class="form-control" value="{{ isset($post) ? $post->title : ''}}" placeholder="Tiêu đề" name="title">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-lg-3 col-form-label">Password:</label> <label class="col-lg-3 col-form-label">Ảnh:</label>
<div class="col-lg-9"> <div class="col-lg-9">
<input type="password" class="form-control" placeholder="Your strong password"> <input type="file" class="form-control" name="image">
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-lg-3 col-form-label">Your state:</label> <label class="col-lg-3 col-form-label">Mô tả:</label>
<div class="col-lg-9"> <div class="col-lg-9">
<select class="form-control form-control-select2" data-fouc> <input type="text" class="form-control" name= "description">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="KY">Kentucky</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
</optgroup>
</select>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-lg-3 col-form-label">Gender:</label> <label class="col-lg-3 col-form-label">Trạng thái:</label>
<div class="col-lg-9"> <div class="col-lg-9">
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<label class="form-check-label"> <label class="form-check-label">
<input type="radio" class="form-input-styled" name="gender" checked data-fouc> <input type="radio" class="form-check-input" name="status" checked type="checkbox">
Male Ẩn
</label> </label>
</div> </div>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<label class="form-check-label"> <label class="form-check-label">
<input type="radio" class="form-input-styled" name="gender" data-fouc> <input type="radio" class="form-check-input" name="status" type="checkbox" >
Female Hiện
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-lg-3 col-form-label">Your avatar:</label> <label class="col-lg-3 col-form-label">Nội dung:</label>
<div class="col-lg-9"> <div class="col-lg-9">
<input type="file" class="form-input-styled" data-fouc> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="content"></textarea>
<span class="form-text text-muted">Accepted formats: gif, png, jpg. Max file size 2Mb</span>
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Danh mục:</label>
<div class="col-lg-9">
<select multiple="multiple" data-placeholder="Chọn danh mục" name="category_ids[]" class="form-control select2" data-fouc>
@foreach($categories as $category)
<optgroup label="{{ $category->title }}">
@foreach($category->children as $child)
<option {{ in_array($child->id, $post->categories->pluck('id')->all()) ? 'selected' : '' }} value="{{ $child->id }}">{{ $child->title }}</option>
@endforeach
</optgroup>
@endforeach
</select>
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label">Your message:</label>
<div class="col-lg-9">
<textarea rows="5" cols="5" class="form-control" placeholder="Enter your message here"></textarea>
</div> </div>
</div> </div>
<div class="text-right"> <div class="text-right">
<button type="submit" class="btn btn-primary">Lưu <i class="icon-paperplane ml-2"></i></button> <button type="" class="btn btn-primary">Lưu <i class="icon-paperplane ml-2"></i></button>
</div>
</div> </div>
</form>
</div> </div>
<!-- /basic layout --> <!-- /basic layout -->
</div> </div>
...@@ -155,7 +107,41 @@ ...@@ -155,7 +107,41 @@
</form> </form>
<script> <script>
$(function(){ $(function(){
if (!$().validate) {
console.warn('Warning - validate.min.js is not loaded.');
return;
}
$('.select2').select2() $('.select2').select2()
$('#form').validate({
rules: {
title :{
required: true
},
description: {
required: true
},
content: {
required: true
},
status: {
required: true
}
},
messages: {
title: {
required: "Bạn bắt buộc phải nhập tiêu đề."
},
description: {
required: "Bạn bắt buộc phải nhập mô tả."
},
content: {
required: "Nội dung không được bỏ trống"
},
status: {
required: "Trường trạng thái là bắt buộc."
}
}
})
}) })
</script> </script>
@endsection @endsection
resources/views/post/index.blade.php
View file @ 3c4974d3
...@@ -34,9 +34,9 @@ ...@@ -34,9 +34,9 @@
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<form action="" class="row"> <form id="form" class="row">
<div class="col-md-3"> <div class="col-md-3">
<input name="keyword" placeholder="Từ khóa" class="form-control"> <input name="keyword" placeholder="Từ khóa" class="form-control" id="search_input">
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<select name="category_id" class="form-control select2"> <select name="category_id" class="form-control select2">
...@@ -47,55 +47,13 @@ ...@@ -47,55 +47,13 @@
</select> </select>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<button type="submit" class="btn btn-primary">Lọc</button> <button type="button" class="btn btn-primary" id="filter">Lọc</button>
</div> </div>
</form> </form>
</div> </div>
<div class="table-responsive"> <div class="table-responsive" id="content">
<div class="my-2"> @include('post.ajax')
{{ $posts->links() }}
</div>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Ảnh</th>
<th>Tiêu đề</th>
<th>Danh mục</th>
<th>Người tạo</th>
<th>Tác vụ</th>
</tr>
</thead>
<tbody>
@foreach($posts as $post)
<tr>
<td>
<input type="checkbox" class="form-input-styled">
</td>
<td>
<img src="{{ $post->image }}" height="30">
</td>
<td>{{ $post->title }}</td>
<td>{{ $post->categories()->first()->title ?? '' }}</td>
<td>{{ $post->user->name }}</td>
<td>
<div class="list-icons">
<a href="{{ route('posts.edit', $post->id) }}" class="list-icons-item" title="Sửa">
<i class="icon-pencil7"></i>
</a>
<a href="#" class="text-danger list-icons-item" title="Xóa">
<i class="icon-trash"></i>
</a>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="my-2">
{{ $posts->links() }}
</div>
</div> </div>
</div> </div>
<!-- /basic table --> <!-- /basic table -->
...@@ -104,8 +62,31 @@ ...@@ -104,8 +62,31 @@
<!-- /content area --> <!-- /content area -->
<script> <script>
function search() {
var search_content = $('#search_input').val()
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type: 'post',
url: '/posts/ajax',
data: {
'search_input': search_content
},
success:function(html){
$('#content').html(html)
}
})
}
$(function(){ $(function(){
$('.select2').select2() $('.select2').select2()
$('#form').submit(function(e){
e.preventDefault()
search()
});
$('#filter').click(function(){
search()
});
}) })
</script> </script>
@endsection @endsection
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment