Laravel 8 complete Blog Project Part3
In this article, I am going to create a Blog project using Laravel 8 step by step Complete Laravel blog project step by step Part3 if you found In the previous …
In this article, I am going to create a Blog project using Laravel 8 step by step
Complete Laravel blog project step by step Part3
if you found In the previous articles, we have created an Admin login and there have been some login errors. we are trying to log in with an encrypted password but we cant. So, First, we rectify the login functionality
AdminController.php
public function submit_login(Request $request)
{
$request->validate([
'username'=>'required',
'password'=>'required'
]);
$userCheck=Admin::where(['username'=>$request->username,'password'=>$request->password])->count();
if($userCheck>0){
$adminData=Admin::where(['username'=>$request->username,'password'=>$request->password])->first();
session(['adminData'=>$adminData]);
return redirect('admin/dashboard');
}else{
return redirect('admin/login')->with('error',"Invalid Username and Password");
}Replace with below code
import use Illuminate\Support\Facades\Hash;
AdminController.php
use Illuminate\Support\Facades\Hash;
public function submit_login(Request $request)
{
$username = $request->input('username');
$password = $request->input('password');
$user = Admin::where('username', '=', $username)->first();
if (!$user) {
// return response()->json(['success'=>false, 'message' => 'Login Fail, please check email id']);
return redirect('admin/login')->with('error',"Invalid Username");
}
if (!Hash::check($password, $user->password)) {
// return response()->json(['success'=>false, 'message' => 'Login Fail, pls check password']);
return redirect('admin/login')->with('error',"Invalid Password");
}
// return response()->json(['success'=>true,'message'=>'success', 'data' => $user]);
session(['adminData'=>$user]);
return redirect('admin/dashboard');Login functionality is working properly. now create a CategoryController with resource controller run the below code
php artisan make:Controller CategoryController -r
Controller created successfully.Resource controller has been created by default seven method index, create, store, show, edit, update, destroy which was created by the -r flag
CategoryController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class CategoryController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}Open web.php file and import CategoryController and create resource route like below
use App\Http\Controllers\CategoryController;
Route::resource("category",CategoryController::class);Then run the command
php artisan route:list
You can see all function names and his URI is listed which was created with the -r flag resource controller.
Now we will code under the index function and make a route for the same is given below. Note: We don’t need to create each and every route because by default resource controller make itself
public function index()
{
return view('backend.category.index');
}before creating the function make a folder name category under the backend folder and a category folder create a file named index.blade.php
Creat route for assessing this page as given below
Route::resource("admin/category",CategoryController::class);Note: For assessing the resource controller we need to follow these rules Resources should be defined after the Route:: and “admin/category” is the Url, CategoryController is the class. We don’t need to define route every time like we want to submit form data that time we need to pass URI and make code under the create function
Now we will create a form for the Category and will insert data into the database.
Create a category folder under the backend folder and create a file name add.blade.php and paste the below code
<h1 class="text-center">Addcategory<h1>
<div class="text-center my-4">
<a href="{{url('admin/category')}}"><button class="btn btn-primary">Show Data</button> </a>
</div>
<span>
@if($errors)
@foreach($errors->all() as $error)
<p class="text-danger">{{$error}}</p>
@endforeach
@endif
@if(Session::has('success'))
<p class="text-success">{{session('success')}}</p>
@endif
</span>
<form method="POST" action="{{url('admin/category')}}" enctype="multipart/form-data">
@csrf
<table class="table table-bordered">
<tr>
<th> Title </th>
<td><input type="text" name="title" class="form-control" required></td>
</tr>
<tr>
<th> Details </th>
<td><input type="text" name="detail" class="form-control" /></td>
</tr>
<tr>
<th> Image </th>
<td>
<input type="hidden" value="noimage" name="cat_image">
<input type="file" name="cat_image" class="form-control" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" class="btn btn-primary" />
</td>
</tr>
</table>
</form>Paste the below code under the store function
CattegoryController.php
public function store(Request $request)
{
$request->validate([
'title'=>'required',
// 'detail'=>'required',
// 'image'=>'require'
]);
if($request->hasFile('cat_image')){
$image=$request->file('cat_image');
$reImage=time().'.'.$image->getClientOriginalExtension();
$dest=public_path('imgs');
$image->move($dest,$reImage);
}else{
$reImage=$request->cat_image;
}
$category= new Category;
$category->title=$request->title;
$category->detail=$request->detail;
// $category->image=$request->file('file')->store('products');
$category->image=$reImage;
$category->save();
return redirect('admin/category/create')->with('success', 'Data has been added');
}I will explain the code one by one
<form method=”POST” action=”{{url(‘admin/category’)}}” enctype=”multipart/form-data”>
POST is the method for submitting the data and we use enctype=”multipart/form-data” because we can’t save the file or image without “multipart/form-data” and we set the action in the same URL
Now under the store function, we pass the Request parameter and $request getting the form value. Validate function validated that the title is required. Now we are saving the data into the database so we create an object $category= new Category, and $request variable receives the form value. For the image uploading, we simply set hidden filed if the image is not set by the user then by default image field save into the database with no image value. if the image uploaded by the user image will be saved into the public folder as name imgs, getClientOriginalExtension(); is the default function it helps to identify which image format uploaded by the user. time() PHP function for the getting the time.
Now we will create a layout for the admin panel.
Create a folder name layout under the resources→views folder and create a file name layout.blade.php
@yield(‘content’)
we change content only navbar sidebar and footer will be the same. so with the help of layout, we can set simply using extend the layout.
@extends(‘layout’)
@section(‘content’)
@endsection
layout.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="@yield('meta_desc')" />
<meta name="author" content="" />
<title>@yield('title','Admin Dashboard')</title>
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
<link href="{{asset('backend')}}/css/styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
@if(!Session::has('adminData'))
<script>
window.location.href="{{url('admin/login')}}";
</script>
@endif
</head>
<body class="sb-nav-fixed">
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
<!-- Navbar Brand-->
<a class="navbar-brand ps-3" href="{{url('admin/dashboard')}}">Magic</a>
<!-- Sidebar Toggle-->
<button class="btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
<!-- Navbar Search-->
<form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search for..." aria-label="Search for..." aria-describedby="btnNavbarSearch" />
<button class="btn btn-primary" id="btnNavbarSearch" type="button"><i class="fas fa-search"></i></button>
</div>
</form>
<!-- Navbar-->
<ul class="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#!">Settings</a></li>
<li><a class="dropdown-item" href="#!">Activity Log</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="{{url('admin/logout')}}">Logout</a></li>
</ul>
</li>
</ul>
</nav>
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
<div class="sb-sidenav-menu">
<div class="nav">
<div class="sb-sidenav-menu-heading">Core</div>
<a class="nav-link" href="{{url('admin/dashboard')}}">
<div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
Dashboard
</a>
<div class="sb-sidenav-menu-heading">Interface</div>
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
<div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
Category
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">
<nav class="sb-sidenav-menu-nested nav">
<a class="nav-link" href="{{url('admin/category/create')}}">Post Category</a>
<a class="nav-link" href="{{url('admin/category')}}">View Category</a>
</nav>
</div>
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">
<div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
Post
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-bs-parent="#sidenavAccordion">
<nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">
Post Articles
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
<nav class="sb-sidenav-menu-nested nav">
<a class="nav-link" href="{{url('admin/post')}}">List Post</a>
<a class="nav-link" href="{{url('admin/post/create')}}">Add Post</a>
<a class="nav-link" href="password.html">Forgot Password</a>
</nav>
</div>
<a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError">
Error
<div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
</a>
<div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-bs-parent="#sidenavAccordionPages">
<nav class="sb-sidenav-menu-nested nav">
<a class="nav-link" href="401.html">401 Page</a>
<a class="nav-link" href="404.html">404 Page</a>
<a class="nav-link" href="500.html">500 Page</a>
</nav>
</div>
</nav>
</div>
<div class="sb-sidenav-menu-heading">Addons</div>
<a class="nav-link" href="{{url('admin/user')}}">
<div class="fas fa-fw fa-users"> <i class="fas fa-chart-area"></i></div>
Users
</a>
<a class="nav-link" href="{{url('admin/comment')}}">
<div class="fas fa-fw fa-comments"><i class="fas fa-chart-area"></i></div>
Comments
</a>
<a class="nav-link" href="{{url('admin/setting')}}">
<div class="fas fa-fw fa-cog"><i class="fas fa-chart-area"></i></div>
Settings
</a>
<a class="nav-link" href="{{url('admin/logout')}}">
<div class="sb-nav-link-icon"><i class="fas fa-sign-out-alt"></i></div>
Logout
</a>
</div>
</div>
<div class="sb-sidenav-footer">
<div class="small">Logged in as:</div>
Start Bootstrap
</div>
</nav>
</div>
<div id="layoutSidenav_content">
@yield('content')
<footer class="py-4 bg-light mt-auto">
<div class="container-fluid px-4">
<div class="d-flex align-items-center justify-content-between small">
<div class="text-muted">Copyright © Your Website 2021</div>
<div>
<a href="#">Privacy Policy</a>
·
<a href="#">Terms & Conditions</a>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="{{asset('backend')}}/js/scripts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
<script src="{{asset('backend')}}/assets/demo/chart-area-demo.js"></script>
<script src="{{asset('backend')}}/assets/demo/chart-bar-demo.js"></script>
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
<script src="{{asset('backend')}}/js/datatables-simple-demo.js"></script>
</body>
</html>dasboard.blade.php
@extends('layout')
@section('content')
<main>
<div class="container-fluid px-4">
<h1 class="mt-4">Dashboard</h1>
<ol class="breadcrumb mb-4">
<li class="breadcrumb-item active">Dashboard</li>
</ol>
<div class="row">
<div class="col-xl-3 col-md-6">
<div class="card bg-primary text-white mb-4">
<!-- <div class="card-body">{{\App\Models\Category::count()}} Card View</div> -->
<div class="card-footer d-flex align-items-center justify-content-between">
<!-- <a class="small text-white stretched-link" href="{{url('admin/category')}}">View Details</a> -->
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card bg-warning text-white mb-4">
<!-- <div class="card-body">{{\App\Models\Post::count()}} Post View</div> -->
<div class="card-footer d-flex align-items-center justify-content-between">
<!-- <a class="small text-white stretched-link" href="#">View Details</a> -->
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card bg-success text-white mb-4">
<!-- <div class="card-body">{{\App\Models\Comment::count()}} Comments</div> -->
<div class="card-footer d-flex align-items-center justify-content-between">
<!-- <a class="small text-white stretched-link" href="#">View Details</a> -->
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="card bg-danger text-white mb-4">
<!-- <div class="card-body">{{\App\Models\User::count()}} Users</div> -->
<div class="card-footer d-flex align-items-center justify-content-between">
<!-- <a class="small text-white stretched-link" href="#">View Details</a> -->
<div class="small text-white"><i class="fas fa-angle-right"></i></div>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<i class="fas fa-table me-1"></i>
DataTable Example
</div>
<div class="card-body">
</div>
</div>
</div>
</main>
@endsectionPart 3 finished. please wait for part4
