./ecom_shop/Models/Produkt_models.php
<?php
require_once 'config.php';
require_once 'inc/pdo.php';
trait bilderspeichern{
public function bilderspeichern($bilderARR){
foreach ($bilderARR as $value) {
$sql="insert into bilder (produkt_id ,pfad) values (:id, :pfad)";
$dat =['id'=> $this->id,'pfad'=> $value ];
setSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler von bilder speichen");
}
if ($this->hauptbild){
$sql="select id from bilder where pfad = :pfad and produkt_id = :id";
$dat =['id'=> $this->id,'pfad'=> $this->hauptbild ];
$result =getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler von hauptbild holen");
if ($result){
$sql="update products set hauptbild = :hauptbild where id = :id";
$dat =['id'=> $this->id,'hauptbild'=> $result[0]['id'] ];
setSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler von hauptbild speichen");
}
}}
}
class Produkt_inDb{
use bilderspeichern;
public $name;
public $price;
public $description;
public $id;
public $kategorie_id;
public $inventar;
public $versand;
public $hauptbild;
public function __construct($name, $price, $description,$kategorie_id,$inventar,$versand,$hauptbild){
$this->name = $name;
$this->price = $price;
$this->description = $description;
$this->kategorie_id=$kategorie_id;
$this->inventar=$inventar;
$this->versand=$versand;
$this->hauptbild=$hauptbild;
}
public function speichern(){
// Code zum Speichern des Produkts in der Datenbank
$sql = "INSERT INTO products (name, price, description ,kategorie_id, inventar, versand) VALUES (:name, :price, :description,:kategorie_id, :inventar , :versand )";
$dat=[
'name'=>$this->name,
'price'=>$this->price,
'description'=>$this->description,
"kategorie_id" =>$this->kategorie_id,
"inventar"=> $this->inventar,
"versand" => $this->versand
];
$this->id= setSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
#test
if ($this->hauptbild){
$sql="select id from bilder where pfad = :pfad";
$dat =['pfad'=> $this->hauptbild ];
$result =getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler von hauptbild holen");
if ($result){
echo "Hauptbild ID: ".htmlspecialchars($result[0]['id']);
$sql="update products set hauptbild = :hauptbild where id = :id";
$dat =['id'=> $this->id,'hauptbild'=> $result[0]['id'] ];
setSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler von hauptbild speichen");
}
}
#test ende
return $this->id;
}
}
class Produkt_ausDB {
use bilderspeichern;
public $name;
public $price;
public $description;
public $id;
public $hauptbild;
private $hauptbild_id;
public $versand;
public $kategorie_id;
public $inventar;
public function __construct($id){
$sql = "SELECT * FROM products WHERE id = :id";
$dat=['id'=>$id];
$result=getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
if ($result){
$result=$result['0'];
$this->name=$result['name'];
$this->price=$result['price'];
$this->description=$result['description'];
$this->id =$id;
$this->hauptbild_id=$result['hauptbild'];
$this->versand=$result['versand'];
$this->inventar=$result['inventar'];
$this->kategorie_id=$result['kategorie_id'];
$sql="select pfad from bilder where id = :id";
$dat=['id'=>$this->hauptbild_id];
$result=getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
if ($result){
$this->hauptbild=$result[0]['pfad'];
} else {
$this->hauptbild="";
} }else {
// echo "produkt nicht gefunden";
throw new Exception("Produkt nicht gefunden");
}
}
public function lösche_produkt(){
$sql ='delete from products where id = :id';
$dat =['id' =>$this->id];
$result =setSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
}
public function update_produkt(){
$sql = "UPDATE products
SET name = :name, price = :price, description = :description
WHERE id = :id";
$dat = [
'name' => $this->name,
'price' => $this->price,
'description' => $this->description,
'id' => $this->id
];
$result = setSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
return $result; // true/false oder RowsAffected, je nachdem was setSqlDatapp zurückgibt
}
public function bilderladen (){
$sql = "SELECT pfad FROM bilder WHERE produkt_id = :id";
$dat=['id'=>$this->id];
$result= getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler von bilder laden");
$bilderARR=[];
if ($result){
foreach ($result as $value) {
$bilderARR[]=$value['pfad'];
}
return $bilderARR;
}}
}
class Produkt_liste{
public static function alle_produkte_laden(){
$sql = "SELECT
products.id,
bilder.pfad,
products.name AS produktname,
products.price,
kategorie.name AS kategoriename,
products.inventar,
products.versand
FROM products LEFT JOIN kategorie ON products.kategorie_id = kategorie.id LEFT JOIN
bilder ON products.hauptbild = bilder.id;";
$dat=[];
$result=getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
return $result;
}
public static function kategorie_produkte_laden($kategorie_id){
$sql = "SELECT * FROM products where kategorie_id = :kategorie_id";
$dat=['kategorie_id'=>$kategorie_id];
$result=getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
return $result;
}
}
./ecom_shop/Models/bestellung_model.php
<?php
require_once './config.php';
require_once './inc/pdo.php';
class Bestelunngen{
private $bestelungen_heute;
public function hol_bestellungen_datum($datum){
$sql="SELECT * FROM orders WHERE order_date = $datum";
$dat =[];
$result = getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
$this->bestelungen_heute=count($result);
return $this->bestelungen_heute;
}
public function alle_bestellungen(){
$sql="SELECT * FROM orders";
$dat =[];
$result = getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
return $result;
}
public function bestellung_nach_id($id){
$sql="SELECT * FROM orders WHERE id=:id";
$dat =['id'=>$id];
$result = getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
return $result;
}
}
$testkauf=[0=>['id'=>39,'anzahl'=>3],1=>['id'=>41,'anzahl'=>3],2=>['id'=>42,'anzahl'=>3]];
class bestellung_aufgeben {
public $bestellung =[];
public $user_id;
public function __construct($bestellung,$user_id){
$this->bestellung=$bestellung;
$this->user_id=$user_id;
}
public function bestellung_aufgeben(){
$sql="INSERT INTO orders (user_id) VALUES (:user_id )";
$dat=['user_id'=>$this->user_id,];
$resultvoninsert = setSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
foreach($this->bestellung as $key=>$value){
$sql="select * from products where id=:product_id";
$dat=['product_id'=>$value['id']];
$result = getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
$sql="INSERT INTO order_items (order_id,user_id,product_id,quantity,price ) VALUES (:order_id,:userid,:product_id,:quantity,:price)";
$dat=['order_id'=>$resultvoninsert,'userid'=>$this->user_id,'product_id'=>$result[0]['id'],'quantity'=>$value['anzahl'],'price'=>$result[0]['price']];
setSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler von insert orders_items");
}
}
}
// $test=new bestellung_aufgeben($testkauf,1);
// $test->bestellung_aufgeben();
./ecom_shop/Models/db_model.php
<?php
require_once '../config.php';
class Db{
private $host = "localhost";
private $db_name = Db_name;
private $username = Db_user;
private $password = Db_pass;
public $conn;
public $sql;
public $dat=[];
public $fehler;
public function __construct(){
try {
$this->conn = new PDO(
"mysql:host={$this->host};dbname={$this->db_name};charset=utf8",
$this->username,
$this->password,
[PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
);
} catch (PDOException $e) {
die("Datenbankverbindung fehlgeschlagen: " . $e->getMessage());
}
}
public function select ($table, $spalten=["*"], $where = [], $fehler = "Fehler bei SELECT") {
// $where =[spalte => bedinung]
$dat=[];
$sql = "select ";
$spalten_last=end($spalten);
reset($spalten);
foreach($spalten as $e){
if ($e == $spalten_last) {
$sql .= " " . $e . " ";
}else{
$sql .= " " . $e . ",";
}}
$sql .= " from " . $table;
if (!empty($where)) {
$sql.=" where";
$lastkey=array_key_last($where);
foreach ($where as $key => $value) {
if ($lastkey!=$key){
$sql.= " ".$key ."= :$key and";
$dat[$key]=$value;
}else{
$sql.= " ".$key ."= :$key ";
$dat[$key]=$value;
}
}
}
try{
$stmt = $this->conn->prepare($sql);
$stmt->execute($dat);
return $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
die("$fehler: " . $e->getMessage());
}
}
/** @param string $table name der tabelle
* @param array $inhalt der eigefügt werden soll als array $inhalt ["spaltenname"=>'wert']
* @param string $fehler was bei einem fehler ausgegebn werden soll
*/
public function insert($table, $inhalt,$fehler="fehler von insert" ){
$this->fehler=$fehler;
#$inhalt ["spaltenname"=>'wert']
$this->sql= "insert into $table (";
foreach ($inhalt as $key => $value) {
$this->sql.="$key ,";
$this->dat[$key]=$value;
}
$this->sql =rtrim($this->sql,",");
$this->sql.=") Values (";
foreach($inhalt as $key=>$value){
$this->sql.= " :$key ,";
}
$this->sql =rtrim($this->sql,",");
$this->sql.=" )";
$this->execute();
}
private function execute(){
echo "exec";
try{
$stmt = $this->conn->prepare($this->sql);
$stmt->execute($this->dat);
return $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
die("$this->fehler: " . $e->getMessage());
}
}
}
// public function selecta ($table, $where = "", $data = [], $fehler = "Fehler bei SELECT" ){
// for ($i=0; $i < count($data); $i++) {
// $dat[$data[$i]] = $data[$i];
// }
// $sql = "select";
// foreach($data as $e){
// if ($e == !end($data)) {
// $sql .= " :" . $e . ",";
// }else{
// $sql .= " :" . $e . " ";}
// $sql .= " from " . $table;
// if ($where != "") {
// $sql .= " where " . $where;
// }
// $dat = [];
// for ($i=0; $i < count($data); $i++) {
// $dat[$data[$i]] = $data[$i];
// }
// try {
// $dbh = new PDO("mysql:host=localhost;dbname=$this->db_name", $this->username, $this->password);
// $stat = $dbh->prepare($sql);
// $stat->execute($dat);
// $arr = $stat->fetchAll(\PDO::FETCH_ASSOC);
// return $arr;
// } catch (PDOException $e) {
// echo "PDO-Fehler: " . $e->getMessage();
// echo "Fehler: $fehler ";
// die();
// }
// }
// }
// }
function setSqlDatapp($dbname, $dbuser, $dbpw, $sql, $dat=[], $fehler)
{
try {
$dbh = new PDO("mysql:host=localhost;dbname=$dbname", $dbuser, $dbpw);
$stat = $dbh->prepare($sql);
$ret = $stat->execute($dat);
// Wenn es ein INSERT war, gib die ID zurück
if (stripos(trim($sql), 'insert') === 0) {
return $dbh->lastInsertId();
}else{
return $ret;
}
} catch (PDOException $e) {
echo "PDO-Fehler: " . $e->getMessage();
echo "Fehler: $fehler ";
die();
}
}
function getSqlDatapp($dbname, $dbuser, $dbpw, $sql, $dat, $fehler)
{
try {
$dbh = new PDO("mysql:host=localhost;dbname=$dbname", $dbuser, $dbpw);
$stat = $dbh->prepare($sql);
$stat->execute($dat);
$arr = $stat->fetchAll(\PDO::FETCH_ASSOC);
return $arr;
} catch (PDOException $e) {
echo "PDO-Fehler: " . $e->getMessage();
echo "Fehler: $fehler ";
die();
}
}
./ecom_shop/Models/kategorie_model.php
<?php
require_once "./inc/pdo.php";
require_once "config.php";
class Kategorien {
public $all=[];
public function getall_kat(){
$sql="select * from kategorie";
$dat =[];
$this->all=getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
return $this->all;
}
public function build_options(){
$options="";
foreach ($this->all as $value){
$options.= "<option value='".$value['id']."'>".$value['name']."</option>";
}
return $options;
}
public function build_icon(){
$product_ids=[];
foreach ($this->all as $value){
$sql="select id from products where kategorie_id=:kat_id limit 1";
$dat=['kat_id'=>$value['id']];
$product_ids +=getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
}
}
}
./ecom_shop/Models/medien_model.php
<?php
require_once './inc/pdo.php';
class Medien_model {
public function alle_medien_laden() {
$sql = "SELECT * FROM bilder";
$medien = getSqlDatapp(Db_name, Db_user, Db_pass, $sql, [], "Fehler beim Laden der Medien");
return $medien;
}
public function medieum_loeschen($id) {
$sql ="select pfad from bilder where id =:id";
$dat=['id'=>$id];
$bild_pfad= getSqlDatapp(Db_name, Db_user, Db_pass, $sql, $dat, "Fehler beim Löschen der Medien");
if(file_exists('./'.$bild_pfad[0]['pfad'])){
unlink('./'.$bild_pfad[0]['pfad']);
$sql = "DELETE FROM bilder WHERE id = :id";
$dat = ['id' => $id];
setSqlDatapp(Db_name, Db_user, Db_pass, $sql, $dat, "Fehler beim Löschen der Medien");
}}
public function medien_hinzufuegen($pfad,$produkt_id) {
$sql = "insert INTO bilder (pfad) VALUES (:pfad)";
$dat = ['pfad' => $pfad];
$returnd_id=setSqlDatapp(Db_name, Db_user, Db_pass, $sql, $dat, "Fehler beim Hinzufügen der Medien");
$sql2 = "insert INTO produkt_bilder (produkt_id, bild_id) VALUES (:produkt_id, :bild_id)";
$dat2 = ['produkt_id' => $produkt_id, 'bild_id' => $returnd_id];
setSqlDatapp(Db_name, Db_user, Db_pass, $sql2, $dat2, "Fehler beim Verknüpfen der Medien mit dem Produkt");
}
public function medien_fuer_produkt_laden($produkt_id) {
$sql = "SELECT pfad from bilder join produkt_bilder pb on bilder.id = pb.bild_id
WHERE pb.produkt_id = :produkt_id";
$dat = ['produkt_id' => $produkt_id];
$medien = getSqlDatapp(Db_name, Db_user, Db_pass, $sql, $dat, "Fehler beim Laden der Medien für das Produkt");
return $medien;
}
}
./ecom_shop/Models/umsatz_model.php
<?php
class umsatz_model{
private $umsatz_heute;
public function hol_umsatz_datum($datum){
$sql="SELECT SUM(total) as umsatz FROM order_itemes WHERE order_date = $datum";
$dat =[];
$result = getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
$this->umsatz_heute=$result[0]['umsatz'];
return $this->umsatz_heute;
}
}
./ecom_shop/Models/user_model.php
<?php
// class User {
// public $username;
// public $password;
// }
// class User_check extends User{
// public function __construct($username,$password)
// {
// $username =$this->username;
// $password =$this->password;
// }
// function check (){
// $sql = "select * from users where username =:username";
// $dat =['username'=>$this->username];
// $result=getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler von user");
// if($result){
// if (password_verify($result['password_hash'],$this->password)){
// }
// }
// }
// // }
// class Create_User extends User {
// public $username;
// public $password;
// public $email;
// public $first_name;
// public $last_name;
// public $street;
// public $number;
// public $city;
// public $postal_code;
// public $country;
// public $phone;
// public $id;
// public function __construct($username,$password,$email,$first_name,$last_name,$street,$number,$city,$postal_code,$country,$phone="null")
// {
// $this->username =$username;
// $this->password =$password;
// $this->email =$email;
// $this->first_name =$first_name;
// $this->last_name =$last_name;
// $this->phone =$phone;
// $this->street =$street;
// $this->number =$number;
// $this->city =$city;
// $this->postal_code =$postal_code;
// $this->country =$country;
// }
// function create_user(){
// $sql = "select * from users where username =:username";
// $dat =['username'=>$this->username];
// $result=getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler von user");
// if(!$result){
// $sql = "insert into users (username,password_hash,email,first_name,last_name,phone,street,number,city,postal_code,country) values (:username,:password_hash,:email,:first_name,:last_name,:phone,:street,:number,:city,:postal_code,:country)";
// $dat =['username'=>$this->username,
// 'password_hash'=>password_hash($this->password,PASSWORD_DEFAULT),
// 'email'=>$this->email,
// 'first_name'=>$this->first_name,
// 'last_name'=>$this->last_name,
// 'phone'=>$this->phone,
// 'street'=>$this->street,
// 'number'=>$this->number,
// 'city'=>$this->city,
// 'postal_code'=>$this->postal_code,
// 'country'=>$this->country];
// $result=setSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler von create_user");
// if ($result){
// $this->id=getSqlDatapp(Db_name,Db_user,Db_pass,"select id from users where username=:username",['username'=>$this->username],"fehler von create_user_id")['id'];
// return true;
// }
// }else{
// return false;
// }
// }
// public function update_user(){
// $sql = "update users set username=:username,password_hash=:password_hash,email=:email,first_name=:first_name,last_name=:last_name,phone=:phone,street=:street,number=:number,city=:city,postal_code=:postal_code,country=:country where id=:id";
// $dat =['id'=>$this->id,
// 'username'=>$this->username,
// 'password_hash'=>password_hash($this->password,PASSWORD_DEFAULT),
// 'email'=>$this->email,
// 'first_name'=>$this->first_name,
// 'last_name'=>$this->last_name,
// 'phone'=>$this->phone,
// 'street'=>$this->street,
// 'number'=>$this->number,
// 'city'=>$this->city,
// 'postal_code'=>$this->postal_code,
// 'country'=>$this->country];
// $result=setSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler von update_user");
// return $result;
// }
// }
// // class admin extends check_user{
// // private function is_admin($username){
// // $sql = "select is_admin from users where username =:username";
// // $dat =['username'=>$this->username];
// // $result=getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler von is_admin");
// // if($result['is_admin']==1){
// // return true;
// // }else{
// // return false;
// // }
// // }}
// class log_status{
// public static function is_loged_in(){
// if (isset($_SESSION['username'])){
// return true;
// }else{
// return false;
// }
// }
// public static function log_out(){
// session_unset();
// session_destroy();
// header("Location: ./");
// }
// public static function require_log_in(){
// if (!self::is_loged_in()){
// header("Location: ./login.php");
// exit();
// }
// }
// }
class User {
private $id;
private $username;
private $password;
public function login($username ,$password) {
$this->username = $username;
$this->password= $password;
$sql = "SELECT * FROM users WHERE username = :username";
$dat = ['username' => $this->username];
$result = getSqlDatapp(Db_name, Db_user, Db_pass, $sql, $dat, "Fehler beim Login");
if ($result && password_verify($this->password, $result[0]['password_hash'])) {
$this->id = $result[0]['id'];
$_SESSION['username'] = $this->username;
$_SESSION['user_id'] = $this->id;
session_regenerate_id(true);
header("Location: ./backend");
}
else {
echo "fehler von login";
}}
public function check_is_user(){
if (isset($_SESSION['username'])and isset($_SESSION['user_id'])){
return true;
}else{
return false;
}}
public function is_admin() {
if (!$this->check_is_user()) {
header("Location: ./login.php
");
exit();
}
$sql = "SELECT is_admin FROM users WHERE id = :id";
$dat = ['id' => $_SESSION['user_id']];
$result = getSqlDatapp(Db_name, Db_user, Db_pass, $sql, $dat, "Fehler bei is_admin");
if($result[0]['is_admin'] == 1) {
return true;
}else {
// header("Location: login.php");
exit();
}}
}
./ecom_shop/checkisadmin.php
<?php
//require_once './Models/user_model.php';
./ecom_shop/checkout.php
<?php
$id ="1";
require_once './Models/Produkt_models.php';
// $produktModel[] = new Produkt_ausDB($id);
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>checkout</title>
<link rel="stylesheet" href="./style/checkout_style.css">
</head>
<body>
<div class="wrapper">
<form action="" method="post">
<h2>Kasse</h2>
<div class="form-row">
<input type="email" placeholder="E-Mail-Adresse*" required>
</div>
<div class="form-row">
<label>Anrede*</label>
<select required>
<option>Keine Angabe</option>
<option>Herr</option>
<option>Frau</option>
</select>
</div>
<div class="form-row two-col">
<input type="text" placeholder="Vorname*" required>
<input type="text" placeholder="Nachname*" required>
</div>
<h3>Deine Adresse</h3>
<div class="form-row three-col">
<input type="text" placeholder="Straße*" required>
<input type="text" placeholder="Hausnummer*" required>
<input type="text" placeholder="Adresszusatz">
</div>
<div class="form-row two-col">
<input type="text" placeholder="PLZ*" required>
<input type="text" placeholder="Ort*" required>
</div>
<div class="form-row">
<input type="tel" placeholder="Telefonnummer*">
</div>
<div class="form-row checkbox two-col">
<input type="checkbox" id="abweichend">
<label for="abweichend">Lieferadresse weicht von Rechnungsadresse ab</label>
</div>
<button type="submit">Weiter</button>
</form>
<div class="waren">defdsfsd</div>
</div>
<script>
let produkte = localStorage.getItem("cart");
produkte = JSON.parse(produkte);
console.log(produkte);
cartprodukte = [];
function hol_produkte(arr) {
arr.forEach((element) => {
console.log(element.id)
fetch('server.php?id=' + element.id)
.then(res => res.json())
.then(data => cartprodukte.push(data))
.catch(err => console.error(err));
})
}
hol_produkte(produkte);
console.log(cartprodukte);
</script>
</body>
</html>
./ecom_shop/config.php
<?php
const Db_name="wad";
const Db_user="wad";
const Db_pass="hallo";
./ecom_shop/controller/backend_controller.php
<?php
require_once 'models/user_model.php';
require_once './Models/bestellung_model.php';
require_once './Models/Produkt_models.php';
require_once './models/medien_model.php';
class BackendController
{
public function ShowBackend()
{
$user = new User();
$user->is_admin();
$bestellungen = new Bestelunngen();
$bestellungen_heute = $bestellungen->hol_bestellungen_datum('CURDATE()');
$produkte_liste = new Produkt_liste();
$alle_produkte= $produkte_liste->alle_produkte_laden();
$table_kopf = ["ID", "bild", "name", "preis","kategorie" ,"inventar", "versand"];
$alle_bestellunegen = $bestellungen->alle_bestellungen();
$produkte_table = $this-> baue_table($alle_produkte, $table_kopf,true,true);
$bestellungen_table =$this-> baue_table($alle_bestellunegen, ["Bestell-ID", "Kunden-ID", "Datum", "Gesamtbetrag"],false,false);
$allebilder = $this->ladebilder();
$data=[
'bestellungen_table'=>$bestellungen_table,
'produkte_table'=>$produkte_table,
'bestellungen_heute'=>$bestellungen_heute,
'allebilder'=>$allebilder
];
$this->render('./views/backend_view.php', $data);
}
public function baue_table($array,$kopf,$del=false,$edit=false){ {
$html='<table >';
//kopfzeile
$html.='<tr>';
foreach($kopf as $value){
$html.='<th>'.htmlspecialchars($value).'</th>';
}
// zusätzliche Spalten für Aktionen (optional)
if($edit) {
$html.='<th>Bearbeiten</th>';
}
if($del) {
$html.='<th>Löschen</th>';
}
$html.='</tr>';
//datenzeilen
foreach($array as $rowKey => $row){
$html.='<tr>';
foreach($row as $colKey => $value){
if ($colKey == "pfad"){
$src = htmlspecialchars($value);
$html.='<td><img src="'.$src.'" alt="Produktbild" width="50"></td>';
} else if($colKey == "price" || $colKey == "versand"){
// sicherstellen, dass es eine Zahl ist und mit Komma formatieren
$num = is_numeric($value) ? number_format((float)$value, 2, ',', '.') : htmlspecialchars($value);
$html.='<td>'.$num.'</td>';
} else {
$html.='<td>'.htmlspecialchars($value).'</td>';
}
}
// Aktions-Links (id sichern)
$id = isset($row['id']) ? urlencode($row['id']) : '';
$html.= $edit? '<td><a href="producte_hinzufügen.php?edit='.$id.'">Bearbeiten</a></td>':'';
$html.= $del ?'<td><a href="produkt_loeschen.php?id='.$id.'">Löschen</a></td>':'';
$html.='</tr>';
}
$html.='</table>';
return $html;
}
}
private function render($template, $data){
extract($data);
include($template);
}
public function ladebilder(){
$medien_model = new Medien_model();
return $medien_model->alle_medien_laden();
}}
./ecom_shop/controller/medien_controller.php
<?php
require_once './Models/Medien_model.php';
require_once 'Models/user_model.php';
class Medien_controller{
public function loesche_medien($ids){
// $user=new User();
// $user->is_admin();
$medien = new Medien_model();
foreach($ids as $id){
$medien->medieum_loeschen($id);
}
}
public function medien_hinzufuegen($pfad,$produkt_id){
$medien = new Medien_model();
$medien->medien_hinzufuegen($pfad,$produkt_id);
}
public function medien_speichern(){
if (isset($_FILES['bild'])) {
$file = $_FILES['bild'];
$name = $file['name']; // Originalname
$tmpName = $file['tmp_name']; // temporärer Pfad
$size = $file['size']; // Dateigröße
$error = $file['error']; // Upload-Fehlercode
// Prüfen auf Upload-Fehler
if ($error !== 0) {
echo "Fehler beim Hochladen: $error";
exit;
}
// Erlaubte Dateiendungen
$allowed = ['jpg', 'jpeg', 'png', 'gif'];
$ext = strtolower(pathinfo($name, PATHINFO_EXTENSION));
if (!in_array($ext, $allowed)) {
echo "Dateityp nicht erlaubt!";
exit;
}
// Eindeutigen Dateinamen erstellen
$zielPfad = 'uploads/' . uniqid('', true) . "." . $ext;
// Datei verschieben
if (move_uploaded_file($tmpName, $zielPfad)) {
return "$zielPfad";
} else {
return "Fehler beim Verschieben der Datei.";
}
} else {
// echo "Keine Datei empfangen!";
}
}
}
./ecom_shop/controller/pr_hinzufuegen_controller.php
<?php
require_once 'Models/produkt_models.php';
require_once 'Models/kategorie_model.php';
require_once 'inc/algemeinfunc.php';
require_once 'controller/medien_controller.php';
class produkt_hinzufuegen_controller {
public function show() {
$kategorie= new Kategorien;
$kategorie->getall_kat();
$options=$kategorie->build_options();
$data = [
"options" => $options
];
$this->add_produkt();
$this->render('./views/pr_himzufuegen_view.php', $data);
}
private function add_produkt() {
$r = $_POST;
if(isset($_POST['submit'])){
$name=$_POST['name'];
$price=intval($_POST['price']);
$description=$_POST['description'];
$kategorie_id =intval($r["kat"]);
$inventar =intval($r['inventar']);
$versand= floatval($r['versand']);
$hauptbild=$r['hauptbild'] ?? '';
echo "Hauptbild: ".htmlspecialchars($hauptbild);
$produkt=new Produkt_inDb($name,$price,$description,$kategorie_id, $inventar, $versand,$hauptbild);
$returnd_id= $produkt->speichern();
$bilderARR =explode(',',$r['bilder']);
$bilderARR=array_filter($bilderARR);
foreach ($bilderARR as $key => $value) {
$controller = new Medien_controller();
$controller->medien_hinzufuegen($value, $returnd_id);
}
}
}
private function render($template, $data){
extract($data);
include($template);
}
}
./ecom_shop/controller/produkt_controller.php
<?php
require_once './Models/Produkt_models.php';
require_once './Models/medien_model.php';
class Produkt_controller{
public function show($produkt_id){
if (!isset($produkt_id) || !is_numeric($produkt_id)) {
$this->renderError("Ungültige Produkt-ID");
return;}
try {
$produkt = new Produkt_ausDB($produkt_id);
$medien = new Medien_model();
$bilder= $medien->medien_fuer_produkt_laden($produkt_id);
$data = [
"name" => $produkt->name,
'description' => $produkt->description,
'price' => $produkt->price,
'versand' => $produkt->versand,
'id' => $produkt->id,
"hauptbild" => $produkt->hauptbild,
"allebilder" => $bilder
];
$this->render('./views/produkt_view.php', $data);
} catch (Exception $e) {
return null;
}}
private function render($template, $data){
extract($data);
include($template);
}
private function renderError($message) {
echo "<h1>$message</h1>";
}
}
if(isset($produkt_id) and is_numeric($produkt_id)){
$id = $produkt_id;
echo"id vom produkt.php : ".$id;
try {
$produkt =new Produkt_ausDB($id);
$seite =file_get_contents('./layouts/produkt_layoutsx2.html');
$seiteninhalte =["name"=>$produkt->name,'description'=>$produkt->description,'price'=>$produkt->price,'id'=>$produkt->id,"hauptbild"=>$produkt->hauptbild];
foreach ($seiteninhalte as $key => $value) {
$seite = str_replace("{{{$key}}}",$value,$seite);
}
}catch (Exception $e) {
$seite= "<h1>Produkt nicht gefunden</h1>";
}
}else{
$seite = "Produkt nicht gefunden";
}
$headerr = file_get_contents('./heaxder.html');
?>
./ecom_shop/editor_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#edit {
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<textarea id="edit" contenteditable="true">bffbbf</textarea>
</body>
</html>
./ecom_shop/heaxder.html
<link rel="stylesheet" href="/ecom_shop/style/zentral.css" />
<header>
<div class="header-inner">
<div class="logo">
<a href="#"><img src="/ecom_shop/bilder/lovelux_logo_600px.avif" alt="logo" /></a>
{{logo}}
</div>
<div class="nav-wrapper">
<nav id="main-nav">
{{menüpunkkte}}
<ul>
<li><a href="#">unsere kollektion</a></li>
<li><a href="#">über lovelux</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">kontakt</a></li>
</ul>
</nav>
</div>
<div class="iconholder">
<div class="icon-wrapper" title="Suche">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-label="Suche">
<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" d="M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14z" />
<path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" d="M21 21l-4.35-4.35" />
</svg>
</div>
<div class="icon-wrapper open_cart" title="Warenkorb">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
<circle cx="16" cy="16" r="8" fill="black" class="cartnumber" />
<text id="cart-count" x="16" y="20" text-anchor="middle" fill="white" font-family="Arial"
font-weight="bold" class="cartnumber"></text>
</svg>
</div>
<button class="hamburger" id="hamburger-btn" aria-label="Menü öffnen" type="button">
<span></span>
<span></span>
<span></span>
</button>
</div>
</div>
<div class="warenkorb">
<div class="erste_rheie">
<p class="big">Dein Warenkorb</p>
<div class="big close">X</div>
</div>
<div class="produkte"></div>
</div>
</header>
</div>
<script src="/ecom_shop/scripts/header.js">
</script>
./ecom_shop/htmleditor.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Editor — Optimiert</title>
<style>
body {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
margin: 20px;
font-family: Arial, sans-serif;
background: #f5f7fa;
}
.master {
border: 1px solid #cfd8df;
padding: 10px;
width: 900px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
box-sizing: border-box;
}
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
padding: 8px;
border-bottom: 1px solid #e1e6ea;
background: linear-gradient(180deg, #fafafa, #f3f6f8);
}
.toolbar select,
.toolbar button,
.toolbar input[type="color"] {
height: 32px;
padding: 4px 8px;
border: 1px solid #d0d6dc;
background: white;
cursor: pointer;
border-radius: 4px;
}
.toolbar button {
display: inline-flex;
align-items: center;
gap: 6px;
}
.editor {
border: 1px solid #dbe3ea;
min-height: 320px;
padding: 12px;
box-sizing: border-box;
outline: none;
margin-top: 10px;
}
.statusbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
color: #666;
font-size: 13px;
}
.grow {
flex-grow: 1;
}
@media (max-width: 960px) {
.master {
width: 100%;
margin: 10px;
}
}
</style>
</head>
<body>
<div class="master">
<div class="toolbar" role="toolbar" aria-label="Editor Toolbar">
<!-- basic formatting -->
<button onclick="exec('bold')" title="Fett (Ctrl+B)">B</button>
<button onclick="exec('italic')" title="Kursiv (Ctrl+I)">
<i>I</i>
</button>
<button onclick="exec('underline')" title="Unterstrichen (Ctrl+U)">
<u>U</u>
</button>
<!-- headings / format block -->
<select
id="formatBlock"
onchange="formatBlock(this.value)"
title="Format/Überschrift"
>
<option value="">Absatz</option>
<option value="h1">Überschrift 1</option>
<option value="h2">Überschrift 2</option>
<option value="h3">Überschrift 3</option>
<option value="pre">Code</option>
</select>
<!-- lists / align -->
<button onclick="exec('insertUnorderedList')" title="Aufzählung">
• List
</button>
<button onclick="exec('insertOrderedList')" title="Nummerierte Liste">
1. List
</button>
<button onclick="exec('justifyLeft')" title="Linksbündig">Left</button>
<button onclick="exec('justifyCenter')" title="Zentriert">
Center
</button>
<button onclick="exec('justifyRight')" title="Rechtsbündig">
Right
</button>
<!-- indent -->
<button onclick="exec('indent')" title="Einzug">→</button>
<button onclick="exec('outdent')" title="Einzug verringern">←</button>
<!-- colors -->
<label title="Textfarbe">
<input
type="color"
id="foreColor"
onchange="execColor('foreColor', this.value)"
/>
</label>
<label title="Hintergrundfarbe">
<input
type="color"
id="backColor"
onchange="execColor('hiliteColor', this.value)"
/>
</label>
<!-- link / image -->
<!-- undo/redo/clear -->
<button onclick="exec('undo')" title="Rückgängig (Ctrl+Z)">↶</button>
<button onclick="exec('redo')" title="Wiederholen (Ctrl+Y)">↷</button>
<button onclick="exec('removeFormat')" title="Format entfernen">
Tx
</button>
<!-- font family/size -->
<select
id="fontName"
onchange="exec('fontName', this.value)"
title="Schriftart"
>
<option value="Arial">Arial</option>
<option value="Times New Roman">Times</option>
<option value="Courier New">Courier</option>
<option value="Georgia">Georgia</option>
</select>
<select
id="fontSize"
onchange="exec('fontSize', this.value)"
title="Schriftgröße"
>
<option value="3">Normal</option>
<option value="1">Sehr klein</option>
<option value="2">Klein</option>
<option value="4">Groß</option>
<option value="5">Sehr groß</option>
</select>
<div class="grow"></div>
<!-- save / load / export -->
</div>
<div
id="editor"
contenteditable="true"
class="editor"
spellcheck="true"
aria-label="Texteditor"
placeholder="Hier schreiben..."
autofocus
></div>
<div class="statusbar">
<div id="help">Tastenkürzel: Ctrl+B/I/U, Ctrl+Z/Y</div>
</div>
</div>
<script>
// Utility exec wrapper
function exec(command, value = null) {
document.execCommand(command, false, value);
document.getElementById("editor").focus();
}
function formatBlock(value) {
if (!value) value = "p";
document.execCommand("formatBlock", false, value);
}
function execColor(cmd, value) {
if (cmd === "hiliteColor") {
// some browsers use 'hiliteColor' or 'backColor'
document.execCommand("hiliteColor", false, value) ||
document.execCommand("backColor", false, value);
} else {
document.execCommand(cmd, false, value);
}
}
function execSelect(command, selectId) {
const val = document.getElementById(selectId).value;
exec(command, val);
}
// keyboard shortcuts
document
.getElementById("editor")
.addEventListener("keydown", function (e) {
if (e.ctrlKey || e.metaKey) {
const key = e.key.toLowerCase();
if (key === "b") {
e.preventDefault();
exec("bold");
}
if (key === "i") {
e.preventDefault();
exec("italic");
}
if (key === "u") {
e.preventDefault();
exec("underline");
}
if (key === "z") {
e.preventDefault();
exec("undo");
}
if (key === "y") {
e.preventDefault();
exec("redo");
}
if (key === "s") {
e.preventDefault();
saveDraft();
}
}
});
// update status on input and on paste
const editor = document.getElementById("editor");
// init
// expose some functions for selects
document
.getElementById("fontName")
.addEventListener("change", function () {
exec("fontName", this.value);
});
document
.getElementById("fontSize")
.addEventListener("change", function () {
exec("fontSize", this.value);
});
</script>
</body>
</html>
./ecom_shop/inc/algemeinfunc.php
<?php
// function getall_kat(){
// $sql="select * from kategorie";
// $dat =[];
// return getSqlDatapp(Db_name,Db_user,Db_pass,$sql,$dat,"fehler");
// }
function baue_table($array,$kopf ){
$html='<table border="1">';
//kopfzeile
$html.='<tr>';
foreach($kopf as $value){
$html.='<th>'.htmlspecialchars($value).'</th>';
}
// zusätzliche Spalten für Aktionen (optional)
$html.='<th>Bearbeiten</th><th>Löschen</th>';
$html.='</tr>';
//datenzeilen
foreach($array as $rowKey => $row){
$html.='<tr>';
foreach($row as $colKey => $value){
if ($colKey == "pfad"){
$src = htmlspecialchars($value);
$html.='<td><img src="'.$src.'" alt="Produktbild" width="50"></td>';
} else if($colKey == "price" || $colKey == "versand"){
// sicherstellen, dass es eine Zahl ist und mit Komma formatieren
$num = is_numeric($value) ? number_format((float)$value, 2, ',', '.') : htmlspecialchars($value);
$html.='<td>'.$num.'</td>';
} else {
$html.='<td>'.htmlspecialchars($value).'</td>';
}
}
// Aktions-Links (id sichern)
$id = isset($row['id']) ? urlencode($row['id']) : '';
$html.='<td><a href="producte_hinzufügen.php?edit='.$id.'">Bearbeiten</a></td>';
$html.='<td><a href="produkt_loeschen.php?id='.$id.'">Löschen</a></td>';
$html.='</tr>';
}
$html.='</table>';
return $html;
}
./ecom_shop/inc/pdo.php
<?php
function setSqlDatapp($dbname, $dbuser, $dbpw, $sql, $dat=[], $fehler)
{
try {
$dbh = new PDO("mysql:host=localhost;dbname=$dbname", $dbuser, $dbpw);
$stat = $dbh->prepare($sql);
$ret = $stat->execute($dat);
// Wenn es ein INSERT war, gib die ID zurück
if (stripos(trim($sql), 'insert') === 0) {
return $dbh->lastInsertId();
}else{
return $ret;
}
} catch (PDOException $e) {
echo "PDO-Fehler: " . $e->getMessage();
echo "Fehler: $fehler ";
die();
}
}
function getSqlDatapp($dbname, $dbuser, $dbpw, $sql, $dat, $fehler)
{
try {
$dbh = new PDO("mysql:host=localhost;dbname=$dbname", $dbuser, $dbpw);
$stat = $dbh->prepare($sql);
$stat->execute($dat);
$arr = $stat->fetchAll(\PDO::FETCH_ASSOC);
return $arr;
} catch (PDOException $e) {
echo "PDO-Fehler: " . $e->getMessage();
echo "Fehler: $fehler ";
die();
}
}
./ecom_shop/index.php
<?php
session_start();
require_once './config.php';
require_once './inc/pdo.php';
require_once './inc/algemeinfunc.php';
require_once './Models/bestellung_model.php';
require_once './Models/produkt_models.php';
require_once './Models/kategorie_model.php';
require_once './Models/user_model.php';
require_once './Models/user_model.php';
require_once './controller/produkt_controller.php';
require_once './controller/backend_controller.php';
require_once './controller/pr_hinzufuegen_controller.php';
$request = $_SERVER['REQUEST_URI'];
$parsed = parse_url($request);
// $path = trim($parsed['path'], 'ecom_shop/'); // ohne Slash am Anfang/Ende
$path = str_replace('ecom_shop/', '', $parsed['path']);
$parts = explode('/', $path);
switch ($parts[1]) {
case '':
require './start.php';
break;
case 'backend':
$controller = new BackendController();
$controller->ShowBackend();
break;
case 'produkt':
$user = new User;
if(isset($parts[2]) and is_numeric($parts[2])){
$produkt_id = intval($parts[2]);
$controller = new Produkt_controller();
$controller->show($produkt_id);
}
else{
http_response_code(404);
echo "Produkt nicht gefunden";
}
break;
case 'produkte-hinzufuegen':
$controller = new produkt_hinzufuegen_controller();
$controller->show();
break;
default:
http_response_code(404);
echo "Seite nicht gefunden".$parts[1];
break;
}
./ecom_shop/layouts/produkt_layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{name}}</title>
<link rel="stylesheet" href="./style/produkt_layout.css">
</head>
<body>
<div class="container">
<!-- Hauptproduktbereich: Bild + Buttons -->
<div class="product-main">
<!-- Linker Bereich: Produktbild -->
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80"
alt="ProX SmartWatch" class="product-image">
<!-- Rechter Bereich: Buttons -->
<div class="product-buttons">
<span class="badge">NEU & BEGRENZT</span>
<h1>ProX SmartWatch</h1>
<p class="subtitle">Die ultimative Kombination aus Design, Leistung und Gesundheitsüberwachung.</p>
<div class="price">Nur 299 €</div>
<a href="#add-to-cart" class="btn btn-add-to-cart">In den Warenkorb</a>
<a href="#buy-now" class="btn btn-buy-now">Jetzt kaufen</a>
</div>
</div>
<!-- Untere Beschreibung -->
<div class="description">
<h2>Warum die ProX SmartWatch?</h2>
<p>Die ProX SmartWatch vereint elegantes Design mit fortschrittlicher Technologie – entwickelt für Menschen,
die ihr Leben aktiv gestalten möchten. Mit einer präzisen Bio-Sensorik erfasst sie nicht nur Ihre
Herzfrequenz und Schlafmuster, sondern analysiert auch Ihren Stresslevel und Ihre körperliche Belastung
in Echtzeit.</p>
<p>Das OLED-Display mit automatischer Helligkeitsanpassung ist selbst bei Sonnenlicht klar lesbar. Die Uhr
läuft bis zu 14 Tage auf einer einzigen Ladung – ohne lästiges Aufladen mitten im Training. Dank
IP68-Wasserdichtigkeit können Sie sie beim Schwimmen, Duschen oder im Regen tragen, ohne Sorgen haben zu
müssen.</p>
<p>Die intuitive App synchronisiert Ihre Daten mit iOS und Android und bietet personalisierte
Trainingspläne, Atemübungen zur Entspannung und sogar eine Warnfunktion bei unregelmäßigen Herzrhythmen.
Zusätzlich unterstützt die ProX SmartWatch über 100 Sportmodi – von Yoga bis Marathonlauf.</p>
<p>Alle Materialien sind recycelt und umweltfreundlich. Das Gehäuse besteht aus recyceltem Aluminium, das
Band aus bio-basiertem Silikon – komfortabel, hautfreundlich und nachhaltig.</p>
<p>Inklusive 2 Jahre Garantie und kostenloser Software-Updates. Lieferung innerhalb von 24 Stunden –
versichert und kostenlos.</p>
</div>
</div>
</body>
</html>
</body>
</html>
./ecom_shop/layouts/produkt_layoutsx2.html
<link rel="stylesheet" href="/ecom_shop/style/produkt_layout_x2.css" />
<div class="wrapper">
<div>
<img src="{{hauptbild}}" alt="" />
</div>
<div>{{allebilder}}</div>
<div class="info">
<h1>{{name}}</h1>
<p>{{price}}</p>
<small>{{versand}}</small>
<br />
<span class="greenlight">in 2- 3 tagen bei ihnen zuhasue</span>
<div class="buy">
<div class="quant">
<button class="minus">-</button>
<input type="number" name="quant" min="1" value="1" id="quant" />
<button class="plus">+</button>
</div>
<button id="in-den-warenkorb">in den Warenkorb</button>
<input type="hidden" name="id" value="{{id}}" id="id" />
</div>
<p>97 % zufrieden kunden</p>
<p></p>
</div>
</div>
./ecom_shop/layouts/start_layout.html
<link rel="stylesheet" href="style/start_style.css" />
<body>
<div class="wrapper">
<div class="angebot">vbdxvbf</div>
<div class="kategorie"></div>
<div class="titelbild">
<div class="action"></div>
</div>
<div class="vorteile"></div>
<div class="bestseller"></div>
<div class="voteiletext"></div>
<div class="bekanntaus"></div>
<div class="inspiration"></div>
<div class="vorteile"></div>
<div class="newsletter"></div>
<img src="bilder/noimage.png" alt="" />
</div>
<!-- wrapper ende -->
</body>
./ecom_shop/login.php
<?php
$r=array_merge($_POST,$_GET);
$error_message = "";
if(isset($r['submit'])){
session_start();
require_once './config.php';
require_once './inc/pdo.php';
require_once './Models/user_model.php';
$username = trim($r['username']);
$password = trim($r['password']);
$user = new User();
$user->login($username, $password);
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="style/login.css">
</head>
<body>
<div class="login-container">
<form class="login-form" method="post" action="login.php">
<h2>Login</h2>
<label for="username">Benutzername</label>
<input type="text" id="username" name="username" required>
<label for="password">Passwort</label>
<input type="password" id="password" name="password" required>
<button type="submit" name="submit">Anmelden</button>
</form>
<div><?=$error_message?></div>
</div>
</body>
</html>
./ecom_shop/producte_hinzufügen.php
<?php
$r=array_merge($_POST,$_GET);
require_once 'Models/Produkt_models.php';
require_once 'Models/kategorie_model.php';
require_once 'inc/algemeinfunc.php';
$name="";
$price="";
$description="";
$kategorie_id ="";
$inventar ="";
$versand= "";
$hauptbild="";
$bilder=[];
$bilderHtml="";
$pressbtn="submit";
if(isset($r['update'])){
$id =intval($r['id']);
try {
$produkt =new Produkt_ausDB($id);
$produkt->name=$r['name'];
$produkt->price=intval($r['price']);
$produkt->description=$r['description'];
$produkt->kategorie_id =intval($r["kat"]);
$produkt->inventar =intval($r['inventar']);
$produkt->versand= floatval($r['versand']);
$produkt->hauptbild=$r['hauptbild'];
$produkt->update_produkt();
$bilderARR =explode(',',$r['bilder']);
$bilderARR=array_filter($bilderARR);
$produkt->bilderspeichern($bilderARR);
}catch (Exception $e) {
echo "<h1>Produkt nicht gefunden</h1>";
}
}
if (isset($r['edit'])){
$id =intval($r['edit']);
$pressbtn="update";
try {
$produkt =new Produkt_ausDB($id);
$name=$produkt->name;
$price=$produkt->price;
$description=$produkt->description;
$kategorie_id =$produkt->kategorie_id;
$inventar = $produkt->inventar;
$versand=$produkt->versand;
$hauptbild=$produkt->hauptbild;
$bilder=$produkt->bilderladen();
$id=$produkt->id;
if (!$bilder){
$bilder=[];
}
foreach ($bilder as $bild) {
if($bild == $hauptbild){
$checked = "checked";
} else {
$checked = "";
}
$bilderHtml.="<div><img src=' $bild'> <input type='radio' name='hauptbild' value='$bild'$checked></div>";
}
}catch (Exception $e) {
echo "<h1>Produkt nicht gefunden</h1>";
}
}
if(isset($_POST['submit'])){
$name=$_POST['name'];
$price=intval($_POST['price']);
$description=$_POST['description'];
$kategorie_id =intval($r["kat"]);
$inventar =intval($r['inventar']);
$versand= floatval($r['versand']);
$hauptbild=$r['hauptbild'] ?? '';
$produkt=new Produkt_inDb($name,$price,$description,$kategorie_id, $inventar, $versand,$hauptbild);
$produkt->speichern();
$bilderARR =explode(',',$r['bilder']);
$bilderARR=array_filter($bilderARR);
$produkt->bilderspeichern($bilderARR);
}
$options="";
$kategorie= new Kategorien;
$kategorie->getall_kat();
$options=$kategorie->build_options();
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>produkte hinzufügen</title>
<link rel="stylesheet" href="./style/produkte.css">
</head>
<body>
<form action="producte_hinzufügen.php" method="post">
<input type="hidden" name="id" value="<?= $id ?? '' ?>">
<label for="name">Titel:</label>
<input type="text" id="name" name="name" value="<?=$name?>" required><br><br>
<label for="description">Beschreibung:</label><br>
<textarea id="description" name="description" rows="4" cols="50" required><?=$description?></textarea><br><br>
<label for="price">Preis:</label>
<input type="number" id="price" name="price" step="0.01" value="<?=$price?>" required><br><br>
<div id="div1">
<input type="file" name="image" accept="image/*" id="imageinpt" onchange="uploadBild()">
<?= $bilderHtml ?>
</div>
<div id="dropzone">
<label for="imageinpt">
<span> medien
<p>hier hin ziehen oder klicken</p>
</span>
</div>
</label>
<label for="kat">kategorie</label>
<select name="kat" id="kat">
<?=$options?>
</select>
<div>
<label for="inventar">inventar</label>
<input type="number" id="inventar" name="inventar" min="0" value="<?=$inventar?>">
</div>
<div>
<label for="versand">versand</label>
<input type="number" name="versand" min="0" value="<?=$versand?>">
</div>
<input type="submit" value="Produkt hinzufügen" name="<?=$pressbtn?>">
<input type="hidden" id="bilder" name="bilder">
</form>
<script src="./scripts/produkte.js">
</script>
</body>
</html>
./ecom_shop/regestrierung.php
<?php
require_once 'Models/user_model.php';
require_once 'config.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$username = htmlspecialchars(trim($_POST['username']));
$password = password_hash(trim($_POST['password']), PASSWORD_DEFAULT);
$email = htmlspecialchars(trim($_POST['email']));
$first_name = htmlspecialchars(trim($_POST['first_name']));
$last_name = htmlspecialchars(trim($_POST['last_name']));
$phone = isset($_POST['phone']) ? htmlspecialchars(trim($_POST['phone'])) : null;
$street = htmlspecialchars(trim($_POST['street']));
$number = htmlspecialchars(trim($_POST['number']));
$city = htmlspecialchars(trim($_POST['city']));
$postal_code = htmlspecialchars(trim($_POST['postal_code']));
$country = htmlspecialchars(trim($_POST['country']));
$newUser = new Create_User($username, $password, $email, $first_name, $last_name, $street, $number, $city, $postal_code, $country, $phone);
if ($newUser->create_user()) {
// Erfolgreiche Registrierung
header('Location: login.php');
exit();
} else {
// Fehler bei der Registrierung
echo "Benutzername bereits vergeben oder Fehler bei der Registrierung.";
}
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Registrierung</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/regestrierung.css">
</head>
<body>
<div class="register-container">
<form class="register-form" method="post" action="regestrierung.php">
<h2>Registrieren</h2>
<label for="username">Benutzername</label>
<input type="text" id="username" name="username" required pattern="^[a-zA-Z0-9_]{3,20}$"
title="3-20 Zeichen, Buchstaben, Zahlen, Unterstrich">
<label for="password">Passwort</label>
<input type="password" id="password" name="password" required pattern=".{6,}" title="Mindestens 6 Zeichen">
<label for="email">E-Mail</label>
<input type="email" id="email" name="email" required pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$"
title="Gültige E-Mail-Adresse">
<label for="first_name">Vorname</label>
<input type="text" id="first_name" name="first_name" required pattern="^[A-Za-zÄÖÜäöüß\- ]{2,30}$"
title="Nur Buchstaben, Bindestrich, 2-30 Zeichen">
<label for="last_name">Nachname</label>
<input type="text" id="last_name" name="last_name" required pattern="^[A-Za-zÄÖÜäöüß\- ]{2,30}$"
title="Nur Buchstaben, Bindestrich, 2-30 Zeichen">
<label for="phone">Telefon</label>
<input type="tel" id="phone" name="phone" pattern="^\+?[0-9\- ]{7,20}$"
title="Nur Zahlen, Leerzeichen, Bindestrich, optional +">
<label for="street">Straße</label>
<input type="text" id="street" name="street" required pattern="^[A-Za-zÄÖÜäöüß\- ]{2,40}$"
title="Nur Buchstaben, Bindestrich, 2-40 Zeichen">
<label for="number">Hausnummer</label>
<input type="text" id="number" name="number" required pattern="^[0-9a-zA-Z\-]{1,10}$"
title="Zahlen, Buchstaben, Bindestrich, 1-10 Zeichen">
<label for="city">Stadt</label>
<input type="text" id="city" name="city" required pattern="^[A-Za-zÄÖÜäöüß\- ]{2,40}$"
title="Nur Buchstaben, Bindestrich, 2-40 Zeichen">
<label for="postal_code">PLZ</label>
<input type="text" id="postal_code" name="postal_code" required pattern="^\d{4,10}$"
title="Nur Zahlen, 4-10 Zeichen">
<label for="country">Land</label>
<input type="text" id="country" name="country" required pattern="^[A-Za-zÄÖÜäöüß\- ]{2,40}$"
title="Nur Buchstaben, Bindestrich, 2-40 Zeichen">
<button type="submit">Registrieren</button>
</form>
</div>
</body>
</html>
./ecom_shop/server.php
<?php
header('Content-Type: application/json');
require_once './Models/Produkt_models.php';
require_once './controller/medien_controller.php';
// Prüfen, ob Datei gesendet wurde
$uri = $_SERVER['REQUEST_URI'];
$paths = parse_url($uri);
$path = $paths['path'];
if ($path == '/ecom_shop/server.php/bilder') {
if ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
header('Content-Type: application/json');
$data = file_get_contents('php://input');
$ids = json_decode($data, true);
$controller = new Medien_controller();
$controller->loesche_medien($ids);
echo json_encode(["status" => "bilder gelöscht."]);
exit;
}
elseif ($_SERVER['REQUEST_METHOD'] === 'POST') {
$controller = new Medien_controller();
$return= $controller->medien_speichern();
echo $return;
exit;
}
}else if ($path == '/ecom_shop/server.php/produkte') {
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
if (isset($_GET['id'])) {
$id = $_GET['id'];
$produkt = new Produkt_ausDB($id);
echo json_encode($produkt);
file_put_contents('logtestxuri.txt',"gf".print_r($produkt,true));
exit;
}
}}
./ecom_shop/start.php
<?php
require_once 'Models/kategorie_model.php';
$kategorien = new Kategorien();
$allkat =$kategorien->getall_kat();
$allkat;
$startpage = file_get_contents('./layouts/start_layout.html');
$header = file_get_contents('./heaxder.html');
// $startarry=['{header}'=>$header,'{kategorien}'=>$allkat];
// $startpage = strtr($startpage,$startarry);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?=$header?>
<?=$startpage?>
</body>
</html>
./ecom_shop/style/backend.css
:root {
--bg: #f4f6f8;
--sidebar-bg: #2f3a47;
--sidebar-foreground: #e6eef6;
--accent-start: #ffd27a;
--accent-end: #f6a623;
--card-bg: #ffffff;
--muted: #eef2f5;
--text: #222;
--shadow: rgba(30, 30, 30, 0.06);
}
* {
outline: orangered;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial;
background: #f4f6f8;
color: #222;
font-size: 15px;
line-height: 1.4;
}
.wrapper {
display: flex;
flex-direction: row;
min-height: 100vh;
width: 100%;
}
/* left sidebar */
.left {
background-color: var(--sidebar-bg);
color: #fff;
width: 220px;
padding: 20px;
box-sizing: border-box;
flex: 0 0 220px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.left h2 {
margin-top: 0;
font-size: 18px;
}
.left > ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu > li {
margin: 10px 0;
cursor: pointer;
padding: 10px 8px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 10px;
color: var(--sidebar-foreground);
transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease,
box-shadow 0.18s ease;
position: relative; /* required for indicator */
padding-left: 14px; /* room for left accent */
font-weight: 500;
}
/* left accent indicator */
.menu > li::before {
content: "";
position: absolute;
left: 6px;
top: 8px;
bottom: 8px;
width: 4px;
background: transparent;
border-radius: 6px;
transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
opacity: 0;
transform: scaleY(0.8);
}
/* hover effect */
.menu > li:hover {
background-color: rgba(255, 255, 255, 0.04);
color: #fff;
transform: translateX(2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
/* active (ausgewählt) */
.menu > li.active {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.04),
rgba(255, 255, 255, 0.02)
);
color: #111;
font-weight: 700;
transform: translateX(2px);
box-shadow: 0 8px 20px rgba(246, 166, 35, 0.1);
}
/* active accent */
.menu > li.active::before {
background: linear-gradient(180deg, var(--accent-start), var(--accent-end));
opacity: 1;
transform: scaleY(1);
}
/* improve icon contrast for active */
.menu > li.active > * {
color: inherit;
}
/* right content area */
.right {
flex: 1 1 auto;
padding: 24px;
box-sizing: border-box;
overflow: auto;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
/* --- Replace abrupt show/hide with animated transitions --- */
/* container panels default hidden but preserved in layout for smooth animation */
.right > div {
display: block; /* keep block so transitions/height work */
opacity: 0;
transform: translateY(8px);
max-height: 0;
overflow: hidden;
padding: 0 12px; /* collapse padding when hidden */
background: transparent;
border-radius: 8px;
box-shadow: none;
margin-bottom: 12px;
transition: opacity 260ms cubic-bezier(0.2, 0.9, 0.3, 1),
transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1),
max-height 340ms cubic-bezier(0.2, 0.9, 0.3, 1), padding 260ms ease,
box-shadow 260ms ease;
}
/* active panel visible with card styling */
.right > div.active {
opacity: 1;
transform: none;
max-height: 2000px; /* large enough for content */
padding: 12px;
background: var(--card-bg);
box-shadow: 0 6px 18px var(--shadow);
margin-bottom: 18px;
}
/* fallback: if no JS adds .active, ensure first child is visible */
.right > div:first-child {
/* keep as active-like if no JS */
opacity: 1;
transform: none;
max-height: 2000px;
padding: 12px;
background: var(--card-bg);
box-shadow: 0 6px 18px var(--shadow);
}
/* table styling */
table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(20, 20, 20, 0.04);
}
table th,
table td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid #eef2f5;
font-size: 14px;
}
table th {
background: #f7fafc;
color: #333;
font-weight: 600;
text-transform: capitalize;
}
table tr:hover td {
background: rgba(246, 250, 255, 0.6);
}
/* images in tables */
table img {
display: block;
max-width: 64px;
height: auto;
border-radius: 4px;
}
/* Topbar / Suche / Avatar */
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.topbar .search input {
width: 360px;
max-width: 60%;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--muted);
background: #fff;
outline: none;
transition: box-shadow 0.15s, border-color 0.15s;
}
.topbar .search input:focus {
box-shadow: 0 6px 20px rgba(246, 166, 35, 0.08);
border-color: var(--accent-end);
}
.topbar .user {
display: flex;
align-items: center;
gap: 8px;
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(180deg, var(--accent-start), var(--accent-end));
display: flex;
align-items: center;
justify-content: center;
color: #111;
font-weight: 700;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
/* Panels */
.panel {
/* base hidden state handled by .right > div rules; add structure */
margin-bottom: 10px;
}
.panel-header {
padding-bottom: 8px;
border-bottom: 1px solid var(--muted);
margin-bottom: 12px;
}
.panel-header h1 {
margin: 0;
font-size: 20px;
letter-spacing: -0.2px;
}
.panel-header h2 {
margin: 0;
font-size: 16px;
color: #444;
}
/* Forms and buttons */
.settings-form .form-row {
margin-bottom: 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.settings-form label {
font-size: 13px;
color: #444;
}
.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="search"],
.settings-form input[type="file"] {
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--muted);
background: #fff;
width: 100%;
box-sizing: border-box;
}
.form-actions {
margin-top: 12px;
}
.btn {
display: inline-block;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid transparent;
background: #f0f0f0;
color: #111;
font-weight: 600;
cursor: pointer;
}
.btn.primary {
background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
color: #111;
box-shadow: 0 8px 20px rgba(246, 166, 35, 0.08);
border-color: rgba(0, 0, 0, 0.04);
}
/* Improve table responsiveness */
table {
font-size: 14px;
}
@media (max-width: 900px) {
.topbar .search input {
max-width: 100%;
width: 100%;
}
table {
font-size: 13px;
}
}
/* responsive tweaks */
@media (max-width: 800px) {
.wrapper {
flex-direction: column;
}
.left {
width: 100%;
height: auto;
position: relative;
}
.right {
padding: 12px;
}
table th,
table td {
padding: 8px;
font-size: 13px;
}
/* mobile: make menu horizontal nicer */
.left {
padding: 12px;
}
.menu > li {
padding: 8px;
border-radius: 6px;
}
}
.right > div {
opacity: 1;
transform: none;
max-height: 2000px; /* large enough for content */
padding: 12px;
background: var(--card-bg);
box-shadow: 0 6px 18px var(--shadow);
margin-bottom: 18px;
}
.Medien > div {
display: inline-block;
}
table {
overflow: scroll !important;
}
.right {
overflow: scroll !important;
}
./ecom_shop/style/baukasten_style.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100vh;
}
.steuerung {
width: 100%;
height: 50px;
border-bottom: 1px solid black;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
.second {
display: flex;
}
.right,
.left {
height: 100vh;
width: 20%;
border: 1px solid rgb(124, 121, 121);
display: flex;
}
.center {
width: 60%;
}
.steuerung > div {
display: flex;
align-items: center;
}
.steuerung > div > * {
margin: 0 5px;
}
.zurück {
border: 1px solid black;
font-size: 26px;
padding: 5px;
}
.zurück:hover {
background-color: blue;
color: white;
}
#seitenstatus {
background-color: lightblue;
border-radius: 10px;
padding: 5px;
}
.steuerung button {
border: none;
border-radius: 10px;
padding: 5px;
}
#aktuelle_seite {
background-color: transparent;
border: none;
appearance: none;
padding: 5px;
border-radius: 5px;
}
#aktuelle_seite:hover,
.ki:hover,
.hover:hover {
background-color: lightgray;
appearance: auto;
box-sizing: content-box;
padding: 5px;
border-radius: 5px;
}
.ki {
background-color: transparent;
border: none;
}
.settings {
width: 10%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.auswahl {
height: 100%;
border-left: 1px solid black;
}
.center {
background-color: lightgrey;
padding: 5px;
}
.vorschau {
width: 100%;
height: 100%;
background-color: white;
border-radius: 5px;
}
.box{
padding: 10px;
border: 1 px solid black;
}
.openable>div{
display: none;
}
.openable > span {
display: inline-block;
}
./ecom_shop/style/checkout_style.css
body {
font-family: Arial, sans-serif;
background: #fafafa;
padding: 30px;
}
.checkout-form {
background: #fff;
max-width: 700px;
margin: 0 auto;
padding: 25px 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h2,
h3 {
margin-top: 25px;
font-size: 18px;
color: #333;
}
.form-row {
margin-bottom: 15px;
}
.form-row label {
display: block;
font-size: 14px;
margin-bottom: 6px;
color: #333;
}
.form-row input,
.form-row select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}
.form-row.two-col,
.form-row.three-col {
display: flex;
gap: 10px;
}
.form-row.two-col input {
flex: 1;
}
.form-row.three-col input,
.form-row.three-col select {
flex: 1;
}
.form-row.checkbox {
display: flex;
align-items: center;
gap: 10px;
}
button {
background: #222;
color: #fff;
padding: 12px 25px;
border: none;
border-radius: 5px;
font-size: 15px;
cursor: pointer;
}
button:hover {
background: #444;
}
@media (max-width: 600px) {
.form-row.two-col,
.form-row.three-col {
flex-direction: column;
}
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: flex;
gap: 20px;
}
.waren {
width: 50%;
background-color: lightgray;
height: 100%;
}
./ecom_shop/style/login.css
body {
background: #f5f6fa;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.login-container {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-form {
background: #fff;
padding: 2rem 2.5rem;
border-radius: 8px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
min-width: 300px;
}
.login-form h2 {
margin-bottom: 1.5rem;
color: #333;
text-align: center;
}
.login-form label {
margin-bottom: 0.5rem;
color: #555;
font-size: 1rem;
}
.login-form input {
margin-bottom: 1.2rem;
padding: 0.7rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
.login-form button {
padding: 0.7rem;
background: #007bff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
}
.login-form button:hover {
background: #0056b3;
}
./ecom_shop/style/produkt_layout.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
padding: 40px 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 48px;
}
/* Hauptproduktbereich: Bild links, Buttons rechts */
.product-main {
display: flex;
align-items: center;
gap: 48px;
}
.product-image {
flex: 1;
max-width: 500px;
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
object-fit: cover;
height: auto;
}
.product-buttons {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.badge {
display: inline-block;
background-color: #e74c3c;
color: white;
font-size: 0.9rem;
padding: 8px 20px;
border-radius: 30px;
font-weight: 600;
margin-bottom: 24px;
}
h1 {
font-size: 2.6rem;
font-weight: 700;
margin-bottom: 16px;
color: #1a1a1a;
}
.subtitle {
font-size: 1.4rem;
color: #666;
margin-bottom: 28px;
font-weight: 400;
}
.price {
font-size: 2.4rem;
font-weight: 700;
color: #27ae60;
margin-bottom: 24px;
}
.btn {
display: block;
padding: 16px 32px;
border-radius: 50px;
font-size: 1.2rem;
font-weight: 600;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
border: none;
width: 100%;
}
.btn-add-to-cart {
background-color: #f39c12;
color: white;
}
.btn-add-to-cart:hover {
background-color: #d35400;
transform: translateY(-3px);
}
.btn-buy-now {
background-color: #3498db;
color: white;
font-size: 1.3rem;
padding: 18px 36px;
}
.btn-buy-now:hover {
background-color: #2980b9;
transform: translateY(-3px);
}
/* Produktbeschreibung unten */
.description {
margin-top: 32px;
padding: 32px;
background-color: white;
border-radius: 16px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
font-size: 1.1rem;
line-height: 1.8;
color: #444;
}
.description h2 {
font-size: 1.8rem;
color: #2c3e50;
margin-bottom: 20px;
}
.description p {
margin-bottom: 16px;
}
@media (max-width: 768px) {
.product-main {
flex-direction: column;
text-align: center;
}
.product-image {
max-width: 100%;
}
.product-buttons {
align-items: center;
}
h1 {
font-size: 2.2rem;
}
.subtitle {
font-size: 1.2rem;
}
.price {
font-size: 2rem;
}
.btn-buy-now {
font-size: 1.2rem;
}
}
./ecom_shop/style/produkt_layout_x2.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
width: calc(100% - 32px);
margin: 18px auto;
padding: 16px;
border-radius: 10px;
background: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
border: 1px solid #efefef;
}
.wrapper_firstc {
display: flex;
gap: 28px;
align-items: flex-start;
flex-wrap: nowrap;
}
.bilderholder {
display: flex;
flex-direction: column;
gap: 12px;
flex: 0 0 540px; /* Desktop basisbreite */
}
.hauptbild {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
display: block;
}
.bilderholder > div {
display: flex;
gap: 8px;
align-items: center;
overflow-x: auto;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.unterbilder {
width: 84px;
height: 84px;
border-radius: 6px;
object-fit: cover;
cursor: pointer;
flex: 0 0 auto;
transition: transform 0.18s, box-shadow 0.18s;
border: 2px solid transparent;
}
.unterbilder:focus,
.unterbilder:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
outline: none;
}
.unterbilder[aria-current="true"],
.unterbilder.active {
border-color: var(--accent-end, #f6a623);
transform: scale(1.03);
}
.info {
padding: 28px 12px;
flex: 1 1 360px;
min-width: 220px;
}
.buy {
display: flex;
gap: 14px;
align-items: center;
margin: 16px 0;
flex-wrap: wrap;
}
.quant {
display: inline-flex;
align-items: center;
border: 1px solid #d6d6d6;
border-radius: 8px;
overflow: hidden;
height: 48px;
}
.quant > button {
width: 44px;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
font-size: 20px;
cursor: pointer;
}
.quant input {
width: 68px;
height: 100%;
border: none;
text-align: center;
font-size: 16px;
padding: 0 6px;
}
#in-den-warenkorb {
min-width: 180px;
padding: 14px 18px;
border-radius: 10px;
border: none;
background: linear-gradient(90deg, #ffd27a, #f6a623);
font-weight: 700;
cursor: pointer;
box-shadow: 0 10px 30px rgba(246, 166, 35, 0.08);
}
#in-den-warenkorb,
.quant > button {
touch-action: manipulation;
}
.info h1 {
font-size: 22px;
margin-bottom: 8px;
}
.info p {
font-size: 16px;
color: #333;
margin-bottom: 6px;
}
.greenlight {
color: #18b929;
font-weight: 600;
}
@media (max-width: 900px) {
.wrapper_firstc {
flex-direction: column;
gap: 18px;
}
.bilderholder {
flex: none;
width: 100%;
}
.hauptbild {
aspect-ratio: auto;
height: auto;
max-height: 80vh;
}
.info {
padding: 16px 6px;
}
.buy {
flex-direction: column;
align-items: stretch;
}
#in-den-warenkorb {
width: 100%;
}
.quant {
margin-right: 0;
}
.unterbilder {
width: 64px;
height: 64px;
}
}
@media (max-width: 480px) {
.wrapper {
padding: 12px;
width: calc(100% - 24px);
}
.info h1 {
font-size: 18px;
}
.info p {
font-size: 15px;
}
.quant input {
width: 60px;
}
#in-den-warenkorb {
padding: 12px;
font-size: 16px;
}
}
./ecom_shop/style/produkte.css
body {
font-family: "Segoe UI", Arial, sans-serif;
background: linear-gradient(120deg, #f0f4f8 0%, #e2eafc 100%);
margin: 0;
padding: 0;
}
form {
background: #fff;
max-width: 980px;
margin: 48px auto;
padding: 36px 44px 28px 44px;
border-radius: 14px;
box-shadow: 0 6px 32px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 18px;
}
label {
font-weight: 600;
color: #22223b;
margin-bottom: 6px;
}
input[type="text"],
input[type="number"],
textarea,
select {
width: 100%;
padding: 10px 12px;
margin: 0 0 6px 0;
border: 1.5px solid #bfc9d1;
border-radius: 6px;
box-sizing: border-box;
font-size: 1rem;
background: #f8fafc;
transition: border 0.2s;
}
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
border: 1.5px solid #4f8cff;
outline: none;
}
input[type="submit"] {
background: linear-gradient(90deg, #4f8cff 0%, #38b6ff 100%);
color: #fff;
border: none;
padding: 12px 0;
border-radius: 6px;
cursor: pointer;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(79, 140, 255, 0.1);
margin-top: 10px;
transition: background 0.2s;
}
input[type="submit"]:hover {
background: linear-gradient(90deg, #2563eb 0%, #38b6ff 100%);
}
textarea {
resize: vertical;
min-height: 80px;
}
select {
margin-bottom: 10px;
}
form > div {
background: #f1f5fa;
border: 1px dashed #bfc9d1;
border-radius: 6px;
padding: 12px;
margin-bottom: 8px;
color: #4f8cff;
text-align: center;
font-size: 0.98rem;
}
#div1 {
width: 90%;
height: 200px;
margin: 0 auto 32px auto;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
padding: 18px 24px;
display: flex;
align-items: center;
}
#div1 > div {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 12px;
}
#div1 img {
margin-right: 12px;
border-radius: 6px;
height: 150px;
width: 100px;
object-fit: cover;
}
#div #imageinpt {
margin-top: 8px;
border: none;
background: #f8fafc;
padding: 8px;
border-radius: 6px;
width: 100%;
}
#imageinpt {
display: none;
}
#div1 > img {
width: 100px;
height: 70px;
}
.master {
border: 1px solid #cfd8df;
padding: 10px;
width: 900px;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
box-sizing: border-box;
}
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
padding: 8px;
border-bottom: 1px solid #e1e6ea;
background: linear-gradient(180deg, #fafafa, #f3f6f8);
}
.toolbar select,
.toolbar button,
.toolbar input[type="color"] {
height: 32px;
padding: 4px 8px;
border: 1px solid #d0d6dc;
background: white;
cursor: pointer;
border-radius: 4px;
}
.toolbar button {
display: inline-flex;
align-items: center;
gap: 6px;
}
.editor {
border: 1px solid #dbe3ea;
min-height: 320px;
padding: 12px;
box-sizing: border-box;
outline: none;
margin-top: 10px;
}
.statusbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
color: #666;
font-size: 13px;
}
.grow {
flex-grow: 1;
}
./ecom_shop/style/regestrierung.css
body {
background: #f5f6fa;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.register-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.register-form {
background: #fff;
padding: 2rem 2.5rem;
border-radius: 8px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
min-width: 300px;
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
.register-form h2 {
margin-bottom: 1.5rem;
color: #333;
text-align: center;
}
.register-form label {
margin-bottom: 0.5rem;
color: #555;
font-size: 1rem;
}
.register-form input {
margin-bottom: 1.2rem;
padding: 0.7rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
.register-form button {
padding: 0.7rem;
background: #28a745;
color: #fff;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background 0.2s;
}
.register-form button:hover {
background: #218838;
}
/* Mobil-Optimierung */
@media (max-width: 600px) {
.register-container {
align-items: flex-start;
padding-top: 2rem;
}
.register-form {
padding: 1rem;
min-width: unset;
max-width: 100vw;
border-radius: 0;
box-shadow: none;
}
.register-form h2 {
font-size: 1.3rem;
}
.register-form input {
font-size: 1rem;
padding: 0.6rem;
}
.register-form button {
font-size: 1rem;
padding: 0.6rem;
}
}
/* Desktop-Optimierung */
@media (min-width: 900px) {
.register-form {
max-width: 800px;
padding: 2.5rem 3rem;
font-size: 1.1rem;
}
.register-form h2 {
font-size: 2rem;
}
.register-form input {
font-size: 1.1rem;
padding: 0.8rem;
}
.register-form button {
font-size: 1.1rem;
padding: 0.8rem;
}
}
./ecom_shop/style/start_style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
./ecom_shop/style/zentral.css
header {
padding: 10px;
width: 80%;
margin: 0 auto;
background-color: rgb(255, 255, 255);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background: linear-gradient(90deg, #fff 80%, #f8eaea 100%);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
min-height: 80px;
}
.logo {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.logo img {
width: 140px;
height: auto;
display: block;
filter: drop-shadow(0 2px 8px rgba(168, 40, 40, 0.08));
}
.links {
flex: 1 1 auto;
display: flex;
justify-content: center;
}
.links ul {
display: flex;
gap: 48px;
list-style: none;
margin: 0;
padding: 0;
}
.links a {
text-decoration: none;
color: rgb(168, 40, 40);
font-weight: bold;
font-size: 18px;
transition: color 0.2s;
letter-spacing: 0.5px;
padding: 8px 18px;
border-radius: 24px;
position: relative;
}
.links a:hover,
.links a:focus {
color: #fff;
background: rgb(168, 40, 40);
box-shadow: 0 2px 8px rgba(168, 40, 40, 0.08);
outline: none;
}
.iconholder {
display: flex;
align-items: center;
gap: 22px;
position: relative;
}
.icon {
width: 24px;
height: 24px;
color: #333;
cursor: pointer;
transition: color 0.2s, transform 0.2s;
}
.icon:hover {
color: #007bff;
transform: scale(1.1);
}
.icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
border-radius: 50%;
transition: background 0.2s;
}
.icon-wrapper:hover {
background: rgba(0, 123, 255, 0.1);
}
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 38px;
height: 38px;
background: none;
border: none;
cursor: pointer;
padding: 0;
margin-left: 10px;
z-index: 20;
}
.hamburger span {
display: block;
width: 26px;
height: 3px;
margin: 4px 0;
background: #a82828;
border-radius: 2px;
transition: 0.3s;
}
.hamburger.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
}
.hamburger.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.nav-wrapper {
flex: 1 1 auto;
display: flex;
justify-content: center;
position: relative;
}
#main-nav {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
transition: all 0.3s;
}
#main-nav ul {
display: flex;
gap: 48px;
list-style: none;
margin: 0;
padding: 0;
}
.cartnumber {
display: none;
}
#main-nav a {
text-decoration: none;
color: rgb(168, 40, 40);
font-weight: bold;
font-size: 18px;
transition: color 0.2s;
letter-spacing: 0.5px;
padding: 8px 5px;
border-radius: 24px;
position: relative;
display: block;
}
#main-nav a:hover,
#main-nav a:focus {
color: #fff;
background: rgb(168, 40, 40);
box-shadow: 0 2px 8px rgba(168, 40, 40, 0.08);
outline: none;
}
/* Responsive Menü */
@media (max-width: 900px) {
.header-inner {
flex-direction: column;
gap: 10px;
align-items: stretch;
min-height: unset;
}
.nav-wrapper {
width: 100%;
position: relative;
}
#main-nav {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
position: absolute;
top: 60px;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
transform: translateY(-120%);
opacity: 0;
pointer-events: none;
z-index: 100;
border-radius: 0 0 12px 12px;
padding-bottom: 12px;
}
#main-nav.open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
padding: 0px;
}
#main-nav ul {
flex-direction: column;
gap: 0;
width: 100%;
padding: 0px;
}
#main-nav li {
width: 100%;
text-align: left;
}
#main-nav a {
display: block;
width: 100%;
padding: 16px 0px 16px 5px;
border-radius: 0;
font-size: 20px;
color: #a82828;
background: none;
border-bottom: 1px solid #f2f2f2;
}
#main-nav a:last-child {
border-bottom: none;
}
#main-nav a:hover {
background: #f8eaea;
color: #a82828;
}
.iconholder {
justify-content: flex-end;
}
.hamburger {
display: flex;
}
header {
width: 100%;
margin: 0;
padding: 5px;
}
}
/* Desktop: Hamburger ausblenden, Menü immer sichtbar */
@media (min-width: 901px) {
#main-nav {
position: static;
transform: none !important;
opacity: 1 !important;
pointer-events: auto !important;
background: none;
box-shadow: none;
width: auto;
flex-direction: row;
align-items: center;
justify-content: center;
padding-bottom: 0;
}
#main-nav ul {
flex-direction: row;
gap: 48px;
padding: 0;
}
.hamburger {
display: none !important;
}
}
.warenkorb {
position: absolute;
transform-origin: right;
transform: scaleX(0);
transition: transform 220ms ease;
will-change: transform;
overflow: hidden;
width: 350px;
height: 100%;
background-color: lightgray;
right: 0;
top: 0;
}
.big {
font-size: 30px;
padding: 10px;
}
.erste_rheie {
display: flex;
justify-content: space-between;
align-items: center;
}
.warenkorb_geschlossen {
transform-origin: right;
transform: scaleX(0);
transition: transform 220ms ease;
will-change: transform;
overflow: hidden;
}
.warenkorb_offen {
transform-origin: right;
transform: scaleX(1);
transition: transform 220ms ease;
will-change: transform;
overflow: hidden;
}
.warenkorb img {
width: 100px;
height: auto;
display: inline-block;
filter: drop-shadow(0 2px 8px rgba(168, 40, 40, 0.08));
}
.warenkorb div {
display: flex;
gap: 10px;
align-items: center;
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
./ecom_shop/views/backend_view.php
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>backend</title>
<link rel="stylesheet" href="./style/backend.css">
</head>
<body>
<div class="wrapper">
<div class="left">
<ul class="menu">
<li data-page="Startseite" class="active">🏠 Startseite</li>
<li data-page="Bestellungen">📦 Bestellungen</li>
<li data-page="Produkte">🏷️ Produkte</li>
<li data-page="Kunden">👤 Kunden</li>
<li data-page="Medien">📸 Medien</li>
<li data-page="Rabatte">🎟️ Rabatte</li>
<li data-page="Inhalt">📝 Inhalt</li>
<li data-page="Markets">🌍 Markets</li>
<li data-page="Finanzen">🏛️ Finanzen</li>
<li data-page="Statistiken">📊 Statistiken</li>
<br>
<li data-page="Vertriebskanäle"><strong>Vertriebskanäle</strong></li>
<li data-page="Onlineshop">🛒 Onlineshop</li>
<br>
<li data-page="Apps">Apps</li>
<li data-page="Einstellungen"> ⚙️ Einstellungen</li>
</ul>
</div>
<div class="right">
<div class="Startseite">
<h1>Startseite</h1>
<p>Willkommen im Backend-Bereich. Hier können Sie Bestellungen, Produkte, Kunden und vieles mehr
verwalten.</p>
<div>
<h2>Heutige Bestellungen</h2>
<?= $bestellungen_heute?>
</div>
<div>
<h2>Statistiken</h2>
<p>Übersicht über Verkäufe, Kunden und andere wichtige Kennzahlen.</p>
live shop besucher 120 <br>
umsatz heute 4500€
convertionrate 3.5%
rate in den warenkorb 5.2%
abbruchrate 1.2%
</div>
</div>
<div class="Bestellungen">
<?= $bestellungen_table?>
</div>
<div class="Produkte"><?=$produkte_table?></div>
<div class="Kunden">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde tenetur quis doloribus
aliquam quo modi pariatur necessitatibus dolor maiores obcaecati, hic asperiores similique quam porro,
officiis ratione voluptatibus libero reiciendis</div>
<div class="Medien">
<section class="steuerung">
<button id='medien_löschen' onclick="opendia()">Löschen</button>
</section>
<?php
foreach($allebilder as $bild){
$src = $bild['pfad'];
?>
<div>
<img src="<?=$src?>" alt="Medienbild" width="100" class="medienbild" />
<input type="checkbox" name="medienauswahl" value="<?=$bild['id']?>" />
</div>
<?php
}
?>
</div>
<div class="Rabatte">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde tenetur quis doloribus
aliquam quo modi pariatur necessitatibus dolor maiores obcaecati, hic asperiores similique quam porro,
officiis ratione voluptatibus libero reiciendis</div>
<div class="Inhalt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde tenetur quis doloribus
aliquam quo modi pariatur necessitatibus dolor maiores obcaecati, hic asperiores similique quam porro,
officiis ratione voluptatibus libero reiciendis</div>
<div class="Markets">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde tenetur quis doloribus
aliquam quo modi pariatur necessitatibus dolor maiores obcaecati, hic asperiores similique quam porro,
officiis ratione voluptatibus libero reiciendis</div>
<div class="Finanzen">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde tenetur quis doloribus
aliquam quo modi pariatur necessitatibus dolor maiores obcaecati, hic asperiores similique quam porro,
officiis ratione voluptatibus libero reiciendis</div>
<div class="Statistiken">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde tenetur quis
doloribus aliquam quo modi pariatur necessitatibus dolor maiores obcaecati, hic asperiores similique
quam porro, officiis ratione voluptatibus libero reiciendis</div>
<div class="Vertriebskanale">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde tenetur quis
doloribus aliquam quo modi pariatur necessitatibus dolor maiores obcaecati, hic asperiores similique
quam porro, officiis ratione voluptatibus libero reiciendis</div>
<div class="Apps">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde tenetur quis doloribus
aliquam quo modi pariatur necessitatibus dolor maiores obcaecati, hic asperiores similique quam porro,
officiis ratione voluptatibus libero reiciendis</div>
<div class="Einstellungen">
<div>
<h2>Einstellungen</h2>
<p>Passen Sie Ihre Backend-Einstellungen an, um das System nach Ihren Bedürfnissen zu konfigurieren.
<div><input type="text" name="shopname" placeholder="Shop Name">
</div>
<div>logo <input type="file" name="logo"></div>
<div><input type="text" name="währung" placeholder="währung"></div>
<div><input type="email" name="" id="" placeholder="email"></div>
<div><button>Einstellungen speichern</button></div>
</div>
</div>
<div class="Onlineshop">online</div>
</div>
</div>
<dialog id="dia">
sind sie sicher das sie die ausgewählten bilder löschen möchten?
<button id="bilder_löschen_ja" onclick="löschen_bilder()">ja</button>
<button id="bilder_löschen_nein" onclick="closedia()">nein</button>
</dialog>
<script src="./scripts/backend.js"></script>
</body>
</html>
./ecom_shop/views/baukasten_view.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shopbaukasten</title>
<link rel="stylesheet" href="../style/baukasten_style.css" />
</head>
<body>
<div class="wrapper">
<div class="steuerung">
<div>
<p class="zurück">←</p>
<p id="seitenstatus">entwurf</p>
</div>
<div>
<select name="aktuelle_seite" id="aktuelle_seite">
<option value="1">Startseite</option>
<option value="2">Produkte</option>
<option value="3">kategorie</option>
<option value="4">warenkorb</option>
<option value="5">checkout</option>
</select>
</div>
<div>
<p class="ki">KI</p>
<svg
class="desktop hover"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="3" width="20" height="14" rx="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
class="handy hover"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="7" y="2" width="10" height="20" rx="2"></rect>
<line x1="12" y1="18" x2="12" y2="18"></line>
</svg>
<div class="undoredo">
<svg
class="hover"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M3 7v6h6"></path>
<path d="M21 17a9 9 0 0 0-9-9H3"></path>
</svg>
<svg
class="hover"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 7v6h-6"></path>
<path d="M3 17a9 9 0 0 1 9-9h9"></path>
</svg>
<button class="hover">veröffentlichen</button>
<button class="hover">speichern</button>
</div>
</div>
</div>
<div class="second">
<div class="left">
<div class="settings">
<div>
<svg
class="hover"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="3"></circle>
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06c.46-.46.6-1.14.33-1.82a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09c.7 0 1.3-.39 1.51-1a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06c.46.46 1.14.6 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09c0 .7.39 1.3 1 1.51a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06c-.46.46-.6 1.14-.33 1.82h0c.22.61.82 1 1.51 1H21a2 2 0 1 1 0 4h-.09c-.7 0-1.3.39-1.51 1z"
></path>
</svg>
</div>
<div>
<svg
class="hover"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="3" y="3" width="18" height="6" rx="2"></rect>
<rect x="3" y="13" width="18" height="8" rx="2"></rect>
</svg>
</div>
</div>
<div class="auswahl">
<h4>aktuelle_seite</h4>
<div class="box">
<p>header</p>
<div class="openable"><span class="x">> </span>Ankündigunsleiste <div>test</div></div>
</div>
</div>
</div>
<div class="center">
<div class="vorschau"></div>
</div>
<div class="right"></div>
</div>
</div>
<script>
let openable = document.querySelector('.openable')
let span= openable.querySelector('span');
span.addEventListener('click', function(){
this.parentElement.querySelector('div').style.display='block';
this.style.transform='rotate(90deg)'
})
</script>
</body>
</html>
./ecom_shop/views/pr_himzufuegen_view.php
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>produkte hinzufügen</title>
<link rel="stylesheet" href="./style/produkte.css">
</head>
<body>
<form action="" method="post">
<input type="hidden" name="id" value="<?= $id ?? '' ?>">
<label for="name">Titel:</label>
<input type="text" id="name" name="name" value="<?=$name ??'' ?>" required><br><br>
<label for="description">Beschreibung:</label><br>
<!--
test -->
<!-- test -->
<textarea id="description" name="description" rows="4" cols="50"
required><?=$description ?? ''?></textarea><br><br>
<label for="price">Preis:</label>
<input type="number" id="price" name="price" step="0.01" value="<?=$price ?? '' ?>" required><br><br>
<div id="div1">
<input type="file" name="image" accept="image/*" id="imageinpt" onchange="uploadBild()">
<?= $bilderHtml ?? '' ?>
</div>
<div id="dropzone">
<label for="imageinpt">
<span> medien
<p>hier hin ziehen oder klicken</p>
</span>
</div>
</label>
<label for="kat">kategorie</label>
<select name="kat" id="kat">
<?=$options?>
</select>
<div>
<label for="inventar">inventar</label>
<input type="number" id="inventar" name="inventar" min="0" value="<?=$inventar?? ''?>">
</div>
<div>
<label for="versand">versand</label>
<input type="number" name="versand" min="0" value="<?=$versand ?? ''?>">
</div>
<input type="submit" value="Produkt hinzufügen" name="<?=$pressbtn ?? 'submit'?>">
<input type="hidden" id="bilder" name="bilder">
</form>
<script src="./scripts/produkte.js">
</script>
</body>
</html>
./ecom_shop/views/produkt_view.php
<?php
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?=$name?></title>
<link rel="stylesheet" href="/ecom_shop/style/produkt_layout_x2.css" />
</head>
<body>
<?=include './heaxder.html'?>
<div class="wrapper">
<div class="wrapper_firstc">
<div class="bilderholder">
<div>
<img class="hauptbild" src="<?="/ecom_shop".substr($hauptbild,1)?>" alt="<?=$name?>"
style="transition:opacity .18s ease;" />
</div>
<div><?php
$first = true;
foreach($allebilder as $bild){
$src = "/ecom_shop/".ltrim($bild['pfad'], "/");
?>
<img class="unterbilder" src="<?=$src?>" data-large="<?=$src?>" alt="<?=$name?>" tabindex="0"
<?= $first ? 'aria-current="true"' : 'aria-current="false"' ?> />
<?php
$first = false;
}
?>
</div>
</div>
<div class="info">
<h1><?=$name?></h1>
<p><?=$price?></p>
<small><?=$versand?></small>
<br />
<span class="greenlight">in 2- 3 tagen bei ihnen zuhasue</span>
<div class="buy">
<div class="quant">
<button class="minus">-</button>
<input type="number" name="quant" min="1" value="1" id="quant" />
<button class="plus">+</button>
</div>
<input type="hidden" name="id" value="<?=$id?>" id="id" />
<div><button id="in-den-warenkorb">in den Warenkorb</button></div>
</div>
<p>97 % zufrieden kunden</p>
<p></p>
</div>
</div>
<div class="description">
<p><?=$description?></p>
</div>
</div>
<script src="../scripts/produktesciptinphp.js"></script>
<script>
(function() {
const main = document.querySelector('.hauptbild');
const thumbs = Array.from(document.querySelectorAll('.unterbilder'));
if (!main || thumbs.length === 0) return;
function activate(thumb) {
thumbs.forEach(t => {
const isActive = t === thumb;
t.classList.toggle('active', isActive);
t.setAttribute('aria-current', isActive ? 'true' : 'false');
});
// sanfter Wechsel
main.style.opacity = 0;
setTimeout(() => {
main.src = thumb.dataset.large || thumb.src;
main.style.opacity = 1;
}, 140);
}
thumbs.forEach(t => {
// ensure keyboard focus
t.tabIndex = t.tabIndex || 0;
// click / tap
t.addEventListener('click', () => activate(t));
// keyboard activation
t.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
activate(t);
}
});
});
// initial aktivieren (erstes oder das mit aria-current)
const initial = thumbs.find(t => t.getAttribute('aria-current') === 'true') || thumbs[0];
if (initial) activate(initial);
})();
const minus = document.querySelector('.minus');
const plus = document.querySelector('.plus');
minus.addEventListener('click', () => {
let current = parseInt(quant.value) || 1;
if (current > 1) {
quant.value = current - 1;
}
});
plus.addEventListener('click', () => {
let current = parseInt(quant.value) || 1;
quant.value = current + 1;
});
</script>
</body>
</html>
