Php tabs to html

Create Dynamic Bootstrap Tabs with PHP & MySQL

You have seen tabs in many websites to display dynamic data on different tab on same page. So if you’re thinking about implementing same tabs functionality, then you’re here at right place.

In this tutorial, you will learn how to create dynamic Bootstrap tabs with PHP and MySQL. The tutorial explained with an example where we have created tabs for categories and display products from related category when category tab clicked. The data for the tabs and content loaded on page load but the content remain invisible except active tab. You can also download demo source code from download link.

So let’s start the coding. We will have following file structure for the example to create dynamic Bootstrap tabs using PHP and MySQL .

Steps1: Create Database Tables

As in this example, we will display categories as tabs and display tabs related data. So first we will create MySQL database tables categories and category_products. We will insert few records into tables and then display it.

we will create categories table using below query.

CREATE TABLE `categories` ( `id` int(11) NOT NULL, `name` varchar(256) NOT NULL, `description` text NOT NULL, `created` datetime NOT NULL, `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ) ENGINE=MyISAM DEFAULT CHARSET=utf8;

we will create category_products table using below query.

CREATE TABLE `category_products` ( `id` int(11) NOT NULL, `p_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL, `p_image` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL, `price` float(10,2) NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Steps2: Create Tabs and Content Container
In index.php, we will create Tabs and Tabs Content container HTML using Bootstrap to display Tabs and contents. We have also included tabs.php to load Tabs and Tabs Content data to display.

Читайте также:  Javascript get all child elements

Example: Create Dynamic Bootstrap Tabs with PHP & MySQL

Steps3: Create Tabs and Content from MySQL

Now finally in tabs.php, we create Tabs and Tabs related content from MySQL with PHP. First we will get categories data from table categories to create Tabs and then get related category product data from table category_products to display products according to Tabs.

$category_html.= ''. $category['name'].''; $product_html .= '
'; $product_sql = "SELECT id, p_name, p_image, price FROM category_products WHERE id"]; $product_results = mysqli_query($conn, $product_sql) or die("database error:". mysqli_error($conn)); if(!mysqli_num_rows($product_results)) < $product_html .= '
No product found!'; > while( $product = mysqli_fetch_assoc($product_results) ) < $product_html .= '
'; $product_html .= ''; $product_html .= '

'.$product["p_name"].'

'; $product_html .= '

Price: $'.$product["price"].'

'; $product_html .= '
'; > $product_html .= '
'; > ?>
  • Star Rating System with Ajax, PHP and MySQL
  • Create Event Calendar with jQuery, PHP and MySQL
  • Build Your Own CAPTCHA Script with PHP
  • Convert Unix Timestamp To Readable Date Time in PHP
  • Inventory Management System with Ajax, PHP & MySQL
  • Create Live Editable Table with jQuery, PHP and MySQL
  • Live Add Edit Delete datatables Records with Ajax, PHP and MySQL
  • Stripe Payment Gateway Integration in PHP
  • Export Data to Excel with PHP and MySQL
  • Star Rating System with Ajax, PHP and MySQL
  • Create Dynamic Bootstrap Tabs with PHP & MySQL
  • How To Create Simple REST API in PHP

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download

2 thoughts on “ Create Dynamic Bootstrap Tabs with PHP & MySQL ”

How do you expect us to click on the download button when google ads have covered the entire download button. #sad

Источник

Using PHP to convert tabs to spaces for HTML display?

It almost works, but the tabs are being troublesome. It is trivial to replace the tabs with two spaces, but then non-whitespace characters are pushed over instead of absorbed into the tabs. True tabs absorb n-1 non-whitespace characters (where n is the number of spaces per tab)., [+] Note that this is meant to work with one line, so you will need to process line by line with fgets instead of whole file at once. Ah, that must be why lines (after the first one) that start with a double-tab are short one space. No problem, it was simple enough to fix: $lines=explode(«\n», $fc); foreach ($lines as $l) print(tab2space($l).»\n»); – Synetech Jan 13 ’13 at 23:01 ,I’m trying to figure out a (reasonably easy) way to convert the tabs to spaces while accounting for tabs that don’t take up the full n spaces., Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers

I have written this function some time ago, might be helpful:

function tab2space($line, $tab = 4, $nbsp = FALSE) < while (($t = mb_strpos($line,"\t")) !== FALSE) < $preTab = $t?mb_substr($line, 0, $t):''; $line = $preTab . str_repeat($nbsp?chr(7):' ', $tab-(mb_strlen($preTab)%$tab)) . mb_substr($line, $t+1); >return $nbsp?str_replace($nbsp?chr(7):' ', ' ', $line):$line; > 

Answer by Jasiah Hendrix

I need to display a plain-text file that contains two-space tab’d columns of data in a web page.,I’m trying to figure out a (reasonably easy) way to convert the tabs to spaces while accounting for tabs that don’t take up the full n spaces.,What I did was to use PHP to read the text file and print it out between tags to use a monospace font as so:,[+] Note that this is meant to work with one line, so you will need to process line by line with fgets instead of whole file at once.

What I did was to use PHP to read the text file and print it out between tags to use a monospace font as so:

For example, the following table should be displayed as so:

| | 43| 43| 7| | | | 12|128|128|128| | 53| | 3| 3| 3| 3| | | | | | 21| 21| 39| | 

However by blindly replacing all tabs with two-spaces, we get this:

| | 43| 43| 7| | | | 12|128|128|128| | 53| | 3| 3| 3| 3| | | | | | 21| 21| 39| | 

Answer by Lacey Harvey

Method 2: Using the tab-size property to set spacing for tab characters,The tab-size CSS property is set the number of spaces each tab character will display. Changing this value allows inserting the needed amount of space on one tab character. This method however only works with pre-formatted text (using tags).,The tab character can be inserted by holding the Alt and pressing 0 and 9 together.,The display property is also set to ‘inline-block’ so that no line-break is added after the element. This allows the space to sit next to text and other elements.

Regular space:   Two spaces gap:   Four spaces gap:   

Answer by Jace Vu

Answer by Andre Knapp

Using str_replace( ) for conversion, however, doesn’t respect tab stops. If you want tab stops every eight characters, a line beginning with a five-letter word and a tab should have that tab replaced with three spaces, not one. Use the pc_tab_expand( ) function shown in Example 1-1 to turn tabs to spaces in a way that respects tab stops. , You want to change spaces to tabs (or tabs to spaces) in a string while keeping text aligned with tab stops. For example, you want to display formatted text to users in a standardized way. ,Each function assumes tab stops are every eight spaces, but that can be modified by changing the setting of the $tab_stop variable. ,The regular expression in pc_tab_expand( ) matches both a group of tabs and all the text in a line before that group of tabs. It needs to match the text before the tabs because the length of that text affects how many spaces the tabs should be replaced so that subsequent text is aligned with the next tab stop. The function doesn’t just replace each tab with eight spaces; it adjusts text after tabs to line up with tab stops.

$r = mysql_query("SELECT message FROM messages WHERE or die(); $ob = mysql_fetch_object($r); $tabbed = str_replace(' ',"\t",$ob->message); $spaced = str_replace("\t",' ',$ob->message); print "With Tabs: 
$tabbed

"; print "With Spaces:

$spaced

";

function pc_tab_expand($a) < $tab_stop = 8; while (strstr($a,"\t")) < $a = preg_replace('/^([^\t]*)(\t+)/e', "'\\1'.str_repeat(' ',strlen('\\2') * $tab_stop - strlen('\\1') % $tab_stop)",$a); >return $a; > $spaced = pc_tab_expand($ob->message);
function pc_tab_unexpand($x) < $tab_stop = 8; $lines = explode("\n",$x); for ($i = 0, $j = count($lines); $i < $j; $i++) < $lines[$i] = pc_tab_expand($lines[$i]); $e = preg_split("/(.\)/",$lines[$i],-1,PREG_SPLIT_DELIM_CAPTURE); $lastbit = array_pop($e); if (!isset($lastbit)) < $lastbit = ''; >if ($lastbit == str_repeat(' ',$tab_stop)) < $lastbit = "\t"; >for ($m = 0, $n = count($e); $m < $n; $m++) < $e[$m] = preg_replace('/ +$',"\t",$e[$m]); >$lines[$i] = join('',$e).$lastbit; > $x = join("\n", $lines); return $x; > $tabbed = pc_tab_unexpand($ob->message);

Answer by Jaliyah Mullins

trim — Strip whitespace (or other characters) from the beginning and end of a string,ltrim() — Strip whitespace (or other characters) from the beginning of a string,rtrim() — Strip whitespace (or other characters) from the end of a string, This function returns a string with whitespace stripped from the beginning and end of string. Without the second parameter, trim() will strip these characters:

string(32) " These are a few words :) . " string(16) " Example string " string(11) "Hello World" string(28) "These are a few words :) . " string(24) "These are a few words :)" string(5) "o Wor" string(9) "ello Worl" string(14) "Example string" 

Answer by Noor Acevedo

If your code contains lines that are shorter than a standard convention, you can convert them by disabling the Line breaks checkbox before reformatting., Use this tab to specify where you want PhpStorm to insert spaces automatically. Select the checkboxes next to the description of relevant locations and check the results in the Preview pane.,In this field, specify the number of spaces to be inserted for each indent level.,If the checkbox is cleared, PhpStorm uses spaces instead of tabs.

Special else if treatment — If this checkbox is selected, else if statements are located in the same line.

Источник

Оцените статью