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

Aplikasi Catatan Perjalanan Peduli diri Berbasis Web ini memiliki tampilan login dan register, dimana tampilan login harus menjadi halaman awal disaat aplikasi dipanggil atau di jalankan melalui url localhost/catatan_perjalanan. 

Ada beberapa hal yang harus diperhatikan saat membuat tampilan login dan register di aplikasi catatan perjalanan peduli diri, diantaranya :

Persiapan Pembuatan Aplikasi Catatan Perjalanan

Buatlah Script Source Code dibawah ini dengan nama dan ekstensi yang sama dalam penyimpanannya, setiap file source code memiliki kegunaan dan fungsi yang saling terikat satu sama lain, jika terjadi kesalahan pada nama penyimpanan atau ekstensi dan tidak sesuai dengan list dibawah ini, akan terjadi error pada aplikasi anda.

1. Script Source Code index.php (Script Source Code halaman login)
2. Script Source Code register.php (Script Source Code halaman register)
3. Script Source Code style.css (Script Source Code mengatur tata letak dan desain halaman login dan register)
4. Script Source Code koneksi.php (Script Source Code untuk menghubungkan database dengan aplikasi )
5. Script Source Code cek_login.php (Script Source Code untuk memeriksa session login dari setiap user ke aplikasi )
6. Script Source Code tambah_register.php (Script Source Code untuk menambahkan user atau akun baru pada aplikasi)
7. Script Source Code home.php (Script Source Code untuk halaman home aplikasi, jika user berhasil login maka akan di arahkan ke halaman home.php, namun jika gagal terdapat kesalahan pada username atau password maka user akan di arahkan kehalaman login secara otomatis untuk melakukan login ulang)
8. Script Source Code keluar.php (Script Source Code untuk mengakhiri akses session user pada aplikasi, dimana user melakukan logout pada aplikasi kemudian akan di arahkan langsung ke halaman login (index.php) sebagai halaman utama aplikasi)

Penyimpanan Aplikasi

Perlu diperhatikan dalam penyimpanan aplikasi berbasis web anda tidak bisa sembarangan menyimpan file atau folder, karna setiap aplikasi harus sesuai dengan alamat media penyimpanannya. Pastikan anda sudah menginstal aplikasi Xampp Control Panel, kemudian cari localdisk C kemudian > Cari folder Xampp > Pilih Folder Htdocs > buatlah folder untuk aplikasi anda, misalnya folder aplikasi anda catatan_perjalanan, maka pada saat menjalankan atau membuka program yang perlu anda ketikkan di url web browser adalah localhost/catatan_perjalanan dan pastikan setiap file diatas simpan di dalam folder catatan_perjalanan agar setiap souce code bisa di operasikan dan tampil pada saat di jalankan.

Perhatikan seperti gambar dibawah ini

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

Hal yang harus dimulai pertama kali Membuat Aplikasi Catatan Perjalanan Peduli diri Berbasis Web UKK Paket 1 2022 adalah pastikan anda membuat sour code koneksi.php, koneksi.php ini memiliki fungsi yang sangat penting dalam aplikasi berbasis web. Fungsinya untuk menghubungkan aplikasi yang kita buat ke database yang kita miliki, dimana harus terjadi singkron dalam aliran data dari aplikasi ke database, karena setiap inputan data akan di simpan pada database kita, setiap data yang di tampilkan pada aplikasi merupakan data yang diambil dari database kita sehingga koneksi.php ini sangat penting sekali perannya dalam aplikasi kita. Secara mudah dan singkatnya sour code koneksi.php ini intinya sebagai jembatan atau penghubung dari aplikasi ke database ataupun sebaliknya dari database ke aplikasi. Jika saja terdapat kesalahan dalam pembuatan script source code koneksi.php maka akan terjadi error pada aplikasi dan aplikasi tidak bisa dijalankan, karena langkah awal untuk mengakses aplikasi adalah melalui form login, akan tetap jika koneksi.php error maka user tidak bisa melakukan login ataupun register di aplikasi yang kita buat.

Script Source Code Yang Harus dibuat

1. Koneksi.php

Aturan untuk membuat koneksi.php pastikan penyebutan nama database tidak salah dan sesuai dengan nama database yang sebelumnya kita buat. Sehingga tidak terjadi error ataupun tidak ditemukkannya database pada koneksi.php

Berikut ini merupakan Script Source Code koneksi.php, salin dan simpan dengan ekstensi .php di folder yang sebelumnya anda buat folder aplikasi. 

2. index.php

Agar tampilan form login muncul paling pertama pada saat aplikasi dijalanakan atau di program dijalankan, maka nama penyimpanan untuk form login ini harus dengan nama index.php dengan ekstensi .php simpan di folder aplikasi seperti contoh gambar diatas.

3. register.php

Aplikasi kita harus memiliki form register agar setiap user mampu membuat user baru yang sesuai keinginan user.

Salin script dibawah ini dengan nama register.php dan di folder aplikasi anda.

4. tambah_register.php

Selain aplikasi kita mampu melakukan login dengan keamanan yang sangat kuat, aplikasi catatan perjalanan juga harus bisa melakukan register atau create akun untuk user baru, sehingga siapapun bisa memiliki hak akses untuk masuk ke aplikasi kita dengan menggunakan username dan password sesuai keinginan user.

5. cek_login.php

Cek_login.php merupakan script source code untuk memeriksa session ketika user melakukan login di aplikasi kita. Secara singkatnya script ini fungsinya untuk memerika apakah username dan password yang digunakan user untuk login di aplikasi kita sesuai dengan yang didatabase atau tidak. Jika sesuaikan user akan diarahkan ke halaman dashboard atau home.php dan jika tidak maka user akan diarahkan ke halaman index.php dengan keterangan bahwa username atau password yang di inputkan salah.

Salin script sour code dibawah ini kemudian simpan di folder aplikasi anda dengan nama cek_login.php

6. style.css

Style.css ini berbeda dengan script code sebelumnyaa karena style.css ini menggunakan bahasa pemrograman CSS dimana fungsinya untuk mengatur tata letak halaman website atau tampilan kita dan memperindah dan mempercantik dengan tampilan warna ataupun element-elemnt pada setiap tampilan

Salin script sour code dibawah ini kemudian simpan di folder aplikasi anda dengan nama style.css

7. home.php

Home.php merupakan halaman dashboard atau halaman awal ketika user berhasil melakukan login di form login yang sudah kita sediakan, dimana tampilan ini sangat penting sekali peranannya dalam aplikasi. Setiap aplikasi tentunya memiliki halaman home atau dashboard, secara tidak langsung jika user berhasil masuk ke halaman home atau dashboard, maka user dipastikan berhasil melakukan login di form login dengan data inputan yang sesuai dengan database.

Salin code home.php kemudian simpan di folder aplikasi anda

8. keluar.php

Keluar.php ini merupakan source code untuk mengakhiri session user dalam menggunakan aplikasi ataupun memastikan user mampu untuk logout dalam aplikasi kita, sehingga user tidak selamanya berapa dalam aplikasi ini, dan harus dipastikan jika user melakukan logout maka halaman selanjutnya aplikasi kita langsung menampilkan halaman form login, agar bilamana user ingin mengakses kembali apilikasi kita maka dia harus melalui proses login kembali

Salin code keluar.php kemudian simpan di folder aplikasi anda

Kesimpulan

Setiap aplikasi berbasis web tentunya memiliki sorce code yang berbeda – beda begitupun setiap halaman yang ditampilkan memiliki file dan syntak yang berbeda - beda serta fungsi yang beragam. Perlu dipahami dalam belajar membuat aplikasi berbasis web ada beberapa yang harus anda pahami pada saat penyimpanan nama file dan ekstensi file tersebut harus disesuaikan dengan bahasa pemrograman yang anda buat agar tidak terjadi error ataupun file tersebut tidak bisa ditampilkan dalam aplikasi karena terdapat kesalahan dalam penulisan code ataupun nama penyimpanan kode.

Siapa saja boleh

Seorang biasa yang belajar menulis blog

Share this post