Imagine that HTML page is a game surface (see picture).
User can have n number of boards (blue divs) on his page. Each board can be moved, re-sized, relabeled, created new and removed.
Inside each board there are m number of figures (purple divs). Each of these user can move inside the board or to another board, re-size, change color and label, delete, add new.
The goal of the game is not important, but let's say it is to rearrange figures in a certain way so that they disappear.
But the goal of the programmer is to save the whole game surface in the database for every user of the site, and to load it later when he returns.
So, how do I go about data exchange between client and the database?
Here's how I think it can be, but maybe there is a better way.
In the database I think of creating tables users, boards and figures.
Then I can SELECT all that belongs to a user and create his HTML page (surface).
But then, user will be able to change all of those properties of boards and figures and I don't know how to track those changes and how to save them back to the database. Is this a situation where JSON should be used?
Yes, if Javascript is an option, then basically you should generate a document (xml or json or plain text, doesn't really matter that much, though json is probably easiest if you're using javascript) that describes the serialized state of the board.
You can then track all changes client-side in a javascript object, and have javascript serialize that as a string that you then transfer to the server using XHR.
I would say that generally, in this scenario, you're best off with each object being a DOM element of some kind (div, span, whatever), because that way the browser can do all the work for you on figuring out positions and such, just absolutely position it all and work from there.
I'm assuming this is mostly going on with javascript when they're playing and that you already know how to do that. Well, each figure has propertes, like this:
-board (the one it's in)
-id
-label
-width
-height
-color
-x position (relative to board)
-y position (relative to board)
So each of those properties will be held in a javascript variable or array while playing. Likewise, the boards also have properties:
-id
-label
-width
-height
-color
-x position (relative to page)
-y position (relative to page)
So you will hold these in javascript variables as well.
When you save you just need to pass all of those variables over to the server. So make your XHR with your JSON string. Once your server receives the request you translate the JSON back into variables you can stick in the database. The way you're planning your database sounds appropriate.
To restore you would just SELECT the appropriate info for that user and (either with a normal page load or XHR) and use your javascript that moves everything around to create and position the objects where they need to go.
Related
I'm looking to create a poll/form that will allow the user to select a starting 11 for a football game (or soccer if you're American), and then submit it and then see an image of the most popular team selection among the fans (maybe most popular for each position instead of most popular team selection all together).
Ideally I would like the form to have options for formation (4-4-2, 4-3-3, 4-5-1 etc) that would change the layout/inputs on the form (but this is definitely not essential, would just be a nice touch - I would just stick with 4-4-2 otherwise).
My dream idea is that there will be a dashboard on the bottom that had player profile pictures that can be dragged and dropped into their positions; However having simple drop down boxes would work too (as long as a player cant be used twice - which is another stumbling block because you don't want the same player to be in both CB positions.)
Design Concept (Results page would basically be the same just without the bottom dashboard):
I have absolutely no idea how to approach this as it is way more complex than anything I have attempted in the past. (Forgot to mention I would like to be able to reset the results every week or so if possible)
So if someone could let me know if its do-able, and if it is, take me through how to do it step by step or even mock one up for me it would be much appreciated.
Thanks.
It doesn't have to be a form.
Here how you do it:
Create the divs for the squares on the field.
Assign each of them a unique id e.g.
id="square-1"
and give them a common class e.g class="field-square"
Create the divs for the squares outside the field. Give them a common class, and a unique id for each.
When you drop the squares, have a function that extracts the ids when they are dropped.
Then simply post them to your PHP site with jQuery.post()
Update
To extract the ids, in your callback (after you have dropped the square) do something like this:
square_id = square_id.replace('square-', '');
Since you've not assigned number ids (which you should, so that you can easily change the players in future by getting them from a database), you can simply get the ids using $(this).attr('id') in your callback.
Also look up http://api.jquery.com/jQuery.post/
I wouldn't even think about dragging and dropping at this point. Outline what the minimal viable product would be and come up with a set of steps to do that.
Going off the data you provided I would suggest something like this...
1) Build an html form that list simply a list of all the positions and a dropdown of all the possible players that can fill that position.
2) Fill out the form (select the players) and on form submit get the data echo'd as an array.
3) Create the graphic...I see two approaches....(1) server side (GD or Imagick are probably what you are going to want to use) or (2) CSS/html images
Either one will a fine approach....this step should probably be broken into little steps...start with simply displaying a list and an image of the player next to it...
HTML would be
echo "<img src='/images/players".$_POST["position1"]."' alt=''/>";
//(NOTE YOU HAVE TO CLEAN ANY DATA YOU ARE OUTPUTTING PROPERLY)
Imagick would be something like..
$bg = new Imagick("/images/bg.jpg");
$position = new Imagick("/images/players".$_POST["position1"]);
//Second image is put on top of the first
$bg->compositeImage($position, $position->getImageCompose(), 5, 5);
//new image is saved as final.jpg
$bg->writeImage('final.jpg');
I'm new here and I'm very new at programming but I need some serious hand-by-hand help here.
I was searching jquery and found a script to drag and drop stuff on the screen, basicly i just want to move some divs around, thats the easy part, the script I found has a callback function that writes onto the div that you just moved "dropped", this is exactly what I need but instead of writting dropped I want to save the 2 postion variables into a database (mysql), this is so that if I close the browser and open it again the div's will be on the last place I dropped them.
Can you help? Is there a jquery user interface with this already built in ?
I think this is easy to do with jquery ajax functions right? basicly I should send the serialized data (json right?) into a page that processes that data once its feed into it, then jason returns the handler with success or even with some output right?
It would be cool for the dragabble div to have a handler with last know position retrieve by jason from an external page that acts like a buffer to the database.
Is this the correct pipeline?
Best Regards
Joricam
you have kind of a vague question here, but I can try to help you get closer to the answer.
Imagine two sides of the puzzle:
When the page loads, the two (or more) DIVs are drawn on the screen. If you want them to draw in a specific order, you need to keep track of that in the database. So be sure your db has a field called something like display_order, and then display the DIVs in that order. (You can usually just add ORDER BY display_order to the SQL, so they are retrieved in the order you want, and then draw the DIVs right out in a loop.)
When someone drags and drops a DIV, you use AJAX/JSON/etc to tell your PHP script the new order. In this case, when that happens, rather than draw the word 'dropped' in the DIV, you should instead immediately update the display_order fields in the database. This way you are remembering each DIV's position.
Does that help/make sense?
UPDATED: thinking more about your question, here is the pseudo code:
in "display.php":
Fetch the contents for each DIV from the database, with ORDER BY display_order on the rows.
Draw them on the screen, looping through each database row.
Also in this HTML, use the jQuery script you already have to call another PHP script (dragged.php) when a row is dragged.
in "dragged.php":
This script is called when a row is dragged on the screen.
Currently it puts the word "dropped" in the DIV that is dragged. That's not helpful, so remove that.
Instead, you now know (from the variables passed to you) that a specific DIV needs to be in a specific place.
So grab a list of the DIVs from the database, then change the order of them (by altering the display_order column) based on the new position(s) you know.
Save that back to the database, so when display.php is called again next time, it draws the DIVs in the order you want.
Hope this helps explain further. If you are still struggling, I respectfully suggest you try to write the code, and post a more specific question about the part that you're stuck on. This will help you get a good answer quickly. (You may also want to Google this one a lot; I'm sure there are code samples out there showing how to do all this.)
Interesting problem: I want our sales staff of 3 to use the same master PDF (strictly on our own server from within our intranet) to create a unique document set for each client of our business, which document set includes a contract.
A state regulator randomly audits our supply of contract forms, and assesses a fee for each missing contract, so the contracts must be sequentially numbered with no apparent gaps. I want the "Finalize Contract" button in my PDF to run an Acrobat JavaScript that posts a request to a webservice written in PHP, which webservice should connect to a MySQL table, autoincrements the number in in question in the table, and return the value to the Acrobat JavaScript for assignment to the proper field.
I have done enough research to know what I want to do. I am enough of a coding virgin to not know the nuts and bolts of how to do it. I can take PMs on this for an open dialogue off the board if you wish, just need to get it done.
You might want to have a look at JQuery and it's Ajax function for the part of retrieving PHP data from JavaScript: http://api.jquery.com/jQuery.get/
Regarding the PHP part, you want to connect to a database and fetch and update some information. This might help: http://de.php.net/manual/de/function.mysql-query.php
Problem:
I don't know the simplest way to allow a single web viewer to update data in a text file on a server. (ie. only 1 person will be changing the data.)
Objective:
To make a prototype web application just one person needs to input in the start and end dates of new assignments and locations of staff and the whole company can visualize the information on a GANTT chart, probably using this Jquery libary.
Constraints:
My data is about the equivalent size of 1000 of these javascript list of lists like
*data = [["John Smith" , "assigment" , "1/1/10", "1/1/11", "Peru"],[...],...]*
Employee assignment data must be on an internal server.
I can't use a database (such as SQlite or MySQL).
I can only use PHP, Javascript, and jQuery.
Fact: Javascript cant directly change a data file sitting on the server.
My tentative fuzzy solution:
On client-side: use jQuery getJSON() to pass the data back and forth between dataReadWriter.php.
On server-side: dataReadWriter.php modifies a PHP array as well as writes modified data and reads JSONdata.txt stored in a text file on our internal server.
Given the constraints, it can't be done a lot smarter than what you are suggesting. One thing though, you shouldn't overwrite the only file containing the data, at least switch back and forth between two files, and make sure that your program does not overwrite the other file if one of the files show any signs of being damaged. You can use a PHP session to keep track of which file is the most recent, but better have some in-file timestamps as a fallback.
Is there anything in particular that you worry about?
I have a MySQL Database of more or less 100 teachers, their names, and their phone numbers, stored in tables based upon their department at the school. I'm creating an iPhone app, and I've found that UITableViews and all the work that comes with it is just too time consuming and too confusing. Instead, I've been trying to create a web page on my server that loads all the data from MySQL and displays it using HTML, PHP, jQuery, and jQTouch for formatting.
My concept is that the separators will be by department, and the staff will be sorted alphabetically under each department. On the main page, each person's name will be clickable so they can go to ANOTHER page listing their name, email address, and telephone number, all linked so that the user can tap on the email or number and immediately email or call that person, respectively.
HOWEVER, I am completely at a loss for how I should start. Can anyone point me in the right direction for displaying the data? Am I going about it wrong in using PHP? Should I opt for something COMPLETELY different?
PHP to manage the database interaction and generate HTML is fine. There are heaps of tutorials on how to do that (e.g. http://www.w3schools.com/PHP/php_mysql_intro.asp) How to make it look nice is beyond the scope of this answer, and I'd recommend you search for table/CSS examples to get some ideas of what looks good and how they're implemented. If you need interactivity such as expanding rows or changing colors, then jQuery would be an appropriate next step, though you certainly don't need more than HTML + CSS for a nice looking table representation.
What I don't know about is the auto email/call functionality you're after, and whether you can get that "for free" from whatever is rendering the HTML. That's iPhone specific, not PHP/jQuery/etc... And I'd second Alex's advice that if UITableView is the right tool for the job then you will definitely be better off in the long run just buckling down and learning it. (And going through that will probably make pickup up other parts of the API much easier to boot.)
Instead of loading my PHP in my <body>, I created a function that retrieved the data via mysql_fetch_assoc(), which added all the information and created each individual div of data AS WELL AS injecting a <script> to $.append() the list item content for each item retrieved via the mysql_fetch_assoc(). Thanks for the responses anyway!