Sisfo akademik #1 - data kelas

1 | P a g e
freak-kutuonline
SISFO AKADEMIK #1 – DATA KELAS
Notice !
- Pastikan Apache dan MySQL dalam XAMPP telah berstatus running.
- Gunakan editor Dreamweaver CS6.
Persiapan:
- Buat folder sisfoakd didalam xampp/htdocs sebagai folder penyimpanan proyek.
- Buat folder admin dan conf didalam folder sisfoakd.
- Buat folder kelas didalam folder admin untuk menyimpan file kelas.
Buat database didalam phpMyAdmin dengan nama db_akademik
Buat tabel kelas dengan struktur tabel seperti berikut:
Field Name Data Type Length/Values Index A_I (auto_increment)
id_kelas Int 3 Primary key Yes
nm_kelas Varchar 10
Buat file koneksi untuk mengakses tabel yang berada didalam database db_akademik. Simpan
file koneksi.php didalam folder conf yang telah disiapkan.
Script koneksi.php
1
2
3
4
5
6
7
8
9
10
11
12
<?php
$host = 'localhost';
$user = 'root';
$pswd = '';
$db = 'db_akademik';
$conn = mysqli_connect($host,$user,$pswd,$db);
if(mysqli_connect_errno()){
echo "Unable to connect to database : " . mysqli_connect_error();
}
?>
Penjelasan script koneksi diatas:
• Baris 2, mendefinisikan host yang digunakan untuk mengakses database yaitu localhost.
• Baris 3, mendefinisikan pengguna database secara default yaitu root.
• Baris 4, mendefinisikan password yang digunakan untuk mengakses kedalam database. Jika
password tidak ada maka cukup dikosongkan saja.
• Baris 5, mendefisinikan database yang digunakan didalam proyek yaitu db_akademik.
• Baris 7, koneksi kedalam database.
• Baris 9-11, menampilkan pesan jika koneksi kedalam database tidak berhasil.

2 | P a g e
freak-kutuonline
Buat file open_file.php, file ini berisi pemanggilan file-file php lainnya.
Script open_file.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
$page = isset($_GET['page']) ? $_GET['page'] : '';
switch($page){
case 'dashboard':
if(!file_exists("../admin/dashboard.php")) die ("File dashboard
tidak ada.");
include('../admin/dashboard.php');
break;
/*-------------------------- data kelas ---------------------------------------------------
*/
case 'viewKelas':
if(!file_exists("../admin/kelas/kelas_view.php")) die ("File daftar
kelas tidak ada.");
include('../admin/kelas/kelas_view.php');
break;
case 'tambahKelas':
if(!file_exists("../admin/kelas/kelas_new.php")) die ("File tambah
kelas tidak ada.");
include('../admin/kelas/kelas_new.php');
break;
case 'simpanKelas':
if(!file_exists("../admin/kelas/kelas_save.php")) die ("File simpan
data kelas tidak ada.");
include('../admin/kelas/kelas_save.php');
break;
case 'ubahKelas':
if(!file_exists("../admin/kelas/kelas_ubah.php")) die ("File ubah
include('../admin/kelas/kelas_ubah.php');
break;
case 'updateKelas':
if(!file_exists("../admin/kelas/kelas_update.php")) die ("File
update data kelas tidak ada.");

3 | P a g e
freak-kutuonline
41
42
43
44
45
46
47
48
49
50
include('../admin/kelas/kelas_update.php');
break;
case 'hapusKelas':
if(!file_exists("../admin/kelas/kelas_hapus.php")) die ("File hapus
include('../admin/kelas/kelas_hapus.php');
break;
}
?>
Simpan file open_file.php diatas dalam folder admin yang telah disiapkan.
Buat tampilan home seperti gambar dibawah ini, gunakan komponen Table pada Dreamweaver
agar lebih mudah dan cepat dalam membuat tampilan.
Gambar 1. Home.php
Untuk membuat menu samping gunakan SpryAssets – Menu Bar, pilih model Vertical.
Script home.php
1
2
3
4
5
6
7
8
9
<!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=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>

4 | P a g e
freak-kutuonline
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<body>
<table width="800" border="1" align="center">
<tr>
<td height="100" colspan="2"> </td>
</tr>
<tr>
<td width="150" valign="top"><ul id="MenuBar1" class="MenuBarVertical">
<li><a href="?page=dashboard">DASHBOARD</a></li>
<li><a href="#">MAHASISWA</a></li>
<li><a href="?page=viewKelas">KELAS</a></li>
<li><a href="#">MATA KULIAH</a> </li>
<li><a href="#">DOSEN</a></li>
</ul></td>
<td width="624" valign="top"><?php require_once "../admin/open_file.php";
?></td>
</tr>
<tr>
<td height="30" colspan="2"><div align="center">Copyleft 2017. All right
reserved.</div></td>
</tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Simpan file home.php diatas dalam folder admin yang telah disiapkan.
Selanjutnya membuat file dashboard.php yang digunakan sebagai halaman pembuka ketika
pertama kali proyek diakses/dijalankan.
Script dashboard.php
1
2
3
<body>
<p>Selamat datang dihalaman utama sistem informasi akademik.</p>
</body>
Simpan file dashboard.php diatas dalam folder admin yang telah disiapkan.
Selanjutnya dalah membuat file-file kelas yang dibutuhkan, terdiri dari kelas_view.php,
kelas_new.php, kelas_save.php, kelas_ubah.php, kelas_update.php, dan kelas_hapus.php.

5 | P a g e
freak-kutuonline
Buat tampilan data kelas seperti gambar dibawah ini.
Gambar 2. Tampil data kelas.
Script kelas_view.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<head>
</head>
<?php require_once "../admin/open_file.php"; ?>
<body>
<tr>
<td colspan="3"><input name="bInput" type="button" value="Tambah Kelas"
onclick="window.location='?page=tambahKelas';" /> </td>
</tr>
<tr>
<td colspan="3">DATA KELAS</td>
</tr>
<tr>
<td width="62"><div align="center">No.</div></td>
<td width="263"><div align="center">Kelas</div></td>
<td width="161"><div align="center">Aksi</div></td>
</tr>
<?php

6 | P a g e
freak-kutuonline
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
include "../conf/koneksi.php";
$query = mysqli_query($conn, "select * from kelas order by id_kelas desc");
$no = "1";
while($r = mysqli_fetch_assoc($query)){
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $r['nm_kelas']; ?></td>
<td align="center">
<input name="bUbah" type="button" value="Ubah"
onclick="window.location='?page=ubahKelas&id=<?php echo $r['id_kelas'];?>' " />
<input name="bHapus" type="button" value="Hapus"
onclick="window.location='?page=hapusKelas&id=<?php echo $r['id_kelas'];?>' " />
</td>
</tr>
<?php
$no++; } $row = mysqli_num_rows($query);
?>
<tr>
<td colspan="3">Jumlah record : <?php echo $row; ?></td>
</tr>
</table>
</body>
</html>
Simpan file kelas_view.php diatas dalam folder admin/kelas yang telah disiapkan.
Perhatikan tampil kelas diatas, terdapat tombol Tambah Kelas untuk menambahkan data kelas
baru kedalam tabel kelas.
Gambar 3. Tambah data kelas.
Script kelas_new.php
1
2

7 | P a g e
freak-kutuonline
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<head>
</head>
<body>
<form id="form1" name="form1" method="post" action="?page=simpanKelas">
<tr>
<td colspan="2">TAMBAH KELAS</td>
</tr>
<tr>
<td width="150">Kelas</td>
<td><input name="kelas" type="text" size="30" maxlength="10"
required/> </td>
</tr>
<tr>
<td colspan="2"><div align="right">
<input name="submit" type="submit" value="Submit" />
<input name="reset" type="reset" value="Batal" onclick="self.history.back();" />
</div></td>
</tr>
</table>
</form>
</body>
</html>
Simpan file kelas_new.php diatas dalam folder admin/kelas yang telah disiapkan.
Pada file kelas_new.php diatas, terdapat action yang mengarahkan ke page simpanKelas. Page
ini berisi file kelas_save.php yang berfungsi menyimpan data kelas yang diinputkan.
Script kelas_save.php
1
2
3
4
5
6
7
8
9
10
<?php
$kls = $_POST['kelas'];
$insert = mysqli_query($conn, "insert into kelas(nm_kelas) values('$kls')") or die
(mysqli_error());
echo "<script>alert('Data kelas telah tersimpan.');</script>";
echo "<meta http-equiv='refresh' content='0;url=?page=viewKelas'>";
?>

8 | P a g e
freak-kutuonline
Simpan file kelas_save.php diatas dalam folder admin/kelas yang telah disiapkan.
Kembali kepada file tampil daftar kelas, pada kolom Aksi yang didalamnya terdapat dua buah
tombol yaitu Ubah dan Hapus. Apabila pengguna mengklilk tombol ubah, maka pengguna dapat
merubah data kelas yang dipilih.
Gambar 4. Ubah data kelas.
Script kelas_ubah.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<head>
</head>
<?php
$id = isset($_GET['id']) ? $_GET['id'] : '' ;
$query = mysqli_query($conn, "select * from kelas where id_kelas='$id'");
$r = mysqli_fetch_assoc($query);
?>
<body>
<form id="form1" name="form1" method="post" action="?page=updateKelas">
<input name="tid" type="hidden" value="<?php echo $r['id_kelas'];?>" />
<tr>
<td colspan="2">UBAH DATA KELAS</td>
</tr>
<tr>
<td width="150">Kelas</td>
<td><input name="kelas" type="text" size="30" maxlength="10" value="<?php echo
$r['nm_kelas'];?>" required/> </td>
</tr>

9 | P a g e
freak-kutuonline
30
31
32
33
34
35
36
37
38
39
<tr>
<td colspan="2"><div align="right">
<input name="submit" type="submit" value="Submit" />
<input name="reset" type="reset" value="Batal" onclick="self.history.back();" />
</div></td>
</tr>
</table>
</form>
</body>
</html>
Simpan file kelas_ubah.php diatas dalam folder admin/kelas yang telah disiapkan.
Proses penyimpanan kembali data kelas yang diubah terdapat pada file update kelas, berikut
scriptnya.
Script kelas_update.php
1
2
3
4
5
6
7
8
9
10
11
<?php
$id = $_POST['tid'];
$kls = $_POST['kelas'];
$update = mysqli_query($conn, "update kelas set nm_kelas='$kls' where
id_kelas='$id'") or die (mysqli_error());
echo "<script>alert('Data kelas telah di ubah.');</script>";
?>
Simpan file kelas_update.php diatas dalam folder admin/kelas yang telah disiapkan.
Kembali kepada file tampil daftar kelas, pada kolom Aksi terdapat tombol Hapus. Apabila
pengguna mengklik tombol hapus maka data kelas yang dipilih akan terhapus. Berikut script
hapus kelas.
Script kelas_hapus.php
1
2
3
4
5
6
7
8
9
<?php
$id = isset($_GET['id']) ? $_GET['id'] : '' ;
mysqli_query($conn, "delete from kelas where id_kelas='$id'");
echo "<script>alert('Data kelas telah terhapus.');</script>";
?>

10 | P a g e
freak-kutuonline
Simpan file kelas_hapus.php diatas dalam folder admin/kelas yang telah disiapkan.
Jalankan proyek melalui browser dengan mengetikkan localhost/sisfoakd/admin pada address
bar.
Note.
Untuk membuat tampilan daftar kelas, form tambah kelas, dan form ubah data kelas gunakan
mode Design yang terdapat didalam Dreamweaver CS6 agar pembuatan tampilan tidak
memakan waktu.

Sisfo akademik #1 - data kelas

Sisfo akademik #1 - data kelas

Sisfo akademik #1 - data kelas

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Destaque

Destaque(20)

Similar a Sisfo akademik #1 - data kelas

Similar a Sisfo akademik #1 - data kelas(20)

Mais de Doni Andriansyah

Mais de Doni Andriansyah(20)

Último

Último(7)

Sisfo akademik #1 - data kelas