475
Des 29
Bootcamp HMMI dengan Tema "Personal Blog & Portfolio Management System" - Modul Frontend Development
Senin, 29 Desember 2025 | oleh Selamat Muliyadi Harjono | Modul
Copy Template Asset (css, js) ke Directory Public
Silahkan dibuka folder template yang akan kita gunakan, kemudian copy semua isinya ke direktori porject kita di `public\theme\`.
Buat Blade Layout (layout.blade.php)
Laravel memiliki konsep MVC, yaitu Model, View dan Controller. Untuk pengerjaan frontend kita akan sering dan menggunakan MVC ini. Pada backend proses MVC sudah di generate otomatis oleh filament sehingga kita tidak melihatnya. Untuk frontend kita akan memulai pada bagian View.
Blade Layout berada lokasinya di:
resources\views\components\front
Silahkan buat sebuah file layout.blade.php di direktori tersebut. Kemudian copykan dan modifikasi file index.html dari template file ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Index - SnapFolio Bootstrap Template</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/aos/aos.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Main CSS File -->
<link href="assets/css/main.css" rel="stylesheet">
<!-- =======================================================
* Template Name: SnapFolio
* Template URL: https://bootstrapmade.com/snapfolio-bootstrap-portfolio-template/
* Updated: Jul 21 2025 with Bootstrap v5.3.7
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>
<body class="index-page">
<header id="header" class="header dark-background d-flex flex-column justify-content-center">
<i class="header-toggle d-xl-none bi bi-list"></i>
<div class="header-container d-flex flex-column align-items-start">
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="#hero" class="active"><i class="bi bi-house navicon"></i>Home</a></li>
<li><a href="#about"><i class="bi bi-person navicon"></i> About</a></li>
<li><a href="#resume"><i class="bi bi-file-earmark-text navicon"></i> Resume</a></li>
<li><a href="#portfolio"><i class="bi bi-images navicon"></i> Portfolio</a></li>
<li><a href="#services"><i class="bi bi-hdd-stack navicon"></i> Services</a></li>
<li class="dropdown"><a href="#"><i class="bi bi-menu-button navicon"></i> <span>Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="#">Dropdown 1</a></li>
<li class="dropdown"><a href="#"><span>Deep Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
<ul>
<li><a href="#">Deep Dropdown 1</a></li>
<li><a href="#">Deep Dropdown 2</a></li>
<li><a href="#">Deep Dropdown 3</a></li>
<li><a href="#">Deep Dropdown 4</a></li>
<li><a href="#">Deep Dropdown 5</a></li>
</ul>
</li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li><a href="#">Dropdown 4</a></li>
</ul>
</li>
<li><a href="#contact"><i class="bi bi-envelope navicon"></i> Contact</a></li>
</ul>
</nav>
<div class="social-links text-center">
<a href="#" class="twitter"><i class="bi bi-twitter-x"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="#" class="google-plus"><i class="bi bi-skype"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</header>
<main class="main">
<!-- Hero Section -->
<section id="hero" class="hero section">
<div class="background-elements">
<div class="bg-circle circle-1"></div>
<div class="bg-circle circle-2"></div>
</div>
<div class="hero-content">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6" data-aos="fade-right" data-aos-delay="100">
<div class="hero-text">
<h1>Snap<span class="accent-text">Folio</span></h1>
<h2>Alexander Chen</h2>
<p class="lead">I'm a <span class="typed" data-typed-items="UI/UX Designer, Web Developer, Brand Strategist, Creative Director"></span></p>
<p class="description">Passionate about creating exceptional digital experiences that blend innovative design with functional development. Let's bring your vision to life.</p>
<div class="hero-actions">
<a href="#portfolio" class="btn btn-primary">View My Work</a>
<a href="#contact" class="btn btn-outline">Get In Touch</a>
</div>
<div class="social-links">
<a href="#"><i class="bi bi-dribbble"></i></a>
<a href="#"><i class="bi bi-behance"></i></a>
<a href="#"><i class="bi bi-github"></i></a>
<a href="#"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
<div class="hero-visual">
<div class="profile-container">
<div class="profile-background"></div>
<img src="assets/img/profile/profile-2.webp" alt="Alexander Chen" class="profile-image">
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- /Hero Section -->
<!-- About Section -->
<section id="about" class="about section">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row">
<div class="col-lg-5" data-aos="zoom-in" data-aos-delay="200">
<div class="profile-card">
<div class="profile-header">
<div class="profile-image">
<img src="assets/img/profile/profile-square-3.webp" alt="Profile Image" class="img-fluid">
</div>
<div class="profile-badge">
<i class="bi bi-check-circle-fill"></i>
</div>
</div>
<div class="profile-content">
<h3>Marcus Thompson</h3>
<p class="profession">Creative Director & Developer</p>
<div class="contact-links">
<a href="mailto:marcus@example.com" class="contact-item">
<i class="bi bi-envelope"></i>
marcus@example.com
</a>
<a href="tel:+15551234567" class="contact-item">
<i class="bi bi-telephone"></i>
+1 (555) 123-4567
</a>
<a href="#" class="contact-item">
<i class="bi bi-geo-alt"></i>
San Francisco, CA
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-7" data-aos="fade-left" data-aos-delay="300">
<div class="about-content">
<div class="section-header">
<span class="badge-text">Get to Know Me</span>
<h2>Passionate About Creating Digital Experiences</h2>
</div>
<div class="description">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.</p>
</div>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-number">150+</div>
<div class="stat-label">Projects Completed</div>
</div>
<div class="stat-item">
<div class="stat-number">5+</div>
<div class="stat-label">Years Experience</div>
</div>
<div class="stat-item">
<div class="stat-number">98%</div>
<div class="stat-label">Client Satisfaction</div>
</div>
</div>
<div class="details-grid">
<div class="detail-row">
<div class="detail-item">
<span class="detail-label">Specialization</span>
<span class="detail-value">UI/UX Design & Development</span>
</div>
<div class="detail-item">
<span class="detail-label">Experience Level</span>
<span class="detail-value">Senior Professional</span>
</div>
</div>
<div class="detail-row">
<div class="detail-item">
<span class="detail-label">Education</span>
<span class="detail-value">Computer Science, MIT</span>
</div>
<div class="detail-item">
<span class="detail-label">Languages</span>
<span class="detail-value">English, Spanish, French</span>
</div>
</div>
</div>
<div class="cta-section">
<a href="#" class="btn btn-primary">
<i class="bi bi-download"></i>
Download Resume
</a>
<a href="#" class="btn btn-outline">
<i class="bi bi-chat-dots"></i>
Let's Talk
</a>
</div>
</div>
</div>
</div>
</div>
</section><!-- /About Section -->
<!-- Stats Section -->
<section id="stats" class="stats section light-background">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="stats-wrapper">
<div class="stats-item" data-aos="zoom-in" data-aos-delay="150">
<div class="icon-wrapper">
<i class="bi bi-emoji-smile"></i>
</div>
<span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="1" class="purecounter"></span>
<p>Happy Clients</p>
</div><!-- End Stats Item -->
<div class="stats-item" data-aos="zoom-in" data-aos-delay="200">
<div class="icon-wrapper">
<i class="bi bi-journal-richtext"></i>
</div>
<span data-purecounter-start="0" data-purecounter-end="521" data-purecounter-duration="1" class="purecounter"></span>
<p>Projects</p>
</div><!-- End Stats Item -->
<div class="stats-item" data-aos="zoom-in" data-aos-delay="250">
<div class="icon-wrapper">
<i class="bi bi-headset"></i>
</div>
<span data-purecounter-start="0" data-purecounter-end="1463" data-purecounter-duration="1" class="purecounter"></span>
<p>Hours Of Support</p>
</div><!-- End Stats Item -->
<div class="stats-item" data-aos="zoom-in" data-aos-delay="300">
<div class="icon-wrapper">
<i class="bi bi-people"></i>
</div>
<span data-purecounter-start="0" data-purecounter-end="15" data-purecounter-duration="1" class="purecounter"></span>
<p>Hard Workers</p>
</div><!-- End Stats Item -->
</div>
</div>
</div>
</div>
</section><!-- /Stats Section -->
<!-- Skills Section -->
<section id="skills" class="skills section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Skills</h2>
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
</div><!-- End Section Title -->
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row">
<div class="col-lg-6">
<div class="skills-category" data-aos="fade-up" data-aos-delay="200">
<h3>Front-end Development</h3>
<div class="skills-animation">
<div class="skill-item">
<div class="d-flex justify-content-between align-items-center">
<h4>HTML/CSS</h4>
<span class="skill-percentage">95%</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="skill-tooltip">Expert level knowledge of semantic HTML5 and modern CSS3 techniques</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between align-items-center">
<h4>JavaScript</h4>
<span class="skill-percentage">85%</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="skill-tooltip">Strong proficiency in ES6+, DOM manipulation, and modern frameworks</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between align-items-center">
<h4>React</h4>
<span class="skill-percentage">80%</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="skill-tooltip">Experience with React hooks, state management, and component architecture</div>
</div>
</div>
</div><!-- End Frontend Skills -->
</div>
<div class="col-lg-6">
<div class="skills-category" data-aos="fade-up" data-aos-delay="300">
<h3>Back-end Development</h3>
<div class="skills-animation">
<div class="skill-item">
<div class="d-flex justify-content-between align-items-center">
<h4>Node.js</h4>
<span class="skill-percentage">75%</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="skill-tooltip">Server-side JavaScript development with Express and REST APIs</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between align-items-center">
<h4>Python</h4>
<span class="skill-percentage">70%</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="skill-tooltip">Python development with Django and data analysis tools</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between align-items-center">
<h4>SQL</h4>
<span class="skill-percentage">65%</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="skill-tooltip">Database design, optimization, and complex queries</div>
</div>
</div>
</div><!-- End Backend Skills -->
</div>
</div>
</div>
</section><!-- /Skills Section -->
<!-- Resume Section -->
<section id="resume" class="resume section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Resume</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div><!-- End Section Title -->
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row gy-4">
<!-- Left column with summary and contact -->
<div class="col-lg-4">
<div class="resume-side" data-aos="fade-right" data-aos-delay="100">
<div class="profile-img mb-4">
<img src="assets/img/profile/profile-square-2.webp" alt="Profile" class="img-fluid rounded">
</div>
<h3>Professional Summary</h3>
<p>Driven software architect with expertise in developing scalable, high-performance enterprise solutions. Passionate about leveraging cutting-edge technologies to solve complex business challenges.</p>
<h3 class="mt-4">Contact Information</h3>
<ul class="contact-info list-unstyled">
<li><i class="bi bi-geo-alt"></i> 742 Evergreen Terrace, Springfield, MA 02101</li>
<li><i class="bi bi-envelope"></i> contact@example.com</li>
<li><i class="bi bi-phone"></i> +1 (555) 123-4567</li>
<li><i class="bi bi-linkedin"></i> linkedin.com/in/example</li>
</ul>
<div class="skills-animation mt-4">
<h3>Technical Skills</h3>
<div class="skill-item">
<div class="d-flex justify-content-between">
<span>Web Development</span>
<span>95%</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between">
<span>UI/UX Design</span>
<span>85%</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between">
<span>Cloud Architecture</span>
<span>90%</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="skill-item">
<div class="d-flex justify-content-between">
<span>Project Management</span>
<span>80%</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Right column with experience and education -->
<div class="col-lg-8 ps-4 ps-lg-5">
<!-- Experience Section -->
<div class="resume-section" data-aos="fade-up">
<h3><i class="bi bi-briefcase me-2"></i>Professional Experience</h3>
<div class="resume-item">
<h4>Senior Software Architect</h4>
<h5>2022 - Present</h5>
<p class="company"><i class="bi bi-building"></i> Tech Innovations Inc.</p>
<ul>
<li>Lead the architectural design and implementation of enterprise-scale applications</li>
<li>Mentor team of 12 developers and establish technical best practices</li>
<li>Drive adoption of microservices architecture and cloud-native solutions</li>
<li>Reduce system downtime by 75% through improved architecture and monitoring</li>
</ul>
</div>
<div class="resume-item">
<h4>Lead Developer</h4>
<h5>2019 - 2022</h5>
<p class="company"><i class="bi bi-building"></i> Digital Solutions Corp.</p>
<ul>
<li>Spearheaded development of company's flagship product reaching 1M+ users</li>
<li>Implemented CI/CD pipeline reducing deployment time by 60%</li>
<li>Managed team of 8 developers across multiple projects</li>
<li>Increased code test coverage from 45% to 90%</li>
</ul>
</div>
</div>
<!-- Education Section -->
<div class="resume-section" data-aos="fade-up" data-aos-delay="100">
<h3><i class="bi bi-mortarboard me-2"></i>Education</h3>
<div class="resume-item">
<h4>Master of Science in Computer Science</h4>
<h5>2017 - 2019</h5>
<p class="company"><i class="bi bi-building"></i> Stanford University</p>
<p>Specialized in Artificial Intelligence and Machine Learning. Graduated with honors.</p>
</div>
<div class="resume-item">
<h4>Bachelor of Science in Software Engineering</h4>
<h5>2013 - 2017</h5>
<p class="company"><i class="bi bi-building"></i> MIT</p>
<p>Dean's List all semesters. Led university's coding club.</p>
</div>
</div>
<!-- Certifications Section -->
<div class="resume-section" data-aos="fade-up" data-aos-delay="200">
<h3><i class="bi bi-award me-2"></i>Certifications</h3>
<div class="resume-item">
<h4>AWS Certified Solutions Architect - Professional</h4>
<h5>2023</h5>
</div>
<div class="resume-item">
<h4>Google Cloud Professional Architect</h4>
<h5>2022</h5>
</div>
</div>
</div>
</div>
</div>
</section><!-- /Resume Section -->
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Portfolio</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div><!-- End Section Title -->
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">
<div class="row">
<div class="col-lg-3 filter-sidebar">
<div class="filters-wrapper" data-aos="fade-right" data-aos-delay="150">
<ul class="portfolio-filters isotope-filters">
<li data-filter="*" class="filter-active">All Projects</li>
<li data-filter=".filter-photography">Photography</li>
<li data-filter=".filter-design">Design</li>
<li data-filter=".filter-automotive">Automotive</li>
<li data-filter=".filter-nature">Nature</li>
</ul>
</div>
</div>
<div class="col-lg-9">
<div class="row gy-4 portfolio-container isotope-container" data-aos="fade-up" data-aos-delay="200">
<div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-photography">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-portrait-1.webp" class="img-fluid" alt="Portfolio Image" loading="lazy">
<div class="portfolio-info">
<div class="content">
<span class="category">Photography</span>
<h4>Capturing Moments</h4>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-portrait-1.webp" class="glightbox" title="Capturing Moments"><i class="bi bi-plus-lg"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div><!-- End Portfolio Item -->
<div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-design">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.webp" class="img-fluid" alt="Portfolio Image" loading="lazy">
<div class="portfolio-info">
<div class="content">
<span class="category">Web Design</span>
<h4>Woodcraft Design</h4>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-2.webp" class="glightbox" title="Woodcraft Design"><i class="bi bi-plus-lg"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div><!-- End Portfolio Item -->
<div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-automotive">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-portrait-2.webp" class="img-fluid" alt="Portfolio Image" loading="lazy">
<div class="portfolio-info">
<div class="content">
<span class="category">Automotive</span>
<h4>Classic Beauty</h4>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-portrait-2.webp" class="glightbox" title="Classic Beauty"><i class="bi bi-plus-lg"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div><!-- End Portfolio Item -->
<div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-nature">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-portrait-4.webp" class="img-fluid" alt="Portfolio Image" loading="lazy">
<div class="portfolio-info">
<div class="content">
<span class="category">Nature</span>
<h4>Natural Growth</h4>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-portrait-4.webp" class="glightbox" title="Natural Growth"><i class="bi bi-plus-lg"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div><!-- End Portfolio Item -->
<div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-photography">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-5.webp" class="img-fluid" alt="Portfolio Image" loading="lazy">
<div class="portfolio-info">
<div class="content">
<span class="category">Photography</span>
<h4>Urban Stories</h4>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-5.webp" class="glightbox" title="Urban Stories"><i class="bi bi-plus-lg"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div><!-- End Portfolio Item -->
<div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-design">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-6.webp" class="img-fluid" alt="Portfolio Image" loading="lazy">
<div class="portfolio-info">
<div class="content">
<span class="category">Web Design</span>
<h4>Digital Experience</h4>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-6.webp" class="glightbox" title="Digital Experience"><i class="bi bi-plus-lg"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div><!-- End Portfolio Item -->
</div><!-- End Portfolio Container -->
</div>
</div>
</div>
</div>
</section><!-- /Portfolio Section -->
<!-- Services Section -->
<section id="services" class="services section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Services</h2>
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
</div><!-- End Section Title -->
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="service-header">
<div class="row align-items-center">
<div class="col-lg-8 col-md-12">
<div class="service-intro">
<h2 class="service-heading">
<div>Innovative business</div>
<div><span>performance solutions</span></div>
</h2>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="service-summary">
<p>
We integrate forward-thinking strategies, creative approaches, and state-of-the-art technologies to deliver exceptional customer experiences that drive growth and engage target markets.
</p>
<a href="services.html" class="service-btn">
View All Services
<i class="bi bi-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
<div class="service-card position-relative z-1">
<div class="service-icon">
<i class="bi bi-palette"></i>
</div>
<a href="service-details.html" class="card-action d-flex align-items-center justify-content-center rounded-circle">
<i class="bi bi-arrow-up-right"></i>
</a>
<h3>
<a href="service-details.html">
Creative <span>branding</span>
</a>
</h3>
<p>
Nulla facilisi. Maecenas eget magna neque. Suspendisse potenti. Curabitur eleifend nisi non magna vulputate, vel condimentum libero tempus. Proin consectetur feugiat diam.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
<div class="service-card position-relative z-1">
<div class="service-icon">
<i class="bi bi-gem"></i>
</div>
<a href="service-details.html" class="card-action d-flex align-items-center justify-content-center rounded-circle">
<i class="bi bi-arrow-up-right"></i>
</a>
<h3>
<a href="service-details.html">
Design <span>systems</span>
</a>
</h3>
<p>
Praesent euismod varius tellus, vel bibendum nunc interdum at. Donec vehicula diam vel metus venenatis convallis. Aliquam erat volutpat. Etiam viverra magna sit amet.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
<div class="service-card position-relative z-1">
<div class="service-icon">
<i class="bi bi-megaphone"></i>
</div>
<a href="service-details.html" class="card-action d-flex align-items-center justify-content-center rounded-circle">
<i class="bi bi-arrow-up-right"></i>
</a>
<h3>
<a href="service-details.html">
Marketing <span>strategies</span>
</a>
</h3>
<p>
Vivamus tempor velit id magna dictum, sed fermentum nisi faucibus. Integer nec pretium sapien. Fusce tincidunt ligula et purus consequat, ac pellentesque nulla eleifend.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
<div class="service-card position-relative z-1">
<div class="service-icon">
<i class="bi bi-code-slash"></i>
</div>
<a href="service-details.html" class="card-action d-flex align-items-center justify-content-center rounded-circle">
<i class="bi bi-arrow-up-right"></i>
</a>
<h3>
<a href="service-details.html">
Digital <span>platforms</span>
</a>
</h3>
<p>
Cras fermentum odio eu feugiat malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et accumsan cursus. Morbi placerat nulla vel nunc viverra accumsan.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
<div class="service-card position-relative z-1">
<div class="service-icon">
<i class="bi bi-graph-up"></i>
</div>
<a href="service-details.html" class="card-action d-flex align-items-center justify-content-center rounded-circle">
<i class="bi bi-arrow-up-right"></i>
</a>
<h3>
<a href="service-details.html">
Growth <span>acceleration</span>
</a>
</h3>
<p>
Aenean vel augue vel nisi bibendum posuere. Phasellus in lacus quis urna sodales dignissim. Duis aliquam libero eget risus facilisis. Quisque eget libero vel nisl fringilla.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
<div class="service-card position-relative z-1">
<div class="service-icon">
<i class="bi bi-camera-video"></i>
</div>
<a href="service-details.html" class="card-action d-flex align-items-center justify-content-center rounded-circle">
<i class="bi bi-arrow-up-right"></i>
</a>
<h3>
<a href="service-details.html">
Media <span>solutions</span>
</a>
</h3>
<p>
Etiam efficitur lacus in diam finibus, nec ultrices est sagittis. Maecenas elementum magna sed risus faucibus, nec commodo purus facilisis. Vestibulum accumsan magna.
</p>
</div>
</div>
</div>
</div>
</section><!-- /Services Section -->
<!-- Testimonials Section -->
<section id="testimonials" class="testimonials section light-background">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Testimonials</h2>
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
</div><!-- End Section Title -->
<div class="container">
<div class="testimonial-masonry">
<div class="testimonial-item" data-aos="fade-up">
<div class="testimonial-content">
<div class="quote-pattern">
<i class="bi bi-quote"></i>
</div>
<p>Implementing innovative strategies has revolutionized our approach to market challenges and competitive positioning.</p>
<div class="client-info">
<div class="client-image">
<img src="assets/img/person/person-f-7.webp" alt="Client">
</div>
<div class="client-details">
<h3>Rachel Bennett</h3>
<span class="position">Strategy Director</span>
</div>
</div>
</div>
</div>
<div class="testimonial-item highlight" data-aos="fade-up" data-aos-delay="100">
<div class="testimonial-content">
<div class="quote-pattern">
<i class="bi bi-quote"></i>
</div>
<p>Exceptional service delivery and innovative solutions have transformed our business operations, leading to remarkable growth and enhanced customer satisfaction across all touchpoints.</p>
<div class="client-info">
<div class="client-image">
<img src="assets/img/person/person-m-7.webp" alt="Client">
</div>
<div class="client-details">
<h3>Daniel Morgan</h3>
<span class="position">Chief Innovation Officer</span>
</div>
</div>
</div>
</div>
<div class="testimonial-item" data-aos="fade-up" data-aos-delay="200">
<div class="testimonial-content">
<div class="quote-pattern">
<i class="bi bi-quote"></i>
</div>
<p>Strategic partnership has enabled seamless digital transformation and operational excellence.</p>
<div class="client-info">
<div class="client-image">
<img src="assets/img/person/person-f-8.webp" alt="Client">
</div>
<div class="client-details">
<h3>Emma Thompson</h3>
<span class="position">Digital Lead</span>
</div>
</div>
</div>
</div>
<div class="testimonial-item" data-aos="fade-up" data-aos-delay="300">
<div class="testimonial-content">
<div class="quote-pattern">
<i class="bi bi-quote"></i>
</div>
<p>Professional expertise and dedication have significantly improved our project delivery timelines and quality metrics.</p>
<div class="client-info">
<div class="client-image">
<img src="assets/img/person/person-m-8.webp" alt="Client">
</div>
<div class="client-details">
<h3>Christopher Lee</h3>
<span class="position">Technical Director</span>
</div>
</div>
</div>
</div>
<div class="testimonial-item highlight" data-aos="fade-up" data-aos-delay="400">
<div class="testimonial-content">
<div class="quote-pattern">
<i class="bi bi-quote"></i>
</div>
<p>Collaborative approach and industry expertise have revolutionized our product development cycle, resulting in faster time-to-market and increased customer engagement levels.</p>
<div class="client-info">
<div class="client-image">
<img src="assets/img/person/person-f-9.webp" alt="Client">
</div>
<div class="client-details">
<h3>Olivia Carter</h3>
<span class="position">Product Manager</span>
</div>
</div>
</div>
</div>
<div class="testimonial-item" data-aos="fade-up" data-aos-delay="500">
<div class="testimonial-content">
<div class="quote-pattern">
<i class="bi bi-quote"></i>
</div>
<p>Innovative approach to user experience design has significantly enhanced our platform's engagement metrics and customer retention rates.</p>
<div class="client-info">
<div class="client-image">
<img src="assets/img/person/person-m-13.webp" alt="Client">
</div>
<div class="client-details">
<h3>Nathan Brooks</h3>
<span class="position">UX Director</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- /Testimonials Section -->
<!-- Contact Section -->
<section id="contact" class="contact section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Contact</h2>
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
</div><!-- End Section Title -->
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-lg-5">
<div class="info-box">
<h3>Contact Info</h3>
<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis.</p>
<div class="info-item">
<div class="icon-box">
<i class="bi bi-geo-alt"></i>
</div>
<div class="content">
<h4>Our Location</h4>
<p>A108 Adam Street</p>
<p>New York, NY 535022</p>
</div>
</div>
<div class="info-item">
<div class="icon-box">
<i class="bi bi-telephone"></i>
</div>
<div class="content">
<h4>Phone Number</h4>
<p>+1 5589 55488 55</p>
<p>+1 6678 254445 41</p>
</div>
</div>
<div class="info-item">
<div class="icon-box">
<i class="bi bi-envelope"></i>
</div>
<div class="content">
<h4>Email Address</h4>
<p>info@example.com</p>
<p>contact@example.com</p>
</div>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="contact-form">
<h3>Get In Touch</h3>
<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis.</p>
<form action="forms/contact.php" method="post" class="php-email-form">
<div class="row gy-4">
<div class="col-md-6">
<input type="text" name="name" class="form-control" placeholder="Your Name" required="">
</div>
<div class="col-md-6 ">
<input type="email" class="form-control" name="email" placeholder="Your Email" required="">
</div>
<div class="col-12">
<input type="text" class="form-control" name="subject" placeholder="Subject" required="">
</div>
<div class="col-12">
<textarea class="form-control" name="message" rows="6" placeholder="Message" required=""></textarea>
</div>
<div class="col-12 text-center">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
<button type="submit" class="btn">Send Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section><!-- /Contact Section -->
</main>
<footer id="footer" class="footer position-relative">
<div class="container">
<div class="copyright text-center ">
<p>© <span>Copyright</span> <strong class="px-1 sitename">iPortfolio</strong> <span>All Rights Reserved</span></p>
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you've purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
</div>
</div>
</footer>
<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Preloader -->
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/typed.js/typed.umd.js"></script>
<script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="assets/vendor/waypoints/noframework.waypoints.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<!-- Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>Tambahkan head html (library css), modifikasi menjadi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>
@isset($pageTitle)
{{ $pageTitle." | " }}
@endisset
{{ strtoupper(getenv('APP_NAME')) }}
</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Favicons -->
<link href="{{ asset('theme/assets/img/favicon.png') }}" rel="icon">
<link href="{{ asset('theme/assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">
<!-- Fonts -->
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="{{ asset('theme/assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('theme/assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
<link href="{{ asset('theme/assets/vendor/aos/aos.css') }}" rel="stylesheet">
<link href="{{ asset('theme/assets/vendor/glightbox/css/glightbox.min.css') }}" rel="stylesheet">
<link href="{{ asset('theme/assets/vendor/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
<!-- Main CSS File -->
<link href="{{ asset('theme/assets/css/main.css') }}" rel="stylesheet">
<!-- =======================================================
* Template Name: SnapFolio
* Template URL: https://bootstrapmade.com/snapfolio-bootstrap-portfolio-template/
* Updated: Jul 21 2025 with Bootstrap v5.3.7
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
======================================================== -->
</head>Tambahkan body (slot content, library js) html :
<body class="index-page">
{{ $slot }}
<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Preloader -->
<div id="preloader"></div>
<!-- Vendor JS Files -->
<script src="{{ asset('theme/assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/php-email-form/validate.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/aos/aos.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/typed.js/typed.umd.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/purecounter/purecounter_vanilla.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/waypoints/noframework.waypoints.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/isotope-layout/isotope.pkgd.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/imagesloaded/imagesloaded.pkgd.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/glightbox/js/glightbox.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/swiper/swiper-bundle.min.js') }}"></script>
<!-- Main JS File -->
<script src="{{ asset('theme/assets/js/main.js') }}"></script>
</body>
</html>Buat Header (header.blade.php)
Isi file header ini dengan 2 kondisi untuk menunya, yaitu yang memiliki url pada menu dan yang tidak memiliki url. Berikut isi file tersebut:
@if ($main_route=='beranda')
<header id="header" class="header dark-background d-flex flex-column justify-content-center">
<i class="header-toggle d-xl-none bi bi-list"></i>
<div class="header-container d-flex flex-column align-items-start">
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="#hero" class="active"><i class="bi bi-house navicon"></i>Beranda</a></li>
<li><a href="#about"><i class="bi bi-person navicon"></i> Profil</a></li>
<li><a href="#resume"><i class="bi bi-file-earmark-text navicon"></i> Resume</a></li>
<li><a href="#portofolio"><i class="bi bi-images navicon"></i> Portofolio</a></li>
<li><a href="#blog"><i class="bi bi-hdd-stack navicon"></i> Blog</a></li>
<li><a href="#gallery"><i class="bi bi-images navicon"></i> Gallery</a></li>
</ul>
</nav>
<div class="social-links text-center">
<a href="{{ $profil->twitter }}" class="twitter"><i class="bi bi-twitter-x"></i></a>
<a href="{{ $profil->twitter }}" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="{{ $profil->twitter }}" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="{{ $profil->twitter }}" class="google-plus"><i class="bi bi-tiktok"></i></a>
<a href="{{ $profil->twitter }}" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</header>
@else
<header id="header" class="header dark-background d-flex flex-column justify-content-center">
<i class="header-toggle d-xl-none bi bi-list"></i>
<div class="header-container d-flex flex-column align-items-start">
<nav id="navmenu" class="navmenu">
<ul>
<li><a href="{{ url('/') }}#hero" class="active"><i class="bi bi-house navicon"></i>Beranda</a></li>
<li><a href="{{ url('/') }}#about"><i class="bi bi-person navicon"></i> Profil</a></li>
<li><a href="{{ url('/') }}#resume"><i class="bi bi-file-earmark-text navicon"></i> Resume</a></li>
<li><a href="{{ url('/') }}#portofolio"><i class="bi bi-images navicon"></i> Portofolio</a></li>
<li><a href="{{ url('/') }}#blog"><i class="bi bi-hdd-stack navicon"></i> Blog</a></li>
<li><a href="{{ url('/') }}#gallery"><i class="bi bi-images navicon"></i> Gallery</a></li>
</ul>
</nav>
<div class="social-links text-center">
<a href="{{ $profil->twitter }}" class="twitter"><i class="bi bi-twitter-x"></i></a>
<a href="{{ $profil->twitter }}" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="{{ $profil->twitter }}" class="instagram"><i class="bi bi-instagram"></i></a>
<a href="{{ $profil->twitter }}" class="google-plus"><i class="bi bi-tiktok"></i></a>
<a href="{{ $profil->twitter }}" class="linkedin"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</header>
@endifBuat Footer (footer.blade.php)
Footer berisi informasi tentang copyright, sponsor, dan hal lainnya yang dibutuhkan. Berikut isi filenya:
<footer id="footer" class="footer position-relative">
<div class="container">
<div class="copyright text-center ">
<p><span>Copyright</span> ©{{ date('Y') }} <strong class="px-1 sitename">TanMarajo.my.id</strong> <span>All Rights Reserved</span></p>
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you've purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
Created by <a href="https://tanmarajo.my.id">Selamat Muliyadi Harjono</a> | Template Designed by <a href="https://bootstrapmade.com">BootstrapMade</a>
</div>
</div>
</footer>Buat Beranda Controller(BerandaController.php)
Controller lokasinya berada di:
app\Http\Controllers
Jalankan perintah berikut untuk membuatnya:
php artisan make:controller BerandaController
Beranda controller adalah sebuah controller yang menangani request dari halaman beranda, mengambil data dari database melalui Model, kemudian meneruskannya ke View. Tambahkan function index ke file controller tersebut:
public function index(Request $request){
$main_route = "beranda";
$profil = User::orderBy('id','asc')->first();
$riwayat_pendidikan = RiwayatPendidikan::where('user_id', $profil->id)->orderBy('tahun_mulai', 'asc')->get();
$pengalaman_berorganisasi = PengalamanBerorganisasi::where('user_id', $profil->id)->orderBy('tahun_mulai', 'asc')->get();
$pengalaman_kerja = PengalamanKerja::where('user_id', $profil->id)->orderBy('tahun_mulai', 'asc')->get();
$sertifikat = Sertifikat::where('user_id', $profil->id)->orderBy('tahun', 'asc')->get();
$jenis_skill = JenisSkill::orderBy('id', 'asc')->get();
$portofolio = Portofolio::where('user_id', $profil->id)->orderBy('id', 'desc')->get();
$post = Post::where('user_id', $profil->id)->orderBy('id', 'desc')->get();
$gallery = Gallery::where('user_id', $profil->id)->inRandomOrder()->get();
$gallery_album = Gallery::where('user_id', $profil->id)->distinct()->get(['album']);
$jenis_portofolio = JenisPortofolio::orderBy('id', 'asc')->get();
$kategori_post = KategoriPost::orderBy('id', 'asc')->get();
return view('components.front.beranda',
compact(
'main_route',
'profil',
'riwayat_pendidikan',
'pengalaman_berorganisasi',
'pengalaman_kerja',
'sertifikat',
'jenis_skill',
'portofolio',
'post',
'gallery',
'gallery_album',
'jenis_portofolio',
'kategori_post',
));
}Jika ada error yang muncul di VS Code, cukup klik kanan di posisi nama model yang error dan pilih import class.
Buat Post Controller(PostController.php)
Jalankan perintah berikut untuk membuatnya:
php artisan make:controller PostController
Post controller adalah sebuah controller yang menangani request untuk halaman post, mengambil data dari database melalui Model, kemudian meneruskannya ke View. Tambahkan 2 function ke file controller:
public function post($slug){
$main_route = "post";
$profil = User::orderBy('id','asc')->first();
$post = Post::where('status','Published')->where('slug',$slug)->firstOrFail();
$this->count_view($post);
return view('components.front.post-detail',
compact(
'post',
'profil',
'slug',
'main_route',
));
}
private function count_view($post){
$data = [
'dilihat'=>$post->dilihat + 1
];
Post::where('id', $post->id)->update($data);
}
Buat Portofolio Controller(PortofolioController.php)
Jalankan perintah berikut untuk membuatnya:
php artisan make:controller PortofolioController
Portofolio controller adalah sebuah controller yang menangani request untuk halaman portofolio, mengambil data dari database melalui Model, kemudian meneruskannya ke View. Tambahkan 2 function ke file controller tersebut:
public function portofolio($slug){
$main_route = "portofolio";
$profil = User::orderBy('id','asc')->first();
$portofolio = Portofolio::where('status','Published')->where('slug',$slug)->firstOrFail();
$this->count_view($portofolio);
return view('components.front.portofolio-detail',
compact(
'portofolio',
'profil',
'slug',
'main_route',
));
}
private function count_view($portofolio){
$data = [
'dilihat'=>$portofolio->dilihat + 1
];
Portofolio::where('id', $portofolio->id)->update($data);
}Modifikasi Web Route (web.php)
Route lokasinya berada di:
routes\web.php
Modifikasi filenya menjadi seperti berikut:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
use App\Http\Controllers\BerandaController;
use App\Http\Controllers\PortofolioController;
Route::get('/', [BerandaController::class, 'index']);
Route::get('/post/{slug}', [PostController::class, 'post'])->name('post-detail');
Route::get('/portofolio/{slug}', [PortofolioController::class, 'portofolio'])->name('portofolio-detail');
Membuat View Beranda (beranda.blade.php)
View lokasinya berada di:
resources\views\components\front
Buat file dengan nama beranda.blade.php dan Modifikasi filenya menjadi seperti berikut:
<x-front.layout> </x-front.layout>
Ini artinya kita memanggil layout yang sudah kita buat sebelumnya. Untuk setiap halaman yang akan ditampilkan ke frontend, maka kita wajib membuat pemanggilan terhadap layout ini agar frontend kita konsisten tiap halamannya.
Menambahkan Navigation/Header dan Footer
Tambahkan include header dan footer di dalam layout menjadi seperti berikut:
<x-front.layout>
@include('components.front.header')
<main class="main">
</main>
@include('components.front.footer')
</x-front.layout>Include header berada diatas dan footer berada dibawah. Perlu diperhatikan bahwa tag main itu adalah penyesuaian dengan format template kita, dimana nanti content akan berada dalam tag main tersebut.
1. Hero Section
Tambahkan coding berikut di antara tag main berikut:
<x-front.layout>
@include('components.front.header')
<main class="main">
<!-- Hero Section -->
<section id="hero" class="hero section">
<div class="background-elements">
<div class="bg-circle circle-1"></div>
<div class="bg-circle circle-2"></div>
</div>
<div class="hero-content">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6" data-aos="fade-right" data-aos-delay="100">
<div class="hero-text">
<h1>Tan<span class="accent-text">Marajo</span></h1>
<h2>{{ $profil->name }}</h2>
<p class="lead">I'm a <span class="typed" data-typed-items="{{ $profil->profesi }}"></span></p>
<p class="description">{{ $profil->profil_singkat }}</p>
<div class="hero-actions">
<a href="#portfolio" class="btn btn-primary">Lihat Karya Saya</a>
<a href="#contact" class="btn btn-outline">Hubungi Saya</a>
</div>
<div class="social-links">
<a href="{{ $profil->facebook }}"><i class="bi bi-facebook"></i></a>
<a href="{{ $profil->twitter }}"><i class="bi bi-twitter-x"></i></a>
<a href="{{ $profil->instagram }}"><i class="bi bi-instagram"></i></a>
<a href="{{ $profil->linkedin }}"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left" data-aos-delay="200">
<div class="hero-visual">
<div class="profile-container">
<div class="profile-background"></div>
<img src="{{ asset($profil->avatar_url) }}" alt="$profil->nama" class="profile-image">
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- /Hero Section -->
</main>
@include('components.front.footer')
</x-front.layout>
2. About Section
Tambahkan coding berikut setelah Hero Section:
<x-front.layout>
@include('components.front.header')
<main class="main">
...
...
...
<!-- About Section -->
<section id="about" class="about section">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row">
<div class="col-lg-5" data-aos="zoom-in" data-aos-delay="200">
<div class="profile-card">
<div class="profile-header">
<div class="profile-image">
<img src="{{ $profil->avatar_url }}" alt="{{ $profil->nama }}" class="img-fluid">
</div>
<div class="profile-badge">
<i class="bi bi-check-circle-fill"></i>
</div>
</div>
<div class="profile-content">
<h3>{{ $profil->name }}</h3>
<p class="profession">{{ $profil->profesi }}</p>
<div class="contact-links">
<a href="mailto:marcus@example.com" class="contact-item">
<i class="bi bi-envelope"></i>
{{ $profil->email }}
</a>
<a href="tel:{{ $profil->no_telp }}" class="contact-item">
<i class="bi bi-telephone"></i>
{{ $profil->no_telp }}
</a>
<a href="#" class="contact-item">
<i class="bi bi-geo-alt"></i>
{{ $profil->alamat }}
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-7" data-aos="fade-left" data-aos-delay="300">
<div class="about-content">
<div class="section-header">
<span class="badge-text">Get to Know Me</span>
<h2>Passionate About Creating Digital Experiences</h2>
</div>
<div class="description">{!! $profil->profil_lengkap !!}</div>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-number">15+</div>
<div class="stat-label">Proyek Selesai</div>
</div>
<div class="stat-item">
<div class="stat-number">10+</div>
<div class="stat-label">Tahun Pengalaman</div>
</div>
<div class="stat-item">
<div class="stat-number">98%</div>
<div class="stat-label">Pelanggan Puas</div>
</div>
</div>
<div class="details-grid">
<div class="detail-row">
<div class="detail-item">
<span class="detail-label">Spesialisasi</span>
<span class="detail-value">Fullstack Web Development</span>
</div>
<div class="detail-item">
<span class="detail-label">Tingkat Pengalaman</span>
<span class="detail-value">Senior Professional</span>
</div>
</div>
<div class="detail-row">
<div class="detail-item">
<span class="detail-label">Pendidikan</span>
<span class="detail-value">Sistem Informasi, Universitas Dumai</span>
</div>
<div class="detail-item">
<span class="detail-label">Bahasa Pemrograman</span>
<span class="detail-value">PHP, Python, HTML, CSS, JavaScript</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- /About Section -->
</main>
@include('components.front.footer')
</x-front.layout>3. Skill Section
Tambahkan coding berikut setelah About Section:
<x-front.layout>
@include('components.front.header')
<main class="main">
...
...
...
<!-- Skills Section -->
<section id="skills" class="skills section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Skill</h2>
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
</div><!-- End Section Title -->
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row">
@foreach ($jenis_skill as $key=>$value)
<div class="col-lg-6">
<div class="skills-category" data-aos="fade-up" data-aos-delay="300">
<h3>{{ $value->nama }}</h3>
<div class="skills-animation">
@foreach ($value->skills as $key2=>$value2)
<div class="skill-item">
<div class="d-flex justify-content-between align-items-center">
<h4>{{ $value2->nama }}</h4>
<span class="skill-percentage">{{ $value2->persen }}%</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{ $value2->persen }}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="skill-tooltip">{{ $value2->deskripsi }}</div>
</div>
@endforeach
</div>
</div><!-- End Backend Skills -->
</div>
@endforeach
</div>
</div>
</section><!-- /Skills Section -->
</main>
@include('components.front.footer')
</x-front.layout>4. Resume Section
Tambahkan coding berikut setelah Skill Section:
<x-front.layout>
@include('components.front.header')
<main class="main">
...
...
...
<!-- Resume Section -->
<section id="resume" class="resume section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Resume</h2>
<p>Rangkuman Riwayat Hidup Author</p>
</div><!-- End Section Title -->
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row gy-4">
<!-- Left column with summary and contact -->
<div class="col-lg-4">
<div class="resume-side" data-aos="fade-right" data-aos-delay="100">
<div class="profile-img mb-4">
<img src="{{ $profil->avatar_url }}" alt="{{ $profil->name }}" class="img-fluid rounded">
</div>
<h3>Professional Summary</h3>
<p>Driven software architect with expertise in developing scalable, high-performance enterprise solutions. Passionate about leveraging cutting-edge technologies to solve complex business challenges.</p>
<h3 class="mt-4">Informasi Kontak</h3>
<ul class="contact-info list-unstyled">
<li><i class="bi bi-geo-alt"></i> {{ $profil->alamat }}</li>
<li><i class="bi bi-envelope"></i> {{ $profil->email }}</li>
<li><i class="bi bi-phone"></i> {{ $profil->no_telp }}</li>
<li><i class="bi bi-linkedin"></i> {{ $profil->linkedin }}</li>
</ul>
@foreach ($jenis_skill as $key=>$value)
<div class="skills-animation mt-4">
<h3>{{ $value->nama }}</h3>
@foreach ($value->skills as $key2=>$value2)
<div class="skill-item">
<div class="d-flex justify-content-between">
<span>{{ $value2->nama }}</span>
<span>{{ $value2->persen }}%</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{ $value2->persen }}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
@endforeach
</div>
</div>
@endforeach
</div>
<!-- Right column with experience and education -->
<div class="col-lg-8 ps-4 ps-lg-5">
<!-- Experience Section -->
<div class="resume-section" data-aos="fade-up">
<h3><i class="bi bi-briefcase me-2"></i>Pengalaman Kerja</h3>
@foreach ($pengalaman_kerja as $key=>$value)
<div class="resume-item">
<h4>{{ $value->nama }}</h4>
<h5><i class="bi bi-calendar-minus"></i> {{ $value->tahun_mulai }} - {{ $value->tahun_selesai }}</h5>
<p class="company"><i class="bi bi-building"></i> {{ $value->tempat_kerja }}</p>
{!! $value->deskripsi !!}
</div>
@endforeach
</div>
<!-- Experience Section -->
<div class="resume-section" data-aos="fade-up">
<h3><i class="bi bi-briefcase me-2"></i>Pengalaman Berorganisasi</h3>
@foreach ($pengalaman_berorganisasi as $key=>$value)
<div class="resume-item">
<h4>{{ $value->nama }}</h4>
<h5><i class="bi bi-calendar-minus"></i> {{ $value->tahun_mulai }} - {{ $value->tahun_selesai }}</h5>
<p class="company"><i class="bi bi-building"></i> {{ $value->organisasi }}</p>
{!! $value->deskripsi !!}
</div>
@endforeach
</div>
<!-- Education Section -->
<div class="resume-section" data-aos="fade-up" data-aos-delay="100">
<h3><i class="bi bi-mortarboard me-2"></i>Riwayat Pendidikan</h3>
@foreach ($riwayat_pendidikan as $key=>$value)
<div class="resume-item">
<h4>{{ $value->nama }}</h4>
<h5><i class="bi bi-calendar-minus"></i> {{ $value->tahun_mulai }} - {{ $value->tahun_selesai }}</h5>
<p class="company"><i class="bi bi-building"></i> {{ $value->lembaga }}</p>
<p>{{ $value->deskripsi }}</p>
</div>
@endforeach
</div>
<!-- Certifications Section -->
<div class="resume-section" data-aos="fade-up" data-aos-delay="200">
<h3><i class="bi bi-award me-2"></i>Certifications</h3>
@foreach ($sertifikat as $key=>$value)
<div class="resume-item">
<h4>{{ $value->nama }}</h4>
<h5><i>{{ $value->jenis_sertifikat->nama }}</i></h5>
<h5><i class="bi bi-calendar-minus"></i> {{ $value->tahun }}</h5>
<p class="company"><i class="bi bi-building"></i> {{ $value->penyelenggara }}</p>
{!! $value->deskripsi !!}
</div>
@endforeach
</div>
</div>
</div>
</div>
</section><!-- /Resume Section -->
</main>
@include('components.front.footer')
</x-front.layout>5. Portofolio Section
Tambahkan coding berikut setelah Resume Section:
<x-front.layout>
@include('components.front.header')
<main class="main">
...
...
...
<!-- Portofolio Section -->
<section id="portofolio" class="services section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Portofolio</h2>
<p>Karya, Proyek dan Pencapaian Yang Pernah Dihasilkan</p>
</div><!-- End Section Title -->
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row justify-content-center">
@foreach ($portofolio as $key=>$value)
<div class="col-lg-6 col-md-6" data-aos="fade-up" data-aos-delay="100">
<div class="service-card position-relative z-1">
<div class="service-icon">
<i class="bi bi-palette"></i>
</div>
<a href="{{ route('portofolio-detail',['slug'=>$value->slug]) }}" class="card-action d-flex align-items-center justify-content-center rounded-circle">
<i class="bi bi-arrow-up-right"></i>
</a>
<h3>
<a href="{{ route('portofolio-detail',['slug'=>$value->slug]) }}">
{{ $value->judul }}
</a>
</h3>
<p>
{{ $value->isi_singkat }}
</p>
</div>
</div>
@endforeach
</div>
</div>
</section><!-- /Services Section -->
</main>
@include('components.front.footer')
</x-front.layout>6. Blog Section
Tambahkan coding berikut setelah Portofolio Section:
<x-front.layout>
@include('components.front.header')
<main class="main">
...
...
...
<!-- Blog Section -->
<section id="blog" class="portfolio section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Blog</h2>
<p>Jurnal online yang berisi modul, artikel dan berita
sebagai media berbagi pengalaman, informasi maupun opini dari Author Selamat M. Harjono</p>
</div><!-- End Section Title -->
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">
<div class="row">
<div class="col-lg-3 filter-sidebar">
<div class="filters-wrapper" data-aos="fade-right" data-aos-delay="150">
<ul class="portfolio-filters isotope-filters">
<li data-filter="*" class="filter-active">Semua</li>
@foreach ($kategori_post as $key=>$value)
<li data-filter=".filter-{{ $value->slug }}">{{ $value->nama }}</li>
@endforeach
</ul>
</div>
</div>
<div class="col-lg-9">
<div class="row gy-4 portfolio-container isotope-container" data-aos="fade-up" data-aos-delay="200">
@foreach ($post as $key=>$value)
<div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-{{ $value->kategori_post->slug }}">
<div class="portfolio-wrap">
<img src="{{ asset($value->thumbnail) }}" class="img-fluid" alt="{{ $value->judul }}" loading="lazy">
<div class="portfolio-info">
<div class="content">
<span class="category">{{ $value->kategori_post->nama }}</span>
<h4 style="color: white;">{{ $value->judul }}</h4>
<div class="portfolio-links">
<a href="{{ route('post-detail',['slug'=>$value->slug]) }}" title="Lanjut Baca"><i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div><!-- End Portfolio Item -->
@endforeach
</div><!-- End Portfolio Container -->
</div>
</div>
</div>
</div>
</section><!-- /Portfolio Section -->
</main>
@include('components.front.footer')
</x-front.layout>7. Gallery Section
Tambahkan coding berikut setelah Blog Section:
<x-front.layout>
@include('components.front.header')
<main class="main">
...
...
...
<!-- Gallery Section -->
<section id="gallery" class="portfolio section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>Gallery</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div><!-- End Section Title -->
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="isotope-layout" data-default-filter="*" data-layout="masonry" data-sort="original-order">
<div class="row">
<div class="col-lg-3 filter-sidebar">
<div class="filters-wrapper" data-aos="fade-right" data-aos-delay="150">
<ul class="portfolio-filters isotope-filters">
<li data-filter="*" class="filter-active">Semua</li>
@foreach ($gallery_album as $key=>$value)
<li data-filter=".{{ $value->album }}">{{ $value->album }}</li>
@endforeach
</ul>
</div>
</div>
<div class="col-lg-9">
<div class="row gy-4 portfolio-container isotope-container" data-aos="fade-up" data-aos-delay="200">
@foreach ($gallery as $key=>$value)
<div class="col-lg-6 col-md-6 portfolio-item isotope-item filter-{{ $value->album }}">
<div class="portfolio-wrap">
<img src="{{ asset($value->photo) }}" class="img-fluid" alt="{{ $value->nama }}" loading="lazy">
<div class="portfolio-info">
<div class="content">
<span class="category">{{ $value->album }}</span>
<h4 style="color: white;">{{ $value->nama }}</h4>
<div class="portfolio-links">
<a href="{{ asset($value->photo) }}" class="glightbox" title="{{ $value->nama }}"><i class="bi bi-plus-lg"></i></a>
</div>
</div>
</div>
</div>
</div><!-- End Portfolio Item -->
@endforeach
</div><!-- End Portfolio Container -->
</div>
</div>
</div>
</div>
</section><!-- /Portfolio Section -->
</main>
@include('components.front.footer')
</x-front.layout>Membuat View Post Detail(post-detail.blade.php)
View lokasinya berada di:
resources\views\components\front
Buat file dengan nama post-detail.blade.php dan Modifikasi filenya menjadi seperti berikut:
<x-front.layout> </x-front.layout>
Menambahkan Navigation/Header dan Footer
Tambahkan include header dan footer di dalam layout menjadi seperti berikut:
<x-front.layout>
@include('components.front.header')
<main class="main">
</main>
@include('components.front.footer')
</x-front.layout>Include header berada diatas dan footer berada dibawah. Perlu diperhatikan bahwa tag main itu adalah penyesuaian dengan format template kita, dimana nanti content akan berada dalam tag main tersebut.
Tambahkan coding berikut di antara tag main berikut:
<x-front.layout>
@include('components.front.header')
<!-- Page Title -->
<div class="page-title dark-background">
<div class="container d-lg-flex justify-content-between align-items-center">
<h1 class="mb-2 mb-lg-0">Post Details</h1>
<nav class="breadcrumbs">
<ol>
<li><a href="index.html">Beranda</a></li>
<li class="current">Post Details</li>
</ol>
</nav>
</div>
</div><!-- End Page Title -->
<!-- Portfolio Details Section -->
<section id="portfolio-details" class="portfolio-details section">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row gy-4">
<div class="col-lg-8">
<div class="portfolio-details-slider swiper init-swiper">
<script type="application/json" class="swiper-config">
{
"loop": true,
"speed": 600,
"autoplay": {
"delay": 5000
},
"slidesPerView": "auto",
"pagination": {
"el": ".swiper-pagination",
"type": "bullets",
"clickable": true
}
}
</script>
<div class="swiper-wrapper align-items-center">
<div class="swiper-slide">
<img src="{{ asset($post->thumbnail) }}" alt="{{ $post->judul }}" class="img-fluid" loading="lazy">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="portfolio-info" data-aos="fade-left" data-aos-delay="200">
<h3>Post Information</h3>
<ul>
<li><strong>Kategori</strong>: {{ $post->kategori_post->nama }}</li>
<li><strong>Penulis</strong>: {{ $post->user->name }}</li>
<li><strong>Tanggal</strong>: {{ $post->created_at->isoFormat('D MMMM Y') }}</li>
<li><strong>Tag</strong>:
@foreach ($post->tags as $key=>$value)
<u>#{{ $value->nama }}</u>
@endforeach
</li>
</ul>
</div>
</div>
<div class="col-lg-12">
<div class="portfolio-description" data-aos="fade-up" data-aos-delay="300">
<h2>{{ $post->judul }}</h2>
<?php
$isi = str_replace('<img src=','<img loading="lazy" class="img-fluid w-100" src=', $post->isi_lengkap);
?>
{!! $isi !!}
</div>
</div>
</div>
</div>
</section><!-- /Portfolio Details Section -->
@include('components.front.footer')
</x-front.layout>Membuat View Portofolio Detail(portofolio-detail.blade.php)
View lokasinya berada di:
resources\views\components\front
Buat file dengan nama post-detail.blade.php dan Modifikasi filenya menjadi seperti berikut:
<x-front.layout> </x-front.layout>
Menambahkan Navigation/Header dan Footer
Tambahkan include header dan footer di dalam layout menjadi seperti berikut:
<x-front.layout>
@include('components.front.header')
<main class="main">
</main>
@include('components.front.footer')
</x-front.layout>Include header berada diatas dan footer berada dibawah. Perlu diperhatikan bahwa tag main itu adalah penyesuaian dengan format template kita, dimana nanti content akan berada dalam tag main tersebut.
Tambahkan coding berikut di antara tag main berikut:
<x-front.layout>
@include('components.front.header')
<!-- Page Title -->
<div class="page-title dark-background">
<div class="container d-lg-flex justify-content-between align-items-center">
<h1 class="mb-2 mb-lg-0">Detail Portofolio</h1>
<nav class="breadcrumbs">
<ol>
<li><a href="index.html">Beranda</a></li>
<li class="current">Detail Portofolio</li>
</ol>
</nav>
</div>
</div><!-- End Page Title -->
<!-- Portfolio Details Section -->
<section id="portfolio-details" class="portfolio-details section">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row gy-4">
<div class="col-lg-8">
<div class="portfolio-details-slider swiper init-swiper">
<script type="application/json" class="swiper-config">
{
"loop": true,
"speed": 600,
"autoplay": {
"delay": 5000
},
"slidesPerView": "auto",
"pagination": {
"el": ".swiper-pagination",
"type": "bullets",
"clickable": true
}
}
</script>
<div class="swiper-wrapper align-items-center">
<div class="swiper-slide">
<img src="{{ asset($portofolio->thumbnail) }}" alt="{{ $portofolio->judul }}" class="img-fluid" loading="lazy">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="portfolio-info" data-aos="fade-left" data-aos-delay="200">
<h3>Post Information</h3>
<ul>
<li><strong>Kategori</strong>: {{ $portofolio->jenis_portofolio->nama }}</li>
<li><strong>Penulis</strong>: {{ $portofolio->user->name }}</li>
<li><strong>Tanggal</strong>: {{ $portofolio->created_at->isoFormat('D MMMM Y') }}</li>
<li><strong>Project URL</strong>: <a href="#" target="_blank">www.example.com</a></li>
</ul>
</div>
</div>
<div class="col-lg-12">
<div class="portfolio-description" data-aos="fade-up" data-aos-delay="300">
<h2>{{ $portofolio->judul }}</h2>
<?php
$isi = str_replace('<img src=','<img loading="lazy" class="img-fluid w-100" src=', $portofolio->isi_lengkap);
?>
{!! $isi !!}
</div>
</div>
</div>
</div>
</section><!-- /Portfolio Details Section -->
@include('components.front.footer')
</x-front.layout>Hal-hal penting pada frontend kita sudah selesai kita buat. Untuk selanjutnya adalah menyesuaikan template text, warna, posisi, urutan dan sebagainya sesuai keinginan kita masing-masing.
Terimakasih
Semoga bermanfaat.