Tap Completo PDF

Curso de lnformtlca para lnternet
1cn|cas Avanadas de rogramao

rof. Lvandro reuss
2
SUMRIU
Au|a 1.................................................................................................................................................................... 4
Au|a 2 - Mdu|o Adm|n|strat|vo da Lo[a V|rtua|................................................................................................. 3
1. Crlao das tabelas bslcas....................................................................................................................... 3
2. ueflnlo do Layout do Slte para a Lo[a vlrtual ........................................................................................ 6
3. Crlao das telas do mdulo admlnlstratlvo do slte................................................................................. 9
4. 1elas de Cadastro e Llstagem.................................................................................................................. 11
4.1. Cadastro de Categorlas ................................................................................................................... 11
4.2. Llstagem de Categorlas ................................................................................................................... 12
4.3. Alterao de Categorlas.................................................................................................................. 12
4.4. Cadastro de rodutos ..................................................................................................................... 13
4.3. Llstagem de rodutos ..................................................................................................................... 16
4.6. Alterao de rodutos .................................................................................................................... 17
4.7. Lxlblo de lmagens dos rodutos .................................................................................................20
Au|a 3 - 1e|as Com os rodutos da Lo[a V|rtua| ................................................................................................ 22
1. Crlao do Cabealho e Menu para a Lo[a..................................................................................................22
2. Crlao da 1ela lnlclal com um !Sllder (banner) que mostrar as ofertas.............................................. 22
3. Crlao da glna que Lxlbe os uetalhes do roduto para Comprar ..................................................... 23
4. Crlao de uma pglna para exlblr os produtos de uma categorla escolhlda........................................26
3. Atuallzao da folha de estllos admln.css............................................................................................... 27
Au|a 4 - Carr|nho de Compras e Lm|sso do 8o|eto 8ancr|o..........................................................................30
1. Crlao das tabelas para armazenar os dados das compras ......................................................................30
2. Crlao da 1ela que apresenta o carrlnho de compras ..........................................................................30
3. llnallzao da compra............................................................................................................................. 33
4. Crlao de uma pglna para exlblr o 8oleto 8ancrlo............................................................................ 34
3. lncluso dos arqulvos funcoes_bb.php e layout_bb.php .......................................................................36
Au|a S - Imp|antao de uma Lo[a V|rtua| Comp|eta - Cpencart .....................................................................38
1. lazendo o download do Cpencart.............................................................................................................. 38
2. lnstalando o Cpencart ................................................................................................................................ 38
2.1 Acessando a tela de lnstalao do opencart......................................................................................... 39
2.2 verlflcando as pendnclas da lnstalao.............................................................................................. 40
2.3 Conflgurando a base de dados e os dados do usurlo .........................................................................41
3
2.4 llnallzando a lnstalao........................................................................................................................ 42
2.3 lnstalando e Alterando o ldoma para portugus-br ............................................................................. 44
2.6 lnstalando a moeda 8eal....................................................................................................................... 47
3 ersonallzando a lo[a ...................................................................................................................................47
3.1 lnstalando o mdulo dos Correlos para clculo do frete......................................................................30
3.2 lnstalando o mdulo de pagamento com boleto do 8cash e ayal.................................................... 31
3.3 ersonallzando o 8anner lnlclal ............................................................................................................ 32
3.4 A[ustando os cadastros de rodutos e uepartamentos .......................................................................33
4 Acessando a lo[a...........................................................................................................................................33
Au|a 6 - Imp|antao de um S|stema de Gerenc|amento de Contedo - Wordress .....................................34
1. lazendo o download do Wordress ...........................................................................................................34
2. lnstalando o Wordress.............................................................................................................................. 34
2.1 Acessando a tela de lnstalao do Wordress ..................................................................................... 36
3 Admlnlstrando o Wordress........................................................................................................................ 37
3.1 ersonallzando o slte............................................................................................................................ 37
4 Acessando o slte ..........................................................................................................................................38
4
Au|a 1
nesta dlsclpllna vamos aprofundar os conheclmentos de programao e banco de dados para crlarmos
uma lo[a vlrtual.
reclsamos que nossa lo[a tenha um nome, um logotlpo e pelo menos 6 produtos de 2 categorlas
dlferentes. Ate a prxlma aula voc preclsa crlar:
um nome para sua lo[a
um logotlpo com o nome de sua lo[a com 220 x 60 plxels
Lscolher pelo menos 6 produtos para serem vendldos na sua lo[a, com a sua descrlo completa,
dlmenses, peso, preo e pelo menos uma foto de cada produto.
na prxlma aula vamos crlar o layout para nosso slte e vamos modelar a base de dados para nossa
apllcao.
3
Au|a 2 - Mdu|o Adm|n|strat|vo da Lo[a V|rtua|
C ob[etlvo dessa aula e lnlclarmos a construo de nossa lo[a vlrtual, com a deflnlo do layout bslco
do slte, da crlao de algumas tabelas bslcas para esse lnlclo e a crlao de algumas telas de cadastros. Como
o ob[etlvo e que o slte flque funclonal e pronto ate o flnal da dlsclpllna, no vamos gastar multo tempo com a
"beleza" do slte e vamos focar na sua funclonalldade. Ate o flnal da dlsclpllna, o slte dever estar rodando no
servldor.
1. Criao das tabelas bsicas
A prlmelra colsa que preclsamos fazer e crlar 3 tabelas bslcas para o nosso slstema: a tabela que controla
os usurlos que acessaro o slstema, a tabela de categorlas de produtos e a tabela de produtos. Cbserve que
vamos crlar todas as tabelas com a lnlclal tap_ para ldentlflcarmos mals facllmente as tabelas relaclonadas
com a dlsclpllna de 1ecnlcas Avanadas de rogramao.
Cbserve que estamos crlando a tabela produto fazendo referncla a tabela categorla, ou se[a, cada
produto obrlgatorlamente deve pertencer a uma categorla e depols que tlvermos um produto cadastrado na
categorla, a mesma no pode mals ser exclulda, garantlndo a lntegrldade de nossa base de dados.
ara lsso, acesse o seu servldor de banco de dados ( https://etec.cafw.ufsm.br/phpmyadmin/), lnformando
o seu usurlo e sua senha e crle as 3 tabelas, executando os segulntes comandos SCL:
CREATE TABLE IF NOT EXISTS `tap_categoria` (
ìd_categoria` INT NOT NULL AUTO_INCREMENT ,
`nome_categoria` VARCHAR(45) NULL ,
PRIMARY KEY (ìd_categoria`) )
ENGINE = InnoDB;
CREATE TABLE IF NOT EXISTS `tap_produto` (
ìd_produto` INT(11) NOT NULL AUTO_INCREMENT ,
`nome_produto` CHAR(50) NULL DEFAULT NULL ,
`descr_produto` TEXT NULL DEFAULT NULL ,
`preco` DECIMAL(12,2) NULL DEFAULT NULL ,
èstoque` INT(11) NULL DEFAULT NULL ,
àltura` INT(11) NULL DEFAULT NULL ,
`largura` INT(11) NULL DEFAULT NULL ,
`profundidade` INT(11) NULL DEFAULT NULL ,
`peso` DECIMAL(12,3) NULL DEFAULT NULL ,
ìmagem` LONGBLOB NULL DEFAULT NULL ,
`miniatura` BLOB NULL DEFAULT NULL ,
`tipoimagem` VARCHAR(45) NULL DEFAULT NULL ,
ìd_categoria` INT NOT NULL ,
PRIMARY KEY (ìd_produto`) ,
INDEX `fk_tap_produto_tap_categoria` (ìd_categoria` ASC) ,
CONSTRAINT `fk_tap_produto_tap_categoria`
FOREIGN KEY (ìd_categoria` )
REFERENCES `tap_categoria` (ìd_categoria` )
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB
DEFAULT CHARACTER SET = latin1;
CREATE TABLE IF NOT EXISTS `tap_usuario` (
`login_usuario` CHAR(32) NOT NULL ,
`nome_usuario` VARCHAR(45) NULL DEFAULT NULL ,
`senha_usuario` VARCHAR(45) NULL DEFAULT NULL ,
PRIMARY KEY (`login_usuario`) )
ENGINE = InnoDB
6
Aps a crlao das duas tabelas, preclsamos lnserlr um reglstro na tabela usurlos, pols como alnda
no temos uma lnterface para gerenclar os usurlos autorlzados a utlllzar nosso slstema, preclsamos crlar as
contas dlretamente na base de dados. uessa forma, vamos crlar uma conta para o Admlnlstrador com logln:
admln e senha: admln. Cbserve que vamos lserlr no banco a senha usando o algorltmo de crlptografla sha1,
para que a mesma no se[a leglvel no banco de dados.
Lxecute o segulnte comando SCL na sua base de dados:
insert into tap_usuario values ('admin','Administrador',sha1('admin'));
ronto! A sua base de dados est pronta para ser utlllzada. Cs prxlmos passos so a deflnlo do
layout do nosso slte e a crlao das pglnas usando P1ML e P.
2. Definio do Layout do Site para a Lo|a Virtual
C nosso slte utlllzar uma folha de estllos .css para deflnlr a formatao e ter baslcamente a segulnte
estrutura:
vamos ento crlar nosso arqulvo .css com os estllos e formatao que usaremos nas demals pglnas.
C nosso slte deve ser salvo no servldor numa pasta separada dos demals arqulvos seus. uessa forma, use o
llleZllla e acesse o servldor: 200.132.38.31 - Sl1 porta: 2231, e crle na sua rea do servldor (publlc_html)
uma nova pasta com o nome tap . uentro dessa pasta crle uma pasta com o nome css e outra pasta com o
nome |magens. A estrutura deve flcar asslm, mals as pastas que voc [ tem:
Crle um arqulvo com o nome odmin.css e salve na pasta publlc_html/tap/css com os segu|ntes dados:
Logo Cabealho
Conteudo
8arra de Menu
8odape
7
arquivo: admin.css
body{
background-color: #ffffff; /* Cor de fundo */
font-family: Verdana; /* Tipo de Fonte */
font: 14px "Arial", Helvetica, sans-serif;
}
.site{
background:white; /* Cor de fundo */
width:1000px; /* Largura */
height:800px; /* Altura */
margin:0 auto; /* Margem */
}
.logo {
width: 300px; /* Largura */
height: 72px; /* Altura */
float: left; /* Flutuar esquerda */
}
.cabecalho {
}
.cabecalho h1{
text-align: center; /* Alinhamento do texto /*
font-size: 32pt; /* Tamanho da fonte */
color: #124884;
}
.barramenu{
background-color: #E0E0E0; /* Cor de fundo */
}
#menu ul {
padding:0px;
margin:0px;
background-color:#E0E0E0;
list-style:none;
}
#menu ul li { display: inline; }
#menu ul li a {
padding: 2px 10px;
display: inline-block;
/* visual do link */
color: #333;
text-decoration: none;
border-bottom:3px solid #E0E0E0;
}
#menu ul li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:3px solid #0000EA;
}
.conteudo{
width: 100%; /* Largura */
min-height: 350px; /* Altura */
8
padding-left: 20px; /* Enchimento asquerda */
padding-right: 20px; /* Enchimento direita */
overflow: auto; /* Mostrar rolagem se o contedo for maior */
}
.rodape{
float: left; /* Flutuar esquerda V
color: white; /* Cor do texto */
text-align: center; /* Alinhamento do texto */
font-size: x-small;
}
#formLogin {
padding-top: 50px;
padding-left: 300px;
width: 320px;
height:250px;
float: left;
}
#formPadrao {
width: 95%;
height:95%;
padding: 10px;
float:left;
}
Lsse arqulvo e apenas uma base e voc pode alterar o que qulser nele, pols aflnal de contas, vCCL est
fazendo o SLu slte e voc tem toda a llberdade de delx-lo com a aparncla que voc (ou o seu cllente) qulser!
Cbserve que estamos usando um arqulvo .css semelhante ao que vocs usaram em outra dlsclpllna.
ara facllltar a programao, evltar repetles e aglllzar as futuras atuallzaes, vamos crlar o
cabealho e o rodape em arqulvos separados e depols slmplesmente os lnclulmos em nossas pglnas.
Crle um arqulvo de cabealho para o nosso mdulo admlnlstratlvo com o nome cobeco/hoodmin.php:
<!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>Loja Virtual</title>
<link href="css/admin.css" rel="stylesheet" type="text/css"> 
</head>
<body>
<div class="site">
<div class="logo"><img src="imagens/logo.jpg"></div>
<div class="cabecalho"><h1>Loja Virtual</h1></div>
<div class="barramenu">
<nav id="menu">
<ul>
<li><a href="admin.php">Incio</a></li>
<li><a href="cadproduto.php">Cadastrar Produto</a></li>
<li><a href="listaproduto.php">Listar Produto</a></li>
<li><a href="cadcategoria.php">Cadastrar Categoria</a></li>
<li><a href="listacategoria.php">Listar Categoria</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</nav>
</div>
Cbserve no arqulvo aclma, as reas (dlv) do logo, do cabealho e da
barra de menu, que comporo o cabealho de nossas pglnas, alem do
cabealho padro de uma pglna web com as tags <head>, <tltle> e <body>.
Ateno!!!
Cs arqulvos devem
estar em mlnusculo,
sem acentos e sem .
9
Crle agora um arqulvo para o rodape do nosso slte, com o nome rodope.php:
<div class="rodape">
<hr>©2013 - CAFW Web Store Loja Virtual - Frederico Westphalen - RS - (55)3744-8900
</div>
</div>
</body>
</html>
Cbserve no arqulvo aclma que e ele quem fecha a dlv prlnclpal do slte e faz o fechamento das pglnas
html, com o </body></html>
3. Criao das telas do mdulo administrativo do site
Agora vamos crlar os programas em P para admlnlstrar o nosso slte de uma lo[a vlrtual.
A prlmelra colsa que preclsamos e de uma conexo com o nosso banco de dados em vrlas pglnas
que crlaremos. ara no termos a mesma conexo espalhada em todo o cdlgo, vamos crlar um unlco arqulvo
que far a conexo com o banco de dados e faremos a sua lncluso nas pglnas. Asslm, se tlvermos que mudar
a conta, senha ou banco, basta mudar num unlco arqulvo.
Crle um arqulvo com o nome conecto.php:
<?php
$pdo = new PDO ( "mysql:host=localhost;dbname=XXXXX", "YYYY", "ZZZZ" ) or die ("Erro ao
conectar no banco");
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>
Substltua o xxxxx pelo nome da sua base de dados (normalmente e lgual ao nome do seu logln),
substltua o ???? pelo seu logln e o ZZZZ pela sua senha. Obsetve oe o bost flcoo =locolbost, oo sejo, ele estot
oo mesmo setvlJot oe os seos otolvos, mos poJetlo set ooloet eoJeteo Je om setvlJot oe voc teobo
ocesso.
reclsamos lnlclalmente de uma tela de Logln, para que s utlllzem nosso slstema os usurlos
autorlzados, pols como ele estar na lnternet, qualquer um ter acesso a ele.
Crle um arqulvo com o nome /oqin.php:
<?php
include "cabecalhoadmin.php";
?>
<div class="conteudo">
<div id=formLogin>
<form name="fLogin" id="fLogin" method="post" action="valida.php">
<fieldset >
<legend align="center">Informe os dados do login:</legend>
<label align="center"; for="login">Login:</label>
<br />
<input type="text" name="login" id="login" size="20" maxlength="20" />
<br />
<label for="senha">Senha:</label>
<br />
<input type="password" name="senha" id="senha" size="20" maxlength="20" />
<br />
<input type="submit" value="Efetuar Login" />
</fieldset>
</form>
</div>
</div>
<?php
include "rodape.php";
?>
na tela de logln, fazemos a lncluso do cabealho e crlamos um formulrlo que ser envlado para o
programa vo/ido.php. Lste form tem os campos logln, senha e um boto de envlo do formulrlo. no flnal dele,
fazemos a lncluso do arqulvo rodope.php.
10
reclsamos crlar nossa pglna que receber os dados da tela de logln para fazer a autentlcao do
mdulo admlnlstratlvo. Se a autentlcao com usurlo e senha forem vlldas, chamar a pglna segulnte, que
e a admln.php. Crle uma pglna com o nome vo/ido.php:
<?php
session_start(); //inicia uma sessao php
if ($_POST) { //verifica se os dados vieram de um formulrio atravs do POST
include "conecta.php";
$login = trim($_POST["login"]); //recupera as variveis vindas do formulario e
$senha = trim($_POST["senha"]); //caso tenha espaos em branco, o trim os retira
if (empty($login)) { //se o login estiver em branco exibe a mensagem: "Informe os dados do
login"
echo "<script>alert('Informe os dados do login');history.back();</script>";
}
else if (empty($senha)) {//se a senha estiver em branco exibe a mensagem: "Informe a senha"
echo "<script>alert('Informe a senha');history.back();</script>";
}
else { //se os campos estiverem preenchidos corretamente - valida usurio
$stmt = $pdo->prepare("select * from tap_usuario where login_usuario = ? and senha_usuario
= sha1( ? ) limit 1;"); //faz uma consulta para ver se o usurio existe e a senha est correta
$stmt->bindValue(1, $login); //associa o primeiro ? da consulta com a varivel $login
$stmt->bindValue(2, $senha); //associa o segundo ? da consulta com a varivel $senha
$stmt->execute(); // executa a consulta
if ($linha = $stmt->fetch(PDO::FETCH_ASSOC))
{ //se a consulta deu certo, com usurio e senha ok
$_SESSION["loginok"] = true; // iniciar uma sesso PHP e gravar os dados na sessao
$_SESSION["login"] = $linha[0];
$_SESSION["nome"] = $linha[1];
header("Location: admin.php"); //redirecionar para o arquivo admin.php
}
else
{ //se o usurio ou senha so invlidos, avisar e voltar para o login
echo "<script>alert('Usuario ou senha invlida');history.back();</script>";
}
}
} else { // se tentou burlar a autenticao, informa que uma Requisicao invalida!
echo "Requisicao invalida!";
exit;
}
?>
L vamos crlar nossa pglna prlnclpal do mdulo admlnlstratlvo. Crle uma pglna com o nome
odmin.php:
<?php
include "cabecalhoadmin.php"; //inclui o cabealho
session_start(); //inicia a sesso para ver se est autenticado.
if(!isset ($_SESSION['loginok']) || ($_SESSION['loginok']) == false) //se no tem sesso vlida
{
unset($_SESSION['login']); //remove as variveis de controle de sesso
unset($_SESSION['senha']);
header('location:login.php'); //redireciona para a pgina de login
}
?>
<div class="conteudo"><h2></h2></div> 
<?php
include "rodape.php"; //inclui o rodap
?>
Asslm como preclsamos de um arqulvo para o logln, tambem preclsamos um arqulvo com cdlgo em
P para efetuarmos o logoff do slstema, para garantlr que outros que utlllzarm o navegador no tenham
acesso ao nosso mdulo admlnlstratlvo. Crle uma pglna com o nome /oqout.php:
<?php
session_start(); //inicia a sesso
unset($_SESSION["loginok"]); //remove a varivel de controle da nossa sesso
session_destroy(); //destri a sesso
header("Location: login.php"); //redireciona para o arquivo login.php
?>
11
ronto!!! odemos testar o nosso slte e fazer os a[ustes personallzando de acordo com o seu slte.
Coloque o logo do seu slte, que deve ter no mxlmo 300x72 plxels no servldor, na pasta
/public_html/tap/imagens . Se o logo do seu slte for malor, voc deve alterar o arqulvo de estllo
admln.css.
Cople os arqulvos crlados para o servldor na pasta /public_html/tap e certlflque-se de que seu
arqulvo admln.css este[a na pasta /public_html/tap/css
Se tudo deu certo, o seu slte deve estar com uma aparncla semelhante a esta:
A sua tarefa e alterar o cabealho e o rodape de acordo com sua lo[a vlrtual.
Agora vamos crlar as telas de cadastro e llstagem dos produtos e categorlas.
4. Telas de Cadastro e Listagem
Lxlstem vrlas formas de crlar as telas de cadastro, alterao e llstagem, mas ns vamos optar em
fazer 3 telas: uma para cadastro, uma para alterao e outra para a llstagem. lsso poderla ser felto num unlco
arqulvo, mas a sua compreenso flca comprometlda devldo a mlstura de cdlgos.
4.1. Cadastro de Categorias
vamos lnlclar nossos cadastros com a tela de Cadastro de Categorlas. Crle um arqulvo com o nome
codcoteqorio.php:
<?php
include "cabecalhoadmin.php"; //inclui o cabealho
include "conecta.php"; //inclui a conexo com o banco de dados
session_start(); //inicia a sesso
if(!isset ($_SESSION['loginok']) || ($_SESSION['loginok']) == false) //se no tem sesso vlida
{
unset($_SESSION['login']); //remove as variveis de controle de sesso
header('location:login.php'); //redireciona para a pgina de login
}
if (isset($_POST["botao"]) && $_POST["botao"]=="Cadastrar")
{ //se clicou no boto cadastrar...
$stmt = $pdo->prepare("insert into tap_categoria (nome_categoria) values (?);");
$stmt->bindValue(1, $_POST['nome']);
$stmt->execute(); //insere os dados na tabela
echo "<script>alert('Categoria cadastrada.');</script>";
12
}
?>
<div id=formPadrao> <! mostra um formulrio para cadastrar as categorias -->
<form name="fCadCategoria" id="fCadCategoria" method="post" action="cadcategoria.php">
<fieldset >
<legend align="center">Informe os dados da Categoria:</legend>
<label align="center"; for="nome">Nome:</label>
<br />
<input type="text" name="nome" id="nome" size="50" maxlength="45" required/>
<br />
<input type="submit" name="botao" id="botao" value="Cadastrar" />
</fieldset>
</form>
</div>
</div>
<?php
?>
4.2.Listagem de Categorias
ara vlsuallzarmos os dados [ cadastrados, vamos crlar uma tela que llsta as categorlas [ cadastradas
e mostra um boto para fazer a alterao dos dados. Crle um arqulvo com o nome /istocoteqorio.php:
<?php
include "cabecalhoadmin.php"; //inclui o cabealho, a conexo com o banco e verifica a sesso
session_start();
if(!isset ($_SESSION['loginok']) || ($_SESSION['loginok']) == false)
{
unset($_SESSION['login']);
header('location:login.php');
}
?>
<div class="conteudo"> <! mostra um formulrio com uma tabela das categorias -->
<div id=formPadrao>
<form name="fAlterarCategoria" id="fAlterarCategoria" method="post"
action="alteracategoria.php">
<fieldset >
<legend align="center">Categorias Cadastradas:</legend>
<?php //faz uma consulta trazendo todas as categorias cadastradas
$consulta = $pdo->query("SELECT * from tap_categoria;");
echo "<table border=0><tr><th>Id</th><th>Nome</th><th></th></tr>"; //monta uma
tabela
while ($linha = $consulta->fetch(PDO::FETCH_ASSOC)) {
echo "<tr><td>{$linha['id_categoria']}</td>"; //mostra o identificador
echo "<td>{$linha['nome_categoria']}</td>"; //mostra o nome da categoria
echo "<td><button type=\"submit\" name=\"alterar\" id=\"alterar\"
value=\"{$linha['id_categoria']}\">Alterar</button></td></tr>"; //mostra um boto com o id para ser
alterado
}
echo "</table>";
?>
</fieldset>
</form>
</div>
</div>
<?php
?>
4.3.Alterao de Categorias
ara alterarmos os dados [ cadastrados, vamos crlar uma tela que edlta os dados da categorla. Crle
um arqulvo com o nome o/terocoteqorio.php:
<?php
session_start();
13
{
}
if (isset($_POST["botao"]) && $_POST["botao"]=="Excluir") //Se clicou no boto excluir
{
try
{
$stmt = $pdo->prepare("delete from tap_categoria where id_categoria = ?;"); //faz um comando
sql
$stmt->bindValue(1, $_POST['alterar']); //preenche o ? com o cdigo a alterar
$stmt->execute(); //exclui o registro
header('location:listacategoria.php'); //redireciona para o listacategoria.php
}
catch(PDOException $e)
{
echo "<script>alert('No possvel excluir essa categoria.');</script>";
}
}
if (isset($_POST["botao"]) && $_POST["botao"]=="Salvar") //Se clicou no boto salvar
{ //faz um comando sql para atualizar (update) a tabela
$stmt = $pdo->prepare("update tap_categoria set nome_categoria=? where id_categoria = ?;");
$stmt->bindValue(1, $_POST['nome']); //preenche o 1 ? com o nome a alterar
$stmt->bindValue(2, $_POST['alterar']); //preenche o 2 ? com o codigo a alterar
$stmt->execute(); //executa o sql de atualizao dos dados dessa
categoria
header('location:listacategoria.php'); //redireciona para o listacategoria.php
}
$nome = "";
if (isset($_POST["alterar"])) //se h um cdigo a ser alterado, busca os dados para j deixar
{ //preenchido os campos com os j existentes antes
$stmt = $pdo->prepare("select * from tap_categoria where id_categoria = ?;");
$stmt->bindValue(1, $_POST['alterar']);
$stmt->execute();
{
$nome = $linha['nome_categoria']; //preenche a varivel nome com os dados do nome da
} //categoria que j estava no banco de dados
}
?>
<div id=formPadrao> <! mostra um formulrio os dados da categoria para alterar -->
<form name="fCadCategoria" id="fCadCategoria" method="post"
action="alteracategoria.php">
<fieldset >
<legend align="center">Alterao de dados da Categoria:</legend>
<br />
<br />
<input type="text" name="nome" id="nome" size="50" maxlength="45" value="<?php
echo $nome; ?>" required/><! preenche com o nome que j tinha cadastrado antes -->
<br />
<input type="submit" name="botao" id="botao" value="Salvar" />
<input type="submit" name="botao" id="botao" value="Excluir" />
<?php
if (isset($_POST["alterar"])) echo "<INPUT TYPE=\"hidden\" NAME=\"alterar\"
VALUE=\"{$_POST["alterar"]}\">"; <! inclui um campo oculto (hidden) com o cdigo a alterar -->
?>
</fieldset>
</form>
</div>
</div>
<?php
?>
4.4.Cadastro de Produtos
ue forma semelhante, vamos crlar o cadastro de produtos. C que ele tem de dlferente e que a
categorla a qual ele pertence [ tem que estar cadastradas antes. Alem dlsso, o produto armazenar uma
lmagem (foto) e uma mlnlatura do mesmo, portanto, no formulrlo de envlo dos dados deve ter um campo de
escolha de um arqulvo no formato !C.
14
na rotlna de lncluso dos dados, preclsamos lnclulr o tratamento dos dados de lmagem que vleram do
formulrlo, alem da rotlna de crlao da mlnlatura da lmagem envlada.
erceba que a tabela produto tem vrlos campos de dados que preclsam estar no formulrlo de envlo
e preclsam ser manlpulados pela rotlna de lncluso na tabela na base de dados.
Crle um arqulvo com o nome codproduto.php:
<?php
session_start();
{
}
$erro=0;
if (isset($_POST["botao"]) && $_POST["botao"]=="Cadastrar")
{
if(isset($_FILES['imagem'])&& $_FILES['imagem']['error'] != 0) //se foi enviada uma imagem
{
try {
if(is_uploaded_file($_FILES['imagem']['tmp_name']) &&
getimagesize($_FILES['imagem']['tmp_name']) != false)
{
//pega os atributos da imagem
$size = getimagesize($_FILES['imagem']['tmp_name']);
$type = $size['mime'];
$imgfp = fopen($_FILES['imagem']['tmp_name'], 'rb');
$name = $_FILES['imagem']['name'];
$maxsize = 9999999;
if($size['mime']=="image/jpeg") //testa se a imagem JPG
{
if($_FILES['imagem']['size'] < $maxsize ) //testa o tamanho da imagem
{
//cria a miniatura
$thumb_data = $_FILES['imagem']['tmp_name'];
$aspectRatio=(float)($size[0] / $size[1]);
if ($size[0] < $size[1])
{
$thumb_height = 100;
$thumb_width = $thumb_height * $aspectRatio;
}
else
{
$thumb_height = 100 / $aspectRatio;
$thumb_width = 100;
}
$src = ImageCreateFromjpeg($thumb_data);
$destImage = ImageCreateTrueColor($thumb_width, $thumb_height);
ImageCopyResampled($destImage, $src, 0,0,0,0, $thumb_width,
$thumb_height, $size[0], $size[1]);
ob_start();
imageJPEG($destImage);
$image_thumb = ob_get_contents();
ob_end_clean();
//Prepara o comando sql para inserir todos os dados na tabela produto
$stmt = $pdo->prepare("insert into tap_produto (nome_produto,
descr_produto, preco, estoque, altura, largura, profundidade, peso, imagem, tipoimagem,
miniatura,id_categoria) values (?,?,?,?,?,?,?,?,?,?,?,?);");
$stmt->bindValue(2, $_POST['descr']);
$stmt->bindValue(3, $_POST['preco']);
$stmt->bindValue(4, $_POST['estoque']);
$stmt->bindValue(5, $_POST['altura']);
$stmt->bindValue(6, $_POST['largura']);
$stmt->bindValue(7, $_POST['profundidade']);
$stmt->bindValue(8, $_POST['peso']);
$stmt->bindValue(9, $imgfp, PDO::PARAM_LOB);
$stmt->bindValue(10, $type);
$stmt->bindValue(11, $image_thumb, PDO::PARAM_LOB);
$stmt->bindValue(12, $_POST['categoria']);
$stmt->execute();//executa a insero na tabela na base de dados
}
else
{
13
$msg = "Tamanho do arquivo de imagem muito grande.";
$erro=1;
}
}
else
{
$msg = "Formato de imagem no suportado!";
$erro=1;
}
}
else
{
$msg = "Formato de imagem no suportado!";
$erro=1;
}
}
catch(Exception $e)
{
$erro=1;
echo '<h4>'.$e->getMessage().'</h4>';
}
if ($erro==1)
{
//Como deu algum erro, Prepara o comando sql para inserir os dados na tabela produto, sem os dados da
imagem
$stmt = $pdo->prepare("insert into tap_produto (nome_produto, descr_produto,
preco, estoque, altura, largura, profundidade, peso, id_categoria) values (?,?,?,?,?,?,?,?,?);");
$stmt->execute();
echo "<script>alert('Produto cadastrado com erro: '.$msg);</script>";
}
}
else
{
//Prepara o comando sql para inserir os dados na tabela produto, sem os dados da imagem
$stmt = $pdo->prepare("insert into tap_produto (nome_produto, descr_produto, preco,
estoque, altura, largura, profundidade, peso, id_categoria) values (?,?,?,?,?,?,?,?,?);");
$stmt->execute();
echo "<script>alert('Produto cadastrado.');</script>";
}
}
?>
<div id=formPadrao><! Monta um formulrio com os campos dos produtos -->
<form name="fCadProduto" enctype="multipart/form-data" id="fCadProduto" method="post"
action="cadproduto.php">
<fieldset >
<legend align="center">Informe os dados do Produto:</legend>
<br />
<br />
<label for="descr">Descrição:</label>
<br />
<input type="text" name="descr" id="descr" size="50" maxlength="100" />
<br />
<label for="categoria">Categoria:</label>
<br />
<select size="1" name="categoria">
<?php //preenche a caixa de escolha com as categorias j cadastradas
16
echo "<option
value=\"{$linha['id_categoria']}\">{$linha['nome_categoria']}</option>";
}
?>
</select>
<br />
<label for="preco">Preço:</label>
<br />
<input type="text" name="preco" id="preco" size="20" maxlength="20" required/>
<br />
<label for="estoque">Estoque:</label>
<br />
<input type="text" name="estoque" id="estoque" size="20" maxlength="20" />
<br />
<label for="altura">Altura:</label>
<br />
<input type="text" name="altura" id="altura" size="20" maxlength="20" />
<br />
<label for="largura">Largura:</label>
<br />
<input type="text" name="largura" id="largura" size="20" maxlength="20" />
<br />
<label for="largura">Profundidade:</label>
<br />
<input type="text" name="profundidade" id="profundidade" size="20"
maxlength="20" />
<br />
<label for="peso">Peso:</label>
<br />
<input type="text" name="peso" id="peso" size="20" maxlength="20" />
<br />
<label for="peso">Escolha a imagem principal:</label>
<input name="imagem" type="file" />
<br />
<input type="submit" name="botao" id="botao" value="Cadastrar" />
</fieldset>
</form>
</div>
</div>
<?php
?>
4.5.Listagem de Produtos
ara llstar os produtor, utlllzaremos uma rotlna bem semelhante a rotlna de llstagem das categorlas.
Crle um arqulvo com o nome /istoproduto.php:
<?php
session_start();
{
}
?>
<div id=formPadrao>
<form name="fAlterarProduto" id="fAlterarProduto" method="post"
action="alteraproduto.php">
<fieldset >
<legend align="center">Produtos Cadastrados:</legend>
<?php
$consulta = $pdo->query("SELECT * from tap_produto;");
echo "<table border=0><tr><th>Id</th><th>Nome</th><th>Estoque</th><th>Preo</th><th></th></tr>";
echo "<tr><td>{$linha['id_produto']}</td>";
echo "<td>{$linha['nome_produto']}</td>";
echo "<td align=\"right\">{$linha['estoque']}</td>";
echo "<td align=\"right\">{$linha['preco']}</td>";
echo "<td><button type=\"submit\" name=\"alterar\" id=\"alterar\"
value=\"{$linha['id_produto']}\">Alterar</button></td></tr>";
}
17
echo "</table>";
?>
</fieldset>
</form>
</div>
</div>
<?php
?>
4..Alterao de Produtos
ara a alterao dos dados do produto, usarem uma rotlna semelhante a da alterao de categorla,
com todos os campos adlclonals relaclonados ao produto e toda a rotlna de manlpulao da lmagem do
produto.
Alem dlsso, preclsamos mostrar a lmagem atual e faremos a chamada para um programa que
crlaremos logo em segulda (mostralmagem.php).
Crle um arqulvo com o nome o/teroproduto.php:
<?php
session_start();
{
}
if (isset($_POST["botao"]) && $_POST["botao"]=="Excluir")
{
try
{
$stmt = $pdo->prepare("delete from tap_produto where id_produto = ?;");
$stmt->execute();
header('location:listaproduto.php');
}
{
echo "<script>alert('No possvel excluir esse produto.');</script>";
}
}
if (isset($_POST["botao"]) && $_POST["botao"]=="Salvar")
{
if(isset($_FILES['imagem']) && $_FILES['imagem']["size"]>0)
{
try {
if(is_uploaded_file($_FILES['imagem']['tmp_name']) &&
getimagesize($_FILES['imagem']['tmp_name']) != false)
{
/*** get the image info. ***/
$size = getimagesize($_FILES['imagem']['tmp_name']);
$type = $size['mime'];
$imgfp = fopen($_FILES['imagem']['tmp_name'], 'rb');
//$size = $size[3];
$name = $_FILES['imagem']['name'];
$maxsize = 9999999;
if($_FILES['imagem']['size'] < $maxsize )
{
/*** create a second variable for the thumbnail ***/
$thumb_data = $_FILES['imagem']['tmp_name'];
$aspectRatio=(float)($size[0] / $size[1]);
if ($size[0] < $size[1])
{
$thumb_height = 100;
$thumb_width = $thumb_height * $aspectRatio;
}
else
{
$thumb_height = 100 / $aspectRatio;
$thumb_width = 100;
}
18
$src = ImageCreateFromjpeg($thumb_data);
$destImage = ImageCreateTrueColor($thumb_width, $thumb_height);
ImageCopyResampled($destImage, $src, 0,0,0,0, $thumb_width,
$thumb_height, $size[0], $size[1]);
ob_start();
imageJPEG($destImage);
$image_thumb = ob_get_contents();
ob_end_clean();
$stmt = $pdo->prepare("update tap_produto set nome_produto=?,
descr_produto=?, preco=?, estoque=?, altura=?, largura=?, profundidade=?, peso=?, imagem=?,
tipoimagem=?, miniatura=?, id_categoria=? where id_produto = ?;");
$stmt->bindValue(9, $imgfp, PDO::PARAM_LOB);
$stmt->bindValue(10, $type);
$stmt->bindValue(11, $image_thumb, PDO::PARAM_LOB);
$stmt->execute();
}
else
{
throw new Exception("Erro. Tamanho do arquivo de imagem muito
grande.");
}
}
else
{
throw new Exception("Formato de imagem no suportado!");
}
}
catch(Exception $e)
{
echo '<h4>'.$e->getMessage().'</h4>';
}
}
else
{
$stmt = $pdo->prepare("update tap_produto set nome_produto=?, descr_produto=?, preco=?,
estoque=?, altura=?, largura=?, profundidade=?, peso=?, id_categoria=? where id_produto = ?;");
$stmt->execute();
}
}
$nome = "";
$descr = "";
$preco = "";
$estoque = "";
$altura = "";
$largura = "";
$profundidade = "";
$peso = "";
$categoria = "";
if (isset($_POST["alterar"]))
{
$stmt = $pdo->prepare("select * from tap_produto where id_produto = ?;");
$stmt->execute();
{
19
$nome = $linha['nome_produto'];
$descr = $linha['descr_produto'];
$preco = $linha['preco'];
$estoque = $linha['estoque'];
$altura = $linha['altura'];
$largura = $linha['largura'];
$profundidade = $linha['profundidade'];
$peso = $linha['peso'];
$categoria = $linha['id_categoria'];
}
}
?>
<div id=formPadrao>
<form name="fCadProduto" enctype="multipart/form-data" id="fCadProduto" method="post"
action="alteraproduto.php">
<fieldset >
<legend align="center">Alterao de dados do Produto:</legend>
<?php if (isset($_POST["alterar"])) echo "<img
src=mostraimagem.php?id={$_POST["alterar"]}&img=2>";?>
<br />
<br />
<input type="text" name="nome" id="nome" size="50" maxlength="45" value="<?php
echo $nome; ?>" required/>
<br />
<label for="descr">Descrição:</label>
<br />
<input type="text" name="descr" id="descr" size="50" maxlength="100"
value="<?php echo $descr; ?>" />
<br />
<label for="categoria">Categoria:</label>
<br />
<select size="1" name="categoria">
<?php
if($linha['id_categoria']==$categoria) echo "<option
value=\"{$linha['id_categoria']}\" selected>{$linha['nome_categoria']}</option>";
else echo "<option
value=\"{$linha['id_categoria']}\">{$linha['nome_categoria']}</option>";
}
?>
</select>
<br />
<label for="preco">Preço:</label>
<br />
<input type="text" name="preco" id="preco" size="20" maxlength="20"
value="<?php echo $preco; ?>" required/>
<br />
<label for="estoque">Estoque:</label>
<br />
<input type="text" name="estoque" id="estoque" size="20" maxlength="20"
value="<?php echo $estoque; ?>" />
<br />
<label for="altura">Altura:</label>
<br />
<input type="text" name="altura" id="altura" size="20" maxlength="20"
value="<?php echo $altura; ?>" />
<br />
<label for="largura">Largura:</label>
<br />
<input type="text" name="largura" id="largura" size="20" maxlength="20"
value="<?php echo $largura; ?>" />
<br />
<label for="largura">Profundidade:</label>
<br />
<input type="text" name="profundidade" id="profundidade" size="20"
maxlength="20" value="<?php echo $profundidade; ?>" />
<br />
<label for="peso">Peso:</label>
<br />
<input type="text" name="peso" id="peso" size="20" maxlength="20" value="<?php
echo $peso; ?>" />
<br />
<label for="peso">Escolha a imagem principal:</label>
<input name="imagem" type="file" />
<br />
20
<input type="submit" name="botao" id="botao" value="Salvar" />
<input type="submit" name="botao" id="botao" value="Excluir" />
<?php
if (isset($_POST["alterar"])) echo "<INPUT TYPE=\"hidden\" NAME=\"alterar\"
VALUE=\"{$_POST["alterar"]}\">";
?>
</fieldset>
</form>
</div>
</div>
<?php
?>
4.7.Exibio de Imagens dos Produtos
ara exlblr a lmagem que est em nossa base de dados, vamos usar um programa em P que busca a
lmagem ou sua mlnlatura, de acordo com o seu numero de ldentlflcao (ld_produto).
Crle um arqulvo com o nome mostroimoqem.php:
<?php
try
{
if (isset($_GET["img"]) && $_GET["img"]==2) $stmt = $pdo->prepare("SELECT miniatura as imagem,
tipoimagem from tap_produto WHERE id_produto = ?");
else $stmt = $pdo->prepare("SELECT imagem, tipoimagem from tap_produto WHERE id_produto = ?");
$stmt->bindValue(1, $_GET["id"]);
$stmt->execute();
$stmt->setFetchMode(PDO::FETCH_ASSOC);
$array = $stmt->fetch();
if(strlen(trim($array['tipoimagem']))>0)
{
if(sizeof($array) == 2)
{
header("Content-type: ".$array['tipoimagem']);
echo $array['imagem'];
}
else
{
throw new Exception("Out of bounds Error");
}
}
else
{
header("Content-type: image/jpeg");
$imagem = imagecreate(100,32);
$fundo = imagecolorallocate($imagem, 230, 230, 230);
$texto = imagecolorallocate($imagem, 128, 128, 128);
imagestring($imagem, 5, 5, 5, "Sem imagem", $texto);
imagejpeg($imagem,"",90);
echo $destImage;
imagedestroy($imagem);
}
}
{
echo $destImage;
}
catch(Exception $e)
{
21
echo $destImage;
}
?>
ronto!!! Agora e s fazer o upload de todos os arqulvos para o servldor e testar.
laa a segulr a personallzao com suas cores, seu logo, seu nome de empresa e cadastre
pelo menos 6 produtos de 2 categorlas dlstlntas.
22
Au|a 3 - 1e|as Com os rodutos da Lo[a V|rtua|
C ob[etlvo dessa aula e darmos segulmento a construo de nossa lo[a vlrtual, com a crlao das telas
de exlblo dos produtos da lo[a. nessas telas vamos utlllzar alguns componentes prontos da blblloteca
!Cuery, como o !Sllder, que flcar mostrando as ofertas na pglna lnlclal.
1. Criao do Cabealbo e Menu para a Lo|a
Como vamos fazer a parte comerclal do slte, preclsamos de um novo cabealho e de um novo menu.
Crle um arqulvo de cabealho para o nosso mdulo admlnlstratlvo com o nome cobeco/ho.php:
<!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>Loja Virtual</title>
<link href="css/admin.css" rel="stylesheet" type="text/css"> 
</head>
<body>
<div class="site">
<div class="logo"><a href="index.php"><img src="imagens/logo.jpg"></a></div><!aqui est o logo
com um link para a pgina inicial, se clicar sobre ele -->
<div class="cabecalho"><h1>A Sua Loja Virtual</h1><a href="carrinho.php"><p>Carrinho de
Compras</p></a></div>
<div class="barramenu">
<nav id="menu">
<ul>
<li><a href="index.php">Incio</a></li><!vamos colocar um link para voltar para o
incio -->
<?php
include "conecta.php"; //inclui a conexo com o banco de dados
session_start(); // inicia uma sesso
$consulta = $pdo->query("SELECT * from tap_categoria;"); // seleciona todas as categorias cadastradas
while ($linha = $consulta->fetch(PDO::FETCH_ASSOC)) {// percorre todos os registros
echo "<li><a
href=\"mostraprodutos.php?id_categoria={$linha['id_categoria']}\">{$linha['nome_categoria']}</a></li>";
} // e lista as categorias com um link para uma pgina que mostra somente os produtos desta
categoria
?>
</ul>
</nav>
</div>
2. Criao da Tela Inicial com um )Slider {banner] que mostrar as ofertas
Agora o nosso cabealho [ tem um menu que mostra todas as categorlas cadastradas.
C prxlmo passo e crlarmos a pglna prlnclpal. nela ter um !Sllder mostrando algumas
lmagens de ofertas de produtos, como as que seguem abalxo:
23
Lssas lmagens flcaro se alternando, a cada 4 ou 3 segundos, dentro de um !Sllder.
Alem desses banners, colocaremos abalxo na pglna as novldades, com a exlblo dos 4
ultlmos produtos cadastrados. C cdlgo necessrlo para o componente !Sllder funclonar est na cor
verde.
vamos ento crlar nossa pglna prlnclpal. Crle um arqulvo com o nome index.php:
<?php
include "cabecalho.php";
?> 
<link rel="stylesheet" href="jquery/jsliderstyle.css" type="text/css" media="screen" />
<script type="text/javascript">var _siteRoot='index.php',_root='index.php';</script>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jsliderscripts.js"></script>
<div class="ofertas"></div>
<!incio do Jslider -->
<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner"> <!link e origem de cada arquivo de imagem das 4 ofertas -->
<a href="detalheproduto.php?id_produto=4">
<img id="slide-img-1" src="imagens/oferta1.jpg" class="slide" /></a>
<div id="slide-controls">
<p id="slide-nav"></p>
</div>
</div>
</div>
<script type="text/javascript">
if(!window.slider) var slider={};
slider.data=
[
{"id":"slide-img-1","client":"","desc":""},
24
{"id":"slide-img-4","client":"","desc":""}
];
</script>
</div>
</div>

<h4>Novidades:</h4>
<?php //aqui faremos a consulta de 4 produtos (limit 4) cujo estoque seja > 0 para mostrar os + novos
$consulta = $pdo->query("SELECT * from tap_produto where estoque > 0 order by id_produto desc limit
4;");
while ($linha = $consulta->fetch(PDO::FETCH_ASSOC)) {//percorre os registros encontrados
echo "<div class=\"produto\">";//cria um link para exibir os detalhes do produto
echo "<a href=\"detalheproduto.php?id_produto={$linha['id_produto']}\"><h1><img
src=\"mostraimagem.php?id={$linha['id_produto']}&img=2\"></h1></a>";//exibe a imagem do produto
echo "<a
href=\"detalheproduto.php?id_produto={$linha['id_produto']}\"><h2>{$linha['nome_produto']}</h2></a>";
echo "<div class=\"preco\">R$ {$linha['preco']}</div>";//exibe o nome do produto e o preo
echo "</div>";
}
?>
<h4> </h4>
<?php
?>
Agora s falta colocar os arqulvos de lmagens e do [query na sua pasta /publlc_html/tap no
servldor. uessa forma, use o llleZllla e acesse o servldor: 200.132.38.31 - Sl1 porta: 2231, e crle na sua rea
do servldor (publlc_html) uma nova pasta com o nome [query . Cople para dentro dessas pastas do servldor os
arqulvos que esto no arqulvo com o nome imoqens_e_jquery.tip dlsponlvels [unto ao materlal da dlsclpllna
dessa aula.
voc pode crlar os seu prprlos anunclos. 8asta salvar as lmagens na pasta e alterar no arqulvo aclma.
ara us-las sem alterar as conflguraos, as lmagens devem ser do tamanho 680 x 282.
No se esqueo de copior os orquivos poro o servidor!!!
uespols de coplar os arqulvos, voc [ pode testar a sua pglna lnlclal
(http://etec.cafw.ufsm.br/~soocooto/tap), que deve estar pareclda com esta:
23
3. Criao da Pgina que Exibe os Detalbes do Produto para Comprar
Cllcando sobre qualquer produto ou sobre a lmagem da oferta, todos eles fazer um llnk
atraves do <a href="detalheproduto.php?id_produto={$linha['id_produto']}">, ou se[a, chama a pglna
detalheproduto.php, passando o ld_produto como parmetro CL1. uesta forma, preclsamos crlar
essa pglna, que pegar o ld_produto atraves de $_CL1['ld_produto'] e mostrar os detalhes desse
produto.
ara lncrementar um pouco nossa pglna vamos usar uma tabela do !Cuery para mostrar as
caracterlstlcas e as dlmenses em duas abas separadas, delxando um vlsual mals llmpo na nossa
pglna.
vamos ento crlar a pglna com o nome deto/heproduto.php:
<?php
?> 
<link rel="stylesheet" href="jquery/jquery-ui.css" />
<script src="jquery/jquery-1.9.1.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<?php
if (isset($_GET["id_produto"])) // se h um id_produto passado como parmetro
{
try
{
$stmt = $pdo->prepare("select * from tap_produto where id_produto = ?;"); // seleciona os dados
$stmt->bindValue(1, $_GET['id_produto']); // do produto passado como parametro
$stmt->execute();
if ($linha = $stmt->fetch(PDO::FETCH_ASSOC)) // se h um produto com esse id_produto
{
echo "<h1><img src=mostraimagem.php?id={$_GET["id_produto"]}></h1>"; //mostra a imagem
echo "<h2>".$linha['nome_produto']."</h2>"; // mostra o nome
echo "<form name=\"fCompra\" id=\"fCompra\" method=\"post\" action=\"carrinho.php\">";
// prepara um formulrio para enviar o produto para o carrinho de compras
echo "<h3>R$ ".$linha['preco']." "; // mostra o preo
echo "<INPUT TYPE=\"hidden\" NAME=\"id_produto\" VALUE=\"{$_GET["id_produto"]}\">";
// inclu um campo oculto (hidden) com o id_produto para o carrinho de compras
echo "<input type=\"submit\" name=\"Comprar\" id=\"Comprar\" value=\"Comprar\"></h3>";
// mostra um boto Comprar que envia os dados para o carrinho de compras.
echo "</form>";
?>
<div id="tabs"> <!Mostra uma tabela JQuery com abas -->
<ul>
<li><a href="#tabs-1">Descrio</a></li>
<li><a href="#tabs-2">Especificaes</a></li>
</ul>
<div id="tabs-1"> <!Aba 1 - descrio do Produto -->
<?php
echo "<p>".$linha['descr_produto']."</p>"; // mostra a descr_produto cadastrada na base
echo " </div> <div id=\"tabs-2\">"; // mostra a aba 2 da tabela
echo "<p>Altura: {$linha['altura']}</p>"; // com as dimenses e peso do produto
echo "<p>Largura: {$linha['largura']}</p>";
echo "<p>Profundidade: {$linha['profundidade']}</p>";
echo "<p>Peso: {$linha['peso']}</p>";
echo " </div> </div>";
}
}
{ // se ocorreu um erro, avisa
echo "<script>alert('No possvel mostrar esse produto.');</script>";
}
}
echo "</div>";
26
?>
A pglna deve flcar semelhante a essa, a segulr. Cbserve a tabela !Cuery com a uescrlo e as
Lspeclflcaes em 2 abas dlstlntas.
4. Criao de Uma pgina para exibir os produtos de uma categoria escolbida
Alnda temos a opo de cllcar no menu para lr para o lnlclo ou para llstar somente os
produtos especlflcos de cada categorla. Se cllcarmos sobre o nome de uma categorla, o llnk far a
chamada da pglna mostroprodutos.php e passr o ?id_coteqorio como parmetro.
vamos ento crlar a pglna com o nome mostroprodutos.php:
<?php
?>
<?php //seleciona todos os produtos onde estoque>0 e id_categoria igual ao passado como parmetro
$stmt = $pdo->prepare("SELECT * from tap_produto where estoque>0 and id_categoria=?;");
$stmt->bindValue(1, $_GET["id_categoria"]);
$stmt->execute();
while ($linha = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo "<div class=\"produto\">"; //mostra os produtos dentro de uma div class com o nome produto
echo "<a href=\"detalheproduto.php?id_produto={$linha['id_produto']}\"><h1><img
src=\"mostraimagem.php?id={$linha['id_produto']}&img=2\"></h1></a>";
echo "<a
href=\"detalheproduto.php?id_produto={$linha['id_produto']}\"><h2>{$linha['nome_produto']}</h2></a>";
echo "<div class=\"preco\">R$ {$linha['preco']}</div>";
echo "</div>";
}
?>
</div>
<?php
?>
27
5. Atualizao da folba de estilos admin.css
ara que os produtos flquem bem organlzados na pglna, fol necessrlo lnclulr alguns estllos
no nosso arqulvo publlc_html/tap/css/admln.css. Atuallza o arqulvo com os novos estllos do
odmin.css:
body{
font-family: Verdana; /* Tipo de Fonte */
font: 14px "Arial", Helvetica, sans-serif;
}
.site{
background:white; /* Cor de fundo */
width:1000px; /* Largura */
height:800px; /* Altura */
margin:0 auto; /* Margem */
}
.logo {
}
.cabecalho {
}
.cabecalho h1{
text-align: center; /* Alinhamento do texto /*
color: #124884;
padding:0;
margin:0;
}
.cabecalho p{
text-align: right; /* Alinhamento do texto /*
color: #124884;
}
.cabecalho a {text-decoration: none;}
.barramenu{
}
#menu ul {
padding:0px;
margin:0px;
list-style:none;
}
#menu ul li { display: inline; }
#menu ul li a {
padding: 2px 10px;
display: inline-block;
/* visual do link */
color: #333;
text-decoration: none;
border-bottom:3px solid #E0E0E0;
}
#menu ul li a:hover {
background-color:#D6D6D6;
28
color: #6D6D6D;
border-bottom:3px solid #0000EA;
}
.conteudo{
padding-left: 20px; /* Enchimento asquerda */
padding-right: 20px; /* Enchimento direita */
}
h4{
text-align: left; /* Alinhamento do texto /*
color: #124884;
}
.rodape{
color: black; /* Cor do texto */
text-align: center; /* Alinhamento do texto */
font-size: x-small;
}
#formLogin {
padding-top: 50px;
padding-left: 300px;
width: 320px;
height:250px;
float: left;
}
#formPadrao {
width: 95%;
height:95%;
padding: 10px;
float:left;
}
.ofertas{
}
div.produto{
width :25%;
height: 180px;
float : left;
background-color: #ffffff;
position: relative;
}
.produto h1{
position: absolute;
top: 2 px;
left: 35px;
font-size: 12px;
color: #124884;
}
.produto h2{
position: absolute;
bottom: 16px;
left: 10px;
font-size: 15px;
color: #124884;
}
.preco {
position: absolute;
29
bottom: 6px;
left: 10px;
font-size: 16px;
color: #000000;
}
#tabs {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 85%;
}
ronto!!! Agora e s fazer o upload de todos os arqulvos para o servldor e testar. ode fazer a
personallzao com suas cores, seu logo, seu nome de empresa.
Cuando flcar pronto s me envle o llnk da pglna para que eu faa o teste.
na prxlma aula faremos o carrlnho de compras, a flnallzao da venda e a emlsso do boleto
bancrlo.
30
Au|a 4 - Carr|nho de Compras e Lm|sso do 8o|eto 8ancr|o
C ob[etlvo dessa aula e flnallzarmos a construo de nossa lo[a vlrtual, com a crlao do carrlnho de
compras, do cadastro dos dados do cllente e da emlsso do boleto bancrlo.
1. Criao das tabelas para armazenar os dados das compras
ara armazenar os dados das vendas, preclsamos de 2 tabelas adlclonals: uma para os dados da venda
e outra com os ltens de cada venda, pols uma venda pode ser de vrlos ltens. Crle as tabelas top_vendo e
top_itensvendo
CREATE TABLE IF NOT EXISTS `tap_venda` (
ìd_venda` INT(11) NOT NULL AUTO_INCREMENT ,
`data` DATETIME NULL DEFAULT NULL ,
`nome` VARCHAR(45) NULL DEFAULT NULL ,
èndereco` VARCHAR(100) NULL DEFAULT NULL ,
`bairro` VARCHAR(45) NULL DEFAULT NULL ,
`cep` VARCHAR(20) NULL DEFAULT NULL ,
`cidade` VARCHAR(45) NULL DEFAULT NULL ,
èstado` CHAR(2) NULL DEFAULT NULL ,
`cpf` CHAR(20) NULL DEFAULT NULL ,
`total` DECIMAL(12,2) NULL DEFAULT '0.00' ,
èmail` VARCHAR(100) NOT NULL ,
PRIMARY KEY (ìd_venda`) )
ENGINE = InnoDB
CREATE TABLE IF NOT EXISTS `tap_itensvenda` (
ìd_venda` INT(11) NOT NULL ,
ìd_produto` INT(11) NOT NULL ,
`quantidade` INT(11) NULL DEFAULT NULL ,
`preco` DECIMAL(12,2) NULL DEFAULT '0.00' ,
PRIMARY KEY (ìd_venda`, ìd_produto`) ,
INDEX `fk_tap_produto_has_tap_venda_tap_venda1` (ìd_venda` ASC) ,
INDEX `fk_tap_produto_has_tap_venda_tap_produto1` (ìd_produto` ASC) ,
CONSTRAINT `fk_tap_produto_has_tap_venda_tap_produto1`
FOREIGN KEY (ìd_produto` )
REFERENCES `tap_produto` (ìd_produto` )
ON DELETE NO ACTION
ON UPDATE NO ACTION,
CONSTRAINT `fk_tap_produto_has_tap_venda_tap_venda1`
FOREIGN KEY (ìd_venda` )
REFERENCES `tap_venda` (ìd_venda` )
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB
2. Criao da Tela que apresenta o carrinbo de compras
C prxlmo passo e crlarmos a pglna que ter o carrlnho de compras. Lla receber o
ldentlflcador do produto e far a lnsero na base de dados, apresentando os produtos que esto no
carrlnho, semelhante a lmagem a segulr:
31
vamos ento crlar nossa pglna do carrlnho de compras. Crle um arqulvo com o nome
corrinho.php:
<?php
if(isset ($_SESSION['id_venda']) && $_SESSION['id_venda']>0) // verifica se j est numa sesso com
compras
{
$id_venda = $_SESSION['id_venda']; // resgata o identificador da venda da sesso
}
else // se no estiver numa sesso de vendas
{ // insere uma nova venda na tabela de vendas
$stmt = $pdo->prepare("insert into tap_venda (data) values (now());");
$stmt->execute();
$id_venda = $pdo->lastInsertId();
$_SESSION['id_venda'] = $id_venda; // registra o idendificader de venda na sesso
}
if (isset($_POST["Excluir"])) // se clicou no boto excluir do carrinho de compras
{
try
{ // deleta o item que escolheu para escluir
$stmt = $pdo->prepare("delete from tap_itensvenda where id_venda = ? and id_produto =
?;");
$stmt->bindValue(1, $id_venda);
$stmt->bindValue(2, $_POST['Excluir']);
$stmt->execute();
}
{
echo "<script>alert('No possvel excluir esse produto do carrinho.');</script>";
}
}
else if (isset($_POST["id_produto"])) //se no clicou no boto excluir, inclui o produto no carrinho
{
try
{ // verifica se j tem esse item no carrinho
$stmt = $pdo->prepare("select * from tap_itensvenda where id_venda = ? and id_produto =
?;");
$stmt->bindValue(2, $_POST['id_produto']);
$stmt->execute();
{ // se j tem esse item no carrinho, aumenta a quantidade em uma
unidade
$stmt = $pdo->prepare("update tap_itensvenda set quantidade = quantidade+1 where
id_venda = ? and id_produto = ?;");
$stmt->execute();
}
else
{ // se ainda no tem esse item no carrinho, insere uma unidade na tabela
itensvenda
32
$stmt = $pdo->prepare("insert into tap_itensvenda (id_venda, id_produto,
quantidade, preco) values (?, ?, 1, (select preco from tap_produto where id_produto = ?));");
$stmt->execute();
}
}
{
echo "<script>alert('No possvel incluir esse produto no carrinho.');</script>";
}
}
?>
<?php // totaliza o valor da compra no carrinho
$stmt = $pdo->prepare("select sum(preco * quantidade) as total from tap_itensvenda where id_venda =
?;");
$stmt->execute();
echo "<div id=formPadrao>";
echo " <fieldset >";
echo " <legend align=\"center\">Carrinho de Compras:</legend>";
if ($linha = $stmt->fetch(PDO::FETCH_ASSOC)) {
$total = 0.0;
$total = $linha['total'];
}
if ($total==0)
{ // se o total zero, informa que o carrinho est vazio.
echo "<h3>Carrinho vazio.</h3>";
}
else
{ // se o total maior que zero, selectiona todos os produtos e mostra numa tabela
echo " <form name=\"fCarrinho\" id=\"fcarrinho\" method=\"post\" action=\"carrinho.php\">";
echo " <center><table border=\"1\" cellspacing=\"0\" cellpadding=\"\2\"
width=\"99%\"><tr><th>Id</th><th>Produto</th><th>Quantidade</th><th>Preo
Unitrio</th><th>Total</th><th></th></tr>";
$stmt = $pdo->prepare("select tap_produto.id_produto, nome_produto, tap_produto.preco,
quantidade from tap_produto, tap_itensvenda where tap_produto.id_produto = tap_itensvenda.id_produto
and id_venda = ?;");
$stmt->execute();
while ($linha = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo "<tr><td>{$linha['id_produto']}</td>";
echo "<td>{$linha['nome_produto']}</td>";
echo "<td align=\"right\">{$linha['quantidade']}</td>";
echo "<td align=\"right\">{$linha['preco']}</td>";
$subtotal = number_format($linha['quantidade'] * $linha['preco'], 2,",",".");
echo "<td align=\"right\">{$subtotal}</td>";
echo "<td><button type=\"submit\" name=\"Excluir\" id=\"Excluir\"
value=\"{$linha['id_produto']}\">Excluir</button></td></tr>";
}
echo "<tr><td align=\"right\" colspan=4><b>Total</b></td>";
echo "<td align=\"right\">";
echo number_format($total, 2,",",".");
echo "</td><td></td>";
echo "</form>";
echo " </table></center>";
echo " <form name=\"fFinalizaCarrinho\" id=\"fFinalizacarrinho\" method=\"post\"
action=\"finalizacarrinho.php\">";
echo "<INPUT TYPE=\"hidden\" NAME=\"total\" VALUE=\"{$total}\">";
echo "<p align=\"right\"><button type=\"submit\" name=\"Finalizar\" id=\"Finalizar\"
value=\"{$id_venda}\">Finalizar Compra</button></p>";
}
echo " </fieldset>";
echo " </div>";
echo "</div>";
?>
?>
odemos contlnuar as compras, cllcando no menu de categorlas, ate que se[a cllcado no
boto llnallzar Compra.
33
3. Finalizao da compra
ara flnallzar a compra, e necessrlo lnformar os dados do cllente. ara slmpllflcar o nosso
slte, cada compra exlge que os dados do cllente se[a lnformado, ou se[a, no flzemos as telas de
cadastro e ldentlflcao do cllente, apenas lnformamos os dados de cada venda.
Lssa tela baslcamente repassa as duas varlvels ld_venda e total atraves de lorm com o
metodo CS1, ao cllcar no boto Cerar 8oleto 8ancrlo
vamos ento crlar a pglna com o nome fino/itocorrinho.php:
<?php
if(isset ($_SESSION["id_venda"]) && $_SESSION["id_venda"]>0)
{
$id_venda = $_SESSION['id_venda'];
}
if(!(isset ($_POST["Finalizar"]) && $_POST["Finalizar"]==$id_venda))
{
$_SESSION["id_venda"]=0;
header('location:index.php');
}
?>
<div id=formPadrao>
<form name="fCadCliente" id="fCadCliente" method="post" action="boleto_bb.php">
<fieldset >
<legend align="center">Informe os dados do Cliente:</legend>
<br />
<br />
<label align="center"; for="endereco">Endereo:</label>
<br />
<input type="text" name="endereco" id="endereco" size="100" maxlength="100"
required/>
<br />
<label align="center"; for="bairro">Bairro:</label>
<br />
<input type="text" name="bairro" id="bairro" size="50" maxlength="45"/>
<br />
<label align="center"; for="cep">CEP:</label>
<br />
<input type="text" name="cep" id="cep" size="30" maxlength="10" required/>
<br />
<label align="center"; for="cidade">Cidade:</label>
<br />
<input type="text" name="cidade" id="cidade" size="50" maxlength="45"
required/>
<br />
<label align="center"; for="estado">Estado:</label>
<br />
<input type="text" name="estado" id="estado" size="10" maxlength="2" required/>
<br />
<label align="center"; for="cpf">CPF:</label>
<br />
<input type="text" name="cpf" id="cpf" size="30" maxlength="15" required/>
<br />
<label align="center"; for="email">E-Mail:</label>
<br />
<input type="email" name="email" id="email" size="50" maxlength="100"
required/>
<br />
<?php
echo "<INPUT TYPE=\"hidden\" NAME=\"total\" VALUE=\"{$_POST["total"]}\">";
echo" <h1><button type=\"submit\" name=\"Gerar\" id=\"Gerar\"
value=\"{$id_venda}\">Gerar Boleto Bancrio</button></h1>";
?>
</fieldset>
</form>
</div>
</div>
<?php
34
?>
A pglna deve flcar semelhante a essa, a segulr.
4. Criao de Uma pgina para exibir o Boleto Bancrio
vamos ento crlar a pglna com o nome bo/eto_bb.php:
<?php
// ---------- DADOS DINMICOS DO SEU CLIENTE PARA A GERAO DO BOLETO (FIXO OU VIA GET) -------- //
// Os valores abaixo podem ser colocados manualmente
session_start();
if(isset ($_SESSION["id_venda"]) && $_SESSION["id_venda"]>0)
{
$id_venda = $_SESSION['id_venda'];
}
if(!(isset ($_POST["Gerar"]) && $_POST["Gerar"]==$id_venda))
{
header('location:index.php');
}
// atualizamos os dados do cliente desta venda
$stmt = $pdo->prepare("update tap_venda set nome=?, endereco=?, bairro=?, cep=?, cidade=?, estado=?,
cpf=?, email=?, total=(select sum(preco * quantidade) as total from tap_itensvenda where id_venda = ?)
where id_venda=?");
$stmt->bindValue(2, $_POST['endereco']);
$stmt->bindValue(3, $_POST['bairro']);
$stmt->bindValue(4, $_POST['cep']);
$stmt->bindValue(5, $_POST['cidade']);
$stmt->bindValue(6, $_POST['estado']);
$stmt->bindValue(7, $_POST['cpf']);
$stmt->bindValue(8, $_POST['email']);
$stmt->execute();
// DADOS DO BOLETO PARA O SEU CLIENTE
$dias_de_prazo_para_pagamento = 3;
$taxa_boleto = 0.00;
33
$data_venc = date("d/m/Y", time() + ($dias_de_prazo_para_pagamento * 86400)); // Prazo de X dias OU
informe data: "13/04/2006";
$valor_cobrado = $_POST['total']; // Valor - REGRA: Sem pontos na milhar e tanto faz com "." ou "," ou
com 1 ou 2 ou sem casa decimal
$valor_cobrado = str_replace(",", ".",$valor_cobrado);
$valor_boleto=number_format($valor_cobrado+$taxa_boleto, 2, ',', '');
$dadosboleto["nosso_numero"] = $id_venda;
$dadosboleto["numero_documento"] = $id_venda; // Num do pedido ou do documento
$dadosboleto["data_vencimento"] = $data_venc; // Data de Vencimento do Boleto - REGRA: Formato
DD/MM/AAAA
$dadosboleto["data_documento"] = date("d/m/Y"); // Data de emisso do Boleto
$dadosboleto["data_processamento"] = date("d/m/Y"); // Data de processamento do boleto (opcional)
$dadosboleto["valor_boleto"] = $valor_boleto; // Valor do Boleto - REGRA: Com vrgula e sempre
com duas casas depois da virgula
// DADOS DO SEU CLIENTE - pega os dados enviados do form anterior
$dadosboleto["sacado"] = $_POST['nome'];
$dadosboleto["endereco1"] = $_POST['endereco'];
$dadosboleto["endereco2"] = $_POST['cep']." = ".$_POST['cidade']." - ".$_POST['estado'];
// INFORMACOES PARA O CLIENTE
$dadosboleto["demonstrativo1"] = "Pagamento de Compra na Loja CAFW WebStore";
$dadosboleto["demonstrativo2"] = "";
$dadosboleto["demonstrativo3"] = "";
// INSTRUES PARA O CAIXA
$dadosboleto["instrucoes1"] = "- Sr. Caixa, cobrar multa de 2% aps o vencimento";
$dadosboleto["instrucoes2"] = "- Receber at 10 dias aps o vencimento";
$dadosboleto["instrucoes3"] = "- Em caso de dvidas entre em contato conosco: xxxx@xxxx.com.br";
$dadosboleto["instrucoes4"] = "";
// DADOS OPCIONAIS DE ACORDO COM O BANCO OU CLIENTE
$dadosboleto["quantidade"] = "10";
$dadosboleto["valor_unitario"] = "10";
$dadosboleto["aceite"] = "N";
$dadosboleto["especie"] = "R$";
$dadosboleto["especie_doc"] = "DM";
// ---------------------- DADOS FIXOS DE CONFIGURAO DO SEU BOLETO --------------- //
// DADOS DA SUA CONTA - BANCO DO BRASIL - Atualizar com seus dados
$dadosboleto["agencia"] = "9999"; // Num da agencia, sem digito
$dadosboleto["conta"] = "99999"; // Num da conta, sem digito
// DADOS PERSONALIZADOS - BANCO DO BRASIL
$dadosboleto["convenio"] = "7777777"; // Num do convnio - REGRA: 6 ou 7 ou 8 dgitos
$dadosboleto["contrato"] = "999999"; // Num do seu contrato
$dadosboleto["carteira"] = "18";
$dadosboleto["variacao_carteira"] = "-019"; // Variao da Carteira, com trao (opcional)
// TIPO DO BOLETO
$dadosboleto["formatacao_convenio"] = "7"; // REGRA: 8 p/ Convnio c/ 8 dgitos, 7 p/ Convnio c/ 7
dgitos, ou 6 se Convnio c/ 6 dgitos
$dadosboleto["formatacao_nosso_numero"] = "2"; // REGRA: Usado apenas p/ Convnio c/ 6 dgitos: informe
1 se for NossoNmero de at 5 dgitos ou 2 para opo de at 17 dgitos
/*
#################################################
DESENVOLVIDO PARA CARTEIRA 18
- Carteira 18 com Convenio de 8 digitos
Nosso nmero: pode ser at 9 dgitos
Nosso nmero: pode ser at 10 dgitos
Nosso nmero:
de 1 a 99999 para opo de at 5 dgitos
de 1 a 99999999999999999 para opo de at 17 dgitos
#################################################
*/
// SEUS DADOS - atualizar...
36
$dadosboleto["identificacao"] = "CAFW Web Store";
$dadosboleto["cpf_cnpj"] = "123456789/0001-01";
$dadosboleto["endereco"] = "Linha Sete de Setembro";
$dadosboleto["cidade_uf"] = "Frederico Westphalne";
$dadosboleto["cedente"] = "UFSM/CAFW";
// NO ALTERAR!
include("funcoes_bb.php");
include("layout_bb.php");
?>
5. Incluso dos arquivos funcoes_bb.pbp e layout_bb.pbp
ara que o boleto funclone e necessrlo lnclulr 2 arqulvos [unto com os nossos arqulvos php:
funcoes_bb.php e layout_bb.php, que esto dlsponlvels para download no materlal da dlsclpllna.
Cbserve que o boleto mostra a lmagem do arqulvo logo.[pg que est na pasta lmagens. Se o
logotlpo de sua empresa tlver outro nome, cople o arqulvo para a pasta lmagens e renomele para
logo.[pg.
A tela do boleto deve flcar semelhante a essa:
37
ronto!!! Agora e s fazer o upload de todos os arqulvos para o servldor e testar. ode fazer a
personallzao com suas cores, seu logo, seu nome de empresa.
nosso slte est pronto!!!
38
Au|a S - Imp|antao de uma Lo[a V|rtua| Comp|eta - Cpencart
C ob[etlvo dessa aula e lmplantarmos uma lo[a vlrtual completa, proflsslonal, com todos os cadastros,
conta do cllente, com pagamentos por boleto e carto de credlto, clculo do frete pelos Correlos. ara lsso,
vamos usar o Cpencart, que e um slstema de L-Commerce Cpen Source desenvolvldo em P llcenclado nos
termos da Cnu Ceneral ubllc Llcense, ou se[a, e uma soluo pronta e gratulta para gesto de lo[a vlrtual que
voc pode modlflcar llvremente.
nesta aula, voc val aprender a lnstalar, lmplantar e dar manuteno numa soluo proflsslonal de e-
commerce, que no fol desenvolvlda por voc. lsso tambem faz parte das atrlbules de um tecnlco em
lnformtlca para lnternet.
1. Fazendo o download do Upencart
ara a nossa aula, faa o download para o seu computador dos segulntes arqulvos, que esto [untos
com o materlal da aula 3:
opencart-1.3.6.zlp
ldloma_pt-br_opencart_v1.3.3.1.zlp
8cash-lframe.zlp
modulocorrelos3.4.3oc131.zlp
agSeguro1.1.3.zlp
novas verses e outros mdulos podem ser encontrados dlretamente no slte do Cpencart
(http://www.opencart.com). 1radues, dlcas e tutorlals podem ser enconctrados no slte da Comunldade
Cpencart 8rasll (http://www.opencartbrasll.com.br).
2. Instalando o Upencart
ara lnstalar o Cpencart, abra e descompacte o arqulvo opencart-1.3.6zlp, colocando-o numa pasta
temporrla qualquer. L lmportante que a pasta este[a descompactada e para verlflcar lsso a mesma deve estar
com
um desses lcones:
se estlver aparecendo um desses: e porque ela alnda est compactada
(.zlp).
ara a nossa lnsalao eu [ renomeel o arqulvo conflg-dlst para conflg. Se for lnstalar uma verso
balxada dlretamente do opencart preclsa renomear o arqulvo conflg-dlst.php para conflg.php and
admln/conflg-dlst.php para admln/conflg.php.
Abra o lllezllla e faa uma conexo para o servldor etec.cafw.ufsm.br lnformando seu usurlo e sua
senha.
uentro da sua pasta pub||c_htm| crle uma pasta com o nome: |o[a
39
Lnvle tudo o que est dentro da pasta opencart-1.S.6\up|oad\ para a pasta |o[a no servldor, atraves
do programa llleZllla:
Cbserve que so mals de 2800 arqulvos que devem ser coplados com quase 20M8 de dados e esta
operao pode ser lenta, dependendo da velocldade da sua conexo com a lnternet. Se voc tlver dlflculdades
com essa cpla de arqulvos, envle um e-mall para: evandro[cafw.ufsm.br sollcltando a cpla, pols o professor
pode coplar dlretamente para o servldor numa conexo local, com uma velocldade bem malor.
2.1 Acessando a tela de instalao do opencart
Aps todos os arqulvos serem coplados, acesse o lnstalador da sua lo[a vlrtual, atraves do endereo
http:]]etec.cafw.ufsm.br]~xxxxx]|o[a, onde xxxxx e o seu usurlo.
A tela de lnstalao deve ser lgual a que est a segulr. Marque a opo I agree to the ||cence
(concordando com a llcena) e cllque em Cont|nue.
40
2.2 Verificando as pendncias da instalao
verlflque se na tela segulnte a llsta de pendnclas aparece com status (Ck) e Wrltable.
Se algum arqulvo ou dlretrlo aparecer o status Unwritable acesse o llleZllla, seleclone o arqulvo ou
dlretrlo (pasta) e:
cllque com o boto dlrelto do mouse e escolha a opo erm|sses do Arqu|vo...
mude a sua permlsso para 777, com dlrelto de Ler, Cravar e Lxecutar para todos
marque a opo lnclulr Subpastas
marque a opo Apllcar a todos os arqulvos e pastas
cllque em Ck
41
Obs.. se vtlos otolvos e postos opteseototem o stotos Unwritable poJe-se seleclooot o posto lojo e opllcot o
ptoceJlmeoto oclmo, oe set vllJo poto toJos os otolvos Jo posto lojo.
Cllque no boto e replta o procedlmento anterlor ate que todos os status este[am Ck e
Wrltable.
2.3 Configurando a base de dados e os dados do usurio
na tela segulnte, lnforme os dados sollcltados, onde xxxxx e o seu usurlo e yyyyy a sua senha e
lnforme o seu e-mall, aps cllque em Contlnue. C usurlo: admln com senha: admln e a conta que ser usada
para admlnlstrar a lo[a. ode usar outro nome e outra senha, se qulser.
42
2.4 Finalizando a instalao
Se tudo de certo, aparecer a segulnte tela:
43
ronto! Agora s falta apagar a pasta de lnstalao do Cpencart. Acesse o llleZllla e seleclone a pasta
|nsta||, cllque com o boto dlrelto do mouse sobre ela e escolha a opo Apagar.
A sua lo[a [ deve estar dlsponlvel, com uma verso em lngls, com dlversos produtos de teste, mas [
podemos vlsuallzar. Acesse http://etec.cafw.ufsm.br/~xxxxx/lo[a, onde xxxxx e o seu usurlo.
ueve aparecer uma tela semelhante a essa:
44
2.5 Instalando e Alterando o idoma para portugus-br
Agora, a tarefa e personallzar nossa lo[a. vamos lnlclar lnstalando o pacote de ldloma portugus-8r.
ara lsso, descompacte o arqulvo |d|oma_pt-br_opencart_v1.S.S.1.z|p (Lxtralr) numa pasta. usando o llleZllla,
envle para a pasta loja no servldor etec.cafw.ufsm.br, as pastas admin e catalog (da pasta onde voc
descompactou/extralu o ldloma-pt-br-opencart_v1.3.3.1)
43
Se o llleZllla lnformar que o arqulvo [ exlste no destlno, lnforme Subst|tu|r e marque a opo Ut|||zar
sempre esta ao e cllque em Ck.
Agora podemos acessar o mdulo admlnlstratlvo da nossa lo[a a partlr do endereo:
etec.cafw.ufsm.br/~xxxxx/lo[a/admln , onde xxxxx e o seu usurlo. lnforme o logln e a senha cadastrado no
ltem 2.3 da lnstalao. Se voc no escolheu outro, por padro, usamos o logln: admln e senha: admln
Acesse o menu System -> Loca||sat|on -> Languages
46
Cllque na opo lnsert:
reencha os campos no formulrlo aberto com as segulntes lnformaes:
Language name: ortugus (88)
Code: pt-br
Loca|e: pt_88.u1l-8, pt_88, u1l-8
Image: br.png
D|rectory: portuguese-br
I||ename: portuguese-br
Status: Lnabled
Sort Crder: 1
Cllque no boto Save.
na prxlma tela, Cllque em Ldlt na llnha que est ldentlflcado o ldloma Lngllsh (uefault) e altere o
campo Status para ulsabled e o campo Sort Crder para 2, e cllque no boto Save.
Acesse o menu System>Settlngs, cllque em Ldlt, cllque na aba Local, lnforme o pals como 8rasll e o
estado/reglo para 8lo Crande do Sul. Seleclone a opo ortugus (88) para os campos Language e
Adm|n|strat|on Language, e cllque no boto Save, neste momento a admlnlstrao da lo[a [ estar traduzlda.
Acesse a sua lo[a com CpenCart para vlsuallzar a lo[a [ traduzlda. Se no fol, presslone C18L+l3 para
recarregar a pglna.
C8S.: Se tlver certeza que no utlllzar mals o ldloma lngls, pode seleclon-lo e cllcar em Lxclulr, pols
se mantlver o ldloma cadastrado, em algumas telas e necessrlo o cadastro dos dados para todos os ldlomas
lnstalados.
47
2. Instalando a moeda Real
ara lnstalarmos a moeda padro, acesse o menu S|stema -> Loca||zao -> Moedas e cllque
em lnserlr:
na tela de cadastro da moeda, lnforme:
1ltulo da Moeda: 8eal
Cdlgo: 88L
Slmbolo a esquerda: 8$
Slmbolo a dlrelta:
Casas declmals: 2
valor: 1.00000000
Status: Pabllltado
Obs.. No slmbolo esoetJo, ops o k5 Jelxe om espoo em btooco poto oe os oometos oo
floem coloJo oo slmbolo.
3 Personalizando a lo|a
Acesse o menu S|stema -> Conf|guraes e altere os dados da empresa e cllque em salvar.
48
ersonallze os demals dados, cllcando sobre a aba Lo[a:
Conclua as conflguraes sobre a Locallzao, escolhendo a moeda 8eal como moeda padro:
49
na aba lmagens, escolha o logotlpo para a lo[a vlrtual Cllcando em Locallzar ==> Lnvlar e
depols dando um duplo-cllque para escolher a lmagem envlada.
Acesse o menu S|stema -> Loca||zao -> Moedas, marque as moedas que voc no quer na
sua lo[a vlrtual e cllque em Lxc|u|r.
30
3.1 Instalando o mdulo dos Correios para clculo do frete
ara lnstalar o mdulo dos Correlos, descompacte o arqulvo modu|ocorre|os3.4.3oc1S1.z|p
(Lxtralr) numa pasta. usando o llleZllla, envle para a pasta loja no servldor etec.cafw.ufsm.br, as pastas
admin e catalog (da pasta onde voc descompactou/extralu o modulocorrelos3.4.3oc131)
Acesse o menu Lxtenses -> lormas de Lnvlo e cllque sobre o llnk lnstalar do Correlos (8rasll)
Aps a lnstalao, na mesma tela, cllque sobre a opo Ldltar dos Correlos (8rasll) e lnforme
os dados da prxlma tela:
CL de Crlgem:
Servlos: Marque: Sedex - sem contrato e AC - sem contrato]
Sltuao: Pabllltado
Crdem: 1
31
uelxe os demals campos com o valor padro ou em branco
Cllque em Salvar
Cllque na opo Ldltar do lrete llxo, que tambem est habllltado por padro e altere a
sltuao para uesabllltado. Cllque em Salvar.
C mdulo de clculo de frete pelo correlo est pronto.
3.2 Instalando o mdulo de pagamento com boleto do Bcasb e PayPal
ara lnstalar o mdulo de pagamento do 8cash, descompacte o arqulvo 8cash-|frame.z|p (Lxtralr)
numa pasta. usando o llleZllla, envle para a pasta loja no servldor etec.cafw.ufsm.br, as pastas admin e
catalog (da pasta onde voc descompactou/extralu o 8cash-lframe), de forma semelhante as lnstalaes
do ldloma portugus-br e do mdulo dos Correlos.
Acesse o menu Lxtenses -> lormas de agamento e cllque sobre o llnk lnstalar do Mdulo 8cash.
Asslm que for lnsalado, cllque sobre o llnk Ldltar do 8cash e conflgure os dados:
Chave de acesso: xyz12336 *esso s omo cbove Je teste, ool ltlo o cbove oe setlo teceblJo Jo 8cosb
Lmall: seuemall[algo.com
Sltuao: Pabllltado
Crdenao: 1
uelxe os demals campos do [elto que esto
Cllque em Salvar
Cllque em Ldltar do pagamento: agamento na Lntrega e altere a sltuao para: desabllltado
Cllque em Ldltar do pagamento: agamento Crtls e altere a sltuao para: desabllltado
ara habllltar o pagamento ayal, cllque na opo de pagamento ayal (observe que e o
que tem s o nome ayal, sem nada alem do nome) e cllque em lnstalar.
Aps, cllque em Ldltar e lnforme os dados:
Lmall: seuemall[algo.com
Modo de 1este: slm (no nosso caso. Se fosse numa lo[a real, aps crlar a conta no
ayal, alterar para no)
Sltuao: Pabllltado
32
Crdem: 2
3.3 Personalizando o Banner inicial
ara personallzar o banner lnlclal da pglna, cllque em Slstema -> ueslgn (aparncla) ->
8anners e cllque em Ldltar do 8anner Samsung 1ab.
Altere o nome do 8anner para: Cfertas, altere/Adlclone a Cferta 1, Cferta 2, Cferta 3 e Cferta
4, cllcando em Locallzar, e no gerenclador de Arqulvos, cllque em Lnvlar.
uepols de envladas as lmagens, d um duplo-cllque com o mouse para escolher.
voc tambem pode alterar os outros 2 banners que aparecero na lateral durante a
navegao pelos departamentos.
33
3.4 A|ustando os cadastros de Produtos e Departamentos
Agora s falta cadastrar nossos produtos e departamentos.
lnlclalmente, acesse o menu Catlogo -> rodutos, seleclone todos e cllque em Lxclulr.
Acesse o menu Catlogo -> uepartamentos, seleclone todos e cllque em Lxclulr.
Cllque em lnserlr para cadastrar um novo uepartamento, lnformando pelo menos os
segulntes dados:
Aba geral => uepartamento: lnforme o nome do departamento (categorla)
Aba uados => Menu Superlor: marque essa opo para que o departamento
(categorla) aparea no menu superlor da lo[a
Aba uados => Pabllltado
Cllque em Salvar
Acesse o menu Catlogo -> rodutos, cllque em lnserlr para cadastrar um novo roduto,
lnformando pelo menos os segulntes dados:
Aba geral => roduto: lnforme o nome do produto
Aba uados => Modelo: lnforme o numero ou modelo do produto
Aba uados => reo de venda
Aba uados => lmagem (cllque em locallzar e envle a lmagem)
Aba uados => ulmenses
Aba uados => eso
Aba Llgaes => uepartamentos
Aba lmagens => lmagem (para lmagens adlclonals do produto)
Cllque em Salvar
C Cpencart possul lnumeras outras opes de personallzao, que podem ser encontradas
em: http://www.opencartbrasll.com.br/tutorlals/conflgurando-opencart
4 Acessando a lo|a
ronto!!! A sua lo[a est pronta para ser acessada atraves do llnk
http://etec.cafw.ufsm.br/~xxxxx/lo[a onde xxxxx e o nome do seu usurlo.
ode fazer a personallzao com suas cores, seu logo, seu nome de empresa.
Cuando flcar pronto s me envle o llnk da pglna para que eu faa o teste.
nosso slte com uma soluo proflsslonal de e-commerce est pronto!!! L sem nenhuma llnha
de cdlgo de programao.
lnstalar, lmplantar e dar manuteno numa soluo para a lnternet tambem faz parte das
atrlbules de um tecnlco em lnformtlca.
34
Au|a 6 - Imp|antao de um S|stema de Gerenc|amento de
Contedo - Wordress
C ob[etlvo dessa aula e lmplantarmos o Wordress - um slstema de gerenclamento de conteudo para
web, escrlto em P com banco de dados MySCL, com foco na estetlca, nos adres Web e na usabllldade. C
Wordress e um software llvre e gratulto que permlte a postagem de fotos, notlclas, agenda, destaques e
galerlas.
nesta aula, voc val aprender a lnstalar, lmplantar e dar manuteno numa soluo proflsslonal de
gerenclamento de conteudo, que no fol desenvolvlda por voc, mas que tambem faz parte das atrlbules de
um tecnlco em lnformtlca para lnternet.
Lste tlpo de soluo pode ser usada para a dlvulgao de empresas, entldade e produtos, quando no
h a necessldade de uma lo[a vlrtual, com carrlnho de compras. C Wordress pode ser usado em vrlos
estglos, no qual o trabalho de vocs e o de lmplantar, escolher os elementos e preparar a lnterface para que
flque de acordo com a necessldade da empresa, escola ou entldade.
Se questlonarem por que lmplantaram uma soluo usando Wordress ao lnves de desenvolverem o
slte manualmente, podem responder, sem preocupao nenhuma, que no faz sentldo crlar gerencladores de
conteudo quando [ exlstem solues gratultas, que so mals completas e amplamente usadas no mundo
todo. um exemplo dlsso e o slte do nead do CAlW (http://www.cafw.ufsm.br/nead/), onde pode-se observar
no rodape da pglna: owered by Wordress | ueslgned by: lree Wordress 1heme.
1. Fazendo o download do WordPress
ara a nossa aula, faa o download para o seu computador do arqulvo de lnstalao do Wordpress em
portugus: wordpress-3.7.1-pt_8k.z|p, que est [untos com o materlal da aula 6
novas verses, temas e outros mdulos podem ser encontrados dlretamente no slte do Wordpress
(http:// http://wordpress.org/). 1radues, documentao e outros downloads podem ser encontrados no slte
da Comunldade Wordpress 8rasll (http://br.wordpress.org/).
2. Instalando o WordPress
ara lnstalar o Wordress, abra e descompacte o arqulvo wordpress-3.7.1-pt_8k.z|p, colocando-o
numa pasta temporrla qualquer. L lmportante que a pasta este[a descompactada e para verlflcar lsso a
mesma deve estar com
um desses lcones:
se estlver aparecendo um desses: e porque ela alnda est compactada
(.zlp).
ara a lnstalao de um novo download da pglna do Wordress, deve-se copiar e renomear o
arquivo
wp-config-sample.php para wp-config.php . Para a nossa instalao, eu j renomeei o arquivo e
apenas necessrlo conflgur-lo com as lnformaes de acesso a sua base de dados. Abra o arqulvo wp-
conf|g.php que est na pasta descompactada e altere os segulntes dados:
33
nomedo8u: lnforme o nome da sua base de dados, que e lgual ao seu logln
username_here: lnforme o seu logln
password_here: lnforme a sua senha
/** O nome do banco de dados do WordPress */
define('DB_NAME', 'nomedoBD');
/** Usurio do banco de dados MySQL */
define('DB_USER', 'username_here');
/** Senha do banco de dados MySQL */
define('DB_PASSWORD', 'password_here');
Cbs.: altere somente o que est em vermelho, mantendo as aspas.
Salve o arqulvo wp-conflg.php.
Abra o lllezllla e faa uma conexo para o servldor etec.cafw.ufsm.br lnformando seu usurlo e sua
senha.
uentro da sua pasta pub||c_htm| crle uma pasta com o nome: porta|
Lnvle tudo o que est dentro da pasta wordpress para a pasta porta| no servldor, atraves do programa
llleZllla:
Cbserve que so mals de 1000 arqulvos que devem ser coplados com quase 13M8 de dados e esta
operao pode ser lenta, dependendo da velocldade da sua conexo com a lnternet. Se voc tlver dlflculdades
com essa cpla de arqulvos, envle um e-mall para: evandro[cafw.ufsm.br sollcltando a cpla, pols o professor
pode coplar dlretamente para o servldor numa conexo local, com uma velocldade bem malor.
36
2.1 Acessando a tela de instalao do WordPress
Aps todos os arqulvos serem coplados, acesse o lnstalador do Wordress, atraves do endereo
http:]]etec.cafw.ufsm.br]~xxxxx]porta|, onde xxxxx e o seu usurlo.
A tela de lnstalao deve ser lgual a que est a segulr.
lnforme os dados sollcltados e cllque em lnstalar Wordress.
Se tudo deu certo, deve aparecer uma tela semelhante a essa:
Cllque em Logln para entrar no mdulo admlnlstratlvo do Wordress
37
3 Administrando o WordPress
C mdulo admlnlstratlvo do Wordress pode ser acessado atraves do endereo:
http://etec.cafw.ufsm.br/~xxxxx/portal/wp-logln.php onde xxxxx e o seu usurlo.
lnforme o nome do usurlo cadastrado anterlormente durante a lnstalao do Wordress e cllque em
Logln. ueve aparecer uma tela semelhante a essa, que e o mdulo admlnlstratlvo:
3.1 Personalizando o site
voc pode personallzar o seu slte, lnclulr notlclas (posts), fotos (mldlas), pglnas, comentrlos, pluglns,
enflm, fazer no seu slte tudo o que lnumeras empresas e organlzaes fazem no seu slte. Agora o llmlte e a sua
crlatlvldade.
38
no slte http://www.rocketprezz.com/tutorlal-wordpress/ tem um tutorlal para cada uma das
atlvldades que voc necesslta. Acesse o tutorlal e personallze a aparncla do seu slte, seleclone um tema
adequado, publlque posts (notlclas), fotos, adlclone wldgets, enflm, teste vrlas opes para delxar se slte do
[elto que voc quer.
4 Acessando o site
ronto!!! C seu portal est pronto para ser acessado atraves do llnk
http://etec.cafw.ufsm.br/~xxxxx/portal onde xxxxx e o nome do seu usurlo do slte do etec e da base
de dados.
ode fazer a personallzao com suas cores, seu logo, seu nome de empresa ou entldade.
nosso slte com uma soluo proflsslonal de gerenclamento de conteudo est pronto!!! L sem
nenhuma llnha de cdlgo de programao.
lnstalar, lmplantar e dar manuteno numa soluo de gerenclamento de conteudo para a
lnternet tambem faz parte das atrlbules de um tecnlco em lnformtlca.

Tap Completo PDF

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

Tap Completo PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Curso de lnformtlca para lnternet

1cn|cas Avanadas de rogramao

Você também pode gostar