Firstly, thanks for taking time to view my post. I am working on a project with a few people, and we basically have a webpage, and once you log in, it displays all the data from a mysql database which has 6 tables, 3 of which have data in them. We figured out that in order for us to go about this, we need to transfer data by exporting the data into JSON file(s), then from there load the JSON files into java script so it can communicate with the web server. We were wondering what would be the best way to go about this. One way we found out is to reference the JSON ddata as variables and just list everything out, but several of our files have loads and loads of data. Would there be an easier approach?
This would be the first time we are doing something like this, so we are learning and appreciate your feedback!!
If you're using some kind of AJAX library, you can easily request the .json file from the browser.
For example with jQuery:
$.post("ourJSONFile.json", function( data ) {
..logic to display data..
});
NOTE - The comment about no PHP was not posted while I was writing this. Until I know why there can be no PHP, I'm just going to leave this answer here.
I think you're going at this in the wrong way. There is no need for JSON here, just query your database for the information.
The overview of what you need to do is (in PHP or the language you use to talk with your server) you need to
connect to the database
query database for information (query in your case, more or less means get the information)
do something with the returned information (such as echoing it in PHP so it will go to the user)
Now, it doesn't look like there is much effort place for getting this done, only planning. So, I'll just show you a few links to read up. (Which is also why people has devoted your question, Stackoverflow doesn't like asking question with no effort to research answers)
I'd use php.net for looking up methods, such as the mysqli_query method. This is very useful for learning small but important things about the method, like what it returns when an error occurs.
http://php.net/manual/en/mysqli.query.php
Taking a quick look through this guide, I think it should suffice. Besides syntax and such, some other important points are use MySQLI (when using PHP 5 or higher) and use prepared statements.
http://www.pontikis.net/blog/how-to-use-php-improved-mysqli-extension-and-why-you-should
The use of prepared statements is to protect your queries from injections. w3schools gives a good explanation about this # http://www.w3schools.com/sql/sql_injection.asp
MySQLI is MySQL Improved, it is more secured and supported. MySQL has been deprecated since PHP 5, and php.net pages on a MySql method will actually say this at the very top.
Finally, Andrew mentioned AJAX. AJAX is (for example) a way of doing things that would normally require reloading the page, without reloading the page. There is more to that, and I would recommand looking into it once you get use to the languages you are using.
Note, AJAX does not require libraries to use, it can be done with pure javascript. Libraries simply (as seen around) simplify AJAX a lot.
Related
I know I might be asking something quite simple but for the life of me I can't seem to get my head around this and I'm definitely overseeing something simple but I don't know what. Any help would be very appreciated.
I'm generating a static site using Hugo. On one of my pages, I want to create something like a progress bar, using a variable which I need to get from a file from a Github Gist.
Say this is the gist: https://gist.github.com/bogdanbacila/c5a9683089c74d613ad17cdedc08f56b#file-thesis-words-txt
The file only has one number, that's it. What I'm asking is how to get that number from the gist and store it in hugo or at least just display it in some raw html. I want to mention that I'm not looking to use the provided embedded text, I'd rather just get the raw value. At the end of the day all I need is to read and display the number from the raw link here: https://gist.githubusercontent.com/bogdanbacila/c5a9683089c74d613ad17cdedc08f56b/raw/8380782afede80d234209293d4c5033a890e44b6/thesis-words.txt
I've asked this question on the Hugo forum and that wasn't very helpful, instead of providing me with some guidance I got sent here. Here was my original question: https://discourse.gohugo.io/t/get-raw-content-from-github-gist-to-a-variable/38781
Any help would be greatly appreciated, I know there's something very obvious which I'm not seeing, please guide me to the right direction, this doesn't feel like it should be that complicated.
Best,
Bogdan
You could fetch this data and store it in Hugo as a data file but I don't recommend it.
Since Hugo is a static site generator, you would need to not only modify the data files in your repo every time the value changes, but re-build your site as well. Then you have to worry about running the script on a schedule. Meaning you can't be sure that the value is current the second someone visits your site. This is more headache than it's worth in my opinion.
The better route would be to write some client-side JavaScript that makes a call to the raw URL of the gist to get the content. This is Hugo-agnostic which is why I suspect you were pointed here.
From the Gists API docs:
If you need the full contents of the file, you can make a GET request to the URL specified by raw_url.
You can use something like the Fetch API for this or any other JS client. Simply make a GET request to the URL, parse the value from the response body, and write some JavaScript to insert the value in the DOM when someone makes a request to the page it's on.
#wjh18
Cheers! I didn't know about GET requests so I had to dig around for that a little bit but I managed to get it going with this:
<script>
fetch('https://gist.githubusercontent.com/bogdanbacila/c5a9683089c74d613ad17cdedc08f56b/raw').then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function() {
console.log("Booo");
});
</script>
I am making an on-line shop for selling magazines, and I need to show the image of the magazine. For that, I would like to show the same image that is shown in the website of the company that distributes the magazines.
For that, it would be easy with an absolute path, like this:
<img src="http://www.remotewebsite.com/image.jpg" />
But, it is not possible in my case, because the name of the image changes everytime there is a new magazine.
In Javascript, it is possible to get the path of an image with this code:
var strImage = document.getElementById('Image').src;
But, is it possible to use something similar to get the path of an image if it is in another HTML page?
Assuming that you know how to find the correct image in the magazine website's DOM (otherwise, forget it):
the magazine website must explicitly allow clients showing your website to fetch their content by enabling CORS
you fetch their HTML -> gets you a stream of text
parse it with DOMParser -> gets you a Document
using your knowledge or their layout (or good heuristics, if you're feeling lucky), use regular DOM navigation to find the image and get its src attribute
I'm not going to detail any of those steps (there are already lots of SO answers around), especially since you haven't described a specific issue you may have with the technical part.
You can, but it is inefficient. You would have to do a request to load all the HTML of that other page and then in that HTML find the image you are looking for.
It can be achieved (using XMLHttpRequest or fetch), but I would maybe try to find a more efficient way.
What you are asking for is technically possible, and other answers have already gone into the details about how you could accomplish this.
What I'd like to go over in this answer is how you probably should architect this given the requirements that you described. Keep in mind that what I am describing is one way to do this, there are certainly other correct methods as well.
Create a database on the server where your app will live. A simple MySQL DB will work, but you could use anything. Create a table called magazine, with a column url. Your code would pull the url from this DB. Whenever the magazine URL changes, just update the DB and the code itself won't need to be changed.
Your front-end code needs some sort of way to access the DB. One possible solution is a REST API. This code would query the DB for the latest values (in your case magazine URLs), and make them accessible to your web page. This could be done in a myriad of different languages/frameworks, here's a good tutorial on doing something like this in Node.js and express (which is what I'd personally use).
Finally, your front-end code needs to call your REST API to get the updated URLs. This needs to be done with some kind of JavaScript based language. jQuery would make this really easy, something like this:
$(document).ready(function() {
$.Get("http://uri_to_your_rest_api", function(data) {
$("#myImage").attr("scr", data.url);
}
});
Assuming you had HTML like this:
<img id="myImage" src="">
And there you go - You have a webpage that pulls the image sources dynamically from your database.
Now if you're just dipping your toes into web development, this may seem a bit overwhelming. But I promise you, in the long run it'll be easier then trying to parse code from an HTML page :)
Here is how I am getting event information from my database into FullCalender, using PHP:
Query database for event information.
Place that information into an array and make my formatting edits, add colors, whatever.
Use json_encode to put array into JSON format.
Write the file to my server as "results.json".
Then in my javascript I use this file to fill my Calendar object:
$('#calendar').fullCalendar({
events: 'results.json'
});
So that all works great.
Here is my concern:
What happens when I have multiple users?
Jim is going to query the database for his events.
Those events are going to be written to results.json.
At the same time, Sue may open the page and query the database for her events.
The code is going to overwrite results.json.
Who knows what events are going to show up on their calendar!
I see some suggestions about using socket.io, but there are other articles suggesting that people should be moving to use WebSockets. And I understand that these are supposed to help with real-time applications.
But I'm not following a chat session that is being updated real-time. I have many users that are accessing their own data. Does that mean that every user needs to have their own JSON file? That seems... yucky. Should this file be saved to their local device? That seems full of permission issues.
Any advice?
Many thanks to Roljhon and Archer, who pointed out that I'm asking the wrong question here.
The short answer to the question above is:
NO, you should not be saving a file to the server with data that is going to change and be different for each user. There is a better way.
The REAL question is, once I have my data in a PHP variable, how do I get it to JavaScript?
There is a very good explanation here: How to pass variables and data from PHP to JavaScript?
This explains how to use AJAX, or use the DOM in Javascript, or simply echo your PHP variable into a Javascript variable. (Did NOT know you could do that.)
I have an asp.net website, but I need to pass stuff to javascript to do stuff there. At the moment, I am doing things like this:
<script type="text/javascript">
var userHasMicrositePhoto = '<%=hasMicrositePhoto%>';
</script>
But I've been told that putting lots of script tags in like this is bad, and also its annoying to have to keep writing Properties in my code behind.
What is a better way to do this?
This is pretty much the ideal way to go IMO. If you have a lot of stuff like this, try putting it all in one <script>block. You could also use an array to reduce the code overhead, or have asp.net output a JSON encoded array with all the needed properties in it.
Depending on your architecture, you could consider fetching those properties through a separate Ajax request which would make the page body a bit cleaner, but it would be an extra request that can't be cached, so I would use this only in very extreme cases.
The same applies to embedding a separate <script src=....> it looks nicer in the generated markup, but needs another request to the server.
The only alternatives would be
write a page that generates AJAX and have your JavaScript access
that with XHR
write a page that generates JavaScript and have your
HTML access that with a single script tag
I don't think either of those solutions are obviously superior to what you're doing now, except they could be used by other pages more easily, if that helps.
I would use JSON when you're passing information to be used by javascript.
This may require you to reconsider how you're developing your website or application. I usually use it when the server is passing information via ajax but ajax isn't the only solution.
http://code.google.com/p/aspjson/
http://www.json.org/
I may not quite understand your question though so forgive me if I am totally off.
I have a page where I need to create a large amount of HTML that's not already present in the page.
Using jQuery I've been building the page with JS piece by piece, adding divs here and there, etc, until I get my layout.
Right now I'm thinking rather than do all that in JS, I can create the layout in a separate HTML file and then load it with ajax. My initial aversion to that idea is because of ajax, it requires an additional server request, and might end up slow(er?).
Anyone have any advice on whether or not this is a good idea, and if it is, if there are tutorials, set ways and patterns to doing this sort of thing.
Thanks.
There may be a speed impact from making another round-trip to the server. However, I think that the readability/maintainability you gain from having all of your HTML in a separate template, rather than mixed in with your JS is the big win here. You won't have to deal with quote issues, entity encoding, all of that. And the code that you do have will be easier to debug.
I'm not aware of any specific tutorials on this, but with most of the AJAX libraries out there, it's easy to make an XHR request and pipe the response into a DIV. For example, see Prototype's Ajax.Updater(container, url[, options]) function. ( http://www.prototypejs.org/api/ajax/updater )
The issue you'll get is not slower, but your URLs will be a little messed up.
If you navigate from page to page your URL won't update easily. You CAN do it but it can be a lot of work.
I've used post's callback function to display the data from the post with good effect and it's fast.
Good luck with it!
edit: I was talking about jQuery's post function.
2nd edit: If you're going to vote me down guys, at least say why...