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']
koleksi = db['film']

path_csv = 'film.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 :

# import csv
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']
koleksi = db['film']

# Membaca file CSV dan memasukkan data ke MongoDB jika belum ada
# path_csv = 'ds_salaries.csv'

# with open(path_csv, 'r') as csvfile:
    # csv_reader = csv.DictReader(csvfile)
    # for row in csv_reader:
        # koleksi.insert_one(row)

# Rute untuk menampilkan data dari koleksi MongoDB
# Rute untuk menampilkan data dari koleksi MongoDB
def get_formatted_data():
    data_cursor = koleksi.find()
    formatted_data = []
    header = ['title', 'type', 'release_year', 'age_certification', 'runtime', 'genres', 'production_countries', 'seasons', 'imdb_id', 'imdb_score', 'imdb_votes']

    for row in data_cursor:
        formatted_row = {key: row[key] for key in header}
        formatted_data.append(formatted_row)

    return formatted_data
# Rute lainnya untuk tambah, edit, dan hapus data

# Rute untuk menampilkan data dan melakukan pencarian
@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        query = request.form.get('query')
        if query:
            data_cursor = koleksi.find({
                '$or': [
                     {'title': {'$regex': query, '$options': 'i'}},
                    {'type': {'$regex': query, '$options': 'i'}},
                    {'release_year': {'$regex': query, '$options': 'i'}},
                    {'age_certification': {'$regex': query, '$options': 'i'}},
                    {'runtime': {'$regex': query, '$options': 'i'}},
                    {'genres': {'$regex': query, '$options': 'i'}},
                    {'production_countries': {'$regex': query, '$options': 'i'}},
                    {'seasons': {'$regex': query, '$options': 'i'}},
                    {'imdb_id': {'$regex': query, '$options': 'i'}},
                    {'imdb_score': {'$regex': query, '$options': 'i'}},
                    {'imdb_votes': {'$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 = {
'title': request.form['title'],
        'type': request.form['type'],
        'release_year': request.form['release_year'],
        'age_certification': request.form['age_certification'],
        'runtime': request.form['runtime'],
        'genres': request.form['genres'],
        'production_countries': request.form['production_countries'],
        'seasons': request.form['seasons'],
        'imdb_id': request.form['imdb_id'],
        'imdb_score': request.form['imdb_score'],
        'imdb_votes': request.form['imdb_votes']
    }
    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/<string:row_id>', methods=['GET'])
def edit_data(row_id):
    data = koleksi.find_one({'_id': ObjectId(row_id)})
    if data:
        return render_template('edit.html', data=data)
    else:
        return "Data not found", 404  # Optional: Menampilkan pesan jika data tidak ditemukan

# ... Kode lainnya ...

@app.route('/graph', methods=['GET'])
def show_graph():
    data_list = get_formatted_data()

    # Memproses data untuk grafik
    imdb_scores = []
    type_count = {}
    seasons_count = {}

    for row in data_list:
        # Proses untuk IMDb Scores
        imdb_score = row.get('imdb_score', '')
        try:
            if imdb_score:
                imdb_scores.append(float(imdb_score))
        except ValueError as e:
            print(f"Error converting IMDb score '{imdb_score}' to float. Error: {e}")

        # Proses untuk Type SHOW Distribution (semua jenis tipe)
        type_show = row.get('type', '')
        type_count[type_show] = type_count.get(type_show, 0) + 1

        # Proses untuk Seasons Distribution
        seasons = row.get('seasons', '')
        seasons_count[seasons] = seasons_count.get(seasons, 0) + 1

    # Membuat grafik lingkaran (pie chart) dengan Plotly Express untuk Type SHOW Distribution
    fig_pie_type = px.pie(names=list(type_count.keys()), values=list(type_count.values()), title='Type Film')

    # Membuat grafik lingkaran (pie chart) dengan Plotly Express untuk Seasons Distribution
    fig_pie_seasons = px.pie(names=list(seasons_count.keys()), values=list(seasons_count.values()), title='Seasons Distribution')

    # Membuat grafik batang (bar chart) dengan 10 IMDb scores tertinggi
    top_10_imdb_scores = sorted(data_list, key=lambda x: float(x['imdb_score']), reverse=True)[:10]
    fig_bar = go.Figure(data=go.Bar(x=[row['title'] for row in top_10_imdb_scores], y=[float(row['imdb_score']) for row in top_10_imdb_scores], name='Top 10 IMDb Scores'),)

    # Menambahkan keterangan pada grafik batang
    fig_bar.update_layout(title='Top 10 IMDb Scores', xaxis_title='Film', yaxis_title='IMDb Score')

    # Menyimpan gambar grafik sementara
    graph_pie_type = fig_pie_type.to_html(full_html=False)
    graph_pie_seasons = fig_pie_seasons.to_html(full_html=False)
    graph_bar = fig_bar.to_html(full_html=False)

    return render_template('graph.html', graph_pie_type=graph_pie_type, graph_pie_seasons=graph_pie_seasons, graph_bar=graph_bar)

@app.route('/update/<id>', methods=['POST'])
def update(id):
    updated_data = {
        'title': request.form['title'],
        'type': request.form['type'],
        'release_year': request.form['release_year'],
        'age_certification': request.form['age_certification'],
        'runtime': request.form['runtime'],
        'genres': request.form['genres'],
        'production_countries': request.form['production_countries'],
        'seasons': request.form['seasons'],
        'imdb_id': request.form['imdb_id'],
        'imdb_score': request.form['imdb_score'],
        'imdb_votes': request.form['imdb_votes']
    }
    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>Film</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
            max-width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin: 4px;
        }

        th:nth-child(1),
        td:nth-child(1) {
            width: 8%;
        }

        th:nth-child(2),
        td:nth-child(2) {
            width: 8%;
        }

        th:nth-child(3),
        td:nth-child(3) {
            width: 8%;
        }

        th:nth-child(4),
        td:nth-child(4) {
            width: 16%;
        }

        th:nth-child(5),
        td:nth-child(5) {
            width: 8%;
        }

        th:nth-child(6),
        td:nth-child(6) {
            width: 12%;
        }

        th:nth-child(7),
        td:nth-child(7) {
            width: 12%;
        }

        th:nth-child(8),
        td:nth-child(8) {
            width: 12%;
        }

        th:nth-child(9),
        td:nth-child(9) {
            width: 8%;
        }

        th:nth-child(10),
        td:nth-child(10) {
            width: 12%;
        }

        th:nth-child(11),
        td:nth-child(11) {
            width: 8%;
        }

        form {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>Data Film</h1>
    <p>Data Length: {{ data|length }} 
        <a href="/graph">
    <button type="button">Tampilkan Grafik</button>
</a>

    </p>

    <form action="/" method="POST">
        <label for="search">Cari:</label>
        <input type="text" id="search" name="query" />
        <button type="submit">Cari</button>
    </form>

    <form action="/add" method="POST">
        <label for="title">Title:</label>
        <input type="text" id="title" name="title" />
        <label for="type">Type:</label>
        <input type="text" id="type" name="type" />
        <label for="release_year">Release Year:</label>
        <input type="text" id="release_year" name="release_year" />
        <label for="age_certification">Age Certification:</label>
        <input type="text" id="age_certification" name="age_certification" />
        <label for="runtime">Runtime:</label>
        <input type="text" id="runtime" name="runtime" />
        <label for="genres">Genres:</label>
        <input type="text" id="genres" name="genres" />
        <label for="production_countries">Production Countries:</label>
        <input type="text" id="production_countries" name="production_countries" />
        <label for="seasons">Seasons:</label>
        <input type="text" id="seasons" name="seasons" />
        <label for="imdb_id">IMDb ID:</label>
        <input type="text" id="imdb_id" name="imdb_id" />
        <label for="imdb_score">IMDb Score:</label>
        <input type="text" id="imdb_score" name="imdb_score" />
        <label for="imdb_votes">IMDb Votes:</label>
        <input type="text" id="imdb_votes" name="imdb_votes" />
        <button type="submit">Tambah Data</button>
    </form>

    <table>
        <thead>
            <tr>
                <th>Title</th>
                <th>Type</th>
                <th>Release Year</th>
                <th>Age Certification</th>
                <th>Runtime</th>
                <th>Genres</th>
                <th>Production Countries</th>
                <th>Seasons</th>
                <th>IMDb ID</th>
                <th>IMDb Score</th>
                <th>IMDb Votes</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            {% for row in data %}
            <tr>
                <td>{{ row.title }}</td>
                <td>{{ row.type }}</td>
                <td>{{ row.release_year }}</td>
                <td>{{ row.age_certification }}</td>
                <td>{{ row.runtime }}</td>
                <td>{{ row.genres }}</td>
                <td>{{ row.production_countries }}</td>
                <td>{{ row.seasons }}</td>
                <td>{{ row.imdb_id }}</td>
                <td>{{ row.imdb_score }}</td>
                <td>{{ row.imdb_votes }}</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>

    <script>
        // Hapus kode ini karena 'showGraphBtn' tidak lagi digunakan
    </script>
</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="title">Title:</label>
        <input
            type="text"
            id="title"
            name="title"
            value="{{ data.title }}"
        />
        <!-- Isi formulir dengan data yang ada untuk diedit -->
        <label for="type">Type:</label>
        <input
            type="text"
            id="type"
            name="type"
            value="{{ data.type }}"
        />
        <label for="release_year">Release Year:</label>
        <input
            type="text"
            id="release_year"
            name="release_year"
            value="{{ data.release_year }}"
        />
        <label for="age_certification">Age Certification:</label>
        <input
            type="text"
            id="age_certification"
            name="age_certification"
            value="{{ data.age_certification }}"
        />
        <label for="runtime">Runtime:</label>
        <input
            type="text"
            id="runtime"
            name="runtime"
            value="{{ data.runtime }}"
        />
        <label for="genres">Genres:</label>
        <input
            type="text"
            id="genres"
            name="genres"
            value="{{ data.genres }}"
        />
        <label for="production_countries">Production Countries:</label>
        <input
            type="text"
            id="production_countries"
            name="production_countries"
            value="{{ data.production_countries }}"
        />
        <label for="seasons">Seasons:</label>
        <input
            type="text"
            id="seasons"
            name="seasons"
            value="{{ data.seasons }}"
        />
        <label for="imdb_id">IMDb ID:</label>
        <input
            type="text"
            id="imdb_id"
            name="imdb_id"
            value="{{ data.imdb_id }}"
        />
        <label for="imdb_score">IMDb Score:</label>
        <input
            type="text"
            id="imdb_score"
            name="imdb_score"
            value="{{ data.imdb_score }}"
        />
        <label for="imdb_votes">IMDb Votes:</label>
        <input
            type="text"
            id="imdb_votes"
            name="imdb_votes"
            value="{{ data.imdb_votes }}"
        />
        <button type="submit">Update Data</button>
    </form>
</body>
</html>

Kode file graph.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Graphs</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 Type SHOW Distribution -->
        {{ graph_pie_type|safe }}
    </div>
    <div id="chart2">
        <!-- Ini adalah tempat untuk grafik lingkaran Seasons Distribution -->
        {{ graph_pie_seasons|safe }}
    </div>
    <div id="chart3">
        <!-- Ini adalah tempat untuk grafik batang Top 10 IMDb Scores -->
        {{ graph_bar|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 kategori

apabila ingin melihat data tertentu saja, kita hanya perlu ketikkan sesuai dengan kategorinya, misal ingin melihat data film kategori SHOW maka ketik SHOW pada pencarian :