Kategorien
Content Management Systeme Frameworks Shared Hosting Webdesign Webserver

October CMS – Back to Basics!

Alexey Bobkov und Samuel Georges haben vor etwa zwei Jahren die erste Version des Content Management Systems October veröffentlicht. October ist Open Source Software, in der Sprache PHP geschrieben und basiert auf dem Laravel Web Application Framework. Das Backend nutzt eine Datenbank (MySQL, SQLite oder PostgreSQL), die Frontend Strukturen sind dateibasiert. Ausserdem bieten sie einen Marktplatz für Zusatzfunktionen an.

Die Kernidee von October ist, den immer komplizierter werdenden Content Management Systemen etwas Einfacheres gegenüber zu stellen.

Back to the basics of Web Development

Auf der October Website finden sich dann auch motivierende Worte 🙂

Webentwicklung ist nicht schwer. Viele Menschen kennen die Grundbegriffe von HTML und Websites bestehen aus HTML Seiten, die in Dateien gespeichert werden. Das Erstellen von Websites ist keine „Raketentechnik“, sondern etwas für jederman!

Nun denn! Nach dieser Beschreibung war ich wirklich neugierig und installierte mir das October CMS zunächst lokal.

Installation

Abhängig von den persönlichen Bedürfnissen gibt es viele Wege das October CMS zu installieren (Setup -> Installation). Um, gemäss der oben beschriebenen Idee, alles einfach zu halten, probiere ich das System zunächst lokal auf meinem Computer (OS X, MAMP) aus.

Es gibt einen Installation Wizard (http://octobercms.com/download), den man herunterladen und in einem leeren Verzeichnis auspacken muss.

October CMS - Installation Wizard
October CMS – Installation Wizard

Ich kann den Webserver so konfigurieren, dass das Document Root auf dieses Verzeichnis zeigt. In MAMP geht das einfach über den Settings Dialog.

October CMS - Document Root
October CMS – Document Root

Wenn du October CMS nur ausprobieren möchtest, lässt es sich auch problemlos innerhalb eines Unterverzeichnisses installieren.

Ich erstelle mir noch eine Datenbank via phpMyAdmin mit dem Namen october.

October CMS - Datenbank
October CMS – Datenbank

Jetzt kann ich im Browser den entsprechenden URL aufrufen, in meinem Fall http://localhost/install.php.

October CMS - System Check
October CMS – System Check

Zunächst findet ein Systemcheck statt und ich muss den Lizenzbedingungen zustimmen (MIT-Lizenz). Im nächsten Schritt müssen die Datenbankparameter konfiguriert werden.

October CMS - Database
October CMS – Database

Für das Administratorkonto muss ein Name und ein Passwort hinterlegt werden.

October CMS - Administrationsdaten
October CMS – Administrationsdaten

Im Advanced Bereich kann unter anderem ein anderer URL für den Administrationsbereich festgelegt werden.

October CMS - Erweiterte Einstellungen
October CMS – Erweiterte Einstellungen

Damit sind die Basiseinstellungen beendet und October CMS bietet drei Möglichkeiten der Installation:

  1. Start from Scratch – Installiert October ohne Plugins und Themes, die beste Variante für „handgemachte“ Websites.
  2. Start from a Theme – Installiert October mit einem Beispieltheme das an individuelle Bedürfnisse angepasst werden kann.
  3. Use a project ID – Diese Variante muss benutzt werden, wenn du Themes und Plugins aus dem Marketplace installieren und automatisch updaten willst.
October CMS - Site setup
October CMS – Site setup

Da ich zunächst etwas Fertiges ausprobieren will, wähle ich die zweite Option und installiere das auf dem Bootstrap Framework basierende Squad Theme.

October CMS - Verfügbare Themes
October CMS – Verfügbare Themes

Die Installation ist damit beendet. October CMS weist darauf hin, dass aus Sicherheitsgründen die Installationsdateien gelöscht werden sollten (install.php und das install_files Verzeichnis).

October CMS - Erfolgreich installiert
October CMS – Erfolgreich installiert

Die Beispielseite im One-Page Stil ist beeindruckend (Online Demo)!

October CMS - Squad Theme
October CMS – Squad Theme

Im Backend sieht es sehr übersichtlich aus. Es ist aufgeteilt in das noch leere Dashboard, das CMS, einen Medienbereich und die Settings.

October CMS - Dashboard
October CMS – Dashboard

Den meines Erachtens besten Überblick über die Möglichkeiten von October CMS findest du in den Videos von Samuel George.
Das erste Video ist bereits zwei Jahre alt, aber immer noch eine gute Grundlage um die Zusammenhänge zu verstehen.

Introduction to October CMS from Samuel Georges on Vimeo.

Vor vier Monaten erschien dann Builder. Es ist ein graphisches Entwicklungstool zur Erstellung von Plugins.
Auch hier steht ein Video zur Verfügung.

Fazit

October CMS versucht den Spagat zwischen dem einfachen Bau von HTML Websites und der Entwicklung von Komponenten. Nach zwei Jahren ist es ein „rundes“ Projekt, dem man durchaus eine Chance geben kann.
Die Laravel Basis macht es interessant auch für größere Entwicklungen.

Links


tl;dr: Das Open Source Content Management System October ist einen Versuch wert.

Kategorien
Streaming Server

Open Source Musikstreaming mit Koel

Ihre Famile würde auch gern Musik aus Ihrer MP3 Sammlung hören?

  • Auf dem Laptop kein Platz?
  • Auf dem Telefon nur 16 GB?
  • Aber auf Ihrer externen Festplatte mehr als 40GB Musik im MP3 Format?

Genau dieses Problem hatte Phan An, fand keine Lösung und startete das Projekt Koel, einen Streaming Server auf der Basis des PHP Frameworks Laravel und einem Client, basierend auf vue.js, der in jedem Browser läuft.

Laden Sie die 40 GB Musik einfach auf Ihren Server, installieren Sie Koel, richten Sie Benutzerkonten ein und alle können Musik hören!

Vorausetzungen

Auf dem Server müssen Laravel 5.1, MySQL oder MariaDB, PHP ab Version 5.6, sowie Node.js ab 0.10.40 installiert sein. Der Client läuft in jedem Browser.

Installation

Legen Sie sich zunächst eine MySQL Datenbank an

mysql -u root -p
Enter password:
mysql> CREATE DATABASE koel DEFAULT CHARACTER SET utf8 DEFAULT COLLATE utf8_general_ci;
mysql> CREATE USER 'koel'@'localhost' IDENTIFIED BY 'koel-passwort';
mysql> GRANT ALL PRIVILEGES ON koel.* TO 'koel'@'localhost' WITH GRANT OPTION;
mysql> exit;

Welchseln Sie in das Home Verzeichnis Ihres Users, in meinem Fall novatrend.

cd /home/novatrend

Laden Sie den Koel Quellcode von GitHub.

sudo git clone https://github.com/phanan/koel.git

Wechseln Sie in das koel Verzeichnis.

cd koel

und rufen Sie den Node Paketmanager npm auf.

npm install

Danach rufen Sie den PHP Paketmanager composer auf.

composer install

Anschliessend müssen Sie noch in die Konfiguurationsdatei .env die Datenbank Parameter, sowie E-Mail, Name und Passwort für den Administrator Account eintragen.

nano .env

Danach müssen Sie die Datenbank einmalig initialisieren.

php artisan init

Den Laravel Development Server starten Sie mit

php artisan serve --host=music.serverblogger.ch --port=8080

wobei die Werte für Host und die Portnummer natürlich von Ihrer individuellen Konfiguration abhängen.

Wenn Sie im Browser Ihren URL aufrufen, sehen Sie die Login Maske von Koel und können sich mit Ihren Admin Daten einloggen.

Koel - Login
Koel – Login
Nun müssen Sie noch Ihre MP3 Sammlung in ein Verzeichnis laden. Ich habe ein Verzeichnis music innerhalb des koel Verzeichnisses, aber ausserhalb des public Verzeichnisses angelegt (/home/novatrend/koel/music).

In den Settings von Koel müssen Sie diesen Pfad eintragen und auf den Button Scan klicken.

Koel - Musikverzeichnis
Koel – Musikverzeichnis
Das war es!

Nun können Sie im Bereich User Ihre Familie mit Benutzeraccounts versorgen.

Koel - Benutzer
Koel – Benutzer

Sie können Playlists erstellen und Herzchen vergeben. Auf dem Telefon läuft das Programm stabil und gut bedienbar, hier ein Beispiel unter iOS mit dem Safari Browser.

Koel - In Safari unter iOS
Koel – In Safari unter iOS
Na und nun kann die Party losgehen 🙂

Links:


tl;dr: Nutzen Sie Koel um Ihre MP3 Dateien von Ihrem Server zu streamen und zu hören!

Kategorien
Allgemein Shared Hosting

Laravel Framework im Webhosting Paket nutzen

Laravel ist ein PHP-basiertes Free and Open Source Framework mit dem man Web-Applikationen entwickeln kann.
Der Slogan von Laravel ist

The PHP Framework for web artisans

Laravel gilt momentan als eines der populärsten PHP-Frameworks. Es versucht, Ideen aus Ruby on Rails und .NET in die PHP Welt zu bringen und macht damit den PHP Code sauberer und strukturierter. Interessante Features von Laravel in diesem Zusammenhang:

  • Laravel nutzt das Model, View, Controller Modell
  • Es nutzt die PHP Paketverwaltung Composer
  • Eloquent ORM ist eine PHP Implementierung des Active Record Entwurfsmusters. Es repräsentiert Datenbanktabellen als Klassen und erlaubt dadurch beispielweise Datenbankabfragen „einfach“ zu programmieren. Wenn am entsprechenden Objekt etwas geändert wird, wird es auch in der Datenbanktabelle geändert.
  • Blade ist eine sehr übersichtliche und leistungsfähige Template Engine.
  • Migrations ist ein Versionskontrollsystem für Datenbankstrukturen und erleichtert das Deployment.
  • Das Artisan Kommandozeilentool bietet viele Befehle, die den Umgang mit Laravel erleichtern, um beispielsweise Update und Migrationsprozesse zu managen. Unit Tests sind ein fester Bestandteil des Frameworks und können über Artisan ausgeführt werden.

Es gibt zahlreiche weitere Features, die Sie so nach und nach entdecken und nutzen können.
Und das Beste: Laravel lässt sich in einem „normalen“ Webhosting Paket von Novatrend per Installatron installieren.

Installation Laravel

Rufen Sie in der cPanel Verwaltung das Installatron auf und wählen Laravel aus.

ACHTUNG: Seit November 2017 benutzen wir anstelle des Installatrons das Tool Softaculous. Im Beitrag Automatisierte Installation mit Softaculous beschreibe ich die grundlegenden Vorgehensweisen.

cPanel - Installatron - Laravel Framework
cPanel – Installatron – Laravel Framework

Installieren Sie Laravel in einem eigenen Verzeichnis. Dieses Verzeichnis wird unterhalb des public_html Verzeichnisses angelegt und je nach Verwendungszweck können Sie Ihre Domain auf dieses Verzeichnis zeigen lassen.

cPanel - Installatron - Laravel Framework - Konfiguration
cPanel – Installatron – Laravel Framework – Konfiguration

Wenn Sie nun im Browser http://ihre-domain/ihr-verzeichnis aufrufen, so sehen Sie die Default Seite des Laravel Frameworks.

Laravel 5 - Startscreen
Laravel 5 – Startscreen

Loggen Sie sich nun mittels SSL auf der Konsole ein (siehe dazu auch Root-Server – ich bin drin) und wechseln Sie in das Unterverzeichnis /public_html/laravel. Lassen Sie sich die installierten Dateien mit dem Befehl ls -l anzeigen, um einen Überblick zu erhalten. Das Ansehen der Dateien können Sie auch per FTP machen. Mit einer SSL Verbindung können Sie allerdings auch Kommandos ausführen.

seafoll1@srv11 [~/public_html/laravel]# ls -l
total 204
drwxr-xr-x 11 seafoll1 seafoll1   4096 Oct 26 15:13 ./
drwxr-x--- 10 seafoll1 nobody     4096 Oct 26 16:55 ../
-rw-r--r--  1 seafoll1 seafoll1    351 Oct 26 15:13 .env
-rw-r--r--  1 seafoll1 seafoll1    307 Aug 30 13:31 .env.example
-rw-r--r--  1 seafoll1 seafoll1     61 Aug 30 13:31 .gitattributes
-rw-r--r--  1 seafoll1 seafoll1     57 Aug 30 13:31 .gitignore
-rw-r--r--  1 seafoll1 seafoll1     76 Oct 26 15:13 .htaccess
drwxr-xr-x 10 seafoll1 seafoll1   4096 Aug 30 13:31 app/
-rw-r--r--  1 seafoll1 seafoll1   1646 Aug 30 13:31 artisan
drwxr-xr-x  3 seafoll1 seafoll1   4096 Aug 30 13:31 bootstrap/
-rw-r--r--  1 seafoll1 seafoll1   1201 Aug 30 13:31 composer.json
-rw-r--r--  1 seafoll1 seafoll1 105047 Sep  2 10:08 composer.lock
drwxr-xr-x  2 seafoll1 seafoll1   4096 Aug 30 13:31 config/
drwxr-xr-x  5 seafoll1 seafoll1   4096 Aug 30 13:31 database/
-rw-r--r--  1 seafoll1 seafoll1    503 Aug 30 13:31 gulpfile.js
-rw-r--r--  1 seafoll1 seafoll1   1780 Oct 26 15:13 index.php
-rw-r--r--  1 seafoll1 seafoll1    159 Aug 30 13:31 package.json
-rw-r--r--  1 seafoll1 seafoll1     87 Aug 30 13:31 phpspec.yml
-rw-r--r--  1 seafoll1 seafoll1    899 Aug 30 13:31 phpunit.xml
drwxr-xr-x  2 seafoll1 seafoll1   4096 Aug 30 13:31 public/
-rw-r--r--  1 seafoll1 seafoll1   1928 Aug 30 13:31 readme.md
drwxr-xr-x  5 seafoll1 seafoll1   4096 Aug 30 13:31 resources/
-rw-r--r--  1 seafoll1 seafoll1    567 Aug 30 13:31 server.php
drwxr-xr-x  5 seafoll1 seafoll1   4096 Aug 30 13:31 storage/
drwxr-xr-x  2 seafoll1 seafoll1   4096 Aug 30 13:31 tests/
drwxr-xr-x 28 seafoll1 seafoll1   4096 Sep  2 10:08 vendor/

Laravel hat ein Command-line Interface namens Artisan. Es beschleunigt viele Arbeiten enorm. Rufen Sie es auf und schauen Sie die Befehle durch.

seafoll1@srv11 [~/public_html/laravel]# php artisan
Laravel Framework version 5.1.12 (LTS)
...
...
...

Erste Schritte

Ich zeige ein kleines Beispiel, um Ihnen den Einstieg in Laravel zu erleichtern.

Ich möchte gern aus dem Bootstrap CSS Framework ein Layout nutzen und Laravel soll den Inhalt dafür erzeugen. Das ist das Prinzip eines jeden Content Management Systems und kann beliebig um Formulare, Benutzerregistrierungen und viele andere Dinge erweitert werden. Das Beispiel ist ein kleiner Teil des Laravel Anfänger Tutorials von Dirk Helbert. In seinem Blog finden Sie weitere Beispiele.

Worum geht es?

In diesem Beispiel arbeiten wir mit der Blade Template Engine.

Aus dem Verzeichnis /public wird Ihre Webapplikation gestartet. Nach der Laravel Installation finden Sie dort unter anderem die index.php Datei, die als Einstieg für Ihre Webapplikation fungiert. In diesem Verzeichnis befinden sich auch alle öffentlichen Resourcen, wie Grafiken und CSS Dateien.

Die Datei, die die Informationen (HTML Code) für die Laravel Startseite enthält, liegt im Ordner /resources/views und heisst welcome.blade.php.

Wir wollen diese Datei verändern (mit den Daten aus dem Bootstrap Beispiel) und dann eine neue Datei namens app.blade.php erzeugen, die das Layout enthält. Nach den Änderungen sieht die Startseite dann etwa so aus:

Beispielseite basierend auf Bootstrap
Beispielseite basierend auf Bootstrap

Bootstrap Code

Laden Sie zunächst das Bootstrap Source Code Paket von der Downloadseite (http://getbootstrap.com/getting-started/#download)

Bootstrap - Download
Bootstrap – Download

Legen Sie im Laravel Verzeichnis public ein Unterverzeichnis bootstrap an und kopieren Sie dort den Inhalt aus dem Bootstrap Verzeichnis dist hinein. Die Verzeichnisstruktur sieht dann so aus:

public/bootstrap/css   //mehrere Dateien
public/bootstrap/fonts //mehrere Dateien
public/bootstrap/js    //mehrere Dateien

Legen Sie im Laravel Verzeichnis public ein weiteres Verzeichnis mit dem Namen css an. Kopieren Sie die Datei sticky-footer-navbar.css aus dem Bootstrap Verzeichnis docs/examples/sticky-footer-navbar in das Laravel Verzeichnis public/css und benennen Sie sie um in style.css.

public/css/style.css   //die umbenannte sticky-footer-navbar.css

Wechseln Sie nun in das Laravel Verzeichnis resources/views. Kopieren Sie die Datei index.html aus dem Bootstrap Verzeichnis docs/examples/sticky-footer-navbar in das Laravel Verzeichnis resources/views und benennen Sie sie um in app.blade.php.

resources/views/app.blade.php //die umbenannte index.html

Passen Sie die ../.. Pfade zu den Bootstrap-Dateien im HTML Code der app.blade.php auf Ihr Dateisystem an, fügen Sie den Verweis auf die Stylesheet Datei ein (und vergessen Sie auch die JavaScript Dateipfade am Ende der Datei nicht 🙂 )

<!-- Bootstrap core CSS -->
<link href="public/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="public/css/style.css" rel="stylesheet">
...
...
<script src="public/bootstrap/js/bootstrap.min.js"></script>

Nach dem Kommentar <!– Begin page content –> befindet sich ein div Tag mit der Klasse Container. Enfernen Sie den Inhalt zwischen dem öffnenden und schliessendem div Tag und fügen stattdessen den Befehl @yield(‚content‘) ein. Der Befehl fügt später den gewünschten Inhalt ein. Die Datei enthält nun das Layout, der eigentliche Inhalt kommt aus einer anderen Quelle hinzu.

...
<!-- Begin page content -->
<div class="container">
   @yield('content')
</div>
...

Die Quelle des Inhalts befindet sich in der Datei welcome.blade.php. Löschen Sie den bestehenden Inhalt und fügen Sie folgenden Code ein:

@extends('app')
@section('content')
<div class="page-header">
  <h1>Inhalt aus der <code>welcome.blade.php</code> Datei</h1>
</div>
<p class="lead">Beispieltext ...</p>
@endsection

Datei: welcome.blade.php

Der Code ist recht selbsterklärend und lässt ein wenig die Faszination von Laravel erahnen. Der Befehl @extends(‚app‘) erweitert die app.blade.php um den Text zwischen @section(‚content‘) und @endsection. Hier nochmal der genaue Verezichnispfad für diese Datei:

resources/views/welcome.blade.php

Wenn Sie nun die Startseite von Laravel im Browser aufrufen, sieht sie folgendmassen aus:

Beispielseite basierend auf Bootstrap
Beispielseite basierend auf Bootstrap

Genauso elegant wie in der Template Engine lassen sich nun andere Teile Ihrer Site aufbauen (Navigation, Benutzeranmeldung, Datenbankverbindungen, etc). Falls Sie bereits Erfahrungen mit PHP haben, sollten Sie sich Laravel unbedingt ansehen.

Links:


tl;dr: Wenn Sie bereits ein wenig Erfahrung mit PHP haben, werden Sie an Laravel viel Freude haben!