2011, Makalah Jurnal PKM Universitas Gunadarma, 2011
“PEMBUATAN WEB APLIKASI ADMINISTRASI PADA KELAS BACA ANAKKU SAYANG DENGAN MENGGUNAKAN PHP DAN MYSQL” Makmun dan Budiman, Universitas Gunadarma, 2011 ABSTRAKSI
“Kelas Baca Anakku Sayang” merupakan sebuah lembaga pendidikan non formal yang secara khusus mendidik anak-anak usia dini untuk belajar membaca, yang berada di Jl. M. Kahfi I Gg. Kranji Rt 03/06 No.37 Ciganjur. Kelas baca tersebut sudah berdiri sejak tahun 2002 dan sampai sekarang sudah memiliki 40 cabang. Di sana, anak-anak dengan rentang usia 4-6tahun (prasekolah) diajarkan membaca melalui suku kata yang dibagi ke dalam beberapa bagian yang berbeda.
Pelaksanaan proses administrasi saat ini di kelas baca Anakku Sayang masih menggunakan cara manual. Hal ini membuat pemrosesan data terhambat dan tidak teratur, serta dirasakan kurang efektif dan efisien. Hal itu menyebabkan proses pengawasan terhadap proses administrasi menjadi kurang baik. Oleh karena itu, diperlukan suatu sarana atau media yang dapat mengintegrasikan semua data di Kelas Baca Anakku Sayang. Untuk itu hendak dibangun sebuah sistem Aplikasi Kelas Baca Anakku Sayang dengan menggunakan PHP dan MYSQL. Aplikasi tersebut bertujuan untuk mempermudah pencarian data dan proses perapihan data.
Kata Kunci : Web Aplikasi, kbaks.com, php dan mysql. Daftar Pustaka (2001-2005)
1. Pendahuluan
“Kelas Baca Anakku Sayang” merupakan sebuah lembaga pendidikan non formal yang secara khusus mendidik anak-anak usia dini belajar membaca, menulis dan berhitung (calistung). Kegiatan pembelajaran dilakukan secara private tanpa memaksakan peserta didikselama sekitar 5 sampai 10 menit dari konsentrasi anak. Kelas Baca Anakku sayang memiliki metode sendiri yang ditemukan oleh Jazuli Ahmad, metode ini merupakan hasil obervasi terhadap kesulitan anak belajar membaca, menulis dan berhitung selama mengajar dalam rentang waktu 8 tahun. Di kelas baca ini, murid-murid dikenakan biaya Rp30.000,-. Dengan biaya semurah
itu anak akan mampu membaca dengan cepat dalam jarak waktu 4 bulan (waktu tercepat). Pengajaranpun dilakukan secara individual atau personal, artinya hal tersebut bisa dipraktekkan di rumah. Setiap anak mempunyai porsi waktu paling lama 10 menit dalam pengajarannya. Anak-anak dengan rentang
usia 4-6 tahun (prasekolah) diajarkan membaca melalui suku kata yang dibagi ke dalam beberapa bagian yang berbeda. Dari sisi metode pengajaran Kelas Baca sudah memiliki metode yang tepat guna, akan tetapi dari segi manejemen
Makmun dan Budiman, Universitas Gunadarma administrasi Kelas Baca masih berada dalam kondisi yang kurang rapih, hal itu misalnya dapat dilihat dari kertas-kertas yang banyak berserakan di mana-mana, data yang tidak rapih, dan itu menyebabkan kontrol data sulit dilakukan. Oleh karena itu agar administrasi Kelas Baca Anakku Sayang berjalan dengan baik, maka dibangun sebuah sistem aplikasi Kelas Baca Anakku Sayang dengan menggunakan PHP dan MYSQL.
Aplikasi yang dibuat diharapkan siap pakai baik di pusat maupun di cabang. Pemanfaatan aplikasi ini akan membuat data menjadi rapih, kontrol data menjadi mudah, tanpa adanya kertas-kertas yang berserakan. Cakupan dalam aplikasi ini adalah database siswa, guru, pendapatan, dan pengeluaran operasional, sedangkan yang belum tercakup dalam aplikasi ini adalah database cabang dan buku (perpustakaan).
Pembuatan aplikasi ini terbagi menjadi beberapa metode, yaitu : Studi Lapangan
Bagian ini dimulai dengan survei yang dimulai tahun 2011 awal dari data-data yang ada di
kelas baca Anakku Sayang dan juga memperhatikan proses pendataan yang terjadi secara nyata. Selanjutnya dilakukan pendataan siswa, guru, cabang, pendapatan, dan pengeluaran Kelas Baca Anakku Sayang pada periode 2011 dengan cara wawancara.
Analisis data dilakukan secara deskriptif dan data yang diperoleh dibuatkan program dengan PHP dan MySql. Perangkat yang dibutuhkan Perangkat ini membutuhkan perangkat keras dan perangkat lunak. Perangkat keras yang dibutuhkan adalah satu unit komputer. Perangkat lunak yang dibutuhkan adalah Xampp versi 1.7.1 , Dreamweaver 8, Mozilla Firefox.
3. HASIL DAN PEMBAHASAN
3.1. Perancangan
Langkah awal yang dilakukan adalah membuat perancangan halaman tampilan, perancangan tampilan input, perancangan
database, struktur navigasi. Berikut adalah pembahasannya.
2. METODE PENELITIAN
3.2 Perancangan Halaman Tampilan input
I. Urutan Kerja
Tampilan yang dirancang terdiri dari Rancangan halaman login, halaman menu utama, halaman siswa, halaman guru, halaman cabang, halaman pendapatan,
Makmun dan Budiman, Universitas Gunadarma halaman pengeluaran. Rancangan halaman login adalah halaman awal yang akan dimunculkan untuk pertama kali ketika aplikasi dibuka, maka halaman login diletakkan di halaman index. Halaman ini berisi kolom username dan password yang harus diisi. Setelah login berhasil, maka akan muncul tampilan halaman menu utama. Menu utama yang dapat diakses di halaman ini adalah menu siswa, guru, cabang, pendapatan, dan pengeluaran. Pada menu siswa, dirancang formulir yang dapat diisi oleh calon murid Kelas Baca Anakku Sayang. Untuk memanipulasinya (mengedit, hapus, dan detail), dibuat rancangan halaman manage.
Data guru tersedia di rancangan halaman guru disertai dengan halaman
III. Persiapan Berkas Citra
Makmun dan Budiman, Universitas Gunadarma
Selanjutnya dilakukan pembuatan halaman menu utama serta halaman siswa yang berisi formulir. Langkah berikutnya adalah menghubungkan database dengan halaman ini. Setelah database terhubung, dibuat record sheet.
komponen text area untuk menerima input user name dan password.
Photoshop. Setelah itu dimasukkan
Proses selanjutnya adalah pembuatan halaman login dengan memasukkan tabel untuk membuat lay-out seperti yang telah ditentukan dalam rancangan. Kemudian gambar dimasukkan untuk dijadikan banner yang dibuat di
Tahap ini mempersiapkan beberapa berkas citra yang nanti akan digunakan untuk membangun dan mendesain aplikasi tersebut. Langkah pertama yang dilakukan adalah membuat background, selanjutnya mengimplementasikannya ke dalam pembuatan aplikasi tersebut.
atribut dan memiliki lima tabel yaitu: tabel siswa, tabel guru, tabel cabang, tabel admin, dan tabel pengeluaran.
manage-nya, sedangkan untuk data
relationship. Setiap entitas dan relationship yang ada memiliki atribut-
dari lima entitas yaitu siswa, guru, cabang, admin, dan pengeluaran serta empat
database. Aplikasi Kelas baca ini terdiri
Pada aplikasi ini menggunakan database untuk menyimpan data-data yang dibutuhkan Kelas Baca Anakku Sayang dan memproses perhitungan transaksi
Penerimaan dan pengeluaran setiap cabang dirancang dalam halaman pendapatan dan pengeluaran.
cabang, dirancang halaman cabang yang dapat menampilkan alamat cabang, data siswa, guru, serta iuran yang dikenakan di cabang tersebut.
II. Perancangan Database
Halaman selanjutnya yang dibuat adalah halaman data siswa, kemudian halaman pencarian data siswa, halaman guru, halaman cabang, halaman pendapatan, serta halaman pengeluaran.
IV. Struktur Navigasi
Struktur navigasi dibuat untuk menggambarkan secara garis besar keseluruhan aplikasi Kelas Baca Anakku Sayang dan menggambarkan bagaimana hubungan antara tabel-tabel tersebut. Melalui struktur navigasi ini terlihat bagaimana isi dan susunan dari sebuah aplikasi Kelas Baca Anakku Sayang dengan menyeluruh.
Pembuatan struktur navigasi aplikasi ini sangat membantu nantinya ketika akan membuat rancangan seluruh halaman web. Struktur navigasi website yang baik adalah yang mampu memberitahukan kepada pengunjung tentang lokasi mereka sekarang, lokasi- lokasi yang bisa dikunjungi dari lokasi sekarang.
Gambar Struktur Navigasi Website Penggunaan Perangkat Aplikasi
Sebelum memulai aplikasi ini, terlebih dulu kita harus login dengan memasukkan username dan password. Setelah masuk, akan ada lima halaman, yaitu halaman siswa, guru, cabang, pendapatan, dan pengeluaran.
Gambar Halaman Login
1. Halaman Siswa
Ketika masuk ke halaman siswa, ada dua pilihan menu, yaitu formulir pendaftaran dan data siswa. Menu formulir pendaftaran digunakan oleh admin untuk memasukkan data murid dan orangtuanya secara lengkap. Data murid terdiri dari nama lengkap, tempat tanggal lahir, jenis kelamin, anak keberapa, jumlah saudara, dan alamat. Sedangkan data orangtua/wali terdiri dari ayah dan ibu dengan isian nama lengkap, tempat tanggal lahir, pendidikan terakhir, pekerjaan, dan tanggal daftar.
Setelah diisi dengan lengkap, maka ada tombol submit untuk memasukkan
Makmun dan Budiman, Universitas Gunadarma Login Manage Siswa Manage Guru Manage Cabang Entri Pendapatan Entri Pengeluaran Menu Utama datanya. Bila ada satu data yang belum diisi, maka pendaftaran tidak dapat dimasukkan. Aplikasi ini akan meminta lagi untuk melengkapi data yang kurang.
Menu yang kedua yaitu data siswa, menampilkan daftar siswa berisi tanggal daftar, nama siswa, tempat tanggal lahir siswa, dan jenis kelamin siswa. Pada menu
Gambar Contoh Halaman Siswa (2)
ini, data dapat dimanipulasi, yaitu diedit,
2. Halaman Guru
dihapus, atau ditampilkan secara detail Ketika masuk ke halaman guru, tidak ada datanya. pilihan menu. Bagian atas berisi formulir pendaftaran sedangkan bagian bawah berisi data guru secara lengkap. Menu formulir pendaftaran digunakan oleh
administator untuk memasukkan data guru
secara lengkap. Data guru terdiri dari nama lengkap, tempat tanggal lahir, pendidikan, dan alamat lengkap. Pilihan pada pendidikan adalah SLTA, PGTK, D- 3, dan S1. Bila telah terisi dengan benar,
Gambar Halaman Siswa
tekan tombol submit yang terletak di tengah, maka otomatis data guru akan ditampilkan di bagian bawah halaman.
Gambar Contoh Halaman Siswa (1) Gambar Contoh Halaman Guru Makmun dan Budiman, Universitas Gunadarma
3. Halaman Cabang
Ketika masuk ke halaman cabang, bagian atas berisi isian data cabang yang terdiri dari nama pengelola, alamat cabang, telepon cabang, jumlah siswa, iuran perbulan, dan keterangan. Di bagian bawah berisi data cabang secara lengkap. Isian data cabang yang telah terisi dengan benar, secara otomatis akan ditampilkan di bagian bawah halaman setelah menekan tombol submit. Data cabang ini dapat dimanipulasi dengan pilihan ubah atau hapus.
Gambar Halaman Cabang
4. Halaman Pendapatan
Jika kita masuk ke halaman pendapatan, bagian atas terdapat menu siswa, guru, cabang, pendapatan dan pengeluaran. Di
bagian isinya terdiri dari judul halaman pendapatan per cabang, terdiri dari informasi nama pengelola (misal, bapak Jazuli), jumlah siswa (misal, 300), iuran (misal, 30.000) dan total (misal, 9.000.000). Data tersebut secara otomatis tampil dari menu cabang yang sudah di- inputkan.
Gambar Halaman Pendapatan Per Cabang
5. Halaman Pengeluaran
Halaman ini di bagian atas terdapat menu- menu siswa sampai pengeluaran, bagian isinya terdiri dari judul halaman pengeluaran ada form yang dapat di- inputkan terdiri dari nama pengeluaran (misal, gaji guru), biaya (misal, 500.000), dan jumlah (misal, 2). Setelah kita input
form tersebut akan ditampilkan ketika submit dengan output tanggal (misal,
2011-10-20 12:16:28), nama pengeluaran
Makmun dan Budiman, Universitas Gunadarma
(misal, gaji guru), biaya (misal, 500.000), atau perpustakaan. Ke depan, unsur-unsur jumlah (misal, 2) dan subtotal (misal, Rp. tersebut akan dilengkapi lagi. 1.000.000).
DAFTAR PUSTAKA
[1] Eri A. Pramana, Belajar Sendiri Adobe Photoshop, 2001.
[2] Kadir, Abdul , 2002, Dasar
Pemrograman Web Dinamis Menggunakan PHP, Andi Offset, Gambar Halaman Pengeluaran Yogyakarta.
[3] Nugroho Bunafit, 2004, PHP &
MySQL dengan editor Dreamweaver
4. PENUTUP MX,Andi Offset, Yogyakarta.
Setelah melakukan penelitian, [4] Sampurna, 2004, Macromedia pengamatan, perancangan, implementasi
Dreamweaver, P.T. Elex Media
dan uji coba aplikasi, dapat dinyatakan Komputindo, Jakarta. bahwa aplikasi ini sudah dapat digunakan
[5] Solichin Achmad, 2005, sesuai dengan kebutuhan dari pihak Kelas
Pemrograman Web dengan PHP
Baca Anakku Sayang dalam mengelola dan MySQL, DIPA GROUP,Jakarta. data siswa, guru, cabang, pendapatan dan
[6] Sutarman, 2003,Membangun pengeluaran. Dengan demikian maka
Aplikasi Web dengan PHP dan
diharapkan data dan administrasi untuk MySQL, Graha Ilmu, Yogyakarta. Kelas Baca Anakku Sayang menjadi lebih rapih. Selain itu kontrol datanyapun
[7] Zak Ruvalcaba, Belajar Sendiri menjadi lebih mudah.
Macromedia Dreamwever MX, 2002.
Seperti telah dijelaskan sebelumnya, bahwa dalam aplikasi ini belum dapat dilakukan pencarian data untuk cabang dan belum ada menu buku
Makmun dan Budiman, Universitas Gunadarma