- Vào thư mục product vào index.blade.php
<!-- Stored in resources/views/child.blade.php -->
@extends('layouts.admin')
@section('title')
<title>Add Product</title>
@endsection
@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
@include('partials.content-header',['name'=>'product', 'key'=>'List']) <!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<a href="{{route('product.create')}}" class="btn btn-success float-right mr-2">add</a>
</div>
<div class="col-md-12">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Tên sản phẩm</th>
<th scope="col">Giá</th>
<th scope="col">Hình ảnh</th>
<th scope="col">Danh mục</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{{-- @foreach($categories as $category)--}}
<tr>
<th scope="row">1</th>
<td>iphone 4</td>
<td>2.400.000</td>
<td>
<img src="" alt="">
</td>
<td>Điện thoại</td>
<td>
<a href=""
class="btn btn-default">Edit</a>
<a href=""
class="btn btn-danger">Delete</a>
</td>
</tr>
{{-- @endforeach--}}
</tbody>
</table>
</div>
<div class="col-md-12">
{{-- {{ $categories->links() }}--}}
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
@endsection
<!-- Stored in resources/views/child.blade.php -->
@extends('layouts.admin')
@section('title')
<title>Add product</title>
@endsection
@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection
@section('content')
<div class="content-wrapper">
@include('partials.content-header',['name'=>'product', 'key'=>'Add'])
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<form action="" method="post" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Tên sản phẩm</label>
<input class="form-control"
name="name"
placeholder="Nhập tên sản phẩm">
</div>
<div class="form-group">
<label>Tên giá sản phẩm</label>
<input type="text"
class="form-control"
name="price"
placeholder="Nhập giá sản phẩm">
</div>
<div class="form-group">
<label>Ảnh đại diện</label>
<input type="file"
class="form-control"
name="feature_image_path">
</div>
<div class="form-group">
<label>Ảnh chi tiết</label>
<input type="file"
multiple
class="form-control"
name="image_path[]">
</div>
<div class="form-group">
<label>Chọn danh mục</label>
<select class="form-control select2_init"
name="parent_id">
<option value="">Chọn danh mục</option>
{!! $htmlOption !!}}
</select>
</div>
<div class="form-group">
<label>Nhập tag cho sản phẩm</label>
<select class="form-control tags_select_choose" multiple="multiple">
</select>
</div>
<div class="form-group">
<label >Nhập nội dung</label>
<textarea name="content" class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(function () {
$(".tags_select_choose").select2({
tags: true,
tokenSeparators: [',', ' ']
});
$(".select2_init").select2({
placeholder: "Chọn danh mục",
allowClear:true
})
})
</script>
@endsection
- Vào layouts vào admin.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@yield('title')
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="{{ asset('adminlte/plugins/fontawesome-free/css/all.min.css') }}">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('adminlte/dist/css/adminlte.min.css') }}">
@yield('css')
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
@include('partials.header')
@include('partials.siderbar')
@yield('content')
@include('partials.footer')
</div>
<!-- jQuery -->
<script src="{{ asset('adminlte/plugins/jquery/jquery.min.js') }}"></script>
<!-- Bootstrap 4 -->
<script src="{{ asset('adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- AdminLTE App -->
<script src="{{ asset('adminlte/dist/js/adminlte.min.js') }}"></script>
@yield('js')
</body>
</html>
- Vào AdminProductController
<?php
namespace App\Http\Controllers;
use App\Category;
use App\Components\Recusive;
use Illuminate\Http\Request;
class AdminProductController extends Controller
{
private $category;
public function __construct(Category $category)
{
$this->category = $category;
}
public function index()
{
return view('admin.product.index');
}
public function create()
{
$htmlOption = $this->getCategory($parentId='');
return view('admin.product.add',compact('htmlOption'));
}
public function getCategory($parentId)
{
$data = $this->category->all();
$recusive = new Recusive($data);
$htmlOption = $recusive->categoryRecusive($parentId);
return $htmlOption;
}
}
Vào web.php:
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/admin', 'AdminController@loginAdmin');
Route::post('/admin', 'AdminController@postloginAdmin');
Route::get('/home', function () {
return view('home');
});
Route::prefix('admin')->group(function () {
//category
Route::prefix('categories')->group(function () {
Route::get('/',[
'as'=> 'categories.index',
'uses' => 'CategoryController@index'
]);
Route::get('/create',[
'as'=> 'categories.create',
'uses' => 'CategoryController@create'
]);
Route::post('/store',[
'as'=> 'categories.store',
'uses' => 'CategoryController@store'
]);
Route::get('/edit/{id}',[
'as'=> 'categories.edit',
'uses' => 'CategoryController@edit'
]);
Route::post('/update/{id}',[
'as'=> 'categories.update',
'uses' => 'CategoryController@update'
]);
Route::get('/delete/{id}',[
'as'=> 'categories.delete',
'uses' => 'CategoryController@delete'
]);
});
//menu
Route::prefix('menus')->group(function () {
Route::get('/',[
'as'=> 'menus.index',
'uses' => 'MenuController@index'
]);
Route::get('/create',[
'as'=> 'menus.create',
'uses' => 'MenuController@create'
]);
Route::post('/store',[
'as'=> 'menus.store',
'uses' => 'MenuController@store'
]);
Route::get('/edit/{id}',[
'as'=> 'menus.edit',
'uses' => 'MenuController@edit'
]);
Route::post('/update/{id}',[
'as'=> 'menus.update',
'uses' => 'MenuController@update'
]);
Route::get('/delete/{id}',[
'as'=> 'menus.delete',
'uses' => 'MenuController@delete'
]);
});
//Product
Route::prefix('product')->group(function () {
Route::get('/',[
'as'=> 'product.index',
'uses' => 'AdminProductController@index'
]);
Route::get('/create',[
'as'=> 'product.create',
'uses' => 'AdminProductController@create'
]);
});
});
- Vào public Tạo thư mục vendors Tạo thư mục select2.
- Coppy đường dẫn lên trình duyệt: https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css- Lưu file vào C:\xampp\htdocs\shopping\public\vendors\select2
- Coppy đường dẫn lên trình duyệt: https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js
- Lưu file vào C:\xampp\htdocs\shopping\public\vendors\select2
- Vào product => add.blade.php:
<!-- Stored in resources/views/child.blade.php -->
@extends('layouts.admin')
@section('title')
<title>Add product</title>
@endsection
@section('css')
<link href="{{ asset('vendors/select2/select2.min.css') }}" rel="stylesheet" />
@endsection
@section('content')
<div class="content-wrapper">
@include('partials.content-header',['name'=>'product', 'key'=>'Add'])
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<form action="" method="post" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label>Tên sản phẩm</label>
<input class="form-control"
name="name"
placeholder="Nhập tên sản phẩm">
</div>
<div class="form-group">
<label>Tên giá sản phẩm</label>
<input type="text"
class="form-control"
name="price"
placeholder="Nhập giá sản phẩm">
</div>
<div class="form-group">
<label>Ảnh đại diện</label>
<input type="file"
class="form-control-file"
name="feature_image_path">
</div>
<div class="form-group">
<label>Ảnh chi tiết</label>
<input type="file"
multiple
class="form-control-file"
name="image_path[]">
</div>
<div class="form-group">
<label>Chọn danh mục</label>
<select class="form-control select2_init"
name="parent_id">
<option value="">Chọn danh mục</option>
{!! $htmlOption !!}}
</select>
</div>
<div class="form-group">
<label>Nhập tag cho sản phẩm</label>
<select name="tags[]" class="form-control tags_select_choose" multiple="multiple">
</select>
</div>
<div class="form-group">
<label >Nhập nội dung</label>
<textarea name="content" class="form-control" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('js')
<script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
<script src="{{ asset('admin/product/add/add.js') }}"></script>
@endsection
- Vào public tạo thư mục admin => product => add tạo hai file add.css và add.js
- Vào add.css:
.select2-selection__choice{
background-color: #0e2401 !important;
}
- Vào add.js:
$(function () {
$(".tags_select_choose").select2({
tags: true,
tokenSeparators: [',', ' ']
});
$(".select2_init").select2({
placeholder: "Chọn danh mục",
allowClear:true
})
})
- Vào teminal chạy lệnh
composer require unisharp/laravel-filemanager
php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public
php artisan storage:link- Vào config => app.php
App\Providers\AppServiceProvider::class,
App\Providers\AuthServiceProvider::class,
// App\Providers\BroadcastServiceProvider::class,
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,
UniSharp\LaravelFilemanager\LaravelFilemanagerServiceProvider::class,
Intervention\Image\ImageServiceProvider::class,
'URL' => Illuminate\Support\Facades\URL::class,
'Validator' => Illuminate\Support\Facades\Validator::class,
'View' => Illuminate\Support\Facades\View::class,
'Image' => Intervention\Image\Facades\Image::class,
- Vào teminal chạy lệnh
php artisan route:clear
php artisan config:clear- Vào https://unisharp.github.io/laravel-filemanager/installation hoàng thành 6 bước.
- Vào add.js:
$(function () {
$(".tags_select_choose").select2({
tags: true,
tokenSeparators: [',', ' ']
});
$(".select2_init").select2({
placeholder: "Chọn danh mục",
allowClear:true
});
let editor_config = {
path_absolute : "/",
selector: 'textarea.tinymce_editor_init',
relative_urls: false,
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table directionality",
"emoticons template paste textpattern"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
file_picker_callback : function(callback, value, meta) {
let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
let cmsURL = editor_config.path_absolute + 'filemanager?editor=' + meta.fieldname;
if (meta.filetype == 'image') {
cmsURL = cmsURL + "&type=Images";
} else {
cmsURL = cmsURL + "&type=Files";
}
tinyMCE.activeEditor.windowManager.openUrl({
url : cmsURL,
automatic_uploads: true,
title : 'Filemanager',
width : x * 0.8,
height : y * 0.8,
resizable : "yes",
close_previous : "no",
onMessage: (api, message) => {
callback(message.content);
}
});
}
};
tinymce.init(editor_config);
});
- Vào resources => views => product => add.blade.php
<!-- Stored in resources/views/child.blade.php -->
@extends('layouts.admin')
@section('title')
<title>Add product</title>
@endsection
@section('css')
<link href="{{ asset('vendors/select2/select2.min.css') }}" rel="stylesheet" />
<link href="{{ asset('admins/product/add/add.css') }}" rel="stylesheet" />
@endsection
@section('content')
<div class="content-wrapper">
@include('partials.content-header',['name'=>'product', 'key'=>'Add'])
<form action="" method="post" enctype="multipart/form-data">
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
@csrf
<div class="form-group">
<label>Tên sản phẩm</label>
<input class="form-control"
name="name"
placeholder="Nhập tên sản phẩm">
</div>
<div class="form-group">
<label>Tên giá sản phẩm</label>
<input type="text"
class="form-control"
name="price"
placeholder="Nhập giá sản phẩm">
</div>
<div class="form-group">
<label>Ảnh đại diện</label>
<input type="file"
class="form-control-file"
name="feature_image_path">
</div>
<div class="form-group">
<label>Ảnh chi tiết</label>
<input type="file"
multiple
class="form-control-file"
name="image_path[]">
</div>
<div class="form-group">
<label>Chọn danh mục</label>
<select class="form-control select2_init"
name="parent_id">
<option value="">Chọn danh mục</option>
{!! $htmlOption !!}}
</select>
</div>
<div class="form-group">
<label>Nhập tag cho sản phẩm</label>
<select name="tags[]" class="form-control tags_select_choose" multiple="multiple">
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label >Nhập nội dung</label>
<textarea name="content" class="form-control tinymce_editor_init" rows="10">
</textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</form>
@endsection
@section('js')
<script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="{{ asset('admins/product/add/add.js') }}"></script>
@endsection
- Sửa lại tên file public => admin thành admins
- Vào .env
APP_KEY=base64:JFsFyWvdqTU7BBzM2B4bkY2Gc9ltOXi1VR7V9g025LU=
APP_DEBUG=true
APP_URL=http://localhost:127.0.0.1:8000
- Vào app Tạo thư mục Traits => Tạo file StorageImageTrait.php
<?php
namespace App\Traits;
use Illuminate\Http\Request;
use Storage;
trait StorageImageTrait{
public function storageTraitUpload(Request $request,$fielName, $foderName)
{
if($request->hasFile($fielName)){
$file = $request->$fielName;
$fileNameOrigin = $file->getClientOriginalName();
$fileNameHash = str_random(20) . '.' .$file->getClientOriginalExtension();
$filePath = $request->file($fielName)->storeAs('public/' . $foderName. '/' .auth()->id(),$fileNameHash);
$dataUpload = [
'file_name' => $fileNameOrigin,
'file_path' => Storage::url($filePath)
];
return $dataUpload;
}
return null;
}
}
- Vào AdminProductController.php
<?php
namespace App\Http\Controllers;
use App\Category;
use App\Components\Recusive;
use App\Traits\StorageImageTrait;
use Illuminate\Http\Request;
use Storage;
class AdminProductController extends Controller
{
use StorageImageTrait;
private $category;
public function __construct(Category $category)
{
$this->category = $category;
}
public function index()
{
return view('admin.product.index');
}
public function create()
{
$htmlOption = $this->getCategory($parentId='');
return view('admin.product.add',compact('htmlOption'));
}
public function getCategory($parentId)
{
$data = $this->category->all();
$recusive = new Recusive($data);
$htmlOption = $recusive->categoryRecusive($parentId);
return $htmlOption;
}
public function store(Request $request)
{
$dataUpload = $this->storageTraitUpload($request, 'feature_image_path','product');
dd($dataUpload);
}
}
- web.php-
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/admin', 'AdminController@loginAdmin');
Route::post('/admin', 'AdminController@postloginAdmin');
Route::get('/home', function () {
return view('home');
});
Route::prefix('admin')->group(function () {
//category
Route::prefix('categories')->group(function () {
Route::get('/',[
'as'=> 'categories.index',
'uses' => 'CategoryController@index'
]);
Route::get('/create',[
'as'=> 'categories.create',
'uses' => 'CategoryController@create'
]);
Route::post('/store',[
'as'=> 'categories.store',
'uses' => 'CategoryController@store'
]);
Route::get('/edit/{id}',[
'as'=> 'categories.edit',
'uses' => 'CategoryController@edit'
]);
Route::post('/update/{id}',[
'as'=> 'categories.update',
'uses' => 'CategoryController@update'
]);
Route::get('/delete/{id}',[
'as'=> 'categories.delete',
'uses' => 'CategoryController@delete'
]);
});
//menu
Route::prefix('menus')->group(function () {
Route::get('/',[
'as'=> 'menus.index',
'uses' => 'MenuController@index'
]);
Route::get('/create',[
'as'=> 'menus.create',
'uses' => 'MenuController@create'
]);
Route::post('/store',[
'as'=> 'menus.store',
'uses' => 'MenuController@store'
]);
Route::get('/edit/{id}',[
'as'=> 'menus.edit',
'uses' => 'MenuController@edit'
]);
Route::post('/update/{id}',[
'as'=> 'menus.update',
'uses' => 'MenuController@update'
]);
Route::get('/delete/{id}',[
'as'=> 'menus.delete',
'uses' => 'MenuController@delete'
]);
});
//Product
Route::prefix('product')->group(function () {
Route::get('/',[
'as'=> 'product.index',
'uses' => 'AdminProductController@index'
]);
Route::get('/create',[
'as'=> 'product.create',
'uses' => 'AdminProductController@create'
]);
Route::post('/store',[
'as'=> 'product.store',
'uses' => 'AdminProductController@store'
]);
});
});
- add.blade.php
<!-- Stored in resources/views/child.blade.php -->
@extends('layouts.admin')
@section('title')
<title>Add product</title>
@endsection
@section('css')
<link href="{{ asset('vendors/select2/select2.min.css') }}" rel="stylesheet" />
<link href="{{ asset('admins/product/add/add.css') }}" rel="stylesheet" />
@endsection
@section('content')
<div class="content-wrapper">
@include('partials.content-header',['name'=>'product', 'key'=>'Add'])
<form action="{{ route("product.store") }}" method="post" enctype="multipart/form-data">
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
@csrf
<div class="form-group">
<label>Tên sản phẩm</label>
<input class="form-control"
name="name"
placeholder="Nhập tên sản phẩm">
</div>
<div class="form-group">
<label>Tên giá sản phẩm</label>
<input type="text"
class="form-control"
name="price"
placeholder="Nhập giá sản phẩm">
</div>
<div class="form-group">
<label>Ảnh đại diện</label>
<input type="file"
class="form-control-file"
name="feature_image_path">
</div>
<div class="form-group">
<label>Ảnh chi tiết</label>
<input type="file"
multiple
class="form-control-file"
name="image_path[]">
</div>
<div class="form-group">
<label>Chọn danh mục</label>
<select class="form-control select2_init"
name="parent_id">
<option value="">Chọn danh mục</option>
{!! $htmlOption !!}}
</select>
</div>
<div class="form-group">
<label>Nhập tag cho sản phẩm</label>
<select name="tags[]" class="form-control tags_select_choose" multiple="multiple">
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label >Nhập nội dung</label>
<textarea name="content" class="form-control tinymce_editor_init" rows="10">
</textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</form>
@endsection
@section('js')
<script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="{{ asset('admins/product/add/add.js') }}"></script>
@endsection
- kết quả:
.jpg)
.jpg)
0 Nhận xét