Contoh Inputan Web dengan Php Mysql
Dalam Membuat Sebuah Program Inputan Web dengan bahasa pemrograman PHP.
yang perlu di persiapkan dalam pembuatan program WEB anatara Lain :
- Database -> pada Contoh disini menggunakan DB Mysql, Menggunakan Aplikasi XAMPP
- Program Untuk Membukan bahasa pemrograman PHP, program yang bisa di gunakan antara lain : Noteped++, Dreamwaver, dan lain sebagainya.
- Instal Semua 2 Program
- Jika Semuanya Sudah Terinstal, Untuk yang Pertama Kita Buat Database dan Tabel
- Pada Pembuatan Database dan Tabel sudah Dijelas Pada Postingan yang Sebelumnya, bisa Anda Lihat di Category Database dan Tabel pada Blog Ini ;
- Pada Contoh Disini membuat sebuah Inputan dengan Tabel Masakan
Contoh Gambar :
Langkah Selanjutnya Membuat Form Inputan PHP :
berikut contoh gambar Inputan Web PHP :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script language="javascript" src="code.js" type="text/javascript"></script>
<style type="text/css">
<!--
@import url("style/style.css");
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<H1>Masakan Kuliner Jawa</H1>
</div>
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="contact.php">Menu</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">contact</a></li>
<li><a href="contact.php">Sosial Media</a></li>
</ul>
<div id="hero">
<H2></H2>
<div id="leftbar">
<div id="menuheader">
<td>KATEGORI</td>
</div>
<script type="text/javascript">
cetakdaftarnama();
</script>
<div id="menuheader">
<td>MENU</td>
</div>
<tr align="center">
</div>
<div style="clear: both"></div></div>
<div align="center">
<div id="footer">
<div class="footer a"><a href="./masakan.xml">Lihat XML data</a><a href="http://validator.w3.org/check/referer"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
</a>Copyright© 2013 <a href='#' rel='copyright'>Masakan Jawa</a> | <a href='#' title='Masakan'>Menu</a>
| Powered by <a href='#' rel='nofollow' target='_blank'>Nurul Miftahudin</a>
</div>
</div>
</div>
<script type="text/javascript">
showData();
</script>
</body>
</html>
Untuk menyimpan ke Database Source Code yang di Gunakan Sebagai Berikut :
<div id="menu">
<td><li><a href="inputmasakan.php">Input Data</a></li>
</td>
<td>
<li><a href="formedit.php">Edit Data</a></li>
</td>
<td>
<li><a href="utama.php">Upload Gambar</a></li>
</td>
<td>
<li><a href="utama.php">Tampil Data</a></li>
</td>
</div>
</div>
<div id="rightbar">
<div id="menuright">
Gambar
</div>
<div class="aligncenter" id="datagambar"> </div>
</div>
<div id="content">
<div class="judul">
Input Data Kuliner
</div>
<div class="deskripsi">
<form action="#" method="POST">
<table>
<tr>
<td>Nama Masakan</td>
<td><input type="text" name="nama" id="nama"></input></td>
</tr>
<tr>
<td>Bahan</td>
<td><input type="text" name="bahan" id="bahan"></input></td>
</tr>
<tr>
<td>Bumbu</td>
<td><input type="text" name="bumbu" id="bumbu"></input></td>
</tr>
<tr>
<td>Isi</td>
<td><input type="text" name="isi" id="isi"></input></td>
</tr>
<tr>
<td>Kuah</td>
<td><input type="text" name="kuah" id="kuah"></input></td>
</tr>
<tr>
<td>Asal Masakan</td>
<td><input type="text" name="asalmasakan" id="asalmasakan"></input></td>
</tr>
<tr>
<td>Cara Membuat</td>
<td><input type="text" name="caramembuat" id="caramembuat"></input></td>
</tr>
<tr>
<td>Gambar</td>
<td><input type="text" name="gambar" id="gambar"></input></td>
</tr>
<tr>
<td><a href="formedit.php">Lihat Data</a></td>
<td><input type="submit" name="submit" id="submit" value="Kirim"></input></td>
</tr>
</table>
</form>
<?php
// 1. KONEKSI KE DATABASE
mysql_connect("localhost", "root", "");
mysql_select_db("sekripsiku");
// 2. MENGAMBIL DATA DARI INPUT FORM
$nama=isset($_POST["nama"])?$_POST["nama"]:"";
$bahan=isset($_POST["bahan"])?$_POST["bahan"]:"";
$bumbu=isset($_POST["bumbu"])?$_POST["bumbu"]:"";
$isi=isset($_POST["isi"])?$_POST["isi"]:"";
$kuah=isset($_POST["kuah"])?$_POST["kuah"]:"";
$asalmasakan=isset($_POST["asalmasakan"])?$_POST["asalmasakan"]:"";
$caramembuat=isset($_POST["caramembuat"])?$_POST["caramembuat"]:"";
$gambar=isset($_POST["gambar"])?$_POST["gambar"]:"";
// 3. MEMASUKKAN DATA KE DATABASE
if ($nama != ''){
$query = "INSERT INTO masakan(nama, bahan, bumbu, isi, kuah, asalmasakan, caramembuat, gambar)
VALUES ('$nama', '$bahan', '$bumbu', '$isi', '$kuah', '$asalmasakan', '$caramembuat', '$gambar')";
mysql_query($query);
echo "Data sebelumnya dengan judul <b>$nama</b> telah tersimpan.";
}
else
{
}
// 4. MENGAMBIL DATA DARI DATABASE
$namaTabel = "masakan";
$query = "SELECT * FROM $namaTabel";
$hasil = mysql_query($query);
$jumField = mysql_num_fields($hasil);
$sites = array();
while ($data = mysql_fetch_array($hasil))
{
$sites [] = array('nama' => $data['nama'], 'bahan' => $data['bahan'], 'bumbu' => $data['bumbu'],
'isi' => $data['isi'], 'kuah' => $data['kuah'], 'asalmasakan' => $data['asalmasakan'],
'caramembuat' => $data['caramembuat'],'gambar' => $data['gambar']);
}
// 5. PARSING DATA SQL -> XML Document : print_r($sites);
/*** */
$document = new DOMDocument();
$document->formatOutput = true;
$root = $document->createElement( "masakan" );
$document->appendChild( $root );
foreach( $sites as $masakan )
{
$block = $document->createElement( "data" );
$nama = $document->createElement( "nama" );
$nama->appendChild($document->createTextNode( $masakan['nama'] ));
$block->appendChild( $nama );
$bahan = $document->createElement( "bahan" );
$bahan->appendChild($document->createTextNode( $masakan['bahan'] ) );
$block->appendChild( $bahan);
$bumbu = $document->createElement( "bumbu" );
$bumbu->appendChild( $document->createTextNode( $masakan['bumbu'] ) );
$block->appendChild( $bumbu );
$isi = $document->createElement( "isi" );
$isi->appendChild( $document->createTextNode( $masakan['isi'] ) );
$block->appendChild( $isi );
$kuah = $document->createElement( "kuah" );
$kuah->appendChild( $document->createTextNode( $masakan['kuah'] ) );
$block->appendChild( $kuah );
$asalmasakan = $document->createElement( "asalmasakan" );
$asalmasakan->appendChild( $document->createTextNode( $masakan['asalmasakan'] ) );
$block->appendChild( $asalmasakan );
$caramembuat = $document->createElement( "caramembuat" );
$caramembuat->appendChild( $document->createTextNode( $masakan['caramembuat'] ) );
$block->appendChild( $caramembuat );
$gambar = $document->createElement( "gambar" );
$gambar->appendChild( $document->createTextNode( $masakan['gambar'] ) );
$block->appendChild( $gambar );
$root->appendChild( $block );
}
// 6. MENYIMPAN DATA DALAM BENTUK FILE data.xml
$document->save("masakan.xml");
?>
File diatas akan Kita Gabungakan dalam Suatu file.PHP dengan Nama Inputan.php, Ingat save dengan Nama PHP
berikut source code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta name="keywords" content="StartUp, web, to, invest, xhtml, xml"/>
<meta name="description" content="Dokumentasi masakan jawa"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script language="javascript" src="code.js" type="text/javascript"></script>
<style type="text/css">
<!--
@import url("style/style.css");
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<H1>Masakan Kuliner Jawa</H1>
</div>
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="contact.php">Menu</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">contact</a></li>
<li><a href="contact.php">Sosial Media</a></li>
</ul>
<div id="hero">
<H2></H2>
<div id="leftbar">
<div id="menuheader">
<td>KATEGORI</td>
</div>
<script type="text/javascript">
cetakdaftarnama();
</script>
<div id="menuheader">
<td>MENU</td>
</div>
<tr align="center">
<div id="menu">
<td>
<li><a href="inputmasakan.php">Input Data</a></li>
</td>
<td>
<li><a href="formedit.php">Edit Data</a></li>
</td>
<td>
<li><a href="utama.php">Upload Gambar</a></li>
</td>
<td>
<li><a href="utama.php">Tampil Data</a></li>
</td>
</div>
</div>
<div id="rightbar">
<div id="menuright">
Gambar
</div>
<div class="aligncenter" id="datagambar"> </div>
</div>
<div id="content">
<div class="judul">
Input Data Kuliner
</div>
<div class="deskripsi">
<form action="#" method="POST">
<table>
<tr>
<td>Nama Masakan</td>
<td><input type="text" name="nama" id="nama"></input></td>
</tr>
<tr>
<td>Bahan</td>
<td><input type="text" name="bahan" id="bahan"></input></td>
</tr>
<tr>
<td>Bumbu</td>
<td><input type="text" name="bumbu" id="bumbu"></input></td>
</tr>
<tr>
<td>Isi</td>
<td><input type="text" name="isi" id="isi"></input></td>
</tr>
<tr>
<td>Kuah</td>
<td><input type="text" name="kuah" id="kuah"></input></td>
</tr>
<tr>
<td>Asal Masakan</td>
<td><input type="text" name="asalmasakan" id="asalmasakan"></input></td>
</tr>
<tr>
<td>Cara Membuat</td>
<td><input type="text" name="caramembuat" id="caramembuat"></input></td>
</tr>
<tr>
<td>Gambar</td>
<td><input type="text" name="gambar" id="gambar"></input></td>
</tr>
<tr>
<td><a href="formedit.php">Lihat Data</a></td>
<td><input type="submit" name="submit" id="submit" value="Kirim"></input></td>
</tr>
</table>
</form>
<?php
// 1. KONEKSI KE DATABASE
mysql_connect("localhost", "root", "");
mysql_select_db("sekripsiku");
// 2. MENGAMBIL DATA DARI INPUT FORM
$nama=isset($_POST["nama"])?$_POST["nama"]:"";
$bahan=isset($_POST["bahan"])?$_POST["bahan"]:"";
$bumbu=isset($_POST["bumbu"])?$_POST["bumbu"]:"";
$isi=isset($_POST["isi"])?$_POST["isi"]:"";
$kuah=isset($_POST["kuah"])?$_POST["kuah"]:"";
$asalmasakan=isset($_POST["asalmasakan"])?$_POST["asalmasakan"]:"";
$caramembuat=isset($_POST["caramembuat"])?$_POST["caramembuat"]:"";
$gambar=isset($_POST["gambar"])?$_POST["gambar"]:"";
// 3. MEMASUKKAN DATA KE DATABASE
if ($nama != ''){
$query = "INSERT INTO masakan(nama, bahan, bumbu, isi, kuah, asalmasakan, caramembuat, gambar)
VALUES ('$nama', '$bahan', '$bumbu', '$isi', '$kuah', '$asalmasakan', '$caramembuat', '$gambar')";
mysql_query($query);
echo "Data sebelumnya dengan judul <b>$nama</b> telah tersimpan.";
}
else
{
}
// 4. MENGAMBIL DATA DARI DATABASE
$namaTabel = "masakan";
$query = "SELECT * FROM $namaTabel";
$hasil = mysql_query($query);
$jumField = mysql_num_fields($hasil);
$sites = array();
while ($data = mysql_fetch_array($hasil))
{
$sites [] = array('nama' => $data['nama'], 'bahan' => $data['bahan'], 'bumbu' => $data['bumbu'],
'isi' => $data['isi'], 'kuah' => $data['kuah'], 'asalmasakan' => $data['asalmasakan'],
'caramembuat' => $data['caramembuat'],'gambar' => $data['gambar']);
}
// 5. PARSING DATA SQL -> XML Document : print_r($sites);
/*** */
$document = new DOMDocument();
$document->formatOutput = true;
$root = $document->createElement( "masakan" );
$document->appendChild( $root );
foreach( $sites as $masakan )
{
$block = $document->createElement( "data" );
$nama = $document->createElement( "nama" );
$nama->appendChild($document->createTextNode( $masakan['nama'] ));
$block->appendChild( $nama );
$bahan = $document->createElement( "bahan" );
$bahan->appendChild($document->createTextNode( $masakan['bahan'] ) );
$block->appendChild( $bahan);
$bumbu = $document->createElement( "bumbu" );
$bumbu->appendChild( $document->createTextNode( $masakan['bumbu'] ) );
$block->appendChild( $bumbu );
$isi = $document->createElement( "isi" );
$isi->appendChild( $document->createTextNode( $masakan['isi'] ) );
$block->appendChild( $isi );
$kuah = $document->createElement( "kuah" );
$kuah->appendChild( $document->createTextNode( $masakan['kuah'] ) );
$block->appendChild( $kuah );
$asalmasakan = $document->createElement( "asalmasakan" );
$asalmasakan->appendChild( $document->createTextNode( $masakan['asalmasakan'] ) );
$block->appendChild( $asalmasakan );
$caramembuat = $document->createElement( "caramembuat" );
$caramembuat->appendChild( $document->createTextNode( $masakan['caramembuat'] ) );
$block->appendChild( $caramembuat );
$gambar = $document->createElement( "gambar" );
$gambar->appendChild( $document->createTextNode( $masakan['gambar'] ) );
$block->appendChild( $gambar );
$root->appendChild( $block );
}
// 6. MENYIMPAN DATA DALAM BENTUK FILE data.xml
$document->save("masakan.xml");
?>
</div>
</div>
<div style="clear: both"></div></div>
<div align="center">
<div id="footer">
<div class="footer a"><a href="./masakan.xml">Lihat XML data</a><a href="http://validator.w3.org/check/referer"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
</a>Copyright© 2013 <a href='#' rel='copyright'>Masakan Jawa</a> | <a href='#' title='Masakan'>Menu</a>
| Powered by <a href='#' rel='nofollow' target='_blank'>Nurul Miftahudin</a>
</div>
</div>
</div>
<script type="text/javascript">
showData();
</script>
</body>
</html>
Silahkan mencoba.
Untuk melihat Hasilnya menggunakan Server Lokal atau Lokalhost
dengan mengetik di browser Internet anda : localhost/nama_folder_webAnda/nama_file_inputan.php
Untuk Melihat Hasil Inputan maka dibuat juga view.php :
Berikut Source Codenya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta name="keywords" content="StartUp, web, to, invest, xhtml, xml"/>
<meta name="description" content="Dokumentasi masakan jawa"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script language="javascript" src="code.js" type="text/javascript"></script>
<style type="text/css">
<!--
@import url("style/style.css");
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<H1>Masakan Kuliner Jawa</H1>
</div>
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="contact.php">Menu</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">contact</a></li>
<li><a href="contact.php">Sosial Media</a></li>
</ul>
<div id="hero">
<H2></H2>
<div id="leftbar">
<div id="menuheader">
<td>DAFTAR ISI</td>
</div>
<script type="text/javascript">
cetakdaftarnama();
</script>
<div id="menuheader">
<td>MENU</td>
</div>
<tr align="center">
<div id="menu">
<td>
<li><a href="inputmasakan.php">Input Data</a></li>
</td>
<td>
<li><a href="formedit.php">Edit Data</a></li>
</td>
<td>
<li><a href="kirimgambar.php">Upload Gambar</a></li>
</td>
<td>
<li><a href="tampildata.php">Tampil Data</a></li>
</td>
</div>
</div>
<div id="rightbar">
<div id="menuright">
Gambar
</div>
<div class="aligncenter" id="datagambar"> </div>
<div id="menuright">
Cari
</div>
<form action="<?$_SERVER['PHP_SELF']?>" method="post" name="pencarian" id="pencarian">
<input class='searchfield' id='submit' name='submit' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search product....'/>
<input class='searchbutton' src='http://localhost/sekripsiku/images/cari.gif' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
<div id="menuright">
File
</div>
<div id="rightleft">
<ul>
<a href="./masakan.xml">File XML</a><a href="http://validator.w3.org/check/referer"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
</ul>
<ul>
<a href="http://www.thepdf.com/convert-xml-to-pdf.html">Convert PDF</a>
</ul>
</div>
</div>
<div id="content">
<div class="deskripsi">
<table class="alignleft" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<div class="judul" id="datanama"> </div>
<div id="time">
<?php
$hari1 = date("F j, Y, g:i a");
echo $hari1."<br/><br/>";
?>
</div>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
<tr>
<td width="118">Bahan</td>
<td width="11">:</td>
<td width="403"><div class="alignleft" id="databahan"> </div></td>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
<tr>
<td>Bumbu</td>
<td>:</td>
<td><div class="alignleft" id="databumbu"> </div></td>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
<tr>
<td>Isi</td>
<td>:</td>
<td><div class="alignleft" id="dataisi"> </div></td>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
<tr>
<td>Kuah</td>
<td>:</td>
<td><div class="alignleft" id="datakuah"> </div></td>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
<tr>
<td>Asal Masakan</td>
<td>:</td>
<td><div class="alignleft" id="dataasalmasakan"> </div></td>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
<tr>
<td >Cara Membuat</td>
<td>:</td>
<td colspan="4" class="alignleft"><div class="alignleft" id="datacaramembuat"> </div></td>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
</table>
</div>
</div>
<div style="clear: both"></div></div>
<div align="center">
<div id="footer">
<div class="footer a"><a href="./masakan.xml">Lihat XML data</a><a href="http://validator.w3.org/check/referer"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
</a>Copyright© 2013 <a href='#' rel='copyright'>Masakan Jawa</a> | <a href='#' title='Masakan'>Menu</a>
| Powered by <a href='#' rel='nofollow' target='_blank'>Nurul Miftahudin</a>
</div>
</div>
</div>
<script type="text/javascript">
showData();
</script>
</body>
</html>
Keterangan :
Source Code Untuk Menampilkan data yang Telah Di Input Sebagai Berikut :
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
<tr>
<td width="118">Bahan</td>
<td width="11">:</td>
<td width="403"><div class="alignleft" id="databahan"> </div></td>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
<tr>
<td>Bumbu</td>
<td>:</td>
<td><div class="alignleft" id="databumbu"> </div></td>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
<tr>
<td>Isi</td>
<td>:</td>
<td><div class="alignleft" id="dataisi"> </div></td>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
<tr>
<td>Kuah</td>
<td>:</td>
<td><div class="alignleft" id="datakuah"> </div></td>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
<tr>
<td>Asal Masakan</td>
<td>:</td>
<td><div class="alignleft" id="dataasalmasakan"> </div></td>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
<tr>
<td >Cara Membuat</td>
<td>:</td>
<td colspan="4" class="alignleft"><div class="alignleft" id="datacaramembuat"> </div></td>
</tr>
<tr>
<td colspan="4" class="alignleft"> </td>
</tr>
Contoh Hasil Inputan :
Semoga Berhasil..
Good Luck..
0 Response to "Contoh Inputan Web dengan Php Mysql + XML"
Post a Comment