Baixe o app para aproveitar ainda mais
Prévia do material em texto
SISTEMA DE ENSINO PRESENCIAL CONECTADO CURSO SUPERIOR DE TECNOLOGIA EM ANÁLISE E DESENVOLVIMENTO DE SISTEMAS PRODUÇÃO TEXTUAL INTERDISCIPLINAR EM GRUPO FUNDAMENTOS DA TECNOLOGIA DA INFORMAÇÃO ALAN RIBEIRO BRUNO VIEIRA DOS ANJOS SENA HARLLEY LEONARDO GARCIA SATHLER MARCUS FILIPE MARTINS DA SILVA OSVALDO MARCIO PINHEIRO DE JESUS THIAGO CARDOSO DE ALMEIDA Belo Horizonte 2014 PRODUÇÃO TEXTUAL INTERDISCIPLINAR EM GRUPO FUNDAMENTOS DA TECNOLOGIA DA INFORMAÇÃO Trabalho apresentado ao Curso Análise e Desenvolvimento de Sistemas da UNOPAR – Universidade Norte do Paraná – conteúdo programático do terceiro semestre – Portfólio em Grupo Professores: Roberto Y. Nishimura, Anderson E.M. Gonçalves, Márcio Roberto Chiaveli, Veronice de Freitas, André Luis Ribeiro e Vicente Henrique Salomão Lucarelli. ALAN RIBEIRO BRUNO VIEIRA DOS ANJOS SENA HARLLEY LEONARDO GARCIA SATHLER MARCUS FILIPE MARTINS DA SILVA OSVALDO MARCIO PINHEIRO DE JESUS THIAGO CARDOSO DE ALMEIDA Belo Horizonte 2014 SUMÁRIO 1 INTRODUÇÃO .....................................................................................................4 2 OBJETIVO ...............................................................................................................5 3 DESENVOLVIMENTO .............................................................................................6 3.1 Diagrama caso de uso Telecine Mozer.............................................................6 3.2 Diagrama lógico do banco de dados.................................................................7 3.3 Script de criação do banco de dados MySQL...................................................7 3.4 Interface ............................................................................................................9 3.5 Código Fonte....................................................................................................11 4 CONCLUSÃO ....................................................................................................... 23 REFERÊNCIAS ....................................................................................................... 24 4 1 - INTRODUÇÃO Por definição, sistemas web, são aplicações projetadas para utilização através de browsers ( navegadores) em um disposito\rede local ou na própria rede mundial de computadores(internet). Estas informações são processadas em um servidor web e retornadas de acordo com regras de negócio nele contido. Com a crescente evolução tecnológica em diferentes ramos e o aumento da demanda por disponibilidade de informação, produtos e serviços de forma prática, os sistemas web de vendas ou e-commerce, estão em ritmo acelerado de expansão. Atualmente é possível encontrar e adquirir no comércio virtual, todos os tipos de bens e serviços, pertencentes aos mais variados segmentos econômicos. Neste cenário, percebemos o quanto é difícil encontrarmos operando em lojas físicas, as quase extintas, vídeo locadoras. 5 2 - OBJETIVO Apresentaremos de forma simples neste trabalho, um sistema web, desenvolvido através das ferramentas PHP, Apache, MySQL, CSS, HTML, para atender o mercado de venda de filmes on-line. 6 3 - DESENVOLVIMENTO Cenário proposto: TELECINE MOZER é um sistema web que possibilita a compra de filmes, ou seja, direito de assistir uma única vez. Porém, o proprietário desta empresa necessita divulgar esta nova modalidade através de um site. Deverá ser apresentado um sistema que contenha um serviço para cadastrar e listar na tela os filmes cadastrados. Quando o usuário clicar sobre o nome do filme, automaticamente ele deverá ser exibido. Faça o Diagrama de Caso da Compra do Filme. Faça o Diagrama de Banco de Dados, apresentando o MRN em sua 3° Forma Normal. 3.1 – Diagrama de caso de uso telecine mozer Fonte: Elaborado com a ferramenta case astah-community-6.9.0 7 3.2 – Diagrama lógico banco de dados Fonte: Elaborado com a ferramenta case Brmodelo.exe 3.3 – Script de criação do banco de dados(mysql) MYSQL>CREATE DATABASE TELECINE_MOZER; MYSQL> USE TELECINE_MOZER MYSQL> CREATE TABLE USUARIOS (ID_USUARIO INT PRIMARY KEY AUTO_INCREMENT, LOGIN VARCHAR(45) NOT NULL UNIQUE, SENHA VARCHAR(45) NOT NULL, NOME VARCHAR(45) NOT NULL, SEXO ENUM('F','M') NOT NULL, CPF VARCHAR(11) NOT NULL UNIQUE, DATA_NASC DATE NOT NULL, EMAIL VARCHAR(45) NOT NULL, 8 NIVEL TINYINT(1) DEFAULT 2); MYSQL> CREATE TABLE FILMES (ID_FILME INT PRIMARY KEY AUTO_INCREMENT, TITULO VARCHAR(45) NOT NULL, DIRECAO VARCHAR(45), ELENCO VARCHAR(100), GENERO VARCHAR(10) NOT NULL, DURACAO INT(3), ANO YEAR(4) NOT NULL, SINOPSE TEXT, VALOR FLOAT, IMAGEM VARCHAR(45), LINK VARCHAR(100)); MYSQL> CREATE TABLE FILMES_COMPRADOS (ID_COMPRA INT PRIMARY KEY AUTO_INCREMENT, ID_USUARIO INT NOT NULL, ID_FILME INT NOT NULL, DATA DATETIME NOT NULL, FOREIGN KEY(ID_USUARIO) REFERENCES USUARIOS(ID_USUARIO), FOREIGN KEY (ID_FILME) REFERENCES FILMES(ID_FILME)); MYSQL> INSERT INTO USUARIOS VALUES('', 'ADMIN', 'ADMIN', 'ADMINISTRADOR DO SISTEMA', 'M', '12345678912', '1980-01-01', 'ADMIN@DOMAIN.COM', 1); 9 3.4 – Interface Tela de acesso ao sistema Tela de cadastro de login 10 Tela de cadastro de filme Tela de listagem de filmes 11 3.5- Código fonte cadastro_login.html: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CADASTRO DE LOGIN</title> <style type="text/css"> .style1 { color: #FF0000; font-size: x-small; } .style3 {color: #0000FF; font-size: x-small; } </style> <script type="text/javascript"> function mascaraData(campoData){ var data = campoData.value; if (data.length == 2){ data = data + '/'; document.forms[0].data.value = data; return true; } if (data.length == 5){ data = data + '/'; document.forms[0].data.value = data; return true; } } function validaCampo() { if(document.cadastro.nome.value=="") { alert("O Campo nome é obrigatório!"); return false; } else if(document.cadastro.email.value=="") { alert("O Campo email é obrigatório!"); return false; 12 } else if(document.cadastro.cpf.value=="") { alert("O Campo cpf é obrigatório!"); return false; } else if(document.cadastro.data.value=="") { alert("O Campo Data de Nascimento é obrigatório!"); return false; } else if(document.cadastro.login.value=="") { alert("O Campo Login é obrigatório!"); return false; } else if(document.cadastro.senha.value=="") { alert("Digite uma senha!"); return false; } else return true; } <!-- Fim do JavaScript que validará os campos obrigatórios! --> </script> </head> <body background="imagens/cinema.jpg"> <h3> Cadastre seus Dados para acesso ao Telecine Mozer<h3/> <form id="cadastro"name="cadastro" method="post" action="cadastro_login.php" onsubmit="return validaCampo(); return false;"> <table width="625" border="0"/> <tr> <td width="69">Nome:</td> <td width="546"><input name="nome" type="text" id="nome" size="50" maxlength="45" /> <span class="style1">*</span></td> </tr> <tr> <td>Email:</td> <td><input name="email" type="text" id="email" size="50" maxlength="45" /> <span class="style1">*</span></td> </tr> 13 <tr> <td>Sexo:</td> <td><input name="sexo" type="radio" value="M" checked="checked" /> M <input name="sexo" type="radio" value="F" /> F <span class="style1">*</span> </td> </tr> <tr> <td>CPF:</td> <td><input name="cpf" type="text" id="cpf" maxlength="11"/> <span class="style3">* Apenas números</span> </td> </tr> <tr> <td>Data Nascimento:</td> <td><input name="data" type="text" id="data" size="10" OnKeyUp="mascaraData(this);" maxlength="10" /> <span class="style1">*</span></td> </tr> <tr> <td>Login:</td> <td><input name="login" type="text" id="login" maxlength="20" /> <span class="style1">*</span></td> </tr> <tr> <td>Senha:</td> <td><input name="senha" type="password" id="senha" maxlength="45" /> <span class="style1">*</span></td> </tr> <tr> <td colspan="2"><input name="news" type="checkbox" id="news" value="ATIVO" checked="checked" /> Desejo receber novidades e informações sobre o conteúdo deste site. </td> </tr> <tr> <td colspan="2"><p> <input name="cadastrar" type="submit" id="cadastrar" value="Concluir meu Cadastro!" /> <input name="limpar" type="reset" id="limpar" value="Limpar Campos preenchidos!" /> <span class="style1">* Campos obrigatórios! </span></p> <p> </p></td> </tr> </table> </form> </body> </html> 14 cadastro_login.php: <?php // RECEBENDO OS DADOS PREENCHIDOS DO FORMULÁRIO ! $nome= $_POST ["nome"]; $email= $_POST ["email"]; $sexo= $_POST ["sexo"]; $cpf= $_POST ["cpf"]; $data= $_POST ["data"]; $login= $_POST ["login"]; $senha= $_POST ["senha"]; include "config/configuracoes.php"; include "conexao/conecta.php"; // -------------Query que realiza a inserção dos dados no banco de dados na tabela indicada acima ------------------- $query = "INSERT INTO usuarios(id_usuario, login, senha, nome, sexo, cpf, data_nasc, email, nivel) VALUES ('', '$login', '$senha', '$nome', '$sexo', '$cpf', '$data', '$email', 2)"; $resultado = mysql_query($query) or die (mysql_error()); echo "<BR>"; echo $resultado; echo " Cadastro realizado com sucesso!"; //mensagem que é escrita quando os dados são inseridos normalmente. echo "<BR>"; ?> <a href="listar_filme.php">Acessar Filmes</a> 15 cadastro_filme.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CADASTRO DE FILMES</title> <style type="text/css"> .style1 { color: #FF0000; font-size: medium; } </style> <script type="text/javascript"> function validaCampo() { if(document.cadastro.titulo.value=="") { alert("O Campo Título é obrigatório!"); return false; } else if(document.cadastro.genero.value=="") { alert("O Campo Gênero é obrigatório!"); return false; } else if(document.cadastro.ano.value=="") { alert("O Campo Ano é obrigatório!"); return false; } if(document.cadastro.valor.value=="") { alert("O Campo Valor é obrigatório!"); return false; } else return true; } <!-- Fim do JavaScript que validará os campos obrigatórios! --> </script> 16 </head> <body background="imagens/cinema.jpg"> <h3> Cadastre os Dados do Filme<h3/> <form id="cadastro" name="cadastro" method="post" enctype="multipart/form-data" action="cadastro_filme.php" onsubmit="return validaCampo(); return false;"> <table width="625" border="0"/> <tr> <td width="69">Título:</td> <td width="546"><input name="titulo" type="text" id="titulo" size="50" maxlength="45" /> <span class="style1">*</span></td> </tr> <tr> <td>Direção:</td> <td><input name="direcao" type="text" id="direcao" size="50" maxlength="45" /> </tr> <tr> <td>Elenco:</td> <td><input name="elenco" type="text" id="elenco" size="50" maxlength="100"></textarea> </tr> <tr> <td>Gênero:</td> <td><select name="genero" id="genero"> <option value="">Selecione...</option> <option value="AÇÃO">AÇÃO</option> <option value="AVENTURA">AVENTURA</option> <option value="COMÉDIA">COMÉDIA</option> <option value="DRAMA">DRAMA</option> <option value="DOCUMENTÁRIO">DOCUMENTÁRIO</option> <option value="FICÇÃO">FICÇÃO</option> <option value="INFANTIL">INFANTIL</option> <option value="ROMANCE">ROMANCE</option> <option value="SUSPENSE">SUSPENSE</option> <option value="TERROR">TERROR</option> </select><span class="style1">*</span></td> </tr> <tr> <td>Duração:</td> <td><input name="duracao" type="text" id="duracao" size="5" maxlength="3"/> <span>minutos</span> </td> </tr> <tr> <td>Ano:</td> <td><input name="ano" type="text" id="ano" size="5" maxlength="4" /><span class="style1">*</span></td> </tr> <tr> 17 <td>Sinopse:</td> <td><textarea name="sinopse" type="text" id="sinopse" rows="5" cols="50"></textarea> </tr> <tr> <td>Valor:</td> <td><input name="valor" type="text" id="valor" size="5" maxlength="5" /> <span>R$</span>*</td> </tr> <tr> <td>Selecione Imagem:</td> <td><label for="file"></label> <input type="file" name="file" id="file" /></td> </tr> <tr> <td>Link de acesso:</td> <td><input name="link" type="text" id="link" size="50" maxlength="100" /> </tr> <tr> <td colspan="2"><input name="news" type="checkbox" id="news" value="ATIVO" checked="checked" /> Desejo receber novidades e informações sobre o conteúdo deste site. </td> </tr> <tr> <td colspan="2"><p> <input name="cadastrar" type="submit" id="cadastrar" value="Concluir Cadastro" /> <input name="limpar" type="reset" id="limpar" value="Limpar Campos preenchidos" /> <span class="style1">* Campos obrigatórios! </span></p> <p> </p></td> </tr> </table> </form> </body> </html> 18 cadastro_filme.php: <?php // http://www.w3schools.com/PHP/php_file_upload.asp if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/pjpeg")) && ($_FILES["file"]["size"] < 20000)) { if ($_FILES["file"]["error"] > 0) { echo "Erro: " . $_FILES["file"]["error"] . "<br />"; } else { //echo "Upload: " . $_FILES["file"]["name"] . "<br />"; //echo "Type: " . $_FILES["file"]["type"] . "<br />"; //echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />"; //echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />"; if (file_exists("upload/" . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " já existe. "; } else { move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $_FILES["file"]["name"]);//echo "Imagem salva em: " . "upload/" . $_FILES["file"]["name"]; } } } else { echo "Arquivo inválido"; } // ------------- RECEBENDO OS DADOS PREENCHIDOS DO FORMULÁRIO --------- ------------ $titulo= $_POST ["titulo"]; $direcao= $_POST ["direcao"]; $elenco= $_POST ["elenco"]; $genero= $_POST ["genero"]; $duracao= $_POST ["duracao"]; $ano= $_POST ["ano"]; $sinopse= $_POST ["sinopse"]; $valor= $_POST ["valor"]; $file = "upload/" . $_FILES["file"]["name"]; 19 $link = $_POST ["link"]; include "config/configuracoes.php"; include "conexao/conecta.php"; // -------------Query que realiza a inserção dos dados no banco de dados na tabela indicada acima ------------------- $query = "INSERT INTO filmes(id_filme, titulo, direcao, elenco, genero, duracao, ano, sinopse, valor, imagem, link) VALUES ('', '$titulo', '$direcao', '$elenco', '$genero', '$duracao', '$ano', '$sinopse', '$valor', '$file', '$link')"; $resultado = mysql_query($query) or die (mysql_error()); echo "<BR>"; echo $resultado; echo " Cadastro realizado com sucesso!"; //mensagem que é escrita quando os dados são inseridos normalmente. echo "<BR>"; ?> <a href="cadastro_filme.html">Novo cadastro</a> 20 listar_filme.php: <html> <head> <title> TELECINE MOZER</title> <link rel="stylesheet" type="text/css" href="css/geral.css" /> </head> <body> <?php //------------------- CONEXÃO --------------- include "config/configuracoes.php"; include "conexao/conecta.php"; // --------------- SELEÇÃO DOS REGISTROS (CRITÉRIO PESQUISA) ------------- $sql = "SELECT * FROM filmes"; $resultado = mysql_query($sql) or die (mysql_error()); // --------------- APRESENTANDO OS DADOS ------------- echo '<H2 align="center"> Listagem de Filmes (Clique na imagem para assistir o filme desejado!!!) </H2>'; echo '<table border = 1 bordercolor="black">'; echo '<TR>'; echo '<TH> Código </TH>'; echo '<TH> Título </TH>'; echo '<TH> Direção </TH>'; echo '<TH> Elenco </TH>'; echo '<TH> Gênero </TH>'; echo '<TH> Duração </TH>'; echo '<TH> Ano </TH>'; echo '<TH> Sinopse </TH>'; echo '<TH> Valor </TH>'; echo '<TH> Link </TH>'; echo '</TR>'; $nCor = 0; while ($linha = mysql_fetch_array($resultado)) { if ($nCor == 0) { $nCor = 1; $cCor = "zebraA"; 21 } else { $nCor = 0; $cCor = "zebraB"; } echo "<tr BGCOLOR class=\"$cCor\" >"; echo '<td>'; echo $linha["id_filme"]; echo '</td>'; echo '<td>'; echo $linha["titulo"]; echo '</td>'; echo '<td>'; echo $linha["direcao"]; echo '</td>'; echo '<td>'; echo $linha["elenco"]; echo '</td>'; echo '<td>'; echo $linha["genero"]; echo '</td>'; echo '<td>'; echo $linha["duracao"] . "min"; echo '</td>'; echo '<td>'; echo $linha["ano"]; echo '</td>'; echo '<td>'; echo $linha["sinopse"]; echo '</td>'; echo '<td>'; echo $linha["valor"] . " R$"; echo '</td>'; echo '<td>'; 22 //echo "<IMG SRC ='upload/001.jpg'>"; // teste 01 $img = $linha["imagem"]; $link = $linha["link"]; //echo $img; echo "<a href=\"$link\"><IMG SRC =\"$img\"/></a>"; //echo "<img src='imagens/".$img." border='0' width='189' height='141'/>"; echo '</td>'; echo '</tr>'; } echo '</table>'; mysql_free_result($resultado); mysql_close($conexao); ?> <br> <br> </body> </html> 23 4 – CONCLUSÃO O desenvolvimento deste trabalho nos ajudou bastante em um melhor entendimento das ferramentas utilizadas para a programação web. Outro aspecto relevante é que as aplicações web nos oferece grande compatibilidade entre dispositivos de tipos e marcas diferentes, uma vez que um browser(navegador) é o pré-requisito para que o sistema rode. 24 REFERÊNCIAS BIBLIOGRÁFICAS CARROMEU, Camilo. Linha de produtos de software no processo de geração de sistemas web de apoio a gestão de fomento de projetos. 2007. 100 f. Dissertação (Mestrado em Ciência da Computação) – Departamento de Computação e Estatística, Centro de Ciências Exatas e Tecnologia, Universidade Federal de mato Grosso do Sul, Mato Grosso do Sul, 2007. Disponível em: <http://200.129.202.51:8080/jspui/bitstream/123456789/449/1/Camilo%20Carro meu.pdf>. Acesso em: out. 2014. DEGAN, Joyce Otsuka Cortes. “Integração de dados corporativos: uma proposta de arquitetura baseada em serviços de dados”. 2005. 118 f. Dissertação (Mestrado Profissional em Computação) – Instituto de Computação, Universidade Estadual de Campianas, Campinas, 2005. Disponível em: <http://www.bibliotecadigital.unicamp.br/document/?code=vtls000378466&fd=y >. Acesso em: out. 2014. ELMASRI, Ramez; NAVATHE, Shamkant B. Sistemas de bancos de dados. 4ª Edição. São Paulo: Addison Wesley, 2005.
Compartilhar