I am working on a project which is a sort of FAQ made in HTML and PHP (based on Bootstrap).
Some people with limited knowledge in HTML/PHP will need to update it regularly so I decided to use the "include" feature in PHP to call some .txt files. Then, the people who will update it will just have to modify the simple .txt files, which doesn't require any coding knowledge.
The text files are stored in faq/main-category/sub-category/1/question.txt and the same with "answer.php" (both in the same folder).
The FAQ items are identified with numbers (which you can see on the screenshot below). These numbers refer to the directory ("1" in the .txt file path above) where the files are.
Screenshot of list of FAQ items
Now, here's the thing: I want to allow people who will modify it to add some new FAQ items easily. The idea is for them to only have to create a new folder (let's say "4") in the FTP server, and it would be automatically listed on the FAQ.
For this, I need that the plugin detects all items in the FTP server and list them all. I believe that is possible with a loop, however, I have no idea how...
Can anyone help with that? Any help will be greatly appreciated! :)
Here is the current code for the first FAQ item of the screenshot:
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header d-flex w-100 justify-content-between" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
<?php include('../faqs/professionals/eligibility-conditions/1/question.txt'); ?>
</a>
</h5>
<small>1</small>
</div>
<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div><p><?php include('../faqs/professionals/eligibility-conditions/1/answer.txt'); ?></p></div>
</div>
</div>
</div>
You will see both "include" codes that call the .txt files for the question and for the answer.
Here is a screenshot of the file path
<?php
foreach (glob("../faqs/professionals/eligibility-conditions/*",GLOB_ONLYDIR) as $foldername) {
?>
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header d-flex w-100 justify-content-between" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
<?php include($foldername.'/question.txt'); ?>
</a>
</h5>
<small>1</small>
</div>
<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div><p><?php include($foldername.'/answer.txt'); ?></p></div>
</div>
</div>
</div>
<?php
}
?>
I am not sure what is your application structure, maybe you are using MVC architecture but you can do it like below.
Create a PHP function which will return an array with questions and answers
<?php
function get_faqs(){
$folderpath = 'faqs/shared/'; //change as per your desired path
if(scandir($folderpath)){
$file_arr = scandir($folderpath);
foreach ($file_arr as $val){
if($val == '.' || $val == '..'){
continue;
} else if(scandir($folderpath.$val)){
$faq_arr = scandir($folderpath.$val);
foreach ($faq_arr as $file){
if($file == '.' || $file == '..'){
continue;
} else if($file == 'question.txt'){
$faq_final[$val]['question'] = file_get_contents($folderpath.$val.'/'.$file);
} else if($file == 'answer.txt'){
$faq_final[$val]['answer'] = file_get_contents($folderpath.$val.'/'.$file);
}
}
}
}
}
return $faq_final;
}
?>
Then iterate that array in your HTML as below
<?php
$faqs = get_faqs(); // you need to call this in controller if you have MVC application
?>
<div id="accordion" role="tablist">
<?php foreach ($faqs as $num => $data) { ?>
<div class="card">
<div class="card-header d-flex w-100 justify-content-between" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne">
<?php echo $data['question']; ?>
</a>
</h5>
<small><?php echo $num; ?></small>
</div>
<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div><p><?php echo $data['answer']; ?></p></div>
</div>
</div>
</div>
<?php } ?>
</div>
Related
Hi everyone I'm niubbie in php.I have a problem with tab. I would like the tabs on their click to show a different topic. All this using php and calling the db.
My DB:
giorno
pranzo
cena
lunedi
12:00
20:00
martedi
12:00
20:00
mercoledi
12:00
20:00
giovedi
12:00
20:00
venerdi
12:00
20:00
Days are represented by tabs and when I click on a different day I want it to show lunch and dinner of that particular day.
My code:
<section class="big-section bg-light-gray border-top border-color-medium-gray wow animate__fadeIn">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12 text-center margin-six-bottom">
<h6 class="alt-font text-extra-dark-gray font-weight-500">Orari</h6>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-10 tab-style-05">
<div class="tab-box">
<!-- start tab navigation -->
<ul class="nav nav-tabs margin-7-rem-bottom md-margin-5-rem-bottom xs-margin-15px-lr align-items-center justify-content-center font-weight-500 text-uppercase">
<?php
$sql = "SELECT * FROM orari_ristorante ";
$risultato = mysql_query($sql) or die(mysql_error()."<br>Impossibile eseguire l'interrogazione");
$i=0;
while ($riga = mysql_fetch_assoc($risultato)){
?>
<?php if($i == 0){?>
<li class="nav-item alt-font"><a class="nav-link active" href="#tab-nine1" data-toggle="tab"><?php echo $riga['giorno'];?></a></li>
<?php }else{?>
<li class="nav-item alt-font"><a class="nav-link" href="#tab-nine1" data-toggle="tab"><?php echo $riga['giorno'];?></a></li>
<?php }
$i++;
}?>
</ul>
<!-- end tab navigation -->
</div>
<div class="tab-content">
<!-- start tab content -->
<div class="tab-pane med-text fade in active show" id="tab-nine1">
<div class="panel-group accordion-event accordion-style-04" id="accordion1" data-active-icon="icon-feather-minus" data-inactive-icon="icon-feather-plus">
<!-- start accordion item -->
<div class="panel border-color-black-transparent">
<div class="panel-heading">
<?php
$sql = "SELECT pranzo,cena FROM orari_ristorante LIMIT 1";
$risultato = mysql_query($sql) or die(mysql_error()."<br>Impossibile eseguire l'interrogazione");
while ($riga = mysql_fetch_assoc($risultato)){
?>
<span class="panel-time">Pranzo</span>
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
<div class="panel-title">
<span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['pranzo'] ;?></span>
</div>
</a>
<span class='prenota'>PRENOTA</span>
<span class="panel-time">Cena</span>
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
<div class="panel-title">
<span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['cena'] ;?></span>
</div>
</a>
<span class='prenota'>PRENOTA</span>
<?php
}
?>
</div>
</div>
</div>
</div>
<!-- end tab content -->
</div>
</div>
</div>
</div>
</section>
My problem is that each tab shows all the rows and not the specific one for that day
My Problem
You need to ensure you are using unique ID's for your contents and using them in your href of the tab.
Reading your code it looks like each tab is created with the same ID
<li class="nav-item alt-font"><a class="nav-link active" href="#tab-nine1" data-toggle="tab"><?php echo $riga['giorno'];?></a></li>
I would echo out the unique id from the database eg.
href="#tab-<?echo $riga['id'];?>" (or whatever your unique column header is)
Ensure you also echo this out further down when the tab content is being created.
Based on what you are trying to accomplish, if you limit your results to one, you will always only show the first day in the db. Here's how I would change your second while loop.
<?php
$sql = "SELECT * FROM orari_ristorante";
$risultato = mysqli_query($conn, $sql);
$i = 0;
while ($riga = mysqli_fetch_assoc($risultato)){
if($i == 0){
$css = ""
}else{
$css = "display:none"
}
?>
<div class="giorno_tab <?php echo $riga['giorno'] ;?>" style="<?php echo $css ;?>">;
<span class="panel-time">Pranzo</span>
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
<div class="panel-title">
<span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['pranzo'] ;?></span>
</div>
</a>
<span class='prenota'>PRENOTA</span>
<span class="panel-time">Cena</span>
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
<div class="panel-title">
<span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['cena'] ;?></span>
</div>
</a>
<span class='prenota'>PRENOTA</span>
</div>
<?php
$i++;}
?>
</div>
It is not the solution, however you can build on top of that to accomplish what you are trying to do. Hopefully that somewhat helps.
Just to explain, I was adding $riga["giorno"] as an kind of ID in the class, however Revbo's answer would give a clearer code when it comes to an ID
Hi my question is: How can I pass data from my array to another part of my html code which is not in same file.
I have file item.php and index.php In index I have array with objects. Now I have to include item.php as many times as count of item in array and every time send different data to item.
Index.php
<?php
require_once('Subject.php');
$sub1 = new Subject(
'informačné technológie',
'Absolvent študijného odboru inteligentné technológie je kvalifikovaný odborný pracovník, k
torý má vedomosti a zručnosti z oblasti informačných technológií, programovania, počítačových sietí,
smart technológií, internetu vecí, databázových systémov, základov kybernetickej bezpečnosti,
robotiky, 3D technológií, serverových a cloudových technológií, grafiky, základov elektroniky,
optimalizácie riadenia procesov a problematiky súvisiacej s digitálnou firmou. Je schopný využívať
mäkké zručnosti v prezentovaní a vystupovaní.',
'slider1.png',
'video1.mp4');
$sub2 = new Subject(
'elektrotechnika',
'Absolvent študijného odboru inteligentné technológie je kvalifikovaný odborný pracovník,
ktorý má vedomosti a zručnosti z oblasti informačných technológií, programovania,
počítačových sietí, smart technológií, internetu vecí, databázových systémov, základov
kybernetickej bezpečnosti, robotiky, 3D technológií, serverových a cloudových technológií,
grafiky, základov elektroniky, optimalizácie riadenia procesov a problematiky súvisiacej s
digitálnou firmou. Je schopný využívať mäkké zručnosti v prezentovaní a vystupovaní.',
'slider2.png',
'video2.mp4'
);
... and moore subjects can be here
$subjects = array($sub1, $sub2, $sub3, $sub4, $sub5, $sub6, $sub7);
?>
<!--Header -->
<?php include("./parts/main/header.php") ?>
<main>
<div class="container-fluid p-0">
<div class="black-overlay"></div>
<div id="dod-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
// This I need generate for every subject
<?php include("./parts/carousel-item.php") ?>
</div>
</div>
</div>
</main>
<!--Footer -->
<?php include("./parts/main/footer.php") ?>
Item.php
<div class="carousel-item active d-flex flex-column">
<div class="carousel-bg" style="background-image:url('assets/images/slider-electro.jpg')">
</div>
<div class="carousel-content w-100 flex-grow-1 d-flex flex-column justify-content-center align-items-center">
<div class="top w-100 flex-grow-1 d-flex flex-column flex-xl-row h-100 justify-content-center align-items-center p-5">
<div class="left mr-xl-5 order-2 order-xl-1">
<h2 class="slider-caption border-red text-xl-left text-center">Informačné technológie</h2>
<div class="cst-line d-xl-none mx-auto line-orange"></div>
<p class="slider-text text-center text-xl-left my-3">
HERE COMES TEXT OF SUBJECT OBJECT
</p>
<div class="text-center text-xl-left">
<a href="HERE COMES LINK OF SUBJECT" target="_blank"
class="btn btn-orange">
<i class="fas fa-hand-point-right"></i>
Pustiť video
</a>
</div>
</div>
<div class="right order-1 order-xl-2 mb-3 mb-xl-0">
<div class="video-container position-relative">
<i class="fas fa-play-circle fa-4x position-absolute"></i>
<video>
<source src=" HERE COMES LINK OF SUBJECT" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
<div class="bottom">
<?php include("navigation.php") ?>
</div>
</div>
</div>
If you have a variable in one file and then include another file from that first file, that same variable will also be available if that other file.
So in your example, if you have something like
// index.php
<?php
$subjects = [
new Subject('First Title'),
new Subject('Another Title'),
];
foreach ($subjects as $subject) {
include('item.php');
}
Then whithin your item.php you can simply access the $subject variable (exactly as it would be available within that foreach loop):
// item.php
<div class="carousel-content">
<div class="text-center">
<?php echo htmlspecialchars( $subject->getTitle() ) ?>
</div>
</div>
Of course, above is a more simplified version of your example, but it will work the same with your more detailed version.
I got a FAQ element in which I want to show questions and answers. I am using the joomla cms template to edit so I am fairly limited on how to add this.
My solution on how I wanted to do this:
In the textfield I add the string like this:
[question1? || Answer1]
[question2? || Answer2]
[question3? || Answer3]
Then I split the questions/answers on the brackets around them, and finally split those results on the two lines inbetween.
Then finally loop the results in this format:
<div id="accordion-1" role="tablist" aria-multiselectable="true">
<div class="panel panel-default panel-alt-two">
<div class="panel-heading active" role="tab" id="heading1">
<h5 class="panel-title"><a data-toggle="collapse" data-parent="#accordion-1" href="#collapse1" aria-expanded="true" class=""><span class="accordion-icon"><span class="stacked-icon"><i class="fa fa-rocket"></i></span></span>Question 1</a></h5>
</div>
<!-- LOOP FROM HERE -->
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1" style="height: auto;">
<div class="panel-body">Answer 1</div>
</div>
<div class="panel-heading" role="tab" id="heading2">
<h5 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion-1" href="#collapse2" aria-expanded="false"><span class="accordion-icon"><span class="stacked-icon"><i class="fa fa-quote-left"></i></span></span>Question 2</a></h5>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2" style="height: 0px;">
<div class="panel-body">Answer 2</div>
</div>
<div class="panel-heading" role="tab" id="heading3">
<h5 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion-1" href="#collapse3" aria-expanded="false">Question 3<span class="accordion-icon"><span class="stacked-icon"><i class="fa fa-flag"></i></span></span></a></h5>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3" style="height: 0px;">
<div class="panel-body">Answer 3</div>
</div>
<!-- -->
</div>
</div>
I split the parts like this:
// faq data
$faq = "SELECT * FROM `web_content` WHERE catid = 13 AND `alias` = '".$conn->real_escape_string($_GET['alias'])."' AND state = 1 ORDER BY ordering";
$faqcon = $conn->query($faq);
$faqcr = array();
while ($faqcr[] = $faqcon->fetch_array());
$faqtext = $faqcr[0]['introtext'];
preg_match_all("/\[([^\]]*)\]/", $faqtext, $faqarray);
How can I get the question and answer seperate and loop them for example like this:
<div class="panel-heading" role="tab" id="heading3">
<h5 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion-1" href="#collapse3" aria-expanded="false">'.$question[0].'<span class="accordion-icon"><span class="stacked-icon"><i class="fa fa-flag"></i></span></span></a></h5>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3" style="height: 0px;">
<div class="panel-body">'.$answer[0].'</div>
</div>
I know I have to add numbers to the accordion element but that is not an issue.
I have below code for help contents,
<div class="tab-content">
<?php
foreach($helpCategoryArray as $category)
{
?>
<div id="tab_<?php echo $category["helpcategory_id"]?>" class="tab-pane active">
<div id="accordion1" class="panel-group">
<?php
foreach($topicsArray as $topic)
{
?>
<div class="panel panel-default" id="topic_<?php echo $topic["topic_id"]?>">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_1">
<?php echo $topic["topic_subject"]?>
</h4>
</div>
<div id="accordion1_1" class="panel-collapse collapse in">
<div class="panel-body" id="context" data-toggle="context" data-target="#context-menu">
<?php echo $topic["topic_content"]?>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
<?php
}
?>
</div>
What is my requirement is left side of page is tree of selection, when one item category is selected, related contents are loading on right side,
Now on above code have did that with id=tab_x, x will come from DB, so need loop for that, so that i can give reference to tab_x as href,
In tab div, i have help topics which are related to this items, so i need to loop all my topics here,
Problem is that my one help topic is also looping in first loop looping times,
So how to echo this help topic,
Thanks,
Finally it solved with adding If condition in first PHP loop,
if ($category["helpcategory_id"] == $topic["topic_category"])
{--code---}
I'm having a hard time getting this dynamic accordion to work properly.
I'm fetching accordion title from MySQL database and trying to create a dynamic accordion based on number of rows in my database.
As of right now, I'm only able to create single tab with first title in my database.
<?php
foreach ($variable as $key);
?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="margin-right:50%;" > <img src="image.jpeg" class="event-icon"> <?php echo $key['title']?>;</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<p>Event content
</p>
</div>
</div>
</div>
</div>
</div>
I'm trying to create the following html structure when the foreach loop runs.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="margin-right:50%;" > <img src="image.jpeg" class="event-icon"> <?php echo $key['title']?>;</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<p>Event content
</p>
</div>
</div>
</div>
Any suggestion is highly appreciated.
You have to add at the end of your foreach loop, like this:
<?php endforeach; ?>
Also you have to change ; -> : in your foreach header:
foreach ($variable as $key);
to:
foreach ($variable as $key):
//^See here
Looks like you have a problem with the alternative syntax for foreach
foreach ($variable as $key);
should be
foreach ($variable as $key):
semicolon (;) should be a colon (:)
it also ends with a endforeach semicolon
endforeach;