Aplikasi Simple Blog dengan Ckeditor dan PHP

Ckeditor yakni tools atau library yang di bikin dari javascript dan diantara WYSIWYG text editor dengan menggunakan web yang mempunyai banyak fitur pada menolong memberi format penulisan posting yang ingin kita tulis. misalnya kita ingin menebalkan huruf, merancang miring, dan lain sebagainya. Pada proses kali ini kita memakai ckeditor CDN jadi kita tak perlu mengunduh ckeditornya, lumayan dengan memanggil filenya “https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js”.

pertama-tama kita bikin 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 yakni kode ckeditor yang akan kita gunakan pada perancangan program blog ini.

<script src=”https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js”></

</script>

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 bikin dulu yah database kalian, bikin 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 bikin kegunaan bagi menampilkan data dan men create data di php, bikin 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 yakni kode bagi menampilkan pesan error dan pesan sukses. bila gagal karenanya error dan bila berhasil men create data karenanya 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 bikin</h1>
</div>
<?php } ?>

//kode bagi 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; ?>