Membuat Aplikasi Input Data Mahasiswa dengan PHP MySQLi
Kali ini kita akan mempelajari tutorial Membuat Aplikasi Input Data Mahasiswa dengan PHP MySQLi. Tutorial ini akan menjelaskan bagaimana membuat aplikasi input data mahasiswa dengan PHP MySQLi meliputi CRUD (Creat, Read, Update, Delete) dengan menggunakan Bootstrap 3 sebagai dasar framework CSS. Sebelumnya saya telah menulis tutorial Membuat Aplikasi Input Data Karyawan dengan PHP MySQLi dengan menggunakan skrip yang sama.
Mengapa Harus menggunakan MySQLi? Hal ini karena pada versi PHP 7 Query MySQL sudah deprecated (usang serta tidak didukung lagi) dan tidak bisa digunakan. Oleh karena itu pada tutorial Membuat Aplikasi Input Data Mahasiswa dengan PHP MySQLi ini, kita akan mengaplikasikan penggunaan MySQLi.
Oke, langsung saja kita mulai tutorial Membuat Aplikasi Input Data Mahasiswa dengan PHP MySQLi ini. Aplikasi yang akan kita buat menggunakan framework Bootstrap sebagai skrip CSS. Silakan download file framework dan database berikut:
Pertama, buat folder baru pada direktori web server Anda dengan namadatamahasiswa , kemudian ekstrak file bootstrap-datamahasiswa-v1.0.rar dan simpan pada folder datamahasiswa yang baru dibuat tadi. Misalkan Anda menggunakan webserver WAMP, maka area kerja kita ada pada direktori iniC:\wamp\www\datamahasiswa .
Kedua, silakan buat database baru dengan nama datamahasiswa dan import file database database-datamahasiswa-v1.0.sql .
Selanjutnya kita buat file koneksi.php dengan isi kode sebagai berikut:
1
2
3
4
5
6
7
8
9
10
11
12
|
<?php
$host = "localhost"; // server
$user = "root"; // username
$pass = ""; // password
$database = "datamahasiswa"; // nama database
$koneksi = mysqli_connect($host, $user, $pass, $database); // menggunakan mysqli_connect
if(mysqli_connect_errno()){ // mengecek apakah koneksi database error
echo 'Gagal melakukan koneksi ke Database : '.mysqli_connect_error(); // pesan ketika koneksi database error
}
?>
|
kemudian simpan pada direktori C:\wamp\www\datamahasiswa .
Selanjutnya kita buat file index.php sebagai halaman depan Aplikasi Input Data Mahasiswa. File index.php ini nantinya akan kita bagi ke dalam 3 file yaitu header.php, index.php dan footer.php untuk memudahkan pembuatan halaman yang lain.
Isi file index.php yang masih utuh secara keseluruhan adalah sebagai berikut:
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Data Mahasiswa v1.0</title>
<link rel="shortcut icon" href="img/logo_ilmututorial_32x32.jpg" type="image/x-icon" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datepicker.css" rel="stylesheet">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/tooltip.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<link href="style.css" rel="stylesheet">
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<!--
Project : Data Mahasiswa v1.0
Description : CRUD (Create, read, Update, Delete) PHP, MySQLi dan Bootstrap
Author : Firman Dwi Jayanto
Author URI : http://www.facebook.com/firmandije
Website : http://www.ilmututorial.com
Email : firmandije[at]gmail.com, firman@firmandije.com
-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Start navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs-block visible-sm-block" href="http://www.ilmututorial.com" target="_blank">ilmututorial.com</a>
<a class="navbar-brand hidden-xs hidden-sm" href="http://www.ilmututorial.com" target="_blank">ilmututorial.com</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="data.php" data-toggle="tooltip" data-placement="bottom" title="Lihat Data Mahasiswa"><span class="glyphicon glyphicon-list"></span> Lihat Data</a></li>
<li><a href="tambah.php" data-toggle="tooltip" data-placement="bottom" title="Tambah Data Mahasiswa" ><span class="glyphicon glyphicon-user"> Tambah Data</a></li>
</ul>
<form name="cari" method="post" action="cari.php" role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" name="carinim" placeholder="Cari NIM Mahasiswa" class="form-control">
</div>
<button type="submit" name="submit" id="submit" value="search" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Cari Data Mahasiswa">Cari</button>
</form>
</div>
</div>
</nav>
<!-- End navbar -->
<!-- Start container -->
<div class="container">
<div class="content">
<div class="jumbotron">
<h1>Data Mahasiswa v1.0</h1>
<p>Aplikasi input data mahasiswa menggunakan PHP, MySQLi dan bootstrap.</p>
<a href="data.php" data-toggle="tooltip" title="Lihat Data Mahasiswa" class="btn btn-info" role="button"><span class="glyphicon glyphicon-list"></span> Lihat Data Mahasiswa</a>
<a href="tambah.php" data-toggle="tooltip" title="Tambah Data Mahasiswa" class="btn btn-success" role="button"><span class="glyphicon glyphicon-user"></span> Tambah Data</a>
</div> <!-- /.jumbotron -->
</div> <!-- /.content -->
</div>
<!-- End container -->
<script>
$('.datepicker').datepicker({
format: 'dd-mm-yyyy',
})
</script>
</body>
</html>
|
Selanjutnya kita buat file header.php yang isinya diambil dari file index.php baris 1-67. Isi file header.php adalah sebagai berikut:
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Data Mahasiswa v1.0</title>
<link rel="shortcut icon" href="img/logo_ilmututorial_32x32.jpg" type="image/x-icon" />
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-datepicker.css" rel="stylesheet">
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/tooltip.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<link href="style.css" rel="stylesheet">
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<!--
Project : Data Mahasiswa v1.0
Description : CRUD (Create, read, Update, Delete) PHP, MySQLi dan Bootstrap
Author : Firman Dwi Jayanto
Author URI : http://www.facebook.com/firmandije
Website : http://www.ilmututorial.com
Email : firmandije[at]gmail.com, firman@firmandije.com
-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Start navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs-block visible-sm-block" href="http://www.ilmututorial.com" target="_blank">ilmututorial.com</a>
<a class="navbar-brand hidden-xs hidden-sm" href="http://www.ilmututorial.com" target="_blank">ilmututorial.com</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="data.php" data-toggle="tooltip" data-placement="bottom" title="Lihat Data Mahasiswa"><span class="glyphicon glyphicon-list"></span> Lihat Data</a></li>
<li><a href="tambah.php" data-toggle="tooltip" data-placement="bottom" title="Tambah Data Mahasiswa" ><span class="glyphicon glyphicon-user"> Tambah Data</a></li>
</ul>
<form name="cari" method="post" action="cari.php" role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" name="carinim" placeholder="Cari NIM Mahasiswa" class="form-control">
</div>
<button type="submit" name="submit" id="submit" value="search" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Cari Data Mahasiswa">Cari</button>
</form>
</div>
</div>
</nav>
<!-- End navbar -->
|
Selanjutnya kita buat file footer.php yang isinya diambil dari file index.php baris 80-88. Isi file footer.php adalah sebagai berikut:
1
2
3
4
5
6
7
|
<script>
$('.datepicker').datepicker({
format: 'dd-mm-yyyy',
})
</script>
</body>
</html>
|
