Sorting Array by Key and Value in PHP Tutorial

In this tutorial, you will learn how to sort a PHP Array by its Key and Value. PHP have different built-in function on sorting an Array. There is sort(), rsort(), asort(), arsort(), ksort(), and krsort(). Each of the listed functions has same goal of returning the array which sorting them but the difference are how they are being sorted.

  • sort() - This function sorts the array in ascending order.
  • rsort() - This function sorts the array in descending order.
  • asort() - This function sorts the array with keys by its value in ascending order.
  • arsort() - This function sorts the array with keys by its value in descending order.
  • ksort() - This function sorts the array with keys by its key in ascending order.
  • krsort() - This function sorts the array with keys by its key in descending order.

Here, I will give an example PHP source code. The application has a static random array. It will display the actual array and two panels, one for the original sort of array listed in a table and the other one is for displaying the newly sorted data according to the value selected at the sort form.

In the source code I used bootstrap for a better look of the application. You can download the Bootstrap Library in getbootstrap.com.

Full Source Code

Save the file below as index.php.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Sorting An Array</title>
  9.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  10.     <script src="./js/bootstrap.min.js"></script>
  11.     <style>
  12.         :root {
  13.             --bs-success-rgb: 71, 222, 152 !important;
  14.         }
  15.  
  16.         html,
  17.         body {
  18.             height: 100%;
  19.             width: 100%;
  20.             font-family: Apple Chancery, cursive;
  21.         }
  22.  
  23.         .btn-info.text-light:hover,
  24.         .btn-info.text-light:focus {
  25.             background: #000;
  26.         }
  27.     </style>
  28. </head>
  29.  
  30. <body class="bg-light">
  31.     <nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-gradient" id="topNavBar">
  32.         <div class="container">
  33.             <a class="navbar-brand" href="https://sourcecodester.com">
  34.             Sourcecodester
  35.             </a>
  36.  
  37.             <div>
  38.                 <b class="text-light">Sorting An Array</b>
  39.             </div>
  40.         </div>
  41.     </nav>
  42.     <div class="container py-5" id="page-container">
  43.    
  44.         <?php
  45.         $random_array = [1=>'purchase',2=>'aim',3=>'revise',4=>'continue',5=>'rid'];
  46.         ?>
  47.         <h4 class="fw-bold">Actual Array</h4>
  48.         <div class="w-100 bg-gradient bg-dark text-light py-5 px-3">
  49.             <pre class="w-100 m-0 h-100" contenteditable='true'><?= "[".(implode(",",$random_array))."]" ?></pre>
  50.         </div>
  51.         <hr>
  52.         <?php
  53.             $sort = isset($_GET['sort']) ? $_GET['sort'] : 'key';
  54.             $dir = isset($_GET['dir']) ? $_GET['dir'] : 'asc';
  55.         ?>
  56.         <div class="row justify-content-center">
  57.             <div class="col-lg-5 col-md-7 col-sm-12 my-3">
  58.                 <div class="card">
  59.                     <div class="card-header">
  60.                         <h5 class="card-title">Sorting Form</h5>
  61.                     </div>
  62.                     <div class="card-body">
  63.                         <form action="">
  64.                             <div class="row align-items-end">
  65.                                 <div class="col-md-4 form-group">
  66.                                     <label for="sort" class="control-label">Sort By</label>
  67.                                     <select name="sort" id="sort" class="form-select form-select-sm">
  68.                                         <option value="key" <?= $sort == 'key' ? 'selected' : '' ?>>Key</option>
  69.                                         <option value="value" <?= $sort == 'value' ? 'selected' : '' ?>>Value</option>
  70.                                     </select>
  71.                                 </div>
  72.                                 <div class="col-md-4 form-group">
  73.                                     <label for="dir" class="control-label">Sort Dir</label>
  74.                                     <select name="dir" id="dir" class="form-select form-select-sm">
  75.                                         <option value="asc" <?= $dir == 'asc' ? 'selected' : '' ?>>Ascending</option>
  76.                                         <option value="desc" <?= $dir == 'desc' ? 'selected' : '' ?>>Descending</option>
  77.                                     </select>
  78.                                 </div>
  79.                                 <div class="col-md-4 form-group">
  80.                                     <button class="btn btn-flat btn-primary bg-gradient">Sort</button>
  81.                                 </div>
  82.                             </div>
  83.                         </form>
  84.                     </div>
  85.                 </div>
  86.             </div>
  87.         </div>
  88.         <div class="row">
  89.             <div class="col-md-6">
  90.                 <h3 class="fw-bold">Original Sort</h3>
  91.             </div>
  92.             <div class="col-md-6">
  93.                 <h3 class="fw-bold">Sorted</h3>
  94.             </div>
  95.         </div>
  96.         <div class="row">
  97.             <div class="col-md-6 bg-secondary bg-gradient bg-opacity-50 border py-5 text-light">
  98.                 <table class="table table-striped table-bordered">
  99.                     <colgroup>
  100.                         <col width="10%">
  101.                         <col width="90%">
  102.                     </colgroup>
  103.                     <thead>
  104.                         <tr class="bg-gradient bg-primary text-light">
  105.                             <th class="text-center">Key</th>
  106.                             <th class="text-center">Value</th>
  107.                         </tr>
  108.                     </thead>
  109.                     <tbody>
  110.                         <?php foreach($random_array as $k => $v): ?>
  111.                             <tr class="">
  112.                                 <td class="text-center"><?= $k ?></td>
  113.                                 <td><?= $v ?></td>
  114.                             </tr>
  115.                         <?php endforeach; ?>
  116.                     </tbody>
  117.                 </table>
  118.             </div>
  119.             <div class="col-md-6 bg-secondary bg-gradient bg-opacity-50 border py-5 text-light">
  120.                 <?php
  121.                
  122.                 if($sort =='value'){
  123.                     if($dir == 'asc'){
  124.                         asort($random_array);
  125.                     }else{
  126.                         arsort($random_array);
  127.                     }
  128.                 }else{
  129.                     if($dir == 'asc'){
  130.                         ksort($random_array);
  131.                     }else{
  132.                         krsort($random_array);
  133.                     }
  134.                 }
  135.                 ?>
  136.                 <table class="table table-striped table-bordered">
  137.                     <colgroup>
  138.                         <col width="10%">
  139.                         <col width="90%">
  140.                     </colgroup>
  141.                     <thead>
  142.                         <tr class="bg-gradient bg-primary text-light">
  143.                             <th class="text-center">Key</th>
  144.                             <th class="text-center">Value</th>
  145.                         </tr>
  146.                     </thead>
  147.                     <tbody>
  148.                         <?php foreach($random_array as $k => $v): ?>
  149.                             <tr class="">
  150.                                 <td class="text-center"><?= $k ?></td>
  151.                                 <td><?= $v ?></td>
  152.                             </tr>
  153.                         <?php endforeach; ?>
  154.                     </tbody>
  155.                 </table>
  156.             </div>
  157.         </div>
  158.     </div>
  159. </body>
  160. </html>

You can test the source code on your end. You can download XAMPP as your virtual server to run a PHP Script in your local device. You can also download the working source code that I created for this article. The download link/button is located after this article.

That ends this tutorial. I hope this article will help you with what you are looking for and you'll find it useful for your current and future PHP Project.

Explore more on this website for more Tutorials and Free PHP Source Codes.

Related Links:

Happy Coding :)

Add new comment