.:: Jasa Membuat Aplikasi Website,Desktop,Android Order Now..!! | | Order Now..!! Jasa Membuat Project Arduino,Robotic,Print 3D ::.

Cara Membuat Aplikasi CRUD Sederhana Menggunakan PDO dan Bootstrap

November 27, 2015 | | 0 komentar


بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Assalamu'alaikum warahmatullahi wabarakatuh

Cara Membuat Aplikasi CRUD Sederhana Menggunakan PDO dan Bootstrap - Salam sejahtera semuanya, pada postingan kali ini yaitu membuat aplikasi CRUD dengan PDO dan Bootstrap. Apa itu CRUD.? CRUD adalah kepanjangan dari Create Read Update and Delete. Apa itu PDO.? PDO merupakan singkat dari PHP Data Objects. PDO adalah suatu cara atau teknik untuk mengakses sebuah Database. Dengan PDO, programmer dapat lebih mudah dalam mengembangkan aplikasi. PDO ini bisa dikatakan seperti lapisan dalam akses data yang menggunakan API (Application Programming Interface) terpadu. Dan Boostrap adalah sebuah framework yang telah terintegrasi dengan HTML, CSS dan Javascript. Framework yang dikatakan paling populer dalam penggunaannya dalam pembuatan Front-End yang Responsive pada situs web anda. Dengan Bootstrap ini tampilan website anda dapat diakses menggunakan berbagai device mobile seperti smartphone, table, laptop dan lain-lain.
Saya rasa penjelasan singkat diatas dapat menambah wawasan anda. Oke, langsung saja. Dalam pembuatan aplikasi ini beberapa teknik dan tahap yang saya gunakan. Saya membuat 2 konsep yaitu PDO tanpa OOP dan PDO menggunakan OOP. Bedanya apa.? Nah, untuk penjelasan mengenai OOP, anda boleh searching di mBah Google :D.
Satu lagi, saya menggunakan teknik MVC (Model, View and Controller) anda juga boleh search ya. Singkatnya dengan menggunakan teknik MVC dapat lebih terstruktur, tapi ini saya buat pada konsep PDO yang menggunakan OOP.
Next gan, dalam tutorial ini saya menggunakan 1 database. Jadi, buat terlebih dahulu databasenya, berikut gambar dari struktur database yang saya buat.

Cara Membuat Aplikasi CRUD Sederhana Menggunakan PDO dan Bootstrap

Dapat anda perhatikan, Nama Database : crud, Nama Tabel : tamu dan beberapa field lainnya (disesuaikan saja dengan gambar).

CRUD PDO Basic

Seperti yang saya katakan tadi, kita memiliki 2 konsep. Dan konsep ini tanpa menggunakan OOP (Object-Oriented Programming). Berikut gambar struktur dari Foldernya. Terlebih dahulu Download Bootstrapnya di getbootstrap.com. 

Cara Membuat Aplikasi CRUD Sederhana Menggunakan PDO dan Bootstrap 

Tanpa panjang lebar lagi, dibawah beberapa scriptnya dari struktur diatas. Untuk penjelasan dari setiap script, anda bisa melihatnya di php.net (recomended).

File : welcome.php
<?php include_once 'header.php'; ?>

<div class="container">
	<div class="alert alert-info">
		<strong>SELAMAT DATANG DI APLIKASI CRUD DENGAN PDO + BOOTSTRAP</strong><br>
		<p><small>Create By : <a href="www.bahasaprogram.com">Bahasa Program</a></small></p>
		<p><small>Author : Ramses Putra</small></p>
	</div>
</div>

<?php include_once 'footer.php'; ?>

File : select.php 
<?php include_once 'header.php'; ?>
<?php include_once 'config/config.php'; ?>

<?php 

$sql = "SELECT * FROM tamu";
$stmt = $connect->prepare($sql);
$stmt->execute();
$result = $stmt->fetchAll();


?>

<div class="container">
	<table class="table table-striped">
		<tr>
			<th>No</th>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Email</th>
			<th>Action</th>
		</tr>
		<?php
			$no = 1; 
			foreach($result as $key => $value ) : 
		?>
			<tr>
				<td><?php echo $no; ?></td>
				<td><?php echo $value['firstname']; ?></td>
				<td><?php echo $value['lastname'] ?></td>
				<td><?php echo $value['email'] ?></td>
				<td>
					<a href="edit.php?edit-data=<?php echo $value['id']; ?>" class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span>    Edit</a> | 
					<a href="delete.php?delete-data=<?php echo $value['id']; ?>" class="btn btn-danger" onclick="confirm('Apakah anda yakin.?');"><span class="glyphicon glyphicon-trash"></span>    Delete</a>
				</td>
			</tr>
		<?php $no++; endforeach; ?>
	</table>
</div>

<?php include_once 'footer.php'; ?>


File : insert.php 
<?php include_once 'header.php'; ?>
<?php include_once 'config/config.php'; ?>

<?php 

if(isset($_POST['insert-data'])) {
	$firstname = $_POST['firstname'];
	$lastname = $_POST['lastname'];
	$email = $_POST['email'];

	$sql = "INSERT INTO tamu(firstname, lastname, email) VALUES (:firstname, :lastname, :email)";
	$stmt = $connect->prepare($sql);
	$stmt->bindParam(':firstname', $firstname);
	$stmt->bindParam(':lastname', $lastname);
	$stmt->bindParam(':email', $email);
	if($stmt->execute()) {
		echo '               
        		<div class="container">
        			<div class="alert alert-info">
        			<strong>Berhasil Memasukkan Data</strong>
        			</div>
        		</div>
            ';
        } else {
            echo '               
        		<div class="container">
        			<div class="alert alert-warning">
        			<strong>Gagal Memasukkan Data</strong>
        			</div>
        		</div>
            ';
        }
}


?>

<div class="container">
	<div class="col-sm-5">
		<form method="post" action="">
			<div>
				<label>Firsname</label>
				<input class="form-control" name="firstname" placeholder="Enter Firstname">
			</div>
			<div>
				<label>Lastname</label>
				<input class="form-control" name="lastname" placeholder="Enter Lastname">
			</div>
			<div>
				<label>Email</label>
				<input class="form-control" name="email" placeholder="Enter Email">
			</div>
			<div>
				<p>&nbsp;</p>
				<button class="btn btn-primary" type="submit" name="insert-data"><span class="glyphicon glyphicon-plus"></span> Insert Data</button>
				<button class="btn btn-danger" type="reset">Reset</button>
			</div>

		</form>
	</div>
</div>

<?php include_once 'footer.php'; ?>
File : header.php
<!DOCTYPE html>
<html>
<head>
	<title>Belajar CRUD dengan PDO dan Bootstrap</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<a href="?welcome" class="navbar-brand" >Home</a>
			<a href="insert.php" class="navbar-brand">Insert</a>
			<a href="select.php" class="navbar-brand">Lihat</a>
			<a href="http://bahasaprogram.com" class="navbar-brand">Tutorial</a>
		</div>
	</div>
</div>
File : footer.php
 
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

File : edit.php
<?php include_once 'header.php'; ?>
<?php include_once 'config/config.php'; ?>

<?php 

if(isset($_GET['edit-data'])) {
	$id = (int) $_GET['edit-data'];
	$sql = "SELECT * FROM tamu WHERE id = :id";
	$stmt = $connect->prepare($sql);
	$stmt->bindParam(':id', $id);
	$stmt->execute();
	$result = $stmt->fetch();

}

if(isset($_POST['update-data'])) {
			
	$firstname = $_POST['firstname'];
	$lastname = $_POST['lastname'];
	$email = $_POST['email'];
	$id = (int) $_GET['edit-data'];

	$sql = "UPDATE tamu SET firstname = :firstname, lastname = :lastname, email = :email
			WHERE id = :id";
	$stmt = $connect->prepare($sql);
	$stmt->bindParam(':firstname', $firstname);
	$stmt->bindParam(':lastname', $lastname);
	$stmt->bindParam(':email', $email);
	$stmt->bindParam(':id', $id);

	if($stmt->execute()) {
		echo '               
        		<div class="container">
        			<div class="alert alert-info">
        			<strong>Berhasil Update Data</strong>
        			</div>
        		</div>
            ';
        } else {
            echo '               
        		<div class="container">
        			<div class="alert alert-warning">
        			<strong>Gagal Update Data</strong>
        			</div>
        		</div>
            ';
    }
}


?>

<div class="container">
	<div class="col-sm-5">
		<form method="post" action="">
			<div>
				<label>Firsname</label>
				<input class="form-control" name="firstname" placeholder="Enter Firstname" value="<?php echo $result['firstname'] ?>">
			</div>
			<div>
				<label>Lastname</label>
				<input class="form-control" name="lastname" placeholder="Enter Lastname" value="<?php echo $result['lastname'] ?>">
			</div>
			<div>
				<label>Email</label>
				<input class="form-control" name="email" placeholder="Enter Email" value="<?php echo $result['email'] ?>">
			</div>
			<div>
				<p>&nbsp;</p>
				<button class="btn btn-success" type="submit" name="update-data"><span class="glyphicon glyphicon-plus"></span> Update Data</button>
				<button class="btn btn-danger" type="reset">Reset</button>
			</div>

		</form>
	</div>
</div>


<?php include_once 'footer.php'; ?>

File : delete.php
<?php include_once 'header.php'; ?>
<?php include_once 'config/config.php'; ?>

<?php 

if(isset($_GET['delete-data'])) {
	$id = (int) $_GET['delete-data'];
	$sql = "DELETE FROM tamu WHERE id = :id";
	$stmt = $connect->prepare($sql);
	$stmt->bindParam(':id', $id);

	if($stmt->execute()) {
		echo '               
        		<div class="container">
        			<div class="alert alert-info">
        			<strong>Berhasil Hapus Data</strong>
        			</div>
        		</div>
            ';
        } else {
            echo '               
        		<div class="container">
        			<div class="alert alert-warning">
        			<strong>Gagal Hapus Data</strong>
        			</div>
        		</div>
            ';
    }
}

?>

<?php include_once 'footer.php'; ?>

File : config.php
<?php 

$host = 'localhost';
$user = 'root';
$pass = '';
$database = 'crud';

try {
	$connect = new PDO("mysql:host={$host};dbname={$database}", $user, $pass);
	$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e) {
	echo $e->getMessage();
}


?>

Gimana gan.?? Panjang ya. Nah dari script diatas, akan menghasilkan aplikasi seperti demo dibawah ini gan.


Sangat sederhana bukan.?? Oke, saya akan lanjutkan ke konsep yang menggunakan OOP.

CRUD PDO Basic With OOP

Pada bagian ini hampir sama dengan konsep diatas, cuma mungkin agak ribet terlalu banyak liku-likunnya. Nah, agar dapat memahami proses dibawah nanti, saya sarankan belajar OOP dulu ya. Oke, disini saya akan memberikan scriptnya saja, databasenya dan lain-lainnya sama juga dengan diatas. Berikut struktur foldernya :
Cara Membuat Aplikasi CRUD Sederhana Menggunakan PDO dan Bootstrap 

Berikut script dari struktur diatas.
File : config.php
<?php 

$host = "localhost";
$user = "root";
$pass = "";
$database = "crud";

try {
	$connect = new PDO("mysql:host={$host};dbname={$database}", $user, $pass);
	$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e) {
	echo $e->getMessage();
}

include_once "controller/class.php";

$process = new crud($connect);

?>

File : class.php
<?php 

class crud
{
	private $db;

	function __construct($connect)
	{
		$this->db = $connect;
	}

	public function createData($firsname, $lastname, $email)
	{
		try {
			$sql = "INSERT INTO tamu (firstname, lastname, email) VALUES (:firsname, :lastname, :email)";
			$stmt = $this->db->prepare($sql);
			$stmt->bindParam(':firsname', $firsname);
			$stmt->bindParam(':lastname', $lastname);
			$stmt->bindParam(':email', $email);
			return $stmt->execute();
		}
		catch(PDOException $e) {
			echo $e->getMessage();
			return false;
		}
	}

	public function selectData()
	{
		try {
			$sql = "SELECT * FROM tamu";
			$stmt = $this->db->prepare($sql);
			$stmt->execute();
			return $stmt->fetchAll();
		}
		catch(PDOException $e) {
			echo $e->getMessage();
			return false;
		}
	}

	public function getData($id)
	{
		try {
			$sql = "SELECT * FROM tamu WHERE id = :id";
			$stmt = $this->db->prepare($sql);
			$stmt->bindParam(':id', $id);
			$stmt->execute();
			return $stmt->fetch();
		}
		catch(PDOException $e) {
			echo $e->getMessage();
			return false;
		}
	}

	public function updateData($firstname, $lastname, $email, $id)
	{
		try {
			$sql = "UPDATE tamu SET firstname = :firstname, lastname = :lastname, email = :email 
					WHERE id = :id";
			$stmt = $this->db->prepare($sql);
			$stmt->bindParam(':firstname', $firstname);
			$stmt->bindParam(':lastname', $lastname);
			$stmt->bindParam(':email', $email);
			$stmt->bindParam(':id', $id);
			return $stmt->execute();
		}
		catch(PDOException $e) {
			echo $e->getMessage();
			return false;
		}
	}

	public function deleteData($id)
	{
		try {
			$sql = "DELETE FROM tamu WHERE id = :id";
			$stmt = $this->db->prepare($sql);
			$stmt->bindParam(':id', $id);
			return $stmt->execute();
		}
		catch(PDOException $e) {
			echo $e->getMessage();
			return false;
		}
	}
}


File : delete.php
<?php 

if(isset($_GET['delete-data'])) {
	$id = (int)$_GET['delete-data'];
	if($process->deleteData($id)) {
		echo '               
        		<div class="container">
        			<div class="alert alert-info">
        			<strong>Berhasil Menghapus Data</strong>
        			</div>
        		</div>
            ';
        } else {
            echo '               
        		<div class="container">
        			<div class="alert alert-warning">
        			<strong>Gagal Menghapus Data</strong>
        			</div>
        		</div>
            ';
	}
}



?>

File : insert.php
<?php 

if(isset($_POST['insert-data'])) {
	$firsname = $_POST['firstname'];
	$lastname = $_POST['lastname'];
	$email = $_POST['email']; 
	if($process->createData($firsname, $lastname, $email)) {
		echo '               
        		<div class="container">
        			<div class="alert alert-info">
        			<strong>Berhasil Memasukkan Data</strong>
        			</div>
        		</div>
            ';
        } else {
            echo '               
        		<div class="container">
        			<div class="alert alert-warning">
        			<strong>Gagal Memasukkan Data</strong>
        			</div>
        		</div>
            ';
        }
}


?>

File : select.php
<?php 

if(isset($_GET['edit-data'])) {
	$id = (int) $_GET['edit-data'];
	$result = $process->getData($id);
	if(isset($_POST['update-data'])) {
		$firstname = $_POST['firstname'];
		$lastname  = $_POST['lastname'];
		$email     = $_POST['email'];

		if($process->updateData($firstname, $lastname, $email, $id)) {
			echo '               
        		<div class="container">
        			<div class="alert alert-info">
        			<strong>Berhasil Mengubah Data</strong>
        			</div>
        		</div>
            ';
        } else {
            echo '               
        		<div class="container">
        			<div class="alert alert-warning">
        			<strong>Gagal Mengubah Data</strong>
        			</div>
        		</div>
            ';
		}
	}
}


?>

File : content.php
<?php 

if(isset($_GET['data'])) {
	if($_GET['data'] == 'insert-data') {
		include 'config/config.php';
		include 'controller/insert.php';
		include 'view/form-create.php';
	}elseif ($_GET['data'] == 'lihat-data') {
		include 'config/config.php';
		include 'model/data-tamu.php';
	}
}elseif(isset($_GET['edit-data'])) {
	include 'config/config.php';
	include 'controller/select.php';
	include 'view/form-edit.php';
}elseif(isset($_GET['delete-data'])) {
	include 'config/config.php';
	include 'controller/delete.php';
}elseif(isset($_GET['welcome'])) {
	include 'welcome.php';
}

?>

File : footer.php
 
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

File : header.php
<!DOCTYPE html>
<html>
<head>
	<title>Belajar CRUD dengan PDO dan Bootstrap</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<a href="?welcome" class="navbar-brand" >Home</a>
			<a href="?data=insert-data" class="navbar-brand">Insert</a>
			<a href="?data=lihat-data" class="navbar-brand">Lihat</a>
			<a href="http://bahasaprogram.com" class="navbar-brand">Tutorial</a>
		</div>
	</div>
</div>

File : data-tamu.php
<div class="container">
	<table class="table table-striped">
		<tr>
			<th>No</th>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Email</th>
			<th>Action</th>
		</tr>
		<?php
			$no = 1; 
			foreach($process->selectData() as $key => $value ) : 
		?>
			<tr>
				<td><?php echo $no; ?></td>
				<td><?php echo $value['firstname']; ?></td>
				<td><?php echo $value['lastname'] ?></td>
				<td><?php echo $value['email'] ?></td>
				<td>
					<a href="?edit-data=<?php echo $value['id']; ?>" class="btn btn-primary"><span class="glyphicon glyphicon-pencil"></span>    Edit</a> | 
					<a href="?delete-data=<?php echo $value['id']; ?>" class="btn btn-danger" onclick="confirm('Apakah anda yakin.?');"><span class="glyphicon glyphicon-trash"></span>    Delete</a>
				</td>
			</tr>
		<?php $no++; endforeach; ?>
	</table>
</div>

File : form-create.php
<div class="container">
	<div class="col-sm-5">
		<form method="post" action="">
			<div>
				<label>Firsname</label>
				<input class="form-control" name="firstname" placeholder="Enter Firstname">
			</div>
			<div>
				<label>Lastname</label>
				<input class="form-control" name="lastname" placeholder="Enter Lastname">
			</div>
			<div>
				<label>Email</label>
				<input class="form-control" name="email" placeholder="Enter Email">
			</div>
			<div>
				<p>&nbsp;</p>
				<button class="btn btn-primary" type="submit" name="insert-data"><span class="glyphicon glyphicon-plus"></span> Insert Data</button>
				<button class="btn btn-danger" type="reset">Reset</button>
			</div>

		</form>
	</div>
</div>

File : form-edit.php
<div class="container">
	<div class="col-sm-5">
		<form method="post" action="">
			<div>
				<label>Firsname</label>
				<input class="form-control" name="firstname" placeholder="Enter Firstname" value="<?php echo $result['firstname'] ?>">
			</div>
			<div>
				<label>Lastname</label>
				<input class="form-control" name="lastname" placeholder="Enter Lastname" value="<?php echo $result['lastname'] ?>">
			</div>
			<div>
				<label>Email</label>
				<input class="form-control" name="email" placeholder="Enter Email" value="<?php echo $result['email'] ?>">
			</div>
			<div>
				<p>&nbsp;</p>
				<button class="btn btn-success" type="submit" name="update-data"><span class="glyphicon glyphicon-plus"></span> Update Data</button>
				<button class="btn btn-danger" type="reset">Reset</button>
			</div>

		</form>
	</div>
</div>

File : index.php
 
<?php include_once 'layout/header.php'; ?>
<?php include_once 'layout/content.php'; ?>
<?php include_once 'layout/footer.php'; ?>

File : welcome.php
<div class="container">
	<div class="alert alert-info">
		<strong>SELAMAT DATANG DI APLIKASI CRUD DENGAN PDO + BOOTSTRAP</strong><br>
		<p><small>Create By : <a href="www.bahasaprogram.com">Bahasa Program</a></small></p>
		<p><small>Author : Ramses Putra</small></p>
	</div>
</div>

Wew, selesai juga gan. Oke, dari script diatas kalau di jalankan maka hasilnya sama dengan demo dengan konsep sebelumnya. Yang menjadi perbedaannya ialah konsepnya.




Dari kedua konsep ini ada memiliki kelebihan dan kekurangan, jadi terserah anda untuk memilih yang mana. Tapi menurut pendapat saya, anda sebaiknya memilih yang menggunakan konsep OOP, tapi lainnya juga bisa kok dipelajari. Oke, sampai disini tutorial Cara Membuat Aplikasi CRUD Sederhana Menggunakan PDO dan Bootstrap yang saya berikan, semoga dapat bermanfaat. Maaf jika ada kata atau penjelasan yang kurang. Sekian dan terima kasih. Oh ya, bagi anda yang ingin mau script kita tadi, boleh sertakan emailnya di kolom komentarnya, nanti saya kirimkan.

Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com

atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين
Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
wassalamualaikum warahmatullahi wabarakatuh


Artikel Cara Membuat Aplikasi CRUD Sederhana Menggunakan PDO dan Bootstrap, Diterbitkan oleh scodeaplikasi pada Jumat, 27 November 2015. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.

Shares

Terimakasih Telah mengunjungi website Kami..!!

post-edit
Langganan: Posting Komentar (Atom)

Tawk.to

Youtube Scodeaplikasi
Youtube Labrobotika
Beli Sourcecode Aplikasi
Kursus Robot Online
Kursus Program Online