Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation since 11/09/2020 in Tutorials

  1. With this tutorial we will create a simple but efficient bug tracker for reporting bugs etc., similar to the one IPS itself uses HERE for the 4.5 beta. The result will look like on the following screenshot, so everything will be a bit more stylish and above all more clearly arranged. Unnecessary information has been left out and important ones have been highlighted. Notes on this tutorial You have already learned the basics in other tutorials like the one for the recipe database. To avoid repeating ourselves all the time, we will link directly there for these steps and concentrate on the features that are not included there. You can also download the complete bugtracker from our filebase for free without having to rebuild it yourself.
    1 point
  2. We have already included some CSS classes in the templates. And now we can add the CSS styles to the page. Create and assign CSS file In your AdminCP go to Pages -> Page management -> Templates and click on New. Choose Add CSS file. Name it docs and add it to the existing group CSS. If we had more than one CSS file, it might be useful to create a new group at this point. Add the following CSS to docs.css: To include this CSS in the page for the database, go to Pages -> Page Management -> Pagein your AdminCP and open the page with the documentation for editing. Switch to the tab Page Includes tab and select CSS/Docs.css. Click on Save and view the result in the frontend. You will notice that the categories are now collapsed so that the pages inside are no longer visible in the navigation. To add the interaction here, you have to create a JavaScript file as a last step. Create and embed Javascript In AdminCP go to Pages -> Page management -> Templates again and click on New. Select Add JavaScript file and enter the name docs. Use the group JS. If you need more files you can create an extra group for them to keep them separate from other files. Open the file and add the following content: As you can see, we use the code here already used in IPS own documentation. This is another advantage of Pages, by the way. If something doesn't work, you can get support directly from IPS and don't have to rely on the third party providers. The last step is to embed JavaScript into the documentation page. This is done in the same way as CSS above. In AdminCP go to Pages -> Page management -> Page and open the page with the documentation for editing. Go to the tab Page Includes and click on JS/Docs.js. Done. Now only the active category in the menu block is expanded and the others are expanded by clicking on them. You can see that a lot of HTML, CSS, JavaScript and some PHP was put together here. This is a simple version that you can customize, extend and develop further. Have fun!
    1 point
  3. Now we are ready to create a block (plugin) that we will use as a side menu. The side menu displays categories and the pages hierarchically. This block is created in AdminCP, and we are going to use a custom template for it. Block with page menu In your AdminCP go to Pages -> Page management -> Blocks and click on Create new block. Click on Next. On the tab Details enter the name for the block and template key docs_side_menu. In the tab Feed Configuration set the following: You define here the number of records in the block. In earlier versions of IPS it was possible to enter a 0 for unlimited. Starting with IPS version 4.4.10 it does not work anymore, so you have to enter a large positive number, e.g. 100. This number should be greater than the number of all categories and all pages in the categories together, otherwise the menu will be cut off. The sorting in the block is only valid for the order of the pages within a category. The categories are sorted as specified in AdminCP. You can change their order by drag and drop. Template for side menu The "magic" happens on the tab Content. Here you select the option Use as base for a custom template. A template editor will appear below this option where you enter the following code: Save the block and give all user groups the permission to see the block. If you exclude the groups here, the menu will not be displayed for them. You can already see the rough structure of the menu in the preview of the block. We will add the CSS styles and JavaScript later to make it a bit smarter. Some CSS classes are already built into templates above. The last lines in the block redirects from category listing to the first record in the category if you navigate through the side menu. Insert menu into the page To add the block into the page, go to Pages -> Page Management -> Pages in AdminCP and click on the pencil icon to edit the page docs. Go to the tab Content. Here you can see that the database has already been added to the page via the database ID. This happened automatically when we created the page during database creation. Replace the content of the page with the following code: Take time and look at this simple HTML for the page. Here we use the keys for database and the block with the menu. These are inserted in two columns using the IPS CSS framework. The IF-query makes sure that the menu disappears when you edit the page, otherwise you would not have enough space to edit the content. See your documentation in the frontend now. The only things we miss here are CSS and JavaScript.
    1 point
  4. The user, or later the staff member, should be able to assign a processing status to each error and to change it. For this purpose, we have created a select box on the last page, which we will now fill with information, which looks like this in the AdminCP ... Now it is important that you insert all keys and values exactly as I list them here ... bugtracker_found Bug bugtracker_fixed Fixed bugtracker_cant_reproduce Can't reproduce bugtracker_in_progress In progress bugtracker_answer Waiting for reply bugtracker_no_bug Not a bug Of course you can work with your own values later, but for this tutorial you should use them. In the settings at the bottom of the page you choose Allow filtering and Field Required.
    0 points
  5. Now it is time to create templates for the database. In your AdminCP go to Pages -> Page management -> Templates. Click on New and select Add Database Template. Enter Docs in the Name field and select Record listing in Template Type. Assign the template to our database Documentation. A new template set Docs will be created. It contains several template bits for the listing of the records. Let's add another set of template bits to it. It will handle displaying the records in the database. Execute exactly the same steps as in the previous step (see screenshot above), except that you choose Record in Template Type. When you save it, you will have a template set called Docs on the left side, which contains all the required template bits. Below you will find the code for each template bit. Display record - Template bit record This template controls the display of single guide page so-called main content. Before you replace the code of this template, you can look at a single guide in documentation and see how it is visually structured. Then replace the content of the template with the code below and look at the page again. This is the best way to see what has changed. Some features such as rating have been removed from the template as they are not needed in the documentation. This way template looks cleaner and readable. Another approach is to leave everything inside when you create your own templates, even what is not used at the moment, but possibly later. Categories - Templates categoryHeader, categoryFooter and categoryTable These three templates control the list of records in a category. In my example it would be the category Applications where I have created three pages. Look first how it looks now and then delete/replace the code as shown below. Open the template categoryHeader and delete the whole content. Save. Open the template categoryFooter and delete the whole content. Save. Open the template categoryTable and add the following code: At this point the list of all pages in a category is created with text preview. This list will not be accessible later via the navigation. However, users from the search engines will land here, since category links are included in the sitemap.
    0 points
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Further information can be found in our Privacy Policy.