PHP Projeto de escola - Chat

Oliveira Cristian · 20 de setembro de 2018

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">Vó</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:

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)

fredkissfree · 20 de setembro de 2018

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.

Oliveira Cristian · 20 de setembro de 2018

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.