'How to store the image ID and image of a set of shuffling images in array
I'm a newbie and still learning how to code. So, any help is much appreciated. This is what I have in an image of what's done so far. How do I save the selected radio button's image ID and the image itself to my database in PHPMyAdmin? I tried but couldn't figure it out. I would also want to repeat this process three times since the user must select three pictures(1 per submit). Users also should not be allowed to choose the same picture again. Perhaps if a picture is selected, it won't be displayed again in the second and third rounds. Below is my code.
include_once 'database.php';
// Create Level 2 password
if (isset($_POST['submit'])) {
header("LOCATION: registration_l3.php");
try {
$stmt = $conn->prepare("INSERT INTO tbl_pass_level_2(fld_user_id, fld_image_id, fld_image) VALUES(:uid, :iid, :image)");
$stmt->bindParam(':uid', $uid, PDO::PARAM_STR);
$stmt->bindParam(':iid', $iid, PDO::PARAM_STR);
$stmt->bindParam(':image', $image, PDO::PARAM_STR);
$uid = $_POST['uid'];
$iid = $_POST['iid'];
$image = $_POST['image'];
$stmt->execute();
}
catch(PDOException $e)
{
echo "Error: " . $e->getMessage();
}
}
// Auto increment for User ID
$num = $conn->query("SELECT MAX(fld_user_id) AS uid FROM tbl_pass_level_2")->fetch()['uid'];
if ($num){
$num = ltrim($num, 'U')+1;
$num = 'U'.str_pad($num,2,"0",STR_PAD_LEFT);
}
else{
$num = 'U'.str_pad(1,2,"0",STR_PAD_LEFT);
}
$pic = array('1.png','2.png','3.png','4.png','5.png','6.png','7.png','8.png','9.png','10.png','11.png','12.png','13.png','14.png','15.png','16.png','17.png','18.png','19.png','20.png');
shuffle($pic);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Register-Password Level 2</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
background: linear-gradient(to bottom, #ff6699 0%, #ffcc99 100%)fixed;
font: 18px Tahoma, sans-serif;
color: black;
text-align: center;
}
p {font-size: 16px;}
.margin {margin-bottom: 35px;}
.container-fluid {
padding-top: 50px;
padding-bottom: 50px;
}
div {
margin-bottom: 20px;
}
label {
display: inline-block;
width: 100px;
text-align: center;
}
input[type=submit] {
background-color: #ff0066;
border: 2px solid #000000 ;
color: black;
text-decoration: none;
cursor: pointer;
display: inline-block;
width: 120px;
text-align:center;
}
.center {
display: flex;
flex-flow: row wrap;
position: relative;
width: auto;
margin-left: auto;
margin-right: auto;
}
li {
flex: 1 1 16%;
height: auto;
margin: 20px;
margin-right: 40px;
padding: 20px 0;
width: auto;
border: 2px solid #000000 ;
}
.buttonHolder{ text-align: center;}
#footer {
position: relative;
padding: 10px 10px 0px 10px;
bottom: 0;
width: 100%;
/* Height of the footer*/
height: 40px;
}
</style>
</head>
<body>
<div class="container-fluid text-center">
<h2 class="margin"> <b>3 LEVEL PASSWORD AUTHENTICATION <br>SECURITY SYSTEM<b></h2>
<h3 class="margin"><b>LEVEL 2 PASSWORD REGISTRATION </b></h3>
<h4 class="margin">CHOOSE 3 OUT OF 10 DISPLAYED IMAGES </h4>
<label>User ID :</label>
<input name="uid" type="text" id="userid" placeholder="User ID" value="<?php echo $num; ?>"readonly>
<?php
if (isset($_SESSION['error'])) {
echo "<p class='text-danger text-center'>{$_SESSION['error']}</p>";
unset($_SESSION['error']);
}
?>
<form method="post">
<ul>
<div class="center">
<?php
for($i=0;$i<10;$i++)
echo "<li style = \"display:inline-block;\"><input type = \"radio\" name = \"iid\"><img src = \"$pic[$i]\" name=\"image\" width=\"50%\" height=\"150\" class=\"center\" ></li>";
?>
</div>
</ul>
<h4 class="margin text-center"> 1 OUT OF 3 </h4>
<div class="buttonHolder">
<input type="hidden" name="matricnum" value="a174559">
<?php { ?>
<input type="submit" name="submit" value="Submit" align="text-center">
<?php } ?>
</div>
</form>
<!-- Footer -->
<footer class="footer text-center" id=footer>
<p>Copyright � S.SASHNEETA 2022</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|