Go here<\/a><\/u>)<\/li>\n<\/ul>\nWhat we would build<\/h4>\n
For the purpose of this article, we’ll quickly set up a PHP environment where we’ll basically pull data from the database, paginate the data, and display it.<\/p>\n
Setting up the environment<\/p>\n
Step 1: create a new bucket<\/p>\n
Log in to your Couchbase admin area\u00a0and create a new bucket name `commenting`.<\/p>\n
![\"Screenshot](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2017\/09\/Screenshot-from-2017-08-20-21-25-56.png\")
<\/p>\n
Step 2: create an index for the new bucket: `commenting`<\/p>\n
Click on the query tab, insert the query listed below, and click on execute.<\/p>\n
create primary index on `commenting` using gsi;\r\n<\/pre>\nIf everything goes smoothly, we are good to start creating documents.<\/p>\n
Step 3: clone the project starter file<\/p>\n
I’ve created the basic file structure of the files we’ll be using for this tutorial.<\/p>\n
Open up your command line, then clone the repository from github.<\/p>\n
$\u00a0git clone\u00a0git@github.com:dongido001\/php-couchbase-pagination_complete.git\r\n<\/pre>\nNow, open up the file you just cloned in your browser. You should see the following page:<\/p>\n
![\"page\"](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2017\/09\/page.png\")
<\/p>\n
The file structure<\/h2>\n
The repository you just cloned contains 3 PHP files: `config.php`, `db.php`, and `index.php`.<\/p>\n
The `config.php` file is where we define the information of our database:<\/p>\n
<?php\r\n\/\/some configs\r\ndefine(\"C_USERNAMAE\", \"Administrator\");\r\ndefine(\"C_PASSWORD\", \"password\");\r\ndefine(\"C_URL\", \"https:\/\/127.0.0.1:8091\/\"); \/\/eg: localhost:8091\r\ndefine(\"DEFAULT_BUCKET\", \"commenting\");<\/pre>\nIn the `db.php`, \u00a0we connected to Couchbase and opened a bucket.You should change the details to correspond to your Couchbase information.<\/p>\n
<?php\r\n\r\n$authenticator = new\u00a0\\Couchbase\\ClassicAuthenticator();\r\n$authenticator->cluster(C_USERNAMAE, C_PASSWORD);\r\n\r\n$cluster = new\u00a0\\Couchbase\\Cluster(C_URL);\r\n\r\n$cluster->authenticate($authenticator);\r\n\r\n$bucket = $cluster->openBucket(DEFAULT_BUCKET);\r\n\r\nIn the `index.php`, we have some PHP code at the top of the file and at the bottom, we also<\/pre>\nhave some HTML code.<\/p>\n
\/\/index.php\r\n\r\n<?php\r\n\r\n\/\/include config details\r\n\r\nrequire_once('config.php');\r\n\r\n\/\/include connection to the database.\r\n\r\nrequire_once('db.php');\r\n\r\nif( $_SERVER['REQUEST_METHOD'] == \"POST\"){\r\n\r\n$uid = uniqid();\r\n\r\n$comment = [\r\n\r\n\"_id\"\u00a0 \u00a0 \u00a0 \u00a0 => $uid,\r\n\"name\"\u00a0 \u00a0 \u00a0 \u00a0=> $_POST[\"name\"],\r\n\"comment\"\u00a0 \u00a0 => $_POST[\"comment\"],\r\n\"created_at\"\u00a0=> date(\"Y-m-d H:i:s\")\r\n];\r\n\r\n$bucket->insert($uid, $comment);\r\n\r\n}\r\n\r\n?>\r\n\r\n...<\/pre>\nI included the two files, `config.php` and `db.php` then I wrote logic to insert some comments into the database when the form is submitted.<\/p>\n
\/\/index.php\r\n\r\n...\r\n\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<!-- Required meta tags -->\r\n<meta charset=\"utf-8\">\r\n<meta name=\"viewport\"\u00a0content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\r\n\r\n<!-- Bootstrap CSS -->\r\n<link rel=\"stylesheet\"\u00a0href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta\/css\/bootstrap.min.css\"\u00a0integrity=\"sha384-\/Y6pD6FV\/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\"\u00a0crossorigin=\"anonymous\">\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"container\">\r\n\r\n<div\u00a0class=\"container\" style=\"margin-left: auto; margin-right: auto; width: 400px;\">\r\n<h4\u00a0class=\"text-center\">Add\u00a0a\u00a0comment<\/h4>\r\n\r\n<form\u00a0action=\"\" method=\"POST\">\r\n<div\u00a0class=\"form-group\">\r\n<label\u00a0for=\"name\">Name:<\/label>\r\n<input\u00a0type=\"text\" class=\"form-control\" name=\"name\" required>\r\n<\/div>\r\n\r\n<div\u00a0class=\"form-group\">\r\n<label\u00a0for=\"comment\">Comment:<\/label>\r\n<textarea\u00a0class=\"form-control\" rows=\"5\" name=\"comment\" required> <\/textarea>\r\n<\/div>\r\n\r\n<button\u00a0type=\"submit\" class=\"btn\u00a0btn-primary\">Submit<\/button>\r\n<\/form> <br\u00a0\/>\r\n\r\n<div\u00a0>\r\n<h4\u00a0class=\"text-center\">Listing\u00a0comments<\/h4>\r\n\r\n<\/div>\r\n\r\n<div\u00a0id=\"pagination\">\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\nThe HTML code displays a form for adding and listing comments.<\/p>\n
Now let’s get started!<\/p>\n
Add as many comments from the page as you like. We will be paginating that data soon.<\/p>\n
Fetch paginated content in the database<\/p>\n
Add the following to the header part of `index.php` that is below every PHP code at the top.<\/p>\n
\/\/Select all contentin our query \r\n\r\n$no_per_page = 4; \/\/This is the number of Items we want per page\r\n\r\n $current_page = (isset($_GET['page_id'])) ? $_GET['page_id'] : 1; \/\/Gets the current page, if not set, default to page 1\r\n\r\n$skip = ($current_page - 1) * $no_per_page; \/\/Gets the total number of page we want to skip when making request. When we are on page one, We don't need to skip any Item.\r\n\r\n$query = \\Couchbase\\N1qlQuery::fromString(\"SELECT * FROM `commenting` LIMIT $no_per_page OFFSET $skip\");\r\n\r\n$result = $bucket->query($query);\r\n\r\n\/\/count total number of result in the database\r\n\r\n$total = $bucket->query(\\Couchbase\\N1qlQuery::fromString(\"SELECT COUNT(comment) total FROM `commenting`\"));\r\n\r\n$total = $total->rows[0]->total;\r\n\r\n$number_of_pages = ceil( $total\/$no_per_page ); \/\/calculate number of pages<\/pre>\nI’ve added comments to the code above, which describes what each does. Here we also used `LIMIT` AND `OFFSET` which enabled us to LIMIT the number of results each query is meant to return. The OFFSET was used to skip over an amount of data when querying depending on the page number we are currently accessing.<\/p>\n
`LIMIT`: The LIMIT clause specifies the maximum number of objects that can be returned in a result set by SELECT. A negative value or a value greater than 9223372036854775295 (result of 1\u00a0– 512) is considered as LIMIT 0.<\/p>\n
`OFFSET`: The OFFSET clause specifies a number of objects to be skipped. If a LIMIT clause is also present, the OFFSET is applied prior to the LIMIT. The OFFSET value must be a non-negative integer.<\/p>\n
Populate the result of the query to the page<\/p>\n
Add the code below to `index.php` inside this tag, immediately after `<h4 class=”text-center”>Listing comments<\/h4> `.<\/p>\n
\u00a0 \u00a0 \u00a0 <?php\u00a0foreach( $result->rows as\u00a0$comment ):?>\r\n<div>\r\n<div class=\"alert\u00a0alert-success\" role=\"alert\">\r\n<h5\u00a0class=\"alert-heading\"> By: <?=$comment->commenting->name?>, Created\u00a0At: <?=$comment->commenting->created_at?> <\/h5><br>\r\n<p> <?=$comment->commenting->comment?><\/p>\r\n<hr>\r\n<\/div>\r\n\r\n<\/div>\r\n<?php\u00a0endforeach; ?>\r\n\r\n<\/pre>\nAdd the paginated link<\/p>\n
Add the code below in between this html tag `<div id=”pagination”> <\/div>` at the bottom part of index.php.<\/p>\n
![\"18485569](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2017\/09\/18485569_1371908909572883_6954592115736688669_n.jpg\")
<\/p>\n![\"Peek](\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2017\/09\/Peek-2017-08-23-19-35.gif\")
<\/p>\n