I'm trying to create an automated product pages for the product on ecommerce, from pages 1, pages 2 ,pages 3,... list of product. Feels like to create in each pages1.php, pages2.php, pages3.php is not efficient so i'm wondering to create it's own file through the click. Here is my code below
<html>
<head>
<link rel="stylesheet" href="CemaraMotor.css">
<title>Cemara Auto Motor</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="header">
<div class="header-left">
<a href="" class="logo">Cemara <em>Auto Motor</em></a>
</div>
<div class="header-left">
<input type="text" id="search" placeholder="Search ..." onkeyup="search()">
</div>
<div class="header-right">
<a href="">Home</a>
<a href="">Products</a>
<a href="">About Us</a>
<a href="">Contact</a>
</div>
</div>
</div>
</div>
</header>
<section>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="assets/a.jpg">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="assets/b.jpg">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="assets/c.jpg">
<div class="text">Caption Three</div>
</div>
<div class="inside-box">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</section>
<section>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "database";
$x =0;
$name= array();
$price= array();
$id= array();
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT name, price, id FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$name[$x]=$row["name"];
$price[$x]=$row["price"];
$id[$x]=$row["id"];
$x=$x+1;
}
} else {
echo "0 results";
}
$q=0;
for($x=0;$x<=2;$x++){
echo '<div class="product-line">
<div class="product-row">
<div class="row" id"row-box">
';
for($v=0;$v<=5;$v++){
echo '<div class="col-md-5">
<div class="spacing">
<div class="colomn-box" id="productbox">
<div class="colomn-picture">
<img id="image1"src="assets/new.png">
</div>
<div class="word-text" id="bar1">
<a id="name1">'.$name[$q].'</a>
<a id="price1">'.$price[$q].'</a>
</div>
</div>
</div>
</div>';
$q=$q+1;
}
}
$conn->close();
?>
</section>
<section>
<div class="container">
<div class="row">
<div class="moves">
<div class="spacing click1" onclick="numberpage()">
<i class="arrow left centering" ></i>
</div>
<div class="spacing " id="click1" onclick=""><a id="link1" onclick="link1()">1</a></div>
<div class="spacing" id="click2" onclick=""><a id="link2" onclick="link2()">2</a></div>
<div class="spacing" id="click3"onclick="" ><a id="link3" onclick="link3()">3</a></div>
<div class="spacing click4" onclick="jumpage()">...</div>
<div class="spacing click5" onclick="">
<i class="arrow right centering" onclick="numberpages()"></i>
</div>
</div>
</div>
</div>
</section>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
function numberpages(q) {
var number1=document.getElementById("link1").innerHTML;
var number2=document.getElementById("link2").innerHTML;
var number3=document.getElementById("link3").innerHTML;
var y= Number(document.getElementById("link1").innerHTML);
document.getElementById("link1").innerHTML=y+1;
document.getElementById("link2").innerHTML=y+2;
document.getElementById("link3").innerHTML=y+3;
}
function numberpage(q) {
var y= Number(document.getElementById("link1").innerHTML);
if (y>1) {
document.getElementById("link1").innerHTML=y-1;
document.getElementById("link2").innerHTML=y;
document.getElementById("link3").innerHTML=y+1;
}
}
function jumpage(args) {
var y= Number(document.getElementById("link1").innerHTML);
document.getElementById("link1").innerHTML=y+3;
document.getElementById("link2").innerHTML=y+4;
document.getElementById("link3").innerHTML=y+5;
}
function search(){
var filter,input,bar,side,a;
input=document.getElementById("search");
filter=input.value.toUpperCase();
for (let i=0 ; i<=25; i++) {
bar=document.getElementsByClassName("word-text")[i];
side=bar.getElementsByTagName("a")[0];
if(side.innerHTML.toUpperCase().indexOf(filter)>-1){
document.getElementsByClassName("spacing")[i].style.display="";
}
else{
document.getElementsByClassName("spacing")[i].style.display="none";
}
}
}
function link1(){
var x=document.getElementById("link1").innerHTML;
document.getElementById("link1").href="pages/page"+x+".php";
}
function link2(){
var x=document.getElementById("link2").innerHTML;
document.getElementById("link2").href="pages/page"+x+".php";
}
function link3(){
var x=document.getElementById("link3").innerHTML;
document.getElementById("link3").href="pages/page"+x+".php";
}
</script>
</body>
</html>There i try to make href="pages"+1+"php". but it take me time to create each php. if you have a better solutions please for the help
Aucun commentaire:
Enregistrer un commentaire