PORADNIK Piszemy mini CMS - Kurs

Aby uruchomić stronę internetową można zastosować gotowe rozwiązania typu CMS, statyczne pliki html jak również swoje własne rozwiązanie.
Zaletą własnego rozwiązania jest to, że wiemy jak ono działa i co możemy po nim oczekiwać.
Postaram się w miarę wolnego czasu opisać jak stworzyć bardzo prosty system CMS używający bazy danych MySQL.
Zaznaczam, że postaram się opisać tu jak najprostsze rozwiązanie tak aby każdy mógł zrozumieć jak ono działa, oczywistym jest, że nie będzie to rozwiązanie idealne, ale nie o to tu chodzi.

Zacznijmy od tego co nam będzie potrzebne:
- Serwer z obsługą php/mysql (tu polecam serwery home.pl)
- Baza danych MySQL - do naszych celów wystarczy nawet malutka. Tworzymy ją w panelu serwera.
- Dostęp do phpMyAdmin
- dostęp do FTP

Tworzymy !!
Aby zacząć tworzyć własnego CMSa polecam utworzyć sobie na serwerze pusty katalog i pracować na nim.
Zacznijmy od pliku który będzie służył do łączenia się z naszą bazą danych.

Tworzymy plik: baza.php

Kod:

<?
$polacz=mysql_connect ("localhost","uzytkownik","haslo");
mysql_select_db("nazwabazy");
mysql_query("set names utf8;");
?>

na serwerach home.pl użytkownikiem bazy danych jest jej nazwa.
Funkcja mysql_connect służy do połączenia z bazą danych mysql
Funkcja mysql_select_db ustawia aktywną bazę danych
Funkcja mysql_query ustawia w tym przypadku kodowanie znaków przy pracy z bazą na UTF8.

Logujemy się do phpmyadmin klikamy na naszą bazę danych, a następnie klikamy SQL wklejamy kod:

Kod:

CREATE TABLE IF NOT EXISTS `admini` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `login` varchar(255) NOT NULL,
  `haslo` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;

INSERT INTO `admini` (`id`, `login`, `haslo`) VALUES
(1, 'admin', 'd033e22ae348aeb5660fc2140aec35850c4da997');

i klikamy Wykonaj.

Powyższy kod utworzy tabelę o nazwie admini mającą 3 kolumny: id, login i hasło, ustawi również kodowanie UTF dla tabeli i wstawi użytkownika o loginie admin i haśle admin (hasło jest kodowane w SHA1 o czym potem). Kolumny login i hasło to kolumny znakowe z ustawioną ilością znaków na 255, kolumna id to kolumna typu integer z włączonym auto numerowaniem.
AUTO_INCREMENT=2 oznacza, że kolejny wstawiony rekord będzie miał id o wartości 2.
PRIMARY KEY oznacza nadanie dla wybranej kolumny klucz głównego, wartość rekordów w tej kolumnie musi być unikalna. Czyli wartość id nie może się powtarzać.

Ciąg dalszy nastąpi...

 

W kolejnej części dodamy tabelę do bazy odpowiadające za artykuły.
Aby to zrobić wchodzimy do phpmyadmina, klikamy na naszą bazę, a następnie wybieramy SQL.
Wklejamy tam poniższy kod i klikamy Wykonaj.

Kod:

CREATE TABLE IF NOT EXISTS `artykuly` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `tytul`varchar(255) NOT NULL,
  `tytulmenu`varchar(255) NOT NULL,
  `tresc` longtext NOT NULL,
`krotkanazwa` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Powyższy kod utworzy nam tabelę o nazwie artykuly, kodowaną w UTF8, w której będziemy mieli 5 kolumn: id, tytul, tytulmenu, tresc, krotkanazwa, a kluczem głównym będzie id. Kolejny wstawiony rekord będzie miał id równe 1. id jest typu integer, krotkanazwa, tytul i tytulmenu jest typu znakowego z ograniczeniem do 255 znaków, tresc jest typu long text.
Dlaczego akurat long text, a nie samo text? Wiele osób wkleja zdjęcia do edytora, nie używając funkcji uploadowania zdjęć na serwer, a takowe mogą przekroczyć limit typu text.
Do czego będą nam potrzebne takie kolumny?
id - pozwoli na numerowanie wierszy, AUTO_INCREMENT spowoduje dodawanie kolejnych unikalnych numerów
tytul - będzie to tytuł artykułu
tytulmenu - pozwoli na wyświetlenie w menu innej nazwy artykułu niż sam tytuł (przydatne przy bardzo długich tytułach)
tresc - tu będzie znajdowała się treść artykułu
krotkanazwa - dzięki temu polu i potem dzięki .htaccess zrobimy sobie proste nazwy linków

 

Tworzymy w naszym katalogu roboczym podkatalog panel i wgrywamy do niego plik o treści:

Plik index.php

Kod:

<?
session_start();
if (isset($_POST['uzytkownik']) and isset($_POST['haselko']) ){
require('../baza.php');
$uzytkownik=mysql_real_escape_string(trim($_POST['uzytkownik']));
$haselko=mysql_real_escape_string(trim($_POST['haselko']));
if ($uzytkownik!="" and $haselko!=""){
$haselko = sha1($haselko);
$zapytaniesql="SELECT id FROM admini WHERE login='$uzytkownik' and haslo='$haselko'";
$temp=mysql_query($zapytaniesql) or die("ERROR");
$licz=mysql_num_rows($temp);
$temp=mysql_fetch_array($temp);
$id=$temp['id'];
if ($licz==1){
$_SESSION['user_id']=$id; $_SESSION['login']=$uzytkownik;
echo('<center>Zostales zalogowany. <br><a href=admin.php>Wejdz do PANELu</a></center>');}
else { echo ('<center>Podales zle dane.<br><a href=index.php>Zaloguj ponownie </a></center>');}
}}
else {?>
<html><body><center>
<form name="loguj" action="index.php" method="post">
Login: <input type="text" name="uzytkownik" id="uzytkownik"/><br>
Haslo: <input type="password" name="haselko" id="haselko"/><br>
<input type="submit" value="Zaloguj" />
</form>
</center></body></html>
<?}?>

Nie będę dokładnie opisywał tego pliku lecz z grubsza opiszę co robi (warto prześledzić go linia po linii i zobaczyć co dane polecenie robi)
Plik startuje sesję, następnie dołącza plik baza.php będący w katalogu wyżej.
Jeśli użytkownik się jeszcze nie zalogował wyświetla formularz logowania, jeśli się zalogował wyświetla odnośnik do wejścia do panelu, w przypadku kiedy dane logowania nie są poprawne wyświetla odpowiedni komunikat.
Logowanie opiera się na sesjach więc teraz każdy plik który będzie miał konieczność ochrony i który będzie dostępny jedynie po zalogowaniu będzie musiał mieć odpowiednią strukturę.
Jako, że w bazie hasło mamy kodowane w SHA1 to skrypt koduje wpisane w formularzu hasło do SHA1 i w zapytaniu do bazy używa do SELECTa już kodowanego hasła.

Pierwszy plik po zalogowaniu!
Plik admin.php

Kod:

<? session_start(); if (isset($_SESSION['user_id']) and isset($_SESSION['login'])){ ?>

<center><? include('menu.php'); ?></center>

<? } else { echo "Nie jestes zalogowany"; }?>

Ten plik składa się z 2 elementów:
pierwsza i ostatnia linia są to linie które zabezpieczają plik przed nieuprawnionym dostępem (muszą być w każdym pliku)
środkowa część to treść strony odpowiada za dołączenie pliku menu.php (menu warto dołączyć z oddzielnego pliku aby nie trzeba było dodawać jego kodu do każdego pliku, a dodatkowo łatwo wtedy zmienić menu wszędzie zmieniając tylko plik menu.php)

Tworzymy (jeśli nie posiadamy) w katalogu głównym domeny folder o nazwie tmp (jeśli tego nie zrobimy utworzy się sam w odpowiednim momencie)

Plik menu.php

Kod:

<? session_start(); if (isset($_SESSION['user_id']) and isset($_SESSION['login'])){ ?>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<a href="logout.php">Wyloguj</a><br>
<a href="dodajartykul.php">Dodaj artykuł</a><br>
<a href="edytujartykul.php">Edytuj/kasuj artykuł</a><br>

<? } else { echo "Nie jestes zalogowany"; }?>

Plik menu.php podobnie jak plik admin.php i jak każdy kolejny plik składa się z takich samych elementów czyli pierwszej i ostatniej linii odpowiadającej za autoryzację oraz środka z treścią strony.

Tutaj treść strony ustawi kodowanie polskich znaków na UTF-8 oraz wyświetli 3 linki, pierwszy jest do wylogowywania, drugi do dodawania nowego artykułu, trzeci do listy artykułów do edycji i kasowania.

Ostatnim plikiem w tej części będzie plik wylogowania

Plik logout.php

Kod:

<? session_start(); session_unset(); session_destroy(); ?>
Zostales Wylogowany <a href=index.php> Zaloguj Ponownie</a>

Powyższy plik zabije sesję przez co zostaniemy wylogowani.

 

Startujemy z dodawaniem artykułów.
Pobieramy plik http://download.moxiecode.com/tinymce/tinymce_4.2.5.zip
Rozpakowujemy go
Tworzymy w folderze panel podfolder edytor
Wgrywamy do niego rozpakowane pliki z tym, że wgrywamy tak aby były w nim plik tinymce.min oraz katalogi: langs, plugins, skins, themes

Tworzymy nowy plik do dodawania artykułów

Plik dodajartykul.php

Kod:

<? session_start(); if (isset($_SESSION['user_id']) and isset($_SESSION['login'])){ ?>

<script type="text/javascript" src="edytor/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
  selector: "textarea",
  theme: "modern",
    width: "800",
  height: "200",
  plugins: [
  "advlist autolink lists link image charmap print preview hr anchor pagebreak",
  "searchreplace wordcount visualblocks visualchars code fullscreen",
  "insertdatetime media nonbreaking save table contextmenu directionality",
  "emoticons template paste textcolor colorpicker textpattern imagetools"
  ],
  toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  toolbar2: "print preview media | forecolor backcolor emoticons",
  image_advtab: true,
});
</script>


<center><? include('menu.php'); ?></center><br>

   <form method="post" action="dodajzapisz.php">
  Tytuł: <input name="tytul" id="tytul"><br><br>
     Tytuł w menu: <input name="tytulmenu" id="tytulmenu"><br><br>
     Krótka nazwa: <input name="krotkanazwa" id="krotkanazwa"><br><br>
     Treść: <textarea name="tresc" id="tresc"></textarea>
     <input type="submit" value="zapisz">
  </form>

<? } else { echo "Nie jestes zalogowany"; }?>

Ten plik tak jak poprzednie pliki ma dodaną opcję braku dostępu dla niezalogowanych oraz środek dodający edytor Tinymce oraz prosty formularz do wpisywania artykułu. Tinymce w takiej postaci ma włączone wszystkie najpotrzebniejsze pluginy.

 

Skoro udało nam się już zrobić formularz dodawania artykułów, warto jeszcze zrobić plik dodający je do bazy.
Tworzymy kolejny plik

Plik dodajzapisz.php

Kod:

<?php session_start(); if (isset($_SESSION['user_id']) and isset($_SESSION['login'])) { ?>
<center><? include('menu.php'); ?></center><? include('../baza.php'); ?>
<center>
<?
$tytul=$_POST['tytul'];
$tytulmenu=$_POST['tytulmenu'];
$krotkanazwa=$_POST['krotkanazwa'];
$tresc=$_POST['tresc'];   
$zapytanie=mysql_query("INSERT INTO `artykuly` (`id`,`tytul`,`tytulmenu`,`tresc`,`krotkanazwa`) VALUES ('','$tytul','$tytulmenu','$tresc','$krotkanazwa')");
echo ('<br>Treść została dodana<br>');
} else { echo "Nie jestes zalogowany"; } ?>

Ten plik wstawi nam do bazy wszystko co wpiszemy do wcześniej utworzonego formularza. Pobiera on wartości zmiennych przez POST dzięki czemu nie ma problemów z długimi adresami.

 

Skoro już mamy dodawanie artykułów warto teraz zrobić pokazywanie ich listy, a następnie ich edycję.
Jak pokazać listę artykułów w panelu pokazuje poniższy plik.

Plik edytujartykul.php

Kod:

<? session_start(); if (isset($_SESSION['user_id']) and isset($_SESSION['login'])){ ?>

<center><? include('menu.php'); ?>
<? include('../baza.php');?>
<table width=900 border="0"><tr bgcolor=#b9de2e><td width="400"><b>ID - TYTUŁ</b></td><td><b>Edytuj</b></td><td><b>Kasuj</b></td></tr>
<?
 $edycja = mysql_query("SELECT * FROM artykuly ORDER BY id");
  while($pokaz = mysql_fetch_array($edycja)) {
   echo '<tr><td>'.$pokaz[id].' - '.$pokaz[tytul].' </td>';
   echo '<td width="40"><a href=edytujart.php?id='.$pokaz[id].'>Edytuj</a></td>';
   ?>
   <td width="40"><a OnClick="return confirm('Czy napewno chcesz usunąć?');" href=kasujart.php?id=<? echo $pokaz[id];?>>KASUJ</a></td>
   <? echo '</tr>';}?>
</table>
</center>

<? } else { echo "Nie jestes zalogowany"; }?>

Plik po za pierwszą i ostatnią linią która ma to samo znaczenie jak w innych plikach dołącza plik menu, dołącza plik dotyczący bazy danych, tworzy tabelę w której dzięki zastosowaniu prostego zapytania SELECT wyświetla listę artykułów. Dzięki użyciu przekazywania wartości zmiennych w adresie (po znaku ?) wskazujemy przy plikach do edycji artykułu edytujart.php oraz do kasowania artykułu kasujart.php zmienną id określająca numer artykułu do edycji/kasowania.

Dodatkowo dzięki zastosowaniu OnClick jesteśmy pytani czy na pewno chcemy skasować artykuł i dopiero po potwierdzeniu zostaje on skasowany.

 

Mając już listę artykułów należy teraz dodać samą edycję artykułu.

plik edytujart.php

Kod:

<? session_start(); if (isset($_SESSION['user_id']) and isset($_SESSION['login'])){ ?>

<script type="text/javascript" src="edytor/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
  selector: "textarea",
  theme: "modern",
    width: "800",
  height: "200",
  plugins: [
  "advlist autolink lists link image charmap print preview hr anchor pagebreak",
  "searchreplace wordcount visualblocks visualchars code fullscreen",
  "insertdatetime media nonbreaking save table contextmenu directionality",
  "emoticons template paste textcolor colorpicker textpattern imagetools"
  ],
  toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  toolbar2: "print preview media | forecolor backcolor emoticons",
  image_advtab: true,
});
</script>

<center><? include('menu.php'); include('../baza.php');?></center><br>
<?
 $edycja = mysql_query("SELECT * FROM artykuly WHERE id LIKE '$_GET[id]'");
 while($pokaz = mysql_fetch_array($edycja)) {
?>
   <form method="post" action="zapiszart.php">
   <input name="id" hidden readonly id="id" value="<? echo $pokaz[id];?>"><br>
  Tytuł: <input name="tytul" id="tytul" value="<? echo $pokaz[tytul];?>"><br><br>
     Tytuł w menu: <input name="tytulmenu" id="tytulmenu" value="<? echo $pokaz[tytulmenu];?>"><br><br>
     Krótka nazwa: <input name="krotkanazwa" id="krotkanazwa" value="<? echo $pokaz[krotkanazwa];?>"><br><br>
     Treść: <textarea name="tresc" id="tresc"><? echo $pokaz[tresc];?></textarea>
     <input type="submit" value="zapisz">
  </form>

   <? }} else { echo "Nie jestes zalogowany"; }?>

Plik ma dołączony edytor Tinymce, pobiera z bazy SELECTem rekord o danym id i wstawia dane do formularza.

Następnie potrzebny jest nam plik zapiszart.php który zaktualizuje dane w bazie po kliknięciu w edycji zapisz.

Plik zapiszart.php

Kod:

<? session_start(); if (isset($_SESSION['user_id']) and isset($_SESSION['login'])){ ?>
<center><? include('menu.php'); include('../baza.php')?></center>
<?
$tytul=$_POST[tytul];
$id=$_POST[id];
$tytulmenu=$_POST[tytulmenu];
$tresc=$_POST[tresc];
$krotkanazwa=$_POST[krotkanazwa];

$zapytanie=mysql_query("UPDATE `artykuly` SET `tytul`='$tytul',`tytulmenu`='$tytulmenu',`tresc`='$tresc',`krotkanazwa`='$krotkanazwa' WHERE `id`='$id'");
echo ('<br>Aktualizacja artykułu '.$tytul.' przebiegła pomyślnie');
?>

<? } else { echo "Nie jestes zalogowany"; }?>

Plik pobiera postem z formularza wartości i przypisuje je do zmiennych, następnie wykonuje zapytanie UPDATE aktualizujące pola w rekordzie o danym id.

 

Skoro mamy edycję artykułu należy zrobić również jego kasowanie.

Plik kasujart.php

Kod:

<? session_start(); if (isset($_SESSION['user_id']) and isset($_SESSION['login'])){ ?>
<center><? include('menu.php'); ?><? include('../baza.php'); ?></center>
<? $zapytanie=mysql_query("DELETE FROM artykuly WHERE id='$_GET[id]'"); echo ('Artykuł został skasowany'); ?>
<? } else { echo "Nie jestes zalogowany"; }?>

Plik zapytaniem DELETE FROM skasuje rekord o danym id (id zostanie pobrane przez GET dzięki zastosowaniu na liście dołączenia do adresu ?id=)

W tym momencie mamy już cały panel i możemy się do niego zalogować. (Jeśli dostaniemy błąd o nieistniejącym katalogu tmp należy odświeżyć stronę)

 

Pozostaje nam już tylko wyświetlić nasze artykuły i menu dla użytkowników, więc wychodzimy z podkatalogu panel i tworzymy 3 pliki.

Plik menu.php

Kod:

<? include('baza.php');?>
<? $edycja = mysql_query("SELECT * FROM artykuly");
while($pokaz = mysql_fetch_array($edycja)) {
echo '<a href='.$pokaz[krotkanazwa].'>'.$pokaz[tytulmenu].'</a><br>';}?>

Plik dołączy plik z ustawieniami bazy, wyda zapytanie które wyświetli listę tytułów (menu) artykułów i dodatkowo podlinkuje je napisem z pola krotkanazwa (musimy pamiętać aby pole krotkanazwa nie zawierało znakow specjalnych, spacji, polskich znaków)

Plik index.php

Kod:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<? include('baza.php');?>
<table><tr><td width="200" valign=top>
<? include('menu.php');?>
<td><td valign=top>
<?
$krotkanazwa=$_GET['krotkanazwa'];
if ($krotkanazwa=='') {
   $krotkanazwa='start';
}
else {}
$edycja = mysql_query("SELECT * FROM artykuly WHERE krotkanazwa='$krotkanazwa'");
while($pokaz = mysql_fetch_array($edycja)) {
echo '<b>'.$pokaz[tytul].'</b><br>';
echo $pokaz[tresc].'<br>';
};?>
</td></tr></table>

Plik ustawi kodowanie polskich znaków na UTF8, dołączy plik z ustawieniami bazy, oraz utworzy tabelę z dwiema kolumnami, do jednej dołączy plik menu.php, a w drugiej wyświetli treść strony.
Jako, że użyjemy przyjaznych nazw linków plik sprawdzi czy cokolwiek mamy wpisane po adresie strony i jeśli nie, aby wyświetlić stronę startową, wyświetli artykuł z Krótką nazwą start (więc taką nazwę musi mieć strona startowa).

Plik .htaccess

Kod:

RewriteEngine On
RewriteRule ^([-_0-9a-zA-Z]+)/$ index.php?krotkanazwa=$1
RewriteRule ^([-_0-9a-zA-Z]+)$ index.php?krotkanazwa=$1

Plik .htaccess włączy moduł rewrite, a następnie zgodnie z regułami ustali, że to co pojawi się po adresie strony ma być przyjęte jako zmienna krotkanazwa i przekazana do pliku index.php. Dzięki temu mamy przyjazne nazwy linków w naszym CMSie.

Teraz aby dostać się do naszego panelu administracyjnego wpisujemy http://naszadres/naszkatalog/panel/index.php


Oczywiście to jest bardzo prosty system i można go znacznie usprawnić i poprawić, lub zbudować na 100 różnych sposobów, jednak wydaje mi się, że dzięki tak prostej budowie każdy powinien być w stanie zbudować to sam, wiedząc jak działa.

Zapraszam do rozmowy na temat tego Kursu.

Jeśli komuś się to przyda i ma ochotę będę wdzięczny za link na stronie do http://www.faal.pl/

 

Fajna sprawa a jak z template do tego mini Cms?jest gdzies gotowa wersja do pobrania?jak z bezpieczenstwem tego cms

 

Jeśli chodzi o bezpieczeństwo to jest wg mnie dość spore, panel zabezpieczony na sesjach więc nie jest gorzej niż w popularnych cmsach. Nie powinien być podatny na ataki bo właściwie nic w nim nie ma
Templatki to całkowicie inna bajka i jeśli chodzi o wykonanie grafiki do tego co tu jest to można zastosować dowolny kod html do którego wstawimy tylko odpowiednie elementy z 2 plików (menu.php i index.php) Jednak nadal nie będzie to typowy system template'ów, aby go użyć należałoby wykorzystać jeden z gotowych systemów typu smarty, jednak to już nie jest prosta sprawa dla osoby początkującej. Może kiedyś się pokuszę o opisanie smartów odnoście stosowania ich w tak prostym projekcie jak ten jak i w projektach bardzo zaawansowanych, jednak nie liczyłbym aby było to szybko ze względu na czas
Nie ma tego nigdzie do pobrania, bo nie taki jest cel tego kursu, można bez problemu utworzyć sobie samemu pliki i wgrać na serwer - zadziała od ręki.

 

Fajny poradnik jednak mam problem .
chciałem dodac arta i panel/dodajartykul.php dostaje błąd No input file specified.
Tak jak by nie ładowało edytora ? Sprawdzałem już wszystko , skopiowałem nawet całe twoje skrypty i nada nie działa

 

nie może nie działać
czy dostajesz jakąś linię z błędem? czy biały ekran z takim napisem?

 

Biały ekran z takim napisem .Dodałem dla testu edytor do pliku index w głównym katalogu i działa . Wdaje mi sie też ze w poradniku brakuje kodu i pliku listaartykul.php

 

patrz faktycznie ale ten plik to: edytujartykul.php

 

edytujartykul.php jest jednak w menu.php jest kod
<a href="listaartykul.php">Edytuj/kasuj artykuł</a><br>
i zastanawiam sie czy nie brakuje pliku listaartykul.php
Nie pisze perfekcyjnie w php wiec moge sie mylic . Tak czy inaczej poddałem sie i skopiowałem całe twoje pliki i logowanie do panelu admina działa reszta niestety nie .
Jak dla mnie - początki programowania - taki mini cms fajnie wyglada i mozna sie uczyc

 

poprawiłem menu.php

 

ok , edycja artykułów teoretycznie działa ale przy opcji dodaj artykuł nadal mam białą strone z informacja "No input file specified."

EDIT*
A niech to w koncu problem rozwiazany ; ) Moj błąd w nazwie plikow . Zamiast dodajartYkul.php miałem dodajarUkul.php przez ta literowke brakowalo pliku .
Dzięki za poradnik mini cms
Działa jak należy

EDIT**
przy dodaniu newsa dostaje info ze artykuł został zapisany jednak na stronie nic sie nie pokazuje , sprawdzilem przez phpmyadmina i w bazie tez pusto

 

czy oby w bazie masz identycznie kolumny zrobione jak w pliku dodajzapisz.php?