Web Desain: 2013

Ini adalah contoh coding sederhana menggunakan PHP dan mySQL

pertama buatlah database dengan nama db_hardware di xampp localhost

dan nama table tb_hardware

buatlah file dengan nama koneksi.php

Coding ini berguna untuk pengaturan database

<?php

$server="localhost";

$username="root";

$pwd="";

$db="db_hardware";

mysql_connect($server,$username,$pwd) or die("Gagal mengakses Database");

mysql_select_db($db) or die ("database tidak ada");

Lalu untuk membuat tampilan web buatlah file dengan nama index.php

<?php

include("koneksi.php");

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

<div id="header"> <h1>Belajar Web Desain</h1>

</div>

<marquee><h2>Belajar HTML dan PHP Bersama Adiya SMKN 4 Banjarmasin</h2></marquee>

</div>

<ul>

<li><a href="index.php?menu=hardware">hardware</a></li>

</ul>

</div>

<?php include("menu.php");?>

</div>

</div>

</div>

<h2>Copyright &copy created By Adiya Rachman</h2>

</div>

</div>

</body>

</html>

Dan untuk mempercantik tampilan web buatlah file dengan nama style.css

@charset "utf-8";

/* CSS Document */

body{

background-image:url(gambar/background.jpg);

}

h1{

margin:0;

text-align:center;

font-family:Arial, Helvetica, sans-serif;

font-style:oblique;

font-size:66px;

}

#menu h1{

margin:0px;

text-align:center;

font-family:Arial, Helvetica, sans-serif;

font-style:oblique;

}

h2{

margin:0;

text-align:center;

}

#wrapper{

border:#CC6600 solid 10px;

border-radius:10px;

width: 960px;

margin: 0 auto;

}

#header{

background:url(gambar/header.jpg);

height:150px;

}

#menu{

background:#FF9900;

padding:1px;

}

#main{

overflow:hidden;

background:green;

}

#kiri{

float: left;

min-height:400px;

width:200px;

}

#kanan{

border-left:1px solid #CCCCCC;

float:right;

min-height:400px;

width:750px;

}

#halat{

background:#CCCCCC;

height:40px;

}

#footer{

clear:both;

padding: 20px;

background:#FF3300

}#kiri ul{

margin:1px;

padding:0;

list-style:none;

}

#kiri ul li{

display:block;

margin:15px;

}

#kiri a{

display:block;

background:#ff9900;

text-decoration:none;

color:#CC0000;

padding: 3px 15px;

border:1px solid #006699;

border-radius:10px;

}

#kiri a:hover{

background-color:#ff8400;

}

Dan ini adalah gambar untuk tampilan Web nya

Lalu ini tampilan coding untuk form siswa

Buatlah file dengan nama hardware.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

<p><a href="index.php?menu=tambah_hardware">Tambah hardware</a></p>

<p>Cari Berdasarkan:

<option value="id_hardware">ID hardware</option>

<option value="nama_hardware">Nama hardware</option>

</select>

</p>

</form>

<td width="82">ID hardware</td>

<td width="293">Nama hardware</td>

</tr>

<?php

@$cmbCari=$_POST['cmbCari'];

@$txtCari=$_POST['txtCari'];

if(!empty($txtCari)){

$query=mysql_query("select * from tb_hardware where $cmbCari like '%$txtCari%'");

}else{

$query=mysql_query("select * from tb_hardware");

}

while($data=mysql_fetch_array($query)){

<td width="89"><a href="index.php?menu=hapus_hardware&id=<?php echo $data['id_hardware']?>">Delete</a></td>

</tr>

<?php }?>

</table>

</body>

</html>

Dan ini contoh coding untuk menghubungkan dari form ke form

Buatlah file dengan menu .php

<?php

@$menu=$_GET['menu'];

if($menu=='home'){

include('home.php');

}elseif($menu=='hardware'){

include('hardware.php');

}elseif($menu=='tambah_hardware'){

include('tambah_hardware.php');

}elseif($menu=='insert_hardware'){

include('insert_hardware.php');

}elseif($menu=='hapus_hardware'){

include('hapus_hardware.php');

}elseif($menu=='ubah_hardware'){

include('ubah_hardware.php');

}elseif($menu=='update_hardware'){

include('update_hardware.php');

}else{

include('home.php');

}

Dan ini adalah gambar tampilan untuk form hardware

Coding untuk menjalankan link Tambah Hardware

Buatlah file dengan nama tambah_hardware.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="post" action="index.php?menu=insert_hardware">
<table width="706" border="0">
<tr>
<td colspan="3"><h1>Tambah hardware</h1></td>
</tr>
<tr>
<td width="100">Id hardware</td>
<td width="7">:</td>
<td width="577"><input name="id_hardware" type="text" id="id_hardware" size="90" /></td>
</tr>
<tr>
<td width="100">Nama hardware</td>
<td width="7">:</td>
<td width="577"><input name="nama_hardware" type="text" id="nama_hardware" size="90" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="button" id="button" value="Simpan" /></td>
</tr>
</table>
</form>
</body>
</html>

Dan inilah coding untuk insert data atau menambah data

Buatlah file dengan insert_hardware.php

<?php
$query=mysql_query("insert into tb_hardware values ('$_POST[id_hardware]', '$_POST[nama_hardware]')");
if($query){
echo "<script>
alert(\"Data Berhasil Ditambah\")
document.location=\"index.php?menu=hardware\"
</script>";
}else{
echo "<script>
alert(\"Data Berhasil Ditambah\")
document.location=\"index.php?menu=hardware\"
</script>";
}
?>

jika diklik tambah data maka akan tampil form seperti ini

Dan inilah tampilan jika tombol edit diklik

Dan inilah coding untuk update data atau mengubah data

Buatlah file dengan ubah_hardware.php

<?php
$query=mysql_query("select * from tb_hardware where id_hardware='$_GET[id]'");
while($data=mysql_fetch_array($query)){
?>
<form id="form1" name="form1" method="post" action="index.php?menu=update_hardware&id=<?php echo $data['id_hardware']?>">
<table width="716" border="0">
<tr>
<td colspan="3"><h1>Ubah hardware</h1></td>
</tr>
<tr>
<td width="151">Id hardware</td>
<td width="3">:</td>
<td width="540"><input name="id_hardware" type="text" id="id_hardware" size="90" value="<?php echo $data['id_hardware']?>"/></td>
</tr>
<tr>
<td width="151">Nama hardware</td>
<td width="3">:</td>
<td width="540"><input name="nama_hardware" type="text" id="nama_hardware" size="90" value="<?php echo $data['nama_hardware']?>"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="button" id="button" value="Simpan" /></td>
</tr>
</table>
<?php }?>
</form>

Dan inilah coding untuk update data atau menambah data

Buatlah file dengan update_hardware.php

<?php
$query=mysql_query("update tb_hardware set nama_hardware='$_POST[nama_hardware]' where id_hardware='$_GET[id]'");
if($query){
echo "<script>
alert(\"Data Berhasil DiUbah\")
document.location=\"index.php?menu=hardware\"
</script>";
}else{
echo "<script>
alert(\"Data Gagal DiUbah\")
document.location=\"index.php?menu=hardware\"
</script>";

}
?>

Dan inilah coding untuk delet data atau menghapus data

Buatlah file dengan hapus_hadware.php

<?php
$query=mysql_query("delete from tb_hardware where id_hardware='$_GET[id]'");

if($query){
echo "<script>
alert(\"Data Berhasil DiHapus\")
document.location=\"index.php?menu=hardware\"
</script>";
}else{
echo "<script>
alert(\"Data Gagal DiHapus\")
document.location=\"index.php?menu=hardware\"
</script>";

}
?>

Kali Ini Gue pengen berbagi pengetahuan gue dgn kalian tentang pelajaran web design
yang telah kami pelajari di smkn4 banjarmasin

Langsung saja

Pertama Folder xampp atau mysql simpan di htdocs buat folder baru....
Beri aja nama filenya
index.php ini adalah inti dari semuanya jadi lo jalanin ini duluan
isi dari index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header"> <h1>Belajar Web Desain</h1>
</div>
<div id="menu">
<marquee><h2>Belajar HTML dan PHP Bersama Adiya SMKN 4 Banjarmasin</h2></marquee>
</div>
<div id="main">
<div id="kiri">
<ul>
<li><a href="index.php?menu=home">Home</a></li>
<li><a href="index.php?menu=html">HTML</a></li>
<li><a href="index.php?menu=css">CSS</a></li>
<li><a href="index.php?menu=jsp">Java Script</a></li>
<li><a href="index.php?menu=abm">About ME</a></li>
</ul>
</div>
<div id="kanan">
<?php include("menu.php");?>
</div>
</div>
<div id="halat">
</div>
<div id="footer">
<h2>Copyright &copy created By Adiya Rachman</h2>
</div>
</div>
</body>
</html>

ini cssnya
save dlu gambar background sama headernya disini
buat dlu folder baru dengan nama gambar
Ini background lo kasih nama aja background.jpg

Ini header lo kasih nama aja header.jpg

simpan dengan style.css, sama seperti nama style diatas, gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
@charset "utf-8";
/* CSS Document */
body{
background-image:url(gambar/background.jpg);
}
h1{
margin:0;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-style:oblique;
font-size:66px;
}
#menu h1{
margin:0px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-style:oblique;
}
h2{
margin:0;
text-align:center;
}
#wrapper{
border:#CC6600 solid 10px;
border-radius:10px;
width: 960px;
margin: 0 auto;
}

#header{
background:url(gambar/header.jpg);
height:150px;
}

#menu{
background:#FF9900;
padding:1px;

}

#main{
overflow:hidden;
background:#FFFFFF;
}

#kiri{
float: left;
min-height:400px;
width:200px;
}
#kanan{
border-left:1px solid #CCCCCC;
float:right;
min-height:400px;
width:750px;
}
#halat{
background:#CCCCCC;
height:40px;
}
#footer{
clear:both;
padding: 20px;
background:#FF3300
}#kiri ul{
margin:1px;
padding:0;
list-style:none;
}
#kiri ul li{
display:block;
margin:15px;
}
#kiri a{
display:block;
background:#ff9900;
text-decoration:none;
color:#CC0000;
padding: 3px 15px;
border:1px solid #006699;
border-radius:10px;
}
#kiri a:hover{
background-color:#ff8400;
}

menu.php
<?php
@$menu=$_GET['menu'];

if($menu=='home'){
include('home.php');
}elseif($menu=='html'){
include('html.php');
}elseif($menu=='css'){
include('css.php');
}elseif($menu=='jsp'){
include('jsp.php');
}elseif($menu=='abm'){
include('abm.php');
}
else{
include('home.php');
}
?>

Kalo Sampai Sini LINK Yg ada di INDEX nggak bkal Jalan karena file terpisah
buat aja nama filenya
home.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<h2>Ini Adalah Halaman Home</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam home.php</h2>
</body>
</html>

html.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<h2>Ini Adalah Halaman HTML</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam html.php</h2>
</body>
</html>

css.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<h2>Ini Adalah Halaman CSS</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam css.php</h2>
</body>
</html>

jsp.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<h2>Ini Adalah Halaman JavaScript</h2>
<h2>Anda Dapat Mengisi Apa saja yg Ada Di dalam jsp.php</h2>
</body>
</html>

Dan Ini yg terakhir tpi terserah lo mau lu ikutin apa nggak...
klo ngga lo ikutin, lo harus hapus link about me diatas.. karna ngga bkal guna

abm.php
gw nyaranin agar namanya lo samain aja, kecuali lo udah pham baru deh edit...
ini isinya...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tugas Table</title>
</head>
<body>
<font>
<table border = '0' align = "center">
<tr>
<td rowspan = "2" width='570' height = '550' valign = 'top' align = "justify">
<h2>Adiya's Profile</h2>
<pre>
Nama : <b>Adiya</b><br>
NIM : 3132<br>
Jurusan : Rekayasa Perangkat Lunak<br>
Tempat Tanggal Lahir : Banjarmasin, 17 juli 1995<br>
Alamat : Jl. Semangat Dalam Handil Bakti<br>
Kecamatan Alalak<br>
Kotamadya Barito Kuala<br>
</pre>
Riwayat Pendidikan :<ol type ="A">
<li>SDN Pekapuran)</li>
<li>SMPN 2 Alalak</li>
<li>SMK Negeri 4 Banjarmasin (2011-Sekarang)</li>
</ol>
<pre>
Email : adiyatkd@gmail.com<br>
Homepage : <b>adiyatkd.blogspot.com</b><br>
Biografi : <br>
Seorang Lelaki yg tumbuh dan besar di sebuah Kota di kalimantan Selatan. Lelaki
Yg Mempunyai Motivasi tinggi dalam Meraih Mimpinya dan diantara sekian banyak Mimpinya
adalah menjadi seorang pendidik agar bisa menjadi sumber manfaat bagi orang-orang
disekitarnya. ada yg mengatakan dia unik, namun ada juga yg mengatakan dia aneh. Tapi,
terlepas dari itu semua, dari semua kebebasan orang untuk menilai dirinya, di bangga
dan bersyukur menjadi dirinya, <b>Adiya</b>
</pre>
</td>

<td width="150" align = "center" valign = "center" height="150">
<img src="gitar.jpg" height="100" width="100"/>
</td>
</tr>

<tr>
<td>
</td>
</tr>
</table>
</font>
</body>
</html>

Web Desain

Jumat, 20 Desember 2013

Contoh Form dan Cara Penanganan Form dengan PHP dan mySQL

Jumat, 01 November 2013

Belajar Web Design