539 lines
26 KiB
HTML
539 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Nihla Rizkiyah</title>
|
|
<meta name="description" content="">
|
|
<meta name="keywords" content="">
|
|
|
|
<!-- Favicons -->
|
|
<link href="{{ url_for('static', filename='assets/img/ikn.png') }}" rel="icon">
|
|
<link href="{{ url_for('static', filename='assets/img/apple-touch-icon.png') }}" rel="apple-touch-icon">
|
|
|
|
<!-- Fonts -->
|
|
<link href="{{ url_for('static', filename='https://fonts.googleapis.com') }}" rel="preconnect">
|
|
<link href="{{ url_for('static', filename='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=Inter:wght@100;200;300;400;500;600;700;800;900&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="{{ url_for('static', filename='assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='assets/vendor/bootstrap-icons/bootstrap-icons.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='assets/vendor/aos/aos.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='assets/vendor/glightbox/css/glightbox.min.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='assets/vendor/swiper/swiper-bundle.min.css') }}" rel="stylesheet">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='') }}">
|
|
|
|
<!-- Main CSS File -->
|
|
<link href="{{ url_for('static', filename='assets/css/main.css') }}" rel="stylesheet">
|
|
|
|
<!-- DataTables CSS -->
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
|
|
|
<!-- jQuery -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
<!-- DataTables JS -->
|
|
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
<body class="index-page">
|
|
<header id="header" class="header d-flex align-items-center fixed-top">
|
|
<div
|
|
class="header-container container-fluid container-xl position-relative d-flex align-items-center justify-content-between">
|
|
|
|
<a href="#hero" class="logo d-flex align-items-center me-auto me-xl-0">
|
|
<h1 class="sitename">Analisis Sentimen</h1>
|
|
</a>
|
|
<nav id="navmenu" class="navmenu">
|
|
<ul>
|
|
<li><a href="#hero" class="active">Home</a></li>
|
|
<li><a href="#analisis">Analisis</a></li>
|
|
<!-- <li><a href="#visualisasi">Visualisasi</a></li>
|
|
<li><a href="#tweet">Tweet</a></li>
|
|
<li><a href="#split">Split Data</a></li> -->
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
|
|
</nav>
|
|
|
|
<a class="btn-getstarted" href="#analisis">Mulai Analisis</a>
|
|
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main">
|
|
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="hero section">
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6">
|
|
<div class="hero-content" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="company-badge mb-4">
|
|
<i class="bi bi-gear-fill me-2"></i>
|
|
Analisis Sentimen
|
|
</div>
|
|
|
|
<h1 class="mb-4">
|
|
Ulasan Pembelian Produk <br>
|
|
E-Commerce <br>
|
|
<span class="accent-text">Studi Kasus Tokopedia</span>
|
|
</h1>
|
|
|
|
<p class="mb-4 mb-md-5">
|
|
Penelitian ini bertujuan untuk mengetahui sentimen masyarakat terhadap Tokopedia melalui analisis ulasan pengguna.
|
|
Data dikumpulkan, dibersihkan, dan dianalisis menggunakan model RNN untuk mengklasifikasikan sentimen positif dan negatif.
|
|
Hasilnya diharapkan dapat memberikan gambaran kepuasan pelanggan.
|
|
|
|
|
|
</p>
|
|
|
|
<div class="hero-buttons">
|
|
<a href="#about" class="btn btn-primary me-0 me-sm-2 mx-1">Analisis</a>
|
|
<a href="https://www.youtube.com/watch?v=Y7f98aduVJ8"
|
|
class="btn btn-link mt-2 mt-sm-0 glightbox">
|
|
<i class="bi bi-play-circle me-1"></i>
|
|
Mulai Presentasi
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="hero-image" data-aos="zoom-out" data-aos-delay="300">
|
|
<img src="{{ url_for('static', filename='assets/img/illustration-1.webp') }}"
|
|
alt="Hero Image" class="img-fluid">
|
|
|
|
<div class="customers-badge">
|
|
<div class="customer-avatars">
|
|
<img src="{{ url_for('static', filename='assets/img/avatar-1.webp') }}"
|
|
alt="Customer 1" class="avatar">
|
|
<img src="{{ url_for('static', filename='assets/img/avatar-2.webp') }}"
|
|
alt="Customer 2" class="avatar">
|
|
<img src="{{ url_for('static', filename='assets/img/avatar-3.webp') }}"
|
|
alt="Customer 3" class="avatar">
|
|
<img src="{{ url_for('static', filename='assets/img/avatar-4.webp') }}"
|
|
alt="Customer 4" class="avatar">
|
|
<img src="{{ url_for('static', filename='assets/img/avatar-5.webp') }}"
|
|
alt="Customer 5" class="avatar">
|
|
<span class="avatar more">1000+</span>
|
|
</div>
|
|
<p class="mb-0 mt-2">Tokopedia menjadi tempat ribuan pengguna membagikan
|
|
pendapat mereka terkait produk, tren, dan layanan di dunia fashion.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row stats-row gy-4 mt-5" data-aos="fade-up" data-aos-delay="500">
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="stat-item">
|
|
<div class="stat-icon">
|
|
<i class="bi bi-trophy"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h4>Jumlah Dataset</h4>
|
|
<p class="mb-0">2217 Ulasan data</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="stat-item">
|
|
<div class="stat-icon">
|
|
<i class="bi bi-briefcase"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h4>Metode</h4>
|
|
<p class="mb-0">Recurrent Neural Network</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="stat-item">
|
|
<div class="stat-icon">
|
|
<i class="bi bi-graph-up"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h4>Akurasi Model</h4>
|
|
<p class="mb-0">0.80</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="stat-item">
|
|
<div class="stat-icon">
|
|
<i class="bi bi-award"></i>
|
|
</div>
|
|
<div class="stat-content">
|
|
<h4>Perbandingan Data Latih & Uji</h4>
|
|
<p class="mb-0">90% Training, 10% Testing</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Hero Section -->
|
|
|
|
<section id="analisis" class="tweet-section section">
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
<h2 class="section-title">Mulai Analisis</h2>
|
|
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
|
Tambah
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5" id="exampleModalLabel">Tambah Data</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<form action="/predict" method="POST">
|
|
<div class="modal-body">
|
|
<input type="text" name="text" class="form-control"
|
|
placeholder="Masukkan kalimat anda..">
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">Batal</button>
|
|
<button type="submit" class="btn btn-primary">Analisis</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table id="myTable" class="table table-hover table-striped table-bordered text-center align-middle">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Ulasan</th>
|
|
<th>Polarity</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for tweet in tweets %}
|
|
<tr>
|
|
<td>{{ loop.index }}</td>
|
|
<td class="text-start">{{ tweet.sentimen }}</td>
|
|
<td>
|
|
{% if tweet.klasifikasi == 'positif' %}
|
|
<span class="badge bg-success">Positif</span>
|
|
{% elif tweet.klasifikasi == 'negatif' %}
|
|
<span class="badge bg-danger">Negatif</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">Netral</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#myTable').DataTable({
|
|
"paging": true,
|
|
"searching": true,
|
|
"ordering": true,
|
|
"info": true,
|
|
"lengthMenu": [5, 10, 25, 50],
|
|
"language": {
|
|
"search": "Cari:",
|
|
"lengthMenu": "Tampilkan _MENU_ data",
|
|
"info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
|
"paginate": {
|
|
"next": "Berikutnya",
|
|
"previous": "Sebelumnya"
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<!-- -->
|
|
|
|
|
|
|
|
<!-- Testimonials Section -->
|
|
|
|
|
|
<!-- Stats Section -->
|
|
<section id="stats" class="stats section">
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="row justify-content-center gy-4 text-center">
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="stats-item w-100 h-100">
|
|
<span data-purecounter-start="0" data-purecounter-end="1217" data-purecounter-duration="1"
|
|
class="purecounter"></span>
|
|
<p>Positif</p>
|
|
</div>
|
|
</div><!-- End Stats Item -->
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="stats-item w-100 h-100">
|
|
<span data-purecounter-start="0" data-purecounter-end="1000" data-purecounter-duration="1"
|
|
class="purecounter"></span>
|
|
<p>Negatif</p>
|
|
</div>
|
|
</div><!-- End Stats Item -->
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="stats-item w-100 h-100">
|
|
<span data-purecounter-start="0" data-purecounter-end="2217" data-purecounter-duration="1"
|
|
class="purecounter"></span>
|
|
<p>Jumlah Dataset</p>
|
|
</div>
|
|
</div><!-- End Stats Item -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Pricing Section -->
|
|
<section id="split" class="pricing section light-background">
|
|
|
|
<!-- Section Title -->
|
|
</section>
|
|
|
|
<section class="faq-9 faq section light-background" id="faq">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-5" data-aos="fade-up">
|
|
<h2 class="faq-title">Pertanyaan Umum tentang Analisis Sentimen</h2>
|
|
<p class="faq-description">Temukan jawaban atas pertanyaan umum tentang metode analisis sentimen
|
|
yang
|
|
kami gunakan.</p>
|
|
</div>
|
|
|
|
<div class="col-lg-7" data-aos="fade-up" data-aos-delay="300">
|
|
<div class="faq-container">
|
|
<div class="faq-item faq-active">
|
|
<h3>Apa itu analisis sentimen?</h3>
|
|
<div class="faq-content">
|
|
<p> Analisis sentimen adalah teknik dalam pemrosesan bahasa alami (Natural Language Processing) yang digunakan untuk mengidentifikasi dan
|
|
mengklasifikasikan opini atau emosi dalam suatu teks, apakah bersifat positif, negatif, atau netral.
|
|
Dalam konteks e-commerce, analisis ini membantu memahami persepsi pelanggan terhadap produk melalui ulasan yang mereka berikan.</p>
|
|
</div>
|
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
|
</div>
|
|
<div class="faq-item">
|
|
<h3>Bagaimana cara kerja analisis sentimen dengan RNN?</h3>
|
|
<div class="faq-content">
|
|
<p>Recurrent Neural Network (RNN) bekerja dengan memproses data teks secara berurutan, sehingga mampu memahami konteks dan urutan kata dalam sebuah ulasan.
|
|
Model ini kemudian belajar mengenali pola-pola dalam teks untuk mengklasifikasikan sentimen menjadi positif atau negatif.</p>
|
|
</div>
|
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
|
</div>
|
|
<div class="faq-item">
|
|
<h3>Data apa yang digunakan dalam penelitian ini?</h3>
|
|
<div class="faq-content">
|
|
<p> Data yang digunakan berasal dari ulasan produk di platform e-commerce dan telah melalui proses preprocessing seperti pembersihan teks dan normalisasi.
|
|
Selanjutnya, data dilabeli secara otomatis menggunakan skrip Python berdasarkan daftar kata positif dan negatif yang telah ditentukan.</p>
|
|
</div>
|
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
|
</div>
|
|
<div class="faq-item">
|
|
<h3>Apakah analisis sentimen ini akurat?</h3>
|
|
<div class="faq-content">
|
|
<p>Analisis sentimen ini cukup akurat karena menggunakan model Recurrent Neural Network (RNN) yang telah dilatih dan diuji menggunakan dataset ulasan produk yang relevan.
|
|
Model ini mencapai tingkat akurasi sebesar 80%, menunjukkan kemampuannya dalam mengklasifikasikan sentimen positif dan negatif secara efektif.</p>
|
|
</div>
|
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Call To Action 2 Section -->
|
|
<section id="call-to-action-2" class="call-to-action-2 section dark-background">
|
|
<div class="container">
|
|
<div class="row justify-content-center" data-aos="zoom-in" data-aos-delay="100">
|
|
<div class="col-xl-10">
|
|
<div class="text-center">
|
|
<h3>Analisis Sentimen Ulasan Produk E-Commerce</h3>
|
|
<p> Perkembangan e-commerce yang pesat telah menghasilkan ribuan ulasan dari pengguna terhadap berbagai produk.
|
|
Melalui analisis sentimen, kita dapat mengidentifikasi opini konsumen baik positif maupun negatif yang terkandung dalam ulasan tersebut.
|
|
Hasil analisis ini dapat digunakan untuk memahami kepuasan pelanggan, meningkatkan kualitas produk, serta membantu pelaku bisnis dalam mengambil keputusan yang lebih tepat sasaran.
|
|
</p>
|
|
<a class="cta-btn" href="#">Lihat Hasil Analisis</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="contact section light-background">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Contact</h2>
|
|
<p>Hubungi kami untuk informasi lebih lanjut mengenai analisis sentimen ulasan produk
|
|
E-Commerce Tokopedia.</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row g-4 g-lg-5">
|
|
<div class="col-lg-5">
|
|
<div class="info-box" data-aos="fade-up" data-aos-delay="200">
|
|
<h3>Contact Info</h3>
|
|
<p>Silakan hubungi kami melalui informasi berikut:</p>
|
|
|
|
<div class="info-item" data-aos="fade-up" data-aos-delay="300">
|
|
<div class="icon-box">
|
|
<i class="bi bi-envelope"></i>
|
|
</div>
|
|
<div class="content">
|
|
<h4>Email</h4>
|
|
<p>nihlarizk14@gmail.com</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-7">
|
|
<div class="contact-form" data-aos="fade-up" data-aos-delay="300">
|
|
<h3>Get In Touch</h3>
|
|
<p>Kirimkan pertanyaan atau masukan Anda melalui formulir di bawah ini.</p>
|
|
|
|
<form action="forms/contact.php" method="post" class="php-email-form" data-aos="fade-up"
|
|
data-aos-delay="200">
|
|
<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>
|
|
|
|
|
|
</main>
|
|
|
|
<footer id="footer" class="footer">
|
|
|
|
<div class="container footer-top">
|
|
<div class="row gy-4">
|
|
<div class="col-lg-4 col-md-6 footer-about">
|
|
<a href="#hero" class="logo d-flex align-items-center">
|
|
<span class="sitename">Analisis Sentimen</span>
|
|
</a>
|
|
<div class="footer-contact pt-3">
|
|
<p>Jalan Mastrip</p>
|
|
<p>Jember</p>
|
|
<p class="mt-3"><strong>Phone:</strong> <span>+62 878 3868 5040</span></p>
|
|
<p><strong>Email:</strong> <span>nihlarizk14@gmail.com</span></p>
|
|
</div>
|
|
<div class="social-links d-flex mt-4">
|
|
<a href=""><i class="bi bi-twitter-x"></i></a>
|
|
<a href=""><i class="bi bi-facebook"></i></a>
|
|
<a href="https://www.instagram.com/nihla.att?igsh=eDU0dmp0ZTY0ODly&utm_source=qr"><i class="bi bi-instagram"></i></a>
|
|
<a href=""><i class="bi bi-linkedin"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-2 col-md-3 footer-links">
|
|
<h4>Useful Links</h4>
|
|
<ul>
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">About us</a></li>
|
|
<li><a href="#">Services</a></li>
|
|
<li><a href="#">Terms of service</a></li>
|
|
<li><a href="#">Privacy policy</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container copyright text-center mt-4">
|
|
<p>© <span>Copyright</span> <strong class="px-1 sitename">Nihla Rizkiyah</strong> <span>All Rights
|
|
Reserved</span>
|
|
</p>
|
|
<div class="credits">
|
|
Designed by <a href="">Nihla</a> Distributed By <a href="">R</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>
|
|
|
|
<!-- Vendor JS Files -->
|
|
<script src="{{ url_for('static', filename='assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='assets/vendor/php-email-form/validate.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='assets/vendor/aos/aos.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='assets/vendor/glightbox/js/glightbox.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='assets/vendor/swiper/swiper-bundle.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='assets/vendor/purecounter/purecounter_vanilla.js') }}"></script>
|
|
|
|
<!-- Main JS File -->
|
|
<script src="{{ url_for('static', filename='assets/js/main.js') }}"></script>
|
|
|
|
</body>
|
|
|
|
</html> |