Skrypt galerii zdjęć z panelem administracyjnym (PHP, Bootstrap, MySQL)

Data aktualizacji: 22.04.2024r. Autor: Bartosz Stefanicki.

Posiadasz wiele fotografii, które chcesz komuś pokazać? Stworzymy skrypt galerii zdjęć, którą będziemy mogli zarządzać przez panel administracyjny.

Wcześniej omówiliśmy "Prosty skrypt galerii zdjęć z efektem Highslide" i drugą, bardziej rozbudowaną wersję "Prosty skrypt galerii zdjęć z efektem Highslide – wersja 2". Przyjrzyjmy się, co tym razem będzie obejmował skrypt galerii zdjęć. Jest to wersja 3.

Opis galerii

Skrypt galerii zdjęć - prezentacja zdjęć z opisami, umieszczonych w różnych kategoriach,
Panel administracyjny - zarządzanie zdjęciami (usuwanie, dodawanie zdjęć, dodawanie opisów do zdjęć, wybór kategorii dla zdjęć) i kategoriami (usuwanie, dodawanie),
Bootstrap - zastosowałem responsywność (galeria i panel są dostosowane do urządzeń mobilnych, smartfonów itp.) oraz kilka gotowych elementów CSS,
Panel administracyjny na sesjach (login: admin, hasło: admin),
Baza danych MySQL,

Struktura plików

/ - pliki skryptu galerii zdjęć, pliki panelu administracyjnego,
/img - zdjęcia z galerii,
/dist - pliki Bootstrapa,

1. Plik galerii zdjęć (galeria.php)

Poniżej pierwszy plik "galeria.php". Wyświetla on dostępne kategorie, następnie zdjęcia. Na początku pokażę, jak będzie wyglądał nagłówek:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Galeria zdjęć wykorzystująca PHP, HTML 5, CSS 3, Bootstrap">
    <meta name="author" content="itporady.pl">
    <title>GZ galeria zdjęć</title>

    <!-- Bootstrap core CSS -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Custom styles for this template -->
    <link href="style.css" rel="stylesheet">
</head>
<body>

<div class="container">
<!-- Static navbar -->

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
</button>

<a class="navbar-brand" href="kokpit.php">GZ galeria zdjęć</a>
</div>

<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
	<li><a href="kokpit.php">Kokpit</a></li>    
    <li><a href="galeria.php">Zobacz galerię</a></li>
    </ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>

Zdefiniowaliśmy tytuł strony, lokalizację plików JavaScript oraz menu. Teraz część pierwsza kodu PHP. Jeśli nie wybrano kategorii, to wyświetlana jest ich lista:

<?php
//jeśli nie wybrano kategorii, czyli krok 1/2 to...
$zmienna = 'zmienna';
$kategoria = $_GET['kategoria'];
if( !$kategoria ){
?>

<div class="page-header">
	<h1>Kategorie zdjęć</h1>
</div>

<div class="row">
<div class="col-md-12">

<table class="table">
<thead>
<tr>
	<th>ID</th>
	<th>Nazwa kategorii</th>
	<th>Opcje</th>
</tr>
</thead>
<tbody>
<?php
require( 'polaczenie.php' );

//definiuje zapytanie
$sql = mysql_query("SELECT * FROM kategorie;");

//wyświetla wynik
while( $tabela = mysql_fetch_array($sql) ){ 
	echo '<tr>';
	echo '<td>'.$tabela['id'].'</td><td>'.$tabela['nazwa'].'</td>'; 
	echo '<td><a href="galeria.php?kategoria='.$tabela['id'].'" type="button" class="btn btn-xs btn-primary">Przejdź do kategorii</a></td>';
	echo '</tr>';
}

mysql_close($connect);
?>
</tbody>
</table>

</div>
</div>

Jeśli użytkownik wybrał kategorię, to pokazujemy zdjęcia z wybranej kategorii:

<?php
//jeśli wybrano kategorię, czyli krok 2/2 to...
}else{

//pobieranie danych do połączenia
require( 'polaczenie.php' );

//definiuje zapytanie
$sql = mysql_query("SELECT nazwa FROM kategorie WHERE id = '$kategoria';");

//wyświetla wynik
while( $tabela = mysql_fetch_array($sql) ){ 
	echo '<div class="page-header"><h1>Zdjęcia w kategorii: "'.$tabela['nazwa'].'" </h1><a href="galeria.php" class="btn btn-xs btn-primary">Przejdź do innej kategorii</a></div><div class="row"><div class="col-md-12">';
}

//definiuje zapytanie
$sql = mysql_query("SELECT * FROM zdjecia WHERE id_kategorii = '$kategoria';");

//wyświetla wynik
while( $tabela = mysql_fetch_array($sql) ){ 
	echo '<div class="col-xs-6 col-md-3"><a href="img/'.$tabela['id'].'.jpg" class="thumbnail"><img src="img/'.$tabela['id'].'.jpg" alt="">&nbsp;'.$tabela['nazwa'].'</a></div>';
}

//zamknięcie połączenia
mysql_close($connect);
?>
</tbody>
</table>

</div>
</div>

<?php } ?>

</div> <!-- /container -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Na końcu jeszcze załączyliśmy bibliotekę jQuery. Przejdźmy do panelu administracyjnego.

2. Panel administracyjny (index.php, kokpit.php)

Na początku instrukcje dla bazy danych. Posłużymy się tylko bazą MySQL (PostgreSQL udostępniam jako opcję dodatkową do pobrania).

2.1. Instrukcje MySQL (instrukcje.txt)

Te polecenia utworzą nam w bazie danych odpowiednie tabele. Należy przejść na przykład do phpMyAdmin, tam wybrać opcję "Import" i wkleić poniższy kod.

CREATE TABLE kategorie (
    id int NOT NULL AUTO_INCREMENT,
    nazwa VARCHAR (20) not null,
    PRIMARY KEY (id)
);


CREATE TABLE zdjecia (
    id int NOT NULL AUTO_INCREMENT,
    id_kategorii int not null,
    PRIMARY KEY (id),
    FOREIGN KEY (id_kategorii)
    REFERENCES kategorie(id)
);

CREATE TABLE uzytkownicy (
    id int NOT NULL AUTO_INCREMENT,
    login VARCHAR (128) not null,
    haslo VARCHAR (128) not null,
    PRIMARY KEY (id)
);

INSERT INTO uzytkownicy (login, haslo) VALUES ('admin', '21232f297a57a5a743894a0e4a801fc3');

Tworzymy 3 tabele: kategorie, zdjęcia, użytkownicy. Umieszczamy w tabeli "użytkownicy" nowy rekord o ID 1, nazwa to admin, hasło to admin (zakodowane metodą md5).

2.2. Formularz do logowania (index.php)

Jeżeli będziemy chcieli się zalogować do panelu administracyjnego, to pierwszym krokiem będzie zalogowanie się. Także musimy zdefiniować formularz z polem "login" i "hasło", potem po wysłaniu danych, połączyć się z bazą danych i sprawdzić czy są dane tu i tu zgodne ze sobą.

<?php
//wlaczenie bufora wyjsciowego
ob_start();
//rozpoczyna sesje
session_start();
//pobiera dane do bazy danych
require 'polaczenie.php';
?>

<!-- ...Tutaj jest head, menu... -->

<div class="page-header">
	<h1>Panel logowania</h1>
</div>

Inicjujemy sesję i pobieramy dane do bazy danych z pliku polaczenie.php.

<div class="row">
<div class="col-md-12">
<?php
//funkcja do wylogowania
switch($_GET['p']){
	case 'wyloguj':
		session_destroy();
		$_SESSION = array ();
		echo '<div class="alert alert-success">Zostałeś wylogowany.</div>';
	break;
}

//SKRYPT LOGOWANIA
//dane z formularza
$login = htmlspecialchars(mysql_real_escape_string($_POST['login']));
$pass = mysql_real_escape_string($_POST['haslo']);

if( $_POST['send'] == 1 ){
	//sprawdza, czy wszystkie pola sa wypelnione
	if( !$login or empty($login) ){
		die ('<div class="alert alert-danger">Wypełnij pole z nazwą użytkownika. <a href="index.php" class="alert-link">Wróć do formularza</a>.</div>');
    }

    if( !$pass or empty($pass) ){
        die ('<div class="alert alert-danger">Wypełnij pole z hasłem. <a href="index.php" class="alert-link">Wróć do formularza</a>.</div>');
    }

	//koduje haslo
    $pass = md5($pass);
    
    //sprawdza, czy uzytkownik istnieje w bazie danych
    $userExists = mysql_fetch_array(mysql_query("SELECT COUNT(*) FROM uzytkownicy WHERE login = '$login' AND haslo = '$pass'"));

	//jesli uzytkownik nie istnieje, to...
    if ($userExists[0] == 0) {
        // Użytkownik nie istnieje w bazie
        echo '<div class="alert alert-danger">Podany użytkownik nie istnieje. <a href="index.php" class="alert-link">Wróć do formularza</a>.</div>';
    }

	//jesli uzytkownik istnieje, to...
    else {
    	//przypisz pobrane dane do sesji
    	$_SESSION['login'] = $login;
        $_SESSION['pass'] = $pass;
		//przekieruj uzytkownika do kokpitu
        header ('Location: kokpit.php');
    }
}

//wyswietla formularz do logowania
else {
?>

<form method="post" action="index.php" class="form-horizontal">
<div class="form-group">
	<label for="login" class="col-sm-2 control-label">Nazwa użytkownika</label>
    <div class="col-sm-4">
		<input type="text" class="form-control" name="login" id="login">
    </div>
</div>
<div class="form-group">
	<label for="haslo" class="col-sm-2 control-label">Hasło</label>
    <div class="col-sm-4">
		<input type="password" class="form-control" name="haslo" id="haslo">
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-4">
      <input type="submit" value="Zaloguj się" class="btn btn-default">
    </div>
  </div>
<input type="hidden" name="send" value="1" />
</form>

<?php
}
?>

</div>
</div>

</div> <!-- /container -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
</body>
</html><?php ob_end_flush(); ?>

Jeśli dane z formularza zgadzają się z danymi w bazie danych, to użytkownik zostaje zalogowany i przenosimy go do kokpitu administratora. Jeśli dane są błędne, to wyświetla się komunikat z błędem. Pora na plik z danymi do połączenia z bazą danych MySQL, polaczenie.php:

<?php
//definiuje połączenie, tutaj trzeba wpisać dane do połączenia
$connect = @mysql_connect('localhost', 'NAZWA_UZYTKOWNIKA', 'HASLO_UZYTKOWNIKA') or die('<div class="alert alert-danger" role="alert">Błąd przy połączeniu.</div>');

$baza = mysql_select_db("NAZWA_BAZY_DANYCH", $connect) or die('<div class="alert alert-danger" role="alert">Błąd przy wybraniu bazy danych.</div>');
?>

2.3. Dodaj kategorię (dodajkategorie.php)

<?php
//sprawdzenie, czy uzytkownik jest zalogowany
if (empty($_SESSION['login']) || empty($_SESSION['pass'])) {
	header('Location: index.php');
}
?><div class="page-header">
	<h1>Dodaj kategorię</h1>
</div>

<?php
//sprawdzenie, czy jest wysłany formularz
$nazwa = $_POST['nazwa'];
if( $nazwa ){

//definiuje zapytanie
$sql = mysql_query("INSERT INTO kategorie SET nazwa = '$nazwa';");

//wyświetlenie komunikatu o powodzeniu, lub niepowodzeniu
if( $sql ){
	echo '<div class="alert alert-success" role="alert">Kategoria "'.$nazwa.'" została pomyślnie dodana.</div>'; 
} else {
    echo '<div class="alert alert-danger" role="alert">Błąd przy dodawaniu kategorii "'.$nazwa.'".</div>';
}

//zamknięcie połączenia
mysql_close($connect);

}
?>

<div class="row">
<div class="col-md-5">

<form action="kokpit.php?p=dodajkategorie" method="post">
<div class="form-group">
	<label for="nazwa">Podaj nazwę nowej kategorii</label>
    <input type="text" id="nazwa" name="nazwa" class="form-control" required>
</div>

  <button type="submit" class="btn btn-primary">Dodaj kategorię</button>
</form>

</div>
</div>

2.4. Dodaj zdjęcie (dodajzdjecia.php)

Formularz z możliwością zaznaczenia kilku zdjęć i wysłania ich na serwer. Skrypt pobiera ostatnio przyznany identyfikator zdjęcia, zwiększa go o 1. Uzyskany ID to nowa nazwa zdjęcia na serwerze i identyfikator zdjęcia w bazie danych. Oprócz tego można wybrać kategorię z listy rozwijanej.

<?php
//sprawdzenie, czy uzytkownik jest zalogowany
if (empty($_SESSION['login']) || empty($_SESSION['pass'])) {
	header('Location: index.php');
}
?><div class="page-header">
	<h1>Dodaj zdjęcia</h1>
</div>


<?php 
//sprawdzenie, czy jest wysłany formularz
if( $_POST ){

//deklarowanie zmiennych
$kategoria = $_POST['kategoria'];

//DODANIE PLIKU DO BAZY DANYCH
//pobieranie danych do połączenia
require( 'polaczenie.php' );

//definiuje zapytanie - pobiera ostatni ID z tabeli zdjęcia
$sql = mysql_query("SELECT MAX(id) FROM zdjecia;");
while( $row = mysql_fetch_array($sql) ){
	//przypisuje ostatni ID zmiennej $najwiekszeID i powiększa o 1
	$najwiekszeID = $row[0]+1;
}
	
//WYSYŁANIE PLIKU NA SERWER
for( $i=0; $i<count($_FILES['plik']['size']); $i++ ){ 

if( strstr($_FILES['plik']['type'][$i], 'image')!==false ){ 

	//zmienia nazwę pliku, by zgadzały się z ID w bazie danych
	$file = 'img/'.$najwiekszeID.'.jpg'; 
	//wysyła plik na serwer
	move_uploaded_file($_FILES['plik']['tmp_name'][$i], $file); 

	//dodaje wpis do bazy danych
	$sql = mysql_query("INSERT INTO zdjecia SET id_kategorii = '$kategoria';");
	//wyświetlenie komunikatu o powodzeniu, lub niepowodzeniu
	if( $sql ){
		echo '<div class="alert alert-success" role="alert">Zdjęcia zostały zapisane w bazie danych.</div>'; 
	} else {
		echo '<div class="alert alert-danger" role="alert">Błąd przy zapisie zdjęć do bazy danych.</div>';
}

	//wyświetla komunikat o powodzeniu
	echo '<div class="alert alert-success" role="alert">Zdjęcia zostały zapisane na serwerze.</div>';
	//zwiększa ID dla kolejnych zdjęć w pętli
	$najwiekszeID++;
} 
}

//zamknięcie połączenia
mysql_close($connect);

}
?>

<div class="row">
<div class="col-md-5">

<form action="kokpit.php?p=dodajzdjecia" method="post" enctype="multipart/form-data">
<div class="form-group">
	<label for="kategoria">Wybierz kategorię</label>
    <select id="kategoria" name="kategoria" class="form-control">
<?php
//pobieranie danych do połączenia
require( 'polaczenie.php' );

//definiuje zapytanie
$sql = mysql_query("SELECT id, nazwa FROM kategorie;");

//wyświetla wynik
while( $tabela = mysql_fetch_array($sql) ){ 
	echo '<option value="'.$tabela['id'].'">'.$tabela['nazwa'].'</option>'; 
}

//zamknięcie połączenia
mysql_close($connect);
?>
	</select>
</div>

<div class="form-group">
	<label for="pliki">Wybierz zdjęcia</label>
    <input type="file" id="pliki" multiple="multiple" name="plik[]">
</div>

  <button type="submit" name="wyslij" class="btn btn-primary">Dodaj zdjęcia</button>
</form>

</div>
</div>

2.5. Edytowanie zdjęć (edytujzdjecia.php)

W tym miejscu będziemy mogli wybrać kategorię. Następnie z wybranej kategorii usunąć zdjęcie lub dodać do niego opis.

<?php
//sprawdzenie, czy uzytkownik jest zalogowany
if (empty($_SESSION['login']) || empty($_SESSION['pass'])) {
	header('Location: index.php');
}
?><div class="page-header">
	<h1>Dodaj zdjęcia</h1>
</div>


<?php 
//sprawdzenie, czy jest wysłany formularz
if( $_POST ){

//deklarowanie zmiennych
$kategoria = $_POST['kategoria'];

//DODANIE PLIKU DO BAZY DANYCH
//pobieranie danych do połączenia
require( 'polaczenie.php' );

//definiuje zapytanie - pobiera ostatni ID z tabeli zdjęcia
$sql = mysql_query("SELECT MAX(id) FROM zdjecia;");
while( $row = mysql_fetch_array($sql) ){
	//przypisuje ostatni ID zmiennej $najwiekszeID i powiększa o 1
	$najwiekszeID = $row[0]+1;
}
	
//WYSYŁANIE PLIKU NA SERWER
for( $i=0; $i<count($_FILES['plik']['size']); $i++ ){ 

if( strstr($_FILES['plik']['type'][$i], 'image')!==false ){ 

	//zmienia nazwę pliku, by zgadzały się z ID w bazie danych
	$file = 'img/'.$najwiekszeID.'.jpg'; 
	//wysyła plik na serwer
	move_uploaded_file($_FILES['plik']['tmp_name'][$i], $file); 

	//dodaje wpis do bazy danych
	$sql = mysql_query("INSERT INTO zdjecia SET id_kategorii = '$kategoria';");
	//wyświetlenie komunikatu o powodzeniu, lub niepowodzeniu
	if( $sql ){
		echo '<div class="alert alert-success" role="alert">Zdjęcia zostały zapisane w bazie danych.</div>'; 
	} else {
		echo '<div class="alert alert-danger" role="alert">Błąd przy zapisie zdjęć do bazy danych.</div>';
}

	//wyświetla komunikat o powodzeniu
	echo '<div class="alert alert-success" role="alert">Zdjęcia zostały zapisane na serwerze.</div>';
	//zwiększa ID dla kolejnych zdjęć w pętli
	$najwiekszeID++;
} 
}

//zamknięcie połączenia
mysql_close($connect);

}
?>


<div class="row">
<div class="col-md-5">

<form action="kokpit.php?p=dodajzdjecia" method="post" enctype="multipart/form-data">
<div class="form-group">
	<label for="kategoria">Wybierz kategorię</label>
    <select id="kategoria" name="kategoria" class="form-control">
<?php
//pobieranie danych do połączenia
require( 'polaczenie.php' );

//definiuje zapytanie
$sql = mysql_query("SELECT id, nazwa FROM kategorie;");

//wyświetla wynik
while( $tabela = mysql_fetch_array($sql) ){ 
	echo '<option value="'.$tabela['id'].'">'.$tabela['nazwa'].'</option>'; 
}

//zamknięcie połączenia
mysql_close($connect);
?>
	</select>
</div>

<div class="form-group">
	<label for="pliki">Wybierz zdjęcia</label>
    <input type="file" id="pliki" multiple="multiple" name="plik[]">
</div>

  <button type="submit" name="wyslij" class="btn btn-primary">Dodaj zdjęcia</button>
</form>

</div>
</div>

2.6. Usuń kategorię (usunkategorie.php)

Tutaj wyświetlą się nam wszystkie kategorie. W tabelce wyświetli się opcja usunięcia wybranej.

<?php
//sprawdzenie, czy uzytkownik jest zalogowany
if (empty($_SESSION['login']) || empty($_SESSION['pass'])) {
	header('Location: index.php');
}
?><div class="page-header">
	<h1>Usuń kategorię</h1>
</div>

<?php
//sprawdzenie, czy jest zmienna
$nazwa = $_GET['nazwa'];
if( $nazwa ){

require( 'polaczenie.php' );

//definiuje zapytanie
$sql = mysql_query("DELETE FROM kategorie WHERE id = '$nazwa';");

if( $sql ){
	echo '<div class="alert alert-success" role="alert">Kategoria "'.$nazwa.'" została pomyślnie usunięta.</div>'; 
} else {
    echo '<div class="alert alert-danger" role="alert">Błąd przy usuwaniu kategorii o identyfikatorze "'.$nazwa.'".</div>';
}

mysql_close($connect);

}
?>

<div class="row">
<div class="col-md-12">

<table class="table">
<thead>
<tr>
	<th>ID</th>
	<th>Nazwa kategorii</th>
	<th>Opcje</th>
</tr>
</thead>
<tbody>
<?php
require( 'polaczenie.php' );

//definiuje zapytanie
$sql = mysql_query("SELECT * FROM kategorie;");

//wyświetla wynik
while( $tabela = mysql_fetch_array($sql) ){ 
	echo '<tr>';
	echo '<td>'.$tabela['id'].'</td><td>'.$tabela['nazwa'].'</td>'; 
	echo '<td><a href="kokpit.php?p=usunkategorie&nazwa='.$tabela['id'].'" type="button" class="btn btn-xs btn-danger">Usuń kategorię</a></td>';
	echo '</tr>';
}

mysql_close($connect);
?>
</tbody>
</table>

</div>
</div>

2.7. Kokpit (kokpit.php)

Tutaj po prawidłowym zalogowaniu użytkownika wyświetla się komunikat powitalny, a także linki umożliwiające edycję zdjęć/kategorii.

<?php
	session_start();
	require_once('polaczenie.php');

//sprawdzenie, czy uzytkownik jest zalogowany
if (empty($_SESSION['login']) || empty($_SESSION['pass'])) {
	header('Location: index.php');
}
?><!-- ...Tutaj jest head, menu... -->

<?php
switch($_GET['p']){
	case 'dodajzdjecia':
		include('dodajzdjecia.php');
	break;
	case 'dodajkategorie':
		include('dodajkategorie.php');
	break;
	case 'edytujzdjecia':
		include('edytujzdjecia.php');
	break;
	case 'usunkategorie':
		include('usunkategorie.php');
	break;
	default:
		echo '<div class="jumbotron"><h1>Witaj!</h1><p>Znajdujesz się w panelu administratora. Możesz tutaj dodawać/usuwać zdjęcia i kategorie. Wybierz pozycję z menu w prawym górnym rogu.</p></div>'; 
}
?>

</div> <!-- /container -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

3. Bootstrap

Plików z Bootstrapa nie będę załączał. Jest to framework, zawiera gotowe rozwiązania odnośnie responsywności i elementów CSS.

4. Arkusz stylów CSS (style.css)

W arkuszu nie ma dużo kodu, zaledwie kilka linijek. Resztę stylów załatwia Bootstrap.

body {
  padding-top: 20px;
  padding-bottom: 20px;
}

.navbar {
  margin-bottom: 20px;
}

a.thumbnail img{
	height:200px;
}

Podsumowanie

Utworzyliśmy responsywną galerię zdjęć z podziałem na kategorie. Jest oparta na bazie danych MySQL. Zawiera panel administracyjny (tak zwany "Kokpit") umożliwiający dodawanie / usuwanie zdjęć i kategorii, a także na dodawanie / zmianę opisu zdjęć. Panel administracyjny jest oparty na sesjach.

Pobierz

Kategorie: PHP + MySQL. Tagi: #ajax, #formularze, #php, #skrypty, #porada, #galeria, #zdjęcia, #panel administracyjny. Źródło obrazków: Pixabay, Font awesome.

Zobacz także

Logowanie bez hasła w WordPressie – konfiguracja passkeys (WebAuthn)

Nowości w PHP 8.4

Jak zmienić kolor z postaci szesnastkowej HEX na dziesiętne składowe i odwrotnie?

Co to jest baza danych? Jakie bazy danych są na hostingu?

Szukasz hostingu?

Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie ranking hostingów (Styczeń 2026).

66 komentarzy

zby

21.06.2016, 11:43

Jak zrobić opis do zdjęcia? Dobrze by było wiedzieć.

Tomasz

17.05.2016, 23:25

Gratuluję przede wszystkim porady nr 100 :) No i po za tym bardzo dobry wpis, wyjaśniony krok po kroku, z komentarzami w kodzie- tak jak powinno się pisać :)

FotoGuzik

10.05.2016, 16:29

Jak zwykle konkretna, jasno przedstawiona porada. Przy okazji gratuluję 100 wpisów i 10 lat i życzę 1000 wpisów i 100 lat :)

kamil

08.01.2016, 16:15

No to teraz z innej beczki... Mam problem w kokpicie... klikam na "dodaj kategorię" a wywala mnie do panelu logowania... "dodaj zdjęcia" to samo.... Zachowuje się tak jakbym nie był zalogowany do kokpitu. Dodam, że nawigacja jest prawidłowo napisana. jakies pomysły???

Paweł

06.05.2016, 13:34

Witam, przyłączę się do tematu. Nie jestem tak w temacie by coś samemu napisać lub poprawić. Do bazy zaimportowałem po kolei każdą cześć z osobna ale mam błąd z częścią zdjęcia, nie mogę wykonać zapytania SQL. Mam błąd: #1005 - Can't create table 'wizart2.zdjecia' (errno: 150) http://46.149.222.22/~pszafarz/!tmp/errno150.jpg Ma może ktoś na to rozwiązanie. Próbowałem wszystkiego co jest tu opisane ale zawsze jest błąd.

Odpowiedz

Bartosz Stefanicki

07.05.2016, 01:05

Autor

Kamil, czy próbowałeś pobrać archiwum ze skryptem i wrzucić w takiej formie na serwer?

Odpowiedz

Bartosz Stefanicki

07.05.2016, 01:08

Autor

Paweł, ten błąd 150 oznacza że jest problem z foreign key. To był błąd z mojej strony, ponieważ przy tworzeniu tabeli "zdjecia" tworzyliśmy kolumnę z formatem danych varchar a powinien być int. Krótko mówiąc - musi być taki sam format w jednej i w drugiej tabeli. Poprawiony kod SQL jest w treści porady.

Odpowiedz

Wojtek

04.12.2015, 15:01

Siemka, mam pewien problem. Jak importuje plik .sql (instrukcje.txt zamienione na instrukcje.sql) Wyskakuje mi: #1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'CREATE TABLE zdjecia ( id int NOT NULL AUTO_INCREMENT, id_kategorii VARC' at line 8 Bardzo potrzebuje tego skryptu, a mało ogarniam php i bazy danych..

Bartosz Stefanicki

06.12.2015, 23:16

Autor

Jeśli instrukcje nie chcą naraz się wykonać, to możesz spróbować wykonać każdą osobno.

Odpowiedz

Miro

30.09.2015, 17:11

Fajny skrypt, choć brakuje mi sortowania zdjęć, czy da się coś takiego zrobić?

gienek

01.07.2015, 14:32

Czy łatwo jest połączyć tę galerię z efektem Highslide?? Pozdrawiam

Bartosz Stefanicki

31.07.2015, 00:46

Autor

Wystarczy dodać atrybut do linka zdjecia i załączyć skrypt Highslide :)

Odpowiedz

Rafał

28.06.2015, 21:24

Może ktoś wrzucić bazę danych, która działa?

Bartosz Stefanicki

31.07.2015, 00:46

Autor

Jest załączona :)

Odpowiedz

Michał

24.05.2015, 02:36

Rozwiązanie problemu jest bardzo proste: [code] CREATE TABLE kategorie ( id int NOT NULL AUTO_INCREMENT, nazwa VARCHAR (20) not null, PRIMARY KEY (id) ) CREATE TABLE zdjecia ( id int NOT NULL AUTO_INCREMENT, id_kategorii VARCHAR (20) not null, PRIMARY KEY (id), FOREIGN KEY (id_kategorii) REFERENCES kategorie(id) ) CREATE TABLE uzytkownicy ( id int NOT NULL AUTO_INCREMENT, login VARCHAR (128) not null, haslo VARCHAR (128) not null, PRIMARY KEY (id) ) INSERT INTO uzytkownicy (id, login, haslo) VALUES (1, 'admin', '21232f297a57a5a743894a0e4a801fc3'); [/code]

Mat

07.03.2015, 11:33

Dla opornych udostepniam skrypt bazy zdjec zeby go uruchomic nalezy wczesniej utworzyc baze zdjecia: use zdjecia; CREATE TABLE kategorie ( id int unsigned NOT NULL AUTO_INCREMENT, nazwa VARCHAR (20) not null, PRIMARY KEY (id) )type=innoDB; CREATE TABLE zdjecia ( id int NOT NULL AUTO_INCREMENT, id_kategorii int unsigned not null REFERENCES kategorie(id), PRIMARY KEY (id,id_kategorii), opis varchar(20) )type=innoDB; CREATE TABLE uzytkownicy ( id int NOT NULL AUTO_INCREMENT, login VARCHAR (128) not null, haslo VARCHAR (128) not null, PRIMARY KEY (id) ) type=InnoDB; w związku z dodaniem do tabeli zdjecia pola opis nalezy odpowiednio zmienic zapytanie Update opisu zdjecia w skrypcie edytujzdjecia.php Przy okazji pojawil sie temat stronicowania mozna samemu zrealizowac proste : $sql = mysql_query("SELECT * FROM zdjecia WHERE id_kategorii = '$kategoria';"); $display=25; //stronicownie-25 wierszy na stronie if($total=mysql_num_rows($sql)) { //przesunięcie pozycji na liście $start=(isset($_GET['start']) && ctype_digit($_GET['start'])&& $_GET['start']<=$total)? $_GET['start']:0; //przesunięcie wskaźnika do odpowiedniego rekordu początkowego mysql_data_seek($sql,$start); //wyświetlam wynik $count=0; while($count++ <25 && $row = mysql_fetch_array($sql) ){ echo ' <a href="img/'.$row['id'].'.jpg" rel="nofollow"> '.$row['nazwa']. '</a> '; } //generuje menu stronicownia echo''; if($start>0) { echo'<a href="galeria.php?kategoria='.$kategoria.$row['id'].'&start='.($start-$display).'" rel="nofollow"><Poprzednie</a>'; } if($total>$start + 25) { echo'<a href="galeria.php?kategoria='.$kategoria.'&start='.($start+$display).'" rel="nofollow">>Następne</a>'; } echo''; } else{ echo' Galeria nie zawiera obrazków'; } } Tutaj mala uwaga manual nie zaleca uzywania funkcji mysql_data_seek() więc nalezy rozwazyc kwestie uzycia np odpowiednika obiektowego.

Karol

05.03.2015, 20:36

Czy może ktoś udostępnić działającą bazę?

paweł

02.03.2015, 13:43

Czy można bazę w formacie sql

Mat

17.02.2015, 11:29

Racja żle się wyraziłem :) a problem faktycznie stary jak świat choć się z nim nie spotkalem, wystarczy prosta zmiana w php.ini.

Bartosz Stefanicki

22.02.2015, 01:56

Autor

Super ze sie udało :)

Odpowiedz

Krzysztof

17.02.2015, 11:04

Witam. Naprawdę fajny skrypt, choć przy tworzeniu bazy pojawiły się mi błędy: 1. Przy zakładaniu tabeli nie powinno być przecinka po: PRIMARY KEY (id) 2. Przy kluczu obcym: FOREIGN KEY (id_kategorii) REFERENCES kategorie(id) musi być taki sam Id w kategoriach jak id_kategorii to znaczy, że musimy ustawić np int(11), a obecnie jest inaczej. Więc z tabeli zdjęcia należy zmienić z VARCHAR (20) na int(11) i baza zadziała. Jak by było możliwe połączenie tej galerii z poprzednią, aby było możliwa nawigacja. Tak jak w galerii z efektem Highslide z sortowaniem i paginacją. A to by była już owa wisienka na torcie. Co do poprzedniego komentarza to u mnie śmiga bez problemu. Pozdrawiam Krzysiek

Dawid

18.02.2015, 16:43

moja baza tak wygląda CREATE TABLE kategorie ( id int NOT NULL AUTO_INCREMENT, nazwa VARCHAR (20) not null, PRIMARY KEY (id), ) CREATE TABLE zdjecia ( id int NOT NULL AUTO_INCREMENT, id_kategorii int (11) not null, PRIMARY KEY (id), FOREIGN KEY (id_kategorii), REFERENCES kategorie(id), ) CREATE TABLE uzytkownicy ( id int NOT NULL AUTO_INCREMENT, login VARCHAR (128) not null, haslo VARCHAR (128) not null, PRIMARY KEY (id), ) INSERT INTO 'user' ('id', 'login', 'haslo') VALUES (1, 'admin', '21232f297a57a5a743894a0e4a801fc3'); ale i tak pokazuje się błąd #1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') CREATE TABLE zdjecia ( id int NOT NULL AUTO_INCREMENT, id_kateg' at line 5 pierwszy raz mam problem z instalacją bazy najlepiej robić chyba instalator bazy w php sam tworzy bazę o odpowiedniej nazwie i sam robi odpowiednie tabele. a skrypt chyba fajny. CHYBA bo nie miałem możliwości sprawdzenia przez ten błąd.

Odpowiedz

Krzysiek

20.02.2015, 12:42

Dawid Nie jestem ekspertem, ale masz za dużo przecinków. 1. usuń ostatni przecinek w tabeli uzytkownicy oraz kategorie (tzn. PRIMARY KEY (id) 2. W tabeli zdjecia w kluczu obcym tez nie powinno być przecinka FOREIGN KEY (id_kategorii) REFERENCES kategorie(id) Sprawdź czy zadziała

Odpowiedz

Dawid

20.02.2015, 23:19

i nic lipa. przecinki usunięte a i tak wywala błąd. #1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'CREATE TABLE zdjecia ( id int NOT NULL AUTO_INCREMENT, id_kategorii int (11) n' at line 7 ładuję bazę taką CREATE TABLE kategorie ( id int NOT NULL AUTO_INCREMENT, nazwa VARCHAR (20) not null, PRIMARY KEY (id) ) CREATE TABLE zdjecia ( id int NOT NULL AUTO_INCREMENT, id_kategorii int (11) not null, PRIMARY KEY (id) FOREIGN KEY (id_kategorii) REFERENCES kategorie(id) ) CREATE TABLE uzytkownicy ( id int NOT NULL AUTO_INCREMENT, login VARCHAR (128) not null, haslo VARCHAR (128) not null, PRIMARY KEY (id), ) INSERT INTO 'user' ('id', 'login', 'haslo') VALUES (1, 'admin', '21232f297a57a5a743894a0e4a801fc3'); próbowałem też załadować taką ale też jest błąd z tym że robi tylko "takegorie" CREATE TABLE IF NOT EXISTS `kategorie` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `nazwa` varchar(20) NOT NULL DEFAULT '', PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ; CREATE TABLE IF NOT EXISTS `zdjecia` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `id_kategorii` int(11) NOT NULL DEFAULT '', PRIMARY KEY (`id`) FOREIGN KEY (`id_kategorii`) REFERENCES kategorie(`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ; CREATE TABLE IF NOT EXISTS `uzytkownicy` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `login` varchar(32) NOT NULL DEFAULT '', `haslo` varchar(64) NOT NULL DEFAULT '', PRIMARY KEY (`id`), ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ; INSERT INTO `uzytkownicy` (`id`, `login`, `haslo`) VALUES (1, 'admin', '21232f297a57a5a743894a0e4a801fc3'); a to błąd Błąd Zapytanie SQL: CREATE TABLE IF NOT EXISTS `zdjecia` ( `id` int( 10 ) unsigned NOT NULL AUTO_INCREMENT , `id_kategorii` int( 11 ) NOT NULL DEFAULT '', PRIMARY KEY ( `id` ) FOREIGN KEY ( `id_kategorii` ) REFERENCES kategorie( `id` ) ) ENGINE = MYISAM DEFAULT CHARSET = utf8 AUTO_INCREMENT =1; MySQL zwrócił komunikat: Dokumentacja #1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'FOREIGN KEY (`id_kategorii`) REFERENCES kategorie(`id`) ) ENGINE=MyISAM DEF' at line 5 zaznaczam że xampp jest ok inne bazy się ładują normalnie.

Odpowiedz

Bartosz Stefanicki

22.02.2015, 01:55

Autor

Można pomysleć nad kolejna wersja galerii. To juz zależy od zainteresowania :)

Odpowiedz

Sake

22.02.2015, 15:51

Baza nie działa ani jedna wersja ani druga. Dawid ma rację coś tu jest nie tak. Można poprosić o poprawną bazę? lub o dokładną instrukcję jak to można zainstalować?

Odpowiedz

Bartosz Stefanicki

24.02.2015, 23:34

Autor

Sake, Spróbowałeś dodać bazy po kolei - tj. najpierw pierwsza CREATE, potem kolejna CREATE itd. ?

Odpowiedz

Mat

16.02.2015, 21:57

Skrypty fajne tyle że pojawiają się błędy ktore niby nie wplywają na prace galerii choc np nie moge dodawac opisu zdjęcia ale skąd np bierze sie owy blad: Notice: Undefined index: nazwa in....( tutaj ściezka dostepu do skryptu galeria.php) on line 110.Pjawia sie przy wyswietlaniu galerii z zadanej kategorii przez to obrazki są porozrzucane schodkowo Ja nie mam pomysłu co moze być przyczyną choc podejrzewam konfiguracje.

Bartosz Stefanicki

16.02.2015, 22:08

Autor

To nie jest błąd, a notatka. U mnie działał skrypt. Notatka informuje o tym, że próbujemy uzyskać informacje, które nie istnieją.

Odpowiedz

Skrypt galerii zdjęć z panelem administracyjnym (PHP, Bootstrap, MySQL)

Opis galerii

Struktura plików

1. Plik galerii zdjęć (galeria.php)

2. Panel administracyjny (index.php, kokpit.php)

2.1. Instrukcje MySQL (instrukcje.txt)

2.2. Formularz do logowania (index.php)

2.3. Dodaj kategorię (dodajkategorie.php)

2.4. Dodaj zdjęcie (dodajzdjecia.php)

2.5. Edytowanie zdjęć (edytujzdjecia.php)

2.6. Usuń kategorię (usunkategorie.php)

2.7. Kokpit (kokpit.php)

3. Bootstrap

4. Arkusz stylów CSS (style.css)

Podsumowanie

Zobacz także

Szukasz hostingu?

66 komentarzy

Najpopularniejsze

Zapomniane hasło lub PIN w Androidzie - jak je zresetować?

Jak zainstalować VirtualBox Guest Additions

100+ skrótów klawiaturowych w Windows

Ostatnie komentarze

Najnowsze

Logowanie bez hasła w WordPressie – konfiguracja passkeys (WebAuthn)

Nowości w PHP 8.4

W jakim edytorze pisać strony internetowe?

Statystyki