1075 lines
54 KiB
HTML
1075 lines
54 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>Faisal Oktabrian Sholihin</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">
|
|
Dampak Pemindahan IKN <br>
|
|
Dibidang <br>
|
|
<span class="accent-text">Pendidikan & Kebudayaan</span>
|
|
</h1>
|
|
|
|
<p class="mb-4 mb-md-5">
|
|
Penulis ingin memahami lebih dalam mengenai tentang dampak pemindahan ibu kota IKN
|
|
Nusantara di bidang
|
|
Pendidikan & Kebudayaan
|
|
</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">media sosial x menjadi tempat untuk membahas isu-isu terkait
|
|
pendidikan hingga
|
|
kebudayaan</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">1380 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">Support Vector Machine</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.8320</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="features-2" class="features-2 section">
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-4">
|
|
<div class="feature-item text-end mb-5" data-aos="fade-right" data-aos-delay="200">
|
|
<div class="d-flex align-items-center justify-content-end gap-4">
|
|
<div class="feature-content">
|
|
<h3>Akses di Berbagai Perangkat</h3>
|
|
<p>Platform ini memungkinkan analisis sentimen terhadap dampak pemindahan Ibu Kota
|
|
Negara
|
|
(IKN) dalam sektor pendidikan dan kebudayaan secara fleksibel, dapat diakses
|
|
dari
|
|
berbagai perangkat.</p>
|
|
</div>
|
|
<div class="feature-icon flex-shrink-0">
|
|
<i class="bi bi-display"></i>
|
|
</div>
|
|
</div>
|
|
</div><!-- End .feature-item -->
|
|
|
|
<div class="feature-item text-end mb-5" data-aos="fade-right" data-aos-delay="300">
|
|
<div class="d-flex align-items-center justify-content-end gap-4">
|
|
<div class="feature-content">
|
|
<h3>Visualisasi Sentimen</h3>
|
|
<p>Menampilkan data sentimen publik terhadap kebijakan pemindahan IKN dalam bidang
|
|
pendidikan dan kebudayaan dalam bentuk grafis yang mudah dipahami.</p>
|
|
</div>
|
|
<div class="feature-icon flex-shrink-0">
|
|
<i class="bi bi-bar-chart"></i>
|
|
</div>
|
|
</div>
|
|
</div><!-- End .feature-item -->
|
|
|
|
<div class="feature-item text-end" data-aos="fade-right" data-aos-delay="400">
|
|
<div class="d-flex align-items-center justify-content-end gap-4">
|
|
<div class="feature-content">
|
|
<h3>Analisis Mendalam</h3>
|
|
<p>Menyediakan wawasan berbasis data mengenai persepsi masyarakat terhadap perubahan
|
|
sistem
|
|
pendidikan dan dampak budaya akibat perpindahan IKN.</p>
|
|
</div>
|
|
<div class="feature-icon flex-shrink-0">
|
|
<i class="bi bi-eye"></i>
|
|
</div>
|
|
</div>
|
|
</div><!-- End .feature-item -->
|
|
</div>
|
|
|
|
<div class="col-lg-4" data-aos="zoom-in" data-aos-delay="200">
|
|
<div class="phone-mockup text-center">
|
|
<img src="{{ url_for('static', filename='assets/img/ikn.png') }}" alt="Phone Mockup"
|
|
class="img-fluid">
|
|
</div>
|
|
</div><!-- End Phone Mockup -->
|
|
|
|
<div class="col-lg-4">
|
|
<div class="feature-item mb-5" data-aos="fade-left" data-aos-delay="200">
|
|
<div class="d-flex align-items-center gap-4">
|
|
<div class="feature-icon flex-shrink-0">
|
|
<i class="bi bi-code-square"></i>
|
|
</div>
|
|
<div class="feature-content">
|
|
<h3>Algoritma Canggih</h3>
|
|
<p>Menggunakan metode Support Vector Machine (SVM) untuk menganalisis opini
|
|
masyarakat
|
|
terhadap dampak pemindahan IKN di sektor pendidikan dan kebudayaan.</p>
|
|
</div>
|
|
</div>
|
|
</div><!-- End .feature-item -->
|
|
|
|
<div class="feature-item mb-5" data-aos="fade-left" data-aos-delay="300">
|
|
<div class="d-flex align-items-center gap-4">
|
|
<div class="feature-icon flex-shrink-0">
|
|
<i class="bi bi-phone"></i>
|
|
</div>
|
|
<div class="feature-content">
|
|
<h3>Interaktif dan Responsif</h3>
|
|
<p>Platform ini didesain responsif dan mudah digunakan, memungkinkan eksplorasi data
|
|
sentimen dengan tampilan yang interaktif.</p>
|
|
</div>
|
|
</div>
|
|
</div><!-- End .feature-item -->
|
|
|
|
<div class="feature-item" data-aos="fade-left" data-aos-delay="400">
|
|
<div class="d-flex align-items-center gap-4">
|
|
<div class="feature-icon flex-shrink-0">
|
|
<i class="bi bi-globe"></i>
|
|
</div>
|
|
<div class="feature-content">
|
|
<h3>Dukungan Multi-Platform</h3>
|
|
<p>Dapat diakses melalui berbagai browser dan perangkat, sehingga memudahkan
|
|
analisis
|
|
persepsi publik kapan saja dan di mana saja.</p>
|
|
</div>
|
|
</div>
|
|
</div><!-- End .feature-item -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>Tweet</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 -->
|
|
<section id="visualisasi" class="features section">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Visualisasi</h2>
|
|
<p>Menyajikan data analisis sentimen dalam bentuk grafis yang informatif dan mudah dipahami.</p>
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
|
|
<div class="d-flex justify-content-center">
|
|
|
|
<ul class="nav nav-tabs" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link active show" data-bs-toggle="tab" data-bs-target="#features-tab-1">
|
|
<h4>Kemunculan Kata</h4>
|
|
</a>
|
|
</li><!-- End tab nav item -->
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-tab-2">
|
|
<h4>Polaritas</h4>
|
|
</a><!-- End tab nav item -->
|
|
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" data-bs-toggle="tab" data-bs-target="#features-tab-3">
|
|
<h4>Wordcloud</h4>
|
|
</a>
|
|
</li><!-- End tab nav item -->
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="tab-content" data-aos="fade-up" data-aos-delay="200">
|
|
|
|
<div class="tab-pane fade active show" id="features-tab-1">
|
|
<div class="row">
|
|
<div
|
|
class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0 d-flex flex-column justify-content-center">
|
|
<h3>Kemunculan Kata</h3>
|
|
<p class="fst-italic">
|
|
Fitur ini menampilkan kata-kata yang paling sering muncul dalam dataset analisis
|
|
sentimen, membantu
|
|
dalam memahami pola penggunaan kata dalam opini publik.
|
|
</p>
|
|
<ul>
|
|
<li><i class="bi bi-check2-all"></i> <span>Menganalisis frekuensi kemunculan kata
|
|
dalam kumpulan
|
|
data.</span></li>
|
|
<li><i class="bi bi-check2-all"></i> <span>Mengidentifikasi kata-kata yang sering
|
|
digunakan dalam
|
|
sentimen positif, negatif, atau netral.</span></li>
|
|
<li><i class="bi bi-check2-all"></i> <span>Memberikan wawasan tentang topik utama
|
|
yang banyak
|
|
dibicarakan di media sosial.</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-6 order-1 order-lg-2 text-center">
|
|
<img src="{{ url_for('static', filename='assets/img/kata.png') }}" alt="Kemunculan Kata"
|
|
class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="tab-pane fade" id="features-tab-2">
|
|
<div class="row">
|
|
<div
|
|
class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0 d-flex flex-column justify-content-center">
|
|
<h3>Polaritas</h3>
|
|
<p class="fst-italic">
|
|
Analisis polaritas membantu mengklasifikasikan opini publik menjadi sentimen
|
|
positif, negatif, atau
|
|
netral berdasarkan teks yang dianalisis.
|
|
</p>
|
|
<ul>
|
|
<li><i class="bi bi-check2-all"></i> <span>Mengukur tingkat sentimen dari suatu
|
|
opini atau
|
|
komentar.</span></li>
|
|
<li><i class="bi bi-check2-all"></i> <span>Menentukan apakah suatu pernyataan
|
|
memiliki kecenderungan
|
|
positif, negatif, atau netral.</span></li>
|
|
<li><i class="bi bi-check2-all"></i> <span>Mempermudah identifikasi persepsi publik
|
|
terhadap isu
|
|
tertentu.</span></li>
|
|
<li><i class="bi bi-check2-all"></i> <span>Memberikan wawasan berbasis data untuk
|
|
analisis tren sentimen
|
|
di media sosial.</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-6 order-1 order-lg-2 text-center">
|
|
<img src="{{ url_for('static', filename='assets/img/polarity.png') }}"
|
|
alt="Polaritas Sentimen" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="tab-pane fade" id="features-tab-3">
|
|
<div class="row">
|
|
<div
|
|
class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0 d-flex flex-column justify-content-center">
|
|
<h3>Wordcloud</h3>
|
|
<ul>
|
|
<li><i class="bi bi-check2-all"></i> <span>Visualisasi kata-kata yang paling sering
|
|
muncul dalam
|
|
analisis sentimen.</span></li>
|
|
<li><i class="bi bi-check2-all"></i> <span>Memudahkan pemahaman tren opini publik
|
|
secara cepat dan
|
|
interaktif.</span></li>
|
|
<li><i class="bi bi-check2-all"></i> <span>Menampilkan kata-kata dominan dalam
|
|
berbagai kategori
|
|
sentimen: positif, negatif, atau netral.</span></li>
|
|
</ul>
|
|
<p class="fst-italic">
|
|
Wordcloud membantu dalam mengidentifikasi pola kata yang sering digunakan dalam
|
|
diskusi publik,
|
|
memberikan wawasan yang lebih mendalam mengenai persepsi masyarakat terhadap
|
|
pemindahan IKN dalam bidang
|
|
pendidikan dan kebudayaan.
|
|
</p>
|
|
</div>
|
|
<div class="col-lg-6 order-1 order-lg-2 text-center">
|
|
<img src="{{ url_for('static', filename='assets/img/wordcloud.png') }}"
|
|
alt="Wordcloud Analysis" class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section id="analisis" class="tweet-section section">
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
<h2 class="section-title">Tahapan Preprocessing</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">Tampilan Preprocessing</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table id="myTable1"
|
|
class="table table-hover table-striped table-bordered text-center align-middle">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Clean</th>
|
|
<th>Token</th>
|
|
<th>Normalisasi</th>
|
|
<th>Stop</th>
|
|
<th>Stemmed</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for data in preprocessing_data %}
|
|
<tr>
|
|
<td>{{ data.id }}</td>
|
|
<td>{{ data.clean_text }}</td>
|
|
<td>{{ data.tokens }}</td>
|
|
<td>{{ data.normalized_tokens }}</td>
|
|
<td>{{ data.filtered_tokens }}</td>
|
|
<td>{{ data.stemmed_tokens }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#myTable1').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>
|
|
|
|
<!-- Testimonials Section -->
|
|
<section id="tweet" class="testimonials section light-background">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Tweet Mereka</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-5">
|
|
|
|
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="testimonial-item">
|
|
<img src="{{ url_for('static', filename='assets/img/testimonials/testimonials-1.jpg') }}"
|
|
class="testimonial-img" alt="">
|
|
<h3>Saul Goodman</h3>
|
|
<h4>Ceo & Founder</h4>
|
|
<div class="stars">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
|
|
class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
|
|
class="bi bi-star-fill"></i>
|
|
</div>
|
|
<p>
|
|
<i class="bi bi-quote quote-icon-left"></i>
|
|
<span>Pindah IKN Majukan Pendidikan Daerah #IbukotaNegara #IKN #SemangatNusantara</span>
|
|
<i class="bi bi-quote quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="testimonial-item">
|
|
<img src="{{ url_for('static', filename='assets/img/testimonials/testimonials-2.jpg') }}"
|
|
class="testimonial-img" alt="">
|
|
<h3>Sara Wilsson</h3>
|
|
<h4>Designer</h4>
|
|
<div class="stars">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
|
|
class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
|
|
class="bi bi-star-fill"></i>
|
|
</div>
|
|
<p>
|
|
<i class="bi bi-quote quote-icon-left"></i>
|
|
<span>Harga sembako mahal biaya pendidikan mahal .... Hanya bisa diatasi dgn IKN.</span>
|
|
<i class="bi bi-quote quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="300">
|
|
<div class="testimonial-item">
|
|
<img src="{{ url_for('static', filename='assets/img/testimonials/testimonials-3.jpg') }}"
|
|
class="testimonial-img" alt="">
|
|
<h3>Jena Karlis</h3>
|
|
<h4>Store Owner</h4>
|
|
<div class="stars">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
|
|
class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
|
|
class="bi bi-star-fill"></i>
|
|
</div>
|
|
<p>
|
|
<i class="bi bi-quote quote-icon-left"></i>
|
|
<span>Kebudayaan dan kearifan lokal di IKN Nusantara Kaltim tidak akan tergerus
|
|
#IbukotaNegara #IKN
|
|
#SemangatNusantara.</span>
|
|
<i class="bi bi-quote quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
<div class="col-lg-6" data-aos="fade-up" data-aos-delay="400">
|
|
<div class="testimonial-item">
|
|
<img src="{{ url_for('static', filename='assets/img/testimonials/testimonials-4.jpg') }}"
|
|
class="testimonial-img" alt="">
|
|
<h3>Thors</h3>
|
|
<h4>Freelancer</h4>
|
|
<div class="stars">
|
|
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
|
|
class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i
|
|
class="bi bi-star-fill"></i>
|
|
</div>
|
|
<p>
|
|
<i class="bi bi-quote quote-icon-left"></i>
|
|
<span>@_riverheaven Rakyat butuh pendidikan dan kesehatan bukan bangunan megah yang
|
|
hanya menguntungkan
|
|
segelintir orang. IKN.</span>
|
|
<i class="bi bi-quote quote-icon-right"></i>
|
|
</p>
|
|
</div>
|
|
</div><!-- End testimonial item -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</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 gy-4">
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="stats-item text-center w-100 h-100">
|
|
<span data-purecounter-start="0" data-purecounter-end="634" 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 text-center w-100 h-100">
|
|
<span data-purecounter-start="0" data-purecounter-end="272" data-purecounter-duration="1"
|
|
class="purecounter"></span>
|
|
<p>Netral</p>
|
|
</div>
|
|
</div><!-- End Stats Item -->
|
|
|
|
<div class="col-lg-3 col-md-6">
|
|
<div class="stats-item text-center w-100 h-100">
|
|
<span data-purecounter-start="0" data-purecounter-end="474" 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 text-center w-100 h-100">
|
|
<span data-purecounter-start="0" data-purecounter-end="1380" data-purecounter-duration="1"
|
|
class="purecounter"></span>
|
|
<p>Jumlah Dataset</p>
|
|
</div>
|
|
</div><!-- End Stats Item -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section><!-- /Stats Section -->
|
|
|
|
<!-- Pricing Section -->
|
|
<section id="split" class="pricing section light-background">
|
|
|
|
<!-- Section Title -->
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>Pembagian Data Train & Test</h2>
|
|
<p>Menentukan proporsi data yang optimal untuk analisis sentimen terkait pemindahan IKN di bidang
|
|
pendidikan dan
|
|
kebudayaan.</p>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container" data-aos="fade-up" data-aos-delay="100">
|
|
|
|
<div class="row g-4 justify-content-center">
|
|
|
|
<!-- Pembagian Pertama -->
|
|
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="pricing-card">
|
|
<h3>Pembagian Pertama</h3>
|
|
<div class="price">
|
|
<span class="amount">70:30</span>
|
|
<span class="period">%</span>
|
|
</div>
|
|
<p class="description">Pembagian ini digunakan untuk menjaga keseimbangan antara data latih
|
|
dan uji
|
|
dalam memahami opini masyarakat terhadap kebijakan pendidikan akibat pemindahan IKN.</p>
|
|
|
|
<h4>Keunggulan:</h4>
|
|
<ul class="features-list">
|
|
<li><i class="bi bi-check-circle-fill"></i> Seimbang untuk pelatihan dan pengujian</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Cocok untuk dataset sedang hingga besar</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Dapat meningkatkan generalisasi model</li>
|
|
</ul>
|
|
|
|
<a href="#" class="btn btn-primary">
|
|
Akurasi adalah 0.7724
|
|
<i class="bi bi-graph-up"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pembagian Kedua -->
|
|
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="pricing-card popular">
|
|
<div class="popular-badge">Saat Ini</div>
|
|
<h3>Pembagian Kedua</h3>
|
|
<div class="price">
|
|
<span class="amount">90:10</span>
|
|
<span class="period">%</span>
|
|
</div>
|
|
<p class="description">Menggunakan lebih banyak data latih untuk meningkatkan kemampuan
|
|
model dalam
|
|
mengenali sentimen masyarakat terhadap dampak pemindahan IKN di sektor pendidikan dan
|
|
kebudayaan.</p>
|
|
|
|
<h4>Keunggulan:</h4>
|
|
<ul class="features-list">
|
|
<li><i class="bi bi-check-circle-fill"></i> Model lebih terlatih dengan lebih banyak
|
|
data</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Cocok untuk dataset besar</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Akurasi model meningkat</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Meminimalisir overfitting</li>
|
|
</ul>
|
|
|
|
<a href="#" class="btn btn-light">
|
|
Akurasi adalah 0.8320
|
|
<i class="bi bi-graph-up"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pembagian Ketiga -->
|
|
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="300">
|
|
<div class="pricing-card">
|
|
<h3>Pembagian Ketiga</h3>
|
|
<div class="price">
|
|
<span class="amount">80:20</span>
|
|
<span class="period">%</span>
|
|
</div>
|
|
<p class="description">Menyeimbangkan antara jumlah data latih dan uji agar model dapat
|
|
mengenali
|
|
pola sentimen dengan baik serta tetap mampu menggeneralisasi opini publik.</p>
|
|
|
|
<h4>Keunggulan:</h4>
|
|
<ul class="features-list">
|
|
<li><i class="bi bi-check-circle-fill"></i> Kombinasi optimal antara data latih dan uji
|
|
</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Mengurangi risiko bias pada model</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Cocok untuk berbagai skala dataset</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Model tetap memiliki data uji yang cukup
|
|
</li>
|
|
</ul>
|
|
<a href="#" class="btn btn-primary">
|
|
Akurasi adalah 0.7557
|
|
<i class="bi bi-graph-up"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 pemrosesan bahasa alami untuk menentukan apakah
|
|
suatu
|
|
teks bersifat positif, negatif, atau netral.</p>
|
|
</div>
|
|
<i class="faq-toggle bi bi-chevron-right"></i>
|
|
</div>
|
|
<div class="faq-item">
|
|
<h3>Bagaimana cara kerja analisis sentimen dengan SVM?</h3>
|
|
<div class="faq-content">
|
|
<p>SVM (Support Vector Machine) mengklasifikasikan data berdasarkan pola dalam fitur
|
|
teks
|
|
menggunakan model pembelajaran mesin.</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 media sosial X dan telah melalui proses
|
|
preprocessing
|
|
serta pelabelan manual.</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>Model SVM yang digunakan telah diuji dan dikembangkan untuk mendapatkan hasil
|
|
akurasi
|
|
yang optimal berdasarkan dataset yang tersedia.</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 Pemindahan IKN</h3>
|
|
<p>Pemindahan Ibu Kota Negara (IKN) ke Nusantara menjadi topik yang banyak diperbincangkan,
|
|
terutama
|
|
dalam aspek pendidikan dan kebudayaan. Dengan analisis sentimen, kita dapat memahami
|
|
bagaimana
|
|
masyarakat bereaksi terhadap perubahan ini, baik dalam hal peluang maupun tantangan yang
|
|
muncul.
|
|
</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 pemindahan IKN di bidang
|
|
pendidikan dan
|
|
kebudayaan.</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>faisalokta08@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-Jalan</p>
|
|
<p>Australia</p>
|
|
<p class="mt-3"><strong>Phone:</strong> <span>00000000</span></p>
|
|
<p><strong>Email:</strong> <span>brians@example.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=""><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">Faisal Oktabrian</strong> <span>All Rights
|
|
Reserved</span>
|
|
</p>
|
|
<div class="credits">
|
|
Designed by <a href="">Faisal</a> Distributed By <a href="">FOS</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> |