system rezerwacji-tworzenie sali kinowej

Cześć,

chcę zrobić system rezerwacji miejsc w kinie. Wszyscy mi polecają, stworzenie takiego projektu za pomocą CMS i jakiejś wtyczki, ale wolałabym to zrobić od podstaw (chyba, że CMS faktycznie jest leszy do tego?)

Back-end na razie zostawię, bo to czarna magia dla mnie. Frond-end też mi na razie nie wychodzi, ale każdy jakoś zaczynał.
Przechodząc do sedna..

Zastanawiam się, jak stworzyć sale składającą się z miejsc w kilku rzędach. siedzenie ma załóżmy kolor szary, po wybraniu miejsc (kliknięciu na siedzenie) zmienia się na czerwony, a po zaakceptowaniu wyboru na niebieski. To co mi przychodzi do głowy, to:

• stworzenie tabeli w której komórki odpowiadają siedzeniom

• stworzenie kontenera, z dużą ilością divow każdy div to jedno siedzenie
  (Tylko tutaj nie wiem, jak zmieniać te kolory: hover byłby przydatny?

• ktoś mi polecił coś takiego jak svg, ale nie wiem czy jest sens skoro siedzenia będą miały kształt kwadratów i łatwo to zrobić w css

• wiem, że można to jeszcze jakoś zrobić za pomocą js, że jest coś takiego jak onClick() zastąpione teraz metodą addEventListener()

• no i jeszcze do js jest ten framework jquery, ale to chyba zbyt zaawansowane dla mnie i nie do opanowania w krótkim czasie.

• W najgorszym wypadku sala będzie w jpg a miejsca i rzędy będzie się wybierało z rozwijanej listy, ale jednak chciałabym się przy robieniu tego projektu (zaliczenie na zajęcia) czegoś nauczyć, a nie tylko odwalić zadanie byle by było.

Nie proszę o gotowe rozwiązania, ani tym bardziej o całe linijki kodu, tylko jakieś pomysły, hasła które podpowiedzą w którym kierunku iść, ew. jakieś linki do konkretnej właściwości czy funkcjonalności, nie całego projektu.

Dzięki za podpowiedzi
Mam nadzieję, że będzie jakiś odzew.

agipacz napisał(a):

Back-end na razie zostawię, bo to czarna magia dla mnie. Frond-end też mi na razie nie wychodzi, ale każdy jakoś zaczynał.

Nie chcę Cie zniechęcać ale chyba porywasz się z motyką na słońce póki co :)

Zdaję sobie z tego sprawę, ale to jedyna forma zaliczenia tego przedmiotu, wiec muszę jakoś spróbować. Projekt miał być robiony w zespole trzy osobowym, ale pozostali nie wytrwali, wiec muszę to zrobić samodzielnie.. jakoś

stworzenie takiego projektu za pomocą CMS i jakiejś wtyczki,

A wiesz, co to za wtyczka? Jeśli masz jakieś konkretne namiary to podaj link - może ktoś będzie miał coś o niej do powiedzenia. Ja nie kojarzę żadnej, aczkolwiek to nie oznacza, że takiego czegoś nie ma.

(chyba, że CMS faktycznie jest leszy do tego?)

Moim zdaniem nie - CMS'y raczej się sprawdzają do typowych zastosowań - typu strona, blog, elementy interaktywne typu formularz z zapytaniem itp. Natomiast system rezerwacji miejsc w kinie jest już o wiele bardziej skomplikowanym narzędziem.
WAŻNE!!!
Pamiętaj, że system nie ogranicza się do narysowania siatki foteli, na które możesz sobie kliknąć. Musisz to wszystko mieć spięte z systemem w kinie - żeby pani w okienku nie sprzedała tego samego biletu, który właśnie ktoś kupił online (oraz oczywiście analogicznie w drugą stronę). Musisz pamiętać, że masz kilka seansów w ciągu dnia, a dla każdego masz inne rezerwacje. Musisz jakoś ogarnąć temat płatności oraz wiele innych tematów. Oczywiście - nie wiem, jaki stopień "profesjonalizmu" jest Ci potrzebny, bo jak sam piszesz - robisz to w ramach zaliczenia. W każdym razie - robienie tego w oparciu o CMS jest raczej czymś kosmicznym. Widzę jedynie dwie opcje - albo znalezienie jakiegoś gotowego dedykowanego produktu, albo napisanie samodzielnie. Ponieważ ma to być praca na zaliczenie - czyli gotowiec odpada, w związku z czym zostaje opcja robienia tego samemu :P

Back-end na razie zostawię,

Jak napisałem w komentarzu do poprzedniego punktu - bez tego nie ma opcji, żebyś ogarnął ten temat. Oczywiście - sama tabelka z klikalnymi fotelami może całościowo działać po stronie klienta, ale będzie to jedynie atrapa, która poza fajnym wyglądem nie będzie miała możliwości realnego działania. Bez back-endu nawet nie będziesz w stanie wyświetlić aktualnego stanu zajętych miejsc, nie wspominając o całej reszcie. Pojawia się odwieczne pytanie - co najpierw: back czy front. Tutaj szczerze mówiąc nie wiem, co Ci poradzić, więc rób i ucz się tego, w czym się lepiej czujesz na początek ;)

stworzenie tabeli w której komórki odpowiadają siedzeniom
stworzenie kontenera, z dużą ilością divow każdy div to jedno siedzenie
(Tylko tutaj nie wiem, jak zmieniać te kolory: hover byłby przydatny?

To jest kwestia techniczna. Ja bym to zrobił (aczkolwiek nie jest to pewnie rozwiązanie idealne, ale tak na szybko mi się pojawił taki pomysł) jednego dużego diva o stałych wymiarach (chociaż można się pokusić o jakieś skalowanie - tylko po co?), który będzie reprezentować cała salę. W nim umieścić mniejsze divy - kazdy reprezentujący jeden rząd. A w rzędach powkładać małe kwadratowe divy z fotelikami. W ten sposób możesz łatwo operować zarówno całymi rzędami, jak i pojedynczymi fotelikami.
Co do zmiany kolorów - tak, najprościej hover, aczkolwiek to samo można tez przez JS uzyskać (od JavaScript i tak nie uciekniesz przy tym projekcie).
W tle diva - fotelika można wstawić jakąś grafikę z rysunkiem fotela - będzie to wyglądać ładniej, niż kwadracik.

W ogóle na razie radzę Ci - poćwicz sobie najpierw zachowanie tego fotela na pojedynczym divie, popracuj nad hover oraz obsługą kliknięć.
Jeszcze w temacie skalowania tudzież stałej szerokości - zastanów się, kto i jak ma z tego korzystać. Bo jeśli chcesz także, żeby ludzie mieli możliwość dostępu z komórek - dodanie jakiegoś dopasowania do rozmiarów przeglądarki byłoby wskazane.

coś takiego jak onClick() zastąpione teraz metodą addEventListener()

Zasadniczo chodzi o to samo - tworzysz jakąś funkcję, która coś zrobi w momencie wystąpienia danego zdarzenia - np. kliknięcia. To, co napisałeś to jedynie inny sposób podpięcia funkcji do zdarzenia, nie ma większego znaczenia jak to zrobisz. Prawdziwa zabawa/problem/trudność/wyzwanie nie polega na onclick/addEventListener, ale na stworzeniu funkcji, która zostanie wywołana i wykona całą zamierzoną pracę

do js jest ten framework jquery, ale to chyba zbyt zaawansowane dla mnie

jQuery nie jest frameworkiem, ale biblioteką ułatwiającą korzystanie z JS. Nie jest to żadna czarna magia, jej ogarnięcie nie jest dużo trudniejsze od pisania w czystym JS, ale za to jak trochę to liźniesz to zauważysz, że wiele rzeczy można zrobić o wiele szybciej/prościej z jQuery, niż bez niej ;)
Inna sprawa, że za bardzo nie widzę powodu, żebyś wprowadzał jQuery - ona głównie przydaje się przy animacjach/przejściach i innych efektach graficznych, ale w Twoim projekcie za bardzo takich gadżetów nie widzę. Na razie skup się na podstawach, a potem zawsze będziesz mógł dodać inne elementy.

CMS załatwia kawałek backendu za Ciebie. Wtyczkę możesz napisać sam w ramach zaliczenia.

Podejrzyj sobie system rezerwacji Heliosa, bądź Multikina - zbadaj element itd. Dowiesz się jak to jest zrobiine i będziesz miał pomysły jak to zrobić u siebie. Sale kinowe miewają nieregularne kształty, więc tabelka może się okazać złym wyborem. Zwłaszcza, że krzesła są ustawione tak, aby głowa z przodu nie zasłaniała głowie z tyłu. Więc jeśli nie oprogramowujemy bitmapy, czy SVG, to można odtworzyć salę odpowiednimi divami - przerwy, siedzenia rząd parzysty, nieparzysty.

Dziękuję bardzo za odpowiedzi.

Spodobał mi się ten pomysł z divami. To jest chyba dosyć łopatologiczne, ale przynajmniej jestem w stanie to zrobić.
Chyba nie będę się, w takim razie aż tak skupiać na wyglądzie. Faktycznie priorytetem jest to, żeby to działało. Zacznę sobie jednocześnie tworzyć bazę danych.

Odnoście skalowania, lepiej coś takiego robić w bootstrapie czy za pomocą @mediaquery? Pytanie już nie pod kątem moich 'umiejętności' tylko jak to w życiu wygląda.

Najważniejsze, czy dobrze rozumiem, żeby przypisać danemu 'kwadracikowi'/'fotelowi kolor do statusu (wybrane, zajęte wolne)to używam funkcji w js (np. jeżeli kliknę na kwadrat to zmień na czerwony i oznacz jako 'wybierane' albo jeżeli kliknę 'zatwierdź' to zmień na niebieski i oznacz jako zarezerwowane itp.), ale zeby już tą informacje przesłać do bazy to funkcji php (np.jeżeli kliknę 'zatwierdź' to prześlij do tabeli zarezerwowane itp.) , tak?

ja to bym wpisał w google lub/i github "php cinema booking" poszperał w wynikach, uruchomił przez xamppa, zobaczył co mozna z tego wyrwać/przerobić, ale ja to ja, stary jestem :]

Najważniejsze, czy dobrze rozumiem, żeby przypisać danemu 'kwadracikowi'/'fotelowi kolor do statusu (wybrane, zajęte wolne)to używam funkcji w js (np. jeżeli kliknę na kwadrat to zmień na czerwony i oznacz jako 'wybierane' albo jeżeli kliknę 'zatwierdź' to zmień na niebieski i oznacz jako zarezerwowane itp.)

Dokładnie tak. Na początku pobierasz dane z jakiejś bazy i od razu zaznaczasz podczas ładowania stronki miejsca niedostępne. A potem zmieniasz kolory w zależności od działań użytkownika. Pamiętaj też, żeby dezaktywować jakiekolwiek akcje na miejscach zajętych - nie mają się podświetlać ani być klikalne. W chwili, gdy ktoś zrobi rezerwację to dane miejsce wypada i przestaje wchodzić w jakiekolwiek interakcje z użytkownikiem, nie reaguje na hover, nie da się na nim kliknąć itp.

ale zeby już tą informacje przesłać do bazy to funkcji php (np.jeżeli kliknę 'zatwierdź' to prześlij do tabeli zarezerwowane itp.) , tak?

Tutaj mamy dwie opcje - albo przeładowanie strony po każdej "zaklepanej" rezerwacji, albo robienie tego dynamicznie. W takim razie zainteresuj się hasłem AJAX.

Niby cały gotowy system: https://github.com/Chndraknth/Online-Movie-Ticket-Reservation-System

jak zrobić front: https://techbrij.com/seat-reservation-with-jquery

nawet artykuł krok po kroku: http://www.developerdrive.com/2015/06/how-to-build-a-simple-reservation-system/

@karpov: Wszystko fajnie, ale chyba czegoś nie doczytałeś. OP nie potrzebuje tego do jakiegoś realnego zastosowania, ale w ramach zaliczenia przedmiotu. W związku z tym nie do końca jestem pewien, czy dawanie mu gotowego rozwiązania jest dobrym pomysłem :P

@cerrato: zdaję sobie sprawę ale skoro napisał, że nawet nie wie jak się za to zabrać to podrzuciłem coś żeby sprawdził jak to zostało rozwiązane w gotowym projekcie i uprościł.
Nie zakładam przecież, że skopiuje :)

Poczytam o tym AJAXie dzięki!
Linki też oczywiście przeanalizuje. Jeden z nich już rzycił mi się w oczy podczas szperania w google.

Polecacie Tworzyć to za pomocą Bootstrap czy lepiej kokoRZystaćystać z CSS grid?

Z tym bootstrapem jest podobnie jak z jQuery o którym pisałem wcześniej - można to wcisnąć,ale nie do końca wiem, po co maiłbyś. Zwłaszcza, że podejrzewam, iż zbyt mocny w tym temacie nie jesteś (jeśli się mylę to przepraszam i proszę o sprostowanie), w związku z czym zamiast się skupiać na samym projekcie, to będziesz poświęcać czas na rozgryzanie kolejnego narzędzia/wynalazku.

zobacz materialize, ostatnia wersja jest bez jquery