Penerapan Database MongoDB dengan Visual Studio Code

 

Penerapan Database MongoDB dengan Visual Studio Code

Project Based Learning


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_nurani']
koleksi = db['videos-stats']

# Impor data dari file CSV ke MongoDB
path_csv = 'videos-stats.csv'

with open(path_csv, 'r') as csvfile:
    csv_reader = csv.DictReader(csvfile)
    for row in csv_reader:
        koleksi.insert_one(row)
    print("Data dari CSV berhasil diimpor ke MongoDB.")

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

app = Flask(__name__)
client = MongoClient('mongodb://localhost:27017/')
db = client['pbl_nurani']
koleksi = db['videos-stats']


def index():
    data_cursor = koleksi.find()
    formatted_data = []
    header = ['Title','VideoID','PublishedAt','Keyword','Likes','Comments','Views']

    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)

# Rute untuk menampilkan data dari koleksi MongoDB
@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'}},
                    {'VideoID': {'$regex': query, '$options': 'i'}},
                    {'PublishedAt': {'$regex': query, '$options': 'i'}},
                    {'Keyword': {'$regex': query, '$options': 'i'}},
                    {'Likes': {'$regex': query, '$options': 'i'}},
                    {'Comments': {'$regex': query, '$options': 'i'}},
                    {'Views': {'$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'],
        'VideoID': request.form['VideoID'],
        'PublishedAt': request.form['PublishedAt'],
        'Keyword': request.form['Keyword'],
        'Likes': request.form['Likes'],
        'Comments': request.form['Comments'],
        'Views': request.form['Views']
    }
    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 = {
        'Title': request.form['Title'],
        'VideoID': request.form['VideoID'],
        'PublishedAt': request.form['PublishedAt'],
        'Keyword': request.form['Keyword'],
        'Likes': request.form['Likes'],
        'Comments': request.form['Comments'],
        'Views': request.form['Views']
    }
    koleksi.update_one({'_id': ObjectId(id)}, {'$set': updated_data})
    return redirect('/')

if __name__ == '__main__':
    app.run(debug=True)

3. Untuk menampilkan grafik, buat Buatlah folder baru "templates" untuk menyimpan script html, terdapat 3 file yaitu index.html untuk mengatur tampilan halaman awal, edit.html untuk mengatur tampilan halaman edit, dan charts.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>Youtube</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 work_year di sini */
          }

          th:nth-child(2),
          td:nth-child(2) {
            width: 8%; /* Atur lebar kolom experience_level di sini */
          }

          th:nth-child(3),
          td:nth-child(3) {
            width: 8%; /* Atur lebar kolom employment_type di sini */
          }

          th:nth-child(4),
          td:nth-child(4) {
            width: 16%; /* Atur lebar kolom job_title di sini */
          }

          th:nth-child(5),
          td:nth-child(5) {
            width: 8%; /* Atur lebar kolom salary di sini */
          }

          th:nth-child(6),
          td:nth-child(6) {
            width: 12%; /* Atur lebar kolom salary_currency di sini */
          }

          th:nth-child(7),
          td:nth-child(7) {
            width: 12%; /* Atur lebar kolom salary_in_usd di sini */
          }

          th:nth-child(8),
          td:nth-child(8) {
            width: 12%; /* Atur lebar kolom employee_residence di sini */
          }

          th:nth-child(9),
          td:nth-child(9) {
            width: 8%; /* Atur lebar kolom remote_ratio di sini */
          }

          th:nth-child(10),
          td:nth-child(10) {
            width: 12%; /* Atur lebar kolom company_location di sini */
          }

          th:nth-child(11),
          td:nth-child(11) {
            width: 8%; /* Atur lebar kolom company_size di sini */
          }

          /* Tambahkan margin-bottom untuk memberikan ruang antara form dan tabel */
          form {
            margin-bottom: 20px;
          }
        </style>
      </head>
      <body>
        <h1>Youtube</h1>
        <p>Data Length: {{ data|length }} </p>
          <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>
        <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">
          <div>
            <label for="Title">Title:</label>
            <input type="text" id="Title" name="Title" />
          </div>

          <div>
            <label for="VideoID">VideoID:</label>
            <input type="text" id="VideoID" name="VideoID" />
          </div>

          <div>
            <label for="PublishedAt">PublishedAt:</label>
            <input type="text" id="PublishedAt" name="PublishedAt" />
          </div>

          <div>
            <label for="Keyword">Keyword:</label>
            <input type="text" id="Keyword" name="Keyword" />
          </div>

          <div>
            <label for="Likes">Likes:</label>
            <input type="text" id="Likes" name="Likes" />
          </div>

          <div>
            <label for="Comments">Comments:</label>
            <input type="text" id="Comments" name="Comments" />
          </div>

          <div>
            <label for="Views">Views:</label>
            <input type="text" id="Views" name="Views" />
          </div>

         
          <button
            type="submit"
            style="width: 150px; height: 25px; margin-top: 15px"
          >
            Tambah Data
          </button>
        </form>
       

        <table>
          <thead>
            <tr>
              <th>Title</th>
              <th>VideoID</th>
              <th>PublishedAt</th>
              <th>Keyword</th>
              <th>Likes</th>
              <th>Comments</th>
              <th>Views</th>
              <th>Aksi</th>
           
           
            </tr>
          </thead>
          <tbody>
            {% for row in data %}
            <tr>
              <td>{{ row.Title }}</td>
              <td>{{ row.VideoID }}</td>
              <td>{{ row.PublishedAt }}</td>
              <td>{{ row.Keyword }}</td>
              <td>{{ row.Likes }}</td>
              <td>{{ row.Comments }}</td>
              <td>{{ row.Views }}</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 */
      form {
        display: flex;
        flex-direction: column;
        max-width: 300px; /* Sesuaikan lebar form jika diperlukan */
        margin: right; /* Pusatkan form di tengah halaman */
      }

      label {
        margin-bottom: 8px;
      }

      input {
        margin-bottom: 16px;
        padding: 8px;
      }

      button {
        padding: 8px;
      }
    </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="VideoID">Video_ID:</label>
      <input
        type="text"
        id="VideoID"
        name="VideoID"
        value="{{ data.VideoID }}"
      />
      <label for="PublishedAt">PublishedAt:</label>
      <input
        type="text"
        id="PublishedAt"
        name="PublishedAt"
        value="{{ data.PublishedAt }}"
      />
      <label for="Keyword">Keyword:</label>
      <input
        type="text"
        id="Keyword"
        name="Keyword"
        value="{{ data.Keyword }}"
      />
      <label for="Likes">Likes:</label>
      <input type="text" id="Likes" name="Likes" value="{{ data.Likes }}" />
      <label for="Likes">Likes:</label>
      <input
        type="text"
        id="Likes"
        name="Likes"
        value="{{ data.Likes }}"
      />
      <label for="Comments">Comments:</label>
      <input
        type="text"
        id="Comments"
        name="Comments"
        value="{{ data.Comments }}"
      />
      <label for="Views">Views:</label>
      <input
        type="text"
        id="Views"
        name="Views"
        value="{{ data.Views }}"
      />
   
     
      <button type="submit">Update Data</button>
    </form>
  </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 gaji kategori ,  maka ketik pada pencarian :

- Title : The most Expensive



4. Hasil tampilan tambah data beserta hasil:

    Memasukan data baru sesuai dengan kategorinya kemudian tekan ikon tambah data maka data tersebut akan tersimpan


5. Hasil tampilan untuk menghapus data

Untuk menghapus data dapat memilih hapus pada aksi kemudian pada Data Length jumlah data akan berkurang.

























Komentar

Posting Komentar

Postingan populer dari blog ini

Operator Pembanding MongoDB

Gambar
  "Operator Pembanding MongoDB" MongoDB, sebagai sistem basis data NoSQL, menyediakan berbagai operator pembanding yang dapat digunakan dalam permintaan (query) untuk membandingkan nilai dalam dokumen-dokumen yang disimpan. Berikut adalah beberapa jenis operator pembanding yang umum digunakan dalam MongoDB: 1. $eq : Sama dengan. 2. $ne : Tidak sama dengan. 3. $gt : Lebih besar dari. 4. $gte : Lebih besar dari atau sama dengan. 5. $lt : Lebih kecil dari. 6. $lte : Lebih kecil dari atau sama dengan. Contoh penggunaan: Atau bisa gunakan dibawah ini: db.products.insertMany([     { "_id" : 1, "name" : "xPhone", "price" : 799, "releaseDate": ISODate("2011-05-14"), "spec" : { "ram" : 4, "screen" : 6.5, "cpu" : 2.66 },"color":["white","black"],"storage":[64,128,256]},     { "_id" : 2, "name" : "xTablet", "price...
Baca selengkapnya

UTS

Gambar
  UTS Kerjakan challenge pada file terlampir Challenge 1 - Lokasi dimana (alamat lengkap)? Jl. KPAD Sriwijaya IX No.45A, RT.08/RW.16, Setiamanah, Kec. Cimahi Tengah, Kota Cimahi, Jawa Barat 40524 - Link Google Mapnya apa?  https://maps.app.goo.gl/CEn1HSDHbeDc9P8b9 Challenge 2 - Lokasi dimana (alamat lengkap)? Jl. Letjen M.T. Haryono Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta - Link Google Mapnya apa? https://maps.app.goo.gl/5BL37izEz9Pu1Tf48 Challenge 3 - Lokasi dimana (kota dan negara)? Berlokasi di Turkiya Istanbul - Link Google Mapnya apa? Challenge 4 - Lokasi dimana (alamat lengkap)? Jl. Raya Canduang, Bukik Batabuah, Kec. Candung, Kabupaten Agam, Sumatera Barat 26191 - Link Google Mapnya apa? https://maps.app.goo.gl/MQcCpug5wEFv5Hpj8 Challenge 5 Play Video - Sebutkan nama asli dan nama populer orang yang membagikan uang 1 Juta Dollar dalam Video ini! Orang yang membagikan uang 1 juta dolar dalam video tersebut adalah Kamil Bartoshek , yang lebih dikenal dengan na...
Baca selengkapnya

UTS BIG DATA 8801202103

Gambar
  Exercises Answer the questions or complete the tasks outlined in bold below, use the specific method described if applicable. ** Split this string:** s = "Hi there Sam!" **into a list. ** In  [4]: s = "Hi there Sam!" split_list = s . split () print ( split_list ) ​ In  [2]: [ 'Hi' , 'there' , 'Sam!' ] ​ Out[2]: ['Hi', 'there', 'Sam!'] ** Given the variables:** planet = "Earth" diameter = 12742 ** Use .format() to print the following string: ** The diameter of Earth is 12742 kilometers. In  [6]: planet = "Earth" diameter = 12742 In  [7]: planet = "Earth" diameter = 12742 ​ output_string = "The diameter of {} is {} kilometers." . format ( planet , diameter ) ​ print ( output_string ) ​ The diameter of Earth is 12742 kilometers. ** Given this nested list, use indexing to grab the word "hello" ** In  [7]: lst = [ 1 , 2 ,[ 3 , 4 ],[ 5 ,[ 100 , 200 ,[ 'h...
Baca selengkapnya