Art Of Technology

Taruh Code Di Dalam File "assets" Didalam Folder "css" Di File "style.css"

body {
	font-family: arial,verdana;
	font-size: 12px;
}

.table {
	font-family: sans-serif;
	color: #444;
	border-collapse: collapse;
	width: 50%;
	border: 1px solid #f2f5f7;
}

.table tr th {
	background: #35A9DB;
	color: #fff;
	font-weight: normal;
}

.table th,td {
	padding: 8px 20px;
}

.table tr:nth-child(even) {
	background-color: #f2f2f2;
}

.table tr:nth-child(even):hover {
	background-color: #eee;
}

#tmb {
	margin-bottom: 10px;
}

#tampil_data {
	margin-bottom: 10px;
}

.btn-tmb {
	display: inline-block;
	position: relative;
	border-radius: 10%;
	background: #35A9DB;
	cursor: pointer;
	padding: 6px 12px;
	color: white;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	font-size: 11pt;
}

.btn-tmb:hover {
	border: solid #35A9DB 1.5px;
	border-radius: 10%;
    outline: 0;
    color: #35A9DB;
    background-color: white;
    -webkit-transition-duration:0.3s;
    transition-duration: 0.3s; 
    text-decoration: none;
}

.btn-edit {
	display: inline-block;
	position: relative;
	border-radius: 10%;
	background: #90EE90;
	cursor: pointer;
	padding: 5px 10px;
	color: white;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	font-size: 11pt;
}

.btn-edit:hover {
	border: solid #90EE90 1.5px;
	border-radius: 10%;
    outline: 0;
    color: #90EE90;
    background-color: white;
    -webkit-transition-duration:0.3s;
    transition-duration: 0.3s; 
    text-decoration: none;
}

.btn-hps {
	display: inline-block;
	position: relative;
	border-radius: 10%;
	background: #F08080;
	cursor: pointer;
	padding: 5px 10px;
	color: white;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	font-size: 11pt;
}

.btn-hps:hover {
	border: solid #F08080 1.5px;
	border-radius: 10%;
    outline: 0;
    color: #F08080;
    background-color: white;
    -webkit-transition-duration:0.3s;
    transition-duration: 0.3s; 
    text-decoration: none;
}

input[type="text"], input[type="password"], input[type="email"], select {
	width: 100%;
	height: 30px;
	padding: 0 10px;
	background: #fff;
	color: #808080;
}

textarea {
	width: 100%;
	height: 50px;
	padding: 0 10px;
	background: #fff;
	color: #808080;
}

Lalu Di dalam Folder "js" Dan Di FIle "ajax.js" Taruh Kode Berikut

$('#refresh').click(function() {
	$('#tambah_data').fadeOut();
	$('#refresh').fadeOut();
	$('#tampil_data').fadeOut();
	$('#teks').fadeIn().html('Sedang MeRefresh Data....

');
	setInterval(function() {
		$('#teks').fadeOut();
		$('#tambah_data').fadeIn();
		$('#refresh').fadeIn();
		$('#tampil_data').fadeIn().load('view/tampil.php');
	},3000);
});

$('#tampil_data').load('view/tampil.php');
	$('#tambah_data').click(function(){
		$('#crudT').hide(500).slideDown(1000).load('view/tambah.php');
	});

	$('#crudT').on("click", "#simpanT", function() {
		var nama = $('#nama').val();
		var user = $('#user').val();
		var pass = $('#pass').val();
		var email = $('#email').val();
		var validasiHuruf = /^[a-zA-Z ]+$/;
    
	    if (!nama.match(validasiHuruf)) 
	    {
	        alert("Nama Wajib Huruf!");    
	    }
		else if(nama == '' || user == '' || pass == '' || email == '') 
		{
			alert('Inputan Tidak Boleh Kosong');
		}
		else
		{
			$.ajax({
				url:'model/model_anggota.php?page=tambah',
				type: 'post',
				data: 'nama='+nama+'&user='+user+'&pass='+pass+'&email='+email,
				success: function(msg) {
					if(msg == 'sukses') {
						$('#tampil_data').load('view/tampil.php');
						$('#crudT').fadeOut(1000);
					} else {
						alert('Tambah Data Gagal');
					}
				}
			});
		}
	});

	$('#crudT').on("click", "#btl", function(){
		$('#crudT').slideUp(1000);
	});

	$('#tampil_data').on("click", ".btn-edit", function() {
		var id = $(this).attr('id');
		$.ajax({
			url: 'view/update.php',
			type: 'post',
			data: 'id='+id,
			success: function(msg) {
				$('#crudT').hide(500).slideDown(1000).html(msg);
			}
		});
	});

	$('#crudT').on("click", "#editT", function() {
		var nama = $('#nama').val();
		var user = $('#user').val();
		var pass = $('#pass').val();
		var email = $('#email').val();
		var id = $('#id_user').val();
		if (!nama.match(validasiHuruf)) 
	    {
	        alert("Nama Wajib Huruf!");    
	    }
		else if(nama == '' || user == '' || pass == '' || email == '') 
		{
			alert('Inputan Tidak Boleh Kosong');
		}
		else
		{
			$.ajax({
				url:'model/model_anggota.php?page=edit',
				type: 'post',
				data: 'nama='+nama+'&user='+user+'&pass='+pass+'&email='+email+'&id='+id,
				success: function(msg) {
					if(msg == 'sukses') {
						$('#tampil_data').load('view/tampil.php');
						$('#crudT').fadeOut(1000);
					} else {
						alert('Update Data Gagal');
					}
				}
			});
		}
	});

	$('#tampil_data').on("click", ".btn-hps", function() {
		var id = $(this).attr('id');
		var conf = confirm("Yakin Ingin Menghapus Data?");
		if(conf == true) {
			$.ajax({
				url: 'model/model_anggota.php?page=hapus',
				type: 'post',
				data: 'id='+id,
				success: function(msg) {
					if(msg == 'sukses') {
						$('#tampil_data').load('view/tampil.php');
						$('#crudT').fadeOut(1000);
					} else {
						alert('Hapus Data Gagal');
					}
				}
			});
		}
	});

Dan Untuk Jquerynya Sebenarnya Bisa Langsung Mengunjungi Documentasinya Di JQUERY DOWNLOAD Copy Codenya Dan Masukan Di File "jquery.min.js"

Dan Untuk Koneksi Ke Databasenya Masuk Ke Folder "config" Di FIle "koneksi.php" kopikan kode Berikut

 'Database/Mysql',
			'persistent' =>  false,
			'host'		 => 'localhost',
			'login'		 => 'root',
			'password'	 => '',
			'database'	 => 'pdo',
			'prefix'	 => 'tbl_',
			'encoding'	 => 'UTF8',
			'port'		 => '',
		);

		public function dbkoneksi() {
			static $instance;
			if($instance === null) {
				$opt = array(
					PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION,
					PDO::ATTR_DEFAULT_FETCH_MODE=>PDO::FETCH_ASSOC,
					PDO::ATTR_EMULATE_PREPARES=>FALSE
				);

				$dsn = 'mysql:host='.$this->default['host'].';dbname='.$this->default['database'].';charset='.$this->default['encoding'];
				$instance = new PDO($dsn,$this->default['login'],$this->default['password'],$opt);
			}

			return $instance;
		}
	}

	// Database Koneksi
	$dbcon = new Database();
	$dbs = $dbcon->dbkoneksi();

	//Controller Anggota
	include_once "../controller/controller_anggota.php";
	$anggota = new Anggota($dbs);
?>

Lalu Masuk Folder "controller" Dan Di File "controller_anggota.php" copykan code berikut

db = $dbs;
		}

		public function tambah($nama, $username, $pass, $email) 
		{
			try 
			{
				$insert = $this->db->prepare("INSERT INTO tb_user(nama, username, pass, email) VALUES(?,?,?,?)");
				$insert->bindParam(1, $nama);
				$insert->bindParam(2, $username);
				$insert->bindParam(3, $pass);
				$insert->bindParam(4, $email);
				$insert->execute();
				return true;
			}
			catch(Exception $e){
				echo $e->getMessage();
				return false;
			}
		}

		public function edit($nama, $username, $pass, $email, $id)
		{
			$edit = $this->db->prepare("UPDATE tb_user SET nama = ?, username = ?, pass = ?, email = ? WHERE id_user = ?");
			$edit->execute(array($nama, $username, $pass, $email, $id));
			return true;
		}

		public function hapus($id)
		{
			$hapus = $this->db->prepare("DELETE FROM tb_user WHERE id_user = :id");
			$hapus->bindParam(':id', $id);
			$hapus->execute();
		}
	}
?>

Lalu Masuk Folder "model" Dan Di File "model_anggota.php" copykan code berikut

tambah($nama, $user, $pass, $email);
		echo 'sukses';
	} 
	else if(@$_GET['page'] == 'edit') {
		$anggota->edit($nama, $user, $pass, $email, $id);
		echo "sukses";
	} 
	else if(@$_GET['page'] == 'hapus') 
	{
		$anggota->hapus($id);
		echo "sukses";
	}
?>

Dan Masuk Folder "view" Dan Di File "tampil.php" copykan code berikut

	dbkoneksi();
		try {
			$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
			$tampil = $db->query("SELECT * FROM tb_user");
			$no = 1;
			while($data = $tampil->fetch(PDO::FETCH_LAZY)) {
	?>
		
	getMessage();
		}
	?>
	

	


			
No
			
Nama
			
Username
			
Password
			
Email
			
Aksi
		

	


			

			

			

			
pass; ?>
			
email; ?>
			
Edit
				Hapus
			
		

Masih Di Folder "view" Sekarang Masuk Ke File "tambah.php" copykan code berikut

Tambah Data

	


		


			
Nama
			
:
			

			
		

			
Username
			
:
			

			
		

			
Password
			
:
			

			
		

			
Email
			
:
			

			
		

			

			

			
Tambah Data
				Batal
			
		

Masih Di Folder "view" Sekarang Masuk Ke File "update.php" copykan code berikut

Edit Data
	dbkoneksi();
		$id = @$_POST['id'];
		$tampilId = $db->query("SELECT * FROM tb_user WHERE id_user = '$id'");
		$data = $tampilId->fetch(PDO::FETCH_OBJ);
	?>
	


		


			
Nama
			
:
			

				
			
		

			
Username
			
:
			

			
		

			
Password
			
:
			

			
		

			
Email
			
:
			

			
		

			

			

			
Update Data
				Batal
			
		

Terakhir Keluar Folder "view" Dan Masuk Ke File "index.php" copykan code berikut

	





	


Tambah
	Refresh

Lalu Buat Database Dengan Nama "PDO" Dan Buat Table Dengan nama "tb_user" Lalu Buat Seperti Berikut


Lalu Run, Jika Mengikuti Tutorial Pasti Berhasil Di Run