Membuat Komponen yang Memiliki field Upload File dengan Clark Popoji CMS
Jurnalcode.com

Membuat Komponen yang Memiliki field Upload File dengan Clark Popoji CMS


Jurnalcode : Haloo Kali ini saya kembali membuat tutorial Tentang Popoji CMS . Mungkin Tutorial saya Tentang Popoji CMS tidak Bersifat serial atau lebih cocok nya besifat tips dan trik . dalam kesempatan kali ini saya akan membuat sebuah tutorial yang mana tutorial ini saya buat dari pengalaman Pribadi saya sendiri . apa itu ? ya saya akan membuat Komponen yang Memiliki field Upload File dengan Clark . Mungkin sebagian dari temen temen menyangka kok sederhana sekali bukan nya CLARK sudah otomatis Menggenerate From yang didalam nya terdapat Filed Untuk upload file ? jawaban nya IYA , tapi clark hanya menggenerate upload file di backend admin saja sedangkan pada elemen form pada front end itu tidak . Maka dari itu kita harus menulis beberapa kode untuk menjalankan field Upload File pada form Tersebut .

Baiklah Langsung saja Kita mulai Tutorial nya .. hal Pertama Kalian harus menginstall CLARK , Kemudian Silahkan Buat sebuah komponen , misal kita beri nama registrasi .

 1. Silahkan Buka CLark dan klik Button Buat Komponen

 2. Selanjutnya Silahkan isi field Komponen seperti dibawah ( untuk praktek bebas )

3 Jangan Lupa Untuk Memberikan Properti pada field Gambar Sebagai Upload File dan berikan Nilai Y . Lihat Gambar dibawah :

4. jika sudah langkah selanjutnya adalah pilih tab elemen tema pada tab kanan atas dan isi sesuai permintaan form dan jangan lupa untuk memberikan check list pada check box " Pilih Jika Ingin Membuat Elemen Tema "  dan pada tipe elemen Pilih Form Isisan Aplikasi Perhatikan  gambar :

 

5. Jika Sudah Silahkan Klik Submit Dan Perhatikan Apa yang Terjadi ! Perhatikan Gambar Berikut :

Oke, Pada Halaman Admin saat Add new Data Kita mendapati Field Upload file untuk mencari gambar .

6. Kemudian coba kita akses yang dihalaman front end registrasi , dan ternyata fix tidak ada . yang ada adalah kolom text box . perhatikan gambar :

Nah Sekarang Masalah nya udah Ketemu .  Mari kita selesaikan secara baik baik ya .. hahhahhah

Langkah Pertama yang harus dilakukan adalan buka file registrasi.php pada folder theme yang kalian gunakan lalu silahkan ubah field gambar dari input box jadi input file  dan jangan lupa memberikan properti enctype="multipart/form-data"  pada form registrasi . perhatikan code di bawah :

ini code awal

<?=$this->layout('index');?>

<div class="container">
	<div class="row">
		<div class="col-md-12">
			<?=htmlspecialchars_decode($this->e($alertmsg));?>
			<form name="form-registrasi" action="<?=BASE_URL;?>/registrasi" method="post">
				<div class="form-group">
					<label for="namasiswa">NamaSiswa</label>
					<input type="text" name="namasiswa" class="form-control" id="namasiswa" value="<?=(isset($_POST['namasiswa']) ? $_POST['namasiswa'] : '');?>" placeholder="NamaSiswa" />
				</div>
				<div class="form-group">
					<label for="kelas">Kelas</label>
					<input type="text" name="kelas" class="form-control" id="kelas" value="<?=(isset($_POST['kelas']) ? $_POST['kelas'] : '');?>" placeholder="Kelas" />
				</div>
				<div class="form-group">
					<label for="alamat">Alamat</label>
					<textarea name="alamat" class="form-control" id="alamat" rows="3" placeholder="Alamat"><?=(isset($_POST['alamat']) ? $_POST['alamat'] : '');?></textarea>
				</div>
				<div class="form-group">
					<label for="gambar">Gambar</label>
					<input type="text" name="gambar" class="form-control" id="gambar" value="<?=(isset($_POST['gambar']) ? $_POST['gambar'] : '');?>" placeholder="Gambar" />
				</div>
				<button type="submit" class="btn btn-success">Submit</button>
			</form>
		</div>
	</div>
</div>

 

Silahkan Ubah ke code Berikut :

<?=$this->layout('index');?>

<div class="container">
	<div class="row">
		<div class="col-md-12">
			<?=htmlspecialchars_decode($this->e($alertmsg));?>
			<form name="form-registrasi" action="<?=BASE_URL;?>/registrasi" method="post" enctype="multipart/form-data">
				<div class="form-group">
					<label for="namasiswa">NamaSiswa</label>
					<input type="text" name="namasiswa" class="form-control" id="namasiswa" value="<?=(isset($_POST['namasiswa']) ? $_POST['namasiswa'] : '');?>" placeholder="NamaSiswa" />
				</div>
				<div class="form-group">
					<label for="kelas">Kelas</label>
					<input type="text" name="kelas" class="form-control" id="kelas" value="<?=(isset($_POST['kelas']) ? $_POST['kelas'] : '');?>" placeholder="Kelas" />
				</div>
				<div class="form-group">
					<label for="alamat">Alamat</label>
					<textarea name="alamat" class="form-control" id="alamat" rows="3" placeholder="Alamat"><?=(isset($_POST['alamat']) ? $_POST['alamat'] : '');?></textarea>
				</div>
				<div class="form-group">
					<label for="gambar">Gambar</label>
					<input type="file" name="gambar" class="form-control" id="gambar" />
				</div>
				<button type="submit" class="btn btn-success">Submit</button>
			</form>
		</div>
	</div>
</div>

 

Oke permasalahan pada form sudah selesai sekarang kita ubah lagi pada proses saat input Registrasi . cara nya adalah silahkan buka dan edit file registrasi.php yang ada di folder po-content/component/registrasi/registrasi.php 

Perhatikan Gambar Berikut :

 

 Silahkan Tambahkan code Berikut pada kolom yang saya tandai pada gambar di atas :

$upload_dir = DIR_CON.'/uploads/';
$temp = explode(".", $_FILES["gambar"]["name"]);
$nama_baru = round(microtime(true)) . '.' . end($temp);
  if (move_uploaded_file($_FILES["gambar"]["tmp_name"], $upload_dir."/" . $nama_baru))
 { 
   ini script proses
 }

  script proses yg saya maksud di atas adalah yg ini . silahkan perhatikan gambar berikut :

 

Jika sudah Silahkan Simpan dan Jalankan Form registrasi Anda .. Insya allah Berhasil nah untuk Validasi File nya kalian bisa Menambahkan Script validasi file pada tutorial sebelum nya pada file registrasi.php yang ada di folder theme yang kalian gunakan . Silahkan Paste kan Script Tersebut dibawah code Semoga bermanfaat . Silahkan dicoba , jika ada permasalahan silahkan komen dibawah .. terimkasih, salam coding

.

Ayo Komentar