📜 ⬆️ ⬇️

Creation of a site from ready-made components on the example of a site for ordering food to the office

In the vicinity of our office there is no decent catering, so dinners are brought to us from one cafe to order. The order is carried out for the day (on Monday the order is made from Friday), by phone, listing all the dishes and their quantity (in case the order has not changed from yesterday's, it is enough to say it). As a software development company, primarily the web, we until recently lived on the principle of “shoemaker without boots”, and all orders were kept by the person responsible for ordering food on a piece of paper; in the event of an order change, it was necessary to write a letter to this responsible person, and he already recalculated the total order.

Having carved out some free time during the break between the projects I implemented (I realized, I didn’t write - why, I’ll tell you a little) the system for ordering food. The basis, as you might guess from the subject of the blog, was taken CMS Drupal, which is my main tool for about one and a half years.

Objectives of this topic:

')
So, what should be implemented in the project:



I will begin with a small digression. Because I mainly work with Western customers and got used to English when developing in Drupal, then all instructions, examples and screenshots will be in English (with some Russian inserts, when it will be easier =)). But with localization, just do it and with Russification in particular, Drupal has everything in order. Download Russification and read about localization can be on the site of the national headquarters of Drupal . Also, please note that the article lists a sufficiently large number of modules. The presence of a huge number of modules is a big plus and at the same time, some drawback when working with Drupal. The plus is that a huge amount of functionality has already been written, to use which it will be enough for us to install the module and put a couple of checkboxes in the settings. The downside is that you need to know exactly which modules you need to use to get the necessary functionality, which makes the point of entry into the development on the drupal quite high.

So, seizures. The first thing we need is Drupal itself. At the time of this writing, the latest stable version is 6.10. Installing the drupal should not cause any difficulties - that's all, IMHO, is extremely simple and clear - the installer gives enough hints and explanations. After installation, we have a pristine-clean system.


Because during development we will have to go through a lot of sections of the site, then we will start by installing the Administration menu module. This module creates a menu at the top of the page for quick navigation through the site for administration. To install the module, download it (at the time of writing the latest stable version 6.x-1.3), unpack it and put it in sites / all / modules (you will need to create the modules folder yourself, why you can read this in the drupal documentation ). After that go to Administer -> Site building -> Modules and turn on the module. Immediately after installing the module, you should see at the top that same administrator menu, with drop-down items. In general, in order for it to appear, you must give users permission to do this in the Administer -> User management -> Permissions section, but since we are now working as a user with UID 1, then we can do everything and always (therefore, they can never be tested).


Now we need to create a new type of content that will be a description of the dish. To do this, go to Administer -> Content management -> Content types -> Add content type and set up everything we need. I called the type of content Meal (the name of the meal is inwardly), renamed Body to Description (for we will have a description here), removed the checkbox from Promoted to front page, because we are not going to display information about the dishes to the main page and twisted some settings.


The foundation is laid, and now you need to build a site on its basis. One description and name for the dish is not enough. Firstly, we need to divide dishes into categories (Salads, Soups, Hot, etc.), then we need the price of the dish and, we will add the possibility of attaching images of the dish. If we can do the first with the help of the Taxonomy module, which is included in the basic delivery of Drupal, then for the rest we will need to install additional modules. To add fields of different types to the content of the typewriter, the Drupal has a Content Construction Kit (CCK) module. Its delivery includes both a base module for adding additional fields, and a small set of commonly used field types. Download, unpack and place this module in sites / all / modules (this set of actions is the same for all new modules, so I will not describe it anymore, when installing a new third-party module, it is automatically implied). To add a price, we need a field of type Money , which is part of the Money CCK field module. This module depends on several modules (you can learn this by going to the module management section) - this is the Currency API, which is part of the Currency Exchange module, the Format Number API, and the Formatted Number CCK . To add images to a node (a node is the name of a content unit in a friend) you can actually use the standard file attachment module, but we want everything to be beautiful, and therefore we will use a custom field to load images. To implement this, we need the ImageField and ImageCache modules , as well as their dependencies - FileField and ImageAPI .

All of the above modules are taken from the official releases section. And although some modules from the above list have not yet reached a stable version, I personally did not notice any problems during their work.

So, after all the modules are downloaded and placed where needed, go to the module management section ( Administer -> Site building -> Modules ) and tick the modules we need. And we need the following - ImageField , Money CCK field , ImageCache , ImageCache UI , ImageAPI GD2 and Taxonomy (should be installed by default, but if not, install it). All required modules will be installed automatically (there is a small error in the installer of the Money CCK field version 1.0), and it reports that its dependencies are not installed, although they are installed automatically, so this module will have to be checked again and started the installation.

Now we will create a profile for the loaded images of dishes. For this we needed the ImageCache module. Go to Administer -> Site configuration -> By module (here, because the ImageCache UI for some reason does not place a link to its settings in the general list), look for the ImageCache UI module and go to its only possible configuration option - ImageCache . Create a new set of settings (Add new preset). Call it meal_img and add the action Scale (scaling). Specify 120 (pixels) in the Width field, and delete the value from the Height field. Then the images will be scaled with respect to proportions and reduced relative to the width.

Now create categories for which we will be divided dishes. To do this, go to Administer -> Content management -> Taxonomy -> Add vocabulary and fill in the fields:
- Vocabulary name - Category
- Content types - Meal
- Required
Then we go to the add terms section of our dictionary and create several categories (terms).


Now we can proceed to adding the fields we need to the Meal content type we created earlier. For this, go to Administer -> Content management -> Content types -> Edit Meal -> Manage fields and create the required fields. And we need the following fields:
  1. Label : Cost , Field Name : field_cost , Type : Money , Form element : Amount and currency , after creating, we choose the most convenient display type and currency (for some reason, I always thought that the Russian ruble is RUR, and here, for some reason, RUB) and do required field
  2. Label : Pictures , Field Name : field_pictures , Type : File , Form element : Image , it is not necessary to do this field, and the maximum number of values can be set, for example, to 3, well, you can twist a little of the settings so that users can easier to add new dishes to the menu.



Now we need to configure the display node. To do this, go to Administer -> Content management -> Content types -> Edit Meal -> Display fields -> Basic . Here for the Pictures field you need to set:
- Teaser - <Hidden>
- Full node - meal_img image linked to image (for this we created a preset)
For the Cost field, you can set the Label field to Inline so that the label to the field is in one line with the value.


Well, now it's time to finally create a few dishes for further testing. To do this, go to Create content -> Meal and fill in the fields. Repeat this action several times. Add a couple of dishes in each category.


Next, let's add the dishes the possibility of ordering and the rating system (just like that =)). With this we will be helped by the Flag modules and the Fivestar module, for which you will also need to install the Voting API . Download these modules, go to the module control panel and turn on Flag and Fivestar . After installation, you must configure the modules. To do this, first go to Administer -> Site configuration -> Fivestar and choose the style that you like the most (I chose Basic with a yellow set of colors, by hovering over the stars you can immediately see how they will look). Now you need to activate the rating system for the content that implements the dishes. To do this, go to Administer -> Content types -> Edit Meal and in the Fivestar ratings section, check the Enable Fivestar rating checkbox , and set the value of the Teaser display field in the Clickable widget below teaser (useful later). The rest of the settings can twist to your taste.


Now let's briefly distract from the content and make several settings for users. Our resource for ordering food will be internal, but it will be located in the global network, so we need to somehow protect it. To do this, we will firstly disable the possibility of registering new users (when applying for a job, our sysadmin creates accounts in the systems we use - mail, forum, basecamp, now also in the food order system). You can do this by going to Administer -> User management -> User settings and setting the Public registrations switch to Only site administrators can create new user accounts . Now go to Administer -> User management -> Roles and add a new role (I called it HabraUser). Now we will configure access rights. To do this, go to Administer -> User management -> Permissions , remove all rights from the anonymous user and authenticated user groups, and give the following set of permissions to the HabraUser group:
- comment module : access comments, post comments, post comments without approval
- fivestar module : rate content
- node module : access content
- user module : access user profiles


Now, finally, add the ability to order dishes. To do this, create and configure a new flag. To do this, go to Administer -> Site building -> Flags -> Add and create a flag named meal_order and type Nodes . We set different inscriptions (my version can look at the screenshot to this paragraph), allow only users from the HabraUser group to use this type of flag, and apply this flag only to Meal-type nodes. We will show the flag both in the teaser and on the page. Link type is left in the JavaScript value toggle - then the flag will be switched using AJAX.


Well, 2/3 of the way is passed. Now it remains to make the display of the menu, the display of the order of the user and a summary order. We proceed to the implementation of these points.

To implement all sorts of lists in Drupal there is a very flexible Views module, which we will use. Download, go to the module control panel and turn on Views (core) and Views UI (admin interface for managing views). Now we will create views for displaying dishes from different categories. To do this, go to Administer -> Site building -> Views -> Add and create a menu called meal_menu , and the Node type. Then we get to the page management view. Initially, we have no mappings, and we can adjust the parameters common to all mappings. I made the following settings:

As a result, it should be the same as in my screenshot (just the modified fields are highlighted in bold). Click the Save button and save the current state of the base view.


Now we will create specific pages for each category of dishes, inheriting all pages from the base one. To do this, in the left column of the view settings, select the type of display Page in the drop-down list (usually selected by default) and click the Add display button and immediately see how we have added a new display to the view. Since this is a specific display - the set of parameters has changed somewhat - the menu parameters have been added, and the general view settings have disappeared. Now we need to override some of the parameters of the base view. The first thing we need is to add a filter to the tarmin from the taxonomy categories dictionary. To do this, add a new filter Taxonomy: Term and in it:


Now a very important action - you need to click the Override button in order for this filter to apply only to this display. Otherwise, it will apply to the base view. Now click Update, which saves our new filter. Next, give the mapping name and title by the name of the term. Those. let's change the Name and Title parameters in Basic settings (here it will also be necessary to click Override to redefine the parameter relative to the base display) to Hot . Now, in order to be able to get to the page that implements this type of display, you need to set a path for it. This is done in the Page settings section, for example, meal_menu / hot . We save the view (before this, all actions were recorded in a temporary repository, and can easily be canceled).


Now we repeat the same actions, but for all other taxonomy terms. As a result, there should be 3 (I have 3 terms in the dictionary, as many categories of dishes will be in my mind, as many terms) of the display implementation. I have the following names / headings and paths:

You can see what happened by clicking on the “Salads” View links at the top.


Now that we have the component parts of the menu, in the form of food lists by categories, it's time to do the menu itself. To do this, we use the Panels module. At the time of writing, there is no stable version of the module for the sixth version of Drupal. There are 2 versions of the module that are in the alpha version - 6.x-3.0-alpha2 and 6.x-2.0-alpha3 , i.e. early enough. And although the recommended version is marked version 2.0, we still use version 3.0, if only because it is newer. And from the experience of use, I can say that, according to my subjective feelings, the stability of these two beliefs is approximately at the same level, and quite high. Version 6.x-3.0-alpha2 also has the Chaos tool suite module in reference. Download and go to the control panel modules. There we activate the following modules - Chaos tools , Delegator , Panels and Views panes .

Now create the page with the menu itself. To do this, go to Administer -> Site building -> Pages -> Add page . Set the name and path for the page (in my case both meal_menu ). Next, we add an access rule to the page (as you remember, we create a website for internal use, but with access via the Internet, so we will give access only to the group we created). Because the menu is the main functional page of the site, then we add a link to it to the main menu. To do this, select the Normal Menu entry in the Type , set the title (I have this Meal Menu) and select the Primary links in the Menu . Next, select a single handler for our page ( Create a single handler for this page ) and install it in the Panel (to be honest, never used multiple handlers). Now we will configure the handler. We set for it the same level of access as for the page. Of the templates, we are more suited to Three column 33/34/33 (one category in the column, although I have more categories in the same 3 columns on the live site). Next, we set a title for the page (for example, Meal Menu) and choose a style for the panel (I advise Rounded corners, because this style by default gives a fairly large and convenient distance between the columns). Well, finally, add to the columns we created before displaying the view - meal_menu: Hot , meal_menu: Salads , meal_menu: Soups . If you want to change the order of the views in the column or change the column for some views, simply drag them - Drag & Drop works stably. Finally click Finish and ... we notice absolutely no changes =)


The thing is that the Panels module uses its system to determine whether the user can access, so the user with UID 1 has no privileges. As we remember, access to the menu was given only to users from the HabraUser group, so we simply add ourselves to this group. To do this, go to edit your profile ( My account -> Edit ) and in the Account information section, put the HabraUser checkbox in the Roles field and save the profile. Now in the main menu a menu item has appeared, which will lead us to the page with the menu. Now we can make an order, and go to the next part =)


After the order is made, we are interested to see your order in your profile. To do this, again, use the capabilities of the Views module. Go to Administer -> Views -> Add and create a view named user_meal_order with Node type. At the base mapping (I would compare it with the abstract base class in OOP), we make the following settings:

Now we will add a new display of the Block type and add the following settings:

Save the view and go to the block control panel Administer -> Blocks -> List . There we find our block in the list, user_meal_order: Block , and add it to the Left sidebar region. For convenience, drag the block to the bottom of the list of blocks of the region. Save block settings. We see that the block appeared in the left pane. But I think that it’s not very beautiful for this block to hang on all pages. Let's make it so that the block is visible only in the profile of the owner. To do this, click configure next to our block and get to the edit page of the block settings. Here we are interested in the section Page specific visibility settings . Set the Show block on specific pages parameter to Show if the following PHP code returns TRUE (PHP-mode, experts only) and write the following in the input field (yes, this is the first piece of code =)):

<?php
global $user;
return (arg(0) == 'user' && arg(1) == $user->uid);
?>


Thanks to the user brmn for a hint in optimizing this piece of code.

With this piece of code, we check if the current page is a user's profile, and if so, is our profile. After saving, the block with our order has disappeared, and now you can see it only by going to your profile.


The last thing left for us to realize is the collective order, i.e. A list of all ordered dishes with their quantities. To do this, again, use the Views module. For this page, we will need an additional module, so go to the module control panel and turn on the PHP filter (comes as standard). Now go to Administer -> Views -> Add and create a view named meal_order with the Node type. We change the parameters of the base display as follows:

Then we add a new display of the Page type and override the following parameters in the Basic settings section:

Now in the Page settings section, set the path ( meal_order ) and create a link in the main menu ( Normal menu entry ). Save, and we see a link to the page with a general order added to the main menu, where you can go and see if the sample works. Now you can upload the system to the Internet and create accounts for your colleagues ( Administer -> User management -> Users -> Add user )


Additionally, the Drupal theme theme provides CSS for convenient printout of pages.


Here, in general, is all that I was going to tell in this article. All that was intended in the project has been achieved. Whether the goals of the topic have been reached is up to the readers. Waiting for feedback and questions.

PS: It took about 2.5 hours to create a live version of the site for my company. At this time, it included the driving in of the order of hundreds of dish names (albeit without images).

UPD :
I can recommend a great book interested in the development topic on Drupal, which I studied myself in due time - everything is quite clear and detailed in it (though in the second edition I found an error in the code =)). The book is called Pro Drupal Development (published by Apress , ISBN 9781430209898 ). There are 2 such books in nature - the first and second editions. The first describes Drupal 5, the second edition - Drupal 6. Finding them online is easy. I advise you to read books in the original, i.e. in English. For I don’t know anything about the existence of the second edition in Russian, but the first one was recently bought into the office (after half a year, as they switched to D6) - it’s some kind of subtle, such a feeling that something was cut there.

Source: https://habr.com/ru/post/54394/


All Articles