ici, on était libre de faire le site que l'on voulait tant qu'il respectait la consigne d'intégrer la ville de Nice.
ce projet a été fait à deux. dans la vidéo dédiée au professeur initialement, je suis la deuxième personne qui parle. à nouveau, ma participation au code
est accessible via les différents bouttons. j'ai géré toute la partie backend ainsi que le javascript. on avait une deadline serrée, j'ai donc dû réaliser ce projet en environ 4 jours tout en apprenant le PHP au fur et à mesure,
ce qui explique que le code ne soit pas entièrement propre, optimisé, ou qu'il y ait des failles de sécurité. effectivement, au moment de réaliser le projet je ne connaissais rien de la pénétration de site web.
le but du projet était simplement de valider le fait que l'on connaisse les différents langages utilisés.
>index
>load
>login
>upload
>script_login
>script
>video
index.php
<?php
session_start();
$connected = 0;
if (isset($_SESSION["username"])){
echo $_SESSION["username"];
$connected = 1;
}
if (isset($_POST["logout"])){ session_unset(); session_destroy();
$connected = 0;
}
function searchUser($users_list) {
$my_string = "";
foreach ($users_list as $user)
{
if ($user[0] != "pseudo") {
$my_string .= "<li class='user_search_profil' value='$user[0]'>";
$my_string .= "<a href='#'><img class='user_search_profil_pfp' src='img/pfp/$user[2]'>";
$my_string .= "$user[0]</a></li>";
}
}
// <li id="menu_list_button_home"><a href="../index.php"><img src="../img/icon_map.png" class="icon">Accueil</a></li>
return $my_string;
}
$path_csv_file = 'data/TABLE_USER.csv';
$file = fopen($path_csv_file, 'r');
$profils_list = [];
$index_user = 0;
$i = 0;
while (($line = fgetcsv($file, 0, ';')) !== false) {
$profils_list[$i] = $line;
$i++;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accueil</title>
<link rel="stylesheet" href="css/styleHome.css" type="text/css">
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDhuU0KUB-DoAzvGdVxY7nTLCVOZMePtx8&callback=initMap&libraries=maps&loading=async"> </script>
</head>
<body>
<div style="display:flex; width:100%;">
<div style="width: 20%;margin-top: 1%;">
<header>
<div id="burger_div">
<div class="menu-burger">
</div>
<img src="img/logo1.png" alt="" id="logo">
<h1 id="titre_site">Spot.me</h1>
</div>
</header>
<nav>
<div id="menu_div">
<ul id="menu_list">
<li id="menu_list_button_home" style="background-color: #313131;"><a href="#"><img src="img/icon_map.png" class="icon">Accueil</a></li>
<form method="post" id="logout" ><input type="submit" name="logout" value="Se déconnecter"></form>
<!--
<div id="menu_search_user" style="color: white;width: 100%;">
<input type="text" placeholder="Entrer un pseudo" id="menu_search_user_input">
<ul style="font-weight: lighter;" id="menu_search_user_list">
<?php echo searchUser($profils_list)?>
</ul>
</div>
-->
</ul>
</div>
</nav>
</div>
<div style="display:flex;flex-direction:column; width: 100%; align-items: center; height: 100%">
<p style="color: white; text-align:center">Cliquer sur un lieu pour poster</p>
<p style="color: white;">Règle : <ul style="color:white">
<li>1 marqueur sauvegardé par utilisateur connecté</li>
<li>Etre connecté pour placer une image</li>
</ul></p>
<section id="map_section">
<div id="map"></div>
</section>
<form action="upload.php" id="form_popup" method="post" enctype="multipart/form-data">
<div id="popup" class="popup">
<div class="popup-content">
<span class="close" id="closePopup" onclick="closePopup()">×</span>
<h2>Nouveau Post</h2>
<label for="popup_file" class="fileInputLabel">Choisir un fichier</label>
<input name="markerimg" type="file" id="popup_file" accept="image/*" onchange="chargeImage()" required>
<div id="imagePreview"></div>
<input type="text" id="popup_titre" name="popup_titre" placeholder="Titre" required>
<textarea id="popup_desc" name="popup_desc" rows="4" cols="50" placeholder="Commentaire..." required></textarea>
<button id="postButton" type="submit">Poster</button>
</div>
</div>
</form>
</div>
<div id="connected_profil">
<a href='#'><img id="PPCO" class='user_search_profil_pfp' style="margin: 7px" src=<?php if (!isset($_SESSION["urlimg"])) {echo "img/icon_profil.png";} else {echo $_SESSION["urlimg"];} ?>><p id="NOMCO"><?php if ($connected != 1) {echo "Se connecter";} else {echo $_SESSION["username"];} ?></p></a>
</div>
<!--####################################-->
<div id="disconnected_profil" onclick="loginPopup()">
<button><img src="img/icon_profil.png" style="width:35px; margin-right: 20px;">Se connecter</button>
</div>
<!--####################################-->
<!--####################################-->
<div id="loginPopup">
<div style="width: 250px;position: relative;left: 50%;top:50%;background-color: #313131;display: flex;height: 400px;flex-direction: column;align-items: center;justify-content: center;border-radius: 15px; transform: translate(-50%, -50%);">
<form method="post" id="login" name="login" action="login.php" enctype="multipart/form-data">
<p>Nom d'utilisateur: <br><input type="text" id="username" name="username" required></p>
<p>Mot de passe: <br><input type="password" name="password" id="password" required></p>
<p>Photo de profil: <input type="file" style="width:150px"id="pfp" name="pfp" accept="image/*" required ></p>
<input type="submit" value="Se connecter" style="cursor:pointer">
</form>
</div>
</div>
<!--####################################-->
</div>
<div id="connexion_status" style="display: flex"><?php echo $connected?></div>
</body>
<script type="text/javascript" src="scripts/script.js"></script>
</html>
login.php
<?php
session_start();
$DB = "db/";
$PFP = $DB."pfp/";
if (!is_dir($PFP)){
mkdir($PFP,0777,true);
}
if ($_SERVER['REQUEST_METHOD'] == "POST"){
$username = filter_input(INPUT_POST, "username", FILTER_SANITIZE_SPECIAL_CHARS);
$password = filter_input(INPUT_POST,"password", FILTER_SANITIZE_SPECIAL_CHARS);
if (is_file($DB."db.csv")){
$csv = fopen($DB."db.csv", "r");
$exist = array();
while (($ligne = fgetcsv($csv)) !== false){
$exist[$ligne[0]] = [$ligne[1],$ligne[2]];
}
fclose($csv);
if (isset($exist[$username])){
if (password_verify($password,$exist[$username][0]) ){
$_SESSION["username"] = $username;
$_SESSION["urlimg"] = $exist[$username][1];
echo json_encode(["username"=>$username, "urlimg"=>$exist[$username][1]]);
exit();
}
else {
echo json_encode(["err"=>1]);
exit();
}
}
}
//inutile normalement parce qu'on a mis "required" dans les input en question
if (isset($_FILES["pfp"]) && $_FILES["pfp"]["error"] === UPLOAD_ERR_OK){
//var_dump($_FILES["pfp"]);
$extension = pathinfo(basename($_FILES["pfp"]["name"]), PATHINFO_EXTENSION);
$new_file_name = $username.".".$extension;
move_uploaded_file($_FILES["pfp"]["tmp_name"],$PFP.$new_file_name);
$urlimg = 'http://'.$_SERVER["HTTP_HOST"].dirname($_SERVER["PHP_SELF"]).'/'.$PFP.$new_file_name;
$_SESSION["urlimg"] = $urlimg;
$_SESSION["username"] = $username;
$password = password_hash($password, PASSWORD_DEFAULT); //pour plus de sécurité
//$_SESSION["password"] = $password;
$csv = fopen($DB."db.csv","a");
fputcsv($csv,array($username,$password,$urlimg));
fclose($csv);
$data = array("username"=>$username,"urlimg"=>$urlimg);
//header('Content-Type: application/json');
echo json_encode($data);
//header("Location: index.php");
exit();
}
//header("Location: index.php"); //pas sûr
$_SESSION["username"] = $username;
$_SESSION["urlimg"] = $urlimg;
exit();
}
?>
load.php
<?php
$main_dir = "markers";
$files = scandir($main_dir);
foreach ($files as $filescsv){
$dir[] = $filescsv;
}
$data=array();
$i=0;
foreach ( $dir as $filecsv){
if ($filecsv != '..' && $filecsv != "."){
$filecsv = $main_dir."/".$filecsv."/markers.csv";
if (pathinfo($filecsv, PATHINFO_EXTENSION) == "csv") {
$csv = fopen($filecsv,'r');
while (($ligne=fgetcsv($csv)) !== false){
$fileData = [
"username"=>$ligne[0],
'position'=>$ligne[1],
'adresse'=>$ligne[2],
'titre'=>$ligne[3],
'description'=>$ligne[4],
'urlimg'=>$ligne[5]
];
}
$data[$i++] = $fileData;
fclose($csv);
}
}
}
$temp = [["test"=>"1"],["test2"=>"2","test3"=>"3"]];
$temp = [["test"=>"5"],["temp"=>"6","test4"=>"7"]];
echo json_encode($data);
exit();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p> DATA :</p>
</body>
</html>
upload.php
<?php
session_start();
if (!isset($_SESSION["username"])) {
header("Location: index.php");
exit();
}
$username = $_SESSION["username"]; //c'est IMPOSSIBLE qu'on arrive ici sans username normalement...
$temp = 0;
$upload_dir = "markers/".$username."/";
if (!is_dir($upload_dir)) {
mkdir($upload_dir,0777, true);
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST["popup_titre"])){
$titre = $_POST["popup_titre"];
}
if (isset($_POST["popup_desc"])){
$description = $_POST["popup_desc"];
}
if (isset($_POST["position"])){
$position = $_POST["position"];
}
if (isset($_POST["adresse"])){
$adresse = $_POST["adresse"];
}
if (isset($_FILES["markerimg"]) && $_FILES["markerimg"]["error"] === UPLOAD_ERR_OK ){ // https://www.php.net/manual/fr/features.file-upload.post-method.php
//$extension = pathinfo($_FILES["markerimg"]["name"],PATHINFO_EXTENSION);
$new_file_name = $_FILES["markerimg"]["tmp_name"];
move_uploaded_file($_FILES["markerimg"]["tmp_name"],"./".$upload_dir.basename($_FILES["markerimg"]["name"]));
$urlimg = 'http://'.$_SERVER["HTTP_HOST"].dirname($_SERVER["PHP_SELF"])."/".$upload_dir.basename($_FILES["markerimg"]["name"]) ;
//$urlimg = urlencode($urlimg);
$data = array("urlimg"=>$urlimg,"username"=>$username);
//PK CA RENVOIE DE L'HTML???? WEHSNHJ
//on echo pas vraiment, c'est pour le recevoir avec le xhr.responseText
$csv = fopen($upload_dir."/markers.csv",'a');
fputcsv($csv, array('username'=>$username,'position'=>$position,'adresse'=>$adresse,'titre'=>$titre,'description'=>$description,'urlimg'=>$urlimg));
fclose($csv);
header('Content-Type: application/json');
echo json_encode($data);
exit();
//pas sûr
}
}
else{
//header("Location: index.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
script_login.js
window.onload = ()=>{document.getElementById("login").addEventListener("submit", (ev)=>{
ev.preventDefault();
xhr = new XMLHttpRequest();
xhr.open('POST',"login.php",true);
form_login = new FormData();
username = document.getElementById("username").value;
password = document.getElementById("password").value;
pfp = document.getElementById("pfp").files[0];
form_login.append("username",username);
form_login.append("password",password);
form_login.append("pfp",pfp);
xhr.send(form_login);
console.log("login sent");
xhr.onload = ()=>{
if (xhr.status===200){
console.log(xhr.responseText);console.log(xhr.responseText);
response_login = JSON.parse(xhr.responseText);
urlpfp = response_login.urlimg;
console.log("NOMCO element:", document.getElementById("NOMCO"));
document.getElementById("PPCO").src = urlpfp;
document.getElementById("NOMCO").innerHTML = response_login.username;
console.log("NOMCO element:", document.getElementById("PPCO"));
if (response_login.err == "1"){
document.getElementById("login").innerHTML+="<p style='color:red;'>MAUVAIS MOT DE PASSE</p>";
}
}
}
});
}
script.js
function initMap(){
//const { Map } = google.maps.importLibrary("maps");
MAP = new google.maps.Map(document.getElementById("map"), {
center : {lat: 43.716666329879835, lng: 7.267956493268457},
zoom: 13
})
geocoder = new google.maps.Geocoder();
m = new google.maps.Marker({position: {lat: 43.716666329879835, lng: 7.267956493268457}, map:MAP});
infoWindow = new google.maps.InfoWindow({
content:'<p>test</p>',
ariaLabel:'@'
});
}
function addMarker(LatLng, titre,username){
new google.maps.Marker({position: LatLng, map: MAP, draggable: false, title: 'by'+username, animation: google.maps.Animation.DROP}) ;
}
function createMarker(){
}
let temp = "0";
function loadMarkers(){
xhr = new XMLHttpRequest();
xhr.open('POST',"load.php", true);
xhr.onload = ()=>{
if (xhr.status===200) { // https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP
console.log(xhr.responseText);
response = JSON.parse(xhr.responseText);
//response.forEach((i)=>{console.log(i);})
markers = {};
infos = {};
response.forEach(function (i){
urlimg = i.urlimg;
console.log(urlimg);
username = i.username;
titre = i.titre;
description = i.description;
position = i.position.split(",");
var markerKey = 'marker_' + Math.random();
var infosKeys = 'infos_' + Math.random();
var position1 = position[0].trim().slice(1);
var position2 = position[1].trim().slice(0,-1);
console.log(position1);console.log(position2);console.log(position1);
console.log(position);console.log(position);console.log(position);
Tadresse = i.adresse;
marker_content_img = "<img src=\""+urlimg+"\" style='max-height: 200px;'>";
marker_CONTENT = "<div>"+marker_content_img+"<br><h1>"+titre+"</h1><p>"+description+"</p><p>@"+Tadresse+"</div>";
temp+="1";
marker = new google.maps.Marker({position: {lat:parseFloat(position1), lng:parseFloat(position2)}, map: MAP, title: 'by \''+username+'\''}) ;
markers[markerKey] = marker;
infoWindow = new google.maps.InfoWindow({
content:marker_CONTENT,
ariaLabel:'@'+username,
});
infos[infosKeys] = infoWindow;
markers[markerKey].addListener('click',()=>{
infos[infosKeys].open({anchor:markers[markerKey]});
});
})
//.URL PERMET D'EFFACER LES \
}
else{
}
};
xhr.send();
}
function openPopup() {
document.getElementById('popup').style.display = 'block';
}
function closePopup(){
document.getElementById('popup').style.display = 'none';
}
function chargeImage(){
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const image = document.createElement('img');
image.src = e.target.result;
image.style.maxWidth = '100%';
document.getElementById('imagePreview').innerHTML = '';
document.getElementById('imagePreview').appendChild(image);
}
reader.readAsDataURL(file);
}
/*
var list_profil_default_content = document.querySelectorAll("#menu_search_user ul li");
document.getElementById("menu_search_user_input").addEventListener("input", function() {
var my_value = this.value;
if (my_value.length > 0)
{
document.getElementById("menu_search_user_list").style.display = "block";
}
else if (my_value == "") {
document.getElementById("menu_search_user_list").style.display = "none";
for (var elem of list_profil_default_content) {
document.getElementById("menu_search_user_list").append(elem);
}
}
var elemLi = document.querySelectorAll("#menu_search_user ul li");
document.getElementById("menu_search_user_list").innerHTML = ""
for (var elem of elemLi) {
var temp_pseudo = elem.innerText;
if (temp_pseudo.slice(0,my_value.length) == my_value)
{
document.getElementById("menu_search_user_list").appendChild(elem);
}
}
});
*/
window.onload = function() {
initMap();
document.getElementById("login").addEventListener('submit',(ev)=>{
ev.preventDefault();
form_login = new FormData();
form_login.append("username",document.getElementById("username").value);
form_login.append("password",document.getElementById("password").value);
form_login.append("pfp",document.getElementById("pfp").files[0]);
xhr = new XMLHttpRequest();
xhr.open("POST","login.php",true);
console.log(form_login);
xhr.send(form_login);
xhr.onload = ()=>{
if (xhr.status === 200){
console.log(xhr.responseText);console.log(xhr.responseText);console.log(xhr.responseText);console.log(xhr.responseText);
response_login = JSON.parse(xhr.responseText);
}
}
})
MAP.addListener("click", async(event) => { //on met async pour spécifier que son contenu sera asynchrone
/* console.log("dazdzadazd");
console.log(document.getElementById("connexion_status").textContent)
if (document.getElementById("connexion_status").textContent == "1") {
console.log("dazdzadazd");*/
form_data = new FormData(); // pour pouvoir manipuler plus facilement https://developer.mozilla.org/fr/docs/Web/API/FormData
pow = 2;
let Lat = event.latLng.lat();
let Lng = event.latLng.lng();
LatLng = event.latLng;
let Tadresse;
function geocodeSync(location){
return new Promise( (OK,notOK) => {
geocoder.geocode({"location": location}, function(results,status) {
if (status === 'OK'){
if (results[0]){
OK(results[0].formatted_address); //on a bien trouvé une adresse donc on la met dans OK pour pouvoir y accéder
} else {notOK("ERR");}
} else {notOK("geocodage n'a pas fonctionné : " +status)};
});
})
}
console.log(Tadresse);
Tadresse= await geocodeSync(event.latLng); //await ne marchait pas sans avoir déclaré la fonction anonyme en "async"
position=[event.latLng.lat(),event.latLng.lng()]
form_data.append("position",event.latLng);
form_data.append("adresse",Tadresse);
console.log(Tadresse);
console.log(Lat,Lng);
openPopup();
document.getElementById("form_popup").addEventListener("submit", (event) => {
closePopup();
event.preventDefault();
titre = document.getElementById("popup_titre").value;
description = document.getElementById("popup_desc").value;
image = document.getElementById('popup_file').files[0]; // pour récuperer l'image
marker_content_img=null;
form_data.append('popup_titre',titre); //INUTILE NORMALEMENT????
form_data.append('popup_desc', description);
form_data.append('markerimg',image);
xhr = new XMLHttpRequest();
xhr.open('POST',"upload.php", true);
xhr.send(form_data);
xhr.onload = ()=>{
if (xhr.status===200) { // https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP
console.log(xhr.responseText);console.log(xhr.responseText);console.log(xhr.responseText);console.log(xhr.responseText);console.log(xhr.responseText);console.log(xhr.responseText);
response = JSON.parse(xhr.responseText);
console.log(response);console.log(response);console.log(response);console.log(response);console.log(response);console.log(response);console.log(response);console.log(response);console.log(response);console.log(response);console.log(response);
urlimg = response.urlimg; //.URL PERMET D'EFFACER LES \ SI C'EST CA QUI CAUSAIT 404 JV CABLER (pas du tout)
username = response.username; //INUTILE???
marker_content_img = "<img src=\""+urlimg+"\" style='max-height: 200px;'>";
marker_CONTENT = "<div>"+marker_content_img+"<br><h1>"+titre+"</h1><p>"+description+"</p><p>@"+Tadresse+"</div>";
marker = new google.maps.Marker({position: LatLng, map: MAP, title: 'by \''+username+'\'', animation: google.maps.Animation.DROP}) ;
infoWindow = new google.maps.InfoWindow({
content:marker_CONTENT,
ariaLabel:'@'+username,
});
marker.addListener('click',()=>{
infoWindow.open({anchor:marker});
});
}
else{
}
};
})
//}
});
loadMarkers();
setInterval(loadMarkers,10000);
};
function loginPopup() {
document.getElementById("loginPopup").style.display = "flex";
}
document.getElementById('login').addEventListener('submit', function(event) {
if (!this.checkValidity()) {
event.preventDefault();
}
else {
document.getElementById("connexion_status").textContent = "1";
document.getElementById("loginPopup").style.display = "none";
document.getElementById("disconnected_profil").style.display = "none";
document.getElementById("connected_profil").style.display = "flex";
document.getElementById("logout").style.display = "flex";
document.getElementById("menu_list_button_profil").style.display = "flex";
}
})
Erreur.