Shawn McCool » Screencasts

Developing a Website with CodeIgniter Part 4: Admin Site CRUD

Shawn McCool — Sat, 30 Jan 2010 07:25:43 +0000

This screencast continues a series with the goal of documenting the development of a functionally complete site using PHP with the CodeIgniter framework and jQuery for JavaScript UI Improvements including AJAX interactions.

This video covers the development of an admin user management system (CRUD) and includes updates to the authentication system including a method that is used allow only admins into specific sections of the site.

Download the Source Here

Developing a Website with CodeIgniter Part 3: The Login Process

Shawn McCool — Tue, 10 Nov 2009 05:48:51 +0000

This screencast continues a series with the goal of documenting the development of a functionally complete site using PHP with the Code Igniter framework and jQuery for Javascript UI improvements including AJAX interactions.

In this video we utilize the user model that we’ve created to create a login process for our website. We’ll use the code igniter form helper, database library, and session library.

I tried something different and recorded the video in HD. The encoding left the dark background text a bit hard to read, so if I continue to upload HD videos I’ll switch to using a white background. Please let me know if you prefer the old resolution or the HD resolution.

Download the Source Here

Developing a Website with CodeIgniter Part 2: Users Database Table and the User Model

Shawn McCool — Mon, 07 Sep 2009 00:46:01 +0000

This video covers the creation of a database table for storing users and the code igniter model class for interacting with it.

Errata:

I’ve noticed a few errors in the screencast. When errors creep up (and they will) I’ll audit them as they’re discovered and keep this post up to date. Errors will also be updated during the following screencast.

The UpdateUser method “set password” line (line 80) contains the variable $options['userEmail'] instead of $options['userPassword'].
The UpdateUser method is missing the line $this->db->where(‘userId’, $options['userId']); This should be added before the line that contains $query = $this->db->update(‘users’); (line 84)
The AddUser method’s default value is set incorrectly (line 48). It currently shows array(‘userStatus’, ‘active’) where it should read array(‘userStatus’ => ‘active’).

Developing a Website with CodeIgniter Part 1: Development Environment and Framework Configuration

Shawn McCool — Sat, 05 Sep 2009 03:29:28 +0000

This screencast begins a series with the goal of documenting the development of a functionally complete site using PHP with the Code Igniter framework and jQuery for Javascript UI improvements including AJAX interactions.

This video briefly covers the establishment of a local development environment and the configuration of Code Igniter.

Understand the Structure of CodeIgniter

Shawn McCool — Sun, 30 Aug 2009 01:41:19 +0000

In this screencast I attempt to explain the structure and terminology of the Code Igniter MVC PHP development framework. Related posts:Developing a Website with CodeIgniter Part 1: Development Environment and Framework Configuration CodeIgniter at the Nashville PHP meetup March 20th. Developing a Website with CodeIgniter Part 4: Admin Site CRUD Related posts:

AJAX with jQuery: A Simple Login Example

Shawn McCool — Wed, 15 Apr 2009 23:04:23 +0000

In this screencast we explore the jQuery $.post() command in order to create a simple ajax login script that also gracefully degrades and works for users who do not have JavaScript enabled.

You may want to check out my post ‘What Exactly is JSON?’ if you’re not familiar with the JavaScript Object Notation before watching.

AJAX with jQuery: The Beginning

Shawn McCool — Fri, 27 Mar 2009 01:40:53 +0000

This is the first in a series of screencasts that I’m creating to highlight the AJAX functionality present in the open source Javascript framework jQuery. In this screencast I give a brief overview of AJAX as well as delve into our first jQuery command.

* SCRIPT *

AJAX stands for Asynchronous JavaScript and XHTML (or XML, depending on who you ask).

Since you’re watching this you probably already know that it’s a technology that allows us to send and receive data to and from a web server without having to reload our web page.

I’ve already created a project for us and have included the most recent copy of jQuery. So, let’s go ahead and create an index.html file.

Now, I’m going to go ahead and include the jQuery script file and add script tags and a container to work with.

It’s probably important to add that we should never actually mix JavaScript and HTML in the same file. But, we’re going to go ahead and do it here for demonstration purposes.

jQuery comes stock with a handful of powerful AJAX commands. For now, we’re going to focus on the load command. The load command allows us to replace the HTML in a wrapped set with HTML that we’re pulling from another file on our website.

What we’re going to do is we’re going to want to wait until the DOM has loaded by using the ready command and then once the DOM has loaded let’s go ahead and select the console and pull in some HTML from a file called listitems.html. We haven’t actually created this file yet so let’s go ahead and do that.

Let’s go ahead and create an unordered list with the firstList class and we’ll go ahead and copy and paste that and create a second list.

Alright, so we can imagine this as a side navigation or something along those lines. Let’s go back to our index.html file and we’re ready to run.

So, let’s load the page and as you can see it loads in the contents of the listitems.html file.

Let’s go ahead and add a button for more interactivity. We’ll go ahead and name it actionButton. Next, we’ll want to bind the click event of the action button and execute our AJAX load.

Let’s go ahead and reload the page. We have our click me button. We click it and it loads the content.

One of the reasons the load command is so powerful is that it allows us to define a selector. We can actually use a selector to select a subset of content from the listitems.html file. An example would be if we wanted to just select the content from the second list. We could tell it that we want to select anything with the class secondList.

So, we’ll save it and load. Click, and we only pull back the second list. We can drill down even deeper by only selecting the even list items.

As you can see we were able to accomplished a lot with very little code. But, we’re just beginning to scratch the surface of the functionality that jQuery provides for AJAX interactions.

And with that we conclude the first screencast on AJAX with jQuery. My name is Shawn McCool. Thanks for watching.