Lewati ke isi

Tutorial 4: Desain Web Menggunakan HTML dan CSS3 & Metode Update dan Delete pada Data

Pemrograman Berbasis Platform (CSGE602022) - diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2022/2023

Tujuan Pembelajaran

Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:

  • Memahami konsep update dan delete
  • Memahami cara update dan delete pada Django
  • Memahami susunan tag pada HTML5
  • Mengetahui berbagai jenis tag HTML5
  • Memahami sintaks penulisan CSS
  • Memahami konsep static files pada Django
  • Memahami penggunaan selector pada CSS

Pengenalan HTML

Silakan pelajari dan mencoba sendiri HTML pada referensi ini.

Perbedaan antara HTML dan HTML5 bisa kamu baca pada referensi ini.

Pengenalan CSS

Apa itu CSS?

Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mendeskripsikan tampilan dan format dari sebuah situs web yang ditulis pada markup language (seperti HTML). Kegunaannya menjadikan tampilan situs web lebih menarik.

Untuk mempelajari perbedaan antara CSS dan CSS3 bisa kamu baca pada referensi ini.

Cara Penulisan CSS

Secara umum, CSS dapat dituliskan dalam bentuk sebagai berikut.

selector {
  properties: value;
}

Silakan pelajari dan mencoba sendiri CSS pada referensi ini.

Terdapat tiga jenis cara penulisan CSS:

  1. Inline Styles
  2. Internal Style Sheet
  3. External Style Sheet

Silakan pelajari tentang ketiga jenis CSS tersebut pada referensi ini.

Perlu diperhatikan, jika kamu membuat jenis External Style Sheet, kamu perlu menambahkan tag {% load staticfiles %} pada halaman HTML kamu. Contohnya seperti potongan kode di bawah ini.

{% load staticfiles %}
<html>
  <head>
    <title>Tutorial CSS Yay</title>
    <link rel="stylesheet" href="{% static 'css/tutorial.css' %}" />
  </head>
  <body>
    <div>
      <h1>Tutorial CSS Yay</h1>
    </div>
    <div id="main">
      <div>
        <p>published: 04 Oktober 2021</p>
        <h1><a href="">Tutorial CSS ku</a></h1>
        <p>Yay ini tutorial yang gampang!</p>
      </div>
    </div>
  </body>
</html>

Hal ini dapat terjadi karena CSS merupakan static files di Django. Static files akan dijelaskan pada bagian selanjutnya.

Catatan Tambahan

Jika terdapat lebih dari satu style yang didefinisikan untuk suatu elemen, maka style yang akan diterapkan adalah yang memiliki prioritas yang lebih tinggi. Berikut ini urutan prioritasnya, nomor 1 yang memiliki prioritas paling tinggi.

  1. Inline style
  2. External dan internal style sheets
  3. Browser default

Static files pada Django

Pada framework Django, terdapat file-file yang disebut dengan static files. Static files merupakan file-file pendukung HTML pada suatu situs web. Contoh static files antara lain seperti CSS, JavaScript dan gambar. Pengaturan untuk static files terletak pada file settings.py.

  ...
  # Static files (CSS, JavaScript, Images)
  # httpsdocs.djangoproject.comen1.9howtostatic-files
  STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')
  STATIC_URL = 'static'
  ...

Pada settings.py, terdapat STATIC_ROOT yang menentukan absolute path ke direktori static files ketika menjalankan perintah collectstatic pada proyek dan terdapat STATIC_URL yang merupakan URL yang dapat diakses publik untuk memperoleh static files tersebut.

Perintah collectstatic adalah perintah untuk mengumpulkan static files dari semua app sehingga mempermudah akses untuk semua app.

Penjelasan lebih lengkap mengenai static files dapat kamu baca pada referensi ini.

Selector pada CSS

Pada bagian ini kamu akan mempelajari 3 buah selector pada CSS, yaitu element selector, class selector, dan ID selector.

  1. Element Selector

    Element selector menggunakan tag HTML sebagai selector untuk mengubah properti yang terdapat dalam tag tersebut.

    h1 {
  color: #fca205;
  font-family: "Monospace";
  font-style: italic;
}

  2. ID Selector

    ID selector menggunakan ID pada tag sebagai selector-nya.

    Kamu dapat menambahkan ID pada templat HTML sebagai berikut (ID harus bersifat unik).

    ...
<body>
  <div id="header">
    <h1>Tutorial CSS Yay</h1>
  </div>
  ...
</body>

    Kemudian tambahkan ID tersebut sebagai selector pada file CSS kamu.

    #header {
  background-color: #f0f0f0;
  margin-top: 0;
  padding: 20px 20px 20px 40px;
}

    Dapat dilihat perubahan tampilan yang terjadi. Silakan menambahkan ID selector lain untuk mengubah properti lainnya.

  3. Class Selector

    Selanjutnya, class selector yang dapat digunakan untuk memperindah tampilan templat HTML. Tambahkan beberapa class pada tag HTML

    ...
<div id="main">
    <div class="content_section">
        <p class="date">published: 28 September 2022</p>
        <h2><a href="">Tutorial CSS ku</a></h2>
        <p id="content_1">Yay ini tutorial yang gampang!</p>
    </div>
    <div class="content_section">
        <p class="date ">published: 29 September 2022</p>
        <h2><a href="">Tutorial CSS mu</a></h2>
        <p id="content_2">Yay ini tutorial yang mudah!</p>
    </div>
    <div class="content_section">
        <p>published: 30 September 2022</p>
        <h2><a href="">Tutorial CSS semua</a></h2>
        <p id="content_3">Yay ini tutorial yang tidak sulit!</p>
    </div>
</div>
...

    Kemudian taambahkan class selector berikut pada file CSS kamu.

    .content_section {
  background-color: #3696e1;
  margin-bottom: 30px;
  color: #000000;
  font-family: cursive;
  padding: 20px 20px 20px 40px;
}

    Silakan menambahkan class selector lain untuk mengubah properti lainnya.

Perbedaan penulisan ID selector dan class selector adalah ID selector menggunakan format #[id_name] (selalu diawali #) sedangkan class selector menggunakan format .[class_name] (diawali .).

Untuk memperdalam pengetahuan mengenai CSS Selector Reference, kamu dapat membaca referensi ini.

Tips & Trik untuk CSS

Mengenal Combinators

Setelah mengetahui selector pada CSS, kamu dapat mengenal combinators pada CSS. Combinators adalah suatu penanda yang menandakan hubungan antar elemen, class, atau ID pada CSS.

Terdapat empat combinators pada CSS.

  1. Descendant selector (space)
  2. Child selector (>)
  3. Adjacent sibling selector (+)
  4. General sibling selector (~)

Silakan pelajari keempat jenis combinators tersebut CSS tersebut pada referensi ini.

Mengenal CSS Pseudo-class

Pseudo-class digunakan untuk mendefinisikan state khusus dari sebuah elemen. Contoh beberapa pseudo-class adalah sebagai berikut.

  • :active memilih elemen yang sedang aktif
  • :checked memilih elemen yang telah dicentang
  • :disabled memilih elemen yang telah dinonaktifkan
  • :enabled memilih elemen yang telah diaktifkan
  • :link memilih tautan yang belum pernah dikunjungi
  • :hover memilih elemen pada saat kursor berada diatasnya
  • :visited memilih link yang sudah pernah dikunjungi

Umumnya pseudo-class dituliskan dalam bentuk sebagai berikut.

selector:pseudo-class {
  properties: value;
}

Perbedaan Margin, Border dan Padding

Kamu dapat melihat perbedaan margin, border, dan padding pada referensi ini.

Pengenalan Bootstrap

Terdapat banyak framework CSS yang sering digunakan sekarang ini, salah satunya adalah Bootstrap CSS. Bootstrap CSS menyediakan class-class yang sering digunakan dalam pengembangan suatu situs web. Class-class yang disediakan seperti navbar, card, footer, carousel, dan lain-lain. Selain itu, Bootstrap CSS juga menyediakan banyak fitur yang berguna. Salah satu fitur yang berguna pada Bootstrap CSS adalah grid system yang berguna untuk membagi halaman situs web menjadi lebih mudah dan menarik.

Untuk mempelajari lebih lanjut mengenai Bootstrap CSS, kamu dapat membaca referensi ini.

Responsive Web Design

Responsive web design merupakan metode atau pendekatan sistem desain web yang bertujuan untuk memberikan tampilan situs web yang terlihat baik pada semua perangkat (baik pada komputer meja, tablet, atau ponsel). Responsive web design tidak mengubah konten yang ada pada situs web, melainkan hanya mengubah cara penyajian pada setiap perangkat agar sesuai dengan ukuran layar dan perilaku perangkat masing-masing. Responsive web design menggunakan CSS untuk mengubah ukuran (seperti menyusutkan dan membesarkan) suatu elemen.

Untuk mengecek penerapan responsive web design pada suatu situs web, kamu dapat mengakses situs web tersebut dan membuka fitur Toggle Device Mode pada browser.

Berikut adalah keyboard shortcut untuk mengakes fitur tersebut pada browser Google Chrome.

  • Windows/Linux : CTRL + SHIFT + M
  • Mac : Command + Shift + M

Untuk mempelajari lebih lengkap mengenai Reponsive Web Design, kamu dapat membuka referensi ini.

Tutorial: Menambahkan Bootstrap pada Aplikasi Money Tracker

Berikut adalah hal yang perlu kamu lakukan untuk menyelesaikan bagian tutorial ini.

  1. Menambahkan barisan kode yang dibutuhkan agar aplikasi kamu dapat menggunakan Bootstrap.

    Silakan merujuk kepada informasi pada laman ini.

  2. Silakan lakukan modifikasi pada tampilan aplikasi money_tracker kamu sekreatif mungkin dengan menggunakan Bootstrap.

Tutorial: Menambahkan Navbar pada Keseluruhan Laman Aplikasi

Tambahkan navigation bar (boleh menggunakan Bootstrap) pada halaman tracker.html kamu dan tampilkan nama kamu dan tombol logout pada navigation bar yang kamu buat.

Tutorial: Membuat Fungsi untuk Memperbarui Data Transaksi

Berikut adalah yang perlu kamu lakukan untuk menyelesaikan bagian tutorial ini.

  1. Buat fungsi baru dengan nama modify_transaction yang menerima parameter request dan id pada views.py di folder money_tracker untuk melakukan perbaruan data transaksi. Kamu dapat menggunakan templat kode berikut untuk memuat fungsinya.

    Jangan lupa untuk memahami isi kodenya, ya. 😉

    def modify_transaction(request, id):
    # Get data berdasarkan ID
    transaction = TransactionRecord.objects.get(pk = id)

    # Set instance pada form dengan data dari transaction
    form = TransactionRecordForm(request.POST or None, instance=transaction)

    if form.is_valid() and request.method == "POST":
        # Simpan form dan kembali ke halaman awal
        form.save()
        return HttpResponseRedirect(reverse('money_tracker:show_tracker'))

    context = {'form': form}
    return render(request, "modify_transaction.html", context)

  2. Buka urls.py yang ada pada folder money_tracker dan impor fungsi yang sudah kamu buat tadi.

    from money_tracker.views import modify_transaction

  3. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.

    ...
path('modify/<int:id>', modify_transaction, name='modify_transaction'), #sesuaikan dengan nama fungsi yang dibuat
...

  4. Buatlah sebuah berkas baru pada folder money_tracker/templates dengan nama modify_transaction.html. Kemudian, isilah file tersebut dengan templat berikut ini.

    {% extends 'base.html' %}

{% load static %}

{% block content %}

<h1>Ubah Data Transaksi</h1>

<form method="POST">
    {% csrf_token %}
    <table>
        {{ form.as_table }}
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Ubah"/>
            </td>
        </tr>
    </table>
</form>

{% endblock %}

  5. Bukalah berkas tracker.html yang ada pada folder money_tracker/templates dan ubahlah kode yang sudah ada menjadi seperti berikut agar terdapat tombol ubah untuk setiap transaksi.

    <table>
    <tr>
        <th>Nama</th>
        <th>Jenis</th>
        <th>Jumlah</th>
        <th>Tanggal</th>
        <th>Deskripsi</th>
        <th>Aksi</th>
    </tr>
    {% comment %} Tambahkan data di bawah baris ini {% endcomment %}
    {% for transaction in list_of_transactions %}
        <tr>
            <td>{{transaction.name}}</td>
            <td>{{transaction.type}}</td>
            <td>{{transaction.amount}}</td>
            <td>{{transaction.date}}</td>
            <td>{{transaction.description}}</td>
            <td>
                <a href="{% url 'money_tracker:modify_transaction' transaction.pk %}">
                    <button>
                        Ubah
                    </button>
                </a>
            </td>
        </tr>
    {% endfor %}
</table>
...

Tutorial: Membuat Fungsi untuk Menghapus Data Transaksi

Berikut adalah yang perlu kamu lakukan untuk membuat fungsi penghapusan data transaksi.

  1. Buat fungsi baru dengan nama delete_transaction yang menerima parameter request dan id pada views.py di folder money_tracker untuk melakukan delete data transaksi. Kamu dapat menggunakan templat kode berikut untuk memuat fungsinya.

    Jangan lupa untuk memahami isi kodenya, ya. 😉

    def delete_transaction(request, id):
    # Get data berdasarkan ID
    transaction = TransactionRecord.objects.get(pk = id)
    # Hapus data
    transaction.delete()
    # Kembali ke halaman awal
    return HttpResponseRedirect(reverse('money_tracker:show_tracker'))

  2. Buka urls.py yang ada pada folder money_tracker dan impor fungsi yang sudah kamu buat tadi.

    from money_tracker.views import delete_transaction

  3. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.

    ...
path('delete/<int:id>', delete_transaction, name='delete_transaction'), #sesuaikan dengan nama fungsi yang dibuat
...

  4. Bukalah berkas tracker.html yang ada pada folder money_tracker/templates dan ubahlah kode yang sudah ada menjadi seperti berikut agar terdapat tombol hapus untuk setiap transaksi.

    <table>
    <tr>
        <th>Nama</th>
        <th>Jenis</th>
        <th>Jumlah</th>
        <th>Tanggal</th>
        <th>Deskripsi</th>
        <th>Aksi</th>
    </tr>
    {% comment %} Tambahkan data di bawah baris ini {% endcomment %}
    {% for transaction in list_of_transactions %}
        <tr>
            <td>{{transaction.name}}</td>
            <td>{{transaction.type}}</td>
            <td>{{transaction.amount}}</td>
            <td>{{transaction.date}}</td>
            <td>{{transaction.description}}</td>
            <td>
              <a href="{% url 'money_tracker:modify_transaction' transaction.pk %}">
                  <button>
                      Ubah
                  </button>
              </a>
              <a href="{% url 'money_tracker:delete_transaction' transaction.pk %}">
                  <button>
                      Hapus
                  </button>
              </a>
            </td>
        </tr>
    {% endfor %}
</table>
...

Jalankan proyek Django-mu dan cobalah untuk menghapus data transaksi yang sudah ada pada browser favoritmu.

Referensi Tambahan

  • Kamu dapat membuka tautan ini untuk melihat kode yang dapat kamu gunakan untuk menambahkan navigation bar dengan menggunakan Bootstrap.
  • Kamu dapat membuka tautan ini untuk melihat kode yang dapat kamu gunakan untuk menambahkan navigation bar dengan menggunakan CSS secara manual.

Akhir Kata

Selamat! Kamu telah menyelesaikan Tutorial 4 dengan baik. 😄

Seperti biasa, jangan lupa untuk melakukan add, commit, dan push perubahan yang sudah kamu lakukan untuk menyimpannya ke dalam repositori GitHub sebelum kamu menutup pekerjaan kamu. 😉

Credits

Tutorial ini dikembangkan berdasarkan PBP Ganjil 2023 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2023. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.

Pembaruan terakhir: 11 April 2023 12:57:34
Dibuat: 7 Maret 2023 20:45:09