Веб апликација/онлајн продавница за книги
Web application/online store for books
- Користење на соодветен шаблон за презентација на книгите кои се нудат за продажба, имплементација на техники за пребарување и сортирање
- Релативно лесна навигација низ содржината на апликацијата
- Имплементирана потрошувачка кошничка за купување на книги
- 4 улоги (Администратор, Вработен/Кадар, Член, Корисник)
- Систем со поени кои членот ги добива при купување на некоја книга. Истите можат да се искористат за попуст при понатамошни купувања
- Посебен поглед за секоја од улогите
- Манипулација со податоците преку соодветно креирана база
Оваа апликација е наменета за продажба на книги. Истата го користи шаблонот grid of equals за соодветен приказ на книгите на Home Page-от. Корисникот има можност за пребарување на соодветна книга. Исто така има опција и да ги сортира книгите врз основа на неколку критериуми како што се: цена, наслов, количина или датум на издавање. Апликацијата располага со 4 улоги: Администратор, Вработен, Член и Корисник. Корисникот има опција да пристапи до деталите за секоја книга, одделно, со едноставен клик на копчето Details. При клик на копчето Details му се отвора нов поглед на кој се прикажани деталите за книгата (цена, автор, издавач) како и можност за пристап до соодветен поглед за истите. Корисникот има можност да ја купи книгата само доколку е најавен, т.е. доколку е член, во спротива истиот се редиректира на соодветен поглед за најава/регистрација. Регистрираниот корисник има можност да купи книга и притоа за секоја купена книга му се пресметуваат соодветни поени, кои му носат попуст при понатамошни купувања, доколку одлучи да стане член (Member) во библиотеката. Секој корисник има соодветна потрошувачка кошничка во која се наоѓаат книгите кои ги купил, нивната количина и вкупниот износ за плаќање. Притоа истиот има увид во книгите кои ги купил во својот кориснички поглед. Исто така, секој член може да остави критика за било која книга. Вработените и Администраторите имаат дополнителни можности како промена на податоците за соодветна книга, автор, издавач или жанр.
При стартувањето на апликацијата се прикажува Home Page-от кој е прикажан на Слика 1
Слика 1: Главен поглед на апликацијата
Откако му се прикажува Home Page-от корисникот има можност да изврши пребарување за да ја најде посакуваната книга или пак да изврши сортирање врз основа на понудените критериуми.
Слика 2, 3: Функционалности на алатките за пребарување и сортирање
Резултатите се прикажуваат во истиот поглед:
Слика 4: Приказ на резултатите
При клик на копчето Details за било која книга се отвора нов поглед со соодветни детали за истата (автор, издавач, залиха), а во долниот дел од погледот има имплементирано carousel на кој се прикажани предлози за книги кои припаѓаат на истиот жанр како тековната.
Слика 5: Приказ на Details поглед за книга
Со клик на копчето Add review се отвора диалог-прозорец во кој може да се напише соодветната критика за книгата.
Слика 6, 7: Прозорец за оставање критика за книгата и прикажување на истата
Со клик на линковите кои водат до авторот и издавачот на книгата се отвораат соодветни погледи:
Слика 8, 9: Погледи за автор и издавач
Секој член има своја потрошувачка кошничка во која има увид во книгите кои ги избрал за купување. Со клик на копчето Go to checkout се отвора нов поглед во кој треба да ги потполни соодветните податоци за да може да се изврши трансакцијата.
Слика 10, 11, 12: Потрошувачка кошничка
Врз база на улогата секој член има достапност до различен панел:
Слика 13, 14, 15, 16: Кориснички панели
Имплементацијата се одвива врз база на неколку поврзани класи Book,Publisher,Author,Genre,ShoppingCart кои се сместени во соодветна база која овозможува нивна меѓусебна манипулација. Целокупната апликација, во главно, се базира на Bootstrap, HTML, jQuery и AJAX код кој овозможи дизајнирање на тековниот изглед и функционалност. Исто така направивме и драстични измени во контролерите и погледите за секоја од класите преку додавање на custom код за постигнување максимална финкционалност.
Во рамките на нашата веб апликација искористивме неколку библиотеки кои беа инсталирани преку NuGet package manager. Некои од поважните библиотеки кои беа искористени се:
- EntityFramework (ORM for .NET framework, за манипулација со базата на податоци)
- Bootstrap (front-end CSS library, за изгледот на апликацијата)
- jQuery (front-end JS library, за AJAX повиците и манипулација на DOM структурата на HTML-oт)
- jQuery DataTables (jQuery plugin, за креирање на дата табели со помош на jQuery)
- NotFoundMvc (за препокривање на стандардната 404 NotFound порака)
- PagedList (за имплементација на страничење на книгите прикажани во Home Page-от)
Изработено од:
- Костадин Крстев 161 169
- Михаил Зафировски 161 162
- Using an appropriate desing pattern for books offered for sale, implementing search and sorting techniques
- Relatively easy navigation through the content of the application
- A shopping bag for purchasing books
- 4 roles (Administrator, Employee / Staff, Member, User)
- Points that the member gets when purchasing a book. They can be used fs discounts for further payments
- Special view for each of the roles separately
- Manipulation with data using database
This application is used for selling books. It uses the grid of equals design pattern for a proper display of books on the Home Page. The user has the ability to search for an appropriate book. Also has the option of sorting books based on criteria such as: price, book title, quantity or date of publish. The application has 4 roles: Administrator, Staff, Member and User. The user has the option to access the details of each book separately by simply clicking the Details button. Clicking on the Details button opens a new view showing the details of the book (price, author, publisher) and the ability to access an appropriate view of them. The user has the ability to buy the book only if he is logged in, in opposite, he will be redirected to an appropriate view for log in/registration. The registered user has the ability to buy a book, and for each purchased book, it is calculated the appropriate points that give him a discount for further payments. Each member has an appropriate shopping bag containing the books he wants to purchase, their amount and the total amount of the payment. Every user has an insight into the books that he has purchased. Also, each user can write reviews for any book. Employees and administrators have additional abilities to edit details for an appropriate book, author, publisher or genre.
When starting the application, the Home Page is displayed as shown on Image 1
Image 1: Main view of the application
After the Home Page is displayed, the user has the ability to perform a search to find the desired book or to perform sorting based on the criteria offered.
Image 2, 3: Functions of search and sort tools
The results are displayed in a the same view:
Image 4: Displaying the results
Clicking on the Details button, for any book, opens a new view with appropriate details (author, publisher, quantity, price) and in the bottom of the view there is a carousel that displays recommendations that belong to the same genre as the current one.
Image 6, 7: Displaying dialog for leaving a review for the book and showind the review comment
Clicking the links, that lead to the author and the book publisher, will open up appropriate views:
Image 8, 9: Views for Author and Publisher
Each member has his own shopping bag in which he has an insight into the books he wants to purchase. Clicking the Go to checkout button opens a new view in which you need to complete the required data in order to be performe a transaction.
Image 10, 11, 12: Shopping cart
Based on the role each member has access to a different panel:
Image 13,14,15,16: User pannels
The implementation takes place on the basis of several related classes Book, Publisher, Author, Genre, ShoppingCart that are placed in a database that allows manipulation of each other. The overall application is mainly based on Bootstrap, HTML, jQuery and AJAX code that allow designing the current look and functionality. We also made drastic changes in controllers and views of each class by adding custom code to achieve maximum functionality.
Within our web application, we used several libraries that were installed through the NuGet package manager. Some of the most important libraries used were:
- EntityFramework (ORM for .NET framework, for manipulating the database)
- Bootstrap (front-end CSS library, for the appearance of the application)
- jQuery (front-end JS library, for AJAX calls and manipulation of the DOM structure of the HTML)
- jQuery DataTables (jQuery plugin, to create data tables using jQuery)
- NotFoundMvc (to override the default 404 NotFound message)
- PagedList (for the implementation of pagination for the books shown in the home page)
Made by:
- Kostadin Krstev 161 169
- Mihail Zafirovski 161 162