Main Menu

Sample Code/Site Maps

A sitemap is the backbone of a project and shows a visual representation of the site’s structure. Generally you will design and structure your website in a hierarchical style. As we all know, almost all websites have a home page then there are other pages that are linked to it by a navigation bar or some links.

It’s recommended to keep your sitemap simple. If you have quite a few categories, then apply some levels to connect these pages together. At this point we are not using the site text or images; we only use pages names and links.

Site Map

Hosting Architecture Drupal

image

The hosting architecture consists of a series of shuttle servers storing cached content, a file server and a dual database cluster. Page requests are routed through a Cisco Load Balancer. The balancer identifies a shuttle server that’s “open” for serving the input based on the number of requests it’s processing at that time.

Java Architecture N-teir

teir graph

Some Code Samples

CSS3 Animations

With CSS3, we can create animations which can replace Flash animations which can be displayed in mobile devices.

CSS3
JaymeHolmes

 

Code

#animated_div
{
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
-o-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;
-webkit-animation-iteration-count: infinite;
}

 

CSS3 Transitions

Mouse over the element below:

CSS3
JAYME

 

Code

.animated_div
{
width:60px;
height:40px;
background:#92B901;
color:#ffffff;
position:absolute;
font-weight:bold;
font-size:15px;
padding:10px;
float:left;
margin:5px;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-webkit-border-radius:5px;
-o-transition-property:width,height,-o-transform,background,font-size,opacity;
-o-transition-duration:1s,1s,1s,1s,1s,1s;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
border-radius:5px;
opacity:0.4;
}
.animated_div:hover
{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
width:90px;
height:60px;
font-size:30px;
}

 

The HTML 5 <video> Element

<video width="480" height="320" controls>
<source src="PaakoVid1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>.

Example

 

MySQL PHP code sample

This simple example shows how to connect, execute a query, print resulting rows and disconnect from a MySQL database.

<?php
// Connecting, selecting database
$link = mysql_connect('mysql_host', 'mysql_user', 'mysql_password')
or die('Could not connect: ' . mysql_error());
echo 'Connected successfully';
mysql_select_db('my_database') or die('Could not select database');

// Performing SQL query
$query = 'SELECT * FROM my_table';
$result = mysql_query($query) or die('Query failed: ' . mysql_error());

// Printing results in HTML
echo "<table>\n";
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "\t<tr>\n";
foreach ($line as $col_value) {
echo "\t\t<td>$col_value</td>\n";
}
echo "\t</tr>\n";
}
echo "</table>\n";

// Free resultset
mysql_free_result($result);

// Closing connection
mysql_close($link);
?>

CakePHP framework MVC

image

CONTROLLER

<?php
class BooksController extends AppController { function list($category) { $this->set('books', $this->Book->findAllByCategory($category)); }
function add() { ... ... }
function delete() { ... ... }
... ... } ?>

MODEL

?php
class Book extends AppModel {
}
?>

VIEW

<table> <tr> <th>Title</th> <th>Author</th> <th>Price</th> </tr>

<?php foreach ($books as $book): ?> <tr> <td> <?php echo $book['Book']['title']; ?> </td> <td> <?php echo $book['Book']['author']; ?> </td> <td> <?php echo $book['Book']['price']; ?> </td> </tr> <?php endforeach; ?>

</table>

JavaScript Form Validation

(enter content without @)

Email:

<script>
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form> THANKS!

SQL Queries

CREATE TABLE student (id INTEGER PRIMARY KEY , name TEXT, age INTEGER);

INSERT INTO student (id, name, age) VALUES (‘1’, ‘alan’, 28);

insert into student (id, name, age) values (‘2’, 'amy', ‘26’);
insert into student (id, name, age) values (‘3’, 'bob', ‘27’);
insert into student (id, name, age) values (‘4’, 'chris', ‘28’);
insert into student (id ,name, age) values (‘5’, 'dan', ‘26’);

SELECT * FROM student;

The result of this query will be a display of all rows present in the table.

ID Name Age
1 alan 28
2 Amy 26
3 Bob 27
4 Chris 28
5 Dan 26

SELECT * FROM student ORDER BY age;

Will give you:

ID Name Age
2 Amy 26
5 Dan 26
3 Bob 27
1 alan 28
4 Chris 28

SELECT COUNT(1) FROM student;

SELECT id , name , MAX(age) FROM student;

DELETE FROM student WHERE name = ‘alan’;

SELECT * FROM student WHERE name LIKE ‘d%n’;

 

These are just a few examples. I can easily adapt to your own methodologies. I am a team player and work well with others. :)