Pendahuluan
Tabel Konten
Setelah selesai dalam membuat blog dengan framework codeigniter. Selanjutnya mari kita desain blog tersebut agar terlihat enak dipandang mata dan midah untuk di pakai baik untuk pengunjung blog ataupun penulis.Disini saya akan memakai bootstrap5 dan ckeditor5 di codeigniter untuk mempercantik dan mempermudah menambahkan baik artikel maupun komentar.
Persiapan
> MySql atau MariaDb
> Blog CodeIgniter
> Bootstrap5
> Ckeditor5
> Code Editor
Pada artikel Blog CodeIgniter kita sudah membahas penggunaan mariadb. Selanjutnya kita akan memasang Bootstrap5 dan Ckeditor5.
Pemasangan Bootstrap5
Untuk memasangnya kamu harus mendapatkan file2 Bootstrap5 dengan menggunakan perintah npm atau composer atau mendownloadnya langsung pada website Boostrap. Setelah itu Buatlah folder assets/dist untuk tempat kita akan menaruh file Bootstrap dan Ckeditor disana.
Kita akan memakai boostrap pada semua halaman blog. Buatlah sebuah folder templates pada folder views dan 2 buah file yakni header.php dan footer.php didalamnya.
Isi dari file header.php yakni
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Yusuf Abdulloh">
<link rel="shortcut icon" href="/assets/dist/img/logo.jpg" type="image/x-icon" />
<!-- Bootstrap core CSS -->
<link href="/assets/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- CSS Kita-->
<link href="/assets/dist/css/post.css" rel="stylesheet">
<title>Daftar Artikel</title>
</head>
<body>
</code>
code1
Kode ini akan meload boostrap css dan membuatnya halaman responsive.Sedangkan file footer.php yakni
<code>
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<script src="/assets/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Pada kode diatas kita hanya memuat file javascript boostrap.
Selanjutnya kita akan memanggilnya pada controller atau model yang diinginkan dengan menggunakan kode$this->load->view('templates/header'); //untuk header
$this->load->view('templates/footer'); //untuk footer
Pemasangan Ckeditor5
Untuk memasang ckeditor5 cukuplah mudah yakni kamu tinggal memuat file ckeditor.js pada halaman yang harus memakai editor ini. Dengan menambahkan kode ini kamu akan dapat id editor pada element html yang digunakan.
<script src="/assets/dist/ckeditor5/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ), {
// toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
} )
.then( editor => {
window.editor = editor;
} )
.catch( err => {
console.error( err.stack );
} );
</script>
Bagaimana menurut kamu mudah dan indah bukan tampilan blog kita sekarang.
Contoh Tampilan Website Setelah Menggunakan Boostrap dan Ckeditor
Tampilan Halaman Login
Tampilan Halaman Daftar
Tampilan Halaman Utama
Tampilan Artikel + Komentar
Cukup sekian dan terima kasih semoga ini bisa menjadi referensi untuk mendesain blog kamu agar menjadi lebih indah.
Tidak ada komentar:
Posting Komentar