I recently finished work on IndyGreekFest.org (Old Site), and am in my reflective period that follows every project. One issue that I ran into with this site is the organization of images on the site.
Several sections of the website are basically image galleries; food, media, etc. It would be nice if I could upload images into folders and organize them by the page in which they are embedded. Unfortunately, with WordPress, this isn't possible.
WordPress started as a simple blog software, and while it's doing an admirable job slowly transforming itself into a full CMS, it's not there yet. The way it handles images is a prime example of this. Currently, there is a single media folder, in which all uploaded images go. WordPress each month, a new folders is made by wordpress inside the media folder. All images uploaded that month go in there. Additionally, when viewing the images, there is a single list of images. One can't view folders.
It would be nice to fix this. I have sketched out several user interfaces which would incorporate folders. A real fix would require updating the core, though, which I'm not really prepared to do. A plugin, however, I think is within my current capabilities. A plugin will not be able to full accomplish my goals, but it will let me start. So tonight, I am going to write a simple Hello World plugin to teach myself the basics. Having created several themes in the past, it shouldn't be too difficult.
From there, I can start figuring out how to go about adding folders to WordPress.
Showing posts with label PHP. Show all posts
Showing posts with label PHP. Show all posts
Saturday, August 3, 2013
Thursday, May 23, 2013
Storing and Retreiving Dates - PHP
I had a bit of free time over the past week, and I started working on the final section I promised to convert to CMS for the CESAC website. This section involves the annual career fair, and to save down on the number of variables I looked for static relationships. The first thing that jumped out at me were dates.
For each career fair, there are four dates that need to be dealt with. Early registration, company info sessions, career fair, and post-fair interviews. The nice thing about these is that the latter three have a static relationship. The info sessions are always the day before the fair, and the interviews are the day after. Really then, only two dates need to be stored. This does pose an additional challenge of finding the next day and previous day of a specified date, but it's worth it to cut the inputs down by half. Less to store, less code, and less chance for user screw up.
The question then became, how do I best store the dates to save space and use the most efficient code in conversion for display. In previous sections of the CESAC website I'd stored dates as three separate numbers. Example:
Not elegant, because one needs three inputs instead of 1, and three columns in the SQL table instead of 1.
I started looking for a better way and found a few ideas, none of which I really liked. I considered an idea of creating a single large number which would then be converted mathematically into the final three numbers. These three would then be converted using PHP date() function into the final display form. Example:
I still didn't like this, because it required some complicated mathematical code, plus a second step of the date() function. I finally gave up on storing as a number, and looked into characters. Storing as:
This might be able to plug directly into date(), saving time. In the process of testing I discovered that if the input format was changed into '2013-9-18' (which makes more sense from a logical perspective), it could indeed be placed directly into date(), saving considerable time. Success for step 1!
This left me with the issue of figuring out how to get the next/previous day. I was hoping to avoid doing some custom function writing. It would require an array of the max days in each month, to figure out if the next day was actually the 1st. Plus a math function to figure out leap years. I was saved from this by the internet, and I found that the php function strtotime() could do it for me!
The outputs into the correct format, and does the math for me, no matter what is the specified date. the final code, after pulling the raw data with a query, ends up being:
Clean, concise, and with half the columns used up for storage.
For each career fair, there are four dates that need to be dealt with. Early registration, company info sessions, career fair, and post-fair interviews. The nice thing about these is that the latter three have a static relationship. The info sessions are always the day before the fair, and the interviews are the day after. Really then, only two dates need to be stored. This does pose an additional challenge of finding the next day and previous day of a specified date, but it's worth it to cut the inputs down by half. Less to store, less code, and less chance for user screw up.
The question then became, how do I best store the dates to save space and use the most efficient code in conversion for display. In previous sections of the CESAC website I'd stored dates as three separate numbers. Example:
September 18th, 2013 becomes: month = 9, date = 18, year = 2013
Not elegant, because one needs three inputs instead of 1, and three columns in the SQL table instead of 1.
I started looking for a better way and found a few ideas, none of which I really liked. I considered an idea of creating a single large number which would then be converted mathematically into the final three numbers. These three would then be converted using PHP date() function into the final display form. Example:
September 18th, 2013 becomes: date = 09182019
I still didn't like this, because it required some complicated mathematical code, plus a second step of the date() function. I finally gave up on storing as a number, and looked into characters. Storing as:
September 18th, 2013 = date = '9-18-2013'
This might be able to plug directly into date(), saving time. In the process of testing I discovered that if the input format was changed into '2013-9-18' (which makes more sense from a logical perspective), it could indeed be placed directly into date(), saving considerable time. Success for step 1!
This left me with the issue of figuring out how to get the next/previous day. I was hoping to avoid doing some custom function writing. It would require an array of the max days in each month, to figure out if the next day was actually the 1st. Plus a math function to figure out leap years. I was saved from this by the internet, and I found that the php function strtotime() could do it for me!
$previousDay= date("F dS, Y",strtotime($specifiedDate." -1 day"));
The outputs into the correct format, and does the math for me, no matter what is the specified date. the final code, after pulling the raw data with a query, ends up being:
$displayDateInfo = date("F dS, Y",strtotime($dateCF." -1 day"));
$displayDateCF = date("F dS, Y",strtotime($dateCF));
$displayDateInt = date("F dS, Y",strtotime($dateCF." +1 day"));
$displayDateReg = date("F dS, Y",strtotime($dateReg));
Clean, concise, and with half the columns used up for storage.
Monday, October 15, 2012
Dynamic CSS
So for a long while I've wanted to be able to dynamically update CSS. This is especially useful in creating a dynamic Wordpress theme framework. I've finally figured out a way to do so, and it's really simple. There are three steps.
First, rename your CSS file from '.css' to '.css.php'.
Next, (and this might be obvious), update the link in your HTML file from ...
At the top of your CSS document, insert this:
And now you can put in whatever CSS you want statically, plus insert PHP variables the same as you'd do with HTML.
Static:
Semi-Static
Dynamic
Step 1:
First, rename your CSS file from '.css' to '.css.php'.
style.css
style.css.php
Step 2:
Next, (and this might be obvious), update the link in your HTML file from ...
... to ...
Step 3:
At the top of your CSS document, insert this:
<?php
header("Content-type: text/css; charset: UTF-8");
?>
And now you can put in whatever CSS you want statically, plus insert PHP variables the same as you'd do with HTML.
Static:
body {
background-color:rgb(200,230,255);
margin:0;
padding:0;
}
Semi-Static
body {
background-color:<?php echo 'rgb(200,230,255)'; ?>;
margin:0;
padding:0;
}
Dynamic
body {
background-color:<?php echo bg_color_light; ?>;
margin:0;
padding:0;
}
Tuesday, July 24, 2012
Remove Query From URL Using PHP
I had some free time the past two days, so I've been working on finishing up the the CESAC members area. While I had the Add New Members functionality complete, adding the Edit Existing Member was more interesting.
Given that it's both A, an obscure small site, and B, already password protected, I'm not putting all that much effort into security. Mostly I'm trying to idiot proof it rather than prevent a determined hacker. As such, on pages that should only be accessed in pattern, I'm just grabbing the referrer and validating it against what the previous page should be.
This is fine, until you get start using a single edit page to edit any member. This involves using a query in the URL, the ?ID=somenumber. And this plays hells with my validation. So what is the best way to remove the query? I googled and found a few answers, but all of them use complex filtering, or splitting the URL into pieces and then rebuilding. And since it's rebuilding, the parts that you should include have to be defined. This limits what type of URL you can use without throwing an error.
Instead of building, I'd rather subtract. I'd rather remove the query and leave everything else the same. To this end, the code below solves the problem quite nicely.
First we grab the initial full URL. We then break it into an array. And finally, we replace the query with nothing, essentially subtracting it.
Given that it's both A, an obscure small site, and B, already password protected, I'm not putting all that much effort into security. Mostly I'm trying to idiot proof it rather than prevent a determined hacker. As such, on pages that should only be accessed in pattern, I'm just grabbing the referrer and validating it against what the previous page should be.
This is fine, until you get start using a single edit page to edit any member. This involves using a query in the URL, the ?ID=somenumber. And this plays hells with my validation. So what is the best way to remove the query? I googled and found a few answers, but all of them use complex filtering, or splitting the URL into pieces and then rebuilding. And since it's rebuilding, the parts that you should include have to be defined. This limits what type of URL you can use without throwing an error.
Instead of building, I'd rather subtract. I'd rather remove the query and leave everything else the same. To this end, the code below solves the problem quite nicely.
$referer = $_SERVER['HTTP_REFERER'];
$url = parse_url($referer);
$referer = str_replace('?'.$url['query'],'',$referer);
First we grab the initial full URL. We then break it into an array. And finally, we replace the query with nothing, essentially subtracting it.
Monday, July 9, 2012
Misc Updates
Been nearly 2 weeks since I last touched this blog. You might notice a new name though. No longer do you have to type in .blogspot between the name and .com. 1and1 was having a weekend special, URLs for $0.99, so I picked up thephilosophicalgeek.com. A small thing, but it makes me happy.
Catstache is finally fully official as well, we now have an operating agreement and a bank account, so we can finally start our first project. Additionally I've been picking up some work for TKOSEO, which has been nice. It'll be my first legit paycheck since December.
In other news, I mentioned several weeks ago that I was going out. And while things haven't been perfect, she hasn't told me to jump in a lake yet, so that's good! I'm going to see the new Spiderman movie with her later this week; I'm looking forward to it.
I'm going to try to start posting some things about Wordpress here soon. The stuff I've been doing for TKOSEO has been theme building from scratch, which has involved a lot of backend work. I've learned more about Wordpress in the past two weeks than any time before combined, and my first theme has a custom backend menu page that can change all sorts of options.
Hopefully I'll have time to start writing up some of the basics here. There are many advanced tutorials on the internet. But very few basic ones; everyone assumes the reader is familiar with Wordpress development.
Anyway, hopefully we won't have any more 2 week gaps here. Depends on time, as does everything.
Catstache is finally fully official as well, we now have an operating agreement and a bank account, so we can finally start our first project. Additionally I've been picking up some work for TKOSEO, which has been nice. It'll be my first legit paycheck since December.
In other news, I mentioned several weeks ago that I was going out. And while things haven't been perfect, she hasn't told me to jump in a lake yet, so that's good! I'm going to see the new Spiderman movie with her later this week; I'm looking forward to it.
I'm going to try to start posting some things about Wordpress here soon. The stuff I've been doing for TKOSEO has been theme building from scratch, which has involved a lot of backend work. I've learned more about Wordpress in the past two weeks than any time before combined, and my first theme has a custom backend menu page that can change all sorts of options.
Hopefully I'll have time to start writing up some of the basics here. There are many advanced tutorials on the internet. But very few basic ones; everyone assumes the reader is familiar with Wordpress development.
Anyway, hopefully we won't have any more 2 week gaps here. Depends on time, as does everything.
Saturday, May 26, 2012
Web Development on Windows
As I've mentioned before, I've gotten spoiled as a Purdue student. Since we're provided with webspace on a root server that we can map to Windows as a networked drive, I can just edit files in a seemingly local folder. It makes for easy updating.
Since I'm no longer at Purdue, I have to use a VPN to gain access to this networked drive. This still works, but it's incredibly slow. Think 2KB/s speed. Slow to the point of being really unusable. Really the only way I've been able to do thinks is by creating mirrored folders locally, updating the local files, and then starting a sync and letting it run for a while, while I go do something else.
Additionally, my local machine isn't a web server, meaning that PHP files don't work. The browser will open them and display whatever HTML there is, but it will also display the PHP as the actual PHP code.
So today in the couple hours I have before heading out to a meeting, I've decided to set up a PHP web development environment. The other tech guy who was going to be working with me on KollegeKareer had mentioned it was easy if I found the right thing, and after looking around I think I've got what he was talking about. WAMP Server, standing for Windows/Apache/MySQL/PHP. I'm installing now, and we'll see if it works.
UPDATE:
Well after cleaning two hurdles, I have gotten it all working. WAMP comes with no instructions unfortunately. And from Googling, it seems that a LOT of people had both problems I had. The first is that Windows machines come with a server that's already running, from Microsoft. You either have to disable it, or change it to a different port. I found a Youtube video that explained changing the ports so that both can run together. Then I started getting an 403 Access Denied error. Turns out that WAMP comes with an Apache installation that is locked down. You have to go in and find a config file to unlock it.
That said, it's working now! w00t.
Since I'm no longer at Purdue, I have to use a VPN to gain access to this networked drive. This still works, but it's incredibly slow. Think 2KB/s speed. Slow to the point of being really unusable. Really the only way I've been able to do thinks is by creating mirrored folders locally, updating the local files, and then starting a sync and letting it run for a while, while I go do something else.
Additionally, my local machine isn't a web server, meaning that PHP files don't work. The browser will open them and display whatever HTML there is, but it will also display the PHP as the actual PHP code.
So today in the couple hours I have before heading out to a meeting, I've decided to set up a PHP web development environment. The other tech guy who was going to be working with me on KollegeKareer had mentioned it was easy if I found the right thing, and after looking around I think I've got what he was talking about. WAMP Server, standing for Windows/Apache/MySQL/PHP. I'm installing now, and we'll see if it works.
UPDATE:
Well after cleaning two hurdles, I have gotten it all working. WAMP comes with no instructions unfortunately. And from Googling, it seems that a LOT of people had both problems I had. The first is that Windows machines come with a server that's already running, from Microsoft. You either have to disable it, or change it to a different port. I found a Youtube video that explained changing the ports so that both can run together. Then I started getting an 403 Access Denied error. Turns out that WAMP comes with an Apache installation that is locked down. You have to go in and find a config file to unlock it.
That said, it's working now! w00t.
Sunday, April 29, 2012
SQL Insertion Update
In regards to my post on Friday about SQL Insertion, I've been playing around with it and found some interesting things. The reason I never noticed a need for the fix before is that some implementations of PHP auto correct it. They automatically add backslashes to any character that could break the input, such as apostrophes and quotations. Unfortunately, I still don't know how to figure out if that correction is in place except for manual testing.
The server hosting the CESAC site doesn't use auto correction, while the servers hosting our Purdue ICS sites do. The question will be how to figure it out with a code check so that I only correct when it's needed. I'll update this post if I figure out how.
EDIT:
Got it. Turns out that when using the POST method for forms, a backslash is added to the three special characters: apostrophe, quotation mark, and backslash. This is because these three characters are used in the SQL insertion statement. They are then stripped when being added to the SQL. When an implementation of PHP has magic_quotes_gpc turned on, nothing happens to these backslashes. When magic_quotes_gpc is turned off, they are removed. The way then to test is a simple if statement, which returns a 1 for on and 0 for off.
if(get_magic_quotes_gpc(void)) { }
Additionally I found a better way to fix the problem if it needs fixing. I was using str_replace before, but that only works for apostrophes and backslashes, not quotations. I found a way to fix the problem specifically however. There is a function in PHP which does exactly what is needed. It adds back slashes to each of the three characters. The code ends up being:
if(get_magic_quotes_gpc(void)) {
$title = $_POST["title"];
$content = $_POST["content"];
}
else {
$title = addslashes($_POST["title"]);
$content = addslashes($_POST["content"]);
}
The server hosting the CESAC site doesn't use auto correction, while the servers hosting our Purdue ICS sites do. The question will be how to figure it out with a code check so that I only correct when it's needed. I'll update this post if I figure out how.
EDIT:
Got it. Turns out that when using the POST method for forms, a backslash is added to the three special characters: apostrophe, quotation mark, and backslash. This is because these three characters are used in the SQL insertion statement. They are then stripped when being added to the SQL. When an implementation of PHP has magic_quotes_gpc turned on, nothing happens to these backslashes. When magic_quotes_gpc is turned off, they are removed. The way then to test is a simple if statement, which returns a 1 for on and 0 for off.
if(get_magic_quotes_gpc(void)) { }
Additionally I found a better way to fix the problem if it needs fixing. I was using str_replace before, but that only works for apostrophes and backslashes, not quotations. I found a way to fix the problem specifically however. There is a function in PHP which does exactly what is needed. It adds back slashes to each of the three characters. The code ends up being:
if(get_magic_quotes_gpc(void)) {
$title = $_POST["title"];
$content = $_POST["content"];
}
else {
$title = addslashes($_POST["title"]);
$content = addslashes($_POST["content"]);
}
Friday, April 27, 2012
SQL Insertion
Earlier this Spring I build an online login section for the CESAC website, so that future webmasters wouldn't have to touch the code to just put in a quick announcement update.
It worked well, until yesterday I tried putting in an update, and nothing happened. I got no PHP error, instead the PHP went through the Insertion and then passed over to a success page, but didn't insert.
Given that yesterday evening I turned in my final project of the semester, this afternoon I had time to sit down and go through the code line by line (not as bad as it seemed, the submit page was only 20ish lines). It took me a good two hours, but I finally figured out the cause. Whenever a string that I was inputting contained an apostrophe, it would screw up the SQL insertion. It wouldn't cause a problem with the PHP, which is why I wasn't getting an error.
I was inserting using variables, and used apostrophes to contain each variable, ex: ... '$month', '$date' ... So whenever the string had an apostrophe, it ended the variable, or so it thought. And ended up really messing up the statement.
Turns out SQL has a quick fix for this. Placing a backslash ( "\" ) in front of an apostrophe tells the SQL to treat it as a character, instead of a limiter. So the solution was simple really. I had to use str_replace to replace all apostrophes with double apostrophes. $content = str_replace("'","\'",$content);
Success!
It worked well, until yesterday I tried putting in an update, and nothing happened. I got no PHP error, instead the PHP went through the Insertion and then passed over to a success page, but didn't insert.
Given that yesterday evening I turned in my final project of the semester, this afternoon I had time to sit down and go through the code line by line (not as bad as it seemed, the submit page was only 20ish lines). It took me a good two hours, but I finally figured out the cause. Whenever a string that I was inputting contained an apostrophe, it would screw up the SQL insertion. It wouldn't cause a problem with the PHP, which is why I wasn't getting an error.
I was inserting using variables, and used apostrophes to contain each variable, ex: ... '$month', '$date' ... So whenever the string had an apostrophe, it ended the variable, or so it thought. And ended up really messing up the statement.
Turns out SQL has a quick fix for this. Placing a backslash ( "\" ) in front of an apostrophe tells the SQL to treat it as a character, instead of a limiter. So the solution was simple really. I had to use str_replace to replace all apostrophes with double apostrophes. $content = str_replace("'","\'",$content);
Success!
Saturday, February 4, 2012
Date Auction Nominating
CESAC hosts a date auction each year, for charity. And each year, we ask CE students to nominate the students they want to be auctioned off. We then tally up the nominations, and ask the top 10 men and women. If one says no, we move to the next person on the list.
The problem is that to do this, we have students write down names on a piece of paper, and then one CESAC members sits in front of Excel for several hours tallying them all up. I've decided to try and address this (even though I'll be gone by the time the next Date Auction takes place).
The idea is, we have a laptop set up, and students come in, type in the name of the student they are nominating, and then click submit. What I hope to do is get access to the CE database of CE students, so that the PHP can quickly check it, match the name entered vs the list, and validate that it really is a CE student. If it's not, the PHP would grab the 5 closest last names, and give an error message, along with the possible corrections.
I did the first step today, creating the portal. Put in some pictures from past CE events, and made sure that it would fit on any screen and look right, which took a bit of time. The next step is getting access to the CE database, which will have to wait until Monday.
In other news, I've finished overhauling the main CESAC website, so it's now up to code. Should be possible to look into widening it now, and even trying out different styles and looks. That I might pass off to the next guy though.
The problem is that to do this, we have students write down names on a piece of paper, and then one CESAC members sits in front of Excel for several hours tallying them all up. I've decided to try and address this (even though I'll be gone by the time the next Date Auction takes place).
The idea is, we have a laptop set up, and students come in, type in the name of the student they are nominating, and then click submit. What I hope to do is get access to the CE database of CE students, so that the PHP can quickly check it, match the name entered vs the list, and validate that it really is a CE student. If it's not, the PHP would grab the 5 closest last names, and give an error message, along with the possible corrections.
I did the first step today, creating the portal. Put in some pictures from past CE events, and made sure that it would fit on any screen and look right, which took a bit of time. The next step is getting access to the CE database, which will have to wait until Monday.
In other news, I've finished overhauling the main CESAC website, so it's now up to code. Should be possible to look into widening it now, and even trying out different styles and looks. That I might pass off to the next guy though.
Saturday, January 28, 2012
The Wonder of PHP
One of the sites that I manage is for the Civil Engineering Student Advisory Council, CESAC. I didn't design the site, but I have done improvements over the last couple years. None recently though. I lost motivation to do more, because A, I wasn't getting paid, and B, it seemed like no one was using the site anyway.
Fast forward to several days ago. I was showing one of the new CESAC members the site, since he'll be taking over when I leave in a year. And to put it frankly, he embarrassed me into starting work on it again. So I pulled out my list of things that needed work, and with a couple things that he added, began in on it yesterday and today.
One big thing was the footer. Every page has a footer, with copyright info, and a Page Last Update timestamp. But when the site was designed, the designer decided that it would be a good idea to have future webmasters scroll to the bottom of the webpage every time it was updated, and manually write in the time and date.
When one has to update multiple pages, that gets quite tedious. So first I created an iframe with the footer in it. I then opened every page, deleted the footer, and placed in it the iframe. Took a while, but simple enough. However, that left me with a problem. Unless I wanted it to be a Site Last Updated timestamp instead of page specific, it wouldn't work.
So I pulled out my PHP knowledge. I figured, there has to be a way that PHP can check the date that the current page was last updated. All files, html included, have Date Created and Date Modified information attached. And I was right, PHP can do that. Enter the second problem. I wanted the full page that users were viewing, not the iframe. So the PHP had to find the date modified of the parent document. Not possible.
I started looking for ways around, and finally checked what the referrer is on an iframe. Lo and behold, it's the parent document, every time. So all I had to do was put it together. PHP grabs the full URL of the parent page. Then it cuts off the top part down to just that file name, as well as any folder it's in, then grabs the date modified, and displays it. It won't have to ever be touched again, it's accurate for every page, and if I need to change it, I change one file, and it's fixed for the entire website.
PHP is wonderful.
Fast forward to several days ago. I was showing one of the new CESAC members the site, since he'll be taking over when I leave in a year. And to put it frankly, he embarrassed me into starting work on it again. So I pulled out my list of things that needed work, and with a couple things that he added, began in on it yesterday and today.
One big thing was the footer. Every page has a footer, with copyright info, and a Page Last Update timestamp. But when the site was designed, the designer decided that it would be a good idea to have future webmasters scroll to the bottom of the webpage every time it was updated, and manually write in the time and date.
When one has to update multiple pages, that gets quite tedious. So first I created an iframe with the footer in it. I then opened every page, deleted the footer, and placed in it the iframe. Took a while, but simple enough. However, that left me with a problem. Unless I wanted it to be a Site Last Updated timestamp instead of page specific, it wouldn't work.
So I pulled out my PHP knowledge. I figured, there has to be a way that PHP can check the date that the current page was last updated. All files, html included, have Date Created and Date Modified information attached. And I was right, PHP can do that. Enter the second problem. I wanted the full page that users were viewing, not the iframe. So the PHP had to find the date modified of the parent document. Not possible.
I started looking for ways around, and finally checked what the referrer is on an iframe. Lo and behold, it's the parent document, every time. So all I had to do was put it together. PHP grabs the full URL of the parent page. Then it cuts off the top part down to just that file name, as well as any folder it's in, then grabs the date modified, and displays it. It won't have to ever be touched again, it's accurate for every page, and if I need to change it, I change one file, and it's fixed for the entire website.
PHP is wonderful.
Friday, December 9, 2011
New Data Files Table
For those of you who have been following this blog for a long time, you might remember that over the summer I mentioned several times that I'm building a new website. I didn't want to share it until it was entirely done, but I'm just too excited about one new page to keep it entirely under wraps. A few of you have seen it already, (and given good advice), and it's now finished, visually and code wise.
The page I'm speaking of is a data table. Very similar code wise to the one I did over the summer, I've added some things that I'd learned since then as well as improved the efficiency of the javascript coding. The main difference though is the visual style. That part is what took me a good 2 months to settle down with, because I'm NOT an artist.
Inspired by the new Hotmail actually, I'm going for a white and light blue theme. One thing I was worried about initially was having that gradient go the full length of the options panel, but I really like it now that it's there. It distinguishes itself from the table itself while still maintaining visual continuity.
Now you might notice there aren't many files yes, and that's true. Only about a third of thing things that'll be there are there, and all the options in the options panel will be represented. It's just a matter of inserting the data into the SQL database though, I haven't gotten around to it. Besides adding more data, the table is finished.
Let me be clear, the site it self is not done, just this single page. You can feel free to look around the rest of it, but it's only about 60% complete. Next page on the list is the class schedule page. I want to stay with the white and light blue theme that I've got going on in the class files page, instead of just the block colors I have right now. So without further adieu, check it out.
Data Table
Any thoughts? Hate it, love it? Leave me a comment.
The page I'm speaking of is a data table. Very similar code wise to the one I did over the summer, I've added some things that I'd learned since then as well as improved the efficiency of the javascript coding. The main difference though is the visual style. That part is what took me a good 2 months to settle down with, because I'm NOT an artist.
Inspired by the new Hotmail actually, I'm going for a white and light blue theme. One thing I was worried about initially was having that gradient go the full length of the options panel, but I really like it now that it's there. It distinguishes itself from the table itself while still maintaining visual continuity.
Now you might notice there aren't many files yes, and that's true. Only about a third of thing things that'll be there are there, and all the options in the options panel will be represented. It's just a matter of inserting the data into the SQL database though, I haven't gotten around to it. Besides adding more data, the table is finished.
Let me be clear, the site it self is not done, just this single page. You can feel free to look around the rest of it, but it's only about 60% complete. Next page on the list is the class schedule page. I want to stay with the white and light blue theme that I've got going on in the class files page, instead of just the block colors I have right now. So without further adieu, check it out.
Data Table
Any thoughts? Hate it, love it? Leave me a comment.
Wednesday, July 20, 2011
Schedule Creator Revisited
I finished the visual aspects of my schedule creator tool earlier this summer. I never got around to actually making it work though, since that would require PHP. Instead I went and learned PHP and then created my dynamic data table.
Since that is finished, I'm turning my sites back to the schedule creator. I pulled up my color bed test page, dusted it off, and added a submit button.
The end goal is to have the user click the submit link, which will lead to a "results" PHP file, which will appear as a plain HTML file to the user. The user will save the file as their schedule file to be placed directly into their schedule folder of their ICS webspace template. The PHP file will be reusable, it'll just re-write itself for everyone, but never actually change itself.
Breaking this down, there are three problems which have to be overcome. One, create an array in which every color cell is accounted for, with their background colors. Two, send that array to the PHP document. Three, write out the table using that array.
Part one is now done, it took me about an hour, because I had to figure a couple things out. I ended up keeping the ID constant for all color blocks, and then gave each an individual class. This is backwards of normal web development, but it's easier to get a class using jQuery than it is to get an ID. One other problem is that you can't start an ID or a class with a number. So each one got a class of "block#". Then I parsed that string to get just the number, and placed it in the array each time a color block was clicked.
Part two is what I'm looking at now, and that will be the most difficult part I think. Once I have the array in PHP, displaying it will be simple.
Since that is finished, I'm turning my sites back to the schedule creator. I pulled up my color bed test page, dusted it off, and added a submit button.
The end goal is to have the user click the submit link, which will lead to a "results" PHP file, which will appear as a plain HTML file to the user. The user will save the file as their schedule file to be placed directly into their schedule folder of their ICS webspace template. The PHP file will be reusable, it'll just re-write itself for everyone, but never actually change itself.
Breaking this down, there are three problems which have to be overcome. One, create an array in which every color cell is accounted for, with their background colors. Two, send that array to the PHP document. Three, write out the table using that array.
Part one is now done, it took me about an hour, because I had to figure a couple things out. I ended up keeping the ID constant for all color blocks, and then gave each an individual class. This is backwards of normal web development, but it's easier to get a class using jQuery than it is to get an ID. One other problem is that you can't start an ID or a class with a number. So each one got a class of "block#". Then I parsed that string to get just the number, and placed it in the array each time a color block was clicked.
Part two is what I'm looking at now, and that will be the most difficult part I think. Once I have the array in PHP, displaying it will be simple.
Friday, July 8, 2011
Data Table Finished
Well, finally finished with the data table entirely. For now at least. It's been added to the projects section of my website, complete with description and even links to test pages for different aspects.
Project Hub
Next week I'm going to be looking into user accounts and how that works, and I might eventually use the data table as a base to build onto with user accounts letting users not only add themselves, but also go back in and edit themselves as well. Well see how that goes next week.
I've also gotten my backups up to date, the last I'd made before the site went offline last weekend was from early May, so it's good to know that I'm protected if it happens again.
Project Hub
Next week I'm going to be looking into user accounts and how that works, and I might eventually use the data table as a base to build onto with user accounts letting users not only add themselves, but also go back in and edit themselves as well. Well see how that goes next week.
I've also gotten my backups up to date, the last I'd made before the site went offline last weekend was from early May, so it's good to know that I'm protected if it happens again.
Friday, June 24, 2011
Weekly Project - Complete
I set out my goal for this week on Monday. The goal was to take everything I've learned about jQuery, PHP, and SQL over the past month and a half, and use it all to make an interactive data table.
I have accomplished my goal! Check it out.
I actually had 90% of it finished yesterday, and so today was planning on adding a bonus student portal, where students could add themselves to the database. This week is Stars though, at Purdue. That means that the campus is flooded with incoming freshman, all of which seem to need help with setting up their accounts. I got called to another lab to help, and as a result didn't really have much free time. I did manage to do a little tweaking though, and I added 3 select all boxes, one for each attribute.
This weekend, the student portal!
I have accomplished my goal! Check it out.
I actually had 90% of it finished yesterday, and so today was planning on adding a bonus student portal, where students could add themselves to the database. This week is Stars though, at Purdue. That means that the campus is flooded with incoming freshman, all of which seem to need help with setting up their accounts. I got called to another lab to help, and as a result didn't really have much free time. I did manage to do a little tweaking though, and I added 3 select all boxes, one for each attribute.
This weekend, the student portal!
Thursday, June 23, 2011
Another Update
Yesterday night I went ahead and finished the column changing buttons, and got everything working as it would appear to the end user. It was all static though, every name put in by hand.
I came to work today and determined to finish converting to PHP. And I did. That went very quickly actually, because each version of the table became a simple while loop.
The biggest problem though, happened when I needed to get the number of students from the database to my javascript file. This was necessary because the list of students is inside a container div, which has no default height set. If it had a static height, then the list might overflow, of the page might be longer than needed. If it had no height, then when less students are displayed, the header would follow the bottom of the list up, and could overlap with the search panel.
So the height of the container is set each time the page loads as the height necessary to show all students. This is accomplished by using each student's unique ID from the database. I access the max ID, and that is the number of students. Each student is 42 px in height, and the column titles are the same. So the number of students plus 1, times 42, is the total height.
The problem was getting the number of students to the javascript file. I tried using the PHP to set an invisible div's class to that number, and then use attr class in jQuery. But while it would grab the number, say 14, it wouldn't be a number. It would be a character 14.
After about a half hour, I finally moved that section of the jQuery code into the html main doc, and just uses PHP to create the line, num_students = 14;. It is now working, and the last thing I have to do is fix the multiple orders of display.
I came to work today and determined to finish converting to PHP. And I did. That went very quickly actually, because each version of the table became a simple while loop.
The biggest problem though, happened when I needed to get the number of students from the database to my javascript file. This was necessary because the list of students is inside a container div, which has no default height set. If it had a static height, then the list might overflow, of the page might be longer than needed. If it had no height, then when less students are displayed, the header would follow the bottom of the list up, and could overlap with the search panel.
So the height of the container is set each time the page loads as the height necessary to show all students. This is accomplished by using each student's unique ID from the database. I access the max ID, and that is the number of students. Each student is 42 px in height, and the column titles are the same. So the number of students plus 1, times 42, is the total height.
The problem was getting the number of students to the javascript file. I tried using the PHP to set an invisible div's class to that number, and then use attr class in jQuery. But while it would grab the number, say 14, it wouldn't be a number. It would be a character 14.
After about a half hour, I finally moved that section of the jQuery code into the html main doc, and just uses PHP to create the line, num_students = 14;. It is now working, and the last thing I have to do is fix the multiple orders of display.
Monday, June 20, 2011
Fully Interactive Data Table
The interesting thing about my schedule on Monday and Tuesday is that because I work opening shifts, I get very little sleep before, and so end up taking a nap after. What this does is seemingly split the day in 2 parts, which means I can do quite a bit of work at work, and then wake up in the afternoon and evening and do more, without it seeming to drag on.
I spent a while laying in bed thinking about what I want to do, and I'm going to skip a few things I'd been planning on doing. Instead I'm going to go straight into a more ambitious project, that will give me a better idea of the difficulties involved with my upcoming project. The plan right now for the rest of this week is to create a webpage with a search bar on the side, and a table on the right. It will connect to a database, already filled in. There will be several forms of interactivity.
First, the user will be able to change the items displayed in the table using the search options, similar to Newegg's search feature, but in real time without reloading the page. This will be done with jQuery, hiding and displaying items with certain classes, as checkmark boxes are selected or unselected. There will be several columns, each being an 'attribute' with several options.
Second, the user will be able to change how the list/table is organized, by clicking on column headers. Up/down arrows will indicated ascending/descending, and a second click on the selected column will flip that.
This is hardly a groundbreaking idea, and it's not meant to be. But what it is, is a page that is beyond anything I've ever done before, yet builds on everything I've learned up to this point. No individual piece should be terribly difficult. I think the most complicated thing will be making sure that the PHP makes everything appear correctly, with echo. It's Monday evening now, I'll put in a start to it, but I'm not going to spend much time now, because I've got plans to meet up with friends later. However, I've got a 5 hour shift at work tomorrow with nothing to do but code, so I'll certainly have something to show by the end of it.
I spent a while laying in bed thinking about what I want to do, and I'm going to skip a few things I'd been planning on doing. Instead I'm going to go straight into a more ambitious project, that will give me a better idea of the difficulties involved with my upcoming project. The plan right now for the rest of this week is to create a webpage with a search bar on the side, and a table on the right. It will connect to a database, already filled in. There will be several forms of interactivity.
First, the user will be able to change the items displayed in the table using the search options, similar to Newegg's search feature, but in real time without reloading the page. This will be done with jQuery, hiding and displaying items with certain classes, as checkmark boxes are selected or unselected. There will be several columns, each being an 'attribute' with several options.
Second, the user will be able to change how the list/table is organized, by clicking on column headers. Up/down arrows will indicated ascending/descending, and a second click on the selected column will flip that.
This is hardly a groundbreaking idea, and it's not meant to be. But what it is, is a page that is beyond anything I've ever done before, yet builds on everything I've learned up to this point. No individual piece should be terribly difficult. I think the most complicated thing will be making sure that the PHP makes everything appear correctly, with echo. It's Monday evening now, I'll put in a start to it, but I'm not going to spend much time now, because I've got plans to meet up with friends later. However, I've got a 5 hour shift at work tomorrow with nothing to do but code, so I'll certainly have something to show by the end of it.
More Progress
I didn't do much with SQL over the weekend. I did however write up one quick page, based on the earlier adding page. The sole function of this page is to view the database of names, which at the time of this writing consists of 500 names. The user can input the range of names he or she wishes to view, and then the names will appear. The user can also switch between list organizations, as before.
My goal for the new few days is to add the option to reverse ascending and descending order for all 3 options, as well as the ability to add less than 10 names in the main page. And possibly tie everything together.
The problem right now is that there are 10 rows in which to add names. If less than 10 are filled out, then blank space is inserted. It shouldn't be to hard to add validation to the input, I just have to spend the time to figure out how.
My goal for the new few days is to add the option to reverse ascending and descending order for all 3 options, as well as the ability to add less than 10 names in the main page. And possibly tie everything together.
The problem right now is that there are 10 rows in which to add names. If less than 10 are filled out, then blank space is inserted. It shouldn't be to hard to add validation to the input, I just have to spend the time to figure out how.
Friday, June 17, 2011
Almost There
As I set for yesterday, my current goal in life is creating a webpage in which a user sees 10 rows of input boxes, with 2 columns. They will be able to enter 10 names, first and last. Upon clicking submit, the document will use PHP to send the information into a mySQL database. It will then pull that information out and display it in the order entered. Using options, the user will then be able to change the method of display, alphabetical by first name, last name, or order entered. Or reverse for any of those 3.
Yesterday I researched mySQL for the first time, and then moved to the PHP section of my code needed. I wrote up as proof of concept a comment box. However, while the comment box worked and took data from a submitted text box, it stored that in a plain txt file, not an SQl database.
Today, I got my mySQL database up and running, and figured out how to interact with it from PHP. I now have a page working allowing a user to add 2 names to the database. Next I need to change the code to a looping array which will be more efficient for 10 people.
The last big thing will be the different modes of display, and then I shall have all the tools I need to complete the big project which is still in the planning and therefore secret stage.
EDIT: (2:51 pm) I now have both the send to and retrieve functions up and working. Each person adds 10 new names, and then the PHP displays only the last 10 from the database. Now finally I am on to the last challenge, setting up the multiple display orders. Onward!
EDIT: (4:58 pm) Success! Check it out.
Yesterday I researched mySQL for the first time, and then moved to the PHP section of my code needed. I wrote up as proof of concept a comment box. However, while the comment box worked and took data from a submitted text box, it stored that in a plain txt file, not an SQl database.
Today, I got my mySQL database up and running, and figured out how to interact with it from PHP. I now have a page working allowing a user to add 2 names to the database. Next I need to change the code to a looping array which will be more efficient for 10 people.
The last big thing will be the different modes of display, and then I shall have all the tools I need to complete the big project which is still in the planning and therefore secret stage.
EDIT: (2:51 pm) I now have both the send to and retrieve functions up and working. Each person adds 10 new names, and then the PHP displays only the last 10 from the database. Now finally I am on to the last challenge, setting up the multiple display orders. Onward!
EDIT: (4:58 pm) Success! Check it out.
Thursday, June 16, 2011
SQL
Today I turned my sights on SQL, which is a database language. Information is stored in the database and can be retrieved with PHP, to be displayed in different ways.
My goal for the next few days will be a page that has 10 text boxes, for me to enter names in. After I submit, I want the names to appear in a list. I want to then have the option to sort them alphabetically, as inputted, or reverse alphabetically.
I could do this manually with jQuery, the last part anyway. I could write the list 3 times, each time in the correct order, then have jQuery hide 2 of them, and switch which 2 are hidden when I click. But I'd have to do it manually. PHP and SQL should be able to do it automatically.
I doubt this will be done today, I've got less than 4 hours until my shift is over. I'm not even sure I'll be able to get mySQL up and running on my webspace. But we shall see.
EDIT (5:51 pm):
Purdue offers students a mySQL account, which I've finally figured out how to access. From the web portal that is included, I've been able to create a new table and add data, as well as remove data and edit data. Next step, figuring out how to access the database from a webpage I create, and setting up the PHP calls. 2 more hours, what shall they bring us.
EDIT (7:48 pm):
I ended up switching gears to learn about HTML forms. Something I should have done a while ago, but hadn't. My first working experiment lets a user submit 5 names. It then writes the names to a txt file and lastly reads it back to the user. Demo, Text File (For confirmation).
Next I went after something more ambitious, a comment box. Users can enter a name and a comment, and then have it displayed back to them. The comment is recorded in a text document with that person's name, and the date and time of the comment. Try it out and let me know what you think, I'll be able to see any comments you leave.
My goal for the next few days will be a page that has 10 text boxes, for me to enter names in. After I submit, I want the names to appear in a list. I want to then have the option to sort them alphabetically, as inputted, or reverse alphabetically.
I could do this manually with jQuery, the last part anyway. I could write the list 3 times, each time in the correct order, then have jQuery hide 2 of them, and switch which 2 are hidden when I click. But I'd have to do it manually. PHP and SQL should be able to do it automatically.
I doubt this will be done today, I've got less than 4 hours until my shift is over. I'm not even sure I'll be able to get mySQL up and running on my webspace. But we shall see.
EDIT (5:51 pm):
Purdue offers students a mySQL account, which I've finally figured out how to access. From the web portal that is included, I've been able to create a new table and add data, as well as remove data and edit data. Next step, figuring out how to access the database from a webpage I create, and setting up the PHP calls. 2 more hours, what shall they bring us.
EDIT (7:48 pm):
I ended up switching gears to learn about HTML forms. Something I should have done a while ago, but hadn't. My first working experiment lets a user submit 5 names. It then writes the names to a txt file and lastly reads it back to the user. Demo, Text File (For confirmation).
Next I went after something more ambitious, a comment box. Users can enter a name and a comment, and then have it displayed back to them. The comment is recorded in a text document with that person's name, and the date and time of the comment. Try it out and let me know what you think, I'll be able to see any comments you leave.
Wednesday, June 15, 2011
Limitations of PHP
The more I've learned about PHP, the more I realize how limited it is by itself. All PHP on a page runs before the page is even sent to a user's browser, which limits interactivity. Turns out another technology, AJAX, is needed to let to user communicate with the PHP and therefore interact. But then it turns out, AJAX isn't an individual thing, it's a collection itself.
However, javascript figures in prominently, which simplifies my life immensely. I took today off and relaxed, but tomorrow I shall return to the grind stone and see if I can come up with something more interesting than a page that tells you the date and time of log in.
EDIT: One thing that I've also realized is that there isn't much need to run PHP without reloading the page. The clock I wanted to write would be, but I can probably do that entire with jQuery.
However, javascript figures in prominently, which simplifies my life immensely. I took today off and relaxed, but tomorrow I shall return to the grind stone and see if I can come up with something more interesting than a page that tells you the date and time of log in.
EDIT: One thing that I've also realized is that there isn't much need to run PHP without reloading the page. The clock I wanted to write would be, but I can probably do that entire with jQuery.
Subscribe to:
Posts (Atom)
