Web Funda Mental Berbasis OOP
Buatlah
sebuah tamplate web
Contoh gambar
dibawah adalah template sederhana yang akan saya edit menjadi web yang
Berbasis OOP (Objek
Orientasi Programing ) .
Dimana sebuah gambar dirubah
menjadi file index.html dan akan dirubah menjadi index.php dengan cara
index.html tadi di click kanan lalu pilih rename secara anda bisa merubah nama
file tadi menjadi index.php
Setelah itu jangan lupa file tadi
diletakkan di folder dan beri nama Ref ,pada folder Ref tadi berisikan file images, index.php,style.css
.dimana folder Ref tadi dicopy atau anda
letakkan di folder xampp dan pilih folder yang bernama htdocs.
Selanjutnya biar tampil seperti
diatas,sebelumnya saya ingatkan terlebih dahulu,jangan lupa aktifkan dulu pada
xampp nya,setelah itu anda bisa membuka firefox atau Operamini yang anda punya
lalu ketikan di URL pada firefox atau Operamini seperti ini localhost/ref
Cara selanjutnya
memisahkan antara sidebar dan content pada index.php
Sebelum anda melangkah bagaimana
caranya memisahkan sidebar dan content pada index.php.Ikuti langkah-langkah
sebagai berikut :
Setelah anda letakkan folder
Ref tadi ke dalam folder htdocs, lalu
anda buka folder Ref tadi dimana folder
Ref berisikan file images,index.php,style.css. pada file index.php anda buka
kedalam Edith With Notepad++ .
Folder Ref
Pada index.php ini anda klick kanan lalu
pilih Noteped++,
Bisa juga pakai Dreamwever Cs3
Hasil Pemanggilan
Index.php pada Notepad++
Inilah
hasil menampilkan index.php ke Notepad++.
Langkah berikutnya
anda mengamati pada file index.php di Notepad++ untuk memisahkan content .
Setelah anda amati index.php,
anda cari syntax seperti dibawah lalu anda buat new page pada Notepad++ lalu
anda save dengan nama conten.php.
Penjelasan :
File
pada Index.php tadi anda cari syntax <div id="content"> setelah anda
mengetahui syntax tadi anda blog pada <div id otomatis yang anda blog menunjukan pada tag
penutup </div> biar bisa jelas <div
id="content"> sampai pada kata <!--
end #content -->
Contoh
syntax :
<div
id="content">
<div
class="post">
</div>
</div>
<!--
end #content -->
Langkah berikutnya
memisahkan Sidebar pada index.php
Setelah anda amati index.php,
anda cari syntax seperti dibawah lalu anda buat new page pada Notepad++ lalu
anda save dengan nama sidebar.php.
Penjelasan :
File pada Index.php
tadi anda cari syntax <div id="sidebar">setelah anda
mengetahui syntax tadi anda blog pada <div id otomatis yang anda blog menunjukan pada tag
penutup </div> biar bisa jelas <div
id="sidebar">sampai pada kata <!--
end #sidebar -->
Contoh
syntax :
<div
id="sidebar">
<div
id="sidebar-bgtop">
<div
id="sidebar-bgbtm">
</div>
</div>
</div>
<!--
end #sidebar -->
Memanggil
Content.php pada file index.php
<div id="content">
<?php
include 'content.php';
?>
</div>
<!--
end #content -->
Memanggil Sidebar.php
pada file index.php
<div
id="sidebar">
<div
id="sidebar-bgtop">
<div
id="sidebar-bgbtm">
<?php
include 'sidebar.php';
?>
</div>
</div>
</div>
<!--
end #sidebar -->
Membuat
file di database di phpmyadmin
phpMyAdmin adalah sebuah software
yang berfungsi membuat database yang berfungsi sebagai tempat penyimpanan data
sehingga seluruh data yang akan akan diinputkan dapat terkonfigurasi dengan
rapi dan terstruktur. Pembuatan data base dimulai dari
1. Masuk
ke phpMyAdmin dengan mengisikan url pada browser
Contoh
: localhost/phpmyadmin
atau 127.0.0.1/phpmyadmin
2. Membuat
database dari project yang akan dibuat yaitu dengan mengetikan nama database
yang dibuat setelah itu tekan create
3. Langkah
selanjutnya buat table dengan cara mengetikan nama table dan isikan berapa
field yang akan dibuat setelah itu tekan go
4. Isikan
nama field yang akan dibuat beserta type data dan valuenya. Setelah selesai
tekan save.
5. Database
telah berhasil dibuat. Contoh struktur database yang telah saya buat
Membuat
file config.php
File config.php adalah sebuah
file yang berfungsi unuk menghubungkan atau menjembatani antara file pada web
yang akan dibuat dengan database yang telah dibuat. File – file ini berisikan
syntax dalam bahasa php. Contoh syntax config.php yang telah saya buat adalah
sebagai berikut :
<?php
$config = array ();
$config['url']=
"http://localhost/ref/";
$config['server']="127.0.0.1";
$config['user_db']="root";
$config['pass_db']="";
$config['nama_db']="pembelian";
?>
Penjelasan :
1. $config=array();
membuat
function sebagai persiapan untuk menyimpan data yang akan kita butuhkan.
Kedalam variable $config
2. $config['url']="http://localhost/slickgreen/";
Menyimpan
data yang berupa alamat url dari web yang kita buat kedalam variable
$config['url']
3. $config['server']="127.0.0.1";
Menyimpan
alamat server database yang dituju kedalam variable $config['server']
4. $config['user_db']="root";
Menyimpan
nama user phyMyadmin, default dari phyMyAdmin sendiri adalah “root” sehingga
akan disimpan pada variable $config['user_db']
5. $config['pass_db']="";
Menyimpan
password dari user phyMyadmin, default password dari user phyMyAdmin sendiri
adalah “” atau tanpa password sehingga akan disimpan pada variable
$config['pass_db']
6. $config['nama_db']="
pembelian ";
Menyimpan
nama databse yang telah kita buat pada phpMyAdmin, pada contoh diatas saya
telah membuat database dengan nama webfund sehingga nama tersebut akan saya
simpan kedalam variable $config['nama_db']
Selesai sudah pembuatan file
konfigurasi. Langkah selanjutnya adalah membuat file databse.php
Pembuatan
file database.php
File database.php yang telah saya
buat difungsikan sebagai alur untuk memisahkan antara koneksi, pemanggilan
database dan query pada database yang telah saya buat pada phpMyAdmin. File ini
juga memerlukan function pada file config.php yang telah saya buat sebelumnya.
Berikut contoh syntax pada pada database.php :
<?php
function operasidatabase($query)
{
include 'config.php';
//membuka koneksi
$koneksi = mysql_connect($config['server'],$config['user_db'],
$config['pass_db']) or die ("koneksi_error");
//memilih database
mysql_select_db($config['nama_db'],$koneksi) or die
("database_error");
//insert
$hasil =mysql_query($query)or die ("query_error");
//close koneksi
mysql_close($koneksi);
//mengembalikan nilai
return $hasil;
}
?>
Fungsi Syntax :
1. function
proyekdb($query) = memanggil function yang telah dibuat pada simpan.php.
Simpan.php ini akan dibahas pada langkah selanjutnya
2.
include
'config.php'; = memanggil fungsi yang telah dibuat pada config.php yang akan
digunakan sebagai jembatan
3.
$koneksi=mysql_connect($config['server'],$config['user_db'],$config['pass_db'])
or die("koneksi error"); = difungsikan untuk membuka koneksi dengan
database yang ada pada phpMyAdmin dan ditampung pada pada $koneksi. Sedangkan
or die("koneksi error")adalah syntax yang digunakan untuk memunculkan
pesan apabila koneksi error
4.
mysql_select_db($config['nama_db'],$koneksi)or
die("database error"); = digunakan untuk memilih database yang kita
gunakan sebagai media penyimpanan sedangkan fungsi dari or die("database
error") adalah untuk menampilkan pesan apabila databse yang kita gunakan
error
5.
$hasil =
mysql_query($query)or die("querry error"); = digunakan untuk
menginsertkan data yang telah kita buat kedalam database sedangkan fungsi dari
or die("querry error") adalah untuk menampilkan pesan apabila query
error
6.
mysql_close($koneksi);
= digunakan untukmenutup koneksi yang telah kita buka sebelumnya.
7. return
$hasil; = mengembalikan nilai dari $hasil yang akan kita gunakan sebagai query untuk memilih table yang akan digunakan nanti.
Setelah
membuat file database.php dan config.php kemudian dicoba untuk dijalankan, jika
sudah berhasil sekarang saatnya untuk membuat form inputan pada file
content.php yang telah dipersiapkan. Form ini nantinya berguna untuk memudahkan
user dalam menginputkan data pada database melalui browser. Caranya dengan
mengedit syntax yang ada di dalam file content.php. Contohnya seperti dibawah
ini:
<form
action ="simpan.php" method ='post'>
<p><label><b>No.NOTABELI</b></label>         
<input
name ="notabeli"/></p>
<p><label><b>TANGGAL</b></label>                
<input
name ="tanggal"/></p>
<p><label><b>KODE
PEMASOK</b></label>     
<select
name ="kodepemasok"/>
<option
value = "TP">Tahu petis</option>
<option
value = "WG">Warung Giras</option>
<option
value = "WK">Warung Rokok</option>
<option
value = "BPS">Bakso Pak Sabar</option>
<option
value = "EL">Es Legen</option>
</select>
</p>
<p><label><b>CARA
BAYAR</b></label>       
   
<input
name ="carabayar"/></p>
<p><label><b>JATUH
TEMPO</b></label>      
  
<input
name ="jatuhtempo"/></p>
<p><label><b>DISCONT
BELI</b></label>     
   
<input
name ="discontbeli"/></p>
<p><label><b>UANG
MUKA</b></label>       
    
<input
name ="uangmuka"/></p>
<p><label><b>JUMLAH
HUTANG</b></label>   
<input
name ="jumlahhutang"/></p>
<input
type = "submit" name="simpan" value="simpan"/>
</form>
</div>
Maksud
dari syntax diatas adalah membuat form yang berisi kolom pengisian data No.NOTABELI, TANGGAL, KODE
PEMASOK,
CARA
BAYAR,
JATUH
TEMPO,
DISCONT
BELI,
UANG
MUKA,
dan JUMLAH
HUTANG.
Yang nantinya data tersebut dimasukkan pada tabel database yang masing-masing
field-nya notabeli, tanggal, kodepenerbit, kodepemasok, carabayar, jatuhtempo, discontbeli, uangmuka,
dan jumlahhutang. Caranya dengan menekan tombol simpan.
Kemudian
setelah mengisi syntax diatas pada file content.php, yang perlu dilakukan adalah
membuat file baru yang diberi nama “simpan.php”. Gunanya tidak lain ialah
sebagai penghubung antara file content.php dan database.php. Singkat katanya,
didalam file simpan.php akan melakukan proses transfer data yang telah
dimasukkan pada form content.php ke dalam file database.php. Syntax pada file
simpan.php sebagai berikut :
<?php
include
'database.php';
$notabeli=$_POST['notabeli'];
$tanggal=$_POST['tanggal'];
$kd_pemasok=$_POST['kodepemasok'];
$carabayar=$_POST['carabayar'];
$jatuhtempo=$_POST['jatuhtempo'];
$discontbeli=$_POST['discontbeli'];
$uangmuka=$_POST['uangmuka'];
$jumlahhutang=$_POST['jumlahhutang'];
operasidatabase("INSERT
INTO `pembelian`.`beli` (`no_notabeli`, `tanggal`, `kd_pemasok`, `cara_bayar`,
`jth_tempo`, `discont_beli`, `uang_muka`, `jml_hutang`) VALUES ('$notabeli',
'$tanggal', '$kd_pemasok', '$carabayar', '$jatuhtempo', '$discontbeli',
'$uangmuka', '$jumlahhutang');");
header("location:operasidb.php");
?>
Perintah
include 'database.php';
maksudnya
untuk melakukan pemanggilan file database.php. Kemudian data yang tersimpan
dalam variable-variable akan dikirim ke database yang telah disiapkan.
Sedangkan ayogdb adalah nama function yang telah kita buat pada file
database.php. Isinya adalah query untuk memasukkan data ke database.
Jika sudah selesai membuat file
simpan.php, langkah selanjutnya adalah memasukannya pada action form yang kita
buat kosong sebelumnya.di dalam content.php Maksudnya agar data yang diinput
pada form akan langsung terkoneksi pada variable-variable di file simpan.php.
<form
action ="simpan.php" method ='post'>
Setelah
saya menyimpulkan antara file
isikonten.php ,simpan.php, database.php, dan config.php dst , kini tinggal mencoba untuk menjalankan program yang telah saya
buat dan mencoba melalui browser.dimana
dibawah adalah hasil saya untuk menampilkan atau menjalankan program :
Selanjutnya saya membuat file laporan.php pada notepad++ ,laporan.php yang berguna untuk memanggil
data yang telah diisikan pada database dan data yang telah dipanggil dari
database ditampung dahulu di querry dibawah include ‘database.php’ lalu data
yang telah ditampung tersebut ditampilkan data datanya pada baris dan kolom
yang dibuat. dengan Syntax nya seperti ini :
?>
<div
id="laporan">
<table border="1"
width="100%" style="border=collapse:collapse">
<tr>
<th>no</th>
<th>no_notaBeli</th>
<th>tanggal</th>
<th>kd_Pemasok</th>
<th>cara_Bayar</th>
<th>jth_Tempo</th>
<th>discont_Beli</th>
<th>uang_Muka</th>
<th>jml_hutang</th>
</tr>
<?php
$no=0;
while($data =
mysql_fetch_array($proses))
{
$no++;
?>
<tr>
<td><?php echo $no
?></td>
<td><?php echo
$data['no_notabeli']?></td>
<td><?php echo
$data['tanggal']?></td>
<td><?php echo
$data['kd_pemasok']?></td>
<td><?php echo
$data['cara_bayar']?></td>
<td><?php echo
$data['jth_tempo']?></td>
<td><?php echo
$data['discont_beli']?></td>
<td><?php echo
$data['uang_muka']?></td>
<td><?php echo
$data['jml_hutang']?></td>
</tr>
<?php } ?>
</table>
</div>
Setelah
Syntax laporan.php selesai dibuat diatas , kembali lagi pada
browser untuk melakukan tes program yang telah dibuat.lalu akan muncul bagian ini pada web tepatnya ada
di konten webnya:
langkah
selanjutnya mengedit sidebar.php yang
telah saya buat sebelumnya.kenapa saya mengedit sidebar.php yang sebelumnya
sudah dibuat karna di sidebar
yang pertama kali saya buat belum terhubung dengan database maka dari itu
sidebar.php diedit lagi agar terhubung
dengan database,dan menghubungkan
dari config.php yang bilamana ketika salah satu dari pilihan yang ada di
sidebar diklik atau dipilih akan bisa menampilkan data yang telah dibuat
sebelumnya yang telah disimpan di database yang dihubungkan oleh config.php dan akan menampilkan isi data
dari database yang telah dibuat dan data tersebut muncul pada tampilan di
kontennya. Syntaxnya seperti dibawah ini:
<ul>
<li>
<h2>Categories</h2>
<ul>
<li><a
href="<?php echo $config['url'];
?>operasidb.php?halaman=laporan&kd_pemasok=TP"> Laporan Tahu
Petis</a></li>
<li><a
href="<?php echo $config['url'];
?>operasidb.php?halaman=laporan&kd_pemasok=WG"> Laporan Warung
Giras</a></li>
<li><a
href="<?php echo $config['url'];
?>operasidb.php?halaman=laporan&kd_pemasok=WK"> Laporan Warung
rokok</a></li>
<li><a
href="<?php echo $config['url'];
?>operasidb.php?halaman=laporan&kd_pemasok=BPS">Laporan Bakso
Pak Sabar</a></li>
<li><a
href="<?php echo $config['url'];
?>operasidb.php?halaman=laporan&kd_pemasok=TBS">Laporan Tembel
Ban</a></li>
<li><a
href="<?php echo $config['url']; ?>operasidb.php?halaman=laporan&kd_pemasok=EL">
Laporan Es Legen</a></li>
</ul>
