W tym poradniku dowiemy się jak zbudować portal, na którym użytkownicy będą mogli publikować swoje artykuły / wpisy. Poradnik jest bardzo prosty i przyjemny, ale należy dobrze zrozumieć jak działa kod, ponieważ na zaliczenie poradnika należy wykonać kilka drobnych zmian 🙂
Do rejestracji oraz logowania się użytkowników wykorzystamy kod z poradnika ITI #7 – Prosty system logowania. Jeżeli nie posiadasz kodu z poradnika ITI #7, możesz go pobrać z tego repozytorium na GitHubie.
Przygotowanie
Aby wykonać ten poradnik musisz mieć na komputerze pliki, które używane były w poprzednim poradniku.
Baza Danych
Artykuły będziemy przechowywać w bazie danych. Z poprzednich poradników wiesz już jak dodaje się tabele do bazy danych. Skopiuj poniższy kod SQL i wykonaj go w swojej bazie danych (np. w narzędziu PHP MyAdmin). Jeżeli masz już lokalnie w swojej bazie tabelę users z poradnika ITI #7, to skopiuj jedynie pierwszą część poniższego kodu odpowiedzialną za tworzenie tabeli posts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
CREATE TABLE `posts` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(45) COLLATE utf8_unicode_ci DEFAULT NULL, `content` varchar(255) CHARACTER SET utf8 DEFAULT NULL, `authorid` int(11) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `password` varchar(255) NOT NULL, `first_name` varchar(255) NOT NULL, `last_name` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `username` (`username`), UNIQUE KEY `email` (`email`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; |
W tabeli users przechowywane są dane o użytkownikach, a w tabeli posts dane o postach użytkowników. Zauważ, że w tabeli posts jedna z kolumn to authorid. To w niej przechowywany będzie identyfikator autora posta. Edytować i usuwać można będzie jedynie własne posty.
Struktura strony
Zanim przejdziemy do dodawania artykułów, dodamy odpowiedni pasek nawigacyjny na górze strony. Zastąp kod pliku index.php następującym:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<?php //Rozpoczynamy sessje session_start(); ?> <html> <head> <!-- BOOTSTRAP --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Własne style CSS --> <link rel="stylesheet" href="style.css" /> <title>Prosty system artykułów</title> </head> <body> <?php // Sprawdzamy czy użytkownik jest zalogowany $islogged = !empty($_SESSION['user']); // Sprawdzamy czy użytkownik nie wcisnął przyciska "Wyloguj", sprawdzamy czy istnieje parametr logout w url if (isset($_GET['logout'])) { // Jeśli tak to usuwamy użytkownika z sesji unset($_SESSION['user']); // Ładujemy na nowo plik index.php header('Location: index.php'); } // Wyświetlamy treść dostępną do zalogowanych użytkowników if (isset($_SESSION['user'])) { $user = $_SESSION['user']; } // Jeśli jest zalogowany wyświetlamy menu z przyciskiem dodaj nowy oraz wyloguj if ($islogged) { echo ' <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="index.php">Strona główna</a></li> <li><a href="form.php">Dodaj nowy wpis</a></li> <li><a href="index.php?logout=1">Wyloguj</a></li> </ul> </div> </div> </div> </nav>'; // Inaczej wyświetlamy przycisk zaloguj } else { echo ' <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="index.php">Strona główna</a></li> <li><a href="login.php">Zaloguj</a></li> </ul> </div> </div> </div> </nav>'; } ?> </body> </html> |
Dwie małe zmiany należy również wykonać w pliku logowania login.php. Zmiany są zaznaczone w poniższym listingu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<?php session_start(); ?> <html> <head> <!-- BOOTSTRAP --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Własne style CSS --> <link rel="stylesheet" href="style.css" /> <title>Strona logowania</title> </head> <body> <div id="login-form"> <h1>Zaloguj się</h1> <!-- Formularz logowania --> <form class="login-form" action="login.php" method="post"> <div class="form-group"> <label for="usernameInput">Login:</label> <input class="form-control" id="usernameInput" type="text" name="username" /><br /> </div> <div class="form-group"> <label for="passwordInput">Hasło:</label> <input class="form-control" type="password" name="password" /><br /> </div> <input type="submit" name="submit" class="btn btn-default" value="Login" /> </form> <p>Nie masz konta? <a href="register.php">Zarejstruj się</a> </p> <?php // Sprawdzamy czy formularz został wysłany if (isset($_POST['submit'])){ // Ładujemy plik z danymi dostępowymi do bazy danych require_once __DIR__ . "config.php"; // Tworzymy nowe połączenie z bazą danych $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); // Sprawdzamy czy nie ma jakiś problemów w połączeniu if ($mysqli->connect_error) { // Jeśli wystąpił jakiś problem to go wyświetlamy na ekrenie echo "<p>Wystąpił błąd podczas lączenia z bazą danych: {$mysqli->connect_error}</p>"; exit(); } // Pobieramy nazwe użytkownika i hasło do zmiennej $username = $_POST['username']; // hashujemy hasło, dla bespieczeństwa przechowywuje się go w bazie danych zakryptowane przez algorytm sha1 $password = sha1($_POST['password']); // Sprawdzamy czy w bazie istnieje użytkownik z loginem i hasłem takim jaki został podany w formularzu $sql = "SELECT id, username, first_name, last_name, email from users WHERE username LIKE '{$username}' AND password LIKE '{$password}' LIMIT 1"; $result = $mysqli->query($sql); // Jeżeli zapytanie zwróciło nam 0 rekordów, to znaczy że w bazie danych nie ma użytkownika o podanym loginie i haśle if ($result->num_rows === 0) { // Wyświetlamy wiadomośc na ekranie echo '<p class="red">Zły login/hasło!</p>'; } else { // A jeżeli zapytanie zwróciło nam użytkownika, to znaczy że podany login i hasło pasują do użytkownika w bazie danych // Zapisujemy id użytkownika do sesji co pozwoli nam potem sprawdzić czy użytkownik jest zalogowany $user = $result->fetch_array(); $_SESSION['user'] = $user; // i na koniec przekierowywujemy użytkownika z powrotem do pliku index.php header('Location: index.php'); } } ?> </div> </body> </html> |
Przeanalizuj dokładnie kod, żeby zobaczyć jakie zamiany zostały wprowadzone. Twój portal powinien działać na tym etapie w następujący sposób:
Formularz dodawania i edycji artykułu
Stwórz nowy plik o nazwie form.php. Będzie zawierał formularz dodawania oraz edycji artykułu. Wklej do niego następującą zawartość:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<?php //Rozpoczynamy sessje session_start(); ?> <html> <head> <!-- BOOTSTRAP --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Własne style CSS --> <link rel="stylesheet" href="style.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <title>Formularz</title> </head> <body> <?php // Sprawdzamy czy użytkownik jest zalogowany if (!empty($_SESSION['user'])) { // Sprawdzamy czy użytkownik nie wcisnął przyciska "Wyloguj", sprawdzamy czy istnieje parametr logout w url if (isset($_GET['logout'])) { // Jeśli tak to usuwamy użytkownika z sesji unset($_SESSION['user']); // Ładujemy na nowo plik index.php header('Location: index.php'); } // Ładujemy plik z danymi dostępowymi do bazy danych require_once __DIR__ . 'config.php'; // Tworzymy nowe połączenie z bazą danych $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); // Sprawdzamy czy nie ma jakiś problemów w połączeniu if ($mysqli->connect_error) { // Jeśli wystąpił jakiś problem to go wyświetlamy na ekrenie echo "<p class='red'>Wystąpił błąd podczas lączenia z bazą danych: {$mysqli->connect_error}</p>"; exit(); } $user = $_SESSION['user']; if (isset($_POST['submit'])) { // Pobieramy pobieramy dane z formularza do zmienych $title = $_POST['title']; $content = $_POST['content']; $authorid = $user['id']; // Dadajemy wpis do bazy $sql = "INSERT INTO `posts` (`id`, `title`, `content`, `authorid`) VALUES (NULL, '{$title}', '{$content}', '{$authorid}')"; if ($mysqli->query($sql)) { // Jeżeli nie było żadnych błedów przekierowywujemy użytkownika do strony głównej header('Location: index.php'); } else { // Jeśli coś poszło nie tak i wystąpiły jakieś błędy wyświetlamy je na ekranie echo "<p class='red'>Wystąpił błąd podczas dodawania wpisu: {$mysqli->error}</p>"; exit(); } } else { // Wyświetlamy menu i formularz, wypełniamy danymi jeśli edytujemy wpis echo ' <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="index.php">Strona główna</a></li> <li><a href="form.php">Dodaj nowy wpis</a></li> <li><a href="index.php?logout=1">Wyloguj</a></li> </ul> </div> </div> </div> </nav> <div class="container"> <div class="panel panel-default"> <div class="panel-body"> <form class="submit-form container" action="form.php" method="post"> <div class="form-group col-md-11"> <label for="title">Nagłówek:</label> <input class="form-control" id="title" type="text" name="title" /> </div> <div class="form-group col-md-11"> <label for="content">Tekst:</label> <textarea class="form-control" name="content"></textarea> </div> <div class="col-md-10"> <input type="submit" name="submit" class="btn btn-default" value="Zapisz" /> </div> </form> </div> </div> </div> '; } } else { // Jeżeli użytkownik nie jest zalogowany wysyłamy go do login.php require_once __DIR__. 'login.php'; } ?> </body> </html> |
Przeanalizuj kod i szczególną uwagę zwróć na podświetlone linijki. Formularz znajduje się w linijkach 78-90. Jak widzisz, parametr action ustawiony jest na plik form.php. Oznacza to, że formularz dodawania artykułu zostanie wysłany właśnie do tego pliku. Teraz spójrz na linijkę 42. Jeżeli wysłane zostały jakieś dane metodą POST o nazwie submit, to wykona się kod zamieszczony między linijkami 43 i 59. Właśnie tam artykuł wpisany zostaje do bazy danych, a po poprawnym dodaniu artykułu w linijce 53 użytkownik przenoszony jest do pliku index.php. Spróbuj dodać kilka artykułów i zobacz, czy poprawnie zapisują się do bazy danych.
Wyświetlanie artykułów
Po dodaniu artykułu chcemy oczywiście go wyświetlić na stronie głównej. Dodajmy więc pod paskiem nawigacyjnym listę artykułów wraz z przyciskami edycji oraz usuwania własnych artykułów.
Do pliku index.php dodaj podświetlony fragment:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
<?php //Rozpoczynamy sessje session_start(); ?> <html> <head> <!-- BOOTSTRAP --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Własne style CSS --> <link rel="stylesheet" href="style.css" /> <title>Strona logowania</title> </head> <body> <?php // Sprawdzamy czy użytkownik jest zalogowany $islogged = !empty($_SESSION['user']); // Sprawdzamy czy użytkownik nie wcisnął przyciska "Wyloguj", sprawdzamy czy istnieje parametr logout w url if (isset($_GET['logout'])) { // Jeśli tak to usuwamy użytkownika z sesji unset($_SESSION['user']); // Ładujemy na nowo plik index.php header('Location: index.php'); } // Wyświetlamy treść dostępną do zalogowanych użytkowników if (isset($_SESSION['user'])) { $user = $_SESSION['user']; } // Jeśli jest zalogowany wyświetlamy menu z przyciskiem dodaj nowy oraz wyloguj if ($islogged) { echo ' <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="index.php">Strona główna</a></li> <li><a href="form.php">Dodaj nowy wpis</a></li> <li><a href="index.php?logout=1">Wyloguj</a></li> </ul> </div> </div> </div> </nav>'; // Inaczej wyświetlamy przycisk zaloguj } else { echo ' <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="index.php">Strona główna</a></li> <li><a href="login.php">Zaloguj</a></li> </ul> </div> </div> </div> </nav>'; } // Ładujemy plik z danymi dostępowymi do bazy danych require_once __DIR__ . 'config.php'; // Tworzymy nowe połączenie z bazą danych $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); // Sprawdzamy czy nie ma jakiś problemów w połączeniu if ($mysqli->connect_error) { // Jeśli wystąpił jakiś problem to go wyświetlamy na ekrenie echo "<p class='red'>Wystąpił błąd podczas lączenia z bazą danych: {$mysqli->connect_error}</p>"; exit(); } // Zmienna decydująca o tym, czy użytkownik może edytować artykuł $can_edit = false; // Pobieramy wszystkie wpisy $result = $mysqli->query("SELECT id, title, content, authorid FROM posts"); $posts = $result->fetch_all(); foreach ($posts as $post) { $title = $post[1]; $content = $post[2]; $authorid = $post[3]; // jeżeli id zalogowanego użytkownika równa się id autora wpisu, to dajemy mu uprawnienia do edycji if (isset($user) && $authorid === $user['id']) { $can_edit = true; }; // Jeśli jest autorem dodajemy również przycisk do edycji i usunięcia if ($can_edit) { $buttons = ' <div class="pull-right"> <a href="form.php?id='.$post[0].'"> <button type="button" class="btn btn-primary"> <span class="btn-small btn-google">Edytuj<i class="fa fa-chevron-right"></i></span> </button> </a> <a href="deletepost.php?id='.$post[0].'" <button type="button" class="btn btn-danger"> <span class="btn-small btn-google">Usuń<i class="fa fa-chevron-right"></i></span> </button> </a> </div>'; } else { $buttons = ''; }; // Wyświetlamy wpis echo ' <div class="container"> <div class="panel panel-default"> <div class="panel-body"> <div class="col-md-12"> <h2>'.$title.'</h2> <i>przez użytkownika o id = '.$authorid.'</i> <hr> <p>'.$content.'</p> '.$buttons.' </div> </div> </div> </div> </div> '; $can_edit = false; } ?> </body> </html> |
Teraz na stronie głównej pojawiły się dodane wcześniej artykuły. Spróbuj zalogować się na inne konto i zobacz, że przyciski edycji i usuwania widoczne są jedynie przy Twoich artykułach. Ach właśnie… Zajmijmy się teraz edycją i usuwaniem artykułów.
Edycja artykułu
Przycisk edycji przenosi nas pod adres form.php?id=…. Naszym celem jest więc pobrać z bazy danych artykuł o id przekazanym w parametrze pasku adresu oraz wyświetlić go w formularzu, a przy zapisie uważać, żeby nie dodawać nowego artykułu, a jedynie edytować ten o przekazanym id. Wprowadź następujące zmiany w pliku form.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<?php //Rozpoczynamy sessje session_start(); ?> <html> <head> <!-- BOOTSTRAP --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Własne style CSS --> <link rel="stylesheet" href="style.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <title>Formularz</title> </head> <body> <?php // Sprawdzamy czy użytkownik jest zalogowany if (!empty($_SESSION['user'])) { // Sprawdzamy czy użytkownik nie wcisnął przyciska "Wyloguj", sprawdzamy czy istnieje parametr logout w url if (isset($_GET['logout'])) { // Jeśli tak to usuwamy użytkownika z sesji unset($_SESSION['user']); // Ładujemy na nowo plik index.php header('Location: index.php'); } // Ładujemy plik z danymi dostępowymi do bazy danych require_once __DIR__ . 'config.php'; // Tworzymy nowe połączenie z bazą danych $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); // Sprawdzamy czy nie ma jakiś problemów w połączeniu if ($mysqli->connect_error) { // Jeśli wystąpił jakiś problem to go wyświetlamy na ekrenie echo "<p class='red'>Wystąpił błąd podczas lączenia z bazą danych: {$mysqli->connect_error}</p>"; exit(); } $user = $_SESSION['user']; if (isset($_POST['submit'])) { // Pobieramy pobieramy dane z formularza do zmienych $postid = $_POST['postid']; $title = $_POST['title']; $content = $_POST['content']; $authorid = $user['id']; if (!empty($postid)) { // Jeżeli mamy podane id posta (edytujemy wpis) to napisujemy w bazie $sql = "UPDATE posts SET `title`='{$title}', `content`='{$content}' WHERE `id`='{$postid}';"; } else { // Dadajemy wpis do bazy $sql = "INSERT INTO `posts` (`id`, `title`, `content`, `authorid`) VALUES (NULL, '{$title}', '{$content}', '{$authorid}')"; } if ($mysqli->query($sql)) { // Jeżeli nie było żadnych błedów przekierowywujemy użytkownika do strony głównej header('Location: index.php'); } else { // Jeśli coś poszło nie tak i wystąpiły jakieś błędy wyświetlamy je na ekranie echo "<p class='red'>Wystąpił błąd podczas dodawania wpisu: {$mysqli->error}</p>"; exit(); } } else { // Jeśli mamy podane id (edycja) pobieramy dane wpisu if (isset($_GET['id'])) { $postid = $_GET['id']; $result = $mysqli->query("SELECT * FROM posts WHERE id='{$postid}' LIMIT 1"); $post = $result->fetch_array(); $title = $post['title']; $content = $post['content']; } else { $postid = $title = $content = ''; } // Wyświetlamy menu i formularz, wypełniamy danymi jeśli edytujemy wpis echo ' <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="index.php">Strona główna</a></li> <li><a href="form.php">Dodaj nowy wpis</a></li> <li><a href="index.php?logout=1">Wyloguj</a></li> </ul> </div> </div> </div> </nav> <div class="container"> <div class="panel panel-default"> <div class="panel-body"> <form class="submit-form container" action="form.php" method="post"> <input class="form-control" name="postid" type="hidden" value="'.$postid.'"/> <div class="form-group col-md-11"> <label for="title">Nagłówek:</label> <input class="form-control" id="title" type="text" name="title" value="'.$title.'"/> </div> <div class="form-group col-md-11"> <label for="content">Tekst:</label> <textarea class="form-control" name="content">'.$content.'</textarea> </div> <div class="col-md-10"> <input type="submit" name="submit" class="btn btn-default" value="Zapisz" /> </div> </form> </div> </div> </div> '; } } else { // Jeżeli użytkownik nie jest zalogowany wysyłamy go do login.php require_once __DIR__. 'login.php'; } ?> </body> </html> |
Usuwanie artykułów
Przycisk usuwający artykuł przenosi nas na podstronę /deletepost.php?id=…. Stwórzmy plik o nazwie deletepost.php który usuwać będzie artykuł o id przekazanym w pasku adresu:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?php //Rozpoczynamy sessje session_start(); // Sprawdzamy czy użytkownik jest zalogowany if (!empty($_SESSION['user'])) { // Ładujemy plik z danymi dostępowymi do bazy danych require_once __DIR__ . 'config.php'; // Tworzymy nowe połączenie z bazą danych $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); // Sprawdzamy czy nie ma jakiś problemów w połączeniu if ($mysqli->connect_error) { // Jeśli wystąpił jakiś problem to go wyświetlamy na ekrenie echo "<p class='red'>Wystąpił błąd podczas lączenia z bazą danych: {$mysqli->connect_error}</p>"; exit(); } $user = $_SESSION['user']; if (empty($user)) { // Jeżeli użytkownik nie jest zalogowany wysyłamy go do login.php require_once __DIR__ . 'login.php'; } elseif (isset($_GET['id'])) { $sql = "DELETE FROM posts WHERE `id`='{$_GET['id']}';"; // Usuwamy post z id podanym w url'u if ($mysqli->query($sql)) { // Jeżeli nie było żadnych błedów przekierowywujemy użytkownika do formularza logowania header('Location: index.php'); } else { // Jeśli coś poszło nie tak i wystąpiły jakieś błędy wyświetlamy je na ekranie echo "<p class='red'>Wystąpił błąd podczas dodawania wpisu: {$mysqli->error}</p>"; exit(); } } } |
Podsumowanie
W tych kilku krokach zrobiliśmy prosty portal, w którym użytkownicy mogą nie tylko dodawać swoje artykuły, ale również je edytować oraz usuwać.
Ten poradnik był bardzo prosty i w większości polegał na kopiowaniu i wklejaniu kodu. Ale o to w większości chodzi w programowaniu 🙂 Wpisujesz opis swojego zadania lub problemu w Wyszukiwarce internetowej i kopiujesz gotowe rozwiązanie. W ten sposób bardzo dużo się uczysz. Żeby jednak nie było tak prosto, na zaliczenie tego poradnika musisz sam dodać do niego kilka funkcjonalności:
- Wyświetlanie nazwy użytkownika, który dodał artykuł. Aktualnie wyświetla się jedynie jego id.
- Stworzyć możliwość podglądu pojedynczego artykułu. Stworzyć nowy plik i nazwać go na przykład showpost.php. W tym pliku po przekazaniu w pasku adresu id artykułu, wyświetlony zostanie tylko ten jeden artykuł.
- Dodać przycisk obok każdego artykułu, który przeniesie użytkownika na dodaną w punkcie drugim stronę z podglądem artykułu.
- Zabezpieczyć stronę przed usuwaniem i edycją nie swoich artykułów. Aktualnie wystarczy wpisać w pasku adresu deletepost.php?id=(DOWOLNE_ID). Należy dodać sprawdzenie, czy zalogowany użytkownik jest autorem wpisu.
- * Ten punkt jest opcjonalny za dodatkowe 5 diamentów. Dodać możliwość komentowania artykułów na podstronie podglądu artykułu. Aby to zrobić dodaj nową tabelę do bazy danych o nazwie comments, która zawierać będzie kolumnę postid. Pod każdym artykułem należy wyświetlić formularz dodawania komentarza oraz wszystkie komentarze, które mają postid taki jak wyświetlany artykuł.
Cały projekt należy spakować do pliku .zip oraz wysłać w formularzu poniżej. Aby dostać 10 diamentów należy wysłać projekt z rozwiązanymi czterema pierwszymi punktami. Za dodatkowe rozwiązanie piątego punktu otrzyma się łącznie 15 diamentów.
Form could not be loaded. Contact the site administrator.
5