Silahkan Unduh komponen form pendaftaran yang sudah saya desain dan baca tutorial untuk menambahkan DATEPicker pada bidang atau input tanggal(lahir).
*** EXTRACT component-pendaftaran.zip
Component Telah di Update, Silahkan Download!
Untuk memperbarui komponen form pendaftaran dan menambahkan fungsi untuk upload gambar, silahkan lakukan sesuai petunjuk berikut:
Silahkan replace file daftaranggota.php yang terletak pada root_dir/po-content/component/daftaranggota/daftaranggota.php dengan script kode berikut ini:
<?php
/*
*
* - PopojiCMS Front End File
*
* - File : daftaranggota.php
* - Version : 1.0
* - Author : Clark
* - License : MIT License
*
*
* Ini adalah file php yang di gunakan untuk menangani proses di bagian depan untuk halaman daftaranggota.
* This is a php file for handling front end process for daftaranggota page.
*
*/
/**
* Router untuk menampilkan request halaman daftaranggota.
*
* Router for display request in daftaranggota page.
*
*/
$router->match('GET|POST', '/daftaranggota', function() use ($core, $templates) {
$alertmsg = '';
$lang = $core->setlang('home', WEB_LANG);
if (!empty($_POST)) {
if (!empty($_POST['namalengkap'])) {
$core->poval->filter_rules(array(
'namalengkap' => 'trim|sanitize_string',
'tempatlahir' => 'trim|sanitize_string',
'tanggallahir' => 'trim|sanitize_string',
'username' => 'trim|sanitize_string',
'kecamatan' => 'trim|sanitize_string',
'desa' => 'trim|sanitize_string',
'rt' => 'trim|sanitize_string',
'rw' => 'trim|sanitize_string',
'jabatan' => 'trim|sanitize_string',
'phone' => 'trim|sanitize_string',
'instagram' => 'trim|sanitize_string',
'whatsapp' => 'trim|sanitize_string',
'facebook' => 'trim|sanitize_string',
'content' => 'trim|sanitize_string|basic_tags',
'picture' => 'trim|sanitize_string',
'date' => 'trim|sanitize_string',
'active' => 'trim|sanitize_string',
));
if(!empty($_FILES['picture']['tmp_name'])){
$picture_name_exp = explode('.', $_FILES['picture']['name']);
$picture_name = $core->postring->seo_title($picture_name_exp[0]);
$file_exists = DIR_CON.'/uploads/testimonial/'.$picture_name.'.jpg';
if (file_exists($file_exists)){
$datapic = array(
'picture' => $picture_name.'.jpg'
);
} else {
$upload = new PoUpload($_FILES['picture']);
if ($upload->uploaded) {
$upload->file_new_name_body = $picture_name;
$upload->image_convert = 'jpg';
$upload->image_resize = true;
$upload->image_x = 900;
$upload->image_y = 600;
$upload->image_ratio = true;
$upload->process(DIR_CON.'/uploads/testimonial/');
if ($upload->processed) {
$datapic = array(
'picture' => $upload->file_dst_name
);
$upload_medium = new PoUpload($_FILES['picture']);
if ($upload_medium->uploaded) {
$upload_medium->file_new_name_body = 'medium_'.$picture_name;
$upload_medium->image_convert = 'jpg';
$upload_medium->image_resize = true;
$upload_medium->image_x = 640;
$upload_medium->image_y = 426;
$upload_medium->image_ratio = true;
$upload_medium->process(DIR_CON.'/uploads/testimonial/medium/');
if ($upload_medium->processed) {
$upload_thumb = new PoUpload($_FILES['picture']);
if ($upload_thumb->uploaded) {
$upload_thumb->file_new_name_body = $picture_name;
$upload_thumb->image_convert = 'jpg';
$upload_thumb->image_resize = true;
$upload_thumb->image_x = 122;
$upload_thumb->image_y = 91;
$upload_thumb->image_ratio = true;
$upload_thumb->process(DIR_CON.'/thumbs/testimonial/');
if ($upload_thumb->processed) {
$upload_thumb->clean();
$upload_medium->clean();
$upload->clean();
}
}
}
}
} else {
$datapic = array();
}
}
}
} else {
$datapic = array();
}
$validated_data = $core->poval->run($_POST);
if ($validated_data === false) {
$alertmsg = '<div id="contact-form-result">
<div class="alert alert-warning" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Error! Please check again before submit.
</div>
</div>';
} else {
$data = array(
'namalengkap' => $_POST['namalengkap'],
'seotitle' => $core->postring->seo_title($_POST['namalengkap']),
'tempatlahir' => $_POST['tempatlahir'],
'tanggallahir' => $_POST['tanggallahir'],
'username' => $_POST['username'],
'kecamatan' => $_POST['kecamatan'],
'desa' => $_POST['desa'],
'rt' => $_POST['rt'],
'rw' => $_POST['rw'],
'jabatan' => $_POST['jabatan'],
'phone' => $_POST['phone'],
'instagram' => $_POST['instagram'],
'whatsapp' => $_POST['whatsapp'],
'facebook' => $_POST['facebook'],
'content' => stripslashes(htmlspecialchars($_POST['content'],ENT_QUOTES)),
'picture' => $_POST['picture'],
'date' => $_POST['date'],
//'active' => $_POST['active'],
);
$datafinal = array_merge($data, $datapic);
$query = $core->podb->insertInto('daftaranggota')->values($datafinal);
$query->execute();
unset($_POST);
$alertmsg = '<div id="contact-form-result">
<div class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Thank you, your data successfully submited.
</div>
</div>';
}
} else {
$alertmsg = '<div class="alert alert-warning" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Error! '.ucfirst('namalengkap').' is required.
</div>';
}
}
$info = array(
'page_title' => 'Daftar anggota',
'page_desc' => 'Daftar anggota',
'page_key' => 'Daftar anggota',
'social_mod' => 'Daftaranggota',
'social_name' => $core->posetting[0]['value'],
'social_url' => $core->posetting[1]['value'].'/daftaranggota',
'social_title' => 'Daftar anggota',
'social_desc' => 'Daftar anggota',
'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png',
'page' => '1',
'alertmsg' => $alertmsg
);
$adddata = array_merge($info, $lang);
$templates->addData(
$adddata
);
echo $templates->render('daftaranggota', compact('lang'));
});
/**
* Router untuk menampilkan request halaman daftaranggota.
*
* Router for display request in daftaranggota page.
*
*/
$router->match('GET|POST', '/daftaranggota/page/(d+)', function($page) use ($core, $templates) {
$alertmsg = '';
$lang = $core->setlang('home', WEB_LANG);
if (!empty($_POST)) {
if (!empty($_POST['namalengkap'])) {
$core->poval->filter_rules(array(
'namalengkap' => 'trim|sanitize_string',
'tempatlahir' => 'trim|sanitize_string',
'tanggallahir' => 'trim|sanitize_string',
'username' => 'trim|sanitize_string',
'kecamatan' => 'trim|sanitize_string',
'desa' => 'trim|sanitize_string',
'rt' => 'trim|sanitize_string',
'rw' => 'trim|sanitize_string',
'jabatan' => 'trim|sanitize_string',
'phone' => 'trim|sanitize_string',
'instagram' => 'trim|sanitize_string',
'whatsapp' => 'trim|sanitize_string',
'facebook' => 'trim|sanitize_string',
'content' => 'trim|sanitize_string|basic_tags',
'picture' => 'trim|sanitize_string',
'date' => 'trim|sanitize_string',
'active' => 'trim|sanitize_string',
));
$validated_data = $core->poval->run($_POST);
if ($validated_data === false) {
$alertmsg = '<div id="contact-form-result">
<div class="alert alert-warning" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Error! Please check again before submit.
</div>
</div>';
} else {
$data = array(
'namalengkap' => $_POST['namalengkap'],
'seotitle' => $core->postring->seo_title($_POST['namalengkap']),
'tempatlahir' => $_POST['tempatlahir'],
'tanggallahir' => $_POST['tanggallahir'],
'username' => $_POST['username'],
'kecamatan' => $_POST['kecamatan'],
'desa' => $_POST['desa'],
'rt' => $_POST['rt'],
'rw' => $_POST['rw'],
'jabatan' => $_POST['jabatan'],
'phone' => $_POST['phone'],
'instagram' => $_POST['instagram'],
'whatsapp' => $_POST['whatsapp'],
'facebook' => $_POST['facebook'],
'content' => stripslashes(htmlspecialchars($_POST['content'],ENT_QUOTES)),
'picture' => $_POST['picture'],
'date' => $_POST['date'],
//'active' => $_POST['active'],
);
$query = $core->podb->insertInto('daftaranggota')->values($data);
$query->execute();
unset($_POST);
$alertmsg = '<div id="contact-form-result">
<div class="alert alert-success" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Thank you, your data successfully submited.
</div>
</div>';
}
} else {
$alertmsg = '<div class="alert alert-warning" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Error! '.ucfirst('namalengkap').' is required.
</div>';
}
}
$info = array(
'page_title' => 'Daftar anggota',
'page_desc' => 'Daftar anggota',
'page_key' => 'Daftar anggota',
'social_mod' => 'Daftaranggota',
'social_name' => $core->posetting[0]['value'],
'social_url' => $core->posetting[1]['value'].'/daftaranggota',
'social_title' => 'Daftar anggota',
'social_desc' => 'Daftar anggota',
'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png',
'page' => $page,
'alertmsg' => $alertmsg
);
$adddata = array_merge($info, $lang);
$templates->addData(
$adddata
);
echo $templates->render('daftaranggota', compact('lang'));
});
/*
***********************************
***********************************
* - PopojiCMS Front End File
*
* - File : daftaranggota.php
* - Version : 1.0
* - Author : Clark
* - License : MIT License
*
*
* Ini adalah file php yang di gunakan untuk menangani proses di bagian depan untuk halaman daftaranggota.
* This is a php file for handling front end process for daftaranggota page.
*
*/
/**
* Router untuk menampilkan request halaman daftaranggota.
*
* Router for display request in daftaranggota page.
*
*/
$router->match('GET|POST', '/daftaranggota', function() use ($core, $templates) {
$alertmsg = '';
$lang = $core->setlang('home', WEB_LANG);
$info = array(
'page_title' => 'Daftar anggota',
'page_desc' => 'Daftar anggota',
'page_key' => 'Daftar anggota',
'social_mod' => 'Daftaranggota',
'social_name' => $core->posetting[0]['value'],
'social_url' => $core->posetting[1]['value'].'/daftaranggota',
'social_title' => 'Daftar anggota',
'social_desc' => 'Daftar anggota',
'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png',
'page' => '1',
'alertmsg' => $alertmsg
);
$adddata = array_merge($info, $lang);
$templates->addData(
$adddata
);
echo $templates->render('daftaranggota', compact('lang'));
});
/**
* Router untuk menampilkan request halaman daftaranggota.
*
* Router for display request in daftaranggota page.
*
*/
$router->match('GET|POST', '/daftaranggota/page/(d+)', function($page) use ($core, $templates) {
$alertmsg = '';
$lang = $core->setlang('home', WEB_LANG);
$info = array(
'page_title' => 'Daftar anggota',
'page_desc' => 'Daftar anggota',
'page_key' => 'Daftar anggota',
'social_mod' => 'Daftaranggota',
'social_name' => $core->posetting[0]['value'],
'social_url' => $core->posetting[1]['value'].'/daftaranggota',
'social_title' => 'Daftar anggota',
'social_desc' => 'Daftar anggota',
'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png',
'page' => $page,
'alertmsg' => $alertmsg
);
$adddata = array_merge($info, $lang);
$templates->addData(
$adddata
);
echo $templates->render('daftaranggota', compact('lang'));
});
/**
* Router untuk menampilkan request halaman Semua anggota.
*
* Router for display request in all anggota page.
*
*/
$router->match('GET|POST', '/semuaanggota', function() use ($core, $templates) {
$alertmsg = '';
$lang = $core->setlang('home', WEB_LANG);
$info = array(
'page_title' => 'Daftar anggota',
'page_desc' => 'Daftar anggota',
'page_key' => 'Daftar anggota',
'social_mod' => 'Daftaranggota',
'social_name' => $core->posetting[0]['value'],
'social_url' => $core->posetting[1]['value'].'/semuaanggota',
'social_title' => 'Daftar anggota',
'social_desc' => 'Daftar anggota',
'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png',
'page' => '1',
'alertmsg' => $alertmsg
);
$adddata = array_merge($info, $lang);
$templates->addData(
$adddata
);
echo $templates->render('semuaanggota', compact('lang'));
});
/**
* Router untuk menampilkan request halaman Semua anggota.
*
* Router for display request in all anggota page.
*
*/
$router->match('GET|POST', '/semuaanggota/page/(d+)', function($page) use ($core, $templates) {
$alertmsg = '';
$lang = $core->setlang('home', WEB_LANG);
$info = array(
'page_title' => 'Daftar anggota',
'page_desc' => 'Daftar anggota',
'page_key' => 'Daftar anggota',
'social_mod' => 'Daftaranggota',
'social_name' => $core->posetting[0]['value'],
'social_url' => $core->posetting[1]['value'].'/semuaanggota',
'social_title' => 'Daftar anggota',
'social_desc' => 'Daftar anggota',
'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png',
'page' => $page,
'alertmsg' => $alertmsg
);
$adddata = array_merge($info, $lang);
$templates->addData(
$adddata
);
echo $templates->render('semuaanggota', compact('lang'));
});
/**
************************************************************ Detail
* Router untuk menampilkan request halaman detail anggota.
*
* Router for display request in detail anggota page.
*
*/
$router->match('GET|POST', '/detailanggota', function() use ($core, $templates) {
$lang = $core->setlang('home', WEB_LANG);
$info = array(
'page_title' => 'Detail Anggota -'.$daftaranggota['namalengkap'],
'page_desc' => 'Detail data anggaota -'.$daftaranggota['namalengkap'],
'page_key' => 'Identitas anggota, detail anggota, tentang anggota,',
'social_mod' => 'Detail Anggota',
'social_name' => $core->posetting[0]['value'],
'social_url' => $core->posetting[1]['value'].'/detailanggota',
'social_title' => 'Detail Anggota -'.$daftaranggota['namalengkap'],
'social_desc' => 'Detail data anggaota -'.$daftaranggota['namalengkap'],
'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png'
);
$adddata = array_merge($info, $lang);
$templates->addData(
$adddata
);
echo $templates->render('detailanggota', compact('lang'));
});
/**
* Router untuk menampilkan request halaman anggota.
*
* Router for display request in anggota page.
*
* $seotitle = string [a-z0-9_-]
*/
$router->match('GET|POST', '/detailanggota/([a-z0-9_-]+)', function($seotitle) use ($core, $templates) {
$lang = $core->setlang('home', WEB_LANG);
$daftaranggota = $core->podb->from('daftaranggota')->where('seotitle', $seotitle)->limit(1)->fetch();
if ($daftaranggota) {
$info = array(
'page_title' => 'Detail Anggota',
'page_desc' => 'Detail data anggaota',
'page_key' => 'Identitas anggota, detail anggota, tentang anggota,',
'social_mod' => 'Detail Anggota',
'social_name' => $core->posetting[0]['value'],
'social_url' => $core->posetting[1]['value'].'/detailanggota/'.$daftaranggota['seotitle'],
'social_title' => 'Detail Anggota',
'social_desc' => 'Detail data anggaota',
'social_img' => BASE_URL.'/'.DIR_CON.'/uploads/medium/medium_'.$daftaranggota['picture'],
);
$adddata = array_merge($info, $lang);
$templates->addData(
$adddata
);
echo $templates->render('detailanggota', compact('lang', 'daftaranggota'));
} else {
$info = array(
'page_title' => 'Anggota Not Found',
'page_desc' => $core->posetting[2]['value'],
'page_key' => $core->posetting[3]['value'],
'social_mod' => 'Detail Anggota',
'social_name' => $core->posetting[0]['value'],
'social_url' => $core->posetting[1]['value'],
'social_title' => 'Anggota Not Found',
'social_desc' => $core->posetting[2]['value'],
'social_img' => $core->posetting[1]['value'].'/'.DIR_INC.'/images/favicon.png'
);
$adddata = array_merge($info, $lang);
$templates->addData(
$adddata
);
echo $templates->render('404', compact('lang'));
}
});
Langkah selanjutnya sesuaikan form daftaranggota pada field input gambar seperti berikut:
<?=htmlspecialchars_decode($this->e($alertmsg));?>
<form id="form-daftaranggota" name="form-daftaranggota" action="<?=BASE_URL;?>/daftaranggota" method="post">
<div class="col-md-4">
<div class="form-group">
<label for="namalengkap">Namalengkap</label>
<input type="text" name="namalengkap" class="form-control required" id="namalengkap" value="<?=(isset($_POST['namalengkap']) ? $_POST['namalengkap'] : '');?>" placeholder="Jhon Doe" required=""/>
</div>
<div class="form-group">
<label for="tempatlahir">Tempatlahir</label>
<input type="text" name="tempatlahir" class="form-control required" id="tempatlahir" value="<?=(isset($_POST['tempatlahir']) ? $_POST['tempatlahir'] : '');?>" placeholder="Jakarta" required=""/>
</div>
<div class="form-group">
<label for="tanggallahir">Tanggallahir</label>
<input type="text" name="tanggallahir" class="form-control required" id="tanggallahir" value="<?=(isset($_POST['tanggallahir']) ? $_POST['tanggallahir'] : '');?>" placeholder="YYYY-MM-DD" required="" style="text-align:left;"/>
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control required" id="username" value="<?=(isset($_POST['username']) ? $_POST['username'] : '');?>" placeholder="jhondoe" required=""/>
</div>
<div class="form-group">
<label for="kecamatan">Kecamatan</label>
<input type="text" name="kecamatan" class="form-control required" id="kecamatan" value="<?=(isset($_POST['kecamatan']) ? $_POST['kecamatan'] : 'Kecamatan: ');?>" placeholder="Jakarta Pusat" required=""/>
</div>
<div class="form-group">
<label for="desa">Desa</label>
<input type="text" name="desa" class="form-control required" id="desa" value="<?=(isset($_POST['desa']) ? $_POST['desa'] : 'Desa: ');?>" placeholder="Kembangan" required=""/>
</div>
<div class="form-group">
<label for="rt">Rt</label>
<input type="text" name="rt" class="form-control required" id="rt" value="<?=(isset($_POST['rt']) ? $_POST['rt'] : 'Rt: ');?>" placeholder="011" required=""/>
</div>
<div class="form-group">
<label for="rw">Rw</label>
<input type="text" name="rw" class="form-control required" id="rw" value="<?=(isset($_POST['rw']) ? $_POST['rw'] : 'Rw: ');?>" placeholder="06" required=""/>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="jabatan">Jabatan</label>
<input type="text" name="jabatan" class="form-control required" id="jabatan" value="<?=(isset($_POST['jabatan']) ? $_POST['jabatan'] : '');?>" placeholder="Jabatan PIKR" required=""/>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" name="phone" class="form-control required" id="phone" value="<?=(isset($_POST['phone']) ? $_POST['phone'] : '');?>" placeholder="0812 6573 0934" required=""/>
</div>
<div class="form-group">
<label for="instagram">Instagram</label>
<input type="text" name="instagram" class="form-control required" id="instagram" value="<?=(isset($_POST['instagram']) ? $_POST['instagram'] : '');?>" placeholder="Instagram" required=""/>
</div>
<div class="form-group">
<label for="whatsapp">Whatsapp</label>
<input type="text" name="whatsapp" class="form-control required" id="whatsapp" value="<?=(isset($_POST['whatsapp']) ? $_POST['whatsapp'] : '');?>" placeholder="0812 3715 8792" required=""/>
</div>
<div class="form-group">
<label for="facebook">Facebook <span class="text-danger"> <i>Tambahkan Usernam Facebook</i>*</span></label>
<input type="text" name="facebook" class="form-control required" id="facebook" value="<?=(isset($_POST['facebook']) ? $_POST['facebook'] : 'https://www.facebook.com/');?>" placeholder="https://www.facebook.com/username" required=""/>
</div>
<div class="form-group">
<label for="picture">Photo</label>
<input type="file" name="picture" class="form-control required" id="picture" value="<?=(isset($_POST['picture']) ? $_POST['picture'] : '');?>" placeholder="Photo" required=""/>
</div>
<div class="form-group">
<label for="date">Tanggal Daftar</label>
<div class='input-group date' id='datepicker2'>
<input type="text" name="date" class="form-control input-group-addon" id="date" value="<?=(isset($_POST['date']) ? $_POST['date'] : date('Y/m/d'));?>" placeholder="Date" width="100%" required="" style="text-align:left;"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="content">Content</label>
<textarea name="content" class="form-control required" id="content" rows="3" style="width:100%; height:500px;" placeholder="Content" required=""><?=(isset($_POST['content']) ? $_POST['content'] : '');?></textarea>
<p style="font-size:11px; color:#999; background:#eee; padding:5px; border:1px #eee solid; border-radius: 5px;">Gunakan tag HTML <br> dan <p> <br/></p>
</div>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
Simpan perubahan dan silahkan coba hasilnya.......!
Unduh 141xJika mengalami masalah blank pada halaman tertentu: Silahkan download post.zip untuk mereplace post.php pada folder component/post/post.php
Unduh 50xClark-The Next CoGen
Clark is the latest generation of CoGen,
with Clark making components and elements of the theme only with mouse only.
CLARK was launched by PopojiCms
Developer: Dwira Survivor
Unduh 112x