Welcome to my blog.
The main purpose of this page is to demonstrate some useful technique in PHP,
Java Script, and CSS.
GROUP Project
Group Project on Genesee Park Blvd SDA Church.
Top of Page
Final Project on Scripts
List of Scripts
- First page for authentication script to validate a user name and a password for a church member to log in in able to change their activities of the week.
This page uses PHP code to read the user name and password from the files that hide in a folder above www folder. Then stores the values in two variables in a wait to be checked later.
LINK >>>Log in to Update Calendar
$user = "";
$pass = "";
$myFilePath="../../church_login/";
$myFileName="login.txt";
$my2FileName="login_pass.txt";
$myPointer =fopen($myFilePath.$myFileName,"r");
$user = fgets($myPointer,11);
echo "";
fclose($myPointer);
$my2Pointer =fopen($myFilePath.$my2FileName,"r");
$pass = fgets($my2Pointer ,11);
echo "";
fclose($my2Pointer ); -
This page has PHP code to check if the user name and password are the right one. If they are then display update calendar form to allow page modification. The unauthorized user will not be allow to see the update page. After the user is successfully log in, clear all cache and unset the related $_POST variables. This to ensure that no unauthorized person can update the page.
LINK>>>Validate Login
$inputname = "";
$inputpass = "";
$user = "";
$pass = "";
$inputname = $_POST['username'];
$inputpass = $_POST['userpass'];
$user = $_POST['userp'];
$pass = $_POST['passp'];
....
if(!strcasecmp(trim($user),trim($inputname))&&!strcmp(trim($pass),trim($inputpass))&&!empty ($user)&&!empty($pass)&&!empty($inputname )&&!empty($inputpass))
{
echo "";
$inputname = "";
$inputpass = "";
$user = "";
$pass = "";
Header("Cache-control: private, no-cache");
Header("Expires: Mon, 26 Jan 2008 05:00:00 GMT");
Header("Pragma: no-cache");
if (isset($_POST['user']))
{
unset($_POST['user']);
}
if (isset($_POST['pass']))
{
unset($_POST['pass']);
}
}//end if password and user name matched
else
{
echo "Sorry. Wrong user name and Password";
echo "Please
Try Again";
if (isset($_POST['user']))
{
unset($_POST['user']);
}
if (isset($_POST['pass']))
{
unset($_POST['pass']);
}
}//
..... - Before a user submit new data or information for calendar page, each input is checked by the following script.
The script will check if an input is empty, if it is; then, do not allow to proceed the update. Also, display a red message on the input to notify the user.
LINK>>>Validate Login
function checkform ( form )
{
$formError = false;
if (form.updateID.value == "")
{
//alert( "In complete Information" );
document.getElementById("updateIDError").style.display = "inline";
form.updateID.focus();
$formError = true;
}
else
{
document.getElementById("updateIDError").style.display = "none";
}
if (form.newtitle.value == "")
{
//alert( "In complete Information" );
document.getElementById("newtitleError").style.display = "inline";
form.newtitle.focus();
$formError = true;
}
else
{
document.getElementById("newtitleError").style.display = "none";
}
if (form.activity_date.value == "")
{
//alert( "In complete Information" );
document.getElementById("activity_dateError").style.display = "inline";
form.activity_date.focus();
$formError = true;
}
else
{
document.getElementById("activity_dateError").style.display = "none";
}
if (form.activity_time.value == "")
{
//alert( "In complete Information" );
document.getElementById("activity_timeError").style.display = "inline";
form.activity_time.focus();
$formError = true;
}
else
{
document.getElementById("activity_timeError").style.display = "none";
}
if (form.newdata.value == "")
{
//alert( "In complete Information" );
document.getElementById("newdataError").style.display = "inline";
form.newdata.focus();
$formError = true;
}
else
{
document.getElementById("newdataError").style.display = "none";
}
if($formError == true)
{
return false;
}
else
{
return true ;
}
}
After an authorized user made changes to a selected schedule, write the changes to the selected file. The file is included in the calendar page and hence the will be updated accordingly.
LINK>>
Action to complete Update
// get the variables passing previously
$updateID = $_GET['updateID'];
$newtitle = $_GET['newtitle'];
$newdata = $_GET['newdata'];
$newdate = $_GET['activity_date'];
$newtime = $_GET['activity_time'];
$newInformation = "
".$newtitle.", Date: "
.$newdate.", Time: ".$newtime."
".$newdata;
$theFileName = selectFile($updateID);
//echo "Update File: ". $theFileName;
//echo "New Information:[".$newInformation;
$writeToResult = writeToFile($theFileName, $newInformation);
?>
//check which file to update
function selectFile($theFile)
{
if($theFile==0)
{
echo "Update Calendar Information";
return "calendar_infor.php";
}
if($theFile==1)
{
echo "Update Calendar 1 Information";
return "calendar1.php";
}
if($theFile==2)
{
echo "Update Calendar 2 Information";
return "calendar2.php";
}
if($theFile==3)
{
echo "Update Calendar 3 Information";
return "calendar3.php";
}
if($theFile==4)
{
echo "Update Calendar 4 Information";
return "calendar4.php";
}
if($theFile==5)
{
echo "Update Calendar 5 Information";
return "calendar5.php";
}
if($theFile==6)
{
echo "Update Calendar 6 Information";
return "calendar6.php";
}
if($theFile==7)
{
echo "Update Calendar 7 Information";
return "calendar7.php";
}
if($theFile==8)
{
echo "Update Calendar 8 Information";
return "calendar8.php";
}
if($theFile==9)
{
echo "Update Calendar 9 Information";
return "calendar9.php";
}
if($theFile==10)
{
echo "Update Calendar 10 Information";
return "calendar10.php";
}
}//end selectFile function
?>
function writeToFile($updateFileName, $theData)
{
//echo "\n \n The file name is: ".$updateFileName."\n";
//echo "\n The data is: ".$theData."\n";
$updateFile = $updateFileName;
$fh = fopen($updateFile, 'w') or die("can't open file");
$stringData = $theData;
$result = fwrite($fh, $stringData);
//echo 'Write success or not:'. $result;
if($result!=0)
{
fclose($fh);
return 1;
}
else
{
//echo "Fail to write";
return 0;
}
}
?>- The recommend us page on the church project allows users to recommend the page to their friends by the use of PHP code.
LINK>>Recommend Us Page
and PHP action
$name =$_POST['yourname'];
$senderEmail =$_POST['senderEmail'];
$recipientEmail =$_POST['recipientEmail'];
$QuestionComment=$_POST['QuestionComment'];
$QuestionComment=htmlspecialchars($QuestionComment);
$headers = "From: $senderEmail\r\nReply-To: $recipientEmail\r\n";
PRINT
"Thank you for recommending Us. ";
mail("$recipientEmail", "Check out this site", "
Please join me to check out this Church web site: http://www.rit.edu/~dchter/GPB_Church
$QuestionComment
",$headers);
Using JavaScript to change the information displayed for each picture.
LINK>>>My Country Page and JavaScript file location is Change Picture Message Script
... onclick="enlargePicture('laos_constructor/images/tradition/newyear_full.jpg');
changeFact('picture_detail','Lao New Year Tradition')"
title="Ceremony New Year Festival"...
..img class = "noBorder" src="laos_constructor/images/tradition/newyear_tb.gif"
name="thumbnail1" alt="Ceremony New Year Festival" ....
.....
function changeFact(thediv,thecontent)
{
//iframe does not work on IE
...
document.getElementById(thediv).innerHTML=''+thecontent+'
';
}- Enlarge thumbnail images and display each image on the same division of the page by using JavaScript and CSS position.
LINK>>>Enlarge Picture
onclick="enlargePicture('laos_constructor/images/tradition/newyear_full.jpg');
....
function enlargePicture(thefullpicture)
{
document.images['full_img'].src=thefullpicture;
document.images['full_img'].width = 400;
document.images['full_img'].height = 350;
}
Top of Page
Week 5/Midterm
Midterm Page + Week 5
>>About my country
Week 4
Poem Page
>> Link to my Poem Page
What did i learn?
- Import multiple external css fileS
- Learn to over-write css class and id
- Learn about css alignment
- Learn about the list of safe fonts and the list of window default font
- I found a way to display ruler in Firefox.
I have taken so much time to find the right position of an object on the screen. Recently (very recently), i just realize that the web developer helper that Prof. told us to use with Firefox has Display Ruler option. With this option, we can get the width, height, x and y positions on the screen in a single mouse action.
To enable this, go to Miscellaneious>Display Ruler. - I found the site to test typography >> typography tester
Before finding this web site, i took so much time trying to choose the right font-family and the right font-size. The web site is a saver for me.
Top of Page
Week 3
Mail Form
>> Link to my Mail Form
The mail form is created by CGI program with the following inputs - the user's name, email address, optional URL and text-input area. The form sends data back to my email with the user's answers.
CSS Zen Garden Critique
One of the best pages from my point of view
Link of the page: http://www.csszengarden.com/?cssfile=175/175.css
- Good Color
- Designing Above the Fold
- Meaningful Logo
- Fast loading time
The color is nice for eyes
The background color is white and bright which is a nice thing for my eyes to read the page content. In addition, a white background is a safe background for the target group, business people.
Designing Above the Fold
The primary message and the indication of what the site is about are displayed on the top left corner which is the first screen area of the page. It has a powerful message that draw users attention. The navigation parts of the site is listed on the left. These elements are presented to users without the need of scrolling. Apart from the navigation parts of the site, there are link areas on the top and the bottom of the page, it catches the user view from either end.
This page has a logo that represents the main idea of the page (Business Page). It gives users the first look and ideas of what the page is going to be about. Therefore, most target users,business related, will probably continue to go down to the page and scan through the content.
Fast loading time
With a simple layout and a minimum graphic, this page loads pretty fast. It will be a lot appreciated by the users who have a slow internet speed. In addition, it fits the site's main purpose - for users to read its content. Having a fast loading page, it will allow users to get the content as a first priority so they can read through it.
The page that i don't think it is a good design
- Unknown first look
- Designing way below the Fold
- Difficult text format to read
- Where is the link item?
- Slow loading time
Despite the fact that this is a good art design page. In my opinion, it is a very user unfriendly page. On the other hand, i would love it if it is a video media kind of website with a link or a brief instruction.Unknown first look
When i saw this site for the first time i did not what it was all about. There is no message to convey the purpose of the site. Then i thought maybe this is the first page of the site and i will have to click on the screen to go to the actual site. Wait a minute, there is no linkable item there.
After having a second thought, i looked through all the over the screen to look for a play button because i thought it could be a video or multimedia page. Unfortunately, none of the above is true.
After having a second thought, i looked through all the over the screen to look for a play button because i thought it could be a video or multimedia page. Unfortunately, none of the above is true.
Designing way below the Fold
The page is designed assuming that users will scroll the page without providing any instructions. It was just luck that i scrolled the page.
Difficult text format to read
After a long scrolling page, i did not cache any of the page content because the text is difficult to read. The background is black so it makes me have to focus my eyes harder. In addition, the screen is small and the text is displayed in two or sometimes three columns. I will probably get sore eyes after reading all those lines.
Where is the link item?
The link item is ,way below, at the bottom of the page which you will have to take time to scroll down the page to discover it.
Slow loading time
The page has a nice art work background but it probably takes a bit of time to load the page.
Top of Page
Week 2
737 index page serves as an index page for my current and future RIT 737 assignment pages. This page uses XHTML and CSS for all formatting. JavaScript and SSI are applied to increase web site's functionality. The page consists of a header division, a footer division, and a main body. The main body is broken into three parts. Part one is a left column use for main links. The middle part or part two is the main screen area. Part three is a right columns use to display some explanation or messages.Both header and footer divisions of the page are included parts from two external files - header.html and footer.html. Having header and footer as an external file will enhance the site's consistence look since all the future pages will have same footer and header looks. In addition, it will minimize coding errors and hence reduce developing time.
Following minor scripts are included:
- A small function to pop up a new window that contains my picture. The function is called loadMyPicture(). The function is stored in breadcrumb.js file.
- A small function to display a path to the current page. The function is called getLocations(). It is the start for a JavaScript Breadcrumb Script which will be implemented in the future. The function is stored in breadcrumb.js file.
- Two SSI variables for the date updated and page last modified.
Top of Page
Week 1
- HTML RecipeHTML 4.01 document with HTML validation. The purpose of this website is to demonstrate the use of DOCTYPE, simple HTML tags and a simple Server Side include tag for the footer.
- XHTML RecipeUnlike the above recipe page, XHTML Recipe page uses XHTML validation. Therefore, the page uses XHTML 1.0 Transitional DOCTYPE. It also consists of CSS and javascript codes.
Top of Page
.jpg)
No comments:
Post a Comment