Trying to create a looping cards in php (bootstrap) - javascript

im fairly new in php and mysqli and trying to make some basic website.
basically i want to make a looping statement in php to create cards in the same row with same size and col without myself creating the cards manually in html.
using bootstrap, php and mysqli
the code is successfully running, but the output doesnt match the bootstrap cards, and they refuse to be in the same row
can anyone help me ? thank you
<?php include("conn.php"); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="img/ArdiantaPargo.png" />
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap/css/style.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
</head>
<body>
<header>
<?php include("header.php"); ?>
</header>
<nav class="navbar navbar-default"><?php include("menu.php"); ?></nav>
<article>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<!-- article ------------------->
<?php
$query = mysqli_query($koneksi, "SELECT * FROM article ORDER BY datae DESC");
// looping Artikel
while($artikel = mysqli_fetch_array($query)){
echo "<div class='card-body'>";
echo "<a class='card-title' href='artikel.php?id=".$artikel['id']."' />".$title['title']."</a>";
echo "<p class='article-date'>Oleh <b>".$author['author']."</b>, pada ".$article['date']."</p>";
echo "</div>";
}
?>
<!-- END article --------------->
</div>
</div>
</div>
</div>
</article>
<footer>
<?php include("footer.php"); ?>
</footer>
</body>
</html>

I think you left part of your card out of your loop. I'm guessing you've got one <div class="card"> containing many <div class="card-body">s.
I would leave the <div class="row"> out of your loop, but everything inside that should be part of the loop.
<div class="row">
<?php
$query = mysqli_query($koneksi, "SELECT * FROM article ORDER BY datae DESC");
// looping Artikel
while($artikel = mysqli_fetch_array($query)){
echo "<div class='col-12 col-md-4'>";
echo "<div class='card mb-4 shadow-sm'>";
echo "<div class='card-body'>";
echo "<a class='card-title' href='artikel.php?id=".$artikel['id']."' />".$title['title']."</a>";
echo "<p class='article-date'>Oleh <b>".$author['author']."</b>, pada ".$article['date']."</p>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
</div>

Related

javascript change background color using if statement in php

please i always stuck with javascript that can't run in my php. i wanna change the background color on class one-container if the data on class one >= 100. the data come from db that i connect with my php.
any help would be appreciated.
thanks and sorry for my bad english
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="body-container">
<div class="sec-nav-container">
<div class="wrapper">
<nav>
<div class="title">
<span class="dashboard">Dashboard Billing</span>
</div>
<div class="time-container">
<b class="last-updated">Last Updated on:</b>
<script type="text/javascript">
function lastModified () {
document.write(document.lastModified);
}
lastModified();
</script>
</div>
</nav>
</div>
</div>
<div class="header-container">
<div class="wrapper">
<?php
include "connect_db.php";
$sql = "SELECT * FROM tb_dashboard";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "
<div class='one-container'>
<h1 class='one'>" . $row['kirim_mpn'] . "</h1>
<p class='mpn'>Siap Kirim MPN</p>
</div>";
}
}
else {
echo "Tidak ada hasil";
}
mysqli_close($conn);
?>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script language="JavaScript" src="emil.js" type="text/javascript"></script>
</body>
</html>
and this is raw code of javascript that i wanna use in my php
<script>
var colorBox = function () {
var data = [100];
if (data >= 100) {
document.getElementById("one-container").style.backgroundColor = '#FF6C60';
} else {
document.getElementById("one-container").style.backgroundColor = '#F8D347';
}
}
colorBox();>
</script>
i wanna make var data = [100] become var data = [" . $row['kirim_mpn'] . "]

How can I create a JavaScript Variable with my php Variable in a While loop?

I am making a web with information from a MySQL database and I want pictures to appear after clicking a buttom.
echo "<img align=\"left\"src=\"".$path[$y]."\" alt=\"error\">";
echo "<img align=\"right\"src=\"".$path_edit[$y]."\" alt=\"error\" id=\"$id[$y]\" style=\"visibility:hidden\">";
echo "_____________________________________";
echo "<script type=\"text/javascript\">";
echo "function showImage() {
document.getElementById(\"$id[$y]\").style.visibility=\"visible\";
}";
echo "</script>";
echo "<br><br>";
echo "<input type=\"button\" onclick=\"showImage();\" value=\"Show Picture\"/>";
echo "<p>";
I want the second image(The one with $PATH_edit[$y]) to appear after clicking in its buttom. (The buttom appears after each couple of images).
I have all with echo because It's all in the loop and I want it all to display as many times as number of entrances the database has.
I know I can not use the php variables in Javascript, I tried everything but I can't fix it. I am new with php, html and I have no idea ofJavaScript.
This is how it looks like without clicking the buttom
I know I can put an id to the image but that will only work for the first one.
This is how it looks like after clicking
I have also tried this:
echo "function showImage() {
var id_id = \"$id[$y]\";
document.getElementById(id_id).style.visibility=\"visible\";
}";
This is the whole code:
<!DOCTYPE html>
<!--- basic page needs
================================================== -->
<meta charset="utf-8">
<title>Base de Datos ATLAS</title>
<meta name="Una gran base de datos de microscopía" content="">
<meta name="Pablo Cruz" content="">
<!-- mobile specific metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="style.css">
<!-- script (I tried to put the function here, bu tit does not work either)
================================================== -->
<script src="js/modernizr.js"></script>
<!-- favicons
================================================== -->
<link rel="shortcut icon" href="logo.jpg" type="image/x-icon">
<link rel="icon" href="logo.jpg" type="image/x-icon">
<!-- preloader
================================================== -->
<div id="preloader">
<div id="loader" class="dots-fade">
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- header
================================================== -->
<header class="s-header header">
<div class="header__logo">
<a class="logo" href="index.html">
<img src="images/logo_sin.png" alt="Homepage" >
</a>
</div> <!-- end header__logo -->
</div> <!-- end header__search -->
<a class="header__toggle-menu" href="#0" title="Menu"><span>Menu</span></a>
<nav class="header__nav-wrap">
<h2 class="header__nav-heading h6">Navigate to</h2>
<ul class="header__nav">
<li class="current">Inicio</li>
<li class="has-children">
Base de Datos
<ul class="sub-menu">
<li>Microscopía Electrónica</li>
<li>Microscopía Óptica</li>
</ul>
</li>
<li class="has-children">
Almacén
<ul class="sub-menu">
<li>Mitocondrias</li>
<li>Núcleo</li>
<li>Lisosomas</li>
<li>Vesículas</li>
<li>Aparato de Golgi</li>
<li>Microtubulos</li>
<li>Retículo Endosplamático Rugoso</li>
<!--
<ul class="sub-menu">
<li>Video Post</li>
<li>Audio Post</li>
<li>Standard Post</li>
</ul>
-->
</ul>
</li>
<li>USAL</li>
<li>Contacto</li>
</ul> <!-- end header__nav -->
Close
</nav> <!-- end header__nav-wrap -->
</header> <!-- s-header -->
<!-- s-content
================================================== -->
<section class="s-content s-content--top-padding s-content--narrow">
<article class="row entry format-standard">
<div class="entry__header col-full">
<h1 class="entry__header-title display-1">
Galeria de Mitocondrias.
</h1>
</div>
<?PHP
require "connect.php";
$x=0;
$y=0;
$autosuma = 222;
$database = "tfg";
$db_found = mysqli_select_db($db_handle, $database);
if ($db_found) {
$SQL = "SELECT * FROM id_organulo WHERE mitocondria = 1";
$result = mysqli_query($db_handle, $SQL);
while ( $db_field = mysqli_fetch_assoc($result) ) {
$id[$x] = $db_field['id'];
$comentario[$x] = $db_field['comentario'];
$nombre_de_foto[$x] = $db_field['nombre_de_foto'];
$autor[$x] = $db_field['autor'];
$path[$x] = $db_field['PATH'];
$path_edit[$x] = $db_field['PATH_edit'];
$ruta_perfil_foto[$x] = $db_field['ruta_perfil_foto'];
$x = $x+1;
echo "<div class=\"col-full entry__main\">";
echo "<div class=\"entry__author\">";
echo "<img src=\"".$ruta_perfil_foto[$y]."\"alt=\"\">";
echo "<div class=\"entry__author-about\">";
echo "<h5 class=\"entry__author-name\">";
echo "<span>$autor[$y]</span>";
echo "$nombre_de_foto[$y]";
echo "</h5>";
echo "</div>";
echo "</div>";
echo "<br>";
echo "</div>"; // <!-- s-entry__main -->
echo "<center>";
echo "<img align=\"left\"src=\"".$path[$y]."\" alt=\"error\">";
echo "<img align=\"right\"src=\"".$path_edit[$y]."\" alt=\"error\" id=\"$id[$y]\" style=\"visibility:hidden\">";
echo "_____________________________________";
echo "<br><br>";
echo '<input type="button" onclick="showImage('.$id[$y].');" value="Show Picture"/>';
echo "<p>";
print $comentario[$y];
echo "</p>";
echo "</center>";
$y++;
}
}
else {
print "Database NOT Found ";
}
mysqli_close($db_handle);
?>
<script type=\"text/javascript\">
function showImage() {
var id = <?php echo (json_encode($id[$y])); ?>;
document.getElementById(id).style.visibility="visible";
}
</script>";
<div class="row pagination-wrap">
<div class="col-full">
<nav class="pgn" data-aos="fade-up">
<ul>
<li><a class="pgn__prev" href="s_mitocondrias_result_3.php">Prev</a></li>
<li><a class="pgn__num" href="s_mitocondrias_result_1.php">1</a></li>
<li><a class="pgn__num" href="s_mitocondrias_result_2.php">2</a></li>
<li><a class="pgn__num" href="s_mitocondrias_result_3.php">3</a></li>
<li><span class="pgn__num current">4</span></li>
>
</ul>
</nav>
<hr>
</div>
</div>
<p> <h5>Codigo de rotulación:</h5> </p>
M: Mitocondrias <br>
dM: Doble membrana <br>
cM: Cresta Mitocondrial <br>
R: Ribosomas <br>
N: Nucleo <br>
eu: Eucromatina <br>
Nu: Nucleolo <br>
Mtu: Microtúbulos <br>
Ec: Esterocilio <br>
</p>
</center>
<?php $y++; ?>
</article> <!-- end entry/article -->
Thank you in advance.
first a little advice, separate php, javascript and html. Together it is difficult to read and maintain. Otherwise you create a function at each pass of the loop. It doesn't bother me that nothing works like that. Try it like this:
Send the id of your image as a parameter to the function. A single function, which will be after the loop.
function showImage(id) {
document.getElementById(id).style.visibility="visible";
}
and at each passage of the loop send to the function the id of the image like this :
<input type="button" onclick="showImage(\"$id[$y]\");" value="Show Picture">
Finally it will give something like that :
<?php
while(...){
echo '<img align="left" src="'.$path[$y].'" alt="error">';
echo '<img align="right" src="'.$path_edit[$y].'" alt="error" id="'.$id[$y].'" style="visibility:hidden">';
echo '_____________________________________';
echo '<br><br>';
echo '<input type="button" onclick="showImage('.$id[$y].');" value="Show Picture">';
echo '<p>';
}
?>
<script type="text/javascript">
function showImage(id) {
document.getElementById(id).style.visibility="visible";
}
</script>
Use ' for echo and not " when displaying html, it's more practical.
Good luck for the future

How to get div values that are dynamically generated by a php script?

I want to alert the name of the item whose place bid button I will click but my code seems to alert only laptop. Can anyone tell me how to get div values that are dynamically generated through a php script. Below is the code for the page.I want to alert name of that item whose place bid I click on. Since the page is dynamically generated which gets item details from a database containing item details.
<?php
$con = mysqli_connect("localhost","root","*****","bidding") or
die(mysqli_error($con));
$select_query = "select * from items";
$select_query_result = mysqli_query($con, $select_query) or
die("Query Mistake");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bid</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="materialize/css/materialize.css"/>
<link rel="stylesheet" type="text/css" href="seperate2.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="materialize/js/materialize.min.js"></script>
<script type="text/javascript">
function post_data(){
var item_name = document.getElementById("item_name").innerHTML;
alert(item_name);
}
</script>
</head>
<body>
<div class="container">
<h1>Bid</h1>
<div class="row">
<?php while($row = mysqli_fetch_array($select_query_result)) { ?>
<div class="col s3" >
<div id="item_name"><?php echo"$row[item_name]"?></div>
<div id="starting_price"><?php echo"$row[starting_price]"?</div>
<div><?php echo"$row[description]"?></div>
<button class="btn waves-effect waves-teal"
onclick="post_data()">Place Bid</button>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
ID of element in HTML must be unique. Use class.
In loop you declare static name of ID, that are not unique.
Your code requires a counter by which the dynamically created DIVs may be accessed. Your <div class="row"> block would be:
<div class="row">
<?php
$divCounter = 0;
while($row = mysqli_fetch_array($select_query_result)) {
$divCounter += 1;
?>
<div class="col s3" >
<div id="item_name<?php echo $divCounter; ?>"><?php echo"$row[item_name]"?></div>
<div id="starting_price"><?php echo"$row[starting_price]"?</div>
<div><?php echo"$row[description]"?></div>
<button class="btn waves-effect waves-teal"
onclick="post_data('<?php echo 'item_name'.$divCounter; ?>')">Place Bid</button>
</div>
<?php } ?>
</div>
Notice that the call to the Javascript function post_data() now provides the DIV id that contains its counter. To complete the job, adjust post_data() to include the parameter:
<script type="text/javascript">
function post_data(divId){
var item_name = document.getElementById(divId).innerHTML;
alert(item_name);
}
</script>
If you prefer, instead of using a counter and concatenating with the static "item_name", you may use the $row[item_name] property instead. Whether or not you can do this will depend on whether this property can serve as a valid HTML id attribute value.

How to replace Twenty Seventeen Wordpress header with slider?

I would like my header to be replaced by my slider made with the Master Slider widget. I want the slider to be full size, just like the header image is right now.
This is the header code:
<?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<?php get_template_part( 'template-parts/header/header', 'image' ); ?>
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div class="navigation-top">
<div class="wrap">
<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
</div><!-- .wrap -->
</div><!-- .navigation-top -->
<?php endif; ?>
</header><!-- #masthead -->
<?php
// If a regular post or page, and not the front page, show the featured image.
if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :
echo '<div class="single-featured-image-header">';
the_post_thumbnail( 'twentyseventeen-featured-image' );
echo '</div><!-- .single-featured-image-header -->';
endif;
?>
<div class="site-content-contain">
<div id="content" class="site-content">
The shortcode for my slider is:
[masterslider id="1"]
PHP function:
<?php masterslider(1); ?>
How can I insert this image slider to replace the header image on the front page only without affecting the rest of the page?
Thanks.

How to activate a php include by clicking a button?

I am working on an admin panel in php.
My idea is to add a store in the admin panel and it should add the store in database.In the admin panel after submitting it should show the 4 buttons as shown in figure!
for this i have written some html ,but main problem is if i click on show stores it should add a php include and show below like thisBut the problem is without clicking on show stores the php iclude is default enable.Please help me to include the php file only if i press the show stores button.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Database connection is created with the db AskCoupon.com -->
<?php
//Step1
if ( ! empty( $_POST ) ) {
// Connect to MySQL
$mysqli = new mysqli( 'localhost', 'root', 'sai123', 'askcoupon.com' );
// Check our connection
if ( $mysqli->connect_error ) {
die( 'Connect Error: ' . $mysqli->connect_errno . ': ' . $mysqli->connect_error );
}
/*New Code added here*/
$storeName = $_POST['store_name'];
$check=mysqli_query($mysqli,"select * from featured_stores where store_name='$storeName'");
$checkrows=mysqli_num_rows($check);
if($checkrows>0){echo "customer exists";}
else{
//insert results from the form input
$query = "INSERT INTO featured_stores ( store_id, store_name,no_of_coupons,caption ) VALUES ( '{$mysqli->real_escape_string($_POST['store_id'])}', '{$mysqli->real_escape_string($_POST['store_name'])}', '{$mysqli->real_escape_string($_POST['no_of_coupons'])}', '{$mysqli->real_escape_string($_POST['caption'])}' )";
// $insert = $mysqli->query($sql);
$result = mysqli_query($mysqli, $query) or die('Error querying database.');
mysqli_close($mysqli);
echo "Store Added";
}
};
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Panel</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a class="btn btn-primary" href="../admin_panel" role="button">Insert Another Store</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a class="btn btn-danger" href="../admin_panel" role="button">Insert Another Coupon</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<a class="btn btn-success" href="../Admin_panel/show_stores.php" role="button" onclick="loadThis">Show Stores</a>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<button class="btn btn-success" href="#" role="button" onclick="loadThis">Show Coupons</button>
</div>
</div>
</div>
<script>
function loadThis(){
<?php include'show_stores.php';?>
}
</script>
</body>
</html>
Also I am including showstores.php file here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<?php
// 1) connect to the database by mysql_connect()
mysql_connect("localhost", "root", "sai123") or die(mysql_error());
// 2) than select the database like mysql_select_db()
mysql_select_db("askcoupon.com") or die(mysql_error());
// 3) you need to use mysql_query()
$data = mysql_query("SELECT * FROM featured_stores where 1") or die(mysql_error());
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Panel</title>
</head>
<body>
<div class="container">
<div class="row well">
<?php
while($row= mysql_fetch_array( $data )){ ?>
<div class="col-xs- col-sm- col-md-2 col-lg-">
<?php echo $row['store_id']; ?>
</div>
<div class="col-xs- col-sm- col-md-4 col-lg-">
<?php echo $row['store_name'] ?>
</div>
<div class="col-xs- col-sm- col-md-3 col-lg-">
<?php echo $row['no_of_coupons'] ?>
</div>
<div class="col-xs- col-sm- col-md-3 col-lg-">
<?php echo $row['caption'] ?>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
Console Log after answer 1
there are many options, one of which include sending ajax request, in this situation very simple example you can create new include.php file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
function loadThis() {
$.ajax({
type: "POST",
url: "include.php",
dataType: "html",
success: function(data) {}
});
}
/* include.php file */
<?php
include('showstores.php');
?>

Categories