Aplikasi Data Mahasiswa dengan PHP dan MySQL

Screenshot Aplikasi Data Mahasiswa [ lihat data ]

Selamat siang semua , dalam posting kali ini saya akan berbagi cara membuat Aplikasi berbasis WEB menggunakan bahasa pemrograman PHP dan MySQL. Aplikasi ini sangat sederhana, hanya membuat menu Tambah Data, Lihat Data, Edit data serta Hapus data.

Disini saya menggunakan Xampp sebagai paket server lokalnya.

Pertama yang kita butuhkan adalah Database, kita perlu sebuah database untuk menampung data yang kita inputkan melalui form yang akan kita buat nanti.
Masuk ke halaman phpmyadmin dengan url localhost/phpmyadmin Kemudian buat struktur databasenya kurang lebih seperti dibawah ini :

Struktur Database

Kedua, kita akan mulai untuk membuat file file php nya. Buat dulu folder baru di C:\Xampp\htdocs dengan namadata_mahasiswa ( tidak boleh menggunakan spasi ya , hanya boleh underscore "_" )
Buat file koneksinya dulu ya .. (file koneksi => untuk menghubungkan file kita dengan database di phpMyAdmin tadi.

File : koneksi.php

view plainprint?
<?php  
$h='localhost';  
$u='root';  
$p='root'; // Password , jika tidak ada , maka kosongi saja  
$db='tgs_sql';  
$k=mysql_connect($h,$u,$p) or die("tidak terkoneksi");  
$dB_sel=mysql_select_db($db) or die("db tidak dipilih");  
?>  

Simpan file diatas di dalam folder data_mahasiswa

Kemudian buat file lagi dengan nama index.php
File: index.php

view plainprint?
<?php include("koneksi.php"); // Link kan file koneksi.php tadi kesini?>  
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Data Mahasiswa | Lihat Data</title>  
<link href="defaultCSS.css" rel="stylesheet" type="text/css">  
<script type="text/javascript" src="jquery.js"></script>  
</head>  
  
<body>  
    <div id="headTop"><strong>Data</strong> Mahasiswa ~</div>  
    <div id="contenMid">  
        <div class="leftMenu">  
            <span>Tools</span>  
            <a id="menuU" class="addData" href="?n=addData"> Tambah Data Mahasiswa</a>  
            <a id="menuU" class="viewData" href="?n=viewData"> Daftar Mahasiswa</a>  
            <a id="menuU" class="editData" href="#"> Edit Data Mahasiswa</a>  
            <a id="menuU" class="exit" href="./"> Exit</a>  
        </div>  
        <div class="rightContent">  
            <?php  
                $nmFile = $_GET[n]; // untuk mengambil keterangan file dari URL  
                if(isset($nmFile)){  
                    include("inc/".$nmFile.".php");                   
                }else{  
                    include("inc/viewData.php");  
                }  
            ?>  
        </div>  
    </div>  
    <div id="signFoot">&copy; 2013 Axquired <strong>Apps</strong></div>  
</body>  
</html>  

Oiya , jangan lupa untuk file CSS nya ya. agar web kita lebih menarik tampilannya.
Letakkan file ini di folder yang sama.
File : defaultCSS.css

view plainprint?
@charset "utf-8";  
/* defaultCSS.css */  
  
body{  
    margin:0;  
    padding:0;  
    background-color:#00CCCC;  
    font-family:"Segoe UI", "Trebuchet MS", Verdana;  
}  
div#headTop, div#signFoot{  
        background-image:-moz-linear-gradient(bottom, #008888, #009999);  
        background-image:-webkit-linear-gradient(bottom, #008888, #009999);  
        box-shadow:1px 1px 3px 1px #444;  
    background-color:#009999;  
    width:100%;  
    color: #555;  
}  
    div#headTop{  
        position:fixed;  
        top:0;  
        padding: 20px;  
        padding-right:0;  
        font-size:32px;  
    }  
    div#signFoot{  
        position:absolute;  
        bottom:0;  
        padding-top: 5px;  
        padding-bottom: 5px;  
        font-size:12px;  
        text-align:center;  
    }  
div#headTop:hover, div#signFoot:hover{  
    color: #222;  
}  
div#contenMid{  
    padding:20px;  
    margin-top:100px;  
    font-size:16px;  
}  
    div#contenMid .leftMenu, div#contenMid .rightContent{  
        min-height:100px;  
        display:inline;  
        float:left;  
    }  
    .leftMenu {  
        width:250px;  
    }  
    .leftMenu > span, .leftMenu > a, .rightContent > span{  
        display:block;  
        padding:10px;  
        border-radius: 10px;  
    }  
  
    div#contenMid .leftMenu span, div#contenMid .rightContent span{  
        background-image:-moz-linear-gradient(top, #005555, #004444);  
        background-image:-webkit-linear-gradient(top, #005555, #004444);  
        background-color:#005555;  
        color:#CCC;  
        border-bottom:#003333 1px solid;  
        margin-bottom:5px;  
        font-weight:bold;  
    }  
    div#contenMid .leftMenu a#menuU{  
        text-decoration:none;  
        margin:5px;  
        -moz-transition: all 0.26s ease-out;  
        -webkit-transition: all 0.26s ease-out;  
    }  
    a.addData, a.viewData, a.editData, a.exit{  
        border-bottom:#005555 2px solid;  
        background-image:-moz-linear-gradient(top, #007777, #006666);  
        background-image:-webkit-linear-gradient(top, #007777, #006666);  
        color: #009999;  
    }  
    div#contenMid .leftMenu a#menuU:before{  
        content: ' *';  
    }  
  
    div#contenMid .leftMenu a#menuU:hover, a.active{  
        color:#FFF;  
        -moz-transform:scale(1.1);  
        -webkit-transform:scale(1.1);  
        padding-left:20px;  
        border-color:#004444;  
        background-image:-moz-linear-gradient(top, #008888, #007777);  
        background-image:-webkit-linear-gradient(top, #008888, #007777);  
    }  
      
    div#contenMid .rightContent{  
        width:800px;  
        margin-left:30px;  
        padding:10px;  
        padding-top:0;  
    }  
/** table content **/  
    .rightContent table thead{  
        color: #009999;  
        background-image:-moz-linear-gradient(top, #006666, #005555);  
        background-image:-webkit-linear-gradient(top, #009999, #008888);  
    }     
    .rightContent table tbody tr{  
        color:#003333;  
        background-image:-moz-linear-gradient(top,  #009999,  #008888);  
        background-image:-webkit-linear-gradient(top,  #009999,  #008888);  
        text-transform:capitalize;  
    }     
    .rightContent table tbody tr:hover{  
        color:#001111;  
        background-image:-moz-linear-gradient(top,  #007777,  #006666);  
        background-image:-webkit-linear-gradient(top, #007777, #006666);          
    }  
/** FORM **/  
form#formAdd input{  
    text-transform:capitalize;  
    padding:5px;  
    margin:4px;  
}         
   

Ketiga, kita akan membuat konten** untuk Lihat Data, Edit Data, Tambah Data dan juga Hapus Data.
Buat folder baru dengan nama inc. Kemudian masuk ke folder tersebut.
Nah sekarang diposisi kita adalah folder C:\Xampp\htdocs\data_mahasiswa\inc
buat file - file berikut ini di dalam folder C:\Xampp\htdocs\data_mahasiswa\inc.

File : viewData.php

view plainprint?
<script>  
    $("document").ready(function(){  
        $(".viewData").toggleClass("active");  
    });  
</script>  
<span>Daftar Nama mahasiswa</span>  
<?php echo("  
    <table width='100%' border='0' cellspacing='0' cellpadding='5'>  
      <thead>  
        <th>No.</th>  
        <th>NIM</th>  
        <th>Nama</th>  
        <th>Jurusan</th>  
        <th>Kelas</th>  
        <th>Pilihan</th>  
      </thead>  
      <tbody>  
      ");  
      $q = mysql_query("SELECT * FROM mhs ORDER BY nim ASC");  
      $num = 1;  
      while ($dat = mysql_fetch_array($q)){  
      echo("                    
      <tr>  
        <td align=center>".$num++."</td>  
        <td align=center>$dat[nim]</td>  
        <td align=center>$dat[nama]</td>  
        <td align=center>$dat[jurusan]</td>  
        <td align=center>$dat[kelas]</td>  
        <td align=center><a href=?n=editData&idEdit=$dat[id]><button>Edit</button></a> <a href=?n=delData&idDel=$dat[id]&nama=$dat[nama]><button>Hapus</button></a></td>  
      </tr>  
      ");  
      }  
      echo("  
      <tr>  
        <td colspan=6 align=right><button>Prev &larr;</button> <button>Next &rarr;</button></td>  
      </tr>  
      </tbody>  
    </table>              
"); ?>  

File : addData.php

view plainprint?
<script>  
    $("document").ready(function(){  
        $(".addData").toggleClass("active");  
    });  
</script><span>Tambah Data Mahasiswa </span>  
<form id="formAdd" method="post">  
<table width="100%" border="0" cellspacing="0" cellpadding="5">  
  <thead>  
    <th align="left" colspan="2">Form Tambah Data Mahasiswa</th>  
  </thead>  
  <tbody>    
  <tr>  
    <td>NIM</td>  
    <td>: <input type="text" name="nim" placeholder="NIM" size="50" required></td>  
  </tr>  
  <tr>  
    <td>Nama</td>  
    <td>: <input type="text" name="nama" placeholder="Nama Mahasiswa" size="50" required></td>  
  </tr>  
  <tr>  
    <td>Jurusan</td>  
    <td>: <input type="text" name="jurusan" placeholder="Jurusan" size="50" required></td>  
  </tr>  
  <tr>  
    <td>Kelas</td>  
    <td>: <input type="text" name="kelas" placeholder="Kelas" size="50" required></td>  
  </tr>  
  <tr>  
    <td colspan="2"><input type="submit" name="STOR" value="&radic; Tambah"> <input type="reset"></td>  
  </tr>  
  </tbody>    
</table>  
</form>  
  
<?php  
if($_POST[STOR]){  
    $nama = $_POST[nama];  
    $nim = $_POST[nim];  
    $jurusan = $_POST[jurusan];  
    $kelas = $_POST[kelas];  
      
    $add = mysql_query("INSERT INTO mhs VALUES('','$nim','$nama','$jurusan','$kelas')");  
    if($add){  
        echo("  
            <script>alert('Data [ $nama ] berhasil ditambahkan')</script>  
            <meta http-equiv=refresh content='0; url=?n=viewData' >  
        ");  
    }else{  
        echo("  
            <script>alert('ERROR | Data gagal di input')</script>  
            <meta http-equiv=refresh content='0; url=?n=addData' >  
        ");   
    }  
}  
  
?>   

File : editData.php

view plainprint?
<script>  
    $("document").ready(function(){  
        $(".editData").toggleClass("active");  
    });  
</script>  
<span>Tambah Data Mahasiswa </span>  
<?php  
    $id = $_GET[idEdit];  
    $q = mysql_query("SELECT * FROM mhs WHERE id='$id'");  
    while($ed=mysql_fetch_array($q)){  
      
?>  
<form id="formAdd" method="post">  
<table width="100%" border="0" cellspacing="0" cellpadding="5">  
  <thead>  
    <th align="left" colspan="2">Form Tambah Data Mahasiswa</th>  
  </thead>  
  <tbody>    
  <tr>  
    <td>NIM</td>  
    <td>: <input type="text" name="nim" placeholder="NIM" size="50" value="<?php echo $ed[nim]; ?>" required></td>  
  </tr>  
  <tr>  
    <td>Nama</td>  
    <td>: <input type="text" name="nama" placeholder="Nama Mahasiswa" size="50" value="<?php echo $ed[nama]; ?>" required></td>  
  </tr>  
  <tr>  
    <td>Jurusan</td>  
    <td>: <input type="text" name="jurusan" placeholder="Jurusan" size="50" value="<?php echo $ed[jurusan] ?>" required></td>  
  </tr>  
  <tr>  
    <td>Kelas</td>  
    <td>: <input type="text" name="kelas" placeholder="Kelas" size="50" value="<?php echo $ed[kelas] ?>" required></td>  
  </tr>  
  <tr>  
    <td colspan="2"><input type="submit" name="UPDATE" value="&radic; Update"> <input type="reset"></td>  
  </tr>  
  </tbody>    
</table>  
</form>  
  
<?php  
} // tutup while diatas  
if($_POST[UPDATE]){  
    $nama = $_POST[nama];  
    $nim = $_POST[nim];  
    $jurusan = $_POST[jurusan];  
    $kelas = $_POST[kelas];  
      
    $update = mysql_query("UPDATE mhs SET nim='$nim', nama='$nama', jurusan='$jurusan', kelas='$kelas' WHERE id='$id'");  
    if($update){  
        echo("  
            <script>alert('Data [ $nama ] berhasil di Update')</script>  
            <meta http-equiv=refresh content='0; url=?n=viewData' >  
        ");  
    }else{  
        echo("  
            <script>alert('ERROR | Data gagal di update')</script>  
            <meta http-equiv=refresh content='0; url=?n=addData' >  
        ");   
    }  
}  
  
?>   

File : delData.php

view plainprint?
<?php  
$id = $_GET[idDel];  
$nama=$_GET[nama];  
$del = mysql_query("DELETE FROM mhs where id='$id'");  
if($del){  
    echo("  
        <script>alert('Data [$nama] berhasil dihapus')</script>  
        <meta http-equiv=refresh content='0; url=?n=viewData'>  
        ");  
}  
  
?>  

Pusat Berbagi Teknologi Informasi

Tuesday, 22 September 2015

Aplikasi Data Mahasiswa dengan PHP dan MySQL

0 comments:

Post a Comment

Blog Archive

Entri yang Diunggulkan

Apakah Teknik Informatika sama dengan Manajemen Informatika...

Contributors

Translate

Total Pageviews

Visitor

Pusat Berbagi Teknologi Informasi

Tuesday, 22 September 2015

Aplikasi Data Mahasiswa dengan PHP dan MySQL

0 comments:

Post a Comment

Social Profiles

Blog Archive

Entri yang Diunggulkan

Apakah Teknik Informatika sama dengan Manajemen Informatika...

Contributors

Translate

Total Pageviews

Visitor