Project Based Learning
Penerapan Database MongoDB dengan Visual Studio Code
Selamat datang kembali, para pembaca setia blog ini! Kali ini, kita akan memasuki dunia menarik pengaplikasian database NoSQL, khususnya MongoDB, dengan menggunakan alat yang sangat bermanfaat, yaitu Jupyter Notebook.
Apa itu MongoDB?
MongoDB merupakan salah satu jenis database NoSQL yang berbasis dokumen. Berbeda dengan database relasional tradisional, MongoDB menggunakan format BSON (Binary JSON) untuk menyimpan data. Keunggulan MongoDB terletak pada kemampuannya menangani data semi-struktural atau tidak terstruktur dengan lebih efisien.
Mengapa MongoDB?
Pertanyaan ini wajar muncul. MongoDB menjadi pilihan populer karena kemudahannya dalam menyimpan data yang beragam, skalabilitas horizontal yang baik, dan fleksibilitas dalam memodelkan data. Penerapan MongoDB seringkali memberikan solusi yang optimal untuk aplikasi yang membutuhkan penanganan data yang cepat dan terdistribusi.
Penerapan
Sebelum masuk ke materi prakter, tentunya kita perlu data untuk diolah, data dapat di cari pada laman web kaggle.com.
Visualisasi & Filter Data, serta fungsi CRUD data.
Langkah - Langkah :
1. Import file datasheet yang akan dipakai ke MongoDB menggunakkan VS Code. pastikan file sudah csv dan nama sesuai dengan nama file. buat file pada VS Code dengan nama film.cvs
berikut kode untuk impor csv :
import csv
from pymongo import MongoClient
client = MongoClient('mongodb://localhost:27017/')
db = client['pbl_yoga']
koleksi = db['lazada']
path_csv = 'lazada.csv'
try:
with open(path_csv, 'r', newline='', encoding='utf-8') as csvfile:
# Perbarui pemisah kolom menjadi titik koma
csv_reader = csv.DictReader(csvfile, delimiter=';')
for row in csv_reader:
# Filter nilai None dari row sebelum menyisipkannya
clean_row = {key: value for key, value in row.items() if value is not None}
koleksi.insert_one(clean_row)
print("Data dari CSV berhasil diimpor ke MongoDB.")
except FileNotFoundError:
print(f"File CSV '{path_csv}' tidak ditemukan.")
except Exception as e:
print(f"Terjadi kesalahan saat mengimpor data: {e}")
2. Untuk menampilkan data dan fungsi CRUD, buat file app.py lalu isi dengan kode seperti dibawah ini :
from flask import Flask, render_template, request, redirect
from pymongo import MongoClient
from bson import ObjectId
import plotly.graph_objs as go
from plotly.subplots import make_subplots
import plotly.express as px
app = Flask(__name__)
client = MongoClient('mongodb://localhost:27017/')
db = client['pbl_yoga']
koleksi = db['lazada']
def index():
data_cursor = koleksi.find()
formatted_data = []
header = ['itemId','category','name','brandName','url','price','averageRating','totalReviews','retrievedDate']
for row in data_cursor:
formatted_row = {key: row[key] for key in header}
formatted_data.append(formatted_row)
return render_template('index.html', data=formatted_data)
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
query = request.form.get('query')
if query:
data_cursor = koleksi.find({
'$or': [
{'itemId': {'$regex': query, '$options': 'i'}},
{'category': {'$regex': query, '$options': 'i'}},
{'name': {'$regex': query, '$options': 'i'}},
{'brandName': {'$regex': query, '$options': 'i'}},
{'url': {'$regex': query, '$options': 'i'}},
{'price': {'$regex': query, '$options': 'i'}},
{'averageRating': {'$regex': query, '$options': 'i'}},
{'totalReviews': {'$regex': query, '$options': 'i'}},
{'retrievedDate': {'$regex': query, '$options': 'i'}},
]
})
data_list = list(data_cursor)
return render_template('index.html', data=data_list)
else:
return redirect('/')
else:
data_cursor = koleksi.find()
data_list = list(data_cursor)
return render_template('index.html', data=data_list)
# Rute untuk menambah data baru
@app.route('/add', methods=['POST'])
def add():
new_data = {
'itemId': request.form['itemId'],
'category': request.form['category'],
'name': request.form['name'],
'brandName': request.form['brandName'],
'url': request.form['url'],
'price': request.form['price'],
'averageRating': request.form['averageRating'],
'totalReviews': request.form['totalReviews'],
'retrievedDate': request.form['retrievedDate'],
}
koleksi.insert_one(new_data)
return redirect('/')
# Rute untuk menghapus data
@app.route('/delete/<id>', methods=['GET'])
def delete(id):
koleksi.delete_one({'_id': ObjectId(id)})
return redirect('/')
# Rute untuk menampilkan form edit
@app.route('/edit/<id>', methods=['GET'])
def edit(id):
data = koleksi.find_one({'_id': ObjectId(id)})
return render_template('edit.html', data=data)
# Rute untuk menyimpan perubahan dari form edit
@app.route('/update/<id>', methods=['POST'])
def update(id):
updated_data = {
'itemId': request.form['itemId'],
'category': request.form['category'],
'name': request.form['name'],
'brandName': request.form['brandName'],
'url': request.form['url'],
'price': request.form['price'],
'averageRating': request.form['averageRating'],
'totalReviews': request.form['totalReviews'],
'retrievedDate': request.form['retrievedDate'],
}
koleksi.update_one({'_id': ObjectId(id)}, {'$set': updated_data})
return redirect('/')
if __name__ == '__main__':
app.run(debug=True)
3. Untuk menampilkan grafik, buat Buatlah file baru untuk menyimpan script html, terdapat 3 file yaitu index.html untuk mengatur tampilan halaman awal, edit.html untuk mengatur tampilan halaman edit, dan graph.html untuk mengatur tampilan halaman grafik.
- Kode file index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lazada Item</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: left;
max-width: 200px; /* Atur lebar maksimum untuk kolom */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 4px; /* Menambahkan jarak pada setiap sisi */
}
th:nth-child(1),
td:nth-child(1) {
width: 8%; /* Atur lebar kolom title di sini */
}
th:nth-child(2),
td:nth-child(2) {
width: 8%; /* Atur lebar kolom type di sini */
}
th:nth-child(3),
td:nth-child(3) {
width: 8%; /* Atur lebar kolom release_year di sini */
}
th:nth-child(4),
td:nth-child(4) {
width: 3%; /* Atur lebar kolom age_certification di sini */
}
th:nth-child(5),
td:nth-child(5) {
width: 8%; /* Atur lebar kolom runtime di sini */
}
th:nth-child(6),
td:nth-child(6) {
width: 12%; /* Atur lebar kolom genres di sini */
}
th:nth-child(7),
td:nth-child(7) {
width: 12%; /* Atur lebar kolom production_countries di sini */
}
th:nth-child(8),
td:nth-child(8) {
width: 12%; /* Atur lebar kolom seasons di sini */
}
th:nth-child(9),
td:nth-child(9) {
width: 8%; /* Atur lebar kolom imdb_id di sini */
}
th:nth-child(10),
td:nth-child(10) {
width: 12%; /* Atur lebar kolom imdb_score di sini */
}
th:nth-child(11),
td:nth-child(11) {
width: 8%; /* Atur lebar kolom imdb_votes di sini */
}
/* Tambahkan margin-bottom untuk memberikan ruang antara form dan tabel */
form {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Lazada Item</h1>
<p>Data Length: {{ data|length }}</p>
<form action="/" method="POST">
<label for="search">Cari:</label>
<input type="text" id="search" name="query" />
<button type="submit">Cari</button>
</form>
<button
type="button"
onclick="window.location.href='/charts'"
style="width: 150px; height: 25px; margin-top: 10px; margin-bottom: 10px"
>
Tampilkan Grafik
</button>
<style>
form {
display: flex;
flex-wrap: wrap;
}
div {
flex: 0 0 10%; /* Setiap div akan menempati 30% dari lebar container */
margin-right: 5%; /* Menambahkan jarak antara setiap div */
margin-bottom: 15px; /* Menambahkan jarak antar baris */
}
</style>
<form action="/add" method="POST">
<label for="itemId">itemId:</label>
<input type="text" id="itemId" name="itemId" />
<label for="category">category:</label>
<input type="text" id="category" name="category" />
<label for="name">name:</label>
<input type="text" id="name" name="name" />
<label for="brandName">brandName:</label>
<input type="text" id="brandName" name="brandName" />
<label for="url">url:</label>
<input type="text" id="url" name="url" />
<label for="price">price:</label>
<input type="text" id="price" name="price" />
<label for="averageRating">averageRating:</label>
<input type="text" id="averageRating" name="averageRating" />
<label for="totalReviews">totalReviews:</label>
<input type="text" id="totalReviews" name="totalReviews" />
<label for="retrievedDate">retrievedDate:</label>
<input type="text" id="retrievedDate" name="retrievedDate" />
<button type="submit">Tambah Data</button>
</form>
<table>
<thead>
<tr>
<th>itemId</th>
<th>category</th>
<th>name</th>
<th>brandName</th>
<th>url</th>
<th>price</th>
<th>averageRating</th>
<th>totalReviews</th>
<th>retrievedDate</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
{% for row in data %}
<tr>
<td>{{ row.itemId }}</td>
<td>{{ row.category }}</td>
<td>{{ row.name }}</td>
<td>{{ row.brandName }}</td>
<td>{{ row.url }}</td>
<td>{{ row.price }}</td>
<td>{{ row.averageRating }}</td>
<td>{{ row.totalReviews }}</td>
<td>{{ row.retrievedDate }}</td>
<td>
<form action="/edit/{{ row._id }}" method="GET">
<button type="submit">Edit Data</button>
</form>
<form action="/delete/{{ row._id }}" method="GET">
<button type="submit">Hapus</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
</html>
- Kode file edit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Edit Data</title>
<style>
/* Atur gaya sesuai kebutuhan Anda */
</style>
</head>
<body>
<h1>Edit Data</h1>
<form action="/update/{{ data._id }}" method="POST">
<label for="itemId">itemId:</label>
<input
type="text"
id="itemId"
name="itemId"
value="{{ data.itemId }}"
/>
<!-- Isi formulir dengan data yang ada untuk diedit -->
<label for="category">category:</label>
<input
type="text"
id="category"
name="category"
value="{{ data.category }}"
/>
<label for="name">name:</label>
<input
type="text"
id="name"
name="name"
value="{{ data.name }}"
/>
<label for="brandName">brandName:</label>
<input
type="text"
id="brandName"
name="brandName"
value="{{ data.brandName }}"
/>
<label for="url">url:</label>
<input
type="text"
id="url"
name="url"
value="{{ data.url }}"
/>
<label for="price">price:</label>
<input
type="text"
id="price"
name="price"
value="{{ data.price }}"
/>
<label for="averageRating">averageRating:</label>
<input
type="text"
id="averageRating"
name="averageRating"
value="{{ data.averageRating }}"
/>
<label for="totalReviews">totalReviews:</label>
<input
type="text"
id="totalReviews"
name="totalReviews"
value="{{ data.totalReviews }}"
/>
<label for="retrievedDate">retrievedDate:</label>
<input
type="text"
id="retrievedDate"
name="retrievedDate"
value="{{ data.retrievedDate}}"
/>
<button type="submit">Update Data</button>
</form>
</body>
</html>
- Kode file graph.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Charts</title>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="chart1">
<!-- Ini adalah tempat untuk grafik lingkaran -->
{{ graph_pie|safe }}
</div>
<div id="chart2">
<!-- Ini adalah tempat untuk grafik batang -->
{{ graph_bar|safe }}
</div>
<div id="chart3">
<!-- Ini adalah tempat untuk grafik garis -->
{{ graph_line|safe }}
</div>
</body>
</html>
HASIL :
1. Tampilan Awal
Pada halaman awal akan muncul data yang sudah diimport dan jumlah datanya. Di sini juga terdapat tools untuk melakukan pencarian berdasarkan kategori tertentu, tampilkan grafik,
tambah data,
hapus data, dan edit data pada pojok kanan tabel (aksi).
2. Tampilan edit data
apabila tombol aksi dikil pada edit, maka akan muncul halaman edit data
3. Hasil tampilan cari berdasarkan brandName
apabila ingin melihat data tertentu saja, kita hanya perlu ketikkan sesuai dengan kategorinya, misal ingin melihat data lazada item kategori TOSHIBA maka ketik TOSHIBA pada pencarian :
hasilnya :
4. Hasil tampilan cari berdasarkan URL
hasilnya :
Komentar
Posting Komentar