commit
ad7dbe167a
10 changed files with 325 additions and 0 deletions
Binary file not shown.
@ -0,0 +1,39 @@ |
|||||
|
<?php |
||||
|
if ($balise == 'input'){ |
||||
|
echo '<div class="container-champ"> |
||||
|
<p> ',$titre,' : <a id="int" href="#" onmouseup=displayHelp(',$sql_name,') ><img src="img/int.png" alt="point_int" width=20px></a></p> |
||||
|
<div class="champ"> |
||||
|
<input class="entry" type=',$type,' name=',$sql_name,' required><br> |
||||
|
<img class="check" src="img/check.png" alt="check"> |
||||
|
<img class="excla" src="img/excla.png" alt="exclamation"> |
||||
|
</div> |
||||
|
<small>Error: ',$error,'</small> |
||||
|
</div>'; |
||||
|
} |
||||
|
elseif ($balise == 'select') { |
||||
|
echo '<p>',$titre,' :</p> |
||||
|
<div class="champ"> |
||||
|
<select class="entry" name=',$sql_name,' required> |
||||
|
<option value="UC">UC</option> |
||||
|
<option value="IMP">IMP</option> |
||||
|
<option value="ECR">ECR</option> |
||||
|
<option value="VID">VID</option> |
||||
|
<option value="TBI">TBI</option> |
||||
|
</select> |
||||
|
<img class="check" src="img/check.png" alt="check"> |
||||
|
<img class="excla" src="img/excla.png" alt="exclamation"> |
||||
|
</div> |
||||
|
<small>Error: ',$error,'</small>'; |
||||
|
} |
||||
|
elseif ($balise == 'textarea') { |
||||
|
echo '<div class="container-champ"> |
||||
|
<p>',$titre,' :</p> |
||||
|
<div class="champ"> |
||||
|
<textarea class="entry" rows="10" cols="30" name=',$titre,' required></textarea><br> |
||||
|
<img class="check" src="img/check.png" alt="check"> |
||||
|
<img class="excla" src="img/excla.png" alt="exclamation"> |
||||
|
</div> |
||||
|
<small>Error: ',$error,'</small> |
||||
|
</div>'; |
||||
|
} |
||||
|
?> |
||||
@ -0,0 +1,20 @@ |
|||||
|
<?php |
||||
|
$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', ''); |
||||
|
|
||||
|
$req = $bdd->prepare('INSERT INTO pannes(dates, details, lieu, salle, pos, materiel, marque, model, nserie, demandeur) VALUES(:dates, :details, :lieu, :salle, :pos, :materiel, :marque, :model, :nserie, :demandeur)'); |
||||
|
|
||||
|
$req->execute(array( |
||||
|
'dates' => $_POST['dates'], |
||||
|
'details' => $_POST['details'], |
||||
|
'lieu' => $_POST['lieu'], |
||||
|
'salle' => $_POST['salle'], |
||||
|
'pos' => $_POST['pos'], |
||||
|
'materiel' => $_POST['materiel'], |
||||
|
'marque' => $_POST['marque'], |
||||
|
'model' => $_POST['model'], |
||||
|
'nserie' => $_POST['nserie'], |
||||
|
'demandeur' => $_POST['demandeur'] |
||||
|
)); |
||||
|
|
||||
|
echo 'Votre ticket à bien été pris en compte'; |
||||
|
?> |
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 51 KiB |
@ -0,0 +1,107 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html onclick=hideHelp() lang="fr"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<title>Tickets de panne</title> |
||||
|
<link href="stylepage.css" rel="stylesheet"> |
||||
|
<script type="text/javascript" src="script.js" defer></script> |
||||
|
<img class="logo" src="img/logo_PC.png" alt="logo_PC" width="200px"> |
||||
|
</head> |
||||
|
<body id="page"> |
||||
|
<h1 id="titre"> |
||||
|
Formulaire de panne informatique |
||||
|
</h1> |
||||
|
<form method="POST" action="cible.php"> |
||||
|
<div class="container-champ"> |
||||
|
<?php |
||||
|
$titre = 'Date'; |
||||
|
$sql_name = 'dates'; |
||||
|
$type = 'date'; |
||||
|
$balise = 'input'; |
||||
|
$error = 'Veuillez saisir une date'; |
||||
|
include("champ.php"); |
||||
|
?> |
||||
|
<div class='help' id='dates'> |
||||
|
<p>hello</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<?php |
||||
|
$titre = 'Details'; |
||||
|
$sql_name = 'details'; |
||||
|
$balise = 'textarea'; |
||||
|
$error = ''; |
||||
|
include("champ.php"); |
||||
|
?> |
||||
|
<?php |
||||
|
$titre = 'Lieu'; |
||||
|
$sql_name = 'lieu'; |
||||
|
$type = 'text'; |
||||
|
$balise = 'input'; |
||||
|
$error = "Vous n'avez saisie de lieu"; |
||||
|
include("champ.php"); |
||||
|
?> |
||||
|
<?php |
||||
|
$titre = 'Salle'; |
||||
|
$sql_name = 'salle'; |
||||
|
$type = 'text'; |
||||
|
$balise = 'input'; |
||||
|
$error = "Vous n'avez pas saisie de salle"; |
||||
|
include("champ.php"); |
||||
|
?> |
||||
|
<?php |
||||
|
$titre = 'Position dans la salle'; |
||||
|
$sql_name = 'pos'; |
||||
|
$type = 'text'; |
||||
|
$balise = 'input'; |
||||
|
$error = 'Veuillez remplir ce champ'; |
||||
|
include("champ.php"); |
||||
|
?> |
||||
|
<?php |
||||
|
$titre = 'Matériel'; |
||||
|
$sql_name = 'materiel'; |
||||
|
$balise = 'select'; |
||||
|
$error = ''; |
||||
|
include("champ.php"); |
||||
|
?> |
||||
|
<?php |
||||
|
$titre = 'Marque'; |
||||
|
$sql_name = 'marque'; |
||||
|
$type = 'text'; |
||||
|
$balise = 'input'; |
||||
|
$error = "Vous n'avez pas saisie la marque"; |
||||
|
include("champ.php"); |
||||
|
?> |
||||
|
<?php |
||||
|
$titre = 'Model'; |
||||
|
$sql_name = 'model'; |
||||
|
$type = 'text'; |
||||
|
$balise = 'input'; |
||||
|
$error = "Veuillez saisir le model"; |
||||
|
include("champ.php"); |
||||
|
?> |
||||
|
<?php |
||||
|
$titre = 'N° de série'; |
||||
|
$sql_name = 'nserie'; |
||||
|
$type = 'text'; |
||||
|
$balise = 'input'; |
||||
|
$error = "Vous n'avez saisie le n° de série"; |
||||
|
include("champ.php"); |
||||
|
?> |
||||
|
<?php |
||||
|
$titre = 'Demandeur'; |
||||
|
$sql_name = 'demandeur'; |
||||
|
$type = 'text'; |
||||
|
$balise = 'input'; |
||||
|
$error = 'demandeur'; |
||||
|
include("champ.php"); |
||||
|
?> |
||||
|
<div class="container-champ"> |
||||
|
<br> |
||||
|
<div class="champ"> |
||||
|
<input id="submit" class="entry" type="button" onclick="checkInputs()" value="Valider"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</form> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,63 @@ |
|||||
|
const image = document.getElementById('int'); |
||||
|
const button = document.getElementById('submit'); |
||||
|
const page = document.getElementById('page'); |
||||
|
|
||||
|
const check = document.getElementsByClassName('check'); |
||||
|
const excla = document.getElementsByClassName('excla'); |
||||
|
const entry = document.getElementsByClassName('entry'); |
||||
|
const help = document.getElementsByClassName('help'); |
||||
|
|
||||
|
page.addEventListener('click', function() { |
||||
|
console.log('hello'); |
||||
|
for (let i=0; i<help; i++) { |
||||
|
console.log(help[i]); |
||||
|
if (help[i].style.display == 'block') { |
||||
|
help[i].style.display = 'none'; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
function hideHelp() { |
||||
|
console.log('hello'); |
||||
|
for (let i=0; i<help.length; i++) { |
||||
|
console.log(help[i]); |
||||
|
if (help[i].style.display == 'block') { |
||||
|
help[i].style.display = 'none'; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function displayHelp(id) { |
||||
|
if (id.style.display == 'none') { |
||||
|
id.style.display = 'block'; |
||||
|
} |
||||
|
else { |
||||
|
id.style.display = 'none'; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function checkInputs() { |
||||
|
for (let i=0; i < entry.length ; i++) { |
||||
|
console.log(i); |
||||
|
if (entry[i].type != 'button') { |
||||
|
if (entry[i].value == '') { |
||||
|
setError(i); |
||||
|
} |
||||
|
else { |
||||
|
setSuccess(i); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function setError(indice) { |
||||
|
check[indice].style.display = 'none'; |
||||
|
excla[indice].style.display = 'block'; |
||||
|
document.getElementsByTagName('small')[indice].style.display = 'block'; |
||||
|
} |
||||
|
|
||||
|
function setSuccess(indice) { |
||||
|
check[indice].style.display = 'block'; |
||||
|
excla[indice].style.display = 'none'; |
||||
|
document.getElementsByTagName('small')[indice].style.display = 'none'; |
||||
|
} |
||||
@ -0,0 +1,96 @@ |
|||||
|
body{ |
||||
|
background-color: #e5e5e5; |
||||
|
margin: 20px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.logo{ |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
h1{ |
||||
|
margin: 40px; |
||||
|
font-weight: bold; |
||||
|
color: #454545; |
||||
|
} |
||||
|
|
||||
|
p{ |
||||
|
font-weight: bold; |
||||
|
color: #454444; |
||||
|
font-size: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
|
||||
|
form{ |
||||
|
width: 400px; |
||||
|
position: relative; |
||||
|
background-color: #ffffff; |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
border-radius: 30px; |
||||
|
padding: 20px; |
||||
|
} |
||||
|
|
||||
|
.container-champ{ |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.container-champ small{ |
||||
|
display: none; |
||||
|
color: red; |
||||
|
} |
||||
|
|
||||
|
.champ{ |
||||
|
background-color: inherit; |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
flex-direction: row-reverse; |
||||
|
text-align: center; |
||||
|
color: #454444; |
||||
|
display: block; |
||||
|
margin: 10px auto; |
||||
|
border: 4px solid #4e4d4d; |
||||
|
padding: 10px 10px; |
||||
|
width: 200px; |
||||
|
border-radius: 30px; |
||||
|
transition: 0.25s; |
||||
|
} |
||||
|
|
||||
|
.entry{ |
||||
|
border: none; |
||||
|
resize: none; |
||||
|
outline: none; |
||||
|
width: 100%; |
||||
|
text-align: inherit; |
||||
|
background-color: inherit; |
||||
|
-webkit-appearance: none; |
||||
|
-moz-appearance: none; |
||||
|
appearance: none; |
||||
|
} |
||||
|
|
||||
|
.champ:focus, .champ:hover{ |
||||
|
width: 300px; |
||||
|
border-color: #2ecc71; |
||||
|
background-color: #dddddd; |
||||
|
} |
||||
|
|
||||
|
.champ img{ |
||||
|
display: none; |
||||
|
position: relative; |
||||
|
float: right; |
||||
|
width: 20px; |
||||
|
bottom: 20px; |
||||
|
right: 20px; |
||||
|
} |
||||
|
|
||||
|
.submit:hover, .submit:focus{ |
||||
|
width: 250px; |
||||
|
background-color: rgba(46, 204, 113, 0.3); |
||||
|
border-color: #2ecc71; |
||||
|
} |
||||
|
|
||||
|
.help{ |
||||
|
display: none; |
||||
|
margin: 0; |
||||
|
background-color: #22e6b5; |
||||
|
} |
||||
Loading…
Reference in new issue