align paragraph in Bootstrap - php

I would like to align my paragraphs on the same horizontal line but I can't find my error do you have a solution?
foreach ($articles as $article): ?>
<div class="container" id="presentation">
<div class="row">
<div class="col-12 mb-4"></div>
<div class="col-12 col-md-6">
<div class="media my-3">
<span><i class="fas fa-check"></i></span>
<div class="media-body ml-3">
<h5 class="mt-0"><?= $article['name'] ?></h5>
<p class="text-justify"><?= $article['content'] ?></p>
</div>
</div>
</div>
</div>
<?php endforeach ?>

.col-12 {width: 100%;}
This means that col-12 will take up the whole div block in one line. Try changing it to .col-6
Working Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="presentation">
<div class="row">
<?php
$articles=array(array("name"=>"name1111","content"=>"content1111"),array("name"=>"name222","content"=>"content222222"),array("name"=>"name333333","content"=>"content333333"));
foreach ($articles as $article): ?>
<div class="col-md-6">
<div class="media my-3">
<span> <i class="fas fa-check"></i></span>
<div class="media-body ml-3">
<h5 class="mt-0"><?= $article['name'] ?></h5>
<p class="text-justify"><?= $article['content'] ?></p>
</div>
</div>
</div>
<?php endforeach ?>
</div>
</div>
</body>
</html>

Related

How can i sort with filter A-Z after getting the fetch values on page with POST method?

User first search for specified "doctors" at it redirects to the "search.php" page. Then it shows the results from database.What i want is , when the user is seeing the results to sort them "A-Z". If you need also the place when users searches for "specified doctors i will post it,just thought you would not need it :)
<?php
include 'models/doctors.class.php';
// error_reporting(0);
$search = new doctors();
if(isset($_POST['submit'])){
$s= $search->filterDoctors($_POST);
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/search.css">
<link rel="stylesheet" href="assets/css/sanascout-font.css">
<link rel="icon" type="image/png" href="assets/images/logo-ssc1.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Healthcare</title>
</head>
<body>
<!-- <section>
<div class="container-fluid firstSectionn">
<div class="popins-font">
<p class="searchHere text-center"><i class="bi bi-arrow-left-short pull-left"></i>Zürich <i class="bi bi-chat-dots pull-right"></i></p>
</div>
</div> -->
<section>
<div class="container-fluid thisContainerBGColor popins-font">
<div class="row">
<div class="col text-center pt-4 pb-3">
<a href="#" onclick="history.go(-1)" class="text-decoration-none text-light"> <i
class="bi bi-arrow-left-short"></i></a>
</div>
<div class="col text-center lh-1 pt-3 pb-3">
<span class="span-selected-area">Selected area</span> <br>
<span class="span-place">
<?php
$i = 0;
foreach($s as $row){
echo $row['location'];
$i++;
if($i == 1){
break;
}
}
?>
</span>
</div>
<div class="col text-center pt-4 pb-3">
<!-- <i class="bi bi-chat-dots"></i> -->
</div>
</div>
</div>
</section>
</section>
<section>
<section class="searched-area mt-4">
<div class="container">
<div class="header66">
<div style="display: flex; justify-content: space-between;">
<p class="fs-6 popins-font fw-bold" id="text-color">Available Doctors</p>
<!-- <a href="#" class="text-decoration-none">
<p class="fs-6 popins-font fw-bold" id="text-color">See all</p>
</a> -->
</div>
</div>
</div>
</section>
Filter-A-Z
<div>
<?php
if(isset($_SESSION['msg'])){
echo $_SESSION['msg'];
unset($_SESSION['msg']);
}
?>
</div>
<section>
<div class="container">
<?php
foreach($s as $row1){
?>
<a href="therapist.php?id=<?php echo $row1['User_ID']; ?>" class="text-decoration-none">
<div class="therapistCardOne mx-2 popins-font my-2">
<div class="row py-2">
<div class="col-3 g-0">
<div class="imgW text-center g-0 ps-2">
<img src="assets/images/006.png" class="img-fluid ms-2" alt="" width="70px"
height="80px">
</div>
</div>
<div class="col-8 g-0 ps-2">
<span class="span1"><?php echo $row1['full_name'];?></span>
<span class="ps-2">
<i class="bi bi-star-fill icon-ccc"></i>
<i class="bi bi-star-fill icon-ccc"></i>
<i class="bi bi-star-fill icon-ccc"></i>
<i class="bi bi-star-fill icon-ccc"></i>
<i class="bi bi-star icon-ccc"></i></span><br>
<span class="span2">Location :
<?php echo $row1['location'];?>
</span> <br>
<span class="span3"><i class="bi bi-clock icon-cc"></i> 12:00pm - 16:00pm</span> <span
class="span4 ps-2"><i class="bi bi-geo-alt icon-cc"></i> Zurich New Clinic</span>
</div>
<div class="col-1 g-0 pe-2">
<i class="bi bi-three-dots-vertical"></i>
</div>
</div>
</div>
</a>
<?php
}
}
else {
header("Location:therapist-list.php");
}
?>
</section>
You can use ajax and a php function ,
Create a form inside the search.php
And then save the post that you used to redirect to search.php ,
And use php function to order the doctors.

My pictures don't show up in my index.php file

I am creating a shopping cart in mySQLi and PHP. I inserted the products with images into PhpMyAdmin (I typed - zdjecia/photo.png in the zdjecie_produktu)
This is my code for this part in PHP. I am only starting PHP and I've been following this tutorial https://www.youtube.com/watch?v=ka2ea2LL36g. Everything seems to work fine, just these pictures don't show up :(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>x</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favico.png" />
</head>
<body>
<section class="home">
<div class="slider">
<div class="slide active" id="slide" style="background-image: url(tlo1.jpg)" ><div class="header">
<div class="container">
<div class="navbar">
<div class="darmowadostawa">
<p>100% WYRÓB DOMOWY | Gwarancja komfortu</p>
</div>
<div class="emailugory">
E-mail:xxx
Numer telefonu:xxx-xxx-xxx
</div>
<nav class="indeksik">
<ul id="MenuItems">
<li class="logo"><img src="logooficjalne.png" class="carolinepng"></li>
<li>O nas</li>
<li>Świece świąteczne</li>
<li>Naturalne świece zapachowe</li>
<li>Świece zapachowe w szkle</li>
<li>Zapachy
<ul>
<li>Owocowe</li>
<li>Słodkie</li>
<li>Eleganckie</li>
<li>Kwiatowe</li>
<li>Świąteczne</li>
</ul>
</li>
<li>Blog</li>
<li class="cart"> <i class="fab fa-opencart"><img src="cart.png" width="20px" margin-top="0px;"></i><span class="cart-span">0</span> </li>
</ul>
</nav>
<img src="menu.png" class="menu-icon" onclick="menutoggle()">
</div>
<div class="caption">
<h1 class="nowysklep">NOWY SKLEP</h1>
<p>Świece Caroline Homemade Candles to nowa marka domowych świec zapachowych. Nasze świece produkowane są ręcznie w zaciszu domowym z naturalnego wosku sojowego.</p>
Kup teraz
</div>
</div>
</div>
</div>
<div class="slide" id="slide" style="background-image: url(tlo2.jpg)"><div class="header">
<div class="container">
<div class="navbar">
<div class="darmowadostawa">
<p>100% WYRÓB DOMOWY | Gwarancja komfortu</p>
</div>
<div class="emailugory">
E-mail:xxx
Numer telefonu:xxx-xxx-xxx
</div>
<nav>
<ul id="MenuItems">
<li class="logo"><img src="logooficjalne.png" class="carolinepng"></li>
<li>O nas</li>
<li>Świece świąteczne</li>
<li>Naturalne świece zapachowe</li>
<li>Świece zapachowe w szkle</li>
<li>Zapachy
<ul>
<li>Owocowe</li>
<li>Słodkie</li>
<li>Eleganckie</li>
<li>Kwiatowe</li>
<li>Świąteczne</li>
</ul>
</li>
<li>Blog</li>
<li class="cart"> <i class="fab fa-opencart"><img src="cart.png" width="20px" margin-top="0px;"></i><span class="cart-span">0</span> </li>
</ul>
</nav>
<img src="menu.png" class="menu-icon" onclick="menutoggle()">
</div>
<div class="caption">
<h1 class="darmowa">DARMOWA DOSTAWA OD 100ZŁ</h1>
<p>Darmowa dostawa już od 100zł.<br> Dostępny Kurier/Paczkomaty Inpost.</p>
</div>
</div>
</div>
</div>
<div class="slide" id="slide" style="background-image: url(tlo3.jpg)" ><div class="header">
<div class="container">
<div class="navbar">
<div class="darmowadostawa">
<p>100% WYRÓB DOMOWY | Gwarancja komfortu</p>
</div>
<div class="emailugory">
E-mail:xxx
Numer telefonu:xxx-xxx-xxx
</div>
<nav>
<ul id="MenuItems">
<li class="logo"><img src="logooficjalne.png" class="carolinepng"></li>
<li>O nas</li>
<li>Świece świąteczne</li>
<li>Naturalne świece zapachowe</li>
<li>Świece zapachowe w szkle</li>
<li>Zapachy
<ul>
<li>Owocowe</li>
<li>Słodkie</li>
<li>Eleganckie</li>
<li>Kwiatowe</li>
<li>Świąteczne</li>
</ul>
</li>
<li>Blog</li>
<li class="cart"> <i class="fab fa-opencart"><img src="cart.png" width="20px" margin-top="0px;"></i><span class="cart-span">0</span> </li>
</ul>
</nav>
<img src="menu.png" class="menu-icon" onclick="menutoggle()">
</div>
<div class="caption">
<h1 class="przyjemnosc">ŚWIAT PRZYJEMNOŚĆI</h1>
<p>Świece Caroline Homemade Candles są naturalne jak i również ekologiczne. Swój produkt tworzymy z pasją i zamiłowaniem. Zapraszamy Cię do naszego świata przyjemności</p>
Kup teraz
</div>
</div>
</div>
</div>
</div>
<div class="controls">
<div class="prev"><</div>
<div class="next">></div>
</div>
<div class="indicator">
</div>
</section>
<!-----featured categories ------->
<div class="categories">
<div class="small-container">
<div class="row">
<div class="col-3">
<img src="categories-1.png">
</div>
<div class="col-3">
<img src="categories-2.png">
</div>
<div class="col-3">
<img src="categories-3.png">
</div>
</div>
</div>
</div>
<!----- featured products----->
<div class="container">
<div class="row">
<?php
include 'config.php';
$stmt = $conn->prepare("SELECT * FROM product");
$stmt->execute();
$result = $stmt->get_result();
while($row = $result->fetch_assoc());
?>
<div class="col-lg-3">
<div class="card-deck">
<div class="card p-2 border-secondary mb-2">
<img src="<?= $row['zdjecie_produktu'] ?>" class="card-img-top" height="250">
</div>
</div>
</div>
<?php T_ENDWHILE ?>
</div>
</div>
<!----- footer ----->
<footer>
<div class="column">
<ul class="footer-links-main">
<li>O nas</li>
<li>Produkty</li>
<li>Regulamin</li>
<li>Kontakt</li>
<li>FAQ</li>
</ul>
</div>
<div class="footer-sm">
<div class="column2">
<h3 class="kontakth3">Kontakt</h3>
<p class="kontaktp">Adres e-mail:xxx</p>
<p class="kontaktp">Numer telefonu:xxx</p>
</div>
</div>
</footer>
<!---- js for toggle menu--->
<script>
var MenuItems = document.getElementById("MenuItems");
MenuItems.style.maxHeight = "0px";
function menutoggle(){
if (MenuItems.style.maxHeight == "0px")
{
MenuItems.style.maxHeight = "200px";
}
else
{
MenuItems.style.maxHeight = "0px";
}
}
</script>
<script src="main.js"></script>
<script src="https://unpkg.com/ionicons#5.2.3/dist/ionicons.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
The code has no errors and a default broken image icon shows up instead of pictures.
and this is my config.php
<?php
$conn = new mysqli("localhost","root","","cart_system");
if($conn->connect_error){
die("Connection Failed".$conn->connect_error);
}
?>

The html element turns weird. (dimension of the button element changes to original bootstrap component when included in the index file)

I'm making some php page : file_header.php, file_footer.php, file_index.php, and I load them all in the browser one by one, and the result is fine (as i want). But, the problem appears when i combine file_header.php and file_footer.php in file_index.php.
Here is the problem : there are two buttons in page file_header.php (these are bootstrap button), and i give my custom style to them, i want the buttons looks slim, so i give margin and padding attribute in the css style, and finally i load file_header.php in the browser normally (result is fine / as i want). But, when i combine file_header.php and file_footer.php in file_index.php these two buttons turns into the original bootstrap button (buttons looks fat).
why did it happen ?
<!-- This is file_header.php -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.navbar{
background-color: #563d7c
}
.btn{
margin: 5px;
padding: 2px 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav ml-auto">
<button href="#" class="btn btn-outline-light">Login</button>
<button href="#" class="btn btn-outline-light active">Sign Up</button>
</div>
</div>
</div>
</nav>
</body>
</html>
<!-- This is file_footer.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Page Title</title>
<style>
footer{
background-color: #f4f4f4;
}
.container{
padding: 20px;
}
</style>
</head>
<body>
<footer>
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Service</h5>
<div class="row">
<div class="col">
<p>About Us</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Success Story</h5>
<div class="row">
<div class="col">
<p>Let Me See</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Help</h5>
<div class="row">
<div class="col">
<p>Terms and Condition</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
<!-- This is file_index.php -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<?php include 'file_header.php' ?>
<div>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
</div>
<?php include 'file_footer.php' ?>
</body>
</html>
I expected the style of every buttons element in the page file_index.php is fine (buttons looks slim / as i want).
OR
I expected the style of every page (file_header, file_footer, file_index) doesn't change at all
When you combine the header, main and footer in the index file, you need to make sure that you have everything just once. Meaning, the doctype, the style, the opening body tag, etc.
So, I'd restructure a little bit your code, your 'file_header' should contain all what's in the <head>, I'd create a separate 'file_nav.php' where your navigation code sits, remove all the wrapping content from the 'file_footer' and leave there only the footer code.
Somehow like this:
<!-- This is file_header.php -->
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.navbar{
background-color: #563d7c
}
.btn{
margin: 5px;
padding: 2px 50px;
}
footer{
background-color: #f4f4f4;
}
.container{
padding: 20px;
}
</style>
</head>
<!-- This is file_nav.php -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav ml-auto">
<button href="#" class="btn btn-outline-light">Login</button>
<button href="#" class="btn btn-outline-light active">Sign Up</button>
</div>
</div>
</div>
</nav>
<!-- This is file_footer.php -->
<footer>
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Service</h5>
<div class="row">
<div class="col">
<p>About Us</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Success Story</h5>
<div class="row">
<div class="col">
<p>Let Me See</p>
</div>
</div>
</div>
</div>
</div>
<div class="col d-flex justify-content-center">
<div class="row">
<div class="col">
<h5 class="text-muted">Help</h5>
<div class="row">
<div class="col">
<p>Terms and Condition</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- This is file_index.php -->
<!doctype html>
<html lang="en">
<?php include 'file_header.php' ?>
<body>
<?php include 'file_nav.php' ?>
<div>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
<h2>My main content is here</h2>
</div>
<?php include 'file_footer.php' ?>
</body>
</html>
Your file_header.php and file_footer.php are entire HTML page structures. They should be partials of just the HTML markup you want to include in the place they are PHP "include"ed.
An example of file_header.php without the doctype, head, html tag, or body:
<style>
.navbar{
background-color: #563d7c
}
.btn{
margin: 5px;
padding: 2px 50px;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav ml-auto">
<button href="#" class="btn btn-outline-light">Login</button>
<button href="#" class="btn btn-outline-light active">Sign Up</button>
</div>
</div>
</div>
</nav>
The reason your styles are being overridden when file_footer.php is included is because you are again for the second time including the bootstrap CSS in a <link /> tag. Part of the cascading in CSS is that the last declared rule takes priority and so the second inclusion overrides your custom styles.
You should include your bootstrap <link /> tag in your file_index.php head only.

Webpage only accessible when logged in (PHP)

I'm currently having some issues with creating a webpage that's only accessible once a user has logged in.
I've looked through various threads here, but to no avail. Any help with this would be greatly appreciated.
Here's my code:
login.php
<?php
Include('connect.php');
if (isset($_REQUEST['Submit']))
{
if($_REQUEST['user_id']=="" || $_REQUEST['password']=="")
{
echo " Field must be filled";
}
else
{
$sql1= "select * from student where email= '".$_REQUEST['user_id']."' && password ='".$_REQUEST['password']."'";
$result=mysql_query($sql1)
or exit("Sql Error".mysql_error());
$num_rows=mysql_num_rows($result);
if($num_rows>0)
{
session_start($_SESSION['Login']);
Echo "You have logged in successfully";
header("Location: statistics.html");
}
else
{
echo "Wrong username or password.";
}
}
}
?>
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PHP Login Form</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="row" style="margin-top:20px">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<form name="form_login" method="post" action="login.php" role="form">
<fieldset>
<h2>Please Sign In</h2>
<hr class="colorgraph">
<div class="form-group">
<input name="user_id" type="text" id="user_id" class="form-control input-lg" placeholder="Email Address">
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password">
</div>
<span class="button-checkbox">
<button type="button" class="btn" data-color="info">Remember Me</button><!-- Additional Option -->
<input type="checkbox" name="remember_me" id="remember_me" checked="checked" class="hidden">
<hr class="colorgraph">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<input type="submit" name="Submit" value="Login" class="btn btn-lg btn-success btn-block">
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
And statistics.html (Page that should only be accessible when logged in)
<?php
include ("login.php")
session_start();
if(!isset($_SESSION['Login']))
{
header("Location:login.php");
die();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Personal Website</title>
<link rel="stylesheet" href="../../CSS/stylesheetmain.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
</head>
<body>
<!--Navigation Bar-->
<div class="row">
<div class="darkgrey column col-md-8 col-md-offset-2 col-xs-12 col-s-12">
<nav class="navbar navbar-background-color">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><!--Reference: Bootstrap, 2015. getbootstrap.com. [Online] Available at: http://getbootstrap.com/ [Accessed 01 April 2015]-->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../index.html"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li><!--Edits made: Removed active button -->
<li>About Me</li>
<li>Blog</li>
<li>Contact Me</li>
<li>Login</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
<div class="row">
<div class="navbarbottom column col-md-8 col-md-offset-2 col-xs-12 col-s-12"></div>
</div>
<!--Page Title-->
<div class="row">
<div class="title mediumbluetext col-md-8 col-md-offset-2 col-xs-0 col-s-0">
<center><h1>Statistics</h1></center>
</div>
</div>
<!--Main Body-->
<div class="row">
<!--Left Column Spacer-->
<div class="maintextleftbackground column col-md-2 col-xs-0 col-s-0">
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-52f8f8c0164b330f" async="async"></script>
</div>
<!--Middle Column-->
<div class="maintext80 column col-md-8 col-xs-12 col-s-8 col-s-offset-2"><br>
<div id="main-chart-container"></div>
<div id="breakdown-chart-container"></div>
<div id="embed-api-auth-container"></div>
<div id="view-selector-container"></div>
</div>
<!--Right Column Spacer-->
<div class="maintextrightbackground column col-md-2 col-xs-0 col-s-0">
</div>
</div>
<!--Footer Bar-->
<div class="row">
<div class="darkgrey column col-md-8 col-md-offset-2 col-xs-12 col-s-12">
<nav class="navbar-background-color">
<div class="container-fluid">
<p class="navbar-text navbar-right">SiteMap</p>
</div>
</nav>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
(function(w,d,s,g,js,fs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
</script>
</body>
</html>
No matter what I try, I can't seem to get the code to work. The files are in the same directory as well.
Any help with this would be greatly appreciated.
A few things wrong here but you're on the right track.
You are VERY susceptible to SQL injection. Please read about it.
Your form uses POST so your PHP should use $_POST and not $_REQUEST
You cannot set a session variable by passing it through to session_start. You need to set the variable like so: $_SESSION['isLoggedIn'] = true.
You are echoing right before you issue a header command. You cannot output anything before redirecting.

how to show jquery rating in html <list> tag in while loop using multiple tables

i want to show rating of each item or name of company with company name (driven from another table in database) in "li" tag of html (transporters.php). I have got the rating for each company page individually (transporters2.php) but i want to get all the ratings of all the companies or items in "li" tab so user can overview it and after clicking an "li" item it will show the profile of company "transporters2.php". Here are my two files transporters.php and transporters2.php and also their snapshots.
transporters.php and transporters2.php ,Mydatabase
Note: Both files are working correctly there is no syntax error, if an error occurs that might be occurred while posting the question thanks.
Transporters.php
<?php
include "header.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script src="../js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/rating.css" />
<script type="text/javascript" src="../js/rating.js"></script><title>Transporters</title>
<!-- Bootstrap Core CSS -->
<link href="file:///C|/xampp/htdocs/bin/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="file:///C|/xampp/htdocs/bin/css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="file:///C|/xampp/htdocs/bin/font-awesome/css/font
awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="../css/example.css" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>
<body>
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Transporters
<small> Companies</small>
</h1>
<ol class="breadcrumb">
<li>Home
</li>
<li class="active">Transporters</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- Content Row -->
<div class="row">
<div class="col-lg-12"><?php
require("Config.php");
$sql =mysql_query("SELECT * FROM transporters");
?>
<ul style="list-style:none;">
<?php while($row=mysql_fetch_array($sql) )
{
$cid=$row['CompanyID'];
?>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<li><div class="product" style="font: 10px verdana, sans-serif;margin: 0 auto 40px auto;width: 71px;height: 4px;margin-right: 75%;">
<div id="<?php echo $cid ?>" class="ratings" style="border: 1px solid #CCC;overflow: visible;padding: 10px;position: relative;width: 182px;height: 47px;float: left;margin-left: -195px;"><div class="star_1 ratings_stars ratings_vote"></div><div class="star_2 ratings_stars ratings_vote"></div><div class="star_3 ratings_stars ratings_vote"></div><div class="star_4 ratings_stars ratings_blank"></div><div class="star_5 ratings_stars ratings_blank"></div>
</div>
<a href='transporters2.php?CompanyID=<?php echo $cid;?>'><?php print $row['CompanyName']; ?>
</a></div>
</li>
</div>
</div>
</div>
<?php
}//end of while loop
?>
</ul>
</div>
</div>
<script>
function sendcompanyname()
{
var x= document.getElementById("cpn").value;
}
</script>
</body></html>
Transporters2.php
<?php
$db=mysqli_connect("localhost","root","","db1") or die("unable to connect");
include("header.php");
$cname;
if(isset($_GET['CompanyID'])){
$CompanyID = $_GET['CompanyID'];
$get_name= "SELECT * from `transporters` where `CompanyID`='$CompanyID'";
$run_name= mysqli_query($db,$get_name);
while($row_name=mysqli_fetch_array($run_name)){
$cname = $row_name['CompanyName'];}
}
include("settings.php");
connect();
$ids=array(1);
?>
<!DOCTYPE html>
<html>
<head>
<script src="../js/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/rating.css" />
<!--<script type="text/javascript" src="../js/rating.js"></script>-->
<script>
$(document).ready(function() {
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function(){
$(this).prevAll().andSelf().removeClass('ratings_over');
}
);
//send ajax request to rate.php
$('.ratings_stars').bind('click', function(){
var id=$(this).parent().attr("id");
var num=$(this).attr("class");
var poststr="id="+id+"&stars="+num;
$.ajax({url:"../bin/rate.php",cache:0,data:poststr,success:function(result){
document.getElementById(id).innerHTML=result;}
});
});
});
</script>
</head>
<body>
<!-- Page Content -->
<div class="container">
<!-- /.row -->
<div class="row">
<?php
for($i=0;$i<count($ids);$i++)
{
$rating_tableName = 'ratings';
$id=$CompanyID;
$q="SELECT total_votes, total_value FROM $rating_tableName WHERE id=$id";
$r=mysql_query($q);
if(!$r) echo mysql_error();
while($row=mysql_fetch_array($r))
{
$v=$row['total_votes'];
$tv=$row['total_value'];
$rat=$tv/$v;
}
$id=$CompanyID;
$j=$id;
echo'<div class="product">
Rate Item '.$j.'
<div id="rating_'.$id.'" class="ratings">';
for($k=1;$k<6;$k++){
if($rat+1>$k)$class="star_".$k."ratings_stars ratings_vote";
else $class="star_".$k." ratings_stars ratings_blank";
echo '<div class="'.$class.'"></div>';
}
echo' <div class="total_votes"><p class="voted"> Rating
<strong>'.#number_format($rat).'</strong>/5 ('.$v. 'vote(s) cast)
</div>
</div></div>';}
?>
<div class="col-lg-12">
<h2 class="page-header"><?php echo $cname;?></h2>
</div>
<!--<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-car fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Show Drivers</h4>
<p>Show drivers of this company.</p>
<button id="popup" onclick="div_show()" class="btn btn
primary">Add</button>
</div>
</div>
</div>-->
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-support fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Show routes</h4>
<p>check which routes are following this company...</p>
<a href="routes.php?CompanyID=<?php echo $CompanyID;?>" class="btn btn
primary">show routes</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-database fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Schedule</h4>
<p>Check the timings of journey.</p>
Show Schedule
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-database fa-stack-1x fa-inverse"></i>
</span>
</div>
<div class="panel-body">
<h4>Show Drivers Positions</h4>
<p>Check the positions of all drivers.</p>
<a href="positions.php" class="btn btn-primary">Show Drivers
Positions</a>
</div>
</div>
</div>
</div>
</div>
<!---END Page Content-->
</body>
</html>

Categories