Atilus Internet Marketing & Web Development

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 admin. Filed under Expression Engine Plugins, Open Source, Software, Web Design.

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 admin. 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 admin. Filed under Software, Web Basics, social media.