OnePage Hafty

Napisano dnia 2017-02-23

Projekt na zlecenie. Z założenia miała być to strona do auto-prezentacji, na której klient może pokazywać swoje dzieła. Dlatego też głównym miejscem na stronie jest galeria zdjęć uzupełniona dodatkowo o krótką notkę biograficzną. Wszystko wykonane jako ‘OnePage’. Strona korzysta z ViewComposerów oraz została “zlokalizowana” w trzech językach.

Info

git clone https://github.com/ZielonyBuszmen/onePage-hafty.git
  • Github - github.com/ZielonyBuszmen/onePage-hafty
  • Działający projekt - hafty-kasi.cba.pl
  • Użyte technologie - Larevel 5.3, Bootstrap, Angular2
  • Kiedy - styczeń 2017
  • Przeznaczenie projektu - Projekt na zlecenie. Na stronie znajduje się galeria zdjęć, księga gości i kilka informacji. Wszystko wykonane jako ‘OnePage’, bez przeładowywania witryny. Strona korzysta z ViewComposerów oraz została ‘zlokalizowana’ w trzech językach

foto

Kilka spraw technicznych

Layout został podzielony na elementy, które dowolnie można usuwać lub zmieniać ich kolejność:

resources/views/default.blade.php

<!DOCTYPE html>
<html lang="pl">
 
<head>
    @include('includes.head')
</head>
 
<body>
 
    <!-- Navigation -->
    @include('includes.navigation')
 
    <!-- Header -->
    @include('includes.header')
 
    <!-- About -->
    @include('includes.about')
 
    <!-- Blueimp gallery LightBox ->
    @include('includes.gallery_blueimp')
 
    <!-- Guest Book -->
    @include('includes.guest_book')
 
    <!-- Footer -->
    @include('includes.footer')
 
    <!-- Bottom scripts -->
    @include('includes.bottom_scripts')
 
</body>
</html>

W kodzie zaimplementowałem możliwość zmiany języka serwisu. Jest to brzydki kod, bo napisany w roucie zamiast w kontrolerze (lub jakiejś innej stosownej do tego klasie).

routes/web.php

Route::get('/locale/{locale}', function ($locale, \Illuminate\Http\Request $request) {
    App::setLocale($locale);
    $request->session()->put('lang', $locale);
    return redirect("/");
})->where("locale", "(pl|en|es)");

Dodawanie nowych zdjęć:

  • Duże zdjęcia znajdują się w public/img/hafty. Na podstawie tego katalogu skrypt tworzy array’a z odnośnikami do zdjęć.
  • Miniaturki są przechowywane w folderze public/img/miniaturki. Miniaturka musi nazywać się tak samo jak duże zdjęcie. Powinna mieć wymiary 400px x 300px.
  • Ustawienia odnośnie lokalizacji folderu ze zdjęciami oraz cały skrypt który przeszukuje te foldery znajdziemy w pliku app/Repositories/PhotoRepository.php. Metoda getAll() zwraca gotowego array’a z linkami do zdjęć i miniaturek. Wynik tej funkcji jest zwracany do widoku resources/views/includes/gallery_blueimp.blade.php. Nie jest to robione standardowo przez kontroler lub router, tylko poprzez tzw. ViewComposer o nazwie PhotoComposer (lokalizacja app/Console/Http/ViewComposers/PhotoComposer.php). Te dane są zwracane z kolei do zmiennej $photos, którą możemy używać w widoku.
  • Repozytorium do ViewComposera jest wstrzykiwane dzięki mechanizmowi Dependency Injection

Sam ViewComposer prezentuje się następująco. Jak widzimy, repozytorium z fotografiami jest „wstrzykiwane” dzięki mechanizmowi Dependency Injection.

<?php 
namespace App\Http\ViewComposers; 
 
use App\Repositories\PhotoRepository; 
use Illuminate\View\View; 
 
class PhotoComposer 
{ 
    protected $photos; 
    public function __construct(PhotoRepository $photos) 
    { 
        $this->photos = $photos;
    }
 
    public function compose(View $view)
    {
        $view->with('photos', $this->photos->getAll());
    }
}

ViewComposer jest wykonywany dzięki ServiceProviderowi: linie 18-20

<?php
namespace App\Providers;
 
use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider;
 
class ComposerServiceProvider extends ServiceProvider
{
    /**
     * Register bindings in the container.
     *
     * @return void
     */
    public function boot()
    {
        // Using class based composers...
        View::composer(
            'includes.gallery_blueimp', 'App\Http\ViewComposers\PhotoComposer'
        );
 
    }
 
    /**
     * Register the service provider.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

Instalacja

Standardowo -> pobieramy projekt do folderu htdocs Xamppa, albo do www Wampa (lampa, itp). Następnie otwieramy terminal (konsolę) w folderze z projektem i wpisujemy composer install, a potem npm install. Tak, projekt wymaga zainstalowanego Composera oraz Node.js.

Być może będzie wymagane odblokowanie php_intl.dll w pliku php.ini w konfiguracji naszego serwera, ale to już jest spowodowane przez wymagania samego Laravela.

Następnie musimy przejść do pliku node_modules/elixir-typescript/index.js i zakomentować w nim linijkę: //.pipe($.concat(paths.output.name)).

Na koniec wpisujemy komendę gulp by skompilować assety (pliki TypeScript) Angulara 2.

comments powered by Disqus