Star Rating

Fernando Web · Maio 12, 2009

Boa tarde amigos, necessito da ajuda de vcs;

Estou desenvolvendo um sistema de Star Rating para avaliação dos produtos de uma loja virtual, o mesmo é bem parecido ao do Submarino.com. O cliente escolhe a nota (1 a 5) nas estrelas, informa o titulo, opnião, nome, cidade, uf e email.

Não tenho ideia de como salvar essas informações na base SQL 2005, minhas paginas são em ASP. E pelo que eu vi em alguns codigos que achei pela net, a maioria usa ajax, mas não tenho ideia de como passar os valores dos campos e das "estrelas" para a pagina .ASP que salvará tudo.

Vou postar oq já fiz para vcs verem:

Link: star_rating

demo.html

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<title>Star Rating Form Widget 2</title>
	<script type="text/javascript" src="prototype.lite.js"></script>
	<script type="text/javascript" src="stars.js"></script>
	<link rel="stylesheet" href="stars.css" type="text/css" />
</head>
<body>

				







<script>	
	new Starry('multiplier', {maxLength:5, multiplier:1, feedback:true});
</script>

<table width="315" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td width="63" height="31" align="right" valign="top">Titulo: </td>
	<td width="252" valign="top"><label>
	   <input type="text" name="textfield" id="textfield" />
	</label></td>
  </tr>
  <tr>
	<td height="115" align="right" valign="top">Opnião: </td>
	<td valign="top"><label>
	  <textarea name="textfield2" rows="6" id="textfield2"></textarea>
	</label></td>
  </tr>
  <tr>
	<td height="29" align="right" valign="top">Nome: </td>
	<td valign="top"><input type="text" name="textfield3" id="textfield3" /></td>
  </tr>
  <tr>
	<td height="27" align="right" valign="top">Cidade: </td>
	<td valign="top"><input type="text" name="textfield4" id="textfield4" />
	Uf: 
	  <label>
	  <select name="select" id="select">
		<option value="SP">SP</option>
		<option value="RJ">RJ</option>
	  </select>
	</label></td>
  </tr>
  <tr>
	<td height="27" align="right" valign="top">E-mail: </td>
	<td valign="top"><input type="text" name="textfield5" id="textfield5" /></td>
  </tr>
  <tr>
	<td align="right"> </td>
	<td valign="top"> </td>
  </tr>
  <tr>
	<td align="right"> </td>
	<td align="right" valign="top"><label>
	  <input type="submit" name="btn_enviar" id="btn_enviar" value="Enviar" />
	</label></td>
  </tr>
</table>





</body>
</html>

prototype.lite.js

var Class = {
	create: function() {
		return function() {
			this.initialize.apply(this, arguments);
		}
	}
}

Object.extend = function(destination, source) {
	for (property in source) destination[property] = source[property];
	return destination;
}

Function.prototype.bind = function(object) {
	var __method = this;
	return function() {
		return __method.apply(object, arguments);
	}
}

Function.prototype.bindAsEventListener = function(object) {
var __method = this;
	return function(event) {
		__method.call(object, event || window.event);
	}
}

function $() {
	if (arguments.length == 1) return get$(arguments[0]);
	var elements = [];
	$c(arguments).each(function(el){
		elements.push(get$(el));
	});
	return elements;

	function get$(el){
		if (typeof el == 'string') el = document.getElementById(el);
		return el;
	}
}

if (!window.Element) var Element = new Object();

Object.extend(Element, {
	remove: function(element) {
		element = $(element);
		element.parentNode.removeChild(element);
	},

	hasClassName: function(element, className) {
		element = $(element);
		if (!element) return;
		var hasClass = false;
		element.className.split(' ').each(function(cn){
			if (cn == className) hasClass = true;
		});
		return hasClass;
	},

	addClassName: function(element, className) {
		element = $(element);
		Element.removeClassName(element, className);
		element.className += ' ' + className;
	},
  
	removeClassName: function(element, className) {
		element = $(element);
		if (!element) return;
		var newClassName = '';
		element.className.split(' ').each(function(cn, i){
			if (cn != className){
				if (i > 0) newClassName += ' ';
				newClassName += cn;
			}
		});
		element.className = newClassName;
	},

	cleanWhitespace: function(element) {
		element = $(element);
		$c(element.childNodes).each(function(node){
			if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) Element.remove(node);
		});
	},

	find: function(element, what) {
		element = $(element)[what];
		while (element.nodeType != 1) element = element[what];
		return element;
	}
});

var Position = {
	cumulativeOffset: function(element) {
		var valueT = 0, valueL = 0;
		do {
			valueT += element.offsetTop  || 0;
			valueL += element.offsetLeft || 0;
			element = element.offsetParent;
		} while (element);
		return [valueL, valueT];
	}
};

document.getElementsByClassName = function(className) {
	var children = document.getElementsByTagName('*') || document.all;
	var elements = [];
	$c(children).each(function(child){
		if (Element.hasClassName(child, className)) elements.push(child);
	});  
	return elements;
}

//useful array functions
Array.prototype.iterate = function(func){
	for(var i=0;i<this.length;i++) func(this[i], i);
}
if (!Array.prototype.each) Array.prototype.each = Array.prototype.iterate;

function $c(array){
	var nArray = [];
	for (var i=0;i<array.length;i++) nArray.push(array[i]);
	return nArray;
}

stars.css

div.starry {
	width:auto;
	xfloat:left;
	margin:10px 0 10px 0;
	padding:5px;
	xborder:1px solid #ddd;
	width:auto;
}
div.standard_star {
	background-repeat: no-repeat;
	cursor:pointer;
	float:left;
	display:inline;
}
div.feedback {
	border:1px solid #ddd;
	padding:5px 3px 3px;
	display:inline;
}

stars.js

var debug = false;

var StarryDefaults = {
		sprite: "stars.gif",
		width: 30,
		height: 30,
		startAt: 0,
		maxLength: 5,
		multiplier: 1,
		showNull: true,
		align: 'left',
		feedback: false
};

// The Starry Class
// new Starry('id_of_element'[, {options}]);
// This is the main starry widget. Create new widgets after window load
var Starry = Class.create();
Starry.prototype = {
	initialize: function(element) {
		//console.log($(element));
		document.write('<div id="'+element+'"></div>');

		while($(element) == null){ 
			//timeout
		}
		this.element = $(element);
		this.element.className = "starry";				
		this.options = {};
		// get our defaults
		Object.extend(this.options, StarryDefaults);
		Object.extend(this.options, arguments[1] || {});		
		this.name = this.options.name || "starry" + id.next();
		this.element.style.height = this.options.height + 'px';		
		if(debug) console.log(this.options.showNull);
		// lets build our array with an extra one for null
		this.children = new Array(this.options.maxLength + 1);
		if(debug) console.log('children length '+ this.children.length);		
		// lets make the hidden form value
		this.hidden = document.createElement("input");
		this.hidden.type = "hidden";
		this.hidden.name = this.name;
		this.element.appendChild(this.hidden);				
		// build out each child
		for(i=0; i < this.children.length; i++) {
			this.children[i] = new SingleStar(this, i);
			this.element.appendChild(this.children[i].element);
		}
		if( this.options.feedback ) {
			this.feedback = document.createElement('div');
			this.feedback.className = "feedback";
			this.feedback.style.cssFloat = this.options.align;
			this.element.appendChild(this.feedback);
		}	
		// startup
		this.selected = this.options.startAt;
		this.reset(this.selected);
		
	},
	set: function(index) {
		if(debug) console.log('set index '+ index);
		// set the child
		for(var i=1; i < this.children.length; i++)
			this.children[i].element.style.backgroundPosition = (i <= index) ? "0 -" + this.options.height * 2 + "px" : "0 0";
		if(this.options.feedback) 
			this.feedback.innerHTML = this.children[index].value;
		this.selected = index;
		// set the form value
		this.hidden.value = this.children[index].value;
		if(debug) console.log('set value ' + this.hidden.value);
	},
	show: function(index) {
		if(debug) console.log('show index '+ index);		
		// show the child
		for(var i=1; i < this.children.length; i++)
			this.children[i].element.style.backgroundPosition = (i <= index) ? "0 -" + this.options.height + "px" : "0 0";
		if(this.options.feedback)
			this.feedback.innerHTML = this.children[index].value;	
	},
	reset: function() { this.set(this.selected); },
	clear: function() {
		for(var i=1; i < this.children.length; i++)
			this.children[i].element.style.backgroundPosition = "0 0";
	}
};

// Class: SingleStar(parent_object, index of that parent's children)
// Not to be called directly, inherits its options from a Starry object
var SingleStar = Class.create();
SingleStar.prototype = {
	initialize: function(parent, index) {
		this.parent = parent;
		this.index = index;
		if(debug) console.log('Creating star at index '+ this.index);
		this.value = this.index * this.parent.options.multiplier;
		if(debug) console.log('value '+ this.value);
		this.element = document.createElement("div");
		this.element.style.width = this.parent.options.width + "px";
		this.element.style.height = this.parent.options.height + "px";
		this.element.style.backgroundImage = "url(" + this.parent.options.sprite + ")";
		this.element.style.backgroundPosition = (this.index == 0) ? "0 -" + this.parent.options.height * 3  +"px" : "0 0";
		this.element.className = "standard_star";
		this.element.style.cssFloat = this.parent.options.align;
		if(!this.parent.options.showNull && this.index == 0) this.element.style.display = "none";
		this.element.onclick = function() { this.parent.set(this.index); }.bind(this);
		this.element.onmouseover = function() { this.parent.show(this.index); }.bind(this);
		this.element.onmouseout = this.parent.reset.bind(this.parent);
		if(debug) console.log('set onclick handler');
	}
};

// this function manages an auto_increment for id's
var id = { start: 0, prev: 0, next: function() { return this.start + this.prev++; } };

hargon · Maio 12, 2009

Você tem que lê a documentação desse script. A principio ele só seleciona mas não informa o valor. Talvez no site onde você pegou está explicando melhor isso.

Caso não tenha uma documentação será necessário entender o que foi feito e realizar algumas adaptações.

Tópico movido!

Origem: ASP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Destino: Javascript/DHTML

Fernando Web · Maio 13, 2009

Galera, com uma ajuda no Blog do Ted K' consegui adaptar uma codigo com ajax para cadastro da opnião do cliente (link teste).

Estou com uma tremenda dificuldade em unir o codigo acima com o cod abaixo, ñ consigo pegar o valor das estrelas marcadas. Não tenho esperiencia com javascript e ajax e estou penando para fazer esse Star Rating.

Se alguem puder me ajudar fico muito grato!!

Segue cod do cadastro:

O cod a seguir pega os valores nos campos e cadastra na base de dados, quero salvar no campo nota o valor das estrelas que vai de 0 a 5!

opnião_cad.asp

<%@ Language="JavaScript" %>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%   
var Conexao;   
var Conexao = Server.CreateObject("ADODB.Connection");   
Conexao.ConnectionString = "UID=****; PWD=*****; driver={SQL Server}; SERVER=*****; DATABASE=*****";   
Conexao.Open;   
%>  
<head>

<title>Cadastrar</title>  
<script language="javascript" src="opniao_ajax.js"></script>  
</head>

<body>
<div id="Resposta"></div><br>

<form id="Form"> 

<table width="315" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td width="63" height="31" align="right" valign="top">Titulo: </td>
	<td width="252" valign="top"><label>
	   <input type="text" name="Titulo" id="Titulo" value="">
	</label></td>
  </tr>
  <tr>
	<td height="115" align="right" valign="top">Opnião: </td>
	<td valign="top"><label>
	  <textarea name="Opniao" rows="6" id="Opniao" value=""></textarea>
	</label></td>
  </tr>
  <tr>
	<td height="29" align="right" valign="top">Nome: </td>
	<td valign="top"><input type="text" name="Nome" id="Nome" value=""></td>
  </tr>
  <tr>
	<td height="27" align="right" valign="top">Cidade: </td>
	<td valign="top"><input type="text" name="Cidade" id="Cidade" value="">
	Uf: 
	  <label>
	  <select name="UF" id="UF" >
		<option value="SP">SP</option>
		<option value="RJ">RJ</option>
	  </select>
	</label></td>
  </tr>
  <tr>
	<td height="27" align="right" valign="top">E-mail: </td>
	<td valign="top"><input type="text" name="EMail" id="EMail" value=""></td>
  </tr>
  <tr>
	<td align="right"> </td>
	<td valign="top"> </td>
  </tr>
  <tr>
	<td align="right"> </td>
	<td align="right" valign="top"><label>
	<input type="button" id="Cadastrar" value="Cadastrar" name="Cadastrar" onClick="CadastrarDados();">
	</label></td>
  </tr>
</table>

</form>

<div id="ler_Dados"></div>  

<%
varUser_id = "contato@cobequi.com.br"
varData = Date()
varCodProd = "000111"
varNota = "5"   
if (Request.QueryString("Cadastrar") == "Ok") {
Conexao.Execute("Insert Into tbl_opn_cli (user_id,e_mail,titulo,nome,opniao,cidade,uf,data,cod_prod,nota) Values ('"+varUser_id+"','"+Request.QueryString("EMail")+"','"+Request.QueryString("Titulo")+"','"+Request.QueryString("Nome")+"','"+Request.QueryString("Opniao")+"','"+Request.QueryString("Cidade")+"','"+Request.QueryString("UF")+"','"+varData+"','"+varCodProd+"','"+varNota+"')");   
Response.Write("");   
}
  
if (Request.QueryString("Deletar") == "Ok") {   
Conexao.Execute("Delete From tbl_opn_cli Where Codigo = "+Request.QueryString("id")+"");   
Response.Write("");   
}   
%>  


</body>
</html>

opniao_ajax.js

function GetXMLHttp() {   
if(navigator.appName == "Microsoft Internet Explorer") {   
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
}   
else {   
xmlHttp = new XMLHttpRequest();   
}   
return xmlHttp;   
}   
  
var Enviar = GetXMLHttp();   
  
// Início - opniao_cad   
function CadastrarDados() {   
var Titulo = document.getElementById("Titulo");
var Opniao = document.getElementById("Opniao");
var Nome = document.getElementById("Nome");  
var Cidade = document.getElementById("Cidade");
var UF = document.getElementById("UF");
var EMail = document.getElementById("Email");	
  
var URL = "opniao_cad.asp?Cadastrar=Ok&Titulo="+Titulo.value+"&Opniao="+Opniao.value+"&Nome="+Nome.value+"&Cidade="+Cidade.value+"&UF="+UF.value+"&EMail="+EMail.value+"";   
Enviar.open("GET", URL, true);   
Enviar.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   
document.getElementById("Resposta").innerHTML = "Muito obrigado. Cadastrado com sucesso!";   

Titulo.value = "";
Opniao.value = ""; 
Nome.value = "";
Cidade.value = "";
UF.value = ""; 
EMail.value = "";   
  
Enviar.send(null);   
Enviar.onload = lerTexto;   
}   
// Final - opniao_cad   
  
// Início - Deletar   
function apagar(id, rowIndex) {   
if (confirm('Tem certeza que deseja excluir este registro?')) {   
document.getElementById("tabela").deleteRow(rowIndex);   
  
Enviar.open("POST",'opniao_cad.asp?Deletar=Ok&id='+ id, false);   
Enviar.send(null);   
}   
}   
// Final - Deletar   
  
// Início - Carregar Página   
function lerTexto() {   
var URLler = "Ler.asp";   
Enviar.onreadystatechange = stateChanged;   
Enviar.open("GET", URLler, true);   
Enviar.send(null);   
}   
  
function stateChanged() {   
if (Enviar.readyState==4) {   
document.getElementById("ler_Dados").innerHTML = Enviar.responseText;   
}   
}   
  
window.onload = lerTexto;   
// Final - Carregar Página

Entrar

Arquivado

Star Rating

Recommended Posts

Fernando Web 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hargon 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fernando Web 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Orientação - Codificação Caracteres Especiais em Java

Não consigo carregar imagem do captcha no meu formulário

Estou criando uma calculadora de m2 e litros de tinta

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante