Aplikasi Simple Blog dengan Ckeditor dan PHP

Ckeditor adalah tools atau library yang di buat dari javascript dan salah satu WYSIWYG text editor berbasis web yang memiliki banyak fitur dalam membantu memberi format penulisan posting yang ingin kita tulis. misalnya kita ingin menebalkan huruf, membuat miring, dan lain sebagainya. Dalam pengerjaan kali ini kita memakai ckeditor CDN jadi kita tak perlu mendownload ckeditornya, cukup dengan memanggil filenya “https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js”.

pertama kita buat desain templatenya dengan html dan css. ketikan kode di bawah ini dan simpan dengan nama index.php

index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ckeditor Blog</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
	<link rel="stylesheet" href="style.css"><br></head>
<body>
	<div class="con">
		
		<h2> Create Blog </h2>
		<form action="" method="post">
			<input type="text" name="title" placeholder="Title" class="in">
			<br><br>
			<textarea name="description" class="ckeditor" id="ckeditor"></textarea>
			<br/>
			<input type="submit" name="submit" value="submit" class="submit">
		</form>
				
	</div>

</body>
</html>

masukan tag javascript setelah tag div terkakhir, kode ini adalah kode ckeditor yang akan kita pakai dalam pembuatan aplikasi blog ini.

ini style.css nya

.con{
	width: 600px;
	margin:auto;

}
.in{
	width: 580px;
	padding: 10px;	
	border: 1px solid #EFEFEF;
}
.in:focus{
	border: #3498db solid 1px;
	width: 50%;
	transition: width 2s;
	box-shadow: 1px 0px 2px #3498db;
}
.submit{
	padding: 10px;
	background: #3498db;
	border: none;
	cursor: pointer;
	color: #fff;
	width: 100%;
	text-transform: uppercase;
	font-size:15px;
}
.submit:hover{
	background: #2980b9;
	/*border-left: 10px solid #fff;*/
	transition:  background 1s;
}
h2{
	font-family: arial;
	text-align: center;
	color: #2980b9;
	font-size: 25px;
	text-transform: uppercase;
}
.isi{
	border:1px solid #3498db;
	padding: 10px;
	margin-bottom: 10px;
}
h3{
	font-family: arial;
	text-align: center;
	color: #2980b9;
	font-size: 15px;
	text-transform: uppercase;
}
#error{
	/*background: #f39c12;*/
	border: 1px solid #e74c3c;
	width: 580px;
	color: #e74c3c;
	font-family: arial;
	text-transform: uppercase;
	text-align: center;
	padding: 10px;
	font-size: 10px;
	margin: 20px auto;
}
#sukses{
	border: 1px solid #2ecc71;
	width: 580px;
	color: #2ecc71;
	font-family: arial;
	text-transform: uppercase;
	text-align: center;
	padding: 10px;
	font-size: 10px;
	margin: 20px auto;
}
.hr{
	border-bottom:  1px solid #3498db;
}

tampilan nya akan seperti di bawah ini

sebelumnya kalian buat dulu yah database kalian, buat table sesuai gambar berikut.

lalu setelah itu kita sambungkan ke database mysql, ketikan kode berikut di atas tag doctype html.

<?php 
	$host = 'localhost';
	$user = 'dumet';
	$pass = 'school';
	$db   = 'webmaster';

	$link = mysqli_connect($host, $user, $pass, $db);

	if(!$link) die(mysqli_connect_error());

 ?>

setelah itu buat fungsi untuk menampilkan data dan men create data di php, buat setelah kode if di atas.

$blogs = mysqli_query($link, "SELECT * FROM 00ckeditor ORDER BY id DESC");

if(isset($_POST['submit']))
{
	$title       = $_POST['title'];
	$description = $_POST['description'];

	if( trim(!empty($title)) && trim(!empty($description)) )
	{
		mysqli_query($link, "INSERT INTO 00ckeditor VALUES('','$title', '$description')");
		header("location:index.php?sukses");
	}
	else
	{
		header("location:index.php?error");
	}

}

lalu setelah tag form ketikan kode berikut. kode di bawah adalah kode untuk menampilkan pesan error dan pesan sukses. bila gagal maka error dan bila berhasil men create data maka pesan sukses muncul.

//kode pesan error dan sukses
<?php if(isset($_GET["error"])){ ?>
	<div id="error" class="wow swing">
		<h1>Jangan Kosong !!</h1>
	</div>
<?php }else if(isset($_GET["sukses"])){?>
	<div id="sukses" class="wow swing">
		<h1>Sukses Di buat</h1>
	</div>		
<?php } ?>

//kode untuk menampilkan data dari database mysql
<div class="hr"></div> <br>
<?php if(mysqli_num_rows($blogs)>0): ?>
	<?php foreach ($blogs as $blog):?>
		<div class="isi">			
			<h3><?php echo $blog['title'] ?></h3>
			<div class="hr"></div>
			<p><?php  echo $blog['description'] ?></p>
		</div>
	<?php endforeach; ?>
<?php endif; ?>

coba kita masukan satu atu beberapa data ke dalam form, masukan title dan descriptionnya,