Code With Design » Web Development

Easyworks a new PHP front end framework

Caleb Jonasson — Tue, 22 Dec 2009 17:01:23 +0000

Creating a framework was on the list of things to do and so when getting off a 7.5 hour shift I started working on the base of it. A few hours later and 7 episodes of Boston Legal later I found myself uploading it and running out the door to work another 7.5 hours. The frame work is very basic, it does link to site information, class files, function but it is not a true framework yet.
The framework is still in its V1.0 stage but it does have potential to be something. The idea behind this framework is simple site construction through a header navigation. It is supporting a validating login and register system but it does not yet have the back end coding to make it all happen. To get a copy of it for yourself you can download it here.

.htaccess Simple Protection

Caleb Jonasson — Thu, 15 Oct 2009 18:14:48 +0000

.htaccess files can be used for many things, redirects, password protection, etc. However there is something that some people do not know about htaccess files. The first is that you can only allow a certain IP address to connect with certain areas of the site. The Second is that if you do not set your .htaccess file up right, you may have some serious security flaws down the road.

Having the ability to deny all IP addresses except your own from reaching a specific page can be very handy if you are using a program such as WordPress to host your blog or a Wikigroup. (note that this works with anything that has an admin page, It could be a form or your own PHP login, admin setup.)

Here is the following code that will be inserted into your htaccess.

AuthUserFile /dev/null
AuthGroupFile /dev/null
AuthName “Access Control”
AuthType Basic

order deny.allow
deny from all
# Whitelist home IP address
allow from 72.91.345.213
# whitelist home2 IP adress
allow from 172.19.2.13

The second setup is required so people cannot view your htaccess file directly from their browser. This is a large improvement that will block people from being able to read your file and thus you will be more secure.

Here is the following code that is placed into your .htaccess file.

order allow,deny
deny from all

By: Caleb Jonasson

Intro to HTML: CSS Creating a Style Sheet

Caleb Jonasson — Wed, 30 Sep 2009 19:05:45 +0000

CSS stands for cascading style sheet, this is the document that will contain all of the information required to make your site look more appealing to the people reading it. Some of the things that CSS files can do are as follows: give areas of the page or the page a background, change the font and font color, and manage placement of div tags. Take note that the page created in this example is going to be very ugly and its sole purpose is to give you a better understanding as to how CSS works.

For the following we are going to use this as a layout and I would recommend that you use it as a base structure that you can build your site upon for the duration of this article.

Untitled Document

Code With Design

navigation

navigation links coming in another tutorial.

Header 1

Paragraph text.

Code With Design

On this page we are going to work with styling the div tags. If you look at the code you will notice that the tags aren’t just a simple open and closing tag. These look differently because the div tags are named. This is important because the style.css file needs to know what to do with the separate content.

You are also going to notice that in the head of the file there is a link to the style sheet. If you where to put your pages into a separate folder you would have to change the link because it is relative. You can also call on it through a URL.

If you need to push the link back use ../ before style.css

Now that we have gone over how to properly link to a style sheet it is time to take a look at what an actual style sheet. The beginning of a style sheet will contain some simple code then will start to stylize the body. All of the content within the style.css sheet will be named as divs and other parts of content such as p for paragraph or hover for content with a mouse over. The attributes that go with these separate sections are placed within curly bracers.

@charset “utf-8″;
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 900px;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
}
#header {
background: #ffffff;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0;
padding: 10px 0;
}
#sidebar1 {
float: right;
width: 200px;
background: #ffffff;
padding: 15px 10px;
}
#mainContent {
margin: 0 250px 0 0;
padding: 0 20px;
}
#footer {
padding: 0 10px 0 20px;
background:#ffffff;
}
#footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

Because I intend on linking an image to this page I want to make sure that the image will not have a border when I mouse over it. So in this demo I will first add an image that is linkable to the index.php page. The code looks like this.

Place the code into the main content div of your page and preview the page before changing the CSS so you know what the browser will want to do automatically. Now that you can see the large blue lines around the image you can place this code into the style.css page. As long as the code is not placed inside of another attribute it will work, it is a good idea to keep the separate styles close together based on where they come on the page so you may want header first then content followed by sidebar then footer.

#mainContent img{
float:left;
border: 0px;
text-decoration:none;
}

Because the CSS entered above has a hash sign followed by the content section and a space with “img” typed after; the following effects will only apply themselves to images inside of the main content. If you would like all of the images to display no border then you would have to enter the following code.

img {
border: 0px;
}

This is a very important technique when styling a page and it comes in handy quite often. If I wanted the paragraph to be indented 20 pixels and the header to only be indented 10 pixels I would use a very similar method.

#mainContent h1,h2,h3{
padding-left: 10px;

}

#mainContent p {
padding-left:20px;
}

In order to give the page some boarders we could use the simple code.

#container {
border: 1px solid #444444;
}

Now you should have a simple understanding as to how CSS files can effect your document and one of the great things about them is that you can easily style all of the pages on your website by just linking back to the style sheet. This way if you need to change the look of something all you need to do is update the style.css file.