Cara menggunakan untuk membuat dashboard mysql php

Question

Saya tidak akan banyak berteori pada tutorial kali ini, karena penjelasan dasar-dasar Codeigniter sudah dijelaskan pada tutorial-tutorial sebelumnya.

Nội dung chính Show

Buat Pengontrol Admin
Buat Rute Default untuk Admin
Buat Template Admin
Buat Tampilan Admin
Menampilkan Daftar Umpan Balik
Membuat Artikel CRUD
1. Ubah Model Artikel
2. Ubah Posting Admin Pengontrol
3. Ubah Tampilan Posting Admin
4. Percobaan
5. Buat Tampilan Saat Artikel Kosong
Tingkatkan Halaman Ikhtisar
Bagaimana cara membuat halaman dasbor?
Bagaimana cara menghubungkan PHP dan MySQL menggunakan mysqli secara prosedural?
Bagaimana cara membuat form login dengan database php dan MySQL?
Bagaimana cara membuat basis data?

Menyukai

Konsep MVC di Codeigniter;
Pengontrol di Codeigniter;
Lihat di Codeigniter

Mari kita berlatih dan melanjutkan proyek

php

class Setting extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/setting');
	}
}

2

Buat Pengontrol Admin

Buat folder baru di dalam folder

php

class Setting extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/setting');
	}
}

_3 dengan nama

php

class Setting extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/setting');
	}
}

4

Kemudian di folder

php

class Setting extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/setting');
	}
}

_4, buat Controller berikut

php

class Setting extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/setting');
	}
}

6 untuk halaman awal admin;

php

class Setting extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/setting');
	}
}

7 untuk artikel CRUD;

php

class Setting extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/setting');
	}
}

8 untuk menampilkan umpan balik dari formulir kontak;

php

class Setting extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/setting');
	}
}

_9 untuk pengaturan situs web

Cara menggunakan untuk membuat dashboard mysql php

Berikut adalah konten untuk setiap Pengontrol

📜

$route['admin'] = 'admin/dashboard';

_0

php

class Dashboard extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/dashboard.php');
	}
}

_

📜

$route['admin'] = 'admin/dashboard';

_1

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

📜

$route['admin'] = 'admin/dashboard';

_2

php

class Post extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/post_list.php');
	}
}

📜

$route['admin'] = 'admin/dashboard';

_3

php

class Setting extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/setting');
	}
}

Untuk saat ini semua admin controller yang kita buat hanya bertugas untuk menampilkan tampilan admin saja

Nanti kita buat semua viewnya

Selanjutnya silahkan lanjutkan

Buat Rute Default untuk Admin

Buka file

$route['admin'] = 'admin/dashboard';

_4 kemudian tambahkan default route untuk admin seperti ini

$route['admin'] = 'admin/dashboard';

_

Yaitu, kami akan menggunakan Pengontrol

$route['admin'] = 'admin/dashboard';

5 sebagai Pengontrol yang menerima permintaan dari

$route['admin'] = 'admin/dashboard';

6

Setelah itu silahkan lanjutkan

Buat Template Admin

Kami ingin memisahkan template untuk halaman admin dan halaman depan, karena tata letaknya berbeda

Berikut adalah rancangan atau bentuk desain dari halaman admin yang akan kita buat

Mari kita mulai membuat template

Buat folder baru di 📁

$route['admin'] = 'admin/dashboard';

7 dengan nama 📁

php

class Setting extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/setting');
	}
}

4

Kemudian di dalam folder 📁

php

class Setting extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/setting');
	}
}

_4, buat lagi folder baru dengan nama 📁

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacodingtitle>

<link rel="stylesheet" href="" />

0

Folder

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacodingtitle>

<link rel="stylesheet" href="" />

0 akan berisi sebagian atau sebagian tampilan yang akan digunakan pada tampilan admin

Nama dengan garis bawah di depan berfungsi sebagai penanda bahwa ini sebagian, bukan tampilan yang dimuat dari Controller. Ini sebenarnya tidak wajib, tapi agar lebih mudah dibaca kita pakai nama ini saja

Oke selanjutnya mari kita buat sebagian untuk admin

Buat file baru di 📁

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacodingtitle>

<link rel="stylesheet" href="" />

2 dengan nama dan isi sebagai berikut

📜

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacodingtitle>

<link rel="stylesheet" href="" />

_3

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacodingtitle>

<link rel="stylesheet" href="" />

Dalam kode parsial ini, kami menggunakan

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacodingtitle>

<link rel="stylesheet" href="" />

4 sebagai CSS untuk halaman admin. Kami akan membuat file ini nanti

📜

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacodingtitle>

<link rel="stylesheet" href="" />

5

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

📜

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacodingtitle>

<link rel="stylesheet" href="" />

_6

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

Nah selanjutnya karena kita menggunakan file css

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacodingtitle>

<link rel="stylesheet" href="" />

4 dibagian

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacodingtitle>

<link rel="stylesheet" href="" />

3 maka kita perlu membuatnya

Buat file baru di folder 📁

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacodingtitle>

<link rel="stylesheet" href="" />

9 dengan nama

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin - Beritacodingtitle>

<link rel="stylesheet" href="" />

4 dengan isi sebagai berikut

body {
	margin: 0;
	padding: 0;
}

.main {
	display: flex;
}

.side-nav {
	background: teal;
	width: 25vw;
	max-width: 200px;
	height: 100vh;
}

.side-nav .brand {
	padding: 0 1rem;
	color: white;
}

.side-nav nav {
	display: flex;
	flex-direction: column;
}

.side-nav nav a {
	font-family: sans;
	text-decoration: none;
	color: white;
	padding: 0.8rem;
}

.side-nav nav a:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.content {
	padding: 1rem;
	padding-right: 2rem;
	width: 100%;
	position: static;
}

.toolbar {
	display: flex;
	margin: 1rem 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table,
th,
td {
	border: 1px solid grey;
	border-left: none;
	border-right: none;
	padding: 0.5rem;
	text-align: left;
}

.action {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
}

.footer {
	position: absolute;
	bottom: 1rem;
	text-align: center;
	font-family: sans-serif;
	font-size: 0.7rem;
}

/* Form */
form {
	box-sizing: border-box;
	padding: 0rem;
}
label {
	display: inline-block;
	margin-bottom: 0.5rem;
}
input, textarea {
	display: inline-block;
	padding: 0.5rem;
	margin-bottom: 1rem;
	width: 100%;
}
input:focus, textarea:focus {
	outline-color: dodgerblue;
}

/* Card */
.card {
	border: 1px solid lightgray;
	padding: 1rem;
	margin: 1rem 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	font-family: sans-serif;
}

/* Button */
.button {
	background-color: #e7e7e7;
	border: 2px solid transparent;
	border-radius: 8px;
	color: black;
	padding: 8px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-family: sans-serif;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
	background-color: #4caf50;
	color: white;
}
.button-primary {
	background-color: #008cba;
	color: white;
}
.button-danger {
	background-color: #f44336;
	color: white;
}

.button-small {
	font-size: 0.7rem;
}

/* Text */
.text-green {
	color: #4caf50;
}

.text-gray {
	color: grey;
}

.text-center {
	text-align: center;
}

Templat parsial selesai. Selanjutnya kita akan menggunakannya di View

Ayo lanjutkan

Buat Tampilan Admin

Tampilan yang harus kita buat sebenarnya sudah ditentukan di Controller. Kita bisa melihat, pemandangan apa saja yang dibutuhkan di sana

Berikut tampilan yang dimuat di Admin Controller

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

1

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

2

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

3

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

4

Mari kita lakukan semuanya

Buat file baru di folder

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

_5 dengan nama dan konten berikut

📜

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

_1


<html lang="en">

<head>
	load->view('admin/_partials/head.php') ?>
head>

<body>
	<main class="main">
		load->view('admin/_partials/side_nav.php') ?>

		<div class="content">
			<h1>Overviewh1>
			<p><b>13b> <span class="text-gray">Postspan>p>
			<p><b>11b> <span class="text-gray">Feedbackspan>p>	
			
			load->view('admin/_partials/footer.php') ?>
		div>
	main>
body>

html>

📜

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

_2

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_0

📜

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

_3

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_1

📜

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

_4

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_2

Jika kita perhatikan, semua kode yang ada di view belum menggunakan data apapun

Kami menampilkan tampilan dengan data hardcode yang akan kami tampilkan. Hal ini agar nantinya kita dapat dengan mudah menentukan seperti apa data yang akan ditampilkan

Coba kita lihat dulu hasilnya

Halaman Ikhtisar Dasbor

Halaman Daftar Artikel

halaman Daftar Umpan Balik

halaman pengaturan

Terlihat bagus 😍

Tetapi

Ini hanya tampilan, data tidak dinamis karena hardcoding

Nah, biarlah dinamis. Kami akan menggunakan data dari database untuk halaman Postingan dan Umpan Balik

Mari kita mulai dengan yang mudah terlebih dahulu

Itu adalah halaman Umpan Balik

Menampilkan Daftar Umpan Balik

Ubah

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

0 menjadi ini

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_3

Dalam model ini kami menambahkan dua metode, yaitu

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

1 dan

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

2

Metode

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

1 berfungsi untuk mengambil semua data dalam tabel

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

4;

Metode

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

2 berfungsi untuk menghapus umpan balik

Selanjutnya ubah Controller

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

_6 menjadi seperti ini

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_4

Jika kita perhatikan, pada Controller ini. kami menggunakan libraray

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

_7 untuk menampilkan umpan balik saat berhasil dihapus

Kami belum memuat perpustakaan ini

Oleh karena itu, tolong tambahkan

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

_8 ke bagian

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

9 menjadi seperti ini

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_5

Oke, sekarang ubah tampilan

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

_2 menjadi seperti ini

📜

body {
	margin: 0;
	padding: 0;
}

.main {
	display: flex;
}

.side-nav {
	background: teal;
	width: 25vw;
	max-width: 200px;
	height: 100vh;
}

.side-nav .brand {
	padding: 0 1rem;
	color: white;
}

.side-nav nav {
	display: flex;
	flex-direction: column;
}

.side-nav nav a {
	font-family: sans;
	text-decoration: none;
	color: white;
	padding: 0.8rem;
}

.side-nav nav a:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.content {
	padding: 1rem;
	padding-right: 2rem;
	width: 100%;
	position: static;
}

.toolbar {
	display: flex;
	margin: 1rem 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table,
th,
td {
	border: 1px solid grey;
	border-left: none;
	border-right: none;
	padding: 0.5rem;
	text-align: left;
}

.action {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
}

.footer {
	position: absolute;
	bottom: 1rem;
	text-align: center;
	font-family: sans-serif;
	font-size: 0.7rem;
}

/* Form */
form {
	box-sizing: border-box;
	padding: 0rem;
}
label {
	display: inline-block;
	margin-bottom: 0.5rem;
}
input, textarea {
	display: inline-block;
	padding: 0.5rem;
	margin-bottom: 1rem;
	width: 100%;
}
input:focus, textarea:focus {
	outline-color: dodgerblue;
}

/* Card */
.card {
	border: 1px solid lightgray;
	padding: 1rem;
	margin: 1rem 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	font-family: sans-serif;
}

/* Button */
.button {
	background-color: #e7e7e7;
	border: 2px solid transparent;
	border-radius: 8px;
	color: black;
	padding: 8px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-family: sans-serif;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
	background-color: #4caf50;
	color: white;
}
.button-primary {
	background-color: #008cba;
	color: white;
}
.button-danger {
	background-color: #f44336;
	color: white;
}

.button-small {
	font-size: 0.7rem;
}

/* Text */
.text-green {
	color: #4caf50;
}

.text-gray {
	color: grey;
}

.text-center {
	text-align: center;
}

_1

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_6

Pada tampilan ini, kita menggunakan library SweetAlert2 untuk menampilkan dialog konfirmasi dan pesan Toast saat data berhasil dihapus

Mari kita uji

Woo hoo. keren 😍

Nah, biar lebih baik

Juga tampilkan tampilan saat umpan balik kosong

Kita bisa membuat tampilan baru dengan nama

body {
	margin: 0;
	padding: 0;
}

.main {
	display: flex;
}

.side-nav {
	background: teal;
	width: 25vw;
	max-width: 200px;
	height: 100vh;
}

.side-nav .brand {
	padding: 0 1rem;
	color: white;
}

.side-nav nav {
	display: flex;
	flex-direction: column;
}

.side-nav nav a {
	font-family: sans;
	text-decoration: none;
	color: white;
	padding: 0.8rem;
}

.side-nav nav a:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.content {
	padding: 1rem;
	padding-right: 2rem;
	width: 100%;
	position: static;
}

.toolbar {
	display: flex;
	margin: 1rem 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table,
th,
td {
	border: 1px solid grey;
	border-left: none;
	border-right: none;
	padding: 0.5rem;
	text-align: left;
}

.action {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
}

.footer {
	position: absolute;
	bottom: 1rem;
	text-align: center;
	font-family: sans-serif;
	font-size: 0.7rem;
}

/* Form */
form {
	box-sizing: border-box;
	padding: 0rem;
}
label {
	display: inline-block;
	margin-bottom: 0.5rem;
}
input, textarea {
	display: inline-block;
	padding: 0.5rem;
	margin-bottom: 1rem;
	width: 100%;
}
input:focus, textarea:focus {
	outline-color: dodgerblue;
}

/* Card */
.card {
	border: 1px solid lightgray;
	padding: 1rem;
	margin: 1rem 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	font-family: sans-serif;
}

/* Button */
.button {
	background-color: #e7e7e7;
	border: 2px solid transparent;
	border-radius: 8px;
	color: black;
	padding: 8px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-family: sans-serif;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
	background-color: #4caf50;
	color: white;
}
.button-primary {
	background-color: #008cba;
	color: white;
}
.button-danger {
	background-color: #f44336;
	color: white;
}

.button-small {
	font-size: 0.7rem;
}

/* Text */
.text-green {
	color: #4caf50;
}

.text-gray {
	color: grey;
}

.text-center {
	text-align: center;
}

2 di dalam folder

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

5 dengan isi seperti ini

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_7

Kemudian, ubah Umpan Balik Pengontrol dalam metode

body {
	margin: 0;
	padding: 0;
}

.main {
	display: flex;
}

.side-nav {
	background: teal;
	width: 25vw;
	max-width: 200px;
	height: 100vh;
}

.side-nav .brand {
	padding: 0 1rem;
	color: white;
}

.side-nav nav {
	display: flex;
	flex-direction: column;
}

.side-nav nav a {
	font-family: sans;
	text-decoration: none;
	color: white;
	padding: 0.8rem;
}

.side-nav nav a:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.content {
	padding: 1rem;
	padding-right: 2rem;
	width: 100%;
	position: static;
}

.toolbar {
	display: flex;
	margin: 1rem 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table,
th,
td {
	border: 1px solid grey;
	border-left: none;
	border-right: none;
	padding: 0.5rem;
	text-align: left;
}

.action {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
}

.footer {
	position: absolute;
	bottom: 1rem;
	text-align: center;
	font-family: sans-serif;
	font-size: 0.7rem;
}

/* Form */
form {
	box-sizing: border-box;
	padding: 0rem;
}
label {
	display: inline-block;
	margin-bottom: 0.5rem;
}
input, textarea {
	display: inline-block;
	padding: 0.5rem;
	margin-bottom: 1rem;
	width: 100%;
}
input:focus, textarea:focus {
	outline-color: dodgerblue;
}

/* Card */
.card {
	border: 1px solid lightgray;
	padding: 1rem;
	margin: 1rem 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	font-family: sans-serif;
}

/* Button */
.button {
	background-color: #e7e7e7;
	border: 2px solid transparent;
	border-radius: 8px;
	color: black;
	padding: 8px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-family: sans-serif;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
	background-color: #4caf50;
	color: white;
}
.button-primary {
	background-color: #008cba;
	color: white;
}
.button-danger {
	background-color: #f44336;
	color: white;
}

.button-small {
	font-size: 0.7rem;
}

/* Text */
.text-green {
	color: #4caf50;
}

.text-gray {
	color: grey;
}

.text-center {
	text-align: center;
}

4 menjadi seperti ini

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_8

Jadi hasilnya

Josh. Halaman umpan balik sudah siap

Selanjutnya silahkan lanjutkan ke

Membuat Artikel CRUD

Kami telah membuat tampilan untuk halaman artikel di hartcode

Nah, sekarang saatnya kita membuatnya hidup dan bekerja seperti yang kita harapkan

Baiklah, mari kita mulai

1. Ubah Model Artikel

Ubah model

body {
	margin: 0;
	padding: 0;
}

.main {
	display: flex;
}

.side-nav {
	background: teal;
	width: 25vw;
	max-width: 200px;
	height: 100vh;
}

.side-nav .brand {
	padding: 0 1rem;
	color: white;
}

.side-nav nav {
	display: flex;
	flex-direction: column;
}

.side-nav nav a {
	font-family: sans;
	text-decoration: none;
	color: white;
	padding: 0.8rem;
}

.side-nav nav a:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.content {
	padding: 1rem;
	padding-right: 2rem;
	width: 100%;
	position: static;
}

.toolbar {
	display: flex;
	margin: 1rem 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table,
th,
td {
	border: 1px solid grey;
	border-left: none;
	border-right: none;
	padding: 0.5rem;
	text-align: left;
}

.action {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
}

.footer {
	position: absolute;
	bottom: 1rem;
	text-align: center;
	font-family: sans-serif;
	font-size: 0.7rem;
}

/* Form */
form {
	box-sizing: border-box;
	padding: 0rem;
}
label {
	display: inline-block;
	margin-bottom: 0.5rem;
}
input, textarea {
	display: inline-block;
	padding: 0.5rem;
	margin-bottom: 1rem;
	width: 100%;
}
input:focus, textarea:focus {
	outline-color: dodgerblue;
}

/* Card */
.card {
	border: 1px solid lightgray;
	padding: 1rem;
	margin: 1rem 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	font-family: sans-serif;
}

/* Button */
.button {
	background-color: #e7e7e7;
	border: 2px solid transparent;
	border-radius: 8px;
	color: black;
	padding: 8px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-family: sans-serif;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
	background-color: #4caf50;
	color: white;
}
.button-primary {
	background-color: #008cba;
	color: white;
}
.button-danger {
	background-color: #f44336;
	color: white;
}

.button-small {
	font-size: 0.7rem;
}

/* Text */
.text-green {
	color: #4caf50;
}

.text-gray {
	color: grey;
}

.text-center {
	text-align: center;
}

_5 menjadi seperti ini

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_9

Dalam Model

body {
	margin: 0;
	padding: 0;
}

.main {
	display: flex;
}

.side-nav {
	background: teal;
	width: 25vw;
	max-width: 200px;
	height: 100vh;
}

.side-nav .brand {
	padding: 0 1rem;
	color: white;
}

.side-nav nav {
	display: flex;
	flex-direction: column;
}

.side-nav nav a {
	font-family: sans;
	text-decoration: none;
	color: white;
	padding: 0.8rem;
}

.side-nav nav a:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.content {
	padding: 1rem;
	padding-right: 2rem;
	width: 100%;
	position: static;
}

.toolbar {
	display: flex;
	margin: 1rem 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table,
th,
td {
	border: 1px solid grey;
	border-left: none;
	border-right: none;
	padding: 0.5rem;
	text-align: left;
}

.action {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
}

.footer {
	position: absolute;
	bottom: 1rem;
	text-align: center;
	font-family: sans-serif;
	font-size: 0.7rem;
}

/* Form */
form {
	box-sizing: border-box;
	padding: 0rem;
}
label {
	display: inline-block;
	margin-bottom: 0.5rem;
}
input, textarea {
	display: inline-block;
	padding: 0.5rem;
	margin-bottom: 1rem;
	width: 100%;
}
input:focus, textarea:focus {
	outline-color: dodgerblue;
}

/* Card */
.card {
	border: 1px solid lightgray;
	padding: 1rem;
	margin: 1rem 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	font-family: sans-serif;
}

/* Button */
.button {
	background-color: #e7e7e7;
	border: 2px solid transparent;
	border-radius: 8px;
	color: black;
	padding: 8px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-family: sans-serif;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
	background-color: #4caf50;
	color: white;
}
.button-primary {
	background-color: #008cba;
	color: white;
}
.button-danger {
	background-color: #f44336;
	color: white;
}

.button-small {
	font-size: 0.7rem;
}

/* Text */
.text-green {
	color: #4caf50;
}

.text-gray {
	color: grey;
}

.text-center {
	text-align: center;
}

_5 kami menambahkan beberapa metode yang akan diperlukan untuk operasi data

Metode

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

_1 untuk mengambil semua artikel dari database;

Metode

body {
	margin: 0;
	padding: 0;
}

.main {
	display: flex;
}

.side-nav {
	background: teal;
	width: 25vw;
	max-width: 200px;
	height: 100vh;
}

.side-nav .brand {
	padding: 0 1rem;
	color: white;
}

.side-nav nav {
	display: flex;
	flex-direction: column;
}

.side-nav nav a {
	font-family: sans;
	text-decoration: none;
	color: white;
	padding: 0.8rem;
}

.side-nav nav a:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.content {
	padding: 1rem;
	padding-right: 2rem;
	width: 100%;
	position: static;
}

.toolbar {
	display: flex;
	margin: 1rem 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table,
th,
td {
	border: 1px solid grey;
	border-left: none;
	border-right: none;
	padding: 0.5rem;
	text-align: left;
}

.action {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
}

.footer {
	position: absolute;
	bottom: 1rem;
	text-align: center;
	font-family: sans-serif;
	font-size: 0.7rem;
}

/* Form */
form {
	box-sizing: border-box;
	padding: 0rem;
}
label {
	display: inline-block;
	margin-bottom: 0.5rem;
}
input, textarea {
	display: inline-block;
	padding: 0.5rem;
	margin-bottom: 1rem;
	width: 100%;
}
input:focus, textarea:focus {
	outline-color: dodgerblue;
}

/* Card */
.card {
	border: 1px solid lightgray;
	padding: 1rem;
	margin: 1rem 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	font-family: sans-serif;
}

/* Button */
.button {
	background-color: #e7e7e7;
	border: 2px solid transparent;
	border-radius: 8px;
	color: black;
	padding: 8px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-family: sans-serif;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
	background-color: #4caf50;
	color: white;
}
.button-primary {
	background-color: #008cba;
	color: white;
}
.button-danger {
	background-color: #f44336;
	color: white;
}

.button-small {
	font-size: 0.7rem;
}

/* Text */
.text-green {
	color: #4caf50;
}

.text-gray {
	color: grey;
}

.text-center {
	text-align: center;
}

_8 hanya mengambil satu artikel dengan id tertentu;

Metode

body {
	margin: 0;
	padding: 0;
}

.main {
	display: flex;
}

.side-nav {
	background: teal;
	width: 25vw;
	max-width: 200px;
	height: 100vh;
}

.side-nav .brand {
	padding: 0 1rem;
	color: white;
}

.side-nav nav {
	display: flex;
	flex-direction: column;
}

.side-nav nav a {
	font-family: sans;
	text-decoration: none;
	color: white;
	padding: 0.8rem;
}

.side-nav nav a:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.content {
	padding: 1rem;
	padding-right: 2rem;
	width: 100%;
	position: static;
}

.toolbar {
	display: flex;
	margin: 1rem 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table,
th,
td {
	border: 1px solid grey;
	border-left: none;
	border-right: none;
	padding: 0.5rem;
	text-align: left;
}

.action {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
}

.footer {
	position: absolute;
	bottom: 1rem;
	text-align: center;
	font-family: sans-serif;
	font-size: 0.7rem;
}

/* Form */
form {
	box-sizing: border-box;
	padding: 0rem;
}
label {
	display: inline-block;
	margin-bottom: 0.5rem;
}
input, textarea {
	display: inline-block;
	padding: 0.5rem;
	margin-bottom: 1rem;
	width: 100%;
}
input:focus, textarea:focus {
	outline-color: dodgerblue;
}

/* Card */
.card {
	border: 1px solid lightgray;
	padding: 1rem;
	margin: 1rem 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	font-family: sans-serif;
}

/* Button */
.button {
	background-color: #e7e7e7;
	border: 2px solid transparent;
	border-radius: 8px;
	color: black;
	padding: 8px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-family: sans-serif;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
	background-color: #4caf50;
	color: white;
}
.button-primary {
	background-color: #008cba;
	color: white;
}
.button-danger {
	background-color: #f44336;
	color: white;
}

.button-small {
	font-size: 0.7rem;
}

/* Text */
.text-green {
	color: #4caf50;
}

.text-gray {
	color: grey;
}

.text-center {
	text-align: center;
}

_9 untuk menambahkan artikel baru;

Metode


<html lang="en">

<head>
	load->view('admin/_partials/head.php') ?>
head>

<body>
	<main class="main">
		load->view('admin/_partials/side_nav.php') ?>

		<div class="content">
			<h1>Overviewh1>
			<p><b>13b> <span class="text-gray">Postspan>p>
			<p><b>11b> <span class="text-gray">Feedbackspan>p>	
			
			load->view('admin/_partials/footer.php') ?>
		div>
	main>
body>

html>

0 untuk memperbarui artikel;

dan metode

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

_2 untuk menghapus artikel

Selanjutnya, lanjutkan

2. Ubah Posting Admin Pengontrol

Ubah Pengontrol


<html lang="en">

<head>
	load->view('admin/_partials/head.php') ?>
head>

<body>
	<main class="main">
		load->view('admin/_partials/side_nav.php') ?>

		<div class="content">
			<h1>Overviewh1>
			<p><b>13b> <span class="text-gray">Postspan>p>
			<p><b>11b> <span class="text-gray">Feedbackspan>p>	
			
			load->view('admin/_partials/footer.php') ?>
		div>
	main>
body>

html>

_2 menjadi seperti ini

php

class Post extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/post_list.php');
	}
}

0

Ada beberapa metode yang kami tambahkan dan ubah di sini

Metode


<html lang="en">

<head>
	load->view('admin/_partials/head.php') ?>
head>

<body>
	<main class="main">
		load->view('admin/_partials/side_nav.php') ?>

		<div class="content">
			<h1>Overviewh1>
			<p><b>13b> <span class="text-gray">Postspan>p>
			<p><b>11b> <span class="text-gray">Feedbackspan>p>	
			
			load->view('admin/_partials/footer.php') ?>
		div>
	main>
body>

html>

_3 konstruktor untuk memuat model

body {
	margin: 0;
	padding: 0;
}

.main {
	display: flex;
}

.side-nav {
	background: teal;
	width: 25vw;
	max-width: 200px;
	height: 100vh;
}

.side-nav .brand {
	padding: 0 1rem;
	color: white;
}

.side-nav nav {
	display: flex;
	flex-direction: column;
}

.side-nav nav a {
	font-family: sans;
	text-decoration: none;
	color: white;
	padding: 0.8rem;
}

.side-nav nav a:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.content {
	padding: 1rem;
	padding-right: 2rem;
	width: 100%;
	position: static;
}

.toolbar {
	display: flex;
	margin: 1rem 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table,
th,
td {
	border: 1px solid grey;
	border-left: none;
	border-right: none;
	padding: 0.5rem;
	text-align: left;
}

.action {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
}

.footer {
	position: absolute;
	bottom: 1rem;
	text-align: center;
	font-family: sans-serif;
	font-size: 0.7rem;
}

/* Form */
form {
	box-sizing: border-box;
	padding: 0rem;
}
label {
	display: inline-block;
	margin-bottom: 0.5rem;
}
input, textarea {
	display: inline-block;
	padding: 0.5rem;
	margin-bottom: 1rem;
	width: 100%;
}
input:focus, textarea:focus {
	outline-color: dodgerblue;
}

/* Card */
.card {
	border: 1px solid lightgray;
	padding: 1rem;
	margin: 1rem 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	font-family: sans-serif;
}

/* Button */
.button {
	background-color: #e7e7e7;
	border: 2px solid transparent;
	border-radius: 8px;
	color: black;
	padding: 8px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-family: sans-serif;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
	background-color: #4caf50;
	color: white;
}
.button-primary {
	background-color: #008cba;
	color: white;
}
.button-danger {
	background-color: #f44336;
	color: white;
}

.button-small {
	font-size: 0.7rem;
}

/* Text */
.text-green {
	color: #4caf50;
}

.text-gray {
	color: grey;
}

.text-center {
	text-align: center;
}

5 secara default;

Metode

body {
	margin: 0;
	padding: 0;
}

.main {
	display: flex;
}

.side-nav {
	background: teal;
	width: 25vw;
	max-width: 200px;
	height: 100vh;
}

.side-nav .brand {
	padding: 0 1rem;
	color: white;
}

.side-nav nav {
	display: flex;
	flex-direction: column;
}

.side-nav nav a {
	font-family: sans;
	text-decoration: none;
	color: white;
	padding: 0.8rem;
}

.side-nav nav a:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.content {
	padding: 1rem;
	padding-right: 2rem;
	width: 100%;
	position: static;
}

.toolbar {
	display: flex;
	margin: 1rem 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table,
th,
td {
	border: 1px solid grey;
	border-left: none;
	border-right: none;
	padding: 0.5rem;
	text-align: left;
}

.action {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
}

.footer {
	position: absolute;
	bottom: 1rem;
	text-align: center;
	font-family: sans-serif;
	font-size: 0.7rem;
}

/* Form */
form {
	box-sizing: border-box;
	padding: 0rem;
}
label {
	display: inline-block;
	margin-bottom: 0.5rem;
}
input, textarea {
	display: inline-block;
	padding: 0.5rem;
	margin-bottom: 1rem;
	width: 100%;
}
input:focus, textarea:focus {
	outline-color: dodgerblue;
}

/* Card */
.card {
	border: 1px solid lightgray;
	padding: 1rem;
	margin: 1rem 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	font-family: sans-serif;
}

/* Button */
.button {
	background-color: #e7e7e7;
	border: 2px solid transparent;
	border-radius: 8px;
	color: black;
	padding: 8px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-family: sans-serif;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
	background-color: #4caf50;
	color: white;
}
.button-primary {
	background-color: #008cba;
	color: white;
}
.button-danger {
	background-color: #f44336;
	color: white;
}

.button-small {
	font-size: 0.7rem;
}

/* Text */
.text-green {
	color: #4caf50;
}

.text-gray {
	color: grey;
}

.text-center {
	text-align: center;
}

_4 untuk menampilkan daftar artikel baik dalam status terbit maupun draf;

Metode


<html lang="en">

<head>
	load->view('admin/_partials/head.php') ?>
head>

<body>
	<main class="main">
		load->view('admin/_partials/side_nav.php') ?>

		<div class="content">
			<h1>Overviewh1>
			<p><b>13b> <span class="text-gray">Postspan>p>
			<p><b>11b> <span class="text-gray">Feedbackspan>p>	
			
			load->view('admin/_partials/footer.php') ?>
		div>
	main>
body>

html>

_6 untuk membuat atau menambah artikel baru;

Metode


<html lang="en">

<head>
	load->view('admin/_partials/head.php') ?>
head>

<body>
	<main class="main">
		load->view('admin/_partials/side_nav.php') ?>

		<div class="content">
			<h1>Overviewh1>
			<p><b>13b> <span class="text-gray">Postspan>p>
			<p><b>11b> <span class="text-gray">Feedbackspan>p>	
			
			load->view('admin/_partials/footer.php') ?>
		div>
	main>
body>

html>

_7 untuk mengubah artikel tertentu;

dan metode

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

_2 untuk menghapus artikel

Dalam metode


<html lang="en">

<head>
	load->view('admin/_partials/head.php') ?>
head>

<body>
	<main class="main">
		load->view('admin/_partials/side_nav.php') ?>

		<div class="content">
			<h1>Overviewh1>
			<p><b>13b> <span class="text-gray">Postspan>p>
			<p><b>11b> <span class="text-gray">Feedbackspan>p>	
			
			load->view('admin/_partials/footer.php') ?>
		div>
	main>
body>

html>

6 kami menggunakan fungsi

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

00 dari helper

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

01 untuk membuat siput dan

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

02 untuk membuat id unik

php

class Post extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/post_list.php');
	}
}

1

Kami juga menggunakan libraray

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_03 pada metode


<html lang="en">

<head>
	load->view('admin/_partials/head.php') ?>
head>

<body>
	<main class="main">
		load->view('admin/_partials/side_nav.php') ?>

		<div class="content">
			<h1>Overviewh1>
			<p><b>13b> <span class="text-gray">Postspan>p>
			<p><b>11b> <span class="text-gray">Feedbackspan>p>	
			
			load->view('admin/_partials/footer.php') ?>
		div>
	main>
body>

html>

_6,


<html lang="en">

<head>
	load->view('admin/_partials/head.php') ?>
head>

<body>
	<main class="main">
		load->view('admin/_partials/side_nav.php') ?>

		<div class="content">
			<h1>Overviewh1>
			<p><b>13b> <span class="text-gray">Postspan>p>
			<p><b>11b> <span class="text-gray">Feedbackspan>p>	
			
			load->view('admin/_partials/footer.php') ?>
		div>
	main>
body>

html>

7, dan

<aside class="side-nav">
	<div class="brand">
		<h2>Berita Codingh2>
	div>
	<nav>
		<a href="">Overviewa>
		<a href="">Posta>
		<a href="">Feedbacka>
		<a href="">Settinga>
		<a href="">Logouta>
	nav>
aside>

2 untuk menampilkan data atau pesan flash

php

class Post extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/post_list.php');
	}
}

2

Ini nantinya akan ditampilkan dengan Toast dari SweetAlert2

Sekarang mari kita lanjutkan mengubah tampilan

3. Ubah Tampilan Posting Admin

Pertama ubah tampilan

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_07 menjadi seperti ini

📜

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_08

php

class Post extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/post_list.php');
	}
}

3

Selanjutnya kita membutuhkan view untuk form tambah dan edit form

Silahkan buat view baru di folder 📁

<footer class="footer">
	©  Beritacoding.com Version 1.0.0
footer>

5 dengan nama

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

10 dan

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

11 dengan isi sebagai berikut

📜

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_12

php

class Post extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/post_list.php');
	}
}

4

📜

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_13

php

class Post extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/post_list.php');
	}
}

5

Nah, sekarang semuanya sudah siap

Ayo lakukan

4. Percobaan

Coba buka halaman admin daftar artikel

Jika kita sudah menambahkan artikel, maka artikel tersebut akan ditampilkan

Selanjutnya, coba buat artikel baru

Coba juga edit artikelnya

Terakhir coba hapus artikel tersebut

Semuanya bekerja tanpa kesalahan

Hanya sentuhan terakhir untuk artikel tersebut

5. Buat Tampilan Saat Artikel Kosong

Saat artikel kosong, halaman admin postingan hanya akan menampilkan header dari tabel seperti ini

Namun kita ingin yang ditampilkan adalah pesan jika artikel tersebut kosong

Kita bisa melakukannya dengan membuat tampilan baru seperti halaman umpan balik, atau juga membuat logika di tampilan untuk menampilkan pesan "artikel kosong"

Agar konsisten, kami mengikuti metode yang sama seperti di halaman umpan balik. Artinya, buat tampilan baru

Buat view baru di folder

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_14 dengan nama

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

15 dengan isi sebagai berikut

📜

php

class Feedback extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/feedback_list');
	}

}

_16

php

class Post extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/post_list.php');
	}
}

6

Kemudian ubah method

body {
	margin: 0;
	padding: 0;
}

.main {
	display: flex;
}

.side-nav {
	background: teal;
	width: 25vw;
	max-width: 200px;
	height: 100vh;
}

.side-nav .brand {
	padding: 0 1rem;
	color: white;
}

.side-nav nav {
	display: flex;
	flex-direction: column;
}

.side-nav nav a {
	font-family: sans;
	text-decoration: none;
	color: white;
	padding: 0.8rem;
}

.side-nav nav a:hover {
	background-color: rgba(0, 0, 0, 0.2);
}

.content {
	padding: 1rem;
	padding-right: 2rem;
	width: 100%;
	position: static;
}

.toolbar {
	display: flex;
	margin: 1rem 0;
}

.table {
	width: 100%;
	border-collapse: collapse;
}

.table,
th,
td {
	border: 1px solid grey;
	border-left: none;
	border-right: none;
	padding: 0.5rem;
	text-align: left;
}

.action {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
}

.footer {
	position: absolute;
	bottom: 1rem;
	text-align: center;
	font-family: sans-serif;
	font-size: 0.7rem;
}

/* Form */
form {
	box-sizing: border-box;
	padding: 0rem;
}
label {
	display: inline-block;
	margin-bottom: 0.5rem;
}
input, textarea {
	display: inline-block;
	padding: 0.5rem;
	margin-bottom: 1rem;
	width: 100%;
}
input:focus, textarea:focus {
	outline-color: dodgerblue;
}

/* Card */
.card {
	border: 1px solid lightgray;
	padding: 1rem;
	margin: 1rem 0;
}

.card-header {
	display: flex;
	justify-content: space-between;
	font-family: sans-serif;
}

/* Button */
.button {
	background-color: #e7e7e7;
	border: 2px solid transparent;
	border-radius: 8px;
	color: black;
	padding: 8px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1rem;
	font-family: sans-serif;
}

.button:hover {
	opacity: 0.8;
}

.button:active {
	border: 2px solid rgba(0, 0, 0, 0.5);
}

.button-success {
	background-color: #4caf50;
	color: white;
}
.button-primary {
	background-color: #008cba;
	color: white;
}
.button-danger {
	background-color: #f44336;
	color: white;
}

.button-small {
	font-size: 0.7rem;
}

/* Text */
.text-green {
	color: #4caf50;
}

.text-gray {
	color: grey;
}

.text-center {
	text-align: center;
}

4 pada Controller


<html lang="en">

<head>
	load->view('admin/_partials/head.php') ?>
head>

<body>
	<main class="main">
		load->view('admin/_partials/side_nav.php') ?>

		<div class="content">
			<h1>Overviewh1>
			<p><b>13b> <span class="text-gray">Postspan>p>
			<p><b>11b> <span class="text-gray">Feedbackspan>p>	
			
			load->view('admin/_partials/footer.php') ?>
		div>
	main>
body>

html>

2 menjadi seperti ini

php

class Post extends CI_Controller
{
	public function index()
	{
		$this->load->view('admin/post_list.php');
	}
}

7

Sekarang coba hapus semua artikel, lalu hasilnya

Besar

ini yang terakhir

Tingkatkan Halaman Ikhtisar

Kami akan menggunakan halaman ikhtisar untuk menampilkan jumlah artikel yang telah dibuat dan umpan balik total yang telah diterima

Bagaimana cara membuat halaman dasbor?

Membuat Halaman Dashboard Tentunya setelah user login akan diarahkan ke halaman dashboard. Buat file baru, lalu masukkan ke dalamnya. Contoh keluaran dari kode skrip yang dibuat untuk halaman dasbor. Foto. Rasa Cepat

Bagaimana cara menghubungkan PHP dan MySQL menggunakan mysqli secara prosedural?

Dalam tutorial ini, kita akan belajar bagaimana menghubungkan PHP dan MySQL menggunakan API mysqli secara prosedural. Pertama, mari buat database dengan nama Registration_students. Setelah itu, buat tabel di database tersebut dengan nama kandidat_siswa. Berikan tipe data kolom seperti ini. Setelah itu klik Simpan

Langkah pertama dalam membuat form login dengan PHP dan database MySQL adalah membuat database terlebih dahulu. Masuk ke PHPMyAdmin, lalu klik tab 'Database' untuk membuat database baru. Selanjutnya, masukkan nama database Anda. Kemudian, klik tombol 'Buat Database'. Cara membuat form login dengan PHP dan database MySQL. Foto. Rasa Cepat

Bagaimana cara membuat basis data?

Isikan nama database yang akan dibuat yaitu “student” pada kotak “Create Database”. Lalu klik “Create”, maka secara otomatis database yang ingin dibuat sudah dibuat. Membuat Nama Database3. Kemudian akan muncul tampilan yang menunjukkan suksesnya pembentukan database yang dibuat serta tampilan pembuatan tabel

kode php

Cara menggunakan untuk membuat dashboard mysql php

Buat Pengontrol Admin

Buat Rute Default untuk Admin

Buat Template Admin

Buat Tampilan Admin

Menampilkan Daftar Umpan Balik

Membuat Artikel CRUD

1. Ubah Model Artikel

2. Ubah Posting Admin Pengontrol

3. Ubah Tampilan Posting Admin

4. Percobaan

5. Buat Tampilan Saat Artikel Kosong

Tingkatkan Halaman Ikhtisar

Bagaimana cara membuat halaman dasbor?

Bagaimana cara menghubungkan PHP dan MySQL menggunakan mysqli secara prosedural?

Bagaimana cara membuat form login dengan database php dan MySQL?

Bagaimana cara membuat basis data?

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội