Taking advantage of web languages basics

I’ve been asked a lot of times “Based on what skills is a web developer defined?”. That’s pretty hard to answer, a web developer is usually seen as someone who can deal with a project’s both front-end and back-end work, that obviously insinuating the developer’s skills in both design and programming, but when questioning what languages should one know specifically, there’s no official answer. As an example though, when companies are looking to hire a web developer, they’re usually expecting skills in: (x)HTML / CSS / JavaScript / jQuery / PHP / MySQL, either just a few from those or more.

But tell you what, everyone has to start somewhere, right?
When you dig more in the web design world using just HTML and CSS, you start feeling the need for more control, or, for the lack of a better term, the need for more power! And the good news is that you don’t really need to learn other programming languages at an advanced level to take advantage of some of their great features.

So let’s take a look at some of them:

The include function (PHP)

There are numerous times when you repeat a part of your code endlessly throughout the pages of a website (i.e. footer region, menus etc), but what if you wake up later that those regions need some modifications? You’ll end up modifying most of your pages.
To solve this, separate parts of your code that are the same across your pages into individual files and include them as you please in your pages using include, thus, having just one file to modify making changes on multiple pages.
To use include, your files need to end in the .php extension instead of .html so the server would be ready to expect PHP code, and then just type:

Here’s a little demo to download, where I’ve used ‘include’ to include the footer region on three individual pages:

Download

Page redirect (PHP)

To make a fast redirection from a page to another, we can use PHP’s header function:


<?php
  header( 'Location: http://www.newaddress.com' );
?>

<?php

header( 'Location: http://www.newaddress.com' );

Previewing the above example, you’ll notice how the link from home.php goes towards page1.php, though it will redirect the user to page2.php

Things to know:

your document must start with the redirect code, no code or text should be before it;
your files containing PHP’s redirect code must have the .php file extension.

The load function (jQuery)

Here’s an alternative to PHP’s include function, using jQuery!
The syntax is: $(“target”).load(“source_file.html”);

Since we’re using jQuery code, we’re going to wrap our code into <script> tags and in a .ready function to have our code run when the page has loaded completely:


<script type="text/javascript">
  $(document).ready(function() { // run the code when the page has loaded 100%

    $("target").load("source_file.html"); // insert content from source_file.html to target

  });
</script>

$(document).ready(function() { // run the code when the page has loaded 100%

$("target").load("source_file.html"); // insert content from source_file.html to target

});

</script>

(“target”) stands for the element, class or ID we want the content to be inserted.
(“source_file.html”) stands for the file we want to get content from.

Now, The difference with jQuery from PHP’s include function, is that it’s inserting what’s inside the <body> element.

Let’s take the example below:


<html>
	<head>
		<title>Footer</title>
	</head>
	<body>
		<p>This footer is loaded with jQuery from a separate external file called footer.html</p>
	</body>
</html>

<html>

<head>

<title>Footer</title>

</head>

<body>

<p>This footer is loaded with jQuery from a separate external file called footer.html</p>

</body>

</html>

Preview

If we were to insert that page using jQuery, all it would insert would be the <p> element, namely, what’s inside the body element.
What makes jQuery a better option to use when inserting blocks of code into your pages, is that you can be specific and add whatever part or element you want from a web page, and it’s quite easy to do so.
I’ve covered more details about it in my ‘jQuery tips & tricks’ title.

To finish this up, I’ve loaded the content from footer.html into the .footer class, which in our case, it’s a div.

index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Load function - jQuery</title>
		<script type="text/javascript" src="jQuery/jquery-1.4.2.js"></script>
		<link rel="stylesheet" href="css/style.css" type="text/css" />
	</head>
	<body>
		<ul id="menu"><li><a href="home.html">Home</a></li><li><a href="about.html">About us</a></li><li><a href="contact.html">Contact</a></li></ul>
		<div class="layout">
			<div class="header"><p>Header<br/>Home page</p></div>
			<div class="left"><p>Left side<br/>Home page</p></div>
			<div class="right"><p>Right side<br/>Home page</p></div>
			<div style="clear: both;"></div>
			<div class="footer">
				<script type="text/javascript">
					$(document).ready(function() {
						$(".footer").load("footer.html");
					});
				</script>
			</div>
		</div>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Load function - jQuery</title>

</head>

<body>

<ul id="menu"><li><a href="home.html">Home</a></li><li><a href="about.html">About us</a></li><li><a href="contact.html">Contact</a></li></ul>

<div class="header"><p>Header<br/>Home page</p></div>

<div class="right"><p>Right side<br/>Home page</p></div>

$(document).ready(function() {

$(".footer").load("footer.html");

});

</script>

</div>

</body>

</html>

Preview

footer.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Footer</title>
	</head>
	<body>
		<p>This footer is loaded with jQuery from a separate external file called <em>footer.html</em></p>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Footer</title>

</head>

<body>

<p>This footer is loaded with jQuery from a separate external file called <em>footer.html</em></p>

</body>

</html>

The download contains all files, including the css and the jQuery library.

The hide & show functions (jQuery)

With jQuery, it’s very easy to manipulate and animate your HTML elements, in this case, I’ll show you how easy it is to hide and show any element at will.
Let’s say you have a form and you’d like to display the submit button only if they accept your terms and conditions.

Consider the following example:


<html>
  <head>
    <title>Subscribe!</title>
  </head>
  <body>
    <form name="tos" action="">
      <input type="radio" class="disagree" name="option" checked="checked" />I disagree
      <input type="radio" class="agree" name="option" />I agree
      <input type="submit" class="submit" name="submit" value="Subscribe" />
    </form>
  </body>
</html>

<html>

<head>

<title>Subscribe!</title>

</head>

<body>

<input type="radio" class="disagree" name="option" checked="checked" />I disagree

<input type="radio" class="agree" name="option" />I agree

</form>

</body>

</html>

Preview

The logic of this little operation is pretty simple, we tell jQuery to detect when one of the radio buttons are clicked and hide or show the submit button.
By default, I’ve made the “I disagree” radio button to be checked, so for starters let’s make the submit button be initially hidden.
We insert all jQuery code within a <script> element <script type=”text/javascript”>CODE HERE</script> and add it in the HEAD section, just as how we add regular javascript, of course, it can be added inside the body element as well.


<script type="text/javascript">
  $(document).ready(function() {
    $('.submit').hide();
  });
</script>

$(document).ready(function() {

$('.submit').hide();

});

</script>

Don’t panic! It may seem mind bugling at first with all those non-sense mathematical chars haha but it’s really simple and I’ll explain why:

$(document).ready(function() {


  /* jQuery_Code_Here */

});

Almost all jQuery code is written inside that function and you’ll see it a lot, because all it does is to run your code when the DOM has loaded completely, in other words, it says “hey, when all the page elements have loaded 100%, run my code”.
So what we really have so far, is just the hide(); function line, and it’s that simple to hide an element: $(‘class_name_here’).hide();

Now all that’s left is to show it when the user clicks “I agree” and hide it back when the user might change his mind and reselect “I disagree”.


<script type="text/javascript">
  $(document).ready(function() {
  $('.submit').hide();

  $('.agree').click(function() { 
  $('.submit').show(); 
  }); 

  $('.disagree').click(function() { 
  $('.submit').hide(); 
  }); 

});
</script>

$(document).ready(function() {

$('.submit').hide();

$('.agree').click(function() {

$('.submit').show();

});

$('.disagree').click(function() {

$('.submit').hide();

});

</script>

We have added two more functions, one where we told jQuery to show the submit button when a user clicks on the “I agree” button, namely, the one which has the .agree class. And another function where we basically reversed the actions and told jQuery to hide the submit button when user clicks on the “I disagree” radio button, again, the one with the .disagree class.

You see, jQuery finds and selects HTML elements similar to how CSS does and that should give you a very good start! 😛

And.. here’s the final code with comments:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>ToS validation - jQuery</title>
		<script type="text/javascript" src="jQuery/jquery-1.4.2.js"></script>
		<script type="text/javascript">

          $(document).ready(function() { /* when do document is ready, run the following code */

            $('.submit').hide(); /* find the html elements with class .submit and hide them */

            $('.agree').click(function() { /* when the html element with .agree class is clicked, run the following code */
              $('.submit').show(); /* find the html elements with class .submit and display them */
            }); /* end of "ON CLICK" function */

            $('.disagree').click(function() { /* when the html element with .disagree class is clicked, run the following code */
              $('.submit').hide(); /* find the html elements with class .submit and hide them */
            }); /* end of "ON CLICK" function */

          });

        </script>
	</head>
	<body>
		<form name="tos" action="">
		  <input type="radio" class="disagree" name="option" checked="checked" />I disagree
		  <input type="radio" class="agree" name="option" />I agree
		  <input type="submit" class="submit" name="submit" value="Subscribe" />
		</form>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>ToS validation - jQuery</title>

$(document).ready(function() { /* when do document is ready, run the following code */

$('.submit').hide(); /* find the html elements with class .submit and hide them */

$('.agree').click(function() { /* when the html element with .agree class is clicked, run the following code */

$('.submit').show(); /* find the html elements with class .submit and display them */

}); /* end of "ON CLICK" function */

$('.disagree').click(function() { /* when the html element with .disagree class is clicked, run the following code */

$('.submit').hide(); /* find the html elements with class .submit and hide them */

}); /* end of "ON CLICK" function */

});

</script>

</head>

<body>

<input type="radio" class="disagree" name="option" checked="checked" />I disagree

<input type="radio" class="agree" name="option" />I agree

</form>

</body>

</html>

Normally, there’s a more logical and optimized way to do the above in jQuery, but I preferred not to get too technical since some of the readers might not have tasted jQuery yet.

Things to know:

You need to load the jQuery library onto your pages in order to run jQuery code, if you do not know how, I’ve explained how here: Approaching jQuery.

The available code downloads already have the jQuery library included, but I still recommend you to check with http://jquery.com and make sure you use the latest stable version.

I can’t mention in this article all the possible tips & tricks you can use and I’ll probably continue it with a few more parts soon.

Bottom line, you can increase your web development greatly by just learning a few tricks from some of the remarkable web programming languages out there!

So tell me, what are the various tricks you feel the need to apply within your projects?

Post Views: 1,461

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

3 thoughts on “Taking advantage of web languages basics”

Pingback: Approaching jQuery for the first time « Dev Ingredients
Frank says:

October 12, 2010 at 10:32 AM

indeed its best one knows the terminology and a basic understanding of the overall technology used in web development, commonly used in team-projects, tasks would be better communicated to on-going assignments

1. Catalin says:
  
  October 12, 2010 at 8:07 PM
  
  Exactly! Knowing the works around of your team mates will definitely improve the workflow

Taking advantage of web languages basics

The include function (PHP)

Page redirect (PHP)

The load function (jQuery)

The hide & show functions (jQuery)

Catalin

3 thoughts on “Taking advantage of web languages basics”

Leave a Reply Cancel reply

Featured Posts

Subscribe to Blog via Email

The include function (PHP)

Page redirect (PHP)

The load function (jQuery)

The hide & show functions (jQuery)

Share this:

Catalin

3 thoughts on “Taking advantage of web languages basics”

Leave a Reply Cancel reply

Members area

Featured Posts

Subscribe to Blog via Email