Pada tutorial lanjutan ini saya akan menjelaskan dari tutorial-tutorial sebelumnya tentang membuat crud dengan framework django pada database Mysql. di mana pada tutorial sebelumnya tentang tutorial crud django kita telah belajar cara menampilkan data dari database dengan django pada MySql, menginput data ke database dengan django, dan pada tutorial Membuat CRUD Dengan Django: Update Data ini saya akan menjelaskan tentang cara mengupdate atau mengedit data dengan framework django. silahkan simak contoh dan penjelasan dari tutorial cara Membuat CRUD Dengan Django: Update Data berikut ini. Membuat CRUD Dengan Django : Update Data
Cara Membuat CRUD Dengan Django – Update Data
Pertama kita akan mengubah pada template index.html untuk aksi redirect ke page bagian edit data.
kita edit tablenya saja pada file templates/index.html
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>NPM</th>
<th>Nama</th>
<th>Tanggal Lahir</th>
<th>Alamat</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
{% for mahasiswa in data %}
<tr>
<td>{{mahasiswa.npm}}</td>
<td>{{mahasiswa.nama}}</td>
<td>{{mahasiswa.tgl_lahir}}</td>
<td>{{mahasiswa.alamat}}</td>
<td>
<input type="button" class="btn btn-outline-warning" onclick="location.href='/editdata/{{mahasiswa.npm}}';" value=" Edit" />
<a type="button" class="btn btn-outline-danger" href="/hapusdata/{{mahasiswa.npm}}" onclick="return confirm('Anda yakin mau menghapus data ini?');">Delete</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
Setelah itu kita akan membuat route url "editdata" pada project kita, untuk apa? untuk meredirect ke halaman edit page.
kita tambah kode dibawah ini di file crudtutorial/urls.py
path('editdata',views.edit),
Sehingga kode lengkapnya pada file tersebut menjadi seperti ini,
from django.contrib import admin
from django.urls import path
from mahasiswa import views
urlpatterns = [
path('admin/', admin.site.urls),
path('',views.index),
path('tambah',views.tambah),
path('editdata',views.edit),
]
Penjelasan:
dari kode diatas kita hanya menambahkan 1 line saja, dimana ketika kamu akan mengakses dengan url http://127.0.0.1:8000/editdata, maka dia akan mengeksekusi atau menjalankan kode yang ada pada function edit terdapat pada file mahasiswa/views.py.
Seperti apa kodenya?
Berikut adalah kode dari function edit pada mahasiswa/views.py.
def edit(request, npm):
obj = get_object_or_404(Data_mahasiswa, npm = npm)
form = BiodataMhs(request.POST or None, instance = obj)
if form.is_valid():
form.save()
return redirect("/")
data = {
'mhs':obj,
}
return render(request, 'editdata.html',data)
Penjelasan:
Pada get_object_or_404() adalah mencek apakah ada objek yang didapatkan dari variable npm, lalu diproses pada modelnya. Jika tidak ada objek maka 404. Silahkan baca get_object_or_404() dokumentasinya .
Setelah itu kita memanggil form BiodataMhs untuk dicek apakah ada request POST, dan menginstance pada variable obj.
Jika form tersebut valid, maka akan menyimpan ke database, lalu redirect ke halaman awal.
Lalu kita buat variable data untuk menampung data objek yang kita akan kirimkan ke template.
Maka akan meredirect ke halaman editdata.
Mari kita buat layout tersebut, buatlah file editdata.html pada folder templates,
lalu copas kode dibawah ini.
<html>
<head>
<title>Membuat CRUD sederhana menggunakan framework Django</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
</head>
<body>
<center>
<h1>Membuat CRUD sederhana menggunakan framework Django</h1>
<h3>Afrizal's Blog</h3>
</center>
<br/>
<br/>
<div class="container">
{% if form.errors %}
{% for field in form %}
{% for error in field.errors %}
<div class="alert alert-danger">
<strong>{{ error|escape }}</strong>
</div>
{% endfor %}
{% endfor %}
{% for error in form.non_field_errors %}
<div class="alert alert-danger">
<strong>{{ error|escape }}</strong>
</div>
{% endfor %}
{% endif %}
<form method="POST">
{% csrf_token %}
<table style="margin:20px auto;">
<tr>
<td>NPM</td>
<td>
<input type="number" name="npm" value="{{mhs.npm}}"></td>
</tr>
<tr>
<td>Nama</td>
<td>
<input type="text" name="nama" value="{{mhs.nama}}"></td>
</tr>
<tr>
<td>Tanggal lahir</td>
<td>
<input type="date" name="tgl_lahir" value="{{mhs.tgl_lahir|date:'Y-m-d'}}"></td>
</tr>
<tr>
<td>Alamat</td>
<td>
<input type="text" name="alamat" value="{{mhs.alamat}}"></td>
</tr>
<td></td>
<td><input type="button" onclick = "window.history.back()" value="kembali"></td>
<td><input type="submit" value="Simpan"></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</body>
</html>
Nah, ketika kalian mengeksekusi pada halaman awal lalu kalian klik edit maka sistem akan menampilkan layout tersebut.
Wait...
Terus proses agar inputan kita masuk ke database pada proses mana ?
yap, pada function edit pada line ini
if form.is_valid():
form.save()
return redirect("/")
Ketika kalian menekan tombol save, maka akan dicek pada line ini,
jika formnya valid dan ada request POST, maka dia akan menyimpan ke database.
Mudah bukan?? Yupp hehe.
Kita jalankan server menggunakan perintah
python manage.py runserver
Sekarang teman-teman bisa cek hasilnya di browser
Kurang lebih hasilnya seperti berikut.
Ini adalah tampilan data yang masih kosong, belum kita inputkan.
Pada gambar diatas adalah sebelum kita update.
Kita klik pada tombol edit, maka akan pindah ke halaman editdata.
Nah, pada kolom nama saya asumsikan mengganti dengan "afrizal" yang sebelumnya adalah "Afrizal Muhamaad Yasin".
Lalu kita klik tombol simpan.
Nah pada gambar diatas data telah terupdate.
Oke sampai sini kita telah berhasil melakukan edit data ke database mysql dengan framework django.
Nah, bagaimana caranya agar data yang kita inputkan bisa dihapus?
Simak di artikel selanjutnya
Membuat CRUD dengan Django - Menghapus data
Baca:
Membuat CRUD dengan Django - Menampilkan data dari database
Membuat CRUD dengan Django - Menginput data ke database
Membuat CRUD dengan Django - Mengupdate data
Membuat CRUD dengan Django - Menghapus data
Comments