Matt says :

I am just concerned though about the link for “hide” if JS is disabled it does not function? Maybe if you created the link with jQuery as well, and added it in, then it would be more accessible.

Now even though there’s not a lot of people out there who don’t have javascript enabled, I think they should be considered. Though Matt’s idea of adding the link through JS is good, there’s an easier way.

What we’ll do is simply hide the link with CSS and then show it with Javascript. If people have got javascript turned off, they’ll never see it! And something tells me people with javascript turned off, won’t go snooping through your source code and wonder why they’re not seeing that link.

So how do we do it?

#top { display: none}

In my example, I’m not only hiding the link, I’m also hiding the container. You could, offcourse, only hide the link.

And how does our new slider.js code look like?

$(document).ready(function() {

// the div that will be hidden/shown
var panel = $(“#box”);
//the button that will toggle the panel
var button = $(“#top a”);
var button_container = $(“#top”);
// do you want the panel to start off collapsed or expanded?
var initialState = “expanded”; // “expanded” OR “collapsed”
// the class added when the panel is hidden
var activeClass = “hidden”;
// the text of the button when the panel’s expanded
var visibleText = “hide”;
// the text of the button when the panel’s collapsed
var hiddenText = “show”;

//—————————
// don’t edit below this line,
// unless you really know what you’re doing
//—————————

button_container.show();

if($.cookie(“panelState”) == undefined) {
$.cookie(“panelState”, initialState);
}

var state = $.cookie(“panelState”);

if(state == “collapsed”) {
panel.hide();
button.text(hiddenText);
button.addClass(activeClass);
}

button.click(function(){
if($.cookie(“panelState”) == “expanded”) {
$.cookie(“panelState”, “collapsed”);
button.text(hiddenText);
button.addClass(activeClass);
} else {
$.cookie(“panelState”, “expanded”);
button.text(visibleText);
button.removeClass(activeClass);
}

panel.slideToggle(“slow”);

return false;
});
});

That’s all there is to it!

However, the script started off from a hidden div that you want to show, instead of hiding a box that’s there. I started fiddling with it and before I knew it, I broke it. Nice going, Bram. Smooth.

The script was completely unobtrusive, which means there’s no javascript in your actual html. That part I really liked, but the script had some major downsides too: if you knew nothing about jQuery, you had to use the accompanying HTML else it wouldn’t work either. So I decided to rewrite the whole thing and make my own script! Still, credit to ifoh designs for coming up with the idea!

So what do you need to get it working in the first place?

• offcourse the latest jQuery version
• the jQuery cookie plugin by Klaus Hartl

Let’s start off with some basic HTML. What we need is a box to hide and a link to hide it! I’m just pasting something here, but you can offcourse whip up something yourself!

(I’m not gonna post the html in here, just visit the links and view the source)

When you click the hide link now, you can see nothing happens. You’re simply taken to the same page with a # behind it. We’re gonna fix that now! Let’s add some jQuery love, like you would before you read this.

As you can see, our script now works! Yes! When you click the link, the #box div closes. Click it again, and there it is again! Merely toggling away.

How does it work, you might ask?

$(document).ready(function() {
	$("#top a").click(function() {
		$("#box").slideToggle();
	});
});

As simple as that. But you knew that offcourse.

However, there are some downsides to the current version.

• Close it and then hit refresh. It’s open again.
• Once you click it, you end up with # at the end of your url. Not the pretiest thing.
• Close it. See how our link stays exactly the same?
• Imagine we want to start off with our box hidden. Changing the CSS to display:none is easy now, but imagine you gotta start digging through 100 of lines of CSS.

But, no worries because all those things are covered with this script!

All our previous downsides are now fixed. Our box stays closed, there’s no # at the of the url, no matter how many times you click the link. The text of the link even changes and a class is added if you want to add different styling. Even the fourth downside is covered in the script!

So how does it look?

$(document).ready(function() {
        // the div that will be hidden/shown
	var panel = $("#box");
	//the button that will toggle the panel
	var button = $("#top a");
	// do you want the panel to start off collapsed or expanded?
	var initialState = "expanded"; // "expanded" OR "collapsed"
	// the class added when the panel is hidden
	var activeClass = "hidden";
	// the text of the button when the panel's expanded
	var visibleText = "hide";
	// the text of the button when the panel's collapsed
	var hiddenText = "show";
        //---------------------------
	// don't    edit    below    this    line,<
	// unless you really know what you're doing
	//---------------------------</p>
	if($.cookie("panelState") == undefined) {
		$.cookie("panelState", initialState);
	}
	var state = $.cookie("panelState");
	if(state == "collapsed") {
		panel.hide();
		button.text(hiddenText);
		button.addClass(activeClass);
	}
	button.click(function(){
		if($.cookie("panelState") == "expanded") {
			$.cookie("panelState", "collapsed");
			button.text(hiddenText);<
			button.addClass(activeClass);
		} else {
			$.cookie("panelState", "expanded");
			button.text(visibleText);
			button.removeClass(activeClass);
		}
		panel.slideToggle("slow");
		return false;
	});
});

Paste that lot in your <script> tags (you could offcourse put it in a separate .js file), change the configuration at the top to your needs and you’re good to go!

Move on to the next page if you want to know how the whole thing works.

I have adjusted my library a little so you can initialize it, setting redirects as you please. Even more, it now automatically uses any auth.php config files too. This was really easy and I thank xwero for helping me figure it out, over at the CodeIgniter community.

All we need to do is add 2 more class variables, an extra method and let the construct expect an array. Doing this makes our library look like.

Note: I deleted functions that remained the same, so don’t just overwrite everything!

<?php if (!defined('BASEPATH')) exit('No direct script access allowed'); 

class Auth {

	var $CI 			= NULL;
	var $index_redirect	= '/admin';
	var $login_redirect	= '/admin/login';

	function Auth($props = array())
	{
		$this->CI =& get_instance();

		// Load additional libraries, helpers, etc.
		$this->CI->load->library('session');
		$this->CI->load->database();
		$this->CI->load->helper('url');

		if (count($props) > 0)
		{
			$this->initialize($props);
		}
	}

	/**
	 * initialize class preferences
	 *
	 * @access	public
	 * @param	array
	 * @return	void
	 */
	function initialize($props = array())
	{
		if (count($props) > 0)
		{
			foreach ($props as $key => $val)
			{
				$this->$key = $val;
			}
		}
	}

	/**
	 *
	 * This function redirects users after logging in
	 *
	 * @access	public
	 * @return	void
	 */
	function redirect()
	{
		if ($this->CI->session->userdata('redirected_from') == FALSE)
		{
			redirect($this->index_redirect);
		} else {
			redirect($this->CI->session->userdata('redirected_from'));
		}

	}

	/**
	 *
	 * This function restricts users from certain pages.
	 * use restrict(TRUE) if a user can't access a page when logged in
	 *
	 * @access	public
	 * @param	boolean	wether the page is viewable when logged in
	 * @return	void
	 */
	function restrict($logged_out = FALSE)
	{
		// If the user is logged in and he's trying to access a page
		// he's not allowed to see when logged in,
		// redirect him to the index!
		if ($logged_out && $this->logged_in())
		{
			redirect($this->index_redirect);
		}

		// If the user isn' logged in and he's trying to access a page
		// he's not allowed to see when logged out,
		// redirect him to the login page!
		if ( ! $logged_out && ! $this->logged_in())
		{
			$this->CI->session->set_userdata('redirected_from', $this->CI->uri->uri_string()); // We'll use this in our redirect method.
			redirect($this->login_redirect);
		}
	}
}

/* End of file: Auth.php */
/* Location: application/libraries/Auth.php */

How does this work? When you load a library, the Loader class automatically scans for a config file with the same name as your class. So when we add auth.php to our config folder, we can pass the index_redirect and login_redirect variables to our library when we load it.

On one of my applications, my config file looks like this:

<?php
	$config['index_redirect'] = '/general';
	$config['login_redirect'] = '/log/in';

/* End of file: auth.php */
/* Location: application/config/auth.php */

If you don’t like using config files, you could set that array in your method and use it when loading the Auth library, or when your autoloading the library, you could use the initialize() function.

What functionality will our library have? Users accessing restricted pages will see a login screen if they’re not logged in, once logged in they’ll be redirected to the page where they were, or simply see a standard page. That’s about it for this tutorial, though adding things like user groups, restrictions etc… could all be added later. Maybe stuff for a later tutorial?

I’ll copy/paste bits of code from my own (simple) auth library and then explain what they do. So at the end of this tutorial you will have a working library.

For starters, let’s quickly rethink how we used to do this kind of stuff with procedural PHP. What I used to do was set a $_SESSION variable, most of the time $_SESSION[‘loggedin’] = true; or something like that. If it was false, or not set, I would check if cookies were set with the username and/or hashed password. Or I would check if the submit form was submitted. I would process that data and see if a valid user entered his/her name and password. It was then but a case to create an index page that checked for that session variable to display the login form or the actual content. Probably not the safest way, but it worked like a charm.

With CodeIgniter and the MVC approach, things aren’t that different. But, they can be a little confusing at first. I know they were for me, that’s why I’m writing this tutorial.
Before we start, let me just say I’m presuming some things:
- You have some knowledge of PHP and you grasp some basic Object Oriented PHP lingo, so you won’t have to ask “Excuse me, but what does ‘construct’ mean?”.
- Comes with the previous one: you at least know what CodeIgniter is. If you don’t know what CI is, I suggest you first go read the user guide, which is excellent by the way.
- You use a mysql database to store your users and their passwords. If you haven’t got a user table yet, but you’re planning on using one, here’s some SQL to help you create a table. It also adds a standard user, named User with the password Applepie.

CREATE TABLE `users` (
  `id` int(11) NOT NULL auto_increment,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;

INSERT INTO `users` SET `username` = 'User', `password` = 'Applepie';

Okay, your still here. Your users need to login to see certain pages, so you’ll offcourse need a controller.

<?php
class Admin extends Controller {

	function Admin()
	{
		parent::Controller();
	}

	function index()
	{
		// Show some fancy stuff, like a dashboard
		// OR, just use index as a placeholder for another, 'standard', method, like so:
		$this->news();
	}

	function news()
	{
		// Post some news items
	}

}
?>

We could add some lines code to all of our methods that check for a session variable (because that’s what we’ll use here too), and then decide to display the actual page or a login view. But we’d have to repeat it in every method and if we’d have to change it, we’d have to change it in every method. That’s not very DRY, is it?

You know what we’ll do? Let’s create an additional method, which sole function will be displaying and processing the login form. If we’re not logged in, we can redirect to it. So let’s add our login method.

<?php
class Admin extends Controller {

	function Admin()
	{
		parent::Controller();

	}

	function index()
	{
		// Show some fancy stuff, like a dashboard
		// OR, just use index as a placeholder for another, 'standard', method, like so:
		$this->news();
	}

	function news()
	{
		// Post some news items
	}

	function login()
	{
		$this->load->view('login');
	}
}
?>

and our view file could look like this:

<h2>Please log in first</h2>
<form action="/index.php/admin/login" method="post">
<!-- as you can see, the action refers to the same page -->
<p>
	<label for="username">Username: <br />
	<input type="text" name="username" value="" id="username"  /></label>
</p>
<p>
	<label for="password">Password: <br />
	<input type="password" name="password" value="" id="password"  /></label>
</p>
<p>
	<input type="submit" name="submLogin" value="Log In"  />
</p>
</form>

For the sake of shortness, I won’t include validation for this form, this is easy enough to figure out yourself.

So far for displaying the form, on to the next bit: processing it!

Again, for the sake of shortness, I’m not including any cookies either. If you want to store the username and password in cookies, this is easy enough to do yourself.

Let’s rewrite our login method so it can process the data from the login.

function login()
{
	if ($this->input->post('submLogin') != FALSE)
	{
		$login = array($this->input->post('username'), $this->input->post('password'));
		if($this->auth->process_login($login))
		{
			// Login successful, let's redirect.
			$this->auth->redirect();
		}
		else
		{
			$data['error'] = 'Login failed, please try again';
			$this->load->vars($data);
		}
	}
	$this->load->view('login');
}

Whoa, whoa. $this->auth? I skipped a step, don’t worry. If you would submit your form now, you’d get a pretty error saying it can’t find the process_login method or the auth library. That’s because ‘auth’ is the library we’re going to create. CI can’t know what’s not there yet. We’ll do that in a second. First, let’s change a few things:
Start with changing your login view so it looks like this.

<h2>Please log in first</h2>
<?php
if(isset($error))
{
	echo "<p>$error</p>";
}
?>
<form action="/CI/index.php/admin/login" method="post">
<!-- as you can see, the action refers to the same page -->
<p>
	<label for="username">Username: <br />
	<input type="text" name="username" value="" id="username"  /></label>
</p>
<p>
	<label for="passw">Password: <br />
	<input type="password" name="password" value="" id="passw"  /></label>
</p>
<p>
	<input type="submit" name="submLogin" value="Log In"  />
</p>
</form>

Now your users will see the error message if they enter a wrong username or password.

Also, let’s add the following line to your controller construct:

$this->load->library('auth');

It’ll throw an error for now because the library isn’t created yet, but we’ll do that on the next page.

Okay, on to the fact at hand: when looking at wpcandy’s source code, I saw this

10 Plugins to Improve the WordPress Admin
10 Plugins to Improve the WordPress Admin

Now, that’s not really pretty I thought. So how could we clean this up? I know! Let’s replace the text with javascript. That way stuff will degrade nicely when JS and/or CSS is off.

Allright, so we want to write

This will be our title

But we want it to become

This will be our titleThis will be our title

As you can see, I left out the <a> tags, seeing as I wouldn’t need them. So, with a little bit of javascript we could change this text.

Note: I’m using jQuery on my site, because it’s better than Mootools and Prototype (at least that’s what I think)

$(document).ready(function() {
var hline = $(‘h2′).text();
var replace = ‘‘ + hline + ‘‘ + ‘‘ + hline + ‘‘;
$(‘h2′).html(replace);
});

What this code basically does is:

1. When the document is ready to be manipulated
2. Get the text from all h2 elements (you could place any element here, even css selectors)
3. Build the string to replace the text with.
4. Replace the text of each h2 element

This is a quick ‘n dirty solution, probably there’s better ways of doing this, I just don’t care about it. It works and that’s what counts. As you also probably noticed, I added <em> tags to the first line, as I realised during coding I’d need that extra tag.

So now we got our correct html setup. On to the CSS!

h2 {
font-size: 1.6em;
margin: 20px 0;
font-family: “Trebuchet MS”, “Lucida Sans”, Arial, sans-serif;
color: #aec364; // light color
position: relative;
}
h2 em {
font-style: normal;
position: absolute;
display: block;
z-index: 2;
}
h2 span {
position: absolute;
display: block;
left: 1px;
top: 1px;
z-index: 1;
color: #7fa200; //darker color
}

So, this CSS is pretty straightforward I’d think. Style your h2 in the h2 selector, NOT the em tag, as your headline wouldn’t be styled if JS was turned off! I just gave it some size, margin and a light green color. We also need to set it’s position to relative, as we’ll use position:absolute on the em- and span-elements.
Next piece of CSS, the em-element: we don’t need it in italics, so we set the font-style to normal and we set the position to absolute and display to block.
Last, we style the span-element: same goes for our em-element: position: absolute, display: block, but we move it one pixel down and to the left, creating the shadow effect. If you’d have a look now at your headline, you’d see it works, except for the shadow showing on top of the lighter text. To fix this we set a z-index for our em and span element. You can pick any number you’d like, just make sure to set the z-index of your em higher than that of your span.

That should do the trick!

Have a look at the demo!

I’ve tested this in the following Windows browsers and found it working:

• Firefox 3.0
• Opera 9.5
• Safari 3.1.1
• Internet Explorer 7.0

Haven’t tested it on IE6, I’m guessing it won’t work, so I should probably add some conditional to the JS: if IE6, don’t execute. Someone reported to me in the comments that it does work. Huzzah!

Downside of this method: when you select text and copy paste it, your headline gets copied twice. Really not sure if that one’s possible to fix. Or that important.