CKEditor Center Image

CKEditor Center Image

Artikel kali ini akan membahas bagaimana caranya menempatkan sebuah gambar tepat berada ditengah-tengah layout.

Pada saat menggunakan Plugin CKEditor mungkin bagi sebagian teman-teman yang baru belajar menggunakan Plugin jQuery akan sedikit mengalami kendala, pada saat ingin menempatkan sebuah gambar tepat berada ditengah layout. Artikel ini akan memberikan sedikit tips n trik bagaimana membuat objek atau gambar tepat berada ditengah pada layout yang dibuat.

Kuncinya adalah dengan memberikan style css secara manual atau custom buatan sendiri, pada tag html img.

File index.php

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Home | CKEditor</title>
        <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
</head>
<body>
    
    <h4>Input Berita</h4>

    <form action="insert-berita.php" method="post">
        <label>Judul</label>
        <input type="text" name="jd">
        <br>
        <label>Deskripsi</label>
        <textarea cols="30" rows="5" name="isi"></textarea>
        <script>
                CKEDITOR.replace( 'isi' );
        </script>
        <br>
        <input type="submit" name="save" value="SIMPAN">
        <input type="reset" name="cancel" value="BATAL">    
    </form>

    <br>

    <a href="tampil-data.php">Lihat Data</a>

</body>
</html>

File insert-berita.php

<?php
	include "koneksi.php";

	$jd = $_POST["jd"];
	$isi = mysqli_real_escape_string($con, $_POST["isi"]);

	$sql = "INSERT INTO tbl_berita(judul, isi_berita) VALUES('$jd', '$isi')";
	$query = mysqli_query($con, $sql) or die (mysqli_error($con));

	if($query){
		header("location: tampil-data.php");
	}

File tampil-data.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Tampil Data</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}

		body{
			font-family: 'Arial', serif;
			font-size: 13px;
			line-height: 20px;
		}

		#wrapper{
			width: 600px;
			margin: auto;
		}

		#content{
			background: grey;
			height: auto;
			padding: 20px;
		}

		#content img{
			margin: auto;
			width: 500px;
			display: block;
		}

		#content p{
			margin-top: 20px;
		}

		#content h2{
			text-align: center;
			text-transform: uppercase;
		}
	</style>
</head>
<body>

	<div id="wrapper">
		<div id="content">


			<?php
				include "koneksi.php";
				$sql = "SELECT * FROM tbl_berita ORDER BY id_berita DESC LIMIT 1";
				$query = mysqli_query($con, $sql) or die (mysqli_error($con));
				while($data = mysqli_fetch_array($query)){?>

					<h2><?php echo $data["judul"];?></h2>	
					<p><?php echo $data["isi_berita"];?></p>

				<?php }
			?>

			<a href="/portalku">Kembali</a>
			<br>
			<br>
			<em>
				Ini adalah contoh sederhana pengaturan gambar berada tepat ditengah pada saat menggunakan Plugin CKEditor
				Gambar diambil dari situs: https://www.wsupercars.com/
				<br>
				dalam artian situs tersebut memperbolehkan gambar untuk disematkan pada website dengan domain yang berbeda.
			</em>
		</div><!-- end of content-->
	</div>

</body>
</html>

File koneksi.php

<?php
	$server = "localhost";
	$user = "root";
	$pass = "";
	$dbase = "db_berita";

	$con = mysqli_connect($server, $user, $pass, $dbase);

	if(!$con){
		die(mysqli_error($con));
	}

Untuk demo hasil akhir akan terlihat pada link berikut:

https://www.yellowweb.id/demo/ckeditorku/

Untuk file mentahnya kalian dapat unduh disini: