/ var / www / html / cai / caiold1 / [ HOME SHELL ]

Name	Size	Permission	Action
admin	[ DIR ]	drwxr-x--x
css	[ DIR ]	drwxr-x--x
docs	[ DIR ]	drwxr-x--x
image	[ DIR ]	drwxr-x--x
images	[ DIR ]	drwxr-x--x
img	[ DIR ]	drwxr-x--x
js	[ DIR ]	drwxr-x--x
lib	[ DIR ]	drwxr-x--x
old	[ DIR ]	drwxr-x--x
scss	[ DIR ]	drwxr-x--x
about.php	10.29 KB	-rwxr-x--x
btech-csai.php	22.84 KB	-rwxr-x--x
cairamjee120523.sql	136.45 KB	-rwxr-x--x
cc-csai.php	12.89 KB	-rwxr-x--x
codeAI.php	11.5 KB	-rwxr-x--x
collaboration.php	8.41 KB	-rwxr-x--x
contact.php	10.95 KB	-rwxr-x--x
courses.php	22.38 KB	-rwxr-x--x
dbconfig.php	1.22 KB	-rwxr-x--x
education.php	8.28 KB	-rwxr-x--x
events.php	24.36 KB	-rwxr-x--x
index.php	23.22 KB	-rwxr-x--x
mediacoverage.php	24.18 KB	-rwxr-x--x
mtech-csai.php	16.85 KB	-rwxr-x--x
people-bkp.php	49.56 KB	-rwxr-x--x
people.php	66.86 KB	-rwxr-x--x
project.php	10.99 KB	-rwxr-x--x
project_old07032022.php	8.86 KB	-rwxr-x--x
publications.php	12.48 KB	-rwxr-x--x
research.php	10.39 KB	-rwxr-x--x
staff.php	8.7 KB	-rwxr-x--x
students.php	23.91 KB	-rwxr-x--x
tab.php	5.43 KB	-rwxr-x--x
talks.php	22.09 KB	-rwxr-x--x
vacancies.php	8.55 KB	-rwxr-x--x

Code Editor : tab.php

<?php
  $servername = "localhost";//location of the database
  $username = "root";//username to access
  $password= "";//password to access
  $dbname = "caidb";//database you want to access

//establish connection:
  $conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
  }

//get the data from the db
  $output = sqlStringGetAsArray($conn, "SELECT * FROM publicationstbl");//This is the "Tabs" table in the "Tabs" database

function sqlStringGetAsArray($conn, $sql=""){
    $result = $conn->query($sql);
    if ($conn->error){
        return false;
    }
    $array = [];
    $headers=$result->fetch_fields();
    $top = [];
    foreach ($headers as $header){
        $name = $header->name;
        array_push($top, $name);
    }
    array_push($array,$top);

while ($row = $result->fetch_row()){
        array_push($array, $row);
    }

return $array;
  }

//set the output to the format we need to display:
  $tabContents = [];
  $first = true;
  foreach($output as $val){
    if($first){
      $first = false;
    }else{
      if(!isset($tabContents[$val[1]])){
        $tabContents[$val[1]] = [];
      }
      array_push($tabContents[$val[1]], [$val[2], $val[3]]);
    }
  }
  ?>
    <html>
    <head>
     <style>
		.Tabs{
    background-color: #222;
}

.level1{
    padding: 16px;
    color: #eee;
    background-color: #222;
    display: inline-block;
}

.level1.active{
    color: #fff;
    background-color: #4caf50;
    display: inline-block;
}

.level1:hover{
    color: #000;
    background-color: #eee;
}

.innerTabs{
    background-color: #444;
    color: #eee;
}

.parent:not(.visible){
    display: none;
}

.level2{
    padding: 16px;
    background-color: #444;
    color: #fff;
    display: inline-block;
}

.level2.active{
    color: #fff;
    background-color: #65bd68;
    display: inline-block;
}

.level2:hover{
    color: #000;
    background-color: #eee;
    display: inline-block;
}

.contents{
    background-color: #ddd;
    color: #000;
    padding: 16px;
}

.contents div:not(.visible){
    display: none;
}
		</style>
    </head>
    <body>
      <script src='http://code.jquery.com/jquery-1.9.1.js'></script>
      <div id='container'>
        <div class='Tabs'>
          <?php
            $i1 = 0;
            foreach($tabContents as $key=>$value){
              if($i1==0){
                echo"<div id='Tab".$i1."' class='level1 active' onclick='updateTabs(this)'>".$key."</div>";
              }else{
                echo"<div id='Tab".$i1."' class='level1' onclick='updateTabs(this)'>".$key."</div>";
              }
              $i1++;
            }
          ?>
        </div>
        <div class='innerTabs'>
          <?php
            $i1 = 0;
            foreach($tabContents as $key=>$value){
              $i2 = 0;
              if($i1 == 0){
                echo("<div id='Tab".$i1."' class='parent visible'>");
                foreach($value as $i){
                  if($i2 == 0){
                    echo"<div id='innerTab".$i2."' class='level2 active' onclick='updateInnerTabs(this)'>".$i[0]."</div>";
                  }else{
                    echo"<div id='innerTab".$i2."' class='level2' onclick='updateInnerTabs(this)'>".$i[0]."</div>";
                  }
                  $i2++;
                }
                $i1++;
              }else{
                echo("<div id='Tab".$i1."' class='parent'>");
                foreach($value as $i){
                  if($i2 == 0){
                    echo"<div id='innerTab".$i2."' class='level2 active' onclick='updateInnerTabs(this)'>".$i[0]."</div>";
                  }else{
                    echo"<div id='innerTab".$i2."' class='level2' onclick='updateInnerTabs(this)'>".$i[0]."</div>";
                  }
                  $i2++;
                }
                $i1++;
                }
              echo("</div>");
            }
          ?>
        </div>
        <div class='contents'>
          <?php
            $i1 = 0;
            foreach($tabContents as $key=>$value){
              $i2 = 0;
              foreach($value as $i){
                if($i1 == 0 && $i2 == 0){
                  echo"<div id='Tab".$i1."_innerTab".$i2."_content' class='level3 visible'>".$i[1]."</div>";
                }else{
                  echo"<div id='Tab".$i1."_innerTab".$i2."_content' class='level3'>".$i[1]."</div>";
                }
                $i2++;
              }
              $i1++;
            }
          ?>
        </div>
      </div>
      <script>
        function updateTabs(el) {
          visibility(el, '.innerTabs');
          $('.innerTabs').children('#' + $(el).attr('id')).addClass('visible');
          updateInnerTabs($('.innerTabs').children('#' + $(el).attr('id')).children().first());
        }
        function updateInnerTabs(el) {
          visibility(el, '.contents');
          var tab = $(el).parent().attr('id') + '_';;
          var innerTab = $(el).attr('id') + '_content';
          $('#' + tab + innerTab).addClass('visible');
        }
        function visibility(el, aClass) {
          $(el).siblings('.active').removeClass('active');
          $(el).addClass('active');
          $(aClass).children('.visible').removeClass('visible');
        }
      </script>

</body>
    </html>

Urban Research Lab

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.