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) {
return view('post.index', compact('posts', 'categories'));
}
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) {
$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) {
$request->merge([
......
resources/views/layouts/app.blade.php
View file @ 3c4974d3
......@@ -2,6 +2,7 @@
<html lang="en">
<head>
@include('partials.head')
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body class="navbar-top">
......
resources/views/partials/head.blade.php
View file @ 3c4974d3
......@@ -22,6 +22,7 @@
<!-- /core 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/visualization/d3/d3.min.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 @@
<div class="page-title d-flex">
<h4>
<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
@else
Thêm mới
......@@ -42,107 +42,59 @@
<div class="row">
<div class="col-md-12">
<!-- Basic layout-->
<div class="card">
<div class="card-body">
<div class="card" >
<form class="card-body" id="form" >
<div class="form-group row">
<label class="col-lg-3 col-form-label">Tiêu đề</label>
<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 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">
<input type="password" class="form-control" placeholder="Your strong password">
<input type="file" class="form-control" name="image">
</div>
</div>
<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">
<select class="form-control form-control-select2" data-fouc>
<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>
<input type="text" class="form-control" name= "description">
</div>
</div>
<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="form-check form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-input-styled" name="gender" checked data-fouc>
Male
<input type="radio" class="form-check-input" name="status" checked type="checkbox">
Ẩn
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-input-styled" name="gender" data-fouc>
Female
<input type="radio" class="form-check-input" name="status" type="checkbox" >
Hiện
</label>
</div>
</div>
</div>
<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">
<input type="file" class="form-input-styled" data-fouc>
<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>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="content"></textarea>
</div>
</div>
<div class="text-right">
<button type="submit" class="btn btn-primary">Lưu <i class="icon-paperplane ml-2"></i></button>
</div>
<button type="" class="btn btn-primary">Lưu <i class="icon-paperplane ml-2"></i></button>
</div>
</form>
</div>
<!-- /basic layout -->
</div>
......@@ -155,7 +107,41 @@
</form>
<script>
$(function(){
if (!$().validate) {
console.warn('Warning - validate.min.js is not loaded.');
return;
}
$('.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>
@endsection
resources/views/post/index.blade.php
View file @ 3c4974d3
......@@ -34,9 +34,9 @@
<div class="card">
<div class="card-body">
<form action="" class="row">
<form id="form" class="row">
<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 class="col-md-3">
<select name="category_id" class="form-control select2">
......@@ -47,55 +47,13 @@
</select>
</div>
<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>
</form>
</div>
<div class="table-responsive">
<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>
<div class="table-responsive" id="content">
@include('post.ajax')
</div>
</div>
<!-- /basic table -->
......@@ -104,8 +62,31 @@
<!-- /content area -->
<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(){
$('.select2').select2()
$('#form').submit(function(e){
e.preventDefault()
search()
});
$('#filter').click(function(){
search()
});
})
</script>
@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