Training of components in Elanat core
Tags: beginners, tutorial, csharp, opensource
Published: 2023-09-07 21:38:08

**What is component?** Component can have different definitions or meanings in each system. In the [Elanat framework](https://elanat.net), add-ons that only administrators role type have access to are called components. plugins, modules, and the component itself each have a component management page.

The list below shows the components name in the [Elanat](https://github.com/elanatframework/Elanat) core:

 - About
 - Add content
 - Approval comment
 - Approval content
 - Attachment
 - Backup
 - Category
 - Comment
 - Component
 - Configuration
 - Contact
 - Content
 - Dashboard
 - Editor template
 - Extra helper
 - File manager
 - Foot print
 - Item
 - Language
 - Link
 - Menu
 - Module
 - Options
 - Page
 - Plugin
 - Profile
 - Properties
 - Recycle bin
 - Refresh
 - Content reply
 - Role
 - Group
 - Site
 - Statistics
 - Admin template
 - Admin style
 - Site template
 - Site style
 - User
 - View
 - Fetch
 - Patch

You will see the following page after logging in to Elanat.

![Elanat admin section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/veokojxmm9nq3fz1pdak.png)

In the upper part of the image, you can see the names of Elanat systems:

 - Home
 - Content
 - Users
 - Tools
 - Appearance
 - File and directory
 - Add-ons

Systems in Elanat are made up of interdependent components and modules and extra helpers.

In the image of the admin section, you can see several icons on the side of the Elanat logo; these are Elanat's extra helpers. At the bottom of this section, you will see icons that are surrounded by a dashed frame; these are the modules options page. In the next tutorials, we will also discuss Elanat's extra helpers and modules.

Extra helpers
![Extra helpers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jaqm89qk8b1yju9vqyy.png)

Modules options
![Modules options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2ol1tk4oo544j9yjtrf.png)

## Brief description of all Elanat core components

**About:** This component updates Elanat and displays the version number of Elanat and the latest news of elanat.net.

**Add content:** As the name suggests, this component is for adding (also editing) content. You can add content based on the role of users, set the image and icon of the content, set a desired date so that the content is automatically displayed on that date, and other features.

![Add content component in Elanat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdl7qhd4tzsz4gjrxhyu.png)

**Approval comment:** If you have not ticked the content comment is free check box for some categories or contents, you can confirm user comments in this component before displaying them on the website.

**Approval content:** If you have determined that the creation of content for one or more user groups requires approval, in this component you can approve or delete content that requires approval.

**Attachment:** In this component, you can add types of attachments and edit previous attachments and give access to some attachments for some user roles or leave a password on the attachments. You can assign each attachment to several contents.

**Backup:** In this component, you can backup files and databases or restore previous backups.

**Category:** In this component, give a category or sub-category to each website and give a unique template and style to the category and determine the access of roles.

**Comment:** In this component, you can edit and delete the comments of members or guests or add a new comment.

**Component:** The component itself has a component management page; in Elanat, a component is a component! In this component, you can manage all components and determine the access of members, including adding, deleting, editing, deleting yourself, and editing yourself.

![Component component in Elanat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flq1ptwomv7c2v78ryha.png)

**Configuration:** The configuration component is one of the most powerful components of Elanat and was created for people with medium to high knowledge. In the configuration component, you can configure Elanat through the file editor. In this component, have complete control over scheduled tasks, references, url rewrites, url redirects, security items, and many other items.

![Configuration component in Elanat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzr8ewpphm8tmpvk0ng0.png)

**Contact:** In the contact component, you can see the calls of users along with their attachments and write replies to them.

**Content:** In this component, you can manage the created content.

**Dashboard:** Dashboard is the default component of Elanat management panel. This component is a beautiful panel that gives information about the activities of the current day, gives an overview of website information and allows you to manage it quickly.

![Dashboard component in Elanat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36nu1co5kkdkfzsi1skz.png)

**Editor template:** Editor template is one of Elanat add-ons that includes a component management page. Editor templates add-ons are part of a html page template; each of the Editor templates helps content writers use a ready-made template to create pages faster and more organized.

Introduction of two editor templates apart from Elanat core:

Elanat quotation

Elanat quotation admin section image
![Elanat quotation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2v9scqwtg81x8uihagi.png)

Elanat quotation site section image
![Elanat quotation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1cxd0ut19gtibig1xy4.png)

link for download:
[https://elanat.net/content/60/Elanat Quotation.html](https://elanat.net/content/60/Elanat%20Quotation.html)

Elanat also read

Elanat also read admin section image
![Elanat also read](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2qkfa733yyrw7qp8jas.png)

Elanat also read site section image
![Elanat also read](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lu8rzdr50lqf4jk96ek1.png)

link for download:
[https://elanat.net/content/61/Elanat Also Read.html](https://elanat.net/content/61/Elanat%20Also%20Read.html)

**Extra helper:** Extra helper is also one of the Elanat add-ons that includes a component management page. Extra helpers are add-ons that only showed in admin section of Elanat framework and only administrators access to this add-ons.

**File manager:** The file manager component is used to manage files and directories. In this component, you can create files, create directories, upload files, delete and edit files.

Note: In version 2, the permissions section of files and directories may not work on non-Windows operating systems; We are trying to make the permissions section of the file manager component compatible with all non-Windows operating systems in future versions.

**Foot print:** The foot print component is a log that stores user activity. You can see all user activities in this component.

Note: Note that log in Elanat refers to system errors that are stored in the App_Data/log/ path and there is no name of log in the foot print component!

**Item:** Item components form parts of a page. Item can be html or javascript codes to be added in different menus. The item component supports the translation of variants and gives great browsing power to website designers. The item also supports role access.

**Language:** In the language component, you can add a new language package and manage existing packages and add new words and sentences to previous language packages or edit or delete existing words and sentences.

The language package has a static file, a dynamic file and separate language files for plugins.
You can access Elanat's English language package by clicking on the link below:
[https://elanat.net/page_content/language_package](https://elanat.net/page_content/language_package)

**Link:** The link component is for managing links and you can place links in different menus.

**Menu:** Menus are part of a website. Each menu in Elanat's menu component is added in Elanat's static locations and supports access to roles. Modules, plugins, items, links, and fetches can be placed inside the created menus.

Menu locations list: header bar right, header bar left, header bar box, header menu, header 1, header 2, menu, after header, before content, after content, right menu, left menu, before footer, footer menu, footer 1, footer 2, footer bar right, footer bar left, footer bar box

**Module:** Module is also one of the Elanat add-ons that includes a component management page. Modules and plugins are a kind of add-on that can be displayed in any part of the website; add-ons in Elanat framework that being able to display, provide separate management for the add-on, are called modules.

**Options:** Options component manages security, debug, active, email, date and time, file and directory, cache and delay settings. These settings are stored in the config.xml file located in the App_Data/config/ path.

**Page:** The page is a type of add-on that is displayed in the site section of the Elanat framework. The page can be static or dynamic. The page component supports the translation of variants and supports access to roles. it also supports types of meta and head tags and executable tags after loading and other cases.

**Plugin:** Plugin is also one of the Elanat add-ons that includes a component management page. Add-ons that are purely visual and do not have a management page are called plugins.

**Profile:** Profile component displays user information and all information of the current user with the administrator role type can be changed in it. Password, email, language, template, style, user group, date and time and other user information can be changed in this component.

**Properties:** The Properties component manages the settings related to properties, view and include. These settings are stored in the config.xml file located in the App_Data/config/ path.

**Recycle bin:** You can recover content that you deleted by mistake or for any other reason in the recycle bin component; currently, the recycle bin component only supports content, and it is possible that it will support other components in the future.

**Refresh:** The refresh component refreshes some data, recreates some and deletes others. The most important part of this component is the ability to start the application again; This possibility is very important because in Elanat architecture a lot of data is placed on memory and the data that is changed manually needs to be called again. In this component, cache, session, and cookie information can be restored, cache files, log files, temporary files, and foot print data can also be deleted.

**Content reply:** Content reply is a message that is added on the content. The image below shows the message "Copying the image of the content is prohibited." On an added content.

![Content reply component in Elanat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mqri1vg0b044rov7lex.png)

If you have the ability to create an add-on, with some ideation, the content reply component can be used more effectively; Things like excellent articles and winning content awards and honors, etc.

**Role:** Roles can be defined for users in the role component. Each role is a type of role including one of guest, member and admin. In addition to the access of the rules to the parts of Elanat, we also have bit rules in this component, each of the bit rules specifies what additional possibilities the user will have and what he is deprived of; For example, can it upload a file, or can it write HTML or JavaScript, etc. In the role component, only the role bits can be specified, and to give access to other Elanat related items, they must be directly referred to. For example, access to a module for a role is determined only in the module component.

**Group:** Each group includes one or more roles and one group can be assigned to each user. If the group includes two roles, one of which has access and the other does not, access in Elanat determines the role that has access.

**Site:** By adding multiple sites in the site component, multiple websites can be implemented on one domain. Each website will have its own language, template, style, pages, logo, calendar, clock, categories, menus, etc., and some items can be shared between websites. The site component supports role access.

**Statistics:** The statistics component displays server and browser information.

**Admin template:** The admin template component is related to the template of the admin section of the website. Admin template is an XML file that specifies the layout of the HTML tags of the admin section, the XML tags of the admin template file can support variants.

The following tags show a part of Elanat's default admin template that is related to the dashboard component:

Dashboard component template
```html
<dashboard>
	<box>
	<![CDATA[
	<!-- Start Dashboard Item -->
	<div class="el_dashboard_item">
		<div class="el_menu_title">$_asp menu_name;</div>
		<ul>
		  $_asp item;
		</ul>
	</div>
	<!-- End Dashboard Item -->
	]]>
	</box>
	<list_item>
	<![CDATA[
		<li class="el_dashboard_menu">
			$_asp value;
		</li>
	]]>
	</list_item>
	<static_item>
		<today_activity use_module="true" use_box="true">
		  $_module_name today_activity;
		</today_activity>
		<information use_module="true" use_box="true">
		  $_module_name information;
		</information>
		<last_data use_module="true" use_box="true">
		  $_module_name last_data;
		</last_data>
	</static_item>
</dashboard>
```

Today activity module template
```html
<today_activity>
	
	<today_foot_print>
	<![CDATA[
		<div id="div_FootPrint">
			<div class="el_extra_statistics">
				<div class="el_extra_logo el_foot_print_icon el_gray_background"></div>
				<div class="el_extra_value el_gray_text">
					$_asp_lang foot_print;
				</div>
				<div class="el_extra_title">
					$_asp today_foot_print_value;
				</div>
			</div>
		</div>
	]]>	
	</today_foot_print>			
	
	<today_visit>
	<![CDATA[
		<div id="div_Visit">
			<div class="el_extra_statistics">
				<div class="el_extra_logo el_visit_icon el_gray_background"></div>
				<div class="el_extra_value el_gray_text">
					$_asp_lang visit;
				</div>
				<div class="el_extra_title">
					$_asp today_visit_value;
				</div>
			</div>
		</div>
	]]>			
	</today_visit>			
	
	<today_new_user>
	<![CDATA[
		<div id="div_NewUser">
			<div class="el_extra_statistics">
				<div class="el_extra_logo el_user_icon el_gray_background"></div>
				<div class="el_extra_value el_gray_text">
					$_asp_lang new_user;
				</div>
				<div class="el_extra_title">
					$_asp today_new_user_value;
				</div>
			</div>
		</div>
	]]>	
	</today_new_user>			
	
	<today_new_contact>
	<![CDATA[
		<div id="div_NewContact">
			<div class="el_extra_statistics">
				<div class="el_extra_logo el_contact_icon el_gray_background"></div>
				<div class="el_extra_value el_gray_text">
					$_asp_lang contact;
				</div>
				<div class="el_extra_title">
					$_asp today_new_contact_value;
				</div>
			</div>
		</div>
	]]>	
	</today_new_contact>			
	
	<today_new_comment>
	<![CDATA[
		<div id="div_NewComment">
			<div class="el_extra_statistics">
				<div class="el_extra_logo el_comment_icon el_gray_background"></div>
				<div class="el_extra_value el_gray_text">
					$_asp_lang comment;
				</div>
				<div class="el_extra_title">
					$_asp today_new_comment_value;
				</div>
			</div>
		</div>
	]]>	
	</today_new_comment>			
	
	<today_new_content>
	<![CDATA[
		<div id="div_NewContent">
			<div class="el_extra_statistics">
				<div class="el_extra_logo el_content_icon el_gray_background"></div>
				<div class="el_extra_value el_gray_text">
					$_asp_lang content;
				</div>
				<div class="el_extra_title">
					$_asp today_new_content_value;
				</div>
			</div>
		</div>
	]]>	
	</today_new_content>			
	
	<today_new_active_content>
	<![CDATA[
		<div id="div_NewActiveContent">
			<div class="el_extra_statistics">
				<div class="el_extra_logo el_active_content_icon el_gray_background"></div>
				<div class="el_extra_value el_gray_text">
					$_asp_lang active;
				</div>
				<div class="el_extra_title">
					$_asp today_new_active_content_value;
				</div>
			</div>
		</div>
	]]>	
	</today_new_active_content>			
	
	<today_new_inactive_content>
	<![CDATA[
		<div id="div_NewInactiveContent">
			<div class="el_extra_statistics">
				<div class="el_extra_logo el_inactive_content_icon el_gray_background"></div>
				<div class="el_extra_value el_gray_text">
					$_asp_lang inactive;
				</div>
				<div class="el_extra_title">
					$_asp today_new_inactive_content_value;
				</div>
			</div>
		</div>
	]]>	
	</today_new_inactive_content>			
			
</today_activity>
```

You can check the wonderful architecture of Elanat by looking at the image of the dashboard component and checking its related tags in the default admin template.

**Admin style:** For the style of the admin section, each style is a CSS file that is made to match a template.

**Site template:** Also the site template component is related to the template of the site section of the website. Site template is an XML file that specifies the layout of the HTML tags of the site section, the XML tags of the site template file can support variants.

In the following examples, the ability to support variants in Elanat templates in XML tags is well displayed:

Example 1
```html
<logo use_elanat="true">
<![CDATA[
	<div class="el_inner_left" style="background-image: url('$_elanat ::system site_path;client/image/site_logo/$_elanat ::site site_global_name;.png');">
	
	</div>
]]>
</logo>
```

Example 2
```html
<read_more use_language="true">
<![CDATA[
<div class="el_read_more">
	<a href="$_asp extra_content_url_value;" >
		$_lang read_more;
	</a>
</div>
]]>
</read_more>
```

Example 3
```html
<email_confirm use_elanat="true" use_language="true">
<![CDATA[
	$_elanat ::system mini_header;
	<div class="el_spesial_note">
	<div class="el_spesial_note_left el_logout_image"></div>
	<div class="el_spesial_note_right">
  <div class="el_big_text">-1-</div>
	  <span>$_lang your_email_has_been_accepted;</span></div>
	</div>
	$_elanat ::system mini_footer;
]]>
</email_confirm>
```

**Site style:** Similarly, for the style of the site section, each style is a CSS file that is made to be compatible with a template.

Elanat is a new system that was introduced in May 2023 and until now (September 2023), other than the default template and style, no other items are available; therefore, we do not know how the compatibility between templates and new styles will go in the future! We mean that in this case the taste and preference of Elanat users is important and will determine the fate of compatibility between templates and new styles.

**User:** The user component allows you to manage users; you can add new users and delete or edit existing users.

**View:** The view component is a powerful tool for you to display any part of your website as you like. This component exists in the Elanat core and is located in the appearance system section by default. Each view is activated based on the path parameters and query string you want.

You can create a view using the following match types:

 - Full match
 - None query
 - All query
 - Exist
 - Start by
 - End by
 - Regex

Then you can do the following:

 - Block the location you want from being created and displayed
 - Connect with styles that support views and customize text colors and background colors of styles
 - Choose a style and template for the view
 - Add whatever you want in the head section of HTML pages

For example, you can add a image to the background for some categories, and in another example, remove the left and right locations from the main page.

This component is compatible with styles, and if you use a style that supports common and natural colors, you can change the default colors of styles on the same style.
Common and natural colors include the following:

 - view common light text color
 - view common middle text color
 - view common dark text color
 - view natural light text color
 - view natural middle text color
 - view natural dark text color
 - view common light background color
 - view common middle background color
 - view common dark background color
 - view natural light background color
 - view natural middle background color
 - view natural dark background color

By using the view component in Elanat, you can give the desired display style to different parts of the website and color different parts with different styles.

**Fetch:** Fetch is also one of the Elanat add-ons that includes a component management page. Fetch is a add-on that combines database queries with HTML tags and can be displayed on any page or add-on from the Elanat framework. This add-on can be run without displaying the values and make changes in the database only after running.

The fetch component allows the user to extract database data and then combine it with HTML tags or other values and display these values in any part of the website he wants.

This component is very powerful and practical and does a lot of work.

For example:

 - Show avatars of online users
 - List of latest content by time
 -The list of the latest content based on the number of views
 - List of tags of the week
 - Create rss
 - Create a sitemap
 - Grant temporary access
 - Delete content after display
 - And many other things

The image below shows a fetch that displays the last three contents of the news category:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86pnaw8ro0mfdxjz6mqj.png)

**Patch:** Patch is also one of the Elanat add-ons that includes a component management page. After installing this add-on, it creates a series of changes in Elanat framework and has no page to display.

![Patch component in Elana](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytoas3zc6iqjr0ksewro.png)