Membuat Aplikasi Web dari Awal dengan Python Flask dan MySQL: Bagian 4

() translation by (you can also view the original English article)

Pada bagian sebelumnya dari seri tutorial ini, kita mengimplementasi fungsi yang dibutuhkan untuk user yang sudah login untuk menambahkan keinginan. Kita juga lihat bagaimana menampilkan keinginan yang dimasukkan user di halaman beranda user.

Pada bagian ini kita akan membuat fungsi untuk mengedit dan menghapus keinginan yang dimasukkan user.

Memulai

Kita mulai dengan membuat klon bagian sebelumnya dari tutorial dari GitHub.

1	git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part3.git

Setelah source code sudah diklon, masuk ke direktori proyek dan nyalakan web server.

1	cd PythonFlaskMySQLApp_Part3
2	python app.py

Arahkan browser ke http://localhost:5002/ dan kamu akan menemukan aplikasinya berjalan.

Mengedit Daftar Keinginan

Langkah 1: Menampilkan Ikon Edit

Kita sudah mengikat data yang diterima dari jQuery ke HTML kita. Kita akan memodifikasi kode dan menggunakan template jQuery untuk membuatnya lebih mudah untuk mengikat data. Kita juga menambahkan ikon edit pada HTML kita untuk menyediakan cara untuk mengupdate keinginan. Buka userHome.html dan tambahkan referensi ke template jQuery.

1	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

Hapus div list-group yang ada dan gantikan dengan kode HTML berikutt:

<div class="row">
    <div class="col-md-12">

        <div class="panel-body">

            <ul id="ulist" class="list-group">



            </ul>
        </div>

    </div>
</div>

Di dalam UL dengan kelas list-group kita akan mengikat data kita. Definisikan listTemplate seperti terlihat di body HTML berikut:

<script id="listTemplate" type="text/x-jQuery-tmpl">
    <li class="list-group-item">
        <div class="checkbox">
            <label>
                ${Title}
            </label>
        </div>
        <div class="pull-right action-buttons">
            <a data-toggle="modal" data-target="#editModal"><span class="glyphicon glyphicon-pencil"></span></a>
           
        </div>
    </li>
</script>

Ubah pemanggilan sukses AJAX jQuery untuk mengikat data ke listTemplate.

<script>
    $(function() {
        $.ajax({
            url: '/getWish',
            type: 'GET',
            success: function(res) {

                // Parse the JSON response
                var wishObj = JSON.parse(res);
                
                // Append to the template
                $('#listTemplate').tmpl(wishObj).appendTo('#ulist');


            },
            error: function(error) {
                console.log(error);
            }
        });
    });
</script>

Tambahkan juga beberapa gayar di userHome.html:

<style>
    .trash {
        color: rgb(209, 91, 71);
    }
    .panel-body .checkbox {
        display: inline-block;
        margin: 0px;
    }
    .list-group {
        margin-bottom: 0px;
    }
</style>

Simpan semua perubahan dan restart server. Arahkan browser ke http://localhost:5002 dan sign in menggunakan email dan password yang sah. Setelah login, kamu bisa melihat keinginan yang dibuat user.

Langkah 2: Menampilkan popup Edit

Kita akan menggunakan Bootstrap untuk menampilkan popup untuk menyediakan antarmuka untuk mengedit keinginan. Tambahkan referensi untuk Bootstrap di userHome.html.

1	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Begitu referensi dimasukkan, tambahkan HTML berikut ke userHome.html.

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="editModalLabel">Update Wish</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">Title:</label>
                        <input type="text" class="form-control" id="editTitle">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">Description:</label>
                        <textarea class="form-control" id="editDescription"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="btnUpdate" class="btn btn-primary">Update</button>
            </div>
        </div>
    </div>
</div>

HTML di atas akan menjadi popup. Ketika user menekan ikon edit popup akan muncul. Kita sudah menambahkan atribut data-target dan data-toggle yang akan memunculkan popup.

1	<a data-toggle="modal" data-target="#editModal"><span class="glyphicon glyphicon-pencil"></span></a>

Simpan perubahan di atas dan restart aplikasi. Setelah sign-in ke aplikasi, klik ikon edit dan kamu akan melihat popup.

Langkah 3: Mengisi Popup Edit

Ketika user menekan ikon edit, kita aman munculkan popup untuk memperbarui dengan title dan description yang akan diperbarui. Untuk memulai, kita perlu ID keinginan untuk mengambil detail keinginan yang bersangkutan saat user menekan ikon edit. Jadi ubah kode template jQuery dengan tambahan atribut data-id pada tautan elemen edit.

1	<a data-id=${Id} onclick="Edit(this)" ><span class="glyphicon glyphicon-pencil"></span></a>

Kita juga menyimpan event onclick untuk memanggil fungsi Edit. Di dalam fungsi Edit, kita akan membuat panggilan AJAX ke fungsi python bernama getWishById yang akan mengembalikan detail keinginan yang dibutuhkan.

function Edit(elm) {
    $.ajax({
        url: '/getWishById',
        data: {
            id: $(elm).attr('data-id')
        },
        type: 'POST',
        success: function(res) {
            console.log(res);
        },
        error: function(error) {
            console.log(error);
        }
    });
}

Berikutnya, buka app.py dan buat fungsi baru bernama getWishById. Menggunakan fungsi ini, kita akan ambil detail keinginan dari database.

@app.route('/getWishById',methods=['POST'])
def getWishById():
    try:
        if session.get('user'):

            _id = request.form['id']
            _user = session.get('user')

            conn = mysql.connect()
            cursor = conn.cursor()
            cursor.callproc('sp_GetWishById',(_id,_user))
            result = cursor.fetchall()

            wish = []
            wish.append({'Id':result[0][0],'Title':result[0][1],'Description':result[0][2]})

            return json.dumps(wish)
        else:
            return render_template('error.html', error = 'Unauthorized Access')
    except Exception as e:
        return render_template('error.html',error = str(e))

Seperti yang kamu lihat di fungsi di atas, kita melempar ID keinginan ke fungsi ini dan fungsi tersebut mendapatkan data dari database menggunakan user ID dan wish ID. Setelah data didapat, fungsi tersebut mengubah data menjadi list dan mengembalikannya sebagai data JSON.

Berikutnya, kita buat stored procedure MySQL yang dibutuhkan untuk mengambil data dari database.

DELIMITER $$

CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_GetWishById`(
IN p_wish_id bigint,
In p_user_id bigint
)
BEGIN
select * from tbl_wish where wish_id = p_wish_id and wish_user_id = p_user_id;
END

Kode di atas adalah stored procedure untuk mengambil detail keinginan menggunakan wish ID dan user ID.

Simpan perubahan dan restart server. Setelah kamu sign-in ke aplikasi, klik ikon edit dan kamu akan melihat detail yang tertulis di konsol browsermu.

Untuk mengikat data yang diterima ke popup HTML, kita perlu menghapus atribut data-target dan data-toggle dari tag tautan ikon edit. Lalu tambahkan kode berikut ke callback sukses dari fungsi JavaScript Edit untuk mengisi popup dan memicunya.

// Parse the received JSON string
var data = JSON.parse(res);

//Populate the Pop up
$('#editTitle').val(data[0]['Title']);
$('#editDescription').val(data[0]['Description']);

// Trigger the Pop Up
$('#editModal').modal();

Simpan perubahan dan restart server. Setelah sign-in ke aplikasi, cobalah klik ikon edit dan kamu akan lihat popup dengan judul dan deskripsi.

Langkah 4: Memperbarui Detail Keinginan

Untuk mengimplementasi fungsi update, kita buat stored procedure MySQL.

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_updateWish`(
IN p_title varchar(45),
IN p_description varchar(1000),
IN p_wish_id bigint,
In p_user_id bigint
)
BEGIN
update tbl_wish set wish_title = p_title,wish_description = p_description
    where wish_id = p_wish_id and wish_user_id = p_user_id;
END$$
DELIMITER ;

Seperti yang terlihat pada stored procedure di atas, kita akan mengirim title dan description yang sudah dimodifikasi bersama dengan ID dari keinginan dan user untuk memperbarui detail di database.

Lalu, buat fungsi baru bernama updateWish untuk memperbarui detail. Berikut adalah fungsi updateWish:

@app.route('/updateWish', methods=['POST'])
def updateWish():
    try:
        if session.get('user'):
            _user = session.get('user')
            _title = request.form['title']
            _description = request.form['description']
            _wish_id = request.form['id']



            conn = mysql.connect()
            cursor = conn.cursor()
            cursor.callproc('sp_updateWish',(_title,_description,_wish_id,_user))
            data = cursor.fetchall()

            if len(data) is 0:
                conn.commit()
                return json.dumps({'status':'OK'})
            else:
                return json.dumps({'status':'ERROR'})
    except Exception as e:
        return json.dumps({'status':'Unauthorized access'})
    finally:
        cursor.close()
        conn.close()

Seperti yang terlihat di kode di atas, setelah memvalidasi session yang sah, kita mengumpulkan data yang dikirim dan memanggil fungsi sp_updateWish untuk memperbarui detail.

Untuk memanggil fungsi updateWish, kita perlu menambahkan event saat user menekan tombol Update. Jadi, beri nama tombol update btnUpdate dan tambahkan event onclick sebagai beirkut:

$('#btnUpdate').click(function() {
    $.ajax({
        url: '/updateWish',
        data: {
            title: $('#editTitle').val(),
            description: $('#editDescription').val(),
            id: localStorage.getItem('editId')
        },
        type: 'POST',
        success: function(res) {
            $('#editModal').modal('hide');
            // Re populate the grid
        },
        error: function(error) {
            console.log(error);
        }
    })
});

Seperti terlihat pada kode di atas, kita sudah mengumpulkan editId dari localStorage, jadi di dalam fungsi Edit simpan ID ke localStorage.

1	localStorage.setItem('editId',$(elm).attr('data-id'));

Masukkan pemanggilan AJAX getWish ke sebuah fungsi, jadi kita bisa memanggilnya kembali saat data sudah diperbarui.

function GetWishes() {
    $.ajax({
        url: '/getWish',
        type: 'GET',
        success: function(res) {
            var wishObj = JSON.parse(res);
            $('#ulist').empty();
            $('#listTemplate').tmpl(wishObj).appendTo('#ulist');
        },
        error: function(error) {
            console.log(error);
        }
    });
}

Panggil fungsi GetWishes pada kondisi sukses dari pemanggilan AJAX update.

$('#btnUpdate').click(function() {
    $.ajax({
        url: '/updateWish',
        data: {
            title: $('#editTitle').val(),
            description: $('#editDescription').val(),
            id: localStorage.getItem('editId')
        },
        type: 'POST',
        success: function(res) {
            $('#editModal').modal('hide');
            
            // Re populate the grid
            GetWishes();
        },
        error: function(error) {
            console.log(error);
        }
    })
});

Simpan semua perubahan dan restart server. Setelah sign-in ke aplikasi, cobalah edit keinginan yang sudah dibuat oleh user.

Menghapus Keinginan

Langkah 1: Menampilkan Popup Konfirmasi

Tambahkan kode HTML berikut ke userHome.html.

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="text-align:center;">
                <h4 class="modal-title" style="color:red;" id="deleteModalLabel">You are going to Delete this forever !!</h4>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Delete</button>
            </div>
        </div>
    </div>
</div>

Tambahkan ikon hapus di dalam listTemplate dengan menambahkan HTML berikut:

1	<a data-id=${Id} onclick="ConfirmDelete(this)" ><span class="glyphicon glyphicon-trash"></span></a>

Saat menekan ikon hapus di atas, kita panggil fungsi JavaScript bernama ConfirmDelete yang akan memicu popup konfirmasi.

1	function ConfirmDelete(elem) {
2	localStorage.setItem('deleteId', $(elem).attr('data-id'));
3	$('#deleteModal').modal();
4	}

Simpan perubahan dan restart server. Setelah sign-in, klik ikon hapus pada daftar keinginan dan kamu akan lihat popup konfirmasi yang muncul.

Langkah 2: Hapus sebuah Keinginan

Untuk mengimplementasi fungsi menghapus keinginan, kita buat stored procedure untuk menghapus.

DELIMITER $$
USE `BucketList`$$
CREATE PROCEDURE `sp_deleteWish` (
IN p_wish_id bigint,
IN p_user_id bigint
)
BEGIN
delete from tbl_wish where wish_id = p_wish_id and wish_user_id = p_user_id;
END$$

DELIMITER ;

Prosedur tersebut menerima ID keinginan dan user dan menghapus keinginan yang bersangkutan dari database.

Lalu, buat sebuah fungsi di dalam app.py untuk memanggil prosedur sp_deleteWish.

Kita akan buat sebuah fungsi bernama deleteWish untuk menghapus keinginan.

@app.route('/deleteWish',methods=['POST'])
def deleteWish():
    try:
        if session.get('user'):
            _id = request.form['id']
            _user = session.get('user')

            conn = mysql.connect()
            cursor = conn.cursor()
            cursor.callproc('sp_deleteWish',(_id,_user))
            result = cursor.fetchall()

            if len(result) is 0:
                conn.commit()
                return json.dumps({'status':'OK'})
            else:
                return json.dumps({'status':'An Error occured'})
        else:
            return render_template('error.html',error = 'Unauthorized Access')
    except Exception as e:
        return json.dumps({'status':str(e)})
    finally:
        cursor.close()
        conn.close()

Pada fungsi di atas, kita perlu memvalidasi session. Setelah kita validasi user session, gunakan ID keinginan dan user yang kita dapat untuk memanggil stored procedure sp_deleteWish.

Untuk memanggil fungsi deleteWish, tambahkan event onclick ke tombol Delete pada popup konfirmasi menghapus.

1	<button type="button" class="btn btn-primary" onclick="Delete()">Delete</button>

Buat fungsi JavaScript bernama Delete, dan di dalam Delete buat pemanggilan AJAX ke fungsi python deleteWish.

function Delete() {
    $.ajax({
        url: '/deleteWish',
        data: {
            id: localStorage.getItem('deleteId')
        },
        type: 'POST',
        success: function(res) {
            var result = JSON.parse(res);
            if (result.status == 'OK') {
                $('#deleteModal').modal('hide');
                GetWishes();
            } else {
                alert(result.status);
            }
        },
        error: function(error) {
            console.log(error);
        }
    });
}

Pada kondisi sukses fungsi Delete di atas, kita akan peruksa status yang dikembalikan, jika OK kita kaan sembunyikan popup dan memuat ulang daftar keinginan.

Simpan perubahan dan restart server. Setelah login di aplikasi, cobalah menghapus sebuah keinginan dari halaman beranda user.

Kesimpulan

Pada bagian ini, kita lihat bagaimana untuk mengimplementasi fitur Edit dan Delete pada aplikasi Daftar Keinginan kita. Pada bagian berikutnya, kita akan implementasi pagination untuk daftar pada halaman beranda user dan mengimplementasi beberapa fitur lain.

Source code dari tutorial ini tersedia di GitHub.

Beri tahu kami pendapatmu di komentar di bawah!