RSS
Facebook
Twitter

Selasa, 28 Januari 2014

TUTORIAL MEMBUAT DATA KARYAWAN MENGGUNAKAN DREAMWEAVER

Posted by Unknown on 18.31 with 2 comments
    Membuat Data Karyawan Dengan Dreamweaver
    Disini saya akan memberikan sedikit gambaran rentang bagaimana caranya membuat tugas pemrograman web, yaitu membuat data karyawan sebuah perusahaan, dengan cara mengisi data dan kemudian dikirim, maka akan muncul hasil yang sama, program ini menngunakan Dreamweaver 8. Berikut langkah - langkahnya :

1. Buatlah kerangka tabel untuk memasukkan data-data yang diinginkan, langakah pertama saya membut index, berikut adalah code nya :
<!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-color: #FFFFFF;
}
-->
</style>
<style type="text/css">
<!--
.style1 {
    font-family: "Comic Sans MS";
    color: #00FF00;
}
.style2 {color: #FF0000}
-->
</style>
</head>

<body>
<div align="center">
  <table width="916" border="1">
    <tr>
      <td colspan="3"><?php include ('header.php'); ?></td>
    </tr>
    <tr>
      <td width="193" bgcolor="#FFFFFF"><?php include ('side_kiri.php'); ?></td>
      <td width="439" align="center" bgcolor="#000000">
      <h2>
        <p class="style1">SILAHKAN ISI DATA YANG ADA DI MENU <span class="style2">INPUT DATA</span></p>
      </h2></td>
      <td width="213" bgcolor="#FFFFFF"><?php include ('side_kanan.php'); ?></td>
    </tr>
    <tr>
      <td height="22" colspan="3" bgcolor="#999999"><?php include ('footer.php'); ?></td>
    </tr>
  </table>
</div>
</body>
</html>
Ini hasil di dreamweaver :



Ini hasilnya di firefox :


2. Buatlah gambar untuk dimasukkan kedalam tabel paling atas sebagai header, berikut adalah 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>
<div align="center"><img src="-o0.jpeg" width="877" height="199" /></div>
</body>
</html>
Ini hasil di dreamweaver :



3. Buatlah tulisan untuk dimasukkan kedalam tabel paling bawah sebagai footer, berikut adalah 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-color: #000000;
}
.style2 {
    font-family: Rockwell;
    color: #0000FF;
    font-weight: bold;
}
.style3 {font-family: "Comic Sans MS"}
-->
</style></head>

<body>
<div align="center" class="style2">
  <h2>
    <marquee>
    </marquee>
  </h2>
  <marquee>
  <h2 class="style3">Copyright&copy; Dhanang Firdiyanto </h2>
  </marquee>
</div>
</body>
</html>
Ini hasil di dreamweaver :



4. Kemudian buatlah isi yang dimasukkan ke dalam bagian kanan atau side kanan, yang berisi tulisan yang sudah di link kedalam profil perusahaan, berikut adalah 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">
<!--
.style6 {font-family: "Times New Roman", Times, serif; color: #000000; font-weight: bold; }
-->
</style>
</head>

<body>
<p align="center" class="style6"><a href="profil.php">Profil Perusahaan </a></p>
</body>
</html>
Ini hasilnya di dreamweaver :



Dan ini profil perusahaanya dalam bentuk kode di dreamweaver :
<!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-color: #FFFFFF;
}
-->
</style>
<style type="text/css">
<!--
.style1 {
    font-family: "Comic Sans MS";
    color: #00FF00;
}
.style2 {color: #FF0000}
.style6 {font-family: "Times New Roman", Times, serif; color: #000000; font-weight: bold; }
-->
</style>
</head>

<body>
<div align="center">
  <table width="916" border="1">
    <tr>
      <td colspan="3"><?php include ('header.php'); ?></td>
    </tr>
    <tr>
      <td width="193" bgcolor="#FFFFFF"><?php include ('side_kiri.php'); ?></td>
      <td width="439" align="center" bgcolor="#FFFFFF">
      <h2><img src="logo.png" width="222" height="88" /> </h2>
      <p align="left" class="style6">PT. Suka Makmur adalah perusahaan yang berdiri tahun 1998, pendirinya adalah Haryo Mogo seorang wirausahawan dari Jawa Tengah.</p>
      <p align="left" class="style6">Perusahaan ini berpusat di daerah  Bandung, Jabar dan cabangnya telah menyebar dibeberapa pulau besar di Indonesia</p>
      <h2>
      <p>          </h2></td>
      <td width="213" bgcolor="#FFFFFF"><?php include ('side_kanan.php'); ?></td>
    </tr>
    <tr>
      <td height="22" colspan="3" bgcolor="#999999"><?php include ('footer.php'); ?></td>
    </tr>
  </table>
</div>
</body>
</html>
Ini hasilnya di dreamweaver :


Dan ini hasilnya di firefox :



5. Tak lupa juga buatlah tulisan yang dimasukkan ke dalam bagian kiri atau side kiri, yang berisi beberapa tulisan yang sudah di link kedalam menunya masing-masing. Misalnya menu Home di link ke index, menu tampil di link ke menu tampil yang berfungsi menampilkan data yang pernah dimasukkan, menu input data di link ke menu form yang berfungsi untuk memunculkan data yang harus diisi, berikut adalah 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">
<!--
.style1 {
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
}
body {
    background-color: #FFFFFF;
}
.style2 {font-size: 24px}
body,td,th {
    color: #000000;
}
.style4 {font-family: Rockwell}
-->
</style>
</head>

<body>
<h2 align="center" class="style4">Menu Link : </h2>
<table width="200" height="105" border="0" align="center">
  <tr bgcolor="#000000">
    <td bgcolor="#FFFFFF"><div align="center" class="style1"><a href="form.php" class="style2">INPUT DATA</a></div></td>
  </tr>
  <tr bgcolor="#000000">
    <td bgcolor="#FFFFFF"><div align="center" class="style1"><a href="tampil.php" class="style2">TAMPIL</a></div></td>
  </tr>
   <tr bgcolor="#000000">
    <td bgcolor="#FFFFFF"><div align="center" class="style1"><a href="index.php" class="style2">HOME</a></div></td>
  </tr>
</table>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
</body>
</html>
Ini hasilnya di dreamweaver :


Ini hasil dari menu tampil di dalam firefox :




6. Buatlah isian untuk diisi yang diberi nama form, dan form tersebuk berhubungan dengan proses yang dijalankan, berikut adalah 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-color: #FFFFFF;
}
-->
</style>
<style type="text/css">
<!--
.style1 {
    font-family: "Comic Sans MS";
    color: #00FF00;
}
-->
</style>
</head>

<body>
<div align="center">
  <table width="800" border="1">
    <tr>
      <td colspan="3"><?php include ('header.php'); ?></td>
    </tr>
    <tr>
      <td width="200" bgcolor="#3333FF"><?php include ('side_kiri.php'); ?></td>
      <td width="450" align="center" bgcolor="#FFFFFF">
        <form id="form1" name="form1" method="post" action="proses.php">
          <label>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>Kirim
            <input name="kirim" type="submit" id="kirim" value="kirim" />
            </label>
          </p>
        </form>
      <td width="150" bgcolor="#3333FF"><?php include ('side_kanan.php'); ?></td>
    </tr>
    <tr>
      <td colspan="3" bgcolor="#999999"><?php include ('footer.php'); ?></td>
    </tr>
  </table>
</div>
</body>
</html>
Dan ini hasilnya di dreamweaver :


Ini hasil di firefox :



7. Dan ini adalah bagian yang paling penting, yaitu proses, disini data form tadi akan diatur sehingga hasilnya sesuai dengan data yang dimasukkan, berikut adalah 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>
<div align="center">
  <table width="800" border="1">
    <tr>
      <td colspan="3"><?php include ('header.php'); ?></td>
    </tr>
    <tr>
      <td width="200" bgcolor="#3333FF"><?php include ('side_kiri.php'); ?></td>
      <td width="450" align="center" bgcolor="#FFFFFF">
      <p>TERIMA KASIH</p>
    <p>
     <?php
$server='localhost';
$user='root';
$password='';
$database='tagihan';

$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 $nama_lengkap;
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);

?> </p>
      <p>SELAMAT DATANG DI WEBSITE SAYA </p></td>
      <td width="150" bgcolor="#3333FF"><?php include ('side_kanan.php'); ?></td>
    </tr>
    <tr>
      <td colspan="3" bgcolor="#666666"><?php include ('footer.php'); ?></td>
    </tr>
  </table>
</div>   

</body>
</html>
Dan ini hasilnya di dreamweaver :



Untuk menampilkan hasil di firefox, anda harus memiliki xampp, dengan cara mengaktifkannya, ini gambarnya :






Categories:

2 komentar:

Langganan: Posting Komentar (Atom)

  • Blogger news

  • Blogroll

  • About