Total Pageviews

Home » » Tutorial Web Desain cara membuat Website Data Karyawan dengan menggunakan PHP..

Tutorial Web Desain cara membuat Website Data Karyawan dengan menggunakan PHP..

Posted by Berbagi Ilmu Pengetahuan, Teknologi dan Hiburan on Thursday, December 18, 2014

Kali ini saya akan share tutorial untuk membuat Website Data Karyawan  dengan menggunakan PHP..
 
1. Pertama Siapkan software yaitu : xampp,Dreamweaver(pakai notepad juga bisa)Instal xampp dan dreamwavernya, Jika sudah buatlah sebuah folder baru di localdisk C>xampp>htdocs>(disini). Huruf harus kecil semua tidak boleh menggunakan spasi tetapi menggunakan ( _ ) contoh : 10tkj2_08_denyhendrawansaputra dan buatlah foder lagi didalamnya bernamakan images. Didalam folder images terserah anda isi gambar apa saja yang berukuran 650 x 200, jika anda sudah mempunyai gambar tetapi ukurannya tidak pas bisa dirubah ukurannnya dengan menggunakan paint, photoshop, firework dll. Setelah itu file gambarnya dicopy ke C>xampp>htdocs>(..nama foldernya…)>images.


2. Lalu jalankan xamppnya klik tulisan start pada Apache dan MySql berikut gambarnya


 setelah itu buka dreamweaver/notepad dan buatlah 10 slide,
-slide pertama disave dengan nama index.php
-ke 2  form.php
-ke 3 proses.php
-ke 4 tampil.php
-ke 5 header
-ke 6 footer
-ke 7 side_kiri
-ke 8 side_kanan
-ke 9 profil.php

Setelah selesai di SAVE semua ke dalam folder yang telah kamu buat tadi di localdisk C>xampp>htdocs>(…nama foldernya…)>(disini)
Anda tidak harus urut seperti yang diatas.

3. Pertama buat lah kode pada slide index.php berikut kodenya :

<!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=iso-8859-1" />
<title>PT. Suka Makmur</title>
<style type="text/css">
<!--
body {
    background-image: url(images/background.jpg);
}
-->
</style></head>

<body>
<center>
<table width="800" border="1">
  <tr>
    <th width="150" rowspan="3"><?php include ('sidebar_kiri.php'); ?></th>
    <th height="200" colspan="2"><?php include ('header_atas.php'); ?></th>
  </tr>
  <tr>
    <td width="500">
      <h1><strong>Selamat Datang di Website PT. Suka Makmur</strong></h1>
      <img src="images/logo.png" /></td>
    <td width="150"><?php include ('sidebar_kanan.php'); ?></td>
  </tr>
  <tr>
    <td colspan="2"><?php include ('footer_bawah.php'); ?></td>
  </tr>
</table>
</center>
</body>
</html>
4. Lalu buat kode lagi pada slide form.php berikut kodenya :

<!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=iso-8859-1" />
<title>Tulis Nama</title>
<style type="text/css">
<!--
body {
    background-image: url(images/background.jpg);
}
-->
</style></head>

<body>
<center>
<table width="800" border="1">
  <tr>
    <th width="150" rowspan="3"><?php include ('sidebar_kiri.php'); ?></th>
    <th height="200" colspan="2"><?php include ('header_atas.php'); ?></th>
  </tr>
  <tr>
    <td width="500"><form id="form1" name="form1" method="post" action="proses.php">
    
      <br />
      <br />
      no_induk_karyawan
        <input name="no_induk_karyawan" type="text" id="no_induk_karyawan" />
        </label>
      <p>
        <label>nama_lengkap
        <input name="nama_lengkap" type="text" id="nama_lengkap" />
        </label>
      </p>
      <p>
        <label>umur
        <input name="umur" type="text" id="umur" />
        </label>
      </p>
      <p>
        <label>alamat
        <input name="alamat" type="text" id="alamat" />
        </label>
      </p>
      <p>
        <label>tahun_masuk
        <input name="tahun_masuk" type="text" id="tahun_masuk" />
        </label>
      </p>
      <p>
        <label>pendidikan_terakhir
        <input name="pendidikan_terakhir" type="text" id="pendidikan_terakhir" />
        </label>
      </p>
      <p>
        <label>
        <input name="kirim" type="submit" id="kirim" value="Submit" />
        </label>
      </p>
    </form>
    </td>
    <td width="150"><?php include ('sidebar_kanan.php'); ?></td>
  </tr>
  <tr>
    <td colspan="2"><?php include ('footer_bawah.php'); ?></td>
  </tr>
</table>
</center>
</body>
</html>

5. Lalu buat kode lagi pada slide proses.php berikut kodenya :

 <!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=iso-8859-1" />
<title>Untitled Document</title>
<body>
<center>
<table width="800" border="1">
  <tr>
    <th width="150" rowspan="3"><?php include ('sidebar_kiri.php'); ?></th>
    <th height="200" colspan="2"><?php include ('header_atas.php'); ?></th>
  </tr>
  <tr>
    <td width="500">
    <?php
    $server='localhost';
    $user='root';
    $password='';
    $database='10tkj2_8_deny';
    $koneksi=mysql_connect($server, $user, $password);
    mysql_select_db($database,$koneksi);
    $no_induk_karyawan=$_POST['no_induk_karyawan'];
    $nama_lengkap=$_POST['nama_lengkap'];
    $umur=$_POST['umur'];
    $alamat=$_POST['alamat'];
    $tahun_masuk=$_POST['tahun_masuk'];
    $pendidikan_terakhir=$_POST['pendidikan_terakhir'];
    echo $no_induk_karyawan;
    echo "<br>";
    echo $nama_lengkap;
    echo "<br>";
    echo $umur;
    echo "<br>";
    echo $alamat;
    echo "<br>";
    echo $tahun_masuk;
    echo "<br>";
    echo $pendidikan_terakhir;
    echo "<br>";
  
    $sql="INSERT INTO data_karyawan(no, no_induk_karyawan, nama_lengkap, umur, alamat, tahun_masuk, pendidikan_terakhir)
    values('', '$no_induk_karyawan', '$nama_lengkap', '$umur', '$alamat', '$tahun_masuk', '$pendidikan_terakhir')";
    mysql_query($sql);
    ?>
      </td>
    <td width="150"><?php include ('sidebar_kanan.php'); ?></td>
  </tr>
  <tr>
    <td colspan="2"><?php include ('footer_bawah.php'); ?></td>
  </tr>
</table>
</center>
</body>
</html>
6. Lalu buat kode lagi pada slide tampil.php berikut kodenya :

<!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=iso-8859-1" />
<body>
<table width="744" border="1" align="center">
  <tr>
    <td width="150" rowspan="3" background="GAMBAR/background.jpg"><?php include ('sidebar_kiri.php'); ?> </td>
    <td height="200" colspan="2"><?php include ('header_atas.php'); ?> </td>
  </tr>
  <tr>
    <td width="500" background="GAMBAR/background.jpg">


<?php
$server='localhost';
$user='root';
$password='';
$database='10tkj2_8_deny';

//koneksi data
$koneksi=mysql_connect($server, $user, $password);

//mengambil data dari database
mysql_select_db($database, $koneksi);

//mengambil data dari data_karyawan

$sql="SELECT * FROM data_karyawan";

$query=mysql_query($sql);

echo "<table border='1'>";
echo "<tr>";
echo "<td>no</td> <td>no_induk_karyawan</td> <td>nama_lengkap</td> <td>umur</td> <td>alamat</td> <td>tahun_masuk</td> <td>pendidikan_terakhir</td> ";
echo "</tr>";

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

$no=$tampil['no'];
$no_induk_karyawan=$tampil['no_induk_karyawan'];
$nama_lengkap=$tampil['nama_lengkap'];
$umur=$tampil['umur'];
$alamat=$tampil['alamat'];
$tahun_masuk=$tampil['tahun_masuk'];
$pendidikan_terakhir=$tampil['pendidikan_terakhir'];

//echo $tampil;

echo "<tr>";
echo "<td>$no</td> <td>$no_induk_karyawan</td> <td>$nama_lengkap</td> <td>$umur</td> <td>$alamat</td> <td>$tahun_masuk</td> <td>$pendidikan_terakhir</td>";
echo "</tr>";

}

echo "</table>";

?>
     </td>
    <td width="150" background="GAMBAR/background.jpg"><?php include ('sidebar_kanan.php'); ?> </td>
  </tr>
  <tr>
    <td colspan="2" background="GAMBAR/background.jpg"><?php include ('footer_bawah.php'); ?> </td>
  </tr>
</table>
</body>
</html>

7. Lalu buat kode lagi pada slide header.php berikut kodenya :

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
    background-image: url(images/background.jpg);
}
</style>
</head>

<body>
<img src="images/gambar1.jpg" />
</body>
</html>
8. Lalu buat kode lagi pada slide footer.php berikut kodenya :

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-image: url(background.jpg);
}
-->
</style></head>

<body>
copyright@2014 DENY HENDRAWAN SAPUTRA X TKJ 2
</body>

</html>
Yang (copyright@2014 DENY HENDRAWAN SAPUTRA X TKJ 2) bisa diganti namanya.

9. Lalu buat kode lagi pada slide side_kiri.php berikut kodenya :

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<center>
<table width="155" border="0">
  <tr>
    <th width="149" bgcolor="#FFFFFF" scope="col"><h2>Menu Link </h2></th>
  </tr>
  <tr>
    <th scope="row"></th>
  </tr>
  <tr>
    <th bgcolor="#FFFFFF" scope="row"><div align="left"><a href="index.php">Home</a></div></th>
  </tr>
  <tr>
    <th bgcolor="#FFFFFF" scope="row"><div align="left"><a href="tulis_nama.php">Tulis Nama</a></div></th>
  </tr>
  <tr>
    <th bgcolor="#FFFFFF" scope="row"><div align="left"><a href="data_karyawan.php">Data Karyawan</a></div></th>
  </tr>
</table>
</center>
</body>
</html>
10. Lalu buat kode lagi pada slide side_kanan.php berikut kodenya :

<!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=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<p><a href="profil.php">Profil Perusahaan</a></p>
</body>
</html>

11. Lalu buat kode lagi pada slide profil.php berikut kodenya :

<!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=iso-8859-1" />
<title>Profil Perusahaan</title>
<style type="text/css">
<!--
body {
    background-image: url(../xtkj2_35_yulian_adi_prastyo/images/background.jpg);
}
-->
</style></head>

<body>
<center>
<table width="800"  border="1">
  <tr>
    <th width="150" rowspan="3" scope="col"><?php include ('sidebar_kiri.php'); ?></th>
    <th height="200" colspan="2" scope="col"><?php include ('header_atas.php'); ?></th>
  </tr>
  <tr>
    <td width="500">
      <h3 align="center"><strong>PROFIL PT. SUKA MAKMUR      </strong></h3>
     
      PT. SUKA MAKMUR merupakan perusahaan yang didirikan tahun 2003
      di kota Banjarnegara
      PT. Suka Makmur memiliki beberapa karyawan, dan sudah membuka cabang dimana - mana.
      </td>
    <td width="125"><?php include ('sidebar_kanan.php') ?></td>
  </tr>
  <tr>
    <td colspan="2"><?php include ('footer_bawah.php'); ?></td>
  </tr>
</table>
</center>
</body>
</html>
  Jika sudah selesai diSAVE semuanya.

12. Setelah selesai pada dreamweaver atau notepad nya sekarang membuat database nya caranya buka Mozilla firefox tuliskan alamat localhost/phpmyadmin.Lalu buat databasenya, klik tulisan database dan berinama misalnya 10tkj2_8_deny berikut gambarnya dan lihat tanda panah berwarna hitam


13. Setelah itu buat tabel pada database yang telah kamu buat tadi klik dulu databasenya
Setelah diklik databasenya akan muncul kotak pembuatan tabelnya berikut gambarnya
Setelah itu klik GO.


 14. Setelah itu kita buat tablenya berikut gambarnya


Setelah itu geser kekanan pada A_I di centang dan pada index diganti PRIMARY berikut gambarnya


Setelah itu geser kebawah dan klik SAVE.dan tabelnya sudah jadi

15. Setelah jadi semua buka di Mozilla forefox dengan alamat
localhost/data_karyawan (NAMA FOLDER YANG ADA DI htdocs)  dan berikut hasilnya
#ini adalah hasil dari index.php



 #ini adalah hasil dari profil.php jika ingin keluar seperti ini klik tulisan Profil Perusahaan


 #ini adalah hasil dari form.php jika ingin keluar seperti ini klik tulisan Tulis Data Karyawan dan pada kotak yang masih kosong diisi lalu klik kirim

 
#ini hasil dari dari form yang sudah diisi diatas tadi jika ingin keluar seperti ini klik tulisan Tampil Data Karyawan berikut gambarnya


Sekian dulu tutorial dari saya kurang lebihnya mohon maaf jika ada kesalahan kata dan cara yang kurang lengkap…………

Thanks for reading & sharing Berbagi Ilmu Pengetahuan, Teknologi dan Hiburan

Previous
« Prev Post
Next
Next Post »

1 comments:

  1. Mobile App Development DelhiDecember 30, 2014 at 1:09 PM

    This is the precise weblog for anybody who needs to seek information about this topic. Nice stuff, simply nice!

    ReplyDelete

Popular Posts

Translate