Monday, February 10, 2020
JOBSHEET PEMROGRAMAN WEB
A. MENYIAPKAN APLIKASI PENDUKUNG
1.
start
servis apache dam mysql pada XAMPP
Pastikan apache dan Mysql dalam keadaan start, dengan
membuka xampp-control
2.
siapkan
supplime text editor (visual studio code)
3.
siapkan
file bahan/ template back end
4.
membuat
struktur folder
siapkan
struktur folder yang ada di xamppàhtdocà(folder_masing-masing)
5.
simpan
text editor kedalam folder yang telah dibuat
B. KODING
1.
membuat
database
2.
membuat
koneksi.php
3.
membuat
style.css
Simpan
dengan nama style.css di folder css
4.
membuat
halaman index.php
buat
stuktur dasar Bahasa html
hubungkan
style.css dengan halaman index.php
Buat halaman
index.php
Tampilan
index.php
5.
membuat
halaman barang.php
a. membuat css untuk table
letakkan
di tag head <head>
b. menampilkan table barang
6.
buat
halaman home.php
Simpan
di dalam folder barang
7.
hubungkan
dengan halaman index
8.
membuat
halaman tambah_barang.php
<body>
<form id="form1" name="form1" method="post" action="">
<h2><u>Input Data Barang </u></h2>
<br />
<?
include "../koneksi.php";
?>
<?
if(!empty($_POST['submit']))
{
$id_barang=$_POST['id_barang'];
$kode_barang=$_POST['kode_barang'];
$nama_barang=$_POST['nama_barang'];
$jenis_barang=$_POST['jenis_barang'];
$satuan=$_POST['satuan'];
$stok=$_POST['stok'];
$submit="insert into barang (id_barang, kode_barang, nama_barang, jenis_barang, satuan,stok) values ('$id_barang','$kode_barang', '$nama_barang', '$jenis_barang', '$satuan', '$stok' )";
$sql=mysql_query($submit) or die ("error".mysql_error());
}
?>
<table width="621" height="355" border="0">
<tr>
<td width="143">id barang </td>
<td width="8">:</td>
<td width="456">
<input name="id_barang" type="text"/></td>
</tr>
<tr>
<td>kode barang </td>
<td>:</td>
<td><input name="kode_barang" type="text" size="35" /></td>
</tr>
<tr>
<td>nama barang </td>
<td>:</td>
<td><input name="nama_barang" type="text" size="35" /></td>
</tr>
<tr>
<td>jenis barang </td>
<td>:</td>
<td><input name="jenis_barang" type="text" size="35" /></td>
</tr>
<tr>
<td>Satuan</td>
<td>:</td>
<td><input name="satuan" type="text" size="35" /></td>
</tr>
<tr>
<td>Stok</td>
<td>:</td>
<td><label>
<input name="stok" type="text" id="stok" size="5" />
</label></td>
</tr>
<tr>
<td colspan="3"><div align="center">
<input name="submit" type="submit" value="Input Data" />
<input type="reset" name="reset" value="Reset" />
</div></td>
</tr>
</table>
</form>
</body>
9.
pada
barang.php, hubungkan [tambah barang] dengan tambah_barang.php
<a href="tambah_barang.php">[Tambah barang]</a>
10. membuat halaman edit.php
11.
<body>
12.
<?
13.
include "../koneksi.php";
14.
$hasil=mysql_query("select * from barang where kode_barang=\"".$_REQUEST["kode_barang"]."\"");
15.
16.
while($r=mysql_fetch_array($hasil)){
17.
?>
18.
<form action="edit_proses.php" method="POST">
19.
20.
21.
<table width="621" height="355" border="0">
22.
23.
24.
<tr>
25.
<td width="143">id barang </td>
26.
<td width="8">:</td>
27.
<td width="456">
28.
<input name="id_barang" type="text" value="<? echo"$r[id_barang]";?>"/></td>
29.
</tr>
30.
<tr>
31.
<td>kode barang </td>
32.
<td>:</td>
33.
<td><input name="kode_barang" type="text" size="15" value="<? echo"$r[kode_barang]";?>"/></td>
34.
</tr>
35.
<tr>
36.
<td>nama barang </td>
37.
<td>:</td>
38.
<td><input name="nama_barang" type="text" size="35" value="<? echo"$r[nama_barang]";?>"/></td>
39.
</tr>
40.
<tr>
41.
<td>jenis barang </td>
42.
<td>:</td>
43.
<td><input name="jenis_barang" type="text" size="20" value="<? echo"$r[jenis_barang]";?>"/></td>
44.
</tr>
45.
<tr>
46.
<td>Satuan</td>
47.
<td>:</td>
48.
<td><input name="satuan" type="text" size="20" value="<? echo"$r[satuan]";?>"/></td>
49.
</tr>
50.
<tr>
51.
<td>Stok</td>
52.
<td>:</td>
53.
<td><label>
54.
<input name="stok" type="text" id="stok" size="5" value="<? echo"$r[stok]";?>" />
55.
</label></td>
56.
</tr>
57.
58.
<tr>
59.
<td colspan="3"><div align="center">
60.
<input name="ubah" type="submit" id="ubah" value="ubah" />
61.
<input type="reset" name="reset" value="Reset" />
62.
</div></td>
63.
</tr>
64.
</table>
65.
</form>
66.
<? } ?>
67.
</body>
Menampilkan data barang berdasarkan kode barang
11. membuat halaman edit_proses.php
12. <?
13. include "../koneksi.php";
14.
15. if(!empty($_POST['ubah']))
16. {
17. $id_barang=$_POST['id_barang'];
18. $kode_barang=$_POST['kode_barang'];
19. $nama_barang=$_POST['nama_barang'];
20. $jenis_barang=$_POST['jenis_barang'];
21. $satuan=$_POST['satuan'];
22. $stok=$_POST['stok'];
23.
24.
25. $SIMPAN="update barang SET id_barang='$id_barang', nama_barang='$nama_barang', jenis_barang='$jenis_barang', satuan='$satuan', stok='$stok' where kode_barang='$kode_barang'";
26. $sql=mysql_query($SIMPAN) or die ("error".mysql_error());
27. if($sql){
28. echo"data berhasil diedit....";
29. }else{
30. echo"data gagal diedit";
31. }
32. }
33. ?>
Karena kondisi (where berdasarkan kode_barang
maka untuk edit tidak bisa mengedit kode barang)
12. Hubungkan file edit.php dengan file
barang.php
<td><a href='edit.php?kode_barang=<? echo "$r[kode_barang]" ;?>' >edit </a></td>
13. membuat halaman hapus.php
<?php
include "../koneksi.php";
$kode_barang=$_GET['kode_barang'];
mysql_query("delete from barang where kode_barang='$kode_barang'")or die (mysql_error());
header("location:barang.php?pesan=hapus");
?>
14. membuat halaman detail.php
<html>
<head>
<title>
</title>
<style>
table {
border-collapse: collapse;
width: 30%;
}
th, td {
padding: 8px;
text-align:left;
border-bottom:1px solid #ddd;
}
td {
padding: 8px;
text-align:left;
border-bottom:1px solid #ddd;
}
tr:hover{
background-color:#f5f5f5;
}
</style>
</head>
<body>
<?
include "../koneksi.php";
$hasil=mysql_query("select * from barang where kode_barang=\"".$_REQUEST["kode_barang"]."\"");
while($r=mysql_fetch_array($hasil)){
?>
<table >
<tr>
<th colspan=3> DETAIL BARANG </th>
</tr>
<tr>
<th> id barang </th>
<th> :</th>
<td><? echo"$r[id_barang]";?> </td>
</tr>
<tr>
<th> kode barang </th>
<th> :</th>
<td><? echo"$r[kode_barang]";?> </td>
</tr>
<tr>
<th> nama barang </th>
<th> :</th>
<td><? echo"$r[nama_barang]";?> </td>
</tr>
<tr>
<th> jenis barang</th>
<th> :</th>
<td><? echo"$r[jenis_barang]";?></td>
</tr>
<tr>
<th> satuan </th>
<th> :</th>
<td><? echo"$r[satuan]";?> </td>
</tr>
<tr>
<th> Stok </th>
<th> :</th>
<td><? echo"$r[stok]";?> </td>
</tr>
</table>
</body>
<? }?>
</html>
15. Hubungkan detail.php dengan
barang.php
<td><a href='detail.php?kode_barang=<? echo "$r[kode_barang]" ;?>' >edit </a></td>
16. membuat halaman laporan.php
<html>
<head>
<title>
</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 70%;
}
th, td {
text-align: center;
padding: 8px;
}
tr:nth-child(even){background-color:#f2f2f2}
th {
background-color: #4CAF50;
color: white;
}
th1 {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan=6"> <h1> Laporan Barang</h1> </td>
</tr>
<tr>
<th>no</th>
<th>id_barang</th>
<th>kode_barang</th>
<th>nama_barang</th>
<th>jenis_barang</th>
<th>satuan</th>
<th>stok</th>
</tr>
<?
include "../koneksi.php";
$no=1;
$hasil=mysql_query("select * from barang order by kode_barang");
//$no=0;
while ($r=mysql_fetch_array($hasil))
{
?>
<tr>
<td><? echo $no;?></td>
<td><? echo"$r[id_barang]</br>";?></td>
<td><? echo"$r[kode_barang]</br>";?></td>
<td><? echo"$r[nama_barang]</br>";?></td>
<td><? echo"$r[jenis_barang]</br>";?></td>
<td><? echo"$r[satuan]</br>";?></td>
<td><? echo"$r[stok]</br>";?></td>
</tr>
<?
$no++;
}
?>
</table>
<script>
window.print();
</script>
</body>
</html>
17.
18. hubungkan laporan.php dengan
index.php
