Creating unique URLs/Pages from MySQL DB on HTML form submit - javascript

The forums have been a huge help on this project so far. I'm looking for some guidance on the next step of my project here.
What I have is a form that feeds user submitted information into a MySQL database. This database then feeds this information to a main page displaying all of the information in the DB. What I am looking to do is add something to my form that creates a new unique URL/page when the form is submitted. I have already designed the HTML/CSS template for this page and it is designed to display only one set of information as opposed to the entire DB worth.
I am looking for some guidance as to how I can create the pages and unique URLs on the form submit. What is the best way to get this fresh information feeding from the DB immediately?
I need to somehow automatically recreate the HTML and CSS files as well on the server, this I am unfamiliar with.
EDIT: After #Jacky Cheng pointed out that this was possible without creating new versions of the HTML/CSS files I would be inclined to go about having a single HTML file on the server that is dynamic.
Thanks for any help as you guys have been great so far.
Including code for the form which I am submitting to the DB from, and the page which I will be pulling info from.
This is the form:
<?php
include_once 'post_func.inc.php';
connect();
?>
<!DOCTYPE html>
<html>
<head>
<title>Event Register</title>
</head>
<body>
<div style="text-align: center">
<h2>Event Register</h2>
<form id="eventregister"action="eventtestconnect.php" method="post">
<table style="border: 0; margin-left: auto; margin-right: auto; text-align: left">
<tr>
<td>Event Name:</td>
<td><input name="name" type="text"></td>
</tr>
<tr>
<td>Event Type:</td>
<td>
<select name="eventtype">
<?php query_eventtype() ?>
</select>
</td>
</tr>
<tr>
<tr>
<td>Venue:</td>
<td>
<select name="venue">
<?php query_venue() ?>
</select>
</td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
</div>
</body>
<?php close() ?>
</html>
This is the page I want filling with information from the DB after the form is submitted and the url is generated.
<?php
include_once 'event_func.inc.php';
connect();
?>
<html>
<head>
<title>
<?php query_eventname() ?>
</title>
<link href="eventstest.css" rel="stylesheet" type="text/css"/>
</head>
<body id="body">
<div id="maincontainer">
<div id="header">
</div>
<div id="content">
<div id="eventname">
<?php query_eventname() ?>
</div>
<div id="eventvenue">
<?php query_eventvenue() ?>
</div>
<div id="eventicon">
<?php query_eventtype() ?>
</div>
</div>
</div>
</body>
<?php close() ?>
</html>
What changes need to be made to the form in order for the url to be generated on submit and the event page to be able to jump between urls/sets of data dynamically, per-say?
Sorry for the beginner questions but this site really seems to be the best resource for these sorts of things and I haven't found anything this specific on here!
Thanks again for the help!

I am still half guessing what you want, so bear with me here.
from the description of your question, you seems to have a system that would generate an actual html file per form submit? That doesn't look good to me.
maybe try something like this :
redesign a web page that would take http GET request parameter as input (mydomain.com/display.php?id={input1}) and display only 1 set of info.
from the comments I see you have a unique id per form submit, I'd suggest avoid using it directly in the request as it'll be extremly easy to get someone else's info. Instead try somthing like MD5 encoding for that id and then sending that out to user.
so the overall system would be:
1) you'll only ever have 1 html file in your server, which will dynamically change it's content according to input, which save you a lot of space.
2) you'll have a unique & slightly more secure URL per form submit
edit:
here are some fake code to show the general idea.
form response:
$uniqueId=mysql_query("SELECT unique_id FROM my_db");
echo "http://yourdomain.com/display.php?urlid=".$uniqueId;
display.php
<?php
$uniqueId=$_GET['urlid'];
mysql_query("SELECT info_you_need FROM your_tables WHERE unique_id = $uniqueId");
?>
<html><body>your display page html here</body></html>

I guess...
You want to create product catalog page like this:
www.abc.com/Electronics/Product-Motorola-moto-g-at-Rs6999-only.html
and this will display all the product information from the database.
If the above is your case then you can use url rewrite in your project.
RewriteEngine On # Turn on the rewriting engine
RewriteRule ^Product-/?$ Product-Motorola-moto-g-at-Rs6999-only.html [NC,L] # Handle requests for "Product-"
The "RewriteRule" line is where the magic happens. The line can be broken down into 5 parts:
RewriteRule - Tells Apache that this like refers to a single RewriteRule.
^/Product/?$ - The "pattern". The server will check the URL of every request to the site to see if this pattern matches. If it does, then Apache will swap the URL of the request for the "substitution" section that follows.
Product-Motorola-moto-g-at-Rs6999-only.html - The "substitution". If the pattern above matches the request, Apache uses this URL instead of the requested URL.
[NC,L] - "Flags", that tell Apache how to apply the rule. In this case, we're using two flags. "NC", tells Apache that this rule should be case-insensitive, and "L" tells Apache not to process any more rules if this one is used.
Handle requests for "Product" - Comment explaining what the rule does (optional but recommended)
Hope this will work for you.
Feel free to ask any help.
Happy programming :)

Bear with me too. Your description is pretty bad. So if I am correct, you want form=>mysql=>confirmation
So, form should be action="process.php" method="post"
Create a process.php file where you do your validation, escaping, serializing, etc. Insert into the MySQL table. If returns true redirect (header(location:yourdomain.com)) and then on the redirected page, select the information from the Database.

Related

Pass Javascript variable to another page via PHP Post

I am having two php pages:
page 1:
<form class="form-horizontal" role="form" method="post" action="Page2.php">
<button id="place-order" class="btn btn-lg btn-success">Place Order</button>
<div id="ajax-loader" style="display:none;"><img src="images/ajax-loader.gif" /></div>
</form>
<script>
var id = Math.random();
$(document).ready(function() {
$('#place-order').on('click', function() {
$(this).hide();
$('#ajax-loader').show();
});
});
</script>
As on form, it redirects to Page2.php, I want to pass the Javascript variable "id" from Page1 to receive it in Page2.
I have tried using cookies, but need an alternative approach.
I am not understanding the transistion from PHP to JS and vice-versa. Help is appreciated.
Thanks in advance
Dear you can do it very easily with ajax. Ajax has data attribute which helps you pass your data from javascript to another page.
This link will help you a lot
https://api.jquery.com/jquery.ajax/
You can use session storage or cookies.
Example for session storage:
// First web page:
sessionStorage.setItem("myVariable", "myValue");
// Second web page:
var favoriteMovie = sessionStorage.getItem('myVariable');
You could use a query string to pass the value to the next page.
Add an ID to the form
<form class="form-horizontal" role="form" method="post" action="Page2.php" id="order-form">
Update the action of the form to add this query string from our JS variable
var id = Math.random();
$('#order-form').attr('action', 'Page2.php?id=' + id);
Get this variable in PHP (obviously you might wanna do more checks on it)
<? $id = $_GET['id'] ?>
We can now use $id anywhere in our PHP and we'll be using the ID generated from JS. Neat, right? What if we want it in JS again though? Simply add another script tag and echo it there!
<script type="text/javascript">
var id = <? echo $id ?>;
</script>
EDIT: Updated to add a little about how it works as you said you're not too sure about the transition between PHP and JS.
PHP runs on the server. It doesn't know much about the browser, and certainly doesn't know about JS. It runs everything and finishes executing before the web page is displayed. We can pass PHP variables to JS by creating script tags and creating a new javascript variable, echoing the PHP value.
JS (JavaScript) runs in the browser. It doesn't know about anything that happens on the server; all it knows about is the HTML file it is running in (hit CTRL+U to see raw HTML). As JS runs at a completely separate time to PHP there is no easy way to transfer variables (e.g. $phpVar = myJSVar). So, we have to use server methods like POST or GET.
We can create a GET or POST request in 2 main ways:
Using a form
Using an AJAX request
Forms work in the way I've outlined, or you can create a hidden field, set the value you want and then check for that. This involves redirecting to another page.
AJAX (Asynchronous Javascript And Xml) works slightly differently in that the user doesn't have to leave the page for the request to take place. I'll leave it to you to research how to actually program it (jQuery has a nice easy API for it!), but it basically works as a background request - an example would be displaying a loading spinner whilst loading order details from another page.
Hope this helps, let me know if something's not clear!

How to get a DIV element from an external webpage in HTML file?

Apologies in advance if this question has been asked earlier. I did find some similar questions on web but I couldn't figure out the answer still. You can say I have never dealt with anything beyond basic HTML. So any help would be appreciated.
I have a HTML file (Say text.html) only for personal use. In the file, there will be an input box for entering text and a submit button. I want that if I clicks on submit, it opens a particular hyperlink from an external webpage based on the input text. I guess it's like "I am feeling Lucky" of Google.
Example: If the user enters "Test" and clicks on Submit, it should open the second result from the page "https://www.google.com/search?q=test"
Here is my HTML:
<!DOCTYPE html>
<html>
<body style="background-color:beige">
<h1 style="text-align:center"><font size="14">Test</font></h1>
<style type="text/css">
</style>
<form id="form">
<div align="center" style="vertical-align:bottom">
<input type="text"
value="Test"
id="input"
style="height:50px;width:200px;font-size:14pt;">
</div>
</form>
<TABLE BORDER="0">
<TD><button class="button" id="button01">SUBMIT</button></TD>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button01').click(function(e) {
var inputvalue = $("#input").val();
window.open("https://www.google.com/search?q="+inputvalue);
});
</script>
Also, here is the example of the div element from the page on which the hyperlink I want to open is on:
<div id="XYZ" class="contentEditValue" style="float:left;width:180px;">
2nd Result
</div>
I have read that it can be achieved with PHP or Jquery and all but they are not something I have ever worked on. Thank you very much in advance for any help!
Appreciate any other alternatives as well.
You shouldn't be able to do that because of security. If that (reading content from iframes, other browser windows...) would be possible, an attacker could add JS keylogger to your internet banking login or read your messages on Facebook. CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) is used to block these requests and if the website doesn't say explicitly that you are allowed to do something with its content, most browsers won't allow you that.
You have are missing a }); to close the ready() function
<script type="text/javascript">
$(document).ready(function(){
$('#button01').click(function(e) {
var inputvalue = $("#input").val();
window.open("https://www.google.com/search?q="+inputvalue);
});
});
</script>
Here's a basic example of how to do this in PHP.
Taking JavaScript/JQuery out of the picture, let's just say you have a basic form:
<form>
<input type="text" value="Test" name="input">
<input type="submit">
</form>
Without specifying action or method attributes on the <form> tag, the form will make an HTTP GET request to the URL of the page it is on, so for this example the PHP code will be on the same page as the form. Here's a more detailed description of sending form data if you're interested.
Now that you have a way to pass the input to the PHP script*, there are three basic parts to this problem.
Make a request to the page you want with a query string including your input
http_build_query is an easy way to construct a properly encoded query string to use with your request. For this example we'll use file_get_contents to make the request. There are other ways to do it, including cURL, but let's keep it simple.
$query = http_build_query(['q' => $_GET['input']]);
$page = file_get_contents('http://www.example.com/?' . $query);
I'm not using Google for this example because it's a bit more complicated to find the right links in the response and follow them. (Partially because they don't really want you to do it that way.)
Find the link you want in the response
Don't try to find the link in the response with regex. You'll have problems with it, come back to Stack Overflow to try to solve them, and people will tell you that you shouldn't be using regex, so just skip that part and use a DOM parser.
$doc = new DomDocument;
$doc->loadHTML($page);
$links = $doc->getElementsByTagName('a');
$url = $links[0]->getAttribute('href');
I used getElementsByTagName() to find links, but if the page is more complex an xpath query will work better. Also, I used the first link ($links[0]) because example.com only has one link. $links[1] would get you the second link if it existed.
Follow the link
header("Location: $url");
exit;
If everything goes well, you'll end up where you want to be. But there are a lot of things that can go wrong. If you're requesting a resource that you have no control over, it can change at any time without any advance warning to you, so your code that finds the link may stop working. You may get blocked from making requests. Scraping links from sites like this violates the terms of service on many sites, so check that out beforehand. You may find that the site offers a web API, which should be a much better way to access its content than this.
*You don't really need a form for this; you can just pass the input parameter in the URL to your page.

Sinatra: Present Form input without redirecting

I am trying to make a website, where a user can input some data. I would then run a number of methods on this data using sinatra and then display the results on the same input page (i.e. without refreshing (or redirecting) the page - as such the input data is still the form).
I understand that I would probably have to use javascript to watch the submit button and use that to stop the redirection.
I know ruby quit well, but do not know javascript that well; so please bear with me.
I have done quite a bit of research on this, but I haven't got anything to work. (This question is similar, but I haven't even been able to successfully use that).
This is the my sinatra file. Currently, pressing the submit button redirects to an another page.
require 'sinatra'
get '/' do
erb :search
end
post '/' do
#the_input = "<h2>ID header</h2>#{params[:input]}"
end
__END__
## search
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="/#result" method="post">
<input type="text" name="input">
<input type="submit">
</form>
<div class="result" id="result" style="display: none;">
<div class="content">
<!-- this is where the Results should display... -->
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#result').submit(function(){
//parse AJAX URL
var action = $(this).attr('action');
var index = action.indexOf('#');
var url = action.slice(0, index);
var hash = action.slice(index, action.length);
$('.result').show();
$('.result .content').html(index);
})
})
</script>
</body>
</html>
I would really be grateful if someone could help me to get this to work so that the input of the form is displayed into the content div. Any explanation of what you are doing would also be extremely helpful.
Many Thanks for all your help.
This may help you
Basically prevent default redirecting.

javascript generating php doens't works

Hello I have an option list in html that is created dynamically by php. I want to take the value of the option list withought subbmiting everything and then call another php function to fill another option list. To be more specific I want the user to first pick a University from a database and then to pick a department of that Universe. I 've created dynamicaly the option list for the Uni's by fetching all Uni's from the database and then find the value by javascript. So in the javascript function I want to write php code in order to fetch all the departments from the university. Eveything works fine until I try to call the php function from the javascript.
signup.php
<form>
<table>
.
.
.
<tr>
<td> Ίδρυμα:</td>
<td><select id="selection" name="selection" onchange="selectDep()" >
<?php include './selectUni.php'; ?>
</select> </td>
<td><span id="orgError" style="display: none;"></span> <td>
</tr>
<tr>
<td> Τμήμα:</td>
<td id="dep" name="dep" ></td>
<td><span id="depError" style="display: none;"></span><td>
</tr>
.
.
</table>
</form>
generateDep.js
function selectDep(){
if(document.getElementById('selection').value === "---")
return;
var value=document.getElementById('selection').value;
alert(value);
document.getElementById('dep').innerHTML=" <?php include './selectDep.php'; selectDep("+value+"); ?> ";
return true;
}
the value at the alert is correct
selectDep.php
<?php
//just trying to make this work for now
function selectDep($value){
echo $value;
}
?>
I cannot understand what I am doing wrong. Everything look fine to me. Can you help me?
First You have to understand that the javascript code executes in web browser but the php code executes in web server.
You can use AJAX to fix your problem.
PHP is a server-side scripting language. It is executed on the server, which means the page has to submit values to the server as a trigger. Javascript and HTML are client-side, which means it's all done in the browser without communicating with the server.
To see this in action, right-click on a PHP page in the browser and select to view source. All you will see is the HTML, you will not be able to view any of the PHP code that generates the page. When PHP executes on the server, the result is client-side code (javascript, HTML and maybe CSS) which is sent to the browser.
The browser wouldn't know what to do with PHP code. If you set the inner HTML of an element to some PHP code in client-side script, it won't get executed and all you will achieve is having the browser render the PHP script exactly as you entered it.
In short, the javascript has to submit the selected value back to the server, before the server-side PHP can work out which departments to send back to the browser.

Displaying/passing PHP data inside javascript

After looking around on a Google without any success, i feel posting here may be a good idea as I have used this site to answer previous questions.
Anyways, I am currently working on an HTML5 canvas game using; PHP, MYSQL, Html5, and JavaScript.
I have MYSQL databases setup and an PHP page displaying player high-scores, and usernames.
My question is how would I go about displaying the high-scores inside the canvas once the game is over.
As well as saving the high score when the game ends. I've looked on W3SCHOOLS site about AJAX but I'm still unsure of what codes to use inside the JavaScript file.
These are my php/script codes. or at-least the ones that are relevant:
// Here's the savescore.php file
<?php
include 'connect.php';
$user_score = ($_POST['user_score']);
$user_name = ($_POST['user_name']);
if(mysql_query("INSERT INTO users VALUES('$user_name','$user_score')"))
echo "Score Successfully Saved";
else
echo "Score Saving Failed";
?>
// Here's some of the index.php file
<link rel="stylesheet" href="css.css">
</HEAD>
<body>
<div id="menu">
<a class="item" href="/index.php">Home</a>
<?php
include 'connect.php';
session_start();
if($_SESSION['signed_in'])
{
echo 'Hello ' . $_SESSION['user_name'] . '. Not you? Sign out';
include 'chat.php';
}
else
{
echo 'Sign in or create an account.';
}
?>
</div>
<BODY>
<canvas id="canvasGAMEOVER" width="800" height="599"> </canvas>
<script src="game.js"> </script>
// here's whats inside inside game.js... well the part I want to be able to save score
var score = 0;
function drawGAMEOVER() {
}
I have used google and looked at tutorials for AJAX, I found I have been able to connect to the server using AJAX only using:
<form action="savescore.php">
user_name: <input type="text" name="user_name"><br>
user_score: <input type="text" name="user_score"><br>
<input type="submit" value="Submit">
</form>
inside the index.php page, but I am not sure if its possible to grab the 'user_name' they logged in with (displayed on the index.php page) as well as this.score (displayed inside the javascript file.)
Could anyone tell me how this is possible... if not maybe a better way of doing this?
Any help/reply is much appreciated thanks in advance.
If you are using jquery you can use $.get to get all highscores.
http://api.jquery.com/jQuery.get/

Categories