Minggu, 05 Desember 2021

Mendesain Website CodeIgniter

Pendahuluan

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

login page codeigniter

Tampilan Halaman Daftar

halaman registrasi codeigniter

Tampilan Halaman Utama

halaman utama codeigniter

Tampilan Artikel + Komentar

artikel dan halaman komentar codeigniter

Cukup sekian dan terima kasih semoga ini bisa menjadi referensi untuk mendesain blog kamu agar menjadi lebih indah.

Tidak ada komentar:

Posting Komentar