Pada
kesempatan kali ini saya akan berbagi tutorial Cara Membuat Website
Data Karyawan dengan PHP. Website Data Karyawan ini dapat menginput nama
karyawan dan juga menampilkan daftar nama karyawan
Berikut langkah-langkah membuat website data karyawan dengan PHP : 1. Buka xampp, Kemudian klik Start pada Apache dan Mysql
2. Buatlah Folder di C:/xampp/htdocs Misalkan disini saya membuat folder xtkj2_35_yulian_adi_prastyo
3. Buka Dreamweaver atau Notepad, lalu Ketikan kode dibawah ini
<!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>Welcome to Website PT. Suka
Makmur</strong></h1> <img src=”images/logo.png”
class=”lightbox” /></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>
Simpan file tersebut dengan nama “index.php” pada folder yang telah
dibuat sebelumnya 5. Buatlah folder “images” di
C:/xampp/htdocs/xtkj2_35_yulian_adi_prastyo kemudian copy kan file
bernama “background.jpg, gambar1.jpg, logo.png” class=”lightbox” yang
telah disiapkan sebelumnya
6. Buatlah file untuk digunakan sebagai header dengan mengetikan kode dibawah ini
<!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>
<img src=”images/gambar1.jpg” class=”lightbox” /> </body>
</html>
Save file tersebut di folder yang sudah dibuat dengan nama
“header_atas.php” 8. Buatlah file untuk footer website dengan mengetikan
kode dibawah ini
<!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>
copyright@2014 Yulian Adi Prastyo </body> </html>
Save file tersebut di folder yang sudah dibuat dengan
nama”footer_bawah.php” 9. Buatlah file untuk side kiri dengan mengetikan
kode dibawah ini
<!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>
save file tersebut di folder yang telah dibuat dengan nama
“sidebar_kiri.php” 10. Buatlah file untuk side kanan, dengan mengetikan
kode dibawah ini
<!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>
save file tersebut di folder yang telah dibuat dengan nama
“sidebar_kanan.php” 11. Setelah 5 file tersebut dibuat maka akan muncul
website seperti ini
12. Buatlah file yang akan digunakan untuk menginput data dengan mengetikan kode dibawah ini
<!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”>
<label><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>
Save file tersebut di folder yang telah dibuat dengan nama “tulis_nama.php” maka pada website akan muncul seperti ini
13. Buatlah file untuk memproses data yang di input dengan mengetikan kode dibawah ini
<!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> <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=’xtkj2_35′;
$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>
save file tersebuat di folder yang telah dibuat dengan nama”proses.php” maka pada website akan muncul seperti ini
14. Buatlah database di localhost/phpmyadmin dengan nama “xtkj2_35″
15. Buatlah table di dalam database. table tersebut berisi 7 kolom
Setelah itu isikan kolom seperti dibawah ini
setelah itu inputkan data dan di database akan muncul seperti ini
16. Buatlah file untuk menampilkan data karyawan dengan mengetika kode dibawah ini
<!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″ />
<style type=”text/css”> <!– body { background-image:
url(images/background.jpg); } –> </style></head>
<body> <table width=”744″ border=”1″ align=”center”>
<tr> <td width=”150″ rowspan=”3″><?php include
(‘sidebar_kiri.php’); ?> </td> <td height=”200″
colspan=”2″><?php include (‘header_atas.php’); ?> </td>
</tr> <tr> <td width=”500″> <?php
$server=’localhost’; $user=’root’; $password=”; $database=’xtkj2_35′;
$koneksi=mysql_connect($server, $user, $password);
mysql_select_db($database, $koneksi); $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 “<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″><?php
include (‘sidebar_kanan.php’); ?> </td> </tr> <tr>
<td colspan=”2″><?php include (‘footer_bawah.php’); ?>
</td> </tr> </table> </body> </html>
save file tersebut di folder yang telah dibuat dengan nama”data_karyawan.php” maka akan tampil seperti ini
17. Buatlah file yang berisi profil perusahaan, dengan mengetikan kode dibawah ini
<!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> <img
src=”../xtkj2_35_yulian_adi_prastyo/images/logo.png” class=”lightbox”
/> PT. SUKA MAKMUR merupakan perusahaan yang didirikan tahun 2003 di
kota Banjarnegara PT. Suka Makmur memiliki beberapa karyawan </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>
save file tersebuat di folder yang sudah dibuat dengan nama”profil.php” maka akan muncul seperti ini
18. Website telah siap digunakan Sekian dan Terima Kasih………
