I am trying to figure out the best way to pass data across two pages (Page A to Page B) using PHP for a (somewhat )specific scenario:
Page A: A gallery of images with titles. To create this page, a database call is made in a PHP file to an images table that holds and image id, and image location, and an image title. It gets all of the images that exist in the table and echoes them all out to the screen with a for loop. It creates an href on each image's anchor tag that points to page B.
Page B: A larger view of the image. When a user clicks on an image on Page A, it brings them to a new page with a larger view of the image.
To achieve this, I am currently putting an href on each anchor containing the images in Page A with a parameter containing the image id. Then, on Page B, I make another database call using the id that was passed in to again get the image title, location, etc.
This seems wrong to me to make a second database call when I have already retrieved all of the needed data once on the previous page. In my mind, there are only three decent options which all seem bad to me:
Multiple databse queries - as explained above. Seems inefficient.
GET - Instead of just including the image id in the href on Page A, include ALL of the needed parameters in the href. Note that I actually have more than just three parameters, and there may be upwards of 15 values that need to be passed. It seems wrong to have a url this enormous and to be passing things like image location in the url.
POST - Have a form on the page for each image with a method of POST. Put a hidden field in the form for each parameter that needs to be passed form Page A to Page B. Again this seems like a really bad idea to me to have tons of unnecessary markup and will get very messy.
Does anyone have any input on any of these methods, or a better idea? As I develop more, I find myself questioning efficiency and how it doesn't make sense to me to make so many database calls that do the same thing over and over. I want to be able to make one database call for one image once and then never have to do it again for that session.
(Note that JavaScript / jQuery is an option for me)
Thanks!
It's the reality of web that you need to make a HTTP request every time to fetch some data from server. If you reloads a page browser will again make a HTTP request to get that data again. HTML5 have lot of solutions to the above problem...
Web Storage - Store Values as key-value pair on client side
Web SQL Database - Same as SQL
IndexedDB - Somewhere Between Web Storage and Web SQL Database
You need to create a base64 string out of your image & store that string in Web Storage or WebSQL database. You can write code for image to base64 in javascript file & then use HTML5 APIs to store the string in database.
Have a look at this page -- http://www.html5rocks.com/en/features/storage
I would just do what you are doing but using a function for it. The function would have
SELECT * FROM table WHERE id = $imageid
Passing the ID of the image you want and if there is no value in $imageid then show all. That way on page A you can use this to get the images and then just by using POST or GET with the ID you run the same function to get the results for the ID.
I would say that's not very messy to do it that way but again, that's just how I would do it.
Overall doing something like this:
function getImage ($imageid) {
if($imageid == ""){
$result = mysqli_query($con,"SELECT * FROM table");
return $result;
} else {
$result = mysqli_query($con,"SELECT * FROM table WHERE id = $imageid");
return $result;
}
}
With jquery, you won't have to go to the next page. you can simply do the below:
$('div#largeImageDisplay').hide(); // Div to display large image on. You can style however you want
$("a.linkClass").on("click", function(e) {
sImagePath = $(this).children("img").attr("src"); // use replace function to change path to the one you want
sImageTitle = $(this).attr("title");
$('div#largeImageDisplay').empty();
$('div#largeImageDisplay').html("<h3>"+sImageTitle+"</h3><img src='"+sImagePath+"'/>");
e.preventDefault();
});
Related
I want to load a new template page with data inserted via the previous call.
I have a list of items generated and they link to the general item page but without php all is lost.
I was thinking about using a href="page.html#itemid" then finding the item by querying the url.
Is this overthinking it? Any easier ways to do it?
I am assuming that on the current page, you have used AJAX to load all the data you need to display on the new template page, correct?
I can think of multiple ways to do this. It just depends on the nature of your data:
Have a popup instead:
You could have the new template page be a popup (instead of a real, separate page). Grey out the main page's content (via a darker, half transparent overlay) and then have this new popup div display the data you want. This is typically used on sites that want you to sign up for their newsletter, etc.
Pass the data via URL:
If you have very small amounts of data and it isn't sensitive data, you can just pass it through the parameters. Let's say page.html is the new page template you want to populate the data with. Then just have the link on the current page be page.html?itemid=123¶m2=Hi or something like that. Then, on page.html, make sure you have JS to read the parameters from the URL and display the data.
Pass the data via cookie:
Otherwise, you might just want to use JS cookies. Especially if you have a medium or larger amount of data. Store the data loaded from AJAX into cookies. If you are expecting the user to open multiple page.html templates at the same time, you might want to use an identifier and pass it to each one, such as page.html?itemid=1 and page.html?itemid=2 etc. Then have that page.html's JS look up the appropriate cookie based on the URL's parameter id.
Do be careful and use best practices if handling sensitive data.
In our CRM system there was an error that not all values in an Invoice were properly saved in the database.
But, if we open one Invoice, edit anything and 'Save' the invoice, it will correctly be pushed into the database.
As there are hundreds of invoices where we need to do this, I dont want to manually do this but write a script that automates this.
Also I dont want to change the entries in the database directly, because it could lead to issues with calculations.
Our CRM is running on an Ubuntu Server.
What I need now:
How do I write a script which:
1) Queries SQL to get a list of the invoice id's that need to be fixed.
2) calls the webpage:
https://crm.com/index.php?module=Invoice&view=Edit&record=3000
where 3000 at the end is the invoice id.
3) Writes some value to the input field that was created for the Bugfixing
4) Submits the form
How can I persue this?
1) Is a "form" just a http post request that I can maybe give the parameter of the updated input field?
2) Can I do this with PHP/JavaScript that I just put in the root folder of the CRM system on the server and call it.
I need to know how to start with this problem and the general solution.
Thanks.
Here's what I'd do:
Edit the PHP code to add some JS code only if an extra parameter (like &fixInvoice=1) is present in the URL.
That JS code would be executed when the page is fully loaded and would just send the form.
Get the list of the invoices ids that you need to fix, and build a list of URLs with that extra parameter.
Now, to open all those URLs you could build a simple HTML file with an iframe for each URL if the list is not big (under 100 URLs maybe). If the list is bigger you could build a HTML file with one iframe, and feed the list of URLs to a JS that would set the iframe src to the first URL, wait X seconds (it depends on how long the server takes to process the page, you should test it), feed the second one, etc.
I created a table that receives data from a SQL database to a PHP script that parse this back though my AJAX to the HTML page.
With this information I create the table.
It works and the beauty of it: every time the data changes the table changes.
BUT: it reloads the whole table with new data.
What I want is to have it only reload the part that's been updates and then "mark" it until you mouse over it.
Is there any function in JS that allows to compare 2 JSON encoded strings and then only update the part that's not similar?
I have use jQuery but haven't found anything as of yet.I apologies for not showing any code but it's protected from sharing
You have to poll AJAX request to the server after every few seconds or minutes and see if there's any update. If so, you receive that update with say the id or index number of the data which you can replace with the new one. That way you won't have to update the entire thing.
Is there a way when Page change location to keep some HTML Element's.
Like a div that will not be re-rendered but keep it's state.
You can find and example like that at Facebook Chat ,you can see that the Chat window does not change it's location or InnerHtml when you navigate to another page.
PS : I have no clue where to start so any documentation would be appreciated.And it would be nice if solution would be XHTML not HTML5
I don't know exactly how facebook chat works, but I do know all chat messages are stored in a database, so you can access them later via messages.
My assumption would be that a Session variable is set letting facebook's UI know what chats you have open, or perhaps its stored in the database as well. In either case, you'd have to use some outside script in order to do this. For sake of ease lets say you'll use PHP, and you'll store the data in a SESSION variable.
/* Storing the variable */
$users = array('user123', 'user456', 'user789');
$_SESSION['chat_windows_open'] = $users;
/* Retrieving the values */
foreach($_SESSION['chat_windows_open'] as $chat) {
/* Use $chat to get the username, query the DB for
the message content, and echo it in whatever form you
wish. */
}
When window.location changes, the page is automaticaly, entirely re-rendered. So, from this point of view, the answer is no. However, this effect can be obtained by using AJAX. Use ajax to make requests to the server while the page does not reload or changes location(window.location is always the same). Here's a good link to start with AJAX:
http://www.w3schools.com/ajax/default.asp
If you still want the page to change it's location, after you've made your ajax request and updated the content on the page, you can use javascript's history.pushState function. However you will have to find a way to make it cross browser(aka. make it work in IE).
I am working on a big site, and in the site there is a search module. Searching is done by using a a lot of user submitted values, so in pagination I must pass all these data to the next page, appending the values to url make the url very big.
Sso how can I solve this issue? I am planning to use a javascript based page submission (POST) with all the values in hidden fields to the next page the read all the values from the next page.
Will it cause any problems? Or should I use database to keep the search criterias?
I would create a server side object, possibly with a database backend which is updated by the different pages.
It is at my opinion the most clear and easy solution. Giving parameters from page to page, either by post or javascript or cookie will work too but it's more of a quirk in my experience.
Also if a search query is so complex that it needs multiple pages to create it, it might be helpfull for the user to have all the data stored on the server so he can change it more easily by switching back and forth between the different pages.
I would store all the search criterias in some kind of session-store on the server when the initial search is being triggered.
For pagination I would retrieve the criterias from the session-store and then just show the appropriate results. Also I would append some kind of key to the pagination links (so this would be the only hidden post-field) under which the search criterieas can be found.
Even though the session is per user, you might have several search windows open within the same session, and you don't want to mess them up with the pagination.
In order to make a reliable search with pagination, we need to do a bit more than normal.
We need to handle the following cases.
Once search is done, user may choose to do browser back and forward. Here, if you are doing form submission on every page, it would be an overload. Also, if user presses browser refresh button, it will unnecessarily warn him that data is being submitted.
Searching on a large database with lots of criteria is costly. Hence, optimization is important.
So you should NOT do the following:
Submit data on every page change
Not store data in cookie. (This is not secure and not even reliable.)
For large database with complex query, cache the result in session.
In case, you need very up-to-date and real-time result, ignore point (3) and try doing partial search for every page.
Thus, for your case, you can do the following:
When user searches first time, make the form POST data to a search page.
This search page will store the search query in session and generate a unique id for it.
Now render the result page. The result page will be passed the search id (generated in point 2) and the page number. Example result.aspx?searchId=5372947645&page=2
The result page will puck up the query from session using the searchId and then provide result based on the page number sent.
Using hidden fields and POST method should be fine too unless you are able to get them on the next page right.
To supplement Sarfraz's answer...
It's not necessary to use Javascript to make a POST.
<form action="destination_url" method="POST">
...
</form>