I have made the HTML webpage and a search bar on my local machine, and am going to download XAMPP to host it locally.
The database will be on a VM and played through a hypervisor. I will be using the webpage and a single searchbar to look up names and associated devices with an 8 digit number on the device, called an asset ID.
A friend recommended PDO for a query language for the database, so would this prove better?
NOTE - database not yet operational or connected to. Just got the assignment yesterday.
HTML
<!DOCTYPE html>
<html>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
color: #FFFFFFFF;
}
img#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#content {
position: relative;
z-index: 1;
text-align:center;
}
</style>
<head>
<title>Multigress Asset Management</title>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
img#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>
<body>
<img src="F:\CAPSTONE PROJECT\background img.jpg" alt="background image" id="bg" />
<div id="content">
<h1>Multigress Asset Management</h1>
<h4>Search by First Name, Last Name, or Asset ID</h4>
<form action="" method="post">
<input type="text" name="data">
<input type="submit" value="Search">
</form>
<br />
<img src="F:\CAPSTONE PROJECT\Logo2.1.png" alt="Multigress Logo 2.1" width="200" height="100">
<h5>Copyright 2014-2017 | Date Last Updated: 4/27/2015</h5>
<h5>By viewing this page, you agree to the Terms & Conditions.</h5>
</div>
</body>
</html>
PHP
<?php
if(isset($_GET['data']) && $_GET['data']=='yes')
{
echo "<center><font color='red'>Comment Posted!</font></center>";
}
else
{
echo "<center><font color='red'>Username taken!</font></center>";
}
?>
Different stuff I'm playing around with:
$con=mysqli_connect("localhost","root","password","dtabasename");
$getUsers = $DBH->prepare("SELECT * FROM TABLE ORDER BY id ASC");
$getUsers->fetchAll();
In order to do so, you will need to generate a with an to send the data and then collect it into your PHP file.
HTML:
<form action="submit.php" method="post">
<input type="text" name="search" />
<input type="submit" value="Submit" />
</form>
PHP:
<?php
if(isset($_POST['search']){
//do database request here
$db=mysql_connect ("servername", "<username>", "<password>") or die ('I cannot connect to the database because: ' . mysql_error());
$sql="SELECT * FROM Search WHERE FirstName LIKE '%" . $name . "%' OR LastName LIKE '%" . $name ."%'";
}
?>
Step by Step tutorial:
http://www.webreference.com/programming/php/search/2.html
Hope it helps
Related
I'm trying to learn how to build a website. I've built the index page and here is the PHP and HTML.
<?php
session_start();
$png = array('png1.jpg', 'png2.jpeg', 'png3.jpg', 'png4.jpg');
$random = rand(0,4);
$picture = "$png[$random]";
?>
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<form action="login.php" method="post">
Name: <input type="text" name="name"><br>
Password: <input type="text" name="password"><br>
<input type="submit">
</form>
</body>
</html>
and here is the CSS where I link to the image file:
body{
background-image: url('png1.png');
}
I'm running the site on replit.com and here is the png1.jpg:
The background image is not appearing. Only the form is showing.
the link of website on replit is
https://htmlphpcssjavascript-login-system.gepingyi.repl.co/
you can view the code with inspect
You appear to try generating a random background image using PHP but then do nothing with that, unless somehow you are hoping that it will exist within your stylesheet? As the stylesheet is a .css file any PHP code within will not be executed by the server so to have a dynamic style you could simply add an inline style tags to the page that sets the body background
<?php
session_start();
$png = array( 'png1.jpg', 'png2.jpeg', 'png3.jpg', 'png4.jpg' );
$random = rand(0,count($png)-1);
$picture = $png[ $random ];
?>
<!DOCTYPE HTML>
<html>
<head>
<link rel='stylesheet' href='index.css'>
<style>
body{
background-image:url(<?php echo $picture; ?>);
background-size: cover;
}
</style>
</head>
<body>
<form action='login.php' method='post'>
<label>Name: <input type='text' name='name' /></label>
<label>Password: <input type='text' name='password' /></label>
<input type='submit'>
</form>
</body>
</html>
Thinking that perhaps the above, being untested, had an issue overlooked when writing the answer I have just put together a working example using images on my system &/or on the web.
<?php
session_start();
//local images within subdirectory
$png = array( 'bck1.jpg','bck2.jpg','bck3.jpg','bck4.jpg','bck5.jpg','bck6.jpg','bck7.jpg' );
$random = rand(0,count($png)-1);
$picture = './images/' . $png[ $random ];
// globally accessible images on interwebs
$png=array(
'https://undsgn.com/wp-content/uploads/2018/04/ltotbngnzzu-uai-1600x900.jpg',
'https://cdn.wallpapersafari.com/54/86/cU6JWo.jpg',
'https://cdn.nimbusthemes.com/2017/09/09233338/Free-Nature-Backgrounds-Sunset-by-Pixabay.jpg',
'https://img.youtube.com/vi/V-FgQ2NAGFc/maxresdefault.jpg'
);
$random = rand(0,count($png)-1);
$picture = $png[ $random ];
?>
<!DOCTYPE HTML>
<html>
<head>
<style>
body{
/*
If the background image is to entirely cover the available space
and maintaining the aspect ratio is not important then you can
set the size as below. Other settings ( such as cover or 100% auto )
will cause blank space when image bounds are reached
*/
background-image:url(<?php echo $picture; ?>);
background-size: 100% 100vh;
background-repeat:no-repeat;
}
form{
width:300px;
padding:1rem;
border:1px solid silver;
background:white;
box-sizing:border-box;
border-radius:1rem;
box-shadow:0 0 25px white;
margin:2rem;
font-family:monospace;
}
label{
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
background:white;
margin:0.25rem 0;
}
[type='submit']{
width:100%;
padding:0.5rem;
margin:1rem 0 0 0;
}
</style>
</head>
<body>
<form action='login.php' method='post'>
<label>Name: <input type='text' name='name' /></label>
<label>Password: <input type='text' name='password' /></label>
<input type='submit'>
</form>
</body>
</html>
The above, when saved with a .php extension will yield output like this:
I am not sure if your image is not showing or if it is showing in the wrong place.
using the css below you will allow you to set your background image properly.
body {
background-image: url('png1.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
So, my html page has content going under the footer. Can someone help me make the page get longer
so that you can scroll down to see the footer? or make it so that the footer begins where content ends(prefered)? Not sure what i did wrong.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>351 Project || Search Student Notes</title>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<?php include "advisor_header.html" ?>
<div>
<h1>Student Notes For <?php echo $student_first_name . " " . $student_last_name;?> </h1>
<div>
<div>
<textarea class="chunkybox" disabled="disabled" name="notes" rows="20" col = "15"><?php echo $student_notes;?></textarea>
</div>
</div>
<h3><center>End of Notes</center></h3>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<form name="activeadviseeform" class="centeredbutton">
<div>
<div>
<textarea style="height: auto;" class="chunkybox" name="notes" rows="20" col = "15" placeholder="Type notes to ADD"></textarea>
</div>
</div>
<button class="centeredbutton" type="submit">Add Notes</button>
</form>
<form action="advisor_edit_notes.php">
<button class="centeredbutton" type="submit">Edit Notes</button>
</form>
<?php if($_SERVER["REQUEST_METHOD"] == "POST"){
if ($student_notes == null) {
$appendednotes = $time . " " . $_POST['notes'];
}
if ($student_notes != null) {
$appendednotes = $student_notes . "\r\n" . $time . " " . $_POST['notes'];
}
$update = "UPDATE people SET notes = '$appendednotes' WHERE id = '$student_id'";
// update in database
$rs = mysqli_query($con, $update);
if($rs)
{
header("Refresh:0");
//printf("Notes Added to : %s Notes", $_SESSION["activeadvisee"]);
}
}
?>
</div>
</div>
<?php include "footer.html" ?>
</body>
</html>
footer.html:
<footer class='footer'>
Copyright © 2022 <br>
placeholder#temp.com :: Contact Form
</footer>
main.css:
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: fixed;
bottom: 0px; left: 0;
}
Position fixed may not be what you want from what it sounds like? Fixed would keep it on the page at all times with the scroll.
If you only want it to stay at the bottom I would think static is the position you would want - which is the default.
Is there something I'm misunderstanding?
https://www.w3schools.com/css/css_positioning.asp
position: fixed; An element with position: fixed; is positioned
relative to the viewport, which means it always stays in the same
place even if the page is scrolled. The top, right, bottom, and left
properties are used to position the element.
A fixed element does not leave a gap in the page where it would
normally have been located.
use any of the below
position: relative;
position: static;
.footer {
width: 100%;
height: 150px;
background: #3167b1;
position: relative;
bottom: 0px;
left: 0;
}
Try putting the footer.html code directly in your main PHP file after the </body> tag. also, have you added overflow attribute for making your page scrollable in the CSS file?
How can i be able to search and retrieve data from a mysql table fields. When the records are found then the user is notified the record was found.
I have created my html form with action and php script to fetch data from the database.
When i click on search it only displays no records found.
I want to fetch data from 3 fields in the table.
my html form below
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Conduct Database Search</title>
<style type="text/css">
body,
td,
th {
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<p><img src="images/logonew.png" width="150" height="73" alt="Find Real Me Logo" /> </p>
<hr>
<p>Welcome to the conduct database search page. You can verify domestic worker's conduct and history.
</p>
<p>Search database by entering First name, Middle name and ID No. below and click the Search Conduct Database.
</p>
<form id="form1" action="search15.php" name="form1" method="post">
<p>
<label for="First_name">First name:</label>
<input name="First_name" type="text" required="required" id="First_name" title="First name" size="30" maxlength="30">
</p>
<p>
<label for="Last_name">Last name:</label>
<input name="Last_name" type="text" required="required" id="Last_name" title="last_name" size="30" maxlength="30">
</p>
<p>
<label for="ID_NO">ID Number:</label>
<input name="ID_NO" type="number" required="required" id="ID_NO" title="ID_NO">
</p>
<p>
<input name="submit" type="submit" id="submit" formaction="search15.php" formmethod="POST" value="Search Conduct Database">
</p>
<p> </p>
</form>
<hr>
<p>Copyright All Rights Reserved </p>
</body>
</html>
```
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Conduct Database Search Results</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
<!-- body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #006600;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul,
ol,
dl {
/* Due to variations between browsers, it's best practices to zero padding and margin
on lists. For consistency, you can either specify the amounts you want here, or on the list items
(LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you
write a more specific selector. */
padding: 0;
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-top: 0;
/* removing the top margin gets around an issue where margins can escape from their
containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px;
/* adding the padding to the sides of the elements within the divs, instead of
the divs themselves, gets rid of any box model math. A nested div with side padding can also be
used as an alternate method. */
}
a img {
/* this selector removes the default blue border displayed in some browsers around an image
when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors
that
create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline;
/* unless you style your links to look extremely unique, it's best to
provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover,
a:active,
a:focus {
/* this group of selectors will give a keyboard navigator the same
hover
experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background-color: #FFF;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an
image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #FFFFFF;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have
padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side
padding or border to the div itself, it will be added to the width you define to create the *total*
width. You may also choose to remove the padding on the element in the div and place a second div
within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
}
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #333333;
color: #CCC;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {
/* this class can be used to float an element right in your page. The floated element must
precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft {
/* this class can be used to float an element left in your page. The floated element must
precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat {
/* this class can be placed on a <br /> or empty div as the final element following
the last floated div (within the #container) if the #footer is removed or taken out of the
#container */
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
</head>
<body>
<div class="container">
<div class="header">
<div align="left">
<img src="logo.png" width="180" height="88"></div>
<!-- end .header -->
</div>
<div class="content">
<div align="right"></div>
<div align="right">
<p>Home | Services | Contact | Search Again</p>
<hr>
<p> </p>
</div>
<h1>Results</h1>
<?php
//load database connection
$host = "localhost";
$user = "mydata";
$password = "mydata";
$database_name = "mydata";
$pdo = new PDO("mysql:host=$host;dbname=$database_name", $user, $password, array(
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
));
// Search from MySQL database table
$search=$_POST['submit'];
$query = $pdo->prepare("select * from red_data1 where ID_NO LIKE '%$search%' OR First_name LIKE
'%$search%' OR Middle_name LIKE '%$search%' OR Last_name LIKE '%$search%' LIMIT 0 , 10");
$query->bindValue(1, "%$search%", PDO::PARAM_STR);
$query->execute();
// Display search result
if (!$query->rowCount() == 0) {
echo "Your Reference Search <b>found</b> the following in our database:<br/> <br/>";
echo "<a href='http://localhost/frm_test2/contact' target='_blank'>Click here </a> to
contact us for more information relating to your search.<br/> <br/>";
echo "<table style=\"font-family:arial;color:#333333;\">";
echo "<tr><td style=\"border-style:solid;border-width:1px;border-
color:#98bf21;background:#98bf21;\">ID No.</td><td style=\"border-style:solid;border-
width:1px;border-color:#98bf21;background:#98bf21;\">First Name</td><td style=\"border-
style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Middle Name</td><td
style=\"border-style:solid;border-width:1px;border-color:#98bf21;background:#98bf21;\">Last
Name</td>
</tr>";
while ($results = $query->fetch()) {
echo "<tr><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['ID_NO'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['First_name'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['Middle_name'];
echo "</td><td style=\"border-style:solid;border-width:1px;border-color:#98bf21;\">";
echo $results['Last_name'];
echo "</td></tr>";
}
echo "</table>";
} else {
echo 'No Records found ';
}
?>
<p> </p>
<!-- end .content -->
</div>
<div class="footer">
<p align="center">Copyright </p>
<!-- end .footer -->
</div>
<!-- end .container -->
</div>
</body>
</html>
$search = $_POST['search'];
$sql = "SELECT * FROM TABLE_NAME WHERE CONCAT('database column names') LIKE '%".$search."%' ";
Here are three tables that I need to sync together.
-Table 1 is People (name, email etc)
-Table 2 is Cars (brand, color etc)
-Table 3 is Ads (One ad containing info from Table 1 and Table 2)
What I basically want is for "TABLE 1" to be able to search for data from "TABLE 2". When the data is selected I want data from both TABLE 1 and TABLE 2 to be entered into TABLE 3.
When a user is logged in he should be able to search for a products in a search field and choose one product - THIS IS DONE AND WORKS.
The problem is that I don't know how to take the search result, in this example it would be a car. And via a submit button create an AD and enter data in TABLE 3 with the name and email from TABLE 1 and the car model and color from TABLE 2.
Here is the CODE for the FORM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style type="text/css">
body{
font-family: Arail, sans-serif;
}
/* Formatting search box */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("adsToDb.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<br>
<br>
<p>Search the product you want to sell</p>
<body>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search product..." />
<div class="result"></div>
</div>
</body>
<br>
<br>
<br>
<br>
<br>
<br>
<form action="createAd.php" method="post">
Name: <input type="text" name="name"><br>
<input type="submit" name="fields" value="sell this product" />
<input type="hidden" name="fieldsCount" value="<?php echo $fields+1 ?>" />
</form>
</html>
HERE IS THE CODE FOR THE DB SEARCH
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
try{
$pdo = new PDO("mysql:host=localhost;dbname=DB", "", "");
// Set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
die("ERROR: Could not connect. " . $e->getMessage());
}
// Attempt search query execution
try{
if(isset($_REQUEST['term'])){
// create prepared statement
$sql = "SELECT * FROM products WHERE product_name LIKE :term";
$stmt = $pdo->prepare($sql);
$term = $_REQUEST['term'] . '%';
// bind parameters to statement
$stmt->bindParam(':term', $term);
// execute the prepared statement
$stmt->execute();
if($stmt->rowCount() > 0){
while($row = $stmt->fetch()){
echo "<p>" . $row['product_name'] . "</p>";
}
} else{
echo "<p>No matches found";
}
}
} catch(PDOException $e){
die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}
// Close connection
unset($pdo);
?>
You can use a hidden field which holds the id of the car inside the forloop of the search result and once user click on button to add to Ad table, already you have the loggedIn User ID and can get from the hidden field the car_id
<form action="createAd.php" method="post">
Name: <input type="text" name="name">
<input type="submit" name="fields" value="sell this product" />
<input type="hidden" name="fieldsCount" value="<?php echo $fields+1 ?>" />
**<input type="hidden" name="car_id" value="<?php echo $car_id ?>" />**
</form>
Here I am using drag and drop in jQuery.
I get the set of questions and set of answers from Database in array(article->question, article->answers), where answers be drag and dropped in the questions text box. On refresh the page the dragged values are comes to the original place not in that particular text box were I dropped.
Here My coding.
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css" /> -->
<style>
/*#draggable { width: 50px; height: 20px; padding: 0.5em; } */
.drag_ans {
background: none repeat scroll 0 0 transparent;
border: 0 none;
width: 100px;
}
#draggable {
width: 50px;
height: 20px;
background: white;
}
#droppable {
float: left;
margin: 50px;
width: 500px;
height: 300px;
border: green;
}
#ques {
background: none repeat scroll 0 0 #FFFFFF;
padding: 10px;
width: 100px;
}
</style>
<script>
$(document).ready(function(){
$("#answer").click(function(){
// alert('find a score');
});
});
</script>
</head>
<body>
<div class="container_inner">
<?php
foreach($data as $article)
{
echo "<p>";
echo "<b>";echo $article->article_name;
echo"</b>";
echo "</p>";
echo "<p>";
echo $article->description;
echo "</p>";
echo $article->video; echo "<br>";
}
?>
<?php
$add=1;
foreach($question as $article)
{
?>
<!-- <div id="drop"> -->
<p>
<?php echo $article->question; ?>
<input type ="text" id="ques_<?php echo $add; ?>" name="" class="ui-widget-content" />
</p>
<!--</div> -->
<?php
$add++;
}
?>
<?php
$counter=1;
foreach($question as $article)
{
?>
<script>
$(function() {
$("#draggable_<?php echo $counter; ?>").draggable({ revert: 'invalid' });
$("#ques_<?php echo $counter; ?>").droppable({
drop: function( event, ui ) {
$(this).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
<div id="draggable_<?php echo $counter; ?>" class="ui-widget-content drag_ans">
<p>
<?php echo $article->answer; ?>
</div>
</p>
<?php
$counter++;
}
?>
<p> <input class="green_but" type="submit" name="NEW_SUBMIT" value="Submit" id="answer"/> </p>
</div>
</body>
</html>
Drag and Drop working fine and on refresh the page values all empty in the question text box.
How to validate question and answer in jquery as this answer should store in DB after it dropped the question text box. And when clicking submit button, if answer to the question wrong the score should reduce. EX: If user answer set correct answer 4 out of 10 then the score should 4 out of 10.
I'm not sure what we are suppose to do...you say the answer in your post....the settings need to be saved. Obviously they are not getting saved so you have two methods to do so...
1) Submit a form and save the values there
2) Save the values via ajax attached to the one of the event handlers (probably the drop one : http://api.jqueryui.com/draggable/#event-stop)
My recommendation is not to do the whole drag and drop functionality while you are still learning the basics of web development.