BAB II

PERANCANGAN APLIKASI

2.1 Installasi PHP dan Sublime text 3 Saat ini banyak sekali pilihan paket PHP dan MYSQL yang dapat kita gunakan, salah

satu yang paling terkenal di kalangan programmer adalah XAMPP.Selain XAMPP ada juga AppServ, Apache2Triad dan paket lainnya.

Dengan menginstal paket XAMPP, maka sekali install anda sudah mendapatkan

program PHP, MySQL dan Apache. Dimana PHP adalah untuk bahasa pemogrammannya, MySQL untuk penyimpanan data atau databasenya, dan Apache untuk web server atau mesin yang berfungsi menjalankan skrip PHP disisi server lokal.

2.1.1 Instal Software XAMPP

Hal yang paling mudah adalah men-Download dari situs www.apachefriends.org

Sekarang anda akan kami bimbing untuk menginstal XAMPP

Download XAMPP pada website www.apachefriends.org, jika anda menggunakan Operation System Windows,

Lakukan instalasi setelah anda selesai mengunduh. Selama proses instalasi mungkin anda akan melihat pesan yang menanyakan apakah anda yakin akan menginstalnya. Silahkan tekan YES untuk melanjutkan instalasi.

Klik tombol NEXT

Pada tampilan selanjutnya akan muncul pilihan mengenai komponen mana dari XAMPP yang ingin dan tidak ingin Anda instal. Beberapa pilihan seperti Apache dan PHP adalah bagian penting untuk menjalankan website dan akan otomatis diinstal. Silakan centang MySQL dan phpMyAdmin, untuk pilihan lainnya biarkan saja.

Berikutnya silakan pilih folder tujuan dimana XAMPP ingin Anda instal, pada tutorial ini pada direktori C:\xampp.

Pada halaman selanjutnya, akan ada pilihan apakah Anda ingin menginstal Bitnami untuk XAMPP, dimana nantinya dapat Anda gunakan untuk install WordPress, Drupal, dan Joomla seccara otomatis.

Pada langkah ini proses instalasi XAMPP akan dimulai. Silakan klik tombol Next

Setelah berhasil diinstal, akan muncul notifikasi untuk langsung menjalankan control panel. Silakan klik Finish.

Silakan buka aplikasi XAMPP kemudian klik tombol Start pada Apache dan MySQL. Jika berhasil dijalankan, Apache dan MySQL akan berwarna hijau seperti gambar di bawah ini.

Untuk melakukan pengecekan, silakan akses link berikut melalui browser Anda http://localhost.

2.1.2 Instal Software Sublime Text 3 Hal yang paling mudah adalah men-Download dari situs www.sublimetext.com

Sekarang anda akan kami bimbing untuk menginstal Sublime Text 3 Download Sublime Text 3 pada website www.sublimetext.com, klik download for windows.

Klik 2x hasil download an kalian, kemudian klik Next

Klik Next

Klik Next, jika anda ingin menampilkan di halaman utama PC anda ceklis box yang bertuliskan Add to explorer context menu.

Klik Install

Text editor Sublime Text 3 siap digunakan. 2.2 Membuat Rancangan Database

Untuk membangun database, Anda dapat menggunakan program aplikasi phpMyAdmin.

Anda dapat mengetik http://localhost/phpmyadmin/ pada url PC atau laptop anda

Atau anda dapat menggunakan XAMPP dengan meng-Klik Admin

Langkah pertama adalah membuat database untuk tutorial program aplikasi reservasi Studi kasus BUMI MANDIRI. Pembuatan nama database tidak boleh menggunakan tanda spasi kosong, harus menyambung, atau diberi tanda sambung garis bawah. Contoh, untuk proyek program Aplikasi Reservasi Bumi Mandiri ini, dapat dibuat dengan nama bumimandiri

Masukkan nama database bumimandiri, lalu klik create

2.2.1. Membuat table pelanggan

Table pelanggan digunakan untuk menyimpan daftar pelanggan yang ingin melakukan transaksi pada bumi mandiri. Berikut cara membuatnya :

1. Masukkan nama table pelanggan 2. Masukkan jumlah kolomnya 7 3. Klik GO

Setelah anda membuat table nya, sekarang anda bisa mendesain struktur tablenya Berikut cara membuatnya :

1. Masukkan nama kolom pada (Name) 2. Masukkan tipe data pada (Type) 3. Masukkan panjang datanya pada (Length/Value) 4. Pada kolom id, pilih opsi PRIMARY dari bagian Index

Jika sudah, klik Save

2.2.2. Membuat table paket_program

Table paket_program termasuk dalam proses transaksi, digunakan untuk menampung data program apa saja yang berada di bumi mandiri. Berikut cara membuatnya :

1. Masukkan nama table paket_program 2. Masukkan jumlah kolomnya 8 3. Klik GO

Setelah anda membuat table nya, sekarang anda bisa mendesain struktur tablenya Berikut cara membuatnya :

1. Masukkan nama kolom pada (Name) 2. Masukkan tipe data pada (Type) 3. Masukkan panjang datanya pada (Length/Value) 4. Pada kolom id, pilih opsi PRIMARY dari bagian Index

Jika sudah, klik Save

2.2.3. Membuat table reservasi

Table reservasi termasuk dalam proses transaksi, digunakan untuk menampung data pelanggan yang sedang melakukan reservasi Berikut cara membuatnya :

1. Masukkan nama table reservasi 2. Masukkan jumlah kolomnya 9 3. Klik GO

Setelah anda membuat table nya, sekarang anda bisa mendesain struktur tablenya Berikut cara membuatnya :

1. Masukkan nama kolom pada (Name) 2. Masukkan tipe data pada (Type) 3. Masukkan panjang datanya pada (Length/Value) 4. Pada kolom id, pilih opsi PRIMARY dari bagian Index 5. Pada kolom kode_reservasi, beri Foreign key, buka struktur table reservasi, lalu

klik ‘Index’ pada field kode_reservasi. Maka field kode_reservasi akan menjadi Index dan masuk list Indexes

Jika sudah, klik Save

2.2.4. Membuat table paket_jenis

Table paket_jenis termasuk dalam proses transaksi, digunakan untuk menampung data jenis paket apa saja yang tersedia pada bumi mandiri Berikut cara membuatnya :

1. Masukkan nama table paket_jenis 2. Masukkan jumlah kolomnya 3 3. Klik GO

Setelah anda membuat table nya, sekarang anda bisa mendesain struktur tablenya Berikut cara membuatnya :

1. Masukkan nama kolom pada (Name) 2. Masukkan tipe data pada (Type) 3. Masukkan panjang datanya pada (Length/Value) 4. Pada kolom id, pilih opsi PRIMARY dari bagian Index

Jika sudah, klik Save

2.2.5. Membuat table admins

Table admins digunakan untuk menampung data admins pada bumi mandiri.

Berikut cara membuatnya :

1. Masukkan nama table admins 2. Masukkan jumlah kolomnya 8 3. Klik GO

Setelah anda membuat table nya, sekarang anda bisa mendesain struktur tablenya Berikut cara membuatnya :

1. Masukkan nama kolom pada (Name)

2. Masukkan tipe data pada (Type) 3. Masukkan panjang datanya pada (Length/Value) 4. Pada kolom id, pilih opsi PRIMARY dari bagian Index

Jika sudah, klik Save

2.2.6. Membuat table paket_riwayat

Table paket_riwayat termasuk dalam proses transaksi, digunakan untuk

menampung data pelanggan yang pernah melakukan transaksi pada bumimandiri

Berikut cara membuatnya : 1. Masukkan nama table paket_riwayat 2. Masukkan jumlah kolomnya 7 3. Klik GO

Setelah anda membuat table nya, sekarang anda bisa mendesain struktur tablenya Berikut cara membuatnya :

1. Masukkan nama kolom pada (Name) 2. Masukkan tipe data pada (Type) 3. Masukkan panjang datanya pada (Length/Value) 4. Pada kolom id, pilih opsi PRIMARY dari bagian Index

Jika sudah, klik Save

2.2.7. Membuat table post

Table post di gunakan admin untuk memposting bentuk kegiatan di bumimandiri

seperti artikel daftar paket dan lainnya.

Berikut cara membuatnya :

1. Masukkan nama table post

2. Masukkan jumlah kolomnya 6

3. Klik Kirim

Setelah anda membuat table nya, sekarang anda bisa mendesain struktur tablenya Berikut cara membuatnya :

1. Masukkan nama kolom pada (Nama) 2. Masukkan tipe data pada (Jenis) 3. Masukkan panjang datanya pada (Panjang/Nilai) 4. Pada kolom id, pilih opsi PRIMARY dari bagian Index

Jika sudah, klik Save

2.2.8. Membuat testimoni

Table testimoni digunakan oleh anggota untuk memberikan kritik dan saran kepada

pihak Bumimandiri tentang fasilitas yang telah digunakan oleh anggota.

Berikut cara membuatnya :

1. Masukkan nama table testimoni

2. Masukkan jumlah kolomnya 6

3. Klik Kirim

Setelah anda membuat table nya, sekarang anda bisa mendesain struktur tablenya

Berikut cara membuatnya :

1. Masukkan nama kolom pada (Nama) 2. Masukkan tipe data pada (Jenis) 3. Masukkan panjang datanya pada (Panjang/Nilai) 4. Pada kolom id_testimoni, pilih opsi PRIMARY dari bagian Index

Jika sudah, klik Save

2.2.9. Membuat tokens

Table tokens digunakan untuk menampung data lupa password apabila anggota

mengalami lupa password.

Berikut cara membuatnya :

1. Masukkan nama table tokens

2. Masukkan jumlah kolomnya 4

3. Klik Kirim

Setelah anda membuat table nya, sekarang anda bisa mendesain struktur tablenya

Berikut cara membuatnya :

1. Masukkan nama kolom pada (Nama) 2. Masukkan tipe data pada (Jenis) 3. Masukkan panjang datanya pada (Panjang/Nilai) 4. Pada kolom id_testimoni, pilih opsi PRIMARY dari bagian Index

Jika sudah, klik Save

2.3. Membuat rancangan form master Program Aplikasi Reservasi ini dibuat dalam folder Web Server yang sudah diinstal, yang diletakkan pada folder htdocs, tempatnya ada di C:\xampp\htdocs. Sedangkan C\xampp adalah tempat kita menginstal aplikasi Xampp di computer atau laptop. 2.3.1. Membuat folder proyek Supaya lebih mudah,folder proyek harus disamakan dengan nama aplikasi yang akan dibuat. Untuk membuat Program Aplikasi Reservasi, nama folder kerja dapat dibuat dengan nama bumimandiri. Pada pembahasan ini kita akan memakai framework CodeIgniter Berikut cara membuatnya :

1. Buka Windows Explorer. 2. Cari folder CodeIgniter lalu reName nama folder tersebut menjadi bumimandiri 3. Simpan folder bumimandiri di dalam C:\xampp\htdocs.

Bagi kalian yang belum menginstal framework CodeIgniter bisa mendownload pada https://www.codeigniter.com/ 2.3.2. Menyiapkan folder assets Folder assets dipakai untuk menyimpan berbagai folder yang diperlukan dalam membuat aplikasi ini seperti folder css, js, image, ajax dan sebagainya. Berikut cara membuatnya :

1. Buka Windows Explorer. 2. Buka folder bumimandiri. 3. Buat folder assets di dalam folder bumimandiri.

2.3.3. Membuat koneksi database MySQL Untuk menyederhanakan program anda harus membuat koneksi database MySQL dalam suatu file program, sehingga nanti file ini dapat dipakai keseluruh file program dalam satu aplikasi web Berikut cara membuatnya :

1. Buka Sublime Text 3. 2. Open folder bumimandiri. 3. Buka folder application. 4. Buka folder config. 5. Cari file database.php. 6. Lalu ubah ‘hostName’=> ’localhost’, ‘userName’=> ’root’, ‘database’=> ’bumimandiri’,

‘dbdriver’=> ’mysqli’,

2.3.4. Membuat login admin Untuk dapat mengakses program aplikasi reservasi studi kasus bumimandiri untuk CRUD data, harus melakukan login terlebih dahulu. Orang yang berhak memiliki hak akses penuh adalalah admin. Berikut adalah contoh form login yang akan kita buat :

Langkah pertama adalah membuat akun login pada database, yaitu pada table admins. Anda dapat menyiapkan satu login dengan level admin berikut cara membuat nya :

1. Jalankan browser anda, lalu buka phpMyadmin dan pastikan Xampp anda sudah berjalan.

2. Buka database bumimandiri. 3. Buka table admins (klik nama table admins dari halaman kiri), lalu klik Insert

4. Masukkan id, pertama id dibuat 01 (pada tipe data max digit id 11), lengkapi field yang lainnya seperti nama email dan telp.

5. Masukkan nama login baru dengan userName : admin, password : admin (atau anda tentukan sendiri), dan buat label levelnya 1 untuk admin, lalu password pada pembahasan kali ini kita tidak akan memakai enkripsi sha1 maupun md5.

6. Klik Go

Selanjutnya kita akan membuat MVC (model, view, controllers) untuk admin. Buka text editor Sublime Text 3, pertama kita akan membuat model. Model pada CodeIgneter digunakan untuk mengelola database, seperti select, delete, update dan lainnya. Berikut cara membuatnya : 1. Buka Sublime Text 3, lalu pilih file -> Open folder -> lalu cari file bumimandiri

2. Buka folder bumimandiri -> application -> models, lalu klik kanan new file(beri nama

file dengan Admin_model.php).

3. Berikut adalah script pada Admin_model.php

Selanjutnya kita akan membuat view pada admin, view pada CodeIgneter berfungsi untuk mengatur tampilan kepada pengguna website. Berikut cara membuatnya : 4. Buka folder bumimandiri -> application -> view, lalu klik kanan new folder, lalu beri

nama admin.

5. Klik kanan pada folder admin -> new file, lalu beri nama login.php

6. Berikut script pada login.php

Selanjutnya kita akan membuat controllers pada admin, controllers pada CodeIgneter berfungsi mengatur hubungan antara bagian model dan bagian view, controllers juga berfungsi untuk menerima request dan data dari user kemudian menentukan apa yang akan di proses pada aplikasi. Berikut cara membuatnya : 7. Buka folder bumimandiri -> application -> controllers, lalu klik kanan new file, dan beri

nama Admin.php

8. Berikut script pada Admin.php

2.3.5. Membuat data paket

Data paket digunakan oleh admin untuk menambah, mengedit, menghapus paket yang tersedia pada bumimandiri. Berikut adalah contoh data paket yang akan kita buat :

Selanjutnya kita akan membuat Model untuk data paket. Berikut cara membuatnya : 1. Buka folder bumimandiri -> application -> models, lalu klik kanan new file(beri nama

file dengan Paket_model.php).

2. Berikut adalah script Paket_model.php

Selanjutnya kita akan membuat view pada data paket 3. Buka folder bumimandiri -> application -> view -> admin, lalu klik kanan pada folder

admin, new file beri nama paket.php

4. Berikut adalah script view pada paket.php

Selanjutnya kita akan membuat aksi tambah, edit, dan delete agar admin dapat memperbarui paket yang tersedia pada bumi mandiri 5. Buka folder bumimandiri -> application -> view -> admin, lalu klik kanan pada folder

admin, new file beri nama add_paket.php

6. Berikut adalah script add_paket.php

Selanjutnya kita akan membuat controllers untuk paket.php

7. Buka folder bumimandiri -> application -> controllers, lalu klik file Admin.php, lalu

buat script seperti ini.

1.3.6. Membuat Data Program

Data Program digunakan oleh admin untuk menambah, mengedit, menghapus data program yang tersedia pada bumimandiri. Berikut adalah contoh data program yang akan kita buat :

Selanjutnya kita akan membuat Model untuk data program. Karena data program berada di dalam data paket, jadi kita akan membuat model data program 1 file dengan data paket. Berikut cara membuatnya : 1. Buka folder bumimandiri -> application -> models, lalu pilih Paket_model.php

2. Berikut script Paket_model.php

Selanjutnya kita akan membuat view pada data program. 3. Buka folder bumimandiri -> application -> view -> admin, lalu pilih lalu klik kanan pada folder admin, new file beri nama program.php.

4. Berikut adalah script dari view program.php

Selanjutnya kita

akan membuat aksi tambah, edit, dan delete agar admin dapat memperbarui paket yang tersedia pada bumi mandiri, berikut hasil yang akan kita buat

5. Buka folder bumimandiri -> application -> view -> admin, lalu klik kanan pada folder admin, new file beri nama program_add.php

6. Berikut script program_add.php

Selanjutnya kita akan membuat controllers untuk program.php

7. Buka folder bumimandiri -> application -> controllers, lalu klik file Admin.php, lalu

buat script seperti ini.

2.4. Membuat form transaksi

File transaksi digunakan untuk merekam data hasil dari transaksi yang terjadi.

2.4.1. Membuat form pemesanan

Data pemesanan digunakan oleh admin untuk melihat dan mengkonfirmasi pemesanan yang terjadi pada bumimandiri. Berikut adalah contoh data paket yang akan kita buat :

Selanjutnya kita akan membuat Model untuk data pemesanan. Berikut cara

membuatnya :

1. Buka folder bumimandiri -> application -> models, lalu klik kanan new file(beri nama file dengan Pemesanan.php).

2. Berikut adalah script model untuk Pemesanan.php

Selanjutnya kita akan membuat View untuk data pemesanan. Berikut cara

membuatnya :

3. Buka folder bumimandiri -> application -> view -> admin, lalu klik kanan pada folder admin, new file beri nama pemesanan.php

4. Berikut script view untuk pemesanan.php

Selanjutnya kita akan membuat controllers untuk pemesanan.php

5. Buka folder bumimandiri -> application -> controllers, lalu klik file Admin.php, lalu

buat script seperti ini.

Selanjutnya kita akan membuat tampilan untuk button opsi dimana ketika admin klik

button opsi akan di ahlihkan pada halaman opsi pembayaran, seperti ini lah kira kira

tampilan opsi pemesanan yang akan kita buat.

Berikut cara membuat halaman opsi pemesanan.

6. Buka folder bumimandiri ->application ->view -> admin, lalu klik kanan pilih new

save dengan nama pemesanan_opsi.php

7. Berikut adalah script dari pemesanan_opsi.php

2.4.2. Membuat form reservasi

Data reservasi digunakan oleh admin untuk melihat pelanggan mana saja yang sedang melakukan reservasi pada bumimandiri. Berikut adalah contoh data paket yang akan kita buat :

Selanjutnya kita akan membuat Model untuk data reservasi. Berikut cara membuatnya :

1. Buka folder bumimandiri -> application -> models, lalu klik kanan new file(beri nama file dengan Reservasi_model.php).

2. Berikut adalah script model untuk Reservasi_model.php

Selanjutnya kita akan membuat View untuk data reservasi. berikut cara membuatnya :

3. Buka folder bumimandiri -> application -> view -> admin, lalu klik kanan pada folder admin, new file beri nama reservasi.php

4. Berikut adalah script view untuk reservasi.php

Selanjutnya kita akan membuat controllers untuk reservasi.php

5. Buka folder bumimandiri -> application -> controllers, lalu klik file Admin.php, lalu buat script seperti ini

2.5. Membuat laporan

Data laporan digunakan oleh admin ataupun super admin untuk merekap seluruh kegiatan yang terjadi pada bumimandiri. Berikut adalah contoh data laporan yang akan kita buat :

Sekarang kita akan membuat view untuk laporan paket pada bumimandiri, berikut cara membuatnya : 1. Buka folder bumimandiri -> application -> view -> admin, lalu klik kanan pada folder

admin, new file beri nama laporan_paket.php

2. Berikut script view untuk laporan_paket.php

Selanjutnya kita akan membuat controllers untuk laporan_paket.php

3. Buka folder bumimandiri -> application -> controllers, lalu klik file Admin.php, lalu buat script seperti ini