PHP Pagination with Bootstrap Tutorial

Paginator class source code:

<?php class Paginator { //declare all internal (private) variables, only accessbile within this class private $_conn; private $_limit; //records (rows) to show per page private $_page; //current page private $_query; private $_total; private $_row_start; //constructor method is called automatically when object is instantiated with new keyword public function __construct( $conn, $query ) { //$this-> variables become available anywhere within THIS class $this->_conn = $conn; //mysql connection resource $this->_query = $query; //mysql query string $rs = $this->_conn->query( $this->_query ); $this->_total = $rs->num_rows; //total number of rows } //LIMIT DATA //all it does is limits the data returned and returns everything as $result object public function getData( $limit = 10, $page = 1 ) { //set default argument values $this->_limit = $limit; $this->_page = $page; //no limiting necessary, use query as it is if ( $this->_limit == 'all' ) { $query = $this->_query; } else { //echo ( ( $this->_page - 1 ) * $this->_limit );die; //create the query, limiting records from page, to limit $this->_row_start = ( ( $this->_page - 1 ) * $this->_limit ); $query = $this->_query . //add to original query: ( minus one because of the way SQL works ) " LIMIT {$this->_row_start}, $this->_limit"; } //echo $query;die; $rs = $this->_conn->query( $query ) or die($this->_conn->error); while ( $row = $rs->fetch_assoc() ) { //store this array in $result->data below $results[] = $row; } //print_r($results);die; //return data as object, new stdClass() creates new empty object $result = new stdClass(); $result->page = $this->_page; $result->limit = $this->_limit; $result->total = $this->_total; $result->data = $results; //$result->data = array //print_r($result);die; return $result; //object } //PRINT LINKS public function createLinks( $links, $list_class ) { //return empty result string, no links necessary if ( $this->_limit == 'all' ) { return ''; } //get the last page number $last = ceil( $this->_total / $this->_limit ); //calculate start of range for link printing $start = ( ( $this->_page - $links ) > 0 ) ? $this->_page - $links : 1; //calculate end of range for link printing $end = ( ( $this->_page + $links ) < $last ) ? $this->_page + $links : $last; //debugging echo '$total: '.$this->_total.' | '; //total rows echo '$row_start: '.$this->_row_start.' | '; //total rows echo '$limit: '.$this->_limit.' | '; //total rows per query echo '$start: '.$start.' | '; //start printing links from echo '$end: '.$end.' | '; //end printing links at echo '$last: '.$last.' | '; //last page echo '$page: '.$this->_page.' | '; //current page echo '$links: '.$links.' <br /> '; //links //ul boot strap class - "pagination pagination-sm" $html = '<ul class="' . $list_class . '">'; $class = ( $this->_page == 1 ) ? "disabled" : ""; //disable previous page link <<< //create the links and pass limit and page as $_GET parameters //$this->_page - 1 = previous page (<<< link ) $previous_page = ( $this->_page == 1 ) ? '<a href=""><li class="' . $class . '">&laquo;</a></li>' : //remove link from previous button '<li class="' . $class . '"><a href="?limit=' . $this->_limit . '&page=' . ( $this->_page - 1 ) . '">&laquo;</a></li>'; $html .= $previous_page; if ( $start > 1 ) { //print ... before (previous <<< link) $html .= '<li><a href="?limit=' . $this->_limit . '&page=1">1</a></li>'; //print first page link $html .= '<li class="disabled"><span>...</span></li>'; //print 3 dots if not on first page } //print all the numbered page links for ( $i = $start ; $i <= $end; $i++ ) { $class = ( $this->_page == $i ) ? "active" : ""; //highlight current page $html .= '<li class="' . $class . '"><a href="?limit=' . $this->_limit . '&page=' . $i . '">' . $i . '</a></li>'; } if ( $end < $last ) { //print ... before next page (>>> link) $html .= '<li class="disabled"><span>...</span></li>'; //print 3 dots if not on last page $html .= '<li><a href="?limit=' . $this->_limit . '&page=' . $last . '">' . $last . '</a></li>'; //print last page link } $class = ( $this->_page == $last ) ? "disabled" : ""; //disable (>>> next page link) //$this->_page + 1 = next page (>>> link) $next_page = ( $this->_page == $last) ? '<li class="' . $class . '"><a href="">&raquo;</a></li>' : //remove link from next button '<li class="' . $class . '"><a href="?limit=' . $this->_limit . '&page=' . ( $this->_page + 1 ) . '">&raquo;</a></li>'; $html .= $next_page; $html .= '</ul>'; return $html; } } ?>

List Movies Using Paginator Source Code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="style.css"> <?php require ('paginator.php'); $host = 'localhost'; $user = 'root'; $pass = 'mypass123'; $db = 'movies'; $mysqli = new mysqli($host,$user,$pass,$db); //DO NOT limit this query with LIMIT keyword, or...things will break! $query = "SELECT * FROM movies"; //these variables are passed via URL $limit = ( isset( $_GET['limit'] ) ) ? $_GET['limit'] : 5; //movies per page $page = ( isset( $_GET['page'] ) ) ? $_GET['page'] : 1; //starting page $links = 5; $paginator = new Paginator( $mysqli, $query ); //__constructor is called $results = $paginator->getData( $limit, $page ); //print_r($results);die; $results is an object, $result->data is an array //print_r($results->data);die; //array echo $paginator->createLinks( $links, 'pagination pagination-sm' ); ?> <div class='main-container'> <?php for ($p = 0; $p < count($results->data); $p++): ?> <?php //store in $movie variable for easier reading $movie = $results->data[$p]; ?> <div class='movie-container'> <div class='header'> <h1><?= $movie['title'] ?></h1> <span class='year'>( <?= $movie['year'] ?> )</span> </div> <div class='content'> <div class='left-column'> <!-- Image width and height multiplied by 1.3 (to make them a bit bigger) --> <img width='<?php 67*1.3 ?>' height='<?= 98*1.3 ?>' src='<?= $movie['image_url'] ?>'> <div id='ratings'> <!-- If imdb_rating for the movie exists, print it, otherwise don't, same for metascore --> <div class='imdb'><?= $movie['imdb_rating'] ? $movie['imdb_rating'] : '' ?></div> <div class='metascore'><?= $movie['metascore'] ? $movie['metascore'] : '' ?></div> </div> </div> <div class='right-column'> <span class='content blue'> <?= $movie['certificate']; ?> </span> <?php //note: we're only printing the pipe here |, not the actual certificate echo $movie['certificate'] ? ' |' : ''; ?> <span class='content blue'> <?= $movie['runtime'] .' min'; ?> </span> <?php //genres $result2 = $mysqli->query ("SELECT genres_id FROM movies_genres WHERE movies_id={$movie['id']}") or die($mysqli->error); //fetch_all returns multi-dimensional array $genres = $result2->fetch_all(); //array_column introduced in PHP 5.6, convert multi-dimensional array to single //clean it up $genres = array_column($genres, 0); //removes 0 array key //print_r($genres);die; //loop through genres id's and get the records from genres table for ($i = 0; $i < count($genres);$i++) { $genre = $mysqli->query("SELECT name from genres where id = '{$genres[$i]}'")->fetch_assoc(); //print_r($genre);die; //single genre lives here //print pipe before every first genre echo $i == 0 ? ' | ' : ''; echo "<span class='content blue'>".$genre['name']."</span>"; echo $genres[$i] != end($genres) ? ', ' : ''; //if NOT at the end of genres, print comma } ?> <div class='content description'><?= $movie['description'] ?></div> <?php //get directors $result3 = $mysqli->query ("SELECT directors_id FROM movies_directors WHERE movies_id={$movie['id']}") or die($mysqli->error); $directors = $result3->fetch_all(); $directors = array_column($directors, 0); //get stars $result4 = $mysqli->query ("SELECT stars_id FROM movies_stars WHERE movies_id={$movie['id']}") or die($mysqli->error); $stars = $result4->fetch_all(); $stars = array_column($stars, 0); //print_r($directors); //print_r($stars);die; ?> <div> <?php //loop through directors for ($i = 0; $i < count($directors);$i++) { $director = $mysqli->query ("SELECT name from directors where id = '{$directors[$i]}'")->fetch_assoc(); //if there are more than 1 directors, put letter s insdie $s variable :) $s = count($directors) > 1 ? 's' : ''; //put $s variable at the end of Director, will be plural if multiple directors echo $i == 0 ? "<span class='content yellow'>Director$s: </span>" : ''; echo "<span class='content text'>".$director['name']."</span>"; //not at the end of directors, print comma if ($directors[$i] != end($directors)){ echo ', '; } else { //at the end of directors, print pipe, but only if there are stars if (count($stars) > 0) { echo ' | '; } } } ?> <?php //loop through stars for ($i = 0; $i < count($stars);$i++) { $star = $mysqli->query("SELECT name from stars where id = '{$stars[$i]}'")->fetch_assoc(); $s = count($stars) > 1 ? 's' : ''; //same s trick as with directors echo $i == 0 ? "<span class='content yellow'>Star$s: </span>" : ''; echo "<span>".$star['name']."</span>"; echo $stars[$i] != end($stars) ? ', ' : ''; //print comma if not at the end of stars } ?> </div> <div class='bottom'> <?php //check if votes exists if ($movie['votes']) { echo "<span class='content yellow'>Votes: </span>".number_format($movie['votes']); //if gross exists print pipe after votes //we already know votes exists with if statement above echo $movie['gross'] ? ' | ' : ''; } ?> <span class='content green'> <?= $movie['gross'] ? "<span class='content yellow'>Gross: </span>$". number_format($movie['gross']) : '' ?> </span> </div> </div> </div> </div> </div> <?php endfor; ?> ?>

hey whats up guys its clever taking in this video I'd like to show you how to code in HTML so we can start creating websites now before we begin let me show you something here i have created some files that are going to be using in the video like this backgrounds diagrams and HTML cheat sheet and some images that i'm going to be using here in this video and i've gone ahead and packed up all these files in a zip file and if you go to collaborate 80.com /a HTML dash video you will enter your email and then the system will automatically send you that file so if you want all these files go ahead and do that ok let's get started here first of all i'm going to be using notepad plus plus 2 code HTML and i just created a new file here and i'm gonna go ahead and save that file as and when you're doing this with a notepad or not but plus + or whatever make sure you choose all types and then your page name my name based on that HTML and now we can open that page in whatever browser we want i'm going to do Chrome and and so here on the right-hand side we're gonna see how the interpretation ml code looks like alright so what the heck is HTML let me show you here real quick so HTML all it is is but bunch of tags and this is what tags look like you got a tag name surrounded by this angle brackets that's your opening tag then you've got a closing tag which is the same thing and it's going to have exactly the same name as the opening tag with the exception that is going to have a forward slash right in front of the tag name so that your closing tag the content like the text images links and whatever goes in between the opening and closing HTML tag now if we combine the whole thing together with an opening closing tag and the content in between we get what is called an HTML element alright let's start coding some HTML here let me show you some examples of the tags ok so i just have some random text here for example this is my first website ever it's going to be about baby animals at the same time I'm going to learn how to code HTML this is very cool ! ok so if I just refresh this page here in home i'll get exactly the same tax so nothing's going on yet ok so let me give you an example right now if I use this tag called strong on this first sentence you can see that this first sentence has been molded so what so what that strong tag did to this sentence is just formatted as as bold and that's what strong tag is supposed to do another example is AEM tag which stands for emphasize and all it does is makes text italic so the second sentence here became italic and if i wanted to for example underline the fact that this is my first website i can do an underlying tagged with a you and that will underline the word first so you can see how you can use these HTML tags to format your text and you can use other HTML tags within we need these tags inside of them so we get like a nested effect ok so this is a basic idea what the HTML tags are now if you notice here we have I put the these sentences on three different lines but if you look at the browser it's all like one sentence especially if i expand it like this you can see how the whole thing is what was on one single wine so in HTML you gotta use a tag whole PR if you want to have the text to have it stands for the break-in line and if you wanna have your sent to show up on the next line this is a tag you used you use now if you notice this tag it's a unique tag because it's called an empty empty empty HTML element because there's no content that goes inside of this tag and so it also doesn't have an a closing tag so it's just one opening and closing tag in 1 and itself closes with a forward slash in between inside a tag that's why it's also called the self-closing tags there's only a few of those are no example is a horizontal rule tag and all it does it creates a horizontal line just like you see here another tag and then i'm going to cover is the image tag OMG and those are the only three self-closing tags and I know off and you probably not going to run into others but if you do you know what they are now ok so those are the self-closing tags and another exception to the standards HTML opening and closing role is a comment and this is a comment comments are basically for the for the coder for the programmer to understand the code better so i can say strong tag stands for bold you know and this is how we do it we use the same angle brackets but it starts with the ! with two dashes and we close the tag with just two dashes without ! and the annual angle bracket so that's an exception to the rule and that's pretty much it now let's see where we are here ok so I'm not just set of tags are you going to encounter a lot is called the heading tag called h1 now h1 is going to be your biggest heading then there's h2 and as they go up a number the heading is going to become smaller and smaller you'll see what I mean here in just a sec I'm just going to do this up to h4 and say something like welcome to my hobby that site and then I'm just going to copy this text and put it in between these tags refresh the page and as you can see the biggest headings h1 the second is h2 h3 and h4 so it goes all the way up to h6 and become smaller and smaller it as it goes down so this is it really useful tag for setting up your headings on your website now there's also something called nested HTML tags and these are tags like for example and unordered list tag URL and let's just put some text inside of it like a kitten and elephant and piglet and if i refresh the page here as you can see created like a tab space here but it doesn't really do anything by itself so in order for this to work we need what is called a list item inside the UL tag just going to copy this list item tag to the other ones and don't forget to close it and just going to copy and paste now we got three listitem items inside of our unordered list tag and as you can see this is a created a bulleted list and this is called an unordered list in HTML so you can see how it's nested it's like the UL tag and then there's my tags inside of it ok so in if i did LOL that would be an ordered list and now we change to 123 which is an ordered list just a numbered list that's all it is ok so those are the nested HTML tags now ok before moving on to more tags let me show you how a typical HTML page actually looks like okay so here's a structure of every HTML page that you're going to see first of all you got your HTML tag and this is the main tag that defines the HTML document and all the other tags live inside of it after that we gotta head tag and just remember for now that inside the tag is where you put your title tag and title is going to show up as a title of your web page now inside the tag inside the head tag we also have stuff like javascript CSS media info and other stuff that you include like external scripts and CSS stuff like that but don't worry about it right now just remember about the title goes inside ahead and after the head we got the body and this is the visible visible part of the webpage and most HTML is going to live here and that's where we're going to be putting all of our HTML ok this is the structure and i'm just going to update this document here to to correct the structure because right now what I have the HTML tag so i'm going to create that all that is going to go in between then i'm going to create the head tag with the title tag inside of it just like that and also the body tag and all of this HTML is going to be inside this body tag ok and i'm also going to put some kind of a title right now you can see like here's a page 1 html which is not a title at the site so i'm going to say best baby animals ever refresh the page and now this is showing up as a title just like we want ok that's the structure of HTML and the title tag now now let's get into the attributes ok so what attributes do here i gotta this little picture here to illustrate it a little bit better okay so we got a tag name inside a tag name we put an attribute name followed by the equal sign and finally we put the value of the attributes inside the double quotes ok let me show you an example so you guys understand what I mean here so for example if I wanted to change my my size by ground color i can use an attribute called bgcolor and I can set it to any color I want like light blue save this file refresh the page boom the caller has been system set to light blue so just like in the diagram we got the attribute name followed by the equal sign and inside the double quotes we got the value now certain the attributes will only apply to specific HTML tags but some attributes will also apply to other tags like the BG color can apply to other tags like I have like i'm showing here in my cheat sheet the BG color can apply to body table table cell in table row and i would get into it a little bit ok so what else let's see here just on tagged okay well i'm not a thing you can do here is for example if you wanted to change the color something of the your text you you would use a font tag and a for Montague has a attribute name called color can set that to blue right now read set it to read and if i wanted to just do this whole sentence close-up on tagged and now the second one is going to be a red ok so those are attributes now instead of using these color names as as actual Wars like light blue red we can also do something cool for example let me show you something here let's go to a website called w3schools and have my url going to paste it here now here you if you go to this URL w3schools com for / college for / colors underscore picture that SP and pick a color any kind of color for example i'm just going to take this pink color well and pick this purple color here you're going to see this value which starts with the pound symbol if you copy this value and like as you change the caller obviously the valley is going to change so pick any color you want copy this value that starts with the pound tag and you can put this inside this value for color and that's going to be exactly your color so that's how you can use what is called hex values to basically choose any kind of color you want instead of coming up with color names like light purple and some other names which might not be even HTML values this is like the sure way to do it alright so i just wanted to show you this and that part okay our body can also have a different attribute called the background and if we wanted to set our background as a picture instead of instead of color we can do this I can use the background attribute and then since i have my backgrounds here inside this BG folder i would have to specify where it's located so i'm going to be using clouds that jpg so for the valley i'm going to set BG clouds that jpg so you can see how this works here my pages inside of this root directory here but the clouds background lives inside the BG folder so when I go to it the clouds that jpg is right there so that's why we're specifying BG forward slash clouds that jpg which is the full path to our clouds jpg background and now i refresh the page and you can see all these cool clouds all right now already explained how we can have multiple attributes apply to different kind of tags now let me introduce a tag called image IMG and this is how we insert images into our webpage so you start with IMG and the attribute is SRC which stands for source equals and then we sell clothes this image tag because there's no content that goes inside of it and for the path we also specify where this image is located in this case I have this image inside of my IMG folder and I'm going to use this cute kitten here kitten the jpg so I'm gs4 / kitten that jpg and you i refresh the page and i have my kids showing up here and i'm going to insert the BR tag so the tags so the tech skills on the next line ok so that's an image tag now wire was still on the pass let me also introduce a link tag and the way create link is by using an a tag stands for anchor and this tag has its own actually called hrf and we can create two types of links for example we can link to another website like i'm going to link to this URL here and just going to copy and paste this whole URL here and if you're going to be linked into another website make sure you start with HTTP and then type the full of yourself whatever URL or web site you want to link to otherwise it's not going to work now inside the a tag you also want to enter some text like go to Animal Center to adopt a kitten and then of course don't forget to close the a tag and now I have this link shown up here and if i click on it is going to open this page where you can look at all these pictures of cute little kittens alright so if you notice this link also opened in the same tab and if i wanted to put this link to open in another tab there's a attribute for that called target target equals blank and if we test the page now and click on the link you can see how it open in another tab so here what idea is basically created another attribute inside the a tag and you can place with these attributes anywhere inside the tag as long as they're followed by the equal sign and a value and and all HTML tags can have multiple attributes like for example the image tag also has its own attributes like besides SRC it has an alt attribute and for the alt attribute you can say kitten and for title is another attribute you can say now now what the alt attribute does is in case the image is not found like i'm gonna make it so it's not found on purpose here this is the words is going to show up here kitten and if i go back here and fix that and then the title is going to show up when you roll the mouse over the image so as you can see it saying now ok so those are multiple attributes can be applied to the same HTML tag to achieve all kinds of different results and all the attributes do is modify the way the HTML tag behaves so we can set all kinds of different values and change all did all kinds of different elements of our webpage now let's move on here and lastly I'd like to show you guys tables ok and i created a diagram for that as well let me show you a quick actually before we do that let me show you another type of link is what i wanted to do first ok so if i wanted to link to another page on my site I would create the first of all let's create another page file new and I'm gonna save file as page to that HTML and i'm just going to copy this whole thing so i have to type it again and pretty much delete everything inside the body tag and i'm just going to leave everything else around here and here I'm just going to say something like IMG SRC calls i'm g Ellis front we're gonna put an elephant picture on this page and let's see that works i'm just going to go to this page now page 2 ok I got my elephant picture here because i have that picture inside the ing folder and now we're gonna name the title elephant refresh the page now the space called elephant ok so from page one we cannot link to page 2 by simply specifying where page 2 is located which day and age two lives inside the same directory so can just link to it in the in this way page 2 html visit my friend elephant and close the a tag so I for the Ashraf instead of specifying you know I for URL like that I just said page 2 because it's already on our computer so now if i refresh first of all is create another br tag here so it's one neatly organized and if i click on it here it goes right to page to wear our elephant lives pretty cool right ok those are the links and finally I want to show you guys how to create tables now this is what a typical table looks like so open up here okay so you got a table tag you got a closing table tag inside the table tag you see two types of texts called TR and a TD now the TR stands for table row and as you can see there's only two rows one and two so the one row it is in green color and the other Oh is in not a great green color below the first row ok got a little bit confused here and inside are rows we got a table cells now every table row has to table cells within it and these are shown is in orange and i just created this diagram forget so you can understand it better because it can be a little bit confusing at first because you know there's a lot of tags that make up the whole table structure so you got the whole table is blue table rows are green and the table cells are going to be in orange and inside the table cells is where the actual content goes now let's create the actual table so you'll see what I mean here ok so i'm just going to create the table cell here be a below my h4 tag is a table close table right away and then i'm going to put the TR which is a table row close it going to put another TR close it and then within the first table row i'm going to put two table cells and close them as well so we have exactly what i just showed you in the diagram and i'm just going to copy all these I want to take them again and also we can use a and actually cold border equals black actually border equals 1 and now you can see how tiny this table is because it having putting any content inside of it so now we're going to put some content example i'm going to put animal names inside of these puppy leopard and kiddin so now that i put all these names here you can see the table ok that's pretty much it for the table another thing cool thing about the table is you can make it bigger smaller by using cell padding and cellspacing attributes cellpadding is going to expand the actual space around the text just like you see here and cell spacing is going to increase exactly what it says is going to increase which is a cell space cellspacing as you can see there's cell spacing between those cells now now I finally I want to show you the BG color attribute and how it can be applied to the table basically if you we take a look here at our cheat sheet again we can see how the BG color can be applied to body table table cell and table row so we can have all these different elements of the table in different color ok so for example if i set the table bgcolor to say light green our whole table is going to be like green because we haven't specified what kind of background we want for the row or the cell now if I wanted the first road to be something other than my green can say maybe like yellow now as you can see the whole row became light yellow i'll just do yellow because it's kinda looks white here ok so there you go now if I wanted to apply to individual cell i can do the same exact thing and say something like what other color is there just gonna go back here choose light pink are not like pink white purple copy the value and inserted here and bam now we have so basically BG attribute can be applied to all different kinds of 52 all kinds of different elements within the table and I think this is it just keep playing around with HTML and have fun and eventually you'll just realize how easy it is because this is all it is is a bunch of tags and attributes with values and as you play around with it you're gonna get used to it and all this code is going to be really easy to understand and i'll be i'll be putting out another video on CSS where we're going to get into some really cool stuff and how we're going to be styling websites and make it look really nice and please go to clever taking . com to subscribe to the newsletter and you'll get updates when I release HTML guides which are basically going to be similar guys like this but in HTML format but they're gonna have advanced techniques you guys are also going to receive new videos chichis diagrams and other updates hope you guys enjoyed this video please like share and subscribe and thank you very much for watching