How to make a background image into a clickable link

A pretty interesting topic at least for yesterday, for the ticket I was working on.  I am new to CSS and the more I look at the tricks and tips, the more I am liking it. Not to mention, it drives me crazy at times, because all I am doing is fiddling with the code to see, what on earth, would render me the style/output I desire. Anyways, experienced web designers at work says, it is patience and practice that makes you better at CSS.

Alright, now let me jump to the topic. How to make a background image into a clickable link.

This was my situation:

 I had a banner image in home page. This image is mentioned as background-url(“imagename”) in the CSS.  I had to make this clickable and on clicking it, It has to take me to another web page. So I was doing some research on it and came across this brilliant trick.  http://ran.ge/2009/11/11/css-trick-turning-a-background-image-into-a-clickable-link/

My points:

Its not necessary to mention text between the <a> tag and then try hard to text-indent by giving negative values. Not for all cases does negative text indent work. Say, there is many more text and styles in the parent tag ,then it becomes messy, creating a new tag under this div (Eg: a Span or another div) and applying text-indent property only to that new element. Keep the CSS minimal. Too many elements and too many styles on them makes it hard to follow and shows poor design.

C ya :*

Coffee Cake with Vanilla icing

Yet another weekend and not “quiet yet another cake”.  If you love coffee this is for you. If you are not a coffee person, you would still like it because the cake is mosit, rich in flavor and has an interesting taste with vanilla icing to it.

Ok, I had to do quiet some search to get the right kinda coffee  cake I was looking for. Search wasn’t in vain, in fact much rewarding.

Recipe link

http://thepioneerwoman.com/cooking/2009/08/coffee-cake-literally/

My points:

1. I added pecans to the cake and I felt it goes better than almonds.

2. Feel free to replace butter with oil. The original recipe calls for 2 sticks of butter. I used 1/2 stick butter and rest was oil.

3. I wasn’t so much for coffee icing. I felt it gives a too strong coffee taste and would be very saturating . A easy vanilla icing only accentuates the cake’s taste.

4. For Vanilla icing, I used the store bought one. No recipe for that :p Sorry 😉

5. I didn’t mix the batter with electric mixer, just folded them with my spatula, just as the recipe says, until the mixture is even and surprisingly the cake still was moist and soft. Didn’t crumble/break/too touch

My apologies for a very poor pic. As the cake tasted Wowsome, honestly, clicking a pic for the blog didn’t even cross my mind. 

coffee cake with vanilla icing

coffee cake with vanilla icing

C ya :*

Pineapple upside down carrot cake

Upside down cakes! The name in itself is so creative. Being a pineapple lover I had always wanted to bake some pineapple cake. Carrot is an interesting twist to the traditional pineapple upside down cake.

I followed this recipe to T and it turned out awesome. Right amount of sweetness and lots of pineapple and carrot flavor.

My tips:

1. While sprinkling brown sugar on top of pineapple keep away from sprinkling them on corner pineapple slices. Otherwise, when you topple the cake once its done, the edges would look burnt and will not be spongy. Remember brown sugar is to give the taste and color, not to give a charred look or make the cake hard to bite.

2. My cake looked little glossy – Am sure its not because of butter, since its only 1/4 cup. I guess you can add a little less oil than suggested or replace all butter with oil to be not guilty of eating fat

3. Adding more carrot wouldn’t hurt, since it only makes the cake taste better

4. Raisins always go well with carrot cakes. Add them for richer taste

5. Keep low on nuts because it makes it hard to eat – Already you have enough biting to do, I mean the pineapple slices. So more nuts would only be a distraction. It wouldn’t hurt to grate the nuts and add, if u r so particular.

6. I baked for 45 mins on 350 F. I am still skeptical about 50 mins because, the cake might get burnt since brownsugar is at the bottom & is vulnerable to get charred!

That’s it! Its a simple, very tasty & flavorful cake.  Definitely add cinnamon powder. It gives a heavenly flavor! Much better if u powder fresh cinnamon sticks.

This is how mine looked! It tasted much better!

pineapple_carrot_upsidedown

C ya!

:*

Simple PHP CodeIgniter Web Application

Assuming you have set up CodeIgniter and PHP, this post will teach you how to design a simple app using the CodeIgniter framework

What?

Gets the username and age and displays them to the user using CodeIgniter MVC model

How? 

NOTE: Please click open the screenshots to make it readable!

1. Create a html form Welcome1.html and put it under the root of Wamp directory (C:\Wamp\www).

This is a simple html form with 2 text fields and a submit button. Note the form action in line 3. This says, on Submit direct the user to /CodeIgniter_2.1.3/index.php/profile/user/

welcome1

You should be able to access in your machine as http://localhost/welcome1.html

2. Create the model class for the project under Models folder of your codeigniter. I created the Model file profile_model.php under C:\wamp\CodeIgniter_2.1.3\application\models\

This is the Model class for our web application. Model class typically provides data. In our model class we create a function getProfile. It takes two parameters, assigns them to user-defined fields  fullName and age and returns the data as an array. “FullName” => $p1 is in the format Key => Value, where Key is a string (note the double quotes) Full Name and Value is $p1

model

3. Create the Controller class for the project under Controllers folder of your codeigniter. I created the controller file profile.php under C:\wamp\CodeIgniter_2.1.3\application\controllers\

This is the controller class of our application. It extends codeIgniter’s Controller class and has two functions – __construct() and user()

__construct() – Constructor for the class. Will be called when the class is first called. Our application’s construct simply echoes the message “This is the construct”. Thats the one you see in your output page. Typically a construct initializes DB connection and other startup stuff

_user() – A user defined function that first extracts fullname and age from the post method of the welcome1.html form and assigns to variables $p1, $p2. Next, it loads the model profile_model in Line# 13. Next it calls the getProfile method in the model, passing p1, p2 (Extracted username, age from the welcome1.html form) in Line# 14 $profile = $this->profile_model->getProfile($p1, $p2);  The model then returns to the controller, full name and age put together in an array.

Now create a variable $data as an array. Initialize the array using key=>value format. Here i do it as “profile” =>$profile. where the string “profile” is the name I give for the key, it can be anything. This key is going to be used in the view page.

$profile is the array returned by the model class. (Line#17)

load the view profile_view and pass $data array to it (Line# 18)

controller

4. Create the View for the project under Views folder of your codeigniter.  I created the View file profile_view.php under C:\wamp\CodeIgniter_2.1.3\application\views\

This retrieves and displays the Name and Age from the key “profile” which we created in the controller class.

view

 

Run the program

1. open http://localhost/welcome1.html

2. Enter the username and age. Hit Submit

3. Now you will be directed to http://localhost/CodeIgniter_2.1.3/index.php/profile/user/

4. This page displays the output – the full name entered and age. Also it displays a text called “This is the construct”.

 

Setting up CodeIgniter Framework for PHP running on WAMP

Pretty excited to start with CodeIgniter frame work today 🙂 Without wasting anymore time, lets get into the details

What?

CodeIgnite is the MVC framework for PHP. More info on MVC is here

How to Install CodeIgniter?

Get the latest version here. I work on PHP installed through WAMP server. So unzip the CodeIgniter to C:/Wamp/

How to test whether CodeIgniter is working?

open http://localhost/CodeIgniter_2.1.3/  This should display a welcome page as below

codeIgniter_welcome

 

NOTE: The version of code igniter I downloaded while creating this post is 2.1.3 . Yours can be anyother and you can rename it to something simple.

 

 

Wamp Server not starting?

This is a head ache! You install WAMP server and feel its a piece of cake, gear up to get your hands dirty with some PHP programming. and darn! your server icon in the taskbar remains orange. Google crys loud saying the icon has to be green to know that the server is up and running.

Again you search google and find endless comments on Port 80 being used by Skype and asking you to sign out of it. But there are quiet a number of other possibilites

Possibility 1:

1. left click the wamp icon -> Apache-> service -> Test port 80

2. If this comes up with a msg Port 80 used by Microsoft HTTPAPI 2.0, go to Administrative Tools -> Services and STOP the WEB DEPLOYMENT AGENT SERVICE. Make sure you turn off IIS.

3. Restart Wamp server and YaY! There you see the Wamp server icon turning green.

4. Verify by opening the local host page in wamp server (left click wamp server icon-> Local Host). This should now bring up in your browser, info about the wamp server you installed!

Possibility 2:

If you don’t find Web Deployment Agent Service running, don’t loose hope! Just change the port to which Apache is listening, so u need not worry about services running in port 80 like IIS or Skype or anything else…

How do you do it?

1. Go to Wamp->bin->Apache-> Apache2.2.22 <or your version of apache>->conf. Right-click httpd.conf file and search for the word Listen. For me its in Line 45,46. Change Listen 80 (As highlighted in the pic below) to Listen 8080 and save the file.

8080

2. Restart Wamp Server and it should be up and running!

C Ya! :*