Membuat tombol timeline tercentang secara dinamis dengan kondisi php codeigniter

Saya sudah membuat skema dan sistem sebuah timeline progress, yang dimana setiap milestone diwakilkan dengan bentuk lingkaran dan akan muncul tanda tick bila di klik atau di arahkan dengan mouse.

Namun timeline saya masih statis, saya ingin membuatnya menjadi dinamis bila data yang saya inginkan sudah ada di dalam table databse maka tombol milestone tersebut akan secara otomatis berubah menjadi linkgaran dengan tick tanpa di klik.

Hasil tidak sesuai :

Hasil yang diinginkan

Harusnya seperti tombol pertama(yang paling kiri) karena sudah ada datanya. Yang sudah ada datanya dan harusnya berubah menjadi centang adalah tombol 1 -4. Dan yang hanya lingkaran polos saja adalah tombol ke 5 karena belum ada datanya.

Ini code di controllernya :

public function pameran_timeline()
        {
			$data['title'] = 'Belanda';
			$data['hasil'] = $this->Info_pameran_belanda_model->data();
            $this->load->view('auth/header');
            $this->load->view('auth/sidebar',$data);
            $this->load->view('belanda/timelinev2',$data);
            $this->load->view('auth/footer');

        }

Ini code modelnya

public function data()
    {
        $hasil= $this->db->get('pameran_belanda')-> result_array();
        return $hasil;

    }

Ini code di viewnya

<ul>

		<?php
		foreach($hasil as $hsl){
		if($hsl['nama_kegiatan'] == "Pengalokasian Anggaran DIPA tahun 2020"){?>
		<li class="step step01 active"><div class="step-inner">active1</div></li>
		<?php break;?>
		<?php } else{ ?>
		<li class="step step01"><div class="step-inner">unactive1</div></li>
		<?php break;?>
		<?php } ?>
		<?php } ?>

		<?php
		foreach($hasil as $hsl){
		if($hsl['nama_kegiatan'] == "Pembuatan Draft KAK & RAB untuk DIPA"){?>
		<li class="step step01 active"><div class="step-inner">active2</div></li>
		<?php break;?>
		<?php } else{ ?>
		<li class="step step01"><div class="step-inner">unactive2</div></li>
		<?php break;?>
		<?php } ?>
		<?php } ?>

		<?php
		foreach($hasil as $hsl){
		if($hsl['nama_kegiatan']  == "Koordinasi dengan Penyelenggara Event (sewa lahan, pendaftaran, sponsorship, floor plan)"){?>
		<li class="step step03 active"><div class="step-inner">active3</div></li>
		<?php break;?>
		<?php } else{ ?>
		<li class="step step03"><div class="step-inner">unactive3</div></li>
		<?php break;?>
		<?php } ?>
		<?php } ?>

		<?php
		foreach($hasil as $hsl){
		if($hsl['nama_kegiatan']  == "Pengiriman Undangan partisipasi pada Dinas Pariwisata Pemprov/Pemkab/Pemkot"){?>
		<li class="step step04 active"><div class="step-inner">active4</div></li>
		<?php break;?>
		<?php } else{ ?>
		<li class="step step04"><div class="step-inner">unactive4</div></li>
		<?php break;?>
		<?php } ?>
		<?php } ?>

		<?php
		foreach($hasil as $hsl){
		if($hsl['nama_kegiatan']  == "Pengiriman Undangan partisipasi pada industri terkait (dengan form registrasi)"){?>
		<li class="step step05 active"><div class="step-inner">active5</div></li>
		<?php break;?>
		<?php } else{ ?>
		<li class="step step05"><div class="step-inner">unactive5</div></li>
		<?php break;?>
		<?php } ?>
		<?php } ?>

	</ul>

Ini vardump databasenya:

array(4) { [0]=> array(6) { ["id"]=> string(2) "13" ["keterangan"]=> string(4) "tes1" ["nama_gambar"]=> string(11) "cmyk225.jpg" ["nama_doc"]=> string(15) "mentahan125.pdf" ["nama_kegiatan"]=> string(38) "Pengalokasian Anggaran DIPA tahun 2020" ["tanggal"]=> string(10) "2019-12-01" } [1]=> array(6) { ["id"]=> string(2) "33" ["keterangan"]=> string(6) "step02" ["nama_gambar"]=> string(11) "cmyk248.jpg" ["nama_doc"]=> string(15) "mentahan146.pdf" ["nama_kegiatan"]=> string(36) "Pembuatan Draft KAK & RAB untuk DIPA" ["tanggal"]=> string(10) "2019-12-10" } [2]=> array(6) { ["id"]=> string(2) "34" ["keterangan"]=> string(6) "step03" ["nama_gambar"]=> string(11) "cmyk249.jpg" ["nama_doc"]=> string(8) "tes8.pdf" ["nama_kegiatan"]=> string(88) "Koordinasi dengan Penyelenggara Event (sewa lahan, pendaftaran, sponsorship, floor plan)" ["tanggal"]=> string(10) "2019-12-10" } [3]=> array(6) { ["id"]=> string(2) "35" ["keterangan"]=> string(6) "step04" ["nama_gambar"]=> string(11) "cmyk250.jpg" ["nama_doc"]=> string(15) "mentahan147.pdf" ["nama_kegiatan"]=> string(75) "Pengiriman Undangan partisipasi pada Dinas Pariwisata Pemprov/Pemkab/Pemkot" ["tanggal"]=> string(10) "2019-12-10" } }

Yang anehnya adalah hanya data pertama saja yang berhasil data yang lainnya tidak terbaca. Harusnya seperti apa bentuk kondisinya atau query databasenya yang benar

avatar eldwin
@eldwin

4 Kontribusi 0 Poin

Diperbarui 4 tahun yang lalu

4 Jawaban:

Pertama, kegunaan foreach agar kamu meloop (mengulang semuanya) di atas kamu tidak perlu menulis foreach 4 kali karena cukup satu kali saja semua data sudah bisa terambil

Kedua, kamu tidak perlu kata 'break' di if dan else, coba pelajari lagi dasar if else di PHP

avatar hilmanski
@hilmanski

2686 Kontribusi 2135 Poin

Dipost 4 tahun yang lalu

Tanggapan

Foreachnya sudah saya tuliskan satu saja, ketika saya tidak menggunakan break dia tetap membaca statement elsenya sehingga mencetak lagi lingkarannya

@hilmanski Sudah saya lakukan untuk foreachnya hanya 1 saja, namun tetap tidak sesuai keinginan. Kenapa saya pakai break, karena kalau tidak dia akan mencetak tombolnya sebanyak jumlah baris data di table database saya. Misal di database saya ada 4 data maka dia akan mencetak banyak tombol secara looping <img src='https://i.ibb.co/Vm64Gy6/Screenshot-3.png'>

kode saya

<pre> &lt;?php foreach($hasil as $hsl){ if($hsl['nama_kegiatan'] == "Pengalokasian Anggaran DIPA tahun 2020"){?&gt; &lt;li class="step step01 active"&gt;&lt;div class="step-inner"&gt;active1&lt;/div&gt;&lt;/li&gt; &lt;?php } else{ ?&gt; &lt;li class="step step01"&gt;&lt;div class="step-inner"&gt;unactive1&lt;/div&gt;&lt;/li&gt; &lt;?php } ?&gt;

	&amp;lt;?php if($hsl[&#039;nama_kegiatan&#039;] == &quot;Pembuatan Draft KAK &amp; RAB untuk DIPA&quot;){?&amp;gt;
	&amp;lt;li class=&quot;step step02 active&quot;&amp;gt;&amp;lt;div class=&quot;step-inner&quot;&amp;gt;2&amp;lt;/div&amp;gt;&amp;lt;/li&amp;gt;
	&amp;lt;?php } else{ ?&amp;gt;
	&amp;lt;li class=&quot;step step02&quot;&amp;gt;&amp;lt;div class=&quot;step-inner&quot;&amp;gt; gagal&amp;lt;/div&amp;gt;&amp;lt;/li&amp;gt;
	&amp;lt;?php } ?&amp;gt;
	&amp;lt;?php } ?&amp;gt;

</pre>

avatar eldwin
@eldwin

4 Kontribusi 0 Poin

Dipost 4 tahun yang lalu

Tanggapan

halo, ko bisa ada 4 data ya? itu data apa? coba dijelaskan di bagian "pertanyaan" cara kamu menyimpan data seperti apa (struktur data kamu sekarang) dan hubungannya ke masalah tersebut

Sudah saya post mas penjelasannya

postnya di "pertanyaan" ya, usahakan kolom jawaban hanya untuk menjawab pertnayaan, biar orang yang mau bantu bisa baca langsung

Data itu adalah data laporan yang dimana data itu disimpan dengan cara di inputkan melalui halaman upload laporan. Nama table database saya adalah "pameran_belanda". Untuk saat ini terdiri dari 6 kolom yaitu : -id -keterangan -nama_gambar -nama_doc -nama_kegiatan -tanggal

Untuk isi databasenya saat ini : <img src='https://i.ibb.co/3sTDGmy/Screenshot-4.png'>

Untuk struktur databasenya : <img src='https://i.ibb.co/PDycr8S/Screenshot-5.png'>

Untuk relasinya untuk sistem yang saya ingin buat adalah, pada awalnya data di table tersebut secara default itu kosong yang akan bisa diisi bila diinputkan pada halaman uplaod. Dan lingkaran itu adalah tombol untuk mewakili row yang ada di setiap table pameran_belanda. Sehingga ketika saya mengklik tombol pertama maka akan muncul data pertama dan tombol lingkaran tersebut akan berubah menjadi aktif(centang), begitu seterusnya sampai total ada 10 lingkaran.

Saya ingin mengubah tombol timeline tersebut itu akan otomatis active bila data dengan nama tertentu di kolom "nama_kegiatan" sudah ada, namun bila nama kegiatan tertentu belum ada di kolom "nama_kegiatan" maka tombol lingkaran tersebut tidak active(hanya lingkaran saja tanpa tanda centang).

Makanya saya menggunakan if else untuk membuat suatu kondisi untuk mengaktifkan dan tidak mengaktifkan tombol lingkaran tersebut. Disini sya membuat kondisi dengan mengecek ke table database kolom "nama_kegiatan". Contohnya bila value dari kolom nama_kegiatan ada yang bernilai "A" secara identik maka tombol akan aktif namun bila value dari kolom nama_kegiatan tidak ada yang bernilai "A" maka tombol tidak aktif.

Begitu mas kira kira, agak sedikit rumit untuk saya jelaskan dengan kelimat. Tapi saya usahakan saya jelaskan secara detail.

avatar eldwin
@eldwin

4 Kontribusi 0 Poin

Dipost 4 tahun yang lalu

Kamu bisa meloop datanya terpisah dari template HTML nya. jadi di loop dulu,

<pre> //Loop (hasil) if(nama['kegiatan'] == 'yang diinginkan') $kegiatan1 = true

if(nama['kegiatan2'] == 'yang diinginkan2') $kegiatan2 = true dan seterusnya </pre>

Nilai true di atas, nanti diuji di template HTMLnya jadi tidak perlu lagi ada loop (tidak ada lagi masalah loop beberapa kali, karena sudah di atas)

<pre> if($kegiatan1 == true) //maka centang kegiatan satu (kasih kelas active) </pre>

avatar hilmanski
@hilmanski

2686 Kontribusi 2135 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban