Cara Membuat Aplikasi Catatan Perjalanan Peduli diri Berbasis Web UKK Paket 1 2022 Halaman Catatan Perjalanan (Materi 3)

Widitutor - Pada materi sebelumnya kita belajar cara membuat database dan membuat tampilan form login dan register, begitupun dengan cek_login.php dan cek session user. Setelah itu kita membuat halaman menu dashboard sebagai halaman utama untuk mengatur menu - menu yang ada di aplikasi.

Aplikasi Catatan Perjalanan ini mengharuskan sistem bisa melakukan proses CRUD (Create, Read, Update, Delete), User bisa menambahkan data perjalanan, mengedit data perjalanan, membaca data perjalanan, bahkan user memiliki hak untuk menghapus data perjalanan. 

Cara Membuat Aplikasi Catatan Perjalanan Peduli diri Berbasis Web UKK Paket 1 2022 Halaman Catatan Perjalanan (Materi 3)

Dalam membuat aplikasi berbasis web yang mampu mengoperasikan sistem CRUD (Create, Read, Update, Delete), tentunya kita harus membuat beberapa file agar semua proses dalam aplikasi dapat berjalan dengan lancar. 

Persiapan penyimpanan Source Code Halaman Catatan Perjalanan Aplikasi Catatan Perjalanan

Dalam penyimpan source code halaman terdapat perbedaan pada sebelumnya, kita harus membuat folder lagi di dalam folder aplikasi kita, perlu diingat bahwa setiap folder itu begitu penting perannya dalam aplikasi kita. Dimana setiap folder memiliki informasi tempat penyimpanan suatu source code ketika di panggil oleh program. Sebagai contoh : <a class="nav-link" href="../tambah_perjalanan/tambah.php"> kode ini merupakan syntak a href dimana pengertiannya untuk memanggil suatu file dalam folder terntentu dengan melewati beberapa tahapan sebelum memanggial file tersebut. Lebih tepatnya syntak di atas fungsinya untuk memanggil file tertentu dalam folder aplikasi kita. Jadi kita harus hati – hati dalam membuat folder serta menyimpan souce code program kita agar tidak terjadi kesalahan dalam pemanggilan program. 

Cara Simpan source Code Halaman Catatan Perjalanan

Sebelumnya kita sudah menyimpan program kita dengan nama catatan_perjalanan di penyimpanan laptop atau komputer kita, kemudian anda hanya perlu membuat folder baru dengan nama catatan pada folder aplikasi anda. Perhatikan contoh gambar dibawah ini.

Penjelasan :

1. folder catatan merupakan tempat untuk menyimpan beberapa file yang menampilkan halaman catatan perjalanan,
2. folder css ini fungsinya untuk mengatur halaman aplikasi, jika materi sebelumnya kita membuat source code style.css untuk mengatur halaman dan tampilan form register dan form login, namun untuk kali ini fungsinya mengatur halaman aplikasi.

Persiapan Pembuatan Halaman Aplikasi Catatan Perjalanan

Ada beberapa halaman yang harus di persiapkan dalam membuat aplikasi catatan perjalanan ini, diantaranya adalah

1. source code catatan.php, catatan.php fungsinya untuk menampilkan jumlah data yang ada pada table perjalanan, setiap data yang diinputkan pada aplikasi akan tersimpan pada database, kemudian fungsi dari catatan perjalanan ini adalah menampilkan data tersebut. Dengan membaca semua data yang ada di table database perjalanan maka setiap user mampu melihat dan melakukan aksi seperti, mengedit, menghapus data atau menambahkan data pada aplikasi tanpa perlu membuka table database.

Simpan code dibawah ini dengan nama catatan.php di folder catatan pada folder aplikasi anda

2. source code cetak.php, fungsi dari code ini adalah membuat laporan atau report aplikasi. Tentunya setiap aplikasi harus mampu melakukan data laporan, setiap laporan harus tersusun rapih dan dapat di sortir sesuai dengan keinginan user. Pada aplikasi ini bentuk laporannya adalah format.pdf dimana aplikasi mampu mengexport data dalam bentuk pdf dengan kriteria atau sortir menurut tanggal perjalanan, suhu tubuh bahkan menurut tempat tujuan user.

Simpan code dibawah ini dengan nama cetak.php di folder catatan pada folder aplikasi anda dan harus sesuai dengan gambar diatas

3. source code hapus.php, fungsi dari code ini adalah menghapus setiap kolom data pada aplikasi menurut id primary key data setiap perjalanan. Jadi aplikasi ini mampu menghapus data setiap perjalanan sesuai dengan keinginan user atau pengguna. Itulah fungsinya pada table perjalanan dibuatkan kolom data untuk id dimana data id ini dibuat primary key untuk mewakili setiap data inputan yang ada di table perjalanan.

Simpan code dibawah ini dengan nama hapus.php di folder catatan pada folder aplikasi anda dan disamakan penyimpanannya dengan source code sebelumnya

4. source code simpan.php, simpan.php ini fungsinya sangat penting sekali untuk menyimpan inputan data pada aplikasi ke dalam table perjalanan database. Ibaratnya kita melakukan inputan di form input catatan kemudian data yang kita inputkan itu akan melalui proses seleksi apakah benar data yang di inputan sesuai dengan aturan type data pada table database, jika sesuai maka data akan tersimpan secara otomatis pada table perjalanan dan langsung muncul pada tampilan catatan.php sehingga user atau pengguna dapat langsung melihat hasil inputan yang dimasukkan.

Salin dan Simpan code dibawah ini dengan nama simpan.php di folder catatan pada folder aplikasi anda dan harus sesuai dengan penyimpanan sebelumnya.

Penjelasan dan kesimpulan

Perlu diingat dalam penyimpanan dan nama folder ataupun nama source code harus sesuai dengan apa yang sudah di buatkan, jika terjadi kesalahan penyimpanan maka aplikasi tidak bisa dioperasikan, bahkan aplikasi bisa mengalami error karna tidak bisa membaca ataupun menerima inputan yang berbeda. Perlu diperhatikan juga bahwa soruce code yang kita gunakan adalah bahasa pemrograman php, dimana penyimpanan file pada aplikasi ini harus ekstensi.php agar memudahkan komputer untuk mengenali aplikasi apa yang ada gunakan dalam pembuatan Aplikasi Catatan Perjalanan Berbasis Web Php Dan Mysqli 

Setelah semuanya dibuatkan source code dan disimpan pada folder yang seharusnya, maka langkah selanjutnya anda perlu mengecek dan menjalankan aplikasinya dengan cara menjalan aplikasi xampp control panel dengan mengakftifkan apache dan mysql, kemudian buka aplikasi web browser anda. Ketikkan url pada alamat aplikasi web browser anda localhost/catatan_perjalanan. 

Setelah itu maka anda akan diarahkan kehalaman login, lakuakn login dengan nik dan nama yang sebelumnya anda buat di halaman form register. Lakukan proses login, jika semuanya sudah maka anda akan diarahkan ke halaman dashboard aplikasi. Kemudian pilih menu catatan pada navbar aplikasi.

Apabila source code sesuai dengan yang diatas dan langkah – langkah membuat aplikasi catatan perjalanan berbasis web sudah anda ikuti, maka tampilan apaliksi tersebut akan seperti gambar dibawah ini. 

Siapa saja boleh

Seorang biasa yang belajar menulis blog

Share this post