We Keep Coding

Using a form to save/update settings in a db and build a HTML with those settings from a template

My limited experience in web development as a self-taught led me to hit a wall while trying to figure out how to deal with this problem.
I need a form (map_settings.php) where the user should enter some inputs. Those inputs must be saved in a database table (MAPS) and then used to create the final HTML file (e.g. map1.html) for that specific user/inputs.
I know how to deal with using forms and saving submitted data to a database.
What is completely obscure to me is how can I use those inputs to automatically generate the final HTML.
My idea is to have a template HTML (template.html) and each time a user saves new settings via the form, I copy the template and replace some variables inside it with the actual data the user has input in the form.
If this might matter, the variables I need to replace in the template are also JavaScript variables within a <script> tag.
Can anybody help me suggesting one viable way to do this? I am mostly using JavaScript and PHP, without frameworks. I've also red about JavaScript templating engines, but I sincerely did not get if those are useful to me in my case.
Anyway, here is an illustration of what I would need to do, to hopefully clarify better my point.

Creating a static HTML file per user is not the way to go. Instead just have a PHP script like mapdisplay.php or similar.
Make the script so that if you type mapdisplay.php?map=1 in the browser then it will read the map ID, get the relevant settings from the database for the map in question and then generate some HTML to display them - of course you can have most of the HTML ready made like a template, and just use PHP to fill in the details from the database. This idea of getting data on the fly when requested, and plugging it into some HTML is how most web applications work.
If you create a static HTML for each user it quickly becomes unmanageable with a large number of users, plus it's hard to introduce changes or improvements to the template because instead of just updating one script file, you have to back and re-do every existing page. There are other disadvantages to your approach too, but I won't continue here - you get the idea I hope.

If I were you I'll make that in this way:
Don't use template.html
Don't get data from database to new file, but from form
Make database test before make file
To make template use
$template_text = "text...text...html...text...".$php_varible."text...text...html...text";
For other things about php see w3schools

How to let 2 html pages communicate

i'm new to web tecnologies, and i'm trying to make some stuff work. I have 2 similar html pages, with the same table on them.
I have to make sure that every data inserted in the first table (editable) is replicated in the same cell of the second table (of the other HTML page).
HTML code I used is really simple, I've added some style with CSS and 3 functions with JS (add, delete and modify row). I have to replicate these changes to rows too.
I'm a bit confused, I think I have to manage this thing with a server application, maybe in php, but i don't know how to start.
I've searched this site, but I didnt find anything useful, for now.
How can I approach this problem? I want to learn these things, I am not asking you for having working code and easily solve the problem...
Thanks to everybody in advance.

You need to store the data somewhere (database, local storage, cookie, file, etc.), and read it when page loads.
The most common way is to store the data in database.
When your page loads, get the data from the database and build the table.
This is a good place you can start learning how to work with MySql database: http://www.w3schools.com/php/php_mysql_intro.asp

Angular JS library will be a simple solution to your problem.

Website design strategy: Change content or load different HTMLs

So this is kind of my first attempt at web design per se so it might be a newbie-ish question. Just to give a little background... I'm using the all time classic HTML + JS + CSS combo and Yii (PHP) as a backend with a MySQL database. I can't really tell what the site is about but the user will definitely interact with the backend and run some queries on the DB and stuff.
Right now my website is composed of 5 HTML files, each one of them has a common layout:
Header or menu with logo and user info
"Sub-Header" with a general info image and maybe some specific stuff
Content specific to that HTML file
Footer
Right now I find kinda annoying that each time I redirect the user to a different place of my site I have to check again if he's logged in, I make some use of cookies for that too, etc, etc.
I was thinking of moving my site to be a single page or template if you will and just append the (body)content of each of those files to the body of my master-page. That sounds pretty good at first thought, but are there any downsides to this or is this just how things should be done?
I've done web applications before using frameworks like Sencha and stuff and they all seem to work this way, but is this the way to go for this particular case?
EDIT
Also, what is the correct way to implement the single-page scenario?
Get all the code in one HTML file and hide the stuff I don't want to show
Remove from the view the stuff I want to hide and append the new stuff from some other HTML file.

I'm not sure I understand your situation exactly. But I think I would make another PHP file in a protected area with a function like is_logged_in() or even redirect_if_not_logged_in(). Then you can include (or require) that PHP file in the other ones and just call the function.
You definitely don't want to be rewriting the same code over and over again.

How to completely separated DOM manipulation from PHP? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have to create a website for a friend of mine using PHP. It is basically an online store.
I want to use new features of HTML5, CSS3, jQuery and other JS libraries.And I want to keep all the document generation and manipulation separate from PHP.
I have done a lot of searching on Google. People come up with MVC architecture. And that's all good.But the problem is in all the examples or tutorials that I found; people retrieve the data from the SQL based databases, and then echo or print it to generate html, or use some ORM classes to display it. I don't know much about ORM or PHP frameworks.
I have always made pet projects, small websites, nothing like this medium-sized Store.
The way I understand the MVC architecture is this:
**Model:** Basic purpose is to save and retrieve data from the databases.
**Controller:** Do some operations on the data to either store them using Model, or do some operations on the retrieved data (again using the Model), to be passed to the View.
**View:** This is used to display the user the content.
What I want to do is do almost ZERO html generation using PHP.Instead I was thinking of a approach in which :Model is used for database handling only. Controller is used to convert that data into JSON objects, and make those JSON objects available to the appropriate Views.Then using JavaScript I will do the DOM Manipulations according to the JSON objects.
Is this approach any good ? If yes how to do it (especially the part of converting the data retrieved from database to JSON objects).
If you can provide me with a better approach where I won't have to do generate html using PHP, and use PHP for front-end as less as possible.
I am doing all the front-end stuff which the user is gonna see. My friend will be doing all the database handling. I don't wanna get involved in the PHP part, and if it is mandatory (i.e. there is no way-out) then as little as possible.
Please provide me with some solution. In desperate need here.
EDIT: I am especially talking about echo and print commands. I would like to have a fresh slate to work on instead of getting the html creation mixed with PHP and JavaScript.
If NOT using these commands is not suggested based on the fact that the user may be on mobile device, or have JavaScript turned off. Then is it possible to have a simple looking website with all the data displayed if JavaScript is turned off; and if it's not turned off then remove all those elements from the DOM and make a fresh DOM with JavaScript. However the main hindrance to this is converting the data retrieved from database to JSON object so that it can be used by the JavaScript.
I don't think this is possible, but is there some way in which PHP variables can be directly used by JavaScript ?

PHP does never manipulate the DOM, the DOM is purely client side, while php is purely server-side. PHP can generate HTML, which will be sent to the client, and processed to a DOM by the clients browser.
If you want to (nearly) completely split it in two parts, you could split it into an API server (php & database) which will provide a RESTful JSON-API and a content server, which will provide your static HTML, CSS and Javascript files.
The Javascript on the content server will connect to the API server with AJAX get and post requests to retrieve and send data to the database.

Yes, it's entirely possible to do what you're describing. You'd use static HTML files for the basic page setup, the usual CSS and images and such, and your PHP would only be used to generate JSON to return to the client and get used by JavaScript. So for instance:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Example</title>
</head>
<body>
<table id="theTable">
<tbody>
<tr><em>Loading...</em></tr>
</tbody>
</table>
<script src="yourscript.js"></script>
</body>
</html>
yourscript.js:
getDataViaAjax("data.php", function(data) {
var table = document.getElementById("theTable");
// ...fill in the table using the information from `data`...
});
data.php:
<?php
// Get data from somewhere
// ...
// Output it
echo json_encode($theData);
?>
Obviously the table there is just an example. You'd probably have much more static content, and a few places where you wanted to add dynamic content.
This is a perfectly feasible approach, and the separation of concerns helps as the team expands.
However, note that if you do this, any page that has content from the DB will result in two HTTP requests to the server (one to load the HTML, the other — which won't start until after the first one is at least partially finished — to load the data) rather than one. In general, the goal is to minimize HTTP requests. So there are trade-offs.
I don't think this is possible, but is there some way in which PHP variables can be directly used by JavaScript ?
Correct, that's not possible. There are frameworks like Meteor (that one isn't PHP-based) that handle the middle layer for you, though, and make it seem a lot like that's happening.
You can also look at tools like AngularJS and KnockoutJS that can bind your JavaScript data objects to DOM elements, saving you a huge amount of manual update code, or even just things like Handlebars that render templated stuff for you.

I think what you are looking for is a client-side template engine, where the document is built client-side using ajax queries. The ones I have heard good things about are Handlebars and Mustache, though I'm sure there are others to choose from.
But even with such a solution, I imagine that some amount of server-side HTML needs to be output to "prime the pump", in which case, you would want to consider a server-side template engine like Smarty or whatever the latest-and-greatest equivalent is. With a server-side template engine, you would write the templates as standalone files (like .tpl for Smarty) and PHP would consume the template as an object and then pass in any unique variables for the template via the template-engine's methods and then you would call the display method for the template.
In either scenario (or a combination of both) you are separating your final HTML output from PHP so that PHP is interacting with the templates rather than doing plain echo "<div>This looks so Web 1.0</div>"; which I think is what you are trying to avoid.

How is it possible to call data from an xml document into an html page?

I'm new to web development but from what I've learned so far, I'm sure what I want to do is super easy. I just haven't quite figured it out, yet.
I have an app that pulls external html pages. These pages all pertain to grain prices. I have about ten pages or so and currently to change the prices I open each page, find the prices and manually change them. What I want to do is just have all the pages pull their prices from the same document (I'm assuming this will have to be an xml or txt document) so that I just have to update that one external document.
The external document will be hosted on the same server as the html pages.
This seems like something I should be able to do simply with javascript and Ajax and I have seen many examples using just that. The thing is that in all of the examples I've seen, the ajax calls an entire text document instead of just one piece of it.
For example, I have an html page called Northern Alberta Prices and it lists about six different grain prices. I want that page to call the external document (let's call it prices.xml) and get all the northern Alberta prices off of it and put them in their proper places on the html page and then I want the Central Alberta Prices page to also call prices.xml and take the relevant prices off it etc.
What would be the best way to do this?
(I'm not able to use PHP on my server at the moment but any answers involving PHP would still be welcome.)
Thank you for your time.

You'd have to call the entire document and then interact with the specific node in the XML
without the actual schema there's not much more help I can give you, although there is an ok tutorial here:
http://www.sitepoint.com/server-side-xml-javascript/
which will help you understand the core concepts behind data manipulation

Yes, to use XML with PHP you can do this:
http://php.net/manual/en/simplexml.examples-basic.php
That pretty much says, you can do this:
<?php
include 'example.php';
$movies = new SimpleXMLElement($xmlstr);
echo $movies->movie[0]->plot;
?>
... Which will get the Plot attribute from the first movie node. Please let me know if you have any additional questions.
Edit: One more option I came across was using jQuery (javascript):
http://think2loud.com/224-reading-xml-with-jquery/