Skip to main content

[ask] menambah dan me-load file .js

May 18, 2011 by cendol

cendol's picture

please help donk

cara nambahin file .js tinggal di copy aja ya? ngopynya kemana? controller, model, atau view? trs kalo ingin menggunakannya cara nulis src="" bagaimana ya? setelah cara memanggil function yang ada di file.js gmn?

sry pertanyaannya banyak gan, maklum masih newbie

semoga amal anda mendapat berkah dari Tuhan YME

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

problem terselesaikan dengan baik

May 19, 2011 by cendol, 12 weeks 5 days ago
Comment: 8188

cendol's picture

thx ya om udah mau ngajarin pelan2 sehingga semangat lagi ngerjain skripsinya

maju terus CI indonesia

^^

koq masih error ya om

May 19, 2011 by cendol, 12 weeks 5 days ago
Comment: 8182

cendol's picture

saya download CI 2.0.1
trs sudah jalan seperti yg om jelaskan, tp pada saat di capture
gambar gagal masuk ke folder upload, ada solusinya?

coba utak-utik di bagian

May 19, 2011 by cahndeso, 12 weeks 5 days ago
Comment: 8183

cahndeso's picture

coba utak-utik di bagian function uploacam baris:

echo "Hasil : " . $cam->saveImage('public/upload/');

jika aplikasi jalan di subfolder misal skripsi coba ubah jadi
$cam->saveImage('skripsi/public/upload');

juga pada file jquery.webcam.js
ubah
url: 'webcam/uploadcam/',
dengan
url: 'skripsi/webcam/uploadcam/',

Happy ngoprek...

Cahndeso..

masih belum bisa nyimpen capture cam

May 19, 2011 by cendol, 12 weeks 5 days ago
Comment: 8185

cendol's picture

sudah bisa jalan om di CI 1.7.2 saya

tapi masih belum bisa nyimpen hasil jepretan camera

url juga sudah saya ganti seperti yg diatas

gmn om?

koq masih error ya om

May 19, 2011 by cendol, 12 weeks 5 days ago
Comment: 8180

cendol's picture

saya pake CI 1.7.2 maklum terlanjur itu sih

yg class CI_Controller udah saya ganti Controller dan tidak ada error

file .htaccess koq ga mau jalan di tempat saya?
cara menulisnya gmn ya?
saya sudah copy .htaccess anda trs saya save as .htaccess sejajar dengan system, index seperti yg dituliskan anda

urlnya masih ada index.php
berikut saya sertakan screen shoot nya

lokasi swf nya masih di ...index.php/public/js/webcam.swf

detailnya liat gambar attachment nya om,

thx ya om dah berkontribusi di tugas akhir saya

anda jalankan aplikasi di

May 19, 2011 by cahndeso, 12 weeks 5 days ago
Comment: 8181

cahndeso's picture

anda jalankan aplikasi di subfolder skripsi

file .htaccess
pada bagian RewriteBase /
ganti dengan RewriteBase /skripsi/

di application/config/config.php

$config['index_page'] = '';

kosongkan... jangan diisi dengan index.php

pada bagian:

			this.options = {
				height: 250,
				width: 	250,
				swfUrl: '/public/js/webcam.swf',
				id: 	'webcamMovie',
				shutterSound: true,
				shutterUrl: '/public/js/shutter.mp3',
				url: 'webcam/uploadcam/',
				quality: 100
			};

coba ganti /public/js/webcam.swf dengan /skripsi/public/js/webcam.swf
juga ganti /public/js/shutter.mp3 dengan /skripsi/js/shutter.mp3

coba dulu yang itu...

Happy Coding..

Cahndeso..

malah error om

May 19, 2011 by cendol, 12 weeks 5 days ago
Comment: 8184

cendol's picture

coba login malah tulisan object not found

http://localhost/skripsi/Logincontrol/cekLogin

harusnya sebelum index dihapus url nya menjadi

http://localhost/skripsi/index.php/Logincontrol/cekLogin

kok.. malah kosong... kalau

May 19, 2011 by cahndeso, 12 weeks 5 days ago
Comment: 8186

cahndeso's picture

kok.. malah kosong...
kalau pakai yang dari user_guide bgmn?

RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]

Cahndeso...

ralat om

May 19, 2011 by cendol, 12 weeks 5 days ago
Comment: 8187

cendol's picture

awal2 td masih kosong tp index.php di config ga jadi aku hilangin malah bisa

setelah aku buka http://localhost/skripsi/index.php/webcam
webcam udah jalan, tetapi masih belum bisa simpen gambar jepretannya, apa harus di hilangin index.php nya biar bisa jalan? tapi koq ga hilang2 index.php saya

Ok... file anda terdiri

May 19, 2011 by cahndeso, 12 weeks 5 days ago
Comment: 8178

cahndeso's picture

Ok... file anda terdiri dari:

1. absensiku.html
2. jquery.min.js
3. jquery.webcam.js
4. shutter.mp3
5. test.php
6. webcam.swf
dan 2 folder gambar dan upload.

Mari kita coba terapkan di Codeigniter. (file absensiku, test.php dan folder gambar, upload
tidak akan saya gunakan.

saya berasumsi bahwa anda sudah memakai .htaccess. sehingga url seperti berikut:
http://localhost/controller/function (tidak ada lagi index.php sesudah localhost.)
jika anda belum punya file .htacess, berikut adalah isi file .htaccess saya:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
 
    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #'system' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ index.php?/$1 [L]
 
    #When your application folder isn't in the system folder
    #This snippet prevents user access to the application folder
    #Submitted by: Fabdrol
    #Rename 'application' to your applications folder name.
    RewriteCond %{REQUEST_URI} ^application.*
    RewriteRule ^(.*)$ index.php?/$1 [L]
 
    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn't true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

buat folder public sejajar dengan application, system, userguide dan index.php.
didalam folder public buat lagi folder js, css, images dan upload
sehingga susunan folder anda sekarang

  • application
  • public
    • css
    • images
    • js
    • upload
  • system
  • user_guide
  • .htaccess
  • index.php

copykan file jquery.min.js, jquery.webcam.js, shutter.mp3 dan webcam.swf ke folder js..
(sorry, saya gabungkan file mp3 dan swf juga ke folder js).

ubah file jquery.webcam.js sehingga menjadi seperti berikut:

/*
	jQuery WebCam Capture Plugin
	@Author: Esteban Fuentealba
	@Version: 1.0
	@edited by "cahndeso"
*/
	var webCamObject = null;
	$.fn.extend({
		createWebCam : function(opt) {
			this.options = {
				height: 250,
				width: 	250,
				swfUrl: '/public/js/webcam.swf',
				id: 	'webcamMovie',
				shutterSound: true,
				shutterUrl: '/public/js/shutter.mp3',
				url: 'webcam/uploadcam/',
				quality: 100
			};
			window.webcam = { flash_notify: function(type, url) { $.WebCam.notify(type,url); } };
			$.extend({
				WebCam : {
					notify : function(type,msg) {
						$(document).trigger('webcamNotify',{ type: type, msg: msg  });
						$(document).unbind('webcamNotify');
					}
				}
			});
			this.objSwf = null;
			this.htmlElement = $(this);
			$.extend(this.options, opt);
			var flashVars = 'shutter_enabled=' + (this.options.shutterSound ? 1 : 0) + '&shutter_url=' + escape(this.options.shutterUrl) +'&width=' + this.options.width + '&height=' +this.options.height +'&server_width=' + this.options.width +'&server_height=' + this.options.height;
			if($.browser.msie){ 
				this.objSwf = $('<object>').attr('id',this.options.id).attr('width',this.options.width).attr('height',this.options.height
				).append(
					$('<param>').attr('name','allowScriptAccess').attr('value','always')
				).append(
					$('<param>').attr('name','allowFullScreen').attr('value','false')
				).append(
					$('<param>').attr('name','movie').attr('value',this.options.swfUrl)
				).append(
					$('<param>').attr('name','loop').attr('value','false')
				).append(
					$('<param>').attr('name','menu').attr('value','false')
				).append(
					$('<param>').attr('name','quality').attr('value','best')
				).append(
					$('<param>').attr('name','flashvars').attr('value',flashVars)
				);
			} else {
				this.objSwf = $('<embed>').attr('id',this.options.id).attr('src',this.options.swfUrl).attr('width',this.options.width).attr('height',this.options.height).attr('loop','false').attr('menu','false').attr('quality','best').attr('bgcolor','#ffffff').attr('name',this.options.id).attr('allowScriptAccess','always').attr('allowFullScreen','false').attr('type','application/x-shockwave-flash').attr('flashvars',flashVars);
			}
			$(this).append(
				this.objSwf
			);
			this.getMovie = function() {
				return document.getElementById(this.options.id);
			}
			this.capture = function(callback) {
				this.getMovie()._snap(this.options.url, this.options.quality, (this.options.shutterSound ? 1 : 0) , 0 );
				$(document).bind('webcamNotify',function(e,json) { callback(json); }  );
				return $(this);
			}
			this.reset = function(callback) {
				this.getMovie()._reset();
				return $(this);
			}
			this.configure = function(panel) {
				if (!panel) panel = "camera";
				this.getMovie()._configure(panel);
				return $(this);
			}
			webCamObject = this;
			return $(this);
		},
		getWebCam : function() {
			if(webCamObject != null){ return webCamObject; }
		}
	});

perhatikan pada bagian :
				swfUrl: '/public/js/webcam.swf',
				id: 	'webcamMovie',
				shutterSound: true,
				shutterUrl: '/public/js/shutter.mp3',
				url: 'webcam/uploadcam/',

file swf akan di ambil dari folder public/js/webcam.swf
file mp3 akan di ambil dari folder public/js/shutter.mp3
url yang akan dieksekusi adalah webcam/uploadcam (controller webcam funcion uploadcam)

Buat library baru dengan nama Webcamupload.php simpan di folder application/libraries.
isinya sebagai berikut:

<?php
/* WebCamUpload library
   create by cahndeso
*/
class WebCamUpload {
 
  var $input = null;
  var $serverRequest = null;
 
  public function __construct() {
  }
  public function load($serv,$in) {
    $this->input = $in;
    $this->serverRequest = $serv;
 
  }
 
  public function saveImage($dir='') {
    $filename = md5(date('YmdHisu')) . '.jpg';
    $result = file_put_contents($dir . $filename, $this->input);
    if (!$result) {
      throw new Exception("No se pudo guardar la imagen, revisa permisos");
      exit();
    }
    return 'http://' . $this->serverRequest['HTTP_HOST'] . dirname($this->serverRequest['REQUEST_URI']) . '/' . $dir . $filename;
  }
 
}

buat controller webcam.php simpan di application/controllers
isinya seperti berikut:
<?php
 
if (!defined('BASEPATH'))
  exit('No direct script access allowed');
 
class Webcam extends CI_Controller {
 
  function __construct() {
    parent::__construct();
  }
 
  function index() {
    $this->load->view("webcam/index");
  }
 
  function uploadcam() {
    try {
      $this->load->library("webcamupload");
      $cam = new WebCamUpload;
      $cam->load($_SERVER,  file_get_contents("php://input"));
      echo "Hasil : " . $cam->saveImage('public/upload/');
    } catch (Exception $e) {
      echo $e->getMessage();
    }
  }
}

Perhatikan baris:
echo "Hasil : " . $cam->saveImage('public/upload/');
ini berarti hasil akan disimpan di folder public/upload.

perhatikan dibaris $this->load->view("webcam/index");
ini berarti view akan diambil dari folder views/webcam/index.php
maka buat folder webcam di application/views.
buat file index.php di folder tersebut (application/views/webcam)
isinya seperti berikut :

<html lang="en">
<head>
  <?php 
    echo script_tag("public/js/jquery.min.js"); 
    echo script_tag("public/js/jquery.webcam.js"); 
  ?>
	<script type="text/javascript" language="JavaScript">
 
		$(function() {
			$('#webcam').createWebCam();
			$('#capture').click(function() {
				 $('#webcam').getWebCam().capture(function(json){
					if(json.type=="success") {
						console.log('URL: '+json.msg);
					} else if(json.type == "error") {
						console.log('ERROR: '+json.msg);
					}
				});
			});
			$('#reset').click(function() {
				 $('#webcam').getWebCam().reset();
			});
			$('#configure').click(function() {
				 $('#webcam').getWebCam().configure();
			});
		});
	</script>
 
</head>
<body>
	<div id="webcam"></div>
</body>
    <a href="#" id="capture">Capture</a>
    <a href="#" id="reset">Reset</a>
    <a href="#" id="configure">Configure</a>
</html>

perhatikan di baris: echo script_tag("public/js/jquery.min.js");
saya menggunakan script_tag yang ada My_html_helper.php (jawaban saya terdahulu).

jika sudah semua:
coba anda akses di http://domainanda/webcam

coba capture... tentu tidak lupa, komputer anda harus ada webcamnya....

di attachment saya sertakan screenshoot folder upload hasil eksekusi program diatas....
semoga membantu sebelum deadline...
Happy coding...

Cahndeso...

hiks hiks hiks

May 18, 2011 by cendol, 12 weeks 6 days ago
Comment: 8177

cendol's picture

apa karena kebykan pikiran jadi ga fresh mencermati comment diatas, gini deh om, saya punya ini seperangkat attachment, jika di tempatkan di folder CI bagaimana tutor nya..
file attachment saya coba anda jalankan di luar folder ci. trs coba running absensiku.html

lha saya mau sperti itu, tetapi di CI

bagaimana om?
hiks hiks, deadline semakin dekat

thx b4

Menambah file css, js, images

May 18, 2011 by cahndeso, 12 weeks 6 days ago
Comment: 8175

cahndeso's picture

Praktek yang sering saya lakukan,
buat folder baru dengan nama public sejajar dengan application, system dan user_guide.
di folder public tersebut sy buat subfolder js, css dan images
tempatkan file-file sesuai dengan foldernya.
sehingga strukturnya menjadi seperti berikut:
application
---
---
system
---
---
user_guide
---
---
public
js
---
css
---
images
---
index.php
.htaccess

contoh untuk memanggil css (misal nama file style.css, tentu di folder public/css:

echo link_tag("public/css/style.css");

contoh menampilkan gambar (misal icon.png yang ada di folder public/images

echo img("public/images/icon.png");

(jangan lupa untuk load helper html, di autoload atau di controller function.)

Untuk load file javascript, saya juga ingin menggunakan seperti link_tag tadi. untuk keperluan tersebut, html_helper sy tambahkan/diperluas dengan menambahkan function script_tag. di attachment yang saya sertakan (file MY_html_helper.php, tempatkan di folder application/helpers) ada tambahan function script_tag.

sehingga sekarang untuk memanggil file javascript tinggal gunakan perintah:
(misal file yang akan dipanggil adalah jquery.js di folder public/js)

echo script_tag("public/js/jquery.js");

Untuk memanggil function yang ada didalamnya, sama seperti praktek javascript umumnya...

Helper diatas (html helper mulai dari link_tag(), br(), heading(), meta() dsb, serta yang baru saja ditambahkan di MY_html_helper.php yaitu script_tag() hanya digunakan untuk mempermudah generate tag html.
Kemudahannya adalah bahwa CI akan secara otomatis juga menambahkan path dari config.php $config["base_url"] jika diperlukan, contoh untuk link_tag dan script_tag tadi.

Jika
$config["base_url"] = "http://localhost/"
maka perintah
echo script_tag("public/js/jquery.js");
akan menghasilkan

<script  src="http://localhost/public/js/jquery.js" language="javascript" type="text/javascript">

Nah, pada saat anda ingin pasang di domain aktif, katakanlah http://www.domain.com
maka $config["base_url"] = "http://www.domain.com";
perintah
echo script_tag("public/js/jquery.js");
akan menghasilkan kode html :
<script  src="http://www.domain.com/public/js/jquery.js" language="javascript" type="text/javascript">

perhatikan localhost yang otomatis menjadi www.domain.com. jadi dipindahkan dan kemudian ubah $config["base_url"], maka otomatis CI akan menyesuaikan.

Semoga membantu...

Happy coding.

Cahndeso

minta codding full nya boleh

July 12, 2011 by sandy_sendy, 5 weeks 3 hours ago
Comment: 8555

sandy_sendy's picture

minta codding full nya boleh mas? saya mau melajarin, urgent bgt :(

Premium Drupal Themes by Adaptivethemes