Hello to all of you web designers out there! If you’re like me, you prefer designing your sites using some form of css, especially when it comes to designing menus. We love the hover over effects, and the customizable-ness of styling both hover and non-hover states of the menu items.

Some weeks ago while finagling with an Expression Engine template, it occurred to me that it would be pretty neat if EE could add a “_selected” next to my menu item’s class name if a visitor was on that particular page. This would effectively give me the power to do things like: make the menu item that corresponds to the current page highlighted while the other menu items stay normal. So, I set off to research the documentation of EE for plugin programming. This is what I’ve created for you to use as well:

Download the Plugin: atilusmenuclass.zip

Here’s how you use it:

Once uploaded, you will be able to add this snippet inside any of your template files:

<a href="/about/" class="{exp:menuclass:item class="aboutlink" selected="_selected" uri="about"}" title="About Page">about</a>

Any parameter you pass for selected will be added trailing your class name you pass for class. The parameter uri is used to specify the page URI for which the plugin will trigger this class name change.

For example, if a visitor is at the address http://yoursite.com/contactpage/ and you have set one of your links assigned with uri=”contactpage” as well as selected=”_selected” and finally class=”contactpagelink”, the plugin will change your link’s class name to contactpagelink_selected. And of course, when the visitor is on a page other than http://yoursite.com/contactpage/ the class name will be displayed as “contactpagelink”.

Output:

If visitor is NOT on http://yoursite.com/contactpage/ :

<a href="http://yoursite.com/contactpage/" class="contactpagelink"/>

If visitor is on http://yoursite.com/contactpage/ :

<a href="http://yoursite.com/contactpage/" class="contactpagelink_selected"/>

07 May | Post by Devin Castro. Filed under Web Design, Open Source, Software, Expression Engine Plugins.

This plugin removes html line breaks, nl’s, p’s, and whitespace before and after comment text. It’s primary purpose is to stop those annoying spammers that like spacing their comments to get noticed.

Like this:
// starts here
<br/><br/><br/><br/>
Some text.
<br/><br/><br/><br/>
//ends here

Will be filtered and returned like this:
// starts here
Some text
// ends here

Download this plugin from Wordpress.org

Copy contents to folder /wp-content/plugins/

17 Apr | Post by Devin Castro. Filed under Wordpress Plugins.

Ok, we’ve created our fancy login system for our site. Now what? How do my members intereact with each other? This bring us back over 5 years ago when MySpace.com first debuted. Every web programmer on earth went “gaga” over how such a simple method used for “friending” another member became so big! Today we have sites like friendster, facebook, and orkut that use the same theory behind virtually friending your friends!

Here’s how they do it:

If Member1 wants to friend Member2, a request is made via a link or action on Member1’s part.

Using a relational database, this is what this request will look like.

Member’s Table (this contains all of our members, it may also contain other information like name, password, and other profile information.)

memberID
1
2

Friend’s Table (This table is updated whenever a member invokes a “friending” action.)

memberID	friendID 	Confirmed
2		1		0

When the member represented by the “friendID” confirms that they would in fact want to be friends with the member represented by “memberID,” then “Confirmed” will be updated to “1″ in place of “0.”

So now, our scripts will have a way to tell if one member is friends with another, how many friends any given member has, how many requests for friends a given member has.

MySQL Snippet for querying the number of friends of a given member

SELECT count(*)
FROM  Friends
WHERE memberID = 1
AND Confirmed > 0;

03 Apr | Post by Devin Castro. Filed under Software, social media.

Social networking applications usually take the form of websites that allow people to share information with other people. To really wrap our minds around the concept of a social networking application, we have to look at it’s purpose. As suggested by the name, the purpose of these applications for the user is to socialize. So process this in your mind: people of a community or network of communities come together in one place (a website) to socialize by: visiting the site, registering, logging in, sharing information with others — How does this work? What does it look like to the programmers behind it? What makes this website tick?

Let’s make up a name. We’ll call our social network, MyParenthood.com — a social network for parents. Great, we have a concept and we have a domain name (in our example we assume we have demand for such a website.) Next step is to enlist the help of some crazy-cool programmers to make our dreams a reality.

Personally, I would start with a screen design. Then I would throw it to the programmers to make the design come alive. The reason I do this is so the programmers have a good picture of the concept. The screen design shows them things like current features and potential future features.

Here’s what our site will hopefully look like:

For obvious simplicity sake, our application will only have 2 features:

• MyParenthood.com will allow members that are stored in a database to login.
• Once logged in, the following message will display: “Welcome, Devin Castro!”
  while my name will be replaced with the user’s name as stored inside a database.

The programmer will first choose a database technology suitable for your application. In our example, I will use MySQL. l then create a table to store users inside of. Databases use tables to store information, similar to an excel spredsheet that contains rows and columns.

This represents the data in our table:

Alrighty, the application’s coding will take the form of 1.) HTML (this controls what people see when they visit your site) and 2.) Dynamic Language (this processes information your users pass to your website e.g. username and password in order to login)

We’ll assume we have the HTML part done. It will look something similar to this:
(Note: this HTML does not represent the styling shown in our first figure.)

Now, the part that people don’t see include things such as:

• Database interaction.
• Form processing.
• Output of HTML.

Here’s a simple snippet of code that will accomplish our goals mentioned earlier:

This code will take the username and password that the user entered on our HTML page, then it will attempt to look for a matching user in our user table. Finally, if there is a match the script will output a welcome message that contains the user’s first name and last name as taken from the database table.

Albeit, this code is very crude, may be buggy, and has some serious security holes. Also, websites that have similar functionality may contain more than only 30 lines… more like hundreds or even thousands of lines if the site does more than a simple login. Professional programming requires consideration to factors such as security, reliability, and scalability.

So there we have it… a somewhat crude, but functional login area for our MyParenthood.com Social Networking website. Of course, no other functionality has been developed as we have not gone through how a social networking application actually allows users to share information with other users. That task involves a bit more complex coding and while this was only a mere example, you can see what the pre- “guts” of a social networking application might look like.

26 Mar | Post by Devin Castro. Filed under Software, social media, Web Basics.

Yesterday, we were working on a typical client site that required us to do the usual HTML/CSS template to wordpress template work… and when it came time to dump in the HTML contents of the site, it came apparent (once again) of how frustrating working with wordpress pages can be.

So, after some intense frustration, I came up with a wordpress plugin that will automatically create html files with the same name as any page created within wordpress (it will also create them within their respective sub-directories.)

Example:

http://www.mydomain.com/parentpage/parentchild/

– will create the directory /pages/parentpage/parentchild.html

Now we can edit parentchild.html and it’s contents will be included within the wordpress page while not compromising the HTML/CSS contained within! Wowee-wow-wow!

Keep in mind that this plugin will know to create the path for the html page when you load the wordpress page in your browser.

Instructions:

Create the a directory called /pages/ within the root location of your wordpress install and CHMOD it with permission 777.

Download atilus-page-include.zip and extract it inside your /wp-contents/plugins/ directory.

Then, in your page.php template file, place this php code where you want the html to be included:

Please email me at devin@atilus.com with any support questions.

26 Feb | Post by Devin Castro. Filed under Wordpress Plugins.