[tutorial] #2 Install CMS Canvas Untuk Website Profile Perusahaan

Bismillah…

Kali ini gw lagi pengen nulis teknik install cms canvas, just Info, halaman utama CMS Canvas sudah tidak ditemukan, alhamdulillah berhasil menemukan developer yang mengembangkan, yaitu pagestudiocms.com bisa diakses ya, next tutoral ke #3 bakal gw jelasin perbedaan yang lumayan banyak dari CMS Canvas dan PageStudio CMS, tapi kalo sekarang kita akan bahas CMSCanvas berbasis Codeigniter.

Upload seluruh folder di localhost/ hosting yang ada, kurang lebih nanti tampilannya seperti ini:

todo … proses upload ke hosting.

Advertisements

[share] Menambahkan Fungsi OTP Di SMS Gateway Gratisan Zenziva.NET

Bismillah…

Selagi santai dikantor dengan bejibun module yang sudah ada, iseng research and development tentang SMS Gateway yang Gratis dari Zenziva.net bisa gunakan API (Application Programable Interface) dimana kita bisa kirim sms geratis tapi dengan nomor random dari Web Zenziva (orang geratisan, haha) eh, keingetan dengan Fitur dari TokoCash.com Tokopedia, dimana mengirimkan kode OTP (One Time Password)  ke nomor handphone yang sudah didaftarkan, ibaratnya ada validasinya … keren keren … oya, sebelumnya penulis topidesta yaitu uda rifki juga pernah share tentang sms gateway bisa baca disini.

Nah, akhirnya jajal dulu, API dari Zenziva kalo kirim sms gimana, terus bisa!!… silahkan dilihat di github:

https://github.com/RSUP/ZENZIVA-PHP

nah, kan targetnya biar bisa OTP (One Time Password) akhirnya ubek ubek source github tentang otp-php … kan pake PHP test nya hahha, terdamparlah di sini:

https://github.com/anoopsg/Otp-php

Ternyata kagak langsung bisa coy, butuh oprek lagi … nah ada beberapa baris yang gw ubah (gw fork dulu githubnya),  berikut bbrp yang gw ubah, sedikit sih

public function __construct(){
		$this->url = "https://reguler.zenziva.net/apps/smsapi.php";
		$this->userkey = "USERKEY";       //include api key here
		$this->passkey = "PASSKEY";		
		$this->message = urlencode($this->message);
		$this->otp = 4;			
	}

udah kan ya, oya kalo butuh userkey dan passkey bisa daftar di zenziva langsung:

https://reguler.zenziva.net/

Okaylah, silahkan unduh/ fork github gw yang udah gw ubah ada dialamat ini:

https://github.com/RSUP/Otp-php/

Kagak usah gw jelasain ya, baca postingan uda rifki aja yang udah jelasin SMS GATEWAY.. kalo pada bingung komentar ajah, kalo sempet gw bales, maaf kalo lama bales, kadang males buka blog soalnya… hahaha

Have a Nice Day

[trick] Pemanfaatan DropzoneJS dengan Codeigniter 2

Bismillah…

Kali ini ada trick memanfaatkan plugin js ke module API Prima SIMRS … berikut contoh video GIF singkatnya:

*Catatan: Divideo saya menggunakan Plugin Facebox.js untuk popup seperti itu.

Ikuti ajah tutorialnya disini ya:

  1. https://www.sandro.id/artikel/26-tutorial-upload-multiple-foto-dengan-ajax-dan-codeigniter-dropzone-js (Pemahaman Awal)
  2. https://www.startutorial.com/articles/view/dropzonejs-php-how-to-display-existing-files-on-server (Advanced)
  3. https://github.com/edomaru/ci_dropzone (Advanced)

Inget, sampai faham betul yah ikutin… kalo kali ini gw cuman share trick ajah, berupa script potongan. Kalo ikutin tutorial di Point 1 pasti akan menemukan script js berikut ini:

	Dropzone.autoDiscover = false;

	var foto_upload= new Dropzone(".dropzone",{
		url: "upload.php",
		maxFilesize: 2,
		method:"post",
		acceptedFiles:"image/*",
		paramName:"userfile",
		dictInvalidFileType:"Type file ini tidak dizinkan",
		addRemoveLinks:true,
	});


	//Event ketika Memulai mengupload
	foto_upload.on("sending",function(a,b,c){
		a.token=Math.random();
		c.append("token_foto",a.token); //Menmpersiapkan token untuk masing masing foto
	});


	//Event ketika foto dihapus
	foto_upload.on("removedfile",function(a){
		var token=a.token;
		$.ajax({
			type:"post",
			data:{token:token},
			url: "remove.php",
			cache:false,
			dataType: 'json',
			success: function(){
				console.log("Foto terhapus");
			},
			error: function(){
				console.log("Error");

			}
		});
	});

Ternyata script tersebut berhasil tapi yang gw butuhin tuh habis upload terus refresh halaman foto sebelumnya muncul lagi, nah ternyata ada di Point 3 script tersebut, berikut scriptnya:

// source: https://github.com/edomaru/ci_dropzone/
Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(".dropzone", {
	url: "upload.php",
	acceptedFiles: "image/*",
	maxFilesize: 2,
	paramName:"userfile",
	dictInvalidFileType:"Type file ini tidak dizinkan",
	addRemoveLinks: true,
    // previewTemplate: document.querySelector('#preview-template').innerHTML,
    clickable: true,

	sending: function(a,b,c) {
		a.token 	= Math.random();
		c.append("token_foto",a.token); //Menmpersiapkan token untuk masing masing foto
	},

	removedfile: function(file) {

		var token= file.token;

		$.ajax({
			type: "post",
			url: "remove.php"+token,
			data:{token:token},
			dataType: 'json',
			cache:false,
		});
		// remove the thumbnail
		var previewElement;
		return (previewElement = file.previewElement) != null ? (previewElement.parentNode.removeChild(file.previewElement)) : (void 0);
	},

	init: function() {
		var me = this;
		$.get("<?php echo site_url();?>api/website/dokter/list_foto/", function(data) { //alert(data);
			// if any files already in server show all here
			if (data.length > 0) {
				$.each(data, function(key, value) {
					var mockFile = value;
					me.emit("addedfile", mockFile);
					me.emit("thumbnail", mockFile, "<?php echo ROOTURL; ?>/foto/real/" + value.name);
					me.emit("complete", mockFile);

				    var a = document.createElement('a');
				    a.setAttribute('href',"<?php echo ROOTURL; ?>/foto/real/" + value.name);
				    a.innerHTML = "Download<b>";
				    value.previewTemplate.appendChild(a);

				});
			}
		});
	}
});

Nah udah deh, foto yang pernah ke upload keliatan juga akhirnya.

Done.

Have a Nice Day!

[share] Berbagi Pengetahuan tantang VPS

Berbicara tentang web pasti kita akan terpikir tentang hostingan. penyedia hosting di indonesia cukup banyak diantaranya adalah dapurhosting, rumahweb, dewaweb, idwebhost, allnetspace dll. jika kita membelinya kita langsung disediakan paket cpanel yang langsung dipakai.

Berbeda dengan vps , vps adalah virtual private security. kalau boleh di bilang vps adalah sebuah ruangan, yang kita dizinkan menginstall apapun disana, dalam bentuk versi command line. bisa juga versi xampp versi kosong. disini lah tantangannya memakai vps, serta merta kita harus mengerti command linux, karena sintak vps sama dengan linux mau itu ubuntu atau centos ataupun debian.

beberapa penyedia vps diantara : digitalocean, cloudekilat, dewaweb, rumah hosting go daddy dll. anda bisa membeli paket perbulan untuk belajar-belajar supaya bisa menguasi seutuhnya ilmu web programming.

semoga membantu 🙂

 

[share] Cara Bekerja Tim IT Web Developer Bekerja Di Perusahaan

Sebagai Karyawan Perusahaan sangat pasti memiliki tim IT (secara umum), kebetulan saya juga tim IT sebuah start up di daerah jakarta , disana saya memegang Peranan mengelola server VPS dan Server Fisik, dan sekalian menangan masalah code PHP [Laravel].

Sedikit Share-Share dari Saya, TIM IT saya bekerja Menggunakan sebuah Server Alias PC Juga. untuk memanajemen CODING Saya Menggunakan Visual SVN Server bisa digoogle aja banyak.

dari visual svn itu kita bisa membagi repositori/project mana aja yang mau kita handle. dari satu folder bisa diaccess oleh banyak programmer, bahkan untuk tim UI / UX yang terpenting mereka terhubung dalam jaringan itu

selanjutnya Dari TIM  lain di haruskan menginstall Putty Client dengan alasan untuk mengambil dari server SVN tadi, sehingga terintegrasi antara client dan server.

Dengan Aplikasi itulah kita bisa checkout data dari server SVN  , Selanjutnya untuk database cukup install paket instalan server seperti xampp/wamp/lamp dan bisa digunakan langsung untuk mengakses phpmyadminnya jika sudah berada dalam jaringan yang sama

Selanjutnya setelah code sudah berjalan baik di server fisik kita tinggal masukan ke production/ staging dari sebuah VPS. bisa menggunakan BitBucket, Github Repository,

Untuk mengakses Bitbucket atau Github bisa menggunakan aplikasi git bash atlassian dan panduan sintak juga ada disana.

dan untuk pembagian task masing masing developert bisa menggunakan trello,email atau aplikasi task lainnya.

mungkin itu sedikit share cara bekerja tim IT di start up Saya. Moga Menambah Pengetahuan 🙂

 

[trick] Text to Speech dengan responsivevoice.js ala google translate

Kali ini saya membagikan pengalaman saya dengan text ke suara dengan javascript. dulu saya mencoba dengan berbagai cara , dengan plugin flash terus google speach dll, seiring waktu berjalan sekarang makin banyak kemudahan untuk menterjemahkan text ke suara , salah satu caranya dengan responsivevoice.js

berikut kodenya:


<!DOCTYPE html>
<html>
<head>
<title>speak text to speech with Resvonsive Voice</title>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<script type="text/javascript">
function play (){
responsiveVoice.speak(
"Hallo Nama Saya RIfqi.",
"Indonesian Female",
{
pitch: 1,
rate: 1,
volume: 1
}
);
}

function stop (){
responsiveVoice.cancel();
}

function pause (){
responsiveVoice.pause();
}

function resume (){
responsiveVoice.resume();
}
</script>
</head>
<body>
<button onclick="play();">Play</button>
<button onclick="stop();">Stop</button>
<button onclick="pause();">Pause</button>
<button onclick="resume();">Resume</button>
</body>
</html>

catatan: gunakan langsung pada hostingan / vps anda karena akan berjalan dengan baik kalau live online.

semoga bermanfat 🙂