Rancangan Database Aplikasi Web Desa
Rancangan Database Aplikasi Web Desa
PERANCANGAN APLIKASI
2.1. Rancangan Database
Di dalam pembuatan Aplikasi Web dibutuhkan sebuah database untuk penyimpanan data. Tahap
pertama untuk membuat Aplikasi Web dibutuhkan adanya sebuah database dan dalam pembuatannya
kita menggunakan software XAMPP v3.2.2
2.1.1. Instalasi XAMPP v3.2.2
Tahap ini adalah tahap paling awal yang kita lakukan. Yaitu melakukan instalasi XAMPP, yang kita
sarankan XAMPP v3.2.2 atau versi yang terbaru. Jika teman-teman belum mempunyai Software XAMPP
teman-teman bisa download di situs resminya yakni [Link]
Langkah pertama setelah kita download software XAMPP nya, Double Klik Pada File XAMPP nya yang
seperti dibawah ini :
Pilih Next
19
Gambar 2.3. Instalasi XAMPP
Setelah XAMPP berhasil terinstall Klik Start Pada Apache dan MySQL
Apache adalah sebuah web server open source, jadi semua orang dapat menggunakannya secara
gratis,bahkan anda bisa mengedit kode programnya. fungsi utama dari Apache yakni menghasilkan
halaman web yang benar sesuai dengan yang dibuat oleh seorang web programmer,dengan
menggunakan kode PHP.
Sedangkan MySQL itu adalah sistem manajemen database yang sering digunakan bersama PHP.
20
Gambar 2.5. Tampilan awal XAMPP
Lalu Buka Browser Bisa Mozila Firefox atau Google Chrome dan Masukan URL
[Link]
Dan ini tampilan phpMyAdmin dari URL [Link] Untuk Pembuatan Database.
Berikut adalah gambaran structural database yang akan kita buat untuk aplikasi Sistem Informasi
Pelayanan Desa Bungursari ini.
21
Buat sebuah database baru dengan nama “pel_desa”, lalu kita buat tabel yang kita butuhkan.
Kemudian buka browser lalu ketik [Link] maka tampilannya akan seperti berikut :
22
Sampai disini maka instalasi codeigniter sudah [Link] kita menggunakan codeignitter?
Codeignitter merupakan framework text editor bahasa PHP karena dengan menggunakan framework
kita lebih mudah dalam pengkodeannya dalm merancang web desain.
Ada 11 buah table yang akan kita buat dalam database. Yaitu :
1. Berita
Tabel berita akan kita jadikan sebagai penyimpanan data informasi baru atau informasi mengenai
sesuatu yang sedang terjadi.
1) Spesifikasi Database : pel_desa
2) Nama Tabel : berita
3) Akronim : berita
4) Tipe File : File Transaksi
5) Akses File : Random
6) Panjang Record : 1318
Tabel 1.1. Spesifikasi berita
Nama Type Auto_increment Primary Key
Id_berita Int(11)
Id_user Int(11)
Id_kategori Int(11)
Slug_berita Varchar(255)
Judul_berita Varchar(255)
Isi_berita Text
Gambar Varchar(255)
Status_berita ENUM(‘Publish’,
‘Draft’, ‘,’)
Jenis_berita Varchar(20)
Keywords Varchar(500)
Tanggal_post Datetime
Tanggal Timestamp
2. Galeri
Tabel galeri akan kita jadikan sebagai tampilan web agar lebih menarik dilihat oleh user ataupun
pengunjung website.
1) Spesifikasi Database : pel_desa
2) Nama Tabel : galeri
3) Akronim : galeri
4) Tipe File : File Master
5) Akses File : Random
6) Panjang Record : 752
23
Tabel 1.2. Spesifikasi Galeri
Nama Type Auto_increment Primary Key
Id_galeri Int(11)
Id_user Int(11)
Judul_galeri Varchar(200)
Isi_Galeri Text
Website Varchar(255)
Gambar Varchar(255)
Posisi_Galeri Varchar(20)
Tanggal_post Datetime
Tanggal Timestamp
3. Kategori
Tabel kategori akan kita jadikan sebagai mempermudah user atau pengunjung untuk melihat
data berita atau informasi.
1) Spesifikasi Database : pel_desa
2) Nama Tabel : kategori
3) Akronim : kategori
4) Tipe File : File Transaksi
5) Akses File : Random
6) Panjang Record : 532
4. Konfigurasi
Tabel konfigurasi akan kita jadikan sebagai suatu pembentukan susunan, settingan atau proses
pembuatan wujud dari sebuah web.
1) Spesifikasi Database : pel_desa
2) Nama Tabel : konfigurasi
3) Akronim : konfigurasi
4) Tipe File : File Master
5) Akses File : Random
6) Panjang Record : 2626
24
Tabel 1.4. Spesifikasi Konfigurasi
Nama Type Auto_increment Primary Key
Id_konfigurasi Int(11)
Id_user Int(11)
Namaweb Varchar(50)
Tagline Varchar(100)
Email Varchar(255)
Telepon Varchar(24)
Alamat Varchar(300)
Website Varchar(255)
Deskripsi Varchar(300)
Keywords Varchar(300)
Metatext Text
Map Text
Logo Varchar(255)
Icon Varchar(255)
Facebook Varchar(255)
Instagram Varchar(255)
Tanggal Tinestamp
5. Layanan
Tabel layanan akan kita jadikan sebagai suatu proses pemenuhan kebutuhan masyarakat seperti
Surat keterangan pengantar, surat keterangan kematian, surat pembuatan domisili.
1) Spesifikasi Database : pel_desa
2) Nama Tabel : layanan
3) Akronim : layanan
4) Tipe File : File Master
5) Akses File : Random
6) Panjang Record : 1307
25
Tanggal Timestamp
6. Pesan
Tabel pesan akan kita jadikan sebagai alat atau tempat keluhan pengunjung tentang web kepada
admin atau pengelola web.
1) Spesifikasi Database : pel_desa
2) Nama Tabel : pesan
3) Akronim : pesan
4) Tipe File : File Master
5) Akses File : Random
6) Panjang Record : 110
7. User
Tabel User akan kita jadikan sebagai penyimpanan data pengelola web seperti nama user/admin
email user/admin username dan password.
1) Spesifikasi Database : pel_desa
2) Nama Tabel : user
3) Akronim : user
4) Tipe File : File Master
5) Akses File : Random
6) Panjang Record : 432
8. Penduduk
Tabel penduduk akan kita jadikan sebagai penyimpanan data Penduduk yang teradministrasi di
Desa Bungursari.
1) Spesifikasi Database : pel_desa
2) Nama Tabel : penduduk
26
3) Akronim : penduduk
4) Tipe File : File Master
5) Akses File : Random
6) Panjang Record : 718
9. Surat skck
Tabel Surat_skkb akan kita jadikan sebagai penyimpanan data surat_skck pada database yang
ada di aplikasi Simdes Bung.
1) Spesifikasi Database : pel_desa
2) Nama Tabel : surat_skck
3) Akronim : surat_skck
4) Tipe File : File Transaksi
5) Akses File : Random
6) Panjang Record : 41
27
No_ktp Char(16)
Berikut ini adalah gambar tampilan tabel Sistem Informasi Pelayanan Desa Bungursari :
28
Gambar 2.11. Tampilan Tabel Database “pel_desa”
29
Gambar 2.13. Tampilan Daftar Data User
Cara untuk menampilkan implementasi pada gambar 2.12 dan 2.13 yaitu :
Pada tahap ini kita akan menggunakan metode MVC untuk mengolah sebuah data user. Oke
langsung saja kita mulai!
a. Controllers : [Link]
b. Model : User_model.php
c. Views : difolder views/admin/user
-[Link] : menampilkan listing user
-[Link] : tambah data user
-[Link] : edit data user
-[Link] : delete data user
Langsung saja pertama kita akan masuk ke model buatlah file User_model.php.
layanan/application/views/User_model.php mengapa kita terlebih dahulu harus membuat codingan di
folder model? Jawabannya karena kita akan melakukan pemodelan database,jadi kita lebih baik
melakukannya di folder model terlebih dahulu. Apakah biasa kita langsung ke controller atau views?
Jawabannya tentu saja bisa tergantung kebutuhan akan tetapi kami sarankan untuk membuat pada
model dahulu supaya lebih terstruktur.
Langsung saja kita mulai dengan mengisi syntax sebagai berikut :
30
Perhatikan pada baris nomor 7 atas ada function construct yaitu class yang pertama kali dipanggil.
Kemudian ada function listing yang fungsi isinya untuk memanggil tampilan tabel user. Selanjutnya ada
function detail yang fungsinya untuk mengambil data user.
Penjelasan syntax diatas perhatikan pada baris 35 ada function login fungsi nya yaitu untuk memanggil
data user ketika fase login dan logout. Kedua ada function tambah dimana fungsinya untuk
menambahkan sebuah data user. Selanjutnya ada function edit yang fungsi nya untuk mengubah data
user. Dan yang terakhir ada function delete yang fungsinya untuk menghapus data user. Langkah awal
dalam pembuatan model user telah selesai.
Selanjutnya kita akan masuk ke controllers. Fungsi controllers itu adalah sebagai jembatan penghubung
antara views dan models, jadi data dari database sebelum ditampilkan pada views harus melewati
controller terlebih dahulu. Langkah kedua kita akan membuat file baru dengan nama [Link].
layanan/application/controllers/admin/[Link], ingat penulisan dalam controllers harus diawali
dengan huruf kapital.
Syntax nya seperti ini,
31
Fungsi syntax diatas yaitu, meload ke database ( “user_model” ), memproteksi halaman akses level,
kemudian mengambil data dari listing.
Kemudian fungsi syntax ini yaitu, validasi data atau kriteria untuk bisa menambahkan sebuah data user,
contoh seperti username dan password harus diisi, kemudian karakternya tidak boleh ada yang sama
diantara data yang lain.
32
Syntax ini masih lanjutan yang tadi, kemudian mengambil data kedatabase, apabila data valid maka data
berhasil ditambahkan. Kemudian ada function edit fungsinya untuk mengubah data user dengan
mengambil data dari user_model.
Selanjutnya ada function delete yang fungsinya yaitu untuk membuat perintah mengahapus data user
yang mengambil data dari user_model.
Kemudian yang terakhir kita masuk ke views. Fungsi views disini yaitu menampilkan interface kepada
user/pengguna yang akan menggukan program kita buat. Kemudian buat folder baru di dalam folder
views dengan nama admin jadi seperti ini views/admin.
Dalam istilah mvc kita akan menenal namanya CRUD (Create, Read, Update, Delete) bahasa
sederhananya kita bisa menambah user,melihat,memperbaharui dan membuat user baru.
Yang pertama akan kita buat adalah file tambah dengan nama [Link] di dalam folder
views/admin/[Link]
[Link] syntax nya,
33
Fungsi syntax diatas yaitu untuk menambahkan data user, disini kita menggunakan format form atau
formulir sebagai tampilannya supaya lebih [Link] pada baris nomor 14,19,24 dan lainnya
yang terdapat fungsi <div class=”form-group”>.
Selanjutnya kita akan membuat file baru pada folder views/admin/user dengan nama [Link] sehingga
akan menjadi views/admin/user/[Link]. Masukkan syntaxnya sebagai berikut:
34
Sama seperti tadi, syntax diatas berfungsi untuk mengubah data user. Dilihat sekilas syntax edit sama
dengan tambah dan yang membedakan adalah pada pemanggilannya yaitu terdapat pada baris ke-8
echo form_open(base_url(‘admin/user/edit/’ ,$user->$id_user),$atribut);
Selanjutnya kita akan membuat file baru dengan nama [Link] di folder
views/admin/user/[Link] dengan syntax seperti di bawah ini
35
Syntax diatas berbeda dengan yang sebelumnya, jadi fungsi dari syntax ini adalah untuk menghapus data
user.
Kemudian yang terakhir kita akan membuat file di direktori views/admin/user dengan nama [Link].
Fungsi file [Link] ini yaitu untuk menampilkan data user yang telah tersimpan, tambah atau edit
sebelumnya.
views/admin/user/[Link]
36
Syntax diatas berfungsi untuk menampilkan tampilan data user yang sudah dikelola [Link]
disini kita telah menyelesaikan satu tahap yaitu membuat form master, selanjutnya kita akan membuat
form transaksi.
Pada tahap ini kita akan menggunakan metode mvc untuk mengelola dan mengakses surat
domisili. Oke langsung saja kita mulai!
a. Controllers : [Link]
37
b. Model : Surat_model.php
c. Views : difolder views/surat/[Link]
Yang pertama kita akan membuat model untuk menyimpan dan memanggil pada database
supaya dapat ditampilkan pada views. Buat file baru pada direktori model yaitu Surat_model.php akan
menjadi seperti ini models/Surat_model.php.
Berita/application/model/Surat_model
Syntax nya seperti ini,
Fungsi syntax diatas yaitu untuk menambahkan surat, kemudian ada syntax yang fungsi nya untuk
mencari surat domisili.
Untuk syntax selanjutnya yaitu berfungsi untuk memanggil no surat secara otomatis yang ada pada
format isi surat. Contohnya seperti berikut :
38
Gambar 2.14. Tampilan Inputan No. Surat otomatis
Selanjutnya kita akan membuat file baru dengan nama [Link] pada folder controllers. Jadi
akan menjadi controller/[Link] sebelumnya bahwa penulisan controller selalu diawali dengan
huruf kapital.
Syntax nya seperti ini,
Fungsi dari syntax diatas yaitu untuk memanggil data yang ada pada model yang telah kita buat
sebelumnya yang selanjutnya akan diproses ke dalam laporan yang nantinya akan kita buat. Perhatikan
pada baris ke 11 $this->load->model (array( 'surat_model', 'penduduk_model'));. Fungsi syntax
tersebut yaitu memanggil model pada surat_model dan penduduk_model.
Selanjutnya kita akan membuat syntax untuk menambahkan surat domisili yang akan dibuat sebagai
berikut.
39
Perhatikan pada syntax di atas terdapat form_validation pada no_ktp.Mengapa demikian?karena kita
akan membuat surat juga akan memanggil data yaitu nomor ktp yang terdapat pada folder penduduk.
Kemudian yang terakhir kita akan membuat file pada folder view yaitu [Link] pada folder surat,
sehinnga menjadi views/surat/[Link].
40
Syntax diatas sama dengan syntax yang sebelumnya kita buat pada form master user dengan
menggunakan form/formulir. Nantinya setelah user login pada menu surat tersebut dan bisa langsung
mencetak. Kita telah selesai pada tampilan views surat domisilinya. Berikut adalah tampilan surat
domisili sebelum kita cetak.
Karena kita akan membuat surat dengan fasilitas langsung print pada halaman web jadi kita terlebih
dahulu akan mengatur file css nya/style css surat sesuai dengan kebutuhan yang akan kita butuhkan
supaya tampilannya terlihat rapi.
Syntax diatas masih bersambung mengenai pengaturan stle css surat domisili untuk tampilan cetaknya.
42
Mengapa kita harus mengatur style cssnya? supaya tampilan rapih dan dalam pengkodeannya lebih
mudah secara visual maupun pencarian jika ada masalah.
Disini kita akan menggunakan metode table yang mana sama seperti format surat yang telah kita riset di
Desa bungursari sebelumnya dengan menggunkan syntax <td> dan <tr>.
43
Perhatikan pada baris ke 162 pada kode <?= date('d/m/Y', strtotime($surat->tgl_surat)); fungsi dari
kode tersebut yaitu untuk membuat tanggal otomatis saat masyarakat akan mencetak [Link]
perhatikan juga pada baris ke 171 yaitu pada kode <button onclick="[Link]()" class="btn btn-
primary">Print</button> ini digunakan untuk tampilan buttom print supaya masyarakat yang tergolong
awam langsung mengetahui untuk perintah print.
Fungsi syntax diatas yaitu untuk memanggil tabel didatabase. Contoh nya disini seperti pemanggilan
tabel surat_domisili.
Selanjutnya kita membuat controller [Link] pada direktori controllers/[Link] ingat selalu
menggunakan huruf kapital pada controllers setiap filenya. Sehingga Berita/ application/ controllers/
[Link] Syntax nya seperti ini,
Sama seperti sebelumnya,fungsi syntax di atas yaitu sebagai jembatan antara models dan
[Link] pada baris ke 21 $data['laporan_domisili']= $this->laporan_model-
>list_surat_domisili();, disini kita akan mengambil data yaitu dari tampilan surat domisili yang akan
masuk ke laporan pada perintah list_surat_domisili yang berada pada laporan_model.
45
Yang terakhir kita pasti akan membuat tampilan views nya dengan folder baru. Laporan pada
folder admin dan dengan file baru dengan nama [Link] sehingga menjadi laporan/ [Link].
Sehingga folder keseluruhannya Menjadi layanan/ application/ views/ admin/ laporan/ [Link].
Syntax nya seperti ini,
Fungsi syntax ini untuk menampilkan pada tampilan admin pada laporan surat dengan tampilan sebagai
berikut :
46
Coba perhatiakan syntax $sesi = $this->session->userdata(‘sesi’); pada gambar 1 yang terdapat pada
controller surat,yang berfungsi untuk menyimpan data sementara apakah user telah login, yang
terdapat juga pada gambar nomor 2 yang terdapat pada folder view/layout/[Link] yang bertujuan
apabila user telah login dan telah melakukan logout url tidak bisa ditembak langsung dari yang asal
sebelumnya.
Berbeda halnya setelah kita logout atau browser tertutup, maka coba kita masukkan alamat url yang
sama localhost/layanan/surat/domisili maka akan tampil pemberitahuan error 404 page not found.
47
2. Backup data database.
Kita masuk ke PhpMyadmin, kemudian pilih tabel yang akan di backup, setelah itu ekspor data,
lalu masukan klik Go kemudian save maka file database tersebut akan tersimpan.
Itulah proses backup data di PhpMyadmin, jadi fungsinya disini untuk membackup data-data yang ada
pada sebuah database.
48