Difference between revisions of "Replacing the Joomla Native Login Screen With Hello Me Module"

(Creating The Override Files and Folders)
Line 1: Line 1:
 
==Overwiew==
 
==Overwiew==
Because JomSocial is component for Joomla, and it does not have its own user object, many users can't figure out why sometimes registration and login form lead to native Joomla forms when it comes to login handling<br/>
+
Being aJoomla component, JomSocial does not have its own user object and many users can't figure out why sometimes registration and login form lead to native Joomla forms.<br/>
Some Template clubs override the native Joomla login form which by default, should be accessible with this link
+
This can cause users to be out of the sync which usually reflects with missing custom profile fields, or avatars.<br/>
 +
You can easily access these pages via these links:
 +
* For login page
 
<syntaxhighlight lang="php">
 
<syntaxhighlight lang="php">
 
http://yourdomain.name/index.php?option=com_users&view=login
 
http://yourdomain.name/index.php?option=com_users&view=login
 
</syntaxhighlight>
 
</syntaxhighlight>
<br />
+
* For registration page
 +
<syntaxhighlight lang="php">
 +
http://yourdomain.name/index.php?option=com_users&view=registration
 +
</syntaxhighlight>
 
If you visit your site by using this link, in most cases you will be presented with the following screen
 
If you visit your site by using this link, in most cases you will be presented with the following screen
 
:::[[File:Joomlalogin.png]]
 
:::[[File:Joomlalogin.png]]
Line 21: Line 26:
  
 
==Using The Joomla Override==
 
==Using The Joomla Override==
There is one fantastic feature of Joomla still unknown to vast majority, and very under-utilized by many web-admins. It is called simply, [http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core template override]<br/>
+
-- SOON --
This feature that is built into Joomla since version 1.5 and still present to the latest version is here to stay, because it is so powerful thing to have that would be shame to remove it. With it, you can practically change the layout of every component and a module which follows the MVC Joomla standard, and frankly, most of the modern extensions do.
+
 
+
===How Do We Know What File To Override===
+
This is good, yet illusive question. Many people still underestimate the power of non-SEF links when it comes to debugging<br/>
+
If you remember the link we gave you at the beginning of this guide you will notice how easy is to discover what file we should be edit.
+
:::[[File:Comuserslink.png]]
+
* <font color=red>'''option=com_users'''</font> - tells us that we should look into com_users component
+
* <font color=green>'''&view=login'''</font> - tells us that view should be ''login''
+
Lets open the file of interest. Navigate to:
+
'''ROOT/components/<font color=red>com_users</font>/views/<font color=green>login</font>'''<br/>
+
There will be a folder which does not really give us any clue what file to modify
+
:::[[File:Foldercontent1.png]]
+
However, since Joomla uses template files to layout the design of views, all files of interest will be in the '''tmpl''' folder. Open it<br/>
+
:::[[File:Foldercontent2.png]]
+
Obviously, modifying any of this files will work, and will give the desired effect, however, we want to create the override in the main site template so we do not hack the core files and ensure that our customization will remain available even if we update Joomla core
+
 
+
===Creating The Override Files and Folders===
+
Although creating the oerride folder is universally applied to every template, we are going to make this example on '''protostar''' template of Joomla 3<br/>
+
Navigate to: '''ROOT/templates/protostar''' and observe the structure of the folders
+
:::[[File:Protostarstructure.png]]
+
There is a highlighted '''html''' folder, which is actually Joomla override folder and every modern template should have it. If your template does not have this folder, you are free to create one.
+
{{alert|'''TIP''' Make sure you put an empty index.html file in every new folder that you manually create on your site|alert}}
+
Following the non-SEF link of the page we want to create override for will tell us that we want to override <font color=red>com_users</font> component and <font color=green>login</font> view so we will create the new folders within '''html''' override for the component and the view that is to be overridden.
+
'''ROOT/templates/protostar/html/<font color=red>com_users</font>/<font color=green>login</font>'''
+
{{alert|<center>Notice that the structure slightly changed comparing to the core paths. It is all explained in the [http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core Joomla article] about template overrides</center>|alert-danger}}
+
We can now take all the files from '''ROOT/components/com_users/views/login/tmpl''' and copy them to '''ROOT/templates/protostar/html/com_users/login''' override folder
+
 
+
===Editing An Override===
+
It is now safe to try and edit all the files that we have just moved in<br/>
+
Lets start with '''default.php'''. Open the file and observe it.
+
:::[[File:Defaultphptempoverride.png]]
+
The beauty of the PHP is that it tells us everything on English and it is easy to follow the code flow if you start reading it from the top to the bottom. The code in this file simply says, that if user is '''guest''' (not logged in), then load the '''login''' template file. If user is logged in, then load '''logout''' template file.<br/>
+
So, this is not the file we are interested in, but it told us everything we need to know for our task.<br/>
+
Lets remove this file from our override folder.<br/>
+
We wont do anything with '''default.xml''' file either, so lets remove it too. <br/>
+
The point of override folders is to only contain the files that are really overridden. It will make your life easier in the future.
+
 
+
Now when we know that our file is '''default_login.php''', lets open it for editing and remove entire content except the header, jexec check and keep alive defines.. You may also write some text message bellow it to see if its going to work
+
:::[[File:Joomlaoverridehelloworld.png]]
+
Save it and now go to
+
<syntaxhighlight lang="php">
+
http://yourdomain.name/index.php?option=com_users&view=login
+
</syntaxhighlight>
+
<br />
+
The native Joomla login form should be removed and replaced with a '''hello world''' or whatever text you have added in the override file
+
:::[[File:Helloworldlogin.png]]
+
{{alert|<center>'''You have now officially learned how Joomla output can be overridden using built in feature of Joomla itself. We didnt touch a single JomSocial file, nor we are doing anything with Core Joomla files. Using this method, you can easily override every component, and every module that follow Joomla MVC standards'''</center>|alert-success}}
+
 
+
==Adding a Hello Me Module Instead Native Login Form==
+
Open this two files for editing:
+
# '''ROOT/templates/protostar/html/com_users/login/default_login.php'''
+
# '''ROOT/templates/protostar/html/com_users/login/default_logout.php'''
+
Delete '''entire''' content from it and replace it with
+
<syntaxhighlight lang="php">
+
<?php
+
// JomSocial Override to replace native login forms with hellome module
+
defined('_JEXEC') or die;
+
JHtml::_('behavior.keepalive');
+
$modules = JModuleHelper::getModules( 'hellome_override' );
+
foreach ($modules as $module) {
+
$_options = array( 'style' => 'xhtml' );
+
echo JModuleHelper::renderModule( $module, $_options );
+
}
+
?>
+
</syntaxhighlight>
+
<br />
+
You can now go to Joomla Module Manager, and create new [[Hello Me|HelloMe]] module<br/>
+
Assign this module to show on all pages, and '''manually''' type the position name '''hellome_override'''
+
:::[[File:Customposition.png]]
+
Save it and navigate back to
+
<syntaxhighlight lang="php">
+
http://yourdomain.name/index.php?option=com_users&view=login
+
</syntaxhighlight>
+
<br />
+
You should now see HelloMe module there
+
:::[[File:Loggedout hellome.png]]
+
If user now logs in, it will be redirected wherever you have set it in JomSocial configuration<br/>
+
If user manages to come to that link again, when already logged in, he will see the hellome module<br/>
+
:::[[File:Loggedin hellome.png]]
+
Ofcourse, styling here is not the best, we just created a raw override to show you that everything is possible.<br/>
+
We will leave the styling to your imagination
+
  
 
==See Also==
 
==See Also==
 
* [[Customizing Template|Customizing JomSocial Template Using Joomla Overrides]]
 
* [[Customizing Template|Customizing JomSocial Template Using Joomla Overrides]]

Revision as of 03:11, 26 May 2016

Overwiew

Being aJoomla component, JomSocial does not have its own user object and many users can't figure out why sometimes registration and login form lead to native Joomla forms.
This can cause users to be out of the sync which usually reflects with missing custom profile fields, or avatars.
You can easily access these pages via these links:

  • For login page
http://yourdomain.name/index.php?option=com_users&view=login
  • For registration page
http://yourdomain.name/index.php?option=com_users&view=registration

If you visit your site by using this link, in most cases you will be presented with the following screen

Joomlalogin.png

If you login using this form, you will most likely see something like this

Joomlaprofile.png

If you click on the registration link, you will be redirected to native Joomla registration form

Joomlaregistration.png

This is intended behavior, because Joomla is an user-based CMS, designed to work without JomSocial installed, and after all, we are currently on the com_users component, which is not JomSocial, and have nothing to do with it.

JomSocial Redirect Plugin

Since many users do not know or do not want to bother with minor customization and hacking, we provided the Redirect Plugin which should redirect all registration requests to JomSocial's form.
This plugin however, won't do anything if user use Joomla login form to access the site. It will still be presented with native Joomla user page.
Therefore, one can simply create template override, which is more efficient as you don't have to load additional plugins.
remember - Less plugins = faster site load time

Using The Joomla Override

-- SOON --

See Also