Shrud Studios

PHP Date Function

IamShipon1988 — Mon, 20 Apr 2009 01:12:57 +0000

Title: PHP Date Function
Author: Sazzad Hossain
Language: PHP
Summary: Many people began sending me pm’s on how to do certain things in php. Instead of answering all of them, I thought why not create a thread where people can post the basic functions of php. Here I am talking about a very important php function: php date. I use this function for many purpose, but here I’ll just explain the general purpose/use.

php date() - the PHP date() function formats a timestamp to a more readable date and time. The first parameter in the date() function specifies how to format the date/time. It uses letters to represent date and time formats. Some of these formats include:

Important Full Date and Time:

* r: Displays the full date, time and timezone offset. It is equivalent to manually entering date(”D, d M Y H:i:s O”)

Time:

* a: am or pm depending on the time
* A: AM or PM depending on the time
* g: Hour without leading zeroes. Values are 1 through 12.
* G: Hour in 24-hour format without leading zeroes. Values are 0 through 23.
* h: Hour with leading zeroes. Values 01 through 12.
* H: Hour in 24-hour format with leading zeroes. Values 00 through 23.
* i: Minute with leading zeroes. Values 00 through 59.
* s: Seconds with leading zeroes. Values 00 through 59.

Day:

* d: Day of the month with leading zeroes. Values are 01 through 31.
* j: Day of the month without leading zeroes. Values 1 through 31
* D: Day of the week abbreviations. Sun through Sat
* l: Day of the week. Values Sunday through Saturday
* w: Day of the week without leading zeroes. Values 0 through 6.
* z: Day of the year without leading zeroes. Values 0 through 365.

Month:

* m: Month number with leading zeroes. Values 01 through 12
* n: Month number without leading zeroes. Values 1 through 12
* M: Abbreviation for the month. Values Jan through Dec
* F: Normal month representation. Values January through December.
* t: The number of days in the month. Values 28 through 31.

Year:

* L: 1 if it’s a leap year and 0 if it isn’t.
* Y: A four digit year format
* y: A two digit year format. Values 00 through 99.

Other Formatting:

* U: The number of seconds since the Unix Epoch (January 1, 1970)
* O: This represents the Timezone offset, which is the difference from Greenwich Meridian Time (GMT). 100 = 1 hour, -600 = -6 hours

I got the list of characters from http://www.tizag.com/
For the complete list click here

So basically all you have to do is call the date() function. You can accomplish this by simply using the following call-out after your tag or wherever you wish for it to appear.

echo date(”ITEMHERE”); ?>

Replace ITEMHERE with your designated character from the quote box above. If you want to display a normal date enter the following

echo date("M. d, Y"); ?>
Output for this code is the following: Dec. 15, 2007

Shrud Releasing Soon!

IamShipon1988 — Wed, 01 Apr 2009 20:50:54 +0000

Hello valued members,

This e-mail is being sent on behalf of the Shrud Studios staff team to let you all know that Shrud Studios is nearly complete and will be releasing to the public very soon. We would like those who wish to donate templates, scripts, tutorials, etc. to Shrud to do so now. Please note that we will modify your template content to have some text that meets our criteria. Please read this thread before submitting any work:

http://www.shrud.com/forum/viewtopic.php?f=6&t=100

Regards,
Shrud Studios

PS - PureTM will be releasing some cool designs fairly soon!

Text Over Image

IamShipon1988 — Wed, 01 Apr 2009 20:41:03 +0000

Title: Text Over Image
Author: Sazzad Hossain & 2-Job.
Language: PHP
Demo: http://2-job.com/email/
Summary: In this tutorial, we will learn how to create a script that will place text on an image (kind of like a watermark). In this tutorial, we will be using a form which we will use to submit our text. This technique is often used for adding copyright to images and or creating cool image based signatures. To make it easier for us to understand, I will be focusing this tutorial on creating a script that will help us generate a e-mail signature.

Step 1: The Font
First things first, we will need to upload the font we want to use for the script. I use True Type Font Files for the web. It is the most widely used font type so it’s recognizable on almost all operating systems. In this tutorial (and on the demo) I have used a font called “Tahoma.” This is a font found in all windows computers. But since we are uploading an image of it, it will look the same on all operating systems. I have uploaded Tahoma in the zip file below.

Step 2: The Images
In this tutorial I will teach you how to create an e-mail signature. I will be using one form to create 2 images with the same submitted content. For this purpose, I will create 2 e-mail sigs like the ones below. I have included a PSD file for your convenience.
<< aol1.png
<< aol2.png

Step 3: The Form Page
Let’s start with the coding the main page of the script. This page will be the user-end page, meaning that the visitors/users will only see this page. I will split this step into sub-categories.

A. Create a new php based document and call it index.php and open it using your favorite text/code editor.

B. Let’s start off by writing the following codes. Make sure these lines of codes are above all other codes.

Code:

error_reporting(E_ALL ^ E_NOTICE); session_start(); // Start Session $_SESSION["userid"] = $_POST["userid"]; $_SESSION["end"] = $_POST["end"]; ?>

* error_reporting(E_ALL ^ E_NOTICE); will report all errors discovered except for E_NOTICE.
* session_start(); will do exactly as it says. It will start the current session.
* $_SESSION["userid"] = $_POST["userid"]; will use the session ID to remember the last typed userid.
* $_SESSION["end"] = $_POST["end"]; will be used to remember the last typed end (in this case the extension; i.e. .com, .net, .co.uk, etc.).

C. Now we need to insert the layout we are going to use. In this case, I am going to be using a really simple layout that includes the Dogtype, meta and style callout just to demonstrate that anything could go there. Treat this portion like a regular HTML template code.

Code:

AOL SigGen [Shrud]

D. Between the and the tag we will need to include the form. Let’s insert the following codes:

Code:

Enter email: ”>@aol.”>

* will help us recall the last typed userid.
* will help us recall the last typed end (the extension).

E. Notice how I did not yet close the form tag. This is because we still have to display the image. The next set of codes will help input the filled information on our image. Let’s add the following:

Code:

&end=”>

&end=”>

* The above code basically states include the entered text and if not information is entered, automatically input the USERID with username and the END with .com.
** Remember to end the form with an tag.

Step 4: The Backend Work
Now we need to create a series of code that will help us carry out these orders/functions. We have to create a page for each image we wish to write on. It is recommended that the names for the files are the same as the images, however the extension for the files must be php. We can achieve this with the following code:

Code:

error_reporting(E_ALL ^ E_NOTICE); session_start(); header("Content-type: image/png"); if ($_SESSION["userid"]){ $userid = $_SESSION["userid"]; }else{ $userid = $_GET['userid'];} if ($_SESSION["end"]){ $end = $_SESSION["end"]; }else{ $end = $_GET['end'];} $im = imagecreatefrompng(”aol1.png”); $userid_width = imagettfbbox(9, 0, “tahoma.ttf”, $userid); $userid_start = (200 - ($userid_width[2] + 113)); $color = imagecolorallocate($im, 165, 164, 164); imagettftext($im, 9, 0, $userid_start, 16, $color, “tahoma.ttf”, $userid); imagettftext($im, 9, 0, 151, 16, $color, “tahoma.ttf”, $end); imagepng($im); imagedestroy($im); ?>

* $im = imagecreatefrompng(”aol1.png”); is where we input the name of the file. Just replace the aol1.png with the name of your file.
* Wherever you see tahoma.ttf, replace that with your font name.
* $userid_start = (200 - ($userid_width[2] + 113)); - The 200 used in this line is the max allowed width we are going to use. It is also the width of the image we are writing on in pixels.

Step 5: Uploading
We will need to upload the files in the root directory of the folder. The file structure is:
+ Main Directory
+- index.php
+- aol1.php
+- aol2.php
+- aol1.png
+- aol2.png
+- tahoma.ttf

Once you have that done, you are done with writing this script. If you are confused on anything, feel free to visit the official php website and view their manual.

This tutorial follows the Creative Commons License.

Download
imgtext.zip - Includes the complete script, font, images and PSD files. (240.58 KiB)

Create your own wordpress theme (integrate a template into wordpress)

MrTouz — Mon, 16 Mar 2009 10:31:19 +0000

Title: Creating your own wordpress theme (integrating a template / layout into wordpress)
Language: HTML & CSS
Author: Garo Krikorian
Demo: http://www.bluw.net
Time needed: Around 30minutes if your template meets the ‘requirement’

Author’s Note :

Well, this tutorial will help you integrate one of your layouts / templates into wordpress. Understand that their are zillion ways of doing this. This is how I personally do it, how I make it work.

To follow this tutorial you will need some basic HTML & CSS skills. They are not a must but they are really suggested. When I say basic, I mean… knowing div tags, id’s, class’s, opening & closing tags, use of CSS.

1) The rules of integration

When I know the layout I am designing will be used for Wordpress than I make sure my layout follows certain rules.

1 - Your layout must be valid. Now for some people it should not… for me it should, you can not start a good tutorial without a valid layout ! What type ? I personally suggest HTML 4.1 CSS 2.1 (or higher if you read this tutorial after 2009 :P). Yes wordpress is coded xHTML 1.0 but for my own reasons I find xHTML useless… at least for me.

2 - Tableless, Tableless, Tabless. I said it 3 times so you understand it. At first tables should NOT be used for coding layouts. Its a bad habit, so NO tables… use CSS with div’s. Tables are going to mess things up anyways.

3 - At least have one sidebar. It is not a must, it is my must… I use only ONE sidebar… at least ONE. This is to make things easier for me. Not 2 or 3… just ONE. Coding wordpress with 2 3 4 5 6 7 8 9 sidebars is not harder at all but the most common way to do it is with 1 sidebar… so have one.

2) What you need to know

For this tutorial i will be using the theme called CLASSIC as my source, because it is the one that has ‘less’ tweaking and is pretty basic. You can find the CLASSIC theme inside the /wp-content/themes folder inside your WP download.
To start you should have installed Wordpress and have it running good. If you have the .zip than open it and get the CLASSIC theme out or download it from your website so we can start modding it.

(you can install wordpress after you integrated your layout into the CLASSIC theme… but how are you going to test it ? can’t… so have it installed !)

CLASSIC theme is pretty simple, it has few files we are going to use. To make things easier in your head, the CLASSIC theme is one layout separated into pieces. Each one of them is a part of our layout !

3) The pieces we are going to use

header.php : Contains the head of your site (usually from the doc type, style links, header, top navigation. (You might not have a top nav ? it’s ok… don’t put it )

index.php : This is where your actual MAIN content will be, the posts, the pages, the comment links. If you have a division (div) around your main content… well this is where you are going to put it!

footer.php : This will hold the footer of your site, from the closing division… if you opened a container (to center things up…) and also your footer content and the closing and closing

comment.php : This is how your comments are displayed inside your blog. The input fields, but also the comments that are posted… you should modify these tags so the comment boxes… quotes look the same as your site.

sidebar.php : This is your sidebar. This file is a must. You can remove it if you do not have a side bar… but you have to have it… for search boxes… ads… categories…

Below is a ‘fake’ template… pretty much how mine is when they come out of basic coding. I did highlight with colors the different divisions and codes so you know which piece goes in which .php file

title

Now see how the colors are matched ? that’s how i would of done it, of course you might not have a header, or a navigation… but you and ONLY you can determine where everything goes!
Each layouts are different… if your header is a part of your sidebar than put it there… but be careful with your css…

4) So how to do it

Since you are not going to use the CLASSIC layout at all… you need to remove ALL div tags
’s and everything else you are not using (i suggest your navigation on the sidebar uses
’s which will make the coding easier because by default… the side bar inside WP is coded with li’s… you would have to remove to source files and that my friend… is a headache.

Once they are all removed you can start placing your own. This is easy, again, i suggest forgetting about your content right now… your layout should be coded but not have text… it gives you a headache after 5 minutes, when i say CONTENT i mean no fake links, fake ‘lorem ipsum’ text, fake ads… forget about all that… once coded.. put fake stuff if you enjoy it.

So, to make it clear… decide what your header would be and place it inside the header.php and do the same with all other files, see if you coded your layout like the one i did above… (a bit more detailed of course) you just need to know where things are going, copy the footer section of your layout… paste it into the footer.php of your site

It is basically just replacing old code tags by the new ones, to make my personal life easier i try to make my layout pretty much similar to the CLASSIC layout.

Once the replacing is done you can save all. Your layout should be good to go… upload and check it out !

5) Common mistake / error !

Now i will explain an ISSUE that happens… quite a lot with me… actually… ALL THE FREAKING TIME !

- CSS not working
- IMAGES not displayed

Yes it happens quite a lot because what usually people do when they try to ‘integrate’ their CSS files they never put a direct url but only :

But what does that do ? that tells that the CSS file is next to the index.php… you did not define any folder or anything else so it assumes it’s in the same directory… and you did put the style.css next to the index.php which are both inside the CLASSIC folder.
But we are forgetting something that WP does. When it opens your theme it puts your index.php at the root folder of your host. Meaning when we go to your site the theme is not inside /wp-content/themes/classic its at the root folder of your site, but inside the very first folder there are NO style.css (it’s inside the /wp-content/themes/classic) so your site is LOST it can NOT find the style.css.

All that meaning that your style.css should NOT be inside the CLASSIC folder but at the root folder of your site !
__

Now for your images, since your style is not inside the CLASSIC folder… your images should not be ! the /images (or what ever you call your image folder) folder should be next to the style.css. Because what people do is put :

Code: Select all

background-image:url(/images/this.png);

Knowing that the CSS will go to the images folder and finding the this.png file, but if you forgot… your images are inside the /wp-content/themese/classic/ folder !!!

Now for people not wanting to MOVE the CSS and the IMAGE folder… there is a solution :

Code: Select all

And inside your CSS file, when you add a :

Code: Select all

background-image:url(/images/this.png);

You should replace it by :

Code: Select all

background-image:url(http://www.mysite.com/wp-content/themese/classic/images/this.png);

6) Final Note

What i tried to explain inside this tutorial is how the template is organized inside Wordpress. How your template should be organized for a better integration. I tried to highlight the different parts of codes with the different .php files, and tried to explain why a common mistake happens with Wordpress !

Tutorial Survival Guide

IamShipon1988 — Tue, 14 Oct 2008 21:20:17 +0000

Guide to Writing Good Tutorials
By: Sazzad Hossain & Shrud Studios

What is a tutorial?
We all know that the computer presents new concepts and skills through interactive text, illustrations, descriptions, questions and problems. Information is sequenced to build on previously learned concepts, and often provides feedback and guidance. So to keep others upto par and help them understand “how to do” something is what a tutorial is. In short terms, tutorial is a set of ordered instruction that teaches someone something new. Tutorials can be on almost any subject. It can be on how to create a new solar powered motor, write a research paper, to build a robot, or how to survive your wife. But for the sake of “keeping the flow,” on this forum we will keep it relating to the WEB and PROGRAMMING in general.

Know Your Information
I know you have heard this before but this is very important. In order to write a good tutorial, you must know your material. Do you not hate it when you go to class and have to listen to a professor who knows nothing at all about the subject. Why would you want those dedicated members to feel the same way about your writing? Even if you have a bad grammar, no image, or sense of making it appealing, it still makes sense is considered a decent tutorial.

Organization and Steps
A tutorial is used to teach people how to do things “step-by-step.” So if you do not organize your content in a nice manner, how will they learn? Will they not make mistakes? A tutorial needs all the information on the subject in the correct order to help the reader recreate the experience and the item talked about. Include steps to make the life of the reader easier to keep track of things. One good method of writing a tutorial is to include details and images so that the users can compare what they have with what they should have. Please do note that a picture is indeed worth a thousand words and people just love pictures.

Protect Your Work
Although tutorials are generally created to teach the public for free, many sites offer premium service where you are required to pay. I am a man of OpenSource and love to release things for free of charge. But that becomes a problem as others can easily steal my work. To prevent such a thing, I like to include a nice header. In addition to it protecting my work, it will also give the reader a brief information on what I will be writing about. In general, the following items are what I would include in any tutorial:

- Name of the tutorial

- Name of the author

- Tutorial Type (language, subject)

- Skill Level Required

- Authors URL

- Demo URL

- Brief Description

Make It Fun!!!
Make the tutorial fun and not something people would fall a sleep over. Tutorial is meant to teach something not to put someone to sleep.

Same of a “Good” Tutorial
Click here to view the tutorial.

Credits
**How To Write A Good Tutorial. King Tuts. King Tuts: How To Write A Good Tutorial