Mari kita mulai pembelajarannya.
Pertama download dulu Codeigniter 3 nya di sini -> Download Codeigniter 3
Pilih yang Codeigniter 3 :
Setelah download selanjutnya copy filenya dan paste di
C:\xampp\htdocs atau
D:\xampp\htdocs extract file codeigniter nya di folder tersebut, dengan cara klik kanan kemudian
extract herekemudian rename folder yang semula seperti ini:
rename folder dengan cara klik kanan -> rename, silahkan rename sesuai keinginan, dan jangan menggunakan spasi, sebagai gantinya pakailah underscore _
dari contoh diatas saya menamai folder dengan nama
SANTRIselanjutnya buka folder tersebut menggunakan text editor, misal sublime text, kamu tinggal pilih menu file -> open folder, dan pilih folder project.
Lanjut ke tahap selanjutnya.
Apabila kamu belum membuat database silahkan mampir dulu ke sini -> Cara Membuat Database
Konfigurasi database & autoload
Petama buka file autoload.php yang letaknya di application\config\autoload.php kemudian gulir ke baris 61, dan atur $autoload['libraries'] = array('database'); lihat gambar dibawah :
tujuan dari pengaturan tersebut yaitu untuk memanggil library database agar dapat berjalan pada tahap pemanggilan database di bagian selanjutnya.
selanjutnya silahkan scroll lagi kebawah ke baris 92 dan atur seperti gambar dibawah ini :
tujuan dari pengaturan tersebut adalah agar codeigniter memuat secara otomatis helper yang berfungsi memanggil url
base_url() yang mana nanti akan kita gunakan pada kode php di html.
save file dengan cara menekan
ctrl+sselanjutnya masuk ke file config.php yang letaknya di application\config\config.php kemudian scroll ke baris 52 dan atur seperti gambar dibawah ini :
pada gambar di atas saya memasukkan alamat
http://localhost/santri yang mana
santri disana merupakan nama folder project yang sedang kita buat, dan kalau di hosting kita mengganti bagian ini dengan alamat domain utama web kita.
tekan ctrl+s untuk menyimpan
lanjut ke file
database.php yang letaknkya di
application\config\database.php silahkan gulir ke baris 79 isikan
'root' dan baris 81 isikan nama database, lihat gambar dibawah ini :
disana saya mengatur username default yaitu 'root', dan databasenya dengan nama santri, karena saya sebelumnya membuat database dengan nama santri, jika kamu belum membuat database silahkan mampir dulu ke sini -> Cara Membuat Database
setelah itu di simpan dengan tekan ctrl+s
untuk mengujinya pertama aktifkan dulu xampp nya, buka aplikasinya dengan klik start -> xampp control panel :
kemudian setelah terbuka aktifkan Apache dan MySQL dengan menekan tombol
startsekarang coba kamu buka browser misal mozilla firefox, kemudian ketik di address bar: http://localhost/santri/ maka akan tampil halaman seperti berikut :
Membuat Controllerbuka folder Controller kemudian klik kanan dan pilih new file, untuk membuat file php baru.
kemudian masukkan nama Profil.php selanjutnya isikan kode seperti berikut :
disana ada class dengan nama sama seperti nama file, yang merupakan bagian CI_Controller, dan ada beberapa function didalam kelas tersebut, function __construct dipanggil saat aplikasi pertama kali dijalankan untuk memanggil model yang memuat data dari database yang disediakan M_profil.
kemudian dibawahnya ada function index yang dijalankan sebagai antarmuka default aplikasi saat dijalankan, disini memanggil view html yang bernama profil_view kemudian disuntikkan data content ke view untuk ditampilkan.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Profil extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('M_profil');
}
public function index()
{
$data = array(
"content" => $this->M_profil->semua()
);
$this->load->view('profil_view', $data);
}
}
selanjutnya simpan dengan cara tekan
ctrl+s Membuat ModelsSelanjutnya untuk membuat models, buka folder models kemudian klik kanan -> New File,
masukkan nama file nya yaitu M_profil.php kemudian isi seperti gambar dibawah :
biar mudah silahkan copy paste kodenya :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class M_profil extends CI_Model {
private $table = 'profil_santri';
public function semua()
{
$this->db->select('*');
$this->db->from($this->table);
$hasil = $this->db->get()->result();
return $hasil;
}
}
simpan dengan cara tekan ctrl+s.
pada kode di atas nama class sama dengan nama file, dan extends nya menggunakan CI_Model.
kemudian ada private $table sebagai variabael yang menyimpan nama tabel yang tersedia di database, untuk dipanggil dalam function-function yang akan kita gunakan.
dibawahnya ada function semua() yang isinya mengambil data dari database tepatnya dari tabel profil_santri kemudian mengembalikan hasilnya dengan return.
Menampilkan Data dari database di View
Selanjutnya kita tampilkan data dari database di view, silahkan bukan folder view dan buat file php baru dengan nama profil_view.php :
pada kode di atas ada kode html 5 dengan bootstrap 4, kemudian ada kode php yang memproses data content yang dikasih controller untuk di tampilkan di view, untuk mempermudah silahkan copy paste kodenya :
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<?php $no = 1;
foreach ($content as $item) { ?>
<table class="table">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
<th>Telepon</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row"><?php echo $no++ ?></td>
<td><?php echo $item->nama_lengkap ?></td>
<td><?php echo $item->alamat ?></td>
<td><?php echo $item->telepon ?></td>
</tr>
</tbody>
</table>
<?php } ?>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
selanjutnya simpan dengan menekan
ctrl+s.
pastikan xampp nya aktif dan Apache serta MySQL nya aktif,
kemudian buka browser misal mozilla firefox, kemudian ketikkan alamat berikut di address bar :
http://localhost/santri/index.php/profil
maka akan tampil seperti gambar di bawah ini:
OK, sampai sini dulu, jika ada yang ingin ditanyakan silahkan tulis komentar di bawah.
Semoga Bermanfaat.
0 Response to "Belajar Codeigniter 3 detail, disertai gambar"
Post a Comment
Berkomentarlah sesuai dengan topik pembahasan dan dengan menggunakan bahasa Indonesia yang baik dan benar sesuai EYD
dan berkomentarlah dengan kata yang sopan.
Terima Kasih :)