Cairo-Coders is the one place for high quality web development, Web Design and software development tutorials and Resources programming. Learn cutting edge techniques in web development, design and software development, download source components and participate in the community.
Create a Jquery/Ajax, php, mysql - Style suggestion search
Database table
CREATE TABLE IF NOT EXISTS `search` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) NOT NULL,
`img` varchar(255) NOT NULL,
`desc` text NOT NULL,
`url` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Jquery/Ajax, php, mysqli - Style suggestion search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
function find(textboxString) {
if(textboxString.length == 0) {
$('#resultbox').fadeOut(); // Hide the resultbox box
} else {
$.post("ajaxsuggestdata.php", {queryString: ""+textboxString+""}, function(data) { // Do an AJAX call
$('#resultbox').fadeIn(); // Show the resultbox box
$('#resultbox').html(data); // Fill the resultbox box
});
}
// Fade out the resultbox box when not active
$("input").blur(function(){
$('#resultbox').fadeOut();
});
// Safely inject CSS3 and give the search results a shadow
var cssObj = { 'box-shadow' : '#888 5px 10px 10px', // Added when CSS3 is standard
'-webkit-box-shadow' : '#888 5px 10px 10px', // Safari
'-moz-box-shadow' : '#888 5px 10px 10px'}; // Firefox 3.5+
$("#resultbox").css(cssObj);
}
</script>
</head>
<body>
<div style="margin-left:50px">
<div><h2>What are you looking for?</h2></div>
<form id="searchwrapper">
<div>
<input type="text" size="30" class="searchbox" value="" id="textboxString" onkeyup="find(this.value);" />
</div>
<div id="resultbox"></div>
</form>
</div>
<style>
body, div, img, p { padding:0; margin:0; }
a img { border:0 }
body { font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; }
#searchwrapper {
width:310px;
height:40px;
background-image:url(img/searchbox.jpg);
background-repeat:no-repeat;
padding:0px;
margin:0px;
position:relative;
}
#searchwrapper form { display:inline ; }
.searchbox {
border:0px;
background-color:transparent;
position:absolute;
top:5px;
left:9px;
width:256px;
height:28px;
color:#FFFFFF;
}
#dbresults { border-width:1px; border-color:#919191; border-style:solid; width:310px;
font-size:10px; margin-top:20px; -moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding-top:42px;
}
#dbresults a { display:block; background-color:#D8D6D6; clear:left; height:56px; text-decoration:none; }
#dbresults a:hover { background-color:#b7b7b7; color:#ffffff; }
#dbresults a img { float:left; padding:5px 10px; }
#dbresults a span { color:#555555; }
#dbresults a:hover span { color:#f1f1f1; }
</style>
</body>
</html>
//ajaxsuggestdata.php
<p id="dbresults">
<?php
$db = new mysqli('localhost', 'root', '', 'testingdb');
if(!$db) {
echo 'ERROR: Could not connect to the database.';
} else {
// Is there a posted query string?
if(isset($_POST['queryString'])) {
$queryString = $db->real_escape_string($_POST['queryString']);
// Is the string length greater than 0?
if(strlen($queryString) >0) {
$query = $db->query("SELECT * FROM searchs WHERE name LIKE '%" . $queryString . "%' ORDER BY name LIMIT 5");
if($query) {
while ($result = $query ->fetch_object()) {
echo '<a href="'.$result->url.'">';
echo '<img src="img/'.$result->img.'" alt="" />';
$description = $result->desc;
if(strlen($description) > 80) {
$description = substr($description, 0, 80) . "...";
}
echo '<span>'.$description.'</span></a>';
}
} else {
echo 'ERROR: There was a problem with the query.';
}
}else {
// Dont do anything.
} // There is a queryString.
}else {
echo 'There should be no direct access to this script!';
}
}
?>
</p>
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
//register.php
<?php
include("dbcon.php");
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
#Create a unique code which will be used to confirm user accounts.
$confirm_code = md5(rand(0,99999).rand(0,999999));
#Check if data is of required lenght.
if (strlen($username) < 3 || strlen($password) < 3 || strlen($email) < 3)
{
die("All Fields Must Be At Least 3 Characters");
}
if (!preg_match('/^[a-zA-Z0-9&\'\.\-_\+]+\@[a-zA-Z0-9.-]+\.+[a-zA-Z]{2,6}$/', $email)) {
die("Email Address Not Vaild.");
}
#Check if username or email is already in use.
$password = md5($password);
$sqlc="SELECT * FROM users WHERE username = '$username' OR email = '$email'";
if ($rsdc=mysqli_query($conn,$sqlc)){
$total=mysqli_num_rows($rsdc);
if ($total >= '1') {
die("Username Or Email Already In Use");
}
}
$sql = "INSERT INTO users (username,password,email,confirm_code,reg_date)
VALUES ('$username', '$password', '$email', '$confirm_code', now())";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
?>
Crop image before upload and insert to database using PHP Mysqli and CropperJS
Cropper.js is a JavaScript library for cropping image.
With the Cropper.js, you can select an specific area of an image, and then upload the coordinates data to server-side to crop the image, or crop the image on browser-side directly.
