Web Сайтове, Проекти

Каталог

Сподели с приятели

Преди време близък роднина имаше големи затруднения, изпълнявайки ролята на дистрибутор, тъй като хартиеният каталог създават затруднения. Най-голямото затруднение е когато клиент „Х“ иска да запита за продукт за определено заболяване. Търсенето на продукт за определено заболяване страница по страница може да отнеме няколко часа! След кратък разговор, стигнахме до решение, което на мен лично ми хареса въпреки, че дизайна не е много добър.

Какво направих за да реша проблема?

След като установихме проблема, взех решение да направя уеб сайт, който ще може да се използва както на компютър, така и на мобилно устройство. Понеже сайта няма да е голям, реших да го кача като поддомейн на моя сайт. Хостинга, който използвам работи на PHP и за това реших да използвам Laravel. Като бази данни ще използвам MySQL. Понеже не се бях докосвал до Laravel, седнах и за няколко дни го разучих. Направих няколко тестови проекта и да си призная честно се влюбих. Прекрасно написана документация, прекрасни примери и най-важното – лесно се добавят допълнителни модули. По подразбиране Laravel идва с Bootstrap което е библиотека за responsive (отзивчив) дизайн. Това ми позволява да направя дизайна „mobile friendly“ без да навлизам в дълбочина на дизайна.

Какво се получи като краен продукт?

Крайният продукт представлява уеб сайт – каталог, който позволява изключително бързо и удобно търсене. Освен това данните са защитени, тъй като трябва да имате профил, за да можете да работите с тях, а регистрациите са затворени.

Стига обяснения, време е да покажа нещата в действие. Всяка основна секция ще я покажа първо за desktop версия, после за мобилни устройства.

Влизане в системата
Влизане през компютър
Влизане през компютър
Влизане през мобилно устройство
Влизане през мобилно устройство

Сайтът използва бисквитки и сесии, което позволява след влизане да помни дълго време потребителя. Отново както се вижда, дизайна е удобен както за компютър, така и за мобилно устройство.

 

Начален екран след успешно влизане
Начален екран при използване на компютър
Начален екран при използване на компютър
Начален екран при използване на мобилно устройство
Начален екран при използване на мобилно устройство

За сега съдържанието е статично, но се планира да има допълнителна информация.

 

 

 

Преглед и информация за продукти
Списък с продуктите при използване на компютър
Списък с продуктите при използване на компютър
Списък с продуктите при използване на мобилно устройство
Списък с продуктите при използване на мобилно устройство

Въпреки, че дизайна не е от най-прекрасните ето така изглежда списъка на всички продукти съответно на компютър и на мобилно устройство. При правенето на скрийншот не съобразих, че на мобилното устройство не се виждат страниците, но това не е голям проблем.

 

 

Подробна информация за продукт при използване на компютър
Подробна информация за продукт при използване на компютър
Подробна информация за продукт при използване на мобилно устройство
Подробна информация за продукт при използване на мобилно устройство

Тук е показано как се вижда пълната информация за даден продукт. Отново дизайна не е на перфектно ниво и да няма снимка или картинка за продукт. Към момента сайта се използва само за минимално необходимата информация и затова преценихме, че няма нужда.

Преглед и информация за заболявания
Списък на всички заболявания при използване на компютър
Списък на всички заболявания при използване на компютър
Списък на всички заболявания при използване на мобилно устройство
Списък на всички заболявания при използване на мобилно устройство

Дизайна е подобен, както продуктите.

 

Подробна информация за заболяване при използване на компютър
Подробна информация за заболяване при използване на компютър
Подробна информация за заболяване при използване на мобилно устройство
Подробна информация за заболяване при използване на мобилно устройство

Ето изглед как изглеждат заболяванията и продуктите в тях. Тук е малко по-различно поради специфична нужда.

Създаване на продукт
Анимация, показваща как се създава продукт
Анимация, показваща как се създава продукт

Тук ви предоставям анимация, която демонстрира как се създава и изтрива продукт. При асоцииране на продукт към заболяване може да се използват както съществуващи заболявания, така и несъществуващи. Това е много удобно, понеже при създаването на продукт заболяванията се създават автоматично и се асоциират към него. При изтриване на продукт, той се освобождава от всички заболявания, към които принадлежи. Съответно при изтриване на заболяване, всички продукти се освобождават от съответното заболяване.

Търсене
Търсене на продукт по различни критерии при използване на компютър
Търсене на продукт по различни критерии при използване на компютър
Търсене на продукт по различни критерии при използване на мобилно устройство
Търсене на продукт по различни критерии при използване на мобилно устройство

Както споменах по-горе търсенето е най-важното в този проект, тъй като трябва да е удобно и бързо, с възможно най-малко затруднения. В предоставените анимации, показвам как се търси заболяване по име, продукт по име и продукт по каталожен номер. При търсене излиза списък с възможни резултати, като това ускорява процеса.

 

За колко време е създаден проекта?

Проекта бе изграден за времето от седмица и половина, което включва изучаването на Laravel и неговите особености. Вече имах добри познания по бази данни и основни познания как работят ORM рамките (frameworks).

Заключение

Като цяло съм доволен как се получи проекта, неговото бързодействие и лесна употреба. С удоволствие бих предоставил за някой подобно решение, а ако смятате, че имате нужда от нещо подобно можете да се свържете с мен.


Сподели с приятели