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

Combine PHP file and page - Wordpress

I am just wrapping up a long term project I have done for a company, but I am really stuck at this point.
I have a cool little page here: http://hagen-etc.com/test/buy/
It is basically showing all their retailers in the right hand side div while you can narrow down the results with the different options on the left side (Javascript based).
Everything works just fine, but I have run into a problem. The thing is, the person I am developing the site for has absolutely zero knowledge about programming and website managment etc, and therefore I need a smart way for her to change it.
I have simplified the procedures several other places on the website using shortcodes with Visual Composer and Shortcoder-plugin.
The problem here is, The Javascript is in footer.php while the actual content is on a Page in the dashboard. How do I make a smart solution so she can easily manage this in a blink of an eye? You can take a look at the source code in the link above if you would like to.
Would love to get some help on this because I am having a hard time figuring out a solution. Maybe a plugin can even do this?
The different areas, countries, cities and retailers are written in HTML in the Page while reas, countries, cities and retailers are written in Javascript in the footer.php. I know I can move the Javascript over to the Page, but the problem is, she would still have to change both the Javascript and the HTML.
I would like it to work with Shortcodes in a structure like this:
[countryopen]
[areaopen]
[cityopen]
[retailer][retailer]
[cityclose]
[areaclose]
[countryclose]
How would I go about this? The HTML would be in the top of the file while the Javascript would be in the bottom. I cannot really change both things with just one shortcode. How would I do this or is there even a better solution?

So essentially you are trying to allow this person to manage locations? You can use Advanced Custom Fields for WordPress and/or custom posts types for WordPress.
I would use a combination. Create a new custom post type in your functions.php and then, after installing the ACF plugin, create Location, Area, City, and Retailer fields and assign them to the new post type.
Similarly, in the index "Page" that you are working in now, you can create a query to dump any of these Locations onto the page.
I hope this helps. Let me know if I missed the point here, the question is still a little unclear.
UPDATE: There are many great tutorials that will walk you through creating a custom post type in your WordPress theme. WPBeginner and Smashing Magazine do a really good job of bringing you through this step-by-step. It will be very helpful for you to know how to do this and to understand this as a basic part of WordPress's Model-View-Controller system, here you are creating new views for your users to interact with.
After creating your new custom post type, which will seem like any other post/page in the Edit view, you can use the ACF plugin to easily add new fields to this new custom post type:
In the second section called "Location" you can define what type of posts these fields should be appended to. You would make these inputs says:
Post Type is equal to [Your New Post Type]
Your new post type being "Locations" or "Retailers" or however you want to phrase that. Now, when you check out the Edit view of a new custom post type, you can see these new fields appended to the bottom. Lastly, you may want to remove any field that you wouldn't want your web manager adding information into like WordPress' native Description or Excerpt inputs. You can do this by adding a few lines to your functions.php after you have created the post type:
add_action('init', 'remove_editor_from_retailer');
function remove_editor_from_retailer() {
remove_post_type_support( 'retailer', 'editor' );
}
Granted that "Retailer" is the name of your custom post type.

You can't have a user updating data in a javascript file.
So what you need to do is split the data off from the functionality.
To do this, put a script tag in one of your Wordpress template files, and output the area, country etc. data there as a Javascript variable.
You can manage and fetch this data using any Wordpress method of your choice. Anything that allows the user to update data in the admin area which you can then output in your plugin will work. So a plugin, a shortcode on some specific post, etc. are possibilities.
Then, in your existing Javascript file, remove your hardcoded data and instead pull it from that variable.

Strategy for making React image gallery SEO-friendly

I wrote a React image gallery or slideshow. I need to make the alt text indexable by search engines, but because my server is in PHP, React.renderToString is of limited use.
The server is in PHP + MySQL. The PHP uses Smarty, a decent PHP template engine, to render the HTML. The rest of the PHP framework is my own. The Smarty template has this single ungainly line:
<script>
var GalleryData = {$gallery};
</script>
which is rendered by the PHP's controller function as follows:
return array(
'gallery' => json_encode($gallery),
);
($gallery being the result table of a MySQL query).
And my .js:
React.render(<Gallery gallery={GalleryData} />, $('.gallery').get(0));
Not the most elegant setup, but given that my server is in PHP there doesn't seem to be much of a better way to do it (?)
I did a super quick hack to fix this at first shot - I copied the rendered HTML from Firebug, and manually inserted it into a new table in the DB. I then simply render this blob of code from PHP and we're good to go on the browser.
There was one complication which is that because React components are only inserted into the DOM as they're first rendered (as I understand it), and because the gallery only shows one image slide at a time, I had to manually click through all slides once before saving the HTML code out.
Now however the alt text is editable by CMS and so I need to automate this process, or come up with a better solution.
Rewriting the server in Node.js is out of the question.
My first guess is that I need to install Node, and write a script that creates the same React component. Because the input data (including the alt text) has to come from MySQL, I have a few choices:
connect to the MySQL DB from Note, and replicate the query
create a response URL on the PHP side that returns only the JSON (putting the SQL query into a common function)
fetch the entire page in Node but extracting GalleryData will be a mess
I then have to ensure that all components are rendered into the DOM, so I can script that by manually calling the nextSlide() method as many times as there are slides (less one).
Finally I'll save the rendered DOM into the DB again (so the Node script will require a MySQL connection after all - maybe the 1st option is the best).
This whole process seems very complicated for such a basic requirement. Am I missing something?
I'm completely new to Node and the whole idea of building a DOM outside of the browser is basically new to me. I don't mind introducing Node into my architecture but it will only be to support React being used on the front-end.
Note that the website has about 15,000 pageviews a month, so massive scalability isn't a consideration - I don't use any page caching as it simply isn't needed for this volume of traffic.
I'm likely to have a few React components that need to be rendered statically like this, but maintaining a small technical overhead (e.g. maintaing a set of parallel SQL queries in Node) won't be a big problem.
Can anyone guide me here?

I think you should try rendering React components on server-side using PHP. Here is a PHP lib to do that.
But, yes, you'll basically need to use V8js from your PHP code. However, it's kind of experimental and you may need to use other around. (And this "other way around" may be using Node/Express to render your component. Here is some thoughts on how to do it.)

Lazy Loading templates in Meteor

I use require.js to do lazy loading for a Javascript app. I would love to switch to a meteor stack but right now it looks like Meteor sends the whole app (all the templates) through on the initial load. Has anyone had success with require.js and meteor or any other implementation?

You're asking different questions, but certainly they are connected. The first is about loading additional javascript code into your meteor app. Of course you can use thing like requirejs. This should work fine supposing your lazy code is located in the public directory of your meteor project. However, my experience is that requirejs goes mad when the contents of public gets updated often, so for example in the development environment. Maybe it's a matter of customizing the library, but I would rather recommend using some lightweight homebrewed package. Look here, if you need some inspiration.
The second question is about lazy template definition. Each template consists of two parts. The first is its html code, written in handlebars syntax, the second is all the javascript code which you write to define how your template should behave (e.g. helpers, event handlers). The second part is easy, as long as we assume that we already know how to load the lazy code (see the above paragraph) and the template, lets call it myLazyTemplate, is already defined, so basically speaking Template.myLazyTemplate is not undefined. So how to achieve the latter?
To dynamically define a new template you'll need to call
Template.__define__(name, raw_func)
on the client. So the last question is "what is raw_func?". This is a compiled version of your html code which is normally created automatically on the server and then sent down the wire to the client when the app gets loaded (look here to see how it's done in meteor). But we want to do it dynamically, right?
So the idea is to compile the template code manually with a help of the Handlebars.to_json_ast routine. You can feed it with your template html code, and the output is some javascript array that can be sent to the client anytime by the method we've already talked about. The last thing you need to do is to call Handlebars.json_ast_to_func on the client, using the data sent from the server as the only argument. The output produced by Handlebars.json_ast_to_func is the raw_func you can use to produce myLazyTemplate template.
I'm aware that this is only a rough idea, not the whole solution to your problem. I hope this will help you to figure out the final solution on your own.

Durandal: pass parameter to view request url

I know this question might trigger some reactions of the type "View-model separation is good". So please be aware that I am aware of that :).
So, when activating a route, Durandal obtains a view by doing a very simple get request, just using something like "view.html" in the get url.
Question: is it supported to add a parameter to the url? So as to have: "view.html?id=4".
I know it's not the point but I want to do it anyway. Why? Because currently, an important part of the js code happens in the viewAttached method. I am using a js library for adding stuff to the page, that needs access to the dom. So when reaching the page, one can see modifications taking place, and it's not nice to see the page changing like that. So I'd prefer that stuff to happen on the server, using a .Net control.
Thanks,
Nicolas

I think that you can find all the information that you need in this other question: Pass data in DurandalJS to other view