Mysql take a long time to load - javascript

I have a website that mirror the hacked websites
From the day of starting everything is cool till it's being bigger
I have 2,197 records in MySQL DB
Every time I want to load this page http://red-zone.org/archive/ 2,197 have to be shown.
The cause that i'm using JavaScript for pagination and the JavaScript will work just after loading all the records
I don't like to use PHP for pagination
Does there's any other solution ?

I think the best way to use paging with big data is using Server-side processing with ajax/java script.
If you want a cool example you can look into datatables:
https://datatables.net/examples/data_sources/server_side.html
Of you can make your own javascript, but i see your already using datatables try the server side processing it will resolve your issue.

Related

Increase site load time while loading data in static website

I have a table containing sponsors data in a section of my static website. Currently I have kept the data in a json file and creating the table using javascript while the website is loading, the js file is included at the end of the html page. So the pseudo code of the page is somthing like
<body>
...
<section id="sponsors"></section>
...
<script src="sponsors.js"></script>
</body>
The sponsors.js loads the data from sponsors.json using a $.get() and then uses the data to create a table.
My question is which of the following approach increases the site load time?
Using the above approach keeping the data in a separate json file.
Keeping the data in sponsors.js instead of keeping in a separate json file
Hard coding the table with the individual data
Any other approach not listed above?
3 is the fastest approach because the data does not need to be rendered, however hard coding is not very useful.
2 is slightly faster as a seperate request does not need to be made.
1 is the slowest, however if you cached the json in a cookie it would not have to be downloaded every time. By using an expire on the cookie it would trigger it to be downloaded again.
Well, the best approach in terms of performance is always the one that involves as few files as possible.
Inlining your JSON would certainly be best for performance, but then you're making a sacrifice in code readability and modularity. You're going to have to make a judgement for yourself on what the best solution is, by balancing ease of programming with performance.
Personally, I'd stick with what you got, because changing the JSON later won't be complicated at all - and the performance hit you'll take won't likely be noticeable, much less game breaking.
Keeping the data in an external JSON would increase the time to load the table, but would descrease the time needed to load the page itself.
Instead hard coding the table will load the table instantly but it will also increase the time to load the page.

Datatables, jQuery: Clientside or serverside processing

I have a database table with up to 30.000 entries and 20-25 columns that I want to show in my datatables-table.
Do I need serverside processing in this scale or can I send all the data down to the client and client-process everything (like filter and stuff)?
Definitely, server side pagination and sorting is a must. Leave datatables or any other plugin aside, simple html would be painfully slow for 30000 rows. Still, if you want to have an idea how it would perform, look at this http://jsfiddle.net/UvjnT/2374/.
Dummy Code as stackoverflow wont let me put a jsfiddle without code and it doesnt make sense to put a code for something like this

Create "simple" pagination for PHP, foreach loop

I'm pretty new with the "dynamics" programming, but I really love it and now I need to improve my PHP web page.
Actually I have an PHP array, and I'm building "standard" html output inside a foreach cycle to build my page.
As you can see from the screenshot the actual result it's a page with a lot of <div class="ui-content">, there is a way, to simple create pagination where I'm able to show only six DIV entry per page, and create the menu to switch between page?
I think, the best solution is build something using advanced "dynamics" technics like AJAX call, but I'm totally new with this kind of programming.
Another possibilities is to use some pure java script at runtime to make the pagination, but I think this is not the best solution concerning the performance.
You Can try with simple Jquery Pagination, which is simple one to implement, but it loads the complete data and then paginate, in other approch like AJAX which request server each time you change the page.
Simple pagination jquery example easily available online. for example :
http://flaviusmatis.github.io/simplePagination.js/#page-2

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.

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.)

Categories