Ir ao conteúdo
  • Cadastre-se
Oliveira Cristian

PHP Projeto de escola - Chat

Recommended Posts

Boa noite!

 

Eu preciso desenvolver um chat para um trabalho de escola, mas acontece que em aproximadamente 4 semanas (Sim o código que vocês verão foi desenvolvido por mim e mais uma pessoa em 4 semanas) eu não obtive muitos avanços, e o trabalho é para essa sexta!

E aqui eu trago meu desespero por que não consigo resolver alguns simples problemas, poderiam me ajudar?

 

O codigo completo é esse:



<!DOCTYPE html>
<html>
<head>

	<script src="../client/lib/jquery-1.8.2.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../client/themes/default/jquery.phpfreechat.min.css" />
  <script src="../client/jquery.phpfreechat.min.js" type="text/javascript"></script>

<title>Inicio</title>
	<meta charset="utf-8">
</head>
<body>

		<!-- Mensagens -->



			<div class="userandtext">
        		<div id="chat"></div>
			<div id="user">
  <div class="circulo">Nome</div>

			</div>
			</div>


        	<form method="post">



		    <div class="mensagemdiv">

			<input type="text" placeholder="Insira seu texto aqui." name="mensagem" class="textarea" ></input>







		    <input type="submit" class="sendtext" style="background-image: url(sent.png);">

	      	</div>
	      	<div class="user2">

	      		<select id="destino">
				<option value="selecionar">Selecionar</option>
				<option value="mae">Mãe</option>
				<option value="pai">Pai</option>
				<option value="tio">Tio</option>
				<option value="primo">Primo</option>
				<option value="vou"></option>
			</select>

				<select id="tomdevoz">
				<option value="selecionar">Selecionar</option>
				<option value="Gritar">Gritar</option>
				<option value="Falar">Falar</option>
				<option value="Sussurrar">Sussurrar</option>
				<option value="Resmungar">Resmungar</option>
				<option value="Parafrasear">Parafrasear</option>
			</select>

				<select class="emoji">
				<option style="background-image:url(emoji1.png); value="selecionar">Selecionar</option>
				<option style="background-image:url(emoji1.png); value="GRR"></option>
				<option style="background-image:url(emoji1.png); value="GRRR"></option>
				<option style="background-image:url(emoji1.png); value="GRRRR"></option>
				<option style="background-image:url(emoji2.png); value="GRRRRR"></option>
				<option style="background-image:url(emoji1.png); value="GRRRRRR"></option>
			</select>

		</div>





			</form>



						</body>
						</html>

<style>



.user2{
height: auto;
text-align: center;
}

.circulo{
		width:10%;;
		height:auto;
		border-radius:50%;
		border:3px solid #fff;
		z-index:5;
		background:#000;
		position:absolute;
		}

.img{
		z-index:-1;
		width:130px;
        height:130px
        background-position:center;
		opacity:0.5;
		background-color: white;
		left: 19%;
		top: 3%;
}



#destino{
	height: 50px;
	position: absolute;
	text-align: center;
	left: 10px;
}

.userandtext:before,
.userandtext:after {
    content: "";
    display: table;
}
.userandtext:after {
    clear: both;
}
.mensagemdiv:before,
.mensagemdiv:after {
    content: "";
    display: table;
}
.group2:after {
    clear: both;
}

#logopeq{
		width: 35%;
		float: right;
	}

#barradechat {
width: 100%;

}



#tomdevoz{

	height: 50px;
	display: inline-block;
	position: absolute;
}



.emoji {
    text-align: center;
    height: 50px;
    float: right;
    color: white;
    display: inline-block;
    font-size: 16px;

}

.emoji:hover {


    color: white;

    text-align: center;
    text-decoration: none;
    display: inline-block;

    cursor: pointer;
     opacity:1;
}


.sendtext{
	width: 13.5%;
	 background-color: #C4223A;
    border: 2px;
    color: white;
    padding: 15px ;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     border-radius: 2px;


}
.sendtext:hover{
    background-color: #99162a;
    border: 2px;
    color: white;
    padding: 15px ;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
     opacity:1;
      border-radius: 2px;

}

	.textarea{
		border-radius:50px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px 0px 0px 4px;
	background: #cccccc;
	border:1px solid #000000;
	background-size:10px ;
	width: 80%;
  	padding: 15px;
  	margin: 5px 0 22px 0;
  	display: inline-block;
  	overflow: auto;
  	 border-radius: 2px;

	}

	.sendtext, .textarea{
		margin: 0 auto;
	}

.mensagemdiv {
	 background-position: right;
	 background-color:transparent;
	 width: 80%;


}
#chat {
	border: 2px solid grey;
	height: 472px;
	border-radius: 4px;
	width: 80%;
	float: right;
	background-image: url(LOGOHEADCS.png);
	background-repeat: no-repeat;
	background-position: center;
}
#user {
	border: 2px solid grey;
	height: auto;
  	border-radius: 4px;
	width: 19%;
	float: left;
}
.mensagemdiv{
width: 80%;
float: right;
}

#user2{
	width: 19%;
	float: left;
}


</style>

<!-- Esse Style é do Index -->

<style>




	label {
		cursor: pointer;
	}

	input[type="radio"] {
		display: none;
	}

	input[type="file"] {
		display: none;
	}


    body{
    	background-color: black;

    }


input[type=text]:focus{
  background-color: #ddd;
  outline: none;
}

div {

}






</style>

Os problemas são os seguintes:

Chatflix.thumb.png.9201cc21856a967a1e2915ee0adb038b.png

 

Não consigo deixar responsivo a parte com o que era para ser um circulo com o avatar do usuário, mesmo colocando text-align:center na div em que ele esta dentro ele não se move pro meio. Tambem não consigo achar nenhum codigo simples de chat, todos parecem muito complexos, cheio de features e que nem recarrega a pagina para mostrar a mensagem.

 

O usuario e todos os dados vem desta pagina:

<?php
	    if(isset($_POST['nome']) && isset($_POST['senha'])  && isset($_POST['avatar']))
		$nome= $_POST['nome'];
	   $senha= $_POST['senha'];
	   $avatar= $_POST['avatar'];
	   	if(isset($_FILES['fileUpload']))
			{
			date_default_timezone_set("Brazil/East"); //Definindo timezone padrão

			$ext = strtolower(substr($_FILES['fileUpload']['name'],-4)); //Pegando extensão do arquivo
			$new_name = date("Y.m.d-H.i.s") . $ext; //Definindo um novo nome para o arquivo
			$dir = 'uploads/'; //Diretório para uploads

			move_uploaded_file($_FILES['fileUpload']['tmp_name'], $dir.$new_name); //Fazer upload do arquivo
			echo $_FILES['fileUpload']['tmp_name'];
			echo '<img src= '.$dir.$new_name.'>';

			//

			//
			}
			else{
				$avatar = $_POST['avatar'];
			}
				$mysqli = new mysqli("localhost", "root", "usbw", "db_login");

		if(mysqli_connect_errno()){
			printf("Connect failed: %s\n", mysqli_connect_error());
			exit();
		}
       $inserir = "insert into tb_usuario values (null,'".$nome."','".$senha."','".$avatar."')";
		if(!$mysqli->query($inserir)) {
			printf("Errormessage: %s\n", $mysqli->error);
		}

		$mysqli->close();
	

?>

<!DOCTYPE html>
<html>
<head>
<title>Inicio</title>
	<meta charset="utf-8">
</head>
<body>

		<center>
			<div class="tudo">

		<form method="post" enctype="multipart/form-data">
		<center><img src="LOGOHEADCS.png" id="logo"></center>
		    
		 
		<input class="user" type="text" name="nome" placeholder="Digite seu Login">
		</p>
		<p> 

			<input class="senha" type="password" name="senha" placeholder="Digite sua Senha">
		</p>
		   
		   <br>
					<div>

						<label for="user1"> <input type="radio" name="avatar" value="user1" id="user1" required >
						<img src="user1.png" id="foto1" input type="radio" >
						</input> </label>

						<label for="user2"> <input type="radio" name="avatar" value="user2" id="user2" required >
						<img src="user2.png" name="foto2" id="foto2">
						</input> </label>

						<label for="fileUp"> <input type="radio" name="avatar" value="userperso" id="userperso" required >
						<img src="icon4.png" name="foto5" id="foto5">
						</input> </label>

						<label for="user3"> <input type="radio" name="avatar" value="user3" id="user3" required >
						<img src="user3.png" name="foto3" id="foto3">
						</input> </label>

						<label for="user4"> <input type="radio" name="avatar" value="user4" id="user4" required >
						<img src="user4.png" name="foto4" id="foto4">
						</input> </label>

					<br>

						<input type="file" name="fileUpload" id="fileUp">
						<br>
						<br>
						<input type="submit" value="Login" class="botaosub">
                         </br>
						<br><center>
						</form>

			</div>
			</center>
						</body>
						</html>

<style>

	.tudo{
		width: 72%;
	}
	
		#logo{
	width: 70%

	}

		.user , .senha {
	border-radius:50px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	background: #cccccc;
	border:1px solid #000000;
	background-size:10px ;
	width: 95%;
  	padding: 15px;
  	margin: 5px 0 22px 0;
  	display: inline-block;
  	overflow: auto;

}

    body{
    	background-color: black;
    }
	legend{
		margin-left:70%;
		color:black;
	}
	fieldset{
		position:center;
		color: white;
		width:100%;
		margin-left:0px;
		border-width:1px;
		opacity: 0.9;
		text-align: center;

	}
	input[type=text]{
	border-radius:6px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	box-shadow: 1px 1px 2px #333333;
	-moz-box-shadow: 1px 1px 2px #333333;
	-webkit-box-shadow: 1px 1px 2px #333333;
	background: #cccccc;
	border:1px solid #000000;
	width:150px
	background-size:10px ;
}
	input[type="radio"] {
		display: none;
	}

	input[type="file"] {
		display: none;
	}
#foto1, #foto2, #foto3, #foto4, #foto5 {
	width: 130px;
	height: 130px;

}
#foto1:hover, #foto2:hover, #foto3:hover, #foto4:hover{
	width: 124px;
	height: 124px;
border: 5px solid white;
}
#foto1:active, #foto2:active, #foto3:active, #foto4:active, #foto5:active{
	width: 124px;
	height: 124px;
border: 5px solid grey;
}

.botaosub {
    background-color: #C4223A;
    border: 2px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
     border-radius: 16px;
     width: 95%;
}

.botaosub:hover {
    background-color: #99162a;
    border: 2px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
     opacity:1;
     border-radius: 16px;
}

.botaosub:active {
    background-color: #600d1a;
    }


.button {
    background-color: #C4223A;
    border: 2px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

</style>

Que recentemente decidiu não funcionar mais .-.

 

Esse é o banco.

db_login.rar

 

 

Então, gostaria de fazer um pedido de socorro, acho que em algo simples, criar um usuario, nome, senha, avatar, e enviar esse avatar para pagina de mensagem onde eu posso enviar mensagens. Desde ja agradeço a todos que pensaram em ajudar e é isso.

 

(Vou deixar a pasta do chat só por precaução)

chatflixV8.rar

(Obs: Tentei usar o phpfreechat, mas meu professor não aceitou)

(Obs2: Eu não estou pedindo para que terminem o codigo, acho que seria mais ajudar a terminar)

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
8 horas atrás, fredkissfree disse:

O melhor para arrumar esses CSS seria tu hospedar, pode ser gratuito como o https://br.000webhost.com/, ai manda o link aqui que eu ajudo também.

Pronto, esta hospedado

 

https://chatflix.000webhostapp.com/

 

Só estou colocando as imagens. Desculpa a demora pra responder, é que eu só volto as 18:00 pra casa.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×