use uniform, validation library, tags input, ckeditor to post form

app/Http/Controllers/PostController.php

@@ -34,7 +34,10 @@ public function store(Request $request) {
         ]);
         $post = Post::create($request->only([
             'title',
-            'user_id'
+            'user_id',
+            'keywords',
+            'description',
+            'content'
         ]));
         $post->categories()->sync($request->category_ids);
         return redirect()->route('posts.index')->with('message', 'Tạo mới thành công');
@@ -46,6 +49,9 @@ public function edit(Post $post, Request $request) {
     public function update(Post $post, Request $request) {
         $post->update($request->only([
             'title',
+            'keywords',
+            'description',
+            'content'
         ]));
         $post->categories()->sync($request->category_ids);
         return redirect()->route('posts.index')->with('message', 'Cập nhật thành công');

app/Models/Post.php

@@ -15,6 +15,9 @@ class Post extends Model
         'view_count' => 'integer',
         'status' => 'integer',
     ];
+    protected $attributes = [
+        'status' => true,
+    ];
     public function user() {
         return $this->belongsTo(User::class);
     }

resources/views/partials/head.blade.php

@@ -22,6 +22,9 @@
 	<!-- /core JS files -->
 
 	<!-- Theme JS files -->
+	<script src="/global_assets/js/demo_pages/editor_ckeditor.js"></script>
+	<script src="/global_assets/js/plugins/editors/ckeditor/ckeditor.js"></script>
+	<script src="/global_assets/js/plugins/forms/styling/uniform.min.js"></script>
 	<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>
@@ -32,8 +35,7 @@
 	<script src="/global_assets/js/plugins/ui/moment/moment.min.js"></script>
 	<script src="/global_assets/js/plugins/pickers/daterangepicker.js"></script>
 	<script src="/global_assets/js/plugins/ui/perfect_scrollbar.min.js"></script>
+	<script src="/global_assets/js/plugins/forms/tags/tagsinput.min.js"></script>
 
 	<script src="/assets/js/app.js"></script>
-	<script src="/global_assets/js/demo_pages/dashboard.js"></script>
-	<script src="/global_assets/js/demo_pages/layout_fixed_sidebar_custom.js"></script>
 	<!-- /theme JS files -->

resources/views/post/form.blade.php

@@ -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(isset($post))
+                    @if($post->id)
                     Sửa
                     @else
                     Thêm mới
@@ -45,39 +45,46 @@
                 <div class="card" >
                     <div class="card-body">
                         <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 đề <span class="text-danger">*</span></label>
                             <div class="col-lg-9">
-                                <input type="text" class="form-control" value="{{ isset($post) ? $post->title : ''}}" placeholder="Tiêu đề" name="title">
+                                <input type="text" class="form-control" value="{{ $post->id ? $post->title : ''}}" placeholder="Tiêu đề" name="title">
                             </div>
                         </div>
 
                         <div class="form-group row">
-                            <label class="col-lg-3 col-form-label">Ảnh:</label>
+                            <label class="col-lg-3 col-form-label">Ảnh </label>
                             <div class="col-lg-9">
-                                <input type="file" class="form-control" name="image">
+                                <input type="file" class="form-control form-input-styled" name="image">
                             </div>
                         </div>
 
                         <div class="form-group row">
-                            <label class="col-lg-3 col-form-label">Mô tả:</label>
+                            <label class="col-lg-3 col-form-label">Từ khóa <span class="text-danger">*</span></label>
                             <div class="col-lg-9">
-                                <input type="text" class="form-control" name= "description">
+                                <input type="text" data-role="tagsinput" class="form-control tagsinput" name="keywords" value="{{ $post->id ? $post->keywords : ''}}">
                             </div>
                         </div>
 
                         <div class="form-group row">
-                            <label class="col-lg-3 col-form-label">Trạng thái:</label>
+                            <label class="col-lg-3 col-form-label">Mô tả <span class="text-danger">*</span></label>
+                            <div class="col-lg-9">
+                                <input type="text" class="form-control" name= "description" value="{{ $post->id ? $post->description : ''}}">
+                            </div>
+                        </div>
+
+                        <div class="form-group row">
+                            <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-check-input" name="status" checked type="checkbox">
+                                        <input type="radio" class="form-input-styled" name="status" {{ $post->status ? '' : 'checked' }} type="checkbox">
                                         Ẩn
                                     </label>
                                 </div>
 
                                 <div class="form-check form-check-inline">
                                     <label class="form-check-label">
-                                        <input type="radio" class="form-check-input" name="status" type="checkbox" >
+                                        <input type="radio" class="form-input-styled" name="status" {{ $post->status ? 'checked' : '' }} type="checkbox" >
                                         Hiện
                                     </label>
                                 </div>
@@ -85,14 +92,26 @@
                         </div>
 
                         <div class="form-group row">
-                            <label class="col-lg-3 col-form-label">Nội dung:</label>
-                            <div class="col-lg-9">
-                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="content"></textarea>
-                            </div>
+                        <label class="col-lg-3 col-form-label">Danh mục <span class="text-danger">*</span></label>
+                        <div class="col-lg-9">
+                            <select class="form-control select-multiple-drag select2 col-lg-9" multiple="multiple" data-fouc name="category_ids[]">    
+                                @foreach($categories as $category)
+                                    <option {{ in_array($category->id, $post->categories->pluck('id')->all()) ? 'selected' : '' }} value="{{$category->id}}" >{{$category->title }}</option>
+                                @endforeach    
+                            </select>
+                        </div>
+                        </div>
+
+                        <div class="form-group row">
+                            <label class="col-lg-3 col-form-label">Nội dung <span class="text-danger">*</span></label>
+                        </div>
+
+                        <div class="form-group row">
+                            <textarea name="content" id="content" rows="4" cols="4">{{ $post->content }}</textarea>
                         </div>
 
                         <div class="text-right">
-                            <button type="" class="btn btn-primary">Lưu <i class="icon-paperplane ml-2"></i></button>
+                            <button type="submit" class="btn btn-primary">Lưu <i class="icon-paperplane ml-2"></i></button>
                         </div>
                     </div>
                 </div>
@@ -100,19 +119,57 @@
             </div>
 
         </div>
+        
 
     </div>
-    <!-- /content area -->
 
 </form>
 <script>
     $(function(){
-        if (!$().validate) {
-            console.warn('Warning - validate.min.js is not loaded.');
-            return;
-        }
+        CKEDITOR.replace('content', {
+            height: 400,
+            extraPlugins: 'forms'
+        })
         $('.select2').select2()
+        $('.form-input-styled').uniform()
         $('#form').validate({
+            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
+            errorClass: 'validation-invalid-label',
+            successClass: 'validation-valid-label',
+            validClass: 'validation-valid-label',
+            highlight: function(element, errorClass) {
+                $(element).removeClass(errorClass);
+            },
+            unhighlight: function(element, errorClass) {
+                $(element).removeClass(errorClass);
+            },
+            success: function(label) {
+                label.addClass('validation-valid-label')
+            },
+
+            // Different components require proper error label placement
+            errorPlacement: function(error, element) {
+
+                // Unstyled checkboxes, radios
+                if (element.parents().hasClass('form-check')) {
+                    error.appendTo( element.parents('.form-check').parent() );
+                }
+
+                // Input with icons and Select2
+                else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
+                    error.appendTo( element.parent() );
+                }
+
+                // Input group, styled file input
+                else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
+                    error.appendTo( element.parent().parent() );
+                }
+
+                // Other elements
+                else {
+                    error.insertAfter(element);
+                }
+            },
             rules: {
                 title :{
                     required: true
@@ -123,9 +180,6 @@
                 content: {
                     required: true
                 },
-                status: {
-                    required: true
-                }
             }, 
             messages: {
                 title: {
@@ -137,9 +191,6 @@
                 content: {
                     required: "Nội dung không được bỏ trống"
                 },
-                status: {
-                    required: "Trường trạng thái là bắt buộc."
-                }
             }
         })
 

routes/web.php

@@ -18,9 +18,9 @@
 */
 
 Auth::routes();
-Route::middleware(['auth'])->group(function() {
+Route::middleware(['auth'])->group(function () {
     Route::resource('posts', PostController::class);
-    Route::prefix('posts')->name('posts.')->group(function() {
+    Route::prefix('posts')->name('posts.')->group(function () {
         Route::post('ajax', [PostController::class, 'ajax'])->name('ajax');
     });
     Route::get('/', [App\Http\Controllers\HomeController::class, 'index'])->name('home');