Curso PHP 5a Parte

CENTRO UNIVERSITÁRIO CENTRAL PAULISTA - UNICEP
APOSTILA DE PHP
- Aula 5 -
Prof. José Eduardo dos Reis
São Carlos
2007
Exemplos com banco de dados
Crie uma nova base de dados no MySql, através do PhpMyAdmin, com o nome
base5. Para acessar o phpmyadmin, basta iniciar o servidor apache e digitar o
endereço no browser: http://localhost/public/phpmyadmin/index.php
Na seqüência, criaremos 3 tabelas:
Usuario
idusuario_us int auto_increment
login_us varchar(20)
senha_us varchar(20)
Obs.: insira pelo menos um registro na tabela para testarmos o acesso à Área
Restrita.
Fotos
idfoto int auto_increment
foto blob
descricao varchar(100)
Home
idhome int auto_increment
descricao text
2
Crie uma página HTML como mostrado abaixo e salve-a com o nome index.php:
Figura 1 – index.php
O menu de opções, destacado em vermelho na figura 2, será recortado, salvo em um

arquivo chamado menu.php e inserido, com include ou require.
Isto porque, caso necessitemos inserir mais opções em nosso menu, basta alterar o
arquivo menu.php, e todas as páginas que estão usando esse menu serão atualizadas
automaticamente.
Figura 2 – Incluindo o menu na página inicial
3
Para adicionar o menu.php, use o código abaixo:
<? require_once(“menu.php”); ?>
Faremos duas verificações antes de acessarmos a Área restrita (arearestrita.php):
1) em javascript, verifique se os campos usuario e senha foram preenchidos;

 - em caso positivo, avance para a página de validação dos campos no banco
(acesso.php);
 - em caso negativo, a página não deverá avançar.
Ex:
<script>
function verifica()
{
if (window.document.form1.usuario.value == '')
alert("O campo usuário não foi preenchido!")
else if (window.document.form1.senha.value == '')
alert("O campo senha não foi preenchido!")
else
window.document.form1.submit();
}
</script>
2) Caso os campos tenham sido preenchidos, o formulário será submetido e avançará

para o arquivo acesso.php, o qual irá verificar se esses campos são válidos, isto é, se
eles foram cadastrados na tabela Usuario.
Seguem os códigos HTML:
index.php
<html>
<head>
<title>..:: Exemplos com PHP ::..</title>
<style type="text/css">

</style>
</head>
<body>
<p>PÁGINA INICIAL</p>
<hr align="left" width="700">

<? require_once("menu.php"); ?>

<p><br>
<br>
</p>
4
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<hr align="left" width="700">
<table width="700" border="1" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#99CCFF"><strong>Página Inicial </strong></td>
</tr>
<tr>
<td><p> </p>
<p>conteúdo da página inicial ! </p></td>
</tr>
</table>
<p> </p>
</body>
</html>
menu.php
<script>
function verifica()
{
if (window.document.form1.usuario.value == '')
alert("O campo usuário não foi preenchido!")
else if (window.document.form1.senha.value == '')
alert("O campo senha não foi preenchido!")
else
}
</script>
<form name="form1" method="post" action="acesso.php">

<table width="180" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.php">► Página inicial</a> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><a href="fotos.php">► Fotos </a></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table width="180" border="1" align="center" cellpadding="0" cellspacing="0"
bordercolor="#000066">
<tr>
<td bgcolor="#000066"><div align="center" class="style1">Área restrita </div></td>
</tr>
<tr>
<td>Usuário:
<input name="usuario" type="text" id="usuario" size="10"></td>
</tr>
<tr>
<td>Senha:
<input name="senha" type="password" id="senha" size="10"></td>
</tr>
<tr>
5
<td>
<input name="Button" type="button" id="Submit" value="Avançar"
onclick="javascript:verifica();" />
</td>
</tr>
</table></td>
</tr>
</table>
</form>
Para evitar a repetição da conexão com o banco de dados, criaremos um arquivo

chamado conexao.php e o incluiremos nas páginas onde forem necessárias.
conexao.php
<?php
mysql_connect("localhost","root","") or die("Erro de conexão");
mysql_select_db("base5") or die("Base de dados não existe");
?>
acesso.php
<?
require_once('conexao.php');
session_start();
$usuario = $_POST["usuario"];
$senha = $_POST["senha"];
$rset = mysql_query("Select * from Usuario where login_us ='$usuario' and senha_us

='$senha'");
if (mysql_num_rows($rset) > 0)
{
if(!(session_is_registered("idusuario")))
$_SESSION["idusuario"] = mysql_result($rset,0,'idusuario_us');
header("Location: arearestrita.php");
}
else
header("Location: index.php");
?>
arearestrita.php
<?
session_start();
if (session_is_registered("idusuario"))
{
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/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>Untitled Document</title>
</head>
<body>
6
<p>ÁREA RESTRITA</p>
<hr align="left" width="700" />
<p><a href="listausuarios.php">Cadastro de usuários</a></p>
<p><a href="listafotos.php">Cadastro de fotos</a> </p>
<p><a href="listahome.php">Cadastro do conteúdo da Área Restrita</a></p>
<p><a href="destruirsessao.php">| FECHAR | </a></p>
<p> </p>
<p> </p>
</body>
</html>
<?
}
else
?>
destruirsessao.php
<?
session_start(); // inicio a sessao
unset($_SESSION['idusuario']); // limpo a sessao
session_destroy(); // destruo a sessao
header("Location: index.php"); // redireciono para a página principal
?>
CADASTRO DE USUÁRIOS
listausuarios.php
<?
session_start();
{
?>
<html>
<head>
</head>
<body>
<p>Lista de Usuários</p>
<tr>
<td width="273" bgcolor="#D9ECFF"><strong>Usuário</strong></td>
<td width="219" bgcolor="#D9ECFF"><strong>Senha</strong></td>
<td colspan="2" bgcolor="#D9ECFF"><div
align="center"><strong>Opções</strong></div></td>
</tr>

<?
$rset = mysql_query("Select * from Usuario Order by login_us");
while ($linha = mysql_fetch_assoc($rset))
{
?>
<tr>
7
<td><?=$linha["login_us"] ?></td>
<td><?=$linha["senha_us"] ?></td>
<td width="98"><div align="center"><a href="alterarusuario.php?id=<?= $linha["idusuario_us"] ?
>">Alterar</a></div></td>
<td width="100"><div align="center"><a href="excluirusuario.php?id=<?= $linha["idusuario_us"] ?
>">Excluir</a></div></td>
</tr>
<?
}
?>
</table>
<p align="left">|<a href="arearestrita.php"> Voltar </a>|<a href="inserirusuario.php"> Inserir </a>|</p>
<p> </p>
</body>
</html>
<?
}
else
?>
inserirusuario.php
<?
session_start();
{
?>
<html>
<head>
<script>
function verifica()
{
if (window.document.forminserir.login.value == '')
alert("Campo login esta vazio!")
else if (window.document.forminserir.senha1.value == '')
alert("Campo senha esta vazio!")
else if (window.document.forminserir.senha1.value !=
window.document.forminserir.senha2.value)
alert("Senha não confere!")
else
window.document.forminserir.submit();
}
</script>
</head>
<body>
<p>Inserção de Usuários</p>
<form name="forminserir" method="post" action="finalinserir.php" >
<tr>
<td width="136"><div align="right">Login:</div></td>
<td width="258"><input name="login" type="text" id="login" /></td>
</tr>
<tr>
<td><div align="right">Senha:</div></td>
<td><input name="senha1" type="password" id="senha1" /></td>
</tr>
<tr>
8
<td><div align="right">Confirma senha: </div></td>
<td><input name="senha2" type="password" id="senha2" /></td>
</tr>
</table>
<p>|<a href="listausuarios.php"> Voltar </a>| <a href="javascript:verifica();"> Inserir </a>|</p>

</form>
</body>
</html>
<?
}
else
?>
finalinserir.php
<?
session_start();
{
$login = $_REQUEST["login"];
$senha = $_REQUEST["senha1"];
?>
<html>
<head>
</head>
<body>
<?
$sql = "Select * from Usuario where login_us ='".$login."'";
$rset = mysql_query($sql);
$total = mysql_num_rows($rset);
if ($total > 0)
echo $login."já existe no banco!";
else
{
$sql = "Insert into Usuario (idusuario_us, login_us, senha_us)
Values ('','".$login."','".$senha."')";
echo " $login inserido com sucesso! ";
}
?>
<hr align="left" width="700"/>
<p><a href="listausuarios.php">| VOLTAR | </a></p>
</body>
</html>
<?
}
else
?>
9
alterarusuario.php
<?
session_start();
{
$id = $_REQUEST['id'];
$rset = mysql_query("Select * from Usuario Where idUsuario_us = $id");
if($linha = mysql_fetch_assoc($rset))
{
$login = $linha['login_us'];
$senha = $linha['senha_us'];
}
?>
<html>
<head>
<script>
function verifica()
{
if (window.document.form1.login.value == '')
alert("Campo login esta vazio!")
else if (window.document.form1.senha1.value == '')
alert("Campo senha esta vazio!")
else if (window.document.form1.senha1.value != window.document.form1.senha2.value)
alert("Senha não confere!")
else
}
</script>
</head>
<body>
<p>Alteração de Usuários</p>
<form name="form1" method="post" action="finalalterar.php" >
<tr>
<td width="259"><input name="login" type="text" id="login" value="<?= $login ?>"/></td>
</tr>
<tr>
<td><input name="senha1" type="password" id="senha1" value="<?= $senha ?>" /></td>
</tr>
<tr>
<td><input name="senha2" type="password" id="senha2" value="<?= $senha ?>" /></td>
</tr>
</table>
<input name="id" type="hidden" value="<?=$id?>">
<p>|<a href="listausuarios.php"> Voltar </a>|<a href="javascript:verifica();"> Alterar </a>|</p>
</form>
</body>
</html>
<?
}
else
?>
10
finalalterar.php
<?
session_start();
{
$login = $_REQUEST["login"];
$senha = $_REQUEST["senha1"];
?>
<html>
<head>
</head>
<body>
<?
$sql = "UPDATE Usuario SET login_us ='".$login."', senha_us='".$senha."'
WHERE idusuario_us = $id";
echo " $login alterado com sucesso! ";
?>
</body>
</html>
<?
}
else
?>
excluirusuario.php
<?
session_start();
{
$rset = mysql_query("Select * from Usuario Where idUsuario_us = $id");
{
$login = $linha['login_us'];
$senha = $linha['senha_us'];
}
?>
<html>
<head>
</head>
<body>
<p>Exclusão de Usuários</p>
<form name="form1" method="post" action="finalexcluir.php" >
<tr>
11
<td width="261"><input name="login" type="text" id="login" value="<?= $login ?>"
disabled="disabled"/></td>
</tr>
<tr>
<td><input name="senha1" type="password" id="senha1" value="<?= $senha ?>"
disabled="disabled"/></td>
</tr>
<tr>
<td><input name="senha2" type="password" id="senha2" value="<?= $senha ?>" disabled="disabled"
/></td>
</tr>
</table>
<p>|<a href="listausuarios.php"> Voltar </a>|
<a href="javascript:window.document.form1.submit();"> Excluir </a>|</p>
</form>
</body>
</html>
<?
}
else
?>
finalexcluir.php
<?
session_start();
{
?>
<html>
<head>
</head>
<body>
<?
$sql = "DELETE FROM Usuario WHERE idusuario_us = $id";
echo "Registro excluido com sucesso! ";
?>
</body>
</html>
<?
}
else
?>
12
CADASTRO DE FOTOS
listafotos.php
<?
session_start();
{
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/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" />
</head>
<body>
<p>Lista de Fotos </p>
<tr>
<td width="273" bgcolor="#D9ECFF"><strong>Descrição</strong></td>
<td width="219" bgcolor="#D9ECFF"><strong>Foto</strong></td>
<td bgcolor="#D9ECFF"><div align="center"><strong>Opções</strong></div></td>
</tr>
<?
$rset = mysql_query("Select * from Fotos Order by descricao");
{
$cont++;
?>
<tr>
<td><?=$linha["descricao"] ?> </td>
<td><?=$linha["foto"] ?> </td>
<td><div align="center"><a href="alterarfoto.php?id=<?= $linha["idfoto"] ?>">Alterar</a></div>
<div align="center"></div></td>
</tr>
<?
}
if ($cont == 0)
{
?>
<tr>
<td colspan="3">Nenhum registro encontrado!</td>
</tr>
<?
}
?>
</table>
<p>|<a href="arearestrita.php"> Voltar </a>|<a href="inserirfoto.php"> Inserir </a>|</p>
</body>
</html>
<?
}
else
?>
13
inserirfoto.php
<?
session_start();
{
?>
<html>
<head>
<script>
function verifica()
{
if (window.document.form1.descricao.value == '')
alert("Campo Descrição esta vazio!")
else
}
</script>
</head>
<body>
<p>Inserção de Fotos </p>
<form name="form1" method="post" action="uploadfoto.php" >
<tr>
<td width="129"><div align="right">Descrição:</div></td>
<td width="565"><input name="descricao" type="text" id="descricao" size="80" maxlength="255"
/></td>
</tr>
<tr>
<td><div align="right">Foto:</div></td>
<td><span class="Texto">
<input name="upload" type="submit" class="Texto" id="upload" value="Upload da foto...">
</span></td>
</tr>
</table>
<p>|<a href="listafotos.php"> Voltar </a>|</p>

</form>
</body>
</html>
<?
}
else
?>
14
uploadfoto.php
<?
session_start();
{
$descricao = $_REQUEST['descricao'];
?>
<html>
<head>
</head>
<body>
<p>Inserção de Fotos </p>
<?php
$descricao = $_REQUEST['descricao'];
$nomefoto = $_FILES['arquivo']['name'];
if (isset($nomefoto))
{
$uploaddir = 'c:\\phpdev\www\public\aula5\\';
$arquivo = $uploaddir.$nomefoto;
if (move_uploaded_file($_FILES['arquivo']['tmp_name'], $arquivo))
print "O arquivo foi gravado com sucesso.";
else
print "Erro. O arquivo não foi enviado.";
}
?>
<form enctype="multipart/form-data" action="uploadfoto.php" method="POST">
Enviar este arquivo: <input name="arquivo" type="file">
<input type="submit" value="Envia Arquivo">
<input name="nomefoto" type="hidden" value="<?= $nomefoto ?>">
<input name="descricao" type="hidden" value="<?= $descricao ?>">
</form>
<form action="finalinserirfoto.php" method="post" name="form1">

<label>
<input type="submit" name="Submit" value="Inserir">
<input name="nomefoto" type="hidden" value="<?= $nomefoto ?>">
<input name="descricao" type="hidden" value="<?= $descricao ?>">
</label>
</form>
</body>
</html>
<?
}
else
?>
15
finalinserirfoto.php
<?
session_start();
{
$descricao = $_REQUEST["descricao"];
$nomefoto = $_REQUEST["nomefoto"];
?>
<html>
<head>
</head>
<body>
<?
$sql = "Select * from Fotos where foto ='".$nomefoto."'";
$total = mysql_num_rows($rset);
if ($total > 0)
echo $nomefoto."já existe no banco!";
else
{
$sql = "Insert into Fotos (idfoto, foto, descricao)
Values ('','".$nomefoto."','".$descricao."')";
echo " Foto inserida com sucesso! ";
}
?>
<p><a href="listafotos.php">| VOLTAR | </a></p>
</body>
</html>
<?
}
else
?>
16
alterarfoto.php
<?
session_start();
{
$rset = mysql_query("Select * from Fotos Where idfoto = $id");
$descricao = $linha['descricao'];
?>
<html>
<head>
<script>
function verifica()
{
else
}
</script>
</head>
<body>
<p>Alterar descrição da Foto </p>
<form name="form1" method="post" action="finalalterarfoto.php" >
<tr>
value="<?= $descricao ?>" /></td>
</tr>
</table>
<p>|<a href="listafotos.php"> Voltar </a>| <a href="javascript:verifica();"> Alterar </a>|</p>

</form>
</body>
</html>
<?
}
else
?>
17
alterarfoto.php
<?
session_start();
{
$rset = mysql_query("Select * from Fotos Where idfoto = $id");
?>
<html>
<head>
<script>
function verifica()
{
else
}
</script>
</head>
<body>
<p>Alterar descrição da Foto </p>
<form name="form1" method="post" action="finalalterarfoto.php" >
<tr>
value="<?= $descricao ?>" /></td>
</tr>
</table>
<p>|<a href="listafotos.php"> Voltar </a>| <a href="javascript:verifica();"> Alterar </a>|</p>

</form>
</body>
</html>
<?
}
else
?>
18
finalalterarfoto.php
<?
session_start();
{
?>
<html>
<head>
</head>
<body>
<?
$sql = "UPDATE Fotos SET descricao ='".$descricao."'
WHERE idfoto = $id";
echo " Descricao alterada com sucesso! ";
?>
<p><a href="listafotos.php">| VOLTAR | </a></p>
</body>
</html>
<?
}
else
?>
19
Cadastro do conteúdo da Página Inicial
listahome.php
<?
session_start();
{
?>
<html>
<head>
</head>
<body>
<p>Conteúdo da página inicial </p>
<tr>
<td width="568" bgcolor="#D9ECFF"><strong>Descrição</strong></td>
<td width="126" bgcolor="#D9ECFF"><div
align="center"><strong>Opções</strong></div></td>
</tr>
<?
$rset = mysql_query("Select * from Home");
{
?>
<tr>
<td><?=$linha["descricao"] ?></td>
<td><div align="center">
<a href="alterarhome.php?id=<?= $linha["idhome"] ?>">Alterar</a>
</div></td>
</tr>
<?
}
?>
</table>
<p align="left">|<a href="arearestrita.php"> Voltar </a>|<a href="inserirhome.php"> Inserir </a>|</p>
<p> </p>
</body>
</html>
<?
}
else
?>
20
inserirhome.php
<?
session_start();
{
?>
<html>
<head>
<SCRIPT language=Javascript1.2 src="editor.js"></SCRIPT>
<SCRIPT> _editor_url = ""; </SCRIPT>
</head>
<body>
<p>Inserção de conteúdo da Página Inicial </p>
<form name="form1" method="post" action="finalinserirhome.php" >
<tr>
<td width="689"><div align="left"><strong>Descrição</strong></div></td>
</tr>
<tr>
<td>
<textarea name="descricao" cols=90 rows=15></textarea>
<SCRIPT language=javascript1.2>editor_generate('descricao');</SCRIPT>
</td>
</tr>
</table>
<p>|<a href="listahome.php"> Voltar </a>|<a href="javascript:window.document.form1.submit();"> Inserir

</a>|</p>
</form>
</body>
</html>
<?
}
else
?>
OBSERVAÇÃO: Para o texto de nossa página inicial, cadastraremos não somente o texto no
banco, mas todos os formatos em html.
Ex: Título com cor azul e negrito. O resto do texto em preto.
Para isso, utilizaremos dois arquivos extras: um em javascript (editor.js) e outro em html
(select_color.html).
21
editor.js
//
// htmlArea v1.04 - Copyright (c) 2002 interactivetools.com, inc.
// A free WYSIWYG editor replacement for <textarea> fields.
//
// For more information visit:
// http://www.interactivetools.com/products/htmlarea/
//
/* ---------------------------------------------------------------------- *\
Function : editor_generate
Description : replace textarea with wysiwyg editor
Usage : editor_generate("textarea_id",[height],[width]);
Arguments : objname - ID of textarea to replace
w - width of wysiwyg editor
h - height of wysiwyg editor
\* ---------------------------------------------------------------------- */
function editor_generate(objname,w,h) {
// Default Settings
var imgURL = 'images/'; // images url
// set size to specified size or size of original object

var obj = document.all[objname];
if (!w) {
if (obj.style.width) { width = obj.style.width; } // use css style
else if (obj.cols) { width = (obj.cols * 8) + 22; } // col width + toolbar
else { width = '100%'; } // default
}
if (!h) {
if (obj.style.height) { height = obj.style.height; } // use css style
else if (obj.rows) { height = obj.rows * 17 } // row height
else { height = '200'; } // default
}
// Check for IE 5.5+ on Windows

var Agent, VInfo, MSIE, Ver, Win32, Opera;
Agent = navigator.userAgent;
VInfo = Array(); // version info
VInfo = Agent.split(";")
MSIE = Agent.indexOf('MSIE') > 0;
Ver = VInfo[1].substr(6,3);
Win32 = Agent.indexOf('Windows') > 0 && Agent.indexOf('Mac') < 0 && Agent.indexOf('Windows CE') <
0;
Opera = Agent.indexOf('Opera') > -1;
if (!MSIE || Opera || Ver < 5.5 || !Win32) { return; }
var editor = ''

+ '<table border=0 cellspacing=0 cellpadding=0 bgcolor="buttonface" style="padding: 1 0 0 0" width=' +
width + ' unselectable="on"><tr><td>\n'
+ '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"

unselectable="on">\n'
+ ' <tr>\n'
+ ' <td style="border-width: 0; padding: 2 0 0 3;">\n'
+ ' <select id="_' +objname+ '_FontName" onChange="editor_action(this.id)" unselectable="on">\n'
+ ' <option value="arial, helvetica, sans-serif">Arial</option>\n'
+ ' <option value="courier new, courier, mono">Courier New</option>\n'
22
+ ' <option value="Georgia, Times New Roman, Times, Serif">Georgia</option>\n'
+ ' <option value="Tahoma, Arial, Helvetica, sans-serif">Tahoma</option>\n'
+ ' <option value="times new roman, times, serif">Times New Roman</option>\n'
+ ' <option value="Verdana, Arial, Helvetica, sans-serif">Verdana</option>\n'
+ ' <option value="wingdings">WingDings</option>\n'
+ ' </select>'
+ ' </td>\n'
+ ' </tr>\n'
+ '</table>\n'

+ ' <tr>\n'
+ ' <td style="border-width: 0; padding: 2 1 0 0;">\n'
+ '<select id="_' +objname+ '_FontSize" onChange="editor_action(this.id)" style="width:38px"
+ ' <option value=1>1</option><option value=2>2</option><option value=3>3</option><option
value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option>\
n'
+ ' </select>\n\n'
+ ' </td>\n'
+ ' </tr>\n'
+ '</table>\n'

unselectable="on"><tr><td style="border: inset 1px;">\n'
+ '<button title="Bold" id="_' +objname+ '_Bold" class="btn" onClick="editor_action(this.id)"
unselectable="on"><img src="' +imgURL+ 'ed_format_bold.gif" unselectable="on"></button>'
+ '<button title="Italic" id="_' +objname+ '_Italic" class="btn" onClick="editor_action(this.id)"
unselectable="on"><img src="' +imgURL+ 'ed_format_italic.gif" unselectable="on"></button>'
+ '<button title="Underline" id="_' +objname+ '_Underline" class="btn" onClick="editor_action(this.id)"
unselectable="on"><img src="' +imgURL+ 'ed_format_underline.gif" unselectable="on">\n'
+ '</td></tr></table>\n'
// uncomment to add these buttons

// + '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"
// + '<button title="Strikethrough" id="_' +objname+ '_StrikeThrough" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_format_strike.gif"
unselectable="on"></button>'
// + '<button title="Subscript" id="_' +objname+ '_SubScript" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_format_sub.gif"
// + '<button title="Superscript" id="_' +objname+ '_SuperScript" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_format_sup.gif"
// + '</td></tr></table>\n'

+ '<button title="Justify Left" id="_' +objname+ '_JustifyLeft" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_align_left.gif"
+ '<button title="Justify Center" id="_' +objname+ '_JustifyCenter" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_align_center.gif"
+ '<button title="Justify Right" id="_' +objname+ '_JustifyRight" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_align_right.gif"

unselectable="on" unselectable="on"><tr><td style="border: inset 1px;">\n'
23
+ '<button title="Ordered List" id="_' +objname+ '_InsertOrderedList" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_list_num.gif"
+ '<button title="Bulleted List" id="_' +objname+ '_InsertUnorderedList" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_list_bullet.gif"
+ '<button title="Decrease Indent" id="_' +objname+ '_Outdent" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_indent_less.gif"
+ '<button title="Increase Indent" id="_' +objname+ '_Indent" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_indent_more.gif"

unselectable="on" unselectable="on"><tr><td style="border: inset 1px;">\n'
+ '<button title="Font Color" id="_' +objname+ '_ForeColor" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_color_fg.gif"
+ '<button title="Background Color" id="_' +objname+ '_BackColor" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_color_bg.gif"

+ '<button title="Horizontal Rule" id="_' +objname+ '_InsertHorizontalRule" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_hr.gif"
+ '<button title="Insert Web Link" id="_' +objname+ '_CreateLink" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_link.gif"
+ /*'<button title="Insert Image" id="_' +objname+ '_InsertImage" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_image.gif"
+ */ '</td></tr></table>\n'

+ '<button title="View HTML Source" id="_' +objname+ '_HtmlMode" class="btn"
onClick="editor_setmode(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_html.gif"
// -----------
// CAUTION: You may NOT remove or hide this button. If displays the "About this editor" popup
// and is required by the license agreement for the editor.
//+ '<button title="About this editor" id="_' +objname+ '_about" class="btn"
onClick="editor_action(this.id)" unselectable="on"><img src="' +imgURL+ 'ed_about.gif"
// -----------
+ '<textarea ID="_' +objname + '_editor" style="width:' +width+ '; height:' +height+ '; margin-top: -1px;
margin-bottom: -1px;"></textarea>'
+ '<input type="hidden" name="' +objname+ '" value="">'

// + '<textarea ID="' +objname+ '" rows=12 cols=80></textarea>'
;
// create editor
var contents = document.all[objname].value; // get original contents
24
document.all[objname].outerHTML = editor; // create editor frame
document.all['_'+objname+'_editor'].value = contents; // set contents
editor_setmode('_' +objname+ '_HtmlMode', 'init'); // switch to wysiwyg mode
/* ---------------------------------------------------------------------- *\
Function : editor_action
Description : perform an editor command on selected editor content
Usage :
Arguments : button_id - button id string with editor and action name
\* ---------------------------------------------------------------------- */
function editor_action(button_id) {
var BtnParts = Array();

BtnParts = button_id.split("_");
var objname = BtnParts[1];
var cmdID = BtnParts[2];
var button_obj = document.all[button_id];
var editor_obj = document.all["_" +objname + "_editor"];
// check editor mode (don't perform actions in textedit mode)

if (editor_obj.tagName.toLowerCase() == 'textarea') { return; }
var editdoc = editor_obj.contentWindow.document;

_editor_focus(editor_obj);
// execute command for font pulldowns

var idx = button_obj.selectedIndex;
if (idx != null) {
var val = button_obj[ idx ].value;
editdoc.execCommand(cmdID,0,val);
}
// execute command for fgcolor & bgcolor buttons

else if (cmdID == 'ForeColor' || cmdID == 'BackColor') {
// figure our optimal window placement for popup dialog
var posX = event.screenX;
var posY = event.screenY + 20;
var screenW = screen.width; // screen size
var screenH = screen.height - 20; // take taskbar into account
if (posX + 232 > screenW) { posX = posX - 232 - 40; } // if mouse too far right
if (posY + 164 > screenH) { posY = posY - 164 - 80; } // if mouse too far down
var wPosition = "dialogLeft:" +posX+ "; dialogTop:" +posY;
var oldcolor = _dec_to_rgb(editdoc.queryCommandValue(cmdID));

var newcolor = showModalDialog("select_color.html", oldcolor,
"dialogWidth:238px; dialogHeight: 187px; "
+ "resizable: no; help: no; status: no; scroll: no; "
+ wPosition);
if (newcolor != null) { editdoc.execCommand(cmdID, false, "#"+newcolor); }
}
// execute command for buttons

else {
// subscript & superscript, disable one before enabling the other
if (cmdID.toLowerCase() == 'subscript' && editdoc.queryCommandState('superscript'))
{ editdoc.execCommand('superscript'); }
if (cmdID.toLowerCase() == 'superscript' && editdoc.queryCommandState('subscript'))
{ editdoc.execCommand('subscript'); }
25
// insert link
if (cmdID.toLowerCase() == 'createlink'){
editdoc.execCommand(cmdID,1);
}
// insert image
else if (cmdID.toLowerCase() == 'insertimage'){
showModalDialog("insert_image.html", editdoc, "resizable: no; help: no; status: no; scroll: no; ");
}
// insert image
else if (cmdID.toLowerCase() == 'about'){
var html = '<HTML><HEAD><TITLE>About</TITLE>\n'
+ '<style>\n'
+ ' html,body,textarea { font-family: verdana,arial; font-size: 9pt; };\n'
+ '</style></HEAD>\n'
+ '<BODY style="background: threedface; color: #000000" topmargin=5 leftmargin=12>\n\n'
+ '<span style="font-family: arial black, arial; font-size: 28px; letter-spacing:
-2px;">htmlArea</span> by interactivetools.com<br>\n'
+ 'A free WYSIWYG editor replacement for <textarea> fields.<br>\n\n'
+ '<p><textarea style="width:100%; height:120px" readonly>\n'
+ 'Copyright (c) 2002 interactivetools.com, inc.\n\n'
+ 'Permission is hereby granted, free of charge, to any person obtaining a copy of this software
and associated documentation files (the "Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do so, subject to the
following conditions:\n\n'
+ 'a) The above copyright notice, this permission notice, and the "About this editor" button that
appears as a question mark in the editor interface, shall be included in all copies or substantial portions
of the Software.\n\n'
+ 'b) The "About this editor" button that appears as a question mark ("?") in the editor interface
must always be visible in the editor interface and bring up the original "About" dialog window when
clicked.\n\n'
+ 'c) The "About" dialog window and its contents, including the link to interactivetools.com can
not be amended.\n\n'
+ 'THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.\n'
+ '</textarea>\n\n'
+ '<p>For more information visit:<br>\n'
+ '<a href="http://www.interactivetools.com/products/htmlarea/"
target="_blank">http://www.interactivetools.com/products/htmlarea/</a><br><br>\n'
+ '</body></html>\n\n';
var popup = window.open('', 'ColorPicker',

"location=no,menubar=no,toolbar=no,directories=no,status=no," +
"height=275,width=450,resizable=no,scrollbars=no");
popup.document.write(html);
}
// all other commands

else {
editdoc.execCommand(cmdID);
}
}
editor_updateUI(objname);
}
26
/* ---------------------------------------------------------------------- *\
Function : editor_updateUI
Description : update button status, selected fonts, and hidden output field.
Usage :
Arguments : objname - ID of textarea to replace
runDelay: -1 = run now, no matter what
0 = run now, if allowed
1000 = run in 1 sec, if allowed at that point
\* ---------------------------------------------------------------------- */
function editor_updateUI(objname,runDelay) {
var editor_obj = document.all["_" +objname+ "_editor"]; // html editor object
if (runDelay == null) { runDelay = 0; }
var editdoc, editEvent;
// setup timer for delayed updates (some events take time to complete)
if (runDelay > 0) { return setTimeout(function(){ editor_updateUI(objname); }, runDelay); }
// don't execute more than 3 times a second (eg: too soon after last execution)
if (this.tooSoon == 1 && runDelay >= 0) { this.queue = 1; return; } // queue all but urgent events
this.tooSoon = 1;
setTimeout(function(){
this.tooSoon = 0;
if (this.queue) { editor_updateUI(objname,-1); };
this.queue = 0;
}, 333); // 1/3 second
// check editor mode and update hidden output field

if (editor_obj.tagName.toLowerCase() == 'textarea') { // textedit mode
document.all[objname].value = editor_obj.value; // update hidden output field
return;
} else { // WYSIWYG mode
editdoc = editor_obj.contentWindow.document; // get iframe editor document object
editEvent = editor_obj.contentWindow.event;
_fix_placeholder_urls(editdoc);
document.all[objname].value = editdoc.body.innerHTML; // update hidden output field
}
// update button states

var IDList =
Array('Bold','Italic','Underline','JustifyLeft','JustifyCenter','JustifyRight','InsertOrderedList','InsertUnordered
List');
for (i=0; i<IDList.length; i++) { // for each button
var button_obj = document.all["_" +objname+ "_" +IDList[i]]; // get button object
if (button_obj == null) { continue; } // if no btn obj???
var cmdActive = editdoc.queryCommandState( IDList[i] );
if (!cmdActive) { // option is OK
if (button_obj.className != 'btn') { button_obj.className = 'btn'; }
if (button_obj.disabled != false) { button_obj.disabled = false; }
} else if (cmdActive) { // option already applied or mixed content
if (button_obj.className != 'btnDN') { button_obj.className = 'btnDN'; }
if (button_obj.disabled != false) { button_obj.disabled = false; }
}
// Loop over font pulldowns

var IDList = Array('FontName','FontSize');
for (i=0; i<IDList.length; i++) {
var cmdActive = editdoc.queryCommandState( IDList[i] );
var button_obj = document.all["_" +objname+ "_" +IDList[i]]; // button object
button_obj.disabled = false;
27
}
// Get Font Name and Size

var fontname = editdoc.queryCommandValue('FontName');
var fontsize = editdoc.queryCommandValue('FontSize');
if (fontname != null) { fontname = fontname.toLowerCase(); }
// Set Font face pulldown

var fontname_obj = document.all["_" +objname+ "_FontName"];
if (fontname == null) { fontname_obj.value = fontname; }
else {
var foundfont;
var fonts = fontname_obj.length;
for (i=0; i<fonts; i++) {
var thisfont = fontname_obj[i].text.toLowerCase();
if (thisfont == fontname) {
fontname_obj.selectedIndex = i;
foundfont = 1;
}
}
if (foundfont != 1) { fontname_obj.value = fontname; } // for fonts not in list
}
// Set Font size pulldown

var fontsize_obj = document.all["_" +objname+ "_FontSize"];
if (fontsize == null) { fontsize_obj.value = fontsize;}
else {
for (i=0; i<7; i++) {
var thissize = fontsize_obj[i].text;
if (thissize == fontsize) { fontsize_obj.selectedIndex = i; }
}
}
}
/* ---------------------------------------------------------------------- *\
Function : editor_setmode
Description : change mode between WYSIWYG and HTML editor
Usage : editor_setmode(object_id, mode);
Arguments : button_id - button id string with editor and action name
mode - init, textedit, or wysiwyg
\* ---------------------------------------------------------------------- */
function editor_setmode(button_id, mode) {
var BtnParts = Array();

BtnParts = button_id.split("_");
var objname = BtnParts[1];
var cmdID = BtnParts[2];
var editor_obj = document.all["_" +objname + "_editor"];
var editdoc; // set below
// define different editors

var TextEdit = '<textarea ID="_' +objname + '_editor" style="width:' +editor_obj.style.width+ '; height:'
+editor_obj.style.height+ '; margin-top: -1px; margin-bottom: -1px;"></textarea>';
var RichEdit = '<iframe ID="_' +objname+ '_editor" style="width:' +editor_obj.style.width+ '; height:'
+editor_obj.style.height+ ';"></iframe>';
//
// Switch to TEXTEDIT mode
//
if (mode == "textedit" || editor_obj.tagName.toLowerCase() == 'iframe') {

editdoc = editor_obj.contentWindow.document;
28
var contents = editdoc.body.createTextRange().htmlText;
editor_obj.outerHTML = TextEdit;
editor_obj = document.all["_" +objname + "_editor"];
editor_obj.value = contents;
// disable buttons
var IDList =
Array('Bold','Italic','Underline','StrikeThrough','SubScript','SuperScript','JustifyLeft','JustifyCenter','JustifyR
ight','InsertOrderedList','InsertUnorderedList','Outdent','Indent','ForeColor','BackColor','InsertHorizontalR
ule','CreateLink','InsertImage');
for (i=0; i<IDList.length; i++) { // for each button
var button_obj = document.all["_" +objname+ "_" +IDList[i]]; // get button object
button_obj.className = 'btnNA';
button_obj.disabled = true;
}
// disable font pulldowns

var IDList = Array('FontName','FontSize');
var button_obj = document.all["_" +objname+ "_" +IDList[i]]; // button object
button_obj.disabled = true;
}
// set event handlers

editor_obj.onkeypress = function() { editor_updateUI(objname); }
editor_obj.onkeyup = function() { editor_updateUI(objname); }
editor_obj.onmouseup = function() { editor_updateUI(objname); }
editor_obj.ondrop = function() { editor_updateUI(objname, 100); } // these events fire before they
occur
editor_obj.oncut = function() { editor_updateUI(objname, 100); }
editor_obj.onpaste = function() { editor_updateUI(objname, 100); }
editor_obj.onblur = function() { editor_updateUI(objname, -1); }
// update hidden output field

document.all[objname].value = editor_obj.value;
}
//
// Switch to WYSIWYG mode
//
else {
var contents = editor_obj.value;
// create editor
editor_obj.outerHTML = RichEdit;
editor_obj = document.all["_" +objname + "_editor"];
// get iframe document object

editdoc = editor_obj.contentWindow.document;
// set editor contents (and default styles for editor)

editdoc.open();
editdoc.write(''
+ '<html><head>\n'
+ '<style>\n'
+ 'body { background-color: #FFFFFF; font-family: "Verdana"; font-size: x-small; } \n'
+ '</style>\n'
29
+ '</head>\n'
+ '<body contenteditable="true" topmargin=1 leftmargin=1>'
+ contents
+ '</body>\n'
+ '</html>\n'
);
editdoc.close();
// enable buttons
var IDList =
Array('Bold','Italic','Underline','StrikeThrough','SubScript','SuperScript','JustifyLeft','JustifyCenter','JustifyR
ight','InsertOrderedList','InsertUnorderedList','Outdent','Indent','ForeColor','BackColor','InsertHorizontalR
ule','CreateLink','InsertImage');
var button_obj = document.all["_" +objname+ "_" +IDList[i]];
if (button_obj == null) { continue; }
button_obj.className = 'btn';
button_obj.disabled = false;
}
// set event handlers

editdoc.onkeypress = function() { editor_updateUI(objname); }
editdoc.onkeyup = function() { editor_updateUI(objname); }
editdoc.onmouseup = function() { editor_updateUI(objname); }
editdoc.body.ondrop = function() { editor_updateUI(objname, 100); } // these events fire before
they occur
editdoc.body.oncut = function() { editor_updateUI(objname, 100); }
editdoc.body.onpaste = function() { editor_updateUI(objname, 100); }
editdoc.body.onblur = function() { editor_updateUI(objname, -1); }
// set initial value

editor_obj.onload = function() { editdoc.body.innerHTML = document.all[objname].value; }
// update hidden output field

_fix_placeholder_urls(editdoc);
document.all[objname].value = editdoc.body.innerHTML; // update hidden output field
// bring focus to editor

if (mode != 'init') { // don't focus on page load, only on mode switch
}
// Call update UI
if (mode != 'init') { // don't update UI on page load, only on mode switch
}
/* ---------------------------------------------------------------------- *\
Function : _editor_focus
Description : bring focus to the editor
Usage : editor_focus(editor_obj);
Arguments : editor_obj - editor object
\* ---------------------------------------------------------------------- */
function _editor_focus(editor_obj) {
// check editor mode

if (editor_obj.tagName.toLowerCase() == 'textarea') { // textarea
var myfunc = function() { editor_obj.focus(); };
30
setTimeout(myfunc,100); // doesn't work all the time without delay
}
else { // wysiwyg
var editdoc = editor_obj.contentWindow.document; // get iframe editor document object
var editorRange = editdoc.body.createTextRange(); // editor range
var curRange = editdoc.selection.createRange(); // selection range
if (curRange.length == null && // make sure it's not a controlRange

!editorRange.inRange(curRange)) { // is selection in editor range
editorRange.collapse(); // move to start of range
editorRange.select(); // select
curRange = editorRange;
}
}
/* ---------------------------------------------------------------------- *\
Function : _dec_to_rgb
Description : convert dec color value to rgb hex
Usage : var hex = _dec_to_rgb('65535'); // returns FFFF00
Arguments : value - dec value
\* ---------------------------------------------------------------------- */
function _dec_to_rgb(value) {
var hex_string = "";
for (var hexpair = 0; hexpair < 3; hexpair++) {
var byte = value & 0xFF; // get low byte
value >>= 8; // drop low byte
var nybble2 = byte & 0x0F; // get low nybble (4 bits)
var nybble1 = (byte >> 4) & 0x0F; // get high nybble
hex_string += nybble1.toString(16); // convert nybble to hex
hex_string += nybble2.toString(16); // convert nybble to hex
}
return hex_string.toUpperCase();
}
/* ---------------------------------------------------------------------- *\
Function : _fix_placeholder_urls
Description : editor make relative urls absolute, this change them back
if the url contains a placeholder ("***")
Usage : _fix_placeholder_urls(editdoc)
Arguments : editdoc - reference to editor document
\* ---------------------------------------------------------------------- */
function _fix_placeholder_urls(editdoc) {
var i;
// for links
for (i=0; i < editdoc.links.length; i++) {
editdoc.links[i].href = editdoc.links[i].href.replace(/^[^*]*(\*\*\*)/, "$1");
}
// for images
for (i=0; i < editdoc.images.length; i++) {
editdoc.images[i].src = editdoc.images[i].src.replace(/^[^*]*(\*\*\*)/, "$1");
}
/* ---------------------------------------------------------------------- *\
Function : editor_insertHTML
31
Description : insert string at current cursor position in editor. If
two strings are specifed, surround selected text with them.
Usage : editor_insertHTML(objname, str1, [str2], reqSelection)
Arguments : objname - ID of textarea
str1 - HTML or text to insert
str2 - HTML or text to insert (optional argument)
reqSelection - (1 or 0) give error if no text selected
\* ---------------------------------------------------------------------- */
function editor_insertHTML(objname, str1,str2, reqSel) {

var editor_obj = document.all["_" +objname + "_editor"]; // editor object
if (str1 == null) { str1 = ''; }
if (str2 == null) { str2 = ''; }
// for non-wysiwyg capable browsers just add to end of textbox

if (document.all[objname] && editor_obj == null) {
document.all[objname].focus();
document.all[objname].value = document.all[objname].value + str1 + str2;
return;
}
// error checking
if (editor_obj == null) { return alert("Unable to insert HTML. Invalid object name '" +objname+ "'."); }
var tagname = editor_obj.tagName.toLowerCase();

var sRange;
// insertHTML for wysiwyg iframe

if (tagname == 'iframe') {
var editdoc = editor_obj.contentWindow.document;
sRange = editdoc.selection.createRange();
var sHtml = sRange.htmlText;
// check for control ranges

if (sRange.length) { return alert("Unable to insert HTML. Try highlighting content instead of selecting
it."); }
// insert HTML
var oldHandler = window.onerror;
window.onerror = function() { alert("Unable to insert HTML for current selection."); return true; } //
partial table selections cause errors
if (sHtml.length) { // if content selected
if (str2) { sRange.pasteHTML(str1 +sHtml+ str2) } // surround
else { sRange.pasteHTML(str1); } // overwrite
} else { // if insertion point only
if (reqSel) { return alert("Unable to insert HTML. You must select something first."); }
sRange.pasteHTML(str1 + str2); // insert strings
}
window.onerror = oldHandler;
}
// insertHTML for plaintext textarea

else if (tagname == 'textarea') {
editor_obj.focus();
sRange = document.selection.createRange();
var sText = sRange.text;
// insert HTML
if (sText.length) { // if content selected
if (str2) { sRange.text = str1 +sText+ str2; } // surround
else { sRange.text = str1; } // overwrite
32
} else { // if insertion point only
if (reqSel) { return alert("Unable to insert HTML. You must select something first."); }
sRange.text = str1 + str2; // insert strings
}
}
else { alert("Unable to insert HTML. Unknown object tag type '" +tagname+ "'."); }
// move to end of new content

sRange.collapse(false); // move to end of range
sRange.select(); // re-select
/* ---------------------------------------------------------------------- */
select_color.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML style="WIDTH: 238px; HEIGHT: 187px"><HEAD><TITLE>Select Color</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<SCRIPT language=javascript>
function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}
function Init() { // run on page load

document.body.onkeypress = _CloseOnEsc;
color = window.dialogArguments;
color = ValidateColor(color) || '000000';
View(color); // set default color
}
function View(color) { // preview color

document.all.ColorPreview.style.backgroundColor = '#' + color;
document.all.ColorHex.value = '#' + color;
}
function Set(string) { // select color

color = ValidateColor(string);
if (color == null) { alert("Invalid color code: " + string); } // invalid color
else { // valid color
View(color); // show selected color
window.returnValue = color; // set return value
window.close(); // close dialog
}
}
function ValidateColor(string) { // return valid color code

string = string || '';
string = string + "";
string = string.toUpperCase();
chars = '0123456789ABCDEF';
out = '';
for (i=0; i<string.length; i++) { // remove invalid color chars
33
schar = string.charAt(i);
if (chars.indexOf(schar) != -1) { out += schar; }
}
if (out.length != 6) { return null; } // check length

return out;
}
</SCRIPT>
<META content="MSHTML 6.00.2800.1528" name=GENERATOR></HEAD>

<BODY bgColor=#000000 leftMargin=0 topMargin=0 onload=Init()>
<FORM onSubmit="Set(document.all.ColorHex.value); return false;" method=get>
<TABLE cellSpacing=0 cellPadding=4 width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=center bgColor=buttonface>
<DIV
style="PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; WIDTH: 50px;
PADDING-TOP: 1px; HEIGHT: 21px; BACKGROUND-COLOR: #000000">
<DIV id=ColorPreview style="WIDTH: 100%; HEIGHT: 100%"></DIV></DIV></TD>
<TD vAlign=center bgColor=buttonface><INPUT style="FONT-SIZE: 12px"
size=15 name=ColorHex></TD>
<TD width="100%" bgColor=buttonface></TD></TR></TBODY></TABLE>
<TABLE style="CURSOR: hand" cellSpacing=1 cellPadding=0 bgColor=#000000
border=0>
<TBODY>
<TR>
<TD onMouseOver="View('000000')" onClick="Set('000000')" width=10
bgColor=#000000 height=10></TD>
<TD onMouseOver="View('00CC00')" onClick="Set('00CC00')" width=10
bgColor=#00cc00 height=10></TD>
<TD onMouseOver="View('00FF00')" onClick="Set('00FF00')" width=10
bgColor=#00ff00 height=10></TD>
34
bgColor=#66ff00 height=10></TD></TR>
<TR>
<TR>
35
<TR>
36
<TR>
<TD onMouseOver="View('CCCCCC')" onClick="Set('CCCCCC')" width=10
bgColor=#cccccc height=10></TD>
<TD onMouseOver="View('0000CC')" onClick="Set('0000CC')" width=10
bgColor=#0000cc height=10></TD>
<TD onMouseOver="View('00CCCC')" onClick="Set('00CCCC')" width=10
bgColor=#00cccc height=10></TD>
<TD onMouseOver="View('00FFCC')" onClick="Set('00FFCC')" width=10
bgColor=#00ffcc height=10></TD>
bgColor=#66ffcc height=10></TD></TR>
<TR>
<TD onMouseOver="View('FFFFFF')" onClick="Set('FFFFFF')" width=10
bgColor=#ffffff height=10></TD>
<TD onMouseOver="View('0000FF')" onClick="Set('0000FF')" width=10
bgColor=#0000ff height=10></TD>
37
<TD onMouseOver="View('00CCFF')" onClick="Set('00CCFF')" width=10
bgColor=#00ccff height=10></TD>
<TD onMouseOver="View('00FFFF')" onClick="Set('00FFFF')" width=10
bgColor=#00ffff height=10></TD>
bgColor=#66ffff height=10></TD></TR>
<TR>
<TD onMouseOver="View('FF0000')" onClick="Set('FF0000')" width=10
bgColor=#ff0000 height=10></TD>
<TD onMouseOver="View('CC0000')" onClick="Set('CC0000')" width=10
bgColor=#cc0000 height=10></TD>
<TD onMouseOver="View('CCCC00')" onClick="Set('CCCC00')" width=10
bgColor=#cccc00 height=10></TD>
<TD onMouseOver="View('CCFF00')" onClick="Set('CCFF00')" width=10
38
bgColor=#ccff00 height=10></TD>
<TD onMouseOver="View('FFCC00')" onClick="Set('FFCC00')" width=10
bgColor=#ffcc00 height=10></TD>
<TD onMouseOver="View('FFFF00')" onClick="Set('FFFF00')" width=10
bgColor=#ffff00 height=10></TD></TR>
<TR>
<TR>
39
<TR>
bgColor=#ffff00 height=10></TD>
40
<TR>
<TD onMouseOver="View('CC00CC')" onClick="Set('CC00CC')" width=10
bgColor=#cc00cc height=10></TD>
<TD onMouseOver="View('CCCCCC')" onClick="Set('CCCCCC')" width=10
bgColor=#cccccc height=10></TD>
<TD onMouseOver="View('CCFFCC')" onClick="Set('CCFFCC')" width=10
bgColor=#ccffcc height=10></TD>
<TD onMouseOver="View('FF00CC')" onClick="Set('FF00CC')" width=10
bgColor=#ff00cc height=10></TD>
<TD onMouseOver="View('FFCCCC')" onClick="Set('FFCCCC')" width=10
bgColor=#ffcccc height=10></TD>
<TD onMouseOver="View('FFFFCC')" onClick="Set('FFFFCC')" width=10
bgColor=#ffffcc height=10></TD></TR>
<TR>
<TD onMouseOver="View('FF00FF')" onClick="Set('FF00FF')" width=10
41
bgColor=#ff00ff height=10></TD>
<TD onMouseOver="View('CC00FF')" onClick="Set('CC00FF')" width=10
bgColor=#cc00ff height=10></TD>
<TD onMouseOver="View('CCCCFF')" onClick="Set('CCCCFF')" width=10
bgColor=#ccccff height=10></TD>
<TD onMouseOver="View('CCFFFF')" onClick="Set('CCFFFF')" width=10
bgColor=#ccffff height=10></TD>
<TD onMouseOver="View('FFCCFF')" onClick="Set('FFCCFF')" width=10
bgColor=#ffccff height=10></TD>
<TD onMouseOver="View('FFFFFF')" onClick="Set('FFFFFF')" width=10
bgColor=#ffffff height=10></TD></TR></TBODY></TABLE></FORM></BODY></HTML>
42
finalinserirhome.php
<?
session_start();
{
?>
<html>
<head>
</head>
<body>
<?
$sql = "Insert into Home (idhome, descricao)
Values ('','".$descricao."')";
//echo $sql;
echo " O conteúdo da página inicial foi inserido com sucesso! ";
?>
<p><a href="listahome.php">| VOLTAR | </a></p>
</body>
</html>
<?
}
else
?>
43
alterarhome.php
<?
session_start();
{
$rset = mysql_query("Select * from Home Where idhome = $id");
?>
<html>
<head>
<SCRIPT language=Javascript1.2 src="editor.js"></SCRIPT>
<SCRIPT> _editor_url = ""; </SCRIPT>
</head>
<body>
<p>Alteração de conteúdo da Página Inicial </p>
<form name="form1" method="post" action="finalalterarhome.php" >
<tr>
<td width="689"><div align="left"><strong>Descrição</strong></div></td>
</tr>
<tr>
<td>
<textarea name="descricao" cols=90 rows=15><?=$descricao?></textarea>
<SCRIPT language=javascript1.2>editor_generate('descricao');</SCRIPT>
</td>
</tr>
</table>
<p>|<a href="listahome.php"> Voltar </a>|<a href="javascript:window.document.form1.submit();">

Alterar </a>|</p>
</form>
</body>
</html>
<?
}
else
?>
44
finalalterarhome.php
<?
session_start();
{
?>
<html>
<head>
</head>
<body>
<?
$sql = "UPDATE Home SET descricao ='".$descricao."'
WHERE idhome = $id";
echo " Descricao alterada com sucesso! ";
?>
<p><a href="listahome.php">| VOLTAR | </a></p>
</body>
</html>
<?
}
else
?>
45

Curso PHP 5a Parte

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso PHP 5a Parte

Enviado por

Direitos autorais:

Formatos disponíveis

CENTRO UNIVERSITÁRIO CENTRAL PAULISTA - UNICEP

Prof. José Eduardo dos Reis

Na seqüência, criaremos 3 tabelas:

O menu de opções, destacado em vermelho na figura 2, será recortado, salvo em um

Figura 2 – Incluindo o menu na página inicial

<? require_once(“menu.php”); ?>

Faremos duas verificações antes de acessarmos a Área restrita (arearestrita.php):

1) em javascript, verifique se os campos usuario e senha foram preenchidos;

2) Caso os campos tenham sido preenchidos, o formulário será submetido e avançará

Seguem os códigos HTML:

<form name="form1" method="post" action="acesso.php">

Para evitar a repetição da conexão com o banco de dados, criaremos um arquivo

$rset = mysql_query("Select * from Usuario where login_us ='$usuario' and senha_us

<p>|<a href="listausuarios.php"> Voltar </a>| <a href="javascript:verifica();"> Inserir </a>|</p>

<p>|<a href="listafotos.php"> Voltar </a>|</p>

<form action="finalinserirfoto.php" method="post" name="form1">

<p>|<a href="listafotos.php"> Voltar </a>| <a href="javascript:verifica();"> Alterar </a>|</p>

<p>|<a href="listafotos.php"> Voltar </a>| <a href="javascript:verifica();"> Alterar </a>|</p>

<p>|<a href="listahome.php"> Voltar </a>|<a href="javascript:window.document.form1.submit();"> Inserir

// set size to specified size or size of original object

// Check for IE 5.5+ on Windows

var editor = ''

+ '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"

+ '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"

+ '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"

// uncomment to add these buttons

+ '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"

+ '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"

+ '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"

+ '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"

+ '<table border=0 cellspacing=2 cellpadding=0 bgcolor="buttonface" style="float: left;"

+ '<input type="hidden" name="' +objname+ '" value="">'

editor_setmode('_' +objname+ '_HtmlMode', 'init'); // switch to wysiwyg mode

var BtnParts = Array();

// check editor mode (don't perform actions in textedit mode)

var editdoc = editor_obj.contentWindow.document;

// execute command for font pulldowns

// execute command for fgcolor & bgcolor buttons

var oldcolor = _dec_to_rgb(editdoc.queryCommandValue(cmdID));

// execute command for buttons

var popup = window.open('', 'ColorPicker',

// all other commands

// check editor mode and update hidden output field

// update button states

// Loop over font pulldowns

// Get Font Name and Size

// Set Font face pulldown

// Set Font size pulldown

function editor_setmode(button_id, mode) {

var BtnParts = Array();

// define different editors

if (mode == "textedit" || editor_obj.tagName.toLowerCase() == 'iframe') {

// disable font pulldowns

// set event handlers

// update hidden output field

// get iframe document object

// set editor contents (and default styles for editor)

// set event handlers

// set initial value

// update hidden output field

// bring focus to editor

// check editor mode

if (curRange.length == null && // make sure it's not a controlRange