Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
What I would like to get some help with dividing a website in pages, similar to how a forum is organized.
What I mean is that for example a thread has at most 10 posts and when you post an 11th, the oldest post will go to Page 2 and continue that way. Whats the best or easiest way to achieve this? Are there several ways of doing that with HTML alone, or html and Javascript, or PHP?
The concept of what you are describing is called pagination.
Pagination in web content
On the Internet, pagination is used for such things as displaying a
limited number of results on search engine results pages, or showing a
limited number of posts when viewing a forum thread. Pagination is
used in some form in almost every web application to divide returned
data and display it on multiple pages. Pagination also includes the
logic of preparing and displaying the links to the various pages.
Pagination can be handled client-side or server-side. Server-side
pagination is more common. Client-side pagination can be used when
there are very few records to be accessed, in which case all records
can be returned, and the client can use JavaScript to view the
separate pages. By using AJAX, hybrid server/client-side pagination
can be used, in which Javascript is used to request the subsequent
page which is loaded and inserted into the Document Object Model via
AJAX.
Server-side pagination is appropriate for large data sets providing
faster initial page load, accessibility for those not running
Javascript, and complex view business logic.
Correctly implementing pagination can be difficult. There are many
different usability questions such as should "previous" and "next"
links be included, how many links to pages should be displayed, and
should there be a link to the first and last pages. Also ability to
define the number of records displayed in a single page is useful.
Also you can read this for comparison of pagination algorithms.
Paging is something you're going to want to do on the server with PHP before you get to HTML. The primary goal of paging is to conserve bandwidth. (You don't want to send 1000 records down to the browser if the user is going to stop reading after the first 10.) There are also performance and usability concerns.
The actual implementation varies wildly depending on your toolset, database technology, application framework, and personal preference.
If you're using MySQL, you'll want to look into OFFSET and LIMIT, which will allow you to select "pages" of data for a query. It may be as simple as adding a couple query string parameters to your URL and passing those on (being careful to clean them of any SQL injection attacks, of course) to your existing query.
I don't know if I can be more specific without having more details about the code you're working with.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Never mind. I've found the correct answer
I think you have already all pieces in front of you, but don't know where to start.
I suggest that you
find an exciting Bootstrap blog template (like the free ones at Start Bootstrap)
understand the code, which is usually a good mixture of HTML5, CSS3, JavaScript with a modest use of jQuery
tweak it with your own ideas
if you have some special needs not covered by the template (for example collapsible menu items), you can browse the Bootply Snippet Library to look how others coded it.
Nowadays no web programmer starts from scratch. They choose a template with the basic structure of a one-pager, multi-pager, blog, e-commerce, etc. and start from there.
By the way: Alaboudi mentioned in his answer that you need to learn MySQL, too. This is indeed needed for dynamic content like e-commerce and blogs, but not for static content like business websites that don't change that often, but put an emphasis on individual page layouts.
But to get your first website up fast I would start with static websites and later extend your knowledge to MySQL.
Everything you have learnt is great, but you must also learn a database querying language (SQL). May I suggest you start learning MySQL, its very friendly for beginners. Now let me give you an example of how to code a dynamic website.
Lets consider facebook profile pages as an example. Firstly you must realize that there isnt 1 billion uniquely saved profile pages made for each user on the server. Rather, there is only 1 html css template that is filled in with appropriate information depending on the person loading the page. When the visitor comes to his profile page, his information must be queried from the database using a backend language (PHP in your case). Once the result of the call is retrieved, you fill in the appropriate information in your html (name, age, friends, blah, blah) and send it over to the user. So technically you are constructing the complete page with every call and you never actually have the complete page saved on the server.
Long story short, you should look into using a database.
This is not really a question. I would suggest you to go and code something.
You want to do a blog? Ok, try to do it with what you've learned so far.
When you'll start to build it, you'll have specific questions on specific problems, you can then search on Google your specific problem or come back to StackOverflow and ask for it.
Any resource is good and lucky you, there are plenty of resources on the internet ;)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to make a poll for my website.The poll I want should look like the poll on http://www.premierleague.com/en-gb.html.I am not sure if I should use PHP,Javascript or etc to make a poll.Can anyone help me in this? Thanks...
You're going to need to create a form and receive the data on the server side using PHP. Then you're going to put that information into a database.
I hope I do not come across as too mean but, the decision on which language to use is pretty simple when compared to actually coding it. I'm betting you are not entirely experienced with web-based programming languages. I would strongly suggest you look for some pre-made scripts in the interim:
Here is a simple tutorial on creating polls: http://code.tutsplus.com/articles/creating-a-web-poll-with-php--net-14257
If you are OK with the idea of using a CMS, Here is a WordPress Plugin that should do the trick: http://code.tutsplus.com/articles/creating-a-web-poll-with-php--net-14257
Otherwise, it's important to understand the flow of data:
Display the poll to the end user (use HTML forms and CSS to style)
Client submits data (either built in submit functionality or Ajax)
Server Receives data and stores it into database (php)
Page is re-loaded and results are displayed (read with php, then displayed using html/css)
In other words, you are going to use many of the available languages and tools to create a polling script.
Start with a pre-built one and look up other resources to learn to make/customize your own.
If you need to save poll values, than PHP/MySql + JS for live effects, animations + CSS for styling.
Create database tables.
Create HTML form.
Style form to fit your needs (maybe jQuery UI).
Use Ajax to submit form.
Use PHP to gather information form user, validate it and save to database.
Reload user poll view to see changes.
Sell this masterpiece to Google/MS/Apple (or any other company).
Take big cup of hot chocolate.
Rule rest of the world.
Good luck.
Yes, you can use PHP or any server side scripting for validating, storing, processing poll, and use HTML/CSS/JS for client side, this is the main whole web page. You should also have DBMS (Database Management System) like mySQL, msSQL, etc., for storing poll answers.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have been searching about few details of HTML5 application but finding it hard or may be i am not searching in the right way. Basically i want to understand the new way of creating an application using HTML5 and CSS3 which will provide an experience of native application. Followings are my doubt.
How to navigate page by page. In typical web application every page is requested to the server and server will load the new page in browser with a refresh. In modern approch what is the way to do page navigation without page refresh effect.
In a typical web application a dynamic web programming such as asp.net, JSP are used to generate HTML files in browser. What is the modern approch do we still need to use the same way or plain static HTML files can be used and can be modified by jquery.
How the client server communication has to done so that page refresh does not happens. Can we use jquery for all the communication. Will it too much work for browsers.
How the HTML5 files are hosted. In server or each client has to have a copy of HTML files locally.
Any resources explaining this would be great.
The question is very generic, but I will attempt to answer it.
1. HTML5 is just a new version of HTML which is still under draft according to w3.org. HTML5 is still HTML and HTML navigates to other pages by requesting a fresh copy of the next page from the server, which the server actively responds. This will however flush the existing page from the browser and the new page is brought in. ( And yeah when the same page is requested again, either a cached copy in the browser is displayed or a new request is sent to the server and all the contents,tiny or huge, are reloaded). This is the reload part. However, you can use asynchronous services that AJAX has to offer using which you can request part of a html page.
Ajax is a group of interrelated web development techniques used
on the client-side to create asynchronous web applications. With Ajax,
web applications can send data to, and retrieve data from, a server
asynchronously (in the background) without interfering with the
display and behavior of the existing page.
2. Static pages are rarely used these days. However, if the site does not have too many user specific components or if the site only has static data to put in, then static pages are helpful, because loading the javascript stuff can be avoided. But then again, all modern web pages are dynamic.
There are a lots of ways of putting dynamic content on the web like
the Model View Controller approach and Event Based approaches.
And just to give you an idea, the new look is the one page look where all the content in the site is displayed in one single page and there are multiple controllers that feed various parts of the page and all of it is combined into a view.
Have a look here .
3. There are a lot of new js options these days with node.js and angular.js being the latest additions. Node.js is an excellent option if you want your site completely powered on javascript, however not many hosting sites support node.js yet. However, right now javascript seems to be the future.
4. This question is huge one, owing to the sheer lack of research from your point. Because, hosting and having copies are two different things because other than the hosting site and your client(that is the browser) there are lot of other servers which are put reasonably close to the client to serve pages on the fly, so that the file is brought quickly to the browser.
So, in a sense a lot of websites which have huge number of hits have
layers of fast cached servers upon slow back-end servers to serve
requests quickly. Then there are also fast cached database servers
upon huge slower ones.
So, what I want to stress here is that this is a purely performance related decision that YOU have to take. So, if there is something you want to achieve, whether it be speed or anything else, there are a lot of options to explore.
Coming to the CSS3 part, animations part of CSS3 is still to be accepted globally. There are still users all over the world who have browsers unable to process CSS3D transitions( users using older versions of IE etc). So thats about it.
That said, these things are purely related to performance and HTML5 or CSS3 for that matter have no part to play here.
Check out jQuery Mobile!
Basically jqm and other web mobile frameworks use Ajax to avoid any page refresh, with nice animations as a bonus.
This is more of a matter of how you want to pull data into your web app, from a server? then yes, it's gonna be an ajax request, and yes you will have to insert that into your html page, but again this doesn't mean your whole page has to come from a server. You can basically have a three tier setup, server, middleman, and your frontend. your middle part will have your html templates for your "pages" and will insert the incoming data from the server, and your front end will process and make everything happen. it can be like a php/angular or jquery setup, or php/handlebars/jquery or javascript setup, there are many others. Your page navigation again depends sort of on your framework setup.
Again kinda like the above. Routing is the most common way of communicating to a server these days. YOu basically requests data through different routes to the server and then process the incoming data -json perhaps- in whatever template engine you want to present to your end user. For routing, php solutions are the most popular, like slim or symfony.
Jquery is totally fine, angular is said to be much faster these days. Handlebars is excellent for creating template pages. Angular combines, qjuery, handlebars and some other stuff all in one. Backbone.js another good one.
THis is an odd question or tells me that you need to research some more about the whole concept. But think of in terms of frameworks and MVC type models.
I understand you require a single page HTML 5 app, For page navigations you can use Jquery mobile.It implements it via ajax.If you require the experience of native application.(In mobile devices JQM can be a little slow)You would require to make some performance improvements in jquery mobile, like removing unused widgets,unused themes,using clever javascript for minimal page reflow etc.
For such apps,for code maintainability we require the use of javascript frameworks like backbone js,knockout js etc(You have a wide variety of MVVM frameworks to choose from).
For client server communication you can make AJAX calls.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I'm working on a page that is more or less a search tool, it basically consists of an input field, and it will show a list of entries to the user, according to the input. In this situation, if there any difference for SEO if the page uses client or server-side rendering (using AJAX) and why?
I'm just concerned if it's a disadvantage if I use client-side rendering in this particular scenario.
I understand that client-side rendering is a disadvantage for SEO compared to server-side - when the HTML is complete at the beginning, so to say. But in a dynamic case, where the results have to be loaded asynchronously anyways, is it still a disadvantage? Does it depend if the current content can be mapped to a URL?
AJAX loading of content has no impact on SEO.
The updating of the DOM via JavaScript will not result in any noticeable changes in what is indexed by a search bot. Almost all legitimate search engines archive the non-dynamic version of a webpage.
In order to enable SEO you have to maintain embedded links to non-dynamic versions of that content.
For example (using jQuery):
<div class="next-page"><a class="ajax-me" href="/page-2.html">Page 2</a></div>
$(document).ready(function(){
$(".ajax-me").click(function(e){
e.preventDefaults();
$('#ajax-target').load($(this).attr("href"));
});
});
That will enable AJAX for links, but still make that link visible to the web crawler for search engines.
Your server will have to know to respond with either a full webpage or AJAX response based upon the header request.
Since you don't seem to be much concerned with UI/UX and want to know more about SEO, I'd suggest to go with the client side. Anything that's dynamically loaded after user's input won't be visible to web crawlers.
However, another approach would be to make it work both ways - so that by visiting a specific URL (site.com/search?q=something) you get the page fully rendered from the server side, while you're still able to make another search that will happen at the client side. You'd still have a little trouble indexing all the relevant searches, but perhaps you could track the last x searches and show them somewhere on the page, with links to full server-side rendered search pages, like the one I mentioned above. You can even make those dynamic calls not only change the content of the page, but the URL hash in the browser's address bar as well (see here).
That way you'd provide users with a nice user interface/experience, while still doing a very nice SEO job since the crawlers would be able to index the links from the list of last searches.
So, to directly answer your question: client-side vs. server-side page rendering - huge SEO difference
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
The web app I'm building has a JavaScript powered interface and fetches data from the server using AJAX. Everyone is on the same "page" but the data after the hashtag in the URL is used to determine which data to load, which is then displayed on the page. An example of a URL in my web app might be http://www.myapp.com/#/user/stackmaster. JavaScript sees the data after the hashtag (in this case "user" and "stackmaster") and uses AJAX to load the user whose username is stackmaster, and then displays it on the screen. The reason I structure my URLs like this because I want search engines to be able to index individual pages.
Is it possible to have an AJAX based web application like this be able to find and index individual pages? It is my understanding that web crawlers such as Google can't index dynamic content loaded with AJAX, right? Are there any alternate techniques to help the search engines find this data?
Thanks in advance for your help.
If you're running an AJAX application with content that you'd like to
appear in search results, Google has a new process that, when
implemented, can help Google (and potentially other search engines)
crawl and index your content. Historically, AJAX applications have
been difficult for search engines to process because AJAX content is
produced dynamically by the browser and thus not visible to crawlers.
While there are existing methods for dealing with this problem, they
involve regular manual maintenance to keep the content up-to-date.
GETTING STARTED
https://developers.google.com/webmasters/ajax-crawling/
An agreement between crawler and server
In order to make your AJAX application crawlable, your site needs to abide by a new agreement. This agreement rests on the following:
The site adopts the AJAX crawling scheme. For each URL that has
dymanically produced content, your server provides an HTML snapshot,
which is the content a user (with a browser) sees. Often, such URLs
will be AJAX URLs, that is, URLs containing a hash fragment, for
example www.example.com/index.html#key=value, where #key=value is the
hash fragment. An HTML snapshot is all the content that appears on the
page after the JavaScript has been executed. The search engine indexes
the HTML snapshot and serves your original AJAX URLs in search
results.
https://developers.google.com/webmasters/ajax-crawling/docs/learn-more
http://googlewebmastercentral.blogspot.in/2007/11/spiders-view-of-web-20.html