feat: homepage news

This commit is contained in:
myuqinurrohman 2025-03-29 13:18:13 +07:00
parent eaa4b823c4
commit 1a2b40ae18
8 changed files with 309 additions and 9 deletions

View File

@ -0,0 +1,47 @@
<?php
namespace App\Http\Controllers\Homepage;
use App\Http\Controllers\Controller;
use App\Models\News;
use Illuminate\Http\Request;
class NewsController extends Controller
{
public function index(Request $request){
$data = [
'title' => 'Berita',
'page' => 'news',
];
$search = $request->input('search', null);
if($search){
$data['news'] = News::where('title', 'LIKE', "%{$search}%")
// ->orWhere('content', 'LIKE', "%{$search}%")
->latest()
->simplePaginate(12);
}else{
$data['news'] = News::latest()->simplePaginate(12);
}
return view('homepage.news.index', $data);
}
public function read($slug){
$news = News::where('slug', $slug)->first();
$news->increment('views', 1);
$data = [
'title' => 'Berita',
'page' => 'news',
'news' => $news,
'popularNews' => News::orderBy('views', 'desc')->take(5)->get(),
'otherNews' => News::orderByDesc('id')->where('id', '!=', $news->id)->take(3)->get()
];
return view('homepage.news.read', $data);
}
}

View File

@ -18,6 +18,11 @@ class News extends Model
'link',
'tag',
'category',
'views',
'author_id'
];
public function author(){
return $this->belongsTo(User::class, 'author_id', 'id');
}
}

View File

@ -19,6 +19,12 @@ .information-img {
border-radius: 8px;
}
.popular-post-img {
width: 100%;
height: 100px;
object-fit: cover;
}
/* .information-img {
width: 100%;
height: 200px;

View File

@ -68,15 +68,15 @@
<li class="grid-item">
<div class="card bg-transparent border-0 h-100">
<div class="blog-image position-relative overflow-hidden border-radius-4px">
<a href="demo-elearning-blog-single-simple.html">
<img src="{{display_image($item->image, 'news')}}" alt="" class="information-img" />
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}">
<img src="{{asset(display_image($item->image, 'news'))}}" alt="" class="information-img" />
</a>
</div>
<div class="card-body px-0 pt-30px pb-30px">
<span class="fs-13 text-uppercase mb-5px d-block"><a href="blog-grid.html" class="blog-date text-dark-gray-hover">{{idn_date($item->created_at, 'l, d F y')}}</a></span>
<a href="demo-elearning-blog-single-simple.html" class="card-title mb-10px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block w-95 information-title">{{shorten_text($item->title, 40)}}</a>
<span class="fs-13 text-uppercase mb-5px d-block"><a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="blog-date text-dark-gray-hover">{{idn_date($item->created_at, 'l, d F y')}}</a></span>
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-title mb-10px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block w-95 information-title">{{shorten_text($item->title, 40)}}</a>
<p class="mb-10px w-95 information-desc">{{strip_tags(shorten_text($item->content, 50))}}</p>
<a href="demo-elearning-blog-single-simple.html" class="card-link alt-font fs-12 text-uppercase text-dark-gray text-dark-gray-hover fw-700">Baca Selengkapnya<i class="feather icon-feather-arrow-right icon-very-small"></i></a>
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-link alt-font fs-12 text-uppercase text-dark-gray text-dark-gray-hover fw-700">Baca Selengkapnya<i class="feather icon-feather-arrow-right icon-very-small"></i></a>
</div>
</div>
</li>
@ -116,7 +116,7 @@
<div class="card bg-transparent border-0 h-100">
<div class="blog-image position-relative overflow-hidden border-radius-4px">
<a href="demo-elearning-blog-single-simple.html">
<img src="{{display_image($item->image, 'news', 'simedkom-logo-circle.png')}}" alt="" class="information-img" />
<img src="{{asset(display_image($item->image, 'news', 'simedkom-logo-circle.png'))}}" alt="" class="information-img" />
</a>
</div>
<div class="card-body px-0 pt-30px pb-30px">

View File

@ -0,0 +1,58 @@
@include('partials.homepage.head')
<body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="">
@include('partials.homepage.header')
<!-- start page title -->
<section class="half-section page-title-center-alignment cover-background top-space-margin">
<div class="container">
<div class="row">
<div class="col-12 text-center position-relative page-title-large">
<h1 class="d-inline-block fw-600 ls-minus-1px text-dark-gray mb-15px">Berita</h1>
</div>
<div class="col-12 breadcrumb breadcrumb-style-01 d-flex justify-content-center">
<ul>
<li><a href="{{route('homepage.landing')}}">Beranda</a></li>
<li><a href="{{route('homepage.news.index')}}">Berita</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- end page title -->
<!-- start section -->
<section class="pt-0 ps-15 pe-15 xl-ps-2 xl-pe-2 lg-ps-2 lg-pe-2 sm-mx-0">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<ul class="blog-classic blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
{{-- <ul class="blog-classic blog-wrapper grid-loading grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large"> --}}
<li class="grid-sizer"></li>
@foreach ($news as $item)
<!-- start blog item -->
<li class="grid-item">
<div class="card bg-transparent border-0 h-100">
<div class="blog-image position-relative overflow-hidden border-radius-4px">
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}">
<img src="{{asset(display_image($item->image, 'news'))}}" alt="" class="information-img" />
</a>
</div>
<div class="card-body px-0 pt-30px pb-30px">
<span class="fs-13 text-uppercase mb-5px d-block"><a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="blog-date text-dark-gray-hover">{{idn_date($item->created_at, 'l, d F y')}}</a></span>
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-title mb-10px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block w-95 information-title">{{shorten_text($item->title, 40)}}</a>
<p class="mb-10px w-95 information-desc">{{strip_tags(shorten_text($item->content, 50))}}</p>
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-link alt-font fs-12 text-uppercase text-dark-gray text-dark-gray-hover fw-700">Baca Selengkapnya<i class="feather icon-feather-arrow-right icon-very-small"></i></a>
</div>
</div>
</li>
<!-- end blog item -->
@endforeach
</ul>
</div>
<div class="col-12 mt-2 d-flex justify-content-center">
{{$news->links()}}
</div>
</div>
</div>
</section>
<!-- end section -->
<!-- start footer -->
@include('partials.homepage.footer')

View File

@ -0,0 +1,178 @@
@include('partials.homepage.head')
<body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="">
@include('partials.homepage.header')
<!-- start section -->
<section class="top-space-margin right-side-bar">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-8 blog-standard md-mb-50px sm-mb-40px">
<!-- start blog details -->
<div class="col-12 blog-details mb-12">
<div class="entry-meta mb-20px fs-15">
<span><i class="text-dark-gray feather icon-feather-calendar"></i><a href="javascript:void(0);">{{idn_date($news->created_at, 'd F Y')}}</a></span>
<span><i class="text-dark-gray feather icon-feather-user"></i><a href="javascript:void(0);">{{$news->author->name}}</a></span>
<span><i class="text-dark-gray feather icon-feather-eye"></i><a href="javascript:void(0);">{{$news->views}}</a></span>
{{-- <span><i class="text-dark-gray feather icon-feather-eye"></i><a href="javascript:void(0);">{{$news->views}}</a></span> --}}
</div>
<h5 class="text-dark-gray fw-600 w-80 sm-w-100 mb-6">{{$news->title}}</h5>
<img src="{{asset(display_image($news->image, 'news'))}}" alt="Gambar {{$news->title}}" class="w-100 border-radius-6px mb-7">
{!!$news->content!!}
</div>
<div class="col-12">
<div class="row mb-50px sm-mb-30px">
<div class="tag-cloud col-12 col-md-9 text-center text-md-start sm-mb-15px">
<a href="javascript:void(0);">{{$news->tag}}</a>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 text-center elements-social social-icon-style-04">
<ul class="medium-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li><a class="twitter" href="http://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
<li><a class="instagram" href="http://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"><span></span></i></a></li>
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"><span></span></i></a></li>
<li><a class="behance" href="http://www.behance.com/" target="_blank"><i class="fa-brands fa-behance"></i><span></span></a></li>
</ul>
</div>
</div>
</div>
<!-- end blog details -->
</div>
<!-- start sidebar -->
<aside class="col-12 col-xl-4 col-lg-4 col-md-7 ps-55px xl-ps-50px lg-ps-15px sidebar">
<div class="mb-15 md-mb-50px xs-mb-35px">
<div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Berita terpopuler</div>
<ul class="popular-post-sidebar position-relative">
@foreach ($popularNews as $item)
<li class="d-flex align-items-center">
<figure>
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}"><img src="{{asset(display_image($item->image, 'news'))}}" alt="" class="popular-post-img"></a>
</figure>
<div class="col media-body">
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="fw-600 fs-17 text-dark-gray d-inline-block mb-10px">{{shorten_text($item->title, 30)}}</a>
<div><a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="d-inline-block fs-15">{{idn_date($item->created_at, 'd F y')}}</a></div>
</div>
</li>
@endforeach
</ul>
</div>
<div class="mb-17 md-mb-50px xs-mb-35px">
<div class="bg-white box-shadow-extra-large p-14 xl-p-10 newsletter-style-05">
<div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-20px pb-15px position-relative">Cari Berita</div>
<p class="fs-15 lh-24">Temukan informasi yang ingin Anda ketahui.</p>
<form action="{{route('homepage.news.index')}}" method="get" class="position-relative">
<input class="w-100 fs-15 input-small form-control box-shadow-medium-bottom border-radius-0px text-center required mb-10px" type="text" name="search" placeholder="Masukan kata kunci" />
<button type="submit" class="btn btn-small btn-dark-gray w-100 btn-box-shadow" aria-label="Cari">Cari</button>
<div class="form-results border-radius-4px mt-10px lh-normal pt-10px pb-10px ps-15px pe-15px fs-16 w-100 text-center position-absolute z-index-1 d-none"></div>
</form>
</div>
</div>
<div class="mb-15 md-mb-50px xs-mb-35px elements-social social-icon-style-10">
<div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Tetap Terkoneksi</div>
<div class="row row-cols-2 row-cols-lg-2 justify-content-center align-items-center g-0">
<div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="facebook text-dark-gray" href="https://www.facebook.com/" target="_blank">
<i class="fa-brands fa-facebook-f fs-18 me-10px"></i>
<span class="fw-500">Facebook</span>
</a>
</div>
<div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="dribbble text-dark-gray" href="http://www.dribbble.com" target="_blank">
<i class="fa-brands fa-dribbble fs-18 me-10px"></i>
<span class="fw-500">Dribbble</span>
</a>
</div>
<div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="twitter text-dark-gray" href="http://www.twitter.com" target="_blank">
<i class="fa-brands fa-twitter fs-18 me-10px"></i>
<span class="fw-500">Twitter</span>
</a>
</div>
<div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="youtube text-dark-gray" href="http://www.youtube.com" target="_blank">
<i class="fa-brands fa-youtube fs-18 me-10px"></i>
<span class="fw-500">Youtube</span>
</a>
</div>
<div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="instagram text-dark-gray" href="http://www.instagram.com" target="_blank">
<i class="fa-brands fa-instagram fs-18 me-10px"></i>
<span class="fw-500">Instagram</span>
</a>
</div>
<div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="vimeo text-dark-gray" href="https://vimeo.com/" target="_blank">
<i class="fa-brands fa-vimeo-v fs-18 me-10px"></i>
<span class="fw-500">Vimeo</span>
</a>
</div>
<div class="col border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="linkedin text-dark-gray" href="https://www.linkedin.com/" target="_blank">
<i class="fa-brands fa-linkedin-in fs-18 me-10px"></i>
<span class="fw-500">Linkedin</span>
</a>
</div>
<div class="col ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="behance text-dark-gray" href="http://www.behance.com/" target="_blank">
<i class="fa-brands fa-behance fs-18 me-10px"></i>
<span class="fw-500 fs-16">Behance</span>
</a>
</div>
</div>
</div>
<div class="mb-15 md-mb-50px xs-mb-35px">
<div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Tag</div>
<div class="tag-cloud">
<a href="javascript:void(0);">{{$news->tag}}</a>
</div>
</div>
</aside>
<!-- end sidebar -->
</div>
</div>
</section>
<!-- end section -->
<!-- start section -->
<section class="bg-very-light-gray">
<div class="container">
<div class="row justify-content-center mb-2">
<div class="col-12 col-lg-7 text-center">
<span class="fs-15 fw-500 text-uppercase d-inline-block">Eksplorasi</span>
<h4 class="text-dark-gray fw-600">Baca berita lainnya</h4>
</div>
</div>
<div class="row">
<div class="col-12">
<ul class="blog-grid blog-wrapper grid-loading grid grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
<li class="grid-sizer"></li>
@forelse ($otherNews as $item)
<!-- start blog item -->
<li class="grid-item">
<div class="card bg-transparent border-0 h-100">
<div class="blog-image position-relative overflow-hidden border-radius-4px">
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}">
<img src="{{asset(display_image($item->image, 'news'))}}" alt="" class="information-img" />
</a>
</div>
<div class="card-body px-0 pt-30px pb-30px">
<span class="fs-13 text-uppercase mb-5px d-block"><a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="blog-date text-dark-gray-hover">{{idn_date($item->created_at, 'l, d F y')}}</a></span>
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-title mb-10px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block w-95 information-title">{{shorten_text($item->title, 40)}}</a>
<p class="mb-10px w-95 information-desc">{{strip_tags(shorten_text($item->content, 50))}}</p>
<a href="{{route('homepage.news.read', ['slug' => $item->slug])}}" class="card-link alt-font fs-12 text-uppercase text-dark-gray text-dark-gray-hover fw-700">Baca Selengkapnya<i class="feather icon-feather-arrow-right icon-very-small"></i></a>
</div>
</div>
</li>
<!-- end blog item -->
@empty
<div style="text-align: center">
Tidak ada berita lainnya
</div>
@endforelse
</ul>
</div>
</div>
</div>
</section>
<!-- end section -->
<!-- start footer -->
@include('partials.homepage.footer')

View File

@ -32,8 +32,8 @@
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a href="demo-hosting.html" class="nav-link fs-25 {{$page === 'landing' ? 'active-menu' : ''}}">Beranda</a></li>
<li class="nav-item"><a href="demo-hosting-about.html" class="nav-link fs-25">Berita</a></li>
<li class="nav-item"><a href="{{route('homepage.landing')}}" class="nav-link fs-25 {{$page === 'landing' ? 'active-menu' : ''}}">Beranda</a></li>
<li class="nav-item"><a href="{{route('homepage.news.index')}}" class="nav-link fs-25 {{$page === 'news' ? 'active-menu' : ''}}">Berita</a></li>
<li class="nav-item"><a href="demo-hosting-hosting.html" class="nav-link fs-25">Pengumuman</a></li>
<li class="nav-item"><a href="demo-hosting-domain.html" class="nav-link fs-25">Tentang Kami</a></li>
<li class="nav-item"><a href="demo-hosting-pricing.html" class="nav-link fs-25">Kontak</a></li>

View File

@ -25,11 +25,17 @@
use App\Http\Controllers\Dashboard\SubClassificationController;
use App\Http\Controllers\Dashboard\SubLocationController;
use App\Http\Controllers\Dashboard\UserController;
use App\Http\Controllers\Homepage\NewsController as HomepageNewsController;
use App\Http\Controllers\Homepage\LandingPageController;
use Illuminate\Support\Facades\Route;
Route::name('homepage.')->group(function(){
Route::get('/', [LandingPageController::class, 'index']);
Route::get('/', [LandingPageController::class, 'index'])->name('landing');
Route::prefix('news')->name('news.')->controller(HomepageNewsController::class)->group(function(){
Route::get('/', 'index')->name('index');
Route::get('/{slug}', 'read')->name('read');
});
});
Route::prefix('auth')->group(function(){