PEMBUATAN HALAMAN HOME, ARTICLE, ABOUT, CONTACT

“Mata Kuliah Pemrograman Berbasis Website”

Disusun Oleh:
Kelompok 1
1. Ana Tazkia Zahro / G41210097 / 05
2. Chiquita Putri Maharani / G41210120 / 07
3. Ananda Yuliantika / G41210352 / 13
4. Evalini Nur Rachmasari / G41210584 / 28
5. Sri Wahyu Ningsih / G41210590 / 30

Dosen Pengampu
Erna Selviyanti, S.Pd., M.MSI

PROGRAM STUDI D IV MANAJEMEN INFORMASI KESEHATAN

JURUSAN KESEHATAN
POLITEKNIK NEGERI JEMBER
2023
1. Download Code Igniter, ekstrak file tersebut ke dalam c:\xampp\htdocs,
Setelah itu, ubah nama CodeIgniter-3.x.xx menjadi belajar atau nama
apapun yang diinginkan. Sekarang coba buka web browser dan buka
alamat: http://localhost/belajar/
2. Silahkan buka teks Editor VS Code, lalu pilih File->Open Folder. Cari
folder belajar. Atau File> Open File> Belajar. Maka kita akan
mendapatan struktur direktori seperti ini.
3. Tedapat dua direktori penting di dalam CI yang harus kamu perhatikan,
yakni: 📁 application dan 📁 system.
4. Tambahkan route /about/ dan /contact/ di dalam Controller Welcome
dengan method ini:
a. Tambahkan di bawah method index().

5. Setelah itu tambahkan dua buah file view di dalam direktori 📁 views
dengan isi sebagai berikut.

a. 📄 views/about.php
 b. 📄 views/contact.php

6. Route sudah kita tambahkan. Sekarang coba buka:

http://localhost/belajar/index.php/welcome/about/
7. Biar enak, kita ubah Controller Welcome menjadi Page. Ubah nama
Welcome.php menjadi Page.php dengan me rename.

8. Lalu ubah, isinya menjadi seperti ini:

9. Perhatikan! Di Controller Page, kita melakukan load view home dan view
ini belum kita buat. Kita bisa memanfaatkan view welcome_message.php
untuk menjadi view home. Silahkan rename welcome_message.php
menjadi home.php
 a. Ubahlah route default di config/routes.php menjadi seperti ini:

b. Nah, sekarang kita sudah punya Controller Page yang berfungsi

untuk menampilkan beberapa halaman seperti Home, About, dan
Contact.
10.Kita akan membuat Controller Article untuk menampilkan list artikel dan
detail artikel. Buatlah file baru di dalam application/controllers/ dengan
nama Article.php.

11.Pada kode di atas, kita membuat variabel $data dengan isi array untuk
dummy data yang akan ditampilkan ke view list_article.php. View yang
kita load belum dibuat. Mari kita buat.. Buatlah folder baru di dalam
views dengan nama articles dengan kode masing-masing sebagai berikut:

a. 📜 views/articles/list_article.php

b. 📜 views/articles/empty_article.php

c. 📜 views/articles/show_article.php

Sekarang mari kita coba. Buka URL berikut: http://localhost/belajar/index.php/article/

Coba juga untuk membuka

 http://localhost/belajar/index.php/article/show

12. Setelah kita belajar banyak tentang input dan output di Controller, saatnya kita
mencoba sendiri. Oke, sekarang coba buka kembali Controller Page.
13. Pada Controller ini, kita akan coba mengambil input dari method contact(). Mari kita
buat form-nya dulu! Bukalah file view/contact.php kemudian isi kodenya menjadi
seperti ini:

Perhatikan! Pada form ini kita menggunakan atribut action="" yang artinya kita akan
mengirim post ke method yang me-load view tersebut, dalam kasus ini contact().
Apabila ingin mengirim data ke controller yang lain, kita bisa tentukan alamat
controllernya pada atribut action="".
Contohnya:

14. Sekarang ubahlah method contact() pada Controller Page menjadi seperti ini:
 Mari kita coba hasilnya:
Buka http://localhost/belajar/index.php/contact

Ini hanya tampilan.. dikarenakan kita belum membuat database nya.

15. Pada kode beritacoding, kita sudah membuat tiga view seperti ini:
📜 views/articles/list_article.php
📜 views/articles/empty_article.php
📜 views/articles/show_article.php
Sejauh ini tidak ada masalah, tapi akan lebih baik jika membuatkan template supaya
tidak mengulang kode yang sama terus-menerus. Mari kita buat!
Buatlah folder baru di dalam application/views dengan nama _partials.
Folder ini berisi bagian kode View yang akan dipakai di beberapa view.
Buatlah tiga file di dalam folder _partials dengan nama head.php, navbar.php, dan
footer.php.

Kemudian isi masing-masing kode seperti berikut ini:

📜 _partials/head.php
 Pada partial ini, kita menggunakan data dari variabel $meta yang nanti akan kita kirim
melalui Controller. Pada contoh di atas, kita menggunakan data meta untuk judul.
📜 _partials/navbar.php

📜 _partials/footer.php

16. Perhatikan pada kode _partials/navbar.php, kita menggunakan fungsi site_url() di

sana. Fungsi ini berasal dari Helper url, jika kamu tidak melakukan autolaod helper
url, maka fungsi tersebut tidak akan bisa digunakan. Karena itu, silahkan lakukan load
untuk helper tersebut. Caranya: Buka file config/autoload.php, kemudian ubah nilai
pada $autoload menjadi seperti ini.
Menjadi

Ini artinya, kita akan melakukan load otomatis untuk helper url sehingga kita bisa
menggunakan fungsi site_url(), base_url(), dan fungsi-fungsi URL lainnya. Tapi
fungsi ini tidak akan bekerja dengan baik, kalau base_url belum diatur. Silahkan atur
dulu base_url pada file congfig/config.php. Set seperti ini:

17. Kita bisa menggunakan partials yang sudah dibuat dengan fungsi $this->load->view()
di dalam view. Sekarang silahkan ubah kode view:
home.php;
about.php;
contact.php;
articles/list_article.php;
articles/show_article.php;
articles/empty_article.php;
Masing-masing menjadi seperti ini:
📜 home.php

📜 about.php

📜 contact.php
📜 articles/list_article.php

📜 articles/show_article.php
 📜 articles/empty_article.php

18. Sekarang ubahlah kode controller Page menjadi seperti ini:

19. Nah, untuk menambahkan CSS. Kita bisa tambahkan pada _partials/head.php.
Tambahkanlah kode CSS berikut di _partials/head.php:
Maka sekarang hasilnya akan seperti ini:
Buka http://localhost/belajar/index.php/