tutorial101 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.
article
Showing posts with label web-development (jquery). Show all posts
Showing posts with label web-development (jquery). Show all posts
//data.php
<?php
$link = mysql_connect('localhost', 'root', '');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("test");
if(isset($_POST['queryString'])) {
$queryString = $_POST['queryString'];
if(strlen($queryString) >0) {
$query = mysql_query("SELECT country FROM countries WHERE country LIKE '$queryString%' LIMIT 10");
if($query) {
echo '<ul>';
while ($result = mysql_fetch_array($query)) {
echo '<li onClick="fill(\''.addslashes($result["country"]).'\');">'.$result["country"].'</li>';
}
echo '</ul>';
} else {
echo 'OOPS we had a problem :(';
}
} else {
}
} else {
echo 'There should be no direct access to this script!';
}
?>
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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery Notification Boxes</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.notification').hover(function() {
$(this).css('cursor','pointer');
}, function() {
$(this).css('cursor','auto');
});
$('.notification span').click(function() {
$(this).parents('.notification').fadeOut(800);
});
$('.notification').click(function() {
$(this).fadeOut(800);
});
});
</script>
</head>
<body>
<h1>Notification Boxes</h1>
<div class="notification success">
<span></span>
<div class="text">
<p><strong>Success!</strong> This is a success notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification warning">
<span></span>
<div class="text">
<p><strong>Warning!</strong> This is a warning notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification tip">
<span></span>
<div class="text">
<p><strong>Quick Tip!</strong> This is a quick tip notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification error">
<span></span>
<div class="text">
<p><strong>Error!</strong> This is a error notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification secure">
<span></span>
<div class="text">
<p><strong>Secure Area!</strong> This is a secure area notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification info">
<span></span>
<div class="text">
<p><strong>Info!</strong> This is a info notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification message">
<span></span>
<div class="text">
<p><strong>Message!</strong> This is a message notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification download">
<span></span>
<div class="text">
<p><strong>Download!</strong> This is a download notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification purchase">
<span></span>
<div class="text">
<p><strong>Purchase!</strong> This is a purchase notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
<div class="notification print">
<span></span>
<div class="text">
<p><strong>Print!</strong> This is a print notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius eros et risus suscipit vehicula.</p>
</div>
</div>
</body>
</html>
//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;
}
?>
Dynamic Drag’n Drop With jQuery And PHP
