I have a website with a jQuery UI navigation, and I've got ajax working to dynamically change content between html files. I'm basically just replacing the contents of certain div ids with the contents of other div ids.
This still requires numerous HTML files and I was wondering if there was a way to have a single html file and load content into the main page from it instead? What about an xml file?
Thanks for the tips and advice about best practices and possible solutions.
Using HTML:
Template Views-- Using this method you create separate html files for each piece of your site that you want to be able to load dynamically. This is More efficient, but it means you need to be able to manage your files properly.
Single View-- This method involves loading the entire page again, and extracting out the desired data in order to update the page. This is not very elegant or efficient, and I don't recommend it.
Using XML/JSON
This usually involves making ajax requests for data and using it to render the page on the client.
XML/JSON is typically more lightweight than html markup which decreases the amount of cpu time and bandwidth used on your server, however it does require that your users have computers that can handle doing some DOM manipulation.
This also requires that you have a good way of organizing your ajax modules. A pattern that I use looks like this.
$PROJ_DIR/ajax/{MODULENAME}.php
Then a module with the name calendar might accept an actions like, getYears, getTerms, setCurrTerm.
And within that script you switch thought the action to output the correct data, and or make the correct DB changes.
Multiple html files for views isn't a bad thing if you've structured it nicely.
Related
I'm quite new to web developement and I'm working on a school project where I am to create a simple educational video platform. My upcomming task is to make my site a single page application. From what I've gathered, jQuery and AJAX will make this happen. While browsing examples and tutorials about these languages, I'm starting to wonder if my HTML/PHP/Script code structure needs to change. Picture contains the typical structure of my files.
I've been writing the PHP and HTML in the same .php file for each job the site has to do (e.g. upload video form data). I've included all of these in my main.php file. To make it a single page application, will I need to separate HTML and PHP from each include file, into different files? Also I'd like some feedback (opinions) on how I've structured this so far.
The high-level of what you want to do is move your php logic out of your html files. Here's how a single-page app should handle data flow:
In file.HTML: forms and fields take user input (anything from text to files)
In file.JS: You use jQuery to listen for events that are happening, essentially using your page's dom elements to pass dynamically entered data to your server through AJAX calls
In controller.php: The ajax call goes to a method in one of your controller files where all your logic will happen, items will be added to your database, etc.
In file.JS: The ajax call finishes by receiving data from your controller method, and makes the necessary changes to your view file (again using jQuery)
In file.html: The jQuery updates show a user the results of their input
The big change to make is separating your php and html files. Since you're doing a single-page application, you can probably get away with one html file, but you should have generally have a controller for every class (assuming you are using class and model interchangeably).
One thing that also might be missing is routes, though I've seen people getting by passing files as the 'url' field (a required field when making an AJAX call).
As far as file structure, most web frameworks will pair cs and js folders into a parent folder called public.
When it comes to jQuery, this is the best cheat sheet around. Make sure you have at least a basic understanding of the dom before going in too deep though.
You may want to learn about MVC pattern
you can start here
The MVC Pattern and PHP
Our company allows its clients to view reports via our website. The pages are php based and the data is collected from MySQL. These reports were written a long time ago and include inline css. The pages themselves look fine, but the print version is lacking. I want to take the reports and create visually appealing "printable" pages that contain our branding.
I have found three solutions so far.
#Media Print Stylesheets
This is the easiest method, but does not give me complete layout control. I want landscape mode and need to control where the page breaks occur so this method has been eliminated from my list of possible solutions. The reports are built by looping through PHP data, so while I can always put a page break after a or for example, I can't stop the page from breaking before it gets to the next set of data.
TCPDF/FPDF
From what I have seen these classes will give me all of the control I need to customer a PDF. The challenge is that this appears to be a little more advanced than my programming skills require, and all of the inline CSS contained within the HTML tables may throw off formatting.
FDF
I am leaning towards this method if I understand it correctly. First I would create a PDF form and define all of the fields to be populated by the MySQL data. Then I would create a FDF file that would populate the form template with the data from the database. It seems easier to me to create a visually pleasing form via PDF and then populate that form using this method, rather than create the entire pdf from scratch using method 2.
Does it sound like I am on the right track? Are any of these methods "easier" than the other?
Any help is greatly appreciated.
TCPDF has the most control of each page which is what I am looking for. It is extremely sensitive when writing HTML, but that is the only downside I have found so far.
There's this excellent answer on SO already.
If you're looking for easy, my money is on mPDF. I found it to be the easiest, and essentially an out-of-the-box solution (often zero server configuration to do).
I think you should try out wkhtmltopdf.
https://code.google.com/p/wkhtmltopdf/
As for the TCPDF/FPDF pagination issue, you can see this other question for the solution provided and use the flow in it to sort yours out.
TCPDF / FPDF - Page break issue
Just found this other solution as well and think you'll need it
Convert HTML + CSS to PDF with PHP?
For me personally, FPDF works great to fetch data from my database, insert into the FPDF class and dynamically create PDF's for customers.
I see some people want to write HTML/CSS to create PDF's but you will always have
differences as the browser parses the HTML/CSS differently than when using it in PDF's.
When using FPDF's built-in method's, I have been able to get exactly what I wanted
and haven't seen any issues (yet).
I have a js file that has the code for navigation for a site with ~600 pages..
Now I want to change the menu(colors, background, links etc) and I don't want to edit the JS file as the code here is like using images for the menu..so I was thinking that I will create a php file or html file and then call it inside that js file. Is this something possible?
Please advise.
You could have the js render an iframe instead of an img and pass along the url to the php/html.
You need to understand the difference between PHP, HTML and JS. They each occupy a different domain in web programming. PHP is for server side logic, HTML is a structural language and JS is an action-oriented language intended to function on top of the HTML that exists in the page (and may be rendered in JS).
All programmers have at one point tried to "hack" code like you are doing, by trying to find a band-aid fix to a complicated solution. It is not worth it. You will lose performance in the best of cases and either fail outright or lose browser compatibility and user interface quality the vast majority of the time.
In short, take your time and edit the JS. You can always do a find/replace on images to strip them out and insert CSS class declarations in their place. Do it right and you'll save yourself a big headache later on.
I have an application using Jquery's UI Tabs for an overall menu, and they're great. However, I've come to a strategy question when implementing the new format.
First, the concept:
An index.php file includes several class files (also PHP) and calls the tabs
Each tab pulls in one file per page via the script's "ajax loading" feature (As described here)
Each tab's page contains a combination of static text, content loaded server-side at display, and content that's dynamically updated via jQuery's Ajax.
Now, the challenge:
Everything is working as expected except that pages that are pulled into the tabs don't have access to the aforementioned included php files on the index page. I'm able to use that content if I do a separate includes on each of the ajax included pages, but that could get out of hand in a hurry. So, I'm seeking a strategy to get one set of included files to persist across all my pages.
Any ideas for a graceful solution to this challenge?
PHP (well, the entire web) is stateless, meaning once the PHP interpreter has parsed a file, it spits it out and is done with it. There is no way for it to persist includes parsed in one instance to another instance.
The only way for the pages to gain access to files included in the "main" page is to include those files themselves. Like you said though, that could get out of hand and be pain-staking to maintain, which is why a lot of people resort to a registry file. Your registry file loads the includes you need, and you only need to include the registry file on all of your pages.
I have found some libraries or web services in PHP that does the job. The problem is that the conversion is done when the page is fully loaded, I would like to convert the page to PDF after some content dynamically added via AJAX in onload event.
Thank you very much,
Omar
You could post back document.getElementsByTagName('html')[0].innerHTML to the server (possibly using AJAX) and generate a PDF from that.
When you add content with AJAX, that's only happening on the client's machine, so the server-side PHP conversion code will not work with it. You'll need to come up with a server-side method of including the dynamic content if you want to do the PDF creation on the server.
You could possibly implement an AJAX call that sent the page content/state back to serverside, after the dynamic contens is added, where it could be rendered as a pdf. You might not need all the page, depending on where this "dynamic content" is going to go.
Seems a bit messy, but without knowing the project it's hard to say whether there could be a cleaner method to do what you're trying to do.
This is a client-side requirement due to the Ajax situation. If they're using a Mac they can simply save as PDF but otherwise you have little control over what they can do.
What you can do however for a server-side implementation is keep a record of the page and all their AJAX requests since loading that page, and construct the HTML and PDF on the server from that record if it is requested. Of course this is not a simple task and quite overkill. You'd probably be better off having a different mechanism to create a server-side PDF report of a page other than turning HTML into PDF.
If your page can be updated solely on the client with no trip to the server, you'll have to post back up to your app. That way you'll have all the content and will not have rebuild, which would not be possible if there are client side only interactions.
Wow, thank you everyone I didn't know that this is comunity is so active. To answer Beepcake about the project:
When the page loads the app retrieves, from more than 40 servers, biological information via AJAX request, then a unique view is displayed where you can manipulate the graphic with many options.
So, the cool thing will be to print when the user makes his own version of the graphic. I think that the best solution is to POST the entire HTML with document.getElementsByTagName('html')[0].innerHTML as RoBorg has said and then generate the PDF with a library such as dompdf