I am trying to generate a QR code from the value of a HTML input element:
HTML, CSS, and JS Code:
index.php
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="icon" href="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" type="image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<title>Send Email Example</title>
<style>
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div class="card card-signin my-5">
<div class="card-body">
<h5 class="card-title text-center">Generate QR Code</h5>
<form id="generateQrForm" class="form-signin">
<div class="form-label-group">
<label for="inputEmail">Text For QR <span style="color: #FF0000">*</span></label>
<input type="text" name="qrText" id="qrText" class="form-control" required placeholder="Enter something to generate QR">
</div> <br/>
<div id="generatedQr text-center">
<img src="" id="generatedQrImg" class="center-block">
</div> <br/>
<button type="submit" name="generateQrBtn" id="generateQrBtn" class="btn btn-lg btn-primary btn-block text-uppercase" >Generate QR</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="generate_qr_js.js"></script>
</script>
</body>
jQuery code:
generate_qr_js.js
$("form#generateQrForm").on("submit",function (e) {
e.preventDefault();
var qrText = $("#qrText").val();
$.post("generate_qr_script.php",{generateQr:'generateQr',qrText:qrText},function (response) {
var data = response.split('^');
var generateQrImgPath = data[1];
$("#generatedQrImg").attr("src",generateQrImgPath);
})
});
PHP Code:
generate_qr_script.php
<?php
include "library/phpqrcode/qrlib.php";
if (isset($_POST['generateQr']) == 'generateQr')
{
$qrText = $_POST['qrText']; // receive the text for QR
$directory = "generated_qr/"; // folder where to store QR
$fileName = 'QR'.rand().'.png'; // generate random name of QR image
QRcode::png($qrText, $directory.$fileName, 'L', 4, 2); // library function to generate QR
echo "success^".$directory.$fileName; // returns the qr-image path
}
?>
I run these 3 codes under one folder along with phpqrcode library that is imported in generate_qr_script.php file. When I go to the index.php website using XAMPP server, I get an error saying "404 Not Found" as shown below:
When I inspect the source code, the image source is generated successfully but it doesn't get shown on the web.
What I am trying to do is to generate a QR code that captures what the user inputs into the text box that is written in the HTML code. Ideally, it would be nice to store the barcode into the local computer file within the same folder but the code does not load the desired QR code png.
If anyone has any suggestions on where I am going wrong or has a better idea to generate a barcode please do let me know.
I think I fixed it by changing the file permission where I wanted to save the images somehow!
webdevprocess.html
[This page is used solely for the search bar at the bottom of the page. Any search term can be entered and then a search engine can be selected from the drop down menu.]
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Web Development Process</title>
<meta name="Web Development Process" content="Simple Responsive Template is a template for responsive web design. Mobile first, responsive grid layout, toggle menu, navigation bar with unlimited drop downs, responsive slideshow">
<meta name="keywords" content="">
<!-- Mobile viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<!-- CSS-->
<!-- Google web fonts. You can get your own bundle at http://www.google.com/fonts. Don't forget to update the CSS accordingly!-->
<link href='http://fonts.googleapis.com/css?family=Droid+Serif|Ubuntu' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="js/flexslider/flexslider.css">
<link rel="stylesheet" href="css/basic-style.css">
<!-- end CSS-->
<!-- JS-->
<script src="js/libs/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="mypiechart.js"></script>
<script type="text/javascript" src="canvasjs.min.js"></script>
<!-- end JS-->
</head>
<body>
<body id="home">
<!-- header area -->
<header class="wrapper clearfix">
<div id="banner">
<div id="logo"><img src="images/logo.jpg" alt="logo"></div>
</div>
<!-- main navigation -->
<nav id="topnav" role="navigation">
<div class="menu-toggle">Menu</div>
<ul class="srt-menu" id="menu-main-navigation">
<li class="current">Home page</li>
<!-- <li>Internal page demo</li> -->
<li>Client/Server Technology
<ul>
<li>
Client/Server Technology
</li>
<li>Domain Names and Hosting</li>
</ul>
</li>
<li>
JavaScript Pages
<ul>
<li>Web Development Process</li>
</ul>
</li>
<li>
PHP Pages
</li>
</ul>
</nav><!-- end main navigation -->
</header><!-- end header -->
<!-- main content area -->
<div id="main" class="wrapper">
<!-- content area -->
<section id="content" class="wide-content">
<div class="row">
<h1>What Is The Web Development Process?</h1>
<p>A web development process,or web design and development process, is a systematic process or methodology, used tp desgn and build web sites. Just as planing goes into the design
of cars, buildings, or homes, so too is the planning and design and development process required for web sites. A good process helps ensure customer requirements are delivered in a quality
, timely and cos-effective manner.</p>
<h1>SDLC and Project Management</h1>
<p>The web design and development process can be thought of as a type of software development life cycle (SDLC) and project management methodology. The waterfall model depicted
below is a long-standing, traditional SDLC that is characterized by sequential steps. Agile is a newer method that is intended to more quickly respond to changing customer and
product requirements using an incremental process with frequent releases and customer feedback.</p>
<h3>Traditional Waterfall SDLC Methodology (PNG image)</h3>
<p><img src="waterfall.png" alt="Waterfall SDLC"></p>
<p>Source: WikiPedia</p>
<h3>Agile Methodology (GIF image)</h3>
<p><img src="images/agile.png" alt="Agile Methodology"></p>
<h3>Web Development Phases (HTML/JavaScript image)</h3>
<div id="chartContainer" style="height: 450px; width: 95%;"></div>
<script>
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "Web Development Process"
},
data: [{
type: "pie",
startAngle: 240,
yValueFormatString: "##0.00\"%\"",
indexLabel: "{label} {y}",
dataPoints: [
{y: 20.00 , label: "Testing"},
{y: 10.00, label: "Promotion"},
{y: 25.00, label: "Analysis"},
{y: 20.00, label: "Design"},
{y: 25.00, label: "Construction"}
]
}]
});
chart.render();
}
</script>
<br>
<form action="search.php" method="get">
<table>
<tr>
<th colspan="2">Search Sites</th>
</tr>
<tr>
<td>Site to Search:</td>
<td>
<select name="site">
<option value="google">Google Web
<option value="googlei">Google Images
<option value="duck">DuckDuckGo
<option value="wiki">WikiPedia
</select>
</td>
</tr>
<tr>
<td>Search term(s):</td>
<td>
<input type="text" name="terms" size="25" maxlength="25">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit" class-"centercell">
</td>
</tr>
</table>
</form>
<br>
</div><!-- end row -->
</section><!-- end content area -->
</div><!-- #end div #main .wrapper -->
<!-- footer area -->
<footer>
<div id="colophon" class="wrapper clearfix">
Author: Janae Roland
</div>
<!--You can NOT remove this attribution statement from any page, unless you get the permission from prowebdesign.ro--><div id="attribution" class="wrapper clearfix" style="color:#666; font-size:11px;">Site built with Simple Responsive Template by Prowebdesign.ro</div><!--end attribution-->
</footer><!-- #end footer area -->
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.0.min.js">\x3C/script>')</script>
<script defer src="js/flexslider/jquery.flexslider-min.js"></script>
<!-- fire ups - read this file! -->
<script src="js/main.js"></script>
</body>
</html>
search.php
[This program is supposed to send the search terms entered to large search engines (google,google images,duck duck go,wikipedia) but I am receiving a syntax error, "
Notice: Use of undefined constant FIlTER_SANITIZE_STRING - assumed 'FIlTER_SANITIZE_STRING' in /home/jsroland/public_html/search.php on line 13
Warning: filter_input() expects parameter 3 to be long, string given in /home/jsroland/public_html/search.php on line 13"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="Rock,Paper,Scissors">
<meta name="description" content="A function that sends data to large search engines,through the WebDev search bar.">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Search</title>
</head>
<body>
<?php
$site = substr(filter_input(INPUT_GET, 'site', FIlTER_SANITIZE_STRING),0,8);
$terms = substr(filter_input(INPUT_GET, 'terms', FILTER_SANITIZE_STRING),0,25);
if ($site == "google")
header('Location: http://www.google.com/#g=' . $terms);
else if ($site == "googlei")
header('Location: http://www.google.com/search?tbm=isch&g=' . $terms);
else if ($site == "duck")
header('Location: https://duckduckgo.com/?q=&ia=web' . $terms);
else if ($site == "wiki")
header('Location: https://en.wikipedia.org/wiki/' . $terms);
?>
</body>
</html>
The minimal correct urls for search engines would be as follows:
for general Google search: https://www.google.com/search?q='<search
terms>',
for Google image search:
https://www.google.com/search?tbm=isch&q='<search terms>',
for
DuckDuckGo: https://duckduckgo.com/?ia=web&q='<search terms>',
for
Wikipedia: https://en.wikipedia.org/wiki/<search terms>.
where <search terms> are the terms to search for.
Please also mind quotation marks in the first three cases. The final code would look something like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="Rock,Paper,Scissors">
<meta name="description" content="A function that sends data to large search engines,through the WebDev search bar.">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Search</title>
</head>
<body>
<?php
$site = substr(filter_input(INPUT_GET, 'site', FIlTER_SANITIZE_STRING),0,8);
$terms = substr(filter_input(INPUT_GET, 'terms', FILTER_SANITIZE_STRING),0,25);
if ($site == "google")
header("Location: https://www.google.com/search?q='$terms'");
else if ($site == "googlei")
header("https://www.google.com/search?tbm=isch&q='$terms'");
else if ($site == "duck")
header("Location: https://duckduckgo.com/?ia=web&q='$terms'");
else if ($site == "wiki")
header("Location: https://en.wikipedia.org/wiki/$terms");
?>
</body>
</html>
I have a php site. I have been given code for an auto-sizing ad from google adsense. I have put this within a "div" to align it, and have created a function to echo the adsense code within my php script;
<html>
<head>
<title>MY WEBSITE</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<?php include("title.php"); ?>
<?php
$googleadsensecode = ' //a function for the adsense code.
<div align="center"> //<div> to align the ad.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive_TextnDisplay_20160127 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9232383262111727"
data-ad-slot="4287484293"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>';
echo $googeladsensecode;
</body>
</html>
However the ad is taking up the whole page, and thus is presumably not picking up on the remaining website's content.
What is the error in my code or my approach?
My jQuery Mobile page does not load content via $.get which is bind into pageinit event, but does so when I hit refresh (F5), why is that so?
My HTML page igra.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- stili za custom temo, jquery, jquery mobile, phonegap-->
<link rel="stylesheet" href="themes/what.min.css" />
<link rel="stylesheet" href="jquerymobile.css" />
<script src="jquery191.js"></script>
<script src="jquerymobile.js"></script>
<script src="phonegap.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="stil.css" />
</head>
<body>
<div data-role="page" id="igra">
<div data-theme="a" data-role="header">
347 coins
<h3>WHAT?</h3>
Home
</div>
<div data-role="content" class="igracontent"> </div>
</div>
</body>
</html>
My main.js with jQuery Mobile code:
$( document ).delegate("#igra", "pageinit", function() {
var par = qs["battlefield"];
$.get('igra.php?battlefield='+par, function(data2) {
$('div.igracontent').append(data2).trigger('create');
});
});
//parse url parameter
var qs = (function(a) {
if (a == "") return {};
var b = {};
for (var i = 0; i < a.length; ++i)
{
var p=a[i].split('=');
if (p.length != 2) continue;
b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
}
return b;
})(window.location.search.substr(1).split('&'));
In igra.php I make SQL query and retrieve some data which I format in jQuery Mobile style and echo it back.
I know jQuery Mobile does not load head into DOM in subsequent pages, so main.js is also included in index.html head which is landing page of my app. All transitions to new pages are by normal ajax querying (I do not prevent default behaviour).
So what happens? When I navigate to igra.html?battlefield=3 the pageinit event does happen but content which I load via $.get from php page does not get inserted! If I hit F5(refresh) the content does get loaded into page. Can anybody explain and help? :) Thank you!
I am trying to get value of selected item from dropdown menu via val() method. It works greatly when I use it in plain html withou jquerymobile divs. but when i put in into my content div it isnt working. Here is the code (only content div implemented):
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>RSS Reader</title>
<link rel="stylesheet" href="main/jquery.mobile-1.1.0.min.css" />
<script src="main/jquery-1.6.4.min.js"></script>
<script src="main/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
settings.php:
<?php
include('../main/header.php');
$siteNumber = empty($_GET['siteNumber']) ? 'Živé' : $_GET['siteNumber'];
?>
<div data-role="page">
<div data-role="header">
Nastavenia
</div>
<div data-role="content">
<select id="training" name="training" data-native-menu="false">
<option value="1">Živé</option>
<option value="2">MobilMania</option>
<option value="3">Automoto</option>
</select>
<script>
function displayVals() {
var defaultSiteNumber = $($("#training")[0]).val();
$("p").html("<b>defaultSiteNumber:</b> " +
defaultSiteNumber);
}
$("select").change(displayVals);
displayVals();
</script>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>Späť</li>
<li>Hotovo</li>
</ul>
</div>
</div>
</div>
After I get those values into javascript I need them to be also available in PHP variables so I can use them to create config file. Or do you think it would be simplier to create config file with javascript? It should be basic .ini with structure which is acceptable by parse_ini_file
EDIT: I have aded whole code including headerp.php to make sure that there is no other error causing this problem.
use this code
may it works
$("select").bind("change", function(event, ui) {
var defaultSiteNumber = $(this).val();
$("p").html("<b>defaultSiteNumber:</b> " + defaultSiteNumber);
});