Thursday, 10 March 2016

10K LINE CODE OF PHP

Pada kesempatan kali ini saya akan menjelaskan beberapa materi mengenai pemrograman web. Di era sekarang membuat sebuah website bukanlah hal yang sulit, bahkan orang yang tidak paham coding pun dapat dengan mudah membuatnya. Dalam membantu memperbaiki tampilan web, sudah sangat banyak CMS yang disediakan salah satunya wordpress. CMS seperti ini tidak membutuhkan code sama sekali. Kita hanya memilih tema, menginstall plugin yang dibutuhkan, mengedit sesuai keinginan dan selesai. Akan tetapi tidak semua orang puas dengan hanya berlatar template, kadang lebih bangga menggunakan website yang tampilannya merupakan hasil coding sendiri. Disini saya akan menggunakan beberapa software yaitu sublime untuk membuat editor PHP nya, XAMPP sebagai aplikasi pengembang yang berguna untuk pengembangan website berbasis PHP. Berikut tutorial sederhana yang dapat saya lampirkan :

1. Connect database MySQL

    - Nyalakan XAMPP


    - Tuliskan code berikut pada sublime sebagai .php lalu buat folder baru di dalam folder xampp/htdocs kemudian simpan .php tersebut didalamnya.


    - Panggil menggunakan web browser dengan url http://localhost:(port pada xampp)/(nama folder baru)/(nama file).php. Sesuai code diatas jika database berhasil terhubung maka akan menampilkan output "WIDA CONNECTED SUCCESSFULLY" 

      Hasil :


    
    Deskripsi : LOC 21, PASS.


2. Penggunaan Variabel pada php


   Hasil :

   
  
    Deskripsi : LOC 20,PASS.

3. Penggunaan Array pada PHP


   Hasil :

   

  
   Deskripsi : LOC 15,PASS.


  Selamat mencoba semoga bermanfaat !!

//=================== TUGAS TAMBAHAN ==================//

Setelah memberikan sedikit tutorial simple mengenai code .php diatas, saya kembali diberi kesempatan untuk mendokumentasikan langkah langkah atau tutorial membuat tampilan web dimana web tersebut diharapkan dapat terkoneksi oleh sebuah database. Web tersebut juga dirancang agar dapat melakukan insert, update, delete terhadap isi database yang terkoneksi. Sebelum memulai tutorial ini, anda diharapkan sudah menginstall oracle sebagai aplikasi yang menangani database dan sublime sebagai aplikasi yang mempermudah dalam pengkodean .php. Pada tutorial kali ini anda diharapkan sudah paham mengenai tutorial diatas dan juga paham code database pada oracle seperti contoh bagaimana query dalam membuat tabel, mengisi tabel, mengupdate isi tabel atau bahkan menghapus salah satu isi tabel. Jika anda adalah mahasiswa teknik informatika yang duduk di semester 4 keatas pasti hal itu sudah bukan menjadi sesuatu yang asing untuk anda. Next, berikut tutorial saya :

1. Tampilan HOME pada web


Code untuk membuat tampilan HOME
https://drive.google.com/file/d/0B2c_m-HEo5olTFZ5QjUzWDRWdFk/view?usp=sharing
 
Silahkan download file pada link diatas dan buka melalui aplikasi sublime

2. Tampilan RESERVATION


Menu reservation adalah menu untuk menambahkan data pada guest. Setiap guest wajib mengisi data mereka sebelum melakukan transaksi. Jika anda menekan tulisan RESERVATION pada home maka akan muncul tampilan seperti berikut pada web anda




Misal kita isikan data sebagai berikut, lalu tekan next




Code untuk membuat tampilan RESERVATION

https://drive.google.com/file/d/0B2c_m-HEo5olVEFET2htNEZpOVE/view?usp=sharing


Silahkan download file pada link diatas dan buka melalui aplikasi sublime



3. Tampilan NEXT

Ketika anda menekan tombol next maka data anda akan masuk ke dalam tabel reservasi. Sebelumnya pastikan status insert data guest anda success. Jika data berhasil diterima oracle, maka akan muncul tampilan sebagai berikut 


KTP pada kolom diatas merupakan automatics value dimana nilai tersebut otomatis terisi ketika anda sudah menginputkan identification number pada page reservation. Jika insert guest anda gagal, maka akan muncul tampilan seperti berikut


Setelah memastikan insert data berhasil maka lanjutkanlah dengan melengkapi data diatas. Reservation ID adalah nomor urut reservasi yang akan diberikan oleh petugas. NIP adalah id petugas yang membantu anda menginputkan data sedangakan room id merupakan id kamar yang akan anda sewa. Jika berawalan huruf 'B' maka anda akan menyewa wisma Bougenville, 'F' untuk Flamboyan dan 'J' untuk Jasmine. Huruf kedua pada room id menunujukkan tipe kamar yang dipilih seperti contoh 'S' adalah tipe kamar standard. Misal kita akan menginput seperti berikut


Code untuk membuat tampilan NEXT


Code untuk query NEXT


Silahkan download file pada link diatas dan buka melalui aplikasi sublime

4. Tampilan DENDA

Setelah anda berhasil melakukan reservasi maka anda harus melunasi pembayaran dengan melakukan transaksi. Selain ditentukan dari harga kamar yang dipilih, jumlah hari penyewaan, total transaksi juga ditentukan dari denda yang dikenakan oleh pihak wisma. Jika halaman next anda berhasil maka akan muncul tampilan seperti berikut




Sedangkan jika halaman next anda gagal maka akan muncul tampilan seperti berikut. Hal ini berarti data anda belum terdaftar di tabel transaksi maka ketika anda menekan tombol next pada halaman ini, anda akan kembali ke halaman home dan tidak mengeluarkan total yang harus dibayar guest alias status=failed.


Kembali ke halaman home



Code untuk membuat tampilan DENDA


Code untuk query DENDA


Silahkan download file pada link diatas dan buka melalui aplikasi sublime

5. Tampilan PEMBAYARAN

Jika semua tahapan diatas berstatus sukses, maka akan muncul berapa total tagihan yang anda dapat seperti dibawah ini



Code untuk membuat tampilan PEMBAYARAN


Code untuk query PEMBAYARAN


Silahkan download file pada link diatas dan buka melalui aplikasi sublime

Demikian tahap tahap dalam insert data.

6. Tampilan GUEST

Halaman ini merupakan halaman dimana anda dapat melihat siapa saja tamu yang berhasil menyewa wisma tersebut.

Sebelum insert data 


Setelah berhasil insert data


Pada halaman ini anda dapat menghapus atau mengupdate guest. Berikut tampilan ketika anda menekan kata update


Sebagai contoh, ubah nama Wida Dwitiayasa menjadi Wida Aja seperti gambar berikut


Setelah berhasil maka data akan terupdate di halaman GUEST seperti berikut


Lalu ketika anda ingin menghapus salah satu data guest maka silahkan tekan kata delete maka data tersebut akan hilang dan terdapat status success pada url bar seperti berikut



Code untuk membuat tampilan GUEST

https://drive.google.com/file/d/0B2c_m-HEo5olbjZIVnV1Y0g2dlk/view?usp=sharing

Code untuk membuat tampilan UPDATE GUEST


Code untuk query UPDATE GUEST


Code untuk query DELETE GUEST


Silahkan download file pada link diatas dan buka melalui aplikasi sublime

Demikian tahap tahap dalam update dan delete data.

7. Tampilan CREW

Halaman standard yang hanya dapat menampilkan data crew pada database


Code untuk membuat tampilan CREW


Code untuk query CREW


8. Tampilan ABOUT

Halaman ini adalah halaman yang mengenalkan wisma apa saja yang tersedia beserta harga dan tipe masing masing kamar

Wisma Bougenville


Code untuk mengelompokkan hanya wisma bougenville


Wisma Flamboyan


Code untuk mengelompokkan hanya wisma flamboyan


Wisma Jasmine


Code untuk mengelompokkan hanya wisma jasmine


Code untuk membuat tampilan ABOUT


Code untuk mengelompokkan guest sesuai wisma yang dipilih pun hampir sama seperti code untuk mengelompokkan wisma diatas. Selain itu, web yang saya buat ini dapat menampilkan kamar yang pemesannya melebihi jumlah tertentu. Tampilan awal setelah anda menekan kata TUGAS adalah sebagai berikut


Lalu setelah menekan SEARCH QUERY WIDA maka akan muncul tampilan berikut pada web browser anda


Isilah nominal sesuai keinginan anda, pada kesempatan kali ini dimisalkan saya ingin mengetahui kamar mana saja yang pemesannya lebih dari 2.


Maka output yang dihasilkan berupa seperti berikut



Code untuk membuat tampilan setelah menekan kata TUGAS


Code untuk membuat tampilan setelah menekan kata SEARCH QUERY WIDA


Code untuk membuat tampilan setelah menekan tombol SEARCH


Code untuk query SEARCH


Jika semua code tersebut digabungkan maka baru tercapai 2060 line of php code. Demikian tutorial dari saya terima kasih dan semoga bermanfaat !

Download file zip of php :  https://drive.google.com/file/d/0B2c_m-HEo5olTDgtSEFHOGFVY3c/view?usp=sharing

Download code oracle : https://drive.google.com/file/d/0B2c_m-HEo5olZmNsNm9qeFp4emc/view?usp=sharing